/*
 * jamc-theme-base.css — Base visual del ERP, compartida por AMBOS paneles.
 *
 * Lenguaje "collectiveos" (referencia aprobada, validada primero en el piloto del
 * Dashboard): radios grandes, sin bordes duros, sombras tenues, gradientes sutiles,
 * tipografia Outfit, easing cubic-bezier(0.16,1,0.3,1). Este archivo absorbe ese
 * ADN; el CSS del Dashboard (antes dashboard-pilot.css, hoja aparte cargada al
 * final) es ahora la ULTIMA seccion de esta base, conservando la cascada.
 *
 * El acento es una VARIABLE: naranja por defecto (admin); jamc-theme-saas.css lo
 * reescribe a morado. Asi la base es identica y solo cambia el acento por panel.
 *
 * Todas las clases .fi-* estan verificadas contra el vendor real (Filament
 * v3.3.47). Claro + oscuro via :root.dark (= html.dark, que Filament togglea).
 * Toda animacion/transicion se anula bajo prefers-reduced-motion (bloque final).
 */

/* ====== Tipografia Outfit auto-alojada (sin depender de Google Fonts) ====== */
/* Outfit v15 es una fuente VARIABLE: un unico woff2 por subset cubre TODO el rango
   de peso 400–700 (Google servia el mismo archivo para 400/500/600/700). Por eso
   basta un @font-face por subset con font-weight: 400 700, en vez de 4 archivos
   identicos. font-display: swap evita el texto invisible mientras carga. Los .woff2
   viven en public/fonts/ y se sirven desde /fonts/ (ruta absoluta-de-raiz, valida
   sea cual sea la ubicacion de esta hoja). */
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/outfit-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/outfit-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --jamc-ease: cubic-bezier(0.16, 1, 0.3, 1);

    --jamc-radius-card: 1.25rem;
    --jamc-radius-panel: 1.1rem;
    --jamc-radius-field: 0.85rem;
    --jamc-radius-chip: 0.7rem;
    --jamc-radius-pill: 9999px;

    --jamc-surface: #ffffff;
    --jamc-surface-2: #fafafa;
    --jamc-hairline: rgba(15, 23, 42, 0.06);
    /* Hairline con mas peso: separadores de cierre (filas de total, cabeceras de
       reporte). Mismo tinte, mas alfa → no introduce un gris de otra familia. */
    --jamc-hairline-strong: rgba(15, 23, 42, 0.14);
    --jamc-row-hover: rgba(15, 23, 42, 0.035);

    --jamc-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.05), 0 6px 16px -10px rgba(15, 23, 42, 0.1);
    --jamc-shadow-float: 0 4px 12px -6px rgba(15, 23, 42, 0.12), 0 18px 40px -18px rgba(15, 23, 42, 0.22);

    /* Acento por defecto = naranja (admin). jamc-theme-saas.css lo pisa a morado. */
    --jamc-accent: #f97316;
    --jamc-accent-strong: #ea580c;
    --jamc-accent-soft: rgba(249, 115, 22, 0.12);
    --jamc-accent-ring: rgba(249, 115, 22, 0.35);

    /* Colores SEMANTICOS de estado (independientes del acento del panel):
       verde = completado/ok, gris tenue = pendiente/secundario. */
    --jamc-ok: #16a34a;
    --jamc-ok-strong: #15803d;
    --jamc-ok-soft: rgba(22, 163, 74, 0.12);
    --jamc-muted: #94a3b8;

    /* Rojo/ambar semanticos: valor anterior en un cambio auditado, hito de
       borrado, intento fallido. Nunca son el acento del panel. */
    --jamc-warn: #d97706;
    --jamc-danger: #dc2626;
    --jamc-danger-strong: #b91c1c;

    --jamc-font: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

:root.dark {
    --jamc-surface: #18181b;
    --jamc-surface-2: #141417;
    --jamc-hairline: rgba(255, 255, 255, 0.07);
    --jamc-hairline-strong: rgba(255, 255, 255, 0.16);
    --jamc-row-hover: rgba(255, 255, 255, 0.04);

    --jamc-shadow-card: 0 1px 2px rgba(10, 8, 6, 0.3), 0 6px 18px -10px rgba(10, 8, 6, 0.45);
    --jamc-shadow-float: 0 6px 16px -8px rgba(10, 8, 6, 0.45), 0 22px 48px -20px rgba(10, 8, 6, 0.65);

    /* Estado ok/pendiente en oscuro: verde mas claro para contraste sobre superficie oscura. */
    --jamc-ok: #4ade80;
    --jamc-ok-strong: #86efac;
    --jamc-ok-soft: rgba(74, 222, 128, 0.13);
    --jamc-muted: #71717a;

    --jamc-warn: #fbbf24;
    --jamc-danger: #f87171;
    --jamc-danger-strong: #fca5a5;
}

/* ====== Tipografia global (TODO el panel, no solo widgets) ====== */
/* Pisa el `--font-family: 'Inter'` que Filament declara inline en :root antes
   de este renderHook; y refuerzo directo en el <body>. */
:root {
    --font-family: var(--jamc-font);
}

.fi-body {
    font-family: var(--jamc-font);
}

/* ====== Botones (pill) ====== */
.fi-btn {
    border-radius: var(--jamc-radius-pill) !important;
    transition:
        background-color 200ms var(--jamc-ease),
        box-shadow 200ms var(--jamc-ease),
        transform 120ms var(--jamc-ease);
}

.fi-btn:active {
    transform: translateY(0.5px) scale(0.985);
}

/* En grupos de botones se mantiene la cohesion: solo se redondean las puntas. */
.fi-btn-group .fi-btn {
    border-radius: 0 !important;
}

