/* =====================================================================
   MP9 · Sistema visual.

   Panel de instrumento industrial, no web app. Sala de control: reflejos,
   guantes, turno de noche, y el tablero se lee a dos metros.

   Por que sigue siendo oscuro: con fluorescente y reflejos sobre el
   cristal, un fondo claro devuelve la luz a la cara y se lee peor. Lo que
   si se ha subido es la ALEGRIA del color: acentos mas saturados,
   profundidad real y una paleta semantica mas amplia, en vez de un gris
   plano con un solo ambar.

   Mono en todo numero: en una pantalla llena de digitos la desambiguacion
   de glifos es funcional, no estetica. Tipografias del sistema: no hay
   red para webfonts.
   ===================================================================== */

:root {
  /* superficies, con algo de temperatura en vez de gris puro */
  --field:#12130F; --panel:#1B1D18; --panel-2:#23261F; --sunk:#0D0E0B;
  --rule:#33372C; --rule-2:#464B3C;
  --ink:#F0EDE2; --ink-2:#C9C6B8; --muted:#8C907E;

  /* acentos, mas saturados que la paleta original, que se veia apagada */
  --amber:#F2B33D;  --amber-2:#FFCF6B;
  --alert:#F0603C;  --alert-2:#FF8566;
  --ok:#7FC96B;     --ok-2:#A6E294;
  --cyan:#4FC3D9;   --cyan-2:#84DEEF;
  --violeta:#A78BFA;
  --rosa:#F472B6;

  --sombra: 0 1px 0 rgb(255 255 255 / .04) inset, 0 2px 8px rgb(0 0 0 / .38);
  --sombra-alta: 0 10px 34px rgb(0 0 0 / .55);
  --r:8px; --r-sm:6px;
  --tap:48px;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
}

* { box-sizing:border-box; }

/* iOS: la barra de Safari cambia de alto al desplazar, y con height:100%
   el layout se sale por abajo. dvh sigue al viewport de verdad. */
