/* ==========================================================================
   Fuentes auto-hospedadas.
   Para cambiar una familia: dejar el .woff2 en fonts/, editar el @font-face
   de abajo y la variable correspondiente en 01-tokens.css. Nada mas.
   ========================================================================== */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/Content/theme/fonts/inter-latin-wght-normal.woff2) format('woff2-variations');
}

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url(/Content/theme/fonts/space-grotesk-latin-wght-normal.woff2) format('woff2-variations');
}

/* ==========================================================================
   Tokens del sistema. Unico lugar donde se definen color, espaciado,
   tipografia, formas, tiempos y las medidas del chrome. Todo lo demas
   consume estas variables.
   ========================================================================== */

:root {
    /* --- Superficies (paleta azul profundo) --- */
    --bg:        #070b14;
    --surface-1: #0d1424;
    --surface-2: #131c30;
    --surface-3: #1a2540;
    --line:      #1b2740;
    --line-soft: rgb(27 39 64 / .55);

    /* --- Texto. Los contrastes son contra --bg. --- */
    --text:      #e6ecf7; /* 16,6:1 */
    --text-dim:  #8494b4; /*  6,5:1 - labels y secundarios */
    --text-mute: #5d6b8a; /*  3,7:1 - SOLO placeholders y deshabilitados */

    /* --- Marca. --brand nunca se usa como color de texto: 3,2:1 no alcanza. --- */
    --brand:        #0254d2;
    --brand-hover:  #0a63e8;
    --brand-active: #0146ad;
    --brand-text:   #6ea8ff; /* 8,2:1 - el azul cuando tiene que leerse */
    --brand-soft:   rgb(2 84 210 / .16);
    --brand-border: rgb(2 84 210 / .45);

    /* --- Semanticos. Los contrastes son contra --bg: estan elegidos para
           leerse SOBRE el fondo oscuro, no para tener texto encima. --- */
    --pos:  #25d0a0; /* 9,9:1 */
    --neg:  #ff5d73; /* 6,6:1 */
    --warn: #ffb547;

    /* Solo los dos que usan los botones solidos de la app. */
    --pos-hover: #3ddcb0;
    --neg-hover: #ff7686;

    /* --- Espaciado (escala de 4px, densidad compacta) --- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;

    /* --- Tipografia. Cambiar de fuente = cambiar estas dos lineas. --- */
    --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

    /* Escala del body de Bootstrap que el tema anterior usaba (1rem = 16px),
       mas 1px de holgura pedido en la revision visual. La densidad compacta
       habia bajado la base a 13px y se leia mal. */
    --fs-xs:   13px;
    --fs-sm:   15px;
    --fs-base: 17px;
    --fs-lg:   21px;
    --fs-xl:   25px;
    --fs-2xl:  33px;

    --lh-tight: 1.25;
    --lh-base:  1.5;

    /* --- Categoricos. No significan nada por si mismos: solo tienen que
           distinguirse entre si. Son para series de grafico y para las
           etiquetas que las acompañan, nunca para estados. Un verde de aca no
           quiere decir "bien"; para eso estan --pos y --neg de arriba.
           Vienen de la paleta que ya usaba el grafico de indices de NFA, para
           que la etiqueta y su linea sigan siendo del mismo color. --- */
    --cat-1: #3b82f6;
    --cat-2: #34d399;
    --cat-3: #8b5cf6;
    --cat-4: #fbbf24;
    --cat-5: #f472b6;
    --cat-6: #facc15;
    --cat-7: #f43f5e;
    --cat-8: #60a5fa;
    --cat-9: #a78bfa;

    /* --- Chrome. La navbar es fixed-top, asi que su alto y el despeje que el
           contenido necesita debajo tienen que salir del mismo numero. --- */
    --navbar-h: 56px;

    /* --- Formas --- */
    --r-sm: 4px;
    --r-md: 8px;
    --r-lg: 12px;

    /* --- Movimiento --- */
    --t-fast: 120ms;
    --t-base: 180ms;
    --t-slow: 280ms;
    --ease: cubic-bezier(.2, 0, 0, 1);

    /* --- Elevacion. En oscuro la elevacion es superficie + borde;
           la sombra queda para overlays reales. --- */
    --sh-overlay: 0 12px 32px rgb(0 0 0 / .55);

    /* Halo de marca. No es elevacion: no dice "esto esta mas arriba" sino
       "esto es de la casa". Es el unico resto del tema neon anterior, que
       envolvia cada tarjeta en cuatro capas de azul hasta 4rem. Queda una
       sola, corta y tenue: a esta escala lee como un contorno encendido y no
       como una lampara. Solo lo usa .card.border-secondary. */
    --sh-glow: 0 0 12px rgb(2 84 210 / .20);
}

/* ==========================================================================
   Puente con Bootstrap.
   Bootstrap 5.3 se dibuja leyendo sus propias variables. Redefinirlas aca es
   lo que evita tener que pelearle con selectores y !important.

   El selector es [data-bs-theme="dark"] y no :root a proposito: Bootstrap
   define ahi sus valores de modo oscuro, con la misma especificidad. Al usar
   el mismo selector y cargar despues, ganamos sin subir especificidad.
   ========================================================================== */

[data-bs-theme="dark"] {
    --bs-body-bg:          var(--bg);
    --bs-body-color:       var(--text);
    --bs-body-font-family: var(--font-body);
    --bs-body-font-size:   var(--fs-base);
    --bs-body-line-height: var(--lh-base);

    --bs-emphasis-color:  var(--text);
    --bs-secondary-color: var(--text-dim);
    --bs-secondary-bg:    var(--surface-1);
    --bs-tertiary-color:  var(--text-mute);
    --bs-tertiary-bg:     var(--surface-2);

    --bs-heading-color: var(--text);

    --bs-border-color:     var(--line);
    --bs-border-radius:    var(--r-md);
    --bs-border-radius-sm: var(--r-sm);
    --bs-border-radius-lg: var(--r-lg);

    --bs-primary:     var(--brand);
    --bs-primary-rgb: 2, 84, 210;

    /* Semanticos. Sin esto, las 360 apariciones de .text-danger, .alert-* y
       compania en las vistas siguen saliendo con el rojo y el verde de
       Bootstrap en vez de los de la paleta.

       Hay que dar las tres formas porque cada familia lee una distinta: los
       utilitarios .text-* y .bg-* leen el triplete -rgb, y las alertas leen
       -text-emphasis, -bg-subtle y -border-subtle. Los botones solidos no
       salen de aca: traen el hex incrustado y se arreglan en componentes. */
    --bs-danger:               var(--neg);
    --bs-danger-rgb:           255, 93, 115;
    --bs-danger-text-emphasis: var(--neg);
    --bs-danger-bg-subtle:     rgb(255 93 115 / .12);
    --bs-danger-border-subtle: rgb(255 93 115 / .35);

    --bs-success:               var(--pos);
    --bs-success-rgb:           37, 208, 160;
    --bs-success-text-emphasis: var(--pos);
    --bs-success-bg-subtle:     rgb(37 208 160 / .12);
    --bs-success-border-subtle: rgb(37 208 160 / .35);

    --bs-warning:               var(--warn);
    --bs-warning-rgb:           255, 181, 71;
    --bs-warning-text-emphasis: var(--warn);
    --bs-warning-bg-subtle:     rgb(255 181 71 / .12);
    --bs-warning-border-subtle: rgb(255 181 71 / .35);

    --bs-link-color:       var(--brand-text);
    --bs-link-hover-color: #96c1ff;

    --bs-code-color:   var(--brand-text);
    --bs-highlight-bg: var(--brand-soft);
}

