/*
 * MENÚ LATERAL QUE SE DESPLIEGA AL PASAR EL CURSOR
 *
 * Filament sabe colapsarlo a iconos, pero para reabrirlo pide un clic, y en un facturador se entra y se
 * sale del menú decenas de veces al día.
 *
 * Está resuelto por DOS vías que no se pisan, y a propósito:
 *
 *  1. `public/js/panel.js` toca el estado de Filament (`$store.sidebar.isOpen`) al entrar el cursor. Es
 *     la vía buena: anchos, transiciones, etiquetas y hasta los tooltips de los iconos se comportan
 *     igual que pulsando su botón.
 *  2. Lo de aquí abajo, que hace lo mismo con CSS por si la primera falla. Sólo puede aplicar cuando el
 *     menú sigue cerrado (`:not(.fi-sidebar-open)`), así que en cuanto el JavaScript lo abre, esta parte
 *     deja de intervenir. Nunca actúan las dos a la vez.
 *
 * El `!important` de las etiquetas no es pereza: Alpine las oculta con un `display: none` EN LÍNEA
 * (`x-show`), y una regla normal no le gana a un estilo en línea. Fue exactamente el fallo de la primera
 * versión —el menú se abría al rozarlo y se quedaba sin nombres—.
 */
@media (min-width: 1024px) {
    .fi-main-sidebar:not(.fi-sidebar-open) { transition: width 150ms ease-in-out; }

    /* Se despliega ENCIMA del contenido, sin empujarlo: mover toda la página al rozar el menú marea. */
    .fi-main-sidebar:not(.fi-sidebar-open):hover {
        width: var(--sidebar-width) !important;
        z-index: 40;
        box-shadow: 6px 0 24px -8px rgb(15 23 42 / 0.25);
    }

    /* Todo lo que Alpine esconde dentro del menú: los nombres de los enlaces, los títulos de grupo y el
       logotipo. Se listan por su atributo y no por sus clases para no dejarse ninguno —la primera vez se
       quedó fuera «Configuración», que es un grupo y no un enlace—. */
    .fi-main-sidebar:not(.fi-sidebar-open):hover [x-show] {
        display: block !important;
        white-space: nowrap;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
 * PANTALLA DE FACTURAR — calcada de la de Siigo.
 *
 * Aquí está TODO el maquetado de esa pantalla, y por una razón concreta: Filament 5 sirve su CSS ya
 * compilado con sólo las clases que él usa. Las utilidades de Tailwind que uno escriba en una vista
 * propia —`grid-cols-2`, `px-6`, `w-full`— NO existen en ese fichero, así que no aplican y la
 * pantalla se pinta desnuda. Se puede compilar un tema propio con Vite, pero eso mete Node y un paso
 * de build en los tres despliegues; para una pantalla que se copió con medidas exactas, CSS a mano es
 * más honesto y se ajusta en un solo sitio.
 *
 * Regla al tocar esto: medidas, aquí; colores, SIEMPRE de los tokens del panel (`var(--gray-500)`,
 * `var(--primary-600)`…), que es lo que mantiene vivo el modo oscuro. Filament 5 publica esos tokens
 * como color completo (`oklch(...)`), no como canales: se usan tal cual, y envolverlos en `rgb()`
 * —la forma de la v3— no pinta nada y no avisa. El modo oscuro va por clase `.dark` en el <html>.
 * ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── La hoja: una tarjeta blanca, como su documento ─────────────────────────────────────────── */
.inv-doc {
    background-color: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    overflow: hidden;
    font-size: 0.875rem;
}

.dark .inv-doc {
    background-color: var(--gray-900);
    border-color: rgb(255 255 255 / 0.1);
}

.inv-doc__body {
    padding: 1.5rem 1.5rem 1rem;
    border-bottom: 1px solid var(--gray-200);   /* la cabecera del documento, separada de la hoja */
    margin-bottom: 1rem;
    background-color: var(--gray-50);
}

.dark .inv-doc__body {
    border-bottom-color: rgb(255 255 255 / 0.08);
    background-color: rgb(255 255 255 / 0.02);
}
.inv-doc__lines { padding: 0 1.5rem; }

/* ── Cabecera: dos columnas, etiqueta a la izquierda de cada campo ──────────────────────────── */
.inv-cols {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 3rem;
}

@media (min-width: 1100px) {
    .inv-cols { grid-template-columns: 1fr 1fr; }
}

.inv-field {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.875rem;          /* el aire entre filas de Siigo */
}

.inv-field--top { align-items: flex-start; }

.inv-field__label {
    width: 7rem;                      /* 112px: «Fecha de elaboración» cabe en dos líneas */
    flex-shrink: 0;
    font-size: 0.8125rem;
    line-height: 1.25;
    color: var(--gray-500);
}

.dark .inv-field__label { color: var(--gray-400); }

.inv-field--top .inv-field__label { padding-top: 0.4rem; }

.inv-field__control {
    position: relative;
    width: 17rem;                     /* 272px, el ancho de sus campos */
    max-width: 100%;
    display: flex;
    gap: 0.5rem;
}

.inv-field__control > .fi-input-wrp { flex: 1 1 auto; min-width: 0; }

/* Lo que no es un control sino un dato ya resuelto (Contacto, e-NCF). */
.inv-static {
    padding-top: 0.35rem;
    font-size: 0.8125rem;
    color: var(--gray-500);
}

.dark .inv-static { color: var(--gray-400); }
.inv-static small { font-size: 0.75rem; color: var(--gray-400); }

/* Los campos de Siigo son más bajos que los de Filament por defecto. */
.inv-doc .fi-input,
.inv-doc .fi-select-input {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    font-size: 0.8125rem;
}

.inv-field__control > .inv-cur__code { width: 6.5rem; flex: 0 0 6.5rem; }
.inv-field__control > .inv-cur__rate { flex: 1 1 auto; }

/* ── La ficha del cliente ya elegido ───────────────────────────────────────────────────────── */
.inv-party {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    background-color: var(--gray-50);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
}

.dark .inv-party { background-color: rgb(255 255 255 / 0.05); }

.inv-party__name { font-weight: 600; color: var(--primary-600); }
.dark .inv-party__name { color: var(--primary-400); }
.inv-party__line { font-size: 0.75rem; color: var(--gray-500); }
.dark .inv-party__line { color: var(--gray-400); }
.inv-party__credit { font-size: 0.75rem; color: var(--info-600); }
.dark .inv-party__credit { color: var(--info-400); }

/* ── Lista de resultados del buscador ──────────────────────────────────────────────────────── */
.inv-drop {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 30;
    width: 100%;
    min-width: 20rem;
    margin-top: 0.25rem;
    max-height: 17rem;
    overflow-y: auto;
    background-color: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.2);
}

/* En oscuro se usa un gris un paso más claro que la tarjeta: con el mismo tono la lista quedaba
   plana encima del documento y no se leía como algo que flota. La sombra tampoco se ve sobre fondo
   oscuro, así que el peso lo lleva el borde. */
.dark .inv-drop {
    background-color: var(--gray-800);
    border-color: rgb(255 255 255 / 0.18);
    box-shadow: 0 12px 30px -5px rgb(0 0 0 / 0.6);
}

.inv-drop__item {
    display: flex;
    width: 100%;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.4rem 0.75rem;
    text-align: left;
    font-size: 0.8125rem;
    border-bottom: 1px solid var(--gray-100);
}

.dark .inv-drop__item { border-bottom-color: rgb(255 255 255 / 0.06); }
.inv-drop__item:last-child { border-bottom: 0; }
.inv-drop__item:hover { background-color: var(--gray-50); }
.dark .inv-drop__item:hover { background-color: rgb(255 255 255 / 0.06); }
.inv-drop__aside { font-size: 0.75rem; color: var(--gray-500); }

/* ── Hoja de líneas ───────────────────────────────────────────────────────────────────────── */
.inv-sheet { overflow-x: auto; }

/* Mientras el buscador tiene resultados, la hoja NO puede recortar.
   El desplegable nace dentro de este contenedor, que lleva `overflow-x: auto` para poder desplazar la
   tabla en pantallas estrechas; y en CSS, en cuanto se recorta un eje el otro deja de ser `visible`
   por su cuenta. Resultado: de la lista de productos sólo asomaba la primera franja de píxeles. La
   tarjeta sigue recortando por fuera, así que en una pantalla estrecha la tabla no se desborda a la
   página: se corta en el borde del documento. */
.inv-sheet--open { overflow: visible; }

.inv-lines {
    width: 100%;
    min-width: 62rem;
    border-collapse: separate;
    border-spacing: 0;
    /* Los anchos de abajo se respetan al pie de la letra y el sobrante se lo lleva «Descripción», que
       es la única columna con `width: auto`. Sin esto el navegador reparte a su criterio y en una
       pantalla ancha «Unidad» se estiraba al triple mientras la descripción se quedaba estrecha. */
    table-layout: fixed;
}

.inv-lines thead th {
    background-color: var(--primary-50);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary-800);
    padding: 0.45rem 0.5rem;
    text-align: left;
    white-space: nowrap;
}

