/**
 * Design System Tokens — Tema Base, Modo Claro y Oscuro (V1 + V2)
 * Origen único de verdad para Filament Admin y PWA Asistencia Móvil.
 * Ningún componente debe usar colores hexadecimales literales; todos consumen estos tokens.
 */

/* Outfit autoalojada (Tarea 140a): woff2 propios en public/fonts/outfit/ (SIL OFL, ver OFL.txt).
   Filament usa ->font('Outfit', provider: LocalFontProvider::class) y no pide nada a Bunny ni a Google. */
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/outfit/outfit-400.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: 500;
    font-display: swap;
    src: url('../fonts/outfit/outfit-500.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: 600;
    font-display: swap;
    src: url('../fonts/outfit/outfit-600.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: 700;
    font-display: swap;
    src: url('../fonts/outfit/outfit-700.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;
}

:root {
    /* Tipografía unificada con Jarvis: Outfit */
    --cletus-font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --cletus-font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Tooltip de tipos de incidencia (Tarea 122): oscuro fijo en claro y oscuro, por eso no usa --cletus-surface */
    --cletus-tooltip-bg: #1A1A1A;
    --cletus-tooltip-border: #292929;
    --cletus-tooltip-text: #E2E8F0;
    --cletus-tooltip-title: #38BDF8;

    /* Modo Claro (Valores Base) */
    --cletus-bg-paper: #F5F3F1;
    --cletus-bg-paper-rgb: 245, 243, 241;
    --cletus-bg-sidebar: #F5F3F1;
    --cletus-bg-sidebar-rgb: 245, 243, 241;
    --cletus-bg-topbar: #F5F3F1;
    --cletus-bg-topbar-rgb: 245, 243, 241;
    --cletus-surface: #FFFFFF;
    --cletus-surface-rgb: 255, 255, 255;
    --cletus-surface-subtle: #ECE9E5;
    --cletus-surface-subtle-rgb: 236, 233, 229;
    --cletus-text: #23211F;
    --cletus-text-rgb: 35, 33, 31;
    --cletus-text-muted: #5C5854;
    --cletus-text-muted-rgb: 92, 88, 84;
    --cletus-border: #E4E0DB;
    --cletus-border-rgb: 228, 224, 219;
    --cletus-border-subtle: #EFECE8;

    /* Acentos por Módulo — Modo Claro */
    --cletus-accent-recruitment: #1F6F5C;
    --cletus-accent-recruitment-rgb: 31, 111, 92;
    --cletus-accent-fleet: #8C6510;
    --cletus-accent-fleet-rgb: 140, 101, 16;
    --cletus-accent-attendance: #3D3A8C;
    --cletus-accent-attendance-rgb: 61, 58, 140;

    /* Acento Activo por Defecto (Reclutamiento / Núcleo) */
    --cletus-accent: var(--cletus-accent-recruitment);
    --cletus-accent-rgb: var(--cletus-accent-recruitment-rgb);
    --cletus-accent-contrast: #FFFFFF;

    /* Botón de Marcación Asistencia — Modo Claro */
    --cletus-punch-bg: #3D3A8C;
    --cletus-punch-hover: #343075;
    --cletus-punch-text: #FFFFFF;
    --cletus-punch-subtext: #EDEAE6;
    --cletus-punch-border: rgba(61, 58, 140, 0.4);
    --cletus-punch-pulse: rgba(61, 58, 140, 0.25);

    /* Estados y Alertas — Modo Claro */
    --cletus-status-warning-bg: #FEF3C7;
    --cletus-status-warning-text: #78350F;
    --cletus-status-warning-border: #D97706;
    --cletus-status-success-bg: #D1FAE5;
    --cletus-status-success-text: #064E3B;
    --cletus-status-success-border: #059669;
    --cletus-status-danger-bg: #FEE2E2;
    --cletus-status-danger-text: #7F1D1D;
    --cletus-status-danger-border: #DC2626;
    --cletus-status-info-bg: #DBEAFE;
    --cletus-status-info-text: #1E3A8A;
    --cletus-status-info-border: #2563EB;

    /* Sincronización Primary Filament */
    --primary-400: 62, 168, 140;
    --primary-500: 31, 111, 92;
    --primary-600: 26, 93, 77;
}

/* Tarea 156: valores por defecto del acento por módulo (el <head> los sustituye con lo que declara cada módulo), geometría compartida y Jarvis en claro */
:root {
    --module-accent: #6B7280;
    --module-accent-rgb: 107, 114, 128;
    --module-section-radius: 0.75rem;
    --module-section-stripe: 3px;
    --module-title-icon-size: 1.15em;
    --jarvis-bar-light: #EEF0F4;
    --jarvis-title-light: #4F46E5;
}

/* Modo Oscuro — Neutros Claude (Tarea 135) */
.dark, [data-theme="dark"], :root[class~="dark"] {
    color-scheme: dark;
    --cletus-bg-paper: #151515;       /* Área principal: #151515 */
    --cletus-bg-paper-rgb: 21, 21, 21;
    --cletus-bg-sidebar: #111111;     /* Barra lateral y topbar: #111111 */
    --cletus-bg-sidebar-rgb: 17, 17, 17;
    --cletus-bg-topbar: #111111;
    --cletus-bg-topbar-rgb: 17, 17, 17;
    --cletus-surface: #1A1A1A;        /* Tarjetas, paneles, modales y formularios: #1A1A1A */
    --cletus-surface-rgb: 26, 26, 26;
    --cletus-surface-subtle: #222222;  /* Superficies secundarias */
    --cletus-surface-subtle-rgb: 34, 34, 34;
    --cletus-text: #ECEAE6;           /* Texto principal hueso Claude: #ECEAE6 */
    --cletus-text-rgb: 236, 234, 230;
    --cletus-text-muted: #A3A09A;     /* Texto secundario (contraste 6.64:1 >= 4.5:1 sobre #1A1A1A) */
    --cletus-text-muted-rgb: 163, 160, 154;
    --cletus-border: #292929;         /* Bordes y divisores: #292929 */
    --cletus-border-rgb: 41, 41, 41;
    --cletus-border-subtle: #242424;
    --cletus-border-subtle-rgb: 36, 36, 36;

    /* Acentos por Módulo — Modo Oscuro (Sin cambios) */
    --cletus-accent-recruitment: #3EA88C;
    --cletus-accent-recruitment-rgb: 62, 168, 140;
    --cletus-accent-fleet: #D49D24; /* versión aclarada con ratio > 4.5:1 */
    --cletus-accent-fleet-rgb: 212, 157, 36;
    --cletus-accent-attendance: #8F8BDA;
    --cletus-accent-attendance-rgb: 143, 139, 218;

    /* Acento Activo por Defecto */
    --cletus-accent: var(--cletus-accent-recruitment);
    --cletus-accent-rgb: var(--cletus-accent-recruitment-rgb);
    --cletus-accent-contrast: #151515;

    /* Botón de Marcación Asistencia — Modo Oscuro */
    --cletus-punch-bg: #322F75;
    --cletus-punch-hover: #3D3A8C;
    --cletus-punch-text: #FFFFFF;
    --cletus-punch-subtext: #ECEAE6;
    --cletus-punch-border: #8F8BDA;
    --cletus-punch-pulse: rgba(143, 139, 218, 0.30);

    /* Estados y Alertas — Modo Oscuro */
    --cletus-status-warning-bg: #451A03;
    --cletus-status-warning-text: #FEF08A;
    --cletus-status-warning-border: #B45309;
    --cletus-status-success-bg: #064E3B;
    --cletus-status-success-text: #A7F3D0;
    --cletus-status-success-border: #10B981;
    --cletus-status-danger-bg: #7F1D1D;
    --cletus-status-danger-text: #FECACA;
    --cletus-status-danger-border: #EF4444;
    --cletus-status-info-bg: #1E293B;
    --cletus-status-info-text: #BAE6FD;
    --cletus-status-info-border: #0284C7;

    --primary-400: 62, 168, 140;
    --primary-500: 31, 111, 92;
    --primary-600: 26, 93, 77;
}

/* Acentos dinámicos por Módulo */
[data-module="recruitment"] {
    --cletus-accent: var(--cletus-accent-recruitment);
    --cletus-accent-rgb: var(--cletus-accent-recruitment-rgb);
    --primary-400: 62, 168, 140;
    --primary-500: 31, 111, 92;
    --primary-600: 26, 93, 77;
}

[data-module="fleet"] {
    --cletus-accent: var(--cletus-accent-fleet);
    --cletus-accent-rgb: var(--cletus-accent-fleet-rgb);
    --primary-400: 212, 157, 36;
    --primary-500: 140, 101, 16;
    --primary-600: 115, 82, 13;
}

[data-module="attendance"] {
    --cletus-accent: var(--cletus-accent-attendance);
    --cletus-accent-rgb: var(--cletus-accent-attendance-rgb);
    --primary-400: 143, 139, 218;
    --primary-500: 61, 58, 140;
    --primary-600: 47, 44, 110;
}

[data-module="payroll"] {
    --cletus-accent: var(--cletus-accent-recruitment);
    --cletus-accent-rgb: var(--cletus-accent-recruitment-rgb);
    --primary-400: 62, 168, 140;
    --primary-500: 31, 111, 92;
    --primary-600: 26, 93, 77;
}

/* ==========================================================================
   Superficies y Contenedores Compartidos (Modo Claro y Modo Oscuro)
   ========================================================================== */

/* Fondo papel y texto base de la aplicación consumiendo tokens */
:root:root body.fi-body {
    background-color: var(--cletus-bg-paper);
    color: var(--cletus-text);
}

/* Superficies y contenedores en modo claro */
html:not(.dark):root .fi-main {
    background-color: var(--cletus-bg-paper);
}

html:not(.dark):root .fi-topbar, html:not(.dark):root .fi-topbar nav, html:not(.dark):root .fi-sidebar, html:not(.dark):root .fi-sidebar-header {
    background-color: var(--cletus-bg-sidebar);
}

html:not(.dark):root .fi-section, html:not(.dark):root .fi-ta-ctn, html:not(.dark):root .fi-modal-window, html:not(.dark):root .fi-dropdown-panel, html:not(.dark):root .fi-fo-tabs, html:not(.dark):root .fi-tabs {
    background-color: var(--cletus-surface);
    border-color: var(--cletus-border);
}

/* Modo Oscuro — Neutros Claude */
/* Área principal: #151515 */
html.dark:root body.fi-body, html.dark:root .fi-main {
    background-color: var(--cletus-bg-paper);
    color: var(--cletus-text);
}

/* Barra lateral y topbar: #111111 */
html.dark:root .fi-topbar, html.dark:root .fi-topbar nav, html.dark:root .fi-sidebar, html.dark:root .fi-sidebar-header, html.dark:root aside.fi-sidebar {
    background-color: var(--cletus-bg-sidebar);
    border-color: var(--cletus-border);
    color: var(--cletus-text);
}

/* Tarjetas, paneles, modales y formularios: #1A1A1A (elimina azul marino #111729 / #1D2334) */
html.dark:root .fi-section, html.dark:root .fi-ta-ctn, html.dark:root .fi-modal-window, html.dark:root .fi-dropdown-panel, html.dark:root .fi-fo-tabs, html.dark:root .fi-tabs, html.dark:root .choices__list--dropdown, html.dark:root .fi-fo-field-wrp, html.dark:root .fi-fo-wizard-step {
    background-color: var(--cletus-surface);
    border-color: var(--cletus-border);
    color: var(--cletus-text);
}

/* Bordes y divisores: #292929 */
html.dark hr,
html.dark .fi-topbar,
html.dark .fi-topbar nav,
html.dark .fi-sidebar,
html.dark .fi-sidebar-header,
html.dark aside.fi-sidebar,
html.dark .fi-section,
html.dark .fi-ta-ctn,
html.dark .fi-modal-window,
html.dark .fi-dropdown-panel,
html.dark .fi-fo-tabs,
html.dark .fi-tabs,
html.dark .fi-ta-row,
html.dark .fi-ta-header-cell,
html.dark .fi-ta-cell {
    border-color: var(--cletus-border) !important;
}

/* ==========================================================================
   Controles y Formularios con Neutros Claude en Modo Oscuro (Tarea 136)
   ========================================================================== */

/* Interruptores y toggles apagados (ej. ¿Ha sido reparado?, alertas de flotilla) */
html.dark:root .fi-fo-toggle:not([aria-checked="true"]), html.dark:root button[role="switch"]:not([aria-checked="true"]), html.dark:root .fi-fo-toggle.bg-gray-200, html.dark:root button[role="switch"].bg-gray-200 {
    background-color: var(--cletus-border);
    border-color: var(--cletus-border) !important;
}

/* Checkboxes y Radios */
html.dark:root .fi-checkbox-input:not(:checked), html.dark:root input[type="checkbox"]:not(:checked) {
    background-color: var(--cletus-surface);
    border-color: var(--cletus-border) !important;
    --tw-ring-color: var(--cletus-border);
}

html.dark:root .fi-radio-input:not(:checked), html.dark:root input[type="radio"]:not(:checked) {
    background-color: var(--cletus-surface);
    border-color: var(--cletus-border);
    --tw-ring-color: var(--cletus-border);
}

/* Envoltorios de inputs y selectores en modo oscuro */
html.dark:root .fi-input-wrp {
    background-color: var(--cletus-surface);
    border-color: var(--cletus-border) !important;
    --tw-ring-color: var(--cletus-border) !important;
}

html.dark:root .fi-fo-select, html.dark:root select, html.dark:root .fi-select-input {
    background-color: var(--cletus-surface) !important;
    border-color: var(--cletus-border) !important;
    color: var(--cletus-text);
}

html.dark:root select option {
    background-color: var(--cletus-surface);
    color: var(--cletus-text);
}

html.dark:root .choices__inner {
    background-color: var(--cletus-surface);
    border-color: var(--cletus-border) !important;
    color: var(--cletus-text);
}

html.dark:root .choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: var(--cletus-surface-subtle);
    color: var(--cletus-text);
}

/* ==========================================================================
   Paneles Flotantes, Dropdowns, Datepickers y Modales en Modo Oscuro (Tarea 137)
   ========================================================================== */

/* 1. Menús Desplegables de Filament (.fi-dropdown-panel) y Menús de Acciones */
html.dark:root .fi-dropdown-panel {
    background-color: var(--cletus-surface);
    border: 1px solid var(--cletus-border);
    color: var(--cletus-text);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.6);
}