/* ==========================================================================
   Base: elementos HTML. Nada de componentes ni de utilidades.
   ========================================================================== */

body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--text);
    background-color: var(--bg);
    -webkit-font-smoothing: antialiased;
}

/* Bootstrap no expone variable para la fuente de los titulos, solo para la
   del cuerpo. Esta es la unica regla propia que hace falta para tipografia. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-display);
    line-height: var(--lh-tight);
    letter-spacing: -.01em;
}

/* Cifras alineadas verticalmente columna por columna.
   Solo el elemento: .kpi-value declara lo suyo en su propia regla de
   03-components.css y la utilidad equivalente es .u-numeric, en
   06-utilities.css. Cada clase vive en una sola capa. */
table {
    font-variant-numeric: tabular-nums;
}

a {
    text-decoration: none;
    transition: color var(--t-fast) var(--ease);
}

a:hover {
    text-decoration: underline;
}

::placeholder {
    color: var(--text-mute);
    opacity: 1;
}

::selection {
    background: var(--brand-soft);
    color: var(--text);
}

/* Foco visible y consistente en toda la app. */
:focus-visible {
    outline: 2px solid var(--brand-text);
    outline-offset: 2px;
}

/* Barras de scroll acordes al tema. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--surface-3) var(--bg);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    background: var(--surface-3);
    border-radius: var(--r-sm);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--line);
}

/* ==========================================================================
   Movimiento reducido. Obligatorio: todo bloque con transicion o animacion
   del sistema queda anulado aca.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   Componentes de Bootstrap re-tematizados. Se completa en la Task 4.
   ========================================================================== */

/* --- Botones ------------------------------------------------------------ */
/* .btn-primary viene compilado con colores fijos: setear --bs-primary en
   :root no lo re-tematiza. Hay que redefinir sus variables aca. */
.btn {
    --bs-btn-padding-y: var(--sp-2);
    --bs-btn-padding-x: var(--sp-3);
    --bs-btn-font-size: var(--fs-base);
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--r-sm);
    transition: background-color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease);
}

.btn-primary {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--brand-hover);
    --bs-btn-hover-border-color: var(--brand-hover);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--brand-active);
    --bs-btn-active-border-color: var(--brand-active);
    --bs-btn-disabled-bg: var(--surface-3);
    --bs-btn-disabled-border-color: var(--surface-3);
    --bs-btn-disabled-color: var(--text-mute);
}

.btn-secondary {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--line);
    --bs-btn-color: var(--text);
    --bs-btn-hover-bg: var(--surface-2);
    --bs-btn-hover-border-color: var(--brand-border);
    --bs-btn-hover-color: var(--text);
    --bs-btn-active-bg: var(--surface-3);
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-text);
    --bs-btn-border-color: var(--brand-border);
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-hover-color: #fff;
}

/* Los semanticos tienen el mismo problema que .btn-primary: el hex compilado
   adentro, asi que puentear --bs-danger en los tokens no los alcanza.

   El texto va en --bg y no en blanco: los colores de la paleta estan elegidos
   para leerse sobre el fondo oscuro, y de fondo de un boton solido son
   demasiado claros para que el blanco encima se lea.

   Estan las variantes que las vistas usan hoy. .btn-warning solido no aparece
   en ninguna, asi que no tiene regla. */
.btn-danger {
    --bs-btn-bg: var(--neg);
    --bs-btn-border-color: var(--neg);
    --bs-btn-color: var(--bg);
    --bs-btn-hover-bg: var(--neg-hover);
    --bs-btn-hover-border-color: var(--neg-hover);
    --bs-btn-hover-color: var(--bg);
    --bs-btn-active-bg: var(--neg-hover);
    --bs-btn-active-border-color: var(--neg-hover);
    --bs-btn-active-color: var(--bg);
}

.btn-success {
    --bs-btn-bg: var(--pos);
    --bs-btn-border-color: var(--pos);
    --bs-btn-color: var(--bg);
    --bs-btn-hover-bg: var(--pos-hover);
    --bs-btn-hover-border-color: var(--pos-hover);
    --bs-btn-hover-color: var(--bg);
    --bs-btn-active-bg: var(--pos-hover);
    --bs-btn-active-border-color: var(--pos-hover);
    --bs-btn-active-color: var(--bg);
}

.btn-outline-danger {
    --bs-btn-color: var(--neg);
    --bs-btn-border-color: var(--neg);
    --bs-btn-hover-bg: var(--neg);
    --bs-btn-hover-border-color: var(--neg);
    --bs-btn-hover-color: var(--bg);
}

.btn-outline-success {
    --bs-btn-color: var(--pos);
    --bs-btn-border-color: var(--pos);
    --bs-btn-hover-bg: var(--pos);
    --bs-btn-hover-border-color: var(--pos);
    --bs-btn-hover-color: var(--bg);
}

.btn-outline-warning {
    --bs-btn-color: var(--warn);
    --bs-btn-border-color: var(--warn);
    --bs-btn-hover-bg: var(--warn);
    --bs-btn-hover-border-color: var(--warn);
    --bs-btn-hover-color: var(--bg);
}

