/*
 * Modo oscuro de los tres paneles (admin-vimarco, cliente, empresa).
 * Lo cargan los PanelProvider al final del <head>, después de su propio CSS.
 *
 * Las vistas propias (gestión de verificaciones y sus modales, historial,
 * estado de verificaciones, comprar servicios, escritorios...) traen los colores
 * en style="", pensados para fondo claro. Los colores claros de esos estilos se
 * escriben como var(--vm-..., color original): las variables solo se definen
 * aquí bajo .dark, así que en modo claro se usa el mismo color de siempre, y si
 * este archivo no cargara, todo se vería como antes.
 *
 * Para un color nuevo en esas vistas: si es claro (fondo blanco o gris, texto
 * navy o gris, borde gris, o un tinte suave de verde/ámbar/rojo/azul), escríbelo
 * con la variable que corresponda; los colores fuertes (navy de fondo, rojo,
 * verde, texto blanco) se ven bien en los dos modos y van tal cual. La tabla de
 * qué color va con qué variable está en App\Support\ModoOscuro, que además
 * reescribe el HTML que se arma en PHP.
 */

/* ── 1. Variables de las vistas propias ─────────────────────────────────── */
.dark {
    /* Superficies: tarjeta (blanco), fondo de modal (gris muy claro), grises */
    --vm-fondo: #18181b;
    --vm-fondo-suave: #111113;
    --vm-fondo-gris: #27272a;
    --vm-fondo-gris-2: #3f3f46;
    --vm-fondo-gris-3: #52525b;

    /* Texto: navy y casi negro, gris oscuro, gris medio */
    --vm-texto: #f4f4f5;
    --vm-texto-2: #d4d4d8;
    --vm-texto-suave: #a1a1aa;

    /* Bordes */
    --vm-borde: rgba(255, 255, 255, 0.1);
    --vm-borde-fuerte: rgba(255, 255, 255, 0.18);
    --vm-borde-marca: #34466e;

    /* Tintes: fondo suave, texto y borde de cada color */
    --vm-verde-fondo: rgba(34, 197, 94, 0.14);
    --vm-verde-texto: #4ade80;
    --vm-verde-borde: rgba(34, 197, 94, 0.4);

    --vm-teal-fondo: rgba(20, 184, 166, 0.14);
    --vm-teal-texto: #5eead4;

    --vm-ambar-fondo: rgba(234, 179, 8, 0.14);
    --vm-ambar-texto: #fcd34d;
    --vm-ambar-borde: rgba(234, 179, 8, 0.45);

    --vm-rojo-fondo: rgba(239, 68, 68, 0.14);
    --vm-rojo-texto: #f87171;
    --vm-rojo-borde: rgba(239, 68, 68, 0.45);

    --vm-azul-fondo: rgba(99, 102, 241, 0.16);
    --vm-azul-texto: #93c5fd;
    --vm-azul-borde: rgba(99, 102, 241, 0.45);
    --vm-indigo-texto: #a5b4fc;

    --vm-cian-fondo: rgba(6, 182, 212, 0.14);
    --vm-cian-texto: #67e8f9;

    --vm-morado-fondo: rgba(139, 92, 246, 0.16);
    --vm-morado-texto: #c4b5fd;

    --vm-rosa-fondo: rgba(236, 72, 153, 0.16);
    --vm-rosa-texto: #f9a8d4;
}

/* ── 2. Lo que el CSS de los PanelProvider fija en claro ───────────────── */

/* Títulos, etiquetas y encabezados de tabla van en navy: en oscuro, claros. */
.dark .fi-header-heading,
.dark .fi-section-header-heading,
.dark .fi-fo-field-wrp label,
.dark .fi-in-entry-wrp label,
.dark .fi-ta-header-cell-label,
.dark .fi-ta-header-toolbar button,
.dark .fi-ta-header-toolbar svg,
.dark .fi-ta-header-toolbar span {
    color: #f9fafb !important;
}

/* Menú desplegable del usuario: los paneles lo fijan blanco. */
.dark .fi-dropdown-panel {
    background: #1f2937 !important;
}

.dark .fi-dropdown-panel *,
.dark .fi-dropdown-list-item,
.dark .fi-dropdown-list-item span,
.dark .fi-dropdown-list-item-label,
.dark .fi-dropdown-header,
.dark .fi-dropdown-header span {
    color: #f9fafb !important;
}

.dark .fi-dropdown-list-item svg {
    color: #d1d5db !important;
}

.dark .fi-dropdown-list-item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Filas resaltadas en rojo: prioridades del admin (PrioridadEstudios) y
   estudios vencidos del cliente. El rosado claro dejaba el texto blanco
   del modo oscuro sin contraste. */
.dark .fi-ta-row.fila-prioridad > td,
.dark .fi-ta-row.fila-vencida > td {
    background-color: rgba(239, 68, 68, 0.1) !important;
}

.dark .fi-ta-row.fila-prioridad:hover > td,
.dark .fi-ta-row.fila-vencida:hover > td {
    background-color: rgba(239, 68, 68, 0.17) !important;
}

