/* =====================================================================
   RA Auditoría — tema tomado de drawview.cl

   La paleta, la tipografía y los radios son los mismos que usa
   drawview.cl, con los mismos nombres de variables para que se pueda
   comparar contra el original. Sobre eso se re-mapean las variables de
   Bootstrap 5.3, así los componentes de la plantilla (tarjetas, tablas,
   botones, formularios) heredan el tema en vez de pelearse con él.
   ===================================================================== */

@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url(/fuentes/inter-400.woff2) format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap; src: url(/fuentes/inter-500.woff2) format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap; src: url(/fuentes/inter-600.woff2) format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 700; font-display: swap; src: url(/fuentes/inter-700.woff2) format("woff2"); }

:root {
    /* ---- Paleta de drawview.cl ---- */
    /* Nacional e internacional, en gráficos y puntos (12-10-2026). Azul y
       naranjo: el par azul/violeta anterior no se distinguía con daltonismo
       (ΔE 0,4) ni con visión normal (ΔE 12); este pasa en ambos modos (≥ 25). */
    --serie-nacional: #3987e5;
    --serie-internacional: #d95926;
    --bg: #0b1020;
    --panel-2: #182545;
    --superficie-0: #0b1424;
    --superficie-1: #101a2f;
    --superficie-2: #16223e;
    --elegido: #1b2b52;
    --chip-fondo: #1a2745;
    --line: #24345a;
    --line-soft: #1c2947;
    --line-fuerte: #33477a;
    --text: #e9effa;
    --text-dim: #9fb0cc;
    --text-mute: #7e8da8;
    --accent: #4c8dff;
    --accent-2: #a78bfa;
    --ok: #34d399;
    --err: #f87171;
    --warn: #fbbf24;
    --barra: rgb(10 16 32 / 72%);
    --velo: rgb(4 8 18 / 68%);
    --cielo-1: #16264a;
    --cielo-2: #1a1740;
    --tarjeta: linear-gradient(180deg, rgb(24 37 69 / 55%), rgb(19 29 51 / 85%));
    --primario-1: #4c8dff;
    --primario-2: #2f6fe0;
    --primario-borde: #6ba2ff;
    --primario-texto: #f2f7ff;
    --radius: 10px;
    --radius-lg: 14px;
    --shadow: 0 10px 30px rgb(3 8 20 / 55%);
    --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

    /* 250 partia en dos lineas «Sin respaldo del cobro» con su contador y
       cuatro titulos de grupo. 264 los deja en una sin robarle casi nada
       a la pantalla. */
    --ra-sidebar: 264px;

    /* Se usan en un par de lugares donde el valor no puede salir de otra
       variable: el fondo del botón secundario al pasar por encima y la
       sombra del modal. Sin esto el tema claro los deja oscuros. */
    --hover-secundario: #21315b;
    --sombra-modal: 0 24px 60px rgb(0 0 0 / 55%);
    --barra-pagar: linear-gradient(90deg, #7c5cd6, var(--accent-2));

    /* El resaltador del número que entregó Defontana (.numero-erp). Igual
       en los dos temas: texto oscuro sobre amarillo se lee en ambos, y es el
       mismo amarillo de los PDF. */
    --resaltador: #fde047;
    --resaltador-texto: #1c1a05;

    color-scheme: dark;
}

/* =====================================================================
   Tema claro

   La misma estructura con otra paleta: todo el diseño lee estas
   variables, así que redefinirlas alcanza. No es el tema oscuro
   "aclarado" — en claro los grises invertidos se ven sucios: las
   superficies van a blanco y a azules muy lavados, y el texto baja a
   un azul oscuro en vez de negro puro, que cansa menos de leer.

   Los acentos se oscurecen un poco: el mismo azul que brilla sobre
   fondo oscuro no tiene contraste suficiente sobre blanco.
   ===================================================================== */
[data-bs-theme="light"] {
    --serie-nacional: #2a78d6;
    --serie-internacional: #eb6834;
    --bg: #f4f6fb;
    --panel-2: #ffffff;
    --superficie-0: #eef2f9;
    --superficie-1: #ffffff;
    --superficie-2: #f2f5fb;
    --elegido: #e3ecfd;
    --chip-fondo: #eaf0fb;
    --line: #d3dcea;
    --line-soft: #e2e8f2;
    --line-fuerte: #b3c2da;
    --text: #16203a;
    --text-dim: #46536e;
    --text-mute: #6b7994;
    --accent: #2563eb;
    --accent-2: #7c3aed;
    --ok: #047857;
    --err: #b91c1c;
    --warn: #b45309;
    --barra: rgb(255 255 255 / 82%);
    --velo: rgb(22 32 58 / 38%);
    --cielo-1: #dbe6fb;
    --cielo-2: #e6e2fb;
    --tarjeta: linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(247 250 255 / 96%));
    --primario-1: #2f6fe0;
    --primario-2: #1d4fb8;
    --primario-borde: #1d4fb8;
    --primario-texto: #ffffff;
    --shadow: 0 8px 24px rgb(22 32 58 / 10%);

    --hover-secundario: #e3ecfd;
    --sombra-modal: 0 24px 60px rgb(22 32 58 / 22%);
    --barra-pagar: linear-gradient(90deg, #9333ea, var(--accent-2));

    color-scheme: light;
}

/* ---- Re-mapeo de Bootstrap 5.3 ---- */
[data-bs-theme="dark"],
[data-bs-theme="light"] {
    --bs-body-bg: transparent;
    --bs-body-color: var(--text);
    --bs-body-font-family: var(--font);
    --bs-emphasis-color: var(--text);
    --bs-secondary-color: var(--text-dim);
    --bs-tertiary-color: var(--text-mute);
    --bs-border-color: var(--line-soft);
    --bs-border-color-translucent: var(--line-soft);
    --bs-border-radius: var(--radius);
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: var(--radius-lg);

    --bs-primary: var(--accent);
    --bs-primary-rgb: 76, 141, 255;
    --bs-link-color: var(--accent);
    --bs-link-hover-color: var(--primario-borde);
    --bs-link-color-rgb: 76, 141, 255;

    --bs-secondary-bg: var(--superficie-2);
    --bs-tertiary-bg: var(--superficie-1);
    --bs-heading-color: var(--text);
}

body {
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background:
        radial-gradient(1200px 700px at 12% -10%, var(--cielo-1) 0%, transparent 60%),
        radial-gradient(900px 600px at 100% 0%, var(--cielo-2) 0%, transparent 55%),
        var(--bg);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: color-mix(in srgb, var(--accent) 32%, transparent); color: var(--text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--line-fuerte); background-clip: content-box; }

/* ---------- Estructura ---------- */
.app {
    display: flex;
    min-height: 100vh;
}

.app-sidebar {
    width: var(--ra-sidebar);
    flex: 0 0 var(--ra-sidebar);
    background: var(--barra);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-right: 1px solid var(--line-soft);
    padding: 1.25rem 0.75rem;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;

    /* La barra de desplazamiento gruesa de Windows, gris claro sobre el
       fondo oscuro, era lo primero que se veía al abrir tres grupos. */
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
}

.app-sidebar::-webkit-scrollbar { width: 6px; }
.app-sidebar::-webkit-scrollbar-track { background: transparent; }
.app-sidebar::-webkit-scrollbar-thumb {
    background: var(--line);
    border-radius: 3px;
}
.app-sidebar::-webkit-scrollbar-thumb:hover { background: var(--line-fuerte); }

.app-contenido {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.5rem;
    background: var(--barra);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line-soft);
    position: sticky;
    top: 0;
    z-index: 20;
}