.fi-btn-group .fi-btn:first-child {
    border-start-start-radius: var(--jamc-radius-pill) !important;
    border-end-start-radius: var(--jamc-radius-pill) !important;
}

.fi-btn-group .fi-btn:last-child {
    border-start-end-radius: var(--jamc-radius-pill) !important;
    border-end-end-radius: var(--jamc-radius-pill) !important;
}

/* ====== Inputs / campos ====== */
/* El wrapper del vendor trae `rounded-lg shadow-sm ring-1` (ring duro). Lo
   sustituyo por hairline sutil + glow de acento al enfocar. NO se toca el
   background: lo controla el vendor (así los campos deshabilitados/readonly
   conservan su fondo distintivo). */
.fi-input-wrp {
    border-radius: var(--jamc-radius-field) !important;
    box-shadow: inset 0 0 0 1px var(--jamc-hairline) !important;
    transition: box-shadow 180ms var(--jamc-ease);
}

.fi-input-wrp:focus-within {
    box-shadow:
        inset 0 0 0 1px var(--jamc-accent),
        0 0 0 3px var(--jamc-accent-ring) !important;
}

/* ====== Repeater — lineas de detalle como filas limpias ====== */
/* Vendor .fi-fo-repeater-item: rounded-xl + ring-1 ring-gray-950/5 + shadow-sm
   (card con borde duro). Se reemplaza por el lenguaje de la base: superficie +
   hairline sutil, radio suave, sin ring. Aplica a cualquier repeater del ERP
   (lineas de factura, compra, NC, retencion…). */
.fi-fo-repeater-item {
    border: none !important;
    border-radius: var(--jamc-radius-panel) !important;
    background: var(--jamc-surface) !important;
    /* un solo hairline interno en vez de ring-1 + shadow-sm del vendor */
    box-shadow: inset 0 0 0 1px var(--jamc-hairline) !important;
    transition: box-shadow 180ms var(--jamc-ease);
}

.fi-fo-repeater-item:hover {
    box-shadow:
        inset 0 0 0 1px var(--jamc-hairline),
        var(--jamc-shadow-card) !important;
}

/* ====== Cards / secciones ====== */
.fi-section {
    border: none !important;
    border-radius: var(--jamc-radius-card) !important;
    box-shadow: var(--jamc-shadow-card) !important;
    background: var(--jamc-surface);
    transition: box-shadow 220ms var(--jamc-ease);
}

.fi-section:hover {
    box-shadow: var(--jamc-shadow-float);
}

