/* ============ DESIGN TOKENS (Variante A - Medica neutra) ============ */
:root {

  --cell1-fill: #ffffff; --cell1-alpha: 1; --cell1-border: transparent; --cell1-border-width: 1px; --cell1-radius: 12px;
  --cell2-fill: #ffffff; --cell2-alpha: 1; --cell2-border: transparent; --cell2-border-width: 1px; --cell2-radius: 12px;
  --cell3-fill: #ffffff; --cell3-alpha: 1; --cell3-border: transparent; --cell3-border-width: 1px; --cell3-radius: 12px;
  --cell4-fill: #1a2235; --cell4-alpha: 1; --cell4-border: transparent; --cell4-border-width: 1px; --cell4-radius: 12px;
  --cell5-fill: #0b1220; --cell5-alpha: 1; --cell5-border: #334155; --cell5-border-width: 1px; --cell5-radius: 12px;
  --cell6-fill: #e0f5ff; --cell6-alpha: 1; --cell6-border: #0ea5e9; --cell6-border-width: 1px; --cell6-radius: 10px;
  --cell7-fill: #fff1e6; --cell7-alpha: 1; --cell7-border: #f97316; --cell7-border-width: 1px; --cell7-radius: 10px;
  --cell8-fill: #e0f5ff; --cell8-alpha: 1; --cell8-border: #0ea5e9; --cell8-border-width: 1px; --cell8-radius: 10px;
  --cell9-fill: #fff1e6; --cell9-alpha: 1; --cell9-border: #f97316; --cell9-border-width: 1px; --cell9-radius: 10px;
  --cell10-fill: #ffffff; --cell10-alpha: 1; --cell10-border: #cbd5e1; --cell10-border-width: 1px; --cell10-radius: 10px;

  --bg:#f4f6fb;
  --surface:#ffffff;
  --surface-2:#f1f5f9;
  --border:#e2e8f0;
  --border-strong:#cbd5e1;
  --text:#0f172a;
  --text-muted:#475569;
  --text-soft:#64748b;
  --accent:#2563eb;
  --accent-soft:#eff6ff;
  --accent-text:#1d4ed8;
  --shadow-card:0 1px 2px rgba(15,23,42,.06);
  --nom-insurance:#7e22ce;
}

/* ============ MODO OSCURO (default, sin clase .light) ============
   Las variables de :root son para modo claro. En oscuro (body sin .light)
   se redefinen aquí con valores oscuros para que las tarjetas/elementos
   que usan var(--surface-2)/--border/--text/... se vean coherentes y no
   queden parches blancos. El modo claro (body.light) las redefinirá claras. */
