/* base.css — reset, tipografia, layout de la portada, hojas, barra de mano, estados feos.
   Regla dura (3.6): ningun dato vive sobre una superficie con sombra. Solo se levanta lo que
   se puede tocar y desaparecer (hojas, cinta de confirmacion, barra de mano). */

*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-sis); font-size:var(--t-cuerpo); line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  /* Fraunces e Inter son variables con eje optico: el navegador ajusta el grosor de trazo
     al tamaño real. En grande la serif gana contraste (se siente "large"); en chico, legible. */
  font-optical-sizing:auto;
}
h1,h2,h3,p,ul{ margin:0; padding:0; }
ul{ list-style:none; }
/* color:inherit es obligatorio: un <button> NO hereda color por defecto (usa el negro del
   sistema), asi que cualquier texto de boton sin color explicito salia negro sobre el tema
   Noche = invisible. Paso justo en los montos del recibo del P&L. */
button{ font-family:inherit; color:inherit; }
a{ color:inherit; }
/* Numeros tabulares: en el dinero los digitos no bailan (critico en el count-up del titular). */
.num, .tabular{ font-variant-numeric: tabular-nums; font-feature-settings:'tnum' 1; font-family: var(--font-num); }
.solo-lector{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
:focus-visible{ outline: 2px solid var(--ink); outline-offset: 2px; }

/* ============================================================ */
/* Banda de marca                                                */
/* ============================================================ */
/* La banda RESERVA el alto de la barra de estado (2026-07-29). En la APK la app dibuja a pantalla
   completa, asi que la hora y los iconos de Android se le montaban encima al nombre del negocio.
   Mismo patron que la barra de mano de abajo, que ya reservaba su inset: el alto crece con el
   inset y el padding empuja el contenido por debajo del sistema. En el navegador el inset vale 0,
   asi que en web no cambia nada. */
.banda-marca{
  background: var(--marca); color:#fff;
  height: calc(56px + env(safe-area-inset-top));
  display:flex; align-items:center; gap:var(--sp-3);
  padding: env(safe-area-inset-top) var(--margen-movil) 0;
}
/* El logo + el nombre son UN enlace al inicio (2026-07-29). Ocupan el mismo lugar que antes: el
   enlace solo los envuelve, con su propia area de toque comoda y su aro de foco. */
.banda-marca__inicio{
  display:flex; align-items:center; gap:var(--sp-3); flex:1; min-width:0;
  color:inherit; text-decoration:none; margin:-6px -8px; padding:6px 8px; border-radius:var(--r-sm);
}
.banda-marca__inicio:active{ opacity:.75; }
.banda-marca__inicio:focus-visible{ outline:2px solid #fff; outline-offset:1px; }
.banda-marca__logo{ width:32px; height:24px; flex:none; color:#fff; }
/* Fase 3.1.3: un logo SUBIDO se pinta como <img> (nunca inline, regla de seguridad de
   architect-security), con esta clase (ver util.js renderLogoTenant). Mismo tamano que el SVG
   default (que llena el 100% del contenedor por su propio default de SVG sin width/height). */
.banda-marca__logo-img{ width:100%; height:100%; object-fit:contain; display:block; }
.banda-marca__nombre{
  /* Peso 700 a proposito: el nombre en blanco sobre el coral de marca da 3.83:1. A 19px
     con negrita califica como "texto grande" WCAG (umbral 3:1), asi pasa AA sin tocar el
     color de marca del tenant. Decision de Dario 2026-07-25: conservar el coral exacto. */
  font-family:var(--font-marca); font-weight:700; font-size:19px; line-height:1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.banda-marca__resto{ margin-left:auto; display:flex; align-items:center; gap:var(--sp-3); font-size:13px; opacity:.92; }
.banda-marca__chevron{ font-size:11px; }
/* Interruptor de tema Papel/Noche (docs/diseno/tema-y-neumorphism-v1.md, 7.1): vitrina del
   propio efecto neumorphic. Vive sobre la banda coral, asi que es una pastilla con su PROPIO
   plano (--superficie-neu), no comparte tono con el fondo: es el unico control de este mapa que
   se apoya en una superficie de marca, no neutra. El aro de foco de doble capa igual aplica. */
.banda-marca__toggle-tema{
  width:36px; height:36px; flex:none; border-radius:var(--r-pill); border:none;
  background:var(--superficie-neu); color:var(--ink); font-size:18px; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:var(--sombra-neu-media); transition: box-shadow var(--mo-tacto);
}
.banda-marca__toggle-tema:active{ box-shadow:var(--sombra-neu-inset); }
.banda-marca__toggle-tema:focus-visible{ outline:none; box-shadow:var(--sombra-neu-media), var(--sombra-foco-neu); }

/* ============================================================ */
/* Layout general                                                */
/* ============================================================ */
#app{ min-height:100dvh; display:flex; flex-direction:column; }
/* .ws-columna envuelve topbar+main para que, en escritorio (workspace.css), el sidebar quede
   a un lado y esta columna ocupe el resto. En movil es transparente: solo un flex:1 que
   reemplaza al que "main" hacia solo antes de que existiera este envoltorio. */
.ws-columna{ flex:1; display:flex; flex-direction:column; min-height:0; }
main{ flex:1; }
.contenido{
  max-width: var(--col-narrativa); margin:0 auto; padding: 0 var(--margen-movil) var(--sp-10);
}
.bloque{
  padding: var(--sp-7) 0; border-top: 1px solid var(--line);
}
.bloque:first-child{ border-top:none; padding-top: var(--sp-6); }
@media (max-height: 640px){ .bloque{ padding: var(--sp-6) 0; } }
.bloque--sin-filete{ border-top:none; }
/* Hero de la cifra titular ("Ayer ganaste"): unico panel con neumorphism fuera de lo tactil
   (docs/diseno/tema-y-neumorphism-v1.md, 7.1). No es un control (no lleva 1px de limite: la
   regla de contraste no-textual de WCAG 1.4.11 es para controles, esto es contenido). */
.bloque--cifra-neu{
  background:var(--superficie-neu); box-shadow:var(--sombra-neu-alta);
  border-radius:var(--r-lg); padding:var(--sp-6) var(--sp-5);
}

.kicker{
  font-size:var(--t-kicker); font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:var(--sp-3);
}
.enlace-profundizar{
  display:inline-block; margin-top:var(--sp-3); font-size:14px; color:var(--marca-ink);
  text-decoration:none; font-weight:600;
}
.enlace-profundizar:hover{ text-decoration:underline; }

/* ============================================================ */
/* Cifra de titular                                              */
/* ============================================================ */
.rotulo-cifra{ font-size:15px; color:var(--ink-2); margin-bottom:2px; }
.cifra-titular{
  font-family:var(--font-marca); font-weight:460; line-height:.94; letter-spacing:-0.025em;
  font-size: var(--t-portada); margin:0;
  font-variant-numeric: tabular-nums; font-feature-settings:'tnum' 1;
  /* opsz alto: la cifra es lo mas grande de la pantalla, se lleva el maximo contraste de trazo. */
  font-variation-settings:'opsz' 144;
}
.cifra-titular[data-largo="media"]{ font-size: var(--t-portada-media); }
.cifra-titular[data-largo="larga"]{ font-size: var(--t-portada-larga); }
.cifra-titular .decimales{ font-size:.62em; color:var(--ink-2); }
.cifra-secundaria{ font-size:var(--t-cifra); font-weight:700; }

.sparkline-linea{ display:flex; align-items:center; gap:var(--sp-3); margin-top:var(--sp-3); }
.sparkline-linea svg{ width:88px; height:20px; flex:none; }
.sparkline-linea span{ font-size:var(--t-micro); color:var(--ink-3); }

.lede{ font-family:var(--font-marca); font-size:var(--t-lede); line-height:1.45; margin-top:var(--sp-4); max-width: 60ch; }

/* ============================================================ */
/* Riesgo (cinta de tallos) en la portada                        */
/* ============================================================ */
.riesgo-resumen{ font-size:var(--t-dato); font-weight:600; margin-top:var(--sp-3); }
.fila-accion{
  min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding: var(--sp-3) 0; flex-wrap:wrap;
}
.fila-accion__info{ flex:1; min-width:180px; }
.fila-accion__titulo{ font-size:15px; font-weight:600; }
.fila-accion__sub{ font-size:var(--t-micro); color:var(--ink-3); margin-top:2px; }
.fila-accion__botones{ display:flex; gap:var(--sp-2); }
.boton{
  min-height:44px; min-width:44px; padding:0 var(--sp-4); border-radius:var(--r-sm);
  border:1px solid var(--line-fuerte); background:var(--surface); color:var(--ink);
  font-size:14px; font-weight:600; cursor:pointer; transition: transform var(--mo-tacto);
}
.boton:active{ transform:scale(.97); }
/* Boton primario: neumorphism "de color" (docs/diseno/tema-y-neumorphism-v1.md, 7.1/7.3). El
   1px solid --marca-accion se mantiene como limite no-textual (el relieve solo no identifica un
   control, WCAG 1.4.11): sin el, el boton "flotaria" sin borde reconocible. */
.boton--marca{
  background:var(--marca-accion); border-color:var(--marca-accion); color:#fff;
  box-shadow:var(--sombra-marca-alta); transition: box-shadow var(--mo-tacto), transform var(--mo-tacto);
}
.boton--marca:active{ box-shadow:var(--sombra-marca-inset); transform:none; }
.boton--marca:focus-visible{ box-shadow:var(--sombra-marca-alta), var(--sombra-foco-neu); }
.boton--marca:disabled{
  box-shadow:none; background:var(--paper-2); border-color:var(--line-fuerte); color:var(--ink-3);
  cursor:default;
}
.boton--fantasma{ background:transparent; }
.boton--bloque{ display:block; width:100%; margin-top:var(--sp-4); }
/* Boton secundario discreto (docs/diseno/exportar-imprimir-v1.md, 2.4): "Exportar" en la
   topbar de escritorio y en las cabeceras de bloque de movil. Mas chico que .boton (44px),
   nunca compite con el boton primario coral. */
.boton--compacto{
  min-height:36px; min-width:auto; padding:0 var(--sp-3); font-size:13px;
  display:inline-flex; align-items:center; gap:6px;
}
.boton--compacto svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8; flex:none; }
/* Boton destructivo (docs/diseno/pagar-y-anular-v1.md, B.6): outline con --neg, NUNCA --marca.
   Reusa el mismo alto/forma de .boton (44px); se rellena en hover/active con contraste AA real
   (color:var(--ink-inv), no un #fff fijo: en Noche --neg es un rojo CLARO pensado como relleno,
   blanco fijo encima da ~3.1:1 y falla AA; --ink-inv ya es el candidato correcto por tema, mismo
   criterio que shell.js usa para los globos de urgencia). focus-visible hereda el anillo del
   sistema (outline, arriba en este archivo): no compite con .boton--marca. */
.boton--peligro{ background:transparent; border-color:var(--neg); color:var(--neg); }
.boton--peligro:hover, .boton--peligro:active{ background:var(--neg); border-color:var(--neg); color:var(--ink-inv); }
.boton--peligro:disabled{ background:var(--paper-2); border-color:var(--line-fuerte); color:var(--ink-3); cursor:default; }

.estado-premio{ text-align:center; padding:var(--sp-6) 0; }
.estado-premio svg{ width:64px; height:48px; color:var(--marca); opacity:.35; margin-bottom:var(--sp-3); }
/* Fase 3.1.3: mismo tamano que el SVG de arriba, para cuando el logo del tenant es uno SUBIDO
   (ver util.js renderLogoTenant). Sin display:block a proposito: como <img> es inline por
   default, hereda el text-align:center del contenedor igual que el SVG. */
.estado-premio__logo-img{ width:64px; height:48px; object-fit:contain; opacity:.35; margin-bottom:var(--sp-3); }
.estado-premio p{ font-family:var(--font-marca); font-size:17px; }
/* 2026-07-29: los estados vacios de "Me deben"/"Yo debo" ahora traen su propia puerta (el boton
   de anotar). Sin este aire, quedaba pegado a la frase. Mismo criterio que .estado-vacio .boton. */
.estado-premio .boton{ margin-top:var(--sp-4); }
.estado-premio .micro{ font-size:var(--t-micro); color:var(--ink-3); margin-top:var(--sp-1); }

/* ============================================================ */
/* Barra de mano (movil) / Mostrador (desktop, ver mesa.css abajo)*/
/* ============================================================ */
/* Barra de mano: plano tactil neumorphic (docs/diseno/tema-y-neumorphism-v1.md, 7.1). El fondo
   pasa a --superficie-neu (el mismo tono que sus botones): sin eso el neumorphism no se lee, hace
   falta un plano compartido. El box-shadow viejo (--sombra-mano, drop-shadow generico) se
   reemplaza por un filete superior: la separacion la da ahora el relieve de cada boton. */
.barra-mano{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; gap:6px; height:calc(64px + env(safe-area-inset-bottom));
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  background:var(--superficie-neu); border-top:1px solid var(--line);
  transition: transform var(--mo-base) var(--e-suave);
}

/* Contando con el teclado abierto: la barra se APARTA, no se esconde.
   ------------------------------------------------------------------
   Medido en un Galaxy S25 el 2026-08-12, contando 70 insumos: con el teclado en pantalla
   quedaban TRES filas visibles, y una de las tres franjas que se comían el alto eran estos
   cuatro botones, que mientras contás no sirven para nada.
   Esconderla siempre durante el conteo NO es la respuesta: en celular esta barra es la unica
   navegacion que existe (el cajon "⋯" vive aca), y sin ella la duenia queda encerrada en la
   pantalla con el logo a "Hoy" como unica salida.
   Por eso el disparador es el FOCO en un campo de conteo, que es exactamente cuando el teclado
   esta arriba y ella esta tecleando y no navegando: en cuanto sale del campo, vuelve sola.
   Se aparta con transform y no con display:none a proposito: display la sacaria de golpe y
   reflowaria la lista bajo el dedo justo mientras escribe. */
body[data-ruta="conteo"][data-tecleando] .barra-mano{
  transform: translateY(110%);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce){
  .barra-mano{ transition: none; }
}
.barra-mano__boton{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; border:none; background:var(--superficie-neu); color:var(--ink); font-size:13px; font-weight:600;
  min-height:56px; cursor:pointer; border-radius:var(--r-sm);
  box-shadow:var(--sombra-neu-media); transition: box-shadow var(--mo-tacto);
}
.barra-mano__boton:active{ box-shadow:var(--sombra-neu-inset); }
.barra-mano__boton:focus-visible{ box-shadow:var(--sombra-neu-media), var(--sombra-foco-neu); }
.barra-mano__boton--cajon{ flex:0 0 64px; font-size:20px; }
/* Fase 6.17: con «Produje» son cinco botones. En un telefono de 360px cada uno queda en ~65px,
   asi que se achica la letra y se permite recortar en vez de empujar la barra a lo ancho. */
.barra-mano--cinco .barra-mano__boton{ font-size:12px; min-width:0; padding:0 2px; }
.barra-mano--cinco .barra-mano__boton{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ============================================================ */
/* Hojas (sheets)                                                 */
/* ============================================================ */
.overlay-hoja{
  position:fixed; inset:0; z-index:50; display:flex; align-items:flex-end; justify-content:center;
  background: rgba(30,20,22,0); pointer-events:none; transition: background var(--mo-base) var(--e-suave);
}
.overlay-hoja--abierta{ background: rgba(30,20,22,.45); pointer-events:auto; }
.hoja{
  width:100%; max-width:560px; background:var(--surface); border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow:var(--sombra-hoja); max-height:88vh; overflow-y:auto;
  transform: translateY(100%); transition: transform var(--mo-base) var(--e-suave);
  padding-bottom: env(safe-area-inset-bottom);
}
.overlay-hoja--abierta .hoja{ transform: translateY(0); }
.hoja__asa{ width:36px; height:4px; border-radius:var(--r-pill); background:var(--line-fuerte); margin: var(--sp-3) auto var(--sp-1); }
.hoja__cabecera{ display:flex; align-items:center; justify-content:space-between; padding: 0 var(--sp-5) var(--sp-3); }
.hoja__titulo{ font-family:var(--font-marca); font-size:19px; font-weight:400; }
.hoja__cerrar{ min-width:44px; min-height:44px; border:none; background:none; font-size:16px; cursor:pointer; color:var(--ink-3); }
.hoja__cuerpo{ padding: 0 var(--sp-5) var(--sp-6); }
@media (min-width:560px){ .overlay-hoja{ align-items:center; } .hoja{ border-radius:var(--r-lg); } }

/* Mosaico de productos (venta) */
.mosaico{ display:grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap:var(--sp-3); }
.mosaico__item{
  min-height:88px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--paper-2);
  padding:var(--sp-3); text-align:left; cursor:pointer; position:relative; display:flex; flex-direction:column;
  justify-content:space-between; transition: transform var(--mo-tacto), background var(--mo-tacto);
}
.mosaico__item:active{ transform:scale(.97); }
.mosaico__item--marcado{ background:var(--marca-tenue); border-color:var(--marca-ink); }
.mosaico__nombre{ font-size:14px; font-weight:600; line-height:1.25; }
.mosaico__precio{ font-size:var(--t-etiqueta); color:var(--ink-2); font-variant-numeric:tabular-nums; }
.mosaico__contador{
  position:absolute; top:-8px; right:-8px; min-width:24px; height:24px; border-radius:var(--r-pill);
  background:var(--marca-accion); color:#fff; font-size:13px; font-weight:700;
  display:flex; align-items:center; justify-content:center; padding:0 6px;
}
.mosaico__cinta-remate{
  position:absolute; top:6px; left:6px; background:var(--urg-corto); color:#1E1416; font-size:10px;
  font-weight:700; letter-spacing:.04em; padding:2px 6px; border-radius:var(--r-xs);
}

/* Chips (cantidad, motivo) */
.chips{ display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-top:var(--sp-3); }
.chip{
  min-height:44px; min-width:64px; padding:0 var(--sp-4); border-radius:var(--r-pill);
  border:1px solid var(--line-fuerte); background:var(--surface); font-size:14px; font-weight:600;
  cursor:pointer;
}
/* --ink-inv (no #fff fijo): --ink se invierte entre temas (oscuro en Papel, crema en Noche), asi
   que un "#fff" fijo sobre background:var(--ink) da texto blanco sobre crema en Noche (1.14:1,
   invisible). --ink-inv es justo el token pensado para esto (bug real encontrado en auditoria de
   contraste 2026-07-25, docs/diseno/tema-y-neumorphism-v1.md seccion 9). */
.chip--activo{ background:var(--ink); color:var(--ink-inv); border-color:var(--ink); }

/* Campo numerico (cantidades absurdas / precio editable) */
.campo{ margin-top:var(--sp-4); }
.campo label{ display:block; font-size:var(--t-etiqueta); color:var(--ink-2); margin-bottom:var(--sp-1); }
.campo input, .campo select{
  width:100%; min-height:48px; padding:0 var(--sp-3); border-radius:var(--r-sm); border:1px solid var(--line-fuerte);
  background:var(--paper); color:var(--ink); font-size:16px; font-variant-numeric:tabular-nums;
}
/* Textarea (motivo de anulacion, B.2): mismo marco que input/select, alto libre para 2-3 lineas. */
.campo textarea{
  width:100%; min-height:84px; padding:var(--sp-3); border-radius:var(--r-sm); border:1px solid var(--line-fuerte);
  background:var(--paper); color:var(--ink); font-size:15px; font-family:inherit; resize:vertical;
}
.campo__ayuda{ font-size:var(--t-micro); color:var(--ink-3); margin-top:4px; }
.campo--fila{ display:flex; align-items:flex-end; gap:var(--sp-3); }
.campo--fila > *{ flex:1; }

/* Segmentado de 2 opciones (Compartido / Una esfera, 7B.4; sin receta/con receta). Neumorphism
   (docs/diseno/tema-y-neumorphism-v1.md, 7.1): la canaleta (track) queda hundida y la pastilla
   elegida (thumb) sobresale, mismo tono para las tres piezas (--superficie-neu). */
.segmentado{
  display:flex; gap:2px; background:var(--superficie-neu); box-shadow:var(--sombra-neu-inset-suave);
  border-radius:var(--r-sm); padding:2px; margin-top:var(--sp-4);
}
/* Mismo caso que .auth-segmentado en auth.css, que hasta hoy tenia el arreglo solo para SU
   variante: el display:flex de arriba le gana al [hidden] del navegador. Va en la clase base
   para que no haya que redescubrirlo una vez por pantalla. */
.segmentado[hidden]{ display:none; }
.segmentado button{
  flex:1; min-height:40px; border:none; background:none; border-radius:8px; font-size:14px; font-weight:600;
  color:var(--ink-2); cursor:pointer; transition: box-shadow var(--mo-tacto), background var(--mo-tacto);
}
.segmentado button.activo{ background:var(--superficie-neu); color:var(--ink); box-shadow:var(--sombra-neu-media); }
.segmentado button:focus-visible{ box-shadow:var(--sombra-foco-neu); }
.segmentado button.activo:focus-visible{ box-shadow:var(--sombra-neu-media), var(--sombra-foco-neu); }

/* Marca visual de "compartido" (5.2): trama diagonal, la misma del prorrateo. */
.pildora-compartido{
  display:inline-block; width:10px; height:10px; border-radius:2px; flex:none; margin-right:6px;
  background:var(--neutro-suave); background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.5) 0 2px, transparent 2px 5px);
}

/* Linea de receta editable (Productos, 7B.1): cantidad + um + nombre + costo + aporte % + editar. */
.receta-fila{
  display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) 0; border-bottom:1px solid var(--line); font-size:13.5px;
}
.receta-fila:last-child{ border-bottom:none; }
.receta-fila__cant{ width:56px; text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-2); flex:none; }
.receta-fila__um{ width:56px; color:var(--ink-3); flex:none; }
.receta-fila__nombre{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.receta-fila__costo{ font-variant-numeric:tabular-nums; flex:none; min-width:8ch; text-align:right; }
.receta-fila__pct{ font-variant-numeric:tabular-nums; flex:none; min-width:4ch; text-align:right; color:var(--ink-3); }
.receta-fila__quitar{
  min-width:28px; min-height:28px; border:none; background:none; color:var(--ink-3); cursor:pointer; font-size:15px; flex:none;
}
.receta-fila__quitar:hover{ color:var(--neg); }

/* Lotes FEFO (Inventario, 7B.2): la primera tanda es "lo proximo que se usa". */
.lote-fila{ display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-3) 0; border-bottom:1px solid var(--line); }
.lote-fila:last-child{ border-bottom:none; }
.lote-fila__cursor{ font-size:15px; color:var(--marca); flex:none; width:16px; }
.lote-fila__info{ flex:1; min-width:0; }
.lote-fila__cant{ font-size:14.5px; font-weight:600; }
.lote-fila__meta{ font-size:12px; color:var(--ink-3); }