html, body { height:100%; height:100dvh; }
body {
  margin:0; color:var(--ink);
  background:
    radial-gradient(1200px 600px at 15% -10%, #1D2019 0%, transparent 60%),
    var(--field);
  font:15px/1.5 var(--sans);
  -webkit-text-size-adjust:100%;
  overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
  /* Sin zoom: en planta se toca con guante y un pellizco accidental deja
     la pantalla torcida a mitad de turno. pan-x pan-y mata el doble-toque
     para acercar y el pellizco donde se respeta; el desplazamiento sigue.
     Los carriles horizontales lo vuelven a poner donde hace falta. */
  touch-action:pan-x pan-y;
}
:where(button, input, select, textarea) { font:inherit; color:inherit; }
.mono, .num { font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }

/* ---------- armazon ---------------------------------------------------- */
#app { display:flex; flex-direction:column; height:100%; height:100dvh; }

header.top {
  display:flex; align-items:center; gap:12px; flex:0 0 auto;
  padding:calc(10px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right))
          10px calc(14px + env(safe-area-inset-left));
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  border-bottom:1px solid var(--rule);
  box-shadow:0 1px 0 rgb(255 255 255 / .04) inset;
}
header.top h1 {
  margin:0; font:800 19px/1 var(--mono); letter-spacing:.08em;
  background:linear-gradient(180deg, var(--amber-2), var(--amber));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
header.top .sep { flex:1; }
.version { font:11px/1 var(--mono); color:var(--muted); }

.chip {
  font:11px/1 var(--mono); padding:6px 9px; border-radius:99px;
  border:1px solid var(--rule); color:var(--ink-2); background:var(--sunk);
  white-space:nowrap;
}
.chip.ok    { color:var(--ok-2);    border-color:color-mix(in srgb, var(--ok) 50%, transparent);
              background:color-mix(in srgb, var(--ok) 12%, var(--sunk)); }
.chip.aviso { color:var(--amber-2); border-color:color-mix(in srgb, var(--amber) 50%, transparent);
              background:color-mix(in srgb, var(--amber) 12%, var(--sunk)); }
.chip.mal   { color:var(--alert-2); border-color:color-mix(in srgb, var(--alert) 50%, transparent);
              background:color-mix(in srgb, var(--alert) 12%, var(--sunk)); }

nav.menu {
  display:flex; gap:4px; overflow-x:auto; flex:0 0 auto; padding:6px 8px;
  background:var(--panel); border-bottom:1px solid var(--rule); scrollbar-width:none;
}
nav.menu::-webkit-scrollbar { display:none; }
nav.menu button {
  flex:0 0 auto; min-height:42px; padding:0 16px; border-radius:99px; cursor:pointer;
  background:transparent; border:1px solid transparent; color:var(--muted);
  font-weight:650; letter-spacing:.01em; transition:.14s;
}
nav.menu button:hover { color:var(--ink-2); background:var(--panel-2); }
nav.menu button[aria-current="page"] {
  color:#241A05; border-color:var(--amber);
  background:linear-gradient(180deg, var(--amber-2), var(--amber));
  box-shadow:0 2px 10px color-mix(in srgb, var(--amber) 35%, transparent);
}

main.vista { flex:1 1 auto; overflow:auto; padding:14px;
  padding-bottom:calc(14px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling:touch; }
@media (min-width:1100px) { main.vista { padding:18px 22px; } }

/* ---------- bloques ---------------------------------------------------- */
.panel {
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  border:1px solid var(--rule); border-radius:var(--r);
  padding:14px; margin-bottom:14px; box-shadow:var(--sombra);
}
.panel > h2 {
  margin:0 0 12px; font:700 11px/1.35 var(--sans);
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px;
  /* El titulo es un nodo de texto suelto: como item flex se encogeria
     hasta min-content y partiria por dentro. Con nowrap no puede, y el
     subtitulo se va entero a la linea de abajo, que es lo que toca. */
  white-space:nowrap;
}
.panel > h2 > span { white-space:normal; min-width:0; }
.panel > h2::after { content:""; flex:1; height:1px;
  background:linear-gradient(90deg, var(--rule), transparent); }
.sunk { background:var(--sunk); border:1px solid var(--rule);
  border-radius:var(--r-sm); padding:11px; }

.fila { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
/* auto-FILL, no auto-fit. Con auto-fit las pistas vacias se colapsan y la
   ultima fila se ensancha para llenar el hueco, asi que una fila no cuadra
   con la de arriba. Con auto-fill las columnas se mantienen. */
.rejilla { display:grid; gap:12px 14px; grid-template-columns:repeat(auto-fill, minmax(168px, 1fr)); }
.rejilla.ancha { grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); }

/* ---------- controles -------------------------------------------------- */
.campo { display:flex; flex-direction:column; gap:5px; min-width:0; }
/* Un input trae ancho intrinseco propio (size por defecto). Sin esto no
   se encoge y revienta su columna en cuanto la pantalla es estrecha. */
.campo > input, .campo > select, .campo > textarea,
.campo .fila > input, .campo .fila > select { min-width:0; }
/* La etiqueta reserva SIEMPRE dos lineas. Sin esto, un rotulo que envuelve
   ("Capa (mm, espesor radial)") empuja su campo por debajo del de al lado y
   la fila queda desnivelada. Se ve sobre todo a 390 px. */
.campo > label { font:600 10px/1.35 var(--sans); letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted);
  min-height:2.9em; display:flex; align-items:flex-end; }
/* En una fila de un solo campo no hace falta reservar el hueco */
.campo.suelto > label { min-height:0; }
input, select, textarea {
  min-height:var(--tap); padding:0 12px; border-radius:var(--r-sm);
  background:var(--sunk); border:1px solid var(--rule); font-family:var(--mono);
  transition:.14s;
}
input::placeholder { color:color-mix(in srgb, var(--muted) 70%, transparent); }
input:hover, select:hover, textarea:hover { border-color:var(--rule-2); }
textarea { padding:11px; min-height:100px; font-family:var(--sans); resize:vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
  outline:2px solid var(--amber); outline-offset:2px; border-color:var(--amber);
}
input[type=checkbox] { min-height:0; width:22px; height:22px; accent-color:var(--amber); }
/* Botonera de tarjeta. En flex, tres botones que no caben dejan el
   tercero suelto a media anchura; en rejilla el que sobra ocupa la fila
   entera y la tarjeta queda recta pase lo que pase. */
.botonera { display:grid; grid-template-columns:repeat(auto-fit, minmax(92px, 1fr)); gap:6px; }
.botonera > .b { width:100%; }

input[type=color] { min-height:var(--tap); height:var(--tap); padding:3px; cursor:pointer; }

.b {
  min-height:var(--tap); padding:0 18px; cursor:pointer; border-radius:var(--r-sm);
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  border:1px solid var(--rule-2); color:var(--ink);
  font-weight:650; letter-spacing:.01em; transition:.13s;
  box-shadow:0 1px 0 rgb(255 255 255 / .05) inset;
}
.b:hover { border-color:var(--amber); color:var(--amber-2); }
.b:active { transform:translateY(1px); }
.b[disabled] { opacity:.35; cursor:not-allowed; transform:none; }
.b.pri {
  background:linear-gradient(180deg, var(--amber-2), var(--amber));
  border-color:var(--amber); color:#241A05;
  box-shadow:0 3px 12px color-mix(in srgb, var(--amber) 32%, transparent);
}
.b.pri:hover { color:#241A05; filter:brightness(1.07); }
.b.peligro { color:var(--alert-2); border-color:color-mix(in srgb, var(--alert) 55%, transparent); }
.b.peligro:hover { color:#fff; background:var(--alert); border-color:var(--alert); }
.b.sm { min-height:36px; padding:0 12px; font-size:13px; }
/* Un boton pequeno al lado de un campo alto descuadra la fila. Cuando
   conviven, el boton toma la altura del campo. */
.fila:has(> input, > select, > textarea) > .b.sm,
.fila:has(> input, > select, > textarea) > .b { min-height:var(--tap); }
.campo .fila > .b.sm { min-height:var(--tap); }

/* Bloque de cifra: etiqueta arriba, numero grande debajo. Existe para que
   los paneles de datos no se maqueten cada uno a su manera, que era lo que
   descuadraba las rejillas de cifras. */
.dato { display:flex; flex-direction:column; gap:3px; min-width:0; }
.dato > label, .dato > .et { font:600 10px/1.35 var(--sans); letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); min-height:2.9em;
  display:flex; align-items:flex-end; }
.dato > .v { font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:21px; font-weight:700; line-height:1.15; }
.dato > .v small { font:400 13px/1 var(--sans); color:var(--muted); margin-left:2px; }

/* ---------- semantica de estado ---------------------------------------- */
.ok{color:var(--ok-2)} .aviso{color:var(--amber-2)} .mal{color:var(--alert-2)} .muted{color:var(--muted)}
.estimado::after { content:" ~"; color:var(--amber); font-family:var(--mono); }

.marca { border-left:3px solid var(--rule); padding-left:11px; border-radius:2px; }
.marca.ok{border-left-color:var(--ok)} .marca.aviso{border-left-color:var(--amber)}
.marca.mal{border-left-color:var(--alert)}

/* ---------- tablas ----------------------------------------------------- */
table { width:100%; border-collapse:collapse; font-family:var(--mono); font-size:13px; }
th { text-align:left; font:700 10px/1 var(--sans); letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); padding:8px 10px;
  border-bottom:1px solid var(--rule-2); white-space:nowrap; }
td { padding:9px 10px; border-bottom:1px solid color-mix(in srgb, var(--rule) 55%, transparent); }
tbody tr:hover td { background:color-mix(in srgb, var(--amber) 5%, transparent); }
.tabla-scroll { overflow-x:auto; border-radius:var(--r-sm); }

/* ---------- avisos ----------------------------------------------------- */
.nota { border-radius:var(--r-sm); padding:10px 13px; font-size:13.5px;
  border:1px solid var(--rule); background:var(--sunk); }
.nota.aviso { border-color:color-mix(in srgb, var(--amber) 50%, transparent);
  color:var(--amber-2); background:color-mix(in srgb, var(--amber) 9%, var(--sunk)); }
.nota.mal { border-color:color-mix(in srgb, var(--alert) 50%, transparent);
  color:var(--alert-2); background:color-mix(in srgb, var(--alert) 9%, var(--sunk)); }

/* Errores: siempre visibles, nunca solo en consola. Regla 5. */
#errores { position:fixed; left:10px; right:10px; z-index:60;
  bottom:calc(10px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:8px; }
#errores .err { background:linear-gradient(180deg, #331914, #2A1512);
  border:1px solid var(--alert); border-radius:var(--r); padding:12px 14px;
  font-size:13.5px; box-shadow:var(--sombra-alta); }
