/* ============================================================================
   FACT_ELECTRONICA — sistema de diseño
   Paleta: indigo/violeta sobre neutros slate. Bootstrap 5.1 se usa como base de
   grilla y utilidades; aquí se sobrescriben sus componentes (5.1 todavía no
   expone variables CSS por componente, así que las reglas son explícitas).
   ============================================================================ */

/*
 * La paleta sale de images/colores.png, muestreada píxel a píxel y no a ojo. Los valores que
 * llevan «medido» son literalmente los de esa imagen; el resto se deriva de ellos para completar
 * la escala.
 *
 * Cada familia semántica tiene cuatro papeles y conviene no confundirlos:
 *
 *   -500       el color sólido: puntos, iconos, barras.
 *   -pastilla  fondo de una etiqueta pequeña. Saturado, porque ocupa poco.
 *   -suave     fondo de una superficie grande —un aviso a ancho completo—. Mucho más claro:
 *              el tono de la pastilla, estirado a media pantalla, resulta agresivo.
 *   -borde     el contorno de las dos.
 *   -texto     el texto encima, ya oscurecido para que contraste.
 */
:root {
    /* -------------------------------------------------------------------- Marca
       El azul del sistema. Botón primario, enlaces y avatar son #006bf9; el ítem
       activo del menú se apoya en #e7f0ff. Los dos, medidos. */
    --marca-400: #4d95fb;
    --marca-500: #006bf9;   /* medido */
    --marca-600: #0056cc;
    --marca-700: #00429e;
    --marca-suave: #e7f0ff; /* medido */
    --marca-borde: #c2dbff;
    --marca-texto: #00429e;

    /* Segundo azul, para lo que necesita distinguirse del primario sin salirse de
       la familia. Antes era violeta y desentonaba con todo lo demás. */
    --acento-500: #0091ea;

    /* ------------------------------------------------------------------ Neutros
       Fríos y azulados. El fondo de la aplicación es #eceff3 y el texto principal
       casi negro; los intermedios salen de los grises reales de la referencia. */
    --neutro-950: #080b10;
    --neutro-900: #0f1115;  /* medido: títulos y texto de celda */
    --neutro-800: #1c2128;
    --neutro-700: #2e3540;
    --neutro-600: #474c52;  /* medido: subtítulos */
    --neutro-500: #5a5f66;  /* medido: cabecera de tabla, rótulos de grupo */

    /* Este es el gris de los metadatos —el RUC bajo el nombre, la fecha de descarga—, y es el
       token que más usan las vistas. El tono de la referencia (#878d96) se queda en 3,3:1 sobre
       blanco y 2,9:1 sobre el fondo de la aplicación: por debajo de lo legible, y justo en el
       texto más pequeño de la pantalla, que es donde menos se puede permitir. Se oscurece lo
       mínimo para cruzar 4,5:1 sobre blanco conservando el mismo matiz frío. */
    --neutro-400: #6b7178;
    --neutro-300: #c3c9d1;
    --neutro-200: #dde1e7;
    --neutro-100: #eceff3;  /* medido: fondo de la aplicación */
    --neutro-50: #f6f8fa;

    /* --------------------------------------------------------------- Semánticos */
    --exito-500: #438949;    /* medido: punto de «Autorizado» */
    --exito-pastilla: #c9f4d0; /* medido */
    --exito-suave: #e8f8ec;
    --exito-borde: #a9e3b4;
    --exito-texto: #1a4b20;  /* medido */

    --alerta-500: #c58a2b;   /* medido: punto de «Borrador» */
    --alerta-pastilla: #fdeacb; /* medido */
    --alerta-suave: #fdf5e8;
    --alerta-borde: #f0d3a0;
    --alerta-texto: #7a5410;

    --peligro-500: #ca2826;  /* medido: punto de «Error» */
    --peligro-600: #a81f1d;
    --peligro-pastilla: #ffd0ce; /* medido */
    --peligro-suave: #feecec;
    --peligro-borde: #f6b4b2;
    --peligro-texto: #8c1f1d;

    --info-500: #0091ea;
    --info-pastilla: #d3eaff;
    --info-suave: #eaf4ff;
    --info-borde: #b3d8fb;
    --info-texto: #0a4e85;

    /* Formas */
    --radio-sm: 8px;
    --radio-md: 12px;
    --radio-lg: 16px;
    --radio-pill: 999px;

    /* Las sombras tiñen con el mismo azul del texto, no con negro puro: sobre un fondo frío,
       una sombra neutra se ve sucia. */
    --sombra-sm: 0 1px 2px rgba(15, 17, 21, .06);
    --sombra-md: 0 1px 3px rgba(15, 17, 21, .08), 0 4px 12px rgba(15, 17, 21, .04);
    --sombra-lg: 0 4px 6px rgba(15, 17, 21, .04), 0 12px 32px rgba(15, 17, 21, .08);
    --sombra-foco: 0 0 0 3px rgba(0, 107, 249, .22);

    /* Layout */
    --lateral-ancho: 268px;
    --lateral-ancho-min: 78px;
    --superior-alto: 64px;
    --transicion: 200ms cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 15px; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    /* El fondo de la aplicación es el gris azulado de la referencia, no un blanco roto: es lo
       que hace que las tarjetas y la lateral —ambas blancas— se recorten sobre él. Con un fondo
       casi blanco, la lateral clara se fundiría con el contenido y no se vería dónde acaba una
       cosa y empieza la otra. */
    background-color: var(--neutro-100);
    color: var(--neutro-800);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--marca-600); text-decoration: none; }
a:hover { color: var(--marca-700); text-decoration: underline; }

h1, h2, h3, h4, h5, h6 { color: var(--neutro-900); font-weight: 650; letter-spacing: -.011em; }

code {
    font-family: "Cascadia Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .875em;
    color: var(--marca-700);
    background: var(--marca-suave);
    padding: .12em .4em;
    border-radius: 5px;
}

:focus-visible { outline: 2px solid var(--marca-500); outline-offset: 2px; }

/* ============================================================================
   Estructura de la aplicación
   ============================================================================ */

.aplicacion { display: flex; min-height: 100vh; }

.aplicacion__contenido {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    margin-left: var(--lateral-ancho);
    transition: margin-left var(--transicion);
}

html.lateral-colapsada .aplicacion__contenido { margin-left: var(--lateral-ancho-min); }

.aplicacion__cuerpo {
    flex: 1 0 auto;
    padding: 28px 32px 48px;
    max-width: 1400px;
    width: 100%;
}

/* ============================================================================
   Barra lateral
   ============================================================================ */

/*
 * La lateral es blanca, no oscura.
 *
 * Era un degradado casi negro y la referencia la tiene en blanco, apoyada sobre el gris azulado
 * del fondo. El cambio no es cosmético: con la lateral clara, el único color fuerte de la pantalla
 * pasa a ser el azul de marca, que es justo donde debe caer la atención —el botón de acción, el
 * ítem activo, los enlaces—. Con la lateral oscura, ese peso se lo llevaba el menú.
 */
.lateral {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    width: var(--lateral-ancho);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-right: 1px solid var(--neutro-200);
    transition: width var(--transicion), transform var(--transicion);
    overflow: hidden;
}

html.lateral-colapsada .lateral { width: var(--lateral-ancho-min); }

/* --- Marca y toggle --- */

.lateral__marca {
    display: flex;
    align-items: center;
    gap: 12px;
    height: var(--superior-alto);
    padding: 0 14px 0 18px;
    flex: 0 0 auto;
    border-bottom: 1px solid var(--neutro-200);
}

.lateral__logo {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--marca-500);
    color: #fff;
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .02em;
    box-shadow: 0 4px 12px rgba(0, 107, 249, .28);
}

.lateral__titulo {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--neutro-900);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
}

/* «FACT» en tinta y «ELECTRÓNICA» en azul, como en la referencia. */
.lateral__titulo span { color: var(--marca-500); font-weight: 700; }

.lateral__toggle {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: var(--neutro-100);
    color: var(--neutro-500);
    cursor: pointer;
    transition: background var(--transicion), color var(--transicion);
}

.lateral__toggle:hover { background: var(--marca-suave); color: var(--marca-600); }
.lateral__toggle svg { width: 17px; height: 17px; transition: transform var(--transicion); }
html.lateral-colapsada .lateral__toggle svg { transform: rotate(180deg); }

/* Colapsada: la marca se centra y el toggle pasa debajo del logo. */
html.lateral-colapsada .lateral__marca {
    flex-direction: column;
    height: auto;
    gap: 10px;
    padding: 13px 0;
}

html.lateral-colapsada .lateral__titulo { display: none; }

/* --- Menú --- */

.lateral__menu {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 12px 20px;
    scrollbar-width: thin;
    scrollbar-color: var(--neutro-300) transparent;
}