/* Lista de insumos para merma (barra de mano, camino B) */
.lista-riesgo{ display:flex; flex-direction:column; }
/* El `display:flex` de arriba le gana al [hidden] del navegador (el UA solo aporta display:none
   con la especificidad mas baja que existe), asi que sin esta linea `.hidden = true` no esconde
   nada. Es la MISMA trampa que ya estaba documentada para .auth-segmentado en auth.css, y aca
   estaba mordiendo callada desde antes de la Fase 5.5: mostrarPaso2 esconde la lista para
   preguntar "cuanto", y la lista se quedaba visible debajo del paso 2. Se vio recien cuando el
   segmentado de materia prima / producto hecho mostro las dos listas a la vez. */
.lista-riesgo[hidden]{ display:none; }
.lista-riesgo__item{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  min-height:56px; padding:var(--sp-2) 0; border-bottom:1px solid var(--line); cursor:pointer; background:none; border-left:none; border-right:none; border-top:none; width:100%; text-align:left;
}
.lista-riesgo__item:last-child{ border-bottom:none; }
.lista-riesgo__nombre{ font-size:15px; font-weight:600; }
.lista-riesgo__meta{ font-size:var(--t-micro); color:var(--ink-3); }
.lista-riesgo__urgencia{ width:8px; height:8px; border-radius:var(--r-pill); flex:none; }