body:not(.light) {

  --cell1-fill: #1a2235; --cell1-alpha: 1; --cell1-border: #1e293b; --cell1-border-width: 1px; --cell1-radius: 12px;
  --cell2-fill: #1a2235; --cell2-alpha: 1; --cell2-border: #1e293b; --cell2-border-width: 1px; --cell2-radius: 12px;
  --cell3-fill: transparent; --cell3-alpha: 1; --cell3-border: transparent; --cell3-border-width: 1px; --cell3-radius: 12px;
  --cell4-fill: #1a2235; --cell4-alpha: 1; --cell4-border: #1e293b; --cell4-border-width: 1px; --cell4-radius: 12px;
  --cell5-fill: #0b1220; --cell5-alpha: 1; --cell5-border: #334155; --cell5-border-width: 1px; --cell5-radius: 12px;
  --cell6-fill: #e0f5ff; --cell6-alpha: 1; --cell6-border: #0284c7; --cell6-border-width: 1px; --cell6-radius: 10px;
  --cell7-fill: #fff1e6; --cell7-alpha: 1; --cell7-border: #f97316; --cell7-border-width: 1px; --cell7-radius: 10px;
  --cell8-fill: #e0f5ff; --cell8-alpha: 1; --cell8-border: #0284c7; --cell8-border-width: 1px; --cell8-radius: 10px;
  --cell9-fill: #fff1e6; --cell9-alpha: 1; --cell9-border: #f97316; --cell9-border-width: 1px; --cell9-radius: 10px;
  --cell10-fill: #1a2235; --cell10-alpha: 1; --cell10-border: #1e293b; --cell10-border-width: 1px; --cell10-radius: 10px;

  --nom-insurance:#f472b6;
  --bg:#0a0f1a;
  --surface:#131c31;
  --surface-2:#1a2235;
  --border:#2a3550;
  --border-strong:#3a4766;
  --text:#e2e8f0;
  --text-muted:#94a3b8;
  --text-soft:#64748b;
  --accent:#3b82f6;
  --accent-soft:#1e293b;
  --accent-text:#93c5fd;
  --shadow-card:0 1px 2px rgba(0,0,0,.35);
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body.tsnu-app { background:#0f0a1a; }
html, body { background:#000810; }
body.tsnu-app .tb { background:#1a1025; border-bottom:1px solid #2d1f3d; }
body.tsnu-app .tb-r select { background:#1a1025; border-color:#2d1f3d; }
body.tsnu-app .grp-badge { border-color:#a78bfa; color:#c4b5fd; background:rgba(167,139,250,.15); }
body.tsnu-app .ts { border-bottom-color:#2d1f3d; }
body.tsnu-app .ts div.ac { color:#c4b5fd; border-bottom-color:#a78bfa; }
body.tsnu-app .ca { background:#1a1025; border-color:#2d1f3d; }
body.tsnu-app .submenu-bar { background:rgba(26,16,37,.8); border-bottom-color:#2d1f3d; }
body { height:100%; overflow-x:hidden; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #000810; color: #e2e8f0;
}
#app { width:100%; max-width:480px; margin:0 auto; min-height:100vh; overflow-x:hidden; background:#000810; }
#main { position:relative; background:#000810; overflow:hidden; }
#main::before { content:''; position:absolute; z-index:0; inset:-25%; pointer-events:none; opacity:.7; background-image:radial-gradient(circle at 12% 18%,rgba(255,255,255,.95) 0 1.3px,transparent 2px),radial-gradient(circle at 71% 30%,rgba(191,219,254,.85) 0 1px,transparent 1.8px),radial-gradient(circle at 38% 72%,rgba(255,255,255,.8) 0 1px,transparent 1.7px),radial-gradient(circle at 86% 82%,rgba(147,197,253,.8) 0 1px,transparent 1.8px),radial-gradient(circle at 24% 64%,rgba(196,181,253,.72) 0 1px,transparent 1.7px); background-size:180px 150px,230px 210px,150px 180px,210px 170px,320px 280px; animation:novaSpaceZoom 18s linear infinite; }
#main > * { position:relative; z-index:1; }

@media (min-width:768px) { #app { max-width:720px; } }
@media (min-width:1024px) { #app { max-width:1140px; } }

/* LOGIN */
#login {
  position:relative; isolation:isolate; overflow:hidden;
  min-height:100vh; display:flex; flex-direction:column; align-items:center;
  justify-content:flex-start; padding:1.5rem 1rem .8rem; gap:.6rem;
  background:#000810;
}
body.light #login { background:#000810 !important; color:#e2e8f0; }
body.light #login::before { opacity:.7 !important; }
body.light #login p { color:#cbd5e1; }
body.light #login h1 { color:#93c5fd; }
#login > * { position:relative; z-index:2; }
/* Nacimiento sutil de NOVA — DESACTIVADO (Lauren 2026-09-05): se queda solo con estrellas + cometa. */
.space-nova {
  display:none !important;
}
.space-nova::after { display:none !important; }
@keyframes novaBirth { 0%,100% { opacity:0; } }
/* Campo estelar: zoom suave para simular avance hacia delante. */
#login::before {
  content:''; position:absolute; z-index:0; inset:-35%; pointer-events:none;
  opacity:.78; transform-origin:center;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,1) 0 1.4px, transparent 2.2px),
    radial-gradient(circle at 71% 30%, rgba(191,219,254,.95) 0 1.2px, transparent 2px),
    radial-gradient(circle at 38% 72%, rgba(255,255,255,.9) 0 1.1px, transparent 1.9px),
    radial-gradient(circle at 86% 82%, rgba(147,197,253,.9) 0 1.2px, transparent 2px),
    radial-gradient(circle at 53% 51%, rgba(255,255,255,.86) 0 1px, transparent 1.8px),
    radial-gradient(circle at 24% 64%, rgba(196,181,253,.8) 0 1px, transparent 1.8px),
    radial-gradient(circle at 92% 14%, rgba(125,211,252,.82) 0 1px, transparent 1.8px),
    radial-gradient(circle at 60% 88%, rgba(255,255,255,.76) 0 1px, transparent 1.7px);
  background-size:180px 150px, 230px 210px, 150px 180px, 210px 170px, 270px 250px, 320px 280px, 190px 230px, 360px 330px;
  animation:novaSpaceZoom 18s linear infinite;
}
/* Destello de galaxia ocasional y muy tenue. */
.space-galaxy {
  position:absolute !important; z-index:1 !important; pointer-events:none;
  width:min(58vw,520px); height:min(25vw,220px); left:50%; top:43%;
  transform:translate(-50%,-50%) rotate(-18deg) scale(.55);
  border-radius:50%; opacity:0;
  background:radial-gradient(ellipse, rgba(147,197,253,.22) 0%, rgba(96,165,250,.09) 22%, rgba(59,130,246,0) 68%);
  filter:blur(2px); mix-blend-mode:screen;
  animation:novaGalaxy 72s ease-in-out infinite;
}
.space-galaxy::after { content:''; position:absolute; inset:20% 8%; border-radius:50%; transform:rotate(25deg); box-shadow:0 0 34px 8px rgba(191,219,254,.13); }
/* Meteorito ocasional: una sola pasada rápida con estela. */
.space-meteor {
  position:absolute !important; z-index:1 !important; pointer-events:none;
  width:14px; height:14px; left:50%; top:50%; border-radius:50%; opacity:0;
  background:radial-gradient(circle, #fff 0%, #fbbf24 28%, #f97316 52%, #ef4444 74%, rgba(239,68,68,0) 100%);
  box-shadow:0 0 18px 10px rgba(249,115,22,.7), 0 0 40px 22px rgba(239,68,68,.35), -120px 40px 26px 10px rgba(249,115,22,.3);
  transform-origin:center;
  animation:novaMeteor 24s linear infinite;
  animation-delay:4s;
}
@keyframes novaSpaceZoom {
  0% { transform:scale(.82); opacity:.46; }
  55% { opacity:.8; }
  100% { transform:scale(1.42); opacity:.62; }
}
@keyframes novaGalaxy {
  0%,72% { opacity:0; transform:translate(-50%,-50%) rotate(-18deg) scale(.45); }
  77% { opacity:.3; }
  88% { opacity:.12; transform:translate(-50%,-50%) rotate(-8deg) scale(1.05); }
  94%,100% { opacity:0; transform:translate(-50%,-50%) rotate(5deg) scale(1.25); }
}
@keyframes novaMeteor {
  0%,14% { opacity:0; left:50%; top:50%; transform:scale(.4) rotate(-28deg); }
  17% { opacity:1; }
  31% { opacity:.95; left:112%; top:72%; transform:scale(.9) rotate(-42deg); }
  33%,100% { opacity:0; left:112%; top:72%; transform:scale(1) rotate(-48deg); }
}
/* Cometa 2: sale del centro hacia la izquierda, algo más grande y lento. */
.space-meteor.m2 {
  width:11px; height:11px;
  box-shadow:0 0 15px 8px rgba(251,191,36,.72), 0 0 36px 20px rgba(249,115,22,.32), 110px -30px 22px 8px rgba(239,68,68,.28);
  animation:novaMeteor2 31s linear infinite;
  animation-delay:9s;
}
@keyframes novaMeteor2 {
  0%,12% { opacity:0; left:50%; top:46%; transform:scale(.35) rotate(30deg); }
  15% { opacity:1; }
  30% { opacity:.92; left:-8%; top:24%; transform:scale(.85) rotate(42deg); }
  32%,100% { opacity:0; left:-8%; top:24%; transform:scale(.95) rotate(48deg); }
}
/* Cometa 3: sale del centro hacia abajo-izquierda, más pequeño y rápido. */
.space-meteor.m3 {
  width:8px; height:8px;
  box-shadow:0 0 12px 6px rgba(249,115,22,.78), 0 0 30px 16px rgba(239,68,68,.34), 70px -50px 16px 6px rgba(251,191,36,.26);
  animation:novaMeteor3 20s linear infinite;
  animation-delay:15s;
}
@keyframes novaMeteor3 {
  0%,16% { opacity:0; left:50%; top:52%; transform:scale(.3) rotate(-12deg); }
  19% { opacity:1; }
  35% { opacity:.9; left:-6%; top:88%; transform:scale(.75) rotate(-20deg); }
  37%,100% { opacity:0; left:-6%; top:88%; transform:scale(.85) rotate(-26deg); }
}
/* Cometa 4: meteorito original blanco/azul, cruce diagonal rápido. */
.space-meteor.m4 {
  width:5px; height:5px;
  background:#fff;
  box-shadow:0 0 8px 3px #bfdbfe, -85px 35px 18px 1px rgba(147,197,253,.28);
  animation:novaMeteor4 48s linear infinite;
  animation-delay:11s;
}
@keyframes novaMeteor4 {
  0%,18% { opacity:0; left:-12%; top:28%; transform:rotate(25deg); }
  21% { opacity:1; }
  29% { opacity:.9; left:112%; top:65%; transform:rotate(25deg); }
  31%,100% { opacity:0; left:112%; top:65%; transform:rotate(25deg); }
}
@media (prefers-reduced-motion:reduce) {
  #login::before, .space-nova, .space-galaxy, .space-meteor, .space-meteor.m2, .space-meteor.m3 { animation:none; }
}
.login-logo { width:min(280px,75vw); height:auto; object-fit:contain; display:block; }
#login h1 { font-size:2.5rem; font-weight:800; letter-spacing:6px; color:#60a5fa; }
#login p { color:#94a3b8; font-size:.9rem; }
.pd { display:flex; gap:.6rem; }
.pd-dot { width:18px; height:18px; border-radius:50%; border:2px solid #1e293b;
  background:transparent; transition:all .2s; }
.pd-dot.f { background:#3b82f6; border-color:#3b82f6; }
.kp { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; width:min(280px,85vw); }
.kp button { width:80px; height:80px; border-radius:50%; border:1px solid #1e293b;
  background:#1a2235; color:#e2e8f0; font-size:1.4rem; font-weight:500;
  cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.kp button:active { background:#3b82f6; }
.kp .ke { border:none; background:transparent; pointer-events:none; }
.kp .kd { font-size:.9rem; color:#94a3b8; }
#login .err { color:#ef4444; font-size:.85rem; min-height:1.3em; text-align:center; }

@media (max-width:480px) {
  #login { padding:.8rem .6rem .5rem; gap:.4rem; }
  .kp button { width:65px; height:65px; font-size:1.2rem; }
  .kp { gap:.4rem; width:min(260px,90vw); }
  .pd { gap:.4rem; }
  .pd-dot { width:14px; height:14px; }
}

/* MAIN */
#main { display:none; flex-direction:column; min-height:100vh; }
.tb { display:grid; grid-template-columns:auto 1fr auto; align-items:center; padding:.4rem .6rem;
  border-bottom:1px solid #1e293b; background:#000812; gap:.35rem; }
.tb-r { display:flex; align-items:center; gap:.35rem; justify-self:end; min-width:0; }
.tb-r select { max-width:110px; min-width:0; }
@media (min-width:1280px) {

#cm.ac .sb { max-width:700px; }
.cad-form { max-width:100%; }
}

@media (max-width:1023px) {
  .tb-r .theme-btn { display:none; }
  .submenu-bar { overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap; gap:.25rem; padding:.3rem .5rem; }
  .submenu-btn { white-space:nowrap; flex-shrink:0; font-size:.8rem; padding:4px 8px; }
  .tb-r { gap:.3rem; }
  #grp-badge { display:none; }
  .tb img.logo { height:26px; cursor:pointer; }
  .tb-r .adm { padding:3px 8px; font-size:.65rem; }
  .tb-r .theme-btn { display:none; }
  .tb-r select { padding:.3rem .4rem; font-size:.78rem; max-width:90px; }
}
.tb .tb-l { display:flex; align-items:center; gap:.3rem; justify-self:start; }
.tb img.logo { height:34px; cursor:pointer; width:auto; object-fit:contain; display:block; margin:2px auto; }
.tb select { background:#1a2235; color:#e2e8f0; border:1px solid #1e293b;
  border-radius:8px; padding:.4rem .8rem; font-size:.85rem; -webkit-appearance:auto; }
.ts { display:flex; flex-wrap:wrap; border-bottom:1px solid #1e293b; }
.ts div { flex:1 1 auto; min-width:0; padding:.5rem .4rem; text-align:center; font-size:.75rem; font-weight:600;
  color:#94a3b8; border-bottom:2px solid transparent; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ts div.ac { color:#60a5fa; border-bottom-color:#3b82f6; }
.ct { flex:1; overflow-y:auto; padding:.8rem; display:none; -webkit-overflow-scrolling:touch; }
.ct.ac { display:block; }
.st { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:1px;
  color:#94a3b8; margin:.8rem 0 .4rem; }
.ca { background:#1a2235; border:1px solid #1e293b; border-radius:12px; padding:.8rem; margin-bottom:.6rem; }
.ca-unidad { background:linear-gradient(135deg,#1a2235,#1e2d50); }
.ca-reporte { background:linear-gradient(135deg,#1a2235,#1e2d50); }
.bg { font-size:.65rem; font-weight:700; padding:2px 8px; border-radius:100px; }
.bg-ok { background:rgba(34,197,94,.15); color:#22c55e; }
.bg-w { background:rgba(245,158,11,.15); color:#f59e0b; }
.bg-d { background:rgba(239,68,68,.15); color:#ef4444; }
.pi { display:flex; align-items:center; gap:.5rem; padding:.4rem 0;
  border-bottom:1px solid #1e293b; font-size:.82rem; }
.pi:last-child { border-bottom:none; }
.pd2 { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.dr { background:#ef4444; } .dy { background:#f59e0b; }
.em { text-align:center; color:#94a3b8; padding:1.5rem; font-size:.82rem; }
.ir { display:flex; justify-content:space-between; padding:.25rem 0; font-size:.82rem; }
.il { color:#94a3b8; }
.sb { width:100%; padding:.7rem .8rem; background:#1a2235; border:1px solid #1e293b;
  border-radius:12px; color:#e2e8f0; font-size:.88rem; margin-bottom:.8rem; -webkit-appearance:none; }
.sb:focus { outline:none; border-color:#3b82f6; }
.mi { background:#1a2235; border:1px solid #1e293b; border-radius:12px; padding:.7rem; margin-bottom:.4rem; }
.ml { font-size:.65rem; color:#60a5fa; font-weight:700; letter-spacing:.5px; }
.mn { font-size:.85rem; font-weight:600; margin:2px 0; }
.mc { font-size:.7rem; color:#94a3b8; }
.rf { display:flex; flex-direction:column; gap:.6rem; }
.rf select, .rf textarea { width:100%; padding:.7rem; background:#1a2235; border:1px solid #1e293b;
  border-radius:12px; color:#e2e8f0; font-size:.88rem; font-family:inherit; -webkit-appearance:auto; }
.rf textarea { min-height:90px; resize:vertical; }
.bt { width:100%; padding:.7rem; border:none; border-radius:12px;
  font-size:.9rem; font-weight:700; cursor:pointer; color:white; background:#3b82f6; }
.bt:active { opacity:.85; }
.bt:disabled { opacity:.5; }
.emp-sub { width:auto; flex:1; min-width:90px; padding:.45rem .7rem; border:none; border-radius:10px;
  font-size:.72rem; font-weight:600; cursor:pointer; color:#94a3b8; background:rgba(30,41,59,.6);
  border:1px solid #1e293b; text-align:center; white-space:nowrap; }
.emp-sub:active { background:#1e3a5f; color:#e2e8f0; }
.emp-sub-act { background:#1e3a5f; color:#60a5fa; border-color:#3b82f6; }
.fz { font-size:.75rem; font-weight:700; color:#94a3b8; padding:2px 6px; border-radius:6px;
  cursor:pointer; border:1px solid #1e293b; user-select:none; -webkit-user-select:none; }
.fz:active { background:#1e293b; color:#e2e8f0; }
.adm { font-size:.65rem; color:#94a3b8; cursor:pointer; padding:4px 8px; border:1px solid #1e293b; border-radius:6px; }
.adm.on { background:rgba(239,68,68,.15); color:#fca5a5; border-color:#ef4444; }
/* Overlay */
.ov { display:none; position:fixed; top:0;left:0;width:100%;height:100%; background:rgba(0,0,0,.92); z-index:100;
  flex-direction:column; align-items:center; justify-content:center; gap:1.2rem; }
.ov.on { display:flex; }
.ov h2 { color:#60a5fa; font-size:1.2rem; letter-spacing:3px; }
.ov-logo { width:min(190px,58vw); height:auto; object-fit:contain; display:block; margin-top:1.2rem; }
.ov-note { font-size:.72rem; font-weight:800; letter-spacing:1.5px; color:#f59e0b; text-transform:uppercase; margin-top:-.6rem; }
.ov p { color:#94a3b8; font-size:.85rem; }
.ov .pd { display:flex; gap:1rem; }
.ov .pd-dot { width:14px; height:14px; border-radius:50%; border:2px solid #1e293b; background:transparent; transition:all .2s; }
.ov .pd-dot.f { background:#22c55e; border-color:#22c55e; }
.ov .kp { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; width:260px; }
.ov .kp button { width:76px; height:60px; border-radius:12px; border:1px solid #1e293b;
  background:#1a2235; color:#e2e8f0; font-size:1.2rem; font-weight:500;
  cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.ov .kp button:active { background:#22c55e; }
.ov .kp .ke { border:none; background:transparent; pointer-events:none; }
.ov .kp .kd { font-size:.8rem; color:#94a3b8; }
.ov .err { color:#ef4444; font-size:.8rem; min-height:1.2em; }
.ov .cancel { color:#94a3b8; font-size:.75rem; cursor:pointer; margin-top:.5rem; text-decoration:underline; }
/* Admin edit buttons */
.adm-btn { font-size:.6rem; padding:2px 6px; border-radius:4px; border:1px solid #22c55e;
  background:transparent; color:#22c55e; cursor:pointer; white-space:nowrap; flex-shrink:0; }
.adm-btn:active { background:#22c55e; color:#000; }
.veh-thumb { transition:border-color .2s; }
.veh-thumb:hover { border-color:#60a5fa; }
.ld { text-align:center; padding:1.5rem; color:#94a3b8; }

/* Vehicle thumbs: movil 2x2, pc en linea - misma altura */
.veh-thumbs { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-bottom:.6rem; }
.veh-thumbs .veh-thumb { padding:.4rem; margin:0; }
.veh-thumbs .veh-thumb img { height:110px; width:auto; max-width:100%; object-fit:contain; margin:0 auto; display:block; }
#damage-viewer img { width:100%; height:auto; }

/* Zona chips: efecto luz (login) */
.zona-chip { display:flex; align-items:center; gap:.45rem; padding:.5rem 1.1rem; border-radius:100px;
  border:2px solid #1e293b; cursor:pointer; font-size:.9rem; font-weight:800; letter-spacing:1px;
  color:#475569; background:#0d1526; transition:all .25s; user-select:none; }
.zona-chip .zona-light { width:14px; height:14px; border-radius:50%; background:#1e293b;
  transition:all .25s; box-shadow:none; }
.zona-chip.voc.on { border-color:#60a5fa; color:#60a5fa; background:rgba(59,130,246,.15);
  box-shadow:0 0 18px rgba(59,130,246,.45), inset 0 0 8px rgba(59,130,246,.15); }
.zona-chip.voc.on .zona-light { background:#60a5fa; box-shadow:0 0 12px #60a5fa, 0 0 4px #60a5fa; }
.zona-chip.vor.on { border-color:#22c55e; color:#22c55e; background:rgba(34,197,94,.15);
  box-shadow:0 0 18px rgba(34,197,94,.45), inset 0 0 8px rgba(34,197,94,.15); }
.zona-chip.vor.on .zona-light { background:#22c55e; box-shadow:0 0 12px #22c55e, 0 0 4px #22c55e; }
.zona-chip.tsnu.on { border-color:#f59e0b; color:#f59e0b; background:rgba(245,158,11,.15); }
.zona-chip.tsnu.on .zona-light { background:#f59e0b; box-shadow:0 0 12px #f59e0b, 0 0 4px #f59e0b; }
.zona-chip.off { opacity:.45; }
.zona-chip.off:hover { opacity:.75; }
/* TSNU login entry */
.tsnu-entry{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:.5rem;padding-top:.5rem;border-top:1px solid #1e293b}
.tsnu-entry button{background:transparent;border:1px solid #475569;color:#94a3b8;padding:.4rem 1.2rem;border-radius:100px;font-size:.72rem;cursor:pointer;font-weight:600;letter-spacing:.5px;transition:all .2s}
.tsnu-entry button:hover{border-color:#a78bfa;color:#a78bfa;background:rgba(167,139,250,.08)}
.tsnu-entry .tsnu-sub{font-size:.62rem;color:#64748b}
/* TSNU mode login overrides */
body.tsnu-mode #login{background:linear-gradient(180deg,#0f0a1a,#1a1025)}
body.tsnu-mode #login h1{color:#a78bfa}
body.tsnu-mode #login .kp button{border-color:#2d1f3d;color:#c4b5fd}
body.tsnu-mode #login .kp button:active{background:#a78bfa;color:#0f0a1a}
body.tsnu-mode #login .pd-dot{border-color:#a78bfa}
body.tsnu-mode #login .pd-dot.filled{background:#a78bfa;box-shadow:0 0 8px #a78bfa}
body.tsnu-mode #login .err{color:#c084fc}

/* Base selector (material) — grid uniforme, no descuadrado */
.base-chip { display:flex; align-items:center; gap:.5rem; padding:.55rem .8rem; border-radius:12px;
  border:1px solid #1e293b; background:#1a2235; cursor:pointer; font-size:.76rem; font-weight:700;
  color:#cbd5e1; user-select:none; min-height:40px; transition:all .15s; box-sizing:border-box; }
.base-chip:hover { border-color:#334155; color:#e2e8f0; }
.base-chip.on { background:rgba(59,130,246,.15); color:#93c5fd; border-color:#3b82f6; }
.chip-wrap { display:grid; grid-template-columns:repeat(3,1fr); gap:.45rem; align-items:stretch;
  margin-bottom:.6rem; }
.chip-wrap > span[style] { grid-column:1 / -1; } /* el label de zona ocupa toda la fila */
@media (max-width:780px){
  .chip-wrap { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:480px){
  .chip-wrap { grid-template-columns:1fr; }
  .cat-filters { flex-direction:column; align-items:stretch; }
  .cat-filters .cat-chip { width:100%; justify-content:flex-start; box-sizing:border-box; }
}
.base-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }

/* Chips equipamientos (editar base) */
.eq-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.45rem; margin-top:.3rem; }
.eq-chip { display:flex; align-items:center; gap:.45rem; padding:.5rem .7rem; border-radius:12px;
  border:1px solid #334155; background:#0b1220; color:#cbd5e1; font-size:.76rem; font-weight:600;
  cursor:pointer; user-select:none; -webkit-user-select:none; transition:all .15s; }
.eq-chip:active { transform:scale(.97); }
.eq-chip.on { border-color:#22c55e; background:rgba(34,197,94,.14); color:#4ade80; }
.eq-dot { width:10px; height:10px; border-radius:50%; background:#334155; flex-shrink:0; transition:background .15s; }
.eq-chip.on .eq-dot { background:#22c55e; }

/* Dots de danos por severidad */
.dmg-dots { display:flex; gap:3px; align-items:center; justify-content:center; flex-wrap:wrap; }
.dmg-mini-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }

/* Vehicle toolbar */
.veh-tool { display:flex; gap:.5rem; align-items:center; flex-wrap:nowrap; padding:.5rem 0; }
.veh-brush { padding:.4rem .75rem; border-radius:9px; border:1px solid #334155; background:#1a2235;
  color:#cbd5e1; font-size:.72rem; font-weight:700; cursor:pointer; line-height:1.4; white-space:nowrap; }
.veh-brush:hover { border-color:#60a5fa; color:#e2e8f0; }
.veh-brush.on { border-color:#f59e0b; color:#fbbf24; background:rgba(245,158,11,.12); }
.veh-brush.off { border-color:#334155; color:#94a3b8; }
.veh-tool .lbl { font-size:.64rem; color:#94a3b8; font-weight:700; text-transform:uppercase; letter-spacing:.5px; flex-shrink:0; }
.veh-color { width:26px; height:26px; aspect-ratio:1/1; flex:0 0 26px; border-radius:50%; border:2px solid #334155;
  cursor:pointer; transition:all .15s; padding:0; box-sizing:border-box; }
.veh-color.sel { border-color:#fff; box-shadow:0 0 0 2px #1a2235, 0 0 8px rgba(255,255,255,.35); }
.veh-size { padding:.4rem .7rem; background:#1a2235; border:1px solid #334155; color:#cbd5e1; border-radius:9px;
  font-size:.72rem; font-weight:700; cursor:pointer; white-space:nowrap; }
.veh-size:hover { border-color:#60a5fa; }
.veh-size.sel { border-color:#60a5fa; background:rgba(96,165,250,.15); color:#93c5fd; }
.veh-hint { font-size:.62rem; color:#64748b; margin-left:auto; white-space:nowrap; }

/* Calendar */
.cal-nav { display:flex; justify-content:space-between; align-items:center; margin-bottom:.4rem; }
.cal-nav button { background:#1a2235; border:1px solid #1e293b; color:#e2e8f0; border-radius:8px;
  padding:.3rem .8rem; cursor:pointer; font-size:.85rem; }
.cal-nav button:active { background:#3b82f6; }
.cal-nav .t { font-size:.85rem; font-weight:800; color:#60a5fa; letter-spacing:1px; }
.cal { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.cal-h { text-align:center; font-size:.62rem; color:#94a3b8; padding:.3rem 0; font-weight:700; }
.cal-d { text-align:center; padding:.45rem 0; font-size:.8rem; border-radius:8px; cursor:pointer;
  border:1px solid transparent; position:relative; }
.cal-d:hover { background:#1e293b; }
.cal-d.sel { background:#3b82f6; color:#fff; font-weight:800; }
.cal-d.has { font-weight:800; color:#60a5fa; border-color:rgba(59,130,246,.4); }
.cal-d.other { opacity:.3; }
.cal-dots { display:flex; justify-content:center; gap:2px; margin-top:2px; }
.cal-dot { width:5px; height:5px; border-radius:50%; }
.cal-legend { display:flex; gap:.8rem; flex-wrap:wrap; margin-top:.5rem; font-size:.65rem; color:#94a3b8; }
.cal-legend span { display:flex; align-items:center; gap:.3rem; }
.cal-legend .dot { width:9px; height:9px; border-radius:50%; display:inline-block; flex-shrink:0; }

/* === CALENDARIO ANUAL === */
.cal-sel { display:flex; gap:.4rem; margin:.4rem 0; flex-wrap:wrap; justify-content:center; }
.cal-sel button { padding:.35rem .8rem; border-radius:6px; border:1px solid #1e293b; background:#1a2235; color:#94a3b8; font-size:.75rem; cursor:pointer; }
.cal-sel button.on { background:#3b82f6; color:#fff; border-color:#3b82f6; }
.cal-year { font-weight:800; font-size:1.1rem; color:#60a5fa; text-align:center; margin:.3rem 0 .5rem; }
.cal-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:.5rem; }
.cal-month { background:#1a2235; border-radius:8px; padding:.4rem; border:1px solid #1e293b; min-width:130px; }
.cal-mh { text-align:center; font-size:.7rem; font-weight:700; color:#94a3b8; margin-bottom:.2rem; }
.cal-dh { display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:.55rem; color:#64748b; margin-bottom:.1rem; }
.cal-dh span { padding:1px 0; }
.cal-dg { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; text-align:center; }
.cal-dg span { font-size:.58rem; padding:2px 0; border-radius:2px; color:#94a3b8; min-height:16px; line-height:16px; position:relative; }
.cal-dg span.off { color:#475569; }
.cal-dg span.today { font-weight:800; color:#fff; background:#3b82f6; border-radius:3px; }
.cal-dg span.vac { font-weight:700; color:#fff; border-radius:2px; }
body.light .cal-month { background:var(--surface-2); border-color:var(--border); }
body.light .cal-mh { color:var(--text-muted); }
body.light .cal-dh span { color:var(--text-soft); }
body.light .cal-dg span { color:var(--text-muted); }
body.light .cal-dg span.off { color:var(--border-strong); }
body.light .cal-sel button { background:var(--surface-2); border-color:var(--border); color:var(--text-muted); }
body.light .cal-sel button.on { background:var(--accent); color:#fff; border-color:var(--accent); }
body.light .cal-legend { color:var(--text-muted); }
@media (max-width:480px) {
  .cal-grid { grid-template-columns:repeat(auto-fill,minmax(105px,1fr)); gap:.3rem; }
  .cal-dg span { font-size:.5rem; min-height:13px; line-height:13px; }
  .cal-dh { font-size:.5rem; }
}

/* Sub-tabs (Material) — botones uniformes, cada uno con su color */
.subtabs { display:grid; grid-template-columns:repeat(2,1fr); gap:.45rem; margin-bottom:.7rem; width:100%; }
.subtab { display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:34px; padding:.4rem .5rem; border-radius:10px; border:1px solid #1e293b;
  background:#1a2235; color:#cbd5e1; font-size:.72rem; font-weight:700; line-height:1.15;
  cursor:pointer; letter-spacing:.2px; transition:all .15s; box-sizing:border-box; }
.subtab:hover { border-color:#334155; color:#e2e8f0; }
/* Colores por boton (estado activo) */
.subtab.st-dot.on { background:#3b82f6; color:#fff; border-color:#3b82f6; box-shadow:0 2px 8px rgba(59,130,246,.35); }
.subtab.st-inv.on { background:#22c55e; color:#fff; border-color:#22c55e; box-shadow:0 2px 8px rgba(34,197,94,.35); }
.subtab.st-cad.on { background:#f59e0b; color:#0f172a; border-color:#f59e0b; box-shadow:0 2px 8px rgba(245,158,11,.35); }
.subtab.st-o2.on { background:#8b5cf6; color:#fff; border-color:#8b5cf6; box-shadow:0 2px 8px rgba(139,92,246,.35); }
/* Indicador sutil de color en reposo */
.subtab.st-dot { border-left:3px solid #3b82f6; }
.subtab.st-inv { border-left:3px solid #22c55e; }
.subtab.st-cad { border-left:3px solid #f59e0b; }
.subtab.st-o2 { border-left:3px solid #8b5cf6; }

/* Light: subtabs */
body.light .subtab { background:var(--surface); border-color:var(--border-strong); color:var(--text-muted); }
body.light .subtab:hover { background:var(--surface-2); color:var(--text); }
body.light .subtab.st-dot.on { background:#2563eb; color:#fff; border-color:#2563eb; }
body.light .subtab.st-inv.on { background:#16a34a; color:#fff; border-color:#16a34a; }
body.light .subtab.st-cad.on { background:#d97706; color:#fff; border-color:#d97706; }
body.light .subtab.st-o2.on { background:#7c3aed; color:#fff; border-color:#7c3aed; }

/* Sub-tabs de Unidades (2 botones centrados, marco de color distinto) */
.uni-subtabs { grid-template-columns:repeat(2,1fr); max-width:420px; margin-left:auto; margin-right:auto; }
.subtab.st-bases { border-left:3px solid #3b82f6; }
.subtab.st-fis { border-left:3px solid #a855f7; }
/* Dos columnas en PC para listas de unidades (bases y físicas) */
.uni-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; align-items:start; }
.uni-grid2 > .ca, .uni-grid2 > .uni-row { margin-bottom:0; }
@media (max-width:760px) {
  .uni-grid2 { grid-template-columns:1fr; }
}
.subtab.st-bases.on { background:#3b82f6; color:#fff; border-color:#3b82f6; box-shadow:0 2px 8px rgba(59,130,246,.35); }
.subtab.st-fis.on { background:#a855f7; color:#fff; border-color:#a855f7; box-shadow:0 2px 8px rgba(168,85,247,.35); }
body.light .subtab.st-bases.on { background:#2563eb; color:#fff; border-color:#2563eb; }
body.light .subtab.st-fis.on { background:#9333ea; color:#fff; border-color:#9333ea; }

/* Botellas O2: grupos por capacidad + celdas sólidas con aro exterior */
.o2-cap-group { margin-bottom:.7rem; }
.o2-cap-head { font-size:.72rem; font-weight:800; letter-spacing:.4px; text-transform:uppercase;
  color:var(--text); margin-bottom:.35rem; padding:.3rem .55rem;
  background:var(--surface-2); border:1px solid var(--border); border-radius:8px; }
.o2-card { border:1px solid transparent; outline:none; border-radius:10px; }
.o2-llena { border-color:#38bdf8; background:#dff6ff; }
.o2-vacia { border-color:#fb923c; background:#fff0df; }
.o2-llena .o2-qty { color:#38bdf8; }
.o2-vacia .o2-qty { color:#fb923c; }
/* Colores diferenciados por capacidad y estado: 5 L naranja/amarillo, 10 L azul/azul suave. */
.o2-5l-llena { border:1px solid #f97316; background:#fff1e6; }
.o2-5l-llena .o2-qty { color:#c2410c; }
.o2-5l-vacia { border:1px solid #eab308; background:#fffbd6; }
.o2-5l-vacia .o2-qty { color:#a16207; }
.o2-10l-llena { border:1px solid #0284c7; background:#e0f5ff; }
.o2-10l-llena .o2-qty { color:#0369a1; }
.o2-10l-vacia { border:1px solid #60a5fa; background:#edf5ff; }
.o2-10l-vacia .o2-qty { color:#1d4ed8; }
.o2-qty { font-size:1.15rem; font-weight:800; line-height:1.05; margin:.1rem 0 .18rem; }
/* Cada capacidad se presenta en paralelo: LLENAS | VACÍAS. */
.o2-cap-group > .frow2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; padding:0 .15rem .15rem; }
.o2-cap-group .o2-card { padding:.38rem .45rem !important; min-height:0; }
body.light .o2-llena { border-color:#0ea5e9; background:#e0f5ff; }
body.light .o2-llena .o2-qty { color:#0284c7; }
body.light .o2-vacia { border-color:#f97316; background:#fff1e6; }
body.light .o2-vacia .o2-qty { color:#ea580c; }
body.light .o2-cap-head { background:var(--surface-2); }
/* Colores sólidos dentro de la celda; el aro queda claramente separado. */
.o2-card.o2-5l-llena { background:#fff1e6; }
.o2-card.o2-5l-vacia { background:#fffbd6; }
.o2-card.o2-10l-llena { background:#e0f5ff; }
.o2-card.o2-10l-vacia { background:#edf5ff; }

/* Filtros de dimensión de consumo O2 */
.o2-dim-chips { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.5rem; }
.o2-dim-chip { padding:.32rem .7rem; font-size:.72rem; font-weight:700; border-radius:8px;
  border:1px solid var(--border-strong,#334155); background:var(--surface-2);
  color:var(--text-muted); cursor:pointer; }
.o2-dim-chip.on { background:#0ea5e9; color:#fff; border-color:#0ea5e9; }
body.light .o2-dim-chip.on { background:#0284c7; border-color:#0284c7; }

/* Chips de resumen de nómina (neón) */
.nom-chips { display:grid; grid-template-columns:repeat(2,1fr); gap:.4rem; margin-bottom:.4rem; }
.nom-chips-3 { grid-template-columns:repeat(3,1fr); }
.nom-chip { padding:.35rem .5rem; border-radius:10px; border:1px solid transparent !important; text-align:left; min-height:50px; max-height:50px; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; overflow:hidden; background:transparent !important; }
/* Neones superiores: marcos transparentes con degradados cálidos. */
.nom-chips > .nom-chip:nth-child(1n) { background:transparent padding-box,linear-gradient(135deg,#facc15,#f97316) border-box !important; }
.nom-chips > .nom-chip:nth-child(2n) { background:transparent padding-box,linear-gradient(135deg,#ef4444,#f472b6) border-box !important; }
.nom-chips > .nom-chip:nth-child(3n) { background:transparent padding-box,linear-gradient(135deg,#f472b6,#fb923c) border-box !important; }
.nom-chips > .nom-chip:nth-child(4n) { background:transparent padding-box,linear-gradient(135deg,#fb923c,#facc15) border-box !important; }
.nom-chips > .nom-chip { box-shadow:0 0 7px rgba(244,114,182,.28); }
.nom-chips > .nom-chip:nth-child(4n+1) { border-color:#facc15 !important; }
.nom-chips > .nom-chip:nth-child(4n+2) { border-color:#ef4444 !important; }
.nom-chips > .nom-chip:nth-child(4n+3) { border-color:#f472b6 !important; }
.nom-chips > .nom-chip:nth-child(4n) { border-color:#fb923c !important; }
/* Las siete celdas de bases: marco neón azul → verde. */
.nom-base-cell { border:2px solid #38bdf8 !important; background:transparent !important; box-shadow:0 0 8px rgba(56,189,248,.42),inset 0 0 7px rgba(74,222,128,.08); }
@media (min-width:900px) { .nom-base-cell { border-color:#4ade80 #38bdf8 #4ade80 #38bdf8 !important; } }
.nom-chip-v { font-size:.78rem; font-weight:800; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#f8fafc !important; }
.nom-chip-k { font-size:.58rem; letter-spacing:.5px; text-transform:uppercase; opacity:.9; margin-top:.1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#cbd5e1 !important; }
/* En modo claro se mantienen los marcos neón, pero el texto gana contraste. */
body.light .nom-chip-v { color:#0f172a !important; }
body.light .nom-chip-k { color:#475569 !important; }
.nom-chip-blue { border-color:#38bdf8; background:rgba(56,189,248,.08); }
.nom-chip-blue .nom-chip-v { color:#38bdf8; }
.nom-chip-green { border-color:#4ade80; background:rgba(74,222,128,.08); }
.nom-chip-green .nom-chip-v { color:#4ade80; }
.nom-chip-orange { border-color:#fb923c; background:rgba(251,146,60,.08); }
.nom-chip-orange .nom-chip-v { color:#fb923c; }
.nom-chip-purple { border-color:#a78bfa; background:rgba(167,139,250,.08); }
.nom-chip-purple .nom-chip-v { color:#a78bfa; }
body.light .nom-chip-blue { background:rgba(14,165,233,.06); }
body.light .nom-chip-green { background:rgba(22,163,74,.06); }
body.light .nom-chip-orange { background:rgba(249,115,22,.06); }
body.light .nom-chip-purple { background:rgba(126,34,206,.06); }
/* En PC las celdas neón aprovechan el ancho disponible: 5 columnas. */
@media (min-width:900px) { .nom-chips-3 { grid-template-columns:repeat(8,1fr); } }

/* Acciones de nómina */
.nom-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.4rem; margin-top:.7rem; }
.nom-actions .bt { width:100%; }
@media (max-width:600px) { .nom-actions { grid-template-columns:1fr; } }

/* Resumen de bases de nómina */
.nom-bases-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.4rem; margin:.7rem 0 .5rem; }
.nom-base-cell { min-height:48px; padding:.4rem .5rem; border-radius:8px; }
.nom-base-label { font-size:.58rem; font-weight:800; letter-spacing:.35px; color:var(--text-muted,#94a3b8); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nom-base-value { margin-top:.18rem; text-align:right; font-size:.76rem; font-weight:800; color:var(--text,#e2e8f0); }
.nom-base-value.neg { color:#ef4444; }
body.light .nom-base-cell { background:#f8fafc; border-color:#cbd5e1; }
body.light .nom-base-label { color:#475569; }
body.light .nom-base-value { color:#1e3a8a; }
body.light .nom-base-value.neg { color:#b91c1c; }
@media (min-width:900px) { .nom-bases-grid { grid-template-columns:repeat(7,minmax(0,1fr)); gap:.3rem; } .nom-base-cell { padding:.4rem .35rem; } .nom-base-value { font-size:.7rem; } }
@media (max-width:600px) { .nom-bases-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.nom-empresa-box { margin-top:1rem; padding:.7rem; border:1px solid var(--border-strong,#334155); border-radius:10px; background:var(--surface-2,#1a2235); overflow-x:auto; }
.nom-empresa-title { color:#60a5fa; font-size:.68rem; font-weight:800; letter-spacing:.5px; margin-bottom:.45rem; }
.nom-empresa-head, .nom-empresa-row { display:grid; grid-template-columns:2fr 1fr .75fr 1fr; gap:.35rem; align-items:center; min-width:440px; }
.nom-empresa-head { padding-bottom:.3rem; border-bottom:1px solid var(--border-strong,#334155); color:var(--text-muted,#94a3b8); font-size:.58rem; font-weight:800; text-transform:uppercase; }
.nom-empresa-row { padding:.3rem 0; border-bottom:1px solid var(--border,#2a3550); color:var(--text-muted,#cbd5e1); font-size:.68rem; }
.nom-empresa-row:last-child { border-bottom:none; }
.nom-empresa-row span:not(:first-child), .nom-empresa-row b { text-align:right; }
.nom-empresa-row b { color:#60a5fa; }
.nom-empresa-note { color:var(--text-soft,#64748b); font-size:.62rem; margin-top:.35rem; }
body.light .nom-empresa-box { background:#f8fafc; border-color:#cbd5e1; }
body.light .nom-empresa-title { color:#1d4ed8; }
body.light .nom-empresa-head { color:#475569; border-color:#cbd5e1; }
body.light .nom-empresa-row { color:#475569; border-color:#e2e8f0; }
body.light .nom-empresa-row b { color:#1d4ed8; }
body.light .nom-empresa-note { color:#64748b; }

/* Modal flotante de calendario para imputación manual */
.nom-modal-overlay {
  position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(10,15,26,.8); backdrop-filter:blur(4px);
  z-index:9999; display:flex; align-items:center; justify-content:center;
  padding:1rem; box-sizing:border-box; animation:nomFadeIn .15s ease-out;
}
@keyframes nomFadeIn { from { opacity:0; } to { opacity:1; } }
.nom-modal-box {
  background:#131c31; border:1px solid #2a3550; border-radius:14px;
  width:100%; max-width:420px; max-height:92vh; overflow-y:auto;
  box-shadow:0 20px 25px -5px rgba(0,0,0,.6), 0 8px 10px -6px rgba(0,0,0,.6);
  padding:1.1rem; box-sizing:border-box; color:#e2e8f0;
}
.nom-modal-head {
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid #2a3550; padding-bottom:.6rem; margin-bottom:.8rem;
}
.nom-modal-title { font-size:.92rem; font-weight:800; color:#60a5fa; }
.nom-modal-close {
  background:transparent; border:none; color:#94a3b8; font-size:1.3rem;
  cursor:pointer; padding:.2rem .4rem; border-radius:6px; line-height:1;
}
.nom-modal-close:hover { color:#fff; background:#1e293b; }
/* Modo claro: la ventana del dia estaba pensada solo para oscuro
   (Lauren, 20/09/2026). */
body.light .nom-modal-overlay { background:rgba(15,23,42,.45); }
body.light .nom-modal-box {
  background:#ffffff; border-color:#cbd5e1; color:#0f172a;
  box-shadow:0 20px 25px -5px rgba(15,23,42,.25), 0 8px 10px -6px rgba(15,23,42,.18);
}
body.light .nom-modal-close { color:#475569; }
body.light .nom-modal-close:hover { color:#0f172a; background:#e2e8f0; }
.nom-segmented {
  display:flex; background:#0a0f1a; border:1px solid #2a3550; border-radius:8px; padding:3px; gap:3px; margin:.4rem 0 .7rem;
}
.nom-segmented-btn {
  flex:1; border:none; background:transparent; color:#94a3b8;
  padding:.45rem .2rem; font-size:.72rem; font-weight:700; border-radius:6px;
  cursor:pointer; transition:all .15s ease; text-align:center;
}
.nom-segmented-btn.on { background:#3b82f6; color:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.nom-quick-dur { display:flex; gap:.35rem; margin-top:.35rem; }
.nom-quick-btn {
  flex:1; background:#0a0f1a; border:1px solid #2a3550; color:#cbd5e1;
  padding:.35rem 0; border-radius:6px; font-size:.75rem; font-weight:700; cursor:pointer;
}
.nom-quick-btn.on { background:rgba(56,189,248,.18); border-color:#38bdf8; color:#38bdf8; }
.nom-check-row {
  display:flex; align-items:center; gap:.55rem; padding:.5rem .6rem;
  background:#0a0f1a; border:1px solid #2a3550; border-radius:8px; margin-top:.4rem;
  cursor:pointer; font-size:.78rem; font-weight:600; color:#e2e8f0;
}
.nom-check-row:hover { border-color:#3a4766; }
.nom-check-row input[type="checkbox"] { width:1.15rem; height:1.15rem; accent-color:#3b82f6; cursor:pointer; }
.bt-flat { padding:.4rem .6rem; min-height:0; font-size:.74rem; line-height:1.2; }
.nom-edit { padding:.6rem .7rem; border-radius:10px; border:1px solid #4ade80; background:rgba(74,222,128,.05); }
.nom-edit-title { font-size:.7rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:#4ade80; margin-bottom:.4rem; }
.nom-edit label { font-size:.62rem; color:#86efac; text-transform:uppercase; letter-spacing:.4px; display:block; margin-top:.2rem; }
.nom-edit input, .nom-edit select { background:var(--surface-2); border:1px solid #4ade80; color:var(--text); }
.nom-edit-general { border-color:#3b82f6; background:rgba(59,130,246,.05); }
.nom-edit-general .nom-edit-title { color:#60a5fa; }
.nom-edit-general label { color:#93c5fd; }
.nom-edit-general input { border-color:#3b82f6; }
/* Dos columnas en escritorio para Datos editables + Complementos */
.nom-cols { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-top:.6rem; align-items:stretch; }
.nom-col { min-width:0; }
.nom-col > .nom-edit { height:100%; box-sizing:border-box; }
@media (max-width:760px) {
  .nom-cols { grid-template-columns:1fr; }
}
.nom-temp-concepts { margin-top:.55rem; padding:.55rem .65rem; border:1px dashed #4ade80; border-radius:9px; background:rgba(74,222,128,.04); }
.nom-temp-title { color:#86efac; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.4px; }
.nom-temp-help { color:var(--text-muted); font-size:.62rem; margin:.18rem 0 .35rem; }
.nom-temp-row { display:grid; grid-template-columns:minmax(110px,1.5fr) 70px 82px auto 26px; gap:.3rem; align-items:center; margin:.3rem 0; }
.nom-temp-row input, .nom-temp-row select { min-width:0; width:100%; padding:.35rem .4rem; border-radius:6px; border:1px solid var(--border-strong); background:var(--input-bg,var(--surface-2)); color:var(--text); font:inherit; font-size:.68rem; }
.nom-temp-active { display:flex; align-items:center; gap:.2rem; color:var(--text-muted); font-size:.62rem; white-space:nowrap; }
.nom-temp-active input { width:auto; }
.nom-temp-delete { width:25px; height:25px; border:1px solid #ef4444; border-radius:6px; background:transparent; color:#ef4444; cursor:pointer; font-size:1rem; line-height:1; }
.nom-temp-add { width:auto; margin-top:.35rem; border:1px solid #4ade80; background:rgba(74,222,128,.12); color:#86efac; }
.nom-temp-empty { color:var(--text-muted); font-size:.68rem; padding:.25rem 0; }
body.light .nom-temp-concepts { border-color:#16a34a; background:rgba(22,163,74,.04); }
body.light .nom-temp-title, body.light .nom-temp-add { color:#15803d; }
@media (max-width:520px) { .nom-temp-row { grid-template-columns:1fr 65px 76px 52px 25px; } .nom-temp-active { font-size:.55rem; } }
.nom-sim-box { margin-top:.55rem; padding:.55rem .65rem; border:1px dashed #f59e0b; border-radius:9px; background:rgba(245,158,11,.05); }
.nom-sim-title { color:#fbbf24; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.4px; }
.nom-sim-help { color:var(--text-muted); font-size:.62rem; margin:.18rem 0 .35rem; }
.nom-sim-section-title { color:var(--text-muted); font-size:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.35px; border-top:1px solid rgba(245,158,11,.35); padding-top:.35rem; margin-top:.45rem; }
.nom-sim-toggle { display:flex; align-items:center; gap:.3rem; color:#fbbf24; font-size:.68rem; font-weight:700; margin:.35rem 0; }
.nom-sim-toggle input { accent-color:#f59e0b; }
.nom-sim-box label:not(.nom-sim-toggle) { display:block; color:var(--text-muted); font-size:.6rem; margin-top:.2rem; }
.nom-sim-box input[type=number] { width:100%; padding:.35rem .4rem; border-radius:6px; border:1px solid #f59e0b; background:var(--input-bg,var(--surface-2)); color:var(--text); font:inherit; font-size:.68rem; }
body.light .nom-sim-box { border-color:#d97706; background:rgba(245,158,11,.05); }
body.light .nom-sim-title, body.light .nom-sim-toggle { color:#b45309; }

/* Botones del informe diario: uniformes y responsive */
.emp-inf-btns { display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; }
.emp-inf-btn { width:100%; padding:.4rem .5rem; font-size:.74rem; font-weight:700; color:#fff;
  border:none; border-radius:8px; text-align:center; line-height:1.15; min-height:38px;
  box-sizing:border-box; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.emp-inf-btn:hover { filter:brightness(1.08); }
@media (max-width:640px) {
  .emp-inf-btns { grid-template-columns:1fr; }
}

/* Responsive: en pantallas estrechas, los botones siguen en 2 columnas (=2x2) */

/* Cabecera de zona con miniatura (material) */
.mat-cabecera { transition:all .15s; }
.mat-cabecera:hover { border-color:rgba(148,163,184,.5); }
.mat-cabecera img { transition:transform .15s; }
.mat-cabecera img:hover { transform:scale(1.04); }

/* Submenú (compartimento) dentro de una zona */
.mat-submenu { transition:all .12s; }
.mat-bolsa { border-left:2px solid rgba(148,163,184,.3); }

/* Light: cabecera y submenú */
body.light .mat-cabecera { border-color:var(--border); background:var(--surface-2); }
body.light .mat-cabecera .mat-cabecera-title { color:var(--text); }
body.light .mat-submenu { background:var(--surface-2); border-color:var(--border); }
body.light .mat-bolsa { color:var(--text-muted); border-left-color:var(--border-strong); }

/* Filters row */
.frow { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; margin-bottom:.6rem; }
.frow input[type=text] { flex:1; min-width:140px; }
.frow select { background:#1a2235; border:1px solid #1e293b; color:#e2e8f0; border-radius:8px;
  padding:.5rem .6rem; font-size:.78rem; -webkit-appearance:auto; }
.frow .adm-btn { padding:6px 12px; }

/* Caducable rows */
.cad-row { border-left:3px solid #1e293b; }
.cad-row.vig { border-left-color:#22c55e; }
.cad-row.prox { border-left-color:#f59e0b; }
.cad-row.cad { border-left-color:#ef4444; }
.cad-meta { font-size:.68rem; color:#94a3b8; margin-top:2px; }
.cad-form { display:flex; flex-direction:column; gap:.5rem; padding:.8rem; }
.cad-form input, .cad-form select, .cad-form textarea { width:100%; padding:.6rem; background:#1a2235;
  border:1px solid #1e293b; border-radius:8px; color:#e2e8f0; font-size:.82rem; font-family:inherit; -webkit-appearance:auto; }
.cad-form textarea { min-height:90px; line-height:1.5; }
.cad-form .frow2 { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }.fu-row{display:flex;gap:.3rem;align-items:center}
.fu-btn{flex:0 0 auto;width:32px;height:32px;border-radius:8px;border:1px solid #475569;background:transparent;color:#94a3b8;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:all .2s}
.fu-btn:hover{border-color:#60a5fa;color:#60a5fa;background:rgba(96,165,250,.08)}
.fu-btn.loading{pointer-events:none;opacity:.5}
.fu-row input[type="text"]{flex:1}
.fu-row input[type="file"]{display:none}
/* Photo gallery */
.bf-gallery{display:flex;gap:.6rem;margin-top:.6rem;flex-wrap:wrap}
.bf-thumb{width:100px;height:75px;object-fit:cover;border-radius:8px;border:1px solid #1e293b;cursor:pointer;transition:transform .15s}
.bf-thumb:hover{transform:scale(1.05);border-color:#60a5fa}
.bf-maps-btn{display:inline-flex;align-items:center;gap:.3rem;padding:.35rem .7rem;border-radius:8px;border:1px solid #22c55e;color:#4ade80;font-size:.7rem;cursor:pointer;text-decoration:none;margin-top:.4rem}
.bf-maps-btn:hover{background:rgba(34,197,94,.1)}
.bf-label{font-size:.62rem;color:#64748b;text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
.bf-thumb-wrap{display:flex;flex-direction:column;align-items:center;gap:2px}
#foto-ov{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,.92);z-index:9999;display:flex;align-items:center;justify-content:center;cursor:pointer}
#foto-ov img{max-width:94vw;max-height:94vh;object-fit:contain;border-radius:8px}
#foto-ov .foto-close{position:absolute;top:1rem;right:1.5rem;color:#fff;font-size:2rem;cursor:pointer;z-index:1}

.cat-filters{display:flex;gap:.35rem;flex-wrap:wrap;margin:.6rem 0 .8rem}
.cat-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .75rem;border-radius:100px;border:1px solid #334155;background:#1a2235;color:#94a3b8;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.4px;cursor:pointer;user-select:none;white-space:nowrap}
.cat-chip.on{border-color:var(--cc, #60a5fa);background:var(--cb, rgba(59,130,246,.15));color:var(--ct, #60a5fa)}
.cat-chip.resp{--cc:#3b82f6;--cb:rgba(59,130,246,.15);--ct:#60a5fa}
.cat-chip.trauma{--cc:#ef4444;--cb:rgba(239,68,68,.15);--ct:#f87171}
.cat-chip.seg{--cc:#22c55e;--cb:rgba(34,197,94,.15);--ct:#4ade80}
.cat-chip.inyec{--cc:#a855f7;--cb:rgba(168,85,247,.15);--ct:#c084fc}
.cat-chip.desech{--cc:#f59e0b;--cb:rgba(245,158,11,.15);--ct:#fbbf24}
.cat-chip.inmov{--cc:#f97316;--cb:rgba(249,115,22,.15);--ct:#fb923c}

/* Equipo badges */
.eq-badge{font-size:.58rem;font-weight:800;padding:1px 6px;border-radius:4px;letter-spacing:.5px}.eq-badge.A{background:rgba(96,165,250,.15);color:#60a5fa}.eq-badge.B{background:rgba(34,197,94,.15);color:#22c55e}.eq-badge.C{background:rgba(245,158,11,.15);color:#f59e0b}.eq-badge.D{background:rgba(168,85,247,.15);color:#a855f7}.eq-badge.E{background:rgba(239,68,68,.15);color:#ef4444}.eq-badge.SCRAT{background:rgba(6,182,212,.15);color:#06b6d4}
.inv-group-head{display:flex;align-items:center;gap:.4rem;padding:.42rem .65rem;border-left:4px solid var(--inv-cat,#64748b);border-top:1px solid color-mix(in srgb,var(--inv-cat,#64748b) 45%,transparent);border-bottom:1px solid color-mix(in srgb,var(--inv-cat,#64748b) 45%,transparent);border-radius:8px 8px 4px 4px;background:color-mix(in srgb,var(--inv-cat,#64748b) 12%,transparent);color:var(--inv-cat,#94a3b8);font-size:.88rem;font-weight:900;letter-spacing:.45px;text-transform:uppercase}
.inv-item{display:flex;justify-content:space-between;align-items:center;padding:.55rem .7rem;border-left:3px solid color-mix(in srgb,var(--inv-cat,#64748b) 65%,transparent);border-bottom:1px solid color-mix(in srgb,var(--inv-cat,#64748b) 18%,#1e293b);background:color-mix(in srgb,var(--inv-cat,#64748b) 5%,transparent);font-size:.82rem;gap:.5rem}
.inv-item:nth-child(even){background:color-mix(in srgb,var(--inv-cat,#64748b) 9%,transparent)}
.inv-item:hover{background:color-mix(in srgb,var(--inv-cat,#64748b) 15%,transparent)}
.inv-item .inv-qty{font-weight:700;font-size:.78rem;min-width:32px;text-align:center;border-radius:8px;padding:2px 8px;background:color-mix(in srgb,var(--inv-cat,#64748b) 14%,transparent)}
.inv-cat-badge{font-size:.55rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px;padding:1px 6px;border-radius:4px;display:inline-block;margin-left:6px;background:color-mix(in srgb,var(--inv-cat,#64748b) 12%,transparent)}

/* Light: inventario base */
body.light .inv-item{border-bottom-color:color-mix(in srgb,var(--inv-cat,#64748b) 22%,var(--border));background:color-mix(in srgb,var(--inv-cat,#64748b) 6%,var(--surface))}
body.light .inv-item:nth-child(even){background:color-mix(in srgb,var(--inv-cat,#64748b) 10%,var(--surface-2))}
body.light .inv-group-head{background:color-mix(in srgb,var(--inv-cat,#64748b) 11%,var(--surface));color:color-mix(in srgb,var(--inv-cat,#64748b) 75%,#0f172a)}
body.light .inv-item .inv-qty{background:color-mix(in srgb,var(--inv-cat,#64748b) 15%,var(--surface-2));color:color-mix(in srgb,var(--inv-cat,#64748b) 80%,#0f172a)}

/* DESKTOP SUPERVISOR */
@media (min-width:1024px) {
  #app { max-width:100vw; padding:0 2rem; }
  #login { padding:4rem; }
  #login .kp { max-width:320px; }
  .tb { padding:.5rem 1.5rem; }
  .ts { justify-content:center; gap:.75rem; padding:.3rem 0; }
  .ts div { min-width:90px; padding:.6rem 1rem; font-size:.78rem; }
  /* Dashboard: bloques completos (titulo+tarjeta) en grid */
  #cd.ac { display:block; }
  .dash-grid { grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:1.2rem; }
  #cd.ac .stats-row { margin-bottom:1.2rem; }
  /* Wider cards */
  .ca { border-radius:12px; padding:1.2rem; }
  .pi { padding:.8rem 1rem; }
  .mi { padding:.9rem 1.1rem; }
  .st { font-size:.8rem; margin:1rem 0 .5rem; }
  /* Material: ancho fijo y uniforme para todas las zonas/compartimentos */
  #cm.ac { display:flex; flex-direction:column; width:100%; max-width:1100px; margin:0 auto; align-self:stretch; box-sizing:border-box; }
  #cm.ac > .subtabs, #cm.ac > [id^="mat-"] { width:100%; max-width:1100px; align-self:stretch; box-sizing:border-box; }
  #cm.ac #mat-dot, #cm.ac #mat-dot #sr,
  #cm.ac #mat-inv, #cm.ac #mat-cad, #cm.ac #mat-o2, #cm.ac #mat-o2 #o2-body { width:100%; max-width:1100px; align-self:stretch; }
  #cm.ac .ca, #cm.ac #inv-list, #cm.ac #cad-list { width:100%; min-width:0; box-sizing:border-box; }
  #cm.ac #mat-dot #sr > .ca,
  #cm.ac #mat-o2 #o2-body > * { width:100%; min-width:0; }
  #cm.ac #mat-o2 > .frow, #cm.ac #mat-o2 #o2-base-sel { width:100%; }
  #cm.ac .sb { max-width:760px; margin:0 auto 1rem; width:100%; }
  #cm.ac .mi { display:grid; grid-template-columns:150px 1fr auto; gap:.5rem 1rem; align-items:center; }
  /* Vehículo: barra herramientas centrada + marco centrado 2 columnas */
  #veh-toolbar { display:flex; justify-content:center; margin-bottom:2px; }
  #veh-toolbar .veh-tool { flex-wrap:nowrap; }
  .veh-layout { display:flex; gap:1.25rem; align-items:stretch; max-width:1000px; margin:0 auto; justify-content:center; }
  .veh-thumbs { display:flex; flex-direction:column; gap:.5rem; flex:0 0 150px; }
  .veh-thumbs .veh-thumb { width:100%; padding:.4rem; }
  .veh-thumbs .veh-thumb img { height:80px; width:auto; max-width:100%; }
  /* Vista ampliada: a la derecha, arriba, sin corte */
  #damage-viewer { flex:1 1 auto; max-width:none; margin:0; min-width:0; }
  #damage-viewer img { width:100%; height:auto; max-height:62vh; object-fit:contain; }
  .veh-tool { flex-wrap:nowrap; }
  /* Calendario: centrado y limitado */
  #ch.ac .cal-wrap { max-width:560px; margin:0 auto; }
  /* Almacenes: columna fluida, selector arriba */
  #ca.ac { display:block; }
  #ca.ac #alm-sel { max-width:480px; }
  /* Historial: multi-column */
  #ch.ac > .ca:first-of-type { display:flex; flex-direction:column; max-width:900px; margin:0 auto; }
  /* Reporte 2-col */
  #cr.ac .rf { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; max-width:700px; margin:0 auto; }
  #cr.ac .rf textarea, #cr.ac .rf button { grid-column:1/-1; }
}
@media (min-width:1440px) {
  #app { padding:0 3rem; }
  .dash-grid { grid-template-columns:repeat(3,1fr); }
}

/* Stats panel */
.stats-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.8rem; margin-bottom:1rem; }
.stat-card .sub{font-size:.6rem;color:var(--text-soft);margin-top:3px}
/* bars (graficos) */
.est-bar{flex:1;background:#1e293b;border-radius:6px;height:12px;overflow:hidden}
.est-bar-fill{height:100%;background:#60a5fa;border-radius:6px;min-width:4px}
body.light .est-bar{background:var(--surface-2)}
body.light .est-bar-fill{background:var(--accent)}
.stat-card { background:#1a2235; border-radius:10px; padding:1rem; text-align:center; border:1px solid #1e293b; }
.stat-card .num { font-size:2rem; font-weight:800; }
.stat-card .lbl { font-size:.7rem; color:#94a3b8; margin-top:4px; }
.stat-card.g { border-color:#22c55e; }
.stat-card.g .num { color:#22c55e; }
.stat-card.r { border-color:#ef4444; }
.stat-card.r .num { color:#ef4444; }
.stat-card.w { border-color:#f59e0b; }
.stat-card.w .num { color:#f59e0b; }

/* Seis indicadores en una sola fila cuando hay ancho suficiente. */
@media (min-width:601px) {
  #cd.ac, #cst.ac { width:100%; max-width:none; align-self:stretch; box-sizing:border-box; }
  #cd.ac > #stats-row, #cst.ac > #stats-row,
  #cd.ac .stats-row, #cst.ac .stats-row {
    display:grid !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    gap:.5rem !important;
    margin-left:0 !important;
    margin-right:0 !important;
    box-sizing:border-box !important;
  }
  #cd.ac .stats-row .stat-card, #cst.ac .stats-row .stat-card {
    min-width:0 !important;
    width:100% !important;
    box-sizing:border-box !important;
    padding:.65rem .3rem;
  }
  #cd.ac .stats-row .stat-card .num, #cst.ac .stats-row .stat-card .num { font-size:1.45rem; line-height:1; }
  #cd.ac .stats-row .stat-card .lbl, #cst.ac .stats-row .stat-card .lbl {
    font-size:.62rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
  }
}

/* Estadísticas compactas en móvil: seis indicadores en 3 columnas. */
@media (max-width:600px) {
  #cd.ac, #cst.ac { width:100%; max-width:none; align-self:stretch; box-sizing:border-box; }
  #cd.ac .stats-row, #cst.ac .stats-row { width:100%; max-width:none; margin-left:auto; margin-right:auto; box-sizing:border-box; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.35rem; margin-bottom:.6rem; }
  #cd.ac .stats-row .stat-card, #cst.ac .stats-row .stat-card { width:100%; box-sizing:border-box; }
  .stats-row { grid-template-columns:repeat(3,minmax(0,1fr)); gap:.35rem; margin-bottom:.6rem; }
  .stats-row .stat-card { min-width:0; min-height:58px; padding:.42rem .18rem; border-radius:7px; display:flex; flex-direction:column; justify-content:center; align-items:center; }
  .stats-row .stat-card .num { font-size:1.18rem; line-height:1; }
  .stats-row .stat-card .lbl { font-size:.52rem; line-height:1.1; margin-top:3px; text-align:center; max-width:100%; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
}
@media (max-width:360px) {
  .stats-row { gap:.25rem; }
  .stats-row .stat-card { min-height:53px; padding:.34rem .1rem; }
  .stats-row .stat-card .num { font-size:1.05rem; }
  .stats-row .stat-card .lbl { font-size:.48rem; }
}

/* El dashboard genera este nodo con ID; fijar el ancho sobre el nodo real evita que
   algún estilo del contenedor lo convierta en una cuadrícula encogida. */
@media (max-width:767px) {
  #cd.ac > #stats-row, #cst.ac > #stats-row {
    display:grid !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:.35rem !important;
    margin-left:0 !important;
    margin-right:0 !important;
    justify-self:stretch !important;
    align-self:stretch !important;
    box-sizing:border-box !important;
  }
  #cd.ac > #stats-row > .stat-card, #cst.ac > #stats-row > .stat-card {
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
}

/* Inicio: las seis mí©tricas deben permanecer en una sola fila tambií©n en viewport móvil.
   La captura puede tener muchos píxeles físicos por DPR, pero un viewport CSS estrecho. */
#cd.ac > #stats-row, #cst.ac > #stats-row,
#cd.ac .stats-row, #cst.ac .stats-row {
  display:grid !important;
  width:100% !important;
  max-width:none !important;
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:.28rem !important;
  box-sizing:border-box !important;
}
#cd.ac .stats-row .stat-card, #cst.ac .stats-row .stat-card {
  min-width:0 !important;
  width:100% !important;
  box-sizing:border-box !important;
  padding:.4rem .1rem !important;
  min-height:56px;
}
#cd.ac .stats-row .stat-card .num, #cst.ac .stats-row .stat-card .num {
  font-size:1.12rem !important;
  line-height:1 !important;
}
#cd.ac .stats-row .stat-card .lbl, #cst.ac .stats-row .stat-card .lbl {
  font-size:.5rem !important;
  line-height:1.05 !important;
  white-space:normal !important;
  overflow:hidden !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  text-align:center !important;
}

/* El dashboard tiene un stats-row exterior y otro interior generado por JS.
   La cuadrícula debe vivir en el interior; el exterior solo debe ocupar el ancho. */
#cd.ac > #stats-row, #cst.ac > #stats-row {
  display:block !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}
#cd.ac > #stats-row > .stats-row, #cst.ac > #stats-row > .stats-row {
  display:grid !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:.28rem !important;
  box-sizing:border-box !important;
}

/* Trend bars */
.trend-bar { background:#1e293b; height:20px; border-radius:4px; overflow:hidden; margin:.3rem 0; }
.trend-bar .fill { height:100%; background:#60a5fa; transition:width 1s ease; }
.trend-row { margin-bottom:.6rem; }
.trend-row .lbl { font-size:.65rem; color:#94a3b8; margin-bottom:2px; }

/* Dashboard blocks: titulo + tarjeta SIEMPRE juntos */
.dash-grid { display:grid; grid-template-columns:1fr; gap:.8rem; }
.dash-block { min-width:0; display:flex; flex-direction:column; }
.dash-block .st { margin:.2rem 0 .4rem; }
.grp-badge { font-size:.68rem; font-weight:800; letter-spacing:1px; padding:3px 10px; border-radius:100px;
  border:1px solid #3b82f6; color:#60a5fa; background:rgba(59,130,246,.12); white-space:nowrap; }
.grp-badge.vor { border-color:#22c55e; color:#22c55e; background:rgba(34,197,94,.12); }
.us-state { width:10px; height:10px; border-radius:50%; padding:0; flex-shrink:0; border:2px solid #1e293b; }
.us-state.ok { background:#22c55e; border-color:#22c55e; }
.us-state.warn { background:#ef4444; border-color:#ef4444; }
.adm { font-size:.7rem; color:#60a5fa; cursor:pointer; padding:4px 10px; border:1px solid #3b82f6; border-radius:6px; font-weight:700; }
.adm.on { background:rgba(239,68,68,.15); color:#fca5a5; border-color:#ef4444; }

/* Footer (movil): controles de fuente */
.ftr { display:none; }
@media (max-width:1023px) {
  /* En móvil/tablet el panel ocupa toda la ventana, no el max-width de escritorio. */
  #app { width:100%; max-width:100vw; margin:0; box-sizing:border-box; }
  #main, .ct { width:100%; box-sizing:border-box; }
  .tb-r .theme-btn { display:none; }
  .submenu-bar { overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap; gap:.25rem; padding:.3rem .5rem; }
  .submenu-btn { white-space:nowrap; flex-shrink:0; font-size:.8rem; padding:4px 8px; }
  .tb-r { gap:.3rem; }
  .tb .tb-l { display:none; }
  .ftr { display:flex; justify-content:center; align-items:center; gap:1rem; padding:.5rem;
    border-top:1px solid #1e293b; background:#000812; position:sticky; bottom:0; z-index:20; }
  .ftr .grp-badge { margin-left:.6rem; }
  .ftr .theme-btn { font-size:1.1rem; padding:4px 9px; }
  .ftr .fz { font-size:.85rem; padding:4px 14px; }
  .dash-block { max-width:100%; }
  .dash-block .ca[style*="text-align:center"] { padding:.4rem .6rem !important; }
}

/* LIGHT MODE */

.theme-btn { cursor:pointer; font-size:1rem; padding:5px 10px; border:1px solid #334155; border-radius:8px; background:rgba(255,255,255,.07); color:#e2e8f0; line-height:1.15; }

.adm-btn:disabled,.adm-btn.disabled{opacity:.35;cursor:not-allowed;filter:grayscale(40%)}

/* USER CHIP + DROPDOWN */
.user-chip {
  display:flex; align-items:center; gap:.35rem; padding:4px 10px;
  border-radius:20px; background:#1e293b; border:1px solid #334155;
  color:#e2e8f0; font-size:.75rem; font-weight:600; cursor:pointer;
  white-space:nowrap; transition:all .2s;
}
.user-chip:hover { border-color:#60a5fa; }
.user-chip.on { border-color:#3b82f6; color:#60a5fa; background:#1e293b; }
.user-chip .chip-avatar { width:22px; height:22px; border-radius:50%;
  background:#3b82f6; display:flex; align-items:center; justify-content:center;
  font-size:.7rem; flex-shrink:0; }
.user-chip .chip-arrow { font-size:.55rem; color:#94a3b8; margin-left:2px; }

/* DROPDOWN MENU */
.user-dd {
  display:none; position:absolute; top:100%; right:.6rem; z-index:2000;
  width:280px; min-width:280px; max-width:calc(100vw - 1rem); background:#0b1220 !important; border:1px solid #475569;
  border-radius:12px; box-shadow:0 12px 36px rgba(0,0,0,.7); overflow:hidden; isolation:isolate;
  margin-top:4px; animation:ddIn .15s ease;
}
@keyframes ddIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
.user-dd.show { display:block; }
.user-dd-header {
  position:relative; z-index:1; padding:.75rem .9rem; border-bottom:1px solid #334155;
  display:flex; align-items:center; gap:.6rem; min-height:58px; background:#0b1220;
}
.user-dd-header > div:last-child { min-width:0; flex:1; overflow:hidden; }
.user-dd-header .dd-name, .user-dd-header .dd-role { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.35; }
.user-dd-header .dd-name { font-weight:700; font-size:.8rem; color:#60a5fa; }
.user-dd-header .dd-role { font-size:.65rem; color:#94a3b8; }
.user-dd-item {
  display:flex; align-items:center; gap:.5rem; padding:.6rem .9rem;
  font-size:.78rem; color:#e2e8f0; cursor:pointer; transition:background .15s;
  border:none; background:none; width:100%; text-align:left;
}
.user-dd-item:hover { background:#1e293b; }
.user-dd-divider { height:1px; background:#2d1f3d; margin:2px 0; }
.user-dd-item.danger { color:#ef4444; }
.user-dd-item.danger:hover { background:rgba(239,68,68,.1); }
/* SUBMENU BAR */
.submenu-bar {
  display:none; flex-wrap:wrap; gap:2px; padding:4px 8px;
  background:rgba(15,23,42,.8); border-bottom:1px solid #1e293b;
  justify-content:center;
}
.submenu-bar.show { display:flex; }
.submenu-btn {
  background:transparent; border:1px solid transparent; color:#cbd5e1;
  font-size:.8rem; padding:4px 10px; border-radius:14px; cursor:pointer;
  transition:all .15s; white-space:nowrap; font-family:inherit;
}
.submenu-btn:hover, .submenu-btn.act {
  background:#1e293b; border-color:#334155; color:#e2e8f0;
}
.submenu-sep {
  width:1px; background:#1e293b; margin:2px 4px;
}

/* LOGIN MODAL */
.login-modal-overlay {
  display:none; position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,.7); z-index:3000; align-items:center; justify-content:center;
}
.login-modal-overlay.show { display:flex; }
.login-modal {
  background:#000819; border:1px solid #2d1f3d; border-radius:16px;
  padding:1.2rem 1.5rem 1.5rem; max-width:340px; width:92%;
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  animation:ddIn .15s ease;
}
.login-modal .close-modal {
  position:absolute; top:8px; right:12px; background:none; border:none;
  color:#94a3b8; font-size:1.2rem; cursor:pointer; padding:4px 8px;
}
.login-modal input {
  width:100%; padding:.55rem; border:1px solid #334155; border-radius:8px;
  background:#1a2235; color:#e2e8f0; font-size:.9rem; box-sizing:border-box;
}

/* BT (button shared style for forms) */
.bt-f {
  width:100%; padding:.6rem; border:none; border-radius:10px;
  font-size:.85rem; font-weight:600; cursor:pointer; color:#fff;
}
.bt-primary { background:#3b82f6; }
.bt-outline { background:transparent; border:1px solid #60a5fa; color:#60a5fa; }
.bt-ghost { background:transparent; border:1px solid #64748b; color:#94a3b8; }

/* HEADER relative positioning for dropdown */
.tb { position:relative; z-index:50 !important; }
.tb-r { position:relative; z-index:51 !important; }
.user-dd { right:0; z-index:99999 !important; pointer-events:auto; }
.user-dd.show { display:block !important; visibility:visible !important; opacity:1 !important; }
.login-modal { position:relative; }

/* === LIGHT MODE === */

/* === MODO CLARO === */
body.light { background:var(--bg); color:var(--text); }
body.light #app { background:var(--bg); }
body.light .ca, body.light .mi, body.light .pi { background:var(--surface); border-color:var(--border); box-shadow:var(--shadow-card); }
body.light .ca:hover, body.light .mi:hover, body.light .pi:hover { border-color:var(--border-strong); box-shadow:0 2px 6px rgba(15,23,42,.08); }

/* Toolbar */
body.light .tb { background:var(--surface); border-bottom:1px solid var(--border); }
body.light .tb select { background:var(--surface); color:var(--text); border-color:var(--border-strong); }
body.light .tb select#us { color:#14532d !important; font-weight:700; }

/* User chip / Access button */
body.light .user-chip { background:var(--surface) !important; color:var(--text) !important; border-color:var(--border-strong) !important; }
body.light .user-chip:hover { border-color:var(--accent) !important; background:var(--surface-2) !important; }
body.light .user-chip.on { background:var(--accent-soft) !important; border-color:var(--accent) !important; color:var(--accent-text) !important; }
body.light .user-chip .chip-arrow { color:var(--text-soft) !important; }
body.light .user-dd { background:var(--surface); border-color:var(--border); box-shadow:0 8px 32px rgba(15,23,42,.12); }
body.light .user-dd-header { border-bottom-color:var(--border); }
body.light .user-dd-header .dd-role { color:var(--text-muted); }
body.light .user-dd-item { color:var(--text); }
body.light .user-dd-item:hover { background:var(--surface-2); }
body.light .user-dd .zona-chip { border-color:var(--border-strong); color:var(--text); }
body.light .user-dd .zona-chip.on { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }

/* Text colors - strong contrast */
body.light .em { color:var(--text-muted) !important; }
body.light .ld { color:var(--text-muted) !important; }
body.light .st { color:var(--text) !important; font-weight:700; }
body.light .il { color:var(--text-muted) !important; }
body.light .mc { color:var(--text-muted) !important; }
body.light .cad-meta { color:var(--text-muted) !important; }
body.light .cal-h { color:var(--text-muted) !important; }
body.light .cal-legend { color:var(--text-muted) !important; }
body.light .bf-label { color:var(--text-muted) !important; }
body.light .stat-card { background:var(--surface); border-color:var(--border); box-shadow:var(--shadow-card); }
body.light .stat-card .lbl { color:var(--text-muted) !important; }
body.light .stat-card .num { color:var(--text); }
body.light .stat-card.g { border-color:#22c55e; }
body.light .stat-card.g .num { color:#15803d; }
body.light .stat-card.r { border-color:#ef4444; }
body.light .stat-card.r .num { color:#b91c1c; }
body.light .stat-card.w { border-color:#f59e0b; }
body.light .stat-card.w .num { color:#b45309; }
body.light .stat-card.o { border-color:#f97316; }
body.light .stat-card.o .num { color:#c2410c; }
body.light .trend-row .lbl { color:var(--text-muted) !important; }

/* Inline gray text overrides */
body.light #app [style*="color:#94a3b8"] { color:var(--text) !important; }
body.light #app [style*="color:#64748b"] { color:var(--text-muted) !important; }
body.light #app [style*="color: #94a3b8"] { color:var(--text) !important; }
body.light #app [style*="color: #64748b"] { color:var(--text-muted) !important; }

/* Base chips */
/* light base-chip removed */
/* light base-chip.on removed */
body.light .base-dot { opacity:.9; }

/* Category chips */
body.light .cat-chip { border-color:var(--border-strong) !important; color:var(--text) !important; font-weight:700; background:var(--surface-2) !important; }
body.light .cat-chip.on { border-color:var(--accent) !important; color:var(--accent-text) !important; font-weight:800; }
body.light .cat-chip.resp.on { background:#bfdbfe !important; }

/* Zone chips */
body.light .zona-chip { border-color:var(--border-strong); color:var(--text); background:var(--surface); }
body.light .zona-chip .zona-light { background:var(--border-strong); }
body.light .zona-chip.voc.on { border-color:#3b82f6; color:#2563eb; background:var(--accent-soft); }
body.light .zona-chip.voc.on .zona-light { background:#3b82f6; box-shadow:0 0 12px #3b82f6,0 0 4px #3b82f6; }
body.light .zona-chip.vor.on { border-color:#16a34a; color:#166534; background:rgba(22,163,74,.1); }
body.light .zona-chip.off { opacity:.7; color:var(--text-soft); }
body.light .zona-chip.off:hover { opacity:.9; }
body.light .zona-chip.vor.on .zona-light { background:#16a34a; box-shadow:0 0 12px #16a34a,0 0 4px #16a34a; }

/* zone-info card */
body.light .zone-info { background:var(--surface-2); border-color:var(--border); }
body.light .zone-info .zone-title { color:var(--text); }

/* Admin buttons */
body.light .adm-btn { background:var(--surface-2) !important; color:var(--text) !important; border-color:var(--border-strong) !important; }
body.light .adm-btn:hover { background:var(--border-strong) !important; }
body.light .ca-unidad .adm-btn { background:var(--accent-soft) !important; color:var(--accent-text) !important; border-color:var(--accent) !important; }
body.light .ca-unidad .adm-btn:hover { background:#bfdbfe !important; }
body.light .adm, body.light #admin-btn { background:var(--surface-2) !important; color:var(--text) !important; border-color:var(--border-strong) !important; }
body.light #admin-btn:hover { background:var(--border-strong) !important; }

/* unit card */
body.light .ca-unidad { background:var(--accent-soft); }

/* Buttons */
body.light .bt { background:var(--surface-2); color:var(--text); border-color:var(--border-strong); }
body.light .bt-ghost { border-color:var(--border-strong); color:var(--text); background:transparent; }
body.light .bt:hover { background:var(--border-strong); }
body.light .bt-f { background:var(--accent); color:#fff; border-color:var(--accent); }
body.light .bt-f:hover { background:#1d4ed8; }
body.light .close-modal { color:var(--text-muted) !important; }

/* Footer */
body.light .ftr { background:var(--surface); border-top:1px solid var(--border); }
body.light .ftr .grp-badge { color:var(--text); }
body.light .ftr .fz, body.light .fz { color:var(--text) !important; }

/* Theme btn */
body.light .theme-btn { background:#ffffff; border-color:var(--border-strong); color:#1e293b; }
body.light .tb .theme-btn { background:#ffffff !important; color:#1e293b !important; border-color:#cbd5e1 !important; box-shadow:0 1px 3px rgba(15,23,42,.15); }

/* Submenu tabs */
body.light .submenu-bar { border-bottom-color:var(--border); background:var(--surface); }
body.light .submenu-btn { color:var(--text-muted); }
body.light .submenu-btn.on { color:var(--accent); border-bottom-color:var(--accent); }
body.light .ts div, body.light .ts { color:var(--text-muted) !important; }

/* Mobile footer */
@media (max-width:1023px) {
  body.light .ftr { background:var(--surface); border-top:1px solid var(--border); }
}

/* unit state indicator */
body.light .us-state.ok { background:#14532d; border-color:#14532d; }

/* nova prompts / modals */
body.light .nova-overlay .nova-modal { background:var(--surface); color:var(--text); border-color:var(--border); }
body.light .nova-modal input, body.light .nova-modal select { background:var(--surface-2); color:var(--text); border-color:var(--border-strong); }
body.light .nova-modal .cancel { color:var(--text-muted); }
body.light .nova-modal .adm-btn { background:var(--surface-2); color:var(--text); }
/* light login-modal removed */
body.light .login-modal input { background:var(--surface-2) !important; color:var(--text) !important; border-color:var(--border-strong) !important; }
body.light .login-modal input::placeholder { color:var(--text-muted) !important; opacity:1 !important; }
body.light .login-modal input:focus { border-color:var(--accent) !important; background:var(--surface) !important; }
body.light .login-modal .bt { background:var(--surface-2); color:var(--text); border-color:var(--border-strong); }
body.light .login-modal .bt-f { background:var(--accent); color:#fff; border-color:var(--accent); }
body.light .login-modal .bt-ghost { background:transparent; border-color:var(--border-strong); color:var(--text); }
body.light .nova-overlay { background:rgba(15,23,42,.4); }
body.light .nova-toast { background:var(--surface); color:var(--text); border-color:var(--border); box-shadow:0 4px 16px rgba(15,23,42,.1); }
body.light .login-modal img[src*="nova_proyecto"] { filter:invert(1) hue-rotate(180deg); }

/* Misc */
body.light .bg { color:var(--text) !important; }
body.light .bg.bg-d { background:#fee2e2 !important; color:#991b1b !important; }
body.light .bg.bg-w { background:#fef3c7 !important; color:#92400e !important; }
body.light .bg.bg-ok { background:#dcfce7 !important; color:#166534 !important; }
body.light .tsnu-entry button { color:var(--text) !important; border-color:var(--border-strong) !important; }
body.light .tsnu-entry .tsnu-sub { color:var(--text-muted) !important; }
body.light .veh-brush { background:var(--surface-2) !important; color:var(--text) !important; border-color:var(--border-strong) !important; }
body.light .veh-brush.off { color:var(--border-strong) !important; }
body.light .veh-tool .lbl { color:var(--text-muted) !important; }
body.light .fu-btn { color:var(--text) !important; border-color:var(--border-strong) !important; }
body.light .ov { background:var(--surface); color:var(--text); border-color:var(--border); }
body.light .ov p { color:var(--text-muted) !important; }
body.light .ov .kp .kd { color:var(--text-muted) !important; }
body.light .ov .cancel { color:var(--text-muted) !important; }
body.light #login p { color:var(--text-muted) !important; }
body.light .kp .kd { color:var(--text-muted) !important; }
body.light .ir { border-color:var(--border); }
body.light .sb { background:var(--surface); border-color:var(--border-strong); color:var(--text); }
body.light .sb::placeholder { color:var(--text-soft); opacity:1; }
body.light select { background:var(--surface); color:var(--text); border-color:var(--border-strong); }
body.light select option { background:var(--surface); color:var(--text); }
body.light #alm-sel, body.light #inv-base-sel, body.light #fis-sort { background:var(--surface) !important; color:var(--text) !important; border:1px solid var(--border-strong) !important; }
body.light .rf select, body.light .rf textarea { background:var(--surface); border-color:var(--border-strong); color:var(--text); }
body.light .frow input[type=text], body.light .frow select { background:var(--surface); border-color:var(--border-strong); color:var(--text); }
body.light .cad-form input, body.light .cad-form select, body.light .cad-form textarea { background:var(--surface); border-color:var(--border-strong); color:var(--text); }
body.light select, body.light input[type=text], body.light input[type=search], body.light textarea { color-scheme:light; }
body.light .emp-sub { background:var(--surface-2); border-color:var(--border-strong); color:var(--text-muted); }
body.light .emp-sub-act { background:var(--accent-soft); color:var(--accent-text); border-color:var(--accent); }
body.light .grp-badge { color:var(--text); border-color:var(--border-strong); background:var(--surface-2); }
body.light .fz { color:var(--text-muted); border-color:var(--border-strong); }
body.light .fz:active { background:var(--surface-2); color:var(--text); }
body.light .pi { background:var(--surface); border-color:var(--border); }
body.light .mi { background:var(--surface); border-color:var(--border); }
body.light #mat-dot, body.light #mat-inv, body.light #mat-cad { color:var(--text); }
body.light .cc { background:var(--surface-2); border-color:var(--border); }
body.light .pd2 { border-color:var(--border-strong); }
body.light .dash-block .ca { border-color:var(--border); }
body.light .veh-img-wrap { border-color:var(--border); }
body.light .cal-day { border-color:var(--border); }


/* === MI CALENDARIO (EMPLEADO) === */
.mc-wrap { padding:.5rem; max-width:1200px; margin:0 auto; }
.mc-header { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; justify-content:center; margin:.4rem 0; }
.mc-header select { background:#1a2235; border:1px solid #1e293b; color:#e2e8f0; border-radius:6px; padding:.3rem .5rem; font-size:.75rem; }
.mc-header .mc-label { font-size:.7rem; color:#94a3b8; }
.mc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:.5rem; }
.mc-month { background:#1a2235; border-radius:8px; padding:.35rem; border:1px solid #1e293b; min-width:130px; }
.mc-mh { text-align:center; font-size:.7rem; font-weight:700; color:#94a3b8; margin-bottom:.2rem; }
.mc-dh { display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:.52rem; color:#64748b; margin-bottom:.1rem; }
.mc-dh span { padding:1px 0; }
.mc-dg { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; text-align:center; }
.mc-dg span { font-size:.56rem; padding:2px 0; border-radius:2px; color:#94a3b8; min-height:15px; line-height:15px; position:relative; cursor:default; }
.mc-dg span.off { color:#3b4050; }
.mc-dg span.mi-turno { background:#22c55e; color:#fff; font-weight:700; }
.mc-dg span.mi-vac { background:#ef4444; color:#fff; font-weight:700; }
.mc-dg span.mi-baja { background:#f59e0b; color:#000; font-weight:700; }
.mc-dg span.mi-permiso { background:#8b5cf6; color:#fff; font-weight:700; }
.mc-dg span.mi-cambio { background:#06b6d4; color:#fff; font-weight:700; }
.mc-dg span.today { box-shadow:inset 0 0 0 2px #fff; font-weight:800; }
.mc-leyenda { display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; margin:.4rem 0; font-size:.62rem; color:#94a3b8; }
.mc-leyenda span { display:flex; align-items:center; gap:.2rem; }
.mc-leyenda .dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.mc-actions { display:flex; gap:.4rem; flex-wrap:wrap; justify-content:center; margin:.5rem 0; }
.mc-actions button { padding:.3rem .7rem; border-radius:6px; border:1px solid #1e293b; background:#1a2235; color:#94a3b8; font-size:.7rem; cursor:pointer; }
.mc-actions button:hover { background:#1e293b; }
body.light .mc-month { background:var(--surface-2); border-color:var(--border); }
body.light .mc-mh { color:var(--text-muted); }
body.light .mc-header select { background:var(--surface-2); border-color:var(--border); color:var(--text-muted); }
body.light .mc-header .mc-label { color:var(--text-muted); }
body.light .mc-dh span { color:var(--text-soft); }
body.light .mc-dg span { color:var(--text-muted); }
body.light .mc-dg span.off { color:var(--border-strong); }
body.light .mc-leyenda { color:var(--text-muted); }
body.light .mc-actions button { background:var(--surface-2); border-color:var(--border); color:var(--text-muted); }
body.light .mc-actions button:hover { background:var(--border); }
@media (max-width:480px) {
  .mc-grid { grid-template-columns:repeat(auto-fill,minmax(105px,1fr)); gap:.3rem; }
  .mc-dg span { font-size:.48rem; min-height:13px; line-height:13px; }
}

/* ============================================================
   PANEL EMPLEADOS — MODO CLARO (filtros + tabla)
   ============================================================ */
body.light #emp-f-q,
body.light #emp-f-rol,
body.light #emp-f-turno,
body.light #emp-f-estado,
body.light #emp-f-unidad,
body.light #emp-f-base {
  background:var(--surface) !important;
  border:1px solid var(--border-strong) !important;
  color:var(--text) !important;
}
body.light #emp-f-q::placeholder { color:var(--text-soft) !important; opacity:1 !important; }
body.light #emp-f-q:focus,
body.light #emp-f-rol:focus,
body.light #emp-f-turno:focus,
body.light #emp-f-estado:focus,
body.light #emp-f-unidad:focus,
body.light #emp-f-base:focus {
  border-color:var(--accent) !important;
}
/* En móvil, la tabla de empleados usa scroll horizontal en vez de 6 columnas apretadas */
@media (max-width:767px) {
  #emp-pl-lista > div:first-child { overflow-x:auto; }
}
/* Formulario de edición inline (empleados): inputs/selects en claro */
body.light #cd input[type=text],
body.light #cd input[type=search],
body.light #cd input[type=tel],
body.light #cd input[type=date],
body.light #cd input[type=password],
body.light #cd select {
  background:var(--surface) !important;
  border-color:var(--border-strong) !important;
  color:var(--text) !important;
}
body.light #cd input::placeholder { color:var(--text-soft) !important; opacity:1 !important; }
body.light #cd input:focus,
body.light #cd select:focus { border-color:var(--accent) !important; }

/* ============================================================
   NOVA ChatBot IA — widget colapsable (Lauren, 23/08/2026)
   ============================================================ */
#chatbot-container { width:100%; margin:0; }
.chatbot-bar {
  display:flex; align-items:center; gap:.55rem;
  padding:.5rem .75rem; margin:0 0 .4rem;
  background:linear-gradient(135deg,#1a2a5a,#1e2d50);
  border:1px solid #2a3550; border-radius:12px;
  cursor:pointer; user-select:none; -webkit-user-select:none;
  transition:all .2s;
}
.chatbot-bar:active { background:#1e3a5f; }
.chatbot-bar.open { border-color:#60a5fa; background:#16224a; }
.chatbot-bar-icon { display:inline-block; font-size:1.25rem; line-height:1; transform-origin:50% 80%; animation:novaBotFloat 2.8s ease-in-out infinite; }
@keyframes novaBotFloat { 0%,100% { transform:translateY(0) rotate(0deg) scale(1); } 22% { transform:translateY(-2px) rotate(-6deg) scale(1.04); } 44% { transform:translateY(0) rotate(5deg) scale(1); } 62% { transform:translateY(-1px) rotate(-3deg) scale(1.02); } }
@media (prefers-reduced-motion: reduce) { .chatbot-bar-icon { animation:none; } }
.chatbot-bar-text { font-size:.85rem; font-weight:700; color:#e2e8f0; flex:1; text-align:left; }
.chatbot-bar-arrow { font-size:.7rem; color:#94a3b8; }
.chatbot-panel {
  display:flex; flex-direction:column;
  border:1px solid #2a3550; border-radius:12px;
  background:var(--surface-2,#1a2235);
  overflow:hidden; margin-bottom:.6rem;
}
.chatbot-messages {
  max-height:320px; overflow-y:auto; padding:.6rem;
  display:flex; flex-direction:column; gap:.45rem;
  -webkit-overflow-scrolling:touch;
}
.chat-msg { display:flex; }
.chat-msg.user { justify-content:flex-end; }
.chat-msg.nova { justify-content:flex-start; }
.chat-bubble {
  max-width:82%; padding:.5rem .75rem; border-radius:14px;
  font-size:.82rem; line-height:1.4; white-space:pre-wrap; word-break:break-word;
}
.chat-msg.user .chat-bubble { background:#3b82f6; color:#fff; border-bottom-right-radius:4px; }
.chat-msg.nova .chat-bubble { background:#1e293b; color:#e2e8f0; border:1px solid #2a3550; border-bottom-left-radius:4px; }
.chat-bubble.chat-typing { display:flex; align-items:center; gap:4px; padding:.65rem .8rem; }
.chat-typing .td {
  width:7px; height:7px; border-radius:50%;
  background:#60a5fa; display:inline-block;
  animation:chatBlink 1.2s infinite ease-in-out;
}
.chat-typing .td:nth-child(2) { animation-delay:.18s; }
.chat-typing .td:nth-child(3) { animation-delay:.36s; }
@keyframes chatBlink {
  0%, 80%, 100% { opacity:.2; transform:translateY(0); }
  40% { opacity:1; transform:translateY(-4px); }
}
.chatbot-input-row {
  display:flex; gap:.4rem; align-items:center;
  padding:.55rem; border-top:1px solid #2a3550;
}
.chatbot-input {
  flex:1; min-width:0; padding:.55rem .7rem;
  background:#0b1220; border:1px solid #2a3550; border-radius:10px;
  color:#e2e8f0; font-size:.85rem; font-family:inherit;
}
.chatbot-input:focus { outline:none; border-color:#60a5fa; }
.chatbot-send-btn, .chatbot-audio-btn {
  width:38px; height:38px; flex-shrink:0;
  border:none; border-radius:10px; cursor:pointer;
  font-size:1rem; color:#fff; background:#3b82f6;
  display:flex; align-items:center; justify-content:center;
}
.chatbot-audio-btn { background:#1e293b; border:1px solid #2a3550; }
.chatbot-audio-btn.recording { background:#ef4444; animation:pulseRed 1s infinite; }
@keyframes pulseRed {
  0%{box-shadow:0 0 0 0 rgba(239,68,68,.5);}
  70%{box-shadow:0 0 0 8px rgba(239,68,68,0);}
  100%{box-shadow:0 0 0 0 rgba(239,68,68,0);}
}
.chatbot-audio-label { text-align:center; font-size:.68rem; color:#f59e0b; padding:0 0 .35rem; font-weight:600; }
.chatbot-lock-row { text-align:center; font-size:.72rem; color:#94a3b8; padding:.7rem .6rem; border-top:1px solid #2a3550; line-height:1.5; }
body.light .chatbot-lock-row { color:var(--text-muted); border-color:var(--border-strong); }
body.light .chatbot-bar { background:linear-gradient(135deg,#dbeafe,#e0e7ff); border-color:var(--border-strong); }
body.light .chatbot-bar-text { color:var(--text); }
body.light .chatbot-bar.open { border-color:var(--accent); background:#dbeafe; }
body.light .chatbot-panel { background:var(--surface); border-color:var(--border-strong); }
body.light .chat-msg.nova .chat-bubble { background:var(--surface-2); color:var(--text); border-color:var(--border); }
body.light .chatbot-input { background:var(--surface); border-color:var(--border-strong); color:var(--text); }
body.light .chatbot-audio-btn { background:var(--surface-2); border-color:var(--border-strong); }

/* Trazas: panel adaptable al tema y controles con contraste */
.trazas-panel { background:var(--bg); color:var(--text); }
.trazas-title { color:var(--text) !important; }
.trazas-help, .trazas-count, .trazas-pager { color:var(--text-muted) !important; }
.trazas-control {
  min-width:0; padding:.42rem .5rem; background:var(--surface) !important;
  color:var(--text) !important; border:1px solid var(--border-strong) !important;
  border-radius:6px; font-size:.76rem; font-family:inherit;
}
.trazas-search { min-width:180px; flex:1; }
.trazas-control::placeholder { color:var(--text-soft); opacity:1; }
.trazas-table-wrap { border:1px solid var(--border-strong); }
.trazas-empty { background:var(--surface); color:var(--text-muted); border:1px solid var(--border); }
body:not(.light) .trazas-panel { background:#0a0f1a; }
body:not(.light) .trazas-control { background:#131c31 !important; color:#e2e8f0 !important; border-color:#3a4766 !important; }
body:not(.light) .trazas-table-wrap { border-color:#3a4766; }
body:not(.light) .trazas-empty { background:#131c31; color:#cbd5e1; border-color:#3a4766; }
body.light .trazas-panel { background:var(--bg); }
body.light .trazas-control { background:#fff !important; color:#0f172a !important; border-color:#94a3b8 !important; }
body.light .trazas-empty { background:#fff; color:#334155; border-color:#94a3b8; }

/* Refuerzo: ningún modal usa marco blanco en modo oscuro. */
body:not(.light) .login-modal,
body:not(.light) #nova-modal > div,
body:not(.light) .nova-overlay .nova-modal {
  background:#131c31 !important; color:#e2e8f0 !important;
  border:1px solid #3a4766 !important; outline:none !important;
}
body.light .login-modal,
body.light #nova-modal > div,
body.light .nova-overlay .nova-modal {
  background:#fff !important; color:#0f172a !important;
  border:1px solid #94a3b8 !important; outline:none !important;
}

/* Correcciones de tema global — modal y fondo espacial */
body.light #login,
body.light #main,
body.light #app { background:var(--bg) !important; color:var(--text); }
body.light #login::before,
body.light #main::before,
body.light .space-nova,
body.light .space-galaxy,
body.light .space-meteor,
body.light .space-meteor.m2,
body.light .space-meteor.m3,
body.light .space-meteor.m4 {
  display:none !important;
  animation:none !important;
  background-image:none !important;
}

/* Ningún modal debe quedar blanco en oscuro ni oscuro en claro. */
body:not(.light) .login-modal-overlay,
body:not(.light) #nova-modal { background:rgba(0,0,0,.78) !important; }
body:not(.light) .login-modal,
body:not(.light) #nova-modal > div {
  background:linear-gradient(135deg,#0d1526,#1a2235) !important;
  color:#e2e8f0 !important;
  border-color:#2d3b59 !important;
  box-shadow:0 20px 60px rgba(0,0,0,.65) !important;
}
body:not(.light) #nova-mbody { color:#e2e8f0 !important; }
body:not(.light) #nova-min,
body:not(.light) #nova-msel { background:#0b1220 !important; color:#f1f5f9 !important; border-color:#334155 !important; }
body.light .login-modal-overlay,
body.light #nova-modal { background:rgba(15,23,42,.34) !important; }
body.light .login-modal,
body.light #nova-modal > div {
  background:var(--surface) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
  box-shadow:0 20px 60px rgba(15,23,42,.18) !important;
}
body.light #nova-mbody { color:var(--text) !important; }
body.light #nova-min,
body.light #nova-msel { background:var(--surface-2) !important; color:var(--text) !important; border-color:var(--border-strong) !important; }

/* Editor visual de perfiles CSS */
.css-editor-page { max-width:1250px; margin:0 auto; color:var(--text); }
.css-editor-head { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:1rem; }
.css-editor-sub { color:var(--text-muted); font-size:.78rem; }
.css-editor-actions { display:flex; gap:.45rem; align-items:center; flex-wrap:wrap; }
.css-small { width:auto; padding:.48rem .75rem; font-size:.78rem; }
.css-editor-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem; align-items:start; width:100%; }
.css-editor-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:.65rem; box-shadow:var(--shadow-card); min-width:0; width:100%; overflow:hidden; }
.css-editor-card-title { font-size:.76rem; text-transform:uppercase; letter-spacing:.7px; font-weight:800; color:var(--accent-text); margin-bottom:.7rem; }
.css-field { display:grid; grid-template-columns:minmax(0,1fr) 34px minmax(0,90px); gap:.3rem; align-items:center; padding:.38rem 0; border-bottom:1px solid var(--border); font-size:.76rem; color:var(--text); min-width:0; }
.css-field > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.css-field input { max-width:100%; min-width:0; box-sizing:border-box; }
.css-field input[type=text] { width:100%; }
.css-editor-card:nth-child(1) .css-field:nth-child(-n+9) { border-left:3px solid #3b82f6; padding-left:.45rem; }
.css-editor-card:nth-child(1) .css-field:nth-child(n+10):nth-child(-n+18) { border-left:3px solid #22c55e; padding-left:.45rem; }
.css-editor-card:nth-child(1) .css-field:nth-child(n+19) { border-left:3px solid #f59e0b; padding-left:.45rem; }
.css-field:last-child { border-bottom:0; }
.css-field input[type=color] { width:38px; height:28px; padding:1px; border:1px solid var(--border-strong); border-radius:5px; background:var(--surface); }
.css-editor-input { min-width:0; width:100%; padding:.32rem .4rem; border-radius:6px; border:1px solid var(--border-strong); background:var(--surface-2); color:var(--text); font:inherit; box-sizing:border-box; }
.css-preview-window { border:1px solid var(--border-strong); border-radius:10px; overflow:hidden; background:var(--bg); min-height:330px; }
.css-preview-top { padding:.65rem .8rem; background:var(--surface-2); border-bottom:1px solid var(--border); font-weight:800; color:var(--accent-text); }
.css-preview-top span { float:right; font-size:.65rem; color:var(--text-muted); }
.css-preview-body { padding:1rem; }
.css-preview-title { font-weight:800; margin-bottom:.7rem; }
.css-preview-row { display:flex; justify-content:space-between; gap:.5rem; padding:.7rem; background:var(--surface); border:1px solid var(--border); border-radius:8px; margin-bottom:.8rem; font-size:.8rem; }
.css-preview-row span { color:var(--color-success); font-weight:700; }
.css-preview .bt { margin-bottom:.9rem; }
.css-preview-modal { padding:1rem; background:var(--surface); border:1px solid var(--border-strong); border-radius:10px; color:var(--text-muted); }
@media (max-width:1100px) { .css-editor-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:800px) { .css-editor-head { flex-direction:column; } .css-editor-actions { width:100%; } .css-editor-grid { grid-template-columns:1fr; } .css-editor-card { width:100%; } }

/* Variables de perfil conectadas a los componentes reales */
:root { --cell-fill:#1a2235; --cell-alpha:1; --cell-border:#3a4766; }
/* .o2-card important removed */
body.light /* .o2-card important removed */
body, #app, #main, #login { font-family:var(--font-family) !important; font-size:var(--font-size-base); background:var(--bg) !important; color:var(--text) !important; }
body { font-weight:var(--font-weight-base); }
#main::before, #login::before { opacity:.35; }
.tb { background:var(--surface) !important; border-color:var(--border) !important; }
.ts { border-color:var(--border) !important; }
.ts div { color:var(--text-muted); }
.ts div.ac { color:var(--accent-text); border-bottom-color:var(--accent); }
.ct { background:var(--bg); }
.css-editor-card { background:var(--surface); border-color:var(--border); border-radius:var(--radius-card); box-shadow:var(--shadow-card); } /* .ca .mi removed from here */
.sb, .rf select, .rf textarea, .trazas-control { background:var(--input-bg) !important; color:var(--text) !important; border-color:var(--input-border) !important; border-radius:var(--radius-control); }
.bt { background:var(--button-bg) !important; color:var(--button-text) !important; border-radius:var(--radius-control); }
.login-modal, body:not(.light) .login-modal, body.light .login-modal, #nova-modal > div, body:not(.light) #nova-modal > div, body.light #nova-modal > div { background:var(--modal-bg) !important; color:var(--text) !important; border-color:var(--modal-border) !important; box-shadow:var(--shadow-modal) !important; }
body:not(.light) .login-modal, body:not(.light) #nova-modal > div { background:var(--modal-bg) !important; }
body.light .login-modal, body.light #nova-modal > div { background:var(--modal-bg) !important; }

/* ============================================================
   LOGIN / ENTRADA - SIEMPRE OSCURO + ESTRELLAS (override final)
   Independiente del modo claro/oscuro del panel interno.
   ============================================================ */
#login { background:#000810 !important; color:#e2e8f0 !important; }
#login::before { opacity:.78 !important; }
#login p { color:#94a3b8 !important; }
#login .zona-chip { background:#0d1526 !important; border-color:#1e293b !important; }
#login .zona-chip .zona-light { background:#1e293b !important; }
#login .zona-chip.voc.on { color:#60a5fa !important; border-color:#60a5fa !important; background:rgba(59,130,246,.15) !important; }
#login .zona-chip.vor.on { color:#22c55e !important; border-color:#22c55e !important; background:rgba(34,197,94,.15) !important; }
#login .zona-chip.tsnu.on { color:#f59e0b !important; border-color:#f59e0b !important; background:rgba(245,158,11,.15) !important; }
#login .pd-dot { border-color:#1e293b !important; background:transparent !important; }
#login .pd-dot.f { background:#3b82f6 !important; border-color:#3b82f6 !important; }
#login .kp button { background:#1a2235 !important; color:#e2e8f0 !important; border-color:#1e293b !important; }
#login .kp button.kd { color:#94a3b8 !important; }
#login .err { color:#ef4444 !important; }






.css-editor-card input[type=range] { width:100%; min-width:0; }
.css-editor-card input[type=color] { width:34px !important; height:26px !important; }


/* DESKTOP SUPERVISOR */
.ca {
  background: var(--cell1-fill);
  background: color-mix(in srgb, var(--cell1-fill) calc(var(--cell1-alpha, 1) * 100%), transparent);
  border-color: var(--cell1-border);
  border-width: var(--cell1-border-width);
  border-radius: var(--cell1-radius);
  border-style: solid;
}
.mi {
  background: var(--cell2-fill);
  background: color-mix(in srgb, var(--cell2-fill) calc(var(--cell2-alpha, 1) * 100%), transparent);
  border-color: var(--cell2-border);
  border-width: var(--cell2-border-width);
  border-radius: var(--cell2-radius);
  border-style: solid;
}
.pi {
  background: var(--cell3-fill);
  background: color-mix(in srgb, var(--cell3-fill) calc(var(--cell3-alpha, 1) * 100%), transparent);
  border-color: var(--cell3-border);
  border-width: var(--cell3-border-width);
  border-radius: var(--cell3-radius);
  border-style: solid;
}
.base-chip {
  background: var(--cell4-fill);
  background: color-mix(in srgb, var(--cell4-fill) calc(var(--cell4-alpha, 1) * 100%), transparent);
  border-color: var(--cell4-border);
  border-width: var(--cell4-border-width);
  border-radius: var(--cell4-radius);
  border-style: solid;
}
.eq-chip {
  background: var(--cell5-fill);
  background: color-mix(in srgb, var(--cell5-fill) calc(var(--cell5-alpha, 1) * 100%), transparent);
  border-color: var(--cell5-border);
  border-width: var(--cell5-border-width);
  border-radius: var(--cell5-radius);
  border-style: solid;
}
.o2-card.o2-5l-llena {
  background: var(--cell6-fill);
  background: color-mix(in srgb, var(--cell6-fill) calc(var(--cell6-alpha, 1) * 100%), transparent);
  border-color: var(--cell6-border);
  border-width: var(--cell6-border-width);
  border-radius: var(--cell6-radius);
  border-style: solid;
}
.o2-card.o2-5l-vacia {
  background: var(--cell7-fill);
  background: color-mix(in srgb, var(--cell7-fill) calc(var(--cell7-alpha, 1) * 100%), transparent);
  border-color: var(--cell7-border);
  border-width: var(--cell7-border-width);
  border-radius: var(--cell7-radius);
  border-style: solid;
}
.o2-card.o2-10l-llena {
  background: var(--cell8-fill);
  background: color-mix(in srgb, var(--cell8-fill) calc(var(--cell8-alpha, 1) * 100%), transparent);
  border-color: var(--cell8-border);
  border-width: var(--cell8-border-width);
  border-radius: var(--cell8-radius);
  border-style: solid;
}
.o2-card.o2-10l-vacia {
  background: var(--cell9-fill);
  background: color-mix(in srgb, var(--cell9-fill) calc(var(--cell9-alpha, 1) * 100%), transparent);
  border-color: var(--cell9-border);
  border-width: var(--cell9-border-width);
  border-radius: var(--cell9-radius);
  border-style: solid;
}
.subtab {
  background: var(--cell10-fill);
  background: color-mix(in srgb, var(--cell10-fill) calc(var(--cell10-alpha, 1) * 100%), transparent);
  border-color: var(--cell10-border);
  border-width: var(--cell10-border-width);
  border-radius: var(--cell10-radius);
  border-style: solid;
  padding: 0.4rem 0.8rem;
  margin-right: 0.4rem;
  margin-bottom: 0.8rem;
  text-transform: uppercase;
}

/* CSS Editor Styles */
.css-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 0.75rem; color: var(--text-muted); }
.css-field > span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.css-field input[type="text"], .css-field select { width: 70px; background: var(--input-bg); border: 1px solid var(--input-border); color: var(--text); padding: 4px; border-radius: 6px; font-size: 0.7rem; box-sizing: border-box; }
.css-field input[type="color"] { width: 32px; height: 32px; padding: 0; border: none; border-radius: 4px; cursor: pointer; flex-shrink: 0; }
.css-field input[type="range"] { width: 70px; }
.css-cell-group { margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); }
.css-cell-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.css-cell-title { font-size: 0.75rem; font-weight: 800; color: var(--accent); margin-bottom: 0.5rem; }


/* ============================================================
   FIX 2026-09-10 (Lauren)
   1) La portada (#login) SIEMPRE oscura y con estrellas, tambien
      cuando el tema claro esta activo.
   2) Teclado del PIN: mas pequeno en PC, fondo translucido y
      marco fino claro.
   3) Menu de usuario legible en tema claro (antes: fondo oscuro
      con letras oscuras).
   ============================================================ */

/* --- 1) Portada oscura con estrellas --- */
html body #login,
html body.light #login {
  background:#000810 !important;
  color:#e2e8f0 !important;
}
html body #login::before,
html body.light #login::before {
  display:block !important;
  opacity:.78 !important;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,1) 0 1.4px, transparent 2.2px),
    radial-gradient(circle at 71% 30%, rgba(191,219,254,.95) 0 1.2px, transparent 2px),
    radial-gradient(circle at 38% 72%, rgba(255,255,255,.9) 0 1.1px, transparent 1.9px),
    radial-gradient(circle at 86% 82%, rgba(147,197,253,.9) 0 1.2px, transparent 2px),
    radial-gradient(circle at 53% 51%, rgba(255,255,255,.86) 0 1px, transparent 1.8px),
    radial-gradient(circle at 24% 64%, rgba(196,181,253,.8) 0 1px, transparent 1.8px),
    radial-gradient(circle at 92% 14%, rgba(125,211,252,.82) 0 1px, transparent 1.8px),
    radial-gradient(circle at 60% 88%, rgba(255,255,255,.76) 0 1px, transparent 1.7px) !important;
  background-size:180px 150px, 230px 210px, 150px 180px, 210px 170px, 270px 250px, 320px 280px, 190px 230px, 360px 330px !important;
  animation:novaSpaceZoom 18s linear infinite !important;
}
html body #login .space-galaxy,
html body.light #login .space-galaxy {
  display:block !important;
  animation:novaGalaxy 72s ease-in-out infinite !important;
}
html body.light #login h1 { color:#93c5fd !important; }
html body.light #login p { color:#cbd5e1 !important; }

/* --- 2) Teclado del PIN: translucido + marco fino --- */
#login .kp button,
html body.light #login .kp button {
  background:rgba(226,232,240,.07) !important;
  border:1px solid rgba(226,232,240,.55) !important;
  color:#e2e8f0 !important;
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  box-shadow:0 1px 6px rgba(0,0,0,.25) inset;
}
#login .kp button.kd,
html body.light #login .kp button.kd {
  color:#cbd5e1 !important;
  border-color:rgba(226,232,240,.38) !important;
  background:rgba(226,232,240,.04) !important;
}
#login .kp button:active { background:rgba(96,165,250,.35) !important; }
@media (min-width:900px) {
  #login .kp { width:min(232px,80vw) !important; gap:.45rem !important; }
  #login .kp button { width:60px !important; height:60px !important; font-size:1.12rem !important; }
  #login .kp button.kd { font-size:.82rem !important; }
}

/* --- 3) Menu de usuario legible en tema claro --- */
body.light .user-dd { background:var(--surface) !important; border-color:var(--border-strong) !important; }
body.light .user-dd-header { background:var(--surface) !important; border-bottom-color:var(--border) !important; }
body.light .user-dd-header .dd-name { color:var(--accent-text) !important; }
body.light .user-dd-header .dd-role { color:var(--text-muted) !important; }
body.light .user-dd-item { color:var(--text) !important; }
body.light .user-dd-item:hover { background:var(--surface-2) !important; }
body.light .user-dd-item.danger { color:#dc2626 !important; }
body.light .user-dd-divider { background:var(--border) !important; }
body.light .user-dd .chip-avatar { color:#fff; }


/* ============================================================
   FIX 2026-09-10 (b) — CONTRASTE DE TEXTO EN CELDAS
   El color del texto estaba fijo (gris claro) mientras el fondo
   si era configurable: con fondo claro el texto desaparecia.
   Ahora cada celda tiene su color de texto configurable desde el
   editor CSS (--cellN-text) con valores legibles por defecto.
   ============================================================ */

:root {
  --cell1-text: #0f172a;  --cell2-text: #0f172a;  --cell3-text: #0f172a;
  --cell4-text: #334155;  --cell5-text: #334155;  --cell10-text: #334155;
  --cell6-text: #0f172a;  --cell7-text: #0f172a;  --cell8-text: #0f172a;  --cell9-text: #0f172a;
}
body:not(.light) {
  --cell1-text: #e2e8f0;  --cell2-text: #e2e8f0;  --cell3-text: #e2e8f0;
  --cell4-text: #cbd5e1;  --cell5-text: #cbd5e1;  --cell10-text: #cbd5e1;
  --cell6-text: #0f172a;  --cell7-text: #0f172a;  --cell8-text: #0f172a;  --cell9-text: #0f172a;
}

/* texto normal de cada celda */
.ca                              { color: var(--cell1-text); }
.mi                              { color: var(--cell2-text); }
.pi                              { color: var(--cell3-text); }
.base-chip                       { color: var(--cell4-text) !important; }
.eq-chip                         { color: var(--cell5-text) !important; }
.subtab                          { color: var(--cell10-text) !important; }
.o2-card.o2-5l-llena             { color: var(--cell6-text); }
.o2-card.o2-5l-vacia             { color: var(--cell7-text); }
.o2-card.o2-10l-llena            { color: var(--cell8-text); }
.o2-card.o2-10l-vacia            { color: var(--cell9-text); }

/* estado activo: usa el acento del tema (legible sobre el fondo de acento) */
.base-chip.on   { color: var(--cell4-text-on,  var(--accent-text, #93c5fd)) !important; }
.eq-chip.on     { color: var(--cell5-text-on,  #16a34a) !important; }
.subtab.on      { color: var(--cell10-text-on, var(--accent-text, #60a5fa)) !important; }
body:not(.light) .eq-chip.on { color: var(--cell5-text-on, #4ade80) !important; }

/* los chips dentro de la portada (siempre oscura) mantienen texto claro */
#login .base-chip, #login .eq-chip { color:#cbd5e1 !important; }

/* red de seguridad: textos con color claro fijo en el panel (modo claro) */
body.light #app [style*="color:#e2e8f0"],
body.light #app [style*="color: #e2e8f0"] { color: var(--text) !important; }
body.light #app [style*="color:#cbd5e1"],
body.light #app [style*="color: #cbd5e1"] { color: #334155 !important; }
body.light #app [style*="color:#94a3b8"],
body.light #app [style*="color: #94a3b8"] { color: var(--text-muted) !important; }
body.light #app [style*="color:#64748b"],
body.light #app [style*="color: #64748b"] { color: var(--text-soft) !important; }


/* ============================================================
   FIX 2026-09-10 (c) — BORDES BLANCOS EN PC
   En PC, #app tiene relleno lateral (0 2rem / 0 3rem) y su fondo
   es el del tema: en tema claro el relleno se veia BLANCO alrededor
   de la portada oscura. La portada se sale del relleno.
   ============================================================ */

/* el fondo de la ventana es siempre oscuro (NOVA es tema espacial) */
html, body { background:#000810 !important; }

/* la portada ocupa el ancho completo, sin el relleno de #app */
@media (min-width:1024px) {
  #login { margin-left:-2rem !important; margin-right:-2rem !important; }
}
@media (min-width:1440px) {
  #login { margin-left:-3rem !important; margin-right:-3rem !important; }
}
@media (max-width:1023px) {
  #login { margin-left:0 !important; margin-right:0 !important; }
}


/* ============================================================
   FIX 2026-09-10 (d) — VARIABLES DE TEMA QUE FALTABAN
   Algunas reglas usaban var(--modal-bg), var(--input-bg)...
   pero esas variables NO estaban definidas: una var() inexistente
   deja la propiedad invalida y el fondo sale TRANSPARENTE
   (era el caso de la ventana de confirmacion "Perfil CSS actualizado").
   ============================================================ */

/* --- Modo claro (por defecto en :root) --- */
:root {
  --modal-bg: #ffffff;      --modal-border: #cbd5e1;
  --input-bg: #ffffff;      --input-border: #94a3b8;
  --button-bg: #2563eb;     --button-text: #ffffff;
  --table-row-even: #ffffff; --table-row-odd: #f1f5f9;
  --radius-card: 12px;      --radius-control: 8px;
  --shadow-modal: 0 20px 60px rgba(15,23,42,.18);
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-base: 16px;   --font-size-small: 0.78rem;
  --font-weight-base: 400;
  --color-success: #16a34a; --color-error: #dc2626;
}

/* --- Modo oscuro --- */
body:not(.light) {
  --modal-bg: #131c31;      --modal-border: #3a4766;
  --input-bg: #1a2235;      --input-border: #3a4766;
  --button-bg: #3b82f6;     --button-text: #ffffff;
  --table-row-even: #131c31; --table-row-odd: #1a2235;
  --shadow-modal: 0 20px 60px rgba(0,0,0,.65);
  --color-success: #22c55e; --color-error: #ef4444;
}

/* --- Red de seguridad: ninguna ventana flotante queda transparente --- */
#nova-modal > div, .nova-modal, .nova-overlay .nova-modal, .login-modal {
  background-color: var(--modal-bg, #131c31);
}
body.light #nova-modal > div,
body.light .nova-modal,
body.light .login-modal {
  background-color: var(--modal-bg, #ffffff);
}

/* --- Presentación de la nómina del empleado (18/09/2026) --- */
/* El selector de mes, alineado con el título (antes se veía descolgado). */
.nom-per-head {
  display: flex; align-items: baseline; gap: .7rem;
  flex-wrap: wrap; margin: .2rem 0 .5rem;
}
.nom-per-tit { font-size: 1.15rem; font-weight: 800; color: #f8fafc; letter-spacing: .3px; }
.nom-per-head select { align-self: center; }

/* Los 4 bloques: 2 columnas en pantalla normal, 4 en pantallas anchas. */
@media (min-width: 1250px) {
  .nom-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Los 4 botones en la misma línea. */
.nom-actions-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 900px) {
  .nom-actions-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Resultado dentro de "Cálculo real". */
.nom-cal-fila { display: flex; justify-content: space-between; padding: .18rem 0; font-size: .78rem; }
.nom-cal-fila b { font-weight: 800; }
.nom-cal-neto { border-top: 1px solid #1e293b; margin-top: .2rem; padding-top: .35rem; font-size: .9rem; }
.nom-cal-neto b { color: #86efac; }
.nom-cal-mini { font-size: .64rem; color: #64748b; margin-top: .3rem; }

/* --- Calendario del empleado: ancho y letras (18/09/2026) --- */
/* Sin tope: ocupa todo el ancho (antes 760px y quedaba un 25% vacío a cada lado) */
.emp-cal-ancho { max-width: 100% !important; margin: 0 !important; width: 100%; box-sizing: border-box; }

.emp-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.emp-cal-dow {
  text-align: center; font-size: .6rem; font-weight: 700;
  color: #94a3b8; padding: .25rem 0;
}
.emp-cal-dia {
  cursor: pointer; text-align: center;
  padding: .4rem .35rem .45rem; min-height: 64px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .15rem; border-radius: 8px; font-size: .72rem; font-weight: 700;
  min-width: 0; overflow: hidden;
}
.emp-cal-num { line-height: 1.1; }

/* Dietas: en PC se leen en LETRA; en móvil se ven PUNTITOS */
.emp-cal-dietas { display: flex; flex-direction: column; align-items: center; gap: 1px; margin-top: 1px; max-width: 100%; }
.emp-cal-dots { display: none; gap: 2px; }
.emp-cal-dots > i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; }
.emp-cal-dieta-txt {
  display: block; font-size: .56rem; font-weight: 800; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

/* En pantallas anchas, la celda puede con más */
@media (min-width: 1100px) {
  .emp-cal-dia { min-height: 78px; font-size: .8rem; }
  .emp-cal-dieta-txt { font-size: .62rem; }
}

/* --- MÓVIL: rejilla compacta y puntitos en vez de letras --- */
@media (max-width: 700px) {
  .emp-cal-grid { gap: 2px; }
  .emp-cal-dia { min-height: 46px; padding: .25rem .1rem .3rem; font-size: .64rem; border-radius: 6px; }
  .emp-cal-dow { font-size: .54rem; padding: .15rem 0; }
  .emp-cal-dieta-txt { display: none; }         /* fuera las letras */
  .emp-cal-dots { display: inline-flex; }       /* y entran los puntitos */
  .emp-cal-dots > i { width: 5px; height: 5px; }
}


/* --- Etiquetas del calendario del empleado (baja/permiso/guardia extra) ---
   Se ven SIEMPRE (también en móvil), al contrario que .emp-cal-dieta-txt.
   Mismo tamaño que el texto de las dietas en PC (Lauren, 19/09/2026). --- */
.emp-cal-tag {
  display: block; font-size: .56rem; font-weight: 800; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
@media (min-width: 1100px) { .emp-cal-tag { font-size: .62rem; } }
@media (max-width: 700px)  { .emp-cal-tag { font-size: .5rem; } }

/* VACACIONES en PC · VAC en móvil (Lauren, 19/09/2026) */
.emp-cal-vac { font-size: .56rem; }
.emp-cal-vac-larga { display: inline; }
.emp-cal-vac-corta { display: none; }
@media (min-width: 1100px) { .emp-cal-vac { font-size: .62rem; } }
@media (max-width: 700px) {
  .emp-cal-vac { font-size: .5rem; }
  .emp-cal-vac-larga { display: none; }
  .emp-cal-vac-corta { display: inline; }
}


/* ============================================================
   Barra de mes junto al calendario (Lauren, 19/09/2026)
   Antes se quedaba PEGADA arriba al bajar (position: sticky) y con
   fondo translucido parecia que flotaba encima del calendario,
   tapando casillas. Ahora baja con la pagina como una fila mas:
   nunca se queda congelada ni tapa ningun dia.
   ============================================================ */
.cal-nav-movil {
  display: flex; align-items: center; justify-content: center;
  gap: .5rem; margin: 0 0 .4rem;
}


/* ============================================================
   Calendario del empleado: textos alineados a la IZQUIERDA
   Antes salían centrados (Lauren, 19/09/2026).
   En columna: align-items controla el horizontal, asi que se cambia solo eso
   y el contenido sigue centrado en vertical.
   ============================================================ */
.emp-cal-dia {
  align-items: flex-start;
  text-align: left;
}
.emp-cal-num { align-self: flex-start; }
.emp-cal-dietas {
  align-items: flex-start;
  text-align: left;
  width: 100%;
}
.emp-cal-dots { justify-content: flex-start; }
.emp-cal-dieta-txt { text-align: left; width: 100%; }
.emp-cal-tag { text-align: left; width: 100%; }
.emp-cal-vac { display: block; text-align: left; width: 100%; }

/* ===================== MODO CLARO: adaptacion global (Lauren, 20/09/2026) ===================== */
/*
   La web se escribio para fondo OSCURO: hay cientos de colores claros
   puestos a mano en el HTML y en el JavaScript. En modo claro esos textos
   no se leen (era el aviso que salia una y otra vez).

   En vez de reescribir el JavaScript (riesgo alto), se corrige con CSS
   buscando el color POR ATRIBUTO [style*="..."]: entra igual lo que esta
   escrito en el HTML y lo que genera el JavaScript.

   Todo va dentro de `body.light`, que tambien casa con el panel
   (<body class="admin-body light">): el modo OSCURO queda intacto.
*/

/* --- (a) Texto claro SIN fondo propio -> se oscurece. ---
   El :not(background) es a proposito: los "chips" que SI llevan fondo
   oscuro en el mismo estilo conservan su texto claro, que ahi si se ve. */
body.light [style*="color:#94a3b8" i]:not([style*="background"]) { color:#475569 !important; }
body.light [style*="color:#e2e8f0" i]:not([style*="background"]) { color:#1e293b !important; }
body.light [style*="color:#cbd5e1" i]:not([style*="background"]) { color:#334155 !important; }
body.light [style*="color:#f8fafc" i]:not([style*="background"]) { color:#0f172a !important; }
body.light [style*="color:#a5b4fc" i]:not([style*="background"]) { color:#4338ca !important; }
body.light [style*="color:#64748b" i]:not([style*="background"]) { color:#475569 !important; }
body.light [style*="color:#93c5fd" i]:not([style*="background"]) { color:#1d4ed8 !important; }
body.light [style*="color:#86efac" i]:not([style*="background"]) { color:#15803d !important; }
body.light [style*="color:#fca5a5" i]:not([style*="background"]) { color:#b91c1c !important; }
body.light [style*="color:#fcd34d" i]:not([style*="background"]) { color:#a16207 !important; }
body.light [style*="color:#fecaca" i]:not([style*="background"]) { color:#b42318 !important; }
body.light [style*="color:#e9e2f5" i]:not([style*="background"]) { color:#334155 !important; }

/* --- (b) Paneles: fondo oscuro JUNTO a texto claro -> se dan la vuelta. ---
   El selector exige LOS DOS colores, asi que los BOTONES (fondo oscuro con
   texto blanco) NO se tocan y siguen oscuros. */
body.light [style*="background:#1e293b" i][style*="color:#e2e8f0" i] { background:#f1f5f9 !important; color:#0f172a !important; }
body.light [style*="background: #1e293b" i][style*="color:#e2e8f0" i] { background:#f1f5f9 !important; color:#0f172a !important; }
body.light [style*="background:#1a2235" i][style*="color:#e2e8f0" i] { background:#f1f5f9 !important; color:#0f172a !important; }
body.light [style*="background: #1a2235" i][style*="color:#e2e8f0" i] { background:#f1f5f9 !important; color:#0f172a !important; }
body.light [style*="background:#0b1220" i][style*="color:#e2e8f0" i] { background:#f1f5f9 !important; color:#0f172a !important; }
body.light [style*="background: #0b1220" i][style*="color:#e2e8f0" i] { background:#f1f5f9 !important; color:#0f172a !important; }
body.light [style*="background:#1e293b" i][style*="color:#94a3b8" i] { background:#f1f5f9 !important; color:#475569 !important; }
body.light [style*="background: #1e293b" i][style*="color:#94a3b8" i] { background:#f1f5f9 !important; color:#475569 !important; }
body.light [style*="background:#1e293b" i][style*="color:#cbd5e1" i] { background:#f1f5f9 !important; color:#334155 !important; }
body.light [style*="background: #1e293b" i][style*="color:#cbd5e1" i] { background:#f1f5f9 !important; color:#334155 !important; }
body.light [style*="background:#0f172a" i][style*="color:#94a3b8" i] { background:#f1f5f9 !important; color:#475569 !important; }
body.light [style*="background: #0f172a" i][style*="color:#94a3b8" i] { background:#f1f5f9 !important; color:#475569 !important; }

/* --- (c) Grises secundarios por variable de tema. --- */
body.light { --text-soft:#475569; --text-muted:#475569; }

/* ================= fin MODO CLARO ================= */