.dark .inv-lines thead th {
    background-color: rgb(255 255 255 / 0.08);
    color: var(--gray-300);
}

.inv-lines thead th:first-child { border-top-left-radius: 0.375rem; }
.inv-lines thead th:last-child { border-top-right-radius: 0.375rem; }

.inv-lines tbody td {
    padding: 0.35rem 0.5rem;
    vertical-align: top;
    border-bottom: 1px solid var(--gray-100);
}

.dark .inv-lines tbody td { border-bottom-color: rgb(255 255 255 / 0.06); }
.inv-lines tbody tr:last-child td { border-bottom: 0; }
.inv-lines .fi-input-wrp { width: 100%; }

/* Anchos de columna, en el orden de Siigo. */
.inv-lines .col-num { width: 2rem; text-align: center; color: var(--gray-400); font-size: 0.75rem; padding-top: 0.75rem; }
.inv-lines .col-product { width: 20%; min-width: 12rem; }
.inv-lines .col-description { width: auto; min-width: 12rem; }
.inv-lines .col-qty { width: 5rem; }
.inv-lines .col-unit { width: 7rem; }
.inv-lines .col-price { width: 8.5rem; }
.inv-lines .col-discount { width: 5.5rem; }
.inv-lines .col-tax { width: 5.5rem; text-align: center; }
.inv-lines .col-total { width: 8.5rem; text-align: right; }
.inv-lines .col-actions { width: 2.5rem; text-align: center; }