/* Cajon "Mas" de la barra de mano (2.2): espejo movil del sidebar de escritorio (shell.js). */
.cajon__grupo{ display:flex; flex-direction:column; }
.cajon__filete{ margin:var(--sp-2) 0; border-top:1px solid var(--line); }
.cajon__item{
  display:flex; align-items:center; gap:var(--sp-3); min-height:52px; padding:var(--sp-2) 0;
  border:none; background:none; width:100%; text-align:left; cursor:pointer;
  color:var(--ink); font-family:var(--font-sis); font-size:15.5px; border-bottom:1px solid var(--line);
}
.cajon__grupo:last-of-type .cajon__item:last-child{ border-bottom:none; }
.cajon__item:active{ background:var(--paper-2); }
.cajon__icono{ width:22px; height:22px; flex:none; color:var(--ink-2); }
.cajon__icono svg{ width:22px; height:22px; stroke:currentColor; stroke-width:1.75; fill:none; }
.cajon__nombre{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cajon__nota{ font-size:var(--t-micro); color:var(--ink-3); flex:none; }

/* Cinta de confirmacion (deshacer 8s)
   z-index 60, ENCIMA de .overlay-hoja (50). Estaba en 45, o sea DEBAJO de la hoja: cada
   confirmacion disparada desde adentro de un modal se dibujaba tapada por el fondo oscuro y
   el usuario no veia nada. Lo reporto America por audio el 2026-08-05: guardaba la receta,
   "la ventana se queda pegada, sin aviso de que se creo", y solo se enteraba al cerrarla a
   mano y ver el producto en la lista. La cinta SI se estaba mostrando; no se podia ver.
   Queda debajo del bloque de auth (200/210), que tiene que tapar todo. */
.cinta-confirmacion{
  position:fixed; left:var(--sp-4); right:var(--sp-4); bottom: calc(64px + env(safe-area-inset-bottom) + var(--sp-3));
  z-index:60; background:var(--ink); color:var(--ink-inv); border-radius:var(--r-md);
  padding: var(--sp-3) var(--sp-4); display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  transform: translateY(12px); opacity:0; transition: transform var(--mo-rapido) var(--e-entrada), opacity var(--mo-rapido);
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
}
.cinta-confirmacion--visible{ transform:translateY(0); opacity:1; }
.cinta-confirmacion__texto{ font-size:14px; font-variant-numeric:tabular-nums; }
.cinta-confirmacion__deshacer{
  min-height:36px; padding:0 var(--sp-3); background:none; border:1px solid color-mix(in srgb, var(--ink-inv) 40%, transparent); color:var(--ink-inv);
  border-radius:var(--r-sm); font-weight:700; font-size:13px; cursor:pointer; flex:none;
}

/* ============================================================ */
/* Estados feos (seccion 7)                                       */
/* ============================================================ */
.estado-vacio, .estado-error{
  text-align:center; padding: var(--sp-8) var(--sp-4); color:var(--ink-2);
}
.estado-vacio p, .estado-error p{ font-size:15px; line-height:1.5; max-width:44ch; margin:0 auto; }
.estado-error p{ color:var(--neg); }
.estado-vacio .boton, .estado-error .boton{ margin-top:var(--sp-4); }
.estado-cargando{ padding: var(--sp-4) 0; }
.esqueleto-linea{
  height:14px; border-radius:var(--r-xs); background:var(--paper-2); margin-bottom:var(--sp-2); opacity:.7;
}
.esqueleto-bloque{ height:96px; border-radius:var(--r-md); background:var(--paper-2); opacity:.6; }

/* ============================================================ */
/* Ajustes — titulos editoriales de bloque (docs/diseno/ajustes-marca-v1.md, seccion 2): cada    */
/* bloque abre con kicker + h2 serif. Acotada a #vista-ajustes (no un ".bloque h2" global): otras */
/* pantallas ya ponen un <h2> dentro de ".bloque.en-construccion" (Equipo, Gastos sin permiso,    */
/* Riesgo sin perecederos) con su propio peso (workspace.css); una regla global les habria        */
/* cambiado el font-weight sin querer.                                                            */
/* ============================================================ */
#vista-ajustes .bloque h2{ font-family:var(--font-marca); font-weight:400; font-size:var(--t-titulo); color:var(--ink); margin-bottom:var(--sp-3); }

/* ============================================================ */
/* Ajustes — "La marca de mi negocio" (docs/diseno/ajustes-marca-v1.md, seccion 4). Paleta       */
/* curada, color libre, mini-mockup en vivo. Composiciones de tokens existentes: nada de esto     */
/* usa un hex fijo que no flote con el tema.                                                     */
/* ============================================================ */
.paleta-swatches{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(58px, 1fr)); gap:var(--sp-3);
  margin-top:var(--sp-3);
}
.paleta-swatch{
  display:flex; flex-direction:column; align-items:center; gap:4px; background:none; border:none;
  cursor:pointer; padding:2px; border-radius:var(--r-sm);
}
.paleta-swatch__pastilla{
  width:44px; height:44px; border-radius:var(--r-sm); border:2px solid transparent;
  box-shadow:var(--sombra-neu-media); transition: transform var(--mo-tacto), border-color var(--mo-tacto);
  position:relative;
}
.paleta-swatch:active .paleta-swatch__pastilla{ transform:scale(.94); }
.paleta-swatch--activo .paleta-swatch__pastilla{ border-color:var(--ink); }
/* El check del seleccionado (WCAG: no depender solo del color para marcar el estado). */
.paleta-swatch--activo .paleta-swatch__pastilla::after{
  content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:16px; font-weight:700; text-shadow:0 1px 2px rgba(0,0,0,.5);
}
.paleta-swatch:focus-visible{ box-shadow:var(--sombra-foco-neu); outline:none; }
.paleta-swatch__nombre{ font-size:var(--t-micro); color:var(--ink-3); text-align:center; line-height:1.2; }

