/* Jaso Fresh · hoja de estilos
   Capas: reset → variables → base → layout → componentes → panel → utilidades.
   Los valores salen del diseño de Claude Design (skin "jasofresh"). */

@layer reset, variables, base, layout, componentes, panel, utilidades;

/* ─── Fuentes (servidas desde el propio proyecto) ───────────────────────── */
@font-face {
	font-family: "Figtree";
	src: url("/fuentes/figtree.woff2") format("woff2");
	font-weight: 300 900;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215;
}
@font-face {
	font-family: "Figtree";
	src: url("/fuentes/figtree-ext.woff2") format("woff2");
	font-weight: 300 900;
	font-display: swap;
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face { font-family: "Geist Mono"; src: url("/fuentes/geist-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fuentes/geist-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

/* ─── Reset ─────────────────────────────────────────────────────────────── */
@layer reset {
	*, *::before, *::after { box-sizing: border-box; }
	html, body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset, blockquote { margin: 0; }
	ul[class], ol[class] { list-style: none; padding: 0; }
	fieldset { border: 0; padding: 0; min-width: 0; }
	legend { padding: 0; }
	img, svg { display: block; max-width: 100%; }
	input, button, textarea, select { font: inherit; color: inherit; }
	button { cursor: pointer; }
	[hidden] { display: none !important; }
	address { font-style: normal; }
	table { border-collapse: collapse; }
}

/* ─── Variables ─────────────────────────────────────────────────────────── */
@layer variables {
	:root {
		/* Colores base: cada tienda los sustituye con los de su estilo (vistas/plantilla.js). */
		--color-fondo: #f2f5ec;
		--color-superficie: #fff;
		--color-texto: #192d26;
		--color-linea: #192d26;
		--color-acento: #77cb28;
		--color-terracota: #b5481a;
		/* Derivados: salen de los de arriba, así sirven para cualquier estilo. */
		--color-columna: color-mix(in oklab, var(--color-texto) 5%, var(--color-fondo));
		--color-suave: color-mix(in oklab, var(--color-texto) 8%, var(--color-fondo));
		--color-texto-2: color-mix(in oklab, var(--color-texto) 85%, var(--color-fondo));
		--color-texto-suave: color-mix(in oklab, var(--color-texto) 72%, var(--color-fondo));
		--color-texto-tenue: color-mix(in oklab, var(--color-texto) 45%, var(--color-fondo));
		--color-regla: color-mix(in oklab, var(--color-texto) 12%, var(--color-fondo));
		--color-regla-2: color-mix(in oklab, var(--color-texto) 22%, var(--color-fondo));
		--color-acento-texto: var(--color-texto);
		--color-acento-hover: color-mix(in oklab, var(--color-acento) 82%, white);
		--color-ok: #a6da74;
		--color-calido: #f3b07f;
		--color-alerta: #9e2f0e;
		--tinte-fruta: #fbe3a6;
		--tinte-verdura: #d5ecbc;
		--tinte-txarku: #f3d2c2;
		--tinte-pack: #dcefb5;
		--tinte-receta: #e1e6dc;
		--velo: color-mix(in srgb, var(--color-texto) 50%, transparent);

		--logo-texto: var(--color-texto);
		--logo-acento: var(--color-acento);

		--tipografia-base: "Figtree", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
		--tipografia-titulares: var(--tipografia-base);
		--tipografia-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
		--peso-titular: 800;
		--espaciado-titular: -0.03em;

		--borde: 1.5px;
		--radio: 18px;
		--radio-pequeno: 12px;
		--radio-pastilla: 999px;
		--sombra-2: 0 2px 6px rgb(0 0 0 / .08);
		--sombra-3: 0 6px 18px rgb(0 0 0 / .10);
		--sombra-4: 0 10px 28px rgb(0 0 0 / .12);
		--sombra-acento: 0 8px 22px color-mix(in srgb, var(--color-acento) 38%, transparent);

		--separacion-general: clamp(1rem, 3vw, 2rem);
		--hueco: 1.25rem;
		--ancho-maximo: 1200px;
		--ancho-panel: 1280px;
		--transicion: 160ms ease;
	}
}

/* ─── Base ──────────────────────────────────────────────────────────────── */
@layer base {
	html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--alto-cabecera, 4.5rem) + .5rem); }
	body {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		background: var(--color-fondo);
		color: var(--color-texto);
		font-family: var(--tipografia-base);
		font-size: 1rem;
		line-height: 1.45;
		text-rendering: optimizeLegibility;
	}
	main { flex: 1; padding-block: 2rem 6rem; }
	main:focus { outline: none; }
	h1, h2, h3, legend.cesta__titulo, .acceso__lema, .banda-temporada__texto, .kpi__valor, .tarjeta-pedido__hora, .logo--texto {
		font-family: var(--tipografia-titulares); font-weight: var(--peso-titular); letter-spacing: var(--espaciado-titular); line-height: 1.05;
	}
	h2 { font-size: 1.6rem; }
	h3 { font-size: 1.125rem; letter-spacing: -0.01em; }
	a { color: var(--color-texto); text-underline-offset: .18em; text-decoration-thickness: 1.5px; }
	a:hover { color: var(--color-terracota); }
	small { font-size: .875rem; }
	:focus-visible { outline: 3px solid var(--color-terracota); outline-offset: 2px; border-radius: 4px; }
	::selection { background: var(--color-acento); color: var(--color-texto); }
	input::placeholder, textarea::placeholder { color: var(--color-texto-tenue); opacity: 1; }
	.numero { font-family: var(--tipografia-mono); font-variant-numeric: tabular-nums; }
}