.app-cabecera-titulo {
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}

.app-principal {
    padding: 1.5rem;
    flex: 1 1 auto;
}

/* ---------- Marca y navegación ---------- */
.app-marca {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0 0.5rem 1rem;
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: 0.75rem;
}

.app-marca strong {
    display: block;
    line-height: 1.15;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.82rem;
}

.app-marca small {
    color: var(--text-mute);
    font-size: 0.72rem;
}

.app-marca-icono {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(180deg, var(--primario-1), var(--primario-2));
    border: 1px solid var(--primario-borde);
    color: var(--primario-texto);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    flex: 0 0 auto;
}

.app-nav {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.app-nav a {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.65rem;
    border-radius: 8px;
    color: var(--text-dim);
    text-decoration: none;
    border: 1px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
}

/* ---------- Iconos de la navegacion ----------

   Son trazo con currentColor: toman el color del enlace, asi que se
   apagan con el texto, se encienden en el activo y no necesitan una
   variante por tema. El sprite se define una vez en _Iconos.cshtml.

   flex: 0 0 auto es lo que impide que el icono se aplaste cuando el
   texto del enlace es largo: sin eso, "Control de cobertura mensual"
   convierte el cuadrado en una raya.                                    */
.ico {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .85;
}

.app-nav a:hover .ico,
.app-nav a.active .ico { opacity: 1; }

/* Los subniveles -las variantes filtradas de la linea de arriba- van
   sangrados y con el icono mas chico: se leen como lo que son, una
   version acotada del anterior, sin necesidad del punto que los
   prefijaba antes. */
.app-nav a.sub {
    padding-left: 1.55rem;
    font-size: .92em;
    /* Una guia vertical a la izquierda: el subnivel se lee colgado de su
       opcion madre y no como una opcion mas de la lista. */
    background-image: linear-gradient(var(--line), var(--line));
    background-size: 1px 100%;
    background-position: 1.05rem 0;
    background-repeat: no-repeat;
}

.app-nav a.sub:hover,
.app-nav a.sub.active { background-image: none; }

/* ---------- Separadores entre bloques ----------

   Los grupos se juntan en tres bloques -el trabajo del dia, los papeles,
   el ERP y la administracion- con una linea fina entre ellos. Sin eso,
   once titulos iguales seguidos no dicen donde termina un tema y empieza
   otro.                                                                  */
.app-nav-separador {
    height: 1px;
    background: var(--line-soft);
    margin: 0.6rem 0.65rem 0.2rem;
}

.app-nav a.sub .ico {
    width: .82rem;
    height: .82rem;
    opacity: .65;
}

/* ---------- Visto bueno ----------

   Un tilde delante de la opcion: se probo de punta a punta y funciona.

   No lo deduce el sistema -no sabria de que-: se pone a mano cuando la
   revision ocurrio de verdad, y eso es justamente lo que le da valor. Una
   opcion sin tilde no esta mala, solo todavia no se reviso.

   Va delante, en el margen izquierdo y FUERA de la fila: colgado del
   borde, no empujando el icono. Dentro de la fila corria el icono y el
   texto de las opciones marcadas, y la columna de iconos quedaba en
   zigzag: el ojo lee una lista por su borde izquierdo, y un borde
   irregular se lee como desorden aunque todo este en su lugar.          */
.app-nav a { position: relative; }

.app-nav a .visto {
    position: absolute;
    left: -0.05rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ok);
    font-weight: 700;
    /* Discreto: es una marca de estado, no un llamado de atención. Más
       grande y a pleno color se leía como una viñeta. */
    font-size: .64rem;
    opacity: .8;
    line-height: 1;
    pointer-events: none;
}

/* En una opcion apagada el tilde no debe encenderse solo: si no hay nada
   detras, que este revisada no es la noticia. */
.app-nav a.apagada .visto { color: inherit; }

/* ---------- Opciones sin nada detras ----------

   Se muestran, pero apagadas y sin destino: saber que la opcion existe es
   parte de conocer el sistema, y llevar a una lista vacia no es un
   servicio. El contador de al lado dice por que esta apagada.

   Se apaga con opacity y no quitando el enlace para que la barra no
   cambie de forma segun los datos: las opciones siempre estan en el
   mismo lugar, y el ojo las encuentra donde las dejo ayer.               */
.app-nav a.apagada {
    opacity: .38;
    pointer-events: none;
    font-weight: 400;
}

.app-nav a.apagada .contador { display: none; }

/* El numero va a la derecha, pegado al borde: se lee de reojo sin
   competir con el texto de la opcion. */
.contador {
    margin-left: auto;
    font-size: .68rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-mute);
    background: var(--chip-fondo);
    border-radius: 999px;
    padding: 0 .4rem;
    line-height: 1.35;
}

/* Los contadores de lo que FALTA -sin comprobante, vencidos, sin
   describir- llevan el color de aviso: son trabajo pendiente, no
   inventario. */
.contador.aviso {
    color: var(--warn);
    background: color-mix(in srgb, var(--warn) 14%, transparent);
}

.app-nav a.active .contador { color: var(--accent); }

.app-grupo > summary .ico {
    width: .85rem;
    height: .85rem;
    opacity: .7;
}

.app-nav a:hover {
    background: var(--chip-fondo);
    color: var(--text);
    text-decoration: none;
}

.app-nav a.active {
    background: var(--elegido);
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    color: var(--accent);
    font-weight: 600;
}

.app-nav-titulo {
    padding: 0.9rem 0.65rem 0.25rem;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-mute);
    font-weight: 600;
}

/* Un subtítulo dentro de un grupo: parte el grupo Banco en «lo que dice el
   banco» y «lo que registró la plataforma». Más chico que .app-nav-titulo:
   es una división del grupo, no otro bloque de la barra. */
.app-subtitulo {
    padding: 0.55rem 0.65rem 0.15rem;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-mute);
    font-weight: 600;
}

/* ---------- Grupos plegables de la navegación ----------

   La barra creció a dos docenas de enlaces y encontrar uno obligaba a
   leerlos todos. Cada grupo es un <details> nativo: se abre solo cuando
   contiene la pantalla actual, y sin JavaScript sigue funcionando.        */
