/*
 * Superficies cálidas del modo CLARO de Studio y Platform (Manual de Marca, Figma «Stamless-CMS-Headless»,
 * sección 04 Color y 07 Aplicación; ADR-064):
 *   · Papel #FAF7F2 · Tinta #171412 · Gris cálido #8A8175 · Oscuro #1C1917
 *   · «Fondos en papel y oscuro cálido; nunca negro puro» · reparto 60 · 30 · 10.
 * Filament trae blancos puros y grises fríos/azulados; aquí se reemplazan por la escala cálida de la marca.
 * Modo claro (`html:not(.dark)`): tres capas para que no canse la vista — fondo de página (papel
 * sombreado) → superficies (papel) → campos (papel claro).
 * Modo oscuro (`html.dark`, al final): superficie Oscuro #1C1917, página un tono más profundo (nunca
 * negro puro), texto en Papel y gris cálido #8A8175 solo para metadatos.
 * Archivo plano, sin build: los colores de Filament son variables completas (`var(--gray-N)`).
 */
html:not(.dark) {
    --sl-ink: #171412;
    --sl-paper: #FAF7F2;
    --sl-page: #F1ECE3;      /* lienzo del contenido: papel un tono más profundo */
    --sl-surface: #FAF7F2;   /* Papel exacto del manual: marco (barra superior + sidebar), tarjetas, tablas, modales */
    --sl-field: #FEFCF8;     /* campos de formulario: apenas más claros que su tarjeta */
    --sl-line: color-mix(in oklab, #171412 10%, transparent);

    /* Escala de grises cálida (50 = Papel · 400 = Gris cálido · 950 = Tinta). */
    --gray-50: #FAF7F2;
    --gray-100: #F1ECE3;
    --gray-200: #E4DDD0;
    --gray-300: #D0C7B8;
    --gray-400: #8A8175;     /* Gris cálido de la marca: iconos, placeholders y metadatos (≈3.5:1) */
    --gray-500: #70675B;     /* Texto secundario de Filament (descripciones): 5.0:1 sobre las superficies, cumple AA */
    --gray-600: #6B6358;
    --gray-700: #514A41;
    --gray-800: #383229;
    --gray-900: #25201B;
    --gray-950: #171412;
}

html:not(.dark) body,
html:not(.dark) .fi-body {
    background-color: var(--sl-page);
    color: var(--sl-ink);
}

html:not(.dark) .fi-topbar,
html:not(.dark) .fi-topbar > nav {
    background-color: var(--sl-surface);
    box-shadow: none;
    border-bottom: 1px solid var(--sl-line);
}

/* Marco continuo: barra superior + sidebar en Papel, con una línea fina entre el marco y el lienzo. */
html:not(.dark) .fi-sidebar,
html:not(.dark) .fi-sidebar-header {
    background-color: var(--sl-surface);
}

@media (min-width: 1024px) {
    html:not(.dark) .fi-sidebar { border-inline-end: 1px solid var(--sl-line); }
}

html:not(.dark) .fi-section,
html:not(.dark) .fi-ta-ctn,
html:not(.dark) .fi-wi-stats-overview-stat,
html:not(.dark) .fi-modal-window,
html:not(.dark) .fi-dropdown-panel,
html:not(.dark) .fi-no-notification,
html:not(.dark) .fi-global-search-results-ctn {
    background-color: var(--sl-surface);
    --tw-ring-color: var(--sl-line);
    box-shadow: 0 0 0 1px var(--sl-line), 0 1px 2px color-mix(in oklab, #171412 6%, transparent);
}

html:not(.dark) .fi-modal-window .fi-modal-header,
html:not(.dark) .fi-modal-window .fi-modal-footer { background-color: var(--sl-surface); }

html:not(.dark) .fi-ta-header-cell,
html:not(.dark) .fi-ta-table thead tr { background-color: var(--sl-page); }

html:not(.dark) .fi-input-wrp,
html:not(.dark) .fi-fo-select .fi-input-wrp,
html:not(.dark) .fi-fo-file-upload .filepond--panel-root {
    background-color: var(--sl-field);
}

html:not(.dark) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: color-mix(in oklab, var(--primary-600) 10%, transparent);
}

html:not(.dark) .fi-ta-row:hover,
html:not(.dark) .fi-dropdown-list-item:hover { background-color: var(--sl-page); }

/* ───────────────────────── Modo oscuro ───────────────────────── */
html.dark {
    --sl-page-dark: #151210;      /* fondo de la página (más profundo que la superficie) */
    --sl-surface-dark: #1C1917;   /* «Oscuro» del manual: tarjetas, tablas, barra superior, modales */
    --sl-line-dark: color-mix(in oklab, #FAF7F2 11%, transparent);

    /* Escala cálida: 900 = Oscuro de marca · 500 = Gris cálido de marca (4.56:1 sobre Oscuro) · 50 = Papel. */
    --gray-50: #FAF7F2;
    --gray-100: #EFEAE1;
    --gray-200: #E2DCD1;
    --gray-300: #C9C1B5;
    --gray-400: #A89F93;   /* texto secundario de Filament: 6.7:1 sobre Oscuro */
    --gray-500: #8A8175;
    --gray-600: #5A5249;
    --gray-700: #3D3731;
    --gray-800: #2A2521;
    --gray-900: #1C1917;
    --gray-950: #151210;
}

html.dark body,
html.dark .fi-body {
    background-color: var(--sl-page-dark);
    color: var(--gray-50);
}

html.dark .fi-topbar,
html.dark .fi-topbar > nav {
    background-color: var(--sl-surface-dark);
    box-shadow: none;
    border-bottom: 1px solid var(--sl-line-dark);
}

/* Mismo marco continuo que en claro: barra superior + sidebar en Oscuro, contenido en el fondo más profundo. */
html.dark .fi-sidebar,
html.dark .fi-sidebar-header { background-color: var(--sl-surface-dark); }

@media (min-width: 1024px) {
    html.dark .fi-sidebar { border-inline-end: 1px solid var(--sl-line-dark); }
}

html.dark .fi-section,
html.dark .fi-ta-ctn,
html.dark .fi-wi-stats-overview-stat,
html.dark .fi-modal-window,
html.dark .fi-dropdown-panel,
html.dark .fi-no-notification,
html.dark .fi-global-search-results-ctn {
    background-color: var(--sl-surface-dark);
    box-shadow: 0 0 0 1px var(--sl-line-dark);
}

html.dark .fi-ta-header-cell,
html.dark .fi-ta-table thead tr { background-color: color-mix(in oklab, #FAF7F2 4%, var(--sl-surface-dark)); }

html.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: color-mix(in oklab, var(--primary-400) 14%, transparent);
}

html.dark .fi-ta-row:hover,
html.dark .fi-dropdown-list-item:hover { background-color: color-mix(in oklab, #FAF7F2 5%, transparent); }

/* Widgets de estadísticas: el contenedor que agrupa las tarjetas NO es una tarjeta (cada KPI ya lo es). */
html:not(.dark) .fi-wi-stats-overview .fi-section,
html.dark .fi-wi-stats-overview .fi-section {
    background-color: transparent;
    box-shadow: none;
    border: 0;
}