/**
 * componentes.css — las piezas que se repiten por toda la web.
 *
 * ══════════════════════════════════════════════════════════════════════════
 *  REGLAS DE LA CASA, y no son adorno:
 *
 *   · UN nivel de clase. `.svh-tarjeta__titulo`, nunca
 *     `.svh-tarjeta .contenido .titulo h3`. Si hay que subir la
 *     especificidad para ganar, es que algo está mal.
 *   · Ni un color, espacio, radio o sombra suelto: todo sale de un token.
 *   · CERO `!important` en los componentes. El orden lo decide el momento de
 *     encolado (vamos después de Woodmart), no la especificidad. Los únicos
 *     seis de todo el tema están en `base.css`, y los dos son de
 *     accesibilidad: el texto para lectores de pantalla y el respeto a
 *     `prefers-reduced-motion`. Los dos están comentados donde están.
 *   · El color NUNCA es el único indicador (8 % de daltonismo): siempre va
 *     acompañado de un icono, una palabra o una forma.
 * ══════════════════════════════════════════════════════════════════════════
 */


/* ═══════════════════════════════════════════════════════════════════
 * 1 · BOTONES
 * ═══════════════════════════════════════════════════════════════════ */

.svh-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--svh-espacio-2);
	padding: var(--svh-espacio-3) var(--svh-espacio-6);
	border: 1px solid transparent;
	border-radius: var(--svh-radio-md);
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--svh-transicion), border-color var(--svh-transicion);
}

.svh-boton--principal {
	background: var(--svh-marca);
	color: var(--svh-marca-texto);
}

.svh-boton--principal:hover { background: var(--svh-marca-hover); }

.svh-boton--secundario {
	background: transparent;
	color: var(--svh-texto);
	border-color: var(--svh-borde);
}

.svh-boton--secundario:hover { background: var(--svh-fondo-suave); }

/* ═══════════════════════════════════════════════════════════════════
 * 2 · LA TARJETA DE CREADOR — exactamente 7 elementos, ni uno más.
 *
 * Fuera: biografía, logos de marcas, contadores totales, botones sociales.
 * Lo que la separa de una lista de nombres es la tira de 3 miniaturas.
 * ═══════════════════════════════════════════════════════════════════ */

.svh-rejilla-creadores {
	display: grid;
	gap: var(--svh-espacio-6);
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.svh-tarjeta-creador {
	/* Nivel 3 de tokens: solo para lo que es de este componente. */
	--tarjeta-padding: var(--svh-espacio-4);
	--tarjeta-radio: var(--svh-radio-lg);

	display: flex;
	flex-direction: column;
	gap: var(--svh-espacio-3);
	padding: var(--tarjeta-padding);
	background: var(--svh-fondo-tarjeta);
	border: 1px solid var(--svh-borde-suave);
	border-radius: var(--tarjeta-radio);
	box-shadow: var(--svh-sombra-tarjeta);
	transition: box-shadow var(--svh-transicion);
}

.svh-tarjeta-creador:hover { box-shadow: var(--svh-sombra-md); }

/* 1 · Foto. `aspect-ratio` reserva el hueco antes de cargar: sin esto la
   página salta al llegar la imagen (eso es el CLS). */
.svh-tarjeta-creador__foto {
	aspect-ratio: 1;
	inline-size: 100%;
	object-fit: cover;
	border-radius: var(--svh-radio-md);
	background: var(--svh-fondo-hundido);
}

/* 2 · Nombre + @usuario */
.svh-tarjeta-creador__nombre {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
}

.svh-tarjeta-creador__handle {
	color: var(--svh-texto-suave);
	font-size: var(--svh-txt-micro);
}

/* 3 · Sector · Provincia */
.svh-tarjeta-creador__donde {
	color: var(--svh-texto-suave);
	font-size: var(--svh-txt-micro);
}

/* 4 · Iconos de las redes CONECTADAS. Las que no lo están no se pintan:
   una ficha llena de huecos grises comunica abandono. */
.svh-redes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--svh-espacio-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.svh-redes__icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 28px;
	block-size: 28px;      /* > 24 px: criterio 2.5.8 */
	border-radius: var(--svh-radio-full);
	background: var(--svh-fondo-hundido);
	color: var(--svh-texto-suave);
}

/* 5 y 6 · Los dos números: tamaño y calidad */
.svh-tarjeta-creador__cifras {
	display: flex;
	gap: var(--svh-espacio-4);
	margin-block-start: auto;
}