/* --- Cards -------------------------------------------------------------- */
.card {
    --bs-card-bg: var(--surface-1);
    --bs-card-border-color: var(--line);
    --bs-card-border-radius: var(--r-md);
    --bs-card-cap-bg: var(--surface-2);
    --bs-card-color: var(--text);
    --bs-card-spacer-y: var(--sp-3);
    --bs-card-spacer-x: var(--sp-3);
    transition: border-color var(--t-base) var(--ease),
                background-color var(--t-base) var(--ease);
}

.card:hover {
    border-color: var(--brand-border);
    background-color: var(--surface-2);
}

/* La tarjeta destacada de la app. En el vocabulario de esta casa
   "border-secondary" no quiere decir gris: el tema anterior lo redefinia como
   el azul de la marca y le sumaba un halo, y asi se usa en 70 lugares de 17
   vistas. Sin esta regla las 70 salen con el gris de Bootstrap, que es un
   cambio de significado, no de estilo.

   Los !important son para empatarle a la utilidad .border-secondary, que trae
   el suyo puesto. Por eso el hover de arriba tampoco le llegaba, y se repite
   aca. Es la unica regla del tema fuera de 06-utilities.css que los usa. */
.card.border-secondary {
    border-color: var(--brand-border) !important;
    box-shadow: var(--sh-glow);
}

.card.border-secondary:hover {
    border-color: var(--brand) !important;
}

.card-header {
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    letter-spacing: .02em;
    color: var(--text-dim);
}

/* --- Tablas ------------------------------------------------------------- */
/* Densidad compacta: las filas quedan en ~28px, asi que no llevan transform.
   Solo cambia el fondo. */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--line-soft);
    --bs-table-hover-bg: var(--surface-2);
    --bs-table-hover-color: var(--text);
    --bs-table-striped-bg: rgb(19 28 48 / .4);
    font-size: var(--fs-sm);
}

.table > thead > tr > th {
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--text-dim);
    background-color: transparent;
    border-bottom-color: var(--line);
    padding: var(--sp-1) var(--sp-2);
    white-space: nowrap;
}

.table > tbody > tr > td {
    padding: var(--sp-1) var(--sp-2);
    vertical-align: middle;
}

.table > tbody > tr {
    transition: background-color var(--t-fast) var(--ease);
}

/* --- Formularios -------------------------------------------------------- */
.form-control,
.form-select {
    background-color: var(--surface-3);
    border-color: var(--line);
    color: var(--text);
    font-size: var(--fs-sm);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    transition: border-color var(--t-fast) var(--ease),
                box-shadow var(--t-fast) var(--ease);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--surface-3);
    border-color: var(--brand);
    color: var(--text);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

.form-label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--text-dim);
    margin-bottom: var(--sp-1);
}

.form-check-input {
    background-color: var(--surface-3);
    border-color: var(--line);
}

.form-check-input:checked {
    background-color: var(--brand);
    border-color: var(--brand);
}

.form-check-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

/* Vocabulario de Bootstrap 3 que sigue vivo en el marcado. Las 31 vistas de
   alta y edicion estan escritas con .form-horizontal, .form-group y
   .control-label, que Bootstrap 4 saco y la 5 no repuso. El tema anterior las
   redefinia en neonBlue.css; si no las declaramos aca, esas vistas pierden la
   caja del formulario, el color de las etiquetas y todo el espaciado entre
   campos, que es lo que las hace legibles.

   Lo correcto a futuro es pasar el marcado a .mb-3 y .form-label, que es lo
   que Bootstrap 5 espera. Son mas de 450 apariciones, asi que va como tarea
   propia y no colada en un cambio de tema. Hasta entonces esto es una capa de
   compatibilidad declarada, no un olvido. */
.form-horizontal {
    background-color: var(--surface-1);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--sp-5);
    margin-bottom: var(--sp-4);
}

.form-horizontal h4 {
    font-size: var(--fs-lg);
    font-weight: 600;
    margin-bottom: var(--sp-3);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--line);
}

.form-horizontal hr {
    border-color: var(--line);
    opacity: .5;
}

.form-horizontal .btn {
    margin-right: var(--sp-2);
    margin-bottom: var(--sp-2);
}

.form-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-bottom: var(--sp-4);
}

.control-label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--text-dim);
    font-weight: 500;
    text-align: left;
    margin-bottom: var(--sp-1);
}

/* Bootstrap corta los terminos largos de una lista de descripcion horizontal.
   Venia de site.css y es la unica regla de esa hoja que seguia haciendo algo. */
.dl-horizontal dt {
    white-space: normal;
}

/* --- Overlays ----------------------------------------------------------- */
.dropdown-menu {
    --bs-dropdown-bg: var(--surface-2);
    --bs-dropdown-border-color: var(--line);
    --bs-dropdown-border-radius: var(--r-md);
    --bs-dropdown-color: var(--text);
    --bs-dropdown-link-color: var(--text);
    --bs-dropdown-link-hover-bg: var(--surface-3);
    --bs-dropdown-link-hover-color: var(--text);
    --bs-dropdown-link-active-bg: var(--brand);
    --bs-dropdown-font-size: var(--fs-sm);
    box-shadow: var(--sh-overlay);
}

.modal-content {
    background-color: var(--surface-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-overlay);
}

.modal-header,
.modal-footer {
    border-color: var(--line);
}

.offcanvas {
    --bs-offcanvas-bg: var(--surface-1);
    --bs-offcanvas-color: var(--text);
    --bs-offcanvas-border-color: var(--line);
}

.tooltip-inner {
    background-color: var(--surface-3);
    color: var(--text);
    font-size: var(--fs-xs);
    border-radius: var(--r-sm);
}

/* --- Navegacion --------------------------------------------------------- */
.nav-tabs {
    --bs-nav-tabs-border-color: var(--line);
    --bs-nav-tabs-link-active-bg: var(--surface-1);
    --bs-nav-tabs-link-active-color: var(--text);
    --bs-nav-tabs-link-active-border-color: var(--line) var(--line) var(--surface-1);
    --bs-nav-link-color: var(--text-dim);
    --bs-nav-link-hover-color: var(--text);
    --bs-nav-link-font-size: var(--fs-base);
}

.nav-pills {
    --bs-nav-pills-border-radius: var(--r-sm);
    --bs-nav-pills-link-active-bg: var(--brand);
    --bs-nav-link-color: var(--text-dim);
    --bs-nav-link-hover-color: var(--text);
    --bs-nav-link-font-size: var(--fs-base);
}

