/* BAR BOX · una sola hoja de diseño para toda la aplicación.
 *
 * Desde 0.7 (rediseño en tarjetas) el mundo es claro y suave: superficies
 * del mismo tono que el fondo que se levantan con sombra (luz arriba a la
 * izquierda, sombra abajo a la derecha) y se hunden al presionarlas.
 *
 * Reglas que no se rompen aquí:
 * - Sin recursos externos: ni fuentes ni imágenes de fuera. La barra
 *   tiene que funcionar sin internet, y la CSP sólo permite 'self'.
 * - Sin estilos en línea en las plantillas: la CSP prohíbe style="...".
 *   Por eso las casillas del mapa y los porcentajes son clases (.gx3, .p50).
 * - Ningún estado depende sólo del color: siempre hay palabra, forma,
 *   borde o sombra distinta.
 * - Texto con contraste AA (4.5:1 o más) sobre --fondo y --hueco. Si cambias
 *   un color de texto, vuelve a medirlo.
 * - Todo toque cómodo con el pulgar: 44 px de alto mínimo en lo tocable.
 * - Estados de lo tocable: normal (--sombra-1/2), hover (un nivel más),
 *   presionado (--sombra-dentro), deshabilitado (sin sombra, borde
 *   punteado) y :focus-visible (anillo --anillo, siempre).
 */

:root{
  /* Superficies */
  --fondo:#ECEDEF; --superficie:#ECEDEF; --superficie-alta:#F5F6F8; --hueco:#E1E3E7;
  /* Texto (contraste medido sobre --fondo / --hueco) */
  --tinta:#1E2329;       /* 13.5 / 12.3 */
  --tenue:#555D66;       /*  5.7 /  5.2 */
  --tenue-alto:#3F464E;  /*  8.2 /  7.4 */
  --oro:#7A5608;         /*  5.7 /  5.2  acento: títulos, activo */
  --oro-suave:#7E6019;   /*  sólo iconos y bordes */
  --oro-claro:#E9DDBF;
  --frio:#0B6660; --alarma:#A3301C; --verde:#2E6B35;
  --apagado:#8A9098;     /* deshabilitado: menos contraste a propósito */
  --linea:#C3C8CF; --linea-suave:#D5D9DE;
  --anillo:#1F4FC4;
  /* Sombras: luz arriba-izquierda, sombra abajo-derecha */
  --luz:#FFFFFF; --sombra-color:#BCC1C9;
  --sombra-1:-3px -3px 6px var(--luz),3px 3px 6px var(--sombra-color);
  --sombra-2:-5px -5px 12px var(--luz),5px 5px 12px var(--sombra-color);
  --sombra-3:-9px -9px 20px var(--luz),9px 9px 20px var(--sombra-color);
  --sombra-dentro:inset 3px 3px 7px var(--sombra-color),inset -3px -3px 7px var(--luz);
  /* Bordes, radio y espacio */
  --borde-fino:1px; --borde-medio:1.5px; --borde-grueso:2px;
  --radio:18px;
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,-apple-system,sans-serif;
  color-scheme:light;
}

*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0; background:var(--fondo); color:var(--tinta);
  font-family:var(--sans); font-size:15px; line-height:1.55;
  -webkit-text-size-adjust:100%;
}
a{color:inherit; text-decoration:none}
main a:not(.boton):not(.button):not(.item):not(.mesa):not(.record){color:var(--oro); text-decoration:underline; text-underline-offset:3px}
/* Enlaces sueltos dentro del texto: el área de toque crece sin mover el texto. */
main p a,main td a,footer a{padding-block:var(--e3)}
h1,h2,h3{font-family:var(--serif); font-weight:400; line-height:1.15; margin:0}
h1{font-size:clamp(26px,5vw,40px); letter-spacing:.02em; margin:6px 0 14px}
h2{font-size:22px; margin:6px 0 12px}
h3{font-size:18px; margin:5px 0}
p{margin:0 0 12px}
small{font-size:12px}
.eyebrow{font:600 11px/1.4 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--tenue); margin:0}
.hint,.nota,.intro{font-size:13px; color:var(--tenue); line-height:1.5}
.prewrap{white-space:pre-wrap}
.num,td.num{font-variant-numeric:tabular-nums}
.crest,.sello,.brand img,.emblem img{filter:brightness(.55) saturate(1.3)}   /* el emblema es oro claro: sobre fondo claro se oscurece */

/* --- Estados comunes de lo tocable ------------------------------------ */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,.mesa:focus-visible,.item:focus-visible{
  outline:3px solid var(--anillo); outline-offset:3px;
}

/* --- Armazón: cabecera, capítulos, contenido ----------------------- */
header{
  min-height:70px; padding:var(--e3) 4%; background:var(--superficie);
  box-shadow:0 4px 12px -6px var(--sombra-color);
  display:flex; align-items:center; justify-content:space-between; gap:var(--e4); flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:13px; min-height:44px; font:20px var(--serif); letter-spacing:.3em; color:var(--oro)}
.brand small{display:block; font:9px var(--sans); letter-spacing:.2em; color:var(--tenue); margin-top:5px}
.edition{font:11px var(--sans); letter-spacing:.2em; color:var(--tenue)}
.edition b{font:22px var(--serif); margin-left:12px; color:var(--oro)}