.app-grupo > summary {
    padding: 0.75rem 0.65rem 0.3rem;
    font-size: 0.68rem;
    text-transform: uppercase;
    /* 0.08em partia en dos lineas cuatro titulos de grupo: en mayusculas
       cada centesima de em se nota. */
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-mute);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    user-select: none;
}

/* El triángulo por omisión de cada navegador se ve distinto: se apaga y
   se dibuja uno propio que gira al abrir. */
.app-grupo > summary::-webkit-details-marker { display: none; }
.app-grupo > summary::marker { content: ''; }

/* El chevron va a la DERECHA, como en cualquier aplicación seria. A la
   izquierda formaba «▸ icono TÍTULO»: tres signos seguidos antes de poder
   leer el nombre, y el triángulo competía con el icono del grupo. */
.app-grupo > summary::after {
    content: '';
    margin-left: auto;
    width: 0.38rem;
    height: 0.38rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    opacity: .45;
    transition: transform .15s, opacity .15s;
    flex: 0 0 auto;
}

.app-grupo[open] > summary::after { transform: rotate(45deg); }
.app-grupo > summary:hover { color: var(--text-dim); }
.app-grupo > summary:hover::after { opacity: .85; }

/* El grupo abierto se nota: es donde uno está parado. Con el mismo gris
   que los cerrados, había que buscar el enlace activo para saberlo. */
.app-grupo[open] > summary { color: var(--text-dim); }

/* ---------- Tarjetas ---------- */
.card {
    background: var(--tarjeta);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    color: var(--text);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--line-soft);
    font-weight: 600;
    color: var(--text);
}

/* ---------- Tablas ---------- */
.tabla-datos {
    font-size: 0.85rem;
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-dim);
    --bs-table-border-color: var(--line-soft);
    --bs-table-hover-bg: var(--superficie-2);
    --bs-table-hover-color: var(--text);
    margin-bottom: 0;
}

.tabla-datos thead th {
    background: color-mix(in srgb, var(--superficie-0) 60%, transparent);
    border-bottom: 1px solid var(--line) !important;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-mute);
    font-weight: 600;
    white-space: nowrap;
}

.tabla-datos td {
    vertical-align: middle;
    border-color: var(--line-soft);
}

.tabla-datos tbody tr:last-child td { border-bottom: 0; }

.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---------- El año en columnas ----------
   Doce meses de corrido no caben en una pantalla angosta, así que la tabla
   se desplaza a lo ancho y la primera columna —la que dice qué se está
   mirando— queda pegada: sin eso, al llegar a octubre ya no se sabe si la
   fila es nacional o internacional. */
.tabla-meses { font-size: 0.8rem; }

.tabla-meses th:first-child,
.tabla-meses td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--tarjeta);
}

.tabla-meses thead th:first-child { z-index: 3; }

.tabla-meses th.num,
.tabla-meses td.num { min-width: 7.5rem; }

/* El mes que todavía no termina: su cifra no es comparable con las cerradas. */
.tabla-meses th.mes-en-curso { color: var(--warn); }

/* Proyecciones: el año y el mes en curso, al doble (pedido del 10-10-2026). */
.anio-destacado { font-size: 2em; font-weight: 800; color: var(--accent); vertical-align: -0.12em; }
.tabla-meses th.mes-en-curso { font-size: 2em; line-height: 1; }
.tabla-meses .etiqueta-en-curso {
    font-size: 0.32em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.15rem;
}
/* La columna del mes en curso, resaltada de arriba abajo. */
.tabla-meses th.mes-en-curso,
.tabla-meses td.col-en-curso {
    background: color-mix(in srgb, var(--warn) 10%, transparent);
    border-left: 2px solid color-mix(in srgb, var(--warn) 55%, transparent);
    border-right: 2px solid color-mix(in srgb, var(--warn) 55%, transparent);
}
/* El PDF y el Excel de cada mes, bajo el número. Tamaño fijo en rem: el
   encabezado del mes en curso va al doble y no tiene que arrastrarlos. */
.tabla-meses .acciones-mes { display: flex; gap: 0.35rem; justify-content: flex-end; margin-top: 0.15rem; }
.tabla-meses .acciones-mes .btn { font-size: 0.62rem; font-weight: 600; line-height: 1; letter-spacing: 0.02em; }

/* El mes en curso: una franja de una línea, no una tarjeta (10-10-2026). */
.mes-en-curso-franja {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.6rem;
    padding: 0.55rem 0.9rem; border-radius: var(--radius-lg);
    background: var(--tarjeta); border: 1px solid var(--line-soft); border-left: 4px solid var(--warn);
}
.mes-en-curso-franja .separador { width: 1px; align-self: stretch; background: var(--line-soft); margin: 0 0.3rem; }
.mes-en-curso-nombre { font-size: 1.5rem; font-weight: 800; text-transform: capitalize; line-height: 1.1; }
.mes-en-curso-valor { font-size: 1.5rem; font-variant-numeric: tabular-nums; color: var(--accent); }

/* ---------- Doce meses dentro de la ventana ----------
   Un año completo no cabe en el ancho por omisión del modal: se veía hasta
   julio y el resto quedaba detrás de una barra de desplazamiento, que es
   justo lo contrario de «ver el año entero de un vistazo». La ventana se
   ensancha cuando trae una tabla de meses, y las columnas se aprietan: un
   monto de nueve cifras entra en 5,4rem a 0,75rem. */
#modalFragmento:has(.tabla-meses) .modal-dialog { max-width: min(97vw, 1700px); }

#modalFragmento .tabla-meses { font-size: 0.75rem; }

#modalFragmento .tabla-meses th.num,
#modalFragmento .tabla-meses td.num { min-width: 5.4rem; }

#modalFragmento .tabla-meses th:first-child,
#modalFragmento .tabla-meses td:first-child { min-width: 8rem; }

.tabla-meses .fila-total td {
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--superficie-0) 55%, transparent);
}

/* Los mismos colores de la barra apilada, para que la leyenda de cada fila
   no haga falta: el punto dice qué franja es cuál. */
.punto-nacional,
.punto-internacional {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    margin-right: 0.35rem;
}

.punto-nacional { background: var(--serie-nacional); }
.punto-internacional { background: var(--serie-internacional); }
.barra-nacional { background: var(--serie-nacional); }
.barra-internacional { background: var(--serie-internacional); }