.accordion {
    --bs-accordion-bg: var(--surface-1);
    --bs-accordion-color: var(--text);
    --bs-accordion-border-color: var(--line);
    --bs-accordion-btn-bg: var(--surface-2);
    --bs-accordion-btn-color: var(--text);
    --bs-accordion-active-bg: var(--surface-3);
    --bs-accordion-active-color: var(--brand-text);
    --bs-accordion-border-radius: var(--r-md);
}

.pagination {
    --bs-pagination-bg: var(--surface-1);
    --bs-pagination-color: var(--text-dim);
    --bs-pagination-border-color: var(--line);
    --bs-pagination-hover-bg: var(--surface-2);
    --bs-pagination-hover-color: var(--text);
    --bs-pagination-active-bg: var(--brand);
    --bs-pagination-active-border-color: var(--brand);
    --bs-pagination-font-size: var(--fs-sm);
}

/* --- Señales ------------------------------------------------------------ */
.badge {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .03em;
    border-radius: var(--r-sm);
    padding: var(--sp-1) var(--sp-2);
}

.text-bg-primary {
    background-color: var(--brand-soft) !important;
    color: var(--brand-text) !important;
}

.alert {
    --bs-alert-border-radius: var(--r-md);
    font-size: var(--fs-sm);
    border-width: 1px;
}

.progress {
    --bs-progress-bg: var(--surface-3);
    --bs-progress-bar-bg: var(--brand);
    --bs-progress-border-radius: var(--r-sm);
    --bs-progress-height: var(--sp-2);
}

/* --- Componentes propios de la app -------------------------------------- */
/* Card de KPI. Reemplaza a .Stats, que hoy esta definida tres veces entre
   Marpos.css y neonBlue.css. */
.kpi {
    background-color: var(--surface-1);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--sp-2) var(--sp-3);
    position: relative;
    overflow: hidden;
    transition: border-color var(--t-base) var(--ease),
                background-color var(--t-base) var(--ease);
}

.kpi::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 2px;
    background: var(--brand);
}

.kpi:hover {
    border-color: var(--brand-border);
    background-color: var(--surface-2);
}

.kpi-label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--text-dim);
}

.kpi-value {
    font-size: var(--fs-lg);
    font-weight: 650;
    letter-spacing: -.02em;
    line-height: var(--lh-tight);
    font-variant-numeric: tabular-nums;
}

.kpi-value.is-pos { color: var(--pos); }
.kpi-value.is-neg { color: var(--neg); }

/* Entrada escalonada. Se aplica al contenedor de una lista o grilla. */
.stagger > * {
    animation: fade-up var(--t-slow) var(--ease) both;
}

.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 40ms; }
.stagger > *:nth-child(3) { animation-delay: 80ms; }
.stagger > *:nth-child(4) { animation-delay: 120ms; }
.stagger > *:nth-child(5) { animation-delay: 160ms; }
.stagger > *:nth-child(n+6) { animation-delay: 200ms; }

@keyframes fade-up {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* Skeleton de carga. */
.skeleton {
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
    background-size: 200% 100%;
    animation: skeleton 1.4s ease-in-out infinite;
    border-radius: var(--r-sm);
    color: transparent;
}

@keyframes skeleton {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* ==========================================================================
   Componentes propios de la app.

   Vienen de Content/Marpos.css, que el stack nuevo dejo de cargar. No era una
   hoja residual: tenia el calendario del diario, las fichas de estadistica y
   los badges de habitos, todos en uso. Estan portados aca y traducidos a
   tokens, que es lo que corresponde a un componente compartido.

   De esa hoja quedaron afuera tres cosas a proposito: un "* { margin: 0;
   padding: 0 }" que reseteaba el documento entero desde un archivo de
   componentes, un @import a Google Fonts (el tema hospeda sus fuentes) y un
   .main-wrapper que competia con el de 04-chrome.css con medidas distintas.
   ========================================================================== */

/* --- Calendario del diario ----------------------------------------------
   Widget propio: lo dibuja el CalendarControl() de la vista, que emite esta
   estructura de clases. Los selectores largos son los que la libreria genera;
   se conservan tal cual para no tocar el JS.
   ------------------------------------------------------------------------ */
.calendar {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 420px;
    background: var(--surface-1);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-sizing: border-box;
    overflow: hidden;
    /* Dos px menos que el cuerpo: con 17px los numeros no caben bien en las
       celdas de 30px y el mes/ano empujan el alto del widget. */
    font-size: calc(var(--fs-base) - 2px);
}

.calendar-inner {
    padding: var(--sp-3);
}

.calendar .calendar-inner .calendar-controls {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
}

.calendar .calendar-inner .calendar-controls .calendar-year-month {
    display: flex;
    min-width: 100px;
    justify-content: space-evenly;
    align-items: center;
}

.calendar .calendar-inner .calendar-controls .calendar-year-month .calendar-year-label,
.calendar .calendar-inner .calendar-controls .calendar-year-month .calendar-month-label {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: calc(var(--fs-lg) - 2px);
}

.calendar .calendar-inner .calendar-controls .calendar-next {
    text-align: right;
}

.calendar .calendar-inner .calendar-controls .calendar-next a,
.calendar .calendar-inner .calendar-controls .calendar-prev a {
    color: var(--text-dim);
    font-size: calc(var(--fs-xl) - 2px);
    line-height: 1;
    text-decoration: none;
    padding: var(--sp-1) var(--sp-3);
    display: inline-block;
    border-radius: var(--r-sm);
    transition: color var(--t-fast) var(--ease),
                background-color var(--t-fast) var(--ease);
}

.calendar .calendar-inner .calendar-controls .calendar-next a:hover,
.calendar .calendar-inner .calendar-controls .calendar-prev a:hover {
    color: var(--text);
    background: var(--surface-2);
    text-decoration: none;
}

.calendar .calendar-inner .calendar-controls .calendar-next a svg,
.calendar .calendar-inner .calendar-controls .calendar-prev a svg {
    height: 20px;
    width: 20px;
}

.calendar .calendar-inner .calendar-controls .calendar-next a svg path,
.calendar .calendar-inner .calendar-controls .calendar-prev a svg path {
    fill: currentColor;
}

/* Boton "hoy". */
.calendar .calendar-inner .calendar-today-date {
    display: grid;
    text-align: center;
    cursor: pointer;
    background: var(--brand-soft);
    border: 1px solid var(--brand-border);
    padding: var(--sp-2) 0;
    border-radius: var(--r-sm);
    width: 80%;
    margin: var(--sp-1) auto;
    font-size: calc(var(--fs-sm) - 2px);
    transition: background-color var(--t-fast) var(--ease);
}

.calendar .calendar-inner .calendar-today-date:hover {
    background: var(--surface-3);
}

/* Grilla de dias. Las siete primeras celdas son los nombres de la semana. */
.calendar .calendar-inner .calendar-body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
}