.layout{display:grid; grid-template-columns:1fr; max-width:1500px; margin:auto}
@media(min-width:860px){ .layout{grid-template-columns:240px 1fr} }

nav{padding:var(--e4) var(--e3); background:var(--superficie)}
@media(min-width:860px){ nav{padding:var(--e6) var(--e4); min-height:calc(100vh - 70px)} }
nav .eyebrow{margin:0 10px 14px}
@media(max-width:859px){
  nav .eyebrow{display:none}
  nav{display:flex; gap:var(--e2); overflow-x:auto; overscroll-behavior-x:contain; padding:var(--e3)}
  nav>a{flex:none; white-space:nowrap}
  .navfoot{display:none}
}
nav>a{
  display:flex; align-items:center; gap:var(--e3); padding:var(--e3); margin:var(--e2) 0;
  font:14px var(--sans); color:var(--tenue-alto); border-radius:var(--radio);
  border:var(--borde-fino) solid transparent; min-height:44px;
  box-shadow:var(--sombra-1); transition:box-shadow .18s;
}
@media(max-width:859px){ nav>a{margin:var(--e1) 0} }
nav>a span{color:var(--oro-suave); font-size:16px}
nav>a:hover{box-shadow:var(--sombra-2); color:var(--tinta)}
nav>a:active{box-shadow:var(--sombra-dentro)}
/* Activo: hundido, borde y negrita (no sólo color). */
nav>a.active{box-shadow:var(--sombra-dentro); color:var(--oro); border-color:var(--oro-suave); font-weight:700}
nav>a.active span{color:var(--oro)}
.navfoot{margin:40px 10px 0; font:11px var(--sans); color:var(--tenue)}
.navfoot p{margin-top:12px; font:italic 13px/1.6 var(--serif); color:var(--tenue-alto)}
.dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--verde); margin-right:5px}
.quien{font:12px var(--sans); color:var(--tenue); margin:0 0 10px}
.quien a{display:inline-flex; align-items:center; min-height:44px; color:var(--oro); text-decoration:underline}
.salir{display:inline; margin:0}
.region{font:12px var(--sans); margin:0}
.region a{display:inline-flex; align-items:center; min-height:44px; color:var(--tenue); margin-right:10px}
.region a[aria-current]{color:var(--oro); font-weight:700; text-decoration:underline}

main{padding:var(--e5) var(--e4) 40px; min-width:0}
@media(min-width:860px){ main{padding:var(--e6) 34px 50px} }
main>footer{
  margin-top:34px; padding-top:var(--e4); border-top:var(--borde-fino) solid var(--linea-suave);
  font:12px var(--sans); color:var(--tenue);
}

/* --- Envoltura de las pantallas de ventas -------------------------- */
.envoltura{max-width:1080px; margin:0 auto; padding:max(18px,env(safe-area-inset-top)) var(--e4) max(28px,env(safe-area-inset-bottom))}
.envoltura>footer{margin-top:var(--e6); font:12px var(--sans); color:var(--tenue); line-height:2}
.envoltura>footer a{color:var(--oro); text-decoration:underline}
.hud{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  padding:14px var(--e4); margin-bottom:22px;
  border-radius:var(--radio); background:var(--superficie); box-shadow:var(--sombra-2);
}
.hud .volver{display:inline-flex; align-items:center; min-height:44px; font:600 12px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--tenue-alto)}
.hud .volver:hover{color:var(--oro)}
.hud h1{margin:0; font:400 20px var(--serif); letter-spacing:.18em; color:var(--oro)}
.hud .fecha{font:12px var(--sans); letter-spacing:.05em; color:var(--tenue); line-height:1.5}
.hud .fecha a{color:var(--oro)}
.crece{flex:1}

/* --- Paneles y tarjetas -------------------------------------------- */
.panel,.paper{
  border-radius:var(--radio); background:var(--superficie); box-shadow:var(--sombra-2);
  padding:var(--e5) 18px; margin:0 0 var(--e5);
}
.panel h2,.paper h2{margin:0 0 4px}
.panel .pie{font:12px var(--sans); color:var(--tenue); margin:0 0 14px; line-height:1.5}
.sectionhead{display:flex; justify-content:space-between; align-items:flex-start; gap:var(--e4); flex-wrap:wrap}
.textlink{display:inline-flex; align-items:center; min-height:44px; font:12px var(--sans); letter-spacing:.08em; white-space:nowrap; color:var(--oro)}
.dos{display:grid; grid-template-columns:1fr; gap:var(--e5)}
@media(min-width:860px){ .dos{grid-template-columns:1.05fr .95fr} }
.items{display:grid; grid-template-columns:1fr; gap:var(--e4)}
@media(min-width:720px){ .items{grid-template-columns:repeat(2,minmax(0,1fr))} }
.item{margin:0}

/* --- Portada del puesto de mando ----------------------------------- */
.hero{
  position:relative; overflow:hidden; display:flex; flex-wrap:wrap; gap:20px;
  justify-content:space-between; align-items:center;
  background:var(--superficie); padding:28px var(--e5);
  color:var(--tinta); border-radius:var(--radio); box-shadow:var(--sombra-3);
  margin-bottom:var(--e5);
}
.hero h1{font-size:clamp(26px,4.2vw,40px)}
.hero .eyebrow{color:var(--oro)}
.hero p:not(.eyebrow){color:var(--tenue-alto); font-size:14px}
.emblem{display:grid; justify-items:center; gap:var(--e4); margin:0 auto}
.emblem span{font:9px var(--sans); letter-spacing:.25em; color:var(--tenue); white-space:nowrap}