/* Variación contra el mes anterior: flecha y signo, y el color como apoyo. */
.variacion { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.variacion-sube { color: var(--ok); }
.variacion-baja { color: var(--err); }
.fila-variacion td { padding-top: 0.15rem; padding-bottom: 0.15rem; }

/* Los mismos dos colores del comportamiento anual, para que la fila y la
   barra se lean juntas. */
.punto-pagado,
.punto-impago {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    margin-right: 0.35rem;
}

.punto-pagado { background: var(--ok); }
.punto-impago { background: var(--err); }

/* ---------- Campos de monto ----------
   Las flechas de subir y bajar no sirven para un monto: nadie corrige un
   pago de a un peso, y ocupan el lugar donde uno mira la cifra. Se quitan
   en todos los campos numéricos, no solo en los de monto. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* Los montos se leen mejor con cifras de ancho fijo. */
input.monto { font-variant-numeric: tabular-nums; }

/* ---------- Tablas que se ordenan y filas que se abren ----------
   El encabezado ordenable se marca con la flecha, y solo cuando está
   ordenando por esa columna: una flecha permanente en cada título
   ensucia y no dice cuál manda. */
.tabla-datos thead th.ordenable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 1.1rem;
}

.tabla-datos thead th.ordenable:hover { color: var(--text); }

.tabla-datos thead th.orden-asc::after,
.tabla-datos thead th.orden-desc::after {
    position: absolute;
    right: .35rem;
    color: var(--accent);
    font-size: .8rem;
    line-height: 1;
}

.tabla-datos thead th.orden-asc::after  { content: "\2191"; }
.tabla-datos thead th.orden-desc::after { content: "\2193"; }

/* La fila recién emitida, para no buscarla con el dedo al volver a la lista.
   El resalte se apaga solo: sirve para encontrarla, no para quedarse pintado.
   El borde de la izquierda es lo que la ubica de un vistazo aun después de que
   el fondo se desvanece. */
.tabla-datos tbody tr.fila-destacada > td {
    background: color-mix(in srgb, var(--ok) 22%, transparent);
    animation: apagar-resalte 6s ease-out forwards;
}

.tabla-datos tbody tr.fila-destacada > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--ok);
}

@keyframes apagar-resalte {
    0%   { background: color-mix(in srgb, var(--ok) 32%, transparent); }
    70%  { background: color-mix(in srgb, var(--ok) 22%, transparent); }
    100% { background: transparent; }
}

/* Una fila que abre algo tiene que verse así antes de pincharla. */
.tabla-clicable tbody tr { cursor: pointer; }

.tabla-clicable tbody tr:hover {
    background: var(--superficie-2);
}

/* ---------- Botones ---------- */
.btn-primary {
    background: linear-gradient(180deg, var(--primario-1), var(--primario-2));
    border-color: var(--primario-borde);
    color: var(--primario-texto);
    font-weight: 600;
}

.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--primario-1) 85%, white),
        color-mix(in srgb, var(--primario-2) 85%, white));
    border-color: var(--primario-borde);
    color: var(--primario-texto);
}

.btn-outline-secondary {
    border-color: var(--line);
    color: var(--text-dim);
    background: var(--panel-2);
}

.btn-outline-secondary:hover {
    background: var(--hover-secundario);
    border-color: var(--line-fuerte);
    color: var(--text);
}

.btn-outline-primary {
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    color: var(--accent);
    background: transparent;
}

.btn-outline-primary:hover {
    background: var(--elegido);
    border-color: var(--accent);
    color: var(--accent);
}

.btn-outline-danger { border-color: color-mix(in srgb, var(--err) 45%, transparent); color: var(--err); }
.btn-outline-danger:hover { background: color-mix(in srgb, var(--err) 18%, transparent); border-color: var(--err); color: var(--err); }

.btn-outline-success { border-color: color-mix(in srgb, var(--ok) 45%, transparent); color: var(--ok); }
.btn-outline-success:hover { background: color-mix(in srgb, var(--ok) 18%, transparent); border-color: var(--ok); color: var(--ok); }

/* ---------- Formularios ---------- */
.form-control,
.form-select {
    background: var(--superficie-1);
    border-color: var(--line);
    color: var(--text);
}

.form-control:focus,
.form-select:focus {
    background: var(--superficie-1);
    border-color: var(--accent);
    color: var(--text);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.form-control::placeholder { color: var(--text-mute); }
.form-text { color: var(--text-mute); }
.form-label { color: var(--text-dim); font-weight: 500; }
.form-check-input { background-color: var(--superficie-1); border-color: var(--line); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }

/* ---------- Menús ---------- */
.dropdown-menu {
    background: var(--superficie-1);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 4px;
}

.dropdown-item { color: var(--text-dim); border-radius: 7px; }
.dropdown-item:hover { background: var(--chip-fondo); color: var(--text); }
.dropdown-item.active,
.dropdown-item:active { background: var(--elegido); color: var(--accent); }
.dropdown-divider { border-color: var(--line-soft); }

/* ---------- Insignias ---------- */
.badge { font-weight: 600; border-radius: 999px; padding: 0.3em 0.7em; }

.text-bg-success { color: var(--ok) !important; background: color-mix(in srgb, var(--ok) 15%, transparent) !important; border: 1px solid color-mix(in srgb, var(--ok) 34%, transparent); }
.text-bg-danger  { color: var(--err) !important; background: color-mix(in srgb, var(--err) 15%, transparent) !important; border: 1px solid color-mix(in srgb, var(--err) 34%, transparent); }
.text-bg-warning { color: var(--warn) !important; background: color-mix(in srgb, var(--warn) 15%, transparent) !important; border: 1px solid color-mix(in srgb, var(--warn) 34%, transparent); }
.text-bg-primary { color: var(--accent) !important; background: color-mix(in srgb, var(--accent) 15%, transparent) !important; border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent); }
.text-bg-info    { color: var(--accent-2) !important; background: color-mix(in srgb, var(--accent-2) 15%, transparent) !important; border: 1px solid color-mix(in srgb, var(--accent-2) 34%, transparent); }
.text-bg-secondary { color: var(--text-mute) !important; background: var(--chip-fondo) !important; border: 1px solid var(--line-soft); }
.text-bg-light   { color: var(--text-dim) !important; background: var(--chip-fondo) !important; border: 1px solid var(--line-soft) !important; }

/* ---------- Avisos ---------- */
.alert { border-radius: var(--radius); border-width: 1px; }
.alert-success { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); border-color: color-mix(in srgb, var(--ok) 32%, transparent); }
.alert-warning { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); border-color: color-mix(in srgb, var(--warn) 32%, transparent); }
.alert-danger  { color: var(--err); background: color-mix(in srgb, var(--err) 12%, transparent); border-color: color-mix(in srgb, var(--err) 32%, transparent); }
.alert-light   { color: var(--text-dim); background: var(--superficie-1); border-color: var(--line-soft); }

/* ---------- Indicadores del panel ---------- */
.kpi {
    background: var(--tarjeta);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 1rem 1.1rem;
    height: 100%;
}

.kpi-etiqueta {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-mute);
    font-weight: 600;
}