.color-libre{ display:flex; align-items:center; gap:var(--sp-3); margin-top:var(--sp-4); flex-wrap:wrap; }
.color-libre__pastilla{
  -webkit-appearance:none; appearance:none; width:44px; height:44px; min-width:44px; border-radius:var(--r-pill);
  border:none; padding:0; cursor:pointer; box-shadow:var(--sombra-neu-media); background:none;
}
.color-libre__pastilla::-webkit-color-swatch-wrapper{ padding:0; border-radius:var(--r-pill); }
.color-libre__pastilla::-webkit-color-swatch{ border:none; border-radius:var(--r-pill); }
.color-libre__pastilla::-moz-color-swatch{ border:none; border-radius:var(--r-pill); }
.color-libre__pastilla:focus-visible{ box-shadow:var(--sombra-neu-media), var(--sombra-foco-neu); }
.color-libre__hex{ font-size:15px; font-weight:600; }

.aviso-legibilidad{
  margin-top:var(--sp-3); padding:var(--sp-3); border-radius:var(--r-sm); border-left:3px solid var(--urg-corto);
  background:var(--paper-2); font-size:13.5px; color:var(--ink-2); line-height:1.5;
}

/* Mini-mockup en vivo: banda + boton + cifra, con --marca/--marca-accion/--marca-ink SCOPEADOS
   al contenedor via estilo inline (js/pantallas/ajustes.js). Nunca al :root: por eso el color
   candidato se ve ANTES de guardar sin re-tintar el resto de la app. */
