/* =====================================================================
   ALZE Alimento — hoja de estilo.

   Está pensada para una tablet a pie de máquina: botones grandes, números
   enormes y colores que se entienden de lejos y sin leer. El modo "cómodo"
   (configurable) agranda todo un 15%; el "normal" sirve para la oficina.

   El color de acento no está aquí: lo inyecta la plantilla desde la
   configuración, para que ALZE pueda cambiarlo sin tocar este archivo.
   ===================================================================== */

:root{
  --bg:#F2F5F4; --sup:#fff; --sup2:#E9EFED; --sup3:#DCE5E2;
  --ink:#12211D; --soft:#4E605B; --faint:#7E908B;
  --rule:#D3DEDA; --rule2:#E6ECEA;
  --ac:#0E7C66; --ac2:#DFF0EB;
  --ok:#177A52; --ok2:#DDF0E7;
  --wa:#8A6300; --wa2:#FBEFD2;
  --er:#A32B25; --er2:#FBE4E2;
  --sh:0 1px 2px rgba(18,33,29,.06), 0 10px 28px -18px rgba(18,33,29,.3);
  --sans:"Segoe UI",-apple-system,system-ui,Roboto,Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  --r:10px; --esc:1;
  /* ⛔ SIN ESTO LAS CASILLAS SALEN BLANCAS EN MODO OSCURO.
     Victor lo vio y lo escribio asi: *«acá el fondo blanco no es bueno, se
     ve feo y se pierde»*. No era el fondo de la pantalla: eran los
     `checkbox` —«Liberar», «No sale de silo»— que el navegador dibuja con
     SU tema, no con el nuestro, salvo que se le diga cual es.

     `accent-color` ya estaba puesto, pero ese solo pinta la palomita: la
     caja vacia seguia siendo blanca. Lo que faltaba es declarar el esquema. */
  color-scheme: light;
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    color-scheme: dark;
    --bg:#0D1412; --sup:#151F1C; --sup2:#1C2A26; --sup3:#243430;
    --ink:#E6EDEB; --soft:#A0B2AC; --faint:#71847E;
    --rule:#2A3A35; --rule2:#213029;
    --ac:#3FCFA8; --ac2:#12332B;
    --ok:#5FCB9B; --ok2:#12312516;
    --ok2:#123125; --wa:#DDB755; --wa2:#332A10; --er:#F0837B; --er2:#3A1B19;
    --sh:0 1px 2px rgba(0,0,0,.45), 0 10px 28px -18px rgba(0,0,0,.8);
  }
}
/* Cuánto agranda el modo cómodo sale de ui.escala_comodo, inyectado en el
   <html> como --esc-comodo. El 1.15 es el respaldo. */
body.comodo{--esc:var(--esc-comodo,1.15); --r:12px}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:calc(15px*var(--esc)); line-height:1.5;
  -webkit-text-size-adjust:100%;
}
a{color:var(--ac)}
h1{font-size:calc(25px*var(--esc));margin:0 0 4px;letter-spacing:-.02em}
h2{font-size:calc(18px*var(--esc));margin:26px 0 12px;letter-spacing:-.01em}
h3{font-size:calc(15px*var(--esc));margin:18px 0 8px}
.sub{color:var(--soft);margin:0 0 20px;font-size:calc(14.5px*var(--esc));max-width:75ch}
.tenue{color:var(--faint)}
.mini{font-size:calc(12.5px*var(--esc))}

/* ------------------------------------------------------------- barra */
/* ⛔ UN SOLO PEGADO PARA LAS TRES FRANJAS.
   Antes la franja de «viendo como», la barra y la cinta eran cada una
   `position:sticky; top:0`, asi que al desplazar las tres se quedaban en la
   MISMA linea y se tapaban entre si por z-index: la guia, con el z-index mas
   bajo, quedaba debajo y se veia cortada.

   Agruparlas resuelve el apilado sin calcular alturas — que cambian con el
   modo comodo y con el zoom del navegador, asi que cualquier `top: 56px`
   escrito a mano estaria mal la mitad de las veces. */
.pegado-arriba{position:sticky;top:0;z-index:20;
  background:var(--sup);
  /* La sombra sale sola cuando hay algo desplazado debajo, no siempre: una
     sombra permanente en una franja que ya tiene borde es ruido. */
  box-shadow:0 1px 0 var(--rule)}
.barra{background:var(--sup);border-bottom:1px solid var(--rule)}
.barra .caja{max-width:1240px;margin:0 auto;padding:0 16px;display:flex;align-items:center;
  gap:8px;min-height:calc(56px*var(--esc))}
.marca{font-weight:700;letter-spacing:-.02em;text-decoration:none;color:var(--ink);
  font-size:calc(17px*var(--esc));white-space:nowrap}
.marca span{color:var(--ac)}
.barra nav{display:flex;gap:2px;flex:1;overflow-x:auto;scrollbar-width:none}
.barra nav::-webkit-scrollbar{display:none}
.barra nav a{padding:calc(8px*var(--esc)) calc(12px*var(--esc));border-radius:8px;
  text-decoration:none;color:var(--soft);font-size:calc(14px*var(--esc));white-space:nowrap;
  display:flex;align-items:center;gap:6px}
.barra nav a:hover{background:var(--sup2);color:var(--ink)}
/* ⛔ «MÁS» NO SE DESPLAZA NI SE ENCOGE. `flex:none` es lo que impide que el
   navegador lo comprima cuando falta sitio, y `margin-left:auto` lo ancla a
   la derecha. Sin esto volvería a irse de la vista en cuanto el menú crezca,
   y con él las catorce secciones que cuelgan de ahí. */
.barra > .caja > .mas-menu{flex:none;margin-left:auto;position:relative}
/* Y se ve que es una puerta, no un adorno: contorno propio y área tocable
   del tamaño mínimo, que se usa también desde tablet. */
.barra > .caja > .mas-menu > summary{
  padding:calc(8px*var(--esc)) calc(12px*var(--esc));
  border-radius:8px;cursor:pointer;white-space:nowrap;
  box-shadow:inset 0 0 0 1px var(--rule)}
.barra > .caja > .mas-menu > summary:hover{background:var(--sup2)}
.barra nav a.on{background:var(--ac2);color:var(--ac);font-weight:650}
.yo{display:flex;align-items:center;gap:10px;font-size:calc(13px*var(--esc));color:var(--faint);
  white-space:nowrap}
.yo b{color:var(--ink);font-weight:650}
.contenido{max-width:1240px;margin:0 auto;padding:calc(24px*var(--esc)) 16px 80px}

/* ------------------------------------------------------------- tarjetas */
.tarjeta{background:var(--sup);border:1px solid var(--rule);border-radius:var(--r);
  box-shadow:var(--sh);padding:calc(18px*var(--esc)) calc(20px*var(--esc));margin-bottom:16px}
.tarjeta h2:first-child,.tarjeta h3:first-child{margin-top:0}
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:20px}
.dato{background:var(--sup);border:1px solid var(--rule);border-top:4px solid var(--ac);
  border-radius:var(--r);padding:calc(15px*var(--esc)) calc(17px*var(--esc))}
.dato .n{font-size:calc(30px*var(--esc));font-weight:700;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1.1}
.dato .t{font-size:calc(11.5px*var(--esc));text-transform:uppercase;letter-spacing:.08em;
  color:var(--faint);font-weight:700;margin-top:4px}