.lateral__menu::-webkit-scrollbar { width: 6px; }
.lateral__menu::-webkit-scrollbar-thumb { background: var(--neutro-300); border-radius: 3px; }

.menu__grupo {
    margin: 18px 0 8px;
    padding: 0 12px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--neutro-500);
    white-space: nowrap;
}

.menu__grupo:first-child { margin-top: 2px; }

/* En colapsado el rótulo del grupo se convierte en un separador. */
html.lateral-colapsada .menu__grupo {
    margin: 12px 14px 10px;
    padding: 0;
    height: 1px;
    overflow: hidden;
    color: transparent;
    background: var(--neutro-200);
}

.menu__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 3px;
    border-radius: var(--radio-sm);
    color: var(--neutro-700);
    font-size: .9rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background var(--transicion), color var(--transicion);
}

.menu__item:hover {
    background: var(--neutro-100);
    color: var(--neutro-900);
    text-decoration: none;
}

.menu__item svg { flex: 0 0 auto; width: 19px; height: 19px; stroke-width: 1.75; }

.menu__texto { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Activo: fondo azul suave con el texto en azul, más la barra a la izquierda. */
.menu__item--activo,
.menu__item--activo:hover {
    background: var(--marca-suave);
    color: var(--marca-texto);
    font-weight: 600;
}

.menu__item--activo::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    border-radius: 0 3px 3px 0;
    background: var(--marca-500);
}

.menu__item--activo svg { color: var(--marca-500); }

/* Deshabilitado: sin puntero, atenuado, con etiqueta "Próximamente". */
.menu__item--proximo { color: var(--neutro-400); cursor: not-allowed; }
.menu__item--proximo:hover { background: transparent; color: var(--neutro-400); }

.menu__pronto {
    flex: 0 0 auto;
    font-size: .62rem;
    font-weight: 600;
    font-style: normal;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--marca-600);
    background: var(--marca-suave);
    border: 1px solid var(--marca-borde);
    border-radius: var(--radio-pill);
    padding: 2px 7px;
}

/* Colapsada: solo iconos centrados. */
html.lateral-colapsada .menu__item { justify-content: center; padding: 11px 0; gap: 0; }
html.lateral-colapsada .menu__texto,
html.lateral-colapsada .menu__pronto { display: none; }
html.lateral-colapsada .menu__item--activo::before { left: 0; }

/* Marca los deshabilitados en colapsado, donde no cabe la etiqueta. */
html.lateral-colapsada .menu__item--proximo::after {
    content: "";
    position: absolute;
    top: 7px;
    right: 15px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--marca-400);
    opacity: .5;
}

/* Tooltip en colapsado: sin él, los iconos solos son una adivinanza. */
html.lateral-colapsada .lateral [data-titulo]::after {
    content: attr(data-titulo);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 1060;
    padding: 6px 11px;
    border-radius: var(--radio-sm);
    background: var(--neutro-800);
    color: #fff;
    font-size: .8rem;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: var(--sombra-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease;
}

html.lateral-colapsada .lateral [data-titulo]:hover::after { opacity: 1; }

/* --- Pie: tarjeta del emisor, fija dentro del menú --- */

.lateral__pie {
    flex: 0 0 auto;
    padding: 12px;
    border-top: 1px solid var(--neutro-200);
    background: var(--neutro-50);
}

.emisor-tarjeta {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px;
    border-radius: var(--radio-md);
    background: #fff;
    border: 1px solid var(--neutro-200);
    color: var(--neutro-800);
    transition: background var(--transicion), border-color var(--transicion);
}

.emisor-tarjeta:hover {
    background: var(--marca-suave);
    border-color: var(--marca-borde);
    color: var(--marca-texto);
    text-decoration: none;
}

.emisor-tarjeta--activa {
    background: var(--marca-suave);
    border-color: var(--marca-borde);
    color: var(--marca-texto);
}

.emisor-tarjeta__sigla {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--marca-500);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.emisor-tarjeta__datos {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.emisor-tarjeta__nombre {
    font-size: .84rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.emisor-tarjeta__meta {
    font-size: .72rem;
    color: var(--neutro-400);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.emisor-tarjeta__ir { flex: 0 0 auto; width: 16px; height: 16px; color: var(--neutro-500); }

.emisor-tarjeta__aviso {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--alerta-500);
    box-shadow: 0 0 0 2px #fff;
}

html.lateral-colapsada .lateral__pie { padding: 10px 12px; }
html.lateral-colapsada .emisor-tarjeta { justify-content: center; padding: 8px 0; gap: 0; }
html.lateral-colapsada .emisor-tarjeta__datos,
html.lateral-colapsada .emisor-tarjeta__ir { display: none; }

/* ============================================================================
   Barra superior
   ============================================================================ */

.superior {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: 16px;
    height: var(--superior-alto);
    padding: 0 32px;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--neutro-200);
}

.superior__cajon {
    display: none;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--neutro-200);
    border-radius: var(--radio-sm);
    background: #fff;
    color: var(--neutro-600);
    cursor: pointer;
}

.superior__titulo { flex: 1 1 auto; min-width: 0; }

.superior__titulo h1 {
    margin: 0;
    font-size: 1.06rem;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.superior__titulo p {
    margin: 1px 0 0;
    font-size: .8rem;
    color: var(--neutro-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.superior__acciones { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

.superior__usuario {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 12px 5px 6px;
    border: 1px solid var(--neutro-200);
    border-radius: var(--radio-pill);
    background: #fff;
    font-size: .82rem;
    color: var(--neutro-700);
}

.superior__usuario span {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: var(--marca-500);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
}

/* ============================================================================
   Pastillas de ambiente y estado
   ============================================================================ */

.pastilla {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: var(--radio-pill);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .01em;
    border: 1px solid transparent;
    white-space: nowrap;
}

.pastilla::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.pastilla--pruebas { color: var(--alerta-texto); background: var(--alerta-pastilla); border-color: var(--alerta-borde); }
.pastilla--produccion { color: var(--exito-texto); background: var(--exito-pastilla); border-color: var(--exito-borde); }
.pastilla--neutra { color: var(--neutro-600); background: var(--neutro-100); border-color: var(--neutro-200); }
.pastilla--marca { color: var(--marca-texto); background: var(--marca-suave); border-color: var(--marca-borde); }
.pastilla--exito { color: var(--exito-texto); background: var(--exito-pastilla); border-color: var(--exito-borde); }
.pastilla--peligro { color: var(--peligro-texto); background: var(--peligro-pastilla); border-color: var(--peligro-borde); }
.pastilla--alerta { color: var(--alerta-texto); background: var(--alerta-pastilla); border-color: var(--alerta-borde); }
.pastilla--sin-punto::before { display: none; }

/* ============================================================================
   Tarjetas, encabezados de página, estados vacíos
   ============================================================================ */

.tarjeta {
    background: #fff;
    border: 1px solid var(--neutro-200);
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-sm);
}

.tarjeta__cuerpo { padding: 22px 24px; }

.tarjeta__cabecera {
    padding: 18px 24px;
    border-bottom: 1px solid var(--neutro-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.tarjeta__cabecera h2 { margin: 0; font-size: 1rem; }
.tarjeta__cabecera p { margin: 2px 0 0; font-size: .84rem; color: var(--neutro-500); }

.pagina-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.pagina-cabecera h1 { margin: 0 0 4px; font-size: 1.5rem; }
.pagina-cabecera p { margin: 0; color: var(--neutro-500); font-size: .9rem; }

.vacio { text-align: center; padding: 52px 24px; }

.vacio__icono {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: var(--radio-lg);
    background: var(--marca-suave);
    color: var(--marca-600);
}

.vacio__icono svg { width: 26px; height: 26px; }
.vacio h2 { font-size: 1.05rem; margin: 0 0 6px; }
.vacio p { color: var(--neutro-500); margin: 0 auto 18px; max-width: 44ch; font-size: .9rem; }

/* Rejilla de accesos del panel */
.rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

/* ----------------------------------------------------------------------------
   Rejillas de número fijo de columnas.

   La `.rejilla` de arriba decide sola cuántas caben, y con el ancho útil que deja
   el menú lateral cuatro tarjetas de 260px no entran: la cuarta se descolgaba a
   una segunda fila y el panel parecía tener dos bloques distintos. Estas fijan el
   número de columnas y dejan que cada tarjeta se estreche lo que haga falta.

   El `minmax(0, 1fr)` en lugar de `1fr` a secas no es cosmético: el mínimo por
   defecto de una pista de grid es `auto`, así que una cifra larga ensancharía su
   columna y desalinearía el resto.
   ---------------------------------------------------------------------------- */
.rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Por debajo de esto, una fila única deja las tarjetas ilegibles: se apilan. */
@media (max-width: 1100px) {
    .rejilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .rejilla--3, .rejilla--4 { grid-template-columns: minmax(0, 1fr); }
}

.acceso {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--neutro-200);
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-sm);
    color: inherit;
    transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}

a.acceso:hover {
    transform: translateY(-2px);
    box-shadow: var(--sombra-lg);
    border-color: var(--marca-borde);
    text-decoration: none;
    color: inherit;
}

.acceso__icono {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radio-md);
    background: var(--marca-suave);
    color: var(--marca-600);
}

.acceso__icono svg { width: 21px; height: 21px; }
.acceso h2 { margin: 0; font-size: .98rem; }
.acceso p { margin: 0; font-size: .85rem; color: var(--neutro-500); flex: 1 1 auto; }
.acceso--proximo { opacity: .62; }
.acceso--proximo .acceso__icono { background: var(--neutro-100); color: var(--neutro-500); }

/* Métricas */
.metrica { display: flex; flex-direction: column; gap: 2px; }
.metrica__valor { font-size: 1.4rem; font-weight: 680; color: var(--neutro-900); letter-spacing: -.02em; }
.metrica__rotulo { font-size: .78rem; color: var(--neutro-500); }
.metrica__nota { font-size: .74rem; color: var(--neutro-400); }

/* ---------------------------------------------------------------- Barras de los paneles
   Gráficos hechos con dos divs y un ancho en porcentaje. No hay librería de gráficos porque
   el sitio no carga recursos externos, y traer uno entero para dibujar una docena de barras
   pesaría más que todo el CSS del proyecto. */
.barra {
    display: flex;
    align-items: center;
    gap: 8px;
}

.barra + .barra { margin-top: 3px; }

.barra__riel {
    flex: 1 1 auto;
    height: .55rem;
    min-width: 40px;
    border-radius: 3px;
    background: var(--neutro-100);
    overflow: hidden;
}

/* El `display: block` no es decorativo: sin él la barra no se ve.
   El relleno es un <span>, y un <span> es inline por defecto. En un elemento inline el
   navegador ignora `height` y `width`, así que el ancho en porcentaje que calcula la vista no
   se aplicaba y el riel salía siempre vacío. El riel sí se pintaba porque es hijo de un
   contenedor flex y los elementos flex se convierten en bloque solos; el relleno no, porque su
   padre no es flex. */
.barra__relleno {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--marca-500);
}

/* Un cero tiene que verse como cero, pero una barra de ancho 0 desaparece del todo y no se
   distingue de "no hay dato". Se le deja un hilo mínimo. */
.barra__relleno[style*="width:0%"] { min-width: 2px; background: var(--neutro-300); }

.barra__relleno--secundario { background: var(--acento-500); }

/* Ancho fijo para que las cifras queden alineadas entre filas y no bailen con el número. */
.barra__cifra { flex: 0 0 3rem; text-align: right; font-size: .78rem; color: var(--neutro-600); }
.barra__etiqueta { flex: 0 0 4.5rem; font-size: .8rem; color: var(--neutro-600); }

.leyenda { display: flex; gap: 14px; font-size: .78rem; color: var(--neutro-500); margin-top: 10px; }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda i { width: .7rem; height: .7rem; border-radius: 2px; background: var(--marca-500); }
.leyenda i.leyenda--secundario { background: var(--acento-500); }

/* ============================================================================
   Pestañas (página del emisor)
   ============================================================================ */

.pestanas {
    display: flex;
    gap: 4px;
    margin-bottom: 22px;
    padding: 5px;
    background: #fff;
    border: 1px solid var(--neutro-200);
    border-radius: var(--radio-md);
    box-shadow: var(--sombra-sm);
    overflow-x: auto;
}

.pestanas__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: var(--radio-sm);
    font-size: .88rem;
    font-weight: 550;
    color: var(--neutro-600);
    white-space: nowrap;
    transition: background var(--transicion), color var(--transicion);
}

.pestanas__item svg { width: 17px; height: 17px; }
.pestanas__item:hover { background: var(--neutro-100); color: var(--neutro-900); text-decoration: none; }

.pestanas__item--activa,
.pestanas__item--activa:hover {
    background: var(--marca-600);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 107, 249, .26);
}

