/*
    Document   : local-project
    Version    : 4.0.0
    Created on : 21-05-2026
    Author     : Ricardo Contreras S.
    Description: Design system USACH - Paleta institucional
                 Turquesa #00A499 · Naranjo #EA7600 · Gris oscuro #394049
                 Manual de Normas Gráficas USACH
*/

/* ════════════════════════════════════════════════════════════
   VARIABLES — Paleta Institucional USACH
   ════════════════════════════════════════════════════════════ */
:root {
    /* Turquesa institucional y sus variantes */
    --t-base:  #00A499;
    --t-dark:  #007D74;
    --t-80:    #33B6AD;
    --t-60:    #66C9C1;
    --t-40:    #99DBD6;
    --t-20:    #CCEDEA;
    --t-10:    #E5F6F5;
    --t-05:    #EBF8F7;

    /* Naranjo institucional y sus variantes */
    --n-base:  #EA7600;
    --n-dark:  #B85A00;
    --n-80:    #EE9133;
    --n-60:    #F2AD66;
    --n-40:    #F7C899;
    --n-20:    #FBE4CC;

    /* Gris institucional y variantes */
    --g-base:  #394049;
    --g-med:   #6C7580;
    --g-light: #E9ECEF;
    --g-10:    #F5F6F7;
    --g-05:    #fafafa;

    /* Semánticos */
    --border:  #C8E6E4;
    --bg:      #fafafa;
    --text:    #2C3540;
    --font:    'Segoe UI', Arial, Verdana, sans-serif;
}

/* ════════════════════════════════════════════════════════════
   BASE
   ════════════════════════════════════════════════════════════ */
body {
    background-color: var(--bg);
    font-family: var(--font);
    color: var(--text);
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
}

body * {
    font-family: var(--font);
    text-decoration: none;
}

* a:hover { cursor: pointer; }

iframe { border: 0; }

label { font-weight: normal; }

/* ════════════════════════════════════════════════════════════
   HELPERS DE LAYOUT (conservados por compatibilidad)
   ════════════════════════════════════════════════════════════ */
.inner-body        { margin: 0 0 0 5px; padding: 0; }
.row.content       { height: 90%; }
.home-iframe       { height: 82vh; width: 100vw; }
.div-inner-iframe  { height: 85vh; width: 95vw; }
.inner-iframe      { border: 0 !important; margin: 0 !important; width: 95vw; height: 85vh;
                     position: relative; background-color: white; }
.content-record    { width: 90% !important; }
.no-padding        { padding: 0; margin: 0; }
.data-tables-container { width: 95%; }
.center-div        { display: flex; justify-content: center; align-items: center; align-content: center; }
.imageLink         { cursor: pointer; }
.custom-button     { width: 150px !important; }
.version-bottom-right { position: fixed; bottom: 0; right: 0; margin: 5px; }
.input-inline      { display: inline; }
.input-agno        { min-width: 50px; max-width: 50px; padding: 0; margin: 0; text-align: center; }
.input-sem         { min-width: 20px; max-width: 20px; text-align: center; padding: 0; margin: 0; }

/* ════════════════════════════════════════════════════════════
   LOGIN
   ════════════════════════════════════════════════════════════ */
.login_image  { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }
.usach-login  { background-color: var(--g-base); }
.boder-login  { border-left: 2px solid var(--t-40); }
.header-login { color: var(--g-base); padding: 0; margin: 0; text-align: center; }

.login-div {
    max-width: 400px;
    margin: 30px auto;
}
.login-div form {
    margin-bottom: 15px;
    box-shadow: 0 4px 14px rgba(0, 164, 153, 0.14);
    padding: 30px;
    border-radius: 8px;
    background: #fff;
    border-top: 4px solid var(--t-base);
}
.login-div h2        { margin: 0 0 15px; color: var(--g-base); }
.login-btn           { min-height: 38px; border-radius: 4px; font-size: 0.93rem; }
.logo-login          { width: 390px; max-width: 90%; }
.input-group-addon .fa { font-size: 18px; }

/* ════════════════════════════════════════════════════════════
   HEADER HOME + NAVBAR — una sola línea horizontal plana
   El header colapsa a 0 altura; el texto de bienvenida se
   posiciona de forma absoluta dentro del espacio del navbar.
   ════════════════════════════════════════════════════════════ */
