/* ==========================================================================
   MANUAL DE MARCA SHAMAN 
   ========================================================================== */

:root {
    --shaman-blue: #4C31BE; /* Pantone: 2728 C */
    --shaman-gray-light: #ECECED; /* Cool Gray 1 C */
    --shaman-gray-dark: #4A4A49; /* Cool Gray 11 C */
    --shaman-gray-medium: #5C5D60; /* Cool Gray 10 C */
}

.navbar-shaman {
    background-color: var(--shaman-blue) !important;
    border: none;
}

.navbar-shaman .navbar-brand .brand,
.navbar-shaman .navbar-nav > li > a,
.navbar-shaman .navbar-nav > li > a p,
.navbar-shaman .logo i {
    color: #ffffff !important;
}

.btn-primary,
.btn-success,
.btn-info {
    background-color: var(--shaman-blue) !important;
    border-color: var(--shaman-blue) !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-success:hover,
.btn-info:hover {
    background-color: #3b2596 !important;
    border-color: #3b2596 !important;
}

body {
    color: var(--shaman-gray-dark) !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--shaman-blue) !important;
}

.text-success {
    color: var(--shaman-blue) !important;
}

.panel-heading,
.widget-header,
.table-header,
th {
    background-color: var(--shaman-gray-light) !important;
    background-image: none !important;
    color: var(--shaman-gray-dark) !important;
    border-color: #dcdcdc !important;
}

.panel-heading .panel-title,
.widget-header h3 {
    color: var(--shaman-blue) !important;
    font-weight: bold;
}


.subnavbar,
.subnavbar-inner,
.subnavbar .container > ul {
    background-color: var(--shaman-gray-light) !important;
    background-image: none !important;
}

.subnavbar .mainnav > li,
.subnavbar .mainnav > li > a {
    background-color: transparent !important;
    background-image: none !important;
}

.subnavbar .mainnav > li > a,
.subnavbar .mainnav > li > a > i,
.subnavbar .mainnav > li > a > span {
    color: var(--shaman-gray-dark) !important;
}

.subnavbar .mainnav > li.active > a,
.subnavbar .mainnav > li.selected-menu-option > a {
    background-color: #ffffff !important;
    border-bottom: 3px solid var(--shaman-blue) !important;
}

.subnavbar .mainnav > li.active > a,
.subnavbar .mainnav > li.active > a > i,
.subnavbar .mainnav > li.active > a > span,
.subnavbar .mainnav > li:hover > a,
.subnavbar .mainnav > li:hover > a > i,
.subnavbar .mainnav > li:hover > a > span,
.subnavbar .mainnav > li.selected-menu-option > a,
.subnavbar .mainnav > li.selected-menu-option > a > i,
.subnavbar .mainnav > li.selected-menu-option > a > span {
    color: var(--shaman-blue) !important;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    background-color: var(--shaman-blue) !important;
    border-color: var(--shaman-blue) !important;
    color: #ffffff !important;
}

.pagination > li > a,
.pagination > li > span {
    color: var(--shaman-gray-dark) !important;
}

.form-control,
.bootstrap-select .btn-default {
    color: var(--shaman-gray-dark) !important;
    border-color: #cccccc !important;
}

.form-control:focus,
.bootstrap-select .btn-default:focus,
.bootstrap-select .btn-default:active,
.bootstrap-select.open .btn-default {
    border-color: var(--shaman-blue) !important;
    color: var(--shaman-gray-dark) !important;
    outline: none !important;
    box-shadow: 0 0 5px rgba(76, 49, 190, 0.4) !important;
}

html body .btn.btn-primary.btn-outline,
html body .btn.btn-success.btn-outline,
html body .btn.btn-info.btn-outline,
html body .btn-success.btn-outline {
    color: var(--shaman-blue) !important;
    border-color: var(--shaman-blue) !important;
    background-color: transparent !important;
}

