/* ==========================================================================
   Calidad con Criterio — dirección "Señalética"
   Cada serie es una línea de color, como las del piso de un hospital.
   Los colores vienen de theme.json; aquí solo se asigna --serie y se dibujan las líneas.
   ========================================================================== */

:root {
	--serie: var(--wp--preset--color--explicadores);
	--serie-texto: var(--wp--preset--color--superficie);
	--franja: var(--wp--custom--franja, 8px);
}

/* --- Color de serie: en <body> de un artículo (functions.php), en archivos de categoría
       (body_class nativo) y en cada tarjeta del listado (post_class nativo). --- */
.serie-caja-negra, .category-caja-negra { --serie: var(--wp--preset--color--caja-negra); --serie-texto: var(--wp--preset--color--superficie); }
.serie-explicadores, .category-explicadores { --serie: var(--wp--preset--color--explicadores); --serie-texto: var(--wp--preset--color--superficie); }
.serie-aviacion, .category-aviacion { --serie: var(--wp--preset--color--aviacion); --serie-texto: var(--wp--preset--color--superficie); }
/* La mostaza no aguanta texto blanco (contraste 2.4): va con tinta. */
.serie-normativa, .category-normativa { --serie: var(--wp--preset--color--normativa); --serie-texto: var(--wp--preset--color--tinta); }

/* --- Riel: las cuatro líneas finas bajo el encabezado y sobre el pie --- */
.ccc-riel {
	height: 16px;
	background: linear-gradient(
		to bottom,
		var(--wp--preset--color--caja-negra) 0 4px,
		var(--wp--preset--color--explicadores) 4px 8px,
		var(--wp--preset--color--aviacion) 8px 12px,
		var(--wp--preset--color--normativa) 12px 16px
	);
}

/* --- Líneas de piso de la portada (SVG del patrón lineas-de-piso) --- */
.ccc-lineas-piso svg { display: block; width: 100%; height: clamp(72px, 12vw, 128px); }

/* --- Menú: cada serie es una pastilla de su color --- */
.ccc-menu .wp-block-navigation-item__content { padding: 0.35em 0.8em; border-radius: 999px; text-decoration: none; }
.ccc-menu .ccc-nav-caja-negra > .wp-block-navigation-item__content { background: var(--wp--preset--color--caja-negra); color: var(--wp--preset--color--superficie); }
.ccc-menu .ccc-nav-explicadores > .wp-block-navigation-item__content { background: var(--wp--preset--color--explicadores); color: var(--wp--preset--color--superficie); }
.ccc-menu .ccc-nav-aviacion > .wp-block-navigation-item__content { background: var(--wp--preset--color--aviacion); color: var(--wp--preset--color--superficie); }
.ccc-menu .ccc-nav-normativa > .wp-block-navigation-item__content { background: var(--wp--preset--color--normativa); color: var(--wp--preset--color--tinta); }
.ccc-menu .wp-block-navigation-item__content:hover { filter: brightness(0.9); }

/* --- Tarjetas del listado: franja izquierda del color de su serie --- */
.ccc-tarjetas .wp-block-post {
	background: var(--wp--preset--color--superficie);
	border: 1px solid var(--wp--preset--color--linea);
	border-left: var(--franja) solid var(--serie);
	border-radius: 0 var(--wp--custom--radio) var(--wp--custom--radio) 0;
	padding: 1rem 1.1rem 1.25rem;
}
.ccc-tarjetas .wp-block-post-title a { text-decoration: none; color: inherit; }
.ccc-tarjetas .wp-block-post-title a:hover { text-decoration: underline; }

/* --- Etiqueta de serie: texto en el color de la serie (tarjetas) --- */
.ccc-etiqueta, .ccc-etiqueta a {
	color: var(--serie);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}
/* En normativa la mostaza sobre blanco no se lee como texto pequeño: va en tinta. */
.category-normativa .ccc-etiqueta, .category-normativa .ccc-etiqueta a,
.serie-normativa .ccc-etiqueta, .serie-normativa .ccc-etiqueta a { color: var(--wp--preset--color--tinta); }

/* --- Artículo: banda superior y "ruta" de señalética --- */
.ccc-banda { height: 10px; background: var(--serie); margin-block-start: 0 !important; }
.ccc-ruta a, .ccc-ruta .wp-block-post-terms__separator { text-decoration: none; }
.ccc-ruta.wp-block-post-terms a {
	display: inline-block;
	background: var(--serie);
	color: var(--serie-texto);
	padding: 0.3em 0.75em;
	border-radius: 3px;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.ccc-migas { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wp--preset--color--tinta-suave); }
.ccc-migas a { color: inherit; text-decoration: none; }

/* --- Estilo de bloque: subtítulo con barra de serie --- */
.wp-block-heading.is-style-senal { padding-left: 0.75rem; border-left: 4px solid var(--serie); }

/* --- Estilo de bloque: "Para aplicar el lunes" --- */
.wp-block-group.is-style-para-aplicar {
	background: var(--wp--preset--color--arena);
	border-top: 6px solid var(--wp--preset--color--aviacion);
	border-radius: var(--wp--custom--radio);
	padding: 1.1rem 1.4rem 1.25rem;
}
.wp-block-group.is-style-para-aplicar > :first-child {
	margin-top: 0;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--aviacion);
}

/* --- Estilo de bloque: aviso educativo --- */
.wp-block-group.is-style-aviso {
	border: 1px solid var(--wp--preset--color--linea);
	border-left: 4px solid var(--wp--preset--color--tinta-suave);
	padding: 0.9rem 1.1rem;
	font-size: 0.9rem;
	color: var(--wp--preset--color--tinta-suave);
}

/* --- Estilo de bloque: tarjeta con franja (CTA de serie, caja de autoría) --- */
.wp-block-group.is-style-tarjeta-serie {
	background: var(--wp--preset--color--superficie);
	border: 1px solid var(--wp--preset--color--linea);
	border-left: var(--franja) solid var(--serie);
	padding: 1.25rem 1.4rem;
}

/* --- Portada: títulos de sección con la franja de las cuatro series --- */
.ccc-seccion { font-size: var(--wp--preset--font-size--x-large); padding-top: 0.9rem; position: relative; }
.ccc-seccion::before {
	content: ""; position: absolute; top: 0; left: 0; width: 64px; height: 6px;
	background: linear-gradient(to right,
		var(--wp--preset--color--caja-negra) 0 25%, var(--wp--preset--color--explicadores) 25% 50%,
		var(--wp--preset--color--aviacion) 50% 75%, var(--wp--preset--color--normativa) 75% 100%);
}
.is-style-tarjeta-serie h3 a { color: inherit; text-decoration: none; }
.is-style-tarjeta-serie h3 a:hover { text-decoration: underline; }
.ccc-regla-num { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; color: var(--wp--preset--color--explicadores); margin-bottom: 0.25rem; }
.ccc-reglas p { margin-top: 0; }

/* --- Imágenes y video embebido: sin desbordar en móvil --- */
.wp-block-embed iframe { max-width: 100%; }

/* --- Movimiento reducido --- */
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}