.stats{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--e4); margin:0 0 var(--e5)}
@media(min-width:720px){ .stats{grid-template-columns:repeat(4,1fr)} }
.stats article{background:var(--superficie); padding:var(--e4) 18px; border-radius:var(--radio); box-shadow:var(--sombra-1)}
.stats span{font:600 10px var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--tenue)}
.stats strong{display:block; font:34px var(--serif); margin-top:8px; color:var(--tinta)}
.stats p{font:12px var(--sans); color:var(--tenue); margin:4px 0 0}
.red{color:var(--alarma)} .amber{color:var(--oro)} .positive{color:var(--frio)} .negative{color:var(--alarma)}

.supply{
  padding:14px 0; border-top:var(--borde-fino) solid var(--linea-suave);
  display:flex; align-items:center; justify-content:space-between; gap:var(--e3); flex-wrap:wrap;
}
.supply h3{display:inline-block; margin-left:10px}
.supply small{display:block; color:var(--tenue); font-size:12px}
.order{text-align:right}
.order small{font:10px var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--tenue)}
.order strong{display:block; font:24px var(--serif); color:var(--oro)}
.order strong small{display:inline; font:12px var(--sans); color:var(--tenue)}

.bottomcards{display:grid; grid-template-columns:1fr; gap:var(--e4)}
@media(min-width:720px){ .bottomcards{grid-template-columns:1fr 1fr} }
.bottomcards>a{
  display:flex; align-items:center; gap:var(--e4); padding:var(--e4) 18px; min-height:44px;
  border-radius:var(--radio); background:var(--superficie); color:var(--tinta);
  box-shadow:var(--sombra-2); transition:box-shadow .18s,transform .18s;
}
.bottomcards>a:hover{box-shadow:var(--sombra-3)}
.bottomcards>a:active{box-shadow:var(--sombra-dentro); transform:translateY(1px)}
.bottomcards>a>span{font-size:22px; color:var(--oro-suave)}
.bottomcards h3{font-size:17px}
.bottomcards p{font:12px var(--sans); margin:4px 0 0; color:var(--tenue)}

.stock{font:38px var(--serif); margin:14px 0; color:var(--tinta)}
.stock small{font:15px var(--sans); color:var(--tenue)}
.comparison{font-size:12px; color:var(--tenue)}

