/* ForX — sistema visual. Los valores vienen de DESIGN.md; si difieren, gana DESIGN.md. */

@font-face{
  font-family:"IBM Plex Sans";
  src:url("/fuentes/plex-latin-var.woff2") format("woff2-variations");
  font-weight:300 700;font-style:normal;font-display:swap;
}

/* ── Tokens ──────────────────────────────────────────────────────────────
   Tema oscuro por defecto; [data-theme="light"] lo invierte. El JS fija el
   atributo antes de cargar esta hoja para evitar el destello. */
:root{
  --navy:#0C255C;
  --bg:#05122F;
  --surface:#0A1F4E;
  --surface-2:#062350;
  --side-bg:#000C22;
  --side-line:rgba(255,255,255,.08);
  --border:#123063;
  --text:#E9F0FC;
  --text-2:#A9BCDD;
  --text-3:#7C8FB4;
  --accent:#16C0D2;
  --accent-soft:rgba(22,192,210,.16);
  --on-accent:#05122F;
  --ok:#12A863;--warn:#F9C043;--caution:#EA7630;--crit:#D83021;
  --on-warm:#2A1206;--on-crit:#FFFFFF;
  --ok-ink:#2ABF7B;--warn-ink:#F9C043;--caution-ink:#EA7630;--crit-ink:#FF6B52;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);
  --shadow-modal:0 24px 70px rgba(0,0,0,.45);
  --track:#0B2A5C;
  /* Aliases de transición: el JS aún genera markup con los tokens del tema
     anterior. Mapean a los nuevos y mueren conforme cada superficie migre. */
  --bd:var(--text);--bm:var(--text-2);--bl:var(--text-3);
  --gold:#4A3A15;            /* par bg:gold+color:bd legible en oscuro */
  --cream:var(--surface-2);
  --tc:var(--crit-ink);--green:var(--ok-ink);
}
:root[data-theme="light"]{
  --bg:#F3F6FC;
  --surface:#FFFFFF;
  --surface-2:#E9EFFA;
  --side-bg:#0C255C;
  --side-line:rgba(255,255,255,.10);
  --border:#D3DCEC;
  --text:#0B1B3A;
  --text-2:#3C4E73;
  --text-3:#5F6E8B;
  --accent:#0E9FB0;
  --accent-soft:rgba(14,159,176,.12);
  --on-accent:#05122F;
  --ok-ink:#0C6339;--warn-ink:#6E4E00;--caution-ink:#8F3D00;--crit-ink:#A81F16;
  --shadow:0 1px 2px rgba(11,27,58,.06),0 8px 24px rgba(11,27,58,.07);
  --track:#DDE4F2;
  --bd:var(--text);--bm:var(--text-2);--bl:var(--text-3);
  --gold:#F9C043;
  --cream:var(--surface-2);
}

/* ── Base ── */
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  background:var(--bg);color:var(--text);
  font-size:14px;line-height:1.45;min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── Cascarón ── */