#errores .err pre { margin:8px 0 0; font-size:11px; color:var(--muted);
  white-space:pre-wrap; max-height:8em; overflow:auto; }

.toast { position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); transform:translate(-50%, 20px);
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  border:1px solid var(--rule-2); border-radius:99px; padding:13px 22px;
  opacity:0; pointer-events:none; transition:.2s; z-index:70;
  box-shadow:var(--sombra-alta); font-weight:600; }
.toast.on { opacity:1; transform:translate(-50%, 0); }

/* ---------- hoja modal ------------------------------------------------- */
.velo { position:fixed; inset:0; background:rgb(0 0 0 / .62);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; transition:.18s; z-index:50; }
.velo.on { opacity:1; pointer-events:auto; }
.hoja {
  position:fixed; left:0; right:0; bottom:0; max-height:88%; overflow:auto; z-index:51;
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  border-top:1px solid var(--rule-2); border-radius:16px 16px 0 0;
  padding:18px 18px calc(18px + env(safe-area-inset-bottom));
  transform:translateY(100%); transition:transform .24s, visibility .24s;
  box-shadow:var(--sombra-alta);
  /* sin visibility se queda renderizada y visible en pantallas anchas,
     donde el transform del media query la deja dentro del viewport */
  visibility:hidden;
}
.hoja.on { transform:none; visibility:visible; }
.hoja h2 { margin-top:0; }
@media (min-width:760px) {
  .hoja { left:50%; right:auto; bottom:auto; top:50%; width:min(720px, 92vw);
    transform:translate(-50%,-42%); border-radius:var(--r); border:1px solid var(--rule-2); }
  .hoja.on { transform:translate(-50%,-50%); }
}