.calendar .calendar-inner .calendar-body div {
    padding: var(--sp-1);
    min-height: 30px;
    line-height: 30px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    margin: var(--sp-2) 2px 0;
    font-variant-numeric: tabular-nums;
    transition: border-color var(--t-fast) var(--ease),
                background-color var(--t-fast) var(--ease);
}

.calendar .calendar-inner .calendar-body div:nth-child(-n+7),
.calendar .calendar-inner .calendar-body div:nth-child(-n+7):hover {
    border: 1px solid transparent;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    color: var(--text-dim);
    font-size: calc(var(--fs-sm) - 2px);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.calendar .calendar-inner .calendar-body div > a {
    color: inherit;
    text-decoration: none;
    display: flex;
    justify-content: center;
}

.calendar .calendar-inner .calendar-body div:hover {
    border-color: var(--brand-border);
    background: var(--surface-2);
}

.calendar .calendar-inner .calendar-body div.empty-dates:hover {
    border-color: transparent;
    background: none;
}

.calendar .calendar-inner .calendar-body .calendar-today {
    background: var(--brand);
    color: var(--text);
}

.calendar .calendar-inner .calendar-body .calendar-today:hover {
    border-color: transparent;
    background: var(--brand-hover);
}

/* Dias del mes anterior y del siguiente: visibles pero apagados y sin clic. */
.calendar .calendar-inner .calendar-body .prev-dates,
.calendar .calendar-inner .calendar-body .next-dates {
    color: var(--text-mute);
}

.calendar .calendar-inner .calendar-body .prev-dates:hover,
.calendar .calendar-inner .calendar-body .next-dates:hover {
    border-color: transparent;
    background: none;
    pointer-events: none;
}

/* --- Fichas de estadistica ----------------------------------------------
   Icono a la izquierda, etiqueta y numero apilados a la derecha. Van varias
   por fila dentro de una card.

   La version anterior tenia ancho fijo de 120px, que a la izquierda y a la
   derecha dejaba el hueco que se ve hoy cuando la card es mas ancha que la
   suma de las fichas. Ahora crecen para repartirse el espacio disponible y
   el minimo evita que se aplasten cuando entran muchas.
   ------------------------------------------------------------------------ */
.Stats {
    display: inline-flex;
    flex: 1 1 0;
    min-width: 108px;
    max-width: 220px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: var(--r-md);
    padding: var(--sp-2) var(--sp-3);
    margin: 0 0 var(--sp-2) var(--sp-2);
    position: relative;
    text-align: center;
    transition: border-color var(--t-fast) var(--ease);
}

.Stats:hover {
    border-color: var(--brand-border);
}

.Stats i {
    font-size: var(--fs-xl);
    line-height: 1;
}

.Stats .content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.Stats .text {
    font-size: var(--fs-sm);
    color: var(--text-dim);
    white-space: nowrap;
}

.Stats .number {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 650;
    line-height: var(--lh-tight);
    font-variant-numeric: tabular-nums;
}

/* Colores de los iconos. Son categoricos: distinguen una metrica de otra, no
   dicen si el numero es bueno o malo. Por eso salen de la escala --cat y no
   de --pos y --neg, salvo los dos que si expresan signo. */
.Stats .greenIcon     { color: var(--pos); }
.Stats .redIcon       { color: var(--neg); }
.Stats .alphaIcon     { color: var(--brand-text); }
.Stats .violetIcon    { color: var(--cat-9); }
.Stats .orangeIcon    { color: var(--warn); }
.Stats .lightBlueIcon { color: var(--cat-8); }

/* Marcaba el texto en blanco cuando el tema anterior lo pintaba de otro color
   y le ponia sombra. Hoy el color ya es el correcto y no hay sombras, asi que
   solo queda como punto de enganche del marcado que la usa. */
.whiteStat {
    color: inherit;
}

.alphaBlue {
    color: var(--brand-text);
}

/* --- Medallas de habitos ------------------------------------------------
   Hexagono con un circulo al medio y una cinta abajo. Las tres capas del
   hexagono son el mismo cuadrado rotado, por eso heredan fondo y forma.
   ------------------------------------------------------------------------ */
.badgee {
    position: relative;
    margin: 1.5em 3em .3em;
    width: 4em;
    height: 6.2em;
    border-radius: var(--r-lg);
    display: inline-block;
    top: 0;
    transition: top var(--t-base) var(--ease);
}

.badgee:before,
.badgee:after {
    position: absolute;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    background: inherit;
    content: "";
    inset: 0;
    margin: auto;
}

.badgee:before { transform: rotate(60deg); }
.badgee:after  { transform: rotate(-60deg); }
.badgee:hover  { top: -4px; }

.badgee .circle {
    width: 60px;
    height: 60px;
    position: absolute;
    background: var(--surface-1);
    z-index: 10;
    border-radius: 50%;
    inset: 0;
    margin: auto;
}

.badgee .circle i.fa {
    font-size: 2em;
    margin-top: 10px;
}

.badgee .font {
    display: inline-block;
    margin-top: 1em;
}

.badgee .ribbon {
    position: absolute;
    border-radius: var(--r-sm);
    width: 109px;
    z-index: 11;
    color: var(--text);
    bottom: 12px;
    left: 50%;
    margin-left: -55px;
    height: 20px;
    font-size: var(--fs-sm);
    text-transform: uppercase;
    background: var(--surface-3);
    border: 1px solid var(--line);
    cursor: default;
}

/* Nivel de la medalla. Son categoricos, no estados. */
.badgee.yellow     { background: var(--cat-4); color: var(--cat-4); }
.badgee.orange     { background: var(--warn); color: var(--warn); }
.badgee.red        { background: var(--neg);  color: var(--neg); }
.badgee.green      { background: var(--cat-2); color: var(--cat-2); }
.badgee.silver     { background: var(--text-dim); color: var(--text-dim); }
.badgee.teal       { background: var(--pos);  color: var(--pos); }
.badgee.green-dark { background: var(--cat-2); color: var(--cat-2); }

/* Porcentaje de cumplimiento, de mejor a peor. */
.badgeAvg75       { color: var(--pos); }
.badgeAvg50       { color: var(--cat-2); }
.badgeAvg25       { color: var(--warn); }
.badgeAvg10       { color: var(--cat-4); }
.badgeAvgNoOk     { color: var(--neg); }
.badgeAvgInactive { color: var(--text-mute); }

/* --- Acordeon -----------------------------------------------------------
   Bootstrap ya lo tematiza por variables; lo unico propio es que el encabezado
   va mas grande y sin la linea divisoria.
   ------------------------------------------------------------------------ */
.accordion-item {
    --bs-accordion-bg: var(--surface-1);
    --bs-accordion-border-color: var(--line);
    --bs-accordion-btn-bg: var(--surface-2);
    --bs-accordion-btn-color: var(--text);
    --bs-accordion-active-bg: var(--surface-3);
    --bs-accordion-active-color: var(--text);
    --bs-accordion-btn-focus-box-shadow: none;
    border: none;
}

.accordion-item .accordion-button {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 600;
}

/* --- Componentes que venian de neonBlue.css -----------------------------
   Misma historia que los de arriba: la hoja que los definia no se carga mas.
   Todos estaban escritos enteramente con !important porque tenian que ganarle
   al Bootstrap tematizado que venia despues; aca no compite nadie, asi que no
   llevan ninguno.
   ------------------------------------------------------------------------ */

/* Ficha de metrica de los chequeos de fase. */
.metric-info-card {
    background-color: var(--surface-1);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    color: var(--text);
    padding: var(--sp-4) var(--sp-3);
    margin-bottom: var(--sp-3);
    transition: border-color var(--t-base) var(--ease),
                background-color var(--t-base) var(--ease);
}

.metric-info-card:hover {
    border-color: var(--brand-border);
    background-color: var(--surface-2);
}

.metric-info-card .metric-title {
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-dim);
    text-align: center;
    margin-bottom: var(--sp-3);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.metric-info-card .metric-content {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--text);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--sp-2);
    font-variant-numeric: tabular-nums;
}

