/* MODO CLARO -- parte escrita a mano: estilos propios de index.html (cuerpo, vidrio, modales, botones glass, scrollbar).
   Las clases Tailwind y los colores en línea de app.jsx van en tema-claro-utilidades.css (generado por build-tema-claro.mjs).
   Se aplica con html[data-theme="light"], que pone js/tema.js. Mapa de colores: guía "Modo claro" (2026-09-24):
   fondo #F1F5F9 · tarjeta #FFFFFF · borde #E2E8F0 · texto #0F172A / #334155 / #64748B · amarillo como texto #A16207. */

html[data-theme="light"] { color-scheme: light; }

html[data-theme="light"] body {
    background: radial-gradient(ellipse at 20% 0%, #FFFFFF 0%, #F1F5F9 60%);
    color: #0F172A;
}

/* Vidrio ("liquid glass"): en claro la lógica se invierte -- superficie casi opaca, borde oscuro muy tenue y
   sombra suave en lugar del brillo. */
html[data-theme="light"] {
    --glass-bg:         rgba(255,255,255,0.85);
    --glass-bg-strong:  rgba(255,255,255,0.95);
    --glass-border:     rgba(15,23,42,0.08);
    --glass-border-top: rgba(255,255,255,0.9);
    --glass-shadow:     0 1px 2px rgba(15,23,42,0.06), 0 8px 24px rgba(15,23,42,0.08);
}

html[data-theme="light"] .sidebar-item:hover  { background: rgba(161,98,7,0.08); color: #A16207; }
html[data-theme="light"] .sidebar-item.active { background: rgba(161,98,7,0.12); color: #A16207; border-right-color: #A16207; }

html[data-theme="light"] ::-webkit-scrollbar-thumb       { background: rgba(15,23,42,0.18); }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(15,23,42,0.32); }

html[data-theme="light"] .stat-clickable:hover { box-shadow: 0 0 24px rgba(161,98,7,0.14), 0 8px 24px rgba(15,23,42,0.12); }

/* Modales */
html[data-theme="light"] .modal-overlay { background: rgba(15,23,42,0.55); }
html[data-theme="light"] .modal-box {
    background: #FFFFFF;
    border-color: rgba(15,23,42,0.10);
    border-top-color: rgba(15,23,42,0.06);
    box-shadow: 0 32px 80px rgba(15,23,42,0.25), 0 8px 24px rgba(15,23,42,0.15);
}

/* Botones de vidrio: el texto claro sobre tinte translúcido pasa a la versión oscura del mismo tono. */
html[data-theme="light"] .btn-glass {
    border-color: rgba(15,23,42,0.12);
    border-top-color: rgba(255,255,255,0.8);
    box-shadow: 0 1px 2px rgba(15,23,42,0.08), 0 4px 12px rgba(15,23,42,0.08), inset 0 1px 0 rgba(255,255,255,0.7);
}
html[data-theme="light"] .btn-glass-yellow { background: rgba(234,179,8,0.30); color: #713F12; }
html[data-theme="light"] .btn-glass-green  { background: rgba(16,185,129,0.20); color: #065F46; }
html[data-theme="light"] .btn-glass-purple { background: rgba(139,92,246,0.18); color: #5B21B6; }
html[data-theme="light"] .btn-glass-red    { background: rgba(239,68,68,0.14); color: #991B1B; border-color: rgba(239,68,68,0.35); }
html[data-theme="light"] .btn-glass-slate  { background: rgba(100,116,139,0.14); color: #0F172A; }
html[data-theme="light"] .btn-glass-blue   { background: rgba(59,130,246,0.14); color: #1E40AF; border-color: rgba(59,130,246,0.35); }
html[data-theme="light"] .btn-glass-yellow,
html[data-theme="light"] .btn-glass-green,
html[data-theme="light"] .btn-glass-purple { text-shadow: none; }
html[data-theme="light"] .fab-glass { border-color: rgba(15,23,42,0.18); box-shadow: 0 8px 24px rgba(15,23,42,0.18), inset 0 1px 0 rgba(255,255,255,0.7); }
html[data-theme="light"] .glass-sidebar { background: rgba(255,255,255,0.80) !important; }

/* Íconos duotono del menú: el acento amarillo del trazo baja a ámbar oscuro para mantener 3:1 sobre blanco. */
html[data-theme="light"] svg [stroke="#EAB308"] { stroke: #A16207; }
html[data-theme="light"] svg [fill="#EAB308"]   { fill: #A16207; }

/* Entradas y selectores nativos */
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea { color-scheme: light; }
html[data-theme="light"] ::placeholder { color: #94A3B8; }

/* Versión móvil: .glass sin blur usa un fondo opaco propio en index.html */
@media (max-width: 768px) {
    html[data-theme="light"] .glass { background: rgba(255,255,255,0.96); }
    html[data-theme="light"] .modal-box { background: #FFFFFF; }
}


/* ═════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   MODO CLARO CORPORATIVO (2026-10-03) -- misma propuesta que conductor-app y Kotlin: encabezados en azul marino
   institucional #0F2C59 con texto blanco y "Flota" en amarillo; acciones (rellenos que eran amarillos) en teal #028090
   con texto blanco; el amarillo queda como texto/realce de aviso. El modo oscuro no cambia.
   `.cf-encabezado` está en la barra superior y en el bloque del logo del menú lateral (app.jsx).
   ═════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .cf-encabezado {
    background: #0F2C59 !important;
    border-color: transparent !important;
    box-shadow: 0 2px 10px rgba(15,44,89,0.25);
    color: #FFFFFF;
}
html[data-theme="light"] .cf-encabezado .text-white,
html[data-theme="light"] .cf-encabezado h1,
html[data-theme="light"] .cf-encabezado h2 { color: #FFFFFF; }
html[data-theme="light"] .cf-encabezado .text-slate-500,
html[data-theme="light"] .cf-encabezado .text-slate-400 { color: #B8C4D6; }
html[data-theme="light"] .cf-encabezado .text-yellow-500,
html[data-theme="light"] .cf-encabezado .text-yellow-400 { color: #EAB308; }
html[data-theme="light"] .cf-encabezado .text-cyan-400 { color: #7DD3FC; }
/* botones de íconos, selector de organización y campo de dependencia dentro del encabezado */
html[data-theme="light"] .cf-encabezado button { color: #FFFFFF; border-color: rgba(255,255,255,0.22); }
html[data-theme="light"] .cf-encabezado button.bg-white\/5 { background: rgba(255,255,255,0.12); }
html[data-theme="light"] .cf-encabezado button:hover { background: rgba(255,255,255,0.2); }
html[data-theme="light"] .cf-encabezado select,
html[data-theme="light"] .cf-encabezado input {
    background: rgba(255,255,255,0.12) !important;
    border-color: rgba(255,255,255,0.35) !important;
    color: #FFFFFF !important;
}
html[data-theme="light"] .cf-encabezado input::placeholder { color: #B8C4D6; }
html[data-theme="light"] .cf-encabezado select option { background: #FFFFFF; color: #0F172A; }
html[data-theme="light"] .cf-encabezado svg { color: inherit; }

/* Acciones: lo que era relleno amarillo pasa a teal con texto blanco (contraste 4,7:1). */
html[data-theme="light"] .bg-yellow-500,
html[data-theme="light"] .bg-yellow-400 { background-color: #028090; color: #FFFFFF; }
html[data-theme="light"] .bg-yellow-500 *,
html[data-theme="light"] .bg-yellow-400 * { color: inherit; }
html[data-theme="light"] .hover\:bg-yellow-400:hover,
html[data-theme="light"] .hover\:bg-yellow-500:hover { background-color: #026873; }

/* Menú lateral: ítem activo y hover en azul marino / teal en lugar de ámbar. */
html[data-theme="light"] .sidebar-item:hover  { background: rgba(2,128,144,0.08); color: #0F2C59; }
html[data-theme="light"] .sidebar-item.active { background: rgba(2,128,144,0.12); color: #0F2C59; border-right-color: #028090; }

/* Diálogo de confirmación (confirmarAccion): sus colores van en línea, así que se fuerzan aquí */
html[data-theme="light"] .cf-confirm-box { background: #FFFFFF !important; border-color: rgba(161,98,7,0.35) !important; box-shadow: 0 20px 60px rgba(15,23,42,0.18) !important; }
html[data-theme="light"] .cf-confirm-msg { color: #0F172A !important; }
html[data-theme="light"] .cf-confirm-cancelar { background: #F1F5F9 !important; border-color: #CBD5E1 !important; color: #475569 !important; }