.dato .u{font-size:calc(15px*var(--esc));color:var(--soft);font-weight:600}
.dato.ok{border-top-color:var(--ok)} .dato.wa{border-top-color:var(--wa)}
.dato.er{border-top-color:var(--er)} .dato.gr{border-top-color:var(--rule)}

/* ------------------------------------------------------------- botonera grande */
.cuadros{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.cuadro{display:block;background:var(--sup);border:1px solid var(--rule);border-radius:var(--r);
  box-shadow:var(--sh);padding:calc(18px*var(--esc));text-decoration:none;color:var(--ink);
  border-left:5px solid var(--ac);transition:transform .08s ease, box-shadow .08s ease}
.cuadro:hover{transform:translateY(-2px);box-shadow:0 6px 22px -10px rgba(18,33,29,.35)}
.cuadro .tit{font-size:calc(18px*var(--esc));font-weight:700;letter-spacing:-.01em;margin-bottom:4px}
.cuadro .lin{color:var(--soft);font-size:calc(13.5px*var(--esc))}
.cuadro.ok{border-left-color:var(--ok)} .cuadro.wa{border-left-color:var(--wa)}
.cuadro.er{border-left-color:var(--er)} .cuadro.gr{border-left-color:var(--rule)}

/* ------------------------------------------------------------- tablas */
.tabla{background:var(--sup);border:1px solid var(--rule);border-radius:var(--r);
  overflow-x:auto;box-shadow:var(--sh);margin-bottom:18px}
table{width:100%;border-collapse:collapse;font-size:calc(14px*var(--esc))}
th{text-align:left;font-size:calc(11px*var(--esc));text-transform:uppercase;letter-spacing:.08em;
  color:var(--faint);padding:calc(10px*var(--esc)) calc(12px*var(--esc));
  border-bottom:1px solid var(--rule);background:var(--sup2);white-space:nowrap}
td{padding:calc(10px*var(--esc)) calc(12px*var(--esc));border-bottom:1px solid var(--rule2);
  vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--sup2)}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
tfoot td{font-weight:700;background:var(--sup2);border-top:2px solid var(--rule)}

/* ------------------------------------------------------------- formularios */
input,select,textarea{font-family:inherit;font-size:calc(15px*var(--esc));
  padding:calc(9px*var(--esc)) calc(11px*var(--esc));border:1px solid var(--rule);
  border-radius:8px;background:var(--sup);color:var(--ink);width:100%}
input:focus,select:focus,textarea:focus{outline:3px solid var(--ac);outline-offset:-1px;
  border-color:transparent}
input:disabled,select:disabled{background:var(--sup2);color:var(--faint)}
input[type=checkbox]{width:calc(22px*var(--esc));height:calc(22px*var(--esc));accent-color:var(--ac)}
label{display:block;font-size:calc(11.5px*var(--esc));text-transform:uppercase;letter-spacing:.06em;
  color:var(--faint);font-weight:700;margin-bottom:5px}
.campo{margin-bottom:14px}
.ayuda{font-size:calc(12.5px*var(--esc));color:var(--faint);margin-top:4px;line-height:1.45}
.fila2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fila3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.fila4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
fieldset{border:1px solid var(--rule);border-radius:var(--r);padding:14px 16px;margin:0 0 16px}
legend{font-size:calc(12px*var(--esc));text-transform:uppercase;letter-spacing:.08em;
  color:var(--ac);font-weight:700;padding:0 6px}

/* número grande para capturar pesos con guantes.
   El tamaño base sale de ui.numero_grande_px y se inyecta en el <html>. El
   30px de aquí es sólo el respaldo para cuando la variable no llegue —la
   pantalla de entrar antes de tener sesión, por ejemplo—. */
.peso{font-size:calc(var(--grande,30px)*var(--esc));font-weight:700;text-align:right;
  font-variant-numeric:tabular-nums;padding:calc(12px*var(--esc));letter-spacing:-.02em}
.peso.chico{font-size:calc(19px*var(--esc));padding:calc(8px*var(--esc))}

button,.boton{font-family:inherit;font-size:calc(15px*var(--esc));font-weight:650;
  padding:calc(10px*var(--esc)) calc(18px*var(--esc));border-radius:8px;
  border:1px solid var(--ac);background:var(--ac);color:#fff;cursor:pointer;
  text-decoration:none;display:inline-block;text-align:center;
  /* El blanco táctil sale de ui.blanco_tactil_px, con 44 de respaldo. Aquí
     decía 42px, y la regla escrita del proyecto pide 44 —el mínimo
     reforzado de WCAG 2.2— así que el respaldo son 44 y no los 42 de
     antes: son 2 px que la regla ya prometía. El código no acepta menos de
     24 px, sea lo que diga el parámetro. */
  min-height:calc(var(--tactil,44px)*var(--esc))}
button:hover,.boton:hover{filter:brightness(1.09)}
button:active,.boton:active{transform:translateY(1px)}
.sec{background:transparent;color:var(--soft);border-color:var(--rule)}
.sec:hover{background:var(--sup2);color:var(--ink)}
.peligro{background:var(--er);border-color:var(--er)}
.chico{font-size:calc(13px*var(--esc));padding:calc(6px*var(--esc)) calc(11px*var(--esc));
  min-height:auto}
.grandote{font-size:calc(19px*var(--esc));padding:calc(16px*var(--esc)) calc(28px*var(--esc));
  width:100%;border-radius:var(--r)}
.botones{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}

/* ------------------------------------------------------------- avisos y etiquetas */
.aviso{padding:calc(13px*var(--esc)) calc(16px*var(--esc));border-radius:var(--r);
  margin-bottom:16px;font-size:calc(14.5px*var(--esc));border-left:4px solid;background:var(--sup2)}
.aviso.i{background:var(--ac2);border-color:var(--ac)}
.aviso.b{background:var(--ok2);border-color:var(--ok)}
.aviso.w{background:var(--wa2);border-color:var(--wa)}
.aviso.e{background:var(--er2);border-color:var(--er)}
.aviso ul{margin:6px 0 0;padding-left:20px}

.eti{display:inline-block;font-size:calc(11px*var(--esc));font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;padding:calc(3px*var(--esc)) calc(9px*var(--esc));border-radius:20px;
  white-space:nowrap}
.eti.gr{background:var(--sup3);color:var(--soft)}
.eti.ok{background:var(--ok2);color:var(--ok)}
.eti.wa{background:var(--wa2);color:var(--wa)}
.eti.er{background:var(--er2);color:var(--er)}
.eti.ac{background:var(--ac2);color:var(--ac)}

/* ------------------------------------------------------------- barras y gráficas */
.barrita{height:calc(10px*var(--esc));background:var(--sup3);border-radius:20px;overflow:hidden}
.barrita i{display:block;height:100%;background:var(--ac);border-radius:20px}
.barrita.ok i{background:var(--ok)} .barrita.wa i{background:var(--wa)} .barrita.er i{background:var(--er)}
.avance{display:flex;align-items:center;gap:10px}
.avance .barrita{flex:1;min-width:70px}

.columnas{display:flex;align-items:flex-end;gap:calc(6px*var(--esc));height:calc(150px*var(--esc));
  padding:10px 0 0}
