/* ═══════════════════════════════════════════════════════════════════════════
   BASE COMUN DE TODAS LAS SIMULACIONES

   Panel de instrumentacion. Los neutros llevan sesgo petroleo hacia el color
   del agua: un gris puro leeria como gris por defecto, no como gris elegido.

   Se carga con <link rel="stylesheet" href="../comun/base.css">, ruta RELATIVA,
   para que funcione igual servido por Cloudflare Pages y abierto con file://
   desde una memoria USB sin internet.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --fondo:#EDF1F2; --panel:#FFFFFF; --panel-2:#F5F8F9;
  --tinta:#0F2830; --tinta-suave:#587782; --linea:#C6D3D7; --linea-fina:#DDE6E9;
  --agua:#17708F; --agua-claro:#4E9DB8; --consigna:#B8790A; --alarma:#B23A2E; --ok:#2C7A5B; --ia:#6B4FA8;
  --sombra:0 1px 2px rgba(15,40,48,.06), 0 8px 24px rgba(15,40,48,.06);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --fondo:#0D1418; --panel:#152026; --panel-2:#1B282F;
    --tinta:#E4EDF0; --tinta-suave:#86A0AA; --linea:#253840; --linea-fina:#1E2E35;
    --agua:#3FA8CD; --agua-claro:#6FC4E0; --consigna:#E9A93E; --alarma:#E0654F; --ok:#4FB68C; --ia:#A78BE0;
    --sombra:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --fondo:#0D1418; --panel:#152026; --panel-2:#1B282F;
  --tinta:#E4EDF0; --tinta-suave:#86A0AA; --linea:#253840; --linea-fina:#1E2E35;
  --agua:#3FA8CD; --agua-claro:#6FC4E0; --consigna:#E9A93E; --alarma:#E0654F; --ok:#4FB68C; --ia:#A78BE0;
  --sombra:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--fondo); color:var(--tinta);
  font-family:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
.envoltorio{max-width:1500px; margin:0 auto; padding:20px 20px 48px; display:flex; flex-direction:column; gap:18px}

/* ── Cabecera ───────────────────────────────────────────────────────────── */
.cabecera{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap}
.titulo{display:flex; flex-direction:column; gap:2px}
.eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--tinta-suave);
}
h1{margin:0; font-size:clamp(26px,3.4vw,40px); font-weight:700; letter-spacing:-.02em; text-wrap:balance}
.subtitulo{color:var(--tinta-suave); font-size:15px; max-width:62ch; margin:4px 0 0}
.volver{
  color:var(--tinta-suave); text-decoration:none; font-size:13px; font-weight:600;
  display:inline-flex; align-items:center; gap:6px;
}
.volver:hover{color:var(--agua)}

.pastilla{
  display:inline-flex; align-items:center; gap:9px; padding:9px 18px; border-radius:999px;
  border:2px solid currentColor; font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-weight:600; font-size:15px; letter-spacing:.09em; text-transform:uppercase; white-space:nowrap;
}
.punto{width:9px; height:9px; border-radius:50%; background:currentColor}
.est-bien{color:var(--ok)} .est-aviso{color:var(--consigna)} .est-mal{color:var(--alarma)}

/* ── Tarjetas y rejilla ─────────────────────────────────────────────────── */
.tarjeta{
  background:var(--panel); border:1px solid var(--linea); border-radius:14px;
  box-shadow:var(--sombra); padding:16px; display:flex; flex-direction:column; gap:12px; min-width:0;
}
.rotulo{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-suave);
}
.principal{display:grid; grid-template-columns:minmax(320px,.85fr) 1.35fr; gap:18px;
           align-items:start}  /* sin esto la tarjeta corta se estira y deja hueco muerto */
@media (max-width:1000px){ .principal{grid-template-columns:1fr} }
.columna{display:flex; flex-direction:column; gap:18px; min-width:0}

canvas{display:block; width:100%; touch-action:none}