.kpi-valor {
    font-size: 1.6rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-top: 0.25rem;
    background: linear-gradient(100deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.kpi-nota { font-size: 0.78rem; color: var(--text-mute); }

/* La «T» del panel: el total arriba y, debajo, nacional | internacional. */
.kpi-t > .kpi-etiqueta,
.kpi-t > .kpi-valor,
.kpi-t > .kpi-nota { text-align: center; }
/* El total al doble del indicador normal (1.6rem); en el teléfono se achica
   para que la cifra no rompa el ancho. */
.kpi-t > .kpi-valor { font-size: clamp(1.9rem, 7vw, 3.2rem); line-height: 1.1; }
.kpi-t-partes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--line-soft);
}
.kpi-t-partes > div + div {
    border-left: 1px solid var(--line-soft);
    padding-left: 1rem;
}
.kpi-t-partes > div:first-child { padding-right: 1rem; }
.kpi-t-valor {
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-top: 0.15rem;
    color: var(--text);
}
/* Los dos indicadores que no son plata, uno sobre otro al lado de las T. */
.kpi-pila { display: grid; gap: 1rem; height: 100%; }
@media (max-width: 1199.98px) { .kpi-pila { grid-template-columns: 1fr 1fr; } }

/* ---------- Empresa activa ---------- */
.empresa-punto {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--chip, var(--text-mute));
    flex: 0 0 auto;
}

.empresa-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--chip, var(--text-dim));
    background: color-mix(in srgb, var(--chip, #7e8da8) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--chip, #7e8da8) 34%, transparent);
}

.empresa-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    color: var(--text-mute);
    white-space: nowrap;
}

/* ---------- Antigüedad del saldo ---------- */
.tramo { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; }

.tramo-nombre { flex: 0 0 105px; font-size: 0.78rem; color: var(--text-mute); }

.tramo-barras { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.barra {
    position: relative;
    height: 15px;
    background: var(--superficie-0);
    border: 1px solid var(--line-soft);
    border-radius: 4px;
    overflow: hidden;
}

.barra-relleno { height: 100%; min-width: 2px; }

/* Cobrado y por cobrar en la misma barra: verde lo que entró, rojo lo que
   falta. Son los mismos colores de los estados de pago, para que el mes y el
   documento se lean igual. */
.barra-pagada { background: var(--ok); }
.barra-impaga { background: var(--err); }
.barra-cobrar { background: linear-gradient(90deg, var(--primario-2), var(--accent)); }
.barra-pagar  { background: var(--barra-pagar); }

.barra-valor {
    position: absolute;
    right: 6px;
    top: 0;
    line-height: 13px;
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.muestra { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 3px; }
.muestra-cobrar { background: var(--accent); }
.muestra-pagar { background: var(--accent-2); }

/* ---------- Acceso ---------- */
.pagina-acceso {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background:
        radial-gradient(1200px 700px at 12% -10%, var(--cielo-1) 0%, transparent 60%),
        radial-gradient(900px 600px at 100% 0%, var(--cielo-2) 0%, transparent 55%),
        var(--bg);
}

.tarjeta-acceso {
    width: 100%;
    max-width: 380px;
    background: var(--tarjeta);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 2rem;
}

/* ---------- Utilidades ---------- */
.filtros {
    background: var(--superficie-1);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    padding: 1rem;
    margin-bottom: 1rem;
}

.vencido { color: var(--err); font-weight: 600; }

/* En una tabla, el rojo se perdía. Bootstrap pinta el color de CADA celda con
   «.table > :not(caption) > * > *», que gana por especificidad a «.vencido»:
   el color solo se veía en los <div> de adentro, no en la celda misma. Una
   regla propia para la celda lo devuelve. */
.tabla-datos td.vencido,
.tabla-datos th.vencido { color: var(--err); }
.text-muted { color: var(--text-mute) !important; }
.text-success { color: var(--ok) !important; }
.text-danger { color: var(--err) !important; }

pre, code { color: var(--text-dim); }

/* Una tecla en el texto. Bootstrap la pinta con el color del cuerpo de fondo y
   el del fondo por delante, que en el tema oscuro queda blanco sobre blanco:
   se veía un recuadro vacío donde debía decir ESC. */
kbd {
    background: var(--superficie-0);
    color: var(--text-dim);
    border: 1px solid var(--line);
    padding: 0.05rem 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
}
pre.bg-light, .bg-light {
    background: var(--superficie-0) !important;
    border-color: var(--line-soft) !important;
    color: var(--text-dim);
}

.font-monospace { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }

.page-link {
    background: var(--panel-2);
    border-color: var(--line);
    color: var(--text-dim);
}

.page-link:hover { background: var(--chip-fondo); border-color: var(--line-fuerte); color: var(--text); }

.page-item.active .page-link {
    background: linear-gradient(180deg, var(--primario-1), var(--primario-2));
    border-color: var(--primario-borde);
    color: var(--primario-texto);
}

@media (max-width: 991.98px) {
    .app { flex-direction: column; }

    .app-sidebar {
        width: 100%;
        flex: 0 0 auto;
        height: auto;
        position: static;
    }

    .app-cabecera { position: static; }
}

/* ---------------------------------------------------------------
   Panel mes a mes

   Cada celda es un boton: el monto, cuantos documentos y una barra que
   da la escala relativa entre los 72 valores de la tabla. La barra es
   lo que hace que un mes fuera de norma se vea sin leer numeros.
   --------------------------------------------------------------- */
/* El nombre del mes abre emitidos y recibidos juntos. Se ve como enlace
   y no como boton para no competir con los de cada bloque. */
.btn-mes {
    background: none;
    border: 0;
    padding: 0;
    color: var(--accent);
    cursor: pointer;
    text-transform: capitalize;
}

.btn-mes:hover { text-decoration: underline; }

/* El contador de documentos ES el boton que abre el detalle. Antes era
   solo un numero pinchable y nadie adivinaba que se podia presionar. */
.btn-docs {
    min-width: 3.2rem;
    font-variant-numeric: tabular-nums;
    padding: 0.1rem 0.4rem;
}

.celda-barra {
    display: block;
    height: 3px;
    margin-top: 2px;
    background: var(--superficie-0);
    border-radius: 2px;
    overflow: hidden;
}

.celda-barra i {
    display: block;
    height: 100%;
    background: var(--accent);
}

.celda-barra i.es-recibido { background: var(--text-mute); }

/* Una linea separa el bloque de emitidos del de recibidos y el resultado:
   sin ella las ocho columnas de numeros se leen como una sola masa.
   Las columnas 6 y 10 son el inicio de cada bloque. */
.tabla-mesamer th:nth-child(6),
.tabla-mesamer td:nth-child(6),
.tabla-mesamer th:nth-child(10),
.tabla-mesamer td:nth-child(10) { border-left: 1px solid var(--line); }

/* Con un solo año la barra va bajo el monto, ocupando la celda entera. */
.tabla-mesamer .celda-barra { margin-top: 3px; }

/* ---------------------------------------------------------------
   Zona de carga de respaldos

   Es una <label> con el input dentro: sin JavaScript sigue siendo un
   selector de archivo normal, y con el se le puede soltar encima.
   --------------------------------------------------------------- */
.zona-carga {
    display: block;
    width: 100%;
    padding: 1rem;
    border: 1.5px dashed var(--line-fuerte);
    border-radius: var(--radius-lg);
    background: var(--superficie-0);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.zona-carga:hover { border-color: var(--accent); }

.zona-carga.arrastrando {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, var(--superficie-0));
}

.zona-carga.con-archivo { border-style: solid; border-color: var(--ok); }

.zona-carga-texto { margin-top: .5rem; }
.zona-carga [data-zona-nombre]:not(:empty) { color: var(--ok); font-weight: 600; }

/* ---------------------------------------------------------------
   Modales

   El tema pone --bs-body-bg: transparent para que el degradado del
   fondo se vea a traves de las tarjetas. Bootstrap deriva el fondo del
   modal de esa misma variable, asi que el modal salia TRANSPARENTE y su
   contenido -- texto claro del tema oscuro -- quedaba ilegible.

   Por eso el modal necesita fondo propio y opaco. No sirve heredarlo.
   --------------------------------------------------------------- */
.modal-content {
    background: var(--superficie-1);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--sombra-modal);
    color: var(--text);
}

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

.modal-header { border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); }
.modal-footer { border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); }