/* --- Botones y formularios ----------------------------------------- */
.boton,.button,button{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--e2);
  min-height:44px; padding:11px 18px; cursor:pointer;
  border:var(--borde-medio) solid var(--oro-suave); border-radius:var(--radio);
  background:var(--superficie); color:var(--oro); box-shadow:var(--sombra-1);
  font:600 12px var(--sans); letter-spacing:.14em; text-transform:uppercase;
  transition:box-shadow .18s,transform .18s;
}
.boton:hover,.button:hover,button:hover{box-shadow:var(--sombra-2)}
.boton:active,.button:active,button:active{box-shadow:var(--sombra-dentro); transform:translateY(1px)}
.boton.gold,.button.gold{background:var(--oro); border-color:var(--oro); color:#fff}
.boton.gold:active,.button.gold:active{box-shadow:inset 3px 3px 7px #4a3405,inset -3px -3px 7px #9b7420}
.boton.suave,.button.ghost,.boton.ghost{border-color:var(--linea); color:var(--tenue-alto)}
.boton.riesgo{border-color:var(--alarma); border-width:var(--borde-grueso); color:var(--alarma)}
/* Deshabilitado: sin sombra, borde punteado, menos contraste. */
.boton:disabled,.button:disabled,button:disabled,.boton[aria-disabled=true]{
  box-shadow:none; transform:none; cursor:not-allowed;
  border-style:dashed; border-color:var(--linea); background:var(--superficie); color:var(--apagado);
}
.acciones,.formactions{display:flex; flex-wrap:wrap; gap:10px; margin-top:var(--e4); align-items:center}

form{margin-top:14px}
label{display:block; font:600 11px var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--tenue); margin:14px 0 6px}
input,select,textarea{
  display:block; width:100%; min-height:46px; padding:11px var(--e3); margin:0;
  border:var(--borde-fino) solid var(--linea); border-radius:var(--e3);
  background:var(--hueco); color:var(--tinta); font:16px var(--sans);
  box-shadow:var(--sombra-dentro);
}
textarea{resize:vertical; min-height:110px; line-height:1.55}
input:focus,select:focus,textarea:focus{border-color:var(--oro)}
input:disabled,select:disabled,textarea:disabled{box-shadow:none; border-style:dashed; color:var(--apagado)}
input::placeholder,textarea::placeholder{color:#5E656D}
/* Casilla con su texto al lado (la propina): se lee como frase, no como rótulo,
   y el toque cubre todo el renglón. */
label.casilla{display:flex; align-items:center; gap:10px; min-height:44px; font:500 15px var(--sans);
  letter-spacing:0; text-transform:none; color:inherit; cursor:pointer}
label.casilla input{width:22px; height:22px; min-height:0; margin:0; padding:0; flex:none; box-shadow:none; accent-color:var(--oro)}
.fila,.gridform{display:grid; grid-template-columns:1fr; gap:10px 14px; align-items:end}
@media(min-width:560px){ .fila,.gridform{grid-template-columns:repeat(2,minmax(0,1fr))} }
.wide{grid-column:1/-1}
/* Nuevo producto: «tal cual» o «con ingredientes», cada bloque a todo lo ancho. */
.gridform fieldset{grid-column:1/-1; display:grid; grid-template-columns:inherit; gap:10px 14px; align-items:end;
  margin:0; padding:var(--e3); border:var(--borde-fino) solid var(--linea); border-radius:var(--e3)}
.gridform fieldset legend,.gridform fieldset .hint{grid-column:1/-1; padding:0 6px}
summary{display:flex; align-items:center; cursor:pointer; padding:10px 0; min-height:44px; font:13px var(--sans); color:var(--tenue-alto)}
summary:hover{color:var(--oro)}

/* "Salir" es un botón con aspecto de enlace: sin relieve, pero 44 px. */
.salir button{
  border:0; background:none; box-shadow:none; color:var(--alarma); font:12px var(--sans);
  letter-spacing:0; text-transform:none; padding:0 var(--e1); text-decoration:underline;
}
.salir button:hover,.salir button:active{box-shadow:none; transform:none}

/* --- Tablas, registros y avisos ------------------------------------ */
/* Una tabla ancha se desplaza dentro de su caja; el cuerpo de la página no. */
.tabla{overflow-x:auto; overscroll-behavior-x:contain; margin:0 -4px; padding:0 4px}
.tabla table{min-width:520px}
table{width:100%; border-collapse:collapse; font-size:14px}
th{
  text-align:left; font:600 11px var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--tenue); padding:0 8px 8px 0; border-bottom:var(--borde-medio) solid var(--linea);
}
td{padding:11px 8px 11px 0; border-bottom:var(--borde-fino) solid var(--linea-suave); vertical-align:top}
td small{color:var(--tenue)}
.autor{color:var(--tenue)}

.record{
  display:flex; justify-content:space-between; gap:18px; align-items:center; flex-wrap:wrap;
  min-height:44px; padding:14px var(--e2); border-bottom:var(--borde-fino) solid var(--linea-suave); color:var(--tinta);
  border-radius:var(--e3);
}
a.record:hover{background:var(--superficie-alta)}
a.record:active{box-shadow:var(--sombra-dentro)}
.paper.record{padding:18px; border-bottom:0}

.notice,.aviso{
  border-left:var(--borde-grueso) solid var(--oro); background:var(--oro-claro); color:var(--tinta);
  padding:var(--e3) var(--e4); margin:0 0 18px; font-size:14px; border-radius:0 var(--e3) var(--e3) 0;
}
.empty,.vacio{
  text-align:center; padding:30px 18px; border:var(--borde-medio) dashed var(--linea);
  border-radius:var(--radio); color:var(--tenue);
}
.empty>span,.vacio>span{font-size:38px; color:var(--oro-suave); display:block; margin-bottom:6px}
.empty h3,.vacio strong{display:block; font:400 20px var(--serif); color:var(--tinta); margin-bottom:6px}
.empty p,.vacio p{max-width:52ch; margin:0 auto 14px; font-size:13px}

.badge,.etiqueta{
  display:inline-block; padding:3px 9px; border:var(--borde-fino) solid currentColor; border-radius:999px;
  font:600 10px var(--sans); letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;
  color:var(--tenue); background:var(--superficie-alta);
}
.badge.danger,.etiqueta.alarma{color:var(--alarma); border-width:var(--borde-grueso)}
.badge.warn,.etiqueta.oro{color:var(--oro); border-width:var(--borde-medio)}
.badge.good,.etiqueta.frio{color:var(--frio)}
.etiqueta.gris{color:var(--tenue)}

/* --- Mapa de mesas -------------------------------------------------- */
.salon{margin:0 0 30px}
.salon>h2{
  display:flex; align-items:center; gap:var(--e3); margin:0 0 14px;
  font:400 13px var(--sans); letter-spacing:.28em; text-transform:uppercase; color:var(--tenue);
}
.salon>h2::after{content:''; flex:1; height:1px; background:linear-gradient(90deg,var(--linea),transparent)}

.mapa{overflow-x:auto; overscroll-behavior-x:contain; padding:var(--e3) var(--e2) var(--e4)}
.rejilla{
  display:grid;
  grid-auto-rows:minmax(120px,auto);   /* auto: una mesa nunca se monta sobre la de abajo */
  gap:18px;
  width:max-content; min-width:100%;
  background-image:linear-gradient(#0000000d 1px,transparent 1px),linear-gradient(90deg,#0000000d 1px,transparent 1px);
  background-size:138px 138px; background-position:-1px -1px;
  padding:6px;
}

.mesa{
  position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:4px;
  min-height:120px; padding:14px 13px;
  border:var(--borde-medio) solid var(--linea-suave); border-radius:var(--radio); background:var(--superficie);
  color:var(--tinta); overflow:hidden; box-shadow:var(--sombra-2);
  transition:box-shadow .18s,transform .18s;
}
.mesa.redonda{border-radius:50%; align-items:center; text-align:center; justify-content:center; padding:16px 10px}
.mesa.barra{border-radius:6px; border-left:3px solid var(--oro-suave)}
.mesa:hover{box-shadow:var(--sombra-3)}
.mesa:active{box-shadow:var(--sombra-dentro); transform:translateY(1px)}
.mesa .nombre{font:400 17px/1.2 var(--serif); letter-spacing:.02em; overflow-wrap:anywhere}
.mesa.redonda .nombre{font-size:15px}
.mesa .puestos{font:10px var(--sans); letter-spacing:.12em; color:var(--tenue)}
.mesa .cifra{font:600 14px var(--sans); color:var(--tinta); font-variant-numeric:tabular-nums}
.mesa .estado{font:10px var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--tenue)}
.mesa .pip{position:absolute; top:11px; right:11px; width:10px; height:10px; transform:rotate(45deg); border:var(--borde-medio) solid var(--tenue)}
.mesa.redonda .pip{top:14px; right:auto; left:50%; margin-left:-5px}

/* Estados: borde + forma del rombo + palabra. Nunca sólo color. */
.mesa.libre{box-shadow:var(--sombra-1); border-style:dashed; border-color:var(--linea)}
.mesa.libre .pip{border-style:dashed}
.mesa.sentados{border-color:var(--frio)}
.mesa.sentados .pip{border-color:var(--frio)}
.mesa.servida{border-color:var(--oro-suave); border-width:var(--borde-grueso)}
.mesa.servida .pip{border-color:var(--oro); background:var(--oro)}
.mesa.servida .estado{color:var(--oro)}
.mesa.cuenta{border-color:var(--alarma); border-width:var(--borde-grueso)}
.mesa.cuenta .pip{border-color:var(--alarma); background:var(--alarma); animation:latido 1.8s ease-in-out infinite}
.mesa.cuenta .estado{color:var(--alarma); font-weight:700}
@keyframes latido{50%{opacity:.25}}

@media(max-width:520px){
  .rejilla{grid-auto-rows:minmax(104px,auto); gap:14px; background-size:118px 118px}
  .mesa{min-height:104px; padding:12px 11px}
  .mesa .nombre{font-size:15px}
}

/* --- Meta del día y anillos ---------------------------------------- */
.meta{display:flex; align-items:center; gap:var(--e3)}
.anillo{
  --p:0; position:relative; width:54px; height:54px; border-radius:50%; flex:none;
  background:conic-gradient(var(--oro) calc(var(--p)*1%),var(--linea-suave) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent 68%,#000 69%);
  mask:radial-gradient(farthest-side,transparent 68%,#000 69%);
}
.anillo.completo{background:conic-gradient(var(--frio) 100%,var(--frio) 0)}
.meta b{display:block; font:600 16px var(--sans); color:var(--tinta)}
.meta span{font:11px var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--tenue)}
.meta em{font-style:normal; color:var(--oro)}

/* --- Cuenta de una mesa y pedidos ----------------------------------- */
.renglon{display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:var(--borde-fino) solid var(--linea-suave); flex-wrap:wrap}
.renglon:last-of-type{border-bottom:0}
.renglon .q{
  flex:none; width:32px; height:32px; display:grid; place-items:center;
  border-radius:var(--e2); box-shadow:var(--sombra-dentro); font:600 13px var(--sans); color:var(--oro);
}
.renglon .txt{flex:1; min-width:120px}
.renglon .txt b{display:block; font:400 15px var(--serif)}
.renglon .txt small{font:12px var(--sans); color:var(--tenue)}
.renglon .val{font:600 14px var(--sans); font-variant-numeric:tabular-nums}
.renglon form{margin:0}
.renglon .boton{padding:7px 12px; font-size:11px}
.total{
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--e3);
  margin-top:14px; padding-top:14px; border-top:var(--borde-medio) solid var(--linea);
}
.total span{font:11px var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--tenue)}
.total strong{font:400 28px var(--serif); color:var(--oro); font-variant-numeric:tabular-nums}