/* ---------- banda de llenado ------------------------------------------- */
.llenado { height:10px; background:var(--sunk); border:1px solid var(--rule);
  border-radius:99px; overflow:hidden; }
.llenado > i { display:block; height:100%; background:var(--cyan); }
.llenado[data-tramo="bueno"] > i { background:linear-gradient(90deg, var(--ok), var(--ok-2)); }
.llenado[data-tramo="aviso"] > i { background:linear-gradient(90deg, var(--amber), var(--amber-2)); }
.llenado[data-tramo="bajo"] > i, .llenado[data-tramo="fuera"] > i {
  background:linear-gradient(90deg, var(--alert), var(--alert-2)); }

/* =====================================================================
   Tablero
   ===================================================================== */
.linea { display:flex; align-items:stretch; overflow-x:auto; padding:6px 0 12px; }
.linea::-webkit-scrollbar { height:8px; }
.linea::-webkit-scrollbar-thumb { background:var(--rule); border-radius:99px; }

.estacion {
  flex:1 0 140px; display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:12px 8px; border-radius:var(--r); border:1px solid transparent;
  position:relative; transition:.15s;
}
.estacion.destino { border-color:color-mix(in srgb, var(--amber) 55%, transparent);
  background:linear-gradient(180deg, color-mix(in srgb, var(--amber) 10%, transparent), transparent); }