html.dark:root .fi-dropdown-header {
    border-color: var(--cletus-border);
    color: var(--cletus-text-muted);
}

html.dark:root .fi-dropdown-list-item {
    color: var(--cletus-text);
}

html.dark:root .fi-dropdown-list-item:hover, html.dark:root .fi-dropdown-list-item:focus, html.dark:root .fi-dropdown-list-item:focus-visible {
    background-color: var(--cletus-surface-subtle);
    color: var(--cletus-text);
}

html.dark:root .fi-dropdown-list-item-label {
    color: var(--cletus-text);
}

html.dark:root .fi-dropdown-list-item-icon {
    color: var(--cletus-text-muted);
}

html.dark:root .fi-dropdown-list-item.fi-color-danger .fi-dropdown-list-item-label, html.dark:root .fi-dropdown-list-item[class*="text-danger-"] .fi-dropdown-list-item-label {
    color: rgb(252, 165, 165); /* red-300: ratio 7.6:1 */
}

/* 2. Choices.js Dropdown List en Modo Oscuro */
html.dark:root .choices__list--dropdown {
    background-color: var(--cletus-surface);
    border: 1px solid var(--cletus-border) !important;
    color: var(--cletus-text);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6);
}

html.dark:root .choices__list--dropdown .choices__item {
    color: var(--cletus-text);
    background-color: transparent;
}

