/* ── TRAZA · inicio de cocina con paneles (Rail, Panell, Torn) ─────
   El contenido del inicio y las piezas del menú lateral; el marco que lo
   coloca todo (y viste el resto de pantallas) está en shell.css.
   Tono de la marca, limpio: barra lateral marfil con línea fina arena,
   acento dorado. Tinta, acento y fondo salen de la marca si la hay; los
   semánticos (--ok, --warn, --stop, --frio) son los de la app: rojo = mal. */
.shell-on,.inicio{
  --i-tinta:var(--marca-1,#1E1A17); --i-acento:var(--marca-2,#A87A3E); --i-fondo:var(--marca-fondo,#F4F0E1);
  --i-sobre-acento:var(--marca-sobre-2,#1E1A17);
  --i-panel:#FFFDF8; --i-borde:#E6DCC6; --i-activo:#F3E8D3; --i-activo-tx:#6E4F24;
  --i-gris:#6B6255; --i-linea:#EEE7D6; --i-suave:#EDE5D0; --i-alto-bar:52px;
  --i-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  color:var(--i-tinta)}
.inicio{font-size:16px}
.inicio h1,.inicio h2{margin:0;letter-spacing:-.01em}
.inicio .mono{font-family:var(--i-mono)}
.inicio .ico{width:26px;height:26px}
.inicio button{touch-action:manipulation}
.inicio button:focus-visible{outline:3px solid var(--i-acento);outline-offset:2px}

/* ── menú lateral ─────────────────────────────────────────────── */
.i-nav{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;padding:16px 0 12px;
  position:sticky;top:var(--i-alto-bar);height:calc(100dvh - var(--i-alto-bar));overflow-y:auto;
  background:var(--i-panel);border-right:1px solid var(--i-borde)}
.i-nav > *{flex-shrink:0}   /* si no cabe, la barra se desplaza: nada se aplasta */
.i-sp{flex:1 1 0}
.i-insignia{position:absolute;top:8px;right:12px;min-width:24px;height:24px;padding:0 7px;border-radius:12px;
  display:grid;place-items:center;background:var(--i-acento);color:var(--i-sobre-acento);font-size:13px;font-weight:700;
  font-variant-numeric:tabular-nums}
.i-insignia.warn{background:var(--warn);color:#fff}
.i-insignia.stop{background:var(--stop);color:#fff}
/* A · Rail: icono y nombre, 112 × 60 */
.i-nb{position:relative;width:112px;min-height:60px;border:0;border-radius:14px;background:transparent;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:4px;
  font-size:12px;font-weight:600;line-height:1.15;text-align:center;color:#4A4136}
.i-nb:active,.i-pb:active,.i-ib:active{background:var(--i-activo);color:var(--i-activo-tx)}
.i-nb.urgente{color:var(--stop)}
.i-nb.salir{min-height:56px;color:#7A6F5F;font-weight:500}
.i-nb.salir .ico{width:22px;height:22px}

/* ── zona central ─────────────────────────────────────────────── */
.i-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:18px}
.i-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.i-cab h1{font-size:32px;font-weight:700}
.i-cab-l{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.i-fecha{font-size:15px;color:var(--i-gris);font-weight:500}
.i-cab-acc{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.i-red{border-radius:12px;padding:10px 14px;background:#FFF1DC;color:var(--warn-fuerte);font-weight:700;font-size:15px}
.i-btn-avisos{min-height:48px;padding:0 18px;border-radius:12px;border:2px solid var(--stop);background:#FCECEA;
  color:var(--stop);font-size:16px;font-weight:700;display:flex;gap:8px;align-items:center}
.i-btn-avisos .ico{width:22px;height:22px}

.i-grid{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
.i-grid.dos{grid-template-columns:repeat(2,minmax(0,1fr))}
.i-card{background:#fff;border-radius:20px;padding:20px 22px;display:flex;flex-direction:column;gap:10px;min-height:220px;
  box-shadow:0 1px 2px rgba(30,26,23,.06);cursor:pointer}
.i-card.ancha{grid-column:span 2}
.i-card.pendiente{box-shadow:inset 0 0 0 2px var(--warn)}
.i-card.bien{box-shadow:inset 0 0 0 2px var(--ok)}
.i-card.alerta{background:var(--stop);color:#fff}
.i-card-cab{display:flex;justify-content:space-between;align-items:center;gap:10px}
.i-tit{border:0;background:none;color:inherit;padding:0;min-height:44px;font-size:20px;font-weight:700;text-align:left}
.i-num{min-width:30px;height:30px;padding:0 8px;border-radius:15px;display:grid;place-items:center;
  background:#fff;color:var(--stop);font-weight:700}
.i-vacio{margin:auto 0;color:var(--i-gris);font-size:16px}
.i-card.alerta .i-vacio{color:#fff}
.i-mas{margin:0;color:var(--i-gris);font-size:15px}

.i-btn{color:inherit;min-height:48px;padding:0 20px;border-radius:12px;border:0;font-size:16px;font-weight:700;white-space:nowrap}
.i-btn.oscuro{background:var(--i-tinta);color:var(--i-fondo)}
.i-btn.borde{background:#fff;border:2px solid var(--i-tinta)}
.i-btn.suave{background:var(--i-fondo)}
.i-btn.claro{background:#fff;color:var(--stop)}
.i-btn.acento{background:var(--i-acento);color:var(--i-sobre-acento)}
.i-btn.grande{min-height:64px;padding:0 28px;border-radius:16px;font-size:19px;flex:none}
.i-btn.empuja{margin-top:auto}
.i-btn:active,.i-kpi:active,.i-chip:active{transform:scale(.985)}

/* lotes en marcha */
.i-lotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;flex:1}
.i-lote{border:1px solid #E2D9C3;border-radius:16px;padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.i-lote.actual{border:2px solid var(--i-acento);background:#FBF7EC}
.i-cod{font-family:var(--i-mono);font-size:13px;color:var(--i-gris);font-weight:600}
.i-lote-nom{font-size:22px;font-weight:700;line-height:1.15}
.i-paso{font-size:15px;color:#3D362E}
.i-paso.ok{color:var(--ok);font-weight:700}
.i-card.alerta .i-paso{color:#fff}
.i-lote-pie{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;flex-wrap:wrap}
.i-meta{font-size:15px;color:var(--i-gris)}
.i-barra{height:10px;border-radius:5px;background:var(--i-suave);overflow:hidden;flex:none}
.i-barra span{display:block;height:100%;background:var(--i-acento)}
.i-barra.warn span{background:var(--warn)}
.i-barra.ok span{background:var(--ok)}

/* listas de filas: temperaturas, caducidades, recepciones, producido */
.i-fila{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--i-linea)}
.i-fila:last-child{border-bottom:0}
.i-fila > span:first-child{display:flex;flex-direction:column;min-width:0}
.i-fila-t{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.i-fila-t.fuerte{font-weight:600}
.i-fila-s{font-size:13px;color:var(--i-gris)}
.i-temp{font-size:22px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.i-temp.ok{color:var(--ok)} .i-temp.stop{color:var(--stop)}
/* lectura de otro día: apagada, con su edad; no cuenta como alarma */
.i-temp.vieja,.i-fila.vieja .i-fila-t{color:var(--i-gris)}
.i-dias{border-radius:8px;padding:4px 10px;font-size:14px;font-weight:700;white-space:nowrap}
.i-dias.stop{background:#FCECEA;color:var(--stop)} .i-dias.warn{background:#FFF1DC;color:var(--warn-fuerte)}
.i-estado{font-size:14px;font-weight:700;white-space:nowrap}
.i-estado.ok{color:var(--ok)} .i-estado.warn{color:var(--warn-fuerte)} .i-estado.stop{color:var(--stop)}
.i-aviso{background:rgba(255,255,255,.14);border-radius:12px;padding:12px 14px}
.i-aviso-t{font-size:17px;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.i-aviso-s{font-size:14px;opacity:.9}
.i-cifra{display:flex;align-items:baseline;gap:8px}
.i-cifra-n{font-size:44px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.i-cifra-s{font-size:17px;color:var(--i-gris)}

/* ── B · Panell ───────────────────────────────────────────────── */
.i-gh{--g:var(--acc);margin:10px 0 2px 12px;padding-left:8px;border-left:3px solid var(--g);
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--i-gris)}
/* solo en el menú del marco: el menú CLASSIC tiene sus propios colores de grupo (app.css) */
:is(.i-gh,.i-pi,.i-ng).g_camara{--g:var(--frio)} :is(.i-gh,.i-pi,.i-ng).g_control{--g:var(--ok)}
:is(.i-gh,.i-pi).g_elaborar{--g:#1D5FD0} :is(.i-gh,.i-pi,.i-ng).g_inicio{--g:var(--i-acento)}
.i-pb{position:relative;width:100%;min-height:54px;border:0;border-radius:14px;background:transparent;
  display:flex;align-items:center;gap:14px;padding:0 12px;color:inherit;font-size:18px;font-weight:600;text-align:left}
.i-pb .i-insignia{position:static;margin-left:auto}
.i-pb.urgente{color:var(--stop)}
.i-pi{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;color:var(--g);
  background:color-mix(in srgb,var(--g) 12%,#fff)}
.i-pi.g_inicio{background:var(--i-activo);color:var(--i-activo-tx)}
.i-pb.urgente .i-pi{--g:var(--stop)}
/* submenú de cambres (Panell, en el menú del marco): Totes + una línea por cambra con lotes y avisos */
.i-sub{display:flex;flex-direction:column;gap:2px;margin:0 0 6px 34px;padding-left:10px;border-left:2px solid var(--i-borde)}
.i-sb{display:flex;align-items:center;gap:8px;width:100%;min-height:48px;border:0;border-radius:12px;background:transparent;
  padding:0 10px;color:inherit;font-size:16px;font-weight:600;text-align:left}
.i-sb:active{background:var(--i-activo)}
.i-sb.activo{background:#fff;color:var(--i-activo-tx);box-shadow:0 1px 3px rgba(30,26,23,.14),inset 3px 0 0 var(--i-acento)}
.i-sb-n{flex:1;min-width:0;line-height:1.2;padding:4px 0;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.i-sb-c{flex:none;min-width:24px;text-align:right;color:var(--i-gris);font-weight:700;font-variant-numeric:tabular-nums}
.i-sb-av{flex:none;padding:1px 7px;border-radius:999px;font-size:12px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.i-sb-av.stop{background:var(--stop)} .i-sb-av.warn{background:var(--warn-fuerte)}
.i-pie{display:flex;gap:8px}
.i-pie .i-btn{flex:1;min-height:52px;border-color:#CFC5AE;font-weight:600}
.i-heroe{background:#F7EEDC;border:1px solid #E2CFA8;border-radius:22px;padding:24px 28px;display:flex;align-items:center;gap:26px}
.i-heroe-ico{width:84px;height:84px;border-radius:20px;display:grid;place-items:center;flex:none;color:#fff;background:var(--frio)}
.i-heroe-ico .ico{width:44px;height:44px}
.i-heroe-ico.stop{background:var(--stop)} .i-heroe-ico.warn{background:var(--warn)}
.i-heroe-ico.ok{background:var(--ok)} .i-heroe-ico.acento{background:var(--i-acento);color:var(--i-sobre-acento)}
.i-heroe-txt{flex:1;min-width:0}
.i-kicker{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7A5524}
.i-heroe-t{font-size:28px;font-weight:700;margin-top:6px;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.i-heroe-s{font-size:15px;color:var(--i-gris);margin-top:6px}
.i-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.i-kpi{background:#fff;border:0;color:inherit;border-radius:18px;padding:16px 18px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;min-width:0}
.i-kpi-r{font-size:14px;color:var(--i-gris);font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.i-kpi-v{font-size:40px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.i-kpi.warn .i-kpi-v{color:var(--warn-fuerte)}
.i-kpi.vieja .i-kpi-v{color:var(--i-gris)}
.i-kpi.stop{background:#FCECEA;box-shadow:inset 0 0 0 2px var(--stop)}
.i-kpi.stop .i-kpi-r,.i-kpi.stop .i-kpi-v{color:var(--stop)}

/* ── C · Torn ─────────────────────────────────────────────────── */
/* el menú del Torn: botones en mosaico con la barra de color de su grupo */
.i-ng{display:flex;gap:6px}
.i-ng > div{display:flex;flex-direction:column;gap:6px}
.i-ng-barra{width:5px;border-radius:3px;background:var(--g)}
.i-ng.g_elaborar{--g:#3B82F6} .i-ng.g_camara{--g:#22A0B4}
.i-ib{position:relative;width:84px;min-height:56px;border:0;border-radius:16px;background:#F7F2E6;color:#3D362E;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:4px;
  font-size:12px;font-weight:700;text-align:center;box-shadow:0 1px 2px rgba(30,26,23,.08)}
.i-ib .i-insignia{top:-4px;right:-6px;min-width:20px;height:20px;font-size:11px}
.i-ib.urgente{color:var(--stop)}
.i-ib.salir{background:transparent;box-shadow:none;color:#7A6F5F;min-height:52px}
.i-ib.salir .ico{width:22px;height:22px}
.i-chips{display:flex;gap:10px;flex-wrap:wrap}
.i-chip{min-height:52px;border-radius:14px;border:0;color:inherit;background:#fff;display:flex;align-items:center;gap:10px;padding:0 16px;font-size:15px;font-weight:600}
.i-chip strong{font-size:18px}
.i-dot{width:10px;height:10px;border-radius:5px;background:var(--ok)}
.i-chip.stop{background:#FCECEA;color:var(--stop);box-shadow:inset 0 0 0 2px var(--stop)}
.i-chip.stop .i-dot{background:var(--stop)}
.i-chip.warn{background:#FFF1DC;color:var(--warn-fuerte);font-weight:700}
.i-chip.vieja{color:var(--i-gris)} .i-chip.vieja .i-dot{background:#CFC5AE}
.i-edad{font-size:13px;font-weight:500}
.i-grid.tres{flex:1;align-items:start}
.i-col{background:#F6F1E4;border-radius:20px;padding:16px;display:flex;flex-direction:column;gap:10px;min-height:100%}
.i-col h2{margin:0 4px 4px;font-size:18px;font-weight:700;display:flex;justify-content:space-between}
.i-col h2 span{color:var(--i-gris)} .i-col h2 span.ok{color:var(--ok)}
.i-tk{background:#fff;border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;
  box-shadow:0 1px 2px rgba(30,26,23,.08);cursor:pointer}
.i-tk.warn{border-left:6px solid var(--warn)} .i-tk.stop{border-left:6px solid var(--stop)}
.i-tk.marco{box-shadow:inset 0 0 0 2px var(--i-acento)}
.i-tk.marco-stop{box-shadow:inset 0 0 0 2px var(--stop)}
.i-tk.marco-warn{box-shadow:inset 0 0 0 2px var(--warn)}
.i-tk-k{font-size:13px;font-weight:700;color:var(--warn-fuerte)}
.i-tk.stop .i-tk-k{color:var(--stop)}
.i-tk-t{font-size:16px;font-weight:700;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.i-tk-t.grande{font-size:20px}
.i-tk-s{font-size:14px;color:var(--i-gris)}
.i-tk-cab{display:flex;justify-content:space-between;align-items:center;gap:8px}
.i-tk-cab .mono{font-size:13px;color:var(--i-gris);font-weight:600}
.i-tk .i-btn{margin-top:4px}
.i-pill{background:var(--i-fondo);color:#3D362E;border-radius:8px;padding:3px 9px;font-size:13px;font-weight:700}
.i-seg{display:flex;gap:4px;margin:4px 0}
.i-seg span{flex:1;height:8px;border-radius:4px;background:#E2D9C3}
.i-seg span.hecho{background:var(--i-acento)}
.i-seg span.actual{background:var(--i-tinta)}

/* Rail con calidad (Inici, nueve destinos, la marca y salir) en una tableta de 800 px: sin bajar de 48 px. */
@media (max-height:860px){
  .i-nb{min-height:54px}
  .i-nb .ico{width:24px;height:24px}
  .i-nb.salir{min-height:50px}
}
/* ── tableta vertical y menor: barra de iconos, cuadrícula de 1–2 columnas ── */
@media (max-width:900px){
  .shell .i-nav{width:84px;padding:14px 0;align-items:center}
  .i-nb,.i-pb,.i-ib{width:68px;min-height:64px;padding:0;justify-content:center}
  .i-nb span:not(.i-insignia),.i-pb > span:nth-child(2),.i-ib span:not(.i-insignia),
  .i-gh,.i-sub{display:none}
  .i-pb .i-insignia{position:absolute;top:4px;right:2px}
  .i-ng-barra{display:none}
  .i-pie{flex-direction:column;width:72px}
  .i-pie .i-btn{padding:0 6px;font-size:13px}
  .i-grid,.i-grid.tres,.i-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .i-card.ancha{grid-column:1 / -1}
  .i-heroe{flex-wrap:wrap;padding:18px}
  .i-heroe-t{font-size:22px}
}
@media (max-width:600px){
  .i-grid,.i-grid.dos,.i-grid.tres,.i-lotes{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:no-preference){
  .i-card,.i-col,.i-heroe,.i-kpi{animation:i-entra .28s var(--suave,ease-out) both}
  @keyframes i-entra{from{opacity:0;transform:translateY(4px)}}
}