.inv-lines .num-cell,
.inv-lines .num-cell .fi-input { text-align: right; }

.inv-lines .col-total { padding-top: 0.75rem; font-variant-numeric: tabular-nums; }
.inv-lines .col-tax { padding-top: 0.6rem; }
.inv-lines .col-actions { padding-top: 0.7rem; }

.inv-code { display: block; margin-top: 0.15rem; font-size: 0.6875rem; color: var(--gray-400); }
.inv-off { display: block; margin-top: 0.15rem; text-align: right; font-size: 0.6875rem; color: var(--warning-600); }
.dark .inv-off { color: var(--warning-400); }

/* El ITBIS no se edita: se enseña como etiqueta. */
.inv-tag {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    background-color: var(--gray-100);
    font-size: 0.6875rem;
    color: var(--gray-700);
}

.dark .inv-tag { background-color: rgb(255 255 255 / 0.1); color: var(--gray-300); }

.inv-trash { color: var(--gray-400); }
.inv-trash:hover { color: var(--danger-600); }
.inv-ico { width: 1rem; height: 1rem; }
.inv-ico--lg { width: 1.35rem; height: 1.35rem; }

/* ── Pie: formas de pago frente a los totales ─────────────────────────────────────────────── */
.inv-foot {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 1.25rem 1.5rem;
}

@media (min-width: 1100px) {
    .inv-foot { grid-template-columns: 1fr 1fr; }
}

.inv-heading {
    font-size: 1.0625rem;             /* 17px, como sus títulos de zona */
    font-weight: 600;
    color: var(--primary-600);
    margin-bottom: 0.75rem;
}

.dark .inv-heading { color: var(--primary-400); }

.inv-pay__row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.inv-pay__form { width: 13rem; flex: 0 0 13rem; }
.inv-pay__amount { width: 8rem; flex: 0 0 8rem; }
.inv-pay__amount .fi-input { text-align: right; }

.inv-link {
    font-size: 0.8125rem;
    color: var(--primary-600);
    text-decoration: underline;
}

.dark .inv-link { color: var(--primary-400); }