html.dark:root .choices__list--dropdown .choices__item--selectable:hover, html.dark:root .choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: var(--cletus-surface-subtle);
    color: var(--cletus-text);
}

html.dark:root .choices__list--dropdown .choices__input {
    background-color: var(--cletus-surface) !important;
    border-color: var(--cletus-border) !important;
    color: var(--cletus-text);
}

/* 3. Popovers de Filtros de Tabla (.fi-ta-filters) */
html.dark:root .fi-ta-filters-dropdown .fi-dropdown-panel, html.dark:root .fi-ta-filters {
    background-color: var(--cletus-surface);
    border-color: var(--cletus-border);
    color: var(--cletus-text);
}

html.dark:root .fi-ta-filters h4 {
    color: var(--cletus-text);
}

/* 4. Datepickers en Modo Oscuro (Filament y Reporte de Costos) */
html.dark:root .fi-fo-date-time-picker-panel, html.dark:root .cost-report-datepicker-panel {
    background-color: var(--cletus-surface);
    border: 1px solid var(--cletus-border);
    color: var(--cletus-text);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6);
}

html.dark:root .cost-report-datepicker-panel #datepicker-header-month, html.dark:root #datepicker-header-month {
    color: var(--cletus-text);
}

html.dark:root .cost-report-datepicker-panel button[id*="datepicker-day-"] {
    color: var(--cletus-text);
}

html.dark:root .cost-report-datepicker-panel button#datepicker-day-15 {
    background-color: var(--cletus-border);
    color: var(--cletus-text);
}

html.dark:root .cost-report-datepicker-panel button[id*="datepicker-day-"]:hover {
    background-color: var(--cletus-surface-subtle);
}

html.dark:root .fi-fo-date-time-picker-panel select, html.dark:root .fi-fo-date-time-picker-panel input {
    background-color: var(--cletus-surface);
    border-color: var(--cletus-border);
    color: var(--cletus-text);
}

html.dark:root .fi-fo-date-time-picker-panel [role="option"] {
    color: var(--cletus-text);
}

html.dark:root .fi-fo-date-time-picker-panel [role="option"]:hover, html.dark:root .fi-fo-date-time-picker-panel [role="option"][aria-selected="true"] {
    background-color: var(--cletus-surface-subtle);
    color: var(--cletus-text);
}

html.dark:root input[type="date"], html.dark:root input[type="datetime-local"], html.dark:root input[type="time"] {
    background-color: var(--cletus-surface);
    border-color: var(--cletus-border) !important;
    color: var(--cletus-text);
    color-scheme: dark;
}

html.dark:root input[type="date"]::placeholder, html.dark:root input[type="datetime-local"]::placeholder, html.dark:root input[type="time"]::placeholder, html.dark:root input::placeholder, html.dark:root textarea::placeholder {
    color: var(--cletus-text-muted);
    opacity: 1;
}

html.dark:root input[type="date"]::-webkit-calendar-picker-indicator, html.dark:root input[type="datetime-local"]::-webkit-calendar-picker-indicator, html.dark:root input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(0.8);
    cursor: pointer;
}

/* 5. Modales de Confirmación (Filament y Limpieza de Datos Sensibles) */
html.dark:root .fi-modal-window, html.dark:root #confirmation-dialog > div {
    background-color: var(--cletus-surface);
    border: 1px solid var(--cletus-border);
    color: var(--cletus-text);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.7), 0 8px 10px -6px rgba(0, 0, 0, 0.7);
}

html.dark:root #confirmation-dialog h3, html.dark:root #confirmation-dialog label {
    color: var(--cletus-text);
}

html.dark:root #confirmation-dialog input {
    background-color: var(--cletus-surface);
    border-color: var(--cletus-border);
    color: var(--cletus-text);
}

html.dark:root .fi-modal-header, html.dark:root .fi-modal-footer {
    border-color: var(--cletus-border);
}

html.dark:root .fi-modal-heading {
    color: var(--cletus-text);
}

html.dark:root .fi-modal-description {
    color: var(--cletus-text-muted);
}

/* 6. Selector de Incidencias con Dropdown Enriquecido */
html.dark:root #incident-type-dropdown {
    background-color: var(--cletus-surface);
    border: 1px solid var(--cletus-border);
    color: var(--cletus-text);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6);
}

