/* ============================================================
   Ficha Técnica de Receta — Yocomofeliz Recipes
   ============================================================ */

/* Variables — fácil de personalizar */
:root {
	--ycf-color-primario:    #2d6a4f;
	--ycf-color-secundario:  #52b788;
	--ycf-color-acento:      #b7e4c7;
	--ycf-color-texto:       #1b1b1b;
	--ycf-color-texto-suave: #555;
	--ycf-color-borde:       #d8e8df;
	--ycf-color-fondo:       #f6fbf8;
	--ycf-radio-borde:       8px;
	--ycf-fuente-base:       inherit;
}

/* ============================================================
   Contenedor principal
   ============================================================ */
.ycf-ficha-receta {
	font-family:    var(--ycf-fuente-base);
	color:          var(--ycf-color-texto);
	max-width:      800px;
	margin:         2rem auto;
}

/* ============================================================
   Encabezado técnico
   ============================================================ */
.ycf-ficha-header {
	background: #bcb45d;
	border-radius: var(--ycf-radio-borde);
	padding:       1.25rem 1.5rem;
	margin-bottom: 2rem;
	position: relative;
	overflow: hidden;
}

.ycf-ficha-header::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 60px;
	background-image: url('../images/backgtoundFrutas.webp');
	background-size: cover;
	background-position: center top;
	border-radius: var(--ycf-radio-borde) var(--ycf-radio-borde) 0 0;
	pointer-events: none;
}

.ycf-ficha-header > * {
	position: relative;
	z-index: 1;
	margin-top: 60px;
}

.ycf-ficha-header > *:first-child {
	margin-top: 60px;
}

/* ============================================================
   Layout single-receta.php
   ============================================================ */
.ycf-single-receta {
	max-width:  800px;
	margin:     2rem auto;
	padding:    0 1rem;
}

.ycf-receta-titulo {
	font-size:     3em;
	font-weight:   700;
	line-height:   1.2;
	margin:        0 0 1.25rem;
	padding-top:   50px;
	color: #bcb45d;
	text-align: center;
}

.ycf-imagen-principal {
	margin-top:    50px;
	margin-bottom: 1.75rem;
	border-radius: var(--ycf-radio-borde);
	overflow:      hidden;
}

.ycf-imagen-principal .ycf-thumbnail {
	display:    block;
	width:      100%;
	height:     auto;
	max-height: 480px;
	object-fit: cover;
}

.ycf-receta-contenido {
	margin-bottom: 1.5rem;
	color:#376b5a;
	text-align: center;
	font-size: 1.2em;
}

/* ============================================================
   Categorías
   ============================================================ */
.ycf-categorias {
	display:     flex;
	flex-wrap:   wrap;
	gap:         6px;
	margin-bottom: 0.75rem;
	justify-content: center;
}

.ycf-categoria-tag {
	display:       inline-block;
	background:    #a1acd4;
	color:         #ffffff;
	font-size:     0.75rem;
	font-weight:   700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding:       3px 10px;
	border-radius: 20px;
	text-decoration: none;
	transition:    background 0.2s;
}

.ycf-categoria-tag:hover {
	background: var(--ycf-color-secundario);
	color:      #fff;
}

/* ============================================================
   Dificultad
   ============================================================ */
