/* =====================================================================
   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 ---- */
    --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));

    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"] {
    --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;
}

/* ---------- 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); }

/* ---------- 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: linear-gradient(90deg, var(--primario-2), var(--accent)); }
.punto-internacional { background: var(--barra-pagar); }

/* 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); }

/* ---------- 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); }

/* ---------------------------------------------------------------
   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; }