html.dark:root #incident-type-dropdown div, html.dark:root #incident-type-dropdown span {
    color: var(--cletus-text);
}

html.dark:root #incident-type-dropdown [id^="option-"]:hover {
    background-color: var(--cletus-surface-subtle);
    color: var(--cletus-text);
}

html.dark:root #incident-type-dropdown [id^="option-"].font-semibold {
    background-color: #292929;
}

/* 7. Botón Cancelar y Botones Secundarios en Modales de Confirmación (Tarea 138) */
html.dark:root #confirmation-dialog button:not(#purge-confirm-execute-btn), html.dark:root #purge-confirm-cancel-btn, html.dark:root .fi-modal-window button.fi-btn-color-gray, html.dark:root .fi-modal-window .fi-modal-footer button[x-on\:click*="close-modal"], html.dark:root .fi-modal-window .fi-modal-footer button:not(.fi-btn-color-danger):not(.fi-btn-color-primary) {
    color: var(--cletus-text);
    background-color: transparent;
    border: 1px solid var(--cletus-border);
}

html.dark:root #confirmation-dialog button:not(#purge-confirm-execute-btn):hover, html.dark:root #purge-confirm-cancel-btn:hover, html.dark:root .fi-modal-window button.fi-btn-color-gray:hover, html.dark:root .fi-modal-window .fi-modal-footer button[x-on\:click*="close-modal"]:hover, html.dark:root .fi-modal-window .fi-modal-footer button:not(.fi-btn-color-danger):not(.fi-btn-color-primary):hover {
    background-color: var(--cletus-surface-subtle);
    color: var(--cletus-text);
}

/* 8. Tarjeta de Filtros y Atajos Rápidos del Reporte de Costos (Tarea 138) */
html.dark:root #cost-report-filter-card, html.dark:root .cost-report-filter-card {
    background-color: var(--cletus-surface);
    border: 1px solid var(--cletus-border);
    color: var(--cletus-text);
}

html.dark:root #cost-report-filter-card .border-b, html.dark:root .cost-report-filter-card .border-b {
    border-color: var(--cletus-border);
}

html.dark:root #cost-report-filter-card span.uppercase, html.dark:root .cost-report-filter-card .cost-report-preset-label {
    color: var(--cletus-text-muted);
}

html.dark:root #cost-report-filter-card button[wire\:click*="setPeriodPreset"], html.dark:root .cost-report-filter-card button[wire\:click*="setPeriodPreset"] {
    background-color: var(--cletus-surface-subtle);
    color: var(--cletus-text);
    border: 1px solid var(--cletus-border);
}

html.dark:root #cost-report-filter-card button[wire\:click*="setPeriodPreset"]:hover, html.dark:root .cost-report-filter-card button[wire\:click*="setPeriodPreset"]:hover {
    background-color: var(--cletus-border);
    color: var(--cletus-text);
}

html.dark:root #cost-report-filter-card select, html.dark:root .cost-report-filter-card select, html.dark:root #cost-report-filter-card input, html.dark:root .cost-report-filter-card input {
    background-color: var(--cletus-surface);
    border-color: var(--cletus-border);
    color: var(--cletus-text);
}

/* ==========================================================================
   Tarea 093: Barra superior - la marca nunca se encoge y diseño responsivo
   ========================================================================== */

/* 1. La marca nunca se encoge en la barra superior ni en la barra lateral */
:root .fi-topbar .fi-logo, :root .fi-sidebar-header .fi-logo, :root .fi-topbar-brand-ctn, :root .fi-topbar-brand-ctn a, :root .fi-topbar img.fi-logo, :root .fi-sidebar-header img.fi-logo {
    flex-shrink: 0;
    min-width: 108px;
    width: auto;
    height: 26px;
}

:root .fi-topbar nav > div:has(.fi-logo), :root .fi-topbar nav > div:has(a > .fi-logo), :root .fi-topbar nav a:has(.fi-logo) {
    flex-shrink: 0;
    min-width: 108px;
}

/* 2. Selector de empresa: white-space nowrap con recorte y elipsis */
:root .fi-topbar .fi-tenant-menu, :root .fi-topbar .fi-tenant-menu-trigger {
    flex-shrink: 0;
    white-space: nowrap;
}

:root .fi-topbar .fi-tenant-name-container, :root .fi-topbar .fi-tenant-name-container span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
    display: block;
}

/* Píldora de estado activo y radios compartidos */
.fi-badge {
    border-radius: 9999px !important;
}

.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat {
    border-radius: 0.75rem !important;
}

/* 4. Logo del cliente (DEC-11) tampoco se encoge ni empuja el avatar fuera */
:root .fi-tenant-logo-ctn, :root .fi-tenant-logo-ctn img, :root .fi-tenant-logo {
    flex-shrink: 0;
}

:root .fi-topbar nav > div:last-of-type, :root .fi-topbar .fi-user-menu, :root .fi-topbar .fi-user-menu button {
    flex-shrink: 0;
}

/* ==========================================================================
   Tarea 139: Barrido de fondos claros en modo oscuro (tokens compartidos)
   Las vistas de módulos usan utilidades Tailwind claras (bg-white, bg-gray-50,
   bg-slate-100...) cuyas variantes dark: no se compilan. Se mapean aquí a los
   neutros oscuros de Claude para tarjetas KPI, encabezados de tabla, pestañas,
   secciones de formulario y widgets, sin tocar pantalla por pantalla.
   ========================================================================== */
html.dark :is(.fi-main, .fi-modal-window, .fi-dropdown-panel) :is(div, section, article, table, thead, tbody, tr, th, td, button, a, label, ul, li, details, summary, header, footer, aside, nav, form):is(.bg-white, .bg-gray-50, .bg-slate-50):not(.rounded-full):not([role="switch"] *) {
    background-color: var(--cletus-surface) !important;
}

html.dark:root :is(.fi-main, .fi-modal-window, .fi-dropdown-panel) :is(div, section, article, table, thead, tbody, tr, th, td, button, a, label, ul, li, details, summary, header, footer, aside, nav, form):is(.bg-gray-100, .bg-slate-100, .bg-gray-200, .bg-slate-200):not(.rounded-full):not([role="switch"] *) {
    background-color: var(--cletus-surface-subtle);
}

html.dark:root .fi-main :is(thead, thead tr, thead th):is(.bg-gray-50, .bg-slate-50, .bg-gray-100) {
    background-color: var(--cletus-surface-subtle);
}

html.dark :is(.fi-main, .fi-modal-window, .fi-dropdown-panel) :is(.text-gray-900, .text-gray-800, .text-gray-700, .text-slate-900, .text-slate-800, .text-slate-700) {
    color: var(--cletus-text);
}