#carta h3{margin:var(--e4) 0 0; font:600 13px var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--tenue-alto)}
.carta{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:var(--e3); margin-top:6px}
.carta form{margin:0}
.carta button{
  display:flex; flex-direction:column; align-items:flex-start; gap:3px; width:100%;
  padding:13px; border:var(--borde-fino) solid var(--linea-suave); border-radius:var(--radio); background:var(--superficie);
  color:var(--tinta); text-align:left; font:15px var(--serif); text-transform:none; letter-spacing:0;
  min-height:76px;
}
.carta button small{font:11px var(--sans); letter-spacing:.06em; color:var(--tenue); text-transform:none}
.carta button b{font:600 13px var(--sans); color:var(--oro); font-variant-numeric:tabular-nums}
.carta button:disabled,.carta button:disabled b,.carta button:disabled small{color:var(--apagado)}
.carta button small.justo{color:var(--oro)}
.carta button small.falta{color:var(--alarma); font-weight:700}

/* --- Puerta de entrada ---------------------------------------------- */
.puerta{max-width:420px; min-height:100vh; display:flex; flex-direction:column; justify-content:center; text-align:center}
.puerta .sello{margin:0 auto}
.puerta .marca{font:400 22px var(--serif); letter-spacing:.45em; color:var(--oro); margin:12px 0 22px; padding-left:.45em}
.puerta .panel{text-align:left}
.puerta .acciones .boton{width:100%}

