/* C12 Partido en Vivo — Mundial 2026 (tema claro, acorde a canal12web.com) */

.c12pv-wrap {
	/* Paleta del portal */
	--c12pv-bg: #ffffff;
	--c12pv-surface: #f6f7f9;
	--c12pv-border: #e4e7ec;
	--c12pv-text: #15181d;
	--c12pv-muted: #6b7280;
	--c12pv-brand: #e10916;          /* rojo del "12" */
	--c12pv-live: #e10916;           /* "en directo" en rojo de marca */
	--c12pv-live-bg: rgba(225, 9, 22, .10);
	--c12pv-next: #2b6cb0;           /* "próximo" en azul sobrio */
	--c12pv-next-bg: rgba(43, 108, 176, .10);
	--c12pv-accent: #f4b400;         /* amarillo del NEWSLETTER (acento) */
	--c12pv-shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .06);
	--c12pv-radius: 14px;

	width: 100%;
	box-sizing: border-box;
}

.c12pv-wrap * {
	box-sizing: border-box;
}

.c12pv-card {
	background: var(--c12pv-bg);
	color: var(--c12pv-text);
	border: 1px solid var(--c12pv-border);
	border-top: 3px solid var(--c12pv-brand);
	border-radius: var(--c12pv-radius);
	box-shadow: var(--c12pv-shadow);
	padding: 16px 22px 20px;
	font-family: inherit;
	max-width: 760px;
	margin: 0 auto;
}

/* Encabezado */
.c12pv-header {
	text-align: center;
	color: var(--c12pv-muted);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .3px;
	text-transform: uppercase;
	margin-bottom: 12px;
}

.c12pv-header .c12pv-sep {
	margin: 0 5px;
	color: var(--c12pv-brand);
	opacity: .9;
}

/* Cuerpo: equipo | centro | equipo */
.c12pv-body {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
}

/* Equipos */
.c12pv-team {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.c12pv-flag {
	width: 72px;
	height: 54px;
	object-fit: contain;
	border-radius: 4px;
	border: 1px solid var(--c12pv-border);
	display: block;
	background: #fff;
}

.c12pv-name {
	font-size: 20px;
	font-weight: 800;
	line-height: 1.1;
	text-align: center;
	color: var(--c12pv-text);
	word-break: break-word;
}

/* Centro */
.c12pv-center {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	min-width: 150px;
}

.c12pv-status {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
}

.c12pv-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: .4px;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 999px;
	line-height: 1;
}

.c12pv-badge.c12pv-live {
	color: #fff;
	background: var(--c12pv-live);
}

.c12pv-badge.c12pv-next {
	color: var(--c12pv-next);
	background: var(--c12pv-next-bg);
	border: 1px solid var(--c12pv-next);
}

.c12pv-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
	display: inline-block;
	animation: c12pv-pulse 1.4s ease-in-out infinite;
}

@keyframes c12pv-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: .35; transform: scale(.7); }
}

.c12pv-min {
	color: var(--c12pv-muted);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .3px;
}

.c12pv-score {
	font-size: 44px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: 1px;
	white-space: nowrap;
	color: var(--c12pv-text);
}

.c12pv-score .c12pv-dash {
	margin: 0 10px;
	color: var(--c12pv-muted);
	font-weight: 700;
}

.c12pv-score.c12pv-vs {
	font-size: 30px;
	font-weight: 800;
	color: var(--c12pv-muted);
}

.c12pv-kickoff {
	color: var(--c12pv-text);
	font-size: 13px;
	font-weight: 700;
}

/* Aviso de admin */
.c12pv-aviso {
	background: #fff7e6;
	color: #8a5a00;
	border: 1px solid var(--c12pv-accent);
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 13px;
	margin-bottom: 12px;
}

/* Transición suave al refrescar */
.c12pv-wrap.is-updating .c12pv-card {
	opacity: .55;
	transition: opacity .2s ease;
}

/* =========================================================================
 * Variante COMPACTA (cabecera de Bricks). Uso: [c12_partido_vivo size="compact"]
 * Estructura propia en DOS líneas:
 *   .c12pv-meta     → ronda · estado · hora   (línea 1, centrada)
 *   .c12pv-matchup  → equipo · VS/marcador · equipo  (línea 2, a todo el ancho)
 * Al separar meta y enfrentamiento en contenedores distintos, las dos filas NO
 * compiten por el ancho, así los nombres largos NO se cortan (clave en móvil).
 * Sin caja exterior: transparente, sin borde/sombra/padding/margen.
 * ====================================================================== */