.metric-info-card .metric-content i {
    color: var(--brand-text);
}

.metric-info-card .metric-content a {
    color: inherit;
    text-decoration: none;
    font-weight: 700;
}

.metric-info-card .metric-content a.positive { color: var(--pos); }
.metric-info-card .metric-content a.negative { color: var(--neg); }

@media (max-width: 1400px) {
    .metric-info-card {
        padding: var(--sp-3) var(--sp-2);
    }

    .metric-info-card .metric-content {
        font-size: var(--fs-lg);
    }
}

/* Caja con scroll propio. La barra la dibuja 02-base.css para todo el
   documento; aca solo se afina, porque en una caja chica una barra de 10px se
   come el contenido. */
.scrollable-content {
    background-color: transparent;
    border-radius: var(--r-sm);
}

.scrollable-content p {
    color: var(--text-dim);
}

.scrollable-content::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

/* Pestañas del panel de TradeAlyzer. */
.navNeonBlue {
    border: none;
    background: var(--surface-1);
    color: var(--text-dim);
}

.navNeonBlue.active {
    border: 1px solid var(--brand-border);
    border-bottom: none;
    border-radius: var(--r-sm) var(--r-sm) 0 0;
    background: var(--surface-2);
    color: var(--text);
}

.panelNeonBlue {
    padding-top: var(--sp-2);
    border-top: 1px solid var(--brand-border);
}

/* Listas del plan del diario. */
.textLista {
    color: var(--text-dim);
    margin-bottom: var(--sp-1);
}

.liMarph {
    background: transparent;
    border: none;
    margin-bottom: 3px;
}

/* Textarea de los modales del diario. */
.modalNeon {
    background-color: var(--surface-3);
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: var(--r-sm);
}

.modalNeon:focus {
    background-color: var(--surface-3);
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

.btn-chiquito {
    font-size: var(--fs-sm);
    padding: 1px var(--sp-1);
}

/* Paneles anclados a las esquinas. La posicion la pone 04-chrome.css con
   .floating-btn-*; esto es solo su aspecto. */
.floating-panel,
.floating-panelDer {
    width: 120px;
    font-size: var(--fs-sm);
    background-color: var(--surface-1);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--sh-glow);
}

.floating-panel h5,
.floating-panelDer h5 {
    font-size: var(--fs-base);
    font-weight: 600;
    text-align: center;
}

.floating-panel .list-group-item,
.floating-panelDer .list-group-item {
    background-color: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--text-dim);
    margin-bottom: 2px;
}

.loading-content {
    background-color: var(--surface-1);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    color: var(--text);
}

/* Card del calendario de la portada. */
.calCard .fa-caret-left,
.calCard .fa-caret-right {
    color: var(--text-dim);
    transition: color var(--t-fast) var(--ease);
}

.calCard .fa-caret-left:hover,
.calCard .fa-caret-right:hover {
    color: var(--brand-text);
}

.calCard #fecha {
    color: var(--text-dim);
    font-family: var(--font-display);
    font-size: 80px;
    font-weight: 700;
    line-height: var(--lh-tight);
}

.calCard .card-title {
    color: var(--text-dim);
    font-weight: 500;
}

/* --- Lo que venia de generales.css y modernTheme.css --------------------
   Son las dos hojas del layout alternativo. Casi todo lo que definian ya lo
   redeclara cada vista en su propio bloque, asi que aca queda solo lo que
   ninguna cubre y quedaria sin estilo.
   ------------------------------------------------------------------------ */

/* Fila de botones al pie de un formulario. La usan las trece vistas de
   borrado, donde separa el boton que confirma del link que vuelve atras. */
.form-actions {
    margin-top: var(--sp-5);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-3);
}

@media (max-width: 576px) {
    .form-actions {
        justify-content: center;
        flex-direction: column;
        align-items: stretch;
    }
}

/* Grilla de cuentas de TradeAlyzer. */
.accounts-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sp-4);
}

.accounts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--sp-4);
    justify-content: start;
}

.account-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-lg);
    color: var(--text);
}