/* ============================================================================
   Formularios (sobrescribe Bootstrap 5.1)
   ============================================================================ */

.form-label { font-size: .84rem; font-weight: 600; color: var(--neutro-700); margin-bottom: 5px; }

.form-control, .form-select {
    padding: 9px 12px;
    font-size: .9rem;
    color: var(--neutro-900);
    background-color: #fff;
    border: 1px solid var(--neutro-300);
    border-radius: var(--radio-sm);
    box-shadow: var(--sombra-sm);
    transition: border-color var(--transicion), box-shadow var(--transicion);
}

.form-control::placeholder { color: var(--neutro-400); }

.form-control:focus, .form-select:focus {
    border-color: var(--marca-500);
    box-shadow: var(--sombra-foco);
    outline: 0;
}

.form-control[readonly] { background-color: var(--neutro-100); color: var(--neutro-600); box-shadow: none; }

.form-text { font-size: .78rem; color: var(--neutro-500); margin-top: 5px; }

.form-check-input {
    width: 1.05em;
    height: 1.05em;
    margin-top: .22em;
    border: 1px solid var(--neutro-400);
    box-shadow: none;
}

.form-check-input:checked { background-color: var(--marca-600); border-color: var(--marca-600); }
.form-check-input:focus { border-color: var(--marca-500); box-shadow: var(--sombra-foco); }
.form-check-label { font-size: .89rem; color: var(--neutro-700); }

/* Interruptor para los booleanos: más legible que una casilla suelta */
.interruptor {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 15px;
    border: 1px solid var(--neutro-200);
    border-radius: var(--radio-md);
    background: var(--neutro-50);
}

.interruptor .form-check-input { margin: .15em 0 0; }
.interruptor strong { display: block; font-size: .88rem; font-weight: 600; color: var(--neutro-800); }
.interruptor small { display: block; font-size: .78rem; color: var(--neutro-500); }

/* Selector de archivo: el input nativo se oculta y quien lo abre es su etiqueta, que se
   pinta como un botón más. El input sigue en el DOM —no con display:none— para que reciba
   el foco del teclado y la validación lo pueda enfocar. */