/* Calendario del campo Fecha (flatpickr): su tema es claro. */
.dark .flatpickr-calendar {
    background: #18181b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.dark .flatpickr-calendar.arrowTop::after { border-bottom-color: #18181b; }
.dark .flatpickr-calendar.arrowBottom::after { border-top-color: #18181b; }
.dark .flatpickr-calendar.arrowTop::before,
.dark .flatpickr-calendar.arrowBottom::before { border-color: transparent; }

.dark .flatpickr-months .flatpickr-month,
.dark .flatpickr-current-month .flatpickr-monthDropdown-months,
.dark .flatpickr-current-month input.cur-year,
.dark span.flatpickr-weekday,
.dark .flatpickr-day {
    color: #e4e4e7;
    fill: #e4e4e7;
    background: transparent;
}

.dark .flatpickr-current-month .flatpickr-monthDropdown-months option {
    background: #18181b;
}

.dark .flatpickr-months .flatpickr-prev-month svg,
.dark .flatpickr-months .flatpickr-next-month svg {
    fill: #e4e4e7;
}

.dark .flatpickr-day:hover,
.dark .flatpickr-day:focus {
    background: #27272a;
    border-color: #27272a;
}

.dark .flatpickr-day.prevMonthDay,
.dark .flatpickr-day.nextMonthDay,
.dark .flatpickr-day.flatpickr-disabled {
    color: #52525b;
}

.dark .flatpickr-day.selected,
.dark .flatpickr-day.selected:hover {
    background: #e20e18;
    border-color: #e20e18;
    color: #ffffff;
}

/* ── 3. Vistas propias (.vm-vista) ──────────────────────────────────────── */

.dark .vm-vista {
    /* Controles nativos (select, fecha, barras de desplazamiento) en oscuro */
    color-scheme: dark;
}

/*
 * Clases de Tailwind sin variante dark: que usan esas vistas. Van dentro de
 * :where() para no subir la especificidad: un style="" o una clase de color
 * propia del elemento siguen mandando, y los componentes de Filament, que traen
 * su dark:..., tampoco se tocan.
 */
:where(.dark .vm-vista) .bg-white { background-color: var(--vm-fondo); }
:where(.dark .vm-vista) .bg-gray-50 { background-color: var(--vm-fondo-suave); }
:where(.dark .vm-vista) .bg-gray-100 { background-color: var(--vm-fondo-gris); }
:where(.dark .vm-vista) .hover\:bg-gray-50:hover,
:where(.dark .vm-vista) .hover\:bg-gray-100:hover { background-color: rgba(255, 255, 255, 0.06); }

:where(.dark .vm-vista) .text-gray-900,
:where(.dark .vm-vista) .text-gray-800 { color: var(--vm-texto); }
:where(.dark .vm-vista) .text-gray-700,
:where(.dark .vm-vista) .text-gray-600 { color: var(--vm-texto-2); }
:where(.dark .vm-vista) .text-gray-500 { color: var(--vm-texto-suave); }

:where(.dark .vm-vista) .bg-green-100 { background-color: var(--vm-verde-fondo); }
:where(.dark .vm-vista) .bg-red-100 { background-color: var(--vm-rojo-fondo); }

/* Bordes sin color propio (border, divide-y) y los grises de Tailwind */
:where(.dark .vm-vista) *,
:where(.dark .vm-vista) .border-gray-200,
:where(.dark .vm-vista) .divide-gray-200 > * + * {
    border-color: var(--vm-borde);
}

:where(.dark .vm-vista) .border-gray-300 { border-color: var(--vm-borde-fuerte); }

/* Campos de las vistas propias. Los de Filament llevan clases dark: y quedan
   fuera; esta regla sí necesita ganarle al estilo base de formularios. */
.dark .vm-vista :is(input, select, textarea):not([class*="dark:"]):not([class*="choices"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]) {
    background-color: var(--vm-fondo-suave);
    color: var(--vm-texto);
}

.dark .vm-vista :is(input, select, textarea):not([class*="dark:"])::placeholder {
    color: #71717a;
}

.dark .vm-vista :is(input, select, textarea):not([class*="dark:"]):disabled {
    background-color: var(--vm-fondo-gris);
    color: var(--vm-texto-suave);
}

/* Iconos SVG con el color como atributo (stroke="#1a2a49"): el CSS les gana. */
:where(.dark .vm-vista) [stroke="#1a2a49"] { stroke: var(--vm-texto); }
:where(.dark .vm-vista) [stroke="#15803d"] { stroke: var(--vm-verde-texto); }

/* Botón de archivo (input type="file" con file:bg-gray-100) */
:where(.dark .vm-vista) .file\:bg-gray-100::file-selector-button {
    background-color: var(--vm-fondo-gris-2);
    color: var(--vm-texto);
}

:where(.dark .vm-vista) .hover\:file\:bg-gray-200:hover::file-selector-button {
    background-color: var(--vm-fondo-gris-3);
}

/* Botón "quitar fila" de gestion-verificaciones (su <style> fija tonos claros) */
.dark .vd-quitar-fila,
.dark .vd-quitar-texto {
    background-color: var(--vm-rojo-fondo);
    border-color: var(--vm-rojo-borde);
    color: var(--vm-rojo-texto);
}

.dark .vd-quitar-fila:hover,
.dark .vd-quitar-texto:hover {
    background-color: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
}