.columnas .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;gap:5px;min-width:22px}
.columnas .col i{display:block;width:100%;background:var(--ac);border-radius:4px 4px 0 0;
  min-height:3px;opacity:.9}
.columnas .col:hover i{opacity:1}
.columnas .col b{font-size:calc(10.5px*var(--esc));color:var(--faint);font-weight:600;
  writing-mode:horizontal-tb;white-space:nowrap}

/* ------------------------------------------------------------- pantalla de entrada */
.entrar{min-height:100vh;display:grid;place-items:center;padding:20px;
  background:linear-gradient(160deg,var(--bg) 0%,var(--sup2) 100%)}
.entrar .caja{background:var(--sup);border:1px solid var(--rule);border-radius:16px;
  box-shadow:0 20px 60px -30px rgba(18,33,29,.5);padding:36px 32px;width:100%;max-width:410px}
.entrar h1{font-size:calc(23px*var(--esc));margin-bottom:2px}
.entrar .logo{font-size:calc(44px*var(--esc));line-height:1;margin-bottom:12px}

/* ------------------------------------------------------------- varios */
code,.mono{font-family:var(--mono);font-size:.9em;background:var(--sup2);padding:2px 6px;
  border-radius:4px}
.grupo{margin:24px 0 12px;padding-bottom:7px;border-bottom:2px solid var(--rule);
  font-size:calc(12px*var(--esc));text-transform:uppercase;letter-spacing:.1em;color:var(--ac);
  font-weight:800}
.pie{margin-top:44px;padding-top:16px;border-top:1px solid var(--rule);
  font-size:calc(12.5px*var(--esc));color:var(--faint)}
details{margin-bottom:10px;background:var(--sup);border:1px solid var(--rule);
  border-radius:var(--r);padding:0}
details[open]{box-shadow:var(--sh)}
summary{cursor:pointer;font-weight:650;padding:calc(12px*var(--esc)) calc(16px*var(--esc));
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px}
summary::-webkit-details-marker{display:none}
summary::after{content:"▾";color:var(--faint);font-size:14px}
details[open] summary::after{content:"▴"}
details .cuerpo{padding:0 calc(16px*var(--esc)) calc(16px*var(--esc))}
.filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:18px}
.filtros .campo{margin-bottom:0;min-width:150px}
.derecha{margin-left:auto}
.centro{text-align:center}
.vacio{text-align:center;padding:calc(40px*var(--esc)) 20px;color:var(--faint)}
.vacio .icono{font-size:calc(42px*var(--esc));display:block;margin-bottom:10px;opacity:.5}

/* =====================================================================
   MANUAL INTERACTIVO
   Trozos cortos, un paso a la vez y mucho aire. Quien apenas se está
   soltando con la tecnología no se pierde por falta de información sino
   por exceso: una pantalla apretada se lee como "esto no es para mí".
   ===================================================================== */

.progreso{display:flex;align-items:center;gap:14px;background:var(--sup);border:1px solid var(--rule);
  border-radius:var(--r);padding:16px 20px;margin-bottom:22px;box-shadow:var(--sh)}
.progreso .aro{--p:0;width:64px;height:64px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:conic-gradient(var(--ok) calc(var(--p)*1%),var(--sup3) 0)}
.progreso .aro b{width:50px;height:50px;border-radius:50%;background:var(--sup);display:grid;
  place-items:center;font-size:calc(15px*var(--esc));font-variant-numeric:tabular-nums}

.lecciones{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:12px;
  margin-bottom:8px}
.lec{display:flex;gap:14px;align-items:flex-start;background:var(--sup);border:1px solid var(--rule);
  border-left:5px solid var(--rule);border-radius:var(--r);padding:16px;text-decoration:none;
  color:var(--ink);box-shadow:var(--sh);transition:transform .08s ease}