.campo-archivo {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.campo-archivo__entrada {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.campo-archivo label { margin: 0; cursor: pointer; }
.campo-archivo__entrada:focus-visible + label { box-shadow: var(--sombra-foco); border-color: var(--marca-500); }

.campo-archivo__nombre {
    font-size: .84rem;
    color: var(--neutro-600);
    word-break: break-all;
}

.campo-archivo__nombre[data-elegido] { color: var(--neutro-800); font-weight: 550; }

.text-danger { color: var(--peligro-600) !important; font-size: .82rem; }
.form-control.input-validation-error, .form-select.input-validation-error { border-color: var(--peligro-500); }

/* Resumen de validación */
.validation-summary-errors {
    padding: 13px 16px;
    border: 1px solid var(--peligro-borde);
    border-left: 3px solid var(--peligro-500);
    border-radius: var(--radio-sm);
    background: var(--peligro-suave);
    color: var(--peligro-texto);
    font-size: .86rem;
}

.validation-summary-errors ul { margin: 0; padding-left: 18px; }
.validation-summary-valid { display: none; }

/* ============================================================================
   Botones
   ============================================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 17px;
    font-size: .88rem;
    font-weight: 550;
    border-radius: var(--radio-sm);
    border: 1px solid transparent;
    transition: background var(--transicion), border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}

/* Un botón nunca se subraya, ni siquiera cuando es un <a>. La regla general `a:hover` tiene
   la misma especificidad que `.btn:hover`, así que hace falta declararlo aquí —más abajo en
   la hoja— para que gane. */
.btn, .btn:hover, .btn:focus, .btn:active { text-decoration: none; }

.btn svg { width: 16px; height: 16px; }
.btn:focus, .btn:active:focus { box-shadow: var(--sombra-foco); }
.btn:active { transform: translateY(1px); }

.btn-primary {
    color: #fff;
    /* Plano, no degradado: en la referencia el botón es un azul liso. Un degradado sobre un
       color tan saturado solo ensucia el borde inferior. */
    background: var(--marca-500);
    border-color: var(--marca-500);
    box-shadow: 0 1px 2px rgba(0, 107, 249, .24);
}

.btn-primary:hover, .btn-primary:focus {
    color: #fff;
    background: var(--marca-600);
    border-color: var(--marca-600);
}

.btn-outline-secondary {
    color: var(--neutro-700);
    background: #fff;
    border-color: var(--neutro-300);
    box-shadow: var(--sombra-sm);
}

.btn-outline-secondary:hover, .btn-outline-secondary:focus {
    color: var(--neutro-900);
    background: var(--neutro-100);
    border-color: var(--neutro-400);
}

.btn-outline-primary {
    color: var(--marca-600);
    background: #fff;
    border-color: var(--marca-borde);
    box-shadow: var(--sombra-sm);
}

.btn-outline-primary:hover, .btn-outline-primary:focus {
    color: var(--marca-700);
    background: var(--marca-suave);
    border-color: var(--marca-400);
}

.btn-outline-danger {
    color: var(--peligro-600);
    background: #fff;
    border-color: var(--peligro-borde);
    box-shadow: var(--sombra-sm);
}

.btn-outline-danger:hover, .btn-outline-danger:focus {
    color: var(--peligro-600);
    background: var(--peligro-suave);
    border-color: var(--peligro-500);
}

.btn-link { color: var(--neutro-600); box-shadow: none; text-decoration: none; }
.btn-link:hover { color: var(--neutro-900); background: var(--neutro-100); text-decoration: none; }

.btn-sm { padding: 6px 12px; font-size: .8rem; border-radius: 7px; }
.btn-sm svg { width: 14px; height: 14px; }
.btn-lg { padding: 12px 22px; font-size: .95rem; }

/* Verde. No existía porque hasta ahora ninguna acción era "confirmar y ya está"; la usa el
   guardado de credenciales, donde conviene distinguirla del rojo que tiene al lado. */
.btn-outline-exito {
    color: var(--exito-texto);
    background: #fff;
    border-color: var(--exito-borde);
    box-shadow: var(--sombra-sm);
}

.btn-outline-exito:hover, .btn-outline-exito:focus {
    color: var(--exito-texto);
    background: var(--exito-suave);
    border-color: var(--exito-500);
}

/* ----------------------------------------------------------------------------
   Botón redondo de solo icono, para las acciones repetidas de una tabla.

   En una fila que se repite veinte veces, las etiquetas ocupan más que el dato y
   la columna acaba más ancha que la información. El icono va acompañado
   SIEMPRE de un title y un aria-label: sin texto visible, esa es la única forma
   de que se entienda al pasar por encima y de que un lector de pantalla lo
   anuncie.

   El tamaño fijo es lo que lo mantiene redondo: sin él, el padding lo deforma en
   cuanto el navegador ajusta la línea base del svg.
   ---------------------------------------------------------------------------- */
.btn-redondo {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.btn-redondo svg { width: 16px; height: 16px; }

/* Gana a .btn-sm, que fija su propio radio y relleno. */
.btn-sm.btn-redondo { width: 32px; height: 32px; padding: 0; border-radius: 50%; }
.btn-sm.btn-redondo svg { width: 15px; height: 15px; }

/* Las acciones de una fila, juntas y sin que salten de línea por un píxel. */
.acciones-fila {
    display: inline-flex;
    gap: .375rem;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* ============================================================================
   Tablas
   ============================================================================ */

.tabla-envoltorio {
    background: #fff;
    border: 1px solid var(--neutro-200);
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-sm);
    overflow: hidden;
}

.table {
    margin: 0;
    color: var(--neutro-700);
    font-size: .885rem;
    border-color: var(--neutro-200);
}

.table > thead { background: var(--neutro-50); border-bottom: 1px solid var(--neutro-200); }

.table > thead th {
    padding: 12px 18px;
    font-size: .73rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--neutro-500);
    border-bottom: 0;
    white-space: nowrap;
}

.table > tbody > tr { border-color: var(--neutro-100); }
.table > tbody > tr:last-child { border-bottom-color: transparent; }
.table > tbody > tr:hover { background: var(--neutro-50); }
.table > tbody td { padding: 13px 18px; vertical-align: middle; }
.table-striped > tbody > tr:nth-of-type(odd) > * { background: transparent; }

.tabla-pie {
    padding: 11px 18px;
    border-top: 1px solid var(--neutro-200);
    background: var(--neutro-50);
    font-size: .8rem;
    color: var(--neutro-500);
}

.fila-inactiva { color: var(--neutro-400); }
.fila-inactiva code { opacity: .65; }

/* ============================================================================
   Avisos
   ============================================================================ */

.aviso {
    display: flex;
    gap: 13px;
    padding: 14px 17px;
    border-radius: var(--radio-md);
    border: 1px solid transparent;
    font-size: .88rem;
    margin-bottom: 18px;
}

.aviso svg { flex: 0 0 auto; width: 19px; height: 19px; margin-top: 1px; }
.aviso strong { font-weight: 650; }
.aviso p { margin: 0; }
.aviso__contenido { flex: 1 1 auto; min-width: 0; }

.aviso--info { background: var(--info-suave); border-color: var(--info-borde); color: var(--info-texto); }
.aviso--info svg { color: var(--info-500); }
.aviso--alerta { background: var(--alerta-suave); border-color: var(--alerta-borde); color: var(--alerta-texto); }
.aviso--alerta svg { color: var(--alerta-500); }
.aviso--exito { background: var(--exito-suave); border-color: var(--exito-borde); color: var(--exito-texto); }
.aviso--exito svg { color: var(--exito-500); }
.aviso--peligro { background: var(--peligro-suave); border-color: var(--peligro-borde); color: var(--peligro-texto); }
.aviso--peligro svg { color: var(--peligro-500); }
.aviso--neutro { background: var(--neutro-50); border-color: var(--neutro-200); color: var(--neutro-600); }
.aviso--neutro svg { color: var(--neutro-500); }
.aviso a { color: inherit; font-weight: 600; text-decoration: underline; }

.aviso__cerrar {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    opacity: .5;
    cursor: pointer;
}

.aviso__cerrar:hover { opacity: 1; background: rgba(15, 17, 21, .06); }

/* ============================================================================
   Tostadas — los mismos avisos, flotando
   ============================================================================ */

/*
   La pila va fija en la esquina y fuera del flujo del documento: un aviso ya no empuja
   la página hacia abajo al aparecer ni deja un hueco al irse. Reutiliza .aviso entero,
   así que los colores, el icono y el botón de cerrar son los de siempre.
*/
.tostadas {
    position: fixed;

    /* Por debajo de la cabecera: arriba del todo taparía el usuario y el botón de salir. */
    top: calc(var(--superior-alto) + 14px);
    right: 18px;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(400px, calc(100vw - 32px));

    /* Sin esto, el hueco vacío de la pila se comería los clics de toda la esquina. */
    pointer-events: none;
}

.tostadas .aviso {
    margin-bottom: 0;
    pointer-events: auto;
    box-shadow: var(--sombra-lg);
    animation: tostada-entra 180ms cubic-bezier(.4, 0, .2, 1);
}

.tostadas .aviso--sale {
    opacity: 0;
    transform: translateX(14px);
    transition: opacity 160ms ease, transform 160ms ease;
}

@keyframes tostada-entra {
    from { opacity: 0; transform: translateX(18px); }
    to { opacity: 1; transform: none; }
}

/* En móvil ocupan el ancho: a 400px se saldrían de la pantalla. */
@media (max-width: 575.98px) {
    .tostadas { right: 12px; left: 12px; width: auto; }
}

/* ============================================================================
   Barra de progreso
   ============================================================================ */

/*
   Indeterminada a propósito, no por pereza. El bot resuelve la petición entera antes de
   responder, así que el navegador no tiene forma de saber por qué punto va: cualquier
   porcentaje que se pintara sería inventado. La barra afirma «esto sigue vivo» y el reloj
   afirma cuánto lleva, que es todo lo que aquí se puede afirmar de verdad.
*/
.progreso-tarea { margin-top: 12px; max-width: 460px; }

.progreso {
    height: 6px;
    border-radius: var(--radio-pill);
    background: var(--neutro-200);
    overflow: hidden;
}

.progreso__barra {
    display: block;
    width: 38%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--marca-500), var(--acento-500));
    animation: progreso-vaiven 1.4s cubic-bezier(.65, 0, .35, 1) infinite;
}

@keyframes progreso-vaiven {
    from { transform: translateX(-105%); }
    to { transform: translateX(275%); }
}

.progreso__leyenda {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 7px 0 0;
    font-size: .8125rem;
    color: var(--neutro-500);
}

.progreso__reloj {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--neutro-600);

    /* Cifras del mismo ancho: si no, el texto de al lado bailotea cada segundo. */
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .progreso__barra { width: 100%; opacity: .55; animation: none; }
    .tostadas .aviso { animation: none; }
}

/* ============================================================================
   Clasificación en la fila
   ============================================================================ */

/*
   Un <select> nativo disfrazado: de pastilla cuando ya tiene categoría, de botón de invitación
   cuando no. Se disfraza en vez de sustituirse porque así conserva el teclado, la búsqueda al
   escribir y el selector propio del móvil, que un desplegable a medida habría que reinventar.
*/
.clasificacion__select {
    max-width: 190px;
    padding: 4px 26px 4px 10px;
    border: 1px solid var(--neutro-200);
    border-radius: var(--radio-pill);
    background-color: var(--neutro-100);
    color: var(--neutro-700);
    font-size: .78rem;
    font-weight: 550;
    line-height: 1.35;
    cursor: pointer;

    /* Sin la flecha del sistema no parecería un desplegable; con la del navegador ocuparía
       demasiado para una celda de tabla. */
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
}

