/* sistemaContable — sistema de diseño.
   Índigo (documentos, confianza) + verde azulado (validado). Tema claro u oscuro a elección de cada persona (menú del
   usuario; tema.js lo aplica antes de pintar para que no parpadee). Sin estilos en línea: la CSP solo permite este archivo.
   Las clases que usan app.js, tiempo-real.js y las pruebas (tabla-apilable, celda-principal, menu-item, metrica…) se
   conservan: cambiar su nombre rompe comportamiento. */

/* ---------- Tipografía: Inter (licencia OFL), servida desde el propio sistema ---------- */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../vendor/inter/inter-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../vendor/inter/inter-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens: tema claro ---------- */
:root {
    --sc-primario: #4f46e5;
    --sc-primario-hover: #4338ca;
    --sc-primario-oscuro: #312e81;
    --sc-primario-texto: #4338ca;
    --sc-primario-suave: #eef2ff;
    --sc-primario-borde: #c7d2fe;
    --sc-acento: #14b8a6;
    --sc-naranja: #ea580c;
    --sc-fondo: #f5f6fa;
    --sc-superficie: #ffffff;
    --sc-superficie-2: #f8fafc;
    --sc-superficie-3: #f1f5f9;
    --sc-borde: #e5e7ee;
    --sc-borde-fuerte: #d3d8e2;
    --sc-texto: #0f172a;
    --sc-texto-2: #475569;
    --sc-texto-3: #64748b;
    --sc-texto-4: #94a3b8;
    --sc-fila-hover: rgba(79, 70, 229, .035);
    --sc-foco: rgba(79, 70, 229, .2);
    --sc-sombra-1: 0 1px 2px rgba(15, 23, 42, .05);
    --sc-sombra-2: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .03);
    --sc-sombra-3: 0 14px 34px -14px rgba(15, 23, 42, .22), 0 4px 12px -4px rgba(15, 23, 42, .08);
    --sc-radio: .65rem;
    --sc-radio-grande: .9rem;
    --sc-lateral: #0f172a;
    --sc-lateral-texto: #94a3b8;
    --sc-lateral-texto-fuerte: #e2e8f0;
    --sc-lateral-borde: rgba(148, 163, 184, .12);
    --sc-lateral-hover: rgba(148, 163, 184, .09);
    --sc-lateral-activo: rgba(99, 102, 241, .22);
    --sc-ancho-lateral: 264px;
    --sc-ancho-lateral-plegado: 76px;
    --sc-alto-barra: 64px;

    /* Tonos suaves (insignias, celdas, íconos): fondo + texto */
    --tono-secondary-bg: #f1f5f9; --tono-secondary-fg: #475569;
    --tono-info-bg: #e0f2fe; --tono-info-fg: #0369a1;
    --tono-danger-bg: #fee2e2; --tono-danger-fg: #b91c1c;
    --tono-warning-bg: #fef3c7; --tono-warning-fg: #a5530a;
    --tono-orange-bg: #ffedd5; --tono-orange-fg: #c2410c;
    --tono-success-bg: #dcfce7; --tono-success-fg: #15803d;
    --tono-dark-bg: #e2e8f0; --tono-dark-fg: #0f172a;
    --tono-primary-bg: #e0e7ff; --tono-primary-fg: #3730a3;

    /* Gráficos (paleta validada: daltonismo y contraste sobre la tarjeta, en los dos temas) */
    --grafico-serie-1: #4f46e5;
    --grafico-serie-2: #0d9488;
    --grafico-grilla: #edf0f5;
    --grafico-eje: #cfd6e0;

    /* Bootstrap */
    --bs-primary: #4f46e5;
    --bs-primary-rgb: 79, 70, 229;
    --bs-link-color: #4f46e5;
    --bs-link-color-rgb: 79, 70, 229;
    --bs-link-hover-color: #3730a3;
    --bs-link-hover-color-rgb: 55, 48, 163;
    --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-font-size: .9375rem;
    --bs-body-color: #0f172a;
    --bs-body-color-rgb: 15, 23, 42;
    --bs-emphasis-color: #020617;
    --bs-emphasis-color-rgb: 2, 6, 23;
    --bs-heading-color: #0f172a;
    --bs-secondary-color: #64748b;
    --bs-secondary-color-rgb: 100, 116, 139;
    --bs-tertiary-color: #94a3b8;
    --bs-tertiary-color-rgb: 148, 163, 184;
    --bs-border-color: #e5e7ee;
    --bs-border-color-translucent: rgba(15, 23, 42, .09);
    --bs-secondary-bg: #f1f5f9;
    --bs-tertiary-bg: #f8fafc;
    --bs-border-radius: .65rem;
    --bs-border-radius-sm: .45rem;
    --bs-border-radius-lg: .9rem;
    --bs-focus-ring-color: rgba(79, 70, 229, .25);
    --bs-code-color: #7c3aed;
    --bs-primary-text-emphasis: #3730a3;
    --bs-primary-bg-subtle: #eef2ff;
    --bs-primary-border-subtle: #c7d2fe;
}