.lec:hover{transform:translateY(-2px)}
.lec.hecha{border-left-color:var(--ok)}
.lec.abierta{border-left-color:var(--wa)}
.lec.nueva{border-left-color:var(--ac)}
.lec .ico{font-size:calc(26px*var(--esc));line-height:1;flex:none}
.lec .tit{font-weight:700;font-size:calc(15.5px*var(--esc));letter-spacing:-.01em;margin-bottom:2px}
.lec .des{color:var(--soft);font-size:calc(13px*var(--esc));line-height:1.4}
.lec .pie{margin-top:8px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.pasos{counter-reset:paso;list-style:none;padding:0;margin:0}
.pasos li{counter-increment:paso;position:relative;padding:0 0 20px 52px;
  border-left:2px solid var(--rule2);margin-left:16px}
.pasos li:last-child{border-left-color:transparent;padding-bottom:4px}
.pasos li::before{content:counter(paso);position:absolute;left:-17px;top:-2px;width:32px;height:32px;
  border-radius:50%;background:var(--ac);color:#fff;display:grid;place-items:center;
  font-weight:800;font-size:calc(14px*var(--esc))}
.pasos li b{display:block;font-size:calc(16px*var(--esc));letter-spacing:-.01em;margin-bottom:3px;
  padding-top:4px}
.pasos li span{color:var(--soft);font-size:calc(14px*var(--esc));line-height:1.5}

.objetivo{background:var(--ac2);border-radius:var(--r);padding:16px 20px;margin-bottom:20px;
  border-left:4px solid var(--ac)}
.objetivo b{display:block;font-size:calc(11.5px*var(--esc));text-transform:uppercase;
  letter-spacing:.08em;color:var(--ac);margin-bottom:4px}

.opciones{display:grid;gap:8px;margin:10px 0 0}
.opcion{display:flex;gap:12px;align-items:flex-start;padding:13px 16px;border:2px solid var(--rule);
  border-radius:var(--r);cursor:pointer;background:var(--sup);text-transform:none;letter-spacing:0;
  color:var(--ink);font-weight:400;font-size:calc(14.5px*var(--esc));margin:0}
.opcion:hover{border-color:var(--ac)}
.opcion input{width:auto;flex:none;margin-top:2px}
.opcion.bien{border-color:var(--ok);background:var(--ok2)}
.opcion.mal{border-color:var(--er);background:var(--er2)}
.retro{margin-top:10px;padding:12px 16px;border-radius:var(--r);font-size:calc(14px*var(--esc))}
.retro.bien{background:var(--ok2);color:var(--ok)}
.retro.mal{background:var(--wa2);color:var(--wa)}

.migas{display:flex;gap:8px;align-items:center;color:var(--faint);
  font-size:calc(12.5px*var(--esc));margin-bottom:10px;flex-wrap:wrap}
.migas a{color:var(--faint)}

/* ---------------------------------------------------------- ver como… */
.franja-vercomo{display:flex;align-items:center;gap:12px;
  flex-wrap:wrap;background:var(--wa);color:#fff;padding:9px 16px;
  font-size:calc(13.5px*var(--esc));line-height:1.4;
  box-shadow:0 2px 8px -2px rgba(0,0,0,.3)}
.franja-vercomo .ojo{font-size:calc(17px*var(--esc));flex:none}
.franja-vercomo b{font-weight:800}
.franja-vercomo button{background:#fff;color:var(--wa);border-color:#fff;font-weight:800;
  white-space:nowrap}
.franja-vercomo button:hover{filter:brightness(.94)}
/* Con la franja arriba, la barra del menú deja de ser la que se pega al borde. */
.franja-vercomo ~ .barra{top:auto;position:static}
/* --- segundo renglón: la guía del proceso y la ayuda ---
   La barra de arriba es para navegar; esta cinta es para orientarse. Tenerlas
   separadas es lo que evita que la ayuda le robe espacio al menú. */
.cinta{background:var(--sup2);border-bottom:1px solid var(--rule);
  }
.cinta .caja{max-width:1240px;margin:0 auto;padding:calc(7px*var(--esc)) 16px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pasos-guia{display:flex;align-items:center;gap:4px;margin:0;padding:0;list-style:none;
  flex:1;overflow-x:auto;scrollbar-width:none}
.pasos-guia::-webkit-scrollbar{display:none}
/* ⛔ SI HAY MAS CONTENIDO DEL QUE CABE, TIENE QUE NOTARSE.
   El scroll estaba oculto: se veia cortado y parecia roto, no desplazable.
   En una tablet, sin rueda de raton, el operario no tenia forma de saber que
   se podia arrastrar. El degradado del borde es la senial de uso: dice «hay
   mas hacia alla» sin ocupar sitio ni pedir nada.

   `mask-image` se degrada solo: donde no lo soporten, se ve como antes. */
.pasos-guia, .barra nav{
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
  scroll-behavior:smooth}
/* Y el dedo puede arrastrarlas: sin esto, en iOS el arrastre no engancha. */
.pasos-guia, .barra nav{-webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain}
.pasos-guia .paso{display:flex;align-items:center;gap:7px;padding:4px 11px 4px 5px;
  border-radius:20px;text-decoration:none;color:var(--faint);
  font-size:calc(12.5px*var(--esc));white-space:nowrap}
.pasos-guia .paso i{width:calc(19px*var(--esc));height:calc(19px*var(--esc));flex:none;
  border-radius:50%;background:var(--sup3);color:var(--faint);display:grid;place-items:center;
  font-style:normal;font-size:calc(11px*var(--esc));font-weight:800}
.pasos-guia .paso:hover{background:var(--sup)}
.pasos-guia .paso.hecho{color:var(--ok)}
.pasos-guia .paso.hecho i{background:var(--ok);color:#fff}
.pasos-guia .paso.actual{background:var(--ac);color:#fff;font-weight:700}
.pasos-guia .paso.actual i{background:#fff;color:var(--ac)}
/* «Aquí estoy» es una pregunta distinta de «qué toca»: se marca con un
   contorno, no con relleno, para que las dos se puedan ver a la vez. */
.pasos-guia .paso.aqui{box-shadow:inset 0 0 0 2px var(--ac);color:var(--ac)}
.pasos-guia .paso.aqui.actual{color:#fff}
.pasos-guia .paso em{font-style:normal;font-size:calc(10px*var(--esc));opacity:.85;
  text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.ayuda-cinta{display:inline-flex;align-items:center;gap:6px;padding:5px 13px;border-radius:20px;
  background:var(--ac2);color:var(--ac);text-decoration:none;font-weight:700;
  font-size:calc(12.5px*var(--esc));white-space:nowrap;margin-left:auto}
.ayuda-cinta:hover{filter:brightness(.96)}
/* Con dos renglones, sólo el de arriba se pega: dos cintas pegadas se comen
   media pantalla en una tablet. */
/* Ya no hace falta: el pegado lo hace el contenedor de arriba. Dejar esto
   volveria a crear el conflicto que se acaba de resolver. */
.franja-vercomo ~ .barra ~ .cinta{position:static}

/* --- el menú «Más» de la barra --- */
.mas-menu{position:relative;margin:0;padding:0;background:none;border:none;box-shadow:none}
.mas-menu>summary{list-style:none;cursor:pointer;padding:calc(8px*var(--esc)) calc(12px*var(--esc));
  border-radius:8px;color:var(--soft);font-size:calc(14px*var(--esc));font-weight:400;
  white-space:nowrap;display:block}
.mas-menu>summary::-webkit-details-marker{display:none}
.mas-menu>summary::after{content:none}
.mas-menu>summary:hover{background:var(--sup2);color:var(--ink)}
.mas-menu[open]>summary{background:var(--ac2);color:var(--ac);font-weight:650}
.mas-menu .panel{position:absolute;top:calc(100% + 8px);left:0;z-index:40;min-width:236px;
  background:var(--sup);border:1px solid var(--rule);border-radius:var(--r);
  box-shadow:0 14px 40px -14px rgba(0,0,0,.45);padding:0 0 6px;text-align:left}
.mas-menu .panel .apartado{padding:11px 15px 4px;font-size:calc(10.5px*var(--esc));
  text-transform:uppercase;letter-spacing:.09em;color:var(--faint);font-weight:800}
.mas-menu .panel .op{display:block;padding:calc(8px*var(--esc)) 15px;text-decoration:none;
  color:var(--ink);font-size:calc(14px*var(--esc))}
.mas-menu .panel .op:hover{background:var(--ac2);color:var(--ac)}
.mas-menu .panel .op.activa{background:var(--ac2);color:var(--ac);font-weight:700}
/* Aprender se queda en la barra y se marca: es lo que hay que hacer evidente. */
.barra nav a.aprender{color:var(--ac);font-weight:650}
.barra nav a.aprender.on{background:var(--ac);color:#fff}

/* --- el control de acciones: «qué falta» --- */
.que-falta{background:var(--ok2);border:1px solid var(--ok);border-left-width:5px;
  border-radius:var(--r);padding:14px 18px;margin-bottom:16px}
.que-falta.grave{background:var(--wa2);border-color:var(--wa)}
.que-falta .titulo{font-weight:800;font-size:calc(15px*var(--esc));color:var(--ok);
  margin-bottom:6px}
.que-falta.grave .titulo{color:var(--wa)}
.que-falta ul{margin:0;padding:0;list-style:none}
.que-falta li{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:5px 0;font-size:calc(14.5px*var(--esc));line-height:1.45}
.que-falta li+li{border-top:1px solid rgba(0,0,0,.06)}

/* --- la invitación al manual, en la pantalla de inicio --- */
.invita{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--sup);border:1px solid var(--ac);border-left-width:5px;
  border-radius:var(--r);padding:16px 20px;margin-bottom:20px;box-shadow:var(--sh)}
.invita .cara{font-size:calc(32px*var(--esc));line-height:1;flex:none}
.invita .tit{font-weight:700;font-size:calc(16.5px*var(--esc));letter-spacing:-.01em}
.invita .lin{color:var(--soft);font-size:calc(13.5px*var(--esc))}

/* --- el menú de la cuenta, colgado del nombre del usuario ---
   Va con <details> y no con JavaScript: abre y cierra sin depender de nada,
   funciona con teclado y sigue funcionando si un script falla. El panel va
   posicionado en absoluto para que al abrirse no empuje la barra. */
.yo-menu{position:relative;margin:0;padding:0;background:none;border:none;
  border-radius:0;box-shadow:none}
.yo-menu>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
  padding:calc(6px*var(--esc)) calc(10px*var(--esc));border-radius:20px;
  border:1px solid var(--rule);background:var(--sup);font-weight:400}
.yo-menu>summary::-webkit-details-marker{display:none}
.yo-menu>summary::after{content:none}
.yo-menu>summary:hover{background:var(--sup2)}
.yo-menu[open]>summary{background:var(--sup2);border-color:var(--ac)}
.yo-menu .quien-soy{display:flex;flex-direction:column;line-height:1.15;text-align:right}
.yo-menu .quien-soy b{color:var(--ink);font-weight:650;font-size:calc(13px*var(--esc))}
.yo-menu .quien-soy i{color:var(--faint);font-style:normal;font-size:calc(11px*var(--esc))}
.yo-menu .flecha{color:var(--faint);font-size:11px}

.yo-menu .panel{position:absolute;top:calc(100% + 8px);right:0;z-index:40;
  min-width:262px;background:var(--sup);border:1px solid var(--rule);
  border-radius:var(--r);box-shadow:0 14px 40px -14px rgba(0,0,0,.45);
  padding:0 0 6px;overflow:hidden;text-align:left}
.yo-menu .panel .cabeza{padding:14px 16px 10px;border-bottom:1px solid var(--rule2);
  font-size:calc(13px*var(--esc));color:var(--soft)}
.yo-menu .panel .cabeza b{color:var(--ink)}
.yo-menu .panel .apartado{padding:12px 16px 5px;font-size:calc(10.5px*var(--esc));
  text-transform:uppercase;letter-spacing:.09em;color:var(--faint);font-weight:800}
.yo-menu .panel form{margin:0}
.yo-menu .panel .op{display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;background:none;border:none;border-radius:0;box-shadow:none;
  padding:calc(9px*var(--esc)) 16px;font-size:calc(14px*var(--esc));font-weight:400;
  color:var(--ink);text-align:left;text-decoration:none;cursor:pointer;min-height:auto}
.yo-menu .panel .op:hover{background:var(--ac2);color:var(--ac);filter:none}
.yo-menu .panel .op em{font-style:normal;font-size:calc(10.5px*var(--esc));color:var(--faint);
  text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.yo-menu .panel .op.activa{font-weight:700;color:var(--ac);background:var(--ac2)}
.yo-menu .panel .op.activa::before{content:"✓ ";margin-right:-4px}
.yo-menu .panel .op.salir{color:var(--er);border-top:1px solid var(--rule2);margin-top:6px}
.yo-menu .panel .op.salir:hover{background:var(--er2);color:var(--er)}

@media(max-width:600px){
  .yo-menu .panel{position:fixed;left:12px;right:12px;top:auto;min-width:0}
}
/* El botón de ayuda ya no vive en la barra: se mudó al segundo renglón. */

/* ---------------------------------------------------------- recorrido guiado */
.tour-fondo{position:fixed;inset:0;background:rgba(10,20,17,.55);z-index:900;
  animation:tour-aparece .18s ease}
@keyframes tour-aparece{from{opacity:0}to{opacity:1}}
.tour-halo{position:absolute;border-radius:10px;box-shadow:0 0 0 9999px rgba(10,20,17,.55),
  0 0 0 4px var(--ac);transition:all .28s cubic-bezier(.4,0,.2,1);pointer-events:none}
.tour-globo{position:fixed;z-index:902;max-width:330px;background:var(--sup);color:var(--ink);
  border-radius:14px;padding:18px 20px;box-shadow:0 18px 50px -18px rgba(0,0,0,.6);
  transition:all .28s cubic-bezier(.4,0,.2,1)}
.tour-globo h3{margin:0 0 6px;font-size:calc(16.5px*var(--esc))}
.tour-globo p{margin:0;color:var(--soft);font-size:calc(14px*var(--esc));line-height:1.5}
.tour-globo .barra-pasos{display:flex;gap:5px;margin:14px 0 12px}
.tour-globo .barra-pasos i{height:5px;flex:1;border-radius:3px;background:var(--sup3)}
.tour-globo .barra-pasos i.on{background:var(--ac)}
.tour-globo .acciones{display:flex;gap:8px;align-items:center}
.tour-globo .acciones .saltar{margin-left:auto;background:none;border:none;color:var(--faint);
  font-size:calc(12.5px*var(--esc));cursor:pointer;padding:6px;min-height:auto;text-decoration:underline}

@media(max-width:820px){
  .fila3,.fila4{grid-template-columns:1fr 1fr}
  .yo-menu .quien-soy i{display:none}
  .tour-globo{left:12px!important;right:12px!important;max-width:none;
    bottom:12px!important;top:auto!important}
}
@media(max-width:600px){
  .fila2,.fila3,.fila4{grid-template-columns:1fr}
  .contenido{padding:16px 12px 70px}
  .barra .caja{flex-wrap:wrap;padding:6px 12px}
  .barra nav{order:3;width:100%;padding-bottom:6px}
  .cuadros{grid-template-columns:1fr}
}
@media print{
  .barra,.botones,.filtros,button,.boton{display:none!important}
  body{background:#fff;font-size:12px}
  .tarjeta,.tabla,.dato{box-shadow:none;border-color:#ccc;break-inside:avoid}
}

/* =====================================================================
   Fase 0 · silos, unidades de reparto y destinos
   ===================================================================== */

/* ------------------------------------------------------------- cifras arriba */
.tarjetas{display:grid;gap:calc(10px*var(--esc));margin:calc(14px*var(--esc)) 0;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.tarjetas .tarjeta{padding:calc(14px*var(--esc));text-align:center}
.tarjetas .tarjeta b{display:block;font-size:calc(1.7rem*var(--esc));line-height:1.15;
  letter-spacing:-.02em}
.tarjetas .tarjeta span{display:block;font-size:calc(.78rem*var(--esc));color:var(--faint);
  text-transform:uppercase;letter-spacing:.06em;margin-top:2px}

/* ------------------------------------------------------------- mapa de silos
   Se dibuja con la fila, la columna y el alto que trae cada renglón de
   prod.silo. Aquí no hay ni un número de silo escrito: si se agrega el
   silo 15 al catálogo, aparece solo. */
.mapa-silos{display:grid;gap:calc(6px*var(--esc));max-width:calc(430px*var(--esc));
  margin:calc(12px*var(--esc)) 0}
.celda-silo{background:var(--sup);border:2px solid var(--ink);border-radius:calc(8px*var(--esc));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:calc(42px*var(--esc));padding:2px}
.celda-silo b{font-size:calc(1.05rem*var(--esc));line-height:1}
.celda-silo span{font-size:calc(.66rem*var(--esc));color:var(--faint);line-height:1.2}
/* Los de menos capacidad se ven distintos también sin depender del color:
   el borde punteado se distingue sin ver el matiz. */
.celda-silo.chico{border-style:dashed;border-color:var(--wa);background:var(--wa2)}

/* ------------------------------------------------------------- casilla con texto */
.check{display:flex;align-items:center;gap:calc(8px*var(--esc));
  min-height:calc(44px*var(--esc));font-weight:500;cursor:pointer}
.check input{margin:0;flex:none}

/* ------------------------------------------------------------- insignias
   La insignia es cómo se distingue una UNIDAD DE REPARTO —el camión con
   compartimentos— de una TOLVA DE PESAJE, que es la báscula de
   producción. Las dos cosas se llaman «tolva» en la planta, así que la
   forma y la paleta las separan: redonda para el reparto, cuadrada para
   el pesaje. Nunca la misma. */
.insignia{display:inline-flex;align-items:center;justify-content:center;
  min-width:calc(44px*var(--esc));height:calc(30px*var(--esc));padding:0 calc(9px*var(--esc));
  font-weight:700;font-size:calc(.82rem*var(--esc));letter-spacing:.04em;
  border:2px solid var(--soft);background:var(--sup2);color:var(--ink)}
.insignia.reparto{border-radius:999px}
.insignia.pesaje{border-radius:calc(5px*var(--esc))}

/* ------------------------------------------------------------- árbol de destinos */
.hijo td:first-child{padding-left:calc(30px*var(--esc))}
.hijo td:first-child::before{content:"└ ";color:var(--faint)}

/* ------------------------------------------------------------- aviso de parecidos
   Nada preseleccionado: el sistema hace evidente, no decide. Es el mismo
   criterio de la pantalla de ingrediente repetido. */
.parecidos{border:2px solid var(--wa);background:var(--wa2);border-radius:var(--r);
  padding:calc(16px*var(--esc));margin:calc(16px*var(--esc)) 0}
.parecidos h2{margin-top:0}
.parecidos .opciones{display:grid;gap:calc(10px*var(--esc));
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:calc(12px*var(--esc))}
.parecidos .opcion{background:var(--sup);border:1px solid var(--rule);border-radius:var(--r);
  padding:calc(13px*var(--esc))}
.parecidos .opcion form{margin:0}

/* =====================================================================
   Fase 1 · el mapa de existencia

   Cada silo es una columna vertical. La ALTURA LLENA representa la
   ocupación contra su capacidad, no las toneladas: un silo de 15 t lleno
   y uno de 30 t a la mitad tienen la misma cantidad y NO se ven igual —
   el de 15 se ve lleno. Es lo correcto, porque quien mira el mapa quiere
   saber dónde hay lugar.
   ===================================================================== */
.mapa-existencia{display:grid;gap:calc(7px*var(--esc));margin:calc(16px*var(--esc)) 0;
  max-width:calc(560px*var(--esc))}
.silo{position:relative;display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--sup);border:2px solid var(--rule);border-radius:calc(8px*var(--esc));
  overflow:hidden;min-height:calc(84px*var(--esc))}
.silo:hover,.silo:focus{border-color:var(--ac);box-shadow:var(--sh)}
.silo-cabeza{display:flex;align-items:baseline;justify-content:space-between;
  padding:calc(4px*var(--esc)) calc(7px*var(--esc));background:var(--sup2);
  border-bottom:1px solid var(--rule);flex:none}
.silo-cabeza b{font-size:calc(1.02rem*var(--esc));line-height:1}
.silo-cabeza i{font-style:normal;font-size:calc(.64rem*var(--esc));color:var(--faint)}
.silo-cabeza i.pend{color:var(--wa);font-weight:600}
/* De abajo hacia arriba: la capa que sale primero se dibuja en el fondo,
   igual que está en el silo de verdad. */
.silo-cuerpo{flex:1;display:flex;flex-direction:column;justify-content:flex-end}
.capa{position:relative;min-height:calc(6px*var(--esc));display:flex;align-items:center;
  justify-content:center;border-top:1px solid rgba(255,255,255,.35)}
.eti-capa{font-size:calc(.6rem*var(--esc));font-weight:700;line-height:1.15;text-align:center;
  color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.55);padding:1px 2px}
.silo-libre{flex:1;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,var(--sup),var(--sup) 6px,var(--sup2) 6px,var(--sup2) 12px)}
.silo-libre span{font-size:calc(.64rem*var(--esc));color:var(--faint);text-align:center;
  line-height:1.2}
.silo.vacio{border-style:dashed}
/* El añejo lleva símbolo además de color: el color solo no basta. */
.silo-marca{position:absolute;top:calc(2px*var(--esc));right:calc(2px*var(--esc));
  background:var(--wa);color:#fff;font-size:calc(.58rem*var(--esc));font-weight:700;
  padding:1px calc(4px*var(--esc));border-radius:999px}
.silo.aneja{border-color:var(--wa)}

/* Muestra de color en las tablas. Siempre va con su clave al lado. */
.muestra{display:inline-block;width:calc(16px*var(--esc));height:calc(16px*var(--esc));
  border-radius:calc(4px*var(--esc));border:1px solid var(--rule);vertical-align:-3px}
tr.aneja{background:var(--wa2)}
.migas{margin:0 0 calc(6px*var(--esc));font-size:calc(.86rem*var(--esc))}

@media(max-width:520px){
  .mapa-existencia{max-width:100%}
  .eti-capa{font-size:calc(.55rem*var(--esc))}
}

/* El destino del batch. Se destaca porque sin él no se puede cerrar. */
.destino-silo{border:2px solid var(--ac);background:var(--ac2);border-radius:var(--r);
  padding:calc(14px*var(--esc));margin:calc(16px*var(--esc)) 0}
.destino-silo h2{margin-top:0}

/* =====================================================================
   Fase 2 · el aceite por medidor

   El nivel que queda y la proyección van SIEMPRE a la vista: un aviso
   escondido en un reporte no sirve para decidir si alcanza para acabar el
   turno.
   ===================================================================== */
.medidor{border:2px solid var(--wa);background:var(--wa2);border-radius:var(--r);
  padding:calc(14px*var(--esc));margin:calc(16px*var(--esc)) 0}
.medidor h2{margin:0}
.medidor-cabeza{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  flex-wrap:wrap}
.medidor-saldo{text-align:right}
.medidor-saldo b{display:block;font-size:calc(1.5rem*var(--esc));line-height:1.1}
.medidor-saldo b.pend{color:var(--er)}
.medidor-saldo span{font-size:calc(.72rem*var(--esc));color:var(--faint)}
.dosis{font-size:calc(1.35rem*var(--esc));font-weight:700;padding:calc(9px*var(--esc)) 0;
  min-height:calc(44px*var(--esc));display:flex;align-items:center}
.dosis.sube{color:var(--er);font-size:calc(.95rem*var(--esc));font-weight:600}

.tanque{margin:calc(18px*var(--esc)) 0}
.tanque-cabeza{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-bottom:calc(10px*var(--esc))}
.tanque-saldo{text-align:right}
.tanque-saldo b{display:block;font-size:calc(1.9rem*var(--esc));line-height:1.1}
.tanque-saldo b.pend{color:var(--er)}
.tanque-saldo span{font-size:calc(.72rem*var(--esc));color:var(--faint)}
.acciones-tanque{display:grid;gap:calc(8px*var(--esc));margin:calc(10px*var(--esc)) 0}
.tarjeta.no-cuadra{border-color:var(--er);background:var(--er2)}
.tarjeta.cuadra{border-color:var(--ok)}
tr.anulado{opacity:.5;text-decoration:line-through}
td.discrepa{color:var(--er);font-weight:600}

/* =====================================================================
   Fase 3 · la receta autorizada

   Reproduce el formato del papel porque el operador ya sabe leerlo así.
   El panel es para COTEJAR, no para capturar.
   ===================================================================== */
.receta-control{border:1px dashed var(--rule);border-radius:var(--r);
  padding:calc(11px*var(--esc));margin:calc(14px*var(--esc)) 0;background:var(--sup2)}
.receta-botones{display:flex;align-items:center;gap:calc(9px*var(--esc));flex-wrap:wrap}
.receta-botones form.linea{display:flex;gap:calc(5px*var(--esc));margin:0}
.receta-botones button{min-height:calc(40px*var(--esc));padding:0 calc(13px*var(--esc))}
.receta-abierta{margin-top:calc(11px*var(--esc))}

.receta{background:var(--sup);border:1px solid var(--rule);border-radius:var(--r);
  padding:calc(15px*var(--esc));margin:calc(10px*var(--esc)) 0}
.receta h3{margin:calc(18px*var(--esc)) 0 calc(4px*var(--esc));font-size:calc(1.02rem*var(--esc))}
.receta h4{margin:calc(12px*var(--esc)) 0 calc(3px*var(--esc));
  font-size:calc(.84rem*var(--esc));text-transform:uppercase;letter-spacing:.05em;
  color:var(--faint)}
.receta-cabeza{display:flex;justify-content:space-between;gap:calc(14px*var(--esc));
  flex-wrap:wrap;padding-left:calc(11px*var(--esc))}
.receta-cabeza h2{margin:2px 0}
.receta-claves{display:flex;gap:calc(14px*var(--esc));flex-wrap:wrap}
.receta-claves div{text-align:right}
.receta-claves span{display:block;font-size:calc(.64rem*var(--esc));color:var(--faint);
  text-transform:uppercase;letter-spacing:.05em}
.receta-claves b{font-family:var(--mono);font-size:calc(.92rem*var(--esc))}
.receta-meta{display:flex;gap:calc(11px*var(--esc));flex-wrap:wrap;align-items:center;
  margin:calc(9px*var(--esc)) 0;padding-bottom:calc(7px*var(--esc));
  border-bottom:1px solid var(--rule2)}
.receta-tabla{font-size:calc(.86rem*var(--esc))}
.receta-tabla tfoot td{background:var(--sup2);font-weight:700}
.receta-tabla tr.aqui{background:var(--ac2);outline:2px solid var(--ac)}
.mono{font-family:var(--mono)}
.firmas{display:grid;gap:calc(10px*var(--esc));
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:calc(8px*var(--esc))}
.firmas div{border-top:2px solid var(--ink);padding-top:calc(5px*var(--esc))}
.firmas span{display:block;font-size:calc(.66rem*var(--esc));color:var(--faint);
  text-transform:uppercase;letter-spacing:.05em}
@media print{
  .receta-control,.receta-botones{display:none}
  .receta{border:none;padding:0}
}

/* =====================================================================
   Fase 4 · la grilla de órdenes

   Valida MIENTRAS se escribe. El semáforo va en el renglón, no en un
   resumen arriba: un error que obliga a buscar dónde está ya cansó a
   quien lo tiene que corregir.
   ===================================================================== */
.modos{display:flex;gap:calc(7px*var(--esc));flex-wrap:wrap;margin:calc(10px*var(--esc)) 0}
.modos .actual{background:var(--ac);color:#fff;border-color:var(--ac);cursor:default}

.grilla-marco{display:grid;gap:calc(14px*var(--esc));
  grid-template-columns:minmax(0,1fr) minmax(190px,240px);align-items:start}
.grilla-lado{background:var(--sup);border:1px solid var(--rule);border-radius:var(--r);
  padding:calc(12px*var(--esc));position:sticky;top:calc(8px*var(--esc))}
.grilla-lado h2{margin:calc(4px*var(--esc)) 0 calc(4px*var(--esc));
  font-size:calc(.92rem*var(--esc))}
.grilla-lado table{width:100%;border-collapse:collapse}
.grilla-lado td,.grilla-lado th{padding:calc(3px*var(--esc)) calc(4px*var(--esc));
  border-bottom:1px solid var(--rule2)}

.grilla-tabla table{font-size:calc(.86rem*var(--esc))}
.grilla-tabla td{padding:calc(3px*var(--esc)) calc(4px*var(--esc))}
.grilla-tabla input,.grilla-tabla select{min-height:calc(38px*var(--esc));
  padding:calc(4px*var(--esc)) calc(6px*var(--esc));width:100%}
.grilla-tabla input.chica{max-width:calc(78px*var(--esc))}
.grilla-tabla th.sem,.grilla-tabla td.sem{width:calc(30px*var(--esc));text-align:center;
  padding:0}
.punto{display:inline-flex;align-items:center;justify-content:center;
  width:calc(22px*var(--esc));height:calc(22px*var(--esc));border-radius:50%;
  font-size:calc(.72rem*var(--esc));font-weight:700;color:#fff;background:var(--faint)}
.punto.ok{background:var(--ok)} .punto.wa{background:var(--wa)} .punto.er{background:var(--er)}
tr.malo>td{background:var(--er2)}
tr.avisa>td{background:var(--wa2)}
tr.motivos td{padding-top:0}
.motivo{font-size:calc(.78rem*var(--esc));font-weight:600}
.motivo.er{color:var(--er)} .motivo.wa{color:var(--wa)}
.grilla-acciones{flex-wrap:wrap;gap:calc(7px*var(--esc))}
.rojo{color:var(--er)}
@media(max-width:900px){
  .grilla-marco{grid-template-columns:1fr}
  .grilla-lado{position:static}
}

/* =====================================================================
   Fase 5 · el reparto

   La pantalla se parece al papel porque la gente ya lo lee así. Y
   «Sin Med.» se destaca cuando NO lleva: el papel lo marca por algo —
   medicar es la excepción y es el dato que no se puede equivocar.
   ===================================================================== */
.reparto-tabla{font-size:calc(.85rem*var(--esc))}
.reparto-tabla td{vertical-align:top}
.sin-med{color:var(--ok);font-weight:700;letter-spacing:.02em}
.con-med{color:var(--er)}
td.mini .con-med,.con-med{font-weight:700}
.viaje{display:inline-flex;align-items:center;justify-content:center;
  width:calc(26px*var(--esc));height:calc(26px*var(--esc));border-radius:50%;
  background:var(--sup3);font-weight:700;font-size:calc(.8rem*var(--esc))}
form.linea{display:inline-block;margin:0}

/* La hoja impresa */
.hoja-impresa h2{margin:calc(14px*var(--esc)) 0 calc(4px*var(--esc));
  font-size:calc(1rem*var(--esc));background:var(--sup2);
  padding:calc(4px*var(--esc)) calc(8px*var(--esc));border-radius:4px}
table.impresa{width:100%;border-collapse:collapse;font-size:calc(.82rem*var(--esc))}
table.impresa th,table.impresa td{border:1px solid var(--rule);
  padding:calc(4px*var(--esc)) calc(6px*var(--esc))}
table.impresa tfoot td{background:var(--sup2);font-weight:700}
@media print{
  .solo-pantalla{display:none}
  .hoja-impresa h2{background:#eee}
  table.impresa th,table.impresa td{border-color:#999}
}

/* =====================================================================
   Fase 7 · los reportes

   El índice dice PARA QUÉ SIRVE cada reporte, no sólo cómo se llama: un
   índice de diez nombres obliga a abrirlos todos para encontrar el que se
   necesita.
   ===================================================================== */
.indice-reportes{display:grid;gap:calc(9px*var(--esc));margin:calc(14px*var(--esc)) 0;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.tarjeta-reporte{display:block;background:var(--sup);border:1px solid var(--rule);
  border-radius:var(--r);padding:calc(13px*var(--esc));text-decoration:none;color:inherit;
  border-left:4px solid var(--ac)}
.tarjeta-reporte:hover,.tarjeta-reporte:focus{box-shadow:var(--sh);border-color:var(--ac)}
.tarjeta-reporte b{display:block;font-size:calc(1rem*var(--esc));margin-bottom:2px}
.tarjeta-reporte span{display:block;font-size:calc(.8rem*var(--esc));color:var(--soft);
  line-height:1.4}

.filtros{display:flex;gap:calc(9px*var(--esc));flex-wrap:wrap;align-items:flex-end;
  margin:calc(12px*var(--esc)) 0}
.filtros .campo{margin:0}

/* La barra de llenado del silo. Nunca va sola: al lado está el número. */
.barra-llenado{background:var(--sup3);border-radius:999px;height:calc(14px*var(--esc));
  overflow:hidden;min-width:calc(70px*var(--esc))}
.barra-llenado div{background:var(--ac);height:100%}

@media print{
  .indice-reportes,.filtros,.acciones{display:none}
}

/* =====================================================================
   LA CAMPANA DE AVISOS
   Se lee de lejos a propósito: número grande, color del semáforo y una
   palabra. En una tablet a pie de máquina, con luz encima y sin lentes,
   un puntito rojo no se ve — un número con su palabra sí.
   ===================================================================== */
.campana{display:flex;align-items:center;gap:8px;text-decoration:none;
  padding:7px 13px;border-radius:26px;border:2px solid var(--rule);
  background:var(--sup);color:var(--ink);min-height:44px;margin-right:10px;
  transition:transform .08s}
.campana:hover{transform:translateY(-1px)}
.campana .icono{font-size:calc(17px*var(--esc));line-height:1}
.campana .cuantos{font-family:var(--mono);font-weight:700;
  font-size:calc(18px*var(--esc));line-height:1}
.campana .que{font-size:calc(11.5px*var(--esc));text-transform:uppercase;
  letter-spacing:.05em;color:var(--soft);font-weight:700}
.campana.urgente{border-color:var(--er);background:var(--er);color:#fff}
.campana.urgente .que{color:#fff;opacity:.9}
.campana.revisar{border-color:var(--wa)}
.campana.revisar .cuantos{color:var(--wa)}
.campana.informa{border-color:var(--rule)}
@media(max-width:640px){
  .campana .que{display:none}
  .campana{padding:7px 11px}
}

/* La franja de lo urgente, encima del contenido de cualquier pantalla. */
.aviso.barra-urgente{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.aviso.barra-urgente .boton{margin-left:auto}

/* =====================================================================
   EL ABRIDOR: un <summary> que se ve como el botón que es
   El formulario de «dar de alta» vivía detrás de un triangulito. Quien va
   lento con la computadora no sabe que eso se puede abrir, así que para él
   la pantalla simplemente no tenía forma de agregar nada.
   ===================================================================== */
summary.abridor{list-style:none;cursor:pointer;display:inline-flex;
  align-items:center;gap:9px;background:var(--ac);color:#fff;font-weight:700;
  font-size:calc(15px*var(--esc));padding:13px 22px;border-radius:var(--r);
  min-height:48px;margin-bottom:4px;border:none}
summary.abridor::-webkit-details-marker{display:none}
summary.abridor::marker{content:""}
summary.abridor::after{content:"▾";font-size:.8em;opacity:.85}
details[open] > summary.abridor::after{content:"▴"}
summary.abridor:hover{filter:brightness(1.08)}


/* =====================================================================
   «¿Y AHORA QUÉ?»
   Botones grandes al final de la pantalla de inicio. Grandes de verdad:
   esto se toca con guantes, en una tablet, con luz encima.
   ===================================================================== */
.que-sigue{margin-top:30px;padding:20px 22px;background:var(--sup2);
  border:1px solid var(--rule);border-radius:var(--r)}
.que-sigue .titulo{font-size:calc(17px*var(--esc));font-weight:700;
  margin-bottom:12px}
.que-sigue .opciones{display:flex;flex-wrap:wrap;gap:10px}
.que-sigue .opciones .boton{min-height:52px;display:inline-flex;
  align-items:center;font-size:calc(15px*var(--esc))}
.que-sigue .pista{margin-top:13px;font-size:calc(13px*var(--esc));
  color:var(--soft)}
@media(max-width:640px){
  .que-sigue .opciones{flex-direction:column}
  .que-sigue .opciones .boton{width:100%;justify-content:center}
}


/* ═══════════════════════════════════════════════════════════════════
   EL HUECO ENTRE 600 Y 1240 PIXELES
   ═══════════════════════════════════════════════════════════════════
   El unico @media que tocaba la barra era `max-width:600px`. Entre 600 y
   1240 —tablets y pantallas medianas— no se adaptaba nada, y con el modo
   comodo (`--esc: 1.15`) todo crece un 15% y desborda justo ahi. Por eso el
   corte se veia «en algunos dispositivos» y no en todos.

   La regla que gobierna estos tres bloques: **se quita texto, nunca
   informacion**. El numero del paso y el paso actual se quedan siempre,
   porque son los que contestan «en que voy»; lo que desaparece es el rotulo
   de los pasos que NO son el actual, que se puede leer tocandolos.
   ═══════════════════════════════════════════════════════════════════ */

@media(max-width:1100px){
  /* Los pasos que no son el actual se quedan con su numero. El actual
     conserva su texto: es el que dice donde estas. */
  .pasos-guia .paso:not(.actual):not(:hover) span,
  .pasos-guia .paso:not(.actual):not(:hover) em{display:none}
  .pasos-guia .paso:not(.actual){padding:4px 5px}
  .cinta .caja{gap:8px}
}

@media(max-width:900px){
  /* La ayuda deja de ocupar un renglon propio y se encoge a su icono. */
  .ayuda-cinta{padding:5px 9px}
  .ayuda-cinta span{display:none}
  /* Y el menu se aprieta sin perder el area tocable minima. */
  .barra nav a{padding:calc(7px*var(--esc)) calc(9px*var(--esc))}
  .barra .caja{padding:0 12px;gap:8px}
}

@media(max-width:760px){
  /* Aqui ya no caben los dos renglones de arriba con todo dentro: la guia
     pasa a mostrar SOLO el paso actual, que es la unica pregunta que un
     operario se hace con la pantalla chica en la mano. Los demas siguen
     ahi, desplazandose. */
  .pasos-guia .paso:not(.actual){font-size:0}
  .pasos-guia .paso:not(.actual) i{font-size:calc(11px*var(--esc))}
}

/* ═══════════════════════════════════════════════════════════════════
   Y LA RED DE SEGURIDAD: NADA MAS ANCHO QUE LA PANTALLA
   ═══════════════════════════════════════════════════════════════════
   Lo de arriba arregla lo que se sabe que desborda. Esto atrapa lo que
   todavia no se sabe: una tabla nueva, un titulo largo, un nombre de
   alimento que nadie previo. El cuerpo NUNCA se desplaza de lado; lo que no
   quepa se desplaza DENTRO de su propia caja, que es donde el usuario
   entiende que esta pasando.  */
html, body{max-width:100%;overflow-x:hidden}
.tabla{overflow-x:auto}
/* Las imagenes y los cuadros no empujan el ancho. */
img, svg, video{max-width:100%;height:auto}