.modal-title { color: var(--text); }

/* El aspa de cerrar viene negra: sobre fondo oscuro no se ve. */
.modal-header .btn-close { filter: invert(1) grayscale(100%) brightness(190%); }

/* Sin esto el velo de Bootstrap apenas oscurece y el contenido de atras
   compite con el del modal. */
.modal-backdrop.show { opacity: .72; }

/* Las tarjetas de dentro del modal irian con el mismo tono que el
   modal y se perderian los bordes: se separan un escalon. */
.modal-body .card,
.modal-body .kpi { background: var(--superficie-0); }

/* El visor de PDF puede abrirse DESDE otro modal (la ficha de una factura
   del exterior en su ventana). En el layout está antes que #modalFragmento y,
   con el mismo z-index, quedaba detrás: se lo sube un escalón. */
#modalPdf { z-index: 1065; }

/* El número que entregó Defontana —comprobante contable o folio emitido—,
   pasado con resaltador: es lo que hay que buscar allá. Mismo amarillo que
   en los PDF (PdfDocumento.TextoResaltado). */
.numero-erp {
    background: var(--resaltador);
    color: var(--resaltador-texto);
    font-weight: 600;
    padding: .05em .4em;
    border-radius: 4px;
    white-space: nowrap;
}

/* El calendario de cartolas (Auditoría bancaria): un cuadro por mes.
   Verde = cargada (se pulsa y abre la cartola), verde punteado = solo una
   consulta provisoria, gris = falta. Sobre --ok y --line para que funcione
   en los dos temas. */