.ycf-dificultad-facil   .ycf-dato-valor { color: #2d6a4f; }
.ycf-dificultad-media   .ycf-dato-valor { color: #e07b2a; }
.ycf-dificultad-dificil .ycf-dato-valor { color: #c0392b; }

.ycf-descripcion-corta {
	color:         var(--ycf-color-texto-suave);
	font-size:     1rem;
	line-height:   1.6;
	margin:        0 0 1rem;
}

.ycf-datos-tecnicos {
	display:        flex;
	flex-wrap:      wrap;
	gap:            1.25rem;
	align-items:    flex-start;
}

@media (max-width: 600px) {
	.ycf-datos-tecnicos {
		display:               grid;
		grid-template-columns: 1fr 1fr;
		gap:                   1rem;
	}

	.ycf-dato {
		align-items: center!important;
		text-align:  center!important;
	}
}

.ycf-dato {
	display:        flex;
	flex-direction: column;
	align-items:    flex-start;
	gap:            2px;
}

.ycf-dato-icon {
	font-size:      1.4rem;
	line-height:    1;
	padding-bottom: 4px;
	color:          #376b5a !important;
}

.ycf-dato-label {
	font-size:   0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #ffffff;
}

.ycf-dato-valor {
	font-size:   1rem;
	font-weight: 600;
	color:       var(--ycf-color-primario);
}

/* ============================================================
   Control de porciones
   ============================================================ */
.ycf-porciones-control {
	display:     flex;
	align-items: center;
	gap:         6px;
	margin-top:  2px;
}

.ycf-btn-porcion {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           28px;
	height:          28px;
	background: #a1acd4;
	color:           #fff;
	border:          none;
	border-radius:   50%;
	font-size:       1.1rem;
	cursor:          pointer;
	transition:      background 0.2s;
	line-height:     1;
	padding:         0;
}

.ycf-btn-porcion:hover {
	background: #376b5a;
}

.ycf-btn-porcion:active,
.ycf-btn-porcion:focus {
	background: #a1acd4;
	outline: none;
}

#ycf-porciones-selector {
	width:        54px;
	text-align:   center;
	font-size:    1.1rem;
	font-weight:  700;
	color:        var(--ycf-color-primario);
	border:       2px solid var(--ycf-color-borde);
	border-radius: 4px;
	padding:      3px 4px;
	background:   #fff;
	-moz-appearance:    textfield;
	appearance:         textfield;
}

#ycf-porciones-selector::-webkit-outer-spin-button,
#ycf-porciones-selector::-webkit-inner-spin-button {
	-webkit-appearance: none;
}

/* ============================================================
   Secciones (ingredientes / preparación)
   ============================================================ */
.ycf-seccion-ingredientes,
.ycf-seccion-pasos {
	margin-bottom: 2rem;
}

.ycf-seccion-titulo {
	font-size:     1.2rem;
	font-weight:   700;
	color:         #bcb45d;
	border-bottom: 2px solid #f3b0b1;
	padding-bottom: 0.4rem;
	margin-bottom: 1rem;
}

/* ============================================================
   Lista de ingredientes
   ============================================================ */
.ycf-ingredientes-lista {
	list-style: none;
	margin:     0;
	padding:    0;
}

.ycf-ingredientes-separador {
	font-size:      0.85rem;
	font-weight:    700;
	color:          #813b51;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin:         1rem 0 0.25rem;
	padding-bottom: 0.25rem;
	border-bottom:  2px solid #f3b0b1;
}

.ycf-ingrediente {
	display:       flex;
	gap:           0.6rem;
	padding:       0.55rem 0.75rem;
	border-bottom: 1px solid #f3b0b1;
	align-items:   baseline;
	transition:    background 0.15s;
}

.ycf-ingrediente:last-child {
	border-bottom: none;
}

.ycf-ingrediente:hover {
	background: var(--ycf-color-fondo);
}

.ycf-ing-cantidad {
	font-weight:  700;
	color:        #813b51;
	min-width:    70px;
	font-size:    0.95rem;
	transition:   color 0.25s;
}

.ycf-ingrediente--otro {
	display: block;
}

.ycf-ing-otro {
	min-width: 0;
}

.ycf-ing-nombre {
	color:     #813b51;
	font-size: 0.95rem;
}

/* ============================================================
   Pasos por grupo / sección
   ============================================================ */
.ycf-grupo-pasos {
	margin-bottom: 1.5rem;
}

.ycf-grupo-titulo {
	font-size:     1rem;
	font-weight:   700;
	color: #813b51;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin:        0 0 0.75rem;
}

.ycf-pasos-lista {
	list-style: none;
	counter-reset: pasos-counter;
	margin:  0;
	padding: 0;
}

.ycf-paso-item {
	display:        flex;
	flex-direction: column;
	gap:            0.75rem;
	counter-increment: pasos-counter;
	padding:        1rem 1rem 1rem 3.5rem;
	position:       relative;
	border-left:    3px solid #f3b0b1;
	margin-bottom:  1rem;
	background:     #ffffff;
	border-radius:  0 var(--ycf-radio-borde) var(--ycf-radio-borde) 0;
}

.ycf-paso-item::before {
	content:         counter(pasos-counter);
	position:        absolute;
	left:            0.75rem;
	top:             1rem;
	background:      #a1acd4;
	color:           #fff;
	width:           1.8rem;
	height:          1.8rem;
	border-radius:   50%;
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-size:       0.85rem;
	font-weight:     700;
	line-height:     1;
}

.ycf-paso-texto {
	font-size:   0.95rem;
	line-height: 1.65;
	color: #813b51;
}

.ycf-paso-texto a {
	color:           var(--ycf-color-primario);
	text-decoration: underline;
}

/* ============================================================
   Imágenes y videos en pasos
   ============================================================ */
.ycf-paso-imagen img {
	max-width:     100%;
	border-radius: var(--ycf-radio-borde);
	display:       block;
}

.ycf-video-wrapper {
	position:    relative;
	padding-top: 56.25%; /* 16:9 */
	overflow:    hidden;
	border-radius: var(--ycf-radio-borde);
}

.ycf-video-wrapper iframe {
	position: absolute;
	inset:    0;
	width:    100%;
	height:   100%;
	border:   none;
}

/* ============================================================
   Conservación
   ============================================================ */
.ycf-seccion-conservacion {
	margin-bottom: 2rem;
}

.ycf-conservacion-lista {
	list-style: none;
	margin:     0;
	padding:    0;
}

.ycf-conservacion-item {
	display:       flex;
	gap:           0.6rem;
	padding:       0.55rem 0.75rem;
	border-bottom: 1px solid #f3b0b1;
	align-items:   baseline;
	color:         #813b51;
	font-size:     0.95rem;
	transition:    background 0.15s;
}

.ycf-conservacion-item:last-child {
	border-bottom: none;
}

.ycf-conservacion-item:hover {
	background: var(--ycf-color-fondo);
}

.ycf-conservacion-item::before {
	content:     '•';
	color:       #813b51;
	font-size:   1.1rem;
	line-height: 1.4;
	flex-shrink: 0;
}

/* ============================================================
   Tips
   ============================================================ */
.ycf-seccion-tips {
	margin-bottom: 2rem;
}

.ycf-tips-icon {
	color:      #bcb45d;
	font-size:  1rem;
	margin-right: 0.2rem;
}

.ycf-tips-lista {
	list-style: none;
	margin:     0;
	padding:    0;
}

.ycf-tip-item {
	display:       flex;
	gap:           0.6rem;
	padding:       0.55rem 0.75rem;
	border-bottom: 1px solid #f3b0b1;
	align-items:   baseline;
	color:         #813b51;
	font-size:     0.95rem;
	transition:    background 0.15s;
}

.ycf-tip-item:last-child {
	border-bottom: none;
}

.ycf-tip-item:hover {
	background: var(--ycf-color-fondo);
}

.ycf-tip-item::before {
	content:     '•';
	color:       #813b51;
	font-size:   1.1rem;
	line-height: 1.4;
	flex-shrink: 0;
}

/* ============================================================
   Responsive
   ============================================================ */
@media ( max-width: 600px ) {
	.ycf-datos-tecnicos {
		gap: 0.75rem;
	}

	.ycf-paso-item {
		padding-left: 3rem;
	}

	.ycf-paso-item::before {
		left: 0.6rem;
		width:  1.5rem;
		height: 1.5rem;
		font-size: 0.75rem;
	}
}