.fi-section-header-heading {
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* ====== Tablas ====== */
/* .fi-ta-ctn del vendor ya recorta con overflow; aqui solo suavizo el marco. */
.fi-ta-ctn {
    border: none !important;
    border-radius: var(--jamc-radius-card) !important;
    box-shadow: var(--jamc-shadow-card) !important;
}

.fi-ta-row {
    transition: background-color 140ms var(--jamc-ease);
}

.fi-ta-row:hover {
    background-color: var(--jamc-row-hover) !important;
}

.fi-ta-header-cell-label {
    letter-spacing: 0.01em;
}

/* Cifras tabulares (collectiveos): digitos de ancho fijo para que montos de
   columna y campos numericos alineen en columna (money(), totales, precios). */
.fi-ta-text,
.fi-input {
    font-variant-numeric: tabular-nums;
}

/* Acciones de fila como pills coherentes: los ActionGroup (Procesar, menu ⋮)
   rinden como icon-buttons; se redondean a pill. Scopeado a la celda de acciones
   → no toca el boton de cerrar de modales ni otros icon-buttons del panel. */
.fi-ta-actions .fi-icon-btn {
    border-radius: var(--jamc-radius-pill) !important;
}

/* ====== Dropdowns (tarjeta flotante) ====== */
.fi-dropdown-panel {
    border-radius: var(--jamc-radius-panel) !important;
    box-shadow: var(--jamc-shadow-float) !important;
    border: 1px solid var(--jamc-hairline) !important;
}

.fi-dropdown-list-item {
    border-radius: var(--jamc-radius-chip);
    transition: background-color 140ms var(--jamc-ease);
}

/* ====== Modales (tarjeta flotante) ====== */
.fi-modal-window {
    border-radius: var(--jamc-radius-card) !important;
    box-shadow: var(--jamc-shadow-float) !important;
}

/* ====== Checklist "Procesamiento Electronico SRI" (modal compartido facturas/NC/retenciones) ======
   Presentacion PURA. La logica SRI (ProcessElectronicDocumentAction: firma/envio/autorizacion/
   correo) NO vive aqui. El estado "procesando" se refleja con wire:loading sobre
   callMountedTableAction (submit del <form> del modal, vendor modals.blade.php:68). */

/* Banner global de progreso: el Blade lo muestra solo mientras corre la emision (wire:loading). */
.jamc-sri-processing {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    margin-bottom: 1rem;
    border-radius: var(--jamc-radius-field);
    background: var(--jamc-accent-soft);
    color: var(--jamc-accent-strong);
    font-weight: 600;
    font-size: 0.875rem;
}

.jamc-sri-steps {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Cada paso = fila limpia (sin borde duro): superficie tenue + hairline interno. */
.jamc-sri-step {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 0.85rem;
    border-radius: var(--jamc-radius-panel);
    background: var(--jamc-surface-2);
    box-shadow: inset 0 0 0 1px var(--jamc-hairline);
    transition:
        box-shadow 200ms var(--jamc-ease),
        background-color 200ms var(--jamc-ease);
}

/* Paso completado: leve tinte verde semantico. */
.jamc-sri-step--done {
    background: var(--jamc-ok-soft);
    box-shadow: inset 0 0 0 1px transparent;
}

/* Slot del icono (tamaño fijo → todas las filas alinean su marcador). */
.jamc-sri-step__icon {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Marcador circular de estado. */
.jamc-sri-ic {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--jamc-radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Completado: circulo verde + glifo, con micro-entrada. */
.jamc-sri-ic--done {
    background: var(--jamc-ok);
    color: #fff;
    animation: jamc-check-in 260ms var(--jamc-ease);
}

:root.dark .jamc-sri-ic--done {
    color: #0a0a0a; /* glifo oscuro sobre el verde mas claro del modo oscuro */
}

.jamc-sri-ic--done svg {
    width: 0.95rem;
    height: 0.95rem;
}

/* Pendiente: circulo neutro hueco. */
.jamc-sri-ic--pending {
    border: 2px solid var(--jamc-muted);
    background: transparent;
}

/* Spinner "en proceso": toma el acento del panel via currentColor (naranja/morado). */
.jamc-sri-spin {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--jamc-accent);
}

.jamc-sri-step__body {
    flex: 1 1 auto;
    min-width: 0;
}

.jamc-sri-step__label {
    font-weight: 600;
    font-size: 0.9rem;
}

.jamc-sri-step__time {
    font-size: 0.78rem;
    color: var(--jamc-muted);
    font-variant-numeric: tabular-nums;
}

/* Pill de estado a la derecha de cada fila. */
.jamc-sri-badge {
    flex: 0 0 auto;
    padding: 0.2rem 0.6rem;
    border-radius: var(--jamc-radius-pill);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.jamc-sri-badge--ok {
    background: var(--jamc-ok-soft);
    color: var(--jamc-ok-strong);
}

.jamc-sri-badge--pending {
    background: var(--jamc-hairline);
    color: var(--jamc-muted);
}

.jamc-sri-badge--processing {
    background: var(--jamc-accent-soft);
    color: var(--jamc-accent-strong);
}

/* Archivos generados (XML / RIDE) como pills sobrias con el acento del panel. */
.jamc-sri-files {
    margin-top: 1rem;
}

.jamc-sri-files__title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--jamc-muted);
    margin-bottom: 0.5rem;
}

.jamc-sri-files__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.jamc-sri-file {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border-radius: var(--jamc-radius-pill);
    background: var(--jamc-surface-2);
    box-shadow: inset 0 0 0 1px var(--jamc-hairline);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--jamc-accent-strong);
    transition:
        box-shadow 180ms var(--jamc-ease),
        transform 180ms var(--jamc-ease);
}

.jamc-sri-file:hover {
    box-shadow: var(--jamc-shadow-card);
    transform: translateY(-1px);
}

.jamc-sri-file svg {
    width: 1rem;
    height: 1rem;
}

/* Nota informativa al pie. */
.jamc-sri-note {
    margin-top: 1rem;
    padding: 0.7rem 0.85rem;
    border-radius: var(--jamc-radius-field);
    background: var(--jamc-surface-2);
    box-shadow: inset 0 0 0 1px var(--jamc-hairline);
    font-size: 0.8rem;
    color: var(--jamc-muted);
    line-height: 1.5;
}

@keyframes jamc-check-in {
    from { transform: scale(0.6); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* ====== Badges (pill) ====== */
/* El vendor rinde `.fi-badge rounded-md text-xs font-medium ring-1 ring-inset` y,
   para todo color != gray, añade `.fi-color-custom` + las variables inline
   --c-50/--c-400/--c-600 (RGB sueltos) del color que el Resource pide. Aqui NO se
   inventan colores: se consumen esas mismas variables y solo se sube la
   legibilidad (peso, tracking, aire) y se afina el aro, que al 10% de alfa se
   perdia sobre la fila. Vale para el kardex (entrada=success/info, salida=
   danger/warning, apertura=gray), el estado de asientos y el resto del ERP. */
.fi-badge {
    border-radius: var(--jamc-radius-pill) !important;
    font-weight: 600;
    letter-spacing: 0.015em;
    white-space: nowrap;
}

/* Aro del color propio del badge, algo mas presente que el ring-custom-600/10 del
   vendor. Solo para badges con color (los gray no declaran --c-*).
   OJO: --c-600 es un triplete SEPARADO POR COMAS ("234, 88, 12", ver
   Colors\Color.php), no espacios → hay que usar rgba(var(...), a), nunca la
   sintaxis con barra rgb(var(...) / a), que seria invalida. */
.fi-badge.fi-color-custom {
    box-shadow: inset 0 0 0 1px rgba(var(--c-600), 0.22) !important;
}

:root.dark .fi-badge.fi-color-custom {
    box-shadow: inset 0 0 0 1px rgba(var(--c-400), 0.3) !important;
}

/* Badge dentro de una tabla (tipo de movimiento del kardex, estado del asiento,
   grupo/naturaleza del plan de cuentas): un pelo mas de aire para que la pildora
   respire entre filas densas. */
.fi-ta-text .fi-badge {
    padding-inline: 0.55rem;
}

/* ====== Tabs (pildora collectiveos) ====== */
/* Un solo componente para TODO el panel: pestañas de formulario (Tabs::make →
   .fi-fo-tabs > nav.fi-tabs.fi-contained), pestañas sueltas (<x-filament::tabs>
   sin contained) y las de ListRecords. El vendor marca la activa con
   `bg-gray-50 / dark:bg-white/5` + `text-primary-600` via x-bind:class de Alpine
   (clases utilitarias reales) → hace falta !important para ganarles. */
.fi-tabs {
    gap: 0.25rem;
}

.fi-tabs-item {
    border-radius: var(--jamc-radius-pill) !important;
    transition:
        background-color 160ms var(--jamc-ease),
        color 160ms var(--jamc-ease);
}

/* Hover suave solo en las inactivas (la activa ya tiene su relleno). */
.fi-tabs-item:not(.fi-active):hover,
.fi-tabs-item:not(.fi-active):focus-visible {
    background-color: var(--jamc-row-hover) !important;
}

/* Activa: pildora de acento (naranja en admin, morado en saas) — mismo lenguaje
   que el item activo de la barra superior. */
.fi-tabs-item.fi-active {
    background-color: var(--jamc-accent-soft) !important;
}

.fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-tabs-item.fi-active .fi-tabs-item-icon {
    color: var(--jamc-accent-strong) !important;
}

/* Contenedor de unas Tabs de formulario: tarjeta del lenguaje base (sin el
   ring-1 + shadow-sm del vendor, que son box-shadow y por eso se sustituyen). */
.fi-fo-tabs.fi-contained {
    border-radius: var(--jamc-radius-card) !important;
    background: var(--jamc-surface) !important;
    box-shadow: var(--jamc-shadow-card) !important;
}

/* La cinta de pestañas contenida: el border-b duro del vendor pasa a hairline. */
.fi-tabs.fi-contained {
    border-bottom: 1px solid var(--jamc-hairline) !important;
    padding: 0.6rem 0.6rem 0.65rem !important;
}

/* Tabs NO contenidas (p. ej. las sub-pestañas IVA/Renta de Asignación de
   Cuentas): control segmentado alineado a la izquierda, no una barra centrada a
   todo el ancho como deja el `mx-auto ... p-2 shadow-sm ring-1` del vendor. */
.fi-tabs:not(.fi-contained) {
    margin-inline: 0 !important;
    width: max-content;
    max-width: 100%;
    border-radius: var(--jamc-radius-pill) !important;
    background: var(--jamc-surface-2) !important;
    box-shadow: inset 0 0 0 1px var(--jamc-hairline) !important;
    padding: 0.3rem !important;
}

/* ====== Placeholders calculados (previsualizaciones) ====== */
/* Cuadre del asiento, derivados del plan de cuentas, resúmenes de retención…
   Todos son cifras/valores deducidos: digitos de ancho fijo y algo mas de peso
   para que se lean como resultado y no como texto de ayuda. */
.fi-fo-placeholder {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

/* ====== Barra de filtros sobre la tabla (FiltersLayout::AboveContent) ====== */
/* La usan Kardex y Stock Actual. El vendor la deja suelta sobre el fondo; aqui
   se agrupa como panel tenue para separar "lo que filtro" de "lo que leo". */
.fi-ta-filters-above-content-ctn {
    border-radius: var(--jamc-radius-panel);
    background: var(--jamc-surface-2);
    box-shadow: inset 0 0 0 1px var(--jamc-hairline);
    margin: 0.75rem;
}

/* ====== Estado vacio ====== */
.fi-ta-empty-state-heading {
    letter-spacing: -0.01em;
}

.fi-ta-empty-state-icon {
    color: var(--jamc-muted);
}

/* ====== Notificaciones (tarjeta flotante) ====== */
.fi-no-notification {
    border-radius: var(--jamc-radius-panel) !important;
    box-shadow: var(--jamc-shadow-float) !important;
    border: 1px solid var(--jamc-hairline) !important;
}

/* ====== Breadcrumbs ====== */
.fi-breadcrumbs-item-label {
    letter-spacing: -0.005em;
}

/* ====== Paginacion (pill) ====== */
.fi-pagination-item-button,
.fi-pagination-previous-btn,
.fi-pagination-next-btn {
    border-radius: var(--jamc-radius-pill) !important;
}

/* ====== Login / paginas simple (auth) ====== */
/* layout.simple extiende layout.base (mismo HEAD_END), asi que estas reglas
   aplican a /admin/login, /saas/login y demas paginas auth. El acento sale de
   var(--jamc-accent*) → naranja en admin, morado en saas, sin duplicar reglas. */

/* Fondo: lavado de acento MUY sutil (radiales que se desvanecen pronto); el gris
   del panel (bg-gray-50 / dark:bg-gray-950) se ve por detras en lo transparente. */
.fi-simple-layout {
    background-image:
        radial-gradient(900px 480px at 50% -12%, var(--jamc-accent-soft), transparent 60%),
        radial-gradient(720px 420px at 108% 112%, var(--jamc-accent-soft), transparent 62%);
    background-repeat: no-repeat;
}

/* Aire lateral para que la card flote tambien en movil (el vendor la deja al
   borde). */
.fi-simple-main-ctn {
    padding-inline: 1rem;
}

/* La card: tarjeta flotante protagonista, sin el ring/borde duro del vendor. */
.fi-simple-main {
    border: none !important;
    border-radius: 1.5rem !important; /* radio grande, hero */
    box-shadow: var(--jamc-shadow-float) !important;
    background: var(--jamc-surface) !important;
    animation: jamc-login-in 520ms var(--jamc-ease) both;
}

/* Titulo con mas presencia (Outfit heredado). */
.fi-simple-header-heading {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Boton de entrar: ya es pill full-width (base); se le añade glow de acento para
   que sea el protagonista. Solo alcanza al submit (.fi-icon-btn del password es
   otra clase). */
.fi-simple-main .fi-btn.fi-color-primary {
    box-shadow: 0 10px 24px -10px var(--jamc-accent-ring);
}

.fi-simple-main .fi-btn.fi-color-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px -10px var(--jamc-accent-ring);
}

@keyframes jamc-login-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ====== Entrada de pagina (fluida con SPA) ====== */
/* Solo opacidad (sin transform) para no chocar con el slide-up de las cards del
   Dashboard, que ya tiene su propia animacion validada. Con ->spa() activo, el
   <body> se reemplaza en cada navegacion y .fi-main se recrea, asi que este fade
   se reproduce en cada cambio de pagina: rapido (200ms) para que se sienta fluido
   sin llegar a parpadeo. */
@keyframes jamc-page-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fi-main {
    animation: jamc-page-in 200ms var(--jamc-ease) both;
}

html {
    scroll-behavior: smooth;
}

/* ====== Barra lateral ====== */
/* La usa el panel SaaS a ancho completo y el panel admin solo como cajon movil
   (con ->topNavigation() el vendor la traslada fuera en lg). El item activo del
   vendor es `bg-gray-100 / dark:bg-white/5` (gris apagado) con el label/icono en
   primary-600: el mismo problema que las tabs. Aqui pasa a pildora de acento, y
   como el acento es variable, sale morada en el SaaS y naranja en el admin sin
   duplicar una sola regla. */
.fi-sidebar-item-button {
    border-radius: var(--jamc-radius-pill) !important;
    padding-inline: 0.75rem !important;
    transition:
        background-color 160ms var(--jamc-ease),
        color 160ms var(--jamc-ease);
}

.fi-sidebar-item:not(.fi-active) .fi-sidebar-item-button:hover,
.fi-sidebar-item:not(.fi-active) .fi-sidebar-item-button:focus-visible {
    background-color: var(--jamc-row-hover) !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-button {
    background-color: var(--jamc-accent-soft) !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-sidebar-item.fi-active .fi-sidebar-item-label {
    color: var(--jamc-accent-strong) !important;
}

/* Encabezado de grupo: etiqueta de seccion, no un item mas. */
.fi-sidebar-group-label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.68rem !important;
    color: var(--jamc-muted) !important;
}

/* La costura del header (ring-1 duro a lo alto de la cabecera) pasa a hairline. */
.fi-sidebar-header {
    box-shadow: none !important;
    border-bottom: 1px solid var(--jamc-hairline);
}

/* ====== Linea de tiempo de auditoria ====== */
/* Componente Livewire `audit-timeline`: lo montan el modal "Ver historial" del
   AuditResource del panel admin Y el del SaaS → sus estilos viven en la BASE, no
   en el tema de un panel. Presentacion pura: el que decide que evento es hito,
   que es ruido tecnico y como se narra es App\Livewire\AuditTimeline. */

/* Conmutador simple / detallada. */
.jamc-audit-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: var(--jamc-radius-pill);
    font-size: 0.8rem;
    font-weight: 600;
    background: var(--jamc-surface-2);
    box-shadow: inset 0 0 0 1px var(--jamc-hairline);
    color: var(--jamc-muted);
    transition:
        background-color 180ms var(--jamc-ease),
        color 180ms var(--jamc-ease),
        box-shadow 180ms var(--jamc-ease);
}

.jamc-audit-toggle:hover {
    box-shadow: inset 0 0 0 1px var(--jamc-hairline-strong);
}

.jamc-audit-toggle--on {
    background: var(--jamc-accent-soft);
    color: var(--jamc-accent-strong);
    box-shadow: inset 0 0 0 1px var(--jamc-accent-ring);
}

.jamc-audit-toggle__caption {
    font-size: 0.78rem;
    color: var(--jamc-muted);
}

/* El riel: no una linea gris plana, sino un degradado que nace opaco en el hito
   mas reciente y se apaga hacia el pasado (el ojo entra por arriba). */
.jamc-audit-list {
    position: relative;
    margin-inline-start: 0.75rem;
    padding-inline-start: 0;
    border: 0;
}

.jamc-audit-list::before {
    content: '';
    position: absolute;
    inset-block: 0.35rem 0.75rem;
    inset-inline-start: 0;
    width: 1px;
    background: linear-gradient(
        to bottom,
        var(--jamc-hairline-strong),
        var(--jamc-hairline) 55%,
        transparent
    );
}

.jamc-audit-item {
    position: relative;
    margin-inline-start: 1.5rem;
    padding-block: 0.15rem;
}

.jamc-audit-item:not(:last-child) {
    margin-bottom: 1.35rem;
}

/* Hito: circulo semantico con halo del color de fondo real del modal
   (var(--jamc-surface)), no el `ring-white / ring-gray-900` del utilitario, que
   en oscuro no coincide con nuestra superficie #18181b. */
.jamc-audit-dot {
    position: absolute;
    inset-inline-start: -1.83rem;
    top: 0.5rem;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: var(--jamc-radius-pill);
    box-shadow: 0 0 0 4px var(--jamc-surface);
    background: var(--jamc-muted);
}

.jamc-audit-dot--success { background: var(--jamc-ok); }
.jamc-audit-dot--warning { background: var(--jamc-warn); }
.jamc-audit-dot--danger  { background: var(--jamc-danger); }

/* Cabecera clicable del evento. */
.jamc-audit-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    text-align: start;
    padding: 0.35rem 0.5rem;
    margin-inline: -0.5rem;
    border-radius: var(--jamc-radius-chip);
    transition: background-color 140ms var(--jamc-ease);
}

.jamc-audit-head:hover,
.jamc-audit-head:focus-visible {
    background-color: var(--jamc-row-hover);
}

.jamc-audit-title {
    font-weight: 600;
    letter-spacing: -0.005em;
    text-wrap: pretty;
}

/* Quien y cuando: la hora en cifras tabulares para que los eventos alineen. */
.jamc-audit-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: var(--jamc-muted);
}

.jamc-audit-meta time {
    font-variant-numeric: tabular-nums;
}

.jamc-audit-chevron {
    flex: 0 0 auto;
    margin-top: 0.35rem;
    color: var(--jamc-muted);
    transition: transform 200ms var(--jamc-ease);
}

/* Nivel 3: el detalle del evento. */
.jamc-audit-detail {
    margin-top: 0.6rem;
    padding: 0.85rem;
    border-radius: var(--jamc-radius-panel);
    background: var(--jamc-surface-2);
    box-shadow: inset 0 0 0 1px var(--jamc-hairline);
}

/* La tabla Campo | Antes → Despues la emite PresentsAudit::formatAuditChanges()
   como HTML. Ahora cada celda trae su clase (jamc-audit-field / -before / -after);
   el color semantico (rojo=antes, verde=despues) vive aqui con variantes
   claro/oscuro. Sin colores en linea → ya no hace falta !important. */
.jamc-audit-detail table {
    font-variant-numeric: tabular-nums;
}

.jamc-audit-detail th {
    border-bottom: 1px solid var(--jamc-hairline-strong) !important;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--jamc-muted) !important;
}

.jamc-audit-detail tbody tr + tr td {
    border-top: 1px solid var(--jamc-hairline);
}

/* Nombre del campo, valor anterior y valor nuevo: por CLASE (robusto ante cambios
   de orden de columnas), semanticos, no del acento. La flecha (3.ª celda) queda
   tenue por posicion (no lleva clase). */
.jamc-audit-detail .jamc-audit-field  { font-weight: 600; }
.jamc-audit-detail .jamc-audit-before { color: var(--jamc-danger-strong); }
.jamc-audit-detail .jamc-audit-after  { color: var(--jamc-ok-strong); }
.jamc-audit-detail td:nth-child(3)    { color: var(--jamc-muted); }

/* Origen tecnico: informacion de segundo plano, colapsada. */
.jamc-audit-origin {
    margin-top: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--jamc-hairline);
}

