/* Gastrointegra — paleta del apartado 18 del documento maestro.

   Fondo claro, para diferenciarlo del obrador de un vistazo. Dos colores y no
   seis: **verde profundo** para lo que se hace todos los días (catálogo,
   compras, inventario, ventas) y **barro** para lo que se hace porque lo pide
   alguien de fuera (sanidad, gestión, personal). El rojo queda reservado para
   lo que está mal —temperatura fuera de límite, margen negativo, control sin
   justificar— y el ámbar para lo que hay que mirar.

   En un programa que se mira muchas horas, si todo tiene color, nada destaca.
   Por eso se han retirado los seis colores de área de la S1: distinguían las
   tarjetas de la portada, pero le quitaban fuerza al único sitio donde el
   color tiene que gritar, que es una cámara a nueve grados.

   Cifras siempre en cifras tabulares: en un listado de precios, que los
   números no bailen de una fila a otra importa más que cualquier otra cosa. */

:root {
  --verde:    #0F6E56;   /* principal: cabecera, botones, enlaces */
  --verde-2:  #0b5442;   /* el mismo, más oscuro, para pulsaciones */
  --barro:    #993C1D;   /* secundario: sanidad, gestión, personal */
  --ambar:    #EF9F27;   /* aviso: bordes y marcas */
  --ambar-2:  #8a5a06;   /* el ámbar no se lee sobre blanco: para texto, este */
  --brasa:    #b3261e;   /* error, y solo error */

  --acero:    #eef0ec;   /* fondo claro, con una pizca de verde */
  --acero-2:  #dcdfd9;
  --papel:    #ffffff;
  --tinta:    #1a1d1b;
  --grafito:  #5f6863;

  /* Los nombres de área se quedan porque las plantillas los usan; lo que
     cambia es a qué apuntan. Un área no tiene color propio: tiene familia. */
  --catalogo:   var(--verde);
  --compras:    var(--verde);
  --inventario: var(--verde);
  --ventas:     var(--verde);
  --sanidad:    var(--barro);
  --gestion:    var(--barro);

  --borde: 1px solid var(--acero-2);
  --radio: 3px;
  --hueco: 1.25rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--acero);
  color: var(--tinta);
  font-family: "Source Sans 3", "Segoe UI", Inter, Roboto, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.02rem; }
p  { margin: 0 0 .75rem; max-width: 68ch; }
a  { color: var(--verde); }
small, .menudo { font-size: .85rem; color: var(--grafito); }

:focus-visible { outline: 3px solid var(--barro); outline-offset: 2px; }

/* ------------------------------------------------------------- estructura */

.cabecera {
  background: var(--verde);
  color: var(--acero);
  padding: .55rem 1rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem;
}
.cabecera a { color: var(--acero); text-decoration: none; }
.marca { font-weight: 600; letter-spacing: .01em; font-size: 1.05rem; }
.marca span { color: #9fc9ba; font-weight: 400; }
.cabecera nav { margin-left: auto; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.cabecera nav a:hover, .cabecera nav a:focus { text-decoration: underline; }
/* Encargo A5: en el teléfono el menú se pliega en un botón. */
.abrir-menu, .boton-menu { display: none; }
@media (max-width: 680px) {
  /* La casilla no se ve pero sigue ahí: se llega con el tabulador y se abre
     con la barra espaciadora, como cualquier casilla. */
  .abrir-menu { display: block; position: absolute; opacity: 0; width: 1px; height: 1px; }
  .abrir-menu:focus-visible + .boton-menu { outline: 3px solid var(--barro); outline-offset: 2px; }
  .boton-menu { display: inline-block; margin-left: auto; cursor: pointer;
    border: 1px solid #2e7a63; border-radius: var(--radio); padding: .25rem .7rem;
    background: var(--verde-2); color: var(--papel); font-size: .95rem; }
  .boton-menu::after { content: " ▾"; }
  .abrir-menu:checked + .boton-menu::after { content: " ▴"; }
  .cabecera nav { display: none; flex-basis: 100%; margin-left: 0;
    flex-direction: column; align-items: flex-start; gap: .55rem; padding: .3rem 0 .2rem; }
  .abrir-menu:checked ~ nav { display: flex; }
}
/* Sobre el verde profundo: un claro con la misma familia, no un gris frío. */
.quien { color: #9fc9ba; font-size: .88rem; }

.selector-local {
  background: var(--verde-2); color: var(--papel);
  border: 1px solid #2e7a63; border-radius: var(--radio);
  padding: .2rem .45rem; font: inherit; font-size: .9rem;
}

main { max-width: 1120px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
.estrecho { max-width: 460px; margin: 3rem auto; padding: 0 1rem 4rem; }

.titulo-pantalla { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap;
  margin-bottom: 1.25rem; }
.titulo-pantalla .menudo { margin-left: auto; }

.panel {
  background: var(--papel); border: var(--borde); border-radius: var(--radio);
  padding: var(--hueco); margin-bottom: var(--hueco);
}
.panel > :last-child { margin-bottom: 0; }

/* ----------------------------------------------------------------- avisos */

.avisos { margin-bottom: var(--hueco); display: grid; gap: .5rem; }
.aviso {
  background: var(--papel); border: var(--borde);
  border-left: 4px solid var(--grafito); border-radius: var(--radio);
  padding: .7rem .9rem; display: flex; gap: .75rem; align-items: baseline; flex-wrap: wrap;
}
.aviso p { margin: 0; flex: 1 1 22rem; }
.aviso.parar     { border-left-color: var(--brasa); }
.aviso.revisar   { border-left-color: var(--ambar); }
.aviso.enterarse { border-left-color: var(--grafito); }
.marca-aviso { font-size: .78rem; font-weight: 600; color: var(--grafito); }
.aviso.parar   .marca-aviso { color: var(--brasa); }
.aviso.revisar .marca-aviso { color: var(--ambar-2); }

.recado { border-radius: var(--radio); padding: .7rem .9rem; margin-bottom: .75rem;
  border: var(--borde); background: var(--papel); border-left: 4px solid var(--verde); }
.recado.aviso-recado { border-left-color: var(--brasa); }

/* ---------------------------------------------------------------- portada */

.camino { color: var(--grafito); font-size: .9rem; margin-bottom: 1rem; }

.areas { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 680px) { .areas { grid-template-columns: 1fr; } }

.area {
  display: block; text-decoration: none; color: inherit;
  background: var(--papel); border: var(--borde);
  border-left: 5px solid var(--color-area, var(--grafito));
  border-radius: var(--radio); padding: .95rem 1.1rem;
}
.area:hover, .area:focus { border-color: var(--color-area, var(--grafito)); }
.area h2 { color: var(--color-area, var(--tinta)); margin-bottom: .1rem; }
.area .lema { font-size: .92rem; color: var(--grafito); margin: 0 0 .5rem; }
.area ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .6rem; }
.area li { font-size: .84rem; color: var(--grafito); }
.area li.pendiente::after { content: " · " attr(data-sesion); color: var(--acero-2); }
.area li.sin-acceso { color: var(--grafito); }
.area li.sin-acceso::after { content: " · sin acceso"; font-size: .85em; }
.area.cerrada { opacity: .55; }
.area.cerrada .llave { font-size: .8rem; color: var(--grafito); }

.area-catalogo   { --color-area: var(--catalogo); }
.area-compras    { --color-area: var(--compras); }
.area-inventario { --color-area: var(--inventario); }
.area-ventas     { --color-area: var(--ventas); }
.area-sanidad    { --color-area: var(--sanidad); }
.area-gestion    { --color-area: var(--gestion); }

/* ---------------------------------------------------------------- tablas */

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: var(--borde); vertical-align: top; }
th { font-size: .82rem; color: var(--grafito); font-weight: 600; }
td.cifra, th.cifra { text-align: right; }
tbody tr:last-child td { border-bottom: none; }
.inactivo td { color: var(--grafito); }

/* --------------------------------------------------------------- formulario */

label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: .2rem; }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number],
select, textarea {
  width: 100%; font: inherit; padding: .45rem .55rem;
  border: 1px solid var(--acero-2); border-radius: var(--radio);
  background: var(--papel); color: var(--tinta);
}
textarea { min-height: 4.5rem; resize: vertical; }
input:disabled, select:disabled, textarea:disabled { background: var(--acero); color: var(--grafito); }
.campo { margin-bottom: .9rem; }
.campo .menudo { margin-top: .15rem; }
.fila { display: flex; gap: .75rem; flex-wrap: wrap; }
.fila > * { flex: 1 1 10rem; }
.casilla { display: flex; gap: .5rem; align-items: flex-start; }
.casilla input { width: auto; margin-top: .35rem; }
.casilla label { font-weight: 400; }