.header-home {
    height: 0;
    overflow: visible;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    position: relative;
    z-index: 1031;          /* sobre el navbar (Bootstrap usa 1030) */
}
.header-home .container,
.header-home .row,
.header-home [class*="col"] {
    height: 0;
    overflow: visible;
    padding: 0;
    margin: 0;
}
.header-home p {
    position: fixed;        /* fijo al viewport — evita que col-lg-8/col-sm-12 (position:relative en BS4/BS5) intercepten el contexto */
    top: 12px;              /* centrado vertical: (46px navbar − 22px chip) / 2 */
    right: 121px;           /* 16px(navbar-pad) + 80px(pill) + 10px(ul-pad) + 1px(border) + 6px(margin) + 8px(gap) */
    z-index: 1035;          /* sobre el navbar */
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
    margin: 0;
    padding: 3px 10px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.40);
    border-radius: 12px;
    text-align: center;
    text-transform: uppercase;
}

/* ════════════════════════════════════════════════════════════
   NAVBAR — barra única plana con acento naranjo al pie
   ════════════════════════════════════════════════════════════ */
.navbar {
    margin: 0;
    border-radius: 0;
    background: #008880 !important;  /* intermedio entre #00A499 (original) y #007D74 (oscuro) — contraste ~4:1 con blanco */
    border-bottom: 3px solid var(--n-base);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    padding: 0 1rem;
    min-height: 46px;
    transition: opacity 0.35s ease;
}
.navbar.navbar-curso-activo         { opacity: 0.28; }
.navbar.navbar-curso-activo:hover   { opacity: 1; }

/* Logo — separador derecho para distinguirlo del menú */
.navbar-brand {
    padding: 0.3rem 1rem 0.3rem 0;
    margin-right: 0.5rem !important;
    border-right: 1px solid rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
}
.navbar-brand img {
    width: 36px;               /* muestra solo el círculo USACH: 229px / (749/40) ≈ 36px de los 749px totales */
    height: 40px;
    object-fit: cover;
    object-position: left center;  /* recorta el texto "SAI..." quedando solo el escudo circular */
    filter: invert(1) hue-rotate(180deg);  /* negro→blanco (escudo); hue-rotate restaura turquesa y naranjo del arco */
    transition: transform 0.2s ease, opacity 0.2s ease;
    opacity: 0.97;
}
.navbar-brand:hover img { transform: scale(1.07); opacity: 1; }

/* Links de navegación */
.navbar-dark .navbar-nav .nav-link,
.navbar .navbar-nav .nav-link {
    color: #fff !important;
    font-size: 0.84rem;
    font-weight: 500;
    padding: 0.55rem 0.9rem !important;
    letter-spacing: 0.1px;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:hover {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.08);
    border-bottom-color: var(--n-base);     /* subrayado naranjo al hacer hover */
}
.navbar-dark .navbar-nav .nav-link.show,
.navbar .navbar-nav .nav-link.show {
    color: #fff !important;
    background-color: rgba(0, 0, 0, 0.12);
    border-bottom-color: var(--n-base);
}

/* Dropdown */
.navbar .dropdown-menu {
    border: none;
    border-radius: 6px;
    border-top: 3px solid var(--t-base);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    min-width: 210px;
    padding: 0.35rem 0;
    margin-top: 2px;
}
.navbar .dropdown-item {
    font-size: 0.84rem;
    padding: 0.48rem 1.2rem;
    color: var(--g-base);
    transition: background 0.1s, padding-left 0.1s;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    background-color: var(--t-10);
    color: var(--t-dark);
}
.navbar .dropdown-divider { border-color: var(--t-20); margin: 0.25rem 0; }

/* Toggler móvil */
.navbar-toggler      { border-color: rgba(255, 255, 255, 0.4); padding: 0.25rem 0.5rem; }
.navbar-toggler-icon { filter: invert(1); }

/* Botón de cierre de sesión — diferenciado del resto */
.navbar-right {
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    padding-left: 0.6rem;
    margin-left: auto !important;   /* Bootstrap 5 eliminó mr-auto; esto garantiza que Salir llegue al extremo derecho */
}
.navbar-right .nav-item .nav-link {
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 0.8rem !important;
    padding: 0.3rem 0.75rem !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.navbar-right .nav-item .nav-link:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
    color: #fff !important;
}