.svh-cifra__valor {
	display: block;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.svh-cifra__etiqueta {
	display: block;
	font-size: var(--svh-txt-micro);
	color: var(--svh-texto-suave);
}

/* 7 · La tira de 3 miniaturas */
.svh-tarjeta-creador__tira {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--svh-espacio-1);
}

.svh-tarjeta-creador__tira img {
	aspect-ratio: 9 / 16;
	inline-size: 100%;
	object-fit: cover;
	border-radius: var(--svh-radio-sm);
	background: var(--svh-fondo-hundido);
}

/* ═══════════════════════════════════════════════════════════════════
 * 3 · LA PARRILLA DE VÍDEOS — vertical 9:16, como el contenido real.
 *     4-5 columnas en escritorio, 2 en móvil. Cero carruseles.
 * ═══════════════════════════════════════════════════════════════════ */

.svh-parrilla {
	display: grid;
	gap: var(--svh-espacio-4);
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 700px)  { .svh-parrilla { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .svh-parrilla { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1400px) { .svh-parrilla { grid-template-columns: repeat(5, 1fr); } }

.svh-video {
	position: relative;
	display: block;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	border-radius: var(--svh-radio-md);
	background: var(--svh-fondo-hundido);
	text-decoration: none;
}

.svh-video__portada {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* Los dos datos y el icono de red van SOBRE la portada, con un degradado
   para que se lean encima de cualquier imagen. */
.svh-video__pie {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	display: flex;
	align-items: center;
	gap: var(--svh-espacio-2);
	padding: var(--svh-espacio-6) var(--svh-espacio-3) var(--svh-espacio-3);
	background: linear-gradient(to top, rgb(0 0 0 / 0.85), transparent);
	color: #FFFFFF;
	font-size: var(--svh-txt-micro);
	font-variant-numeric: tabular-nums;
}

.svh-video__red {
	margin-inline-start: auto;
	display: inline-flex;
	align-items: center;
}

.svh-video__titulo {
	margin-block-start: var(--svh-espacio-2);
	font-size: var(--svh-txt-micro);
	color: var(--svh-texto);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════
 * 4 · MÉTRICAS — barras horizontales.
 *
 * PROHIBIDOS: tartas, donuts, 3D, y usar el color como único indicador.
 * Cada barra lleva su número escrito al lado: quien no distinga el color
 * sigue teniendo el dato.
 * ═══════════════════════════════════════════════════════════════════ */

.svh-barra {
	display: grid;
	grid-template-columns: 8rem 1fr auto;
	align-items: center;
	gap: var(--svh-espacio-3);
	padding-block: var(--svh-espacio-2);
}

.svh-barra__etiqueta { font-size: var(--svh-txt-micro); color: var(--svh-texto-suave); }

.svh-barra__pista {
	block-size: 10px;
	border-radius: var(--svh-radio-full);
	background: var(--svh-fondo-hundido);
	overflow: hidden;
}

.svh-barra__valor {
	block-size: 100%;
	border-radius: var(--svh-radio-full);
	background: var(--svh-marca);
}

.svh-barra__cifra {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* El origen y la fecha del dato. Esto NO es letra pequeña decorativa:
   la trazabilidad es el producto. Los seguidores falsos son el 56,5 % de
   las quejas de las marcas. */
.svh-origen {
	font-size: var(--svh-txt-micro);
	color: var(--svh-texto-tenue);
}

/* ═══════════════════════════════════════════════════════════════════
 * 5 · SEMÁFORO — 5 estados, ni uno más.
 *     El color NUNCA va solo: siempre lleva su palabra al lado.
 * ═══════════════════════════════════════════════════════════════════ */

.svh-estado {
	display: inline-flex;
	align-items: center;
	gap: var(--svh-espacio-2);
	padding: var(--svh-espacio-1) var(--svh-espacio-3);
	border-radius: var(--svh-radio-full);
	font-size: var(--svh-txt-micro);
	font-weight: 600;
}

.svh-estado::before {
	content: "";
	inline-size: 8px;
	block-size: 8px;
	border-radius: var(--svh-radio-full);
	background: currentColor;
}

.svh-estado--ok       { color: var(--svh-estado-ok);       background: var(--svh-estado-ok-fondo); }
.svh-estado--curso    { color: var(--svh-estado-curso);    background: var(--svh-estado-curso-fondo); }
.svh-estado--avisa    { color: var(--svh-estado-avisa);    background: var(--svh-estado-avisa-fondo); }
.svh-estado--error    { color: var(--svh-estado-error);    background: var(--svh-estado-error-fondo); }
.svh-estado--inactivo { color: var(--svh-estado-inactivo); background: var(--svh-fondo-hundido); }

/* ═══════════════════════════════════════════════════════════════════
 * 6 · LA FICHA DEL CREADOR — es una página de PRODUCTO.
 *
 * 1 de cada 3 visitas empieza aquí, sin pasar por la portada, y rebota el
 * 61 %. Así que la primera pantalla tiene que bastarse sola.
 * ═══════════════════════════════════════════════════════════════════ */

.svh-ficha {
	max-inline-size: 1180px;
	margin-inline: auto;
	padding: var(--svh-espacio-6) var(--svh-espacio-4) var(--svh-espacio-24);
}

.svh-ficha__cabecera {
	display: grid;
	gap: var(--svh-espacio-6);
	align-items: start;
	grid-template-columns: 1fr;
}

@media (min-width: 800px) {
	.svh-ficha__cabecera { grid-template-columns: 180px 1fr auto; }
}

.svh-ficha__foto {
	aspect-ratio: 1;
	inline-size: 100%;
	max-inline-size: 180px;
	object-fit: cover;
	border-radius: var(--svh-radio-lg);
	background: var(--svh-fondo-hundido);
}

.svh-ficha__linea {
	margin: var(--svh-espacio-2) 0 0;
	color: var(--svh-texto-suave);
}

/* El número grande de alcance, y el segundo de calidad. Solo dos. */
.svh-ficha__numeros {
	display: flex;
	flex-wrap: wrap;
	gap: var(--svh-espacio-8);
	margin-block-start: var(--svh-espacio-4);
}

.svh-numero-grande {
	font-size: var(--svh-txt-numero);
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* La etiqueta de sector, clicable */
.svh-etiqueta {
	display: inline-block;
	padding: var(--svh-espacio-1) var(--svh-espacio-3);
	border-radius: var(--svh-radio-full);
	background: var(--svh-marca-suave);
	color: var(--svh-marca);
	font-size: var(--svh-txt-micro);
	font-weight: 600;
	text-decoration: none;
}

/* ── La barra fija de móvil ────────────────────────────────────────
   «Contactar» desde el primer píxel. Solo el 45,2 % de las sesiones
   móviles hacen scroll: si el botón está abajo del todo, no existe. */
.svh-barra-movil {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 40;
	display: flex;
	gap: var(--svh-espacio-3);
	padding: var(--svh-espacio-3);
	padding-block-end: calc(var(--svh-espacio-3) + env(safe-area-inset-bottom));
	background: var(--svh-fondo-tarjeta);
	border-block-start: 1px solid var(--svh-borde-suave);
	box-shadow: var(--svh-sombra-flotante);
}

.svh-barra-movil .svh-boton { flex: 1; }

@media (min-width: 800px) { .svh-barra-movil { display: none; } }

/* ═══════════════════════════════════════════════════════════════════
 * 7 · PESTAÑAS DE REDES — «Todo» primero, mezclado por fecha.
 * ═══════════════════════════════════════════════════════════════════ */

.svh-pestanas {
	display: flex;
	gap: var(--svh-espacio-2);
	overflow-x: auto;
	padding-block: var(--svh-espacio-3);
	border-block-end: 1px solid var(--svh-borde-suave);
	scrollbar-width: thin;
}

.svh-pestana {
	flex: none;
	padding: var(--svh-espacio-2) var(--svh-espacio-4);
	border: 1px solid var(--svh-borde-suave);
	border-radius: var(--svh-radio-full);
	background: transparent;
	color: var(--svh-texto-suave);
	font: inherit;
	font-size: var(--svh-txt-micro);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

/* El estado activo NO se marca solo con color: también con borde y peso. */
.svh-pestana[aria-current="page"] {
	background: var(--svh-marca);
	border-color: var(--svh-marca);
	color: var(--svh-marca-texto);
}

/* ═══════════════════════════════════════════════════════════════════
 * 8 · ESTADOS VACÍOS — tres distintos, no uno.
 *
 * Un estado vacío bien hecho convierte un callejón sin salida en un clic.
 * Nunca una rejilla de cuadros grises.
 * ═══════════════════════════════════════════════════════════════════ */

.svh-vacio {
	padding: var(--svh-espacio-12) var(--svh-espacio-6);
	text-align: center;
	border: 1px dashed var(--svh-borde);
	border-radius: var(--svh-radio-lg);
	background: var(--svh-fondo-suave);
}

.svh-vacio__titulo { margin: 0 0 var(--svh-espacio-2); font-size: 1.125rem; font-weight: 700; }
.svh-vacio__texto  { margin: 0 0 var(--svh-espacio-6); color: var(--svh-texto-suave); }

/* ═══════════════════════════════════════════════════════════════════
 * 9 · ESQUELETO ANTI-SALTO — para lo que monta React después.
 *
 * El truco: ocupa EXACTAMENTE la altura que ocupará el contenido real.
 * Sin esto la página da un salto al montar, y eso es CLS.
 * ═══════════════════════════════════════════════════════════════════ */

.svh-esqueleto {
	border-radius: var(--svh-radio-md);
	background: linear-gradient(90deg,
		var(--svh-fondo-hundido) 25%,
		var(--svh-fondo-suave) 50%,
		var(--svh-fondo-hundido) 75%);
	background-size: 200% 100%;
	animation: svh-brillo 1.4s ease-in-out infinite;
}

@keyframes svh-brillo {
	from { background-position: 200% 0; }
	to   { background-position: -200% 0; }
}

/* ═══════════════════════════════════════════════════════════════════
 * 10 · EL PANEL DEL CREADOR
 *
 * Barra lateral a la izquierda en escritorio; arriba y plegada en móvil.
 * Máximo 7 entradas: más de eso y nadie las lee.
 * ═══════════════════════════════════════════════════════════════════ */

.svh-panel {
	display: grid;
	gap: var(--svh-espacio-8);
	max-inline-size: 1180px;
	margin-inline: auto;
	padding: var(--svh-espacio-6) var(--svh-espacio-4) var(--svh-espacio-16);
	grid-template-columns: 1fr;
}

@media (min-width: 860px) {
	.svh-panel { grid-template-columns: 220px 1fr; }
}

.svh-panel__quien {
	margin: 0 0 var(--svh-espacio-4);
	display: flex;
	flex-direction: column;
	gap: var(--svh-espacio-1);
}

.svh-panel__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--svh-espacio-1);
}

@media (min-width: 860px) {
	.svh-panel__menu { flex-direction: column; }
}

.svh-panel__menu a {
	display: block;
	padding: var(--svh-espacio-2) var(--svh-espacio-3);
	border-radius: var(--svh-radio-md);
	color: var(--svh-texto-suave);
	text-decoration: none;
	font-weight: 600;
	font-size: var(--svh-txt-micro);
}

.svh-panel__menu a:hover { background: var(--svh-fondo-suave); }

/* El activo NO se marca solo con color: también con fondo y peso. */
.svh-panel__menu a[aria-current="page"] {
	background: var(--svh-marca-suave);
	color: var(--svh-marca);
}

.svh-panel__caja {
	padding: var(--svh-espacio-6);
	background: var(--svh-fondo-tarjeta);
	border: 1px solid var(--svh-borde-suave);
	border-radius: var(--svh-radio-lg);
	margin-block-end: var(--svh-espacio-6);
}

.svh-panel__cifras {
	display: grid;
	gap: var(--svh-espacio-4);
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.svh-panel__cifras .svh-panel__caja {
	display: flex;
	flex-direction: column;
	gap: var(--svh-espacio-1);
	margin: 0;
}

.svh-panel__redes {
	display: grid;
	gap: var(--svh-espacio-4);
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.svh-panel__redes .svh-panel__caja { margin: 0; }

/* La checklist que se marca sola */
.svh-pasos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--svh-espacio-2);
}

.svh-pasos li {
	display: flex;
	align-items: center;
	gap: var(--svh-espacio-2);
}

.svh-pasos--hecho { color: var(--svh-texto-tenue); }
.svh-pasos--hecho span:first-child { color: var(--svh-estado-ok); }

/* ═══════════════════════════════════════════════════════════════════
 * 11 · PRECIOS
 * ═══════════════════════════════════════════════════════════════════ */

.svh-precios {
	display: grid;
	gap: var(--svh-espacio-6);
	margin-block-start: var(--svh-espacio-12);
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	align-items: start;
}

.svh-precios__plan {
	padding: var(--svh-espacio-8);
	background: var(--svh-fondo-tarjeta);
	border: 1px solid var(--svh-borde-suave);
	border-radius: var(--svh-radio-lg);
	text-align: center;
}

/* El del medio, marcado. Y no solo con color: también con borde y con la
   etiqueta «Más popular», para quien no distinga el matiz. */
.svh-precios__plan--destacado {
	border-color: var(--svh-marca);
	border-width: 2px;
	box-shadow: var(--svh-sombra-md);
}

.svh-tabla {
	inline-size: 100%;
	border-collapse: collapse;
	margin-block-start: var(--svh-espacio-6);
}

.svh-tabla th,
.svh-tabla td {
	padding: var(--svh-espacio-3);
	text-align: start;
	border-block-end: 1px solid var(--svh-borde-suave);
	font-size: var(--svh-txt-micro);
}

.svh-tabla th { font-weight: 700; }