.mini-mockup{
  margin-top:var(--sp-5); border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--sombra-neu-media);
}
.mini-mockup .banda-marca{ height:48px; padding:0 var(--sp-4); }
.mini-mockup__cuerpo{
  padding:var(--sp-4); display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap;
}
.mini-mockup__cifra{ font-family:var(--font-marca); font-weight:460; font-size:26px; color:var(--marca-ink); }

.fila-deshabilitada{
  display:flex; align-items:center; gap:var(--sp-3); margin-top:var(--sp-5); padding:var(--sp-3) 0;
  border-top:1px solid var(--line); color:var(--ink-3); font-size:13.5px; line-height:1.5;
}
.fila-deshabilitada strong{ color:var(--ink-2); font-weight:600; }

/* Ajustes — "Tu logo" (Fase 3.1.3): subida real contra Supabase Storage. */
.campo-logo{ margin-top:var(--sp-5); padding-top:var(--sp-4); border-top:1px solid var(--line); }
.campo-logo__actual{ display:flex; align-items:center; gap:var(--sp-3); margin:var(--sp-3) 0; }
.campo-logo__muestra{ width:40px; height:32px; flex:none; display:flex; align-items:center; color:var(--marca); }
.campo-logo__muestra-img{ width:100%; height:100%; object-fit:contain; display:block; }
.campo-logo__elegir{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; margin-top:var(--sp-2); }
.campo-logo__previsualizacion{
  display:flex; align-items:center; gap:var(--sp-3); margin-top:var(--sp-3); padding:var(--sp-3);
  border-radius:var(--r-sm); background:var(--paper-2);
}
.campo-logo__previsualizacion .campo-logo__muestra{ width:56px; height:44px; }

/* Ajustes — Datos del negocio (solo lectura): filas etiqueta/valor. */
.filas-solo-lectura{ margin-top:var(--sp-3); }
.fila-dato{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3);
  padding:var(--sp-2) 0; border-bottom:1px solid var(--line); font-size:14.5px;
}
.fila-dato:last-child{ border-bottom:none; }
.fila-dato__etiqueta{ color:var(--ink-2); }
.fila-dato__valor{ color:var(--ink); font-weight:600; text-align:right; }

/* Ajustes — "Tus datos son tuyos" / Respaldo total (Fase 3.18). Caja de resultado bajo el boton:
   exito con filete --pos, error con filete --neg (misma forma que .aviso-legibilidad, distinto
   acento). ".respaldo-resultado--cargando" no lleva filete: es un estado neutro, de paso. */
.respaldo-resultado{
  margin-top:var(--sp-3); padding:var(--sp-3); border-radius:var(--r-sm);
  background:var(--paper-2); font-size:14px; color:var(--ink-2); line-height:1.5;
}
.respaldo-resultado--exito{ border-left:3px solid var(--pos); }
.respaldo-resultado--error{ border-left:3px solid var(--neg); color:var(--neg); }
.aviso-lento{ font-size:var(--t-micro); color:var(--ink-3); margin-top:var(--sp-2); }
.banda-descuadre{
  background: var(--marca-tenue); border:1px solid var(--neg); color:var(--neg);
  border-radius:var(--r-sm); padding:var(--sp-3); font-size:14px; margin-bottom:var(--sp-4);
}
.candado-vedado{ color:var(--ink-3); font-size:13px; }