/* ─── Layout ────────────────────────────────────────────────────────────── */
@layer layout {
	.contenedor { width: min(100% - 2 * var(--separacion-general), var(--ancho-maximo)); margin-inline: auto; }
	.contenedor--medio { max-width: 1040px; }
	.contenedor--estrecho { max-width: 780px; }
	.contenedor--panel { max-width: var(--ancho-panel); }

	.pila { display: flex; flex-direction: column; gap: var(--hueco); }
	.pila--pequena { gap: .5rem; }
	.pila--grande { gap: 2.5rem; }

	.enlaces-salto a {
		position: absolute; left: 1rem; top: -100px; z-index: 100;
		padding: .75rem 1rem; background: var(--color-texto); color: var(--color-superficie);
		border-radius: var(--radio-pequeno); font-weight: 700;
	}
	.enlaces-salto a:focus { top: 1rem; }

	/* Cabecera */
	.cabecera-sitio {
		position: sticky; top: 0; z-index: 30;
		background: var(--color-fondo);
		border-bottom: var(--borde) solid var(--color-linea);
	}
	.cabecera-sitio__interior {
		width: min(100% - 2 * var(--separacion-general), var(--ancho-panel));
		margin-inline: auto;
		min-height: 64px;
		display: flex; align-items: center; gap: 1rem 1.5rem; flex-wrap: wrap;
		padding-block: .5rem;
	}
	.cabecera-sitio__marca { display: block; width: 92px; margin-right: auto; }
	.cabecera-sitio__navegacion { order: 3; width: 100%; }
	.cabecera-sitio__navegacion:focus { outline: none; }
	.cabecera-sitio__acciones { display: flex; align-items: center; gap: .75rem; }

	.menu-principal { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; }
	.menu-principal__enlace {
		display: inline-flex; align-items: center; white-space: nowrap;
		padding: .45rem .95rem; border: var(--borde) solid transparent; border-radius: var(--radio-pastilla);
		font-weight: 700; font-size: .95rem; text-decoration: none;
	}
	.menu-principal__enlace:hover { color: var(--color-texto); background: var(--color-suave); }
	.menu-principal__enlace[aria-current] { background: var(--color-acento); border-color: var(--color-linea); }

	/* Pie */
	.pie-sitio { border-top: var(--borde) solid var(--color-linea); background: var(--color-columna); font-size: .95rem; }
	.pie-sitio__interior {
		width: min(100% - 2 * var(--separacion-general), var(--ancho-maximo)); margin-inline: auto;
		display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 2rem;
		padding-block: 2.25rem;
	}
	.pie-sitio__bloque { display: flex; flex-direction: column; gap: .6rem; }
	.pie-sitio__marca { width: 82px; }
	.pie-sitio__enlaces { display: flex; flex-direction: column; gap: .35rem; }
	.pie-sitio__enlaces a { font-weight: 600; }
	.pie-panel { width: min(100% - 2 * var(--separacion-general), var(--ancho-maximo)); margin: 2rem auto 0; padding-block: 1rem 1.5rem; border-top: 1px solid var(--color-regla-2); font-size: .85rem; color: var(--color-texto-suave); }
	.barra-panel__acciones { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
	.version { font-family: var(--tipografia-mono); }
	.pie-sitio__legal {
		width: min(100% - 2 * var(--separacion-general), var(--ancho-maximo)); margin-inline: auto;
		display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem;
		padding-block: 1rem 1.5rem; border-top: 1px solid var(--color-regla-2);
		color: var(--color-texto-suave); font-size: .875rem;
	}

	@media (min-width: 880px) {
		.cabecera-sitio__navegacion { order: 0; width: auto; }
		.cabecera-sitio__marca { margin-right: auto; }
	}
}

/* ─── Componentes ───────────────────────────────────────────────────────── */
@layer componentes {
	/* Logo */
	.logo { width: 100%; height: auto; }
	.logo--imagen { max-height: 48px; object-fit: contain; object-position: left center; }
	.logo--texto { display: block; font-size: 1.5rem; white-space: nowrap; }
	.cabecera-sitio__marca:has(.logo--imagen), .cabecera-sitio__marca:has(.logo--texto) { width: auto; max-width: 220px; text-decoration: none; }
	.pie-sitio__marca:has(.logo--imagen), .pie-sitio__marca:has(.logo--texto) { width: auto; max-width: 180px; text-decoration: none; }
	.pagina-cerrada__logo { width: 140px; }
	.pagina-cerrada__logo:has(.logo--texto) { width: auto; }
	.logo__texto { fill: var(--logo-texto); }
	.logo__acento { fill: var(--logo-acento); }

	/* Etiquetas pequeñas en mayúsculas (antetítulos) */
	.etiqueta {
		font-family: var(--tipografia-mono); font-size: .75rem; font-weight: 500;
		text-transform: uppercase; letter-spacing: .1em; color: var(--color-texto-suave);
	}
	.nota { font-size: .9rem; color: var(--color-texto-suave); }
	.nota--centrada { text-align: center; }
	.nota--alerta { padding: .75rem 1rem; border: var(--borde) solid var(--color-alerta); border-radius: var(--radio-pequeno); color: var(--color-alerta); background: #fff4ef; font-weight: 600; }
	.nota--demo { padding: .6rem .8rem; border: 1px dashed var(--color-regla-2); border-radius: var(--radio-pequeno); font-family: var(--tipografia-mono); font-size: .8rem; text-align: center; }
	.nota--aviso { padding: .75rem 1rem; border: var(--borde) solid var(--color-linea); border-radius: var(--radio-pequeno); background: var(--color-suave); color: var(--color-texto); font-weight: 600; }
	.precio-aprox { display: block; font-size: .78em; font-weight: 500; color: var(--color-texto-suave); }
	.boton-enlace { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: .15em; cursor: pointer; }
	.boton-enlace:hover { text-decoration-thickness: 2px; }

	/* Botones */
	.boton {
		display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
		min-height: 44px; padding: .55rem 1.1rem;
		border: var(--borde) solid var(--color-linea); border-radius: var(--radio-pastilla);
		background: var(--color-superficie); color: var(--color-texto);
		font-weight: 700; font-size: .95rem; line-height: 1.1; text-decoration: none; text-align: center;
		transition: transform var(--transicion), box-shadow var(--transicion), background-color var(--transicion);
	}
	.boton:hover { color: var(--color-texto); background: var(--color-suave); }
	.boton:active { transform: translateY(1px); }
	.boton--acento { background: var(--color-acento); color: var(--color-acento-texto); box-shadow: var(--sombra-acento); }
	.boton--acento:hover { background: var(--color-acento-hover); }
	.boton--secundario { background: transparent; }
	.boton--pequeno { min-height: 36px; padding: .35rem .85rem; font-size: .875rem; }
	.boton--grande { min-height: 54px; font-size: 1.05rem; padding-inline: 1.4rem; }
	.boton--ancho { width: 100%; justify-content: space-between; }
	.boton--ancho:only-child, .boton--ancho > :only-child { justify-content: center; }
	.boton--icono { width: 44px; padding: 0; font-size: 1.4rem; }
	.boton--peligro { border-color: var(--color-alerta); color: var(--color-alerta); }
	.boton[disabled] { opacity: .5; cursor: not-allowed; }
	.acciones { display: flex; flex-wrap: wrap; gap: .75rem; }

	.boton-cesta {
		display: inline-flex; align-items: center; gap: .6rem;
		min-height: 44px; padding: .35rem .4rem .35rem 1rem;
		border: var(--borde) solid var(--color-linea); border-radius: var(--radio-pastilla);
		background: var(--color-acento); color: var(--color-texto); box-shadow: var(--sombra-acento);
		font-weight: 700; font-size: .95rem; text-decoration: none; white-space: nowrap;
	}
	.boton-cesta:hover { color: var(--color-texto); background: var(--color-acento-hover); }
	.boton-cesta__contador {
		display: grid; place-items: center; min-width: 28px; height: 28px; padding-inline: .35rem;
		border-radius: var(--radio-pastilla); background: var(--color-texto); color: var(--color-acento);
		font-family: var(--tipografia-mono); font-size: .8rem;
	}
	.boton-cesta.boton-cesta--latido { animation: latido 400ms ease; }
	@keyframes latido { 50% { transform: scale(1.06); } }

	.selector-idioma { display: flex; border: var(--borde) solid var(--color-linea); border-radius: var(--radio-pastilla); overflow: hidden; }
	.selector-idioma__opcion { padding: .3rem .6rem; font-family: var(--tipografia-mono); font-size: .75rem; text-decoration: none; }
	.selector-idioma__opcion[aria-current] { background: var(--color-texto); color: var(--color-acento); }

	/* Pastillas de filtro y controles segmentados */
	.filtros__lista { display: flex; flex-wrap: wrap; gap: .5rem; }
	.pastilla {
		display: inline-flex; align-items: center; min-height: 36px; padding: .3rem .9rem;
		border: var(--borde) solid var(--color-linea); border-radius: var(--radio-pastilla);
		background: var(--color-superficie); font-weight: 700; font-size: .9rem; text-decoration: none; cursor: pointer;
	}
	.pastilla:hover { color: var(--color-texto); background: var(--color-suave); }
	.pastilla[aria-current], .pastilla--radio:has(input:checked) { background: var(--color-texto); color: var(--color-acento); }
	.pastilla--radio:has(input:focus-visible) { outline: 3px solid var(--color-terracota); outline-offset: 2px; }
	.pestanas { display: flex; flex-wrap: wrap; gap: .5rem; }

	.segmentado { display: inline-flex; flex-wrap: wrap; border: var(--borde) solid var(--color-linea); border-radius: var(--radio-pastilla); overflow: hidden; background: var(--color-superficie); }
	.segmentado__opcion { display: block; padding: .45rem .9rem; font-weight: 700; font-size: .9rem; text-decoration: none; white-space: nowrap; }
	.segmentado__opcion:hover { color: var(--color-texto); background: var(--color-suave); }
	.segmentado__opcion[aria-current] { background: var(--color-texto); color: var(--color-acento); }

	/* Sellos */
	.sello {
		display: inline-block; padding: .15rem .55rem; border: 1px solid var(--color-linea); border-radius: var(--radio-pastilla);
		font-family: var(--tipografia-mono); font-size: .68rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; line-height: 1.5;
		background: var(--color-superficie);
	}
	.sello--temporada { position: absolute; top: .75rem; left: .75rem; z-index: 1; background: var(--color-terracota); color: #fff; border-color: var(--color-terracota); }
	.sello--estatico { position: static; }
	.sello--acento { background: var(--color-acento); }
	.sello--ok { background: var(--color-ok); }
	.sello--apagado { background: transparent; color: var(--color-texto-suave); border-color: var(--color-regla-2); }
	.sello--alerta { background: #fff4ef; color: var(--color-alerta); border-color: var(--color-alerta); align-self: flex-start; }

	/* Campos de formulario */
	.campo { display: flex; flex-direction: column; gap: .35rem; }
	.campo--corto { max-width: 220px; }
	.campo__etiqueta { font-weight: 700; font-size: .95rem; }
	.campo__control {
		width: 100%; min-height: 46px; padding: .65rem .9rem;
		border: var(--borde) solid var(--color-linea); border-radius: var(--radio-pequeno);
		background: var(--color-superficie);
	}
	textarea.campo__control { resize: vertical; min-height: 60px; }
	.campo__control--redondo { border-radius: var(--radio-pastilla); }
	.campo__control--codigo { font-size: 1.6rem; letter-spacing: .5em; text-align: center; max-width: 220px; }
	.campo__control[aria-invalid="true"] { border-color: var(--color-alerta); box-shadow: 0 0 0 2px #fbd8c9; }
	.campo__error { color: var(--color-alerta); font-size: .9rem; font-weight: 600; }
	.campo__grupo { display: flex; border: var(--borde) solid var(--color-linea); border-radius: var(--radio-pequeno); background: var(--color-superficie); overflow: hidden; }
	.campo__grupo .campo__control { border: 0; border-radius: 0; }
	.campo__sufijo { display: grid; place-items: center; padding-inline: .8rem; border-left: 1px solid var(--color-regla-2); font-family: var(--tipografia-mono); background: var(--color-fondo); }
	.campo__grupo:focus-within { outline: 3px solid var(--color-terracota); outline-offset: 2px; }
	.campo__grupo .campo__control:focus-visible { outline: none; }
	.campo__prefijo { display: grid; place-items: center; padding-inline: .8rem; border-right: 1px solid var(--color-regla-2); font-family: var(--tipografia-mono); background: var(--color-fondo); }
	.campo__boton { padding-inline: 1rem; border: 0; border-left: 1px solid var(--color-regla-2); background: transparent; font-weight: 700; font-size: .9rem; }
	.casilla { display: flex; align-items: flex-start; gap: .6rem; cursor: pointer; }
	.casilla input { width: 20px; height: 20px; margin-top: .1rem; accent-color: var(--color-acento); flex: none; }
	.casilla--bloque { padding: .75rem; border: 1px solid var(--color-regla); border-radius: var(--radio-pequeno); }
	.rejilla-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1rem; }

	/* Opciones tipo botón (peso, corte, tamaño) */
	.grupo-opciones { display: flex; flex-direction: column; gap: .6rem; }
	.grupo-opciones__titulo { font-weight: 700; font-size: 1rem; letter-spacing: 0; }
	.grupo-opciones__lista { display: flex; flex-wrap: wrap; gap: .5rem; }
	.opcion {
		position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
		min-width: 84px; min-height: 48px; padding: .4rem .8rem;
		border: var(--borde) solid var(--color-linea); border-radius: var(--radio-pequeno);
		background: var(--color-superficie); cursor: pointer; line-height: 1.15;
	}
	.opcion--texto { min-width: 0; }
	.opcion__control { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
	.opcion__texto { font-weight: 700; }
	.opcion__precio { font-family: var(--tipografia-mono); font-size: .7rem; color: var(--color-texto-suave); }
	.opcion:has(.opcion__control:checked) { background: var(--color-acento); }
	.opcion:has(.opcion__control:checked) .opcion__precio { color: var(--color-texto); }
	.opcion:has(.opcion__control:focus-visible) { outline: 3px solid var(--color-terracota); outline-offset: 2px; }

	.contador { display: inline-flex; align-items: center; align-self: flex-start; border: var(--borde) solid var(--color-linea); border-radius: var(--radio-pastilla); background: var(--color-superficie); }
	.contador__boton { width: 44px; height: 44px; border: 0; background: transparent; font-size: 1.2rem; border-radius: var(--radio-pastilla); }
	.contador__boton:hover { background: var(--color-suave); }
	.contador__valor { width: 3rem; border: 0; background: transparent; text-align: center; font-family: var(--tipografia-mono); -moz-appearance: textfield; }
	.contador__valor::-webkit-inner-spin-button, .contador__valor::-webkit-outer-spin-button { -webkit-appearance: none; }
	.contador--pequeno .contador__boton { width: 32px; height: 32px; font-size: 1rem; }
	.contador--pequeno .contador__valor { width: 1.8rem; font-size: .85rem; }

	/* Tarjeta genérica */
	.tarjeta { padding: 1.25rem; border: var(--borde) solid var(--color-linea); border-radius: var(--radio); background: var(--color-superficie); }
	.tarjeta--acento { background: var(--color-acento); }
	.tarjeta--aviso { border-color: var(--color-alerta); box-shadow: inset 4px 0 0 var(--color-alerta); }
	/* Leyendas dentro de tarjetas: como un título normal, no encima del borde. */
	fieldset.tarjeta > legend { float: left; width: 100%; margin-bottom: .25rem; }
	fieldset.tarjeta > legend + * { clear: both; }
	.datos-pedido dd { overflow-wrap: anywhere; }
	.tarjeta__cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem; }
	.tarjeta__pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; }

	/* Cabeceras de página y sección */
	.cabecera-pagina { display: flex; flex-direction: column; gap: .5rem; }
	.cabecera-pagina--con-accion { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; }
	.cabecera-pagina__titulo { font-size: clamp(2.2rem, 6vw, 3.4rem); }
	.cabecera-pagina__entradilla { font-size: 1.1rem; color: var(--color-texto-2); max-width: 60ch; }
	.cabecera-seccion { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: .5rem 1.5rem; }
	.cabecera-seccion__titulo { font-size: clamp(1.5rem, 3.5vw, 1.9rem); }
	.cabecera-seccion__nota { color: var(--color-texto-2); }
	.enlace-fuerte { font-weight: 700; }
	.enlace-volver { font-weight: 700; text-decoration: none; }
	.enlace-volver:hover { text-decoration: underline; }

	/* Portada */
	.portada { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 1.5rem; align-items: center; }
	.portada__titulo { font-size: clamp(2.6rem, 8vw, 4.6rem); max-width: 9ch; }
	.portada__entradilla { margin-top: .9rem; font-size: 1.15rem; color: var(--color-texto-2); max-width: 46ch; }
	.como-funciona { padding: 1.5rem; border: var(--borde) solid var(--color-linea); border-radius: var(--radio); background: var(--color-superficie); box-shadow: var(--sombra-4); display: flex; flex-direction: column; gap: 1rem; }
	.como-funciona__pasos { counter-reset: paso; display: flex; flex-direction: column; gap: .75rem; }
	.como-funciona__pasos li { counter-increment: paso; display: flex; align-items: center; gap: .75rem; font-size: 1.05rem; }
	.como-funciona__pasos li::before {
		content: counter(paso); display: grid; place-items: center; flex: none; width: 32px; height: 32px;
		border: var(--borde) solid var(--color-linea); border-radius: 50%; background: var(--color-acento); font-weight: 800;
	}
	.como-funciona__horario { padding-top: .75rem; border-top: 1px dashed var(--color-regla-2); font-family: var(--tipografia-mono); font-size: .85rem; color: var(--color-texto-suave); }

	.banda-temporada {
		display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem;
		padding: 1rem 1.25rem; border: var(--borde) solid var(--color-linea); border-radius: var(--radio);
		background: var(--color-terracota); color: #fff;
	}
	.banda-temporada__etiqueta { padding: .2rem .7rem; border: 1px solid rgba(255, 255, 255, .7); border-radius: var(--radio-pastilla); font-family: var(--tipografia-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
	.banda-temporada__texto { flex: 1 1 280px; font-weight: 800; font-size: 1.2rem; letter-spacing: -0.01em; }

	/* Catálogo */
	/* Filtros y buscador: se quedan fijos bajo la cabecera al bajar por el catálogo.
	   --alto-cabecera lo mide app.js; sin JavaScript se usa el valor aproximado. */
	.catalogo__herramientas {
		position: sticky; top: var(--alto-cabecera, 4.5rem); z-index: 20;
		display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 1rem;
		margin-inline: -.75rem; padding: .75rem;
		background: var(--color-fondo);
		border-bottom: var(--borde) solid transparent;
		transition: border-color .15s, box-shadow .15s;
	}
	.catalogo__herramientas[data-pegado] { border-bottom-color: var(--color-linea); box-shadow: 0 8px 16px -12px rgb(0 0 0 / .25); }
	.buscador { flex: none; width: min(100%, 300px); }
	.catalogo__vacio { padding: 2rem; text-align: center; color: var(--color-texto-suave); }
	.rejilla-productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 1.25rem; }
	.tarjeta-producto__articulo {
		position: relative; height: 100%; display: flex; flex-direction: column;
		border: var(--borde) solid var(--color-linea); border-radius: var(--radio); background: var(--color-superficie);
		overflow: hidden; transition: transform var(--transicion), box-shadow var(--transicion);
	}
	.tarjeta-producto__articulo:hover { transform: translateY(-2px); box-shadow: var(--sombra-3); }
	.tarjeta-producto__imagen { display: block; border-bottom: var(--borde) solid var(--color-linea); text-decoration: none; }
	.tarjeta-producto__imagen > * { aspect-ratio: 4 / 3; height: auto; }
	.tarjeta-producto__cuerpo { display: flex; flex-direction: column; gap: .25rem; padding: .9rem 1rem 1rem; flex: 1; }
	.tarjeta-producto__nombre { font-size: 1.1rem; letter-spacing: -0.01em; }
	.tarjeta-producto__nombre a { text-decoration: none; }
	.tarjeta-producto__nombre a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
	.tarjeta-producto__pie { margin-top: auto; padding-top: .6rem; display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
	.tarjeta-producto__pie form, .tarjeta-pack__pie form { position: relative; z-index: 1; }
	.tarjeta-producto__precio { font-weight: 800; }
	.tarjeta-producto__en-cesta { position: absolute; top: .75rem; right: .75rem; z-index: 1; display: grid; place-items: center; min-width: 30px; height: 30px; border-radius: 50%; background: var(--color-texto); color: var(--color-acento); font-family: var(--tipografia-mono); font-size: .8rem; }

	.imagen-producto { width: 100%; height: 100%; object-fit: cover; }
	.imagen-producto--vacia {
		display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
		color: var(--color-texto-suave); font-size: .8rem; background: var(--tinte-pack);
		background-image: repeating-linear-gradient(-45deg, transparent 0 10px, rgba(255, 255, 255, .25) 10px 20px);
	}
	.imagen-producto--vacia .icono { width: 26px; height: 26px; }
	[data-cat] { --tinte: var(--color-suave); }
	[data-cat="fruta"] { --tinte: var(--tinte-fruta); }
	[data-cat="verdura"] { --tinte: var(--tinte-verdura); }
	[data-cat="txarku"] { --tinte: var(--tinte-txarku); }
	[data-cat="pack"] { --tinte: var(--tinte-pack); }
	[data-cat="receta"] { --tinte: var(--tinte-receta); }
	[data-cat="queso"] { --tinte: #efe0b8; }
	[data-cat="otros"] { --tinte: #e2ded6; }
	.imagen-producto--vacia[data-cat] { background-color: var(--tinte); }

	.rejilla-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 1.25rem; }
	.tarjeta-pack__articulo { position: relative; display: grid; grid-template-columns: 120px 1fr; height: 100%; border: var(--borde) solid var(--color-linea); border-radius: var(--radio); background: var(--color-superficie); overflow: hidden; }
	.tarjeta-pack__imagen { display: block; border-right: var(--borde) solid var(--color-linea); text-decoration: none; min-height: 120px; }
	.tarjeta-pack__cuerpo { display: flex; flex-direction: column; gap: .35rem; padding: .9rem 1rem; }
	.tarjeta-pack__nombre { font-size: 1.15rem; }
	.tarjeta-pack__nombre a { text-decoration: none; }
	.tarjeta-pack__nombre a::after { content: ""; position: absolute; inset: 0; }
	.tarjeta-pack__contenido { font-size: .85rem; color: var(--color-texto-suave); }
	.tarjeta-pack__pie { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: .5rem; }

	.rejilla-recetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 1.25rem; }
	.tarjeta-receta__articulo { position: relative; height: 100%; display: flex; flex-direction: column; border: var(--borde) solid var(--color-linea); border-radius: var(--radio); background: var(--color-superficie); overflow: hidden; }
	.tarjeta-receta__imagen { position: relative; border-bottom: var(--borde) solid var(--color-linea); }
	.tarjeta-receta__imagen > :first-child { aspect-ratio: 16 / 10; height: auto; }
	.tarjeta-receta__cuerpo { display: flex; flex-direction: column; gap: .5rem; padding: 1rem; flex: 1; }
	.tarjeta-receta__cuerpo form { margin-top: auto; position: relative; z-index: 1; }
	.tarjeta-receta__nombre a { text-decoration: none; }
	.tarjeta-receta__nombre a::after { content: ""; position: absolute; inset: 0; }

	/* Ficha de producto */
	.ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 2rem; align-items: start; }
	.ficha__imagen > * { aspect-ratio: 1; height: auto; }
	.ficha__imagen { border: var(--borde) solid var(--color-linea); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra-4); background: var(--color-superficie); }
	.ficha__titulo { font-size: clamp(2rem, 5vw, 3rem); }
	.ficha__descripcion { font-size: 1.1rem; color: var(--color-texto-2); }
	.ficha__precio { font-size: 1.3rem; font-weight: 800; }
	.ficha__contenido { display: flex; flex-direction: column; gap: .5rem; }
	.lista-contenido { display: flex; flex-direction: column; }
	.lista-contenido li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px dashed var(--color-regla-2); }

	/* Recetas */
	.receta { display: flex; flex-direction: column; gap: 2rem; }
	.receta__cabecera { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 2rem; align-items: center; }
	.receta__imagen > * { aspect-ratio: 16 / 10; height: auto; }
	.receta__imagen { border: var(--borde) solid var(--color-linea); border-radius: var(--radio); overflow: hidden; }
	.receta__cuerpo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 2rem; align-items: start; }
	.receta__raciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
	.lista-ingredientes { display: flex; flex-direction: column; }
	.ingrediente__etiqueta { display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; align-items: center; padding: .6rem 0; border-bottom: 1px dashed var(--color-regla-2); cursor: pointer; }
	.ingrediente__control { width: 22px; height: 22px; accent-color: var(--color-acento); }
	.ingrediente__nombre { font-weight: 700; display: flex; flex-direction: column; }
	.ingrediente__nombre small { font-weight: 400; color: var(--color-texto-suave); }
	.ingrediente:has(.ingrediente__control:not(:checked)) .ingrediente__nombre, .ingrediente:has(.ingrediente__control:not(:checked)) .numero { opacity: .55; }
	.lista-despensa { display: flex; flex-wrap: wrap; gap: .4rem; }
	.lista-despensa li { padding: .2rem .7rem; border: 1px solid var(--color-regla-2); border-radius: var(--radio-pastilla); font-size: .9rem; }
	.lista-pasos { counter-reset: paso; display: flex; flex-direction: column; gap: 1rem; padding: 0; list-style: none; }
	.lista-pasos li { counter-increment: paso; display: grid; grid-template-columns: 2.25rem 1fr; gap: .75rem; font-size: 1.05rem; }
	.lista-pasos li::before { content: counter(paso); display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--color-texto); color: var(--color-acento); font-weight: 800; }

	/* Cesta */
	.cesta__titulo { font-size: 1.3rem; letter-spacing: -0.02em; font-weight: 800; }
	.cesta__lineas { display: flex; flex-direction: column; }
	.linea-cesta { display: grid; grid-template-columns: 40px 1fr auto auto; gap: .75rem; align-items: center; padding: .75rem 0; border-bottom: 1px solid var(--color-regla); }
	.linea-cesta__muestra { width: 40px; height: 40px; border: var(--borde) solid var(--color-linea); border-radius: 10px; background: var(--tinte); background-image: repeating-linear-gradient(-45deg, transparent 0 6px, rgba(255, 255, 255, .35) 6px 12px); }
	.linea-cesta__nombre { font-weight: 700; }
	.linea-cesta__detalle { font-family: var(--tipografia-mono); font-size: .8rem; color: var(--color-texto-suave); }
	.linea-cesta__nota { font-family: var(--tipografia-base); }
	.linea-cesta__importe { min-width: 4.5rem; text-align: right; font-size: .9rem; }
	.franjas { display: flex; flex-direction: column; gap: .75rem; }
	.franjas__dias { display: flex; flex-wrap: wrap; gap: .5rem; }
	.franjas__horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: .5rem; }
	/* Solo se ven las horas del día elegido (sin JavaScript, con :has). */
	.franjas:has([data-dia]:checked) .franjas__horas { display: none; }
	.franjas:has([data-dia="0"]:checked) [data-horas-dia="0"],
	.franjas:has([data-dia="1"]:checked) [data-horas-dia="1"],
	.franjas:has([data-dia="2"]:checked) [data-horas-dia="2"] { display: grid; }
	.hora { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 44px; padding: .3rem; border: var(--borde) solid var(--color-linea); border-radius: var(--radio-pequeno); background: var(--color-superficie); cursor: pointer; font-family: var(--tipografia-mono); font-size: .9rem; }
	.hora:has(input:checked) { background: var(--color-acento); font-weight: 500; }
	.hora:has(input:focus-visible) { outline: 3px solid var(--color-terracota); outline-offset: 2px; }
	.hora--completa { border-color: var(--color-regla-2); color: var(--color-texto-tenue); cursor: not-allowed; }
	.hora--completa .hora__valor { text-decoration: line-through; }
	.hora__estado { font-size: .65rem; }
	.cesta__total { display: flex; flex-direction: column; gap: .5rem; padding-top: 1rem; border-top: var(--borde) solid var(--color-linea); }
	.cesta__total-fila { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; }
	.cesta__total-fila--detalle { font-weight: 400; color: var(--color-texto-2); }
	/* Con "recogida o entrega", la dirección y el envío solo se ven si se elige entrega. */
	.cesta__pedido:has([name="entrega"][value="recogida"]:checked) [data-solo-reparto],
	.cesta__pedido:has([name="entrega"][value="reparto"]:checked) [data-solo-recogida] { display: none; }
	.cesta__total-importe { font-size: 1.6rem; letter-spacing: -0.02em; }
	.cesta--vacia { padding-block: 2rem; text-align: center; align-items: center; }

	/* Diálogo centrado (privacidad en «Mi cuenta») */
	.dialogo {
		position: relative; width: min(540px, calc(100% - 2rem)); max-height: calc(100% - 2rem); overflow-y: auto;
		padding: clamp(1.25rem, 4vw, 1.75rem); border: var(--borde) solid var(--color-linea); border-radius: var(--radio);
		background: var(--color-superficie); color: var(--color-texto); box-shadow: var(--sombra-4);
	}
	.dialogo::backdrop { background: var(--velo); }
	.dialogo__cerrar { position: absolute; top: .75rem; right: .75rem; }
	@media (prefers-reduced-motion: no-preference) {
		.dialogo[open] { animation: entra-dialogo 180ms ease-out; }
		@keyframes entra-dialogo { from { transform: translateY(12px); opacity: 0; } }
	}
	.privacidad-resumen__titulo { font-size: clamp(1.6rem, 4vw, 2.1rem); padding-right: 2.5rem; }
	.privacidad-resumen__puntos { display: flex; flex-direction: column; gap: .6rem; }
	.privacidad-resumen__puntos li { display: flex; align-items: flex-start; gap: .6rem; }
	.privacidad-resumen__puntos .icono { width: 24px; height: 24px; padding: 4px; flex: none; border: var(--borde) solid var(--color-linea); border-radius: 50%; background: var(--color-acento); color: var(--color-acento-texto); }

	/* Cesta lateral (con JavaScript) */
	.cesta-lateral {
		margin: 0 0 0 auto; width: min(460px, 100%); max-width: 100%; height: 100%; max-height: 100%;
		padding: 0; border: 0; border-left: var(--borde) solid var(--color-linea);
		background: var(--color-fondo); color: var(--color-texto);
	}
	.cesta-lateral[open] { display: flex; flex-direction: column; }
	.cesta-lateral::backdrop { background: var(--velo); }
	.cesta-lateral__cabecera { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: var(--borde) solid var(--color-linea); }
	.cesta-lateral__cabecera h2 { font-size: 1.8rem; }
	.cesta-lateral__cuerpo { flex: 1; overflow-y: auto; padding: 1rem 1.25rem 1.5rem; }
	@media (prefers-reduced-motion: no-preference) {
		.cesta-lateral[open] { animation: entra-lateral 220ms ease-out; }
		@keyframes entra-lateral { from { transform: translateX(40px); opacity: 0; } }
	}

	/* Aviso flotante */
	.aviso-flotante { position: fixed; left: 50%; bottom: 1.5rem; z-index: 60; transform: translateX(-50%); pointer-events: none; }
	.aviso-flotante__texto { padding: .7rem 1.2rem; border-radius: var(--radio-pastilla); background: var(--color-texto); color: var(--color-acento); font-weight: 700; box-shadow: var(--sombra-4); }
	.aviso-flotante__texto::before { content: "✓ "; }

	/* Confirmación y seguimiento */
	.confirmacion { padding: 1.75rem; border: var(--borde) solid var(--color-linea); border-radius: 20px; background: var(--color-acento); box-shadow: var(--sombra-4); display: flex; flex-direction: column; gap: .5rem; }
	.confirmacion__titulo { font-size: clamp(2rem, 6vw, 3rem); }
	.confirmacion__titulo:focus { outline: none; }
	.confirmacion__texto { font-size: 1.15rem; }
	.seguimiento { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; counter-reset: paso; }
	.seguimiento__paso { position: relative; padding-top: 1rem; border-top: 5px solid var(--color-regla); font-size: .85rem; font-weight: 600; color: var(--color-texto-suave); }
	.seguimiento__paso--hecho { border-color: var(--color-ok); color: var(--color-texto); }
	.seguimiento__paso--actual { border-color: var(--color-acento); color: var(--color-texto); font-weight: 800; }
	.seguimiento__mensaje { font-size: 1.05rem; }
	.datos-pedido { display: grid; gap: .5rem; }
	.datos-pedido > div { display: grid; grid-template-columns: minmax(120px, 30%) 1fr; gap: 1rem; padding: .4rem 0; border-bottom: 1px dashed var(--color-regla-2); }
	.datos-pedido dt { color: var(--color-texto-suave); font-size: .9rem; }
	.lineas-pedido { display: flex; flex-direction: column; }
	.lineas-pedido__fila { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--color-regla); }
	.lineas-pedido__fila small { color: var(--color-texto-suave); font-family: var(--tipografia-mono); font-size: .8rem; }

	/* Acceso de clientes */
	.acceso { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); border: var(--borde) solid var(--color-linea); border-radius: 20px; overflow: hidden; box-shadow: var(--sombra-4); background: var(--color-superficie); }
	.acceso__presentacion { display: flex; flex-direction: column; gap: 1.25rem; justify-content: space-between; padding: clamp(1.5rem, 4vw, 2.25rem); background: var(--color-acento); border-right: var(--borde) solid var(--color-linea); }
	.acceso__presentacion .etiqueta { color: var(--color-texto); }
	.confirmacion .etiqueta { color: var(--color-acento-texto); }
	.acceso__lema { font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 800; letter-spacing: var(--espaciado-titular); line-height: 1.02; max-width: 10ch; }
	.acceso__ventajas { display: flex; flex-direction: column; gap: .6rem; }
	.acceso__ventajas li { display: flex; align-items: center; gap: .6rem; }
	.acceso__ventajas .icono { width: 26px; height: 26px; padding: 4px; flex: none; border: var(--borde) solid var(--color-linea); border-radius: 50%; background: var(--color-superficie); }
	.acceso__formulario { padding: clamp(1.5rem, 4vw, 2.25rem); }
	.acceso__titulo { font-size: 1.8rem; }
	.acceso__titulo--grande { font-size: 2.4rem; }
	.separador { display: flex; align-items: center; gap: .75rem; color: var(--color-texto-suave); font-size: .85rem; }
	.separador::before, .separador::after { content: ""; flex: 1; height: 1px; background: var(--color-regla-2); }

	/* Mis pedidos */
	.lista-filas { display: flex; flex-direction: column; gap: .75rem; }
	.fila-pedido { display: grid; grid-template-columns: 90px 1fr auto auto; gap: 1rem; align-items: center; padding: 1rem 1.25rem; border: var(--borde) solid var(--color-linea); border-radius: var(--radio); background: var(--color-superficie); }
	.lista-filas--compacta .fila-pedido { grid-template-columns: 110px 1fr auto; padding: .7rem 0; border: 0; border-bottom: 1px dashed var(--color-regla-2); border-radius: 0; }
	.fila-pedido__fecha { display: flex; flex-direction: column; line-height: 1.2; }
	.fila-pedido__fecha strong { font-size: 1.15rem; letter-spacing: -0.02em; }
	.fila-pedido__fecha small { font-size: .75rem; color: var(--color-texto-suave); }
	.fila-pedido__resumen { color: var(--color-texto-2); }
	.fila-pedido--cancelado { opacity: .6; }
	.fila-pedido--cancelado .fila-pedido__importe { text-decoration: line-through; }
	.fila-activa { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }

	/* Textos legales */
	.texto-legal__intro { font-size: 1.15rem; }
	.texto-legal__seccion { display: flex; flex-direction: column; gap: .5rem; padding-block: 1.25rem; border-top: 1px dashed var(--color-regla-2); }
	.texto-legal__seccion h2 { font-size: 1.25rem; letter-spacing: -0.01em; }

	.horario { display: flex; flex-direction: column; gap: .5rem; }
	.horario__fila { display: flex; flex-direction: column; }
	.horario dd { font-family: var(--tipografia-mono); font-size: .85rem; color: var(--color-texto-2); }

	.pagina-error { padding-block: 3rem; }

	@media (max-width: 640px) {
		.catalogo__herramientas { gap: .5rem; padding-block: .5rem; }
		.catalogo__herramientas .filtros { width: 100%; }
		.filtros__lista { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 3px; margin: -3px; }
		.filtros__lista::-webkit-scrollbar { display: none; }
		.filtros__lista > li { flex: none; }
		.catalogo__herramientas .buscador { width: 100%; }
		.fila-pedido { grid-template-columns: 1fr auto; }
		.fila-pedido__resumen { grid-column: 1 / -1; grid-row: 2; }
		.linea-cesta { grid-template-columns: 1fr auto; }
		.linea-cesta__muestra { display: none; }
		.linea-cesta__importe { grid-column: 2; }
		.acceso__presentacion { border-right: 0; border-bottom: var(--borde) solid var(--color-linea); }
		.boton-cesta__texto { font-size: .85rem; }
		.menu-principal__enlace { padding: .4rem .7rem; font-size: .9rem; }
		.rejilla-productos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
		.tarjeta-producto__cuerpo { padding: .7rem; }
		.tarjeta-producto__nombre { font-size: 1rem; }
		.tarjeta-producto__pie { flex-wrap: wrap; }
		.tarjeta-pack__articulo { grid-template-columns: 90px 1fr; }
	}
}

