/* Ficha de receta. Tokens del tema (theme.json); el modo oscuro llega con las mismas variables. Iconos Tabler. */
.hcr-ficha {
	--hcr-titulo: var(--wp--preset--color--titulo, #0F172A);
	--hcr-cuerpo: var(--wp--preset--color--cuerpo, #3B4452);
	--hcr-fondo: var(--wp--preset--color--fondo, #FFFFFF);
	--hcr-superficie: var(--wp--preset--color--superficie, #FEF9E1);
	--hcr-superficie-2: var(--wp--preset--color--superficie-2, #F9F0C8);
	--hcr-borde: var(--wp--preset--color--borde, #E7DFC0);
	--hcr-acento: var(--wp--preset--color--acento-texto, #9A5C00);
	--hcr-estrella: var(--wp--preset--color--ambar, #FD9800);
	--hcr-radio: 12px;
	border: 2px solid var(--hcr-titulo);
	border-radius: 14px;
	background: var(--hcr-fondo);
	color: var(--hcr-cuerpo);
	margin-block: var(--wp--preset--spacing--50, 2.5rem);
	padding: clamp(18px, 3.2vw, 32px);
	display: grid;
	gap: 22px;
	container-type: inline-size;
	scroll-margin-top: calc(var(--hc-cabecera-alto, 4rem) + 1rem);
}
@media (prefers-color-scheme: dark) { .hcr-ficha { --hcr-estrella: var(--wp--preset--color--acento-texto, #FDBA5C); } }
.hcr-ficha :is(h2, h3, h4) { font-family: var(--wp--preset--font-family--titulos, inherit); font-weight: 600; color: var(--hcr-titulo); line-height: 1.2; text-wrap: balance; }
.hcr-ico { width: 1.25em; height: 1.25em; flex: none; }
.hcr-ficha [hidden] { display: none !important; }
.hcr-ficha :is(button, input, a):focus-visible { outline: 2px solid var(--hcr-acento); outline-offset: 2px; }

/* Cabecera */
.hcr-cab { display: grid; gap: 10px; }
.hcr-titulo { margin: 0; font-size: clamp(1.45rem, 3.4cqi, 2rem); }
.hcr-valoracion { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 0.95rem; }
.hcr-media { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-variant-numeric: tabular-nums; }
.hcr-estrellas {
	font-size: 1.15rem; letter-spacing: 0.08em; line-height: 1;
	background: linear-gradient(90deg, var(--hcr-estrella) var(--hcr-pct, 0%), var(--hcr-borde) var(--hcr-pct, 0%));
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.hcr-votar { display: inline-flex; align-items: center; border: 0; padding: 0; margin: 0; }
.hcr-votar legend { float: left; margin-right: 4px; opacity: 0.85; }
.hcr-votar button { font-size: 1.2rem; line-height: 1; width: 36px; height: 36px; border: 0; background: none; color: var(--hcr-borde); cursor: pointer; border-radius: 8px; padding: 0; }
.hcr-votar:is(:hover, :focus-within) button:not(:disabled) { color: var(--hcr-estrella); }
.hcr-votar button:is(:hover, :focus-visible) ~ button:not(:disabled) { color: var(--hcr-borde); }
.hcr-votar button:disabled { cursor: default; opacity: 0.6; }
.hcr-votar-estado { font-size: 0.9rem; }
.hcr-resumen { margin: 0; max-width: 68ch; }

/* Datos clave: una banda; la fermentación con su propio fondo */
.hcr-datos { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 2px; background: var(--hcr-borde); border-radius: var(--hcr-radio); overflow: hidden; }
.hcr-datos > div { background: var(--hcr-superficie); padding: 12px 10px; display: grid; gap: 2px; align-content: start; }
.hcr-datos dt { display: flex; align-items: center; gap: 5px; font-size: 0.7rem; letter-spacing: 0.02em; text-transform: uppercase; min-width: 0; }
.hcr-datos dt .hcr-ico { color: var(--hcr-acento); width: 1rem; height: 1rem; }
.hcr-datos dd { margin: 0; font-weight: 650; color: var(--hcr-titulo); font-variant-numeric: tabular-nums; }
.hcr-datos .hcr-fermentacion { background: var(--hcr-superficie-2); }
.hcr-datos small { display: block; font-weight: 400; font-size: 0.8rem; color: var(--hcr-cuerpo); }

/* Acciones */
.hcr-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.hcr-boton {
	font: inherit; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
	border-radius: 999px; border: 1px solid var(--hcr-titulo); background: transparent; color: var(--hcr-titulo); cursor: pointer; text-decoration: none;
}
.hcr-boton:hover { background: var(--hcr-superficie); }
.hcr-boton[aria-pressed="true"] { background: var(--hcr-titulo); color: var(--hcr-fondo); }

/* Cuerpo: ingredientes y material fijos a la izquierda cuando hay sitio, pasos a la derecha */
.hcr-cuerpo { display: grid; gap: 22px; align-items: start; }
.hcr-lado { display: grid; gap: 16px; }
@container (min-width: 600px) {
	.hcr-cuerpo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
	.hcr-lado { position: sticky; top: calc(var(--hc-cabecera-alto, 4rem) + 1rem); }
}
.hcr-caja { background: var(--hcr-superficie); border-radius: var(--hcr-radio); padding: 16px 18px; }
.hcr-caja h3 { margin: 0; font-size: 1.15rem; display: flex; align-items: center; gap: 8px; }
.hcr-caja-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.hcr-grupo { margin: 14px 0 4px; font-size: 1rem; }

/* Ajustar litros */
.hcr-escalar { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--hcr-borde); border-radius: 999px; background: var(--hcr-fondo); padding: 2px; }
.hcr-cant-btn { width: 36px; height: 36px; border: 0; border-radius: 999px; background: none; color: var(--hcr-titulo); cursor: pointer; display: grid; place-items: center; padding: 0; }
.hcr-cant-btn:hover { background: var(--hcr-superficie-2); }
.hcr-escalar label { display: inline-flex; align-items: baseline; gap: 4px; padding-inline: 4px; font-size: 0.95rem; margin: 0; }
.hcr-escalar input { width: 3.2em; font: inherit; font-weight: 650; text-align: right; border: 0; background: none; color: var(--hcr-titulo); font-variant-numeric: tabular-nums; padding: 0; -moz-appearance: textfield; appearance: textfield; }
.hcr-escalar input::-webkit-inner-spin-button, .hcr-escalar input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.hcr-rapidos { display: flex; gap: 6px; margin: 0 0 10px; }
.hcr-rapidos button { font: inherit; font-size: 0.85rem; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--hcr-borde); background: var(--hcr-fondo); color: var(--hcr-cuerpo); cursor: pointer; }
.hcr-rapidos button[aria-pressed="true"] { border-color: var(--hcr-titulo); color: var(--hcr-titulo); font-weight: 600; }
.hcr-escala-aviso { font-size: 0.82rem; margin: 10px 0 0; }

/* Listas con casillas */
.hcr-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.hcr-lista li { margin: 0; }
.hcr-lista label { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; padding: 8px 6px; border-radius: 8px; cursor: pointer; min-height: 44px; box-sizing: border-box; margin: 0; }
.hcr-lista label:hover { background: var(--hcr-superficie-2); }
.hcr-lista input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--hcr-acento); cursor: pointer; }
.hcr-lista input:checked + span { opacity: 0.7; text-decoration: line-through; text-decoration-color: var(--hcr-borde); }
.hcr-cant { font-weight: 650; color: var(--hcr-titulo); font-variant-numeric: tabular-nums; }
.hcr-cant.hcr-cambiada { background: var(--hcr-superficie-2); border-radius: 4px; padding-inline: 2px; }

/* Pasos */
.hcr-pasos-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.hcr-pasos-lista li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; padding: 8px 4px; margin: 0; scroll-margin-top: calc(var(--hc-cabecera-alto, 4rem) + 1rem); }
.hcr-pasos-lista p { margin: 7px 0 0; }
.hcr-paso-n {
	width: 40px; height: 40px; border-radius: 999px; border: 2px solid var(--hcr-acento); background: var(--hcr-fondo); color: var(--hcr-acento);
	font: 600 1rem/1 var(--wp--preset--font-family--titulos, inherit); display: grid; place-items: center; cursor: pointer; padding: 0; font-variant-numeric: tabular-nums;
}
.hcr-paso-n .hcr-ico { display: none; width: 1.2rem; height: 1.2rem; }
.hcr-hecho .hcr-paso-n { background: var(--hcr-acento); color: var(--hcr-fondo); }
.hcr-hecho .hcr-paso-n span { display: none; }
.hcr-hecho .hcr-paso-n .hcr-ico { display: block; }
.hcr-hecho p { opacity: 0.7; }
.hcr-progreso { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 0.9rem; }
.hcr-enlace { font: inherit; font-size: 0.9rem; background: none; border: 0; color: var(--hcr-acento); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 6px 2px; display: inline-flex; gap: 4px; align-items: center; }

.hcr-video iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: var(--hcr-radio); }
.hcr-notas ul { margin: 8px 0 0; padding-left: 1.2rem; display: grid; gap: 6px; }

@media (prefers-reduced-motion: no-preference) {
	.hcr-paso-n, .hcr-boton, .hcr-lista label, .hcr-rapidos button, .hcr-cant-btn { transition: background-color 0.15s ease, color 0.15s ease; }
}

/* Imprimir: solo la ficha, sin botones, casillas ni vídeo; con las cantidades tal como estén. */
@media print {
	/* display, no visibility: lo oculto con visibility sigue ocupando sitio y salían páginas en blanco. */
	.hcr-imprimiendo body *:not(.hcr-ruta, .hcr-a-imprimir, .hcr-a-imprimir *) { display: none !important; }
	.hcr-imprimiendo .hcr-ruta { display: block !important; position: static !important; margin: 0 !important; padding: 0 !important; border: 0 !important; width: auto !important; max-width: none !important; min-height: 0 !important; height: auto !important; overflow: visible !important; box-shadow: none !important; background: none !important; }
	.hcr-imprimiendo .hcr-a-imprimir { margin: 0; max-width: none; }
	.hcr-ficha { --hcr-titulo: #1a1a1a; --hcr-cuerpo: #1a1a1a; --hcr-fondo: #fff; --hcr-superficie: #fff; --hcr-superficie-2: #fff; border: 0; padding: 0; }
	.hcr-ficha :is(.hcr-votar, .hcr-votar-estado, .hcr-acciones, .hcr-video, .hcr-escalar, .hcr-rapidos, .hcr-progreso, .hcr-escala-aviso) { display: none !important; }
	.hcr-lista input { display: none; }
	.hcr-lista label { grid-template-columns: 1fr; min-height: 0; padding: 2px 0; }
	.hcr-caja { padding: 0; }
	.hcr-lado { position: static; }
	.hcr-estrellas { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}