.clasificacion__select:hover { border-color: var(--neutro-300); }

.clasificacion__select:focus-visible {
    outline: none;
    border-color: var(--marca-500);
    box-shadow: var(--sombra-foco);
}

/* Sin clasificar: invita a hacerlo, con el color de marca del boceto. */
.clasificacion__select--vacia {
    border-color: transparent;
    background-color: var(--marca-600);
    color: #fff;
    background-image: none;
    padding-right: 12px;
}

.clasificacion__select--vacia:hover { background-color: var(--marca-700); }

/* Mientras se guarda: ni se puede tocar ni parece que se pueda. */
.clasificacion__select:disabled { opacity: .6; cursor: progress; }

/* ============================================================================
   Acciones de cabecera en una sola línea
   ============================================================================ */

/*
   Para cabeceras que son solo controles —Ventas—, no un título con un botón al lado. Se centra
   verticalmente en lugar de alinear arriba, que es lo que hace .pagina-cabecera por defecto y
   dejaba el input de fecha descolgado respecto a los botones.
*/
.acciones-linea { align-items: center; }

/*
   El grupo que no se puede partir. Va aquí y no con .filtros a propósito: aquella tiene
   flex-wrap y margen inferior porque está pensada para la barra de búsqueda, que sí debe
   repartirse en varias líneas cuando no cabe. Aquí lo que hace falta es lo contrario.
*/
.acciones-linea__grupo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    flex-wrap: nowrap;
}

/* En pantallas estrechas sí se reparte: mantenerlo en una línea obligaría a desplazar en
   horizontal, que es peor que dos filas. */
@media (max-width: 767.98px) {
    .acciones-linea__grupo { flex-wrap: wrap; }
}

/* ============================================================================
   Cajón de clasificación (panel derecho)
   ============================================================================ */

/*
   Mismo patrón que el cajón del menú en móvil: fijo, por encima del contenido y con el velo
   detrás. Se reutiliza el velo que ya existe en lugar de inventar otro.
*/
.cajon-clasificacion {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1070;
    width: min(380px, 100vw);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-left: 1px solid var(--neutro-200);
    box-shadow: var(--sombra-lg);
    animation: cajon-entra 180ms cubic-bezier(.4, 0, .2, 1);
}

@keyframes cajon-entra {
    from { transform: translateX(100%); }
    to { transform: none; }
}

.cajon-clasificacion__cabecera {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--neutro-200);
}

.cajon-clasificacion__cabecera h2 {
    flex: 1 1 auto;
    margin: 0;
    font-size: .82rem;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--neutro-600);
}

.cajon-clasificacion__cerrar {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--neutro-500);
    cursor: pointer;
}

.cajon-clasificacion__cerrar:hover { background: var(--neutro-100); color: var(--neutro-800); }

/* El cuerpo es lo único que se desplaza: la cabecera se queda fija arriba. */
.cajon-clasificacion__cuerpo { flex: 1 1 auto; overflow-y: auto; padding: 12px; }

.panel-clasificacion__seccion { margin-bottom: 8px; }

.panel-clasificacion__cabecera {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--neutro-200);
    border-radius: var(--radio-md);
    background: var(--neutro-50);
    font-size: .84rem;
    font-weight: 600;
    color: var(--neutro-800);
    text-align: left;
    cursor: pointer;
}

.panel-clasificacion__cabecera:hover:not(:disabled) { background: var(--neutro-100); }

/* Una categoría vacía se enseña —ver que lo está es información— pero no se despliega. */
.panel-clasificacion__cabecera:disabled { opacity: .55; cursor: default; }

.panel-clasificacion__cabecera svg { flex: 0 0 auto; width: 16px; height: 16px; }
.panel-clasificacion__titulo { flex: 1 1 auto; min-width: 0; }

.panel-clasificacion__cabecera--aviso {
    background: var(--alerta-suave);
    border-color: var(--alerta-borde);
    color: var(--alerta-texto);
}

.panel-clasificacion__cabecera--aviso:hover:not(:disabled) { background: var(--alerta-pastilla); }

.panel-clasificacion__cuenta {
    flex: 0 0 auto;
    padding: 1px 8px;
    border-radius: var(--radio-pill);
    background: rgba(15, 17, 21, .08);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
}

.panel-clasificacion__chevron { transition: transform var(--transicion); }
.panel-clasificacion__cabecera[aria-expanded="true"] .panel-clasificacion__chevron { transform: rotate(90deg); }

.panel-clasificacion__grupo {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 18px 0 8px;
    font-size: .74rem;
    font-weight: 650;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--neutro-500);
}

.panel-clasificacion__grupo svg { width: 15px; height: 15px; }

.panel-clasificacion__vacio {
    padding: 12px 13px;
    font-size: .8rem;
    color: var(--neutro-500);
}

.panel-fila {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-bottom: 1px solid var(--neutro-100);
}

.panel-fila:last-child { border-bottom: 0; }
.panel-fila__datos { flex: 1 1 auto; min-width: 0; }
.panel-fila__datos code { font-size: .74rem; }

/* Sin esto, una razón social larga ensancharía el cajón y empujaría el selector fuera. */
.panel-fila__contraparte {
    font-size: .78rem;
    color: var(--neutro-700);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.panel-fila__meta { font-size: .72rem; color: var(--neutro-400); }
.panel-fila .clasificacion__select { max-width: 130px; }

@media (max-width: 575.98px) {
    .cajon-clasificacion { width: 100vw; }
}

@media (prefers-reduced-motion: reduce) {
    .cajon-clasificacion { animation: none; }
    .panel-clasificacion__chevron { transition: none; }
}

/* ============================================================================
   Barra de filtros
   ============================================================================ */

.filtros { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }

.filtros__buscar { position: relative; flex: 1 1 280px; max-width: 380px; }
.filtros__buscar .form-control { padding-left: 37px; }

.filtros__buscar svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--neutro-400);
    pointer-events: none;
}

/* ============================================================================
   Pantallas de autenticación
   ============================================================================ */

.auth {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px 20px;
    background:
        radial-gradient(1100px 520px at 12% -8%, rgba(0, 107, 249, .14), transparent 60%),
        radial-gradient(900px 460px at 92% 108%, rgba(0, 145, 234, .12), transparent 62%),
        var(--neutro-50);
}

.auth__caja { width: 100%; max-width: 412px; }

.auth__marca { display: flex; align-items: center; justify-content: center; gap: 11px; margin-bottom: 26px; }

.auth__logo {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--marca-500), var(--acento-500));
    color: #fff;
    font-weight: 700;
    font-size: .88rem;
    box-shadow: 0 8px 22px rgba(0, 107, 249, .30);
}

.auth__nombre { font-size: 1.02rem; font-weight: 650; color: var(--neutro-900); letter-spacing: -.01em; }
.auth__nombre span { color: var(--marca-600); }

.auth__tarjeta {
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid var(--neutro-200);
    border-radius: 20px;
    box-shadow: var(--sombra-lg);
    padding: 32px;
}

.auth__titulo { font-size: 1.32rem; margin: 0 0 5px; letter-spacing: -.02em; }
.auth__ayuda { color: var(--neutro-500); font-size: .88rem; margin: 0 0 24px; }
.auth__campo { margin-bottom: 17px; }
.auth__tarjeta .form-control { padding: 11px 13px; }
.auth__tarjeta .btn-primary { width: 100%; padding: 11px; font-size: .92rem; }
.auth__pie { text-align: center; margin-top: 22px; font-size: .78rem; color: var(--neutro-400); }

/* El alta del emisor pide bastantes más datos que un login y necesita dos columnas. */
.auth__caja--ancha { max-width: 720px; }

/* Acceso de prueba: separado del formulario para que no se confunda con "Entrar". */
.auth__demo { margin-top: 18px; }

.auth__separador {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 14px;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--neutro-400);
}

.auth__separador::before,
.auth__separador::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--neutro-200);
}

.auth__demo-nota { margin: 9px 0 0; font-size: .78rem; color: var(--neutro-500); text-align: center; }

/* Enlace al camino alternativo: crear cuenta desde el login y viceversa. */
.auth__alterno {
    margin: 18px 0 0;
    padding-top: 17px;
    border-top: 1px solid var(--neutro-200);
    text-align: center;
    font-size: .85rem;
    color: var(--neutro-500);
}

.auth__alterno a { font-weight: 600; }