.estacion > .rot { font:700 10px/1 var(--sans); letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.estacion.destino > .rot { color:var(--amber-2); }

.flecha { flex:0 0 26px; align-self:center; color:var(--rule-2); font-size:22px;
  line-height:1; user-select:none; }

/* En iOS, mantener pulsado abre el menu contextual y la lupa de
   seleccion, que se comen el gesto de arrastrar. Hay que desactivarlos
   en todo lo arrastrable. */
.rollo, .barrita, .cola-item, [data-arrastrable] {
  -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
}
.rollo { background:none; border:0; padding:0; cursor:pointer; display:block;
  position:relative; border-radius:50%; transition:transform .14s; }
.rollo:hover { transform:scale(1.04); }
.rollo svg { display:block; filter:drop-shadow(0 4px 12px rgb(0 0 0 / .45)); }
.rollo .etq { font:600 11.5px/1.35 var(--sans); color:var(--muted);
  text-align:center; margin-top:6px; max-width:130px; }
.hueco { width:104px; height:104px; border-radius:50%;
  border:2px dashed var(--rule-2); display:grid; place-items:center;
  color:var(--rule-2); font-size:30px; background:rgb(255 255 255 / .012); }

.mas {
  width:38px; height:38px; border-radius:50%; cursor:pointer;
  background:var(--panel-2); border:1px dashed var(--rule-2); color:var(--muted);
  font-size:20px; line-height:1; display:grid; place-items:center; transition:.14s;
}
.mas:hover { border-color:var(--amber); color:var(--amber); border-style:solid; }

.tira { display:flex; gap:8px; flex-wrap:wrap; }
.barrita { display:flex; align-items:center; gap:8px; padding:8px 14px; min-height:44px;
  background:var(--sunk); border:1px solid var(--rule); border-radius:99px;
  cursor:pointer; position:relative; transition:.14s; }
.barrita:hover { border-color:var(--rule-2); background:var(--panel-2); }
.barrita i { width:15px; height:15px; border-radius:50%; display:block;
  box-shadow:0 0 0 2px rgb(0 0 0 / .35); }
.barrita span { font-family:var(--mono); font-weight:700; }

/* ---------- arrastrar manteniendo pulsado ------------------------------ */
.aro-mantener {
  position:absolute; inset:-5px; border-radius:inherit; pointer-events:none;
  border:3px solid transparent; border-top-color:var(--amber);
  animation:girar var(--ms, 2000ms) linear forwards;
}
@keyframes girar { from { transform:rotate(0); opacity:.35 } to { transform:rotate(720deg); opacity:1 } }

body.arrastrando { cursor:grabbing; user-select:none; }
body.arrastrando .rollo:hover { transform:none; }
.cogido { opacity:.32; }
.fantasma {
  position:fixed; z-index:80; pointer-events:none; opacity:.95;
  transform:translate(-50%,-50%) scale(1.06);
  filter:drop-shadow(0 12px 26px rgb(0 0 0 / .6));
}
[data-destino].destino-activo {
  outline:2px dashed color-mix(in srgb, var(--cyan) 55%, transparent); outline-offset:-4px;
  border-radius:var(--r);
}
[data-destino].destino-encima {
  outline:3px solid var(--cyan); outline-offset:-4px;
  background:color-mix(in srgb, var(--cyan) 14%, transparent);
}

/* =====================================================================
   CORE LINK
   ===================================================================== */
.huecos { display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); }
.hueco-cl {
  border:1px solid var(--rule); border-radius:var(--r); padding:13px;
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  display:flex; flex-direction:column; gap:8px; min-height:138px; position:relative;
  transition:.15s;
}
.hueco-cl.vacio { border-style:dashed; background:none; }
.hueco-cl.programada { border-color:color-mix(in srgb, var(--cyan) 55%, transparent);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--cyan) 25%, transparent) inset; }
.hueco-cl.completada { opacity:.5; }
.hueco-cl .n { position:absolute; top:11px; right:13px;
  font:700 12px/1 var(--mono); color:var(--muted); }
.hueco-cl .medidas {
  /* Se encoge lo justo para que la unidad no caiga sola a la linea de
     abajo, que era lo que pasaba con cuatro cortes. */
  font:700 clamp(13.5px, 1.25vw, 17px)/1.35 var(--mono);
  overflow-wrap:anywhere;
}
.hueco-cl .mm { font:12px/1.35 var(--mono); color:var(--muted); }

/* Lista de patrones del programa: en rejilla y con altura acotada.
   Con 18 patrones a una columna, los diez huecos (que son el espejo de la
   maquina, o sea el estado) quedaban fuera de pantalla debajo de la
   referencia. El estado manda sobre la referencia. */
.patrones { display:grid; gap:8px; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  max-height:340px; overflow:auto; padding-right:4px; }
.patrones::-webkit-scrollbar { width:8px; }
.patrones::-webkit-scrollbar-thumb { background:var(--rule); border-radius:99px; }