/* Fila simple de lista (rotulo + valor), reusada por "Por esfera" en #/verdad (5.2/2.5). */
.fila-lista{ display:flex; justify-content:space-between; gap:var(--sp-2); padding:var(--sp-2) 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.fila-lista:last-child{ border-bottom:none; }
.fila-lista .nombre{ color:var(--ink); }
.fila-lista .meta{ color:var(--ink-3); font-size:12px; }

/* ============================================================ */
/* Puntos de quiebre (3.9)                                        */
/* ============================================================ */
@media (min-width:480px) and (max-width:719px){
  .contenido{ padding-left:24px; padding-right:24px; }
  .mosaico{ grid-template-columns: repeat(3, 1fr); }
}

/* NOTA 2026-07-24: el "mostrador" de dos columnas que vivia aca (una version movil estirada,
   con la barra de mano convertida en panel fijo solo en #/hoy) queda DERROGADO. Dario lo vio en
   desktop real y con razon: era "una app de celular metida en el web". La cara de escritorio de
   verdad (sidebar + topbar + grid de 12 columnas, para TODAS las rutas) vive en
   css/workspace.css, fiel a la seccion 2B del diseno. Este archivo (base.css) es, de aca en
   adelante, PURAMENTE la cara movil (2.2 a 2.8), sin de opinar de escritorio. */

@media (min-width:1440px){
  body{ font-size:var(--t-cuerpo); } /* la tipografia del cuerpo NO crece (3.9) */
}

/* ==========================================================================
   EL CROQUIS DEL SALON (Fase 6.19)
   ==========================================================================
   La clienta: «hay sistemas que le dejan dibujar su croquis y numerar las mesas con imagenes y
   numero de sillas». El salon se MIRA, no se lee: una mesa libre es un contorno, una ocupada se
   pinta con el color de su marca y muestra lo que lleva consumido.

   La posicion viene en una grilla de enteros desde el servidor y aca solo se multiplica por el
   tamaño de celda que entra en la pantalla: el mismo croquis se ve igual en el celular y en la
   laptop, y girar el telefono no desacomoda el salon. */
.salon__barra{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2);
  flex-wrap:wrap; margin-bottom:var(--sp-2);
}
/* EL PISO.

   La grilla se ve SOLO al acomodar, que es cuando ayuda a alinear. El resto del tiempo es un
   piso: un salon, no una hoja cuadriculada. La diferencia entre «estoy usando un programa» y
   «este es mi local». */
.croquis{
  position:relative; width:100%; overflow:auto;
  background-color:var(--superficie-neu);
  background-image:
    radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--marca) 5%, transparent) 0%, transparent 45%),
    radial-gradient(circle at 75% 75%, color-mix(in srgb, var(--marca) 4%, transparent) 0%, transparent 40%);
  border:1px solid var(--line); border-radius:var(--r-lg);
  transition:background-image .2s ease;
}
/* Al acomodar SI aparece la cuadricula: ahi es una herramienta y se agradece. */
.croquis--acomodando{
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:100% 34px, 34px 100%;
}
/* El rotulo del plano: el nombre de SU negocio, arriba a la izquierda, discreto pero presente.
   Es la firma que convierte «un croquis» en «mi salon». */
.croquis__rotulo{
  position:absolute; top:10px; left:14px; margin:0; z-index:1;
  font-family:'Fraunces','Iowan Old Style',Georgia,serif;
  font-size:15px; font-weight:700; letter-spacing:.01em;
  color:color-mix(in srgb, var(--marca) 70%, var(--ink-3));
  pointer-events:none; line-height:1.2;
}
.croquis__rotulo span{
  display:block; font-family:inherit; font-size:11px; font-weight:500;
  letter-spacing:0; color:var(--ink-3);
}

.croquis__vacio{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  color:var(--ink-3); font-size:14px; padding:var(--sp-4); margin:0;
}
/* LA MESA.

   Antes era un rectangulo con borde punteado y la palabra «4 sillas» adentro: un plano tecnico.
   Ahora es una mesa con sus sillas alrededor, con volumen y sombra, apoyada sobre un piso.

   Esto no acelera ninguna tarea ni evita ningun error, y se queda igual. Es lo que hace que ella
   abra la pantalla y vea SU salon en vez de un diagrama; el negocio que sono, dibujado.

   `overflow:visible` porque las sillas cuelgan por fuera del borde. El texto se recorta en
   `.mesa-croquis__tapa`, que es la unica capa que necesita recorte. */
.mesa-croquis{
  position:absolute; display:flex; align-items:center; justify-content:center;
  border:0; background:transparent; padding:0;
  color:var(--ink-2); font-family:inherit; font-size:12px; font-weight:600;
  cursor:pointer; text-align:center; overflow:visible;
  transition:transform .12s ease, filter .12s ease;
  /* La sombra va en la tapa, no aca, para que no se recorte con las sillas. */
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.13));
}
.mesa-croquis:hover{ transform:translateY(-1px); }

/* La tapa: la mesa propiamente dicha. Madera muy sutil, no un marron de juguete: tiene que
   convivir con la marca de cualquier negocio, sea cafeteria o floreria. */
.mesa-croquis__tapa{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1px;
  overflow:hidden; padding:3px;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--surface) 92%, #b98a55) 0%,
                            color-mix(in srgb, var(--surface) 97%, #8a6234) 100%);
  border:1px solid color-mix(in srgb, var(--line) 70%, #8a6234);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}

/* LAS SILLAS. Van por fuera de la tapa, alrededor. */
.sillas{ position:absolute; inset:0; pointer-events:none; }
.silla{
  position:absolute; width:38%; max-width:15px; min-width:7px;
  height:5px; border-radius:3px;
  background:color-mix(in srgb, var(--ink-3) 42%, var(--superficie-neu));
  box-shadow:0 1px 1px rgba(0,0,0,.10);
}
.silla--arriba{ left:var(--p); top:-7px; transform:translateX(-50%); }
.silla--abajo{ left:var(--p); bottom:-7px; transform:translateX(-50%); }

/* En la mesa redonda se acomodan en circulo: cada silla se rota a su angulo y se empuja hacia
   afuera. Asi una mesa de 6 se ve como una mesa de 6, no como un circulo con un numero. */
.sillas--redonda .silla{
  left:50%; top:50%; width:13px; height:5px; max-width:none; min-width:0;
  transform:translate(-50%,-50%) rotate(var(--a)) translateX(calc(50% + 62%));
}

/* Ocupada: el color de SU marca, no un rojo generico. El salon de cada negocio se ve suyo. */
.mesa-croquis--ocupada .mesa-croquis__tapa{
  border-color:var(--marca);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--marca) 16%, var(--surface)) 0%,
                            color-mix(in srgb, var(--marca) 26%, var(--surface)) 100%);
  color:var(--ink);
}
.mesa-croquis--ocupada .silla{ background:color-mix(in srgb, var(--marca) 55%, var(--ink-3)); }
.mesa-croquis--ocupada{ filter:drop-shadow(0 3px 6px color-mix(in srgb, var(--marca) 30%, transparent)); }
.mesa-croquis--moviendo{
  transform:scale(1.06); box-shadow:0 8px 24px rgba(0,0,0,.18); z-index:5;
  /* Sin transicion mientras se arrastra: si no, la mesa "persigue" al dedo con retraso. */
  transition:none;
}
/* ARRASTRAR CON EL DEDO. Sin `touch-action:none` el navegador se queda con el gesto para hacer
   scroll y el arrastre NUNCA ocurre: pointermove deja de llegar apenas el dedo se mueve un poco.
   Es el motivo por el que «¿cómo muevo la mesa?» no tenía respuesta: no era que no se supiera,
   es que no se podía.

   Va SOLO en modo acomodar: si estuviera siempre, deslizar el dedo sobre una mesa para bajar la
   pantalla dejaría de funcionar en el uso normal, que es la mayoría del tiempo. */
.croquis--acomodando .mesa-croquis{
  touch-action:none;
  user-select:none; -webkit-user-select:none;
  cursor:grab;
}
.croquis--acomodando .mesa-croquis__tapa{
  border-style:dashed;
  border-color:color-mix(in srgb, var(--marca) 55%, var(--line));
}
.croquis--acomodando .mesa-croquis:active{ cursor:grabbing; }
/* El asa: dice «esto se agarra» sin tener que explicarlo. */
.croquis--acomodando .mesa-croquis::after{
  content:'⠿'; position:absolute; top:2px; right:5px;
  font-size:12px; line-height:1; color:var(--ink-3); opacity:.85;
}