.jamc-audit-origin__toggle {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--jamc-muted);
    transition: color 140ms var(--jamc-ease);
}

.jamc-audit-origin__toggle:hover {
    color: var(--jamc-accent-strong);
}

.jamc-audit-origin__toggle svg {
    transition: transform 200ms var(--jamc-ease);
}

.jamc-audit-origin__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
    margin-top: 0.65rem;
    font-size: 0.75rem;
}

@media (min-width: 640px) {
    .jamc-audit-origin__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.jamc-audit-origin__grid dt {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--jamc-muted);
}

.jamc-audit-origin__grid dd {
    margin-top: 0.1rem;
    word-break: break-word;
}

.jamc-audit-empty {
    padding: 1.5rem 0.25rem;
    font-size: 0.875rem;
    color: var(--jamc-muted);
}

/* ====== prefers-reduced-motion ====== */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .fi-btn,
    .fi-input-wrp,
    .fi-section,
    .fi-ta-row,
    .fi-tabs-item,
    .fi-dropdown-list-item,
    .fi-fo-repeater-item,
    .fi-sidebar-item-button,
    .jamc-audit-toggle,
    .jamc-audit-head,
    .jamc-audit-origin__toggle {
        transition: none !important;
    }

    /* Los chevrones siguen ROTANDO (indican abierto/cerrado: es informacion, no
       decoracion), pero sin animar la transicion. */
    .jamc-audit-chevron,
    .jamc-audit-origin__toggle svg {
        transition: none !important;
    }

    /* El vendor pone `transition duration-75` inline en el item y su label/icono;
       bajo reduced-motion tampoco deben animar el cambio de color. */
    .fi-tabs-item-label,
    .fi-tabs-item-icon {
        transition: none !important;
    }

    .fi-btn:active {
        transform: none;
    }

    .fi-main {
        animation: none !important;
    }

    .fi-simple-main {
        animation: none !important;
    }

    .fi-simple-main .fi-btn.fi-color-primary:hover {
        transform: none;
    }

    /* Checklist SRI: fuera transiciones y la micro-entrada del check.
       Los spinners de "en proceso" (animate-spin del vendor) SON funcionales
       → NO se tocan: deben seguir girando para indicar actividad. */
    .jamc-sri-step,
    .jamc-sri-file {
        transition: none !important;
    }

    .jamc-sri-file:hover {
        transform: none;
    }

    .jamc-sri-ic--done {
        animation: none !important;
    }
}