/* =====================================================================
   Lenguaje del HMI de la bobinadora.

   Estructura copiada de la maquina: cortes proporcionales sobre el ancho
   util, merma rayada, suma junto al ancho util. La paleta es la nuestra:
   el lavanda del HMI sobre fondo oscuro no se lee, y aqui manda que se
   lea a dos metros.
   ===================================================================== */
.hmi-fila { display:flex; align-items:stretch; gap:10px; }

.hmi-barra {
  flex:1; display:flex; border:1px solid var(--rule-2); border-radius:3px;
  overflow:hidden; background:var(--sunk); min-width:0;
}
.hmi-corte {
  display:grid; place-items:center; min-width:0; position:relative;
  background:linear-gradient(180deg, #C98268, #A96248);
  border-right:1px solid rgb(0 0 0 / .45); color:#1A0E09;
  font:700 12.5px/1 var(--mono); overflow:hidden;
}
.hmi-corte:last-child { border-right:0; }
.hmi-corte span { padding:0 2px; white-space:nowrap; }
/* Cuando el corte es tan estrecho que la cifra no cabe, se oculta en vez
   de desbordarse encima del vecino. */
@container (max-width: 0px) { .hmi-corte span { display:none } }

.hmi-merma {
  background-image:repeating-linear-gradient(45deg,
    transparent 0 4px, color-mix(in srgb, var(--muted) 35%, transparent) 4px 8px);
  border-left:1px solid var(--rule-2);
}

.hmi-suma {
  flex:0 0 auto; display:flex; flex-direction:column; justify-content:space-between;
  align-items:flex-end; font-size:12px; line-height:1.1; padding:1px 0;
}
.hmi-suma b { font-size:14px; }

.hmi-cab { display:flex; gap:10px; align-items:center; flex:0 0 auto; }
.hmi-num {
  min-width:46px; height:46px; display:grid; place-items:center;
  border:1px solid var(--rule-2); border-radius:var(--r-sm);
  background:var(--sunk); font:700 17px/1 var(--mono); color:var(--cyan-2);
}
.hmi-meta { font:11.5px/1.5 var(--mono); color:var(--ink-2); }

.hmi-cilindros { display:flex; align-items:center; overflow-x:auto; padding:2px 0; }
.hmi-cil {
  flex:0 0 auto; height:52px; display:grid; place-items:center; padding:0 10px;
  background:linear-gradient(180deg, #C98268, #A96248);
  border:1px solid rgb(0 0 0 / .5); border-radius:3px; color:#1A0E09;
}
.hmi-cil span { font:700 15px/1 var(--mono); }
.hmi-cil em { font:10px/1 var(--sans); font-style:normal; opacity:.7; }
.hmi-mandril {
  flex:0 0 9px; height:44px;
  background-image:repeating-linear-gradient(45deg,
    var(--rule-2) 0 2px, var(--sunk) 2px 5px);
  border:1px solid var(--rule-2); border-radius:2px;
}

/* =====================================================================
   Rollo madre dibujado y el raíl de la línea
   ===================================================================== */
.rollo-svg { display:block; filter:drop-shadow(0 6px 14px rgb(0 0 0 / .5)); }

.rail { position:relative; display:flex; align-items:flex-end; gap:0;
  overflow-x:auto; padding:8px 0 4px; }
.rail::-webkit-scrollbar { height:8px; }
.rail::-webkit-scrollbar-thumb { background:var(--rule); border-radius:99px; }
/* La guia fisica sobre la que van los rollos. El desplazamiento tiene
   que cuadrar con la altura del pie (--pie): una barra con rollo tiene
   tres lineas de rotulo y una vacia solo una, asi que con un valor fijo
   el carril acababa cruzando el texto de unas u otras. */
.rail { --pie:68px; }
.rail::before { content:""; position:absolute; left:0; right:0; bottom:var(--pie); height:6px;
  background:repeating-linear-gradient(90deg, var(--rule-2) 0 8px, var(--sunk) 8px 14px);
  border-top:1px solid var(--rule-2); border-bottom:1px solid #0a0b08; border-radius:2px; }

.esta { position:relative; flex:1 0 154px; display:flex; flex-direction:column;
  align-items:center; gap:4px; padding:6px 4px 10px; border-radius:var(--r);
  border:1px solid transparent; transition:.15s; }
.esta.principal { border-color:color-mix(in srgb, var(--ok) 45%, transparent);
  background:linear-gradient(180deg, color-mix(in srgb, var(--ok) 9%, transparent), transparent); }
.esta > .rot { font:700 10px/1 var(--sans); letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); }
.esta.principal > .rot { color:var(--ok-2); }
.esta .pie { text-align:center; font:12px/1.4 var(--sans); color:var(--muted);
  min-height:52px; }
.esta .pie b { display:block; font:700 13px/1.3 var(--mono); }

.rail .sentido { flex:0 0 30px; align-self:center; margin-bottom:var(--pie);
  color:var(--rule-2); font-size:20px; text-align:center; user-select:none; }

/* progreso del rollo entre el nucleo y su diametro de partida */
.progreso-rollo { margin-top:8px; }
.pr-barra { height:12px; background:var(--sunk); border:1px solid var(--rule);
  border-radius:99px; overflow:hidden; }
.pr-barra > i { display:block; height:100%;
  background:linear-gradient(90deg, var(--ok), var(--ok-2)); }
.pr-extremos { display:flex; justify-content:space-between; margin-top:4px;
  font-size:11px; color:var(--muted); }

/* En movil los diez huecos van a una columna: dejarlos a 138 px son mil
   cuatrocientos pixeles de scroll para no ver nada. El hueco libre se
   resume en una linea; que esta vacio ya lo dice el borde punteado. */
@media (max-width:560px) {
  .hueco-cl.vacio { min-height:0; flex-direction:row; justify-content:flex-start !important;
    gap:10px; padding:14px 13px; }
  .hueco-cl.vacio .vac-et { display:none; }
}

/* Cuatro columnas no caben en un movil. En vez de esconder el diametro
   exacto o mandar la tabla a scroll lateral, se pliega dentro de la celda
   del diametro: sigue estando, y no hay que arrastrar nada. */
.exacto-plegado { display:none; font:400 11px/1.3 var(--mono); margin-top:2px; white-space:nowrap; }
@media (max-width:620px) {
  .col-exacto { display:none; }
  .exacto-plegado { display:block; }
}

/* bobinitas que salen, proporcionales al ancho */
.salen { display:flex; align-items:flex-end; gap:6px; }
.salen .bob { display:flex; flex-direction:column; align-items:center; gap:5px; min-width:0; }
.salen .bob > b { font:700 14px/1 var(--mono); }
.salen .cil { width:100%; height:44px; border-radius:5px;
  background:linear-gradient(180deg, #57B3C6, #2E7E90);
  border:1px solid rgb(0 0 0 / .45);
  box-shadow:inset -6px 0 10px rgb(0 0 0 / .25), inset 6px 0 8px rgb(255 255 255 / .12); }
/* Reparto proporcional con `flex:X 1 0`, no con `flex:0 0 X%`: los
   porcentajes suman 100 e ignoran los gap, asi que la fila se salia
   siempre por (n-1)x6 px. Con base 0 el reparto se hace sobre el hueco
   que queda DESPUES de los gap, que es la proporcion de verdad. */
.salen .merma { display:flex; flex-direction:column; align-items:center; gap:5px; min-width:0; }
/* Con la merma en el 4 % del ancho su rotulo no cabe en un movil. No se
   pierde nada: la cifra va tambien en la linea de texto de encima. */
@media (max-width:560px) { .salen .merma > b { display:none; } }
.salen .merma > b { font:700 12px/1 var(--mono); color:var(--muted); }
.salen .merma .cil { background:none; border:1px dashed var(--rule-2); box-shadow:none; }

.bob-rejilla { display:grid; gap:20px; grid-template-columns:minmax(280px,1fr) minmax(280px,1.15fr); }
@media (max-width:900px) { .bob-rejilla { grid-template-columns:minmax(0,1fr); } }
.bob-controles { display:grid; gap:12px; margin-top:16px; padding-top:14px;
  border-top:1px dashed var(--rule); grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
@media (max-width:560px) { .bob-controles { grid-template-columns:minmax(0,1fr); } }