.app{display:grid;grid-template-columns:264px 1fr;min-height:100vh}
.side{
  background:var(--side-bg);color:#DCE6F7;
  display:flex;flex-direction:column;
  border-right:1px solid var(--side-line);
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.brand{padding:14px 16px 12px;border-bottom:1px solid var(--side-line)}
.brand img{display:block;width:100%;max-width:210px;height:auto;margin:-14px 0 -18px -8px}
/* El tagline vive separado de la firma "Powered by Sparx AI" que ya trae el
   logo: distinta tipografia y un respiro de aire para que no se amontonen. */
.tagline{
  margin-top:24px;font-size:11px;font-weight:600;font-style:italic;
  color:#8EA3C9;letter-spacing:.02em;
}
.linea{padding:14px 20px;border-bottom:1px solid var(--side-line);background:rgba(255,255,255,.03)}
.linea .lbl,.side-foot .lbl{
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#8EA3C9;font-weight:700;margin-bottom:7px;display:block;
}
.linea select{
  width:100%;background:rgba(255,255,255,.07);color:#DCE6F7;
  border:1px solid rgba(255,255,255,.16);border-radius:7px;
  padding:8px 10px;font:inherit;font-weight:600;font-size:13px;cursor:pointer;
}
.linea select option{background:#0C255C;color:#DCE6F7}
.nav-list{padding:12px 10px;display:flex;flex-direction:column;gap:2px;flex:1}
.tab{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:9px 11px;border-radius:9px;border:1px solid transparent;
  background:transparent;color:#DCE6F7;cursor:pointer;
  font:inherit;font-weight:600;font-size:13.5px;
}
.tab svg{width:16px;height:16px;flex:none;opacity:.72}
.tab:hover{background:rgba(255,255,255,.06)}
.tab.on{background:var(--accent-soft);color:#fff;border-color:rgba(22,192,210,.42)}
.tab.on svg{opacity:1;color:#16C0D2}
.side-foot{
  padding:12px 16px;border-top:1px solid var(--side-line);
  display:flex;flex-direction:column;gap:9px;font-size:11.5px;color:#8EA3C9;
}
.side-foot .btn{width:100%}
.tbtn{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  background:rgba(255,255,255,.07);color:#DCE6F7;
  border:1px solid rgba(255,255,255,.16);border-radius:7px;
  padding:8px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;
}
.tbtn:hover{background:rgba(255,255,255,.12)}
.legal{font-size:9.5px;line-height:1.5;color:#5F729B}
.main{min-width:0}
.wrap{max-width:1400px;margin:0 auto;padding:20px 24px 40px}

/* ── Páginas ── */
.page{display:none}
.page.on{display:block;animation:fi .3s ease}
@keyframes fi{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}

/* ── Contenedores ── */
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:11px;
  padding:18px;margin-bottom:18px;box-shadow:var(--shadow);
}
.ch{
  font-size:19px;font-weight:700;letter-spacing:-.015em;color:var(--text);
  margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border);
}
.infobox{
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:9px;padding:14px;margin-bottom:18px;
  font-size:12.5px;color:var(--text-2);
}
.infobox h3{color:var(--text);margin-bottom:8px;font-size:13.5px;font-weight:700}

/* ── Rejilla de días (re-skin transicional; el diseño nuevo llega con la superficie Menú) ── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.day{
  background:var(--surface);border:1px solid var(--border);border-radius:11px;
  overflow:hidden;box-shadow:var(--shadow);
}
.day:hover{border-color:var(--accent)}
.dh{
  background:var(--surface-2);border-bottom:1px solid var(--border);
  padding:12px 14px;display:flex;justify-content:space-between;align-items:center;
}
.dn{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--text);line-height:1.1}
.dw{font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:var(--text-3);font-weight:700;margin-top:2px}
.dc{
  background:var(--accent-soft);color:var(--text);border:1px solid var(--border);
  padding:3px 9px;border-radius:99px;font-size:12px;font-weight:700;
  font-variant-numeric:tabular-nums;
}
.pl{padding:9px 14px;border-bottom:1px solid var(--border)}
.pl:last-child{border-bottom:none}
.plt{font-size:9.5px;text-transform:uppercase;letter-spacing:.13em;color:var(--text-3);font-weight:700;margin-bottom:2px}
.pln{font-size:13.5px;font-weight:600;color:var(--text)}
.plm{display:flex;gap:12px;margin-top:3px;font-size:11px;color:var(--text-3);font-variant-numeric:tabular-nums}

/* ── Botones ── */
.btn{
  background:var(--accent);color:var(--on-accent);border:1px solid transparent;
  padding:8px 14px;font:inherit;font-size:13px;font-weight:650;
  border-radius:7px;cursor:pointer;
}
.btn:hover{filter:brightness(1.08)}
.bsec{background:transparent;color:var(--text);border-color:var(--border)}
.bsec:hover{background:var(--surface-2);filter:none}
.bgold{background:var(--warn);color:var(--on-warm)}
.bsm{padding:6px 10px;font-size:12px}
.bfull{width:100%;display:block;text-align:center}

/* ── Filtros y formularios ── */
.fbar{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;align-items:center}
.fl{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.13em;color:var(--text-3);white-space:nowrap}
.fb{
  padding:6px 12px;border:1px solid var(--border);background:var(--surface);
  color:var(--text-2);border-radius:99px;cursor:pointer;
  font:inherit;font-size:12px;font-weight:600;white-space:nowrap;
}
.fb:hover{border-color:var(--accent);color:var(--text)}
.fb.on{background:var(--accent-soft);border-color:var(--accent);color:var(--text)}
.fg{margin-bottom:14px}
.fl2{display:block;font-weight:700;color:var(--text-3);margin-bottom:5px;font-size:9.5px;text-transform:uppercase;letter-spacing:.13em}
.fi,.fs,.ft{
  width:100%;padding:7px 9px;border:1px solid var(--border);border-radius:7px;
  font:inherit;font-size:13px;background:var(--bg);color:var(--text);max-width:100%;
}
.fi:focus,.fs:focus,.ft:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.ft{resize:vertical;min-height:100px}
.fi{font-variant-numeric:tabular-nums}

/* ── Modal ── */
.modal{
  display:none;position:fixed;inset:0;background:rgba(0,8,24,.66);
  z-index:1000;overflow-y:auto;align-items:flex-start;justify-content:center;padding:5vh 16px;
}
.mc{
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  max-width:860px;width:92%;max-height:90vh;overflow-y:auto;position:relative;
  box-shadow:var(--shadow-modal);
}
.mh{
  background:var(--surface-2);color:var(--text);border-bottom:1px solid var(--border);
  padding:16px 20px;border-radius:14px 14px 0 0;
  font-size:16px;font-weight:700;letter-spacing:-.01em;position:sticky;top:0;z-index:1;
}
.mb{padding:20px}
.cx{
  position:absolute;top:12px;right:12px;background:transparent;
  border:1px solid var(--border);color:var(--text-2);font-size:15px;cursor:pointer;
  width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;
}
.cx:hover{color:var(--text);border-color:var(--accent)}

/* ── Listas y resúmenes ── */
.ing-row{display:grid;grid-template-columns:2fr 1fr 1fr .5fr;gap:6px;margin-bottom:6px}
.ibox{
  background:var(--surface-2);border:1px solid var(--border);border-radius:7px;
  padding:9px 12px;margin-bottom:7px;
  display:flex;justify-content:space-between;align-items:center;
}
.csum{
  background:var(--surface-2);border:1px solid var(--ok-ink);color:var(--text);
  padding:14px;border-radius:9px;margin-top:14px;font-variant-numeric:tabular-nums;
}
.crow{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--border)}
.crow:last-child{border-bottom:none;font-size:15px;font-weight:700}

/* ── Semáforo: píldoras con glifo por banda ─────────────────────────────
   El glifo (círculo/cuadro/triángulo/rombo) hace redundante al color, que es
   la regla de DESIGN.md para el eje difícil de daltonismo. */
.sem-badge{margin-top:5px}
.pill{
  display:inline-flex;align-items:center;gap:6px;padding:3px 9px;
  border-radius:99px;font-size:11px;font-weight:700;border:1px solid transparent;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.pill i{width:8px;height:8px;flex:none;background:currentColor}
.pill-verde{color:var(--ok-ink);background:color-mix(in srgb,var(--ok) 12%,transparent);border-color:color-mix(in srgb,var(--ok-ink) 42%,transparent)}
.pill-verde i{border-radius:50%}
.pill-amarillo{color:var(--warn-ink);background:color-mix(in srgb,var(--warn) 13%,transparent);border-color:color-mix(in srgb,var(--warn-ink) 46%,transparent)}
.pill-amarillo i{border-radius:1px}
.pill-naranja{color:var(--caution-ink);background:color-mix(in srgb,var(--caution) 13%,transparent);border-color:color-mix(in srgb,var(--caution-ink) 46%,transparent)}
.pill-naranja i{clip-path:polygon(50% 0,100% 100%,0 100%)}
.pill-rojo{color:var(--crit-ink);background:color-mix(in srgb,var(--crit) 14%,transparent);border-color:color-mix(in srgb,var(--crit-ink) 48%,transparent)}
.pill-rojo i{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.pill-incompleto{color:var(--crit-ink);background:color-mix(in srgb,var(--crit) 10%,transparent);border-color:color-mix(in srgb,var(--crit-ink) 40%,transparent)}
.pill-sinlinea{color:var(--text-3);border-color:var(--border);background:var(--surface-2)}
.pill-especial{
  color:var(--warn-ink);background:color-mix(in srgb,var(--warn) 14%,transparent);
  border-color:color-mix(in srgb,var(--warn-ink) 45%,transparent);
  font-size:9px;letter-spacing:.08em;text-transform:uppercase;
}

/* ── Medidor de umbrales (componente de firma) ── */
.meter{padding:10px 14px 8px;border-bottom:1px solid var(--border)}
.track{position:relative;height:7px;border-radius:4px;overflow:hidden;background:var(--track)}
.track i{position:absolute;top:0;bottom:0}
.needle{
  position:absolute;top:0;bottom:0;width:3px;border-radius:2px;
  background:var(--text);box-shadow:0 0 0 1.5px var(--surface);
}
.mlabels{
  display:flex;justify-content:space-between;gap:8px;margin-top:4px;
  font-size:10px;color:var(--text-3);font-weight:600;font-variant-numeric:tabular-nums;
}
.edge{color:var(--caution-ink);font-weight:700}

/* La marca de Grill Express llega como raster con fondo blanco: se presenta
   sobre una placa blanca deliberada, legible en ambos temas. */
.brand-plate{
  display:inline-flex;background:#fff;border-radius:9px;padding:3px;
  border:1px solid var(--border);flex:none;
}
.brand-plate img{display:block;border-radius:6px}

/* ── Fichas de resumen y tablas de datos ── */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.stat-tile{
  background:var(--surface-2);border:1px solid var(--border);border-radius:9px;
  padding:12px 14px;
}
.stat-num{
  font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--text);
  font-variant-numeric:tabular-nums;line-height:1.15;
}
.stat-lbl{
  font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.13em;
  color:var(--text-3);margin-top:3px;
}
.tabla{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tabla th{
  font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.13em;
  color:var(--text-3);text-align:left;padding:8px 12px;
  border-bottom:1px solid var(--border);background:var(--surface-2);
}
.tabla td{padding:9px 12px;border-bottom:1px solid var(--border);font-size:13px}
.tabla tr:last-child td{border-bottom:none}
.tabla .num{text-align:right}
.tabla tbody tr:hover td{background:var(--surface-2)}

/* Puntos de los filtros por banda */
.fb{display:inline-flex;align-items:center;gap:6px}
.dot{width:8px;height:8px;border-radius:50%;flex:none}
.dot-verde{background:var(--ok)}
.dot-amarillo{background:var(--warn)}
.dot-naranja{background:var(--caution)}
.dot-rojo{background:var(--crit)}

/* ── Estados del sistema ── */
.loader{display:none;text-align:center;padding:2rem}
.loader.on{display:block}
.spin{
  width:40px;height:40px;border:3px solid var(--surface-2);border-top-color:var(--accent);
  border-radius:50%;animation:sp .8s linear infinite;margin:0 auto;
}
@keyframes sp{to{transform:rotate(360deg)}}
/* ── Badge de versión ────────────────────────────────────────────────────
   Discreto en reposo: su trabajo es estar disponible, no llamar la atención.
   Comparte esquina con el toast, que se sienta encima. */
.badge-version{
  position:fixed;bottom:10px;right:12px;z-index:9990;
  background:var(--surface);color:var(--text-3);
  border:1px solid var(--border);border-radius:99px;
  padding:4px 10px;font:inherit;font-size:10.5px;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
  cursor:pointer;
}
/* Discreto por tamaño y color, no por opacidad: a .55 el texto caía a 2.2:1. */
.badge-version:hover{color:var(--text-2);border-color:var(--accent)}
.badge-version:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.badge-version.bv-ok{color:var(--ok-ink);border-color:color-mix(in srgb,var(--ok-ink) 45%,transparent)}
.badge-version.bv-vieja{
  color:var(--caution-ink);
  border-color:color-mix(in srgb,var(--caution-ink) 55%,transparent);
  background:color-mix(in srgb,var(--caution) 13%,var(--surface));
}
.badge-version.bv-error{color:var(--text-3)}

.toast{
  position:fixed;bottom:44px;right:20px;z-index:9999;
  background:var(--surface);color:var(--text);border:1px solid var(--accent);
  padding:12px 18px;border-radius:9px;font-size:13px;font-weight:500;
  box-shadow:var(--shadow-modal);display:none;max-width:320px;
}
.toast.on{display:block;animation:sli .35s ease}
@keyframes sli{from{opacity:0;transform:translateX(40%)}to{opacity:1;transform:translateX(0)}}

/* ── Responsive ── */
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .side{position:static;height:auto}
  .nav-list{flex-direction:row;flex-wrap:wrap}
  .tab{width:auto;font-size:14px;padding:11px 13px}
  .wrap{padding:16px}
  .grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}