.mesa-croquis__nombre{ line-height:1.15; word-break:break-word; }
.mesa-croquis__sillas{ font-weight:500; font-size:10.5px; color:var(--ink-3); }
.mesa-croquis__monto{ font-size:12.5px; font-weight:700; color:var(--marca); }

/* En pantallas anchas la grilla de fondo crece con la celda. */
@media (min-width:1000px){
  .croquis--acomodando{
    background-size:100% 44px, 44px 100%;
  }
}

/* La cantidad escrita a mano en el ticket (2026-08-20). La clienta vende maquillaje y accesorios
   por fraccion: «iba a colocar 0.80 y no pude, entonces coloqué 1». */
.ticket__cantidad{
  width:64px; min-width:64px; text-align:right;
  padding:4px 6px; font-size:14px; font-weight:600;
  border:1px solid var(--line); border-radius:8px;
  background:var(--surface); color:var(--ink);
  /* En el celular, un input de menos de 16px hace que iOS haga zoom al enfocarlo y descoloca la
     hoja entera. 16px en pantallas chicas, mas chico recien en escritorio. */
  font-size:16px;
}
@media (min-width:1000px){ .ticket__cantidad{ font-size:14px; } }
.ticket__cantidad:focus{ outline:2px solid var(--marca); outline-offset:1px; }

/* ============================================================================
   Cocina (Fases 6.27b y 6.27f, docs/diseno/comandas-a-cocina-2026-08-22.md).
   Una tablet apoyada en la mesada, mirada de lejos y tocada con la mano ocupada. La 6.27f
   corrigio: la urgencia dejo de ser SOLO color (regla D2), las lineas pasaron de 44 a 56 px de
   alto, y el modo cocina tiene su propia franja porque el rol quedaba encerrado sin poder salir.
   Todo en tokens de capa 2/3: ni un hex literal.
   ============================================================================ */
