/* H1 · Tabla de alérgenos para imprimir (SEO-PLAN.md §2.d, W3.1): app/views/seo/herramientas/tabla-alergenos.php.
   En pantalla, una hoja de carta sobre el papel de la herramienta (tokens de landing.css); al imprimir, solo .imprimible:
   A4 apaisado con la tabla ENTERA en una hoja (20 filas de 7 mm; la de rellenar a mano, 16 de 8,75 mm) y el cartel en A4
   vertical. Regla de documentos: ninguna tabla partida entre páginas; con más platos, otra hoja con su tabla completa.
   Las marcas y los iconos son SVG (no fondos): salen aunque el navegador no imprima los gráficos de fondo. */

.ta{--ta-col:150px;--ta-tinta:var(--papel-tinta,#2a1a12);--ta-tinta-2:var(--papel-tinta-2,#5c4433);--ta-raya:var(--papel-borde,#e2d1b5);--ta-acento:var(--almagre,#a8321c);--ta-hoja:var(--papel-hoja,#fbf5e8);color:var(--ta-tinta)}
.ta [hidden]{display:none!important}
.ta-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ta-icono,.ta-marca{display:block;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- la hoja ---------- */
.ta-hoja+.ta-hoja{margin-top:30px;padding-top:30px;border-top:2px dashed var(--ta-raya)}
.ta-hoja__cabeza{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 28px;padding-bottom:16px;border-bottom:3px double var(--ta-raya)}
.ta-hoja__cabeza p{margin:0}
.ta-hoja__titulo{font-family:var(--serif);font-weight:650;font-size:clamp(1.4rem,1.1rem + 1.2vw,1.9rem);line-height:1.08;letter-spacing:-.012em}
.ta-hoja__local{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:10px!important}
.ta-hoja__etiqueta{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ta-acento)}
.ta .ta-hoja input.ta-local[type=text]{width:min(100%,330px);min-height:44px;padding:6px 2px;border:0;border-bottom:1.5px solid var(--ta-raya);border-radius:0;background:transparent;color:var(--ta-tinta);font:600 1.05rem/1.2 var(--serif)}
.ta .ta-hoja input.ta-local[type=text]:focus{outline:0;border-bottom-color:var(--ta-acento)}
.ta-raya{display:inline-block;width:min(60vw,300px);height:1.2em;border-bottom:1.5px solid var(--ta-raya);vertical-align:-.25em}
.ta-raya--fecha{width:7.5em}
.ta-hoja__norma{max-width:24em;font-size:.8rem;line-height:1.45;color:var(--ta-tinta-2)}
.ta-hoja__pie{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;margin-top:14px;font-size:.84rem;color:var(--ta-tinta-2)}
.ta-hoja__pie p{margin:0}
.ta-hoja__num{font-variant-numeric:tabular-nums}

/* ---------- la tabla: en el móvil se desliza, con la columna del plato fija ---------- */
.ta-hoja__marco{margin-top:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-padding-inline-start:var(--ta-col);scrollbar-width:thin;scrollbar-color:var(--ta-raya) transparent;border-radius:4px}
.ta-hoja__marco:focus-visible{outline:2px solid var(--ta-acento);outline-offset:4px}
.ta-tabla{width:100%;min-width:calc(var(--ta-col) + 14 * 46px);border-collapse:collapse;table-layout:fixed;font-size:.95rem}
.ta-tabla .ta-col-plato{width:var(--ta-col);padding:0 10px 10px 4px;text-align:left;vertical-align:bottom;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ta-acento)}
.ta-tabla thead th{padding:0 0 10px;vertical-align:bottom;border-bottom:2px solid var(--ta-tinta)}
.ta-cabecera{display:flex;flex-direction:column-reverse;align-items:center;gap:8px;font-size:.74rem;font-weight:650;line-height:1.1;color:var(--ta-tinta-2)}
.ta-cabecera .ta-icono{width:26px;height:26px;color:var(--ta-tinta)}
.ta-cabecera span{writing-mode:vertical-rl;rotate:180deg;max-inline-size:6.4em;text-align:left}
.ta-tabla tbody tr{border-bottom:1px solid var(--ta-raya)}
.ta-tabla tbody tr:hover>*{background-color:rgba(168,50,28,.045)}
.ta-tabla tbody :is(th,td:first-child){position:sticky;left:0;z-index:1;padding:0 8px 0 0;background:var(--ta-hoja);text-align:left;font-weight:400}
.ta-tabla thead .ta-col-plato{position:sticky;left:0;z-index:2;background:var(--ta-hoja)}
.ta-tabla td{padding:0;text-align:center}
.ta-tabla td+td{border-left:1px solid var(--ta-raya)}
.ta-tabla tbody tr>:nth-child(2){border-left:1px solid var(--ta-raya)}
.ta .ta-tabla input.ta-plato[type=text]{display:block;width:100%;min-height:44px;padding:6px 6px;border:0;border-radius:6px;background:transparent;color:var(--ta-tinta);font:500 .98rem/1.2 var(--sans)}
.ta .ta-tabla input.ta-plato[type=text]::placeholder{color:var(--ta-tinta-2);opacity:.75;font-style:italic}
.ta .ta-tabla input.ta-plato[type=text]:focus{outline:2px solid var(--ta-acento);outline-offset:-2px;background:#fff}
.ta-hoja--blanco tbody tr{height:48px}

/* la casilla: el checkbox nativo ocupa la celda (invisible pero real: teclado y lector de pantalla); se ve el aro o la marca */
.ta-celda{position:relative;display:grid;place-items:center;min-height:44px;cursor:pointer}
.ta-celda::before{content:'';grid-area:1/1;pointer-events:none;width:20px;height:20px;border:1.5px solid var(--ta-raya);border-radius:50%;transition:border-color .2s,scale .2s var(--curva,ease)}
.ta .ta-celda input[type=checkbox]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;accent-color:var(--ta-acento)}
.ta-marca{grid-area:1/1;width:26px;height:26px;color:var(--ta-tinta);opacity:0;scale:.5;pointer-events:none;transition:opacity .15s,scale .25s var(--curva,ease)}
.ta-celda:hover::before{border-color:var(--ta-tinta-2);scale:1.08}
.ta-celda input:checked+.ta-marca{opacity:1;scale:1}
.ta-celda:has(input:checked)::before{opacity:0}
.ta-celda:has(input:focus-visible){outline:2px solid var(--ta-acento);outline-offset:-4px;border-radius:10px}

/* ---------- acciones y notas ---------- */
.ta-acciones{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:22px}
.ta-acciones .boton{margin-top:0}
.ta-acciones .boton:disabled{opacity:.45;cursor:not-allowed;transform:none}
.ta .boton--linea{color:var(--ta-tinta);border-color:var(--ta-raya);background:transparent}
.ta .boton--linea:hover{border-color:var(--ta-acento)}
.ta-nota{margin:16px 0 0;max-width:64ch;font-size:.9rem;line-height:1.5;color:var(--ta-tinta-2)}
.ta-nota--privada{display:flex;gap:8px;margin-top:8px}
.ta-nota--privada::before{content:'';flex:none;width:8px;height:8px;margin-top:.5em;border-radius:50%;background:#4f7a3a}
.ta kbd{display:inline-block;min-width:1.6em;padding:0 .35em;border:1px solid var(--ta-raya);border-bottom-width:2px;border-radius:5px;background:#fff;font:600 .82em/1.45 var(--sans);text-align:center;color:var(--ta-tinta)}
.ta-otras{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--ta-raya);font-size:.95rem}
.ta a{color:var(--ta-acento);text-underline-offset:3px}
.ta a.boton--linea{color:var(--ta-tinta)}

/* ---------- el cartel: A4 vertical, a escala con unidades de contenedor (pantalla e impresión) ---------- */
/* dos contenedores: el relleno de la hoja se mide con el cartel (en el propio contenedor se mediría con la ventana) y el texto, con la caja interior de la hoja */
.ta-cartel{container-type:inline-size;width:min(100%,460px);aspect-ratio:210/297;margin:0 auto;background:#fff;box-shadow:0 1px 0 var(--ta-raya),0 26px 50px -30px rgba(42,26,18,.6);color:var(--ta-tinta);overflow:hidden}
.ta-cartel__hoja{container-type:inline-size;height:100%;display:flex;flex-direction:column;padding:7.5cqi 8cqi 6cqi;border-top:3cqi solid var(--ta-acento)}
.ta-cartel p{margin:0}
.ta-cartel__ante{font-size:3cqi;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ta-acento)}
.ta-cartel__titulo{margin-top:4cqi!important;font-family:var(--serif);font-weight:650;font-size:11cqi;line-height:1.04;letter-spacing:-.02em;text-wrap:balance}
.ta-cartel__texto{margin-top:5cqi!important;font-size:4.9cqi;line-height:1.35;color:var(--ta-tinta-2)}
.ta-cartel__en{margin-top:2.4cqi!important;font-size:3.9cqi;font-style:italic;color:var(--ta-tinta-2)}
.ta-cartel__lista{list-style:none;margin:auto 0 0;padding:4.5cqi 0 0;display:grid;grid-template-columns:repeat(7,1fr);gap:4cqi 1.5cqi;border-top:.4cqi solid var(--ta-tinta)}
.ta-cartel__lista li{display:flex;flex-direction:column;align-items:center;gap:1.6cqi;text-align:center;font-size:2.45cqi;font-weight:650;line-height:1.15;color:var(--ta-tinta-2)}
.ta-cartel__lista .ta-icono{width:10cqi;height:10cqi;color:var(--ta-tinta)}
.ta-cartel__norma{margin-top:5cqi!important;padding-top:2.5cqi;border-top:1px solid var(--ta-raya);font-size:2.1cqi;line-height:1.45;color:var(--ta-tinta-2)}

@media (min-width:768px){
  .ta{--ta-col:250px}
}
@media (min-width:1200px){
  .ta{--ta-col:340px}
}

@media (prefers-reduced-motion:reduce){
  .ta-marca,.ta-celda::before{transition:none}
}

/* ========================================== IMPRESIÓN ========================================== */
@media print{
  @page{size:A4 landscape;margin:9mm}
  @page cartel{size:A4 portrait;margin:0}
  html,body{background:#fff!important;color:#000!important}
  /* Solo sale .imprimible: lo demás desaparece y sus antepasados se quedan sin caja propia (sin márgenes, fondos ni sombras) */
  body *:not(.imprimible,.imprimible *,:has(.imprimible)){display:none!important}
  body *:has(.imprimible){display:block!important;position:static!important;width:auto!important;max-width:none!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;transform:none!important;translate:none!important;rotate:none!important;scale:none!important;opacity:1!important;filter:none!important;animation:none!important;overflow:visible!important;container-type:normal!important}
  .ta{--ta-tinta:#17110c;--ta-tinta-2:#433429;--ta-raya:#a59a90;color:#17110c;-webkit-print-color-adjust:exact;print-color-adjust:exact}

  /* La hoja: 279 × 192 mm útiles. Cabecera 17 + tabla 15 + 140 + pie 7 ≈ 182 mm: cabe con holgura */
  .ta-hoja{width:279mm;break-inside:avoid;page-break-inside:avoid}
  .ta-hoja+.ta-hoja{break-before:page;page-break-before:always;margin:0;padding:0;border:0}
  .ta-hoja__cabeza{padding-bottom:2.2mm;border-bottom:.6mm double #17110c;gap:0 10mm;flex-wrap:nowrap}
  .ta-hoja__titulo{font-size:17pt}
  .ta-hoja__local{margin-top:1.5mm!important;gap:3mm}
  .ta-hoja__etiqueta{font-size:6.5pt}
  .ta .ta-hoja input.ta-local[type=text]{width:95mm;min-height:0;height:6mm;padding:0 1mm;border-bottom:.25mm solid #a59a90;font-size:11pt;color:#000}
  .ta-raya{width:95mm;height:5mm;border-bottom-width:.25mm}
  .ta-raya--fecha{width:28mm}
  .ta-hoja__norma{font-size:7pt;text-align:right}
  .ta-hoja__marco{margin-top:3mm;overflow:visible;border-radius:0}
  .ta-tabla{min-width:0;font-size:9pt}
  .ta-tabla .ta-col-plato{width:85mm;min-width:0;padding:0 2mm 1.5mm 1mm;font-size:6.5pt}
  .ta-tabla thead th{padding:0 .6mm 1.5mm;border-bottom:.5mm solid #17110c}
  .ta-cabecera{flex-direction:column;gap:1.2mm;font-size:6.4pt;line-height:1.12;color:#17110c}
  .ta-cabecera .ta-icono{width:7mm;height:7mm}
  .ta-cabecera span{writing-mode:horizontal-tb;rotate:none;max-inline-size:none;min-height:2.24em;text-align:center;overflow-wrap:break-word}
  .ta-tabla tbody tr{height:7mm;border-bottom:.2mm solid #a59a90;break-inside:avoid}
  .ta-tabla tbody tr:hover>*{background:none}
  .ta-tabla tbody :is(th,td:first-child){position:static;padding:0;background:none}
  .ta-tabla thead .ta-col-plato{position:static;background:none}
  .ta-tabla td+td,.ta-tabla tbody tr>:nth-child(2){border-left:.2mm solid #a59a90}
  .ta .ta-tabla input.ta-plato[type=text]{min-height:0;height:6.6mm;padding:0 1.5mm;border-radius:0;font-size:9.5pt;color:#000;background:none;outline:0}
  .ta .ta-tabla input.ta-plato[type=text]::placeholder{color:transparent}
  .ta .ta-hoja input.ta-local[type=text]::placeholder{color:transparent}
  .ta-celda{min-height:0;height:6.6mm;outline:0!important}
  .ta :is(input,.ta-hoja__marco):focus{outline:0!important}
  .ta-celda::before{display:none}
  .ta-marca{width:5mm;height:5mm;transition:none}
  .ta .ta-celda input[type=checkbox]{display:none}
  .ta-hoja--blanco tbody tr{height:8.75mm}
  .ta-hoja__pie{margin-top:2.5mm;font-size:8pt;color:#17110c}

  /* El cartel, en su página A4 vertical (página con nombre) */
  .ta-cartel{page:cartel;width:210mm;height:296.5mm;max-width:none;aspect-ratio:auto;margin:0;box-shadow:none;break-inside:avoid}
}