/* Jaso Fresh · guía «Cómo pedir» de cada tienda (/ayuda).
   Usa las variables de estilo de la tienda (estilos.css + las que inyecta plantilla.js),
   así la guía sale con sus colores y sus letras. Incluye estilos de impresión para guardarla en PDF. */

@layer componentes {
	.ayuda { display: grid; gap: 2.25rem; }

	.ayuda__cabecera { display: grid; gap: .9rem; padding-block-end: 1.75rem; border-block-end: var(--borde) solid var(--color-regla-2); }
	.ayuda__marca { font-size: 1.35rem; }
	.ayuda__marca svg, .ayuda__marca img { max-height: 3.2rem; width: auto; }
	.ayuda__titulo { font-family: var(--tipografia-titulares); font-weight: var(--peso-titular); letter-spacing: var(--espaciado-titular); font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1.02; text-wrap: balance; }
	.ayuda__entradilla { font-size: 1.15rem; color: var(--color-texto-2); max-width: 46ch; text-wrap: pretty; }
	.ayuda__acciones { display: flex; flex-wrap: wrap; gap: .6rem; margin-block-start: .4rem; }

	.ayuda__rejilla { display: grid; gap: var(--hueco); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); align-items: start; }
	.ayuda__ficha, .ayuda__indice, .ayuda__claves, .ayuda__caja {
		background: var(--color-superficie); border: var(--borde) solid var(--color-regla-2); border-radius: var(--radio); padding: 1.25rem 1.4rem;
	}
	.ayuda__ficha { display: grid; gap: .8rem; }
	.ayuda__datos { display: grid; gap: .55rem; }
	.ayuda__datos div { display: grid; grid-template-columns: 6.5rem 1fr; gap: .75rem; }
	.ayuda__datos dt { color: var(--color-texto-suave); }
	.ayuda__datos dd { overflow-wrap: anywhere; }
	.ayuda__modos { display: flex; flex-wrap: wrap; gap: .4rem; }

	.ayuda__indice ol { margin: .6rem 0 0; padding-inline-start: 1.3rem; display: grid; gap: .35rem; }
	.ayuda__indice a { font-weight: 600; }

	.ayuda__claves { background: color-mix(in oklab, var(--color-acento) 14%, var(--color-superficie)); border-color: color-mix(in oklab, var(--color-acento) 45%, var(--color-regla-2)); }

	.ayuda__seccion { display: grid; gap: .9rem; }
	.ayuda__seccion h2 {
		display: flex; align-items: center; gap: .7rem;
		font-family: var(--tipografia-titulares); font-weight: var(--peso-titular); letter-spacing: var(--espaciado-titular);
		font-size: clamp(1.45rem, 3.6vw, 1.9rem); line-height: 1.1;
	}
	.ayuda__seccion h3 { font-size: 1.1rem; font-weight: 700; margin-block-start: .6rem; }
	.ayuda__seccion p, .ayuda__lista li, .ayuda__pasos li { max-width: 68ch; text-wrap: pretty; }
	.ayuda__numero {
		flex: none; display: inline-grid; place-items: center; inline-size: 2.2rem; block-size: 2.2rem; border-radius: 50%;
		background: var(--color-acento); color: var(--color-acento-texto); font-family: var(--tipografia-base); font-size: 1rem; font-weight: 800; letter-spacing: 0;
	}

	.ayuda__lista { display: grid; gap: .5rem; padding: 0; margin: 0; list-style: none; }
	.ayuda__lista li { position: relative; padding-inline-start: 1.3rem; }
	.ayuda__lista li::before { content: ""; position: absolute; inset-inline-start: .15rem; inset-block-start: .55em; inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: var(--color-acento); }
	.ayuda__pasos { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; counter-reset: paso; }
	.ayuda__pasos li { counter-increment: paso; position: relative; padding-inline-start: 2.1rem; }
	.ayuda__pasos li::before {
		content: counter(paso); position: absolute; inset-inline-start: 0; inset-block-start: .05em;
		inline-size: 1.45rem; block-size: 1.45rem; display: grid; place-items: center; border-radius: 50%;
		border: var(--borde) solid var(--color-texto); font-size: .8rem; font-weight: 700;
	}

	.ayuda__tabla { overflow-x: auto; border: var(--borde) solid var(--color-regla-2); border-radius: var(--radio-pequeno); background: var(--color-superficie); }
	.ayuda__tabla table { inline-size: 100%; border-collapse: collapse; font-size: .95rem; }
	.ayuda__tabla th, .ayuda__tabla td { padding: .65rem .85rem; text-align: start; vertical-align: top; border-block-end: 1px solid var(--color-regla); }
	.ayuda__tabla tr:last-child > * { border-block-end: 0; }
	.ayuda__tabla thead th { background: var(--color-suave); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-texto-suave); }
	.ayuda__tabla tbody th { font-weight: 700; white-space: nowrap; }

	.ayuda__nota { padding: .85rem 1rem; border-inline-start: 4px solid var(--color-acento); background: var(--color-suave); border-radius: 0 var(--radio-pequeno) var(--radio-pequeno) 0; }
	.ayuda__nota--aviso { border-inline-start-color: var(--color-terracota); }

	.ayuda__entrega { display: grid; gap: var(--hueco); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
	.ayuda__caja { display: grid; gap: .55rem; align-content: start; }
	.ayuda__caja h3 { margin: 0; }

	.ayuda__enlace a { font-weight: 700; }

	.ayuda__faq { display: grid; gap: .5rem; }
	.ayuda__faq details { background: var(--color-superficie); border: var(--borde) solid var(--color-regla-2); border-radius: var(--radio-pequeno); padding: .2rem 1rem; }
	.ayuda__faq summary { cursor: pointer; padding-block: .7rem; font-weight: 700; }
	.ayuda__faq details p { padding-block-end: .8rem; }

	.ayuda__pie { color: var(--color-texto-suave); font-size: .9rem; border-block-start: 1px solid var(--color-regla); padding-block-start: 1rem; }
}

@media print {
	@page { size: A4; margin: 15mm 14mm; }
	.ayuda { gap: 1.2rem; font-size: 10.5pt; }
	.ayuda, .ayuda * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.ayuda__acciones, .ayuda__indice, .ayuda__enlace { display: none !important; }
	.ayuda__cabecera { padding-block-end: 1rem; }
	.ayuda__titulo { font-size: 26pt; }
	.ayuda__rejilla { display: block; }
	.ayuda__ficha, .ayuda__claves, .ayuda__caja, .ayuda__tabla, .ayuda__nota, .ayuda__faq details { break-inside: avoid; box-shadow: none; }
	.ayuda__seccion h2, .ayuda__seccion h3 { break-after: avoid; }
	.ayuda__seccion { break-before: auto; }
	.ayuda a { color: inherit; text-decoration: none; }
	.ayuda__faq summary { list-style: none; }
	.ayuda__faq summary::-webkit-details-marker { display: none; }
}