/* Lista de emisores en la selección */
.opciones { display: flex; flex-direction: column; gap: 9px; margin-bottom: 20px; }

.opcion {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px;
    border: 1px solid var(--neutro-200);
    border-radius: var(--radio-md);
    background: #fff;
    cursor: pointer;
    transition: border-color var(--transicion), box-shadow var(--transicion), background var(--transicion);
}

.opcion:hover { border-color: var(--marca-400); background: var(--marca-suave); }
.opcion .form-check-input { flex: 0 0 auto; margin: 0; }
.opcion__datos { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.opcion__nombre { font-size: .9rem; font-weight: 600; color: var(--neutro-900); }
.opcion__meta { font-size: .78rem; color: var(--neutro-500); }

/* ============================================================================
   Responsivo: la lateral pasa a cajón deslizable
   ============================================================================ */

.velo {
    position: fixed;
    inset: 0;
    z-index: 1030;
    background: rgba(15, 17, 21, .5);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transicion), visibility var(--transicion);
}

@media (max-width: 991.98px) {
    .lateral { transform: translateX(-100%); width: var(--lateral-ancho); box-shadow: var(--sombra-lg); }
    html.lateral-colapsada .lateral { width: var(--lateral-ancho); }
    html.cajon-abierto .lateral { transform: none; }
    html.cajon-abierto .velo { opacity: 1; visibility: visible; }

    .aplicacion__contenido,
    html.lateral-colapsada .aplicacion__contenido { margin-left: 0; }

    .superior { padding: 0 18px; }
    .superior__cajon { display: grid; }
    .lateral__toggle { display: none; }
    .aplicacion__cuerpo { padding: 20px 18px 40px; }

    /* Dentro del cajón siempre se muestra el estado expandido. */
    html.lateral-colapsada .lateral__titulo,
    html.lateral-colapsada .menu__texto,
    html.lateral-colapsada .menu__pronto,
    html.lateral-colapsada .emisor-tarjeta__ir { display: initial; }

    html.lateral-colapsada .emisor-tarjeta__datos { display: flex; }
    html.lateral-colapsada .menu__item { justify-content: flex-start; padding: 10px 12px; gap: 12px; }
    html.lateral-colapsada .emisor-tarjeta { justify-content: flex-start; padding: 10px; gap: 11px; }
    html.lateral-colapsada .lateral__marca { flex-direction: row; height: var(--superior-alto); padding: 0 14px 0 18px; }

    html.lateral-colapsada .menu__grupo {
        margin: 18px 0 8px;
        padding: 0 12px;
        height: auto;
        color: var(--neutro-500);
        background: transparent;
    }

    html.lateral-colapsada .lateral [data-titulo]::after,
    html.lateral-colapsada .menu__item--proximo::after { display: none; }
}

@media (max-width: 575.98px) {
    .pagina-cabecera h1 { font-size: 1.25rem; }
    .superior__usuario { padding: 5px; }
    .superior__usuario small { display: none; }
    .auth__tarjeta { padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* ============================================================================
   Editor de facturas
   ============================================================================ */

/* --- Selector de tipo de comprobante --- */
.opciones-tipo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
}

.opcion-tipo { position: relative; display: block; margin: 0; cursor: pointer; }

.opcion-tipo input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.opcion-tipo__cuerpo {
    display: flex;
    flex-direction: column;
    gap: 3px;
    height: 100%;
    padding: 12px 14px;
    border: 1px solid var(--neutro-200);
    border-radius: var(--radio-md);
    background: #fff;
    transition: border-color var(--transicion), background-color var(--transicion), box-shadow var(--transicion);
}

.opcion-tipo__cuerpo strong { font-size: .9375rem; color: var(--neutro-900); }
.opcion-tipo__cuerpo small { font-size: .8125rem; color: var(--neutro-500); line-height: 1.45; }

.opcion-tipo__cuerpo em {
    margin-top: auto;
    padding-top: 6px;
    font-size: .75rem;
    font-style: normal;
    letter-spacing: .02em;
    color: var(--neutro-400);
}

.opcion-tipo:hover .opcion-tipo__cuerpo { border-color: var(--marca-400); }

.opcion-tipo input:checked + .opcion-tipo__cuerpo {
    border-color: var(--marca-500);
    background: var(--marca-suave);
    box-shadow: var(--sombra-foco);
}

.opcion-tipo input:focus-visible + .opcion-tipo__cuerpo { box-shadow: var(--sombra-foco); }

/* --- Tablas editables --- */
.tabla-editor { margin-bottom: 12px; }
.tabla-editor th { white-space: nowrap; }
.tabla-editor td { vertical-align: middle; padding: 6px 8px; }
.tabla-editor .form-control, .tabla-editor .form-select { padding: 6px 10px; font-size: .875rem; }

.celda-calculada {
    font-variant-numeric: tabular-nums;
    font-weight: 550;
    color: var(--neutro-700);
    white-space: nowrap;
}

.celda-nota { font-size: .75rem; color: var(--neutro-500); }

.btn-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radio-sm);
    background: transparent;
    color: var(--neutro-400);
    cursor: pointer;
    transition: color var(--transicion), background-color var(--transicion);
}

.btn-icono:hover { background: var(--peligro-suave); color: var(--peligro-600); }
.btn-icono:focus-visible { outline: none; box-shadow: var(--sombra-foco); }

/* --- Buscadores con lista desplegable --- */
.buscador { position: relative; }

.buscador__lista {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 260px;
    margin: 0;
    padding: 4px;
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--neutro-200);
    border-radius: var(--radio-md);
    background: #fff;
    box-shadow: var(--sombra-lg);
}

.buscador__lista li {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 8px 10px;
    border-radius: var(--radio-sm);
    font-size: .875rem;
    color: var(--neutro-800);
    cursor: pointer;
}

.buscador__lista li:hover { background: var(--marca-suave); color: var(--marca-700); }
.buscador__lista li small { font-size: .75rem; color: var(--neutro-500); }

/* --- Sub-tarjeta: un registro repetible con demasiados campos para una fila --- */
.sub-tarjeta {
    margin-bottom: 14px;
    padding: 16px;
    border: 1px solid var(--neutro-200);
    border-radius: var(--radio-md);
    background: var(--neutro-50);
}

.sub-tarjeta__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--neutro-500);
}

.subtitulo-bloque {
    margin: 24px 0 12px;
    font-size: .9375rem;
    color: var(--neutro-700);
}

/* --- Resumen lateral --- */
.resumen { position: sticky; top: calc(var(--superior-alto) + 20px); }

.totales, .datos { margin: 0; }

.totales > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px dashed var(--neutro-200);
}

.totales > div:last-child { border-bottom: none; }
.totales dt { font-weight: 400; font-size: .875rem; color: var(--neutro-600); }
.totales dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 550; color: var(--neutro-800); }

.totales__final { margin-top: 4px; padding-top: 12px !important; border-top: 1px solid var(--neutro-300); }
.totales__final dt { font-weight: 600; color: var(--neutro-900); }
.totales__final dd { font-size: 1.25rem; font-weight: 650; color: var(--marca-700); }

.datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px 20px;
}

.datos__ancho { grid-column: 1 / -1; }
.datos dt { font-size: .75rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--neutro-500); }
.datos dd { margin: 2px 0 0; color: var(--neutro-800); word-break: break-word; }

.aviso-inline {
    font-size: .8125rem;
    font-weight: 550;
    color: var(--alerta-500);
}

/* --- Vista del XML --- */
.codigo-xml {
    max-height: 70vh;
    margin: 0;
    padding: 16px;
    overflow: auto;
    border: 1px solid var(--neutro-200);
    border-radius: var(--radio-md);
    background: var(--neutro-50);
    font-size: .8125rem;
    line-height: 1.6;
    tab-size: 2;
}

/* El <code> de la hoja es el de una etiqueta suelta dentro de un párrafo: fondo claro y
   relleno propio. Dentro del visor eso pintaba un rectángulo claro sobre el claro del panel
   y dejaba el texto ilegible, así que aquí se le quita el fondo y se escribe en negro. */
.codigo-xml code {
    display: block;
    color: var(--neutro-900);
    background: transparent;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
}

/* ============================================================================
   Reportes
   ============================================================================ */

.rejilla-metricas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    padding: 4px 0;
}

.rejilla-metricas .metrica {
    padding: 12px 14px;
    border: 1px solid var(--neutro-200);
    border-radius: var(--radio-md);
    background: var(--neutro-50);
}

/* ----------------------------------------------------------------------------
   Tarjetas de métrica con color.

   Cuatro cifras en gris obligan a leer el rótulo de cada una para saber cuál se
   está mirando. El color las hace distinguibles de un vistazo y, sobre todo,
   estables: la de emitidos es siempre la índigo, esté donde esté en la fila.

   El color va en un degradado suave más una franja lateral, no en el fondo
   entero: un bloque saturado detrás de una cifra grande baja el contraste del
   texto justo donde más falta hace.
   ---------------------------------------------------------------------------- */