html.dark :is(.fi-main, .fi-modal-window, .fi-dropdown-panel) :is(.text-gray-600, .text-gray-500, .text-gray-400, .text-slate-600, .text-slate-500, .text-slate-400) {
    color: var(--cletus-text-muted);
}

html.dark :is(.fi-main, .fi-modal-window, .fi-dropdown-panel) :is(.border-gray-100, .border-gray-200, .border-gray-300, .border-slate-100, .border-slate-200, .border-slate-300) {
    border-color: var(--cletus-border);
}

html.dark :is(.fi-main, .fi-modal-window) :is(.divide-gray-100, .divide-gray-200, .divide-slate-100, .divide-slate-200) > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--cletus-border);
}

/* Reporte de costos: rejilla de filtros sin depender de utilidades Tailwind no compiladas.
   Cuatro columnas en escritorio, para que el datepicker de "Fecha Desde" no tape "Fecha Hasta". */
.cost-report-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}

@media (max-width: 767px) {
    .cost-report-filter-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Tarea 142: KPIs del Reporte de Costos en rejilla (md:grid-cols-4 y p-5 no se compilan en vistas de módulos).
   4 en fila desde 1280px, 2 por fila entre 640px y 1279px, 1 por fila abajo. */
.cost-report-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.cost-report-kpi-grid > div {
    padding: 1.25rem;
    min-width: 0;
}

@media (max-width: 1279px) {
    .cost-report-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 639px) {
    .cost-report-kpi-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Tarea 141: checklist de cumplimiento por unidad (vista del vehículo). Solo tokens; sin utilidades no compiladas. */
.cl-checklist {
    margin-bottom: 1.25rem;
}

.cl-checklist__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--cletus-text);
    margin: 0 0 0.25rem;
}

.cl-checklist__hint {
    font-size: 0.8125rem;
    color: var(--cletus-text-muted);
    margin: 0 0 0.75rem;
}

.cl-checklist__list {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cl-checklist__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    border-radius: 0.625rem;
    border: 1px solid var(--cletus-border);
    background: var(--cletus-surface);
    color: var(--cletus-text);
    font-size: 0.875rem;
}

.cl-checklist__row--ok { border-color: var(--cletus-status-success-border); background: var(--cletus-status-success-bg); color: var(--cletus-status-success-text); }
.cl-checklist__row--due_soon { border-color: var(--cletus-status-warning-border); background: var(--cletus-status-warning-bg); color: var(--cletus-status-warning-text); }
.cl-checklist__row--expired,
.cl-checklist__row--missing { border-color: var(--cletus-status-danger-border); background: var(--cletus-status-danger-bg); color: var(--cletus-status-danger-text); }
.cl-checklist__row--one_time { border-color: var(--cletus-status-success-border); background: var(--cletus-status-success-bg); color: var(--cletus-status-success-text); }

.cl-checklist__main {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
}

.cl-checklist__mark {
    font-weight: 700;
    font-size: 1rem;
    flex: none;
    width: 1.25rem;
    text-align: center;
}

.cl-checklist__name { font-weight: 600; }
.cl-checklist__detail { opacity: 0.9; }