/* ==========================================================================
   DASHBOARD (absorbido desde el antiguo dashboard-pilot.css)
   ==========================================================================
   Pantalla piloto del rediseño. Afecta solo a los widgets fi-wi-stats-overview /
   fi-wi-chart y al selector de mes (.dash-month-toggle) del Dashboard; cualquier
   pagina que reuse esos widgets hereda la convencion. Va al FINAL de la base
   (ultima seccion) para conservar la cascada: antes se cargaba como hoja
   independiente despues de la base; ahora es la ultima seccion de la base. Sus
   selectores (fi-wi-*, dash-*, choices) no colisionan con jamc-theme-admin.css
   (fi-topbar*, jamc-report*, jamc-rt*, jamc-level*, jamc-cuadre*, jamc-total*),
   que se carga despues; y su mayor especificidad (.dash-month-toggle.fi-input-wrp)
   sigue ganando sobre las reglas .fi-input-wrp de la base. Modos claro/oscuro via
   :root.dark. Animaciones anuladas bajo prefers-reduced-motion (al final). */

.fi-wi-stats-overview-stats-ctn,
.fi-wi-chart,
.dash-month-toggle {
    font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
}

/* ===== Tarjetas de estadísticas ===== */

.fi-wi-stats-overview-stats-ctn {
    gap: 1.25rem;
}