/* --- Menú principal: tarjetas en el orden de app.SECCIONES ------------ */
body.menu{overflow-x:hidden}
.stage{
  min-height:100vh; display:flex; flex-direction:column; align-items:center;
  padding:max(var(--e6),env(safe-area-inset-top)) var(--e4) max(var(--e5),env(safe-area-inset-bottom));
  text-align:center;
}
.kicker{font:600 11px var(--sans); letter-spacing:.35em; color:var(--tenue); margin:14px 0 0}
.stage h1{margin:6px 0 var(--e5); font-weight:400; font-size:clamp(28px,6vw,44px); letter-spacing:.3em; color:var(--oro); padding-left:.3em}
.cmd{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--e4);
  width:100%; max-width:960px; margin:0 0 var(--e5); padding:0; list-style:none;
}
@media(min-width:900px){ .cmd{grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--e5)} }
.cmd li{display:flex}
.cmd .item{
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--e1); width:100%;
  min-height:132px; padding:var(--e4); text-align:left;
  border:var(--borde-fino) solid var(--linea-suave); border-radius:var(--radio);
  background:var(--superficie); color:var(--tinta); box-shadow:var(--sombra-2);
  transition:box-shadow .18s,transform .18s;
}
.cmd .item:hover{box-shadow:var(--sombra-3)}
.cmd .item:active{box-shadow:var(--sombra-dentro); transform:translateY(1px)}
.cmd .icono{
  display:grid; place-items:center; width:44px; height:44px; margin-bottom:var(--e2);
  border-radius:var(--e3); box-shadow:var(--sombra-dentro); font-size:20px; color:var(--oro-suave);
}
.cmd .name{font:clamp(17px,4.4vw,22px)/1.2 var(--serif); color:var(--tinta)}
.cmd .item small{font:12px/1.4 var(--sans); color:var(--tenue)}
.tag{
  margin-top:auto; padding:3px 9px; border:var(--borde-medio) solid currentColor; border-radius:999px;
  font:600 10px var(--sans); font-style:normal; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tenue); background:var(--superficie-alta);
}
.tag.danger{color:var(--alarma); border-width:var(--borde-grueso)}
.tag.warn{color:var(--oro)}
.tag.danger::before{content:'! '}   /* además de color y borde, un signo */
.stage .hint a{display:inline-flex; align-items:center; min-height:44px; color:var(--oro); text-decoration:underline; font-weight:600}
.stage .quien{margin-top:var(--e3)}

/* --- Tamaño real de la sala ------------------------------------------
 * La rejilla admite 12 x 12 casillas, pero se dibuja sólo hasta donde
 * llega tu última mesa: un bar de cuatro mesas no obliga a arrastrar el
 * dedo por doce columnas vacías. */
.rejilla.c1{grid-template-columns:repeat(1,120px)}.rejilla.c2{grid-template-columns:repeat(2,120px)}.rejilla.c3{grid-template-columns:repeat(3,120px)}.rejilla.c4{grid-template-columns:repeat(4,120px)}
.rejilla.c5{grid-template-columns:repeat(5,120px)}.rejilla.c6{grid-template-columns:repeat(6,120px)}.rejilla.c7{grid-template-columns:repeat(7,120px)}.rejilla.c8{grid-template-columns:repeat(8,120px)}
.rejilla.c9{grid-template-columns:repeat(9,120px)}.rejilla.c10{grid-template-columns:repeat(10,120px)}.rejilla.c11{grid-template-columns:repeat(11,120px)}.rejilla.c12{grid-template-columns:repeat(12,120px)}
@media(max-width:520px){.rejilla.c1{grid-template-columns:repeat(1,104px)}.rejilla.c2{grid-template-columns:repeat(2,104px)}.rejilla.c3{grid-template-columns:repeat(3,104px)}.rejilla.c4{grid-template-columns:repeat(4,104px)}.rejilla.c5{grid-template-columns:repeat(5,104px)}.rejilla.c6{grid-template-columns:repeat(6,104px)}.rejilla.c7{grid-template-columns:repeat(7,104px)}.rejilla.c8{grid-template-columns:repeat(8,104px)}.rejilla.c9{grid-template-columns:repeat(9,104px)}.rejilla.c10{grid-template-columns:repeat(10,104px)}.rejilla.c11{grid-template-columns:repeat(11,104px)}.rejilla.c12{grid-template-columns:repeat(12,104px)}}
.rejilla.f1{grid-template-rows:repeat(1,minmax(120px,auto))}.rejilla.f2{grid-template-rows:repeat(2,minmax(120px,auto))}.rejilla.f3{grid-template-rows:repeat(3,minmax(120px,auto))}.rejilla.f4{grid-template-rows:repeat(4,minmax(120px,auto))}
.rejilla.f5{grid-template-rows:repeat(5,minmax(120px,auto))}.rejilla.f6{grid-template-rows:repeat(6,minmax(120px,auto))}.rejilla.f7{grid-template-rows:repeat(7,minmax(120px,auto))}.rejilla.f8{grid-template-rows:repeat(8,minmax(120px,auto))}
.rejilla.f9{grid-template-rows:repeat(9,minmax(120px,auto))}.rejilla.f10{grid-template-rows:repeat(10,minmax(120px,auto))}.rejilla.f11{grid-template-rows:repeat(11,minmax(120px,auto))}.rejilla.f12{grid-template-rows:repeat(12,minmax(120px,auto))}
@media(max-width:520px){.rejilla.f1{grid-template-rows:repeat(1,minmax(104px,auto))}.rejilla.f2{grid-template-rows:repeat(2,minmax(104px,auto))}.rejilla.f3{grid-template-rows:repeat(3,minmax(104px,auto))}.rejilla.f4{grid-template-rows:repeat(4,minmax(104px,auto))}.rejilla.f5{grid-template-rows:repeat(5,minmax(104px,auto))}.rejilla.f6{grid-template-rows:repeat(6,minmax(104px,auto))}.rejilla.f7{grid-template-rows:repeat(7,minmax(104px,auto))}.rejilla.f8{grid-template-rows:repeat(8,minmax(104px,auto))}.rejilla.f9{grid-template-rows:repeat(9,minmax(104px,auto))}.rejilla.f10{grid-template-rows:repeat(10,minmax(104px,auto))}.rejilla.f11{grid-template-rows:repeat(11,minmax(104px,auto))}.rejilla.f12{grid-template-rows:repeat(12,minmax(104px,auto))}}