.account-balance {
    color: var(--text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.metric-label {
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--text-dim);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.metric-value {
    font-size: var(--fs-base);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.metric-value.positive { color: var(--pos); }
.metric-value.negative { color: var(--neg); }
.metric-value.neutral  { color: var(--text); }

/* ==========================================================================
   Compatibilidad con vocabulario que Bootstrap ya no trae.

   Las vistas no se tocan mientras convivan los dos temas: son las mismas que
   sirve el tema actual, y ahi cualquier cambio se ve. Asi que las clases que
   Bootstrap 3 y 4 tenian y la 5 saco se reponen desde aca, con la apariencia
   que corresponde al tema nuevo.

   Cada bloque dice cuantas apariciones cubre. Cuando el tema actual se borre y
   el marcado se pueda migrar de verdad, esta seccion se va entera: es deuda
   declarada con fecha de vencimiento, no una parte del sistema de diseño.
   ========================================================================== */

/* --- .btn-default: el boton neutro de Bootstrap 3. Once vistas, todas de alta
       o edicion, donde es el "Crear" o el "Guardar" del formulario. En la 5 no
       existe, asi que sin esto sale sin fondo ni borde, como texto suelto.
       Se le da la forma del secundario, que es lo que era.  (11 usos) --- */
.btn-default {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--line);
    --bs-btn-color: var(--text);
    --bs-btn-hover-bg: var(--surface-2);
    --bs-btn-hover-border-color: var(--brand-border);
    --bs-btn-hover-color: var(--text);
    --bs-btn-active-bg: var(--surface-3);
    --bs-btn-active-border-color: var(--brand);
    --bs-btn-active-color: var(--text);
}

/* --- .btn-outline-dark: esta si existe en la 5, pero dibuja un boton oscuro
       sobre un fondo oscuro y desaparece. Es el "Iniciar sesion" y el
       "Registrarse" de las pantallas de cuenta, asi que no es un detalle.
       Se lo pinta como el primario, que es el papel que cumple.  (11 usos) --- */
.btn-outline-dark {
    --bs-btn-color: var(--brand-text);
    --bs-btn-border-color: var(--brand-border);
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--brand-active);
    --bs-btn-active-border-color: var(--brand-active);
    --bs-btn-active-color: #fff;
}

/* --- .col-md-offset-2: la forma de Bootstrap 3 de correr una columna. En la 4
       paso a llamarse .offset-md-2 y la vieja dejo de hacer nada, asi que estas
       31 vistas quedaron con el formulario pegado al borde izquierdo en vez de
       centrado. Es el unico offset que usa el proyecto.  (31 usos) --- */
@media (min-width: 768px) {
    .col-md-offset-2 {
        margin-left: 16.66666667%;
    }
}

/* --- .embed-responsive: el contenedor de proporcion fija de Bootstrap 4, que
       la 5 reemplazo por .ratio. Son los videos de la portada, y sin esto el
       iframe colapsa a la altura que traiga por atributo.  (8 usos) --- */
.embed-responsive {
    position: relative;
    width: 100%;
}

.embed-responsive::before {
    display: block;
    content: "";
}

.embed-responsive-16by9::before {
    padding-top: 56.25%;
}

.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- Espaciado direccional de Bootstrap 4. La 5 lo renombro a me-/ms- por el
       soporte de derecha a izquierda. Cuatro apariciones sueltas.  (4 usos) --- */
.mr-2 { margin-right: var(--sp-2); }
.ml-3 { margin-left: var(--sp-3); }

/* --- .sr-only: el texto solo para lectores de pantalla, que en la 5 se llama
       .visually-hidden. Copia exacta de la definicion de Bootstrap: si se
       simplifica a display:none deja de leerlo el lector, que es lo unico que
       esta clase tiene que lograr.  (1 uso) --- */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* --- .input-group-append: en Bootstrap 4 envolvia al boton que va pegado al
       campo. La 5 espera al boton como hijo directo del .input-group, y con el
       div en el medio se pierden los bordes redondeados de la union.
       display:contents saca al div del layout sin sacarlo del DOM.  (1 uso) --- */
.input-group > .input-group-append,
.input-group > .input-group-prepend {
    display: contents;
}

/* --- .badge.bg-light: fondo claro con el texto blanco que el badge trae, o
       sea ilegible. Una sola aparicion, el contador de Elite en la lista de
       clientes.  (1 uso) --- */
.badge.bg-light {
    color: var(--bg) !important;
}
/* ==========================================================================
   Navbar, footer y shell de pagina. Se completa en la Task 5.
   ========================================================================== */

/* --- Navbar ------------------------------------------------------------- */
.navbar {
    --bs-navbar-color: var(--text-dim);
    --bs-navbar-hover-color: var(--text);
    --bs-navbar-active-color: var(--text);
    --bs-navbar-brand-color: var(--text);
    --bs-navbar-brand-hover-color: var(--text);
    --bs-navbar-padding-y: var(--sp-2);
    /* El logo mide 40px: con el padding del brand encima, la navbar se pasaria
       de --navbar-h y el despeje del shell se quedaria corto. */
    --bs-navbar-brand-padding-y: 0;
    min-height: var(--navbar-h);
    background-color: var(--surface-1);
    border-bottom: 1px solid var(--line);
}

.navbar .nav-link {
    /* Dos px menos que el cuerpo: con 17px los items no entraban en una sola fila. */
    font-size: calc(var(--fs-base) - 2px);
    padding: var(--sp-2) var(--sp-3);
    position: relative;
    transition: color var(--t-fast) var(--ease);
}

/* Subrayado de la seccion activa, con el azul de marca. */
.navbar .nav-link.active::after {
    content: "";
    position: absolute;
    left: var(--sp-3);
    right: var(--sp-3);
    bottom: 0;
    height: 2px;
    background: var(--brand);
}

.navbar-brand {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -.02em;
}

/* --- Shell de pagina ---------------------------------------------------- */
/* La navbar es fixed-top: sin esto el contenido arranca por debajo de ella.
   Este es el unico despeje del stack nuevo; el <body> ya no trae el suyo. */
.body-content {
    padding-top: calc(var(--navbar-h) + var(--sp-4));
    padding-bottom: var(--sp-6);
}

/* --- Footer ------------------------------------------------------------- */
.app-footer {
    border-top: 1px solid var(--line);
    margin-top: var(--sp-6);
    padding-top: var(--sp-3);
    color: var(--text-dim);
    font-size: var(--fs-xs);
}

/* --- Shell de _LayoutEspecial -------------------------------------------
   Venia del <style> que ese layout dejaba despues del </html>.
   ------------------------------------------------------------------------ */
.main-wrapper {
    width: 80%;
    max-width: 1920px;
    margin: 0 auto;
    position: relative;
}

@media (max-width: 1024px) {
    .main-wrapper {
        width: 90%;
    }
}

@media (max-width: 768px) {
    .main-wrapper {
        width: 95%;
    }
}

/* --- Velo de carga -------------------------------------------------------
   Ocupa la pantalla mientras la vista pide datos. Estaba repetido igual en
   tres vistas. El alfa no es decorativo: la pagina se tiene que seguir
   adivinando detras, por eso es --bg con alfa y no una superficie.
   ------------------------------------------------------------------------ */
.loading-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1050;
    overflow: hidden;
    background-color: rgb(7 11 20 / .5);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Velo de los reproductores de video ---------------------------------
   Va sobre el poster: le da contraste al icono de play y es el que recibe el
   clic. No es un color del tema sino una capa funcional, por eso es --bg con
   alfa y no una superficie. Estaba repetido inline en los cuatro overlays.
   ------------------------------------------------------------------------ */
.video-overlay {
    background: rgb(7 11 20 / .5);
}

/* --- Contenedores de graficos ------------------------------------------
   Venian del <style> que el layout inyectaba despues del contenido, con
   !important porque desde ahi perdian contra main.css. Aca no hace falta.
   ------------------------------------------------------------------------ */
#wrChart {
    width: 100%;
    height: 100%;
}