.cal-cartolas td, .cal-cartolas th { vertical-align: middle; }
.cal-mes {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    height: 1.6rem;
    padding: 0 .3rem;
    border-radius: 6px;
    font-size: .72rem;
    font-weight: 600;
    text-decoration: none;
}
.cal-cargada {
    background: color-mix(in srgb, var(--ok) 78%, transparent);
    color: #04120c;
}
.cal-cargada:hover { background: var(--ok); color: #04120c; }
/* Amarilla hasta que llegue la definitiva del período, que la reemplaza. */
.cal-provisoria {
    background: color-mix(in srgb, var(--warn) 80%, transparent);
    color: #1c1405;
}
.cal-provisoria:hover { background: var(--warn); color: #1c1405; }
.cal-falta {
    background: color-mix(in srgb, var(--text-mute) 22%, transparent);
    color: var(--text-mute);
}
.cal-futuro { background: transparent; }

/* La casilla cargada: el N° de cartola a la izquierda y, a la derecha, el
   saldo inicial arriba (chico) y el final abajo, que es el que importa. */
.cal-saldos {
    flex-direction: row;
    justify-content: space-between;
    gap: .35rem;
    height: auto;
    min-width: 5.6rem;
    padding: .15rem .35rem;
    line-height: 1.1;
    white-space: nowrap;
}
.cal-saldos .cal-num {
    font-size: .8rem;
    font-weight: 700;
    padding-right: .3rem;
    border-right: 1px solid color-mix(in srgb, currentColor 35%, transparent);
}
.cal-saldos .cal-montos { display: flex; flex-direction: column; align-items: flex-end; }
.cal-saldos .cal-ini { font-size: .6rem; font-weight: 500; opacity: .8; }
.cal-saldos .cal-fin { font-size: .7rem; font-weight: 700; }
.cal-falta, .cal-futuro { min-width: 5.6rem; }
.cal-muestra { min-width: 1.1rem; height: .8rem; vertical-align: middle; }

/* La comparación con el año anterior (Proyecciones). Este año, barra sólida
   en el acento; el anterior, relleno tenue con contorno: se distinguen por la
   forma además del color. Grilla y ejes recesivos; el texto en tinta, nunca
   en el color de la serie. */
.cmp-grafico { margin: 0; }
.cmp-grafico svg { display: block; max-height: 320px; }
.cmp-actual { fill: var(--accent); }
.cmp-actual.cmp-en-curso { fill: color-mix(in srgb, var(--accent) 55%, transparent); }
.cmp-anterior {
    fill: color-mix(in srgb, var(--text-mute) 22%, transparent);
    stroke: var(--text-mute);
    stroke-width: 1.5;
}
.cmp-grilla { stroke: var(--line-soft); stroke-width: 1; }
.cmp-base { stroke: var(--line-fuerte); stroke-width: 1; }
.cmp-eje { fill: var(--text-mute); font-size: 10px; font-family: var(--font); }
.cmp-zona { fill: transparent; }
.cmp-mes:hover .cmp-zona { fill: color-mix(in srgb, var(--text) 6%, transparent); }
.cmp-muestra {
    display: inline-block;
    width: .8rem;
    height: .8rem;
    border-radius: 3px;
    vertical-align: -1px;
}
.cmp-muestra.cmp-actual { background: var(--accent); }
.cmp-muestra.cmp-anterior {
    background: color-mix(in srgb, var(--text-mute) 22%, transparent);
    border: 1.5px solid var(--text-mute);
}

/* Una fila entera que abre su detalle en la ventana: que se note al pasar. */
tr[data-fragmento] { cursor: pointer; }

/* ---------------------------------------------------------------
   Informe de auditoría de una contraparte

   El mismo fragmento se muestra dentro del modal del maestro y como
   página suelta para imprimir. La versión impresa se pasa a fondo claro
   y tinta negra a propósito: el tema oscuro de la aplicación gasta
   tóner y se lee mal en papel.
   --------------------------------------------------------------- */
.informe-encabezado {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: .75rem;
}

.informe-titulo { font-size: 1.05rem; font-weight: 600; color: var(--text); }
.informe-kpis .kpi { margin-bottom: 0; }
.informe-tabla { font-size: .82rem; }
.informe-detalle { max-height: none; }

.informe-pagina {
    background: var(--fondo);
    padding: 1.25rem;
}

.informe-barra {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}

@media print {
    /* Nada de lo que rodea al informe tiene sentido en papel. */
    .app-sidebar,
    .app-cabecera,
    .no-imprimir,
    .modal-header,
    .modal-footer { display: none !important; }

    .app,
    .app-principal,
    .informe-pagina { padding: 0; margin: 0; }

    body,
    .informe-pagina,
    .modal-content,
    .card,
    .kpi {
        background: #fff !important;
        color: #000 !important;
        border-color: #bbb !important;
        box-shadow: none !important;
    }

    .informe-titulo,
    .kpi-valor,
    .text-muted,
    .kpi-etiqueta,
    .kpi-nota { color: #000 !important; }

    /* Los badges de color se imprimen como texto con borde: en blanco y
       negro un fondo oscuro tapa la etiqueta. */
    .badge {
        background: transparent !important;
        color: #000 !important;
        border: 1px solid #888 !important;
    }

    .vencido { color: #000 !important; font-weight: 700; }

    a { color: #000 !important; text-decoration: none !important; }

    /* Que no se parta una fila a la mitad entre dos páginas. */
    .informe-tabla tr { page-break-inside: avoid; }
    .informe-tabla thead { display: table-header-group; }

    .table-responsive { overflow: visible !important; }

    @page { margin: 12mm; }
}


/* ---------------------------------------------------------------
   El resumen de validacion no deja un recuadro rojo vacio

   asp-validation-summary siempre renderiza el div; cuando no hay
   errores le pone .validation-summary-valid. Sin esto, todo
   formulario abre con una barra roja en blanco que parece una falla.
   --------------------------------------------------------------- */
.validation-summary-valid { display: none !important; }

/* ---------- Buscador de opciones del menu ----------

   Va entre la marca y la navegacion, y se ve como un campo de la barra
   y no como un formulario: mismo fondo y mismo borde suave que el resto
   del panel. La lupa va DENTRO del campo, absoluta, para no gastar una
   columna de una barra que ya es angosta.                               */
.app-buscador {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
}

.app-buscador .ico {
    position: absolute;
    left: 0.55rem;
    color: var(--text-mute);
    pointer-events: none;
}

.app-buscador input {
    padding-left: 2rem;
    padding-right: 3.2rem;
    background: var(--superficie-1);
    border-color: var(--line-soft);
    color: var(--text-dim);
    font-size: 0.82rem;
}

.app-buscador input:focus {
    color: var(--text);
    box-shadow: none;
    border-color: var(--primario-borde);
}

/* El aspa que Chrome pone en los type=search desentona con la barra y
   ademas queda pegada al atajo. Se quita: Escape ya limpia el campo. */
.app-buscador input::-webkit-search-cancel-button { display: none; }

/* El atajo, discreto: esta para que se descubra, no para leerse. Se
   esconde al escribir -lo tapa el texto- via :focus del campo. */
.app-buscador-atajo {
    position: absolute;
    right: 0.5rem;
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    color: var(--text-mute);
    border: 1px solid var(--line-soft);
    border-radius: 5px;
    padding: 0.05rem 0.3rem;
    pointer-events: none;
    opacity: .75;
}

.app-buscador input:focus ~ .app-buscador-atajo { opacity: 0; }

.app-buscador-vacio {
    color: var(--text-mute);
    font-size: 0.75rem;
    padding: 0.4rem 0.65rem;
    margin: 0 0 0.5rem;
}

/* La opcion que calzo con lo buscado. Un realce sobrio: la barra ya
   distingue el enlace activo, y dos destaques compitiendo hacen que no
   se lea ninguno. */
.app-nav a.coincide {
    color: var(--text);
    background: var(--chip-fondo);
}

/* El atributo hidden tiene que ganarle a cualquier display.

   Un elemento con display:flex declarado -como .app-nav a o el propio
   .app-buscador- IGNORA el display:none implicito de [hidden], porque
   una regla de la hoja pesa mas que el estilo por defecto del
   navegador. Sin esto, el buscador del menu "ocultaba" opciones que
   seguian a la vista, y el campo aparecia aunque el script no hubiera
   corrido.

   Va al final y con !important a proposito: es una garantia
   transversal, no el estilo de un componente. */
[hidden] { display: none !important; }

/* ---------- Control del deposito en el reparto de un abono ----------

   Va arriba de la tabla de facturas y PEGADO al borde: mientras se baja
   por veinte documentos hay que seguir viendo cuanto queda por asignar.
   Antes estas cifras vivian en una linea de texto debajo de la tabla,
   que es justo donde no se mira.

   Las tarjetas son las .kpi de siempre: el mismo lenguaje visual que el
   resto de la aplicacion, para que se lean sin aprender nada nuevo.   */
.abono-control {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--superficie-1);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    padding: 0.6rem 0.65rem 0.5rem;
}

.abono-control.sobregirado {
    border-color: var(--err);
}

/* La barra dice de un vistazo cuanto se lleva repartido. */
.abono-barra {
    height: 4px;
    border-radius: 2px;
    background: var(--line-soft);
    margin: 0.55rem 0 0.4rem;
    overflow: hidden;
}

.abono-barra span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--primario-2);
    transition: width .15s;
}

.abono-barra span.completo { background: var(--ok); }
.abono-barra span.pasado   { background: var(--err); }

.abono-control-pie {
    font-size: 0.73rem;
    color: var(--text-dim);
}

/* Un campo que ya no se elige porque lo determina otro. Se ve apagado
   pero legible: sigue siendo un dato que hay que poder leer, no un
   hueco. Lo usa la moneda cuando la fija la cuenta del banco. */
.campo-fijado,
.form-select:disabled.campo-fijado {
    background-color: var(--superficie-1);
    color: var(--text-dim);
    opacity: 1;
    cursor: not-allowed;
}

/* ---------- Revisión total (🪄) ---------- */
/* Los indicadores son botones: filtran la lista por gravedad. */
.revision-kpi { color: inherit; font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.revision-kpi:hover { border-color: var(--line); }
.revision-kpi.activo { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.kpi-valor.revision-mal { background: none; color: var(--err); }
.kpi-valor.revision-bien { background: none; color: var(--ok); }

/* Cada control, con el color de su gravedad en el borde izquierdo. */
.revision-control { border-left: 4px solid var(--line-soft); }
.revision-control.revision-grave   { border-left-color: var(--err); }
.revision-control.revision-aviso   { border-left-color: var(--warn); }
.revision-control.revision-revisar { border-left-color: var(--accent); }
.revision-control > summary,
.revision-en-orden > summary { cursor: pointer; list-style: none; }
.revision-control > summary::-webkit-details-marker,
.revision-en-orden > summary::-webkit-details-marker { display: none; }
.revision-control > summary:hover { background: var(--superficie-1); }
.revision-rotulo { font-size: 0.68rem; letter-spacing: 0.06em; font-weight: 600; margin-bottom: 0.15rem; }

/* Al imprimir va todo, también lo filtrado (site.js abre los detalles). */
@media print {
    .revision-control[hidden] { display: block !important; }
}

/* ---------- Calendario de monedas ---------- */
.calendario-monedas { table-layout: fixed; min-width: 760px; }
.calendario-monedas td { vertical-align: top; padding: .35rem .45rem; height: 5.4rem; border-color: var(--line-soft); }
.calendario-monedas td.fuera { background: transparent; }
.calendario-monedas td.finde { background: color-mix(in srgb, var(--superficie-1) 60%, transparent); }
.calendario-monedas td.hoy { box-shadow: inset 0 0 0 2px var(--accent); }
.calendario-monedas td.buscada { background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 0 0 0 2px var(--accent); }
.calendario-monedas .dia { font-weight: 600; text-decoration: none; color: inherit; }
.calendario-monedas .dia:hover { color: var(--accent); }
.calendario-monedas .valor { display: flex; justify-content: space-between; font-size: .72rem; line-height: 1.35; }
.calendario-monedas .valor .mon { color: var(--text-mute); font-weight: 600; font-size: .64rem; letter-spacing: .03em; }
.calendario-monedas .valor.arrastrado span:last-child { color: var(--text-mute); font-style: italic; }

/* ---------- Stats de Proyecciones (12-10-2026) ----------
   Gráficos de doce meses en SVG: líneas guía recesivas, texto en tinta de
   texto, nacional e internacional con sus series. Al pasar sobre un mes se
   aclara su zona y aparece el detalle (<title>). */
.stats-valor { font-size: 1.3rem; text-transform: capitalize; }
.stats-grafico { margin: 0; }
.stats-grafico svg { overflow: visible; }
.stats-guia { stroke: var(--line-soft); stroke-width: 1; }
.stats-eje { stroke: var(--text-mute); }
.stats-texto { fill: var(--text-mute); font-size: 11px; font-variant-numeric: tabular-nums; }
.stats-texto-en-curso { fill: var(--warn); font-weight: 700; }
.stats-zona { fill: transparent; }
.stats-mes:hover .stats-zona, .stats-grafico g:hover > .stats-zona { fill: color-mix(in srgb, var(--text) 6%, transparent); }
/* Líneas (12-10-2026): 2px, una por serie; puntos de 8px con anillo del
   color de fondo para que se separen de la línea y entre sí. */
.stats-linea { stroke-width: 2; stroke-linecap: round; fill: none; }
.stats-linea-parcial { stroke-dasharray: 4 4; }
.stats-punto { stroke: var(--superficie-1); stroke-width: 2; }
.stats-punto-parcial { fill: var(--superficie-1) !important; stroke-width: 2; }
.stats-serie-nacional { stroke: var(--serie-nacional); }
.stats-serie-internacional { stroke: var(--serie-internacional); }
.stats-serie-saldo { stroke: var(--text-dim); }
circle.stats-serie-nacional { fill: var(--serie-nacional); stroke: var(--superficie-1); }
circle.stats-serie-internacional { fill: var(--serie-internacional); stroke: var(--superficie-1); }
circle.stats-serie-saldo { fill: var(--text-dim); stroke: var(--superficie-1); }
circle.stats-punto-parcial.stats-serie-nacional { stroke: var(--serie-nacional); }
circle.stats-punto-parcial.stats-serie-internacional { stroke: var(--serie-internacional); }
circle.stats-punto-parcial.stats-serie-saldo { stroke: var(--text-dim); }
circle.stats-punto-negativo.stats-serie-saldo { fill: var(--err); }
.stats-cruz { stroke: var(--text-mute); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0; }
.stats-mes:hover .stats-cruz { opacity: 1; }
.stats-mes:hover .stats-punto { r: 5.5; }
.stats-rotulo-serie { fill: var(--text-dim); font-size: 11px; font-weight: 600; }
/* La muestra de la leyenda: un trazo con su punto. */
.stats-muestra { display: inline-block; width: 18px; height: 0; border-top: 2px solid; vertical-align: middle; margin-right: 0.35rem; position: relative; }
.stats-muestra.stats-serie-nacional { border-color: var(--serie-nacional); }
.stats-muestra.stats-serie-internacional { border-color: var(--serie-internacional); }
.mes-en-curso-chico { color: var(--warn); }

/* ---------------------------------------------------------------------------
   Datos de exportación (13-10-2026, pedido del dueño): la sección se marca con
   el color de lo INTERNACIONAL (--serie-internacional, el mismo del panel y de
   Proyecciones) para que se vea de un vistazo que son datos de exportación.
   Solo el borde, el fondo tenue y la marca del título llevan el color: el
   texto sigue en los tonos de texto, legible en claro y en oscuro.
   --------------------------------------------------------------------------- */
.seccion-exportacion {
    border: 1px solid color-mix(in srgb, var(--serie-internacional) 45%, transparent);
    border-left: 4px solid var(--serie-internacional);
    background: color-mix(in srgb, var(--serie-internacional) 7%, var(--superficie-1));
}
.seccion-exportacion > .card-header,
.seccion-exportacion > summary {
    background: color-mix(in srgb, var(--serie-internacional) 14%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--serie-internacional) 30%, transparent);
}
.seccion-exportacion .marca-exportacion {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: inherit;
    background: color-mix(in srgb, var(--serie-internacional) 22%, transparent);
    border: 1px solid var(--serie-internacional);
    border-radius: 999px;
    padding: .1rem .5rem;
    margin-right: .4rem;
    vertical-align: middle;
}

/* «Con qué se le factura» (13-10-2026, pedido del dueño): marcada con el
   violeta secundario de la paleta (--accent-2). Distinto del naranjo de la
   exportación y del azul de lo nacional: estos datos los tienen todos los
   clientes. Mismo patrón que .seccion-exportacion. */
.seccion-facturacion {
    border: 1px solid color-mix(in srgb, var(--accent-2) 45%, transparent);
    border-left: 4px solid var(--accent-2);
    background: color-mix(in srgb, var(--accent-2) 7%, var(--superficie-1));
}
.seccion-facturacion > .card-header {
    background: color-mix(in srgb, var(--accent-2) 14%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--accent-2) 30%, transparent);
}
.seccion-facturacion .marca-facturacion {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: inherit;
    background: color-mix(in srgb, var(--accent-2) 22%, transparent);
    border: 1px solid var(--accent-2);
    border-radius: 999px;
    padding: .1rem .5rem;
    margin-right: .4rem;
    vertical-align: middle;
}