/* ── Lecturas numericas ─────────────────────────────────────────────────── */
.lecturas{display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:10px}
.lectura{background:var(--panel-2); border:1px solid var(--linea-fina); border-radius:9px; padding:9px 11px}
.lectura .k{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--tinta-suave); display:block;
}
.lectura .v{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:22px; font-weight:600;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em; display:block; margin-top:2px;
}
.u{font-size:12px; font-weight:400; color:var(--tinta-suave); margin-left:2px}

/* ── Mandos ─────────────────────────────────────────────────────────────── */
.mandos{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px}
.mando{display:flex; flex-direction:column; gap:7px}
.mando .fila{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.mando .nombre{font-weight:600; font-size:15px}
.mando .valor{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:19px; font-weight:600;
  font-variant-numeric:tabular-nums;
}
.mando .pista{font-size:13px; color:var(--tinta-suave); min-height:2.6em}
.mando.destacado .nombre::after{
  content:"clave"; margin-left:8px; font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--consigna); border:1px solid currentColor; border-radius:4px; padding:1px 5px; vertical-align:2px;
}

input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:34px; background:transparent; cursor:pointer; margin:0;
}
input[type=range]::-webkit-slider-runnable-track{height:8px; border-radius:4px; background:var(--linea)}
input[type=range]::-moz-range-track{height:8px; border-radius:4px; background:var(--linea)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:26px; height:26px; border-radius:50%; margin-top:-9px;
  background:var(--agua); border:3px solid var(--panel); box-shadow:0 1px 4px rgba(0,0,0,.28);
}
input[type=range]::-moz-range-thumb{
  width:26px; height:26px; border-radius:50%;
  background:var(--agua); border:3px solid var(--panel); box-shadow:0 1px 4px rgba(0,0,0,.28);
}
input[type=range]:focus-visible{outline:3px solid var(--consigna); outline-offset:4px; border-radius:6px}