/* ---------- Tokens: tema oscuro (pasos propios, no una inversión automática) ---------- */
[data-bs-theme="dark"] {
    --sc-primario: #4f46e5;
    --sc-primario-hover: #5b55f1;
    --sc-primario-oscuro: #c7d2fe;
    --sc-primario-texto: #a5b4fc;
    --sc-primario-suave: rgba(99, 102, 241, .15);
    --sc-primario-borde: rgba(129, 140, 248, .38);
    --sc-fondo: #0b1120;
    --sc-superficie: #121a2b;
    --sc-superficie-2: #151e31;
    --sc-superficie-3: #1b2539;
    --sc-borde: #243049;
    --sc-borde-fuerte: #2f3c58;
    --sc-texto: #e6eaf2;
    --sc-texto-2: #b6c0d1;
    --sc-texto-3: #8b97ab;
    --sc-texto-4: #64708a;
    --sc-fila-hover: rgba(129, 140, 248, .06);
    --sc-foco: rgba(129, 140, 248, .3);
    --sc-sombra-1: 0 1px 2px rgba(0, 0, 0, .3);
    --sc-sombra-2: 0 1px 3px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .2);
    --sc-sombra-3: 0 18px 40px -14px rgba(0, 0, 0, .65), 0 4px 12px -4px rgba(0, 0, 0, .4);
    --sc-lateral: #080d19;

    --tono-secondary-bg: rgba(148, 163, 184, .14); --tono-secondary-fg: #cbd5e1;
    --tono-info-bg: rgba(56, 189, 248, .14); --tono-info-fg: #7dd3fc;
    --tono-danger-bg: rgba(248, 113, 113, .15); --tono-danger-fg: #fca5a5;
    --tono-warning-bg: rgba(251, 191, 36, .14); --tono-warning-fg: #fcd34d;
    --tono-orange-bg: rgba(251, 146, 60, .15); --tono-orange-fg: #fdba74;
    --tono-success-bg: rgba(52, 211, 153, .14); --tono-success-fg: #6ee7b7;
    --tono-dark-bg: rgba(226, 232, 240, .1); --tono-dark-fg: #e2e8f0;
    --tono-primary-bg: rgba(129, 140, 248, .16); --tono-primary-fg: #c7d2fe;

    --grafico-serie-1: #6366f1;
    --grafico-serie-2: #0d9488;
    --grafico-grilla: #1d2740;
    --grafico-eje: #2f3c58;

    --bs-primary: #818cf8;
    --bs-primary-rgb: 129, 140, 248;
    --bs-link-color: #a5b4fc;
    --bs-link-color-rgb: 165, 180, 252;
    --bs-link-hover-color: #c7d2fe;
    --bs-link-hover-color-rgb: 199, 210, 254;
    --bs-body-color: #e6eaf2;
    --bs-body-color-rgb: 230, 234, 242;
    --bs-body-bg: #0e1626;
    --bs-body-bg-rgb: 14, 22, 38;
    --bs-emphasis-color: #ffffff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-heading-color: #f1f5f9;
    --bs-secondary-color: #8b97ab;
    --bs-secondary-color-rgb: 139, 151, 171;
    --bs-tertiary-color: #64708a;
    --bs-tertiary-color-rgb: 100, 112, 138;
    --bs-border-color: #243049;
    --bs-border-color-translucent: rgba(255, 255, 255, .1);
    --bs-secondary-bg: #1b2539;
    --bs-secondary-bg-rgb: 27, 37, 57;
    --bs-tertiary-bg: #151e31;
    --bs-tertiary-bg-rgb: 21, 30, 49;
    --bs-code-color: #c4b5fd;
    --bs-primary-text-emphasis: #c7d2fe;
    --bs-primary-bg-subtle: rgba(99, 102, 241, .15);
    --bs-primary-border-subtle: rgba(129, 140, 248, .35);
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }
body { font-feature-settings: "cv11" 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { letter-spacing: -.015em; font-weight: 650; }
.h4, h4 { font-size: 1.3rem; }
.h5, h5 { font-size: 1.1rem; }
::selection { background: rgba(99, 102, 241, .22); }
a { text-underline-offset: .18em; }
hr { border-color: var(--sc-borde); opacity: 1; }
.text-body-secondary { color: var(--sc-texto-3) !important; }
.small, small { font-size: .84em; }
code { font-size: .86em; }
.lh-tight { line-height: 1.2; }
.min-w-0 { min-width: 0; }

/* ---------- Botones ---------- */
.btn {
    --bs-btn-font-weight: 500;
    --bs-btn-padding-x: .95rem;
    --bs-btn-padding-y: .45rem;
    --bs-btn-font-size: .9rem;
    --bs-btn-border-radius: .6rem;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.btn-sm { --bs-btn-padding-y: .28rem; --bs-btn-padding-x: .65rem; --bs-btn-font-size: .8125rem; --bs-btn-border-radius: .5rem; }
.btn-lg { --bs-btn-padding-y: .65rem; --bs-btn-padding-x: 1.25rem; --bs-btn-font-size: 1rem; --bs-btn-border-radius: .7rem; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn-primary {
    --bs-btn-bg: var(--sc-primario); --bs-btn-border-color: var(--sc-primario);
    --bs-btn-hover-bg: var(--sc-primario-hover); --bs-btn-hover-border-color: var(--sc-primario-hover);
    --bs-btn-active-bg: var(--sc-primario-hover); --bs-btn-active-border-color: var(--sc-primario-hover);
    --bs-btn-disabled-bg: var(--sc-primario); --bs-btn-disabled-border-color: var(--sc-primario);
    --bs-btn-focus-shadow-rgb: 99, 102, 241;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .12), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.btn-primary:hover { box-shadow: 0 6px 16px -6px rgba(79, 70, 229, .55), inset 0 1px 0 rgba(255, 255, 255, .14); }
.btn-outline-primary {
    --bs-btn-color: var(--sc-primario-texto); --bs-btn-border-color: var(--sc-primario-borde); --bs-btn-bg: var(--sc-superficie);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--sc-primario); --bs-btn-hover-border-color: var(--sc-primario);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--sc-primario-hover); --bs-btn-active-border-color: var(--sc-primario-hover);
    --bs-btn-disabled-color: var(--sc-primario-texto); --bs-btn-disabled-border-color: var(--sc-primario-borde);
    --bs-btn-focus-shadow-rgb: 99, 102, 241;
}
.btn-outline-secondary {
    --bs-btn-color: var(--sc-texto-2); --bs-btn-bg: var(--sc-superficie); --bs-btn-border-color: var(--sc-borde-fuerte);
    --bs-btn-hover-color: var(--sc-texto); --bs-btn-hover-bg: var(--sc-superficie-3); --bs-btn-hover-border-color: var(--sc-borde-fuerte);
    --bs-btn-active-color: var(--sc-texto); --bs-btn-active-bg: var(--sc-superficie-3); --bs-btn-active-border-color: var(--sc-borde-fuerte);
    --bs-btn-disabled-color: var(--sc-texto-4); --bs-btn-disabled-bg: var(--sc-superficie); --bs-btn-disabled-border-color: var(--sc-borde);
    --bs-btn-focus-shadow-rgb: 99, 102, 241;
    box-shadow: var(--sc-sombra-1);
}
.btn-check:checked + .btn-outline-secondary, .btn-outline-secondary.active {
    color: var(--sc-primario-texto); background-color: var(--sc-primario-suave); border-color: var(--sc-primario-borde);
}
.btn-outline-danger, .btn-outline-success, .btn-outline-warning, .btn-outline-dark, .btn-outline-info { --bs-btn-bg: var(--sc-superficie); }
.btn-success { --bs-btn-bg: #059669; --bs-btn-border-color: #059669; --bs-btn-hover-bg: #047857; --bs-btn-hover-border-color: #047857; --bs-btn-active-bg: #047857; --bs-btn-active-border-color: #047857; --bs-btn-disabled-bg: #059669; --bs-btn-disabled-border-color: #059669; }
.btn-danger { --bs-btn-bg: #dc2626; --bs-btn-border-color: #dc2626; --bs-btn-hover-bg: #b91c1c; --bs-btn-hover-border-color: #b91c1c; --bs-btn-active-bg: #b91c1c; --bs-btn-active-border-color: #b91c1c; --bs-btn-disabled-bg: #dc2626; --bs-btn-disabled-border-color: #dc2626; }
.btn-warning { --bs-btn-color: #1f1300; --bs-btn-bg: #f59e0b; --bs-btn-border-color: #f59e0b; --bs-btn-hover-color: #1f1300; --bs-btn-hover-bg: #d97706; --bs-btn-hover-border-color: #d97706; --bs-btn-active-bg: #d97706; --bs-btn-active-border-color: #d97706; }
.btn-light { --bs-btn-color: var(--sc-texto-2); --bs-btn-bg: var(--sc-superficie-3); --bs-btn-border-color: var(--sc-borde); --bs-btn-hover-color: var(--sc-texto); --bs-btn-hover-bg: var(--sc-borde); --bs-btn-hover-border-color: var(--sc-borde-fuerte); --bs-btn-active-bg: var(--sc-borde); --bs-btn-active-border-color: var(--sc-borde-fuerte); --bs-btn-active-color: var(--sc-texto); }
.btn-link { --bs-btn-color: var(--sc-primario-texto); --bs-btn-hover-color: var(--sc-primario-hover); text-decoration: none; }
.btn-link:hover { text-decoration: underline; }
[data-bs-theme="dark"] .btn-link { --bs-btn-hover-color: #c7d2fe; }
/* Botón solo con ícono (barra superior) */
.btn-icono {
    position: relative; width: 2.4rem; height: 2.4rem; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: .65rem; background: transparent; color: var(--sc-texto-2);
    font-size: 1.15rem; text-decoration: none; transition: background-color .15s ease, color .15s ease;
}
.btn-icono:hover, .btn-icono[aria-expanded="true"] { background: var(--sc-superficie-3); color: var(--sc-texto); }
.btn-icono:focus-visible { outline: 2px solid var(--sc-primario); outline-offset: 1px; }

/* ---------- Formularios ---------- */
.form-control, .form-select { border-color: var(--sc-borde-fuerte); border-radius: .6rem; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.form-control::placeholder { color: var(--sc-texto-4); opacity: 1; }
.form-control:hover:not(:focus):not(:disabled):not([readonly]), .form-select:hover:not(:focus):not(:disabled) { border-color: color-mix(in srgb, var(--sc-borde-fuerte) 55%, var(--sc-texto-4)); }
.form-control:focus, .form-select:focus { border-color: #818cf8; box-shadow: 0 0 0 3px var(--sc-foco); }
.form-control-sm, .form-select-sm { border-radius: .5rem; }
.form-control-lg, .form-select-lg { border-radius: .7rem; }
.form-control:disabled, .form-select:disabled { background-color: var(--sc-superficie-3); }
.form-label { font-weight: 500; color: var(--sc-texto-2); font-size: .875rem; margin-bottom: .35rem; }
.form-text { color: var(--sc-texto-3); font-size: .8rem; }
.input-group-text { background-color: var(--sc-superficie-2); border-color: var(--sc-borde-fuerte); color: var(--sc-texto-3); }
.input-group > .btn { box-shadow: none; }
.form-check-input { border-color: var(--sc-borde-fuerte); }
.form-check-input:checked, .form-check-input[type="checkbox"]:indeterminate { background-color: var(--sc-primario); border-color: var(--sc-primario); }
.form-check-input:focus { border-color: #818cf8; box-shadow: 0 0 0 3px var(--sc-foco); }
.form-switch .form-check-input:focus:not(:checked) { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23a5b4fc'/%3e%3c/svg%3e"); }
.form-range::-webkit-slider-thumb { background-color: var(--sc-primario); }
.form-range::-moz-range-thumb { background-color: var(--sc-primario); }
fieldset legend { font-size: .95rem; font-weight: 600; }

/* ---------- Tarjetas ---------- */
.card {
    --bs-card-bg: var(--sc-superficie);
    --bs-card-border-color: var(--sc-borde);
    --bs-card-border-radius: var(--sc-radio-grande);
    --bs-card-inner-border-radius: calc(var(--sc-radio-grande) - 1px);
    --bs-card-cap-bg: transparent;
    --bs-card-cap-padding-x: 1.25rem;
    --bs-card-cap-padding-y: .85rem;
    --bs-card-spacer-x: 1.25rem;
    --bs-card-spacer-y: 1.15rem;
    --bs-card-title-color: var(--sc-texto);
}
.tarjeta { box-shadow: var(--sc-sombra-2); }
.tarjeta > .card-header { font-weight: 600; font-size: .95rem; color: var(--sc-texto); border-bottom: 1px solid var(--sc-borde); }
.tarjeta > .card-header > .bi:first-child, .tarjeta > .card-header > div > .bi:first-child { color: var(--sc-primario-texto); margin-right: .15rem; }
.card-footer { background-color: var(--sc-superficie-2); border-top-color: var(--sc-borde); }
.ancho-formulario { max-width: 580px; }
.ancho-formulario-amplio { max-width: 860px; }
.icono-circulo { width: 42px; height: 42px; border-radius: .8rem; background: var(--sc-primario-suave); color: var(--sc-primario-texto); display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }

/* ---------- Tablas ---------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--sc-texto);
    --bs-table-border-color: var(--sc-borde);
    --bs-table-hover-bg: var(--sc-fila-hover);
    --bs-table-hover-color: var(--sc-texto);
    --bs-table-striped-bg: var(--sc-superficie-2);
    --bs-table-striped-color: var(--sc-texto);
    --bs-table-active-bg: var(--sc-superficie-3);
    --bs-table-active-color: var(--sc-texto);
}
.table > :not(caption) > * > * { padding: .72rem .85rem; }
.table-sm > :not(caption) > * > * { padding: .42rem .6rem; }
.table > thead th { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sc-texto-3); font-weight: 600; background: var(--sc-superficie-2); border-bottom-color: var(--sc-borde); white-space: nowrap; }
.table > tbody > tr:last-child > * { border-bottom-width: 0; }
.table > tfoot > tr > * { border-top: 1px solid var(--sc-borde-fuerte); font-weight: 600; }
.table td.text-end, .table th.text-end { font-variant-numeric: tabular-nums; }
.card > .table-responsive > .table > :not(caption) > * > :first-child, .card > .table > :not(caption) > * > :first-child { padding-left: 1.25rem; }
.card > .table-responsive > .table > :not(caption) > * > :last-child, .card > .table > :not(caption) > * > :last-child { padding-right: 1.25rem; }
.card > .table-responsive:first-child > .table > thead > tr:first-child > :first-child, .card > .table:first-child > thead > tr:first-child > :first-child { border-top-left-radius: var(--bs-card-inner-border-radius); }
.card > .table-responsive:first-child > .table > thead > tr:first-child > :last-child, .card > .table:first-child > thead > tr:first-child > :last-child { border-top-right-radius: var(--bs-card-inner-border-radius); }
.fila-enlace { cursor: pointer; }
tr.fila-enlace > * { transition: background-color .12s ease; }
tr.fila-enlace:hover .celda-principal a { color: var(--sc-primario-texto) !important; }

/* ---------- Insignias de estado (componentes/estado.php) ---------- */
.insignia {
    display: inline-flex; align-items: center; gap: .32em; vertical-align: middle;
    font-weight: 550; font-size: .74rem; line-height: 1.2; letter-spacing: 0; padding: .3em .62em; border-radius: 999px; white-space: nowrap;
    background: var(--tono-bg, var(--tono-secondary-bg)); color: var(--tono-fg, var(--tono-secondary-fg));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent);
}
.insignia > .bi { font-size: .95em; }
.insignia-secondary { --tono-bg: var(--tono-secondary-bg); --tono-fg: var(--tono-secondary-fg); }
.insignia-info { --tono-bg: var(--tono-info-bg); --tono-fg: var(--tono-info-fg); }
.insignia-danger { --tono-bg: var(--tono-danger-bg); --tono-fg: var(--tono-danger-fg); }
.insignia-warning { --tono-bg: var(--tono-warning-bg); --tono-fg: var(--tono-warning-fg); }
.insignia-orange { --tono-bg: var(--tono-orange-bg); --tono-fg: var(--tono-orange-fg); }
.insignia-success { --tono-bg: var(--tono-success-bg); --tono-fg: var(--tono-success-fg); }
.insignia-dark { --tono-bg: var(--tono-dark-bg); --tono-fg: var(--tono-dark-fg); }
.insignia-primary { --tono-bg: var(--tono-primary-bg); --tono-fg: var(--tono-primary-fg); }
/* Las insignias sólidas de Bootstrap (text-bg-*) se ven igual que las de estado, salvo los contadores */
.badge { --bs-badge-font-weight: 600; --bs-badge-border-radius: 999px; }
.badge:not(.rounded-pill):is(.text-bg-secondary, .text-bg-success, .text-bg-warning, .text-bg-danger, .text-bg-info, .text-bg-light, .text-bg-primary, .text-bg-dark) {
    font-weight: 550; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent);
}
.badge:not(.rounded-pill).text-bg-secondary { background-color: var(--tono-secondary-bg) !important; color: var(--tono-secondary-fg) !important; }
.badge:not(.rounded-pill).text-bg-success { background-color: var(--tono-success-bg) !important; color: var(--tono-success-fg) !important; }
.badge:not(.rounded-pill).text-bg-warning { background-color: var(--tono-warning-bg) !important; color: var(--tono-warning-fg) !important; }
.badge:not(.rounded-pill).text-bg-danger { background-color: var(--tono-danger-bg) !important; color: var(--tono-danger-fg) !important; }
.badge:not(.rounded-pill).text-bg-info { background-color: var(--tono-info-bg) !important; color: var(--tono-info-fg) !important; }
.badge:not(.rounded-pill).text-bg-light { background-color: var(--tono-secondary-bg) !important; color: var(--tono-secondary-fg) !important; }
.badge:not(.rounded-pill).text-bg-primary { background-color: var(--tono-primary-bg) !important; color: var(--tono-primary-fg) !important; }
.badge:not(.rounded-pill).text-bg-dark { background-color: var(--tono-dark-bg) !important; color: var(--tono-dark-fg) !important; }
.text-bg-primary { background-color: var(--sc-primario) !important; }
[data-bs-theme="dark"] .text-bg-light { background-color: var(--sc-superficie-3) !important; color: var(--sc-texto) !important; }

/* ---------- Avisos ---------- */
.alert { --bs-alert-border-radius: .75rem; --bs-alert-padding-x: 1rem; --bs-alert-padding-y: .8rem; font-size: .9rem; }
.alert > .bi:first-child, .alert > div > .bi:first-child { font-size: 1.05rem; flex-shrink: 0; line-height: 1.35; }
.alert .alert-link { font-weight: 600; }
.alert-light, .alert-secondary { --bs-alert-bg: var(--sc-superficie-2); --bs-alert-color: var(--sc-texto-2); --bs-alert-border-color: var(--sc-borde); --bs-alert-link-color: var(--sc-texto); }
.alert-dismissible { padding-right: 3rem; }
.alert-dismissible .btn-close { padding: 1rem; }
.aviso-icono { font-size: 1.1rem; line-height: 1.3; flex-shrink: 0; }
.alert-success .aviso-icono { color: var(--tono-success-fg); }
.alert-danger .aviso-icono { color: var(--tono-danger-fg); }
.alert-warning .aviso-icono { color: var(--tono-warning-fg); }
.alert-info .aviso-icono { color: var(--tono-info-fg); }
/* Alertas del tablero que llevan al listado correspondiente */
.alerta-enlace { display: flex; align-items: center; gap: .5rem; text-decoration: none; height: 100%; transition: filter .15s ease, transform .15s ease; }
.alerta-enlace:hover { filter: brightness(.97); }
[data-bs-theme="dark"] .alerta-enlace:hover { filter: brightness(1.15); }

/* ---------- Menús desplegables, ventanas, pestañas, paginación, listas, progreso ---------- */
.dropdown-menu {
    --bs-dropdown-bg: var(--sc-superficie);
    --bs-dropdown-color: var(--sc-texto);
    --bs-dropdown-border-color: var(--sc-borde);
    --bs-dropdown-border-radius: .8rem;
    --bs-dropdown-inner-border-radius: calc(.8rem - 1px);
    --bs-dropdown-box-shadow: var(--sc-sombra-3);
    --bs-dropdown-padding-x: .375rem;
    --bs-dropdown-padding-y: .375rem;
    --bs-dropdown-font-size: .9rem;
    --bs-dropdown-link-color: var(--sc-texto);
    --bs-dropdown-link-hover-color: var(--sc-texto);
    --bs-dropdown-link-hover-bg: var(--sc-superficie-3);
    --bs-dropdown-link-active-color: var(--sc-primario-texto);
    --bs-dropdown-link-active-bg: var(--sc-primario-suave);
    --bs-dropdown-item-border-radius: .5rem;
    --bs-dropdown-item-padding-y: .45rem;
    --bs-dropdown-divider-bg: var(--sc-borde);
    --bs-dropdown-header-color: var(--sc-texto-3);
    box-shadow: var(--bs-dropdown-box-shadow);
}
.dropdown-menu.show { animation: sc-aparecer .14s ease-out; }
.dropdown-item > .bi:first-child { color: var(--sc-texto-3); }
.dropdown-item.text-danger > .bi:first-child { color: inherit; }
.modal {
    --bs-modal-bg: var(--sc-superficie);
    --bs-modal-color: var(--sc-texto);
    --bs-modal-border-color: var(--sc-borde);
    --bs-modal-border-radius: 1rem;
    --bs-modal-inner-border-radius: calc(1rem - 1px);
    --bs-modal-box-shadow: var(--sc-sombra-3);
    --bs-modal-header-border-color: var(--sc-borde);
    --bs-modal-footer-border-color: var(--sc-borde);
}
.modal-backdrop { --bs-backdrop-bg: #0f172a; --bs-backdrop-opacity: .45; backdrop-filter: blur(3px); }
.nav-tabs {
    --bs-nav-tabs-border-color: var(--sc-borde);
    --bs-nav-tabs-link-hover-border-color: transparent;
    --bs-nav-tabs-link-active-color: var(--sc-primario-texto);
    --bs-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-link-active-border-color: transparent;
    gap: .25rem;
}
.nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; border-radius: 0; margin-bottom: -1px; color: var(--sc-texto-3); font-weight: 500; padding: .6rem .9rem; }
.nav-tabs .nav-link:hover { color: var(--sc-texto); border-bottom-color: var(--sc-borde-fuerte); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--sc-primario-texto); border-bottom-color: var(--sc-primario); background: transparent; }
.nav-pills { --bs-nav-pills-link-active-bg: var(--sc-primario); --bs-nav-pills-border-radius: .55rem; gap: .2rem; }
.nav-pills .nav-link { color: var(--sc-texto-2); font-weight: 500; }
.nav-pills .nav-link:hover:not(.active) { background: var(--sc-superficie-3); color: var(--sc-texto); }
.nav-chica .nav-link { padding: .25rem .7rem; font-size: .85rem; }
.pagination {
    --bs-pagination-color: var(--sc-texto-2);
    --bs-pagination-bg: var(--sc-superficie);
    --bs-pagination-border-color: var(--sc-borde);
    --bs-pagination-hover-color: var(--sc-texto);
    --bs-pagination-hover-bg: var(--sc-superficie-3);
    --bs-pagination-hover-border-color: var(--sc-borde-fuerte);
    --bs-pagination-focus-color: var(--sc-texto);
    --bs-pagination-focus-bg: var(--sc-superficie-3);
    --bs-pagination-focus-box-shadow: 0 0 0 3px var(--sc-foco);
    --bs-pagination-active-bg: var(--sc-primario);
    --bs-pagination-active-border-color: var(--sc-primario);
    --bs-pagination-disabled-color: var(--sc-texto-3);
    --bs-pagination-disabled-bg: var(--sc-superficie);
    --bs-pagination-disabled-border-color: var(--sc-borde);
    gap: .3rem;
}
.pagination .page-link { border-radius: .5rem !important; margin-left: 0 !important; font-weight: 500; }
.list-group {
    --bs-list-group-bg: var(--sc-superficie);
    --bs-list-group-color: var(--sc-texto);
    --bs-list-group-border-color: var(--sc-borde);
    --bs-list-group-action-color: var(--sc-texto);
    --bs-list-group-action-hover-color: var(--sc-texto);
    --bs-list-group-action-hover-bg: var(--sc-fila-hover);
    --bs-list-group-action-active-color: var(--sc-texto);
    --bs-list-group-action-active-bg: var(--sc-superficie-3);
    --bs-list-group-active-bg: var(--sc-primario);
    --bs-list-group-active-border-color: var(--sc-primario);
}
.list-group-item-action { transition: background-color .12s ease; }
.progress, .progress-stacked { --bs-progress-bg: var(--sc-superficie-3); --bs-progress-border-radius: 999px; --bs-progress-bar-bg: var(--sc-primario); }
.progress-bar { transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.progress-bar.bg-success, .punto.bg-success { background-color: #10b981 !important; }
.progress-bar.bg-info, .punto.bg-info { background-color: #38bdf8 !important; }
.progress-bar.bg-warning, .punto.bg-warning { background-color: #f59e0b !important; }
.progress-bar.bg-danger, .punto.bg-danger { background-color: #ef4444 !important; }
.progress-stacked { height: .55rem; gap: 2px; }
.progress-fina { height: .3rem; }
.punto { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; vertical-align: 0; }
kbd { background-color: var(--sc-texto-2); }
.kbd-suave { font-family: inherit; font-size: .7rem; font-weight: 600; line-height: 1; padding: .22rem .42rem; border-radius: .35rem; color: var(--sc-texto-3); background: var(--sc-superficie); border: 1px solid var(--sc-borde); box-shadow: 0 1px 0 var(--sc-borde); }
details > summary { cursor: pointer; }

/* ---------- Estados vacíos ---------- */
.estado-vacio { text-align: center; color: var(--sc-texto-3); padding: 2.25rem 1rem; }
.estado-vacio > i { display: inline-flex; align-items: center; justify-content: center; width: 3.4rem; height: 3.4rem; border-radius: 1rem; background: var(--sc-primario-suave); color: var(--sc-primario-texto); font-size: 1.55rem; margin-bottom: .85rem; }
.estado-vacio p { margin-bottom: 0; max-width: 34rem; margin-inline: auto; }
.estado-vacio .btn { margin-top: 1rem; }

.pagina-error > i { width: 4rem; height: 4rem; font-size: 1.9rem; }
.codigo-error { font-size: clamp(3.5rem, 8vw, 5rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; background: linear-gradient(135deg, var(--sc-primario), var(--sc-acento)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Ingreso (layout acceso) ---------- */
body.acceso { background: radial-gradient(90% 40% at 50% 0%, var(--sc-primario-suave), transparent 70%), var(--sc-fondo); }
.acceso-grid { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) {
    body.acceso { background: var(--sc-fondo); }
    .acceso-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}
.acceso-marca { position: relative; isolation: isolate; overflow: hidden; flex-direction: column; justify-content: space-between; gap: 2rem; padding: 3rem 3.5rem; color: #fff; background: #1e1b4b; }
.acceso-marca::before { content: ""; position: absolute; inset: 0; z-index: -2;
    background: radial-gradient(55% 45% at 12% 8%, rgba(45, 212, 191, .3), transparent 62%), radial-gradient(55% 60% at 95% 100%, rgba(129, 140, 248, .5), transparent 62%), linear-gradient(145deg, #1e1b4b 0%, #312e81 48%, #4338ca 100%); }
.acceso-marca::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
    background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
    background-size: 40px 40px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 30% 35%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 80% 70% at 30% 35%, #000 30%, transparent 75%); }
.acceso-titulo { color: #fff; font-size: clamp(2rem, 2.6vw, 2.75rem); line-height: 1.12; font-weight: 700; letter-spacing: -.03em; max-width: 34rem; }
.acceso-titulo span { background: linear-gradient(90deg, #5eead4, #a5b4fc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.acceso-bajada { font-size: 1.08rem; color: rgba(255, 255, 255, .78); max-width: 32rem; }
.acceso-puntos { display: grid; gap: 1rem; max-width: 32rem; }
.acceso-puntos li { display: flex; gap: .85rem; align-items: flex-start; }
.acceso-puntos li > i { width: 2.4rem; height: 2.4rem; border-radius: .75rem; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; color: #5eead4; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.acceso-puntos strong { display: block; font-weight: 600; }
.acceso-puntos span { display: block; font-size: .9rem; color: rgba(255, 255, 255, .7); }
.acceso-pie { font-size: .8rem; color: rgba(255, 255, 255, .55); display: flex; gap: .5rem; align-items: center; }
.acceso-formulario { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.25rem; }
.acceso-tarjeta { width: 100%; max-width: 430px; background: var(--sc-superficie); border: 1px solid var(--sc-borde); border-radius: 1.15rem; padding: 2.25rem; box-shadow: var(--sc-sombra-3); animation: sc-entrar .4s ease-out backwards; }
@media (max-width: 575.98px) { .acceso-tarjeta { padding: 1.6rem 1.25rem; } }
.acceso-tarjeta h2 { letter-spacing: -.02em; }
.marca-logo { display: inline-flex; align-items: center; gap: .6rem; font-size: 1.12rem; font-weight: 400; color: #fff; text-decoration: none; letter-spacing: -.01em; }
.marca-logo strong { font-weight: 700; }
.marca-logo:hover { color: #fff; }
.marca-logo > i { color: #5eead4; }
.marca-icono { width: 2.15rem; height: 2.15rem; border-radius: .7rem; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; color: #fff; background: linear-gradient(135deg, #6366f1, #14b8a6); box-shadow: 0 6px 16px -6px rgba(99, 102, 241, .7), inset 0 1px 0 rgba(255, 255, 255, .25); }
.marca-logo-oscuro, .marca-logo-oscuro:hover { color: var(--sc-texto); }
.marca-logo-oscuro > i { color: var(--sc-acento); }
.codigo-otp { letter-spacing: .5em; font-variant-numeric: tabular-nums; font-size: 1.6rem; text-align: center; }
.qr-2fa { width: 196px; height: 196px; padding: 10px; background: #fff; border: 1px solid var(--sc-borde); border-radius: .75rem; }
.qr-2fa img, .qr-2fa svg { width: 100%; height: 100%; }
.clave-manual { font-size: .95rem; word-break: break-all; }
.pasos-2fa li { margin-bottom: .75rem; }
.codigos-recuperacion { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.codigos-recuperacion code { display: block; text-align: center; padding: .55rem; background: var(--sc-superficie-3); border: 1px solid var(--sc-borde); border-radius: .5rem; font-size: 1rem; color: var(--sc-primario-texto); }

/* ---------- Aplicación: estructura ---------- */
body.app { background: var(--sc-fondo); }
.app-contenedor { display: flex; min-height: 100vh; min-height: 100dvh; }
.app-principal { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }

/* Menú lateral (oscuro en los dos temas) */
.app-lateral {
    width: var(--sc-ancho-lateral); flex-shrink: 0; position: sticky; top: 0; height: 100vh; height: 100dvh; z-index: 1040;
    display: flex; flex-direction: column; overflow: hidden; color: var(--sc-lateral-texto);
    background: radial-gradient(130% 45% at 0% 0%, rgba(99, 102, 241, .2), transparent 62%), var(--sc-lateral);
    border-right: 1px solid var(--sc-lateral-borde); transition: width .2s ease, transform .25s ease, box-shadow .25s ease;
}
.lateral-cabecera { display: flex; align-items: center; gap: .5rem; padding: 1rem 1.1rem .85rem; min-height: var(--sc-alto-barra); }
.estudio-activo { display: flex; align-items: center; gap: .7rem; margin: 0 .75rem .6rem; padding: .6rem .65rem; border-radius: .75rem; background: rgba(148, 163, 184, .08); border: 1px solid var(--sc-lateral-borde); color: #fff; }
.estudio-avatar { width: 2.2rem; height: 2.2rem; border-radius: .6rem; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .78rem; letter-spacing: .02em; color: #c7d2fe; background: rgba(99, 102, 241, .25); }
.estudio-datos { min-width: 0; flex: 1; line-height: 1.25; }
.estudio-datos small { display: block; font-size: .64rem; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: #64748b; }
.estudio-nombre { font-weight: 600; font-size: .86rem; }
.enlace-claro { color: #99f6e4; text-decoration: none; font-size: .76rem; }
.enlace-claro:hover { color: #ccfbf1; }
.app-menu { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: .1rem .75rem 1rem; scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, .25) transparent; }
.menu-seccion { font-size: .64rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: #64748b; padding: 1rem .75rem .4rem; white-space: nowrap; }
.menu-item {
    position: relative; display: flex; align-items: center; gap: .75rem; padding: .5rem .75rem; margin-bottom: 2px; border-radius: .55rem;
    color: var(--sc-lateral-texto); text-decoration: none; font-size: .885rem; font-weight: 500; white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}
.menu-item i { font-size: 1.08rem; width: 1.25rem; text-align: center; flex-shrink: 0; opacity: .9; transition: color .15s ease; }
.menu-item span { overflow: hidden; text-overflow: ellipsis; }
.menu-item:hover { background: var(--sc-lateral-hover); color: var(--sc-lateral-texto-fuerte); }
.menu-item.activo { background: var(--sc-lateral-activo); color: #fff; }
.menu-item.activo::before { content: ""; position: absolute; left: -.75rem; top: .45rem; bottom: .45rem; width: 3px; border-radius: 0 3px 3px 0; background: #818cf8; }
.menu-item.activo i { color: #a5b4fc; opacity: 1; }
.menu-item:focus-visible, .lateral-boton:focus-visible { outline: 2px solid #818cf8; outline-offset: -2px; }
.lateral-pie { padding: .55rem .75rem .8rem; border-top: 1px solid var(--sc-lateral-borde); }
.lateral-boton { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .5rem .75rem; border: 0; border-radius: .55rem; background: transparent; color: var(--sc-lateral-texto); font-size: .84rem; font-weight: 500; text-align: left; white-space: nowrap; }
.lateral-boton:hover { background: var(--sc-lateral-hover); color: var(--sc-lateral-texto-fuerte); }
.lateral-boton i { font-size: 1.05rem; width: 1.25rem; text-align: center; flex-shrink: 0; transition: transform .2s ease; }
/* Menú achicado (solo computadora): quedan los íconos; el nombre sigue para los lectores de pantalla */
@media (min-width: 992px) {
    html.menu-plegado .app-lateral { width: var(--sc-ancho-lateral-plegado); }
    html.menu-plegado .marca-texto, html.menu-plegado .estudio-datos { display: none; }
    html.menu-plegado .menu-item span, html.menu-plegado .lateral-boton span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
    html.menu-plegado .lateral-cabecera { justify-content: center; padding-inline: 0; }
    html.menu-plegado .estudio-activo { justify-content: center; margin-inline: .75rem; padding: .45rem 0; background: transparent; border-color: transparent; }
    html.menu-plegado .menu-seccion { font-size: 0; padding: .55rem .5rem .35rem; }
    html.menu-plegado .menu-seccion::after { content: ""; display: block; height: 1px; background: var(--sc-lateral-borde); }
    html.menu-plegado .menu-item, html.menu-plegado .lateral-boton { justify-content: center; padding-inline: 0; }
    html.menu-plegado .lateral-boton i { transform: rotate(180deg); }
}

/* Barra superior */
.app-barra {
    position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; gap: .75rem; min-width: 0;
    min-height: var(--sc-alto-barra); padding: .55rem 2rem;
    background: color-mix(in srgb, var(--sc-superficie) 84%, transparent); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--sc-borde);
}
.app-titulo { font-size: 1.1rem; font-weight: 650; letter-spacing: -.015em; margin: 0; min-width: 0; color: var(--sc-texto); }
.barra-acciones { margin-left: auto; display: flex; align-items: center; gap: .3rem; flex-shrink: 0; }
.buscador-barra {
    display: inline-flex; align-items: center; gap: .55rem; width: 17rem; height: 2.4rem; padding: 0 .5rem 0 .8rem; margin-right: .35rem;
    border: 1px solid var(--sc-borde); border-radius: .65rem; background: var(--sc-superficie-2); color: var(--sc-texto-3); font-size: .875rem;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.buscador-barra:hover { border-color: var(--sc-borde-fuerte); background: var(--sc-superficie); color: var(--sc-texto-2); box-shadow: var(--sc-sombra-1); }
.buscador-barra:focus-visible { outline: 2px solid var(--sc-primario); outline-offset: 1px; }
.buscador-barra .kbd-suave { margin-left: auto; }
.contador-campana { position: absolute; top: .3rem; right: .2rem; min-width: 1.05rem; height: 1.05rem; padding: 0 .3rem; border-radius: 999px; font-size: .62rem; font-weight: 700; line-height: 1.05rem; text-align: center; color: #fff; background: #ef4444; box-shadow: 0 0 0 2px var(--sc-superficie); }
.btn-usuario { display: flex; align-items: center; gap: .6rem; border: 0; background: transparent; color: var(--sc-texto); padding: .25rem .45rem .25rem .25rem; border-radius: .75rem; max-width: 22rem; min-width: 0; transition: background-color .15s ease; }
.btn-usuario:hover, .btn-usuario[aria-expanded="true"] { background: var(--sc-superficie-3); }
.btn-usuario.dropdown-toggle::after { color: var(--sc-texto-3); margin-left: .1rem; }
.btn-usuario > span:last-child { min-width: 0; overflow: hidden; }
.btn-usuario > span:last-child > span, .btn-usuario > span:last-child > small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { width: 2.1rem; height: 2.1rem; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: .78rem; color: #fff; background: linear-gradient(135deg, #6366f1, #14b8a6); box-shadow: 0 0 0 2px var(--sc-superficie), 0 0 0 3px var(--sc-borde); }
.menu-usuario { min-width: 15.5rem; }
.menu-usuario-cabecera { display: flex; gap: .65rem; align-items: center; padding: .55rem .6rem .7rem; }
.menu-usuario-cabecera .avatar { box-shadow: none; }
.selector-tema { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem; padding: .25rem; margin: .15rem .3rem .35rem; border-radius: .6rem; background: var(--sc-superficie-3); }
.selector-tema button { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .35rem .25rem; border: 0; border-radius: .45rem; background: transparent; color: var(--sc-texto-3); font-size: .72rem; font-weight: 500; }
.selector-tema button i { font-size: .95rem; }
.selector-tema button:hover { color: var(--sc-texto); }
.selector-tema button[aria-pressed="true"] { background: var(--sc-superficie); color: var(--sc-primario-texto); box-shadow: var(--sc-sombra-2); }

/* Contenido */
.app-contenido { padding: 1.75rem 2rem 2.5rem; max-width: 1480px; width: 100%; }
.app-fondo-menu { display: none; }

/* Entrada suave del contenido (solo opacidad y un desplazamiento corto; nada queda aplicado al terminar) */
@keyframes sc-entrar { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes sc-aparecer { from { opacity: 0; } to { opacity: 1; } }
.app-contenido > * { animation: sc-entrar .35s ease-out backwards; }
.app-contenido > :nth-child(2) { animation-delay: .03s; }
.app-contenido > :nth-child(3) { animation-delay: .06s; }
.app-contenido > :nth-child(4) { animation-delay: .09s; }
.app-contenido > :nth-child(5) { animation-delay: .12s; }
.app-contenido > :nth-child(n+6) { animation-delay: .15s; }

/* Barra de progreso al cambiar de pantalla */
.progreso-navegacion { position: fixed; top: 0; left: 0; z-index: 2000; height: 3px; width: 0; opacity: 0; pointer-events: none; background: linear-gradient(90deg, #6366f1, #14b8a6); box-shadow: 0 0 10px rgba(99, 102, 241, .5); transition: opacity .3s ease; }
body.navegando .progreso-navegacion { opacity: 1; animation: sc-navegando 10s cubic-bezier(.08, .7, .2, 1) forwards; }
@keyframes sc-navegando { 0% { width: 0; } 12% { width: 38%; } 100% { width: 92%; } }

/* Mensajes después de una acción: los de éxito flotan abajo a la derecha (no tapan los botones de arriba) y se van solos */
.avisos-flotantes { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 1085; display: flex; flex-direction: column; gap: .6rem; width: min(26rem, calc(100vw - 2rem)); pointer-events: none; }
.avisos-flotantes > .alert { pointer-events: auto; margin: 0; position: relative; overflow: hidden; display: flex; gap: .65rem; align-items: flex-start; background: var(--sc-superficie); color: var(--sc-texto); border: 1px solid var(--sc-borde); box-shadow: var(--sc-sombra-3); animation: sc-entrar-aviso .32s cubic-bezier(.2, .9, .3, 1.15); }
.avisos-flotantes > .alert::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: currentColor; opacity: .14; transform-origin: left; }
.avisos-flotantes > .alert-success::after { background: #10b981; opacity: .9; }
.avisos-flotantes > .alert-info::after { background: #38bdf8; opacity: .9; }
.avisos-flotantes > .alert[data-auto-cerrar]::after { animation: sc-consumir var(--duracion, 7s) linear forwards; }
.avisos-flotantes > .alert:hover::after, .avisos-flotantes > .alert:focus-within::after { animation-play-state: paused; }
@keyframes sc-consumir { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes sc-entrar-aviso { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
body:has(.tr-novedades) .avisos-flotantes { bottom: 4.75rem; }
.aviso-en-linea { display: flex; gap: .65rem; align-items: flex-start; }

/* Buscador rápido (Ctrl K): pantallas y acciones */
/* Sin «fade»: se abre al instante y lo que se escribe enseguida ya va a la búsqueda; la entrada es solo visual */
.paleta .modal-dialog { max-width: 40rem; margin-top: 10vh; }
.paleta.show .modal-dialog { animation: sc-paleta .16s ease-out; }
@keyframes sc-paleta { from { opacity: 0; transform: translateY(-8px) scale(.985); } }
.modal-backdrop.show { animation: sc-aparecer-fondo .16s ease-out; }
@keyframes sc-aparecer-fondo { from { opacity: 0; } }
.paleta .modal-content { overflow: hidden; }
.paleta-busqueda { display: flex; align-items: center; gap: .65rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--sc-borde); }
.paleta-busqueda > .bi { font-size: 1.1rem; color: var(--sc-texto-3); }
.paleta-busqueda .form-control { border: 0; box-shadow: none; padding: .25rem 0; font-size: 1.02rem; background: transparent; }
.paleta-busqueda .form-control::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.paleta-lista { list-style: none; margin: 0; padding: .4rem; max-height: min(26rem, 58vh); overflow-y: auto; }
.paleta-grupo { padding: .65rem .7rem .3rem; font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--sc-texto-3); }
.paleta-opcion { display: flex; align-items: center; gap: .75rem; padding: .5rem .65rem; border-radius: .6rem; color: var(--sc-texto); cursor: pointer; }
.paleta-opcion > .bi:first-child { width: 2rem; height: 2rem; border-radius: .55rem; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--sc-superficie-3); color: var(--sc-texto-2); transition: background-color .12s ease, color .12s ease; }
.paleta-opcion small { display: block; color: var(--sc-texto-3); font-size: .76rem; }
.paleta-opcion .paleta-ir { margin-left: auto; color: var(--sc-texto-4); opacity: 0; }
.paleta-opcion[aria-selected="true"] { background: var(--sc-primario-suave); }
.paleta-opcion[aria-selected="true"] > .bi:first-child { background: var(--sc-primario); color: #fff; }
.paleta-opcion[aria-selected="true"] .paleta-ir { opacity: 1; }
.paleta-vacia { padding: 2.25rem 1rem; text-align: center; color: var(--sc-texto-3); }
.paleta-pie { display: flex; flex-wrap: wrap; gap: .4rem 1rem; padding: .6rem 1.1rem; border-top: 1px solid var(--sc-borde); background: var(--sc-superficie-2); color: var(--sc-texto-3); font-size: .75rem; }

/* Barra inferior (celular): accesos a lo más usado */
.barra-inferior { display: none; }
@media (max-width: 991.98px) {
    .app-lateral { position: fixed; left: 0; top: 0; bottom: 0; width: min(86vw, 300px); transform: translateX(-100%); }
    body.menu-abierto { overflow: hidden; }
    body.menu-abierto .app-lateral { transform: none; box-shadow: 0 0 50px rgba(0, 0, 0, .4); }
    body.menu-abierto .app-fondo-menu { display: block; position: fixed; inset: 0; background: rgba(15, 23, 42, .5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); z-index: 1035; animation: sc-aparecer .2s ease; }
    .app-barra { padding: .45rem .75rem; gap: .4rem; min-height: 56px; }
    .app-titulo { font-size: 1.02rem; }
    .app-contenido { padding: 1rem 1rem calc(5.75rem + env(safe-area-inset-bottom)); }
    .avisos-flotantes { bottom: calc(5.6rem + env(safe-area-inset-bottom)); left: 1rem; right: 1rem; width: auto; }
    body:has(.tr-novedades) .avisos-flotantes { bottom: calc(8.6rem + env(safe-area-inset-bottom)); }
    .barra-inferior {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1032; display: flex; align-items: flex-end; justify-content: space-around;
        padding: .3rem .4rem calc(.3rem + env(safe-area-inset-bottom));
        background: color-mix(in srgb, var(--sc-superficie) 90%, transparent); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
        border-top: 1px solid var(--sc-borde); box-shadow: 0 -6px 20px -10px rgba(15, 23, 42, .18);
    }
    .tr-novedades { bottom: calc(5.25rem + env(safe-area-inset-bottom)) !important; }
}
.barra-inferior-item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .12rem; padding: .3rem .15rem .2rem; border: 0; background: none; border-radius: .6rem; color: var(--sc-texto-3); font-size: .66rem; font-weight: 550; text-decoration: none; white-space: nowrap; }
.barra-inferior-item > i { font-size: 1.28rem; line-height: 1; transition: transform .15s ease; }
.barra-inferior-item > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.barra-inferior-item.activa { color: var(--sc-primario-texto); }
.barra-inferior-item.activa > i { transform: translateY(-1px); }
.barra-inferior-item:active > i { transform: scale(.92); }
.barra-inferior-item.destacado > i { width: 3.1rem; height: 3.1rem; margin-top: -1.55rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; color: #fff; background: linear-gradient(135deg, #6366f1, #4338ca); box-shadow: 0 8px 18px -6px rgba(79, 70, 229, .65), 0 0 0 4px var(--sc-superficie); }
.barra-inferior-item.destacado.activa { color: var(--sc-primario-texto); }

/* ---------- Encabezado de pantalla y barra de filtros ---------- */
.encabezado-pagina { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-bottom: 1.5rem; }
.encabezado-pagina h2 { margin: 0; font-size: 1.45rem; letter-spacing: -.025em; font-weight: 700; }
.encabezado-pagina .bajada { color: var(--sc-texto-3); font-size: .9rem; margin-top: .15rem; }
.encabezado-pagina .acciones { margin-left: auto; display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 575.98px) { .encabezado-pagina .acciones { margin-left: 0; width: 100%; } .encabezado-pagina .acciones > .btn { flex: 1 1 auto; } }
.avatar-entidad { width: 3.1rem; height: 3.1rem; border-radius: .95rem; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.05rem; letter-spacing: .02em; color: var(--sc-primario-texto); background: linear-gradient(135deg, var(--sc-primario-suave), color-mix(in srgb, var(--sc-acento) 14%, var(--sc-superficie))); box-shadow: inset 0 0 0 1px var(--sc-primario-borde); }
.barra-filtros { background: var(--sc-superficie); border: 1px solid var(--sc-borde); border-radius: var(--sc-radio-grande); box-shadow: var(--sc-sombra-1); padding: .85rem 1rem; margin-bottom: 1rem; }
.resumen-listado { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .85rem; color: var(--sc-texto-3); font-size: .84rem; }
.resumen-listado .pagination { margin: 0; }

/* ---------- Resultado del lote, número por número (docs/25 §2) ---------- */
.resumen-resultado { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0 0 1rem; }
.resumen-resultado .resumen-total { color: var(--sc-texto-2); margin-right: .35rem; }
.resumen-resultado .resumen-total strong { color: var(--sc-texto); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.nav-pills-sm .nav-link { padding: .3rem .7rem; font-size: .86rem; }
.resultado-lote { list-style: none; margin: 0; padding: 0; }
.resultado-item { display: flex; align-items: flex-start; gap: .85rem; padding: .85rem 1.25rem; border-bottom: 1px solid var(--sc-borde); }
.resultado-item:last-child { border-bottom: 0; }
.resultado-item.necesita { background: color-mix(in srgb, var(--tono-danger-bg) 55%, transparent); }
.resultado-item.contenedor { background: var(--sc-superficie-2); }
.resultado-item.hijo { padding-left: 2.25rem; }
.resultado-numero { flex: 0 0 auto; min-width: 2.4rem; height: 2.4rem; padding: 0 .4rem; border-radius: .65rem; display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-variant-numeric: tabular-nums; background: var(--sc-superficie-3); color: var(--sc-texto-2); }
.resultado-item.necesita .resultado-numero { background: var(--tono-danger-bg); color: var(--tono-danger-fg); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent); }
.resultado-item.hijo .resultado-numero { font-size: .8rem; }
.resultado-mini { flex: 0 0 3.5rem; width: 3.5rem; height: 3.5rem; border-radius: .6rem; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
    background: var(--sc-superficie-2); color: var(--sc-texto-3); font-size: 1.35rem; border: 1px solid var(--sc-borde); }
.resultado-mini img { width: 100%; height: 100%; object-fit: cover; }
a.resultado-mini:hover { border-color: var(--sc-primario-borde); }
.resultado-cuerpo { flex: 1 1 auto; min-width: 0; }
.resultado-titulo { font-weight: 600; color: var(--sc-texto); }
.resultado-titulo a { color: inherit; text-decoration: none; }
.resultado-titulo a:hover { color: var(--sc-primario-texto); text-decoration: underline; }
.resultado-datos { font-size: .86rem; color: var(--sc-texto-2); font-variant-numeric: tabular-nums; }
.resultado-detalle { font-size: .86rem; color: var(--sc-texto-3); }
.resultado-item.necesita .resultado-detalle { color: var(--tono-danger-fg); }
.resultado-archivo { font-size: .76rem; color: var(--sc-texto-4); }
.resultado-estado { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: .45rem; }
@media (max-width: 575.98px) {
    .resultado-item { flex-wrap: wrap; gap: .5rem .7rem; padding: .8rem 1rem; }
    .resultado-item.hijo { padding-left: 1.5rem; }
    .resultado-numero { min-width: 2.2rem; height: 2.2rem; }
    .resultado-mini { flex-basis: 2.9rem; width: 2.9rem; height: 2.9rem; font-size: 1.1rem; }
    .resultado-cuerpo { flex: 1 1 0; }
    .resultado-estado { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; width: 100%; padding-left: 6.5rem; }
    .resultado-item.hijo .resultado-estado { padding-left: 6rem; }
}

/* ---------- Cierre del mes (docs/25 §6) ---------- */
.lista-faltantes { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.lista-faltantes > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; padding: .6rem .8rem;
    border-radius: .65rem; background: color-mix(in srgb, var(--tono-warning-bg) 55%, transparent); border: 1px solid color-mix(in srgb, var(--tono-warning-fg) 18%, transparent); }
.acciones-faltante { display: flex; flex-wrap: wrap; gap: .4rem; }
.confirmo-cierre { display: block; margin-top: .2rem; font-size: .72rem; font-weight: 600; color: var(--tono-success-fg); text-decoration: none; white-space: nowrap; }
span.confirmo-cierre { display: inline; }
a.confirmo-cierre:hover { text-decoration: underline; }

/* ---------- Tablero: métricas ---------- */
.metrica {
    position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; height: 100%;
    padding: 1.05rem 1.15rem 1rem; background: var(--sc-superficie); border: 1px solid var(--sc-borde); border-radius: var(--sc-radio-grande);
    box-shadow: var(--sc-sombra-1); text-decoration: none; color: inherit; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.metrica::before { content: ""; position: absolute; z-index: -1; top: -4.5rem; right: -4rem; width: 10rem; height: 10rem; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--tono) 11%, transparent), transparent 68%); pointer-events: none; transition: opacity .2s ease; }
a.metrica:hover::before { transform: scale(1.15); }
a.metrica::after { content: "\f144"; font-family: "bootstrap-icons"; position: absolute; top: .95rem; right: 1rem; font-size: .85rem; color: var(--sc-texto-4); opacity: 0; transform: translate(-3px, 3px); transition: opacity .18s ease, transform .18s ease; }
a.metrica:hover { transform: translateY(-2px); box-shadow: var(--sc-sombra-3); border-color: color-mix(in srgb, var(--tono) 35%, var(--sc-borde)); color: inherit; }
a.metrica:hover::after { opacity: 1; transform: none; }
a.metrica:focus-visible { outline: 2px solid var(--tono); outline-offset: 2px; }
.metrica-icono { width: 2.3rem; height: 2.3rem; border-radius: .65rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; background: color-mix(in srgb, var(--tono) 13%, var(--sc-superficie)); color: var(--tono); margin-bottom: .8rem; }
.metrica-valor { position: relative; font-size: 1.8rem; font-weight: 700; line-height: 1.1; letter-spacing: -.025em; color: var(--sc-texto); }
.metrica-texto { font-size: .82rem; font-weight: 500; color: var(--sc-texto-3); margin-top: .2rem; }
.metrica-primario { --tono: #4f46e5; } .metrica-info { --tono: #0284c7; } .metrica-advertencia { --tono: #d97706; }
.metrica-naranja { --tono: #ea580c; } .metrica-exito { --tono: #059669; } .metrica-peligro { --tono: #dc2626; }
[data-bs-theme="dark"] .metrica-primario { --tono: #818cf8; } [data-bs-theme="dark"] .metrica-info { --tono: #38bdf8; } [data-bs-theme="dark"] .metrica-advertencia { --tono: #fbbf24; }
[data-bs-theme="dark"] .metrica-naranja { --tono: #fb923c; } [data-bs-theme="dark"] .metrica-exito { --tono: #34d399; } [data-bs-theme="dark"] .metrica-peligro { --tono: #f87171; }
/* Conteo animado: el número real queda en el texto (lectores de pantalla, pruebas); lo que se anima es una copia */
.metrica-valor.contando { color: transparent; }
.metrica-valor.contando::after { content: attr(data-conteo); position: absolute; left: 0; top: 0; color: var(--sc-texto); }

/* Tablero: progreso por cliente, pendientes */
.progreso-cliente { margin-bottom: 1rem; }
.progreso-cliente:last-of-type { margin-bottom: .5rem; }
.lista-pendientes { list-style: none; margin: 0; padding: 0; }
.lista-pendientes a { display: flex; align-items: center; gap: .8rem; padding: .7rem 1.25rem; color: var(--sc-texto); text-decoration: none; border-bottom: 1px solid var(--sc-borde); transition: background-color .12s ease; }
.lista-pendientes li:last-child a { border-bottom: 0; }
.lista-pendientes a:hover { background: var(--sc-fila-hover); }
.lista-pendientes .icono-tono { width: 2.1rem; height: 2.1rem; border-radius: .6rem; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--tono-bg); color: var(--tono-fg); }
.lista-pendientes .numero { font-weight: 700; font-variant-numeric: tabular-nums; }
.lista-pendientes .bi-chevron-right { margin-left: auto; color: var(--sc-texto-4); transition: transform .15s ease; }
.lista-pendientes a:hover .bi-chevron-right { transform: translateX(2px); color: var(--sc-texto-3); }
.tono-danger { --tono-bg: var(--tono-danger-bg); --tono-fg: var(--tono-danger-fg); }
.tono-warning { --tono-bg: var(--tono-warning-bg); --tono-fg: var(--tono-warning-fg); }
.tono-info { --tono-bg: var(--tono-info-bg); --tono-fg: var(--tono-info-fg); }
.tono-orange { --tono-bg: var(--tono-orange-bg); --tono-fg: var(--tono-orange-fg); }
.tono-success { --tono-bg: var(--tono-success-bg); --tono-fg: var(--tono-success-fg); }
.tono-primary { --tono-bg: var(--tono-primary-bg); --tono-fg: var(--tono-primary-fg); }
.lote-reciente { display: flex; align-items: center; gap: .75rem; }
.lote-reciente .icono-tono { width: 2.1rem; height: 2.1rem; border-radius: .6rem; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--sc-superficie-3); color: var(--sc-texto-3); }

/* ---------- Gráfico de actividad (componentes/grafico-actividad.php + app.js) ---------- */
.grafico { position: relative; }
.grafico-leyenda { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; font-size: .8rem; color: var(--sc-texto-2); }
.grafico-leyenda > span { display: inline-flex; align-items: center; gap: .4rem; }
.grafico-muestra { width: .7rem; height: .7rem; border-radius: 3px; display: inline-block; flex-shrink: 0; }
.serie-1 { background: var(--grafico-serie-1); }
.serie-2 { background: var(--grafico-serie-2); }
.grafico-cuerpo { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .6rem; margin-top: 1rem; }
.grafico-eje-y { position: relative; min-width: 1.6rem; font-size: .7rem; color: var(--sc-texto-3); font-variant-numeric: tabular-nums; text-align: right; }
.grafico-eje-y > span { position: absolute; right: 0; transform: translateY(50%); line-height: 1; white-space: nowrap; }
.grafico-eje-y .tick-0 { bottom: 0; } .grafico-eje-y .tick-50 { bottom: 50%; } .grafico-eje-y .tick-100 { bottom: 100%; }
.grafico-lienzo { position: relative; height: 13rem; border-bottom: 1px solid var(--grafico-eje); }
.grafico-grilla { position: absolute; left: 0; right: 0; height: 1px; background: var(--grafico-grilla); }
.grafico-grilla.g-50 { bottom: 50%; } .grafico-grilla.g-100 { bottom: 100%; }
.grafico-columnas { position: absolute; inset: 0; display: flex; align-items: stretch; }
.grafico-dia { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: flex-end; justify-content: center; gap: 2px; padding: 0 1px; border-radius: 4px 4px 0 0; outline: none; }
.grafico-dia:hover, .grafico-dia:focus-visible { background: color-mix(in srgb, var(--sc-texto) 5%, transparent); }
.grafico-dia:focus-visible { box-shadow: inset 0 0 0 2px var(--sc-primario); }
.grafico-barra { width: min(10px, 42%); height: 0; border-radius: 4px 4px 0 0; transition: height .7s cubic-bezier(.2, .8, .2, 1), filter .15s ease; }
.grafico-barra.con-valor { min-height: 2px; }
.grafico-dia:hover .grafico-barra, .grafico-dia:focus-visible .grafico-barra { filter: brightness(1.15) saturate(1.1); }
.grafico-eje-x { display: flex; margin-top: .4rem; font-size: .7rem; color: var(--sc-texto-3); font-variant-numeric: tabular-nums; }
.grafico-eje-x > span { flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; overflow: visible; }
@media (max-width: 575.98px) { .grafico-eje-x .solo-ancho { visibility: hidden; } .grafico-lienzo { height: 10rem; } }
.grafico-tooltip { position: absolute; z-index: 5; left: 0; top: 0; min-width: 9.5rem; padding: .55rem .7rem; border-radius: .6rem; background: var(--sc-superficie); border: 1px solid var(--sc-borde); box-shadow: var(--sc-sombra-3); font-size: .78rem; color: var(--sc-texto-2); pointer-events: none; opacity: 0; transform: translate(-50%, calc(-100% - 10px)); transition: opacity .12s ease; white-space: nowrap; }
.grafico-tooltip.visible { opacity: 1; }
.grafico-tooltip .titulo { font-weight: 600; color: var(--sc-texto); margin-bottom: .3rem; }
.grafico-tooltip .fila { display: flex; align-items: center; gap: .45rem; }
.grafico-tooltip .fila strong { color: var(--sc-texto); font-variant-numeric: tabular-nums; }
.grafico-tooltip .clave { width: .8rem; height: 2px; border-radius: 1px; flex-shrink: 0; }
.grafico-totales { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.grafico-totales .valor { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; color: var(--sc-texto); line-height: 1.15; }
.grafico-totales .etiqueta { font-size: .78rem; color: var(--sc-texto-3); display: flex; align-items: center; gap: .35rem; }
.grafico-datos summary { font-size: .8rem; color: var(--sc-texto-3); margin-top: .9rem; }
.grafico-datos summary:hover { color: var(--sc-texto); }

/* ---------- Carga de archivos ---------- */
.zona-carga { position: relative; border: 2px dashed var(--sc-primario-borde); border-radius: var(--sc-radio-grande); padding: 2.25rem 1rem; text-align: center; background: color-mix(in srgb, var(--sc-primario-suave) 55%, var(--sc-superficie)); transition: background-color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.zona-carga > i { display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 1.1rem; font-size: 2rem; color: var(--sc-primario-texto); background: var(--sc-superficie); box-shadow: var(--sc-sombra-2); margin-bottom: .5rem; transition: transform .2s ease; }
.zona-carga:hover { border-color: var(--sc-primario); }
.zona-carga.activa { background: var(--sc-primario-suave); border-color: var(--sc-primario); box-shadow: 0 0 0 4px var(--sc-foco); }
.zona-carga.activa > i { transform: translateY(-4px) scale(1.06); }
.resumen-carga { padding: .75rem 1.25rem; border-top: 1px solid var(--sc-borde); background: var(--sc-superficie-2); }
.lista-archivos { max-height: 460px; overflow-y: auto; }
/* Antes de enviar (docs/25 §5): número, miniatura y aviso de calidad de cada archivo. */
.carga-numero { flex: 0 0 auto; min-width: 2rem; height: 2rem; padding: 0 .3rem; border-radius: .55rem; display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .85rem; font-variant-numeric: tabular-nums; background: var(--sc-superficie-3); color: var(--sc-texto-2); }
.carga-mini { flex: 0 0 2.6rem; width: 2.6rem; height: 2.6rem; border-radius: .5rem; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
    background: var(--sc-superficie-2); color: var(--sc-texto-3); font-size: 1.15rem; border: 1px solid var(--sc-borde); }
.carga-mini img { width: 100%; height: 100%; object-fit: cover; }
.aviso-calidad { flex: 1 0 100%; padding-left: 5.6rem; margin-top: -.25rem; font-size: .82rem; color: var(--tono-warning-fg); }
.fila-carga > .flex-grow-1 { flex: 1 1 0; min-width: 0; }
@media (max-width: 575.98px) { .aviso-calidad { padding-left: 0; } }
.aviso-calidad::before { content: "\F220 "; font-family: bootstrap-icons; margin-right: .25rem; }
.fila-carga.con-aviso { background: color-mix(in srgb, var(--tono-warning-bg) 55%, transparent); }
.fila-carga.con-aviso .carga-numero { background: var(--tono-warning-bg); color: var(--tono-warning-fg); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent); }
.texto-con-saltos { white-space: pre-line; }
/* Subir comprobantes: en el celular el orden es paso 1, paso 2 y después los consejos */
.carga-grilla { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); grid-template-areas: "paso1" "paso2" "consejos"; }
.carga-paso1 { grid-area: paso1; } .carga-paso2 { grid-area: paso2; } .carga-consejos { grid-area: consejos; }
@media (min-width: 992px) {
    .carga-grilla { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-rows: auto 1fr; grid-template-areas: "paso1 paso2" "consejos paso2"; align-items: start; }
}
.paso-numero { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; color: #fff; background: var(--sc-primario); margin-right: .35rem; flex-shrink: 0; }

/* ---------- Documentos y revisión ---------- */
.miniatura { width: 44px; height: 56px; object-fit: cover; border-radius: .4rem; border: 1px solid var(--sc-borde); background: #fff; box-shadow: var(--sc-sombra-1); transition: transform .15s ease; }
tr.fila-enlace:hover .miniatura:not([class*="giro-"]) { transform: scale(1.06); }
.miniatura-celda { width: 56px; }
.ancho-celda { max-width: 260px; }
.celda-corta { max-width: 18rem; }
.confianza { display: inline-block; font-size: .72rem; font-weight: 600; padding: .12rem .45rem; border-radius: 1rem; font-variant-numeric: tabular-nums; }
.confianza-alta { background: var(--tono-success-bg); color: var(--tono-success-fg); } .confianza-media { background: var(--tono-warning-bg); color: var(--tono-warning-fg); } .confianza-baja { background: var(--tono-danger-bg); color: var(--tono-danger-fg); }
.campo-media { border-color: #f59e0b; background-color: color-mix(in srgb, #f59e0b 7%, var(--bs-body-bg)); }
.campo-baja { border-color: #ef4444; background-color: color-mix(in srgb, #ef4444 6%, var(--bs-body-bg)); }
.campo-editado { border-color: var(--sc-primario) !important; background-color: color-mix(in srgb, var(--sc-primario) 7%, var(--bs-body-bg)) !important; }
.campo-confirmado { border-color: #16a34a; background-color: color-mix(in srgb, #16a34a 6%, var(--bs-body-bg)); }
.btn-confirmar { --bs-btn-padding-y: 0; --bs-btn-padding-x: .4rem; --bs-btn-font-size: .72rem; line-height: 1.5; box-shadow: none; }
.visor { overflow: hidden; position: sticky; top: calc(var(--sc-alto-barra) + 12px); }
.visor-barra { display: flex; flex-wrap: wrap; gap: .3rem; padding: .5rem; border-bottom: 1px solid var(--sc-borde); background: var(--sc-superficie-2); }
.visor-lienzo { height: calc(100vh - 230px); min-height: 360px; overflow: auto; background: color-mix(in srgb, var(--sc-texto-4) 22%, var(--sc-superficie-3)); background-image: radial-gradient(color-mix(in srgb, var(--sc-texto-4) 35%, transparent) 1px, transparent 1px); background-size: 16px 16px; }
.visor-imagen { display: block; width: 100%; transition: transform .15s ease; background: #fff; margin-bottom: 8px; box-shadow: 0 4px 14px rgba(15, 23, 42, .15); }
.visor-pagina { position: relative; margin: 0 auto 8px; }
.visor-pagina > .visor-imagen { position: absolute; margin: 0; transform-origin: center center; }
.acciones-revision kbd { font-size: .7rem; background: rgba(0, 0, 0, .15); }
.imagen-par { max-height: 420px; object-fit: contain; background: var(--sc-superficie-3); width: 100%; border-radius: .5rem; }
@media (max-width: 1199.98px) { .visor { position: static; } .visor-lienzo { height: 60vh; } }
.grupo-campos { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--sc-texto-3); padding-bottom: .35rem; margin: 1.1rem 0 .6rem; border-bottom: 1px solid var(--sc-borde); }
.celda-seguimiento { display: inline-block; min-width: 2.4rem; padding: .3rem .5rem; border-radius: .5rem; font-weight: 600; text-decoration: none; font-size: .85rem; text-align: center; font-variant-numeric: tabular-nums; transition: transform .12s ease, box-shadow .12s ease; }
a.celda-seguimiento:hover { transform: translateY(-1px); box-shadow: var(--sc-sombra-2); }
.celda-vacio { background: var(--sc-superficie-3); color: var(--sc-texto-4); } .celda-recibiendo { background: var(--tono-info-bg); color: var(--tono-info-fg); } .celda-pendiente { background: var(--tono-warning-bg); color: var(--tono-warning-fg); }
.celda-listo { background: var(--tono-success-bg); color: var(--tono-success-fg); } .celda-exportado { background: var(--tono-primary-bg); color: var(--tono-primary-fg); }
.notificacion-nueva { background: color-mix(in srgb, var(--sc-primario) 5%, var(--sc-superficie)); }
.notificacion-nueva .fw-semibold::before { content: ""; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--sc-primario); margin-right: .45rem; vertical-align: .1rem; }
/* Imágenes con el giro guardado del documento (el archivo original no cambia; docs/03 documento.rotacion) */
.giro-90 { transform: rotate(90deg); } .giro-180 { transform: rotate(180deg); } .giro-270 { transform: rotate(270deg); }
.marco-giro { aspect-ratio: 1 / 1; width: min(100%, 75vh); margin: 0 auto; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--sc-superficie-3); border-radius: .5rem; }
.marco-giro > img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; background: #fff; }
.miniatura.giro-90, .miniatura.giro-270 { width: 56px; height: 44px; margin: 6px -6px; }

/* ---------- Tiempo real (tiempo-real.js) ---------- */
.en-vivo { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 500; color: var(--sc-texto-3); background: var(--sc-superficie-3); margin-right: .25rem; }
.en-vivo-punto { position: relative; width: .5rem; height: .5rem; border-radius: 50%; background: var(--sc-texto-4); }
.en-vivo.conectado { color: var(--tono-success-fg); background: var(--tono-success-bg); }
.en-vivo.conectado .en-vivo-punto { background: #16a34a; }
.en-vivo.conectado .en-vivo-punto::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #16a34a; animation: sc-pulso 2s ease-out infinite; }
.en-vivo.desconectado { color: var(--tono-warning-fg); background: var(--tono-warning-bg); }
.en-vivo.desconectado .en-vivo-punto { background: #d97706; }
@keyframes sc-pulso { from { transform: scale(1); opacity: .7; } to { transform: scale(2.6); opacity: 0; } }
.tr-novedades { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1080; border-radius: 999px; padding-inline: 1rem; animation: sc-entrar-aviso .3s ease-out; }
@keyframes tr-destello { from { opacity: .55; } to { opacity: 1; } }
.tr-destello { animation: tr-destello .4s ease-out; }

/* Filtros en vivo: mientras llega el listado nuevo se mantiene el anterior, más tenue, con una línea que avanza */
.actualizando { position: relative; opacity: .6; transition: opacity .15s ease; pointer-events: none; }
.actualizando::before { content: ""; position: absolute; z-index: 3; left: 0; right: 0; top: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--sc-primario), transparent); background-size: 50% 100%; background-repeat: no-repeat; animation: sc-barrido 1s ease-in-out infinite; }
@keyframes sc-barrido { from { background-position: -50% 0; } to { background-position: 150% 0; } }

/* ---------- Listados en el celular: cada fila es una tarjeta con el título de cada dato (tabla-apilable + app.js) ---------- */
@media (max-width: 575.98px) {
    .tabla-apilable thead { display: none; }
    .tabla-apilable, .tabla-apilable tbody, .tabla-apilable tr { display: block; width: 100%; }
    .tabla-apilable tr { position: relative; padding: .85rem 1rem; border-bottom: 1px solid var(--sc-borde); }
    .tabla-apilable tbody tr:last-child { border-bottom: 0; }
    .table.tabla-apilable > tbody > tr > td { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding: .14rem 0; border-bottom-width: 0; text-align: right; white-space: normal; background: transparent; box-shadow: none; }
    .tabla-apilable td[data-label]::before { content: attr(data-label); flex: 0 0 auto; color: var(--sc-texto-3); font-size: .78rem; text-align: left; }
    .table.tabla-apilable > tbody > tr > td.celda-principal { display: block; text-align: left; padding: 0 3.6rem .4rem 0; font-size: .98rem; }
    .table.tabla-apilable > tbody > tr > td.miniatura-celda { position: absolute; right: 1rem; top: .85rem; padding: 0; }
    .tabla-apilable td:empty { display: none !important; }
    .tabla-apilable .ancho-celda { max-width: none; }
    .table.tabla-apilable > tbody > tr > td.celda-acciones { justify-content: flex-start; flex-wrap: wrap; gap: .4rem; padding-top: .55rem; }
    .card > .table-responsive > .table.tabla-apilable > :not(caption) > * > * { padding-left: 0; padding-right: 0; }
    .card > .table-responsive > .table.tabla-apilable > tbody > tr > td.celda-principal { padding-right: 3.6rem; }
}

/* ---------- Otras pantallas ---------- */
.registro-errores { max-height: 22rem; overflow: auto; font-size: .72rem; padding: .75rem 1rem; background: var(--bs-tertiary-bg); white-space: pre-wrap; word-break: break-all; }
/* Auditoría: detalle como pares "dato: valor" */
.dato-auditoria { display: inline-block; margin: 0 .6rem .15rem 0; }
.tabla-auditoria .detalle-auditoria { min-width: 16rem; }
/* Duplicados: datos de cada documento para comparar */
.datos-par { display: grid; grid-template-columns: auto 1fr; column-gap: .75rem; row-gap: .15rem; }
.datos-par dt { font-weight: 400; color: var(--sc-texto-3); }
.datos-par dd { margin: 0; overflow-wrap: anywhere; }
/* Usuarios: clientes que puede ver, como casillas (no hace falta Ctrl + clic) */
.lista-clientes { max-height: 16rem; overflow-y: auto; background: var(--bs-body-bg); }
.lista-clientes[disabled] { opacity: .55; background: var(--sc-superficie-3); }
.lista-clientes-opciones > label:last-child { border-bottom: 0 !important; }
/* Plataforma > Métricas */
.uso-plan { height: 4px; min-width: 5rem; margin-top: .2rem; }
/* Plan y facturación */
.texto-lineas { white-space: pre-line; }
/* Registro autoservicio: campo que solo completan los robots (no se ve ni se alcanza con el teclado) */
.campo-trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* Textos legales */
.texto-legal { max-width: 820px; line-height: 1.65; }
.texto-legal h3 { font-size: 1.1rem; margin-top: 1.75rem; }
.texto-legal li { margin-bottom: .3rem; }
.legal-caja { max-height: 45vh; overflow-y: auto; border: 1px solid var(--sc-borde); border-radius: .75rem; padding: 1rem 1.25rem; background: var(--sc-superficie); }

/* ---------- Recibo y KuDE: documentos para imprimir (siempre en claro) ---------- */
.pagina-recibo, .pagina-kude { background: #eef0f4; }
.recibo { max-width: 760px; margin: 2rem auto; padding: 0 1rem; }
.recibo-hoja { background: #fff; color: #111827; border: 1px solid #e5e7eb; border-radius: .75rem; padding: 2rem; box-shadow: 0 10px 30px -12px rgba(15, 23, 42, .2); }
/* Constancia de recepción de un lote (docs/25 §4): más ancha, con la tabla número por número. */
.recibo.constancia { max-width: 1040px; }
.tabla-constancia { font-size: .8rem; }
.tabla-constancia th { white-space: nowrap; }
.tabla-constancia .huella { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .68rem; color: #4b5563; word-break: break-all; }
.kude { max-width: 880px; margin: 2rem auto; padding: 0 1rem; }
.kude-hoja { background: #fff; color: #111827; border: 1px solid #9ca3af; padding: 1rem; font-size: .8rem; line-height: 1.35; box-shadow: 0 10px 30px -12px rgba(15, 23, 42, .2); }
.kude-titulo { text-align: center; background: #e5e7eb; border: 1px solid #9ca3af; padding: .25rem; margin-bottom: .5rem; }
.kude-caja { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem 1.5rem; border: 1px solid #9ca3af; padding: .6rem .8rem; margin-bottom: .5rem; }
.kude-etiqueta { color: #374151; }
.kude-nombre { font-weight: 700; font-size: .95rem; }
.kude-documento { font-weight: 700; font-size: .95rem; margin-top: .75rem; }
.kude-numero { font-size: .95rem; }
.kude-marca { display: inline-block; width: 1rem; height: 1rem; margin: 0 .5rem 0 .15rem; border: 1px solid #6b7280; text-align: center; line-height: .95rem; font-weight: 700; vertical-align: middle; }
.kude-tabla { overflow-x: auto; margin-bottom: .5rem; }
.kude-items { width: 100%; border-collapse: collapse; }
.kude-items th, .kude-items td { border: 1px solid #9ca3af; padding: .2rem .35rem; vertical-align: top; }
.kude-items th { background: #f3f4f6; text-align: center; font-weight: 600; }
.kude-items .num { text-align: right; white-space: nowrap; }
.kude-items tfoot td { font-weight: 600; }
.kude-info-item { color: #4b5563; font-size: .75rem; }
.kude-pie { grid-template-columns: auto 1fr; align-items: center; }
.kude-qr svg { display: block; width: 30mm; height: 30mm; }
.kude-cdc { display: inline-block; background: #dbeafe; padding: .2rem .5rem; font-size: .9rem; letter-spacing: .02em; }
.kude-leyenda { font-size: .75rem; text-transform: uppercase; }
.kude-aviso { border: 2px solid #b45309; color: #92400e; background: #fffbeb; text-align: center; font-weight: 700; padding: .4rem; margin-bottom: .5rem; }
.kude-aviso-anulada { border-color: #b91c1c; color: #991b1b; background: #fef2f2; }
@media (max-width: 575.98px) { .kude-caja { grid-template-columns: 1fr; } }

/* ---------- SweetAlert2 en el tema oscuro ---------- */
[data-bs-theme="dark"] .swal2-popup { background: var(--sc-superficie); color: var(--sc-texto); border: 1px solid var(--sc-borde); }
[data-bs-theme="dark"] .swal2-title, [data-bs-theme="dark"] .swal2-html-container { color: var(--sc-texto); }
[data-bs-theme="dark"] .swal2-input, [data-bs-theme="dark"] .swal2-textarea, [data-bs-theme="dark"] .swal2-select { background: var(--bs-body-bg); color: var(--sc-texto); border-color: var(--sc-borde-fuerte); }
[data-bs-theme="dark"] .swal2-validation-message { background: var(--sc-superficie-3); color: var(--sc-texto); }
[data-bs-theme="dark"] .swal2-timer-progress-bar { background: rgba(255, 255, 255, .3); }
.swal2-popup { border-radius: 1rem !important; font-family: var(--bs-body-font-family); }
.swal2-styled { border-radius: .6rem !important; font-weight: 500 !important; }

/* ---------- Impresión ---------- */
@media print {
    .app-lateral, .app-barra, .barra-inferior, .avisos-flotantes, .progreso-navegacion, .btn, form { display: none !important; }
    .app-contenido { padding: 0; }
    .app-contenido > * { animation: none !important; }
    .pagina-recibo, .pagina-kude { background: #fff; }
    .recibo, .kude { margin: 0; max-width: none; padding: 0; }
    .recibo-hoja, .kude-hoja { border: 0; padding: 0; box-shadow: none; }
    .kude-tabla { overflow: visible; }
    .kude-cdc, .kude-titulo, .kude-items th, .kude-aviso { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .no-imprimir { display: none !important; }
}

/* ---------- Movimiento reducido: sin desplazamientos ni animaciones decorativas ---------- */
@media (prefers-reduced-motion: reduce) {
    .app-contenido > *, .acceso-tarjeta, .dropdown-menu.show, .avisos-flotantes > .alert, .tr-novedades, .tr-destello, .paleta.show .modal-dialog, .modal-backdrop.show { animation: none; }
    .en-vivo.conectado .en-vivo-punto::after, .actualizando::before { animation: none; }
    body.navegando .progreso-navegacion { animation: none; width: 60%; }
    a.metrica:hover, .btn:active:not(:disabled), a.celda-seguimiento:hover, .zona-carga.activa > i, tr.fila-enlace:hover .miniatura { transform: none; }
    .grafico-barra, .progress-bar { transition: none; }
}

/* ---------- Alta de usuario: la contraseña inicial solo si no se manda la invitación ---------- */
.bloque-acceso:has(#accesoInvitacion:checked) [data-acceso-clave] { display: none; }
.buscador-ancho { max-width: 28rem; }
/* Estudio > WhatsApp: la cuenta de Twilio solo con «número propio»; la opción elegida, resaltada */
form:has(#modo-propio:not(:checked)) .bloque-numero-propio { display: none; }
.opcion-modo:has(> input:checked) { border-color: var(--sc-primario) !important; }