html body .btn.btn-success.btn-outline i,
html body .btn.btn-success.btn-outline span {
    color: var(--shaman-blue) !important;
}

html body .btn.btn-primary.btn-outline:hover,
html body .btn.btn-success.btn-outline:hover,
html body .btn.btn-info.btn-outline:hover,
html body .btn.btn-primary.btn-outline:focus,
html body .btn.btn-success.btn-outline:focus,
html body .btn.btn-info.btn-outline:focus {
    background-color: var(--shaman-blue) !important;
    color: #ffffff !important;
    border-color: var(--shaman-blue) !important;
}

html body .btn.btn-success.btn-outline:hover i,
html body .btn.btn-success.btn-outline:hover span {
    color: #ffffff !important;
}


html body select.btn-filter,
html body select.sel-filter,
html body .btn-filter.btn-outline {
    color: var(--shaman-blue) !important; /* Texto azul para que coincida con el resto */
    border-color: var(--shaman-blue) !important; /* Borde azul para que coincida */
    background-color: #ffffff !important; /* Fondo blanco por defecto */
}

html body select.btn-filter:hover,
html body select.sel-filter:hover,
html body .btn-filter.btn-outline:hover {
    background-color: var(--shaman-blue) !important;
    border-color: var(--shaman-blue) !important;
    color: #ffffff !important;
}

html body select.btn-filter:focus,
html body select.btn-filter:active,
html body select.sel-filter:focus,
html body select.sel-filter:active,
html body .btn-filter.btn-outline:focus,
html body .btn-filter.btn-outline:active {
    background-color: var(--shaman-blue) !important;
    border-color: var(--shaman-blue) !important;
    color: #ffffff !important;
    box-shadow: 0 0 5px rgba(76, 49, 190, 0.4) !important;
    outline: none !important;
}

html body .btn-filter.btn-outline:focus,
html body .btn-filter.btn-outline:active {
    border-color: var(--shaman-blue) !important; /* Borde azul al interactuar */
    color: var(--shaman-gray-dark) !important;
    box-shadow: 0 0 5px rgba(76, 49, 190, 0.4) !important;
}

html body select.sel-filter > option {
    background-color: #ffffff !important; /* Fondo blanco estándar */
    color: var(--shaman-gray-dark) !important; /* Texto oscuro */
}

html body .btn.btn-primary:active,
html body .btn.btn-primary:focus,
html body .btn.btn-primary:active:focus,
html body .btn.btn-primary.active,
html body .btn.btn-success:active,
html body .btn.btn-success:focus,
html body .btn.btn-success:active:focus,
html body .btn.btn-success.active,
html body .btn.btn-info:active,
html body .btn.btn-info:focus,
html body .btn.btn-info:active:focus,
html body .btn.btn-info.active {
    background-color: #3b2596 !important;
    border-color: #3b2596 !important;
    color: #ffffff !important;
    outline: none !important;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
}

html body .btn.btn-success:active i,
html body .btn.btn-success:focus i,
html body .btn.btn-success.active i {
    color: #ffffff !important;
}

/* 1. Color de las FORMAS SVG (los bordes curvos) al hacer Hover o estar Activa */
html body .tabs-style-shape nav li a:hover svg,
html body .tabs-style-shape nav li a:focus svg,
html body .tabs-style-shape nav li.tab-current a svg {
    fill: var(--shaman-blue) !important;
}

/* 2. Fondo del CUERPO de la pestaña (el span) al hacer Hover o estar Activa */
html body .tabs-style-shape nav li a:hover span,
html body .tabs-style-shape nav li a:focus span,
html body .tabs-style-shape nav li.tab-current a span {
    background-color: var(--shaman-blue) !important;
    color: #ffffff !important; /* Texto blanco para que resalte */
}

/* 3. Limpieza: Asegurar que las pestañas inactivas tengan texto oscuro */
html body .tabs-style-shape nav li a span {
    color: var(--shaman-gray-dark) !important;
}