button, .boton {
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  display: inline-block; padding: .45rem .9rem; border-radius: var(--radio);
  border: 1px solid var(--verde); background: var(--verde); color: var(--papel);
}
button:hover, .boton:hover { background: var(--verde-2); }
.boton-suave { background: var(--papel); color: var(--tinta); border-color: var(--acero-2); }
.boton-suave:hover { background: var(--acero); }
.boton-riesgo { background: var(--brasa); border-color: var(--brasa); }
.boton-riesgo:hover { background: #8e1d16; }
.enlace-boton { background: none; border: none; padding: 0; color: var(--verde);
  text-decoration: underline; font-weight: 400; }

/* ------------------------------------------------------------------- ayuda */

/* El interrogante se abre al tocarlo. Era un `title` del navegador: solo salía
   pasando el ratón por encima y en un teléfono no salía nunca. */
details.interrogante { display: inline-block; position: relative;
  margin-left: .35rem; vertical-align: middle; }
details.interrogante > summary {
  list-style: none; cursor: pointer; user-select: none;
  border: 1px solid var(--acero-2); background: var(--papel); color: var(--grafito);
  width: 1.15rem; height: 1.15rem; line-height: 1.05rem; border-radius: 50%;
  font-size: .75rem; font-weight: 700; text-align: center;
}
details.interrogante > summary::-webkit-details-marker { display: none; }
details.interrogante[open] > summary { background: var(--tinta); color: var(--papel);
  border-color: var(--tinta); }
details.interrogante .globo {
  position: absolute; z-index: 40; left: 0; top: 1.5rem; width: max-content;
  max-width: min(22rem, 80vw); background: var(--papel); color: var(--tinta);
  border: 1px solid var(--acero-2); border-radius: var(--radio);
  box-shadow: 0 2px 8px rgba(0,0,0,.14); padding: .5rem .65rem;
  font-size: .86rem; font-weight: 400; line-height: 1.35; text-align: left;
  white-space: normal;
}
/* Cerca del borde derecho el globo se sale de la pantalla: se ancla a la
   derecha en cuanto el sitio es estrecho. */
@media (max-width: 680px) {
  details.interrogante .globo { left: auto; right: 0; max-width: 78vw; }
}
/* Y lo que quede fuera lo corrige `globo.js` al abrirlo, por los dos lados: a
   1280 px el globo de la vida útil de un plato ensanchaba la ficha 153 px, y a
   380 px se cortaba por la izquierda (tanda 10). Sin el guion, el globo se ancla
   como siempre. */
details.ayuda { margin-bottom: var(--hueco); }
details.ayuda summary { cursor: pointer; font-weight: 600; font-size: .92rem;
  color: var(--grafito); }
details.ayuda .panel { margin-top: .5rem; }
.texto-ayuda { font-size: .88rem; color: var(--grafito); margin: .25rem 0 0; }

/* ----------------------------------------------------------------- pestañas */

.pestanas { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: 1rem;
  border-bottom: var(--borde); }
.pestanas a { padding: .4rem .8rem; text-decoration: none; color: var(--grafito);
  border: 1px solid transparent; border-bottom: none; border-radius: var(--radio) var(--radio) 0 0; }
.pestanas a.puesta { background: var(--papel); border-color: var(--acero-2);
  color: var(--tinta); font-weight: 600; margin-bottom: -1px; }
/* Encargo A5: en el teléfono, las pestañas de cada área en una sola línea que se
   desliza con el dedo, en vez de cinco líneas de botones antes de llegar a la
   pantalla. Va después de la regla general para ganarle. */
@media (max-width: 680px) {
  .pestanas { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; }
  .pestanas a { white-space: nowrap; flex: 0 0 auto; }
}

.etiqueta { font-size: .75rem; border: var(--borde); border-radius: 999px;
  padding: .05rem .5rem; color: var(--grafito); white-space: nowrap; }
.etiqueta.propio { border-color: var(--barro); color: var(--barro); }

.pie { margin-top: 2.5rem; font-size: .82rem; color: var(--grafito);
  border-top: var(--borde); padding-top: .75rem; }

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

/* ------------------------------------------------------ compras (S3) */

/* Cifras a la derecha y con el mismo ancho de dígito: en un albarán, que los
   importes no bailen de una fila a otra es lo que permite repasarlo de un
   vistazo contra el papel. */
.cifra { text-align: right; white-space: nowrap; }
.cifra-grande { font-size: 1.3rem; margin: 0; }
.mal { color: var(--brasa); }
.etiqueta.mal { border-color: var(--brasa); }
.etiqueta.aviso-etiqueta { border-color: var(--ambar); color: var(--ambar-2); }

.control-recepcion {
  border: var(--borde); border-radius: var(--radio);
  padding: .75rem .9rem; margin: 0 0 .9rem;
}
.control-recepcion legend { font-size: .88rem; color: var(--grafito); padding: 0 .35rem; }

.fila-apretada { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.fila-apretada input { width: auto; }

table.libro { font-size: .86rem; }
table.libro td { vertical-align: top; }
tr.rechazada td { background: #fdf6f4; }

/* ------------------------------------------- hojas imprimibles (S3) */

/* El libro de registro se lleva a la inspección en papel, así que la hoja
   imita al cuaderno: encabezado de la empresa arriba, firma abajo y nada de
   la pantalla por medio. El PDF se hace desde el propio navegador, que es lo
   que ya sabe hacer todo el mundo y no añade ninguna dependencia. */

/* Se parte en varias líneas: en un teléfono no caben cinco enlaces en fila,
   y la ficha del plato ya lleva seis. */
.barra-impresion { display: flex; flex-wrap: wrap; gap: .5rem 1rem;
  align-items: center; margin-bottom: 1rem; }

.hoja {
  background: var(--papel); border: var(--borde); border-radius: var(--radio);
  padding: 1.5rem;
}
.encabezado-documento { border-bottom: 2px solid var(--tinta); padding-bottom: .5rem;
  margin-bottom: 1rem; }
.encabezado-documento p { margin: 0; }
.pie-documento { margin-top: 1.5rem; border-top: var(--borde); padding-top: .75rem;
  font-size: .8rem; color: var(--grafito); }
.pie-documento .firmas { display: flex; gap: 2rem; flex-wrap: wrap; margin-top: 1.5rem; }

@media print {
  body { background: var(--papel); font-size: 11px; }
  .cabecera, .pestanas, .ayuda, .recado, .avisos, .pie,
  .solo-pantalla, form.panel, .barra-impresion { display: none !important; }
  main { max-width: none; margin: 0; padding: 0; }
  .hoja { border: none; padding: 0; }
  table { page-break-inside: auto; }
  tr { page-break-inside: avoid; }
  thead { display: table-header-group; }   /* la cabecera se repite en cada hoja */
  a { color: inherit; text-decoration: none; }
}

/* ---------------------------------------------- revisión de lecturas (S4) */

/* La revisión del escáner y la de la importación son tablas con un campo en
   casi cada celda: caben mal en el ancho de lectura del resto del programa y
   se leen de un vistazo, no de arriba abajo. */
.ancho { max-width: 1400px; }

.revision td { vertical-align: top; }
.revision input[type="text"], .revision input[type="number"], .revision select {
  padding: .3rem .4rem; font-size: .9rem; margin: 0;
}
.revision input[type="number"], .revision td.cifra input { text-align: right; }
.revision .menudo { display: block; }
.revision .etiqueta { margin-top: .2rem; display: inline-block; }

/* ------------------------------------- escandallos y alérgenos (S5) */

/* La matriz de alérgenos es una tabla de catorce columnas estrechas y una
   ancha. Los nombres de los alérgenos van girados porque escritos en
   horizontal harían la hoja tres veces más ancha que un A4, y esta hoja se
   cuelga en la pared y se le enseña al inspector. */
.matriz-alergenos { table-layout: auto; }
.matriz-alergenos th.vertical {
  writing-mode: vertical-rl; transform: rotate(180deg);
  /* Tanda 15: «Dióxido de azufre y sulfitos» no cabía en 8,5 rem y se salía por
     encima de la tabla; con la tabla en su caja deslizable se cortaba. Ahora el
     rótulo que no quepa va en dos renglones, y con 9 rem solo es ese. */
  white-space: normal; height: 9rem; vertical-align: bottom;
  font-weight: 500; font-size: .82rem; padding: .3rem .1rem;
}
.matriz-alergenos td.marca {
  text-align: center; font-size: 1.05rem; padding: .35rem .2rem;
  border-left: 1px solid var(--acero-2);
}
/* La interrogación es lo único de esta hoja que está mal: un plato que no
   declara sus alérgenos porque nadie los ha repasado. */
.matriz-alergenos td.marca span[title^="Sin"] { color: var(--brasa); font-weight: 700; }
.leyenda { margin-top: .75rem; }

/* La hoja de escandallo se rellena a mano en cocina, con boli y encima de una
   mesa de acero: los renglones en blanco tienen que tener altura de verdad. */
.cabecera-hoja { margin: 1rem 0; }
.cabecera-hoja td { vertical-align: top; padding: .4rem .6rem; }
.nota-albaran {
  border: 2px solid var(--ambar); border-radius: var(--radio);
  padding: .5rem .75rem; margin: 1rem 0;
}
.renglones tr.en-blanco td { height: 1.9rem; }
.renglones tr.separador-familia td {
  background: var(--acero); font-weight: 600; font-size: .85rem;
  text-transform: uppercase; letter-spacing: .03em;
}
.caja-observaciones {
  border: var(--borde); border-radius: var(--radio); height: 4.5rem;
}

/* ------------------------------------------------------- menús (S6) */

/* El reparto de un menú se lee turno a turno, y lo primero que hay que ver de
   un turno es si suma 100 %. Por eso el porcentaje va pegado al título y en
   rojo cuando no cuadra: es el único dato de esta pantalla que puede estar
   mal sin que se note en ninguna otra parte hasta el conteo del mes. */
.panel h3 .etiqueta { margin-left: .4rem; font-weight: 500; }

/* La tabla de precios por canal tiene una columna por sitio de venta y dos
   cifras en cada celda: lo que se cobra y lo que queda. La segunda va debajo y
   más pequeña para que la primera se siga leyendo de un vistazo. */
.canales td .menudo { display: block; }

/* Conversor de medidas (alta del artículo y referencias de compra) */
.conversor { border: var(--borde); border-radius: var(--radio); padding: .6rem .8rem; margin: .6rem 0; }
.conversor legend { font-weight: 600; padding: 0 .3rem; }
.conversor .fila-apretada { flex-wrap: wrap; }
.conversor input[type="text"] { width: 5.5rem; }
.conversor select { width: auto; min-width: 7rem; }
.conversor [data-conv-resultado] { font-size: 1rem; font-weight: 600; margin: .5rem 0 0; }
.conversor [data-conv-resultado].mal { color: var(--brasa); }

/* Lo oculto se oculta aunque su clase diga display:flex (.fila, .fila-apretada). */
[hidden] { display: none !important; }

/* ---------------------------------------------------------- sanidad (S9) */

/* Anotar cámaras y prerrequisitos se hace con el teléfono en la mano y a
   veces con guantes (15.4): una tarjeta por cámara, botones de dedo y no de
   ratón, y la casilla de la temperatura con teclado numérico. */
.tarjetas-control { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  margin-bottom: var(--hueco); }
.tarjeta-control { background: var(--papel); border: var(--borde); border-left: 5px solid var(--barro);
  border-radius: var(--radio); padding: .8rem .9rem; scroll-margin-top: 1rem; }
.tarjeta-control h2 { font-size: 1.1rem; margin-bottom: .1rem; }
.tarjeta-control h3 { font-size: .85rem; color: var(--grafito); margin: .5rem 0 .2rem; }
.turno-control { border-top: var(--borde); padding-top: .5rem; margin-top: .5rem; }
.turno-control.fuera { border-top-color: var(--brasa); }
.fila-control { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: .35rem 0; }
.boton-control { min-width: 3.2rem; min-height: 3rem; font-size: 1.4rem; line-height: 1; }
.fila-control button { min-height: 3rem; }
.temperatura-control { width: 6.5rem !important; min-height: 3rem; font-size: 1.15rem; text-align: right; }
.estado-control { margin: .2rem 0; font-size: 1.05rem; }
.bien-control { color: var(--verde); font-weight: 600; }
details.corregir summary { cursor: pointer; }
.incidencia-control { border-left: 3px solid var(--brasa); padding-left: .6rem; margin-top: .4rem; }
.diferido-aviso { border-left-color: var(--ambar); }
.dia-control { align-items: end; }
.linea-config { border-bottom: var(--borde); padding-bottom: .4rem; margin-bottom: .6rem; }
.linea-config .campo { margin-bottom: .3rem; }
@media (max-width: 680px) {
  .tarjetas-control { grid-template-columns: 1fr; }
  main { padding-left: .6rem; padding-right: .6rem; }
}

/* La hoja mensual tiene un día por fila y una columna por cámara: en el
   teléfono se desliza de lado dentro de su caja en vez de romper la página. */
.rejilla-hoja { overflow-x: auto; }
table.hoja-mensual { font-size: .82rem; border-collapse: collapse; }
.hoja-mensual th, .hoja-mensual td { border: 1px solid var(--acero-2); padding: .15rem .3rem; text-align: center; }
.hoja-mensual tbody th { text-align: left; white-space: nowrap; }
.hoja-mensual .cabeza-camara { min-width: 4.5rem; }
.hoja-mensual td.celda { white-space: nowrap; }
tr.dia-cerrado td, tr.dia-cerrado th { background: var(--acero); }
.marca-diferido { color: var(--ambar-2); font-weight: 700; }
.lista-diferidos { margin: 0 0 .75rem; }

/* Etiquetas de elaborado: en A4 van en rejilla de dos por cuatro; en la
   impresora de rollo, una por hoja (el tamaño lo pone la propia plantilla). */
.hoja-etiquetas { display: grid; gap: 4mm; grid-template-columns: repeat(2, 1fr); }
.hoja-etiquetas.formato-rollo { grid-template-columns: 1fr; max-width: 62mm; }
.etiqueta-elaborado { border: 1px dashed var(--grafito); padding: 3mm; background: var(--papel);
  break-inside: avoid; font-size: .85rem; }
.etiqueta-elaborado p { margin: 0 0 1mm; }
.etiqueta-nombre { font-weight: 700; font-size: 1.05rem; }
.etiqueta-consumo { font-weight: 700; font-size: 1rem; }
.etiqueta-alergenos { font-size: .8rem; }

/* El libro APPCC se imprime por secciones: cada una empieza en hoja nueva. */
.libro-appcc h2 { margin-top: 1.25rem; }
@media print {
  .salto { page-break-before: always; }
  .portada-libro + .salto { page-break-before: always; }
  .hoja-mensual { font-size: 9px; }
  .rejilla-hoja { overflow: visible; }
  .tarjetas-control, .dia-control { display: none !important; }
}

/* Las tablas de registro (incidencias al pie, formación, libro APPCC) tienen
   seis columnas o más: en el teléfono se deslizan de lado dentro de su sitio,
   como la hoja mensual, en vez de ensanchar la página entera. Solo en pantalla:
   en papel se imprimen enteras. */
@media screen and (max-width: 680px) {
  table.libro { display: block; overflow-x: auto; max-width: 100%; }
}

/* ---------------------------------------------- ficha del plato (tras S9)
   La del obrador en colores claros: bloques uno debajo de otro y un solo
   «Guardar» al pie. */
fieldset.sin-marco { border: 0; padding: 0; margin: 0; min-width: 0; }
.ficha-plato .panel h2 { font-size: 1.05rem; color: var(--verde); }
.ficha-plato h3 { font-size: .95rem; margin-top: 1rem; }
.miniatura { display: block; max-width: 160px; max-height: 110px; border-radius: var(--radio); margin-bottom: .35rem; }
.rejilla-casillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .2rem .9rem; margin-bottom: .6rem; }
.rejilla-alergenos { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: .3rem .9rem; margin-bottom: .6rem; }
.alergeno-celda { display: grid; grid-template-columns: auto 1fr; gap: 0 .45rem; align-items: start; padding: .2rem .35rem;
  border-radius: var(--radio); }
.alergeno-celda input { width: auto; margin-top: .35rem; }
.alergeno-celda.lleva { background: #fff4e0; }
.alergeno-celda.traza { background: var(--acero); }
.alergeno-celda .de-donde { grid-column: 2; line-height: 1.3; }
.punto-appcc { border-left: 3px solid var(--acero-2); padding: .5rem 0 .1rem .75rem; margin-bottom: .75rem; }
.puntos-appcc summary { cursor: pointer; margin: .4rem 0; }
.composicion input { min-width: 0; }
.composicion td { vertical-align: top; }
.composicion .aviso-linea { display: block; }
.recuadro-cifras { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .6rem 1.2rem;
  border: var(--borde); border-radius: var(--radio); padding: .8rem 1rem; background: var(--papel); margin-bottom: .6rem; }
.recuadro-cifras div { display: flex; flex-direction: column; }
.recuadro-cifras span { font-size: .8rem; color: var(--grafito); }
.recuadro-cifras b { font-size: 1.15rem; font-weight: 600; }
.recuadro-cifras i { font-style: normal; font-size: .8rem; color: var(--grafito); }
.recuadro-cifras .destacado b { color: var(--verde); }
.recuadro-cifras .destacado.mal b { color: var(--brasa); }
/* Tanda 13: clientes por punto cuando se mezclan comensales y tickets. Ocupa dos
   columnas para que cada línea se lea entera; en el móvil, la que haya. */
.recuadro-cifras .por-punto { grid-column: span 2; }
.recuadro-cifras .por-punto b.linea-punto { font-size: 1rem; }
@media (max-width: 30rem) { .recuadro-cifras .por-punto { grid-column: auto; } }
.grupos-pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.grupo-pasos ol { padding-left: 1.4rem; margin: 0 0 .5rem; }
.grupo-pasos li { margin-bottom: .35rem; }
.botonera-ficha { position: sticky; bottom: 0; z-index: 2; max-width: none; background: var(--acero);
  padding: .6rem 0; margin: 0; border-top: var(--borde); }
.tabla-deslizable { overflow-x: auto; }
dialog.dialogo { border: var(--borde); border-radius: var(--radio); max-width: 36rem; width: 92vw; padding: 1.2rem; }
dialog.dialogo::backdrop { background: rgba(26, 29, 27, .45); }
.pasos-hoja { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .6rem; }
.firmas span { margin-right: 1.5rem; }
@media print { .pasos-hoja { grid-template-columns: repeat(3, 1fr); } }

/* ---------------------------------------------------------------- gestión (S10)
   La cuenta de explotación se lee de arriba abajo como la del papel: bloques con
   su título, las líneas sangradas y los totales con raya. Lo único que destaca es
   lo que decide el mes, el prime cost y los resultados; en rojo solo si pierden. */
.selector-mes { display: flex; align-items: center; gap: .6rem; }
.selector-mes a, .selector-mes span { text-decoration: none; font-size: 1.3rem; line-height: 1; padding: 0 .35rem; }
.selector-mes span { color: var(--acero-2); }
.selector-mes b { font-weight: 600; min-width: 9.5rem; text-align: center; }

table.cuenta { width: 100%; }
table.cuenta tbody th { font-weight: 400; text-align: left; font-size: 1rem; color: var(--tinta); }
table.cuenta td, table.cuenta tbody th { padding-top: .35rem; padding-bottom: .35rem; }
table.cuenta tr.bloque th { font-weight: 600; color: var(--barro); padding-top: 1.1rem; border-bottom: var(--borde); }
table.cuenta tr.sub th { padding-left: 1.2rem; }
table.cuenta tr.desglose th, table.cuenta tr.desglose td { padding-left: 2.2rem; color: var(--grafito); font-size: .9rem; }
table.cuenta tr.total th, table.cuenta tr.total td { font-weight: 600; border-top: 1px solid var(--tinta); }
table.cuenta tr.destacada th, table.cuenta tr.destacada td { font-weight: 700; font-size: 1.05rem;
  background: var(--acero); border-top: 2px solid var(--tinta); }
table.cuenta .nota-fila { display: block; font-size: .78rem; color: var(--grafito); }
.panel h3 { margin-top: 1.4rem; }
table.cuenta td.cifra { white-space: nowrap; }
.por-punto td, .por-punto th { white-space: nowrap; }

.panel.primero { display: grid; grid-template-columns: minmax(12rem, auto) 1fr; gap: .4rem 2rem; align-items: end; }
.indicador p { margin: 0; }
.indicador-nombre { font-weight: 600; }
.indicador-valor { font-size: 3rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.indicador-euros { color: var(--grafito); }
.barra-prime { display: flex; height: 1rem; background: var(--acero); border: var(--borde); border-radius: var(--radio); overflow: hidden; }
.tramo-materia { background: var(--verde); }
.tramo-personal { background: var(--barro); }
.leyenda-prime { grid-column: 2; margin: 0; }
.muestra { display: inline-block; width: .7rem; height: .7rem; vertical-align: middle; margin: 0 .2rem 0 .6rem; border-radius: 2px; }
.panel-cifras i.fiable { color: var(--verde); }
.panel-cifras i.estimado { color: var(--ambar-2); }
@media (max-width: 680px) {
  .panel.primero { grid-template-columns: 1fr; }
  .leyenda-prime { grid-column: 1; }
  .indicador-valor { font-size: 2.4rem; }
  .titulo-pantalla { flex-wrap: wrap; }
}

.rejilla-cierre { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.rejilla-cierre > * { min-width: 0; }
.lista-meses ul { list-style: none; padding: 0; margin: 0; }
.lista-meses li { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; padding: .35rem .4rem; border-bottom: var(--borde); }
.lista-meses li a { flex: 1 1 auto; text-decoration: none; }
.lista-meses li.elegido { background: var(--acero); font-weight: 600; }
.avisos-cierre { padding-left: 1.1rem; }
.avisos-cierre li { margin-bottom: .35rem; }
.cerrar-mes { margin: 1rem 0; padding: .8rem; border: 1px solid var(--barro); border-radius: var(--radio); }
details.reabrir, details.versiones { margin: .8rem 0; }
@media (max-width: 800px) { .rejilla-cierre { grid-template-columns: 1fr; } }

.lineas-gasto input[type="text"] { text-align: right; min-width: 7rem; }
.lineas-gasto select { min-width: 10rem; }
.lista-pendientes { list-style: none; padding: 0; margin: 0; }
.lista-pendientes li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; align-items: center;
  padding: .4rem 0; border-bottom: var(--borde); }
.panel.pendientes { border-left: 3px solid var(--ambar); }
.quitar-gasto { margin: -.5rem 0 1rem; }
td.acciones { white-space: nowrap; }
td.acciones a + a { margin-left: .6rem; }
.fila-cuenta { flex-wrap: wrap; }
.fila-cuenta input[type="text"] { flex: 1 1 14rem; }

.rejilla-personal th, .rejilla-personal td { padding-left: .3rem; padding-right: .3rem; }
.rejilla-personal input[type="text"] { min-width: 5.5rem; width: 6.5rem; }
.rejilla-personal input[name$="_horas"] { min-width: 4rem; width: 4.5rem; }
.rejilla-personal td:first-child input[type="text"] { min-width: 10rem; width: 100%; }
.rejilla-personal input[data-pct] { min-width: 3.2rem; width: 3.6rem; text-align: right; }
.rejilla-personal td.cifra input { text-align: right; }
input[readonly] { background: var(--acero); color: var(--grafito); }

.elegir-proveedor select { min-width: 14rem; }
.cuadre { font-weight: 600; }

/* ------------------------------------------------- ingeniería de carta (S11) */

/* Las cuatro categorías no llevan cuatro colores (apartado 18: si todo tiene
   color, nada destaca). Estrella en verde, que es lo bueno; Perro con borde de
   ámbar, que es lo que hay que mirar; Puzzle y Caballo, neutras. El rojo se
   queda para el margen negativo. */
.etiqueta.categoria-estrella { border-color: var(--verde); color: var(--verde); font-weight: 600; }
.etiqueta.categoria-perro { border-color: var(--ambar); color: var(--ambar-2); }
.etiqueta.categoria-puzzle, .etiqueta.categoria-caballo { color: var(--tinta); }
.recado.mirar { border-left-color: var(--ambar); }
.titulo-familia { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; }
.umbral-familia .fila { align-items: flex-end; }
.umbral-familia .fila > * { flex: 0 1 auto; }
.campo-boton { display: flex; align-items: flex-end; }
.resumen-categorias { display: flex; flex-wrap: wrap; gap: .35rem; margin: .25rem 0 .6rem; }
.tabla-matriz .col-accion { min-width: 14rem; white-space: normal; }
.fuera-matriz { margin: .6rem 0; }
.fuera-matriz summary { cursor: pointer; color: var(--grafito); }
.omnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .5rem 1.25rem; }
.omnes p { margin: .1rem 0; }
.omnes-nombre { font-weight: 600; }
.cumple { color: var(--verde); }
.no-cumple { color: var(--ambar-2); font-weight: 600; }
.periodo-carta .fila > * { flex: 0 1 auto; }
.insignia-carta { border: var(--borde); border-left: 4px solid var(--acero-2); border-radius: var(--radio);
  background: var(--papel); padding: .6rem .9rem; display: flex; flex-direction: column; gap: .15rem;
  margin-bottom: .75rem; }
.insignia-carta.categoria-estrella { border-left-color: var(--verde); }
.insignia-carta.categoria-perro { border-left-color: var(--ambar); }
@media (max-width: 680px) {
  .periodo-carta .fila > *, .umbral-familia .fila > * { flex: 1 1 100%; }
  .tabla-matriz .col-accion { min-width: 20rem; }
}

/* ------------------------------------------- puesta en marcha (17.2, S12) */

/* Va delante de las seis áreas y detrás de los avisos: lo primero es lo que
   hay que arreglar hoy; esto es lo que falta por montar, que no corre. Sin
   color de área, porque la puesta en marcha las atraviesa todas. */
.arranque {
  background: var(--papel); border: var(--borde);
  border-left: 5px solid var(--verde);
  border-radius: var(--radio); padding: .95rem 1.1rem; margin-bottom: var(--hueco);
}
.arranque-listo { border-left-color: var(--acero-2); }
.arranque-cabecera { display: flex; align-items: baseline; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap; }
.arranque-cabecera h2 { margin: 0; font-size: 1.05rem; }
.arranque-cuenta { font-size: .88rem; color: var(--grafito); font-weight: 600; }
.arranque-fin { margin: .4rem 0 0; font-size: .9rem; color: var(--grafito); }

.arranque-pasos { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .1rem; }
.paso { display: flex; gap: .7rem; align-items: baseline;
  padding: .45rem 0; border-top: var(--borde); }
.paso:first-child { border-top: none; }
.paso-marca {
  flex: 0 0 1.5rem; height: 1.5rem; border-radius: 50%; border: var(--borde);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .8rem; color: var(--grafito); align-self: flex-start;
}
.paso-hecho .paso-marca { border-color: var(--verde); color: var(--verde); }
.paso-texto { flex: 1 1 14rem; display: flex; flex-direction: column; }
.paso-texto .menudo { font-size: .84rem; }
.paso-detalle { font-size: .84rem; color: var(--grafito); font-variant-numeric: tabular-nums; }
.paso-pendientes { list-style: none; margin: .2rem 0 0; padding: 0; font-size: .88rem; }
.paso-pendientes li { margin: .1rem 0; }
.paso-estado { flex: 0 0 auto; font-size: .78rem; font-weight: 600; color: var(--grafito); }
.paso-hecho .paso-estado { color: var(--verde); }
.paso-falta .paso-estado { color: var(--ambar-2); }

@media (max-width: 680px) {
  /* En el móvil «Hecho/Falta» se lee en la marca de la izquierda, y la columna
     de la derecha solo le robaba ancho al texto del paso. */
  .paso-estado { display: none; }
}

/* Familias de plato: el umbral es una columna propia, no la etiqueta de la
   casilla de al lado. Se separan con un hueco y las casillas se centran. */
th.umbral, td.umbral { padding-right: 1.6rem; }
th.marca, td.marca { width: 5rem; text-align: center; }

/* Secciones plegables dentro de una ficha. Cerradas de partida: lo que no se
   usa no ocupa media pantalla, y el resumen dice si hay algo dentro. */
details.plegable { margin-top: .9rem; }
details.plegable > summary { cursor: pointer; font-weight: 600; font-size: 1rem;
  color: var(--verde); list-style: none; display: flex; align-items: center;
  gap: .45rem; padding: .3rem 0; }
details.plegable > summary::before { content: "▸"; font-size: .8rem; color: var(--grafito); }
details.plegable[open] > summary::before { content: "▾"; }
details.plegable > summary::-webkit-details-marker { display: none; }

/* Ficha de plato: cabe más en la pantalla. Antes había que bajar tres veces
   para ver un plato entero. */
.ficha-plato .panel { padding: .8rem .95rem; margin-bottom: .7rem; }
.ficha-plato h2 { font-size: 1.05rem; margin: 0 0 .5rem; }
.ficha-plato h3 { font-size: .96rem; margin: .8rem 0 .4rem; }
.ficha-plato .fila { gap: .6rem; margin-bottom: .5rem; }
.ficha-plato .campo label { margin-bottom: .1rem; }
.ficha-plato .menudo { font-size: .84rem; }
.ficha-plato table td, .ficha-plato table th { padding: .3rem .4rem; }

/* Las acciones de una pantalla de listado van arriba: crear es a lo que se
   entra casi siempre mientras se monta el catálogo. */
p.acciones { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 var(--hueco); }
.boton.secundario { background: var(--papel); color: var(--tinta);
  border: 1px solid var(--acero-2); }
.boton.secundario:hover { background: var(--hueso); }

/* ----------------------------------------- listado de artículos imprimible */

.hoja-listado table.listado { width: 100%; border-collapse: collapse; }
.hoja-listado table.listado th { text-align: left; border-bottom: 2px solid var(--tinta);
  padding: .3rem .4rem; }
.hoja-listado table.listado td { padding: .25rem .4rem; border-bottom: 1px solid var(--acero-2); }
.hoja-listado tr.separador td { background: var(--hueso); border-top: 1px solid var(--acero-2);
  padding-top: .4rem; }

@media print {
  .hoja-listado { font-size: 10px; }
  .hoja-listado table.listado td { padding: .15rem .3rem; }
  .hoja-listado tr.separador { page-break-after: avoid; }
}

/* ------------------------------------------ ficha técnica del plato (hoja) */

.hoja-tecnica h1 { font-size: 1.3rem; margin: 0 0 .7rem; }
.hoja-tecnica h2 { font-size: 1rem; margin: 1.1rem 0 .4rem;
  border-bottom: 1px solid var(--acero-2); padding-bottom: .2rem; }
.hoja-tecnica h3 { font-size: .92rem; margin: .7rem 0 .25rem; }
.hoja-tecnica .cabecera-tecnica { display: flex; gap: 1rem; align-items: flex-start; }
.hoja-tecnica .cabecera-tecnica .datos { flex: 1 1 auto; }
.hoja-tecnica .foto-plato { flex: 0 0 auto; width: 9rem; height: 9rem;
  object-fit: cover; border: var(--borde); border-radius: var(--radio); }
.hoja-tecnica table.datos { width: 100%; border-collapse: collapse; }
.hoja-tecnica table.datos td { border: 1px solid var(--acero-2);
  padding: .3rem .45rem; vertical-align: top; }
.hoja-tecnica table.listado { width: 100%; border-collapse: collapse; }
.hoja-tecnica table.listado th { text-align: left; border-bottom: 2px solid var(--tinta);
  padding: .25rem .4rem; }
.hoja-tecnica table.listado td { padding: .22rem .4rem;
  border-bottom: 1px solid var(--acero-2); }
.hoja-tecnica table.economia td:first-child { width: 70%; }
.hoja-tecnica tr.destacada td { border-top: 2px solid var(--tinta); }
.hoja-tecnica ol.pasos { margin: .2rem 0 .2rem 1.2rem; padding: 0; }
.hoja-tecnica ol.pasos li { margin: .12rem 0; }
.hoja-tecnica .descripcion { margin: .35rem 0; }
.hoja-tecnica .periodo { border-left: 3px solid var(--ambar-2); padding-left: .5rem; }

@media print {
  .hoja-tecnica { font-size: 10.5px; }
  .hoja-tecnica h2 { page-break-after: avoid; }
  .hoja-tecnica table { page-break-inside: auto; }
  .hoja-tecnica .foto-plato { width: 7rem; height: 7rem; }
}

@media print {
  /* Al imprimir no hay «deslizar»: la tabla tiene que caber entera. */
  .tabla-deslizable { overflow-x: visible !important; }
}

@media (max-width: 420px) {
  /* En un teléfono estrecho, 15 rem de columna ya no caben: una sola. */
  .rejilla-casillas, .rejilla-alergenos { grid-template-columns: 1fr; }
  /* El globo del interrogante se ancla al lado del botón, no al borde. */
  details.interrogante .globo { max-width: 70vw; }
}

/* ------------------------------- aviso de cambios sin guardar (ajustes) */

/* Varias pantallas son varios formularios con su propio botón, y nada lo
   decía: se escribía algo, se pulsaba el Guardar de otro bloque y el cambio se
   perdía en silencio. */
.aviso-sin-guardar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 60;
  max-width: min(38rem, 92vw);
  background: #fdf3e0; color: var(--ambar-2);
  border: 1px solid var(--ambar); border-radius: var(--radio);
  box-shadow: 0 3px 12px rgba(0,0,0,.18);
  padding: .55rem .9rem; font-size: .88rem; text-align: center;
}
form.con-cambios { position: relative; }
form.con-cambios::before {
  content: ""; position: absolute; left: -.6rem; top: 0; bottom: 0;
  width: 3px; background: var(--ambar-2); border-radius: 2px;
}
@media print { .aviso-sin-guardar { display: none !important; } }

/* La unidad del artículo, recordada donde se usa: es lo que decide qué pide el
   bloque del proveedor, y estaba tres bloques más arriba. */
.unidad-en-uso { background: var(--hueso); border-left: 3px solid var(--acero-2);
  padding: .4rem .6rem; margin: 0 0 .7rem; font-size: .88rem; border-radius: 0 3px 3px 0; }

/* ------------------------------------- hoja de conteo a dos columnas (ajustes) */

/* Con 150 artículos salían once páginas. En vertical y a dos bloques caben en
   dos o tres. El navegador reparte el contenido como un texto: llena la
   columna izquierda, salta a la derecha y luego a la hoja siguiente. */
.columnas-conteo { column-count: 2; column-gap: 1.1rem; }
.columnas-conteo .bloque-familia {
  width: 100%; border-collapse: collapse; margin: 0 0 .5rem;
  /* Una familia no se parte entre hojas; entre columnas de la misma, sí. */
  break-inside: avoid-page;
}
/* La cabecera se repite en cada bloque: sin ella, la casilla de cantidad y la
   de observaciones son dos huecos iguales y nadie sabe cuál es cuál. */
.columnas-conteo .bloque-familia th {
  border: 1px solid var(--acero-2); padding: .15rem .3rem;
  font-size: .68rem; text-align: left; background: var(--papel);
  font-weight: 600; color: var(--grafito);
}
.columnas-conteo .bloque-familia td { border: 1px solid var(--acero-2);
  padding: .22rem .3rem; font-size: .8rem; }
/* Observaciones se queda con todo lo que sobra: es donde se apunta un embalaje
   roto o una caja abierta, y era la que menos sitio tenía. Las otras tres
   llevan lo justo. */
.columnas-conteo .art { width: 38%; }
.columnas-conteo .uni { width: 8%; }
.columnas-conteo .cant { width: 14%; }   /* lo justo para un número a mano */
.columnas-conteo tr.separador-familia td { background: var(--hueso);
  font-weight: 700; font-size: .84rem; }
.columnas-conteo .menudo { font-size: .72rem; }

@media print {
  @page { size: A4 portrait; margin: 10mm; }
  .columnas-conteo { column-count: 2; }
  .columnas-conteo .bloque-familia td { padding: .16rem .25rem; font-size: 7.6pt; }
  .columnas-conteo tr.separador-familia td { font-size: 8pt; }
  .columnas-conteo .menudo { font-size: 6.6pt; }
  /* Si una familia no cabe ni en una hoja entera, se parte: mejor eso que
     dejar media página en blanco y seguir igual en la siguiente. */
  .columnas-conteo .bloque-familia { break-inside: auto; }
  .columnas-conteo .bloque-familia > tbody > tr { break-inside: avoid; }
}

/* Los pasos del alta de artículo: aparecen según se rellena lo anterior. */
.paso-titulo { font-weight: 700; color: var(--verde); margin: 1.1rem 0 .5rem;
  display: flex; align-items: center; gap: .5rem; }
.paso-titulo::before {
  content: attr(data-paso-num); flex: 0 0 1.4rem; height: 1.4rem;
  border-radius: 50%; background: var(--verde); color: var(--papel);
  font-size: .78rem; display: inline-flex; align-items: center; justify-content: center;
}
.paso-titulo:first-child { margin-top: 0; }

/* ------------------- escandallo y ficha técnica en una sola página (ajustes) */

/* Una hoja que se va a dos caras acaba colgada solo la primera. Con letra más
   pequeña y las dos mitades en columna caben los platos largos: una carrillera
   con diez ingredientes y ocho procesos entra en una A4.
   Solo al imprimir: en pantalla no hay motivo para apretar nada. */
@media print {
  @page { size: A4 portrait; margin: 9mm; }

  .hoja-escandallo, .hoja-tecnica { font-size: 8pt; line-height: 1.25; }
  .hoja-escandallo h1, .hoja-tecnica h1 { font-size: 13pt; margin: 0 0 .35rem; }
  .hoja-escandallo h2, .hoja-tecnica h2 { font-size: 9pt; margin: .5rem 0 .2rem; }
  .hoja-escandallo h3, .hoja-tecnica h3 { font-size: 8.4pt; margin: .35rem 0 .15rem; }
  .hoja-escandallo .menudo, .hoja-tecnica .menudo { font-size: 6.8pt; }
  .hoja-escandallo td, .hoja-escandallo th,
  .hoja-tecnica td, .hoja-tecnica th { padding: .1rem .25rem; }

  /* La foto sirve para reconocer el plato, no para admirarlo. */
  .hoja-tecnica .foto-plato { width: 24mm; height: 24mm; }

  /* Lo de abajo a dos columnas: procesos, conservación y carta ocupan la mitad
     de alto y la receta se queda entera arriba, que es lo que se consulta. */
  .hoja-tecnica .a-dos-columnas { column-count: 2; column-gap: 7mm; }
  .hoja-tecnica .a-dos-columnas > * { break-inside: avoid; }
  .hoja-tecnica .a-dos-columnas h2 { break-after: avoid; }

  .hoja-escandallo .a-dos-columnas { column-count: 2; column-gap: 7mm; }
  .hoja-escandallo .a-dos-columnas > * { break-inside: avoid; }

  /* Sin sombras ni fondos: gastan tinta y no aportan en papel. */
  .hoja-tecnica table.datos td { border-color: #999; }

  /* El hueco de observaciones se queda con lo que sobre: si por él la hoja se
     va a una segunda página con solo la firma dentro, no sirve de nada. */
  /* El hueco de observaciones es lo que cede: con quince ingredientes, un
     recuadro grande manda la firma a una segunda página donde no hay nada más.
     `break-inside: avoid` aquí era peor todavía, porque saltaba el pie entero. */
  .hoja-escandallo .caja-observaciones { min-height: 8mm; }
  .hoja-escandallo .pie-documento { margin-top: .2rem; }
  .hoja-escandallo .pie-documento .menudo { font-size: 6.4pt; margin: .5mm 0; }
  .hoja-escandallo .en-blanco td { height: 4mm; }
  /* Las tres firmas en una línea: en tres líneas se llevaban la hoja entera a
     una segunda página con solo eso dentro. */
  .hoja-escandallo .firmas { display: flex; gap: 6mm; flex-wrap: nowrap;
    font-size: 7.4pt; margin-top: 1.5mm; }
  .hoja-escandallo .firmas span { white-space: nowrap; }
}

/* Las familias de partida son una propuesta y hay que decirlo: si salen sin
   más, nadie las mira y el local acaba analizando su carta con las familias
   que le puso el programa. */
.propuesta { background: #fdf3e0; border: 1px solid var(--ambar);
  border-radius: var(--radio); padding: .8rem 1rem; margin-bottom: var(--hueco); }
.propuesta h3 { margin: 0 0 .35rem; font-size: 1rem; color: var(--ambar-2); }
.propuesta p { margin: .3rem 0; }
.propuesta form { margin-top: .6rem; }

@media (max-width: 680px) {
  /* Dos columnas en un teléfono no caben: se lee en una y al imprimir vuelven
     las dos, que es donde importan. */
  .columnas-conteo { column-count: 1; }
}

/* ------------------------------------- sugerencias sin tildes (ajustes) */

/* El `<datalist>` del navegador distingue tildes y no hay forma de cambiarlo:
   «azu» no encontraba «Azúcar». Esto lo sustituye por una lista propia. */
.sugerencias {
  position: absolute; z-index: 50; margin: 0; padding: 0; list-style: none;
  background: var(--papel); border: 1px solid var(--acero-2);
  border-radius: var(--radio); box-shadow: 0 3px 10px rgba(0,0,0,.14);
  max-height: 15rem; overflow-y: auto; min-width: 14rem; max-width: 26rem;
  font-size: .9rem;
}
.sugerencias li { padding: .3rem .55rem; cursor: pointer;
  display: flex; justify-content: space-between; gap: .8rem; }
.sugerencias li span { color: var(--grafito); font-size: .82rem; }
.sugerencias li:hover, .sugerencias li.marcada { background: var(--hueso); }
/* El campo y su lista van juntos: la lista se coloca respecto al campo. */
input[list], .sugerencias { position: relative; }
td, .campo, .fila-apretada { position: relative; }
@media print { .sugerencias { display: none !important; } }

/* ---- Referencias del sector (encargo v3) ------------------------------------
   La zona se escribe siempre con palabras; el color solo la acompaña. */
.sector-lista { list-style: none; margin: 0; padding: 0; }
.sector-lista li { padding: .55rem 0; border-top: var(--borde); }
.sector-lista li:first-child { border-top: 0; }
.sector-linea { display: flex; flex-wrap: wrap; gap: .25rem .6rem; align-items: baseline; }
.sector-nombre { font-weight: 600; }
.sector-valor { font-variant-numeric: tabular-nums; font-weight: 700; }
.zona { font-size: .8rem; border: 1px solid var(--acero-2); border-radius: 999px; padding: 0 .5rem; }
.zona-verde  { border-color: var(--verde); color: var(--verde); }
.zona-ambar  { border-color: var(--ambar); color: var(--ambar-2); }
.zona-rojo   { border-color: var(--brasa); color: var(--brasa); font-weight: 600; }
.zona-neutro { border-color: var(--grafito); color: var(--grafito); }
.sector-nota { margin: .2rem 0 0; font-size: .85rem; color: var(--grafito); }
/* Tanda 19 (C3): el objetivo propio, que es el presupuesto, debajo de la banda. */
.sector-objetivo { margin: .2rem 0 0; font-size: .9rem; display: flex; flex-wrap: wrap; gap: .15rem .5rem; align-items: baseline; }
.objetivo-que { color: var(--barro); font-weight: 600; }
.objetivo-cifra { font-variant-numeric: tabular-nums; }
.sector-objetivo .zona { white-space: nowrap; }
/* Con la columna del presupuesto, la de «Cómo estás» se estrecha: la zona no se parte. */
.tabla-ficha-tipo .zona { white-space: nowrap; }
/* El esquema de la banda: el tramo habitual y dónde cae el local. Solo en pantallas
   anchas; en el teléfono basta el texto. */
/* (tanda 15) Es un SVG: ver «las dos barras que dependen de una cifra», al final. */
.banda { margin: .35rem 0 .1rem; max-width: 22rem; }

/* ------------------------------------------------ presupuesto anual (tanda 7) */
/* Doce meses de ancho: la tabla se desliza y la primera columna se queda fija,
   para que al llegar a diciembre se siga sabiendo qué línea es. */
.rejilla-presupuesto { border-collapse: separate; border-spacing: 0; }
.rejilla-presupuesto th, .rejilla-presupuesto td { padding: .25rem .3rem; white-space: nowrap; }
.rejilla-presupuesto tbody th, .rejilla-presupuesto thead th:first-child {
  position: sticky; left: 0; background: var(--papel); z-index: 1; text-align: left; font-weight: 400;
  /* Con un ancho fijo y la etiqueta partida: sin él, «Comisiones de canal (con
     la de cada punto)» se llevaba 337 de 380 px en el móvil y tapaba los meses
     (visto en el navegador, tanda 7). */
  white-space: normal; min-width: 8rem; max-width: 11rem; }
/* Los títulos de bloque ocupan toda la fila: fijos, taparían la tabla entera. */
.rejilla-presupuesto tr.bloque th, .rejilla-presupuesto tr.punto th { position: static; max-width: none; }
@media (max-width: 680px) {
  .rejilla-presupuesto tbody th, .rejilla-presupuesto thead th:first-child {
    min-width: 6.5rem; max-width: 7.5rem; font-size: .82rem; }
  .rejilla-presupuesto input[type="text"] { width: 4.6rem; min-width: 4rem; }
}
.rejilla-presupuesto input[type="text"] { width: 5.2rem; min-width: 4.2rem; text-align: right; }
.rejilla-presupuesto input:disabled { background: var(--acero); color: var(--grafito); }
.rejilla-presupuesto tr.bloque th { font-weight: 600; color: var(--barro); padding-top: .9rem; border-bottom: var(--borde); }
.rejilla-presupuesto tr.punto th { font-weight: 600; padding-top: .5rem; }
.rejilla-presupuesto tr.sub th { padding-left: 1rem; }
.rejilla-presupuesto tr.calculada td { color: var(--grafito); }
.rejilla-presupuesto tr.total th, .rejilla-presupuesto tr.total td { font-weight: 600; }
.rejilla-presupuesto tr.destacada th, .rejilla-presupuesto tr.destacada td { font-weight: 700; border-top: 1px solid var(--tinta); }
.rejilla-presupuesto td.anual { border-left: var(--borde); font-weight: 600; }
.rejilla-presupuesto tr.origen td { white-space: normal; min-width: 5.2rem; font-size: .72rem; }
.boton-mini { margin-left: .3rem; padding: 0 .4rem; font-size: .8rem; line-height: 1.4;
  background: var(--papel); color: var(--tinta); border: 1px solid var(--acero-2); border-radius: 3px; cursor: pointer; }

/* La cuenta frente al presupuesto: lo que se desvía mucho se marca con texto,
   no solo con color. */
table.cuenta td.desvio { color: var(--grafito); }
table.cuenta tr.se-desvia td.desvio { color: var(--ambar-2); font-weight: 600; }
table.cuenta .causa { display: block; font-size: .76rem; font-weight: 400; color: var(--grafito); white-space: normal; min-width: 19rem; text-align: left; }
table.cuenta th.ppto, table.cuenta td.ppto { border-left: var(--borde); }
/* En la columna del año, el % va debajo del importe: en la misma línea la
   ensanchaba al doble que un mes (visto en el navegador a 380 px). */
.rejilla-presupuesto td.anual .menudo { display: block; }
/* Con el presupuesto al lado la cuenta tiene seis columnas y en el móvil se
   desliza: la línea se queda fija para saber de qué es cada cifra. */
table.cuenta.con-ppto tbody th, table.cuenta.con-ppto thead th:first-child {
  position: sticky; left: 0; background: var(--papel); z-index: 1; }
table.cuenta.con-ppto tr.bloque th { position: static; }
table.cuenta.con-ppto tr.destacada th { background: var(--acero); }  /* opaca: fija y transparente, se verían las cifras debajo */
@media (max-width: 680px) {
  table.cuenta.con-ppto tbody th { min-width: 7rem; max-width: 8.5rem; font-size: .88rem; }
}

/* Peligros habituales del APPCC (tanda 10). El desplegable va arriba del punto,
   separado por una línea: es de donde se parte, no un campo más que rellenar. */
.punto-appcc .peligro-habitual { border-bottom: 1px dashed var(--acero-2); padding-bottom: .5rem; }
.punto-appcc .peligro-habitual select { max-width: 100%; }
.punto-appcc .por-que-pcc { display: block; margin-top: .25rem; color: var(--ambar-2); }

/* Plan de prerrequisito para colgar (tanda 10). Letra grande y aire: se lee de
   pie y a un metro, no sentado delante del ordenador. */
.hoja-plan { width: 100%; border-collapse: collapse; margin: .4rem 0 1rem; }
.hoja-plan th, .hoja-plan td { border: 1px solid var(--acero-2); padding: .45rem .5rem;
  text-align: left; vertical-align: top; }
.hoja-plan thead th { background: var(--acero); }
.hoja-plan tbody th { font-weight: 600; width: 28%; }
.hoja-plan .hueco { display: inline-block; min-width: 4rem; max-width: 100%;
  border-bottom: 1px solid var(--grafito); }
/* En el móvil, la versión imprimible se veía antes de imprimir y se salía cinco
   píxeles: cazado en el navegador de la tanda 10. Con el ancho repartido y las
   palabras largas partidas, cabe. Al imprimir no cambia nada. */
.hoja-plan { table-layout: fixed; }
.hoja-plan th, .hoja-plan td { overflow-wrap: break-word; }
@media print { .hoja-plan { font-size: 11pt; } .hoja-plan th, .hoja-plan td { padding: .35rem .4rem; } }

/* El campo de hacer la foto, solo donde hay cámara y dedo (S12, tanda 12). En un
   ordenador con ratón `pointer: coarse` no se cumple y el escáner se ve como
   siempre: un solo campo de archivo. No se usa el ancho de la pantalla para
   decidirlo, porque una ventana estrecha en un ordenador no es un móvil. */
.solo-camara { display: none; }
@media (pointer: coarse) { .solo-camara { display: block; } }

/* Una ruta de archivo dentro de una tabla: se parte donde sea antes que estirar
   la tabla y sacar la página de la pantalla del móvil (tanda 12). */
.ruta-larga { overflow-wrap: anywhere; }

/* ------------------------------------------ piezas sueltas (tanda 15, la CSP) */
/* Aquí van los 110 `style="…"` que llevaban las plantillas. Con la
   Content-Security-Policy sin 'unsafe-inline' el navegador ya no los aplica.
   Llevan !important a propósito: un estilo en línea gana a cualquier regla de
   la hoja, y así la clase gana igual y ninguna pantalla cambia de aspecto. No
   usar estas clases para nada nuevo que se pueda escribir con una regla normal. */
.fijo-abajo { flex: 0 0 auto !important; align-self: end !important; }
.abajo { align-self: end !important; }
.ancho-2-5 { width: 2.5rem !important; } .ancho-3 { width: 3rem !important; }
.ancho-4 { width: 4rem !important; } .ancho-5 { width: 5rem !important; }
.ancho-6 { width: 6rem !important; } .ancho-6-5 { width: 6.5rem !important; }
.ancho-7 { width: 7rem !important; } .ancho-8 { width: 8rem !important; }
.ancho-9 { width: 9rem !important; }
.ancho-p9 { width: 9% !important; } .ancho-p12 { width: 12% !important; }
.ancho-p13 { width: 13% !important; } .ancho-p33 { width: 33% !important; }
.ancho-p34 { width: 34% !important; } .ancho-p40 { width: 40% !important; }
.ancho-p45 { width: 45% !important; } .ancho-p50 { width: 50% !important; }
.flex-1-12 { flex: 1 1 12rem !important; } .flex-1-18 { flex: 1 1 18rem !important; }
.flex-1-20 { flex: 1 1 20rem !important; } .flex-2-14 { flex: 2 1 14rem !important; }
.flex-2-16 { flex: 2 1 16rem !important; } .flex-2-18 { flex: 2 1 18rem !important; }
.flex-2-24 { flex: 2 1 24rem !important; } .flex-3-18 { flex: 3 1 18rem !important; }
.flex-3-20 { flex: 3 1 20rem !important; }
.flex-fijo-7 { flex: 0 0 7rem !important; } .flex-fijo-10 { flex: 0 0 10rem !important; }
.aire-05 { margin-top: .5rem !important; } .aire-075 { margin-top: .75rem !important; }
.aire-1 { margin-top: 1rem !important; }
.en-bloque { display: block !important; } .en-linea { display: inline !important; }
.en-linea-flex { display: inline-flex !important; } .en-linea-bloque { display: inline-block !important; }
.hueco-dcha { margin-right: 1rem !important; }
.tope-4 { max-width: 4rem !important; } .tope-4-5 { max-width: 4.5rem !important; }
.tope-5 { max-width: 5rem !important; } .tope-6 { max-width: 6rem !important; }
.tope-7 { max-width: 7rem !important; } .tope-8 { max-width: 8rem !important; }
.tope-20 { max-width: 20rem !important; }
.a-la-derecha { text-align: right !important; }
.separador { border: none !important; border-top: 1px solid #d6dde0 !important; margin: 1.5rem 0 !important; }

/* Las dos barras que dependen de una cifra (el prime cost del panel y la banda
   del sector) eran `style="width: 37%"` calculado en la plantilla. Ahora son un
   SVG: `x` y `width` de un rectángulo son atributos y no estilo, así que la
   CSP no los toca, y se ven igual sin una línea de JavaScript. */
svg.barra-prime { display: block; width: 100%; }
svg.barra-prime rect.tramo-materia { fill: var(--verde); }
svg.barra-prime rect.tramo-personal { fill: var(--barro); }
svg.banda { display: block; width: 100%; height: .5rem; background: none; overflow: visible; }
svg.banda .banda-fondo { fill: var(--acero); }
svg.banda .banda-tramo { fill: var(--acero-2); }
svg.banda .banda-punto { fill: var(--tinta); stroke: var(--papel); stroke-width: 2; }
/* Tanda 19 (C3): el margen de tu presupuesto, en trazo sobre la banda del sector. */
svg.banda .banda-objetivo { fill: none; stroke: var(--barro); stroke-width: 2; stroke-dasharray: 4 3; }
@media (max-width: 680px) { svg.banda { display: none; } }


/* Tanda 15: el «?» abierto en la columna fija del presupuesto (`sticky`, z-index
   1) quedaba debajo de la cabecera de la fila siguiente, que es igual de fija y
   va después. Mientras está abierto, su celda va por encima. */
th:has(details.interrogante[open]), td:has(details.interrogante[open]) { z-index: 45; }


/* Tanda 16: la franja de la demo. Arriba del todo y en todas las pantallas; en
   el teléfono, en dos líneas si hace falta, sin ensanchar la página. */
.franja-demo { margin: 0; max-width: none; padding: .45rem 1rem; background: #fff4e0;
  border-bottom: 2px solid var(--ambar); color: var(--ambar-2); font-size: .9rem;
  text-align: center; overflow-wrap: anywhere; }
.franja-demo strong { text-transform: uppercase; letter-spacing: .05em; }
/* Tanda 20: los enlaces de la franja, en su propia línea y con el mismo ámbar
   oscuro, subrayados para que se lean como enlaces sin depender del color. */
.franja-demo-enlaces { display: block; margin-top: .15rem; font-weight: 600; }
.franja-demo a { color: var(--ambar-2); text-decoration: underline; }
/* La marca «demo» del menú, sobre el verde de la cabecera: el ámbar de las
   etiquetas de aviso no se leía ahí (cazado en la foto a 1280). */
.etiqueta.etiqueta-demo { border-color: #fff4e0; color: #fff4e0; }