/* --- Casillas del mapa (12 x 12) ------------------------------------ */
.gx1{grid-column:1}.gx2{grid-column:2}.gx3{grid-column:3}.gx4{grid-column:4}.gx5{grid-column:5}.gx6{grid-column:6}
.gx7{grid-column:7}.gx8{grid-column:8}.gx9{grid-column:9}.gx10{grid-column:10}.gx11{grid-column:11}.gx12{grid-column:12}
.gy1{grid-row:1}.gy2{grid-row:2}.gy3{grid-row:3}.gy4{grid-row:4}.gy5{grid-row:5}.gy6{grid-row:6}
.gy7{grid-row:7}.gy8{grid-row:8}.gy9{grid-row:9}.gy10{grid-row:10}.gy11{grid-row:11}.gy12{grid-row:12}

/* --- Avance en pasos de 5% ------------------------------------------ */
.p0{--p:0}.p5{--p:5}.p10{--p:10}.p15{--p:15}.p20{--p:20}.p25{--p:25}
.p30{--p:30}.p35{--p:35}.p40{--p:40}.p45{--p:45}.p50{--p:50}
.p55{--p:55}.p60{--p:60}.p65{--p:65}.p70{--p:70}.p75{--p:75}
.p80{--p:80}.p85{--p:85}.p90{--p:90}.p95{--p:95}.p100{--p:100}

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