.metrica--color {
    position: relative;
    overflow: hidden;
    border-width: 1px;
    border-style: solid;
}

.metrica--color::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--metrica-tono);
}

.metrica--color .metrica__valor { color: var(--metrica-texto); }
.metrica--color .metrica__rotulo { color: var(--neutro-700); }

.rejilla-metricas .metrica--color { padding-left: 18px; }

.metrica--marca {
    --metrica-tono: var(--marca-500);
    --metrica-texto: var(--marca-700);
    background: linear-gradient(135deg, var(--marca-suave), #fff 70%);
    border-color: var(--marca-borde);
}

.metrica--info {
    --metrica-tono: var(--info-500);
    --metrica-texto: var(--info-texto);
    background: linear-gradient(135deg, var(--info-suave), #fff 70%);
    border-color: var(--info-borde);
}

.metrica--exito {
    --metrica-tono: var(--exito-500);
    --metrica-texto: var(--exito-texto);
    background: linear-gradient(135deg, var(--exito-suave), #fff 70%);
    border-color: var(--exito-borde);
}

.metrica--acento {
    --metrica-tono: var(--acento-500);
    --metrica-texto: var(--info-texto);
    background: linear-gradient(135deg, var(--info-suave), #fff 70%);
    border-color: var(--info-borde);
}

.metrica--alerta {
    --metrica-tono: var(--alerta-500);
    --metrica-texto: var(--alerta-texto);
    background: linear-gradient(135deg, var(--alerta-suave), #fff 70%);
    border-color: var(--alerta-borde);
}

.metrica--peligro {
    --metrica-tono: var(--peligro-500);
    --metrica-texto: var(--peligro-600);
    background: linear-gradient(135deg, var(--peligro-suave), #fff 70%);
    border-color: var(--peligro-borde);
}

fieldset legend.form-label { font-size: .875rem; float: none; width: auto; }

/* ---------------------------------------------------------------- Campo de contraseña
   El botón se superpone al input en lugar de ir al lado: así el campo conserva el ancho
   del formulario y la fila no se descuadra respecto a los demás. */
.clave-campo {
    position: relative;
    display: block;
}

.clave-campo > input {
    /* Sitio para el botón, para que el texto no pase por debajo. */
    padding-right: 2.6rem;
}

.clave-campo__ojo {
    position: absolute;
    top: 50%;
    right: .55rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: 0;
    border-radius: .4rem;
    background: transparent;
    color: var(--neutro-400);
    cursor: pointer;
}

.clave-campo__ojo:hover { color: var(--neutro-900); background: var(--neutro-100); }
.clave-campo__ojo:focus-visible { outline: 2px solid var(--marca-500); outline-offset: 1px; }
.clave-campo__ojo svg { width: 17px; height: 17px; }


/* ---------------------------------------------------------------- Filas de detalle
   El detalle de una fila se abre debajo de ella, en una fila propia que llega por fetch.
   El fondo gris y el borde izquierdo son lo que la separa de las filas hermanas: sin ellos,
   una tabla dentro de otra tabla se lee como si fueran el mismo listado. */
.fila-detalle > td {
    background: var(--neutro-50);
    padding: 0 0 0 18px !important;
    border-left: 3px solid var(--marca-500);
}

.fila-detalle:hover > td { background: var(--neutro-50); }

.fila-detalle .table { background: transparent; font-size: .82rem; }
.fila-detalle .table > thead { background: transparent; }
.fila-detalle .table > thead th { padding: 9px 14px; }
.fila-detalle .table > tbody td { padding: 8px 14px; }
.fila-detalle .table > tbody > tr:hover { background: var(--neutro-100); }

/* El «Cargando…» y el mensaje de fallo no van en tabla, y sin esto quedarian pegados al borde. */
.fila-detalle > td > span { display: inline-block; padding: 14px; }

/* ---------------------------------------------------------------- Paginador
   Propio y no el de Bootstrap: el suyo trae su azul y sus bordes cuadrados, que al lado de las
   pastillas y las tarjetas de aqui se ven de otro sitio. */
.paginador {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.paginador a,
.paginador span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border-radius: var(--radio-sm);
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    color: var(--neutro-600);
}

.paginador a:hover { background: var(--neutro-100); color: var(--neutro-900); }
.paginador a:focus-visible { outline: 2px solid var(--marca-500); outline-offset: 1px; }

.paginador__actual {
    background: var(--marca-500);
    color: #fff !important;
    font-weight: 600;
}

/* Las flechas de los extremos cuando ya no hay a donde ir: se dejan puestas y apagadas en vez de
   quitarlas, para que el paginador no cambie de ancho al moverse por el. */
.paginador span:not(.paginador__actual) { color: var(--neutro-300); }

/* ============================================================================
   Panel de inicio
   ============================================================================
   El panel va sobre BLANCO, no sobre el gris del resto de la aplicacion: sus tarjetas son
   blancas con sombra, y sobre el gris la sombra se confundia con el propio fondo. La clase la
   pide la vista con ViewData["ClaseCuerpo"]; ver _Layout. */
body.cuerpo-blanco { background-color: #fff; }

/* Tarjeta blanca, sombra tenue y una franja de color pegada al borde izquierdo, de esquina a
   esquina. El color identifica sin pintar la tarjeta entera: probado en pastel de fondo completo
   y con cinco tonos a la vez el panel parecia un mosaico, mientras la franja deja que lo que
   destaque sea la cifra.

   Cinco tonos, uno por tarjeta, para que ninguna se confunda con la de al lado, mas el gris de
   lo que no se usa y el rojo, que NO entra en la rotacion y aparece solo cuando hay algo que
   atender. */
.panel-tarjeta {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px 16px 14px 20px;
    border-radius: var(--radio-md);
    background: #fff;
    color: var(--neutro-700);
    text-decoration: none;

    /* Negra y tenue: es el borde de la tarjeta, no un halo de color. */
    box-shadow: 0 1px 3px rgba(0, 0, 0, .10), 0 0 0 1px rgba(0, 0, 0, .04);
    transition: var(--transicion);
}

/* La franja. Va con ::before y no con border-left para que la redondee el overflow de la propia
   tarjeta y no asome por encima de las esquinas. */
.panel-tarjeta::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: var(--radio-md) 0 0 var(--radio-md);
    background: var(--panel-tono, var(--neutro-300));
}

.panel-tarjeta__rotulo {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    font-weight: 560;
    color: var(--neutro-500);
}

.panel-tarjeta__rotulo svg { width: 14px; height: 14px; color: var(--panel-tono); }

.panel-tarjeta__valor {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--neutro-900);
}

.panel-tarjeta__nota { font-size: .74rem; color: var(--neutro-400); }

/* Solo las que son enlace se levantan al pasar por encima: si todas lo hicieran, el gesto
   dejaria de indicar "esto se puede abrir". Sin subrayado tampoco al pasar ni al enfocar: es una
   tarjeta, no un enlace de texto. */
a.panel-tarjeta,
a.panel-tarjeta:hover,
a.panel-tarjeta:focus { text-decoration: none; }

a.panel-tarjeta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .12), 0 0 0 1px rgba(0, 0, 0, .05);
}

/* Cada tono solo fija la variable de la franja. La tarjeta sigue siendo blanca: asi anadir un
   tono nuevo es una linea y no un juego de fondo, borde y texto que haya que equilibrar. */
.panel-tarjeta--marca { --panel-tono: var(--marca-500); }
.panel-tarjeta--info { --panel-tono: var(--info-500); }
.panel-tarjeta--exito { --panel-tono: var(--exito-500); }
.panel-tarjeta--alerta { --panel-tono: var(--alerta-500); }

/* Violeta. No sale de la paleta del sitio porque no habia ninguno: hacian falta cinco tonos bien
   separados y los cuatro existentes dejaban dos azules demasiado parecidos. */
.panel-tarjeta--violeta { --panel-tono: #7c4dd1; }

.panel-tarjeta--peligro { --panel-tono: var(--peligro-500); }

/* Lo que existe y aun no se ha usado. La franja en gris y la cifra apagada; la tarjeta se deja a
   la vista porque dice que el modulo esta ahi. */
.panel-tarjeta--apagada { --panel-tono: var(--neutro-300); }
.panel-tarjeta--apagada .panel-tarjeta__valor { color: var(--neutro-400); }


/* ------------------------------------------------------------------ Accesos rapidos
   Una lista, no tarjetas: son atajos a otras pantallas y no cifras que comparar. Poniendolos
   como tarjetas competian visualmente con los datos, que es lo que el panel viene a ensenar. */
/* La misma sombra que las tarjetas en vez de un borde: sobre el blanco de la pagina un borde gris
   parece una caja dibujada, y asi la caja se levanta igual que el resto del panel. */
.accesos {
    border-radius: var(--radio-md);
    background: #fff;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .10), 0 0 0 1px rgba(0, 0, 0, .04);
}

.accesos__titulo {
    padding: 12px 16px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--neutro-500);
    border-bottom: 1px solid var(--neutro-100);
}

.accesos__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    color: var(--neutro-700);
    text-decoration: none;
    transition: var(--transicion);
}

.accesos__item + .accesos__item { border-top: 1px solid var(--neutro-100); }

/* Sin subrayado tampoco al pasar por encima: la fila entera ya cambia de fondo y se desplaza,
   que senala mejor que una linea debajo del texto. */
.accesos__item:hover,
.accesos__item:focus { text-decoration: none; }

.accesos__item:hover {
    background: var(--marca-suave);
    color: var(--marca-texto);
    padding-left: 20px;
}

.accesos__item svg { width: 16px; height: 16px; flex: 0 0 auto; }
.accesos__item span { flex: 1 1 auto; }

/* La flecha aparece al pasar por encima: marca cual de la lista esta activo sin pintar nada. */
.accesos__item::after {
    content: "\203A";
    opacity: 0;
    font-size: 1.1rem;
    line-height: 1;
    transition: var(--transicion);
}

.accesos__item:hover::after { opacity: .7; }

/* La caja de atajos va abajo a la derecha, estrecha. Se alinea con flex y no con un grid de dos
   columnas porque a su izquierda ya no hay nada: un grid habria necesitado una celda vacia solo
   para empujarla. Bajo 700px ocupa todo el ancho. */
.panel-accesos {
    display: flex;
    justify-content: flex-end;
}

.panel-accesos > .accesos {
    width: 100%;
    max-width: 320px;
}

@media (max-width: 700px) {
    .panel-accesos > .accesos { max-width: none; }
}


/* ============================================================================
   Cierre por metodo de pago

   Las tarjetas son el selector del tercer filtro, asi que tienen que parecer
   pulsables antes de que nadie las pulse: son enlaces y no divs, con foco
   visible y estado activo. Un filtro que solo se descubre al pasar el raton no
   lo encuentra quien navega con teclado.
   ============================================================================ */

.cierre-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
}

.cierre-tarjeta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px 16px;
    border: 1px solid var(--neutro-200);
    border-radius: var(--radio-md);
    background: var(--neutro-50);
    color: inherit;
    text-decoration: none;
    transition: var(--transicion);
}