/* Variantes de header interno */
.header-interno {
    background: var(--t-dark);
    margin-top: 10px;
    border-radius: 4px 4px 0 0;
}
.header-interno .container { margin: 0; }
.header-interno p          { color: white; text-align: left; margin: 0; }

.nav-header-interno {
    background-color: var(--t-80);
    border-color: var(--t-80);
}
.nav-header-interno a        { color: white !important; }
.nav-header-interno a:hover  { color: #fff !important; background: rgba(0,0,0,.1); }

.nav-header-interno2 {
    background-color: var(--t-60);
    border-color: var(--t-60);
}
.nav-header-interno2 a       { color: white !important; }
.nav-header-interno2 a:hover { color: #fff !important; }

/* ════════════════════════════════════════════════════════════
   TITLE-DIV  (cabecera de sección en páginas internas iframe)
   ════════════════════════════════════════════════════════════ */
.title-div {
    background-color: var(--n-20);
    border-left: 4px solid var(--n-base);
    color: var(--g-base);
    font-weight: 700;
    font-size: 0.92rem;
    padding: 8px 14px;
    margin: 10px 0 6px;
    border-radius: 0 4px 4px 0;
    letter-spacing: 0.15px;
}

/* ════════════════════════════════════════════════════════════
   TABLAS
   ════════════════════════════════════════════════════════════ */
table {
    border-collapse: collapse;
    width: 99%;
    margin: 5px;
    font-size: 0.875rem;
}

thead {
    background: var(--g-base);   /* #394049 — gris institucional, claramente distinto al navbar */
    color: #fff;
}

th {
    color: #fff;
    font-weight: 600;
    padding: 6px 11px;
    text-align: left;
    border-right: 1px solid rgba(255, 255, 255, 0.18);
    background-color: var(--g-base);  /* #394049 — gris institucional */
}

td {
    padding: 4px 6px 4px 8px;
    vertical-align: middle;
}

tr               { height: auto; }
tr.header        { text-align: center; font-weight: bold; }
tr.header a      { color: white; }
tr.even          { background: var(--t-05); }
tr.odd,
tr td input,
tr td textarea,
tr td input.label-dark,
tr td select     { background: white; }
tr.even:hover,
tr.odd:hover     { background: var(--t-20); }
tr.odd  td input:hover  { background: var(--t-10); }
tr.even td input:hover  { background: var(--t-20); }

tr td input,
tr td textarea {
    color: var(--g-base);
    border: 1px solid var(--border);
    border-radius: 4px;
    margin: 2px 0;
    padding: 1px 4px;
}
tr td input.label-dark  { vertical-align: top; }

/* Bootstrap 5 — table overrides */
.table thead th {
    background-color: var(--g-base);  /* #394049 — gris institucional */
    color: #fff;
    border-color: rgba(255, 255, 255, 0.14);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 7px 10px;
}
.table tbody td { font-size: 0.85rem; padding: 6px 10px; vertical-align: middle; }
.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-striped-bg: var(--t-05);
    background-color: var(--t-05);
}
.table > tbody > tr:hover > * {
    background-color: var(--t-20);
}

/* Inputs/selects inside table-responsive containers — prevent horizontal overflow */
.table-responsive td > input,
.table-responsive td > select,
.table-responsive td > textarea {
    max-width: 100%;
    box-sizing: border-box;
}

/* DataTables — DataTables aplica color en el <td>, no en el <tr>.
   Bootstrap 5 aplica el striping con box-shadow (no background-color), por eso !important
   en background-color no era suficiente. box-shadow: none !important elimina la capa de
   overlay de Bootstrap y deja que DataTables controle el color completamente. */
table.dataTable tbody tr.odd  > td,
table.dataTable tbody tr.odd  > th            { background-color: #ffffff !important;
                                                box-shadow: none !important; }

table.dataTable tbody tr.even > td,
table.dataTable tbody tr.even > th            { background-color: var(--t-05) !important;
                                                box-shadow: none !important; }

table.dataTable tbody tr:hover > td,
table.dataTable tbody tr:hover > th           { background-color: var(--t-20) !important;
                                                box-shadow: none !important; }

table.dataTable thead th,
table.dataTable thead td                      { background-color: var(--g-base) !important;
                                                color: #fff !important;
                                                border-bottom: 2px solid rgba(255,255,255,.15); }

/* Paginación DataTables — Bootstrap 5 usa ul.pagination / li.page-item / a.page-link */

/* Botón activo (página actual) */
.dataTables_wrapper .pagination .page-item.active .page-link {
    background-color: var(--t-base) !important;
    border-color: var(--t-base) !important;
    color: #fff !important;
}

/* Hover en botones de paginación */
.dataTables_wrapper .pagination .page-item:not(.active):not(.disabled) .page-link:hover {
    background-color: var(--t-20) !important;
    border-color: var(--t-40) !important;
    color: var(--t-dark) !important;
}

/* Estilo base de los links de paginación */
.dataTables_wrapper .pagination .page-link {
    color: var(--t-dark);
    border-color: var(--border);
    border-radius: 4px !important;
    margin: 0 2px;
    font-size: 0.85rem;
    padding: 0.3rem 0.65rem;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

/* Botón deshabilitado */
.dataTables_wrapper .pagination .page-item.disabled .page-link {
    color: var(--g-med);
    border-color: var(--g-light);
    background-color: #fff;
}

/* Focus ring institucional */
.dataTables_wrapper .pagination .page-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 164, 153, 0.25);
    outline: none;
}