.c12pv-wrap.c12pv-compact {
	width: 100%;
	display: block;
}

.c12pv-compact .c12pv-card {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	max-width: none;
}

/* --- Línea 1: meta ---------------------------------------------------- */
.c12pv-compact .c12pv-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0;
	margin-bottom: 7px;
	line-height: 1.1;
}

/* Separadores "·": SIEMPRE en los spans de texto (ronda/hora/min), NUNCA
   dentro del badge azul. Así "Próximo/En directo" queda centrado en su
   pastilla y bien separado de la ronda. */
.c12pv-compact .c12pv-hround::after,
.c12pv-compact .c12pv-min::before,
.c12pv-compact .c12pv-kickoff::before {
	content: "·";
	margin: 0 8px;
	color: var(--c12pv-muted);
	opacity: .55;
	font-weight: 700;
}

.c12pv-compact .c12pv-hround {
	color: var(--c12pv-muted);
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .3px;
	text-transform: uppercase;
}

.c12pv-compact .c12pv-badge {
	font-size: 9px;
	padding: 3px 8px;
	gap: 5px;
}

.c12pv-compact .c12pv-dot {
	width: 6px;
	height: 6px;
}

.c12pv-compact .c12pv-min {
	color: var(--c12pv-muted);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .3px;
}

.c12pv-compact .c12pv-kickoff {
	color: var(--c12pv-text);
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
}

/* --- Línea 2: enfrentamiento ------------------------------------------ */
.c12pv-compact .c12pv-matchup {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 10px;
	width: 100%;
}

/* Bandera + nombre EN FILA: local bandera→nombre; visitante nombre→bandera. */
.c12pv-compact .c12pv-team {
	flex-direction: row;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.c12pv-compact .c12pv-home {
	justify-content: flex-start;
}

.c12pv-compact .c12pv-away {
	flex-direction: row-reverse;
	justify-content: flex-start;
}

.c12pv-compact .c12pv-flag {
	width: 34px;
	height: 26px;
	flex: 0 0 auto;
}

.c12pv-compact .c12pv-name {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.15;
	text-align: left;
}

.c12pv-compact .c12pv-away .c12pv-name {
	text-align: right;
}

.c12pv-compact .c12pv-score {
	font-size: 20px;
	letter-spacing: 0;
	white-space: nowrap;
}

.c12pv-compact .c12pv-score .c12pv-dash {
	margin: 0 5px;
}

.c12pv-compact .c12pv-score.c12pv-vs {
	font-size: 15px;
}

/* En pantallas chicas, todo un poco más compacto (los nombres ya envuelven). */
@media (max-width: 560px) {
	.c12pv-compact .c12pv-flag {
		width: 30px;
		height: 22px;
	}
	.c12pv-compact .c12pv-name {
		font-size: 12px;
	}
	.c12pv-compact .c12pv-score {
		font-size: 18px;
	}
}

/* =========================================================================
 * Varios partidos en simultáneo (lista). Caso poco frecuente (en eliminatorias
 * no hay simultáneos); se conserva como respaldo. Una columna: se apilan.
 * El título del Mundial se muestra UNA sola vez arriba; cada tarjeta su ronda.
 * ====================================================================== */
.c12pv-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	width: 100%;
}

.c12pv-list-title {
	grid-column: 1 / -1;
	text-align: center;
	color: var(--c12pv-muted);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: .3px;
	text-transform: uppercase;
	margin-bottom: 2px;
}

.c12pv-compact .c12pv-list {
	gap: 12px;
}

/* En compacta NO mostramos el título "Cobertura del Mundial 2026": ahorra alto. */
.c12pv-compact .c12pv-list-title {
	display: none;
}

/* Responsive (versión normal en móvil) */
@media (max-width: 560px) {
	.c12pv-card {
		padding: 14px 14px 16px;
		border-radius: 12px;
	}
	.c12pv-body {
		gap: 8px;
	}
	.c12pv-flag {
		width: 56px;
		height: 42px;
	}
	.c12pv-name {
		font-size: 15px;
	}
	.c12pv-center {
		min-width: 96px;
	}
	.c12pv-score {
		font-size: 32px;
	}
	.c12pv-score.c12pv-vs {
		font-size: 22px;
	}
	.c12pv-header {
		font-size: 12px;
	}
}