.cocina{ display:flex; flex-direction:column; min-height:100vh; }
.cocina__franja{
  display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
  padding:10px var(--sp-3); border-bottom:1px solid var(--line); background:var(--surface);
  position:sticky; top:0; z-index:5;
}
.cocina__marca{ display:flex; flex-direction:column; line-height:1.15; }
.cocina__tenant{ font-family:var(--font-marca); font-weight:600; font-size:19px; color:var(--marca-ink); }
.cocina__kicker{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.cocina__pendientes{ margin:0; font-size:15px; color:var(--ink-2); flex:1; min-width:120px; }
.cocina__pendientes b{ color:var(--ink); font-size:22px; }
.cocina__pendientes--sin-red{ color:var(--neg); }
.cocina__pendientes--late{ animation:cocina-late 1.2s ease-in-out 2; }
@keyframes cocina-late{ 50%{ color:var(--marca-ink); transform:scale(1.06); } }
.cocina__acciones{ display:flex; gap:8px; }
.cocina__btn{
  min-height:44px; padding:0 14px; font-size:14px; font-weight:600; cursor:pointer;
  color:var(--ink); background:var(--paper-2); border:1px solid var(--line-fuerte); border-radius:10px;
}
.cocina__btn:active{ transform:translateY(1px); }
/* Avisos ya activados. El boton se queda en su lugar en vez de desaparecer: mover el layout bajo
   el dedo hacia que el toque cayera en el boton de al lado (reportado por la clienta: le abria el
   historial). Y ademas le confirma que quedo puesto, que antes no sabia. */
.cocina__btn--listo{ opacity:.62; cursor:default; border-style:dashed; }
.cocina__btn--tira{ min-height:38px; padding:0 12px; }
.cocina__cuerpo{ flex:1; padding:var(--sp-3); }
.cocina__grilla{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:var(--sp-3); align-items:start; }
.cocina__vacio{ padding:72px var(--sp-3); text-align:center; color:var(--ink-3); font-size:22px; font-family:var(--font-marca); }

/* La tira de deshacer: la comanda entregada no se evapora, colapsa aca 90 segundos. */
.cocina__deshacer{ position:sticky; bottom:0; padding:8px var(--sp-3) 12px; background:linear-gradient(to top, var(--paper) 70%, transparent); }
.cocina__tira{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:8px 12px; margin-top:6px; font-size:14px; color:var(--ink-2);
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
}

.comanda{ background:var(--surface); border:1px solid var(--line); border-radius:14px; display:flex; flex-direction:column; overflow:hidden; }
/* La mas vieja pesa mas: de lejos, la urgencia cambia la MASA, no el matiz. */
.comanda--primera{ grid-column:span 2; }
@media (max-width:719px){ .comanda--primera{ grid-column:span 1; } }
.comanda--primera .comanda__tiempo{ font-size:64px; }
.comanda--saliendo{ opacity:.4; }
.comanda--nueva{ animation:cocina-destello 1.1s ease-out 2; }
@keyframes cocina-destello{ 0%,100%{ box-shadow:none; } 40%{ box-shadow:0 0 0 4px var(--marca-tenue); } }
.comanda__cab{ padding:12px 16px 8px; border-bottom:1px solid var(--line); }
.comanda__tiempo{ font-family:var(--font-marca); font-size:40px; font-weight:600; line-height:1; color:var(--ink-2); }
.comanda__tiempo small{ font-family:var(--font-sis); font-size:14px; font-weight:500; color:var(--ink-3); margin-left:4px; }
/* D2: el color NUNCA es la unica señal. Ambar suma un punto, rojo suma banda con trama. */
.comanda--ambar .comanda__tiempo{ color:var(--flaco-ink); font-weight:700; }
.comanda--ambar .comanda__tiempo::before{ content:'●'; font-size:.5em; vertical-align:middle; margin-right:6px; }
.comanda--rojo{ border-color:var(--neg); }
.comanda--rojo .comanda__cab{ border-top:6px solid var(--neg);
  background-image:repeating-linear-gradient(45deg, color-mix(in srgb, var(--neg) 9%, transparent) 0 8px, transparent 8px 16px); }
.comanda--rojo .comanda__tiempo{ color:var(--neg); font-weight:700; }
.comanda--rojo .comanda__tiempo::before{ content:'▲'; font-size:.45em; vertical-align:middle; margin-right:6px; }
.comanda__rotulo{ font-size:18px; font-weight:700; display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:2px; }
.comanda__canal{ font-size:12px; font-weight:600; color:var(--marca-ink); background:var(--marca-tenue); padding:2px 8px; border-radius:999px; text-transform:uppercase; letter-spacing:.06em; }
.comanda__canal--local{ color:var(--ink-2); background:var(--paper-2); }
.comanda__lineas{ list-style:none; margin:0; padding:6px 8px 4px; flex:1; }
/* 56 px de alto y 24 px de texto: con la mano mojada, 44 px pegados es marcar el plato de al lado. */
.comanda__linea{
  display:flex; gap:12px; align-items:center; min-height:56px; padding:8px 10px; margin-bottom:8px;
  border-radius:10px; font-size:24px; cursor:pointer; user-select:none; -webkit-user-select:none;
}
.comanda__linea:active{ background:var(--paper-2); }
.comanda__linea:focus-visible{ outline:2px solid var(--marca); outline-offset:1px; }
.comanda__cant{ font-weight:700; min-width:1.6em; text-align:right; color:var(--ink-2); }
.comanda__linea--lista{ color:var(--ink-3); text-decoration:line-through; }
.comanda__linea--lista .comanda__cant::before{ content:'\2713 '; color:var(--pos); text-decoration:none; display:inline-block; }
.comanda__entregado{
  margin:12px 8px 8px; min-height:64px; font-size:19px; font-weight:700; cursor:pointer;
  color:var(--ink-inv); background:var(--marca-accion); border:0; border-radius:12px;
}
.comanda__entregado small{ font-weight:500; opacity:.85; }
.comanda__entregado:disabled{ opacity:.6; cursor:default; }
/* La comanda a domicilio en Mesas: una moto chica al lado del nombre. */
.chip__canal{ font-size:11px; font-weight:600; margin-left:6px; color:var(--marca-ink); text-transform:uppercase; letter-spacing:.05em; }

/* MODO COCINA: un aparato, no un ERP recortado (6.27f).
   El rol `cocina` ve UNA pantalla. Dejarle el sidebar con un solo item y la topbar vacia lo hacia
   parecer una app rota, y ADEMAS lo encerraba: en celular y tablet vertical no hay sidebar ni
   topbar, y el CSS le escondia la barra de mano, que es donde vive «Salir». No tenia forma de
   cerrar sesion en un aparato compartido. Ahora la pantalla trae su propia franja con la marca,
   el contador, los avisos y «Salir», en TODOS los anchos. */
body.rol-cocina .barra-mano,
body.rol-cocina [data-abrir-registrar],
body.rol-cocina #sidebar,
body.rol-cocina #topbar{ display:none !important; }
body.rol-cocina #vista,
body.rol-cocina .contenido{ margin:0; padding:0; max-width:none; }
@media (min-width:1000px){ body.rol-cocina #vista{ margin-left:0; } }

/* Fase 6.31 — la alarma de cocina insiste hasta que alguien la reconoce.
   La clienta, el primer dia de su cocinero: «que la notificacion sea como una alarma, que no
   deje de sonar hasta que alguien active el boton». La tarjeta sin reconocer late; el boton
   «Ya la vi» es grande porque se toca con la mano ocupada y mirando de lejos. */
.cocina__acusar { margin: var(--sp-2) 0 0; }
.cocina__acusar .boton { font-size: 18px; padding: var(--sp-3); }
.comanda--sin-acusar { animation: comandaLate 1.4s ease-in-out infinite; }
@keyframes comandaLate {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240, 62, 62, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(240, 62, 62, .55); }
}
@media (prefers-reduced-motion: reduce) {
  /* Sin parpadeo, pero el borde queda fijo: la senal no se pierde, solo deja de moverse. */
  .comanda--sin-acusar { animation: none; box-shadow: 0 0 0 4px rgba(240, 62, 62, .55); }
}

/* Fase 6.32 — el estado del plato, dentro de la mesa. Lo pidio la clienta: cocina marcaba
   entregado y el salon no se enteraba, con el dato ya viajando en salon_json. */
.linea-estado { font-size: 12px; padding: 1px 6px; border-radius: 999px; margin-left: 6px; white-space: nowrap; }
.linea-estado--ok   { color: var(--ok, #12805c); background: rgba(18, 128, 92, .12); }
.linea-estado--pend { color: var(--ink-2); background: rgba(128, 128, 128, .14); }

/* Fase 6.33 — la aclaracion del plato. La pidio la clienta con las comandas ya en uso:
   «panqueques con miel extra», «cafe con el espresso largo». En cocina va DEBAJO del nombre y
   destacada, porque es lo que cambia como se prepara: si se lee al pasar, no sirve. */
.comanda__nota {
  display: block; font-size: 15px; font-weight: 600; margin-top: 2px;
  color: var(--marca, #b05994);
}
.comanda__linea--lista .comanda__nota { opacity: .5; }
.linea-nota { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.elegido { padding: 8px 0; border-bottom: 1px solid var(--line); }
.elegido__fila { display: flex; justify-content: space-between; align-items: center; }
.elegido__nota { width: 100%; margin-top: 4px; font-size: 14px; padding: 8px; min-height: 40px; }

/* Fase 6.36 — el acuse es por comanda, no global. Lo pidio la clienta: «que cada vez que caiga
   una comanda sea recepcionada», porque recibir un pedido no dice nada de los otros dos. */
.comanda__recibida {
  display: block; width: 100%; margin-top: var(--sp-2); padding: var(--sp-3);
  font-size: 17px; font-weight: 600; border-radius: var(--radio);
  border: 2px solid var(--marca, #b05994); background: transparent; color: var(--marca, #b05994);
}
.cocina__sin-acusar { font-size: 15px; font-weight: 600; color: var(--marca, #b05994); }

/* Fase 6.39 — la comanda habla.
   -----------------------------
   LA NOTA DE LA ORDEN va ARRIBA de los platos y no abajo, al reves que la del plato: describe la
   condicion de TODA la mesa («son 2 personas», «una es celiaca»), asi que si se lee despues de
   los platos, se lee tarde. Y va con fondo y no solo con color: en una tablet apoyada en la
   mesada, con grasa y a un metro, el color solo no alcanza para que algo se lea como una orden.
   Es la razon por la que el boton «Entregado» mide 64 px y no 40. */
.comanda__nota-orden {
  margin: var(--sp-2) 0 0; padding: 8px 10px; border-radius: var(--r-sm);
  font-size: 16px; font-weight: 600; line-height: 1.3;
  color: var(--marca, #b05994); background: rgba(176, 89, 148, .12);
  border-left: 3px solid var(--marca, #b05994);
}

/* «Ya lo estoy haciendo»: mismo peso visual que «Recibida» y NO el de «Entregado». Entregado es
   el gesto que saca la comanda de la pantalla y por eso es el unico solido; los otros dos son
   acuses y no pueden competir con el a un metro de distancia. */
.comanda__proceso {
  display: block; width: 100%; margin-top: var(--sp-2); padding: var(--sp-3);
  font-size: 17px; font-weight: 600; border-radius: var(--radio);
  border: 2px dashed var(--marca, #b05994); background: transparent; color: var(--marca, #b05994);
}
.comanda__proceso:disabled { opacity: .6; cursor: default; }
.comanda__estado {
  margin: var(--sp-2) 0 0; font-size: 14px; font-weight: 600;
  color: var(--pos, #12805c); text-align: center;
}

/* La aclaracion del plato, ahora TOCABLE desde Mesas (antes era un <div> muerto). Se disfraza de
   texto y no de boton a proposito: en la cuenta de una mesa lo que importa son los platos y la
   plata, y un boton por renglon competiria con «Quitar». Pero tiene 44 px de alto real para que
   se pueda tocar con el dedo, que es el minimo de la casa. */
.linea-nota--boton {
  display: block; width: 100%; text-align: left; min-height: 44px;
  background: none; border: none; padding: 2px 0; cursor: pointer;
  font-size: 12px; color: var(--ink-2); font-family: inherit;
}
.linea-nota--boton:disabled { cursor: default; opacity: .6; }
.linea-nota--boton:focus-visible { box-shadow: var(--sombra-foco-neu); border-radius: var(--r-sm); }