/* Fallback para renderer standalone (.paginate_button) — por si algún DataTable no carga el integration JS */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--t-base) !important;
    border-color: var(--t-base) !important;
    color: #fff !important;
    border-radius: 4px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--t-10) !important;
    border-color: var(--t-40) !important;
    color: var(--t-dark) !important;
    border-radius: 4px;
}

/* Tablas legacy */
.loginTable {
    border: 1px solid var(--t-40);
    margin: -10px 0 10px;
    padding: 15px 30px 15px 50px;
    width: 100%;
}
.loginTable tr td        { vertical-align: middle; padding-left: 5px; }
.free-form-table         { border: 1px solid var(--t-10); width: 99%; }
.free-form-table tr td   { vertical-align: middle; }
.table-agno-sem          { margin-top: 10px; margin-bottom: 10px; }
.table-agno-sem tr td,
.table-search tr td      { padding-right: 5px; }

/* ════════════════════════════════════════════════════════════
   FORMULARIOS
   ════════════════════════════════════════════════════════════ */
.form-control,
.form-select {
    border-color: var(--border);
    color: var(--text);
    font-size: 0.875rem;
    border-radius: 5px;
    background-color: #fff;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--t-base);
    box-shadow: 0 0 0 0.2rem rgba(0, 164, 153, 0.2);
    outline: none;
}

/* Inputs legacy */
.input,
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="range"]) {
    background-color: white;
    color: var(--g-base);
    border: 1px solid var(--border);
    border-radius: 4px;
    height: 28px;
    margin: 3px 0;
}

textarea {
    width: 90%;
    border: 1px solid var(--border);
    border-radius: 4px;
    margin: 3px;
    padding: 2px 5px;
    background-color: #fff;
    color: var(--text);
}

/* Input groups */
.input-group-text {
    background-color: var(--t-10);
    border-color: var(--border);
    color: var(--t-dark);
}

/* Campos de medida fija */
.rut     { max-width: 90px; text-align: right; }
.dv      { max-width: 16px; text-align: center; padding: 0; }
.materno,
.paterno { max-width: 200px; }
.nombre  { width: 210px; }
.foto    { height: 125px; width: 110px; border: 1px solid var(--t-40); padding: 3px; margin-bottom: 15px; }

/* ════════════════════════════════════════════════════════════
   BOTONES
   ════════════════════════════════════════════════════════════ */

/* btn-primary → naranjo (acción principal) */
.btn-primary {
    background-color: var(--n-base);
    border-color: var(--n-base);
    color: #fff;
    font-weight: 600;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--n-dark);
    border-color: var(--n-dark);
    color: #fff;
}
.btn-primary:focus {
    box-shadow: 0 0 0 0.2rem rgba(234, 118, 0, 0.35);
}
.btn-check:checked + .btn-primary,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--n-dark);
    border-color: var(--n-dark);
}

/* btn-turquesa → turquesa outline (marca, acciones secundarias) */
.btn-turquesa {
    background-color: #fff;
    border: 1px solid var(--t-base);
    color: var(--t-dark);
    font-weight: 600;
}
.btn-turquesa:hover {
    background-color: var(--t-10);
    border-color: var(--t-dark);
    color: var(--t-dark);
}