.cierre-tarjeta:hover {
    border-color: var(--marca-borde);
    background: #fff;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(15, 17, 21, .08);
}

/* El borde de la elegida es de dos pixeles y se compensa con el relleno: sin
   esa resta, seleccionar una tarjeta desplazaba un pixel a todas las de su
   fila. */
.cierre-tarjeta--activa,
.cierre-tarjeta--activa:hover {
    border: 2px solid var(--marca-500);
    padding: 13px 15px;
    background: var(--marca-suave);
}

.cierre-tarjeta__rotulo {
    font-size: .8rem;
    font-weight: 600;
    color: var(--neutro-700);
}

.cierre-tarjeta__valor {
    font-size: 1.3rem;
    font-weight: 680;
    color: var(--neutro-900);
    letter-spacing: -.02em;
}

.cierre-tarjeta__nota { font-size: .76rem; color: var(--neutro-500); }
.cierre-tarjeta__aclaracion { font-size: .72rem; color: var(--neutro-400); }

/* La barra de proporcion repite el porcentaje que ya esta escrito al lado. Es
   deliberado: comparar ocho cifras de una linea cuesta leerlas todas, y las
   barras se comparan de un vistazo. */
.cierre-tarjeta__barra {
    height: 4px;
    margin-top: 6px;
    border-radius: 999px;
    background: var(--neutro-200);
    overflow: hidden;
}

.cierre-tarjeta__barra span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--marca-500);
}

/* La tarjeta de lo que no declara forma de pago, en gris: no es un metodo sino
   el hueco que dejan los documentos de los que no se sabe. */
.cierre-tarjeta--apagada .cierre-tarjeta__valor { color: var(--neutro-600); }
.cierre-tarjeta--apagada .cierre-tarjeta__barra span { background: var(--neutro-400); }

/* Monto negativo: una nota de credito que resta. En rojo por lo mismo que en la
   tabla de reportes, un negativo entre positivos se pasa por alto. */
.cierre-tarjeta--resta .cierre-tarjeta__valor { color: var(--peligro-600); }

/* ============================================================================
   Tabla agrupada de dos niveles

   La fila de primer nivel resume; al desplegarla salen sus filas de detalle.
   La usan Cierre -por contraparte y metodo de pago- y Reportes -por cliente y
   por proveedor-, y por eso los nombres no llevan el prefijo de ningun modulo:
   estaban como .cierre-* y duplicarlos para Reportes habria sido duplicar
   tambien el comportamiento que los acompana en site.js.

   La fila de cabecera es un boton que ocupa toda la celda, no un enlace suelto:
   el area pulsable tiene que ser la fila entera, que es donde la gente hace
   clic.
   ============================================================================ */
.agrupada__boton {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    color: inherit;
    font: inherit;
}

.agrupada__flecha {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    color: var(--neutro-400);
    transition: transform .15s ease;
}

.agrupada__boton[aria-expanded="true"] .agrupada__flecha { transform: rotate(90deg); }

.agrupada__nombre { font-weight: 550; color: var(--neutro-900); }

/* La fila que junta lo que no tiene contraparte identificada: consumidor final
   en ventas, «sin identificar» en el cierre. En gris y en cursiva porque no es
   un cliente sino la suma de los que no constan. */
.agrupada--apagada .agrupada__nombre { color: var(--neutro-500); font-style: italic; }

.agrupada__detalle > td { padding: 0 !important; background: var(--neutro-50); }

.agrupada__detalle table { margin: 0; background: transparent; }
.agrupada__detalle table th { font-size: .72rem; }
.agrupada__detalle table td, .agrupada__detalle table th { border-color: var(--neutro-200); }

/* Cada documento abre su ficha: es una fila pulsable dentro de otra, asi que
   necesita decirlo con el cursor y con el subrayado al pasar por encima. */
.cierre-documento { cursor: pointer; }
.cierre-documento:hover { background: var(--marca-suave); }
.cierre-documento__numero { text-decoration: underline; text-decoration-style: dotted; }

/* Las marcas de fila. Sin ellas, ver 600 junto a una factura de 1.000 parece un
   error de calculo, y es un reparto que declaro el propio documento. */
.cierre-marca {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 600;
    vertical-align: middle;
    white-space: nowrap;
}

/* Reparto entre varios metodos: informativo, no es un problema. */
.cierre-marca--mixto,
.cierre-marca--parcial {
    color: var(--info-texto);
    background: var(--info-suave);
}

/* Los pagos no suman el importe del documento: esto si es un fallo, y del
   documento, no del cierre. Va en ambar para que no se confunda con lo anterior. */
.cierre-marca--descuadre {
    color: var(--alerta-texto);
    background: var(--alerta-suave);
}

/* La fila del documento repartido, senalada con una franja a la izquierda. Es la
   que explica por que las tarjetas suman mas documentos que el periodo; marcarla
   sustituye al aviso que antes iba encima de la tabla. */
.cierre-documento--mixto > td:first-child {
    box-shadow: inset 3px 0 0 var(--info-500);
}

.cierre-documento--mixto > td { background: color-mix(in srgb, var(--info-suave) 45%, transparent); }
.cierre-documento--mixto:hover > td { background: var(--marca-suave); }

/* La misma senal en la fila de la contraparte, para saber donde entrar sin ir
   desplegando una por una. El ambar del descuadre gana al azul del reparto:
   entre las dos, la que hay que mirar es la que no cuadra. */
.cierre-grupo--mixto > td:first-child { box-shadow: inset 3px 0 0 var(--info-500); }
.cierre-grupo--descuadre > td:first-child { box-shadow: inset 3px 0 0 var(--alerta-500); }

/* Las marcas de la cabecera van en linea con el nombre y no debajo: la fila del
   grupo ya tiene dos renglones -nombre e identificacion- y un tercero la
   separaria demasiado de la siguiente. */
.agrupada__nombre + .cierre-marca { margin-left: 8px; }

/* El cuerpo de la ventana de detalle.

   Sin max-height ni overflow propios: el dialogo ya es .modal-dialog-scrollable
   y es Bootstrap quien hace que el cuerpo se desplace. Poner ademas un alto
   maximo aqui daba dos barras de desplazamiento anidadas, una dentro de otra, y
   se noto en cuanto la ficha paso a traer el detalle completo. */
.cierre-ficha h3:not(:first-child) { margin-top: 1.25rem; }