.fi-wi-stats-overview-stat {
    position: relative;
    overflow: hidden;
    border: none;
    border-radius: 1.25rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(250, 250, 250, 1) 100%);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 6px 16px -10px rgba(15, 23, 42, 0.1);
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1);
    animation: dash-fade-in-up 420ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.fi-wi-stats-overview-stat::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.035;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

:root.dark .fi-wi-stats-overview-stat {
    background: linear-gradient(180deg, rgba(24, 24, 27, 1) 0%, rgba(20, 20, 23, 1) 100%);
    box-shadow: 0 1px 2px rgba(10, 8, 6, 0.3), 0 6px 18px -10px rgba(10, 8, 6, 0.45);
}

.fi-wi-stats-overview-stat::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--dash-accent, #94a3b8);
    opacity: 0.9;
}

.fi-wi-stats-overview-stat.dash-stat-sales {
    --dash-accent: linear-gradient(90deg, #14b8a6, #2dd4bf);
}

.fi-wi-stats-overview-stat.dash-stat-iva {
    --dash-accent: linear-gradient(90deg, #ea580c, #f97316);
}

.fi-wi-stats-overview-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(15, 23, 42, 0.07), 0 14px 28px -12px rgba(15, 23, 42, 0.18);
}

:root.dark .fi-wi-stats-overview-stat:hover {
    box-shadow: 0 4px 10px rgba(10, 8, 6, 0.35), 0 16px 32px -14px rgba(10, 8, 6, 0.5);
}

.fi-wi-stats-overview-stats-ctn > *:nth-child(2) {
    animation-delay: 70ms;
}

.fi-wi-stats-overview-stat-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.fi-wi-stats-overview-stat-value {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    font-size: 1.85rem;
    font-weight: 700 !important;
}

.fi-wi-stats-overview-stat-icon {
    box-sizing: content-box;
    padding: 0.55rem;
    border-radius: 9999px;
    background: rgba(148, 163, 184, 0.12);
}

.dash-stat-sales .fi-wi-stats-overview-stat-icon {
    background: #ccfbf1;
    color: #0d9488 !important;
}

.dash-stat-iva .fi-wi-stats-overview-stat-icon {
    background: #ffedd5;
    color: #ea580c !important;
}

:root.dark .dash-stat-sales .fi-wi-stats-overview-stat-icon {
    background: rgba(19, 78, 74, 0.3);
    color: #2dd4bf !important;
}

:root.dark .dash-stat-iva .fi-wi-stats-overview-stat-icon {
    background: rgba(124, 45, 18, 0.3);
    color: #fb923c !important;
}

/* Insignia de cambio (%): solo aparece cuando hay un porcentaje real
   calculado (StatsOverview::cambioPorcentual); nunca es un valor fijo. El
   estilo de "píldora" se limita a las 3 variantes de color de la insignia
   (no al texto descriptivo gris por defecto, que no debe verse como badge). */
.fi-wi-stats-overview-stat-description.fi-color-success,
.fi-wi-stats-overview-stat-description.fi-color-warning,
.fi-wi-stats-overview-stat-description.fi-color-danger {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.65rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.75rem;
}

.fi-wi-stats-overview-stat-description.fi-color-success {
    background: #dcfce7;
    color: #15803d !important;
}

.fi-wi-stats-overview-stat-description.fi-color-warning {
    background: #fef3c7;
    color: #b45309 !important;
}

.fi-wi-stats-overview-stat-description.fi-color-danger {
    background: #fee2e2;
    color: #b91c1c !important;
}

:root.dark .fi-wi-stats-overview-stat-description.fi-color-success {
    background: rgba(21, 128, 61, 0.25);
    color: #4ade80 !important;
}

:root.dark .fi-wi-stats-overview-stat-description.fi-color-warning {
    background: rgba(180, 83, 9, 0.25);
    color: #fbbf24 !important;
}

:root.dark .fi-wi-stats-overview-stat-description.fi-color-danger {
    background: rgba(185, 28, 28, 0.25);
    color: #f87171 !important;
}

/* ===== Gráfico de tendencia ===== */

.fi-wi-chart {
    animation: dash-fade-in-up 420ms cubic-bezier(0.16, 1, 0.3, 1) 120ms backwards;
}

.fi-wi-chart .fi-section {
    border: none;
    border-radius: 1.25rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 6px 16px -10px rgba(15, 23, 42, 0.1);
    transition: box-shadow 220ms ease;
}

:root.dark .fi-wi-chart .fi-section {
    box-shadow: 0 1px 2px rgba(10, 8, 6, 0.3), 0 6px 18px -10px rgba(10, 8, 6, 0.45);
}

.fi-wi-chart .fi-section:hover {
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.07), 0 16px 32px -14px rgba(15, 23, 42, 0.18);
}