.botonera{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
button{
  font-family:inherit; font-size:15px; font-weight:600; color:var(--tinta);
  background:var(--panel-2); border:1.5px solid var(--linea); border-radius:9px;
  padding:11px 17px; cursor:pointer;
}
button:hover{border-color:var(--agua); color:var(--agua)}
button:focus-visible{outline:3px solid var(--consigna); outline-offset:3px}
button.activo{background:var(--agua); border-color:var(--agua); color:#fff}
:root[data-theme="dark"] button.activo{color:#0D1418}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) button.activo{color:#0D1418} }
.sep{flex:1}

.nota{font-size:13.5px; color:var(--tinta-suave); max-width:82ch; margin:0}
.nota b{color:var(--tinta); font-weight:600}
kbd{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12px;
  border:1px solid var(--linea); border-radius:4px; padding:1px 5px; background:var(--panel-2);
}

/* ── Desplegables (avanzado, ecuaciones) ────────────────────────────────── */
details{border-top:1px solid var(--linea-fina); padding-top:12px}
summary{
  cursor:pointer; font-weight:600; font-size:15px; list-style:none;
  display:flex; align-items:center; gap:9px; padding:4px 0;
}
summary::-webkit-details-marker{display:none}
summary::before{
  content:"+"; font-family:"IBM Plex Mono",ui-monospace,monospace; font-weight:600;
  width:22px; height:22px; display:grid; place-items:center; flex:none;
  border:1.5px solid var(--linea); border-radius:6px; color:var(--tinta-suave);
}
details[open] > summary::before{content:"−"; border-color:var(--agua); color:var(--agua)}
summary:focus-visible{outline:3px solid var(--consigna); outline-offset:3px; border-radius:6px}
summary .pista-sum{font-weight:400; font-size:13.5px; color:var(--tinta-suave)}
details > .contenido{padding:14px 0 4px; display:flex; flex-direction:column; gap:18px}

@media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important} }

/* ── Ecuaciones vivas ────────────────────────────────────────────────────
   Cada termino lleva su SIMBOLO arriba y su VALOR REAL debajo, cambiando
   mientras la simulacion corre. Una ecuacion quieta en un modal es una foto;
   lo que ensena es ver la resta llegar a cero cuando el sistema se estabiliza.
   Nada de KaTeX ni MathJax: son CDN y romperian el funcionamiento sin red.  */
.ecuacion{display:flex; flex-direction:column; gap:8px}
.formula{
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:10px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:clamp(15px,1.9vw,20px); font-weight:600;
  padding:14px 16px; background:var(--panel-2);
  border:1px solid var(--linea-fina); border-radius:10px; overflow-x:auto;
}
.term{display:inline-flex; flex-direction:column; align-items:center; gap:1px}
.term .sim{white-space:nowrap}
.term .num{
  font-size:12.5px; font-weight:600; color:var(--agua);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.term.clave .sim{color:var(--consigna)}
.term.clave .num{color:var(--consigna)}
.op{opacity:.55; padding-top:1px}
.frac{display:inline-flex; flex-direction:column; align-items:center; gap:1px}
/* El gap de .formula no llega aqui dentro: numerador y denominador son sus
   propios contextos, y sin esto los terminos se pegan ("tamano x 8"). */
.frac .num-parte, .frac .den{display:inline-flex; align-items:flex-start; gap:8px; justify-content:center}
.frac .den{border-top:1.6px solid currentColor; padding-top:2px; width:100%; text-align:center}
.destacada{border-color:var(--consigna); border-width:1.5px}

/* ── Portada ────────────────────────────────────────────────────────────── */
.nivel{display:flex; flex-direction:column; gap:12px}
.nivel-cab{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.nivel-cab h2{margin:0; font-size:22px; font-weight:700; letter-spacing:-.01em}
.nivel-cab .para{font-size:14px; color:var(--tinta-suave)}
.rejilla{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:16px}
.ficha{
  display:flex; flex-direction:column; gap:8px; text-decoration:none; color:inherit;
  background:var(--panel); border:1px solid var(--linea); border-radius:14px;
  box-shadow:var(--sombra); padding:18px; border-left:4px solid var(--agua);
}
a.ficha:hover{border-color:var(--agua); border-left-color:var(--agua)}
a.ficha:focus-visible{outline:3px solid var(--consigna); outline-offset:3px}
.ficha h3{margin:0; font-size:19px; font-weight:700; letter-spacing:-.01em}
.ficha .gancho{font-size:14px; color:var(--tinta-suave); margin:0}
.ficha .frase{
  font-size:13.5px; font-weight:600; color:var(--agua); margin:4px 0 0;
  padding-top:8px; border-top:1px solid var(--linea-fina);
}
.ficha.pendiente{opacity:.55; border-left-color:var(--linea); pointer-events:none}
.ficha.pendiente .frase{color:var(--tinta-suave)}
.etiqueta-pend{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-suave);
  border:1px solid var(--linea); border-radius:4px; padding:1px 6px;
}

/* ── Etiquetas y filtro de la portada ───────────────────────────────────── */
.filtros{display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:2px 0 4px}
.chip{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; border:1px solid currentColor;
  border-radius:4px; padding:2px 7px; white-space:nowrap;
}
.chip-telematica{color:var(--agua)}
.chip-robotica{color:var(--consigna)}
.ficha .cabeza{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.ficha.robotica{border-left-color:var(--consigna)}
a.ficha.robotica:hover{border-color:var(--consigna); border-left-color:var(--consigna)}
.nivel[hidden], .ficha[hidden]{display:none}
.chip-datos{color:var(--ok)}
.chip-sistemas{color:var(--agua-claro)}
.ficha.datos{border-left-color:var(--ok)}
.ficha.sistemas{border-left-color:var(--agua-claro)}
a.ficha.datos:hover{border-color:var(--ok); border-left-color:var(--ok)}
a.ficha.sistemas:hover{border-color:var(--agua-claro); border-left-color:var(--agua-claro)}

/* Areas anadidas: control (lazo cerrado sobre un cacharro real) e IA. */
.chip-control{color:var(--alarma)}
.chip-ia{color:var(--ia)}
.ficha.control{border-left-color:var(--alarma)}
.ficha.ia{border-left-color:var(--ia)}
a.ficha.control:hover{border-color:var(--alarma); border-left-color:var(--alarma)}
a.ficha.ia:hover{border-color:var(--ia); border-left-color:var(--ia)}