/* ==========================================================================
   9. PANTALLA DE LOGIN (Split Screen Responsivo)
   ========================================================================== */

/* --- BASE Y ESCRITORIO --- */
.login-container {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background-color: #ffffff;
}

.left-panel {
    flex: 1;
    background: url('/img/signin/fondo_signin.png') no-repeat center center;
    background-size: cover;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.badge-portal {
    position: absolute;
    top: 40px;
    left: 0;
    background-color: #4DB8FF;
    color: white;
    padding: 12px 45px; 
    border-radius: 0 30px 30px 0;
    font-weight: bold;
    font-size: 18px !important; /* Cambiado a píxeles fijos y forzados */
    z-index: 2;
}

.logo-container {
    z-index: 2;
    text-align: center;
}

    .logo-container img {
        max-width: 350px;
    }

.right-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    position: relative;
    z-index: 10;
}

.form-wrapper {
    width: 100%;
    max-width: 450px;
    padding: 40px;
}

    .form-wrapper h1 {
        color: var(--shaman-blue);
        font-weight: 800;
        margin-bottom: 5px;
        font-size: 4rem; /* Textos más grandes */
    }

    .form-wrapper p.subtitle {
        color: #666666;
        font-size: 1.4rem; /* Subtítulo agrandado */
        margin-bottom: 40px;
    }

.input-group {
    margin-bottom: 25px;
    width: 100%;
}

    .input-group label {
        display: block;
        color: var(--shaman-gray-dark);
        font-size: 1.25rem;
        margin-bottom: 8px;
    }

.input-wrapper {
    position: relative;
    width: 100%;
}

    .input-wrapper i {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: #888888;
        font-size: 1.3rem;
    }

.loginFormInput {
    width: 100%;
    padding: 16px 15px 16px 45px;
    border: 1px solid #cccccc;
    border-radius: 30px;
    outline: none;
    font-size: 1.2rem;
    box-sizing: border-box;
    transition: border-color 0.3s;
    background-color: #ffffff;
}

    .loginFormInput:focus {
        border-color: var(--shaman-blue);
        box-shadow: 0 0 5px rgba(76, 49, 190, 0.3);
    }

.btn-login {
    width: 100%;
    padding: 16px;
    background-color: var(--shaman-blue);
    color: white;
    border: none;
    border-radius: 30px;
    font-weight: bold;
    font-size: 1.35rem;
    cursor: pointer;
    margin-top: 15px;
    transition: background-color 0.3s;
}

    .btn-login:hover {
        background-color: #3b2596;
    }

.version {
    text-align: center;
    color: #666;
    font-size: 0.9rem;
    margin-top: 40px;
    font-weight: bold;
}

.alert-login {
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 25px;
    font-size: 1rem;
}

/* --- COMPORTAMIENTO MOBILE (Sin interferencia de Razor) --- */
@media (max-width: 768px) {
    .login-container {
        flex-direction: column !important;
        height: auto !important;
        min-height: 100vh !important;
        overflow-y: auto !important;
    }

    .left-panel {
        flex: none !important;
        width: 100% !important;
        height: 35vh !important;
        min-height: 250px !important;
    }

    .right-panel {
        flex: none !important;
        width: 100% !important;
        min-height: 65vh !important;
        align-items: flex-start !important;
        padding-top: 20px !important;
    }

    .form-wrapper {
        padding: 20px !important;
        max-width: 100% !important;
    }

        .form-wrapper h1 {
            text-align: center !important;
            font-size: 2.8rem !important;
        }

        .form-wrapper p.subtitle {
            text-align: center !important;
            font-size: 1.15rem !important;
            margin-bottom: 30px !important;
        }

    .badge-portal {
        top: 20px !important;
        font-size: 1.1rem !important;
        padding: 8px 30px !important;
    }

    .logo-container img {
        max-width: 200px !important;
    }
}