/* --- Ciclo de caja (0.7d): cuatro pasos como misiones en orden ---------- */
.pasos{list-style:none; margin:0 0 18px; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; counter-reset:none}
.paso{display:flex; gap:8px; align-items:flex-start; padding:10px 8px; border:var(--borde-medio) solid var(--linea); border-radius:var(--e3); min-width:0}
.paso .num{flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font:600 12px var(--sans); border:1px solid currentColor}
.paso .txt{min-width:0}
.paso b{display:block; font-size:13px; line-height:1.2; overflow-wrap:anywhere}
.paso small{display:block; font-size:11px; color:var(--tenue); overflow-wrap:anywhere}
.paso.hecho{color:var(--frio); border-color:var(--frio)}
.paso.disponible{color:var(--oro); border-color:var(--oro)}
.paso.vacio{color:var(--oro)}
.paso.bloqueado{color:var(--tenue); border-style:dashed}   /* sin opacidad: el texto conserva AA */
@media (max-width:560px){.pasos{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* --- Pedidos (0.7e): cantidad editable dentro de la tabla ----------------- */
form.enlinea{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:0}
form.enlinea input[type=number]{width:7em; margin:0}
td input[type=number]{max-width:7em}

/* --- Inventario: pestañas y grupos por categoría (cambio C) -------- */
.pestanas{display:flex; gap:var(--e2); flex-wrap:wrap; margin:var(--e4) 0}
.pestanas a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 var(--e4);
  font:14px var(--sans); color:var(--tenue-alto); border-radius:var(--radio); box-shadow:var(--sombra-1);
}
.pestanas a[aria-current]{color:var(--oro); box-shadow:var(--sombra-dentro)}
h2.grupo{margin:var(--e5) 0 var(--e3); font-size:18px}
h2.grupo small{font:12px var(--sans); color:var(--tenue)}

/* Inventario en una página: el movimiento de cada tarjeta, a la vista y en una fila. */
.seccion{scroll-margin-top:var(--e4)}
.seccion > h2{margin:var(--e5) 0 var(--e3)}
.seccion > h2 small{font:13px var(--sans); color:var(--tenue)}
.item[id]{scroll-margin-top:var(--e4)}
.mov{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 10px; align-items:end; margin-top:var(--e3)}
.mov button{min-height:44px}
@media(min-width:560px){ .mov{grid-template-columns:auto minmax(0,1fr) minmax(0,2fr) auto} }

/* --- Contabilidad: revisión y gráficas (2026-09-25) -------------------
   Colores de serie validados con el validador de dataviz sobre --fondo:
   azul, naranja, aguamarina, amarillo (CVD ΔE ≥ 9.1 entre vecinos). Tres
   quedan bajo 3:1 de contraste: por eso cada segmento lleva su nombre y
   valor en la leyenda, y las barras tienen su tabla. «Otros» va en gris. */
:root{--serie-1:#2a78d6; --serie-2:#eb6834; --serie-3:#1baf7a; --serie-4:#eda100; --serie-otros:#8A9098}
.revision.pendiente{border-left:var(--borde-grueso) solid var(--alarma)}
.revision h3,.nota-periodo h3,#propinas h3{font:600 13px var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--tenue-alto); margin:var(--e5) 0 var(--e2)}
.grafica-anillo{display:flex; flex-wrap:wrap; gap:var(--e5); align-items:center}
.grafica-anillo svg{width:min(220px,100%); height:auto; flex:0 0 auto}
.grafica-anillo .pista{stroke:var(--hueco)}
.anillo-cifra{font:600 4px var(--sans); fill:var(--tinta)}
.anillo-pie{font:2.6px var(--sans); fill:var(--tenue)}
circle.serie-1{stroke:var(--serie-1)} circle.serie-2{stroke:var(--serie-2)} circle.serie-3{stroke:var(--serie-3)}
circle.serie-4{stroke:var(--serie-4)} circle.serie-otros{stroke:var(--serie-otros)}
.leyenda{list-style:none; margin:0; padding:0; display:grid; gap:var(--e2); flex:1 1 220px; font-size:14px; color:var(--tinta)}
.leyenda li{display:flex; gap:var(--e2); align-items:flex-start}
.muestra{width:12px; height:12px; border-radius:3px; margin-top:4px; flex:0 0 12px}
.muestra.serie-1{background:var(--serie-1)} .muestra.serie-2{background:var(--serie-2)} .muestra.serie-3{background:var(--serie-3)}
.muestra.serie-4{background:var(--serie-4)} .muestra.serie-otros{background:var(--serie-otros)}
.nota-periodo{margin-top:var(--e4); font-size:14px; color:var(--tinta)}
.grafica-barras{width:100%; height:auto; display:block; margin:var(--e3) 0}
.grafica-barras path.serie-1{fill:var(--serie-1)}
.grafica-barras .blanco{fill:transparent}
.grafica-barras g:hover path{fill:var(--anillo)}
.grafica-barras .base{stroke:var(--linea); stroke-width:1}
.grafica-barras .eje{font:9px var(--sans); fill:var(--tenue)}
.grafica-barras .valor{font:600 9px var(--sans); fill:var(--tinta)}

/* --- Plano editable de la sala (2026-09-25) ------------------------------ */
.plano{display:grid; gap:6px; width:max-content; padding:4px}
.plano.c1{grid-template-columns:repeat(1,64px)} .plano.c2{grid-template-columns:repeat(2,64px)} .plano.c3{grid-template-columns:repeat(3,64px)} .plano.c4{grid-template-columns:repeat(4,64px)} .plano.c5{grid-template-columns:repeat(5,64px)} .plano.c6{grid-template-columns:repeat(6,64px)} .plano.c7{grid-template-columns:repeat(7,64px)} .plano.c8{grid-template-columns:repeat(8,64px)} .plano.c9{grid-template-columns:repeat(9,64px)} .plano.c10{grid-template-columns:repeat(10,64px)} .plano.c11{grid-template-columns:repeat(11,64px)} .plano.c12{grid-template-columns:repeat(12,64px)}
@media(max-width:520px){.plano.c1{grid-template-columns:repeat(1,52px)} .plano.c2{grid-template-columns:repeat(2,52px)} .plano.c3{grid-template-columns:repeat(3,52px)} .plano.c4{grid-template-columns:repeat(4,52px)} .plano.c5{grid-template-columns:repeat(5,52px)} .plano.c6{grid-template-columns:repeat(6,52px)} .plano.c7{grid-template-columns:repeat(7,52px)} .plano.c8{grid-template-columns:repeat(8,52px)} .plano.c9{grid-template-columns:repeat(9,52px)} .plano.c10{grid-template-columns:repeat(10,52px)} .plano.c11{grid-template-columns:repeat(11,52px)} .plano.c12{grid-template-columns:repeat(12,52px)}}
.plano .celda{min-height:52px; border-radius:10px; font:12px/1.15 var(--sans); color:var(--tinta); overflow-wrap:anywhere; padding:4px; touch-action:none; user-select:none}
.plano .libre{background:transparent; border:var(--borde-fino) dashed var(--linea); box-shadow:none}
.plano .ficha{background:var(--superficie-alta); border:var(--borde-medio) solid var(--oro-suave); box-shadow:var(--sombra-1); cursor:grab}
.plano .ficha.redonda{border-radius:50%}
.plano .ficha[aria-pressed="true"]{outline:var(--borde-grueso) solid var(--anillo); outline-offset:2px}
.plano .ficha.arrastrando{cursor:grabbing; opacity:.85; position:relative; z-index:2; box-shadow:var(--sombra-3)}
.plano .libre.destino,.plano .ficha.destino{background:var(--oro-claro)}
.plano-titulo{font:600 13px var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--tenue-alto); margin:var(--e4) 0 var(--e1)}
.casilla{display:flex; gap:var(--e2); align-items:center; min-height:44px}

/* Página sin red (PWA, F5) */
.sin-red{max-width:560px; margin:10vh auto; padding:0 16px}