/* AvoHass — productos.css (L13, 2026-09-04): lo propio de /productos-permitidos/, tercera hoja de
   estas páginas. Solo tokens: sin hex, sin !important, nada bajo --t-xs. */

/* El rótulo va fuera del chip para no inflar el objetivo táctil */
.prod-filtros{display:grid;gap:var(--s-3);margin:0 0 var(--s-4)}
.prod-grupo{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2)}
.prod-rotulo{font:600 var(--t-xs)/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-suave)}
.prod-conteo{margin:0 0 var(--s-3);font-size:var(--t-sm);color:var(--tinta-suave);min-height:1.4em}

/* Las filas filtradas ya no llevan parche: [hidden][hidden] de styles.css (0,2,0) gana a
   «.tabla--apilada tr{display:block}» (0,1,1) sin !important */
.prod-tabla th[scope="row"]{font-weight:600}
.prod-tabla th[scope="row"] a{color:var(--verde-oscuro);text-decoration:underline;text-decoration-color:rgba(47,93,58,.35);text-underline-offset:2px}
.prod-tabla th[scope="row"] a:hover{text-decoration-color:currentColor}
.prod-tabla .prod-clase{color:var(--tinta-suave);font-size:var(--t-xs)}
.prod-lmr{font-size:var(--t-xs);line-height:1.5}
.prod-lmr b{font-weight:600;color:var(--verde-texto)}
.prod-marcas{color:var(--tinta-suave);font-size:var(--t-xs)}
.prod-leyenda{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);margin:var(--s-3) 0 0;font-size:var(--t-xs);color:var(--tinta-suave)}
.prod-leyenda .chip{min-height:24px;padding:0 10px}

/* El sujeto aquí son las cajas, no la calle de huerto de lectura.css */
.lectura-banda.prod-banda img{object-position:40% 52%}

.prod-seccion{margin-top:var(--s-7)}
.prod-seccion>h2{font-size:var(--t-h3);margin:0 0 var(--s-3)}
.prod-seccion>h3{font-size:var(--t-h4);margin:var(--s-5) 0 var(--s-2);color:var(--verde-texto)}
.prod-nota{margin:var(--s-2) 0 0;max-width:66ch;font-size:var(--t-xs);line-height:1.5;color:var(--tinta-suave)}
.prod-veredicto{margin:var(--s-4) 0 0}
.prod-veredicto h2{font-size:var(--t-h4);margin:0 0 var(--s-2)}
/* El veredicto es el texto principal, no un pie: styles.css lo apaga con «:is(.tarjeta…) p» */
.tarjeta.prod-veredicto p{margin:0 0 var(--s-3);font-size:var(--t-md);line-height:1.55;color:var(--tinta)}
.tarjeta.prod-veredicto p:last-child{margin-bottom:0}
.tarjeta.prod-veredicto p.prod-nota{font-size:var(--t-xs);color:var(--tinta-suave)}
.prod-datos{display:grid;gap:var(--s-2) var(--s-4);grid-template-columns:auto 1fr;margin:0;font-size:var(--t-sm)}
.prod-datos dt{font-weight:600;color:var(--verde-texto)}
.prod-datos dd{margin:0;color:var(--tinta)}

/* La cita literal va aparte, para cotejarla con el texto legal */
.prod-cita{margin:var(--s-4) 0 0;padding:var(--s-3) var(--s-4);border-left:2px solid var(--marron);background:var(--sup-1);border-radius:0 var(--r-sm) var(--r-sm) 0}
.prod-cita p{margin:0 0 var(--s-2);font-size:var(--t-sm);line-height:1.55;font-style:italic;color:var(--tinta)}
.prod-cita footer{font-size:var(--t-xs);color:var(--tinta-suave)}

.prod-mercados{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:var(--s-3);margin:var(--s-3) 0 0}
.prod-mercados .tarjeta-interactiva{display:flex;flex-direction:column;gap:var(--s-1);font-size:var(--t-md);font-weight:500;line-height:1.4;color:var(--verde-texto)}
.prod-mercados small{font:600 var(--t-xs)/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-suave)}
.prod-mercados span.prod-regla{font-weight:400;font-size:var(--t-xs);color:var(--tinta-suave)}
.prod-lista{margin:0;padding-left:22px;font-size:var(--t-md);line-height:1.55}
.prod-lista li{margin-bottom:var(--s-2)}
.prod-lista li b{color:var(--verde-texto)}

/* La flecha avisa de que se sale del sitio; 44 px es el objetivo táctil (medía 31) */
.prod-fuente{white-space:nowrap;font-size:var(--t-xs)}
.prod-fuente a{display:inline-flex;align-items:center;min-height:44px}
.prod-fuente a::after{content:" \2197"}

@media (max-width:560px){
/* Una URL larga en dos columnas rompe el ancho */
.prod-datos{grid-template-columns:1fr;gap:0}
.prod-datos dd{margin:0 0 var(--s-3);overflow-wrap:anywhere}
/* Apilada, el mínimo de cada celda (flex de rótulo + valor) empujaba la tabla a 392 px en un
   envoltorio de 341. Wrap y no overflow-wrap:anywhere, que partía «referenci/a» y «mg/k/g» */
.prod-tabla td{flex-wrap:wrap}
}

@media print{
.prod-filtros,.lectura-banda.prod-banda,.prod-conteo{display:none}
}