@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
body{background-color:#09090b;-webkit-tap-highlight-color:transparent;font-family:'Inter',system-ui,-apple-system,sans-serif;color-scheme:dark}
h1,h2,h3,h4{letter-spacing:-.01em}
.sidebar-active{background:linear-gradient(90deg,rgba(124,58,237,.20),rgba(124,58,237,.04))!important;color:#fff!important;position:relative}
.sidebar-active::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:0 4px 4px 0;background:#8b5cf6}
.sidebar-active i,.sidebar-active svg{color:#a78bfa!important}
.bottom-nav-active{color:#8b5cf6}
.tab-content{display:none}
.tab-content.active{display:block}
.cal-scroll::-webkit-scrollbar{height:6px;width:6px}
.cal-scroll::-webkit-scrollbar-thumb{background:#3f3f46;border-radius:10px}
.diagonal-stripes{background-image:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(225,29,72,.15) 10px,rgba(225,29,72,.15) 20px)}
.blocked-stripes{background-image:repeating-linear-gradient(45deg,transparent,transparent 6px,rgba(239,68,68,.12) 6px,rgba(239,68,68,.12) 12px)}
.pb-safe{padding-bottom:env(safe-area-inset-bottom,20px)}
[data-tooltip]:hover::after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:#18181b;border:1px solid #3f3f46;padding:6px 10px;border-radius:6px;color:white;font-size:10px;white-space:nowrap;z-index:50;margin-bottom:4px}
.alert-pulse{animation:pulse-red 2s infinite}
@keyframes pulse-red{0%{box-shadow:0 0 0 0 rgba(225,29,72,.4)}70%{box-shadow:0 0 0 10px rgba(225,29,72,0)}100%{box-shadow:0 0 0 0 rgba(225,29,72,0)}}
.modal-tab-btn{transition:all .2s;border-bottom:2px solid transparent}
.modal-tab-btn.active-tab{color:#a78bfa!important;border-bottom-color:#a78bfa!important}
.prof-tab-btn{transition:all .2s;border-bottom:2px solid transparent}
.prof-tab-btn.active-prof-tab{color:#60a5fa!important;border-bottom-color:#60a5fa!important}
@keyframes toastIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes toastOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(8px)}}
.toast-in{animation:toastIn .25s ease forwards}
.toast-out{animation:toastOut .2s ease forwards}
.realtime-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;display:inline-block;animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
@page{size:A4 portrait;margin:15mm 20mm}
@media print{
  .no-print{display:none!important}
  .print-only{display:block!important}
  body{background:white!important;color:black!important;margin:0;padding:0}
  #facturaContenido{font-family:'Inter',system-ui,sans-serif!important;background:white!important;color:#111827!important;padding:0!important}
  #facturaContenido *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .bg-gray-50{background:#f9fafb!important}
  .bg-amber-50{background:#fffbeb!important}
}

/* ── INPUT COMPONENTS ── */
.inp{background-color:#09090b!important;border:1px solid #3f3f46;border-radius:10px;padding:10px 14px;color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;outline:none;font-size:12px;transition:border-color .2s;width:100%}
.inp:focus{border-color:#8b5cf6}
.inp:focus-visible{outline:2px solid #8b5cf6;outline-offset:1px}
.inp::placeholder{color:#52525b!important;-webkit-text-fill-color:#52525b!important;opacity:1}
.inp-sm{background-color:#09090b!important;border:1px solid #3f3f46;border-radius:8px;padding:8px 10px;color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;outline:none;font-size:11px;transition:border-color .2s;width:100%}
.inp-sm:focus{border-color:#8b5cf6}
.inp-sm:focus-visible{outline:2px solid #8b5cf6;outline-offset:1px}
.inp-sm::placeholder{color:#52525b!important;-webkit-text-fill-color:#52525b!important;opacity:1}

/* ── GLOBAL INPUT RULES (cubre todos los inputs sin excepción) ── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea{color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;background-color:#09090b!important}
input:not([type="checkbox"]):not([type="radio"])::placeholder,textarea::placeholder{color:#52525b!important;-webkit-text-fill-color:#52525b!important;opacity:1}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 30px #09090b inset!important;-webkit-text-fill-color:#ffffff!important;caret-color:#ffffff;transition:background-color 5000s ease-in-out 0s}
select option{background-color:#18181b;color:#ffffff}

html.light .inp{background-color:#ffffff!important;color:#18181b!important;-webkit-text-fill-color:#18181b!important;border-color:#d4d4d8}
html.light .inp:focus{border-color:#8b5cf6}
html.light .inp-sm{background-color:#ffffff!important;color:#18181b!important;-webkit-text-fill-color:#18181b!important;border-color:#d4d4d8}
html.light .inp-sm:focus{border-color:#8b5cf6}
html.light input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),html.light select,html.light textarea{color:#18181b!important;-webkit-text-fill-color:#18181b!important;background-color:#ffffff!important}
html.light input:-webkit-autofill,html.light input:-webkit-autofill:hover,html.light input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 30px #ffffff inset!important;-webkit-text-fill-color:#18181b!important}
html.light select option{background-color:#f4f4f5;color:#18181b}

/* ── MODAL LABELS ── */
.modal-label{color:#a1a1aa;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;display:block;margin-bottom:6px}

/* ── BADGE SYSTEM ── */
.badge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:5px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;border:1px solid;line-height:1.7;white-space:nowrap;font-family:'Inter',sans-serif}
.badge-green {background:rgba(22,163,74,.15); color:#4ade80;border-color:rgba(34,197,94,.3)}
.badge-blue  {background:rgba(37,99,235,.15);  color:#60a5fa;border-color:rgba(59,130,246,.3)}
.badge-violet{background:rgba(109,40,217,.15); color:#c4b5fd;border-color:rgba(139,92,246,.3)}
.badge-amber {background:rgba(180,83,9,.15);   color:#fbbf24;border-color:rgba(245,158,11,.3)}
.badge-red   {background:rgba(185,28,28,.15);  color:#fca5a5;border-color:rgba(239,68,68,.3)}
.badge-zinc  {background:rgba(82,82,91,.15);   color:#a1a1aa;border-color:rgba(113,113,122,.3)}
.badge-cyan  {background:rgba(8,145,178,.15);  color:#22d3ee;border-color:rgba(6,182,212,.3)}

/* ── KPI CARD (Dashboard) ── */
.kpi-card{background:#18181b;border:1px solid #27272a;border-radius:16px;padding:20px 24px;transition:border-color .2s}
.kpi-card:hover{border-color:#3f3f46}

/* ── THEME TOGGLE BUTTON ── */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;background:transparent;border:1px solid transparent;cursor:pointer;transition:background .15s,border-color .15s;font-size:13px;line-height:1;padding:0}
.theme-toggle:hover{background:#27272a;border-color:#3f3f46}
html.light .theme-toggle:hover{background:#e4e4e7;border-color:#a1a1aa}

/* ── LIGHT MODE ── */
html.light body{color-scheme:light}html.light{color-scheme:light}
html.light body{background-color:#f4f4f5;color:#18181b}
html.light [class*="bg-zinc-950"]{background-color:#e9e9eb!important}
html.light [class*="bg-zinc-900"]{background-color:#f4f4f5!important}
html.light [class*="bg-zinc-800"]{background-color:#e4e4e7!important}
html.light [class*="bg-zinc-700"]{background-color:#d4d4d8!important}
html.light [class*="border-zinc-800"]{border-color:#d4d4d8!important}
html.light [class*="border-zinc-700"]{border-color:#a1a1aa!important}
html.light [class*="text-white"]{color:#18181b!important}
html.light [class*="text-zinc-300"]{color:#3f3f46!important}
html.light [class*="text-zinc-400"]{color:#52525b!important}
html.light [class*="text-zinc-500"]{color:#71717a!important}
html.light [class*="text-zinc-600"]{color:#52525b!important}
html.light [class*="divide-zinc-800"]>*{border-color:#d4d4d8!important}
/* Modo claro: degradados que terminaban en oscuro (p.ej. Test "to-zinc-900") → terminan en claro */
html.light [class*="to-zinc-900"]{--tw-gradient-to:#f4f4f5 var(--tw-gradient-to-position)!important}
html.light [class*="to-zinc-950"]{--tw-gradient-to:#e9e9eb var(--tw-gradient-to-position)!important}
html.light [class*="from-zinc-900"]{--tw-gradient-from:#f4f4f5 var(--tw-gradient-from-position)!important}
html.light [class*="via-zinc-900"]{--tw-gradient-via:#f4f4f5 var(--tw-gradient-via-position)!important}
/* Modo claro: acentos "neón" del Dashboard a tonos legibles sobre fondo claro (-600/-700) */
html.light [class*="text-emerald-400"],html.light [class*="text-emerald-300"]{color:#059669!important}
html.light [class*="text-violet-400"],html.light [class*="text-purple-400"]{color:#7c3aed!important}
html.light [class*="text-blue-400"]{color:#2563eb!important}
html.light [class*="text-amber-400"],html.light [class*="text-amber-300"]{color:#b45309!important}
html.light [class*="text-rose-400"]{color:#e11d48!important}
html.light .inp:focus,html.light .inp-sm:focus{border-color:#8b5cf6}
html.light .kpi-card{background:#f4f4f5;border-color:#d4d4d8}
html.light .kpi-card:hover{border-color:#a1a1aa}
html.light .sidebar-active{background:linear-gradient(90deg,rgba(124,58,237,.12),transparent)!important;color:#6d28d9!important}
html.light .sidebar-active i,html.light .sidebar-active svg{color:#7c3aed!important}
html.light [data-tooltip]:hover::after{background:#ffffff;border-color:#d4d4d8;color:#18181b}
html.light .cal-scroll::-webkit-scrollbar-thumb{background:#d4d4d8}
html.light #pantallaLogin{background-color:#f4f4f5!important}
html.light #pantallaLogin .bg-zinc-900{background-color:#ffffff!important}
html.light .badge-zinc{background:rgba(113,113,122,.08);color:#52525b;border-color:rgba(113,113,122,.2)}

/* ── RENT A CAR MODE ── */
.rc-mode .sidebar-active{background:linear-gradient(90deg,rgba(14,165,233,.20),rgba(14,165,233,.04))!important}
.rc-mode .sidebar-active::before{background:#0ea5e9}
.rc-mode .sidebar-active i,.rc-mode .sidebar-active svg{color:#38bdf8!important}
html.light .rc-mode .sidebar-active{background:linear-gradient(90deg,rgba(14,165,233,.14),transparent)!important;color:#0369a1!important}
.rc-mode .bottom-nav-active{color:#0ea5e9}
.badge-sky{background:rgba(14,165,233,.15);color:#38bdf8;border-color:rgba(56,189,248,.3)}

/* ── BOT KILL SWITCH ── */
#botKillSwitch{cursor:pointer;user-select:none}
#botKillSwitch:active{opacity:.85}
#botKillSwitchThumb{pointer-events:none}

/* ── COACH REPORT PROSE ── */
.coach-report{font-size:13px;line-height:1.8;color:#d4d4d8}
.coach-report p{margin-bottom:.75rem}
.coach-report ul{list-style:disc;padding-left:1.25rem;margin:.5rem 0}
.coach-report li{margin:.25rem 0;color:#a1a1aa}
.coach-report strong{color:#fafafa;font-weight:700}
html.light .coach-report{color:#3f3f46}
html.light .coach-report li{color:#52525b}
html.light .coach-report strong{color:#18181b}

/* ── ENTERPRISE BUTTON SYSTEM — Elimina estilo neón ─────────────
   Aplica a todo <button> que tenga bg y text del mismo color.
   Resultado: fondo sólido + texto blanco puro. Alto contraste garantizado.
──────────────────────────────────────────────────────────────── */
button[class*="bg-emerald"][class*="text-emerald"]{background-color:#059669!important;color:#fff!important;border-color:rgba(5,150,105,.35)!important}
button[class*="bg-emerald"][class*="text-emerald"]:hover{background-color:#10b981!important}
button[class*="bg-violet"][class*="text-violet"]{background-color:#7c3aed!important;color:#fff!important;border-color:rgba(124,58,237,.35)!important}
button[class*="bg-violet"][class*="text-violet"]:hover{background-color:#8b5cf6!important}
button[class*="bg-blue"][class*="text-blue"]{background-color:#1d4ed8!important;color:#fff!important;border-color:rgba(29,78,216,.35)!important}
button[class*="bg-blue"][class*="text-blue"]:hover{background-color:#2563eb!important}
button[class*="bg-rose"][class*="text-rose"]{background-color:#be123c!important;color:#fff!important;border-color:rgba(190,18,60,.35)!important}
button[class*="bg-rose"][class*="text-rose"]:hover{background-color:#e11d48!important}
button[class*="bg-amber"][class*="text-amber"]{background-color:#b45309!important;color:#fff!important;border-color:rgba(180,83,9,.35)!important}
button[class*="bg-amber"][class*="text-amber"]:hover{background-color:#d97706!important}
button[class*="bg-sky"][class*="text-sky"]{background-color:#0369a1!important;color:#fff!important;border-color:rgba(3,105,161,.35)!important}
button[class*="bg-sky"][class*="text-sky"]:hover{background-color:#0284c7!important}
button[class*="bg-orange"][class*="text-orange"]{background-color:#c2410c!important;color:#fff!important;border-color:rgba(194,65,12,.35)!important}
button[class*="bg-orange"][class*="text-orange"]:hover{background-color:#ea580c!important}
button[class*="bg-fuchsia"][class*="text-fuchsia"]{background-color:#86198f!important;color:#fff!important;border-color:rgba(134,25,143,.35)!important}
button[class*="bg-fuchsia"][class*="text-fuchsia"]:hover{background-color:#a21caf!important}
/* Links con apariencia de botón neón */
a[class*="bg-violet"][class*="text-violet"]{background-color:#7c3aed!important;color:#fff!important}
a[class*="bg-blue"][class*="text-blue"]{background-color:#1d4ed8!important;color:#fff!important}
a[class*="bg-emerald"][class*="text-emerald"]{background-color:#059669!important;color:#fff!important}

/* ── LIGHT MODE — EXTENDED FIXES ─────────────────────────────── */
/* Zinc-100/200 son casi blancos en oscuro — en claro deben ser oscuros */
html.light [class*="text-zinc-100"]{color:#18181b!important}
html.light [class*="text-zinc-200"]{color:#27272a!important}

/* Modal overlays: bg-[#09090b]/90 es casi negro; en claro, usar negro translúcido suave */
html.light [class*="[#09090b]"]{background-color:rgba(0,0,0,0.42)!important}

/* Sidebar en modo claro: fondo blanco con sombra sutil */
html.light aside{background-color:#ffffff!important;border-right-color:#e4e4e7!important}
html.light #sidebarDesktop{box-shadow:4px 0 20px rgba(0,0,0,0.06)}
html.light #sidebarMobile{background-color:#ffffff!important}

/* Modal label más oscuro para legibilidad sobre fondos blancos */
html.light .modal-label{color:#52525b}

/* Colores de acento: versiones más oscuras para contraste en fondos claros */
html.light [class*="text-violet-400"]{color:#6d28d9!important}
html.light [class*="text-violet-300"]{color:#7c3aed!important}
html.light [class*="text-blue-400"]{color:#1d4ed8!important}
html.light [class*="text-blue-300"]{color:#2563eb!important}
html.light [class*="text-emerald-400"]{color:#059669!important}
html.light [class*="text-emerald-500"]{color:#047857!important}
html.light [class*="text-rose-400"]{color:#be123c!important}
html.light [class*="text-rose-500"]{color:#9f1239!important}
html.light [class*="text-amber-400"]{color:#b45309!important}
html.light [class*="text-sky-400"]{color:#0369a1!important}
html.light [class*="text-cyan-400"]{color:#0e7490!important}
html.light [class*="text-fuchsia-400"]{color:#86198f!important}

/* Fondos semitransparentes de colores: versiones más suaves en claro */
html.light [class*="bg-rose-950"]{background-color:rgba(254,202,202,0.5)!important}
html.light [class*="border-rose-900"]{border-color:rgba(252,165,165,0.5)!important}
html.light [class*="bg-violet-600/20"]{background-color:rgba(124,58,237,0.08)!important}
html.light [class*="bg-blue-700/40"]{background-color:rgba(29,78,216,0.1)!important}
html.light [class*="bg-blue-700/20"]{background-color:rgba(29,78,216,0.07)!important}
html.light [class*="bg-emerald-800/30"]{background-color:rgba(6,95,70,0.08)!important}
html.light [class*="bg-amber-500/10"]{background-color:rgba(245,158,11,0.08)!important}
html.light [class*="border-amber-500"]{border-color:rgba(217,119,6,0.35)!important}
html.light [class*="border-violet-600"]{border-color:rgba(109,40,217,0.4)!important}
html.light [class*="border-violet-700"]{border-color:rgba(109,40,217,0.3)!important}
html.light [class*="border-violet-900"]{border-color:rgba(109,40,217,0.15)!important}

/* Panel de notificaciones en modo claro */
html.light #panelNotificaciones{background-color:#ffffff!important;border-color:#e4e4e7!important}

/* Bottom nav móvil en modo claro */
html.light #bottomNav{background-color:#ffffff!important;border-top-color:#e4e4e7!important}
html.light #bottomNav [class*="text-zinc-600"]{color:#71717a!important}

/* ── TUTORIAL / ONBOARDING ────────────────────────────────────── */
#tutorialSpotlight{
  position:fixed;
  border-radius:16px;
  box-shadow:0 0 0 9999px rgba(9,9,11,0.80);
  transition:left .38s cubic-bezier(.4,0,.2,1),top .38s cubic-bezier(.4,0,.2,1),width .38s cubic-bezier(.4,0,.2,1),height .38s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
  z-index:1;
  outline:2px solid rgba(139,92,246,0.6);
  outline-offset:2px
}
html.light #tutorialSpotlight{box-shadow:0 0 0 9999px rgba(0,0,0,0.52);outline-color:rgba(109,40,217,0.7)}
#tutorialCard{
  position:fixed;
  z-index:2;
  width:340px;
  max-width:calc(100vw - 32px);
  transition:left .38s cubic-bezier(.4,0,.2,1),top .38s cubic-bezier(.4,0,.2,1),right .38s cubic-bezier(.4,0,.2,1),bottom .38s cubic-bezier(.4,0,.2,1)
}
html.light #tutorialCard{background-color:#ffffff!important;border-color:rgba(109,40,217,0.4)!important}
html.light #tutorialCard [class*="text-zinc-400"]{color:#52525b!important}
html.light #tutorialCard [class*="text-zinc-600"]{color:#71717a!important}
html.light #tutorialCard [class*="bg-zinc-800"]{background-color:#f4f4f5!important}
html.light #tutorialCard [class*="hover:bg-zinc-700"]{--tw-bg-opacity:1}
@keyframes tutCardIn{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.tut-card-in{animation:tutCardIn .28s cubic-bezier(.4,0,.2,1) forwards}

/* ══════════════════════════════════════════════════════════════
   MÓVIL · Fase 1 — accesibilidad y desbordes (≤767px = bajo el md de Tailwind)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 767px){
  /* Tablas anchas: se vuelven desplazables en horizontal en vez de romper
     el ancho de la página. Cubre también las que no tienen contenedor
     overflow-x-auto. Mantiene el layout interno de la tabla. */
  table{
    display:block;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  /* Evita el zoom brusco de iOS al enfocar inputs pequeños (<16px).
     Ahora que el zoom manual está permitido, esto quita el salto molesto. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select,
  textarea{
    font-size:16px;
  }
}

/* ══════════════════════════════════════════════════════════════
   MÓVIL · Fase 2 — panel admin (≤767px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 767px){
  /* Modales tipo "hoja inferior": más cómodos con el pulgar y a todo el
     ancho. Solo afecta a los modales centrados; el visor a pantalla
     completa (modalDocumento, sin items-center) queda intacto. */
  [id^="modal"].items-center{
    align-items:flex-end;
    padding:0;
  }
  [id^="modal"].items-center > div{
    width:100%;
    max-width:100%;
    max-height:92vh;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
  }
  /* Al desplazar dentro de un modal, no arrastres la página de detrás. */
  [id^="modal"] .overflow-y-auto{
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  /* Etiquetas de formulario un pelín más legibles en móvil. */
  .modal-label{ font-size:11px; }
}

/* ══════════════════════════════════════════════════════════════
   REFACTOR ESTÉTICO + ACCESIBILIDAD · capa de diseño central
   · Cada color va emparejado oscuro/claro.
   · Los tamaños de fuente son comunes a ambos modos.
   · Los overrides globales se limitan a @media screen para NO afectar
     a la impresión de facturas/contratos.
   ══════════════════════════════════════════════════════════════ */
@media screen{
  /* 1) Texto secundario legible en OSCURO (objetivo WCAG AA sobre #09090b).
        En claro ya se oscurece arriba; aquí solo lo afinamos. */
  [class*="text-zinc-500"]{color:#a1a1aa!important}
  [class*="text-zinc-600"]{color:#8a8a93!important}
  html.light [class*="text-zinc-500"]{color:#5b5b61!important}
  html.light [class*="text-zinc-600"]{color:#52525b!important}

  /* 2) Suelo de tamaño de fuente: sube TODO el micro-texto a un mínimo legible. */
  [class*="text-[8px]"],[class*="text-[9px]"]{font-size:11px!important}
  [class*="text-[10px]"],[class*="text-[11px]"]{font-size:12px!important}

  /* 3) Importes / acentos menos estridentes en OSCURO
        (el modo claro ya tiene tonos oscuros más arriba). */
  html:not(.light) [class*="text-emerald-400"]{color:#57cca3!important}
  html:not(.light) [class*="text-rose-400"]{color:#f2879b!important}
}

/* 4) Inputs un punto más legibles (el borde y el focus ya viven en .inp). */
.inp{font-size:13px}
.inp-sm{font-size:12px}

/* 5) BOTÓN SECUNDARIO accionable (no etiqueta inactiva). Área táctil cómoda.
   Aplicar la clase .btn-secondary a Imprimir/PDF/Factura/Exportar. */
.btn-secondary{display:inline-flex;align-items:center;gap:6px;background:#27272a;border:1px solid #3f3f46;color:#e4e4e7;font-weight:800;text-transform:uppercase;letter-spacing:.04em;border-radius:9px;padding:8px 14px;min-height:36px;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.btn-secondary:hover{background:#3f3f46;border-color:#52525b;color:#fff}
html.light .btn-secondary{background:#f4f4f5;border-color:#d4d4d8;color:#3f3f46}
html.light .btn-secondary:hover{background:#e4e4e7;border-color:#a1a1aa;color:#18181b}

/* 6) ESTADO VACÍO visible (icono + texto grandes, no perdidos en lo oscuro).
   Estructura: .empty-state > (.es-icon svg) + .es-title + .es-sub */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:40px 24px}
.empty-state .es-icon{color:#52525b;line-height:0}
.empty-state .es-title{font-size:15px;font-weight:800;color:#d4d4d8}
.empty-state .es-sub{font-size:12px;color:#8a8a93;max-width:300px;line-height:1.5}
html.light .empty-state .es-icon{color:#a1a1aa}
html.light .empty-state .es-title{color:#3f3f46}
html.light .empty-state .es-sub{color:#71717a}

/* 7) LOGIN — un punto de vida (glow violeta) solo en oscuro; en claro, plano.
   Usa background-image para no pelearse con el background-color inline. */
html:not(.light) #pantallaLogin{background-image:radial-gradient(900px 620px at 50% 16%,rgba(124,58,237,.12),transparent 60%)}
html.light #pantallaLogin{background-image:none!important}

/* ══════════════════════════════════════════════════════════════
   ITERACIÓN 2 · MODO CLARO v2 — contraste WCAG real
   Tarjetas BLANCAS sobre fondo gris muy sutil; texto casi negro.
   Va al final (gana en cascada) y dentro de @media screen (no afecta impresión).
   ══════════════════════════════════════════════════════════════ */
@media screen{
  html.light body{background-color:#f3f4f6!important;color:#111827!important}
  /* Tarjetas: blanco puro + borde y sombra suaves → separación clara del fondo */
  html.light [class*="bg-zinc-900"]{background-color:#ffffff!important;border-color:#e5e7eb!important;box-shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06)}
  html.light [class*="bg-zinc-950"]{background-color:#eef1f5!important}
  html.light [class*="bg-zinc-800"]{background-color:#e5e7eb!important}
  html.light [class*="bg-zinc-700"]{background-color:#d1d5db!important}
  html.light [class*="border-zinc-800"]{border-color:#e5e7eb!important}
  html.light [class*="border-zinc-700"]{border-color:#d1d5db!important}
  /* Texto: principal casi negro, secundarios grises oscuros legibles */
  html.light [class*="text-white"],html.light [class*="text-zinc-100"]{color:#111827!important}
  html.light [class*="text-zinc-200"],html.light [class*="text-zinc-300"]{color:#1f2937!important}
  html.light [class*="text-zinc-400"]{color:#4b5563!important}
  html.light [class*="text-zinc-500"]{color:#6b7280!important}
  html.light [class*="text-zinc-600"]{color:#6b7280!important}
  html.light [class*="text-zinc-700"]{color:#9ca3af!important}
  /* Sidebar e inputs sobre el nuevo fondo */
  html.light aside,html.light #sidebarMobile,html.light #bottomNav,html.light #panelNotificaciones{background-color:#ffffff!important;border-color:#e5e7eb!important}
  html.light .inp,html.light .inp-sm{background-color:#ffffff!important;border-color:#d1d5db!important}
  html.light input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),html.light select,html.light textarea{background-color:#ffffff!important;border-color:#d1d5db}
  /* Acentos "neón" → tonos -600/-700 legibles sobre blanco (refuerzo) */
  html.light [class*="text-emerald-500"]{color:#047857!important}
  html.light [class*="text-amber-500"]{color:#b45309!important}
  html.light [class*="text-rose-500"]{color:#be123c!important}
  html.light [class*="text-blue-500"]{color:#1d4ed8!important}
  html.light [class*="text-purple-400"]{color:#7e22ce!important}
}

/* ══════════════════════════════════════════════════════════════
   ITERACIÓN 2 · FILA COMPACTA EXPANDIBLE (<details> nativo)
   Profesores / Flota / Catálogo / Rutas. Compacto por defecto;
   se expande a la ficha completa. Cero JS.
   ══════════════════════════════════════════════════════════════ */
.row-item{background:#18181b;border:1px solid #27272a;border-radius:14px;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.row-item:hover{border-color:#3f3f46}
.row-item[open]{border-color:#52525b;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.row-summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:13px 16px;user-select:none}
.row-summary::-webkit-details-marker{display:none}
.row-summary:hover{background:rgba(255,255,255,.025)}
.row-summary .row-chevron{margin-left:auto;color:#71717a;transition:transform .2s ease;flex:0 0 auto;display:inline-flex}
.row-item[open] .row-summary .row-chevron{transform:rotate(90deg);color:#a78bfa}
.row-avatar{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:15px;color:#fff;flex:0 0 auto;background:linear-gradient(135deg,#7c3aed,#6366f1)}
.row-detail{padding:6px 16px 16px;border-top:1px solid #27272a}
.row-item:not([open]) .row-detail{display:none}
html.light .row-item{background:#fff;border-color:#e5e7eb;box-shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06)}
html.light .row-item:hover{border-color:#d1d5db}
html.light .row-item[open]{border-color:#c4b5fd;box-shadow:0 8px 24px rgba(16,24,40,.10)}
html.light .row-summary:hover{background:rgba(16,24,40,.02)}
html.light .row-detail{border-top-color:#e5e7eb}
html.light .row-summary .row-chevron{color:#9ca3af}
@media (max-width:640px){
  .row-summary{flex-wrap:wrap;gap:8px 12px;padding:12px 14px}
  .row-summary .row-meta-inline{flex-basis:100%;order:3}
}

/* ══════════════════════════════════════════════════════════════
   ITERACIÓN 2 · PESTAÑAS DE CONFIGURACIÓN (CSS puro, sin JS)
   ══════════════════════════════════════════════════════════════ */
.conf-tabs > input[type="radio"]{position:absolute;opacity:0;pointer-events:none}
.conf-tablist{display:flex;gap:4px;border-bottom:1px solid #27272a;margin-bottom:26px;flex-wrap:wrap}
.conf-tablabel{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#a1a1aa;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s;white-space:nowrap}
.conf-tablabel:hover{color:#fff}
.conf-pane{display:none}
#confTab-empresa:checked ~ .conf-tablist label[for="confTab-empresa"],
#confTab-portales:checked ~ .conf-tablist label[for="confTab-portales"],
#confTab-datos:checked    ~ .conf-tablist label[for="confTab-datos"]{color:#fff;border-bottom-color:#8b5cf6}
#confTab-empresa:checked  ~ .conf-panes .pane-empresa,
#confTab-portales:checked ~ .conf-panes .pane-portales,
#confTab-datos:checked    ~ .conf-panes .pane-datos{display:block}
html.light .conf-tablist{border-bottom-color:#e5e7eb}
html.light .conf-tablabel{color:#6b7280}
html.light .conf-tablabel:hover{color:#111827}
html.light #confTab-empresa:checked  ~ .conf-tablist label[for="confTab-empresa"],
html.light #confTab-portales:checked ~ .conf-tablist label[for="confTab-portales"],
html.light #confTab-datos:checked    ~ .conf-tablist label[for="confTab-datos"]{color:#111827}

/* ── Cabecera de página ANCLADA (unificada en todas las vistas) ── */
.config-header,.page-header{padding-bottom:1.1rem;border-bottom:1px solid #27272a}
.config-header-icon,.page-header-icon{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:#a78bfa;background:linear-gradient(140deg,rgba(139,92,246,.18),rgba(139,92,246,.04));border:1px solid #3f3f46;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);flex-shrink:0}
html.light .config-header,html.light .page-header{border-bottom-color:#e5e7eb}
html.light .config-header-icon,html.light .page-header-icon{color:#7c3aed;background:linear-gradient(140deg,rgba(124,58,237,.12),rgba(124,58,237,.03));border-color:#ddd6fe}

/* ── Badges de estado ESTANDARIZADOS (semánticos, usan la base .badge) ── */
.badge-activo{background:rgba(22,163,74,.15);color:#4ade80;border-color:rgba(34,197,94,.3)}
.badge-graduado{background:rgba(109,40,217,.15);color:#c4b5fd;border-color:rgba(139,92,246,.3)}
.badge-lead{background:rgba(180,83,9,.15);color:#fbbf24;border-color:rgba(245,158,11,.3)}
.badge-pendiente{background:rgba(185,28,28,.15);color:#fca5a5;border-color:rgba(239,68,68,.3)}
.badge-pagado{background:rgba(22,163,74,.15);color:#4ade80;border-color:rgba(34,197,94,.3)}
.badge-baja{background:rgba(82,82,91,.15);color:#a1a1aa;border-color:rgba(113,113,122,.3)}
html.light .badge-activo,html.light .badge-pagado{background:rgba(5,150,105,.1);color:#047857;border-color:rgba(5,150,105,.25)}
html.light .badge-graduado{background:rgba(124,58,237,.1);color:#6d28d9;border-color:rgba(124,58,237,.25)}
html.light .badge-lead{background:rgba(217,119,6,.1);color:#b45309;border-color:rgba(217,119,6,.25)}
html.light .badge-pendiente{background:rgba(220,38,38,.08);color:#b91c1c;border-color:rgba(220,38,38,.22)}
html.light .badge-baja{background:rgba(113,113,122,.08);color:#52525b;border-color:rgba(113,113,122,.2)}

/* ── Filas de tabla interactivas (hover sutil) en vistas de listado ── */
#pestaña-cobros tbody tr,#pestaña-finanzas-ae tbody tr,#pestaña-alumnos tbody tr,#pestaña-libro tbody tr,#pestaña-verifactu tbody tr,#pestaña-dashboard tbody tr{transition:background .14s}
#pestaña-cobros tbody tr:hover,#pestaña-finanzas-ae tbody tr:hover,#pestaña-alumnos tbody tr:hover,#pestaña-libro tbody tr:hover,#pestaña-verifactu tbody tr:hover,#pestaña-dashboard tbody tr:hover{background:#18181b;cursor:pointer}
html.light #pestaña-cobros tbody tr:hover,html.light #pestaña-finanzas-ae tbody tr:hover,html.light #pestaña-alumnos tbody tr:hover,html.light #pestaña-libro tbody tr:hover,html.light #pestaña-verifactu tbody tr:hover,html.light #pestaña-dashboard tbody tr:hover{background:#f4f4f5}

/* ── Campo de solo lectura (enlaces de portales: usar el botón Copiar, no editar) ── */
.readonly-field{background:#09090b!important;border:1px solid #1f1f23!important;cursor:default;user-select:all;-webkit-user-select:all;outline:none!important;box-shadow:none!important;position:relative}
.readonly-field:focus,.readonly-field:hover{outline:none!important;box-shadow:none!important;border-color:#27272a!important}
html.light .readonly-field{background:#f1f1f4!important;border-color:#e5e7eb!important}

/* ── Contraste de textos descriptivos dentro de Configuración (accesibilidad) ── */
#pestaña-configuracion .conf-pane p[class*="text-zinc-500"],
#pestaña-configuracion .conf-pane p[class*="text-zinc-600"]{color:#a1a1aa!important}
html.light #pestaña-configuracion .conf-pane p[class*="text-zinc-500"],
html.light #pestaña-configuracion .conf-pane p[class*="text-zinc-600"]{color:#52525b!important}

/* ── Dashboard Teórica · KPIs y historial ── */
.kpi-card{transition:border-color .18s,transform .18s,box-shadow .18s}
.kpi-card:hover{border-color:#3f3f46;transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.28)}
html.light .kpi-card:hover{border-color:#d4d4d8;box-shadow:0 12px 30px rgba(0,0,0,.07)}

/* Fila del historial de simulacros (clicable a futuro) */
.teo-histrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:12px;border:1px solid transparent;transition:background .15s,border-color .15s}
.teo-histrow:hover{background:#18181b;border-color:#27272a;cursor:pointer}
.teo-histrow:hover .teo-chev{color:#a1a1aa;transform:translateX(3px)}
.teo-chev{color:#3f3f46;transition:color .15s,transform .15s}
html.light .teo-histrow:hover{background:#f4f4f5;border-color:#e5e7eb}

/* Píldoras de estado */
.teo-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;line-height:1;white-space:nowrap}
.teo-badge-apto{background:rgba(16,185,129,.16);color:#34d399;border:1px solid rgba(16,185,129,.32)}
.teo-badge-noapto{background:rgba(244,63,94,.15);color:#fb7185;border:1px solid rgba(244,63,94,.3)}
html.light .teo-badge-apto{background:rgba(5,150,105,.12);color:#047857;border-color:rgba(5,150,105,.3)}
html.light .teo-badge-noapto{background:rgba(225,29,72,.1);color:#be123c;border-color:rgba(225,29,72,.28)}

/* ── Herramienta de Auditoría de imágenes (solo admin) ── */
.audit-tab{color:#a1a1aa}
.audit-tab:hover{color:#fff}
.audit-tab.active{background:#8b5cf6;color:#fff}
.audit-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:100%;min-height:74px;padding:8px;border:2px dashed #3f3f46;border-radius:12px;background:#0c0c0e;cursor:pointer;text-align:center;transition:border-color .15s,background .15s}
.audit-drop:hover{border-color:#8b5cf6;background:#141417}
.audit-drop.dragover{border-color:#a78bfa;background:rgba(139,92,246,.12)}
.audit-drop .ad-ic{color:#71717a}
.audit-drop:hover .ad-ic,.audit-drop.dragover .ad-ic{color:#a78bfa}
.audit-thumb{width:60px;height:60px;object-fit:contain;border-radius:10px;border:1px solid #27272a;background:#0c0c0e}
html.light .audit-drop{background:#f4f4f5;border-color:#d4d4d8}
html.light .audit-drop:hover{background:#f1ecfd;border-color:#8b5cf6}
html.light .audit-thumb{background:#fff;border-color:#e5e7eb}

/* ── Créditos de imagen (atribución CC) · badge sutil + tooltip ── */
.cred-badge{position:absolute;right:8px;bottom:8px;width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,.55);color:rgba(255,255,255,.9);font-size:11px;font-weight:700;font-style:italic;font-family:Georgia,'Times New Roman',serif;display:flex;align-items:center;justify-content:center;cursor:help;border:1px solid rgba(255,255,255,.28);transition:background .15s;z-index:3;outline:none}
.cred-badge:hover,.cred-badge:focus{background:rgba(0,0,0,.82)}
.cred-tip{position:absolute;right:0;bottom:25px;width:max-content;max-width:220px;background:#18181b;color:#e4e4e7;font-size:10px;font-weight:500;font-style:normal;line-height:1.4;text-align:left;padding:6px 9px;border-radius:8px;border:1px solid #3f3f46;box-shadow:0 8px 22px rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .15s,transform .15s;pointer-events:none}
.cred-badge:hover .cred-tip,.cred-badge:focus .cred-tip{opacity:1;visibility:visible;transform:translateY(0)}
html.light .cred-tip{background:#fff;color:#27272a;border-color:#e5e7eb}

/* ══════════════════════════════════════════════════════════════
   ITERACIÓN 2 · CONFIGURACIÓN COMPACTA — menos scroll, nada oculto
   Densifica padding/espaciado SOLO dentro de #pestaña-configuracion.
   ══════════════════════════════════════════════════════════════ */
#pestaña-configuracion [class*="mb-8"]{margin-bottom:1.1rem!important}
#pestaña-configuracion .conf-tablist{margin-bottom:18px}
#pestaña-configuracion .conf-pane{gap:1rem!important}
/* Tarjetas (hijas directas del panel): menos padding */
#pestaña-configuracion .conf-pane > div{padding:1.1rem 1.25rem!important}
/* Cabeceras de tarjeta y separaciones internas más ajustadas */
#pestaña-configuracion .conf-pane [class*="mb-5"]{margin-bottom:.8rem!important}
#pestaña-configuracion .conf-pane [class*="gap-4"]{gap:.7rem!important}
#pestaña-configuracion .conf-pane [class*="gap-6"]{gap:.8rem!important}
#pestaña-configuracion .conf-pane [class*="mt-2"]{margin-top:.35rem!important}
#pestaña-configuracion .conf-pane [class*="mt-4"]{margin-top:.6rem!important}
#pestaña-configuracion .conf-pane [class*="mt-5"],
#pestaña-configuracion .conf-pane [class*="pt-5"]{margin-top:.7rem!important;padding-top:.8rem!important}
/* Sub-tarjetas internas (importar/exportar, etc.): un punto más compactas */
#pestaña-configuracion .conf-pane [class*="bg-zinc-950"][class*="p-4"]{padding:.85rem!important}

/* ══════════════════════════════════════════════════════════════
   ITERACIÓN 2.1 · ACABADO PROFESIONAL
   Botones modo claro · layout config · botón de info (ℹ)
   ══════════════════════════════════════════════════════════════ */
@media screen{
  /* CLARO — Botones secundarios (gris) dentro del contenido (no el sidebar):
     que se lean como BOTONES (borde + fondo + sombra), no como texto plano.
     Acotado a <main> y modales para NO afectar a los ítems del menú lateral. */
  html.light main button[class*="bg-zinc-800"],
  html.light main button[class*="bg-zinc-700"],
  html.light main label[class*="bg-zinc-800"],
  html.light main a[class*="bg-zinc-800"],
  html.light [id^="modal"] button[class*="bg-zinc-800"],
  html.light [id^="modal"] label[class*="bg-zinc-800"]{
    background-color:#f1f5f9!important;border:1px solid #cbd5e1!important;color:#1f2937!important;
    box-shadow:0 1px 2px rgba(16,24,40,.06)}
  html.light main button[class*="bg-zinc-800"]:hover,
  html.light main button[class*="bg-zinc-700"]:hover,
  html.light main label[class*="bg-zinc-800"]:hover,
  html.light main a[class*="bg-zinc-800"]:hover,
  html.light [id^="modal"] button[class*="bg-zinc-800"]:hover{
    background-color:#e2e8f0!important;border-color:#94a3b8!important;color:#0f172a!important}
  html.light .btn-secondary{border-color:#cbd5e1!important;box-shadow:0 1px 2px rgba(16,24,40,.06)}
  /* CLARO — Botones de color sólido: sombra para que "levanten" como botón */
  html.light main button[class*="bg-violet-6"],html.light main button[class*="bg-emerald-6"],
  html.light main button[class*="bg-blue-6"],html.light main button[class*="bg-sky-6"],
  html.light main a[class*="bg-violet-6"],html.light main a[class*="bg-emerald-6"]{
    box-shadow:0 1px 3px rgba(16,24,40,.18)!important}
  /* CLARO — cajas de código/URL (mono) legibles */
  html.light [class*="bg-zinc-950"][class*="font-mono"]{background-color:#f1f5f9!important;border-color:#cbd5e1!important}
}

/* ══════════════════════════════════════════════════════════════
   ITERACIÓN 2.2 · CONTRASTE FINAL EN CLARO
   1) BUG: text-white se oscurecía también sobre botones de color
      ("morado con negro"). Reafirmamos BLANCO en botones de color sólido.
   2) Texto de color (acentos) → tonos -700 legibles sobre blanco.
   ══════════════════════════════════════════════════════════════ */
@media screen{
  /* 1) Botón/enlace de color sólido → SIEMPRE texto blanco (y sus hijos) */
  html.light :is(button,a,label,summary)[class*="bg-violet-5"],
  html.light :is(button,a,label,summary)[class*="bg-violet-6"],
  html.light :is(button,a,label,summary)[class*="bg-violet-7"],
  html.light :is(button,a,label,summary)[class*="bg-purple-6"],
  html.light :is(button,a,label,summary)[class*="bg-indigo-6"],
  html.light :is(button,a,label,summary)[class*="bg-emerald-5"],
  html.light :is(button,a,label,summary)[class*="bg-emerald-6"],
  html.light :is(button,a,label,summary)[class*="bg-green-6"],
  html.light :is(button,a,label,summary)[class*="bg-blue-5"],
  html.light :is(button,a,label,summary)[class*="bg-blue-6"],
  html.light :is(button,a,label,summary)[class*="bg-sky-5"],
  html.light :is(button,a,label,summary)[class*="bg-sky-6"],
  html.light :is(button,a,label,summary)[class*="bg-rose-5"],
  html.light :is(button,a,label,summary)[class*="bg-rose-6"],
  html.light :is(button,a,label,summary)[class*="bg-red-6"],
  html.light :is(button,a,label,summary)[class*="bg-amber-5"],
  html.light :is(button,a,label,summary)[class*="bg-amber-6"],
  html.light :is(button,a,label,summary)[class*="bg-orange-6"],
  html.light :is(button,a,label,summary)[class*="bg-fuchsia-6"]{
    color:#fff!important;-webkit-text-fill-color:#fff!important}
  html.light :is(button,a,label,summary)[class*="bg-violet-6"] *,
  html.light :is(button,a,label,summary)[class*="bg-violet-5"] *,
  html.light :is(button,a,label,summary)[class*="bg-emerald-6"] *,
  html.light :is(button,a,label,summary)[class*="bg-blue-6"] *,
  html.light :is(button,a,label,summary)[class*="bg-sky-6"] *,
  html.light :is(button,a,label,summary)[class*="bg-rose-6"] *,
  html.light :is(button,a,label,summary)[class*="bg-amber-6"] *,
  html.light :is(button,a,label,summary)[class*="bg-emerald-5"] *{
    color:#fff!important;-webkit-text-fill-color:#fff!important}

  /* 2) Texto de color (no botón) → tonos oscuros legibles sobre blanco */
  html.light :not(button):not(a):not(label) > [class*="text-violet-300"],
  html.light [class*="text-violet-400"]:not(button):not(a),html.light [class*="text-violet-500"]:not(button):not(a){color:#6d28d9!important}
  html.light [class*="text-purple-300"],html.light [class*="text-purple-400"]:not(button):not(a),html.light [class*="text-purple-500"]{color:#7e22ce!important}
  html.light [class*="text-indigo-300"],html.light [class*="text-indigo-400"]{color:#4338ca!important}
  html.light [class*="text-blue-300"],html.light [class*="text-blue-400"]:not(button):not(a),html.light [class*="text-blue-500"]:not(button):not(a){color:#1d4ed8!important}
  html.light [class*="text-sky-300"],html.light [class*="text-sky-400"]:not(button):not(a),html.light [class*="text-sky-500"]{color:#0369a1!important}
  html.light [class*="text-cyan-300"],html.light [class*="text-cyan-400"]{color:#0e7490!important}
  html.light [class*="text-emerald-300"],html.light [class*="text-emerald-400"]:not(button):not(a),html.light [class*="text-emerald-500"]:not(button):not(a){color:#047857!important}
  html.light [class*="text-green-300"],html.light [class*="text-green-400"]:not(button):not(a){color:#15803d!important}
  html.light [class*="text-amber-300"],html.light [class*="text-amber-400"]:not(button):not(a),html.light [class*="text-amber-500"]{color:#b45309!important}
  html.light [class*="text-orange-300"],html.light [class*="text-orange-400"]{color:#c2410c!important}
  html.light [class*="text-rose-300"],html.light [class*="text-rose-400"]:not(button):not(a),html.light [class*="text-rose-500"]:not(button):not(a){color:#be123c!important}
  html.light [class*="text-red-300"],html.light [class*="text-red-400"]{color:#b91c1c!important}
  html.light [class*="text-fuchsia-300"],html.light [class*="text-fuchsia-400"]{color:#a21caf!important}
}

/* CONFIG — "Módulo Activo" a 2 columnas en escritorio (usa ambos lados, menos scroll) */
@media (min-width:1024px){
  #infoModuloActivo{columns:2;column-gap:1.75rem}
  #infoModuloActivo > div{break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:1rem}
}

/* BOTÓN DE INFORMACIÓN (ℹ) por apartado — tooltip al pasar el ratón, sin JS */
.help-btn{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;
  background:rgba(124,58,237,.16);color:#a78bfa;font-size:10px;font-weight:900;font-style:normal;cursor:help;flex:0 0 auto;
  border:1px solid rgba(124,58,237,.4);position:relative;vertical-align:middle;line-height:1;transition:background .15s;letter-spacing:0;text-transform:none}
.help-btn:hover{background:rgba(124,58,237,.30)}
html.light .help-btn{background:rgba(124,58,237,.10);color:#6d28d9;border-color:rgba(124,58,237,.35)}
.help-btn[data-tip]:hover::after{content:attr(data-tip);position:absolute;top:150%;left:0;
  width:max-content;max-width:300px;white-space:normal;background:#0b0b0e;color:#e4e4e7;border:1px solid #3f3f46;
  border-radius:10px;padding:10px 12px;font-size:11px;font-weight:600;line-height:1.5;text-transform:none;letter-spacing:0;
  z-index:60;box-shadow:0 12px 32px rgba(0,0,0,.5);text-align:left;pointer-events:none}
html.light .help-btn[data-tip]:hover::after{background:#ffffff;color:#1f2937;border-color:#e5e7eb;box-shadow:0 12px 32px rgba(16,24,40,.18)}

/* ══════════════════════════════════════════════════════════════
   ITERACIÓN 2.2 · MÓVIL — acceso a TODO el menú (cajón deslizante)
   El sidebar (que ya tiene todas las secciones + tema + portales + salir)
   se convierte en un cajón que abre el botón ⊞ de la cabecera.
   ══════════════════════════════════════════════════════════════ */
@media (max-width:767px){
  aside{
    display:flex!important;position:fixed!important;left:0;top:0;height:100dvh;height:100vh;
    width:84vw;max-width:330px;transform:translateX(-102%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);z-index:330!important;box-shadow:8px 0 50px rgba(0,0,0,.55)}
  body.nav-open aside{transform:translateX(0)}
  #navBackdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:320;opacity:0;pointer-events:none;transition:opacity .28s}
  body.nav-open #navBackdrop{opacity:1;pointer-events:auto}
  body.nav-open{overflow:hidden}
}
@media (min-width:768px){#navBackdrop{display:none!important}}

/* Chat: si el área de mensajes queda vacía, evitar el "hueco negro" */
#areaMensajesChat:empty{align-items:center;justify-content:center}
#areaMensajesChat:empty::after{content:"Elige una conversación para ver los mensajes";margin:auto;text-align:center;max-width:240px;color:#8a8a93;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;line-height:1.6}
html.light #areaMensajesChat:empty::after{color:#6b7280}

/* ══════════════════════════════════════════════════════════════
   ITERACIÓN 3 · MICRO-ANIMACIONES (fluidez)
   Rápidas (200-340ms), sutiles, solo transform/opacity (GPU).
   Todo dentro de prefers-reduced-motion → respeta accesibilidad.
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference){
  /* Entrada de cada sección al cambiar de pestaña (sensación de "carga fluida") */
  .tab-content.active{animation:secIn .34s cubic-bezier(.22,.61,.36,1) backwards}
  @keyframes secIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

  /* Entrada suave (con leve escalonado) de tarjetas KPI y filas de listado */
  .kpi-card,.row-item{animation:fadeUp .34s cubic-bezier(.22,.61,.36,1) backwards}
  @keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .row-item:nth-child(1){animation-delay:.03s}
  .row-item:nth-child(2){animation-delay:.07s}
  .row-item:nth-child(3){animation-delay:.11s}
  .row-item:nth-child(4){animation-delay:.15s}
  .row-item:nth-child(5){animation-delay:.19s}
  .row-item:nth-child(n+6){animation-delay:.22s}

  /* Feedback táctil al pulsar cualquier botón */
  html button:not(:disabled):active,html .btn-secondary:active{transform:scale(.97)}

  /* Modales: backdrop con fade y panel con fade+scale */
  [id^="modal"]:not(.hidden){animation:fadeIn .2s ease backwards}
  [id^="modal"]:not(.hidden) > div{animation:modalIn .28s cubic-bezier(.22,.61,.36,1) backwards}
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}
  @keyframes modalIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}

  /* Lift sutil al pasar el ratón por tarjetas KPI */
  .kpi-card{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
  .kpi-card:hover{transform:translateY(-2px)}

  /* Toggles e iconos: transición suave */
  .theme-toggle i,.row-chevron{transition:transform .2s ease}
}

/* ══════════════════════════════════════════════════════════════
   FIX · MODO CLARO — Sidebar sin "botones grises"
   El selector genérico [class*="bg-zinc-800"] capturaba también
   "hover:bg-zinc-800" → caja gris FIJA. Aquí los ítems del menú van
   transparentes en reposo y gris claro solo al pasar el ratón.
   ══════════════════════════════════════════════════════════════ */
html.light aside [class*="hover:bg-zinc-800"]:not(.sidebar-active),
html.light #sidebarMobile [class*="hover:bg-zinc-800"]:not(.sidebar-active){background-color:transparent!important}
html.light aside [class*="hover:bg-zinc-800"]:not(.sidebar-active):hover,
html.light #sidebarMobile [class*="hover:bg-zinc-800"]:not(.sidebar-active):hover{background-color:#eef1f5!important}

/* ══════════════════════════════════════════════════════════════
   SKELETONS — carga elegante (en vez de "Cargando…")
   Uso: poner innerHTML = skeletonRows(n) / skeletonTable(...) (en app.js)
   ══════════════════════════════════════════════════════════════ */
.skel{position:relative;overflow:hidden;background:#1c1c20;border-radius:8px}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);animation:skelShimmer 1.3s infinite}
@keyframes skelShimmer{100%{transform:translateX(100%)}}
.skel-line{height:11px;border-radius:6px}
.skel-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid #27272a;border-radius:14px;margin-bottom:10px;background:#18181b}
.skel-av{width:42px;height:42px;border-radius:12px;flex:0 0 auto}
.skel-col{flex:1;min-width:0}
html.light .skel{background:#e6eaef}
html.light .skel::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent)}
html.light .skel-row{border-color:#e5e7eb;background:#fff}
@media (prefers-reduced-motion: reduce){.skel::after{animation:none}}