/* btn-warning → naranjo */
.btn-warning {
    background-color: var(--n-base);
    border-color: var(--n-base);
    color: #fff;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    background-color: var(--n-dark);
    border-color: var(--n-dark);
    color: #fff;
}
.btn-warning:focus { box-shadow: 0 0 0 0.2rem rgba(234, 118, 0, 0.35); }

/* btn-light → blanco con borde suave */
.btn-light {
    background-color: #fff;
    border-color: var(--border);
    color: var(--g-base);
}
.btn-light:hover {
    background-color: var(--t-10);
    border-color: var(--t-40);
    color: var(--t-dark);
}
.btn-light:focus { box-shadow: 0 0 0 0.2rem rgba(0, 164, 153, 0.18); }

/* btn-secondary → gris */
.btn-secondary {
    background-color: var(--g-med);
    border-color: var(--g-med);
    color: #fff;
}
.btn-secondary:hover {
    background-color: var(--g-base);
    border-color: var(--g-base);
    color: #fff;
}

/* btn-outline-primary → turquesa outline */
.btn-outline-primary {
    border-color: var(--t-base);
    color: var(--t-base);
}
.btn-outline-primary:hover {
    background-color: var(--t-base);
    border-color: var(--t-base);
    color: #fff;
}

/* btn-outline-secondary → gris outline */
.btn-outline-secondary {
    border-color: var(--g-med);
    color: var(--g-base);
}
.btn-outline-secondary:hover {
    background-color: var(--g-light);
    color: var(--g-base);
}