/* ─── Panel del local ───────────────────────────────────────────────────── */
@layer panel {
	/* Ficha de producto del panel: cómo se vende (por peso, por unidades a €/kg o a precio fijo).
	   Sin :has() se ve todo junto y sigue funcionando. */
	.opciones-venta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: .6rem; }
	.opcion-venta { display: flex; gap: .6rem; align-items: flex-start; padding: .8rem .9rem; border: var(--borde) solid var(--color-linea); border-radius: var(--radio-pequeno); background: var(--color-superficie); cursor: pointer; }
	.opcion-venta input { margin-top: .25rem; accent-color: var(--color-texto); }
	.opcion-venta span { display: flex; flex-direction: column; gap: .2rem; }
	.opcion-venta small { color: var(--color-texto-suave); font-size: .85rem; }
	.opcion-venta:has(input:checked) { background: var(--color-acento); color: var(--color-acento-texto); }
	.opcion-venta:has(input:checked) small { color: inherit; }
	.etiqueta-precio-ud { display: none; }
	.formulario-producto:has([name="unidad"][value="kg"]:checked) .solo-ud,
	.formulario-producto:has([name="unidad"][value="kg"]:checked) .solo-ud-kg,
	.formulario-producto:has([name="precio_por"][value="ud"]:checked) .solo-ud-kg,
	.formulario-producto:has([name="unidad"][value="ud"]:checked) .solo-peso { display: none; }
	.formulario-producto:has([name="unidad"][value="ud"]:checked):has([name="precio_por"][value="ud"]:checked) .etiqueta-precio-kg { display: none; }
	.formulario-producto:has([name="unidad"][value="ud"]:checked):has([name="precio_por"][value="ud"]:checked) .etiqueta-precio-ud { display: inline; }

	/* Importar productos */
	.acciones-formulario { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .5rem; }
	.acciones-formulario[role="status"] { justify-content: flex-start; }

	/* Altas de clientes pendientes de validar */
	.lista-altas { display: flex; flex-direction: column; gap: 1rem; }
	.alta__cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem 1rem; }
	.alta__pedido { padding-top: .75rem; border-top: 1px solid var(--color-regla-2); }
	.alta__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
	.alta__acciones > .nota { flex-basis: 100%; }
	.aviso-altas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .85rem 1rem; border: var(--borde) solid var(--color-linea); border-radius: var(--radio-pequeno); background: var(--color-superficie); box-shadow: var(--sombra-2); font-weight: 600; }
	.contador-pestana { display: inline-grid; place-items: center; min-width: 1.4em; height: 1.4em; margin-left: .35em; padding: 0 .35em; border-radius: 999px; background: var(--color-alerta); color: #fff; font-size: .75em; font-weight: 700; }

	.pagina-panel main { padding-top: 1.25rem; }
	.barra-panel { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; }
	.segmentado--panel { max-width: 100%; border-radius: var(--radio-pequeno); }
	.cabecera-panel { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; }
	.cabecera-panel__titulo { font-size: clamp(2rem, 5vw, 2.8rem); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
	.cabecera-panel__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
	.contador-hechos { padding: .5rem 1rem; border: var(--borde) solid var(--color-linea); border-radius: var(--radio-pastilla); background: var(--color-superficie); }

	/* Acceso del equipo */
	.pagina-panel:has(.acceso-equipo) main { padding: 0; display: flex; }
	.acceso-equipo { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; padding: 3rem 1rem; background: var(--color-texto); }
	.acceso-equipo__tarjeta { width: min(440px, 100%); padding: 2rem; border-radius: var(--radio); background: var(--color-fondo); }
	.enlace-claro { color: #fff; font-weight: 700; text-decoration: none; }
	.enlace-claro:hover { color: var(--color-acento); }

	/* Tablero */
	.tablero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 1.25rem; align-items: start; }
	.tablero__columna { display: flex; flex-direction: column; gap: .75rem; padding: .9rem; border: var(--borde) solid var(--color-linea); border-radius: var(--radio); background: var(--color-columna); }
	.tablero__cabecera { display: flex; justify-content: space-between; align-items: center; padding: .25rem .4rem; }
	.tablero__titulo { display: flex; align-items: center; gap: .55rem; font-size: 1.1rem; letter-spacing: -0.01em; }
	.tablero__lista { display: flex; flex-direction: column; gap: .75rem; }
	.tablero__vacio { padding: 1.5rem; text-align: center; color: var(--color-texto-suave); border: 1px dashed var(--color-regla-2); border-radius: var(--radio-pequeno); }
	.punto { display: inline-block; width: 14px; height: 14px; border: 1px solid var(--color-linea); border-radius: 50%; background: var(--tinte, var(--color-regla)); flex: none; vertical-align: middle; }
	.punto--new { background: var(--color-acento); }
	.punto--prep { background: var(--color-calido); }
	.punto--ready { background: var(--color-ok); }
	.tarjeta-pedido { padding: 1rem; border: var(--borde) solid var(--color-linea); border-radius: 14px; background: var(--color-superficie); }
	.tarjeta-pedido__cabecera { display: flex; justify-content: space-between; align-items: baseline; }
	.tarjeta-pedido__hora { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.03em; }
	.tarjeta-pedido__numero { font-size: .75rem; color: var(--color-texto-suave); }
	.tarjeta-pedido__cliente { font-size: 1rem; letter-spacing: 0; }
	.tarjeta-pedido__direccion { font-size: .9rem; color: var(--color-texto-2); margin-top: -.4rem; }
	.tarjeta-pedido__lineas { display: flex; flex-direction: column; gap: .15rem; padding-top: .6rem; border-top: 1px dashed var(--color-regla-2); }
	.tarjeta-pedido__nota { padding: .4rem 0; font-size: .9rem; }
	.linea-peso { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 0 0 .4rem 1.9rem; }
	.linea-peso__campo { width: 6.5rem; padding: .3rem .55rem; border: var(--borde) solid var(--color-linea); border-radius: var(--radio-pequeno); background: var(--color-superficie); font-size: .9rem; }
	.linea-peso__unidad { font-size: .85rem; color: var(--color-texto-suave); }
	.linea-peso__importe { margin-left: auto; font-size: .85rem; }
	.tarjeta-pedido__pendiente { display: block; font-size: .75rem; color: var(--color-texto-suave); font-family: var(--tipografia-texto, inherit); }
	.linea-preparar { display: flex; gap: .6rem; width: 100%; padding: .35rem 0; border: 0; background: none; text-align: left; font-size: .95rem; }
	.linea-preparar[disabled] { cursor: default; opacity: 1; }
	.linea-preparar__marca { flex: none; width: 18px; height: 18px; margin-top: .15rem; border: var(--borde) solid var(--color-linea); border-radius: 4px; background: var(--color-superficie); }
	.linea-preparar[aria-pressed="true"] .linea-preparar__marca { background: var(--color-texto); box-shadow: inset 0 0 0 3px var(--color-superficie); }
	.linea-preparar[aria-pressed="true"] .linea-preparar__texto { color: var(--color-texto-suave); }
	.linea-preparar__texto small { display: block; color: var(--color-texto-suave); font-size: .8rem; }
	.tarjeta-pedido__pie { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding-top: .5rem; font-size: .9rem; color: var(--color-texto-suave); }
	.boton--estado-new, .boton--estado-prep { background: var(--color-acento); }
	.boton--estado-ready { background: var(--color-ok); }
	.tarjeta-pedido__mas summary { cursor: pointer; font-size: .85rem; color: var(--color-texto-suave); }
	.tarjeta-pedido__mas[open] { display: flex; flex-direction: column; gap: .5rem; }
	.lista-proximos { display: flex; flex-direction: column; }
	.lista-proximos li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding: .5rem 0; border-bottom: 1px dashed var(--color-regla-2); }

	/* KPIs y gráficos */
	.rejilla-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 1rem; }
	.rejilla-kpi--tres { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
	.kpi { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.1rem; border: var(--borde) solid var(--color-linea); border-radius: var(--radio); background: var(--color-superficie); }
	.kpi__valor { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
	.kpi__delta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
	.rejilla-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 1.25rem; }
	.grafico-barras { display: flex; flex-direction: column; gap: .4rem; }
	.grafico-barras__lista { display: grid; grid-template-columns: repeat(var(--columnas), 1fr); align-items: end; gap: 3px; height: 180px; border-bottom: var(--borde) solid var(--color-linea); }
	.grafico-barras__barra { position: relative; height: max(var(--alto), 2px); border: 1px solid var(--color-linea); border-bottom: 0; border-radius: 4px 4px 0 0; background: var(--color-acento); }
	.grafico-barras__barra--mejor { background: var(--color-terracota); }
	.grafico-barras__valor { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding-bottom: 2px; font-family: var(--tipografia-mono); font-size: .65rem; color: var(--color-texto-suave); white-space: nowrap; }
	.grafico-barras--horas .grafico-barras__lista { height: 140px; gap: 10px; margin-top: 1.25rem; }
	.grafico-barras__ejes { display: grid; grid-template-columns: repeat(var(--columnas), 1fr); gap: 3px; font-family: var(--tipografia-mono); font-size: .65rem; color: var(--color-texto-suave); text-align: center; }
	.grafico-barras--horas .grafico-barras__ejes { gap: 10px; }
	.barras-horizontales { display: flex; flex-direction: column; gap: 1rem; }
	.barras-horizontales__texto { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .35rem; }
	.barras-horizontales__texto .numero:last-child { margin-left: auto; }
	.barras-horizontales__pista { display: block; height: 14px; border: var(--borde) solid var(--color-linea); border-radius: var(--radio-pastilla); background: var(--color-superficie); overflow: hidden; }
	.barras-horizontales__pista span { display: block; height: 100%; background: var(--tinte); border-right: var(--borde) solid var(--color-linea); }

	/* Tablas */
	.tabla-desplazable { overflow-x: auto; }
	.tabla { width: 100%; font-size: .92rem; }
	.tabla th, .tabla td { padding: .55rem .5rem; border-bottom: 1px dashed var(--color-regla-2); text-align: left; vertical-align: top; }
	.tabla thead th { font-family: var(--tipografia-mono); font-size: .7rem; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--color-texto-suave); border-bottom: var(--borde) solid var(--color-linea); }
	.tabla tbody th { font-weight: 700; }
	.tabla tfoot th, .tabla tfoot td { border-top: var(--borde) solid var(--color-linea); border-bottom: 0; padding-top: .8rem; }
	.tabla__num { text-align: right !important; white-space: nowrap; }
	.tabla__enlace { text-decoration: none; }
	.tabla__enlace:hover { text-decoration: underline; }
	.tabla__fila--cancelada td, .tabla__fila--cancelada th { opacity: .6; }
	.tabla__fila--cancelada td:last-child { text-decoration: line-through; }
	.tabla small { color: var(--color-texto-suave); font-weight: 400; }
	.tabla--compacta th, .tabla--compacta td { padding-block: .45rem; }
	.ordenar { display: flex; align-items: center; gap: .6rem; }

	/* Catálogo del panel */
	.lista-catalogo { padding: 0; overflow: hidden; }
	.fila-catalogo { display: grid; grid-template-columns: 44px 1fr auto auto auto auto; gap: 1rem; align-items: center; padding: .75rem 1rem; border-bottom: 1px solid var(--color-regla); }
	.fila-catalogo:last-child { border-bottom: 0; }
	.fila-catalogo--agotado { background: var(--color-fondo); }
	.fila-catalogo--agotado .fila-catalogo__nombre a, .fila-catalogo--agotado .fila-catalogo__precio { color: var(--color-texto-suave); }
	.fila-catalogo__muestra { width: 44px; height: 44px; border: var(--borde) solid var(--color-linea); border-radius: 10px; overflow: hidden; background: var(--tinte); background-image: repeating-linear-gradient(-45deg, transparent 0 6px, rgba(255, 255, 255, .35) 6px 12px); }
	.fila-catalogo__nombre { font-weight: 800; font-size: 1.1rem; letter-spacing: -0.01em; }
	.fila-catalogo__nombre a { text-decoration: none; }
	.fila-catalogo__precio { white-space: nowrap; }
	.fila-catalogo__ir { font-size: 1.4rem; text-decoration: none; padding-inline: .3rem; }
	.interruptor { display: inline-flex; align-items: center; gap: .5rem; border: 0; background: none; font-weight: 700; font-size: .9rem; white-space: nowrap; }
	.interruptor__pista { position: relative; width: 44px; height: 26px; border: var(--borde) solid var(--color-linea); border-radius: var(--radio-pastilla); background: var(--color-suave); }
	.interruptor__pista::after { content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border: var(--borde) solid var(--color-linea); border-radius: 50%; background: var(--color-superficie); transition: transform var(--transicion); }
	.interruptor[aria-checked="true"] .interruptor__pista { background: var(--color-acento); }
	.interruptor[aria-checked="true"] .interruptor__pista::after { transform: translateX(17px); }
	/* Recetas del panel */
	.fila-receta { grid-template-columns: 44px 1fr auto auto auto; }
	.fila-catalogo__muestra img { width: 100%; height: 100%; object-fit: cover; }
	.lista-ingredientes-panel { display: grid; gap: .75rem; padding: 0; list-style: none; }
	.fila-ingrediente { display: grid; grid-template-columns: minmax(0, 1fr) 9rem 11rem 6.5rem; gap: .5rem .75rem; align-items: end; padding-bottom: .75rem; border-bottom: 1px solid var(--color-regla); }
	.fila-ingrediente:last-child { border-bottom: 0; padding-bottom: 0; }
	.fila-ingrediente > .campo__error { grid-column: 1 / -1; }
	.fila-ingrediente__quitar { padding-bottom: .6rem; }
	.fila-ingrediente .campo__sufijo { white-space: nowrap; }
	.receta-foto-panel { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: var(--borde) solid var(--color-linea); border-radius: var(--radio-pequeno); }
	.zona-borrar { border-color: var(--color-regla); }
	.formato-receta { padding: .9rem 1rem; overflow-x: auto; border-radius: var(--radio-pequeno); background: var(--color-fondo); font-family: var(--fuente-mono, ui-monospace, monospace); font-size: .85rem; line-height: 1.5; white-space: pre; }
	.lista-simple { display: grid; gap: .25rem; padding-left: 1.2rem; list-style: disc; }
	.lista-importar-recetas { display: grid; gap: 1rem; padding: 0; list-style: none; }
	.importar-receta__cabecera { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
	.importar-receta__ingredientes { display: grid; gap: .45rem; padding: 0; list-style: none; }
	@media (max-width: 640px) {
		.fila-ingrediente { grid-template-columns: minmax(0, 1fr) 8rem; }
		.fila-ingrediente > .campo:first-child { grid-column: 1 / -1; }
	}
	.formulario-producto { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.25rem; align-items: start; }
	.formulario-producto__lateral { position: sticky; top: 5rem; }

	.ficha-cliente { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.25rem; align-items: start; }

	@media (max-width: 900px) {
		.formulario-producto, .ficha-cliente { grid-template-columns: 1fr; }
		.formulario-producto__lateral { position: static; }
		.fila-catalogo, .fila-receta { grid-template-columns: 44px 1fr auto; }
		.fila-catalogo > .sello, .fila-catalogo > span:empty, .fila-catalogo__ir { display: none; }
		.fila-catalogo__precio { grid-column: 2; }
		.fila-catalogo form { grid-column: 3; grid-row: 1 / span 2; }
	}
}

/* ─── Utilidades ────────────────────────────────────────────────────────── */
@layer utilidades {
	.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
	.icono { width: 1.2em; height: 1.2em; }
}

/* ─── Preferencias del sistema ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

@media (forced-colors: active) {
	.opcion:has(.opcion__control:checked), .hora:has(input:checked), .pastilla[aria-current], .segmentado__opcion[aria-current] { outline: 3px solid Highlight; }
}

@media print {
	.cabecera-sitio, .pie-sitio, .enlaces-salto, .aviso-flotante, .cesta-lateral, form, .barra-panel, .acciones { display: none !important; }
	body { background: #fff; color: #000; font-size: 11pt; }
	.tarjeta, .kpi, .tarjeta-pedido { box-shadow: none; break-inside: avoid; }
	main { padding: 0; }
}