/* ── TRAZA · marco de cocina para Rail, Panell y Torn ───────────────
   Con una disposición de paneles (body.shell-on), todas las pantallas de
   cocina van dentro del mismo marco: barra marfil arriba, menú lateral fijo a
   la izquierda y el contenido a la derecha, en el tono de la marca. Aquí solo
   se reviste lo que ya existe (variables y selectores de app.css): ninguna
   pantalla cambia su HTML. Rojo, ámbar y verde siguen diciendo lo mismo.
   Sin body.shell-on (CLASSIC) nada de esto aplica. */
body.shell-on{
  --bg:#F4F0E1; --panel:#fff; --ink:#1E1A17; --muted:#6B6255; --acc:#A87A3E; --linea:#EDE4CF;
  --s-borde-btn:#E2D6BC; --s-oro-claro:#F3E8D3; --s-oro-tinta:#6E4F24; --s-cintillo:#8A5F28;
  --sombra:0 1px 2px rgba(30,26,23,.05),0 3px 10px rgba(30,26,23,.05); --sombra-baja:0 1px 1px rgba(30,26,23,.07);
  --radio:16px;
  background:var(--bg)}
body.shell-panell{--bg:#EFEADB}
body.shell-torn{--bg:#EAE4D3}

/* ── barra de arriba: marfil, mismos contenidos ───────────────── */
/* baja (52 px) y solo lo necesario: quién, el idioma y el estado de la red y de la cola.
   La marca va al pie del menú lateral (.shell-marca). */
.shell-on .bar{height:var(--i-alto-bar);min-height:0;padding:0 14px;gap:10px;background:#FFFDF8;color:var(--ink);border-bottom:1px solid #E6DCC6}
.shell-on .bar .bar-logo,.shell-on .bar .bar-trama{display:none!important}
.shell-on #operario{font-size:16px;font-weight:700}
.shell-on .bar .pill{padding:3px 10px;font-size:13px}
.shell-on .idioma{border:1px solid #DDD4BE;border-radius:12px;background:#fff}
.shell-on .idioma button{color:var(--muted);opacity:1}
.shell-on .idioma button.activo{background:#EADBC0;color:var(--ink)}
.shell-on .pill.on{background:#E3F1E7;color:#1E6B37}

/* ── marco: menú lateral + contenido ──────────────────────────── */
main:has(> .shell){max-width:none;margin:0;padding:0}
.shell{display:flex;min-height:calc(100dvh - var(--i-alto-bar))}
.shell-rail .i-nav{width:136px;padding:12px 0}
.shell-panell .i-nav{width:300px;align-items:stretch;padding:10px 14px 14px}
.shell-torn .i-nav{width:120px;gap:12px;padding:12px 0}
.shell-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px;padding:24px 32px}
.shell-torn .shell-main{padding:20px 26px}
.shell-contenido{min-width:0}
.shell-tira[hidden]{display:none}

/* marca al pie del menú, a lo ancho de cada menú */
.shell-marca{display:flex;justify-content:center;align-items:center;padding:6px 0 8px}
.shell-marca img{display:block;object-fit:contain;border-radius:12px}
.shell-rail .shell-marca img{width:96px;max-height:96px}
.shell-panell .shell-marca img{width:150px;max-height:80px}
.shell-torn .shell-marca img{width:84px;max-height:84px}
.shell-trama{font-size:15px;color:var(--ink);--wm-acento:var(--acc)}
.shell-torn .shell-trama{font-size:13px}
.shell-tira .i-chip{min-height:48px;font-size:14px}
.shell-tira .i-chip strong{font-size:16px}

/* la pantalla en la que se está: dorado suave con su filete */
.i-nb.activo{background:var(--i-activo);color:var(--i-activo-tx);box-shadow:inset 4px 0 0 var(--i-acento)}
.i-pb.activo{background:var(--i-activo);box-shadow:inset 4px 0 0 var(--i-acento)}
.i-ib.activo{background:var(--i-activo);color:var(--i-activo-tx);box-shadow:inset 0 0 0 2px var(--i-acento)}
.i-pie .i-btn{border-color:var(--s-borde-btn)}
.i-pie .i-btn.activo{background:var(--i-activo)}

/* cintillo del grupo encima del título: «ELABORAR · RECEPCIÓ» */
.shell-cintillo{margin:2px 2px 0;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--s-cintillo)}
.shell-cintillo.g_camara{color:var(--frio)}
.shell-cintillo.g_control{color:var(--ok)}
.shell-contenido h1{margin:4px 2px 16px;font-size:32px;font-weight:700;letter-spacing:-.01em}

/* el «Volver al menú» de abajo sobra: «Inici» está siempre a la vista. Los
   «Volver» de un paso intermedio (a la lista anterior) se quedan. */
.shell-on .btn.salir-menu[data-go="menu"],.shell-on .btn.vuelve-menu{display:none}

/* ── contenido de las pantallas: superficies cálidas, acento dorado ── */
.shell-on .btn{border-color:var(--s-borde-btn)}
.shell-on .btn.primary,.shell-on .mini.primary,.shell-on .pill-ahora{color:var(--ink)}
.shell-on .btn.salir-menu{border-color:var(--s-borde-btn)}
.shell-on .btn.mosaico{border-color:var(--linea)}
.shell-on .btn.mosaico.primary{background:var(--acc);border-color:var(--acc);box-shadow:0 1px 2px rgba(110,79,36,.2),0 6px 16px rgba(110,79,36,.16)}
.shell-on .btn.mosaico.primary .chip{background:rgba(255,255,255,.24);color:var(--ink)}
.shell-on .btn.mosaico.primary .tit{color:var(--ink)}
.shell-on .btn.mosaico.primary .sub{color:rgba(30,26,23,.8)}
.shell-on .chip{background:var(--s-oro-claro);color:var(--s-oro-tinta)}
.shell-on .btn.mosaico.urgente .chip{background:#FCECEA;color:var(--stop)}
.shell-on .btn.mosaico.alerta .chip{background:rgba(255,255,255,.16);color:#fff}
.shell-on .btn.mosaico.en-marcha{border-color:var(--s-borde-btn)}
.shell-on .barra-proc,.shell-on .ahora-barra{background:#EDE5D0}
.shell-on .grupo h2 .n{background:#EDE5D0}
.shell-on .card{border-color:var(--linea);border-radius:var(--radio)}
.shell-on .mini,.shell-on .tarjeta-lote .mini,.shell-on .lista li > .mini{border:2px solid var(--s-borde-btn)}
.shell-on .mini.primary,.shell-on .lista li > .mini.primary{border-color:var(--acc)}
.shell-on .tarjeta-lote .mini:active,.shell-on .teclado-codigo button:active,.shell-on .fila-codigo button:active{background:var(--s-oro-claro)}
.shell-on .numpad button,.shell-on .teclado-codigo button,.shell-on .fila-codigo button{border-color:var(--s-borde-btn)}
.shell-on .fila-codigo .modo{background:var(--ink);border-color:var(--ink)}
.shell-on #pasos li::before,.shell-on #pcc li::before{background:var(--s-oro-claro);color:var(--s-oro-tinta)}
.shell-on .ahora{border-color:#E2CFA8}
.shell-on .ahora-etapa{color:var(--s-cintillo)}
.shell-on .lista.mapa li.ahora-paso{border-color:#E2CFA8;background:#FBF7EC}
.shell-on #pasos.mapa li.ahora-paso::before{background:var(--acc);color:var(--ink)}
.shell-on #pasos.mapa li.despues::before{background:#F4F0E1}
.shell-on .previa-marco{background:#E6DCC6}
.shell-on .foto-mini{background:#EDE5D0}

/* Torn con calidad (Torn, nueve destinos y salir) en 800 px de alto: botones de 52 px, sin bajar de 48. */
.shell .i-nav{overflow-x:hidden}
@media (max-height:860px){
  .shell-torn .i-nav{gap:8px}
  .shell-torn .i-ng > div{gap:4px}
  .shell-torn .i-ib{min-height:50px;gap:2px}
  .shell-torn .shell-marca img{width:76px;max-height:76px}
  .shell-torn .i-ib .ico{width:24px;height:24px}
  .shell-torn .i-ib.salir{min-height:48px}
  /* Panell con calidad: grupos, nueve destinos, la marca y el pie en 800 px. */
  .shell-panell .i-pb{min-height:48px}
  .shell-panell .i-gh{margin-top:6px}
  .shell-panell .shell-marca img{max-height:64px}
  .shell-panell .i-pie .i-btn{min-height:48px}
}
@media (max-width:900px){
  .shell-main,.shell-torn .shell-main{padding:16px}
  .shell-contenido h1{font-size:26px}
}