.contenedor1 {
    align-items: center;
    width: 33%;
    height: 100%;
}

/* --- Botones flotantes ---------------------------------------------------
   Anclados a las esquinas de la ventana, por encima del contenido. Venian de
   Content/Marpos.css, que el stack nuevo no carga.

   Los tres z-index van escalonados a proposito y por encima de 1000, que es
   donde empiezan las capas de Bootstrap: el de arriba a la derecha tiene que
   quedar sobre los dos de abajo cuando coinciden en pantalla.
   ------------------------------------------------------------------------ */
.floating-btn-izq {
    position: fixed;
    bottom: var(--sp-5);
    left: var(--sp-5);
    z-index: 1001;
}

.floating-btn-der {
    position: fixed;
    bottom: var(--sp-5);
    right: var(--sp-5);
    z-index: 1000;
}

.floating-btn-der-up {
    position: fixed;
    top: calc(var(--navbar-h) + var(--sp-3));
    right: var(--sp-5);
    z-index: 1002;
}

/* ==========================================================================
   Capa sobre DataTables. Se completa en la Task 6.
   ========================================================================== */

/* DataTables 2.0.3 con la integracion oficial de Bootstrap 5.

   Casi todo el chrome de la tabla ya viene tematizado: el buscador, el selector
   de cantidad y la paginacion son componentes de Bootstrap y los cubre
   03-components.css, y las filas rayadas y el hover los pasa a blanco el propio
   DataTables bajo :root[data-bs-theme=dark]. Aca queda lo que no.

   Los nombres de clase son los de la 2.x. La 1.x usaba dataTables_wrapper,
   dataTables_filter y dataTables_paginate: esos no matchean nada hoy. */

/* La fila seleccionada sigue saliendo con el azul de Bootstrap y su link casi
   negro encima. Van en triplete RGB porque DataTables las mete dentro de
   rgba(), igual que --bs-primary-rgb en los tokens.

   La extension Select no esta en el build (es un dt/dt-2.0.3 pelado), pero la
   clase igual aparece: Educadores.cshtml se la agrega a mano a las filas. */
:root {
    --dt-row-selected: 2, 84, 210;          /* --brand */
    --dt-row-selected-text: 230, 236, 247;  /* --text */
    --dt-row-selected-link: 230, 236, 247;  /* --text, que va sobre la marca */
}

div.dt-container {
    font-size: var(--fs-sm);
}

div.dt-container div.dt-info {
    color: var(--text-dim);
}

/* Botones de exportacion. buttons.dataTables.css no los pasa por .btn de
   Bootstrap: los dibuja el mismo, claros, con degradado y borde negro.

   Los selectores de abajo son los de la libreria copiados tal cual, y cada
   lista repite las dos mitades que ella declara: el boton suelto y el que vive
   dentro de un split. No es decoracion. Un ".dt-buttons .dt-button" tiene menos
   especificidad y pierde, y saltearse una mitad deja ese caso con el estilo
   claro del vendor. Empatamos en especificidad y ganamos por orden de carga.

   Hoy las vistas solo configuran copy y excel, asi que ni el estado activo ni
   los split aparecen. Estan cubiertos igual: son justo los que fallarian en
   silencio el dia que alguien agregue un boton de tipo toggle. */
div.dt-buttons > .dt-button,
div.dt-buttons > div.dt-button-split .dt-button {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    padding: var(--sp-1) var(--sp-3);
    transition: border-color var(--t-fast) var(--ease),
                background-color var(--t-fast) var(--ease);
}

div.dt-buttons > .dt-button:hover:not(.disabled),
div.dt-buttons > div.dt-button-split .dt-button:hover:not(.disabled) {
    background: var(--surface-2);
    border: 1px solid var(--brand-border);
}

div.dt-buttons > .dt-button:focus:not(.disabled),
div.dt-buttons > div.dt-button-split .dt-button:focus:not(.disabled) {
    outline: 2px solid var(--brand);
}

div.dt-buttons > .dt-button.dt-button-active:not(.disabled),
div.dt-buttons > div.dt-button-split .dt-button.dt-button-active:not(.disabled),
div.dt-buttons > .dt-button.dt-button-active:not(.disabled):hover:not(.disabled),
div.dt-buttons > div.dt-button-split .dt-button.dt-button-active:not(.disabled):hover:not(.disabled) {
    background: var(--brand-soft);
    border-color: var(--brand-border);
    box-shadow: none;
}

/* Menu desplegable de los botones (colVis y los split). */
div.dt-button-collection {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--sh-overlay);
}

/* ==========================================================================
   Utilidades propias. Unico archivo del tema donde !important esta permitido:
   una utilidad tiene que ganar por contrato.

   Solo va lo que Bootstrap no trae. Nada de espaciado ni de grilla, y tampoco
   un .u-hidden ni un .u-nowrap: .d-none y .text-nowrap ya hacen exactamente
   eso. Duplicarlos es volver al problema que este rework viene a resolver.
   ========================================================================== */

.u-pos { color: var(--pos) !important; }
.u-neg { color: var(--neg) !important; }
.u-warn { color: var(--warn) !important; }
.u-dim { color: var(--text-dim) !important; }
.u-brand { color: var(--brand-text) !important; }

/* Bootstrap no tiene equivalente de estas dos: .font-monospace usa su propia
   familia, no la del tema. */
.u-numeric { font-variant-numeric: tabular-nums !important; }
.u-mono { font-family: var(--font-mono) !important; }

.u-surface-1 { background-color: var(--surface-1) !important; }
.u-surface-2 { background-color: var(--surface-2) !important; }