:root.dark .fi-wi-chart .fi-section:hover {
    box-shadow: 0 4px 10px rgba(10, 8, 6, 0.35), 0 16px 32px -14px rgba(10, 8, 6, 0.5);
}

.fi-wi-chart .fi-section-header-heading {
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* ===== Selector de mes (Select desplegable, native(false) → Choices.js) =====
   Mismo lenguaje que las tarjetas: radio grande, sin borde duro, sombra tenue y
   un único acento naranja (coherente con la insignia IVA y la línea del gráfico).
   Todas las clases (.choices__*, .is-highlighted, aria-selected) son las que
   Filament v3.3.47 renderiza vía Choices.js — verificadas en forms/dist. Todo
   acotado a .dash-month-toggle para no alterar ningún otro Select del panel. */

.dash-month-toggle {
    margin-bottom: 0.25rem;
    max-width: 16rem;
}

/* --- Campo cerrado (el wrapper .fi-input-wrp porta el borde/anillo/relleno) --- */
.dash-month-toggle.fi-input-wrp {
    --tw-ring-shadow: 0 0 #0000;
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(250, 250, 250, 1) 100%);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 6px 16px -10px rgba(15, 23, 42, 0.1);
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

:root.dark .dash-month-toggle.fi-input-wrp {
    background: linear-gradient(180deg, rgba(24, 24, 27, 1) 0%, rgba(20, 20, 23, 1) 100%);
    box-shadow: 0 1px 2px rgba(10, 8, 6, 0.3), 0 6px 18px -10px rgba(10, 8, 6, 0.45);
}

.dash-month-toggle.fi-input-wrp:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(15, 23, 42, 0.07), 0 14px 28px -12px rgba(15, 23, 42, 0.18);
}