.cl-checklist__action {
    flex: none;
    padding: 0.25rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

.cl-checklist__action:hover { text-decoration: underline; }

.cl-checklist__historyhead {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.cl-checklist__historyhead .cl-checklist__hint { margin-bottom: 0; }

.cl-checklist__action--primary {
    background: var(--cletus-accent);
    border-color: var(--cletus-accent);
    color: var(--cletus-accent-contrast);
}

/* ==========================================================================
   Pantallas de acceso sin sesión (Tarea 153): login de empresa y de Jarvis, y portal del candidato.
   La tarjeta, las etiquetas, el checkbox y los campos comparten superficie (--cletus-surface), borde
   (--cletus-border) y texto (--cletus-text): ningún elemento del formulario con fondo distinto al de la tarjeta.
   ========================================================================== */
html.dark:root .fi-simple-layout {
    background-color: var(--cletus-bg-paper);
}

html.dark .fi-simple-main,
.cletus-auth-card {
    background-color: var(--cletus-surface);
    border: 1px solid var(--cletus-border);
    color: var(--cletus-text);
}

html.dark:root .fi-simple-main {
    background-color: var(--cletus-surface);
    border-color: var(--cletus-border);
    --tw-ring-color: var(--cletus-border);
}

/* Etiquetas, checkbox y envoltorios de campo: transparentes sobre la tarjeta (nunca una banda). */
html.dark:root .fi-simple-main .fi-fo-field-wrp, html.dark:root .fi-simple-main .fi-fo-field-wrp-label, html.dark:root .fi-simple-main label, html.dark:root .cletus-auth-card .fi-fo-field-wrp {
    background-color: transparent;
}

html.dark:root .fi-simple-main .fi-fo-field-wrp-label, html.dark:root .fi-simple-main label span, html.dark:root .fi-simple-main .fi-simple-header-heading, html.dark:root .cletus-auth-card .fi-fo-field-wrp-label {
    color: var(--cletus-text);
}

html.dark:root .fi-simple-main .fi-input-wrp, html.dark:root .fi-simple-main .fi-checkbox-input, html.dark:root .cletus-auth-card .fi-input-wrp {
    background-color: var(--cletus-surface);
    --tw-ring-color: var(--cletus-border) !important;
}

html.dark:root .fi-simple-main input::placeholder, html.dark:root .cletus-auth-card input::placeholder {
    color: var(--cletus-text-muted);
    opacity: 1;
}

/* Portal del candidato (resources/views/components/layouts/app.blade.php y livewire/candidate-portal). */
body.cletus-auth-body {
    background-color: var(--cletus-bg-paper);
    color: var(--cletus-text);
    font-family: var(--cletus-font-sans);
}

.cletus-auth-card {
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.cletus-auth-title {
    color: var(--cletus-text);
}

html.dark .cletus-auth-footer {
    background-color: var(--cletus-bg-sidebar);
    color: var(--cletus-text-muted);
}

.cletus-auth-muted { color: var(--cletus-text-muted); }

.cletus-auth-step {
    background-color: var(--cletus-surface-subtle);
    border-color: var(--cletus-border);
}

.cletus-auth-notice {
    background-color: var(--cletus-surface-subtle);
    border-color: var(--cletus-accent-recruitment);
}

/* ==========================================================================
   Reglas de tema que antes vivían en un <style> de head.blade.php (Tarea 140a): una sola fuente de verdad.
   Mismo orden de cascada que antes: se cargaban después de este archivo.
   ========================================================================== */

/* Tipografía Outfit para títulos, encabezados y marcas */
:root h1, :root h2, :root h3, :root .fi-header-heading, :root .fi-ta-header-heading, :root .fi-modal-heading {
    font-family: var(--cletus-font-heading);
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* Tipografía Outfit para texto base */
:root:root body, :root:root .fi-body {
    font-family: var(--cletus-font-sans);
}

/* Acento por módulo en encabezados principales (Tarea 156: el título toma --module-accent, igual que su ícono; el escritorio y Jarvis no son de ningún módulo y conservan el acento base) */
:root:root .fi-header-heading {
    color: var(--module-accent);
}

:root:root .fi-dashboard-page .fi-header-heading, :root:root .fi-panel-jarvis .fi-header-heading {
    color: var(--cletus-accent);
}

/* Acento unificado (Tarea 162): el ítem activo del menú y las pestañas activas usan el acento del módulo (--module-accent);
   en Configuración (data-module="core") y en Jarvis usan el primario del panel (--cletus-accent). Una sola regla: --active-accent. */
.fi-sidebar-item-active, .fi-tabs-item-active {
    --active-accent: var(--module-accent);
}

html[data-module="core"] .fi-sidebar-item-active, html[data-module="core"] .fi-tabs-item-active, body.fi-panel-jarvis .fi-sidebar-item-active, body.fi-panel-jarvis .fi-tabs-item-active {
    --active-accent: var(--cletus-accent);
}

/* Navegación lateral activa */
:root .fi-sidebar-item-active > a, :root .fi-sidebar-item-active > a span, :root .fi-sidebar-item-active > a svg {
    color: var(--active-accent);
}

.fi-sidebar-item-active {
    border-left: 3px solid var(--active-accent) !important;
}

/* Pestañas / tabs activas */
:root:root .fi-tabs-item-active button, :root:root .fi-tabs-item-active span {
    border-color: var(--active-accent);
    color: var(--active-accent);
}

/* Riel de navegación lateral a 60px cuando está colapsado */
:root .fi-sidebar-collapsed, :root .fi-sidebar-collapsed aside {
    width: 60px;
    min-width: 60px;
}

/* Menú agrupado por módulo (Tarea 156): el encabezado de cada grupo usa --module-accent, declarado por el módulo desde su service provider */
:root li[data-module-group] .fi-sidebar-group-label, :root li[data-module-group] > .fi-sidebar-group-button .fi-sidebar-group-label, :root li[data-module-group] > .fi-sidebar-group-button svg {
    color: var(--module-accent);
}

/* ==========================================================================
   Tarea 093: Barra superior - la marca nunca se encoge y diseño responsivo
   ========================================================================== */

/* 1. La marca nunca se encoge en la barra superior ni en la barra lateral */

/* ==========================================================================
   Tarea 102: Contraste en Oscuro (WCAG AA > 4.5:1) en Tema Compartido
   ========================================================================== */

/* 1. Tarjetas con tendencia en modo oscuro */
html.dark:root .fi-wi-stats-overview-stat {
    background-color: var(--cletus-surface);
    border-color: var(--cletus-border);
}

html.dark:root .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-label, html.dark:root .fi-wi-stats-overview-stat [class*="text-gray-500"], html.dark:root .fi-wi-stats-overview-stat [class*="text-gray-400"] {
    color: rgb(203, 213, 225); /* slate-300: L=0.66, ratio 9.5:1 */
}

html.dark:root .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-value {
    color: rgb(248, 250, 252); /* slate-50: L=0.96, ratio 13.5:1 */
}

html.dark:root .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-description {
    color: rgb(226, 232, 240); /* slate-200: L=0.81, ratio 11.5:1 */
}

html.dark:root .fi-wi-stats-overview-stat [class*="text-success-"], html.dark:root .fi-wi-stats-overview-stat [class*="text-emerald-"], html.dark:root .fi-wi-stats-overview-stat .text-success-600, html.dark:root .fi-wi-stats-overview-stat .text-success-500 {
    color: rgb(134, 239, 172); /* green-300: L=0.74, ratio 10.6:1 */
}

html.dark:root .fi-wi-stats-overview-stat [class*="text-danger-"], html.dark:root .fi-wi-stats-overview-stat [class*="text-rose-"], html.dark:root .fi-wi-stats-overview-stat .text-danger-600, html.dark:root .fi-wi-stats-overview-stat .text-danger-500 {
    color: rgb(252, 165, 165); /* red-300: L=0.52, ratio 7.6:1 */
}

html.dark:root .fi-wi-stats-overview-stat [class*="text-warning-"], html.dark:root .fi-wi-stats-overview-stat [class*="text-amber-"], html.dark:root .fi-wi-stats-overview-stat .text-warning-600, html.dark:root .fi-wi-stats-overview-stat .text-warning-500 {
    color: rgb(253, 224, 71); /* yellow-300: L=0.78, ratio 11.1:1 */
}

html.dark:root .fi-wi-stats-overview-stat [class*="text-primary-"], html.dark:root .fi-wi-stats-overview-stat [class*="text-indigo-"] {
    color: rgb(165, 180, 252); /* indigo-300: L=0.51, ratio 7.5:1 */
}

html.dark:root .fi-wi-stats-overview-stat [class*="text-info-"], html.dark:root .fi-wi-stats-overview-stat [class*="text-blue-"] {
    color: rgb(147, 197, 253); /* blue-300: L=0.58, ratio 8.5:1 */
}

/* 2. Píldora de activo en modo oscuro */
html.dark:root .fi-badge.fi-color-success, html.dark:root .fi-badge[class*="fi-color-emerald"], html.dark:root .fi-badge[class*="fi-color-success"], html.dark:root .fi-badge[class*="bg-success-"], html.dark:root .fi-badge[class*="bg-emerald-"] {
    background-color: rgba(6, 78, 59, 0.7);
    color: rgb(110, 231, 183); /* emerald-300: L=0.69, ratio 9.9:1 */
    border: 1px solid rgba(16, 185, 129, 0.4);
}

/* 3. Indicador rojo/ámbar de la 120 (Alerta en Matrícula / Tablas) */
html.dark:root .fi-ta-table svg.fi-ta-text-item-icon[class*="text-danger"], html.dark:root .fi-ta-table svg.fi-ta-text-item-icon[class*="text-rose"], html.dark:root .fi-ta-table .fi-color-danger svg.fi-ta-text-item-icon, html.dark:root .fi-ta-table svg[data-slot="icon"][class*="text-danger"] {
    color: rgb(248, 113, 113); /* red-400: L=0.33, ratio 5.1:1 */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

html.dark:root .fi-ta-table svg.fi-ta-text-item-icon[class*="text-warning"], html.dark:root .fi-ta-table svg.fi-ta-text-item-icon[class*="text-amber"], html.dark:root .fi-ta-table .fi-color-warning svg.fi-ta-text-item-icon, html.dark:root .fi-ta-table svg[data-slot="icon"][class*="text-warning"] {
    color: rgb(251, 191, 36); /* amber-400: L=0.58, ratio 8.5:1 */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

/* 4. Insignias de estado (Baja, Vencido) */
html.dark:root .fi-badge.fi-color-danger, html.dark:root .fi-badge[class*="fi-color-rose"], html.dark:root .fi-badge[class*="fi-color-danger"], html.dark:root .fi-badge[class*="bg-danger-"], html.dark:root .fi-badge[class*="bg-rose-"] {
    background-color: rgba(127, 29, 29, 0.5);
    color: rgb(252, 165, 165); /* red-300: L=0.52, ratio 7.6:1 */
    border: 1px solid rgba(239, 68, 68, 0.45);
}

html.dark:root .fi-badge.fi-color-warning, html.dark:root .fi-badge[class*="fi-color-amber"], html.dark:root .fi-badge[class*="fi-color-warning"], html.dark:root .fi-badge[class*="bg-warning-"], html.dark:root .fi-badge[class*="bg-amber-"] {
    background-color: rgba(120, 53, 15, 0.5);
    color: rgb(253, 224, 71); /* yellow-300: L=0.78, ratio 11.1:1 */
    border: 1px solid rgba(245, 158, 11, 0.45);
}

/* 5. Tooltips de la 122 y Tooltips Globales (Tippy / nativos) - Neutros Claude (Tarea 136) */
html.dark:root .tippy-box, html.dark:root [data-tippy-root] .tippy-box, html.dark:root .tippy-content {
    background-color: var(--cletus-surface);
    color: var(--cletus-text);
    border: 1px solid var(--cletus-border);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.7);
}

html.dark:root .tippy-arrow::before {
    color: var(--cletus-surface);
}

/* 6. Selector de tema en menú de usuario (Ambos paneles) */
:root .fi-theme-switcher {
    width: 100%;
}

:root .fi-theme-switcher-btn {
    cursor: pointer;
    user-select: none;
}

html.dark:root .fi-theme-switcher-btn.fi-active {
    background-color: rgba(255, 255, 255, 0.15);
    color: rgb(165, 180, 252);
}

/* ==========================================================================
   Tarea 132: Contraste en Oscuro Vista Previa Purga, Bitácora y Tablas
   ========================================================================== */

/* Tarjetas y superficies de purga (consumiendo tokens compartidos) */
:root:root .purge-card {
    background-color: var(--cletus-surface);
    border-color: var(--cletus-border);
    color: var(--cletus-text);
}

/* Tarjetas de estadísticas en vista previa */
:root:root .purge-stat-card {
    background-color: var(--cletus-surface-subtle);
    border: 1px solid var(--cletus-border);
}

html.dark:root .purge-stat-card .purge-stat-label {
    color: rgb(203, 213, 225); /* slate-300: L=0.66, ratio 9.5:1 */
}

html.dark:root .purge-stat-card .purge-stat-value {
    color: rgb(248, 250, 252); /* slate-50: L=0.96, ratio 13.5:1 */
}

html.dark:root .purge-stat-card .purge-stat-subtext {
    color: rgb(203, 213, 225); /* slate-300: ratio 9.5:1 */
}

/* Tarjeta Campos de Salud */
:root:root .purge-stat-health {
    background-color: var(--cletus-status-success-bg);
    border: 1px solid var(--cletus-status-success-border);
}

:root:root .purge-stat-health .purge-stat-label, :root:root .purge-stat-health .purge-stat-subtext {
    color: var(--cletus-status-success-text);
}

:root:root .purge-stat-health .purge-stat-value {
    color: var(--cletus-status-success-text);
}

/* Tarjeta Campos Familiares */
:root:root .purge-stat-family {
    background-color: var(--cletus-status-info-bg);
    border: 1px solid var(--cletus-status-info-border);
}

:root:root .purge-stat-family .purge-stat-label, :root:root .purge-stat-family .purge-stat-subtext {
    color: var(--cletus-status-info-text);
}

:root:root .purge-stat-family .purge-stat-value {
    color: var(--cletus-status-info-text);
}

/* Desglose por Vacante */
:root:root .purge-position-breakdown {
    background-color: var(--cletus-surface-subtle);
    border: 1px solid var(--cletus-border);
}

html.dark:root .purge-position-breakdown h4 {
    color: rgb(248, 250, 252);
}

:root:root .purge-position-chip {
    background-color: var(--cletus-surface);
    border: 1px solid var(--cletus-border);
    color: var(--cletus-text);
}

html.dark:root .purge-position-chip {
    color: rgb(226, 232, 240);
}

/* Contenedor y estructura de tablas de purga */
:root .purge-table-container {
    border: 1px solid var(--cletus-border);
    background-color: var(--cletus-surface);
}

:root .purge-table thead {
    background-color: var(--cletus-surface-subtle);
    border-bottom: 1px solid var(--cletus-border);
}

:root .purge-table thead th {
    color: var(--cletus-text);
}

html.dark:root .purge-table thead th {
    color: rgb(203, 213, 225);
}

:root .purge-table tbody tr {
    background-color: var(--cletus-surface);
    border-bottom: 1px solid var(--cletus-border-subtle);
}

html.dark:root .purge-table tbody tr:hover {
    background-color: var(--cletus-surface-subtle);
}

html.dark:root .purge-table tbody td {
    color: rgb(226, 232, 240);
}

html.dark:root .purge-table .purge-cell-primary {
    color: rgb(248, 250, 252);
}

html.dark:root .purge-table .purge-cell-muted {
    color: rgb(203, 213, 225); /* slate-300: ratio 9.5:1 */
}

html.dark:root .purge-table .purge-cell-hash {
    color: rgb(203, 213, 225); /* slate-300: ratio 9.5:1 */
}

/* ==========================================================================
   Tarea 133: Etiquetas de filtros y formularios en modo oscuro (WCAG AA >= 4.5:1)
   ========================================================================== */
html.dark:root label:not([class*="text-rose"]):not([class*="text-danger"]), html.dark:root .purge-filter-label, html.dark:root .fi-fo-field-wrp-label, html.dark:root .fi-fo-field-wrp-label > span:not([class*="danger"]):not([class*="rose"]), html.dark:root .purge-card label:not([class*="text-rose"]):not([class*="text-danger"]) {
    color: var(--cletus-text);
}

html.dark:root .purge-card p {
    color: var(--cletus-text-muted);
}

/* Tooltip de tipos de incidencia (Tarea 122), sin estilos inline en el blade (Tarea 140a) */
.cletus-incident-tooltip {
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    width: 20rem;
    padding: 0.75rem 0.85rem;
    background-color: var(--cletus-tooltip-bg);
    color: var(--cletus-tooltip-text);
    border-radius: 0.5rem;
    border: 1px solid var(--cletus-tooltip-border);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
    z-index: 9999;
    pointer-events: none;
}

.cletus-incident-tooltip__title {
    font-weight: 600;
    color: var(--cletus-tooltip-title);
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    letter-spacing: 0.025em;
}

.cletus-incident-tooltip__text {
    color: var(--cletus-tooltip-text);
    font-size: 0.75rem;
    line-height: 1.4;
}

/* ==========================================================================
   Tarea 156: identidad por módulo y Jarvis en claro.
   --module-accent (contraste >= 4.5:1 por modo) lo emite el <head> a partir de lo que declara cada módulo.
   El acento solo aparece en: encabezado del grupo del menú, franja de la sección del formulario,
   ícono del título de página e insignias de estado propias del módulo. Botones, enlaces y alertas no cambian.
   ========================================================================== */
html[data-module="recruitment"] {
    --module-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black' aria-hidden='true' data-slot='icon'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 0 0 .75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 0 0-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0 1 12 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 0 1-.673-.38m0 0A2.18 2.18 0 0 1 3 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 0 1 3.413-.387m7.5 0V5.25A2.25 2.25 0 0 0 13.5 3h-3a2.25 2.25 0 0 0-2.25 2.25v.894m7.5 0a48.667 48.667 0 0 0-7.5 0M12 12.75h.008v.008H12v-.008Z'/%3E%3C/svg%3E");
}

html[data-module="fleet"] {
    --module-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black' aria-hidden='true' data-slot='icon'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8.25 18.75a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 0 1-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 0 0-3.213-9.193 2.056 2.056 0 0 0-1.58-.86H14.25M16.5 18.75h-2.25m0-11.177v-.958c0-.568-.422-1.048-.987-1.106a48.554 48.554 0 0 0-10.026 0 1.106 1.106 0 0 0-.987 1.106v7.635m12-6.677v6.677m0 4.5v-4.5m0 0h-12'/%3E%3C/svg%3E");
}

html[data-module="attendance"] {
    --module-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black' aria-hidden='true' data-slot='icon'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'/%3E%3C/svg%3E");
}

html[data-module="payroll"] {
    --module-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black' aria-hidden='true' data-slot='icon'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z'/%3E%3C/svg%3E");
}

html[data-module="core"] {
    --module-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black' aria-hidden='true' data-slot='icon'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z'/%3E%3C/svg%3E");
}

/* Ícono del título de página (no en el escritorio ni en Jarvis) */
:root .fi-header-heading::before {
    content: "";
    display: inline-block;
    width: var(--module-title-icon-size);
    height: var(--module-title-icon-size);
    margin-right: 0.5rem;
    vertical-align: -0.14em;
    background-color: var(--module-accent);
    -webkit-mask: var(--module-icon) center / contain no-repeat;
    mask: var(--module-icon) center / contain no-repeat;
}

:root .fi-dashboard-page .fi-header-heading::before, :root .fi-panel-jarvis .fi-header-heading::before {
    display: none;
}

/* Franja izquierda de las secciones de formulario; misma geometría en todos los módulos */
:root body:not(.fi-panel-jarvis) .fi-main form .fi-section:not(.fi-modal-window .fi-section):not(.fi-section .fi-section) {
    position: relative;
}

:root body:not(.fi-panel-jarvis) .fi-main form .fi-section:not(.fi-modal-window .fi-section):not(.fi-section .fi-section)::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--module-section-stripe);
    border-radius: var(--module-section-radius) 0 0 var(--module-section-radius);
    background-color: var(--module-accent);
    pointer-events: none;
}

/* Insignias de estado propias del módulo (las de color primario); success/warning/danger conservan su semántica */
:root body:not(.fi-panel-jarvis) .fi-main .fi-ta .fi-badge.fi-color-primary, :root body:not(.fi-panel-jarvis) .fi-main .fi-in .fi-badge.fi-color-primary {
    color: var(--module-accent);
    background-color: rgba(var(--module-accent-rgb), 0.10);
    --tw-ring-color: rgba(var(--module-accent-rgb), 0.30);
}

/* Jarvis en claro: barra y título con el índigo primario (tokens --jarvis-*). El panel de empresa conserva la barra blanca; en oscuro no cambia nada (135). */
html:not(.dark):root .fi-panel-jarvis .fi-sidebar, html:not(.dark):root .fi-panel-jarvis .fi-sidebar-header, html:not(.dark):root .fi-panel-jarvis .fi-topbar, html:not(.dark):root .fi-panel-jarvis .fi-topbar nav {
    background-color: var(--jarvis-bar-light);
}

html:not(.dark):root .fi-panel-jarvis .fi-header-heading {
    color: var(--jarvis-title-light);
}

/* ==========================================================================
   Tarea 157: densidad de tablas. Compacta solo en Nómina y Flotilla (fila reducida y tipografía de tabla a 13 px);
   el interruptor "Vista compacta / cómoda" vive en la barra de la tabla y se guarda por usuario (html[data-table-density]).
   ========================================================================== */
:root .cletus-density-toggle {
    display: none;
}

:root:is([data-module="fleet"], [data-module="payroll"]) .cletus-density-toggle {
    display: block;
}

:root .cletus-density-toggle__button {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--cletus-border);
    border-radius: 0.5rem;
    background-color: var(--cletus-surface);
    color: var(--cletus-text);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.25rem;
    cursor: pointer;
}

:root .cletus-density-toggle__button:hover {
    background-color: var(--cletus-surface-subtle);
}

html[data-table-density="compact"]:is([data-module="fleet"], [data-module="payroll"]) .fi-ta-table .fi-ta-cell .py-4, html[data-table-density="compact"]:is([data-module="fleet"], [data-module="payroll"]) .fi-ta-table .fi-ta-cell .py-3 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

html[data-table-density="compact"]:is([data-module="fleet"], [data-module="payroll"]) .fi-ta-table .fi-ta-cell, html[data-table-density="compact"]:is([data-module="fleet"], [data-module="payroll"]) .fi-ta-table .fi-ta-cell .text-sm, html[data-table-density="compact"]:is([data-module="fleet"], [data-module="payroll"]) .fi-ta-table .fi-ta-header-cell {
    font-size: 13px;
    line-height: 1.25rem;
}

/* Nómina: las tablas de sus pantallas (hechas a mano, sin .fi-ta) también siguen el interruptor */
html[data-table-density="compact"][data-module="payroll"] .fi-page table :is(th, td) {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 13px;
    line-height: 1.25rem;
}

/* Estado vacío estándar de las tablas hechas a mano (x-cletus.empty-state) */
:root .cletus-empty-state__icon {
    background-color: var(--cletus-surface-subtle);
    color: var(--cletus-text-muted);
}

:root .cletus-empty-state__title {
    color: var(--cletus-text);
}

:root .cletus-empty-state__description {
    color: var(--cletus-text-muted);
}