/* Totales: etiqueta a la izquierda, importe alineado a la derecha, sobre un panel tintado.
   Es la zona que más se mira de la pantalla y sobre blanco quedaba flotando. */
.inv-totals {
    margin-left: auto;
    width: 22rem;
    max-width: 100%;
    background-color: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
}

.dark .inv-totals {
    background-color: rgb(255 255 255 / 0.04);
    border-color: rgb(255 255 255 / 0.08);
}
.inv-totals__row { display: flex; justify-content: space-between; padding: 0.2rem 0; }
.inv-totals__label { color: var(--gray-500); }
.dark .inv-totals__label { color: var(--gray-400); }
.inv-totals__value { font-variant-numeric: tabular-nums; }

/* La línea del total, separada por un filete como en su pantalla. */
.inv-sum {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--primary-100);
    background-color: var(--primary-50);       /* el importe que más se mira, con color detrás */
}

.dark .inv-sum {
    border-top-color: rgb(255 255 255 / 0.1);
    background-color: rgb(255 255 255 / 0.03);
}

@media (min-width: 1100px) {
    .inv-sum { grid-template-columns: 1fr 1fr; }
}

.inv-sum__pay { display: flex; align-items: center; justify-content: center; gap: 0.75rem; }
.inv-sum__net { display: flex; align-items: baseline; justify-content: flex-end; gap: 1.5rem; }
.inv-sum__caption { font-size: 1rem; font-weight: 600; }
.inv-sum .inv-grand, .inv-sum .inv-sum__caption { color: var(--primary-800); }
.dark .inv-sum .inv-grand, .dark .inv-sum .inv-sum__caption { color: var(--primary-200); }
.inv-grand { font-size: 1.375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.inv-check { color: var(--success-600); }
.dark .inv-check { color: var(--success-400); }

.inv-miss {
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    background-color: var(--danger-50);
    color: var(--danger-600);
    font-size: 0.75rem;
}

.dark .inv-miss { background-color: var(--danger-950); color: var(--danger-400); }

/* ── Observaciones ───────────────────────────────────────────────────────────────────────── */
.inv-notes { padding: 0 1.5rem 1.5rem; }

.inv-notes textarea {
    width: 100%;
    max-width: 36rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    color: inherit;
    background-color: transparent;
    border: 1px solid var(--gray-300);
    border-radius: 0.5rem;
    resize: vertical;
}

.dark .inv-notes textarea { border-color: rgb(255 255 255 / 0.15); }
.inv-notes textarea::placeholder { color: var(--gray-400); }
.inv-notes textarea:focus { outline: 2px solid var(--primary-600); outline-offset: -1px; }

/* ── Barra de acciones, con su fondo gris ────────────────────────────────────────────────── */
.inv-actions {
    background-color: var(--gray-50);
    border-top: 1px solid var(--gray-200);
    padding: 0.875rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.dark .inv-actions {
    background-color: rgb(255 255 255 / 0.05);
    border-top-color: rgb(255 255 255 / 0.1);
}

/* ── Avisos ──────────────────────────────────────────────────────────────────────────────── */
.inv-alert {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    font-size: 0.8125rem;
}

.inv-alert strong { display: block; font-weight: 600; margin-bottom: 0.15rem; }

.inv-alert--warn {
    background-color: var(--warning-50);
    border-color: var(--warning-300, var(--warning-400));
    color: var(--warning-700, var(--warning-600));
}

.dark .inv-alert--warn { background-color: var(--warning-950); border-color: transparent; color: var(--warning-300, var(--warning-400)); }

.inv-alert--danger {
    background-color: var(--danger-50);
    border-color: transparent;
    color: var(--danger-600);
}

.dark .inv-alert--danger { background-color: var(--danger-950); color: var(--danger-400); }

.inv-x { color: var(--gray-400); font-size: 0.75rem; }
.inv-x:hover { color: var(--danger-600); }

/* La última fila de la tabla lleva el buscador de productos, y su lista se despliega desde ahí. */
.inv-lines .col-search { position: relative; }
.inv-search { position: relative; max-width: 26rem; }

/* En la lista de productos, el ITBIS y el precio van juntos a la derecha. */
.inv-drop__right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.inv-drop__price { font-variant-numeric: tabular-nums; }

/* La marca de borrador, en el hueco donde irá el e-NCF. Amarilla y en versales: se lee como un sello
   —«esto todavía no es un comprobante»— sin robarle sitio a nada. */
.inv-badge {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 0.25rem;
    background-color: var(--warning-100);
    color: var(--warning-800);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.dark .inv-badge { background-color: var(--warning-950); color: var(--warning-300); }

/* El importe de la última forma de pago no es un campo: es un cálculo (el resto del total), así que se
   pinta como valor y se alinea donde estaría el input. */
.inv-pay__rest {
    width: 8rem;
    flex: 0 0 8rem;
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    font-variant-numeric: tabular-nums;
}

.inv-pay__rest small { font-size: 0.6875rem; color: var(--gray-400); }
.inv-pay__hint { margin-top: 0.5rem; font-size: 0.75rem; color: var(--gray-500); }
.dark .inv-pay__hint { color: var(--gray-400); }

/* ══════════════════════════════════════════════════════════════════════════════════════════════
 * PALETA Y JERARQUÍA VISUAL
 *
 * La paleta se elige en el panel (`AdminPanelProvider`); aquí sólo se aplica. Todo sale de los tokens,
 * así que cambiar un color allí se propaga sin tocar este fichero.
 *
 * El problema que resuelve: en claro, Filament pinta el lienzo en gray-50 y las tarjetas en blanco. Con
 * dos tonos tan próximos no hay relieve —«mucho blanco»— y los títulos flotaban sobre la nada. Aquí el
 * lienzo baja un paso, las tarjetas ganan filete y una sombra corta, y los títulos pasan a tener
 * jerarquía por COLOR y no sólo por tamaño. El modo oscuro se deja como estaba: ahí el contraste ya
 * funcionaba y el usuario lo dio por bueno.
 * ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── El lienzo, un paso por debajo de las tarjetas ── */
html:not(.dark) .fi-body { background-color: var(--gray-100); }

html:not(.dark) .fi-section,
html:not(.dark) .fi-ta-ctn,
html:not(.dark) .fi-wi,
html:not(.dark) .inv-doc {
    border: 1px solid var(--gray-200);
    box-shadow: 0 1px 2px 0 rgb(15 23 42 / 0.04), 0 1px 3px 0 rgb(15 23 42 / 0.05);
}

/* Barra superior y menú: separados del lienzo por un filete, no por un cambio de blanco. */
html:not(.dark) .fi-topbar nav { border-bottom: 1px solid var(--gray-200); }
html:not(.dark) .fi-main-sidebar { border-right: 1px solid var(--gray-200); }

/* ── Títulos y subtítulos, en toda la aplicación ── */
.fi-header-heading {
    color: var(--gray-900);
    letter-spacing: -0.015em;       /* un título grande respira mejor un poco más apretado */
}

.fi-header-subheading { color: var(--gray-500); }

/* Los títulos de sección van en el primario, como los de la pantalla de facturar («Formas de pago»,
   «Observaciones»). Es la jerarquía de cualquier facturador: título de página en negro, títulos de
   bloque en el color de la casa. */
.fi-section-header-heading { color: var(--primary-700); }
.fi-section-header-description { color: var(--gray-500); }

/* Cabecera de tabla: en el color de la casa, para que se lea como cabecera y no como una fila más. */
html:not(.dark) .fi-ta-header-cell {
    background-color: var(--primary-50);
    color: var(--primary-800);
}

.dark .fi-ta-header-cell { color: var(--gray-400); }

/* ── El menú lateral, en azul noche ──
 *
 * Es lo único que se ve en TODAS las pantallas, así que es donde el color identifica la aplicación sin
 * estorbar a lo que se está leyendo: el contenido —facturas, importes, formularios— se queda sobre
 * blanco, que es donde se lee, y el color vive en el borde de la pantalla. Es la disposición de los
 * programas de contabilidad de toda la vida.
 *
 * En claro se pinta a mano porque Filament da el menú del color del lienzo; en oscuro ya es oscuro y no
 * hay nada que hacer. Los tonos salen del primario, así que si cambia la paleta, cambia el menú.
 */
html:not(.dark) .fi-main-sidebar {
    background-color: var(--primary-950);
    border-right-color: transparent;
}

/* Sobre azul noche, el texto no puede ser el gris de siempre. Los inactivos van a media potencia y el
   activo a blanco: se distingue por contraste, no por ser el único con color.
 *
 * Hay que nombrar la etiqueta y el icono uno por uno, y con el mismo peso de selector que usa Filament
 * (`.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label`): el color NO se hereda
 * del botón, se lo pone él a cada pieza. Cambiando sólo el del botón, el menú quedaba azul sobre azul y
 * no se leía nada. */
html:not(.dark) .fi-main-sidebar .fi-sidebar-item-btn,
html:not(.dark) .fi-main-sidebar .fi-sidebar-item-btn > .fi-sidebar-item-label,
html:not(.dark) .fi-main-sidebar .fi-sidebar-item-btn .fi-icon {
    color: var(--primary-100);
}

html:not(.dark) .fi-main-sidebar .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-btn:hover {
    background-color: rgb(255 255 255 / 0.08);
}

html:not(.dark) .fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: rgb(255 255 255 / 0.12);
    box-shadow: inset 3px 0 0 0 var(--primary-400);   /* el filete, en un azul que sí se ve sobre noche */
}

html:not(.dark) .fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label,
html:not(.dark) .fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-icon {
    color: #fff;
}

/* Títulos de grupo («Configuración») y su flecha de plegado. */
html:not(.dark) .fi-main-sidebar .fi-sidebar-group-label,
html:not(.dark) .fi-main-sidebar .fi-sidebar-group-btn,
html:not(.dark) .fi-main-sidebar .fi-sidebar-group-btn .fi-icon,
html:not(.dark) .fi-main-sidebar .fi-sidebar-group-collapse-btn,
html:not(.dark) .fi-main-sidebar .fi-sidebar-group-collapse-btn .fi-icon {
    color: var(--primary-200);
}

html:not(.dark) .fi-main-sidebar .fi-sidebar-group-collapse-btn:hover { background-color: rgb(255 255 255 / 0.08); }

/* El logotipo del menú, cuando está abierto, sobre fondo oscuro. */
html:not(.dark) .fi-main-sidebar .fi-logo { color: #fff; }

.dark .fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    box-shadow: inset 3px 0 0 0 var(--primary-500);
}

/* Miga de pan: el sitio donde uno está, apagado; los saltos anteriores, enlaces. */
.fi-breadcrumbs .fi-link { color: var(--primary-600); }
.fi-breadcrumbs .fi-link:hover { color: var(--primary-700); }
.fi-breadcrumbs .fi-breadcrumbs-item:last-child .fi-link { color: var(--gray-500); }   /* aquí estoy */

.dark .fi-header-heading { color: var(--gray-50); }
.dark .fi-header-subheading,
.dark .fi-section-header-description { color: var(--gray-400); }
.dark .fi-section-header-heading { color: var(--primary-400); }
.dark .fi-breadcrumbs .fi-link { color: var(--primary-400); }
.dark .fi-breadcrumbs .fi-breadcrumbs-item:last-child .fi-link { color: var(--gray-400); }

/* Un interruptor con su explicación DEBAJO, en los ajustes. El contenedor de la factura mide 17rem y en
   una pantalla de ajustes ahoga el texto, así que aquí se apila y se deja crecer. */
.inv-field__control--stack {
    width: auto;
    max-width: 40rem;
    flex-direction: column;
    align-items: flex-start;
}

.inv-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--gray-700); }
.dark .inv-check { color: var(--gray-200); }
.inv-hint { margin-top: 0.35rem; font-size: 0.75rem; color: var(--gray-500); max-width: 32rem; }
.dark .inv-hint { color: var(--gray-400); }

/* El selector de idioma de la pantalla de acceso: discreto, debajo del formulario. */
.inv-locales {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
    font-size: 0.8125rem;
    color: var(--gray-500);
}

.inv-locales a { color: var(--primary-600); }
.inv-locales a:hover { color: var(--primary-700); }
.inv-locales__sep { color: var(--gray-300); }
.dark .inv-locales a { color: var(--primary-400); }

/* Aviso informativo: la regla de los 30 días de la nota de crédito, que no es un error sino un dato. */
.inv-alert--info {
    background-color: var(--info-50);
    border-color: transparent;
    color: var(--info-700);
}

.dark .inv-alert--info { background-color: var(--info-950); color: var(--info-300); }