:root.dark .dash-month-toggle.fi-input-wrp:hover {
    box-shadow: 0 4px 10px rgba(10, 8, 6, 0.35), 0 16px 32px -14px rgba(10, 8, 6, 0.5);
}

/* Foco (teclado o clic): glow del acento en vez del anillo primary de Filament.
   !important para ganarle a la variante focus-within:ring-2 del wrapper. */
.dash-month-toggle.fi-input-wrp:focus-within {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 6px 16px -10px rgba(15, 23, 42, 0.1), 0 0 0 3px rgba(251, 146, 60, 0.4) !important;
}

:root.dark .dash-month-toggle.fi-input-wrp:focus-within {
    box-shadow: 0 1px 2px rgba(10, 8, 6, 0.3), 0 6px 18px -10px rgba(10, 8, 6, 0.45), 0 0 0 3px rgba(251, 146, 60, 0.45) !important;
}

/* Elevación al abrir: Choices.js posiciona su panel como hijo `position:absolute`
   DENTRO del propio campo (.choices es relative), NO lo teletransporta al body; por
   eso su z-index:10 vive en el contexto del campo y compite con las tarjetas vecinas.
   Cada tarjeta/gráfico crea su propio stacking context, así que sin promover el campo
   el dropdown queda atrapado por debajo. Con position:relative + z-index positivo el
   campo (y su panel dentro) se sitúa por encima de cualquier widget hermano al abrir. */
.dash-month-toggle.fi-input-wrp:focus-within,
.dash-month-toggle.fi-input-wrp:has(.choices.is-open) {
    position: relative;
    z-index: 20;
}

.dash-month-toggle .choices__inner {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.dash-month-toggle .choices__list--single .choices__item {
    font-weight: 500;
}

/* --- Panel desplegado: tarjeta flotante (hairline + sombra elevada) --- */
.dash-month-toggle .choices__list--dropdown,
.dash-month-toggle .choices__list[aria-expanded] {
    margin-top: 0.5rem;
    border-radius: 1.1rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(250, 250, 250, 1) 100%);
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.05), 0 8px 20px -6px rgba(15, 23, 42, 0.12), 0 24px 48px -20px rgba(15, 23, 42, 0.28);
}

:root.dark .dash-month-toggle .choices__list--dropdown,
:root.dark .dash-month-toggle .choices__list[aria-expanded] {
    background: linear-gradient(180deg, rgba(28, 28, 31, 1) 0%, rgba(22, 22, 25, 1) 100%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 10px 24px -8px rgba(0, 0, 0, 0.5), 0 28px 56px -22px rgba(0, 0, 0, 0.7);
}

.dash-month-toggle .is-active.choices__list--dropdown,
.dash-month-toggle .is-active.choices__list[aria-expanded] {
    padding: 0.375rem;
    animation: dash-select-pop 160ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* --- Opciones --- */
.dash-month-toggle .choices__item--choice {
    padding: 0.5rem 0.7rem;
    font-weight: 500;
    border-radius: 0.7rem;
    transition: background-color 120ms ease, color 120ms ease;
}

/* Mes actualmente elegido (Choices marca aria-selected en la opción activa) */
.dash-month-toggle .choices__list--dropdown .choices__item--choice[aria-selected='true'],
.dash-month-toggle .choices__list[aria-expanded] .choices__item--choice[aria-selected='true'] {
    color: #ea580c;
    font-weight: 600;
    background: rgba(249, 115, 22, 0.08);
}

:root.dark .dash-month-toggle .choices__list--dropdown .choices__item--choice[aria-selected='true'],
:root.dark .dash-month-toggle .choices__list[aria-expanded] .choices__item--choice[aria-selected='true'] {
    color: #fb923c;
    background: rgba(249, 115, 22, 0.14);
}

/* Opción bajo el cursor / navegación por teclado: acento, no el gris de Filament.
   Va después de la regla aria-selected para que el hover gane sobre el mes activo. */
.dash-month-toggle .choices__list--dropdown .choices__item--selectable.is-highlighted,
.dash-month-toggle .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background: rgba(249, 115, 22, 0.12);
    color: #c2410c;
}

:root.dark .dash-month-toggle .choices__list--dropdown .choices__item--selectable.is-highlighted,
:root.dark .dash-month-toggle .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background: rgba(249, 115, 22, 0.18);
    color: #fdba74;
}

/* Scrollbar fina del panel (cuando los 12 meses exceden la altura) */
.dash-month-toggle .choices__list--dropdown .choices__list {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.5) transparent;
}

.dash-month-toggle .choices__list--dropdown .choices__list::-webkit-scrollbar {
    width: 8px;
}

.dash-month-toggle .choices__list--dropdown .choices__list::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.45);
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

@keyframes dash-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes dash-select-pop {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fi-wi-stats-overview-stat,
    .fi-wi-chart,
    .dash-month-toggle .is-active.choices__list--dropdown,
    .dash-month-toggle .is-active.choices__list[aria-expanded] {
        animation: none;
    }

    .fi-wi-stats-overview-stat:hover,
    .dash-month-toggle.fi-input-wrp:hover {
        transform: none;
    }

    .dash-month-toggle.fi-input-wrp,
    .dash-month-toggle .choices__item--choice {
        transition: none;
    }
}