/* btn-danger → rojo (conservar para acciones destructivas) */
.btn-danger { background-color: #c0392b; border-color: #c0392b; }
.btn-danger:hover { background-color: #96281b; border-color: #96281b; }

/* ── Toolbar action buttons — icon + text inline, uniform width, compact size
   Targets only btn-group buttons inside .container-menu; modal/form buttons are unaffected. */
.container-menu .btn-group .btn {
    display:        inline-flex;
    align-items:    center;
    gap:            0.3rem;         /* space between icon and text */
    padding:        0.22rem 0.55rem; /* ~30% less height than Bootstrap default (0.375rem) */
    font-size:      0.875rem;
    line-height:    1.4;
}
@media (min-width: 576px) {
    .container-menu .btn-group .btn {
        min-width:      7.2rem;     /* 9rem × 0.8 = 20% less width */
        justify-content: center;
    }
}

/* ── buttons-div (botones legacy) ─────────────────────────── */
.buttons-div {
    height: auto;
    min-height: 34px;
    width: 100%;
    padding-bottom: 5px;
}
.buttons-div a,
.buttons-div button {
    display: block;
    float: left;
    font-size: 100%;
    line-height: 100%;
    font-weight: normal;
    color: var(--g-base);
}
.buttons-div button          { width: auto; overflow: visible; }
.buttons-div button img,
.buttons-div a img           { width: 16px; height: 16px; }

button:hover,
.buttons-div a:hover         { background-color: var(--t-10); color: var(--t-dark); }
.buttons-div a:active        { background-color: var(--t-base); color: #fff; }

button.back                  { float: right; }
button.positive,
button.back,
.buttons-div a.positive      { color: var(--t-dark); }
.buttons-div a.positive:hover,
button.positive:hover,
button.back:hover            { background-color: var(--t-base); color: #fff; }
.buttons-div a.positive:active { background-color: var(--t-dark); color: #fff; }

.buttons-div a.negative,
button.negative              { color: #c0392b; }
.buttons-div a.negative:hover,
button.negative:hover        { background: #fbe3e4; color: #c0392b; }
.buttons-div a.negative:active { background-color: #c0392b; color: #fff; }

/* ════════════════════════════════════════════════════════════
   CARDS (Bootstrap 5)
   ════════════════════════════════════════════════════════════ */
.card {
    border-color: var(--border);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.card-header {
    background-color: #fff;
    border-bottom: 3px solid var(--t-base);
    border-radius: 8px 8px 0 0 !important;
}
.card-header h3 {
    color: var(--g-base);
    text-align: center;
    margin: 0;
}
.card-body { font-size: 0.875rem; }
.card-footer {
    background-color: var(--t-base);
    border-top: none;
    border-radius: 0 0 8px 8px !important;
    text-align: center;
}
.card-footer a       { color: #fff; text-decoration: none; }
.card-footer a:hover { color: rgba(255, 255, 255, 0.8); }

/* ════════════════════════════════════════════════════════════
   MODAL
   ════════════════════════════════════════════════════════════ */
.modal-content {
    border: none;
    border-radius: 8px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}
.modal-header {
    background-color: var(--g-base);  /* #394049 — gris institucional, diálogos más formales */
    color: #fff;
    border-radius: 0 !important;
    padding: 0.75rem 1.1rem;
}
.modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}
.modal-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
}
.modal-footer {
    border-top: 1px solid var(--t-20);
    padding: 0.65rem 1.1rem;
}

/* ════════════════════════════════════════════════════════════
   ALERTAS BOOTSTRAP 5
   ════════════════════════════════════════════════════════════ */
.alert-primary {
    background-color: var(--t-10);
    border-color: var(--t-40);
    color: var(--t-dark);
}
.alert-warning {
    background-color: var(--n-20);
    border-color: var(--n-40);
    color: var(--n-dark);
}
.alert-info {
    background-color: var(--t-10);
    border-color: var(--t-40);
    color: var(--t-dark);
}

/* ════════════════════════════════════════════════════════════
   MENSAJES STRUTS2
   ════════════════════════════════════════════════════════════ */
.actionMessage li           { list-style: none; }
.actionMessage li span      { color: var(--t-dark); font-size: 0.88rem; }

.actionError li             { list-style: none; }
.actionError li span        { color: #c0392b; font-size: 1rem; font-weight: 600; }

.errorMessage ul,
.errorMessage ul li,
.errorMessage ul li span    {
    background: #c0392b;
    color: white !important;
    list-style: none;
    border-radius: 4px;
    padding: 2px 8px;
}
.errorLogin                 { background: #c0392b; color: white !important; }
.error                      { color: #c0392b; border: 0; }

/* Anchor genérico */
.anchor { color: var(--t-base); }
.link   { color: var(--t-base); }
.label-dark { color: var(--g-base); }

/* ════════════════════════════════════════════════════════════
   CALIFICACIONES
   ════════════════════════════════════════════════════════════ */
.aprobado  { color: #0e51a7 !important; }   /* azul institucional — igual que versiones anteriores */
.reprobado { color: #c0392b !important; }
.aprobado,
.reprobado { text-align: center !important; font-weight: 600 !important; }

/* ════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════ */
footer p,
.page-footer p {
    font-size: 0.74rem;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.85);
    background: var(--g-base);
    margin: 0;
    padding: 5px 0;
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
}
.page-footer {
    background: var(--g-base);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.74rem;
    text-align: center;
    padding: 5px 0;
    min-height: 28px;
}

/* ════════════════════════════════════════════════════════════
   ENCUESTAS
   ════════════════════════════════════════════════════════════ */
.pregunta  { text-align: left; }
.respuesta { text-align: center; }

/* ════════════════════════════════════════════════════════════
   BADGES / PILLS
   ════════════════════════════════════════════════════════════ */
.badge.bg-primary,
.badge-primary { background-color: var(--t-base) !important; color: #fff; }
.badge.bg-warning,
.badge-warning { background-color: var(--n-base) !important; color: #fff; }

/* ════════════════════════════════════════════════════════════
   MISC LEGACY
   ════════════════════════════════════════════════════════════ */
.container-menu  { margin: 0; padding: 0 0 15px 0; }
.search-table    { width: 700px; }
.search-table-div { width: 720px; overflow: auto; }

div#confirmacion,
div#msg,
div#confirmacion2,
div#msg2 { display: none; }

div#checkBar     { height: 25px; width: 33px; }
div#checkBar img { border: none; }

/* Colores de fondo para login antiguo */
#title-div {
    line-height: 30px;
    vertical-align: middle;
    height: 30px;
    width: 100%;
    background-color: var(--t-10);
    margin: auto;
}
#central-div {
    width: 100%;
    background-color: var(--bg);
    margin: auto;
}

/* Scrollbar personalizado (Webkit) */
::-webkit-scrollbar              { width: 7px; height: 7px; }
::-webkit-scrollbar-track        { background: var(--t-10); }
::-webkit-scrollbar-thumb        { background: var(--t-40); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover  { background: var(--t-base); }