/**
 * Controles e indicadores base.
 *
 * Contiene los átomos de interfaz que aparecen en cualquier página y que por
 * tanto se cargan siempre: botones, insignia de emisión, redes sociales,
 * avisos, paginación y estados vacíos.
 *
 * @package ElEscorpion\Theme
 */

/* --- Botones ------------------------------------------------------------ */

.esc-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.8rem 1.5rem;
	border: 1px solid transparent;
	border-radius: var(--esc-radius-pill);
	background: var(--esc-surface-alt);
	color: var(--esc-text);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
	/* Altura mínima cómoda para el dedo en pantallas táctiles. */
	min-height: 44px;
	transition: background-color var(--esc-transition-fast), border-color var(--esc-transition-fast), transform var(--esc-transition-fast);
}

.esc-button:hover,
.esc-button:focus-visible {
	color: var(--esc-text);
	transform: translateY(-1px);
}

.esc-button:active {
	transform: translateY(0);
}

.esc-button--primary {
	background: var(--esc-primary);
	color: #fff;
}

.esc-button--primary:hover,
.esc-button--primary:focus-visible {
	background: var(--esc-primary-dark);
	color: #fff;
}

.esc-button--ghost {
	background: transparent;
	border-color: var(--esc-border);
	color: var(--esc-text);
}

.esc-button--ghost:hover,
.esc-button--ghost:focus-visible {
	border-color: var(--esc-primary);
	background: rgb(229 9 20 / 8%);
}

.esc-button--large {
	padding: 1rem 2rem;
	font-size: 1rem;
}

.esc-button--small {
	padding: 0.55rem 1.1rem;
	font-size: 0.8125rem;
	min-height: 38px;
}

/* --- Indicador de emisión ----------------------------------------------- */

.esc-live {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.3rem 0.75rem;
	border-radius: var(--esc-radius-pill);
	background: rgb(255 45 45 / 12%);
	color: var(--esc-live);
	font-size: 0.75rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	white-space: nowrap;
}

.esc-live__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

/* Solo late cuando la emisión está confirmada: nunca se simula el directo. */
.esc-live--online .esc-live__dot {
	animation: esc-pulse 1.8s ease-in-out infinite;
}

.esc-live--offline {
	background: rgb(165 165 165 / 12%);
	color: var(--esc-muted);
}

.esc-live--unknown {
	background: rgb(165 165 165 / 10%);
	color: var(--esc-muted);
}

@keyframes esc-pulse {

	0%,
	100% {
		opacity: 1;
		box-shadow: 0 0 0 0 rgb(255 45 45 / 45%);
	}

	50% {
		opacity: 0.65;
		box-shadow: 0 0 0 6px rgb(255 45 45 / 0%);
	}
}

/* --- Redes sociales ----------------------------------------------------- */

.esc-social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.esc-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--esc-border);
	border-radius: 50%;
	background: var(--esc-surface);
	color: var(--esc-text);
	text-decoration: none;
	transition: border-color var(--esc-transition-fast), background-color var(--esc-transition-fast), color var(--esc-transition-fast);
}

.esc-social__link:hover,
.esc-social__link:focus-visible {
	border-color: var(--esc-primary);
	background: var(--esc-primary);
	color: #fff;
}

.esc-social--small .esc-social__link {
	width: 32px;
	height: 32px;
}

.esc-social--large {
	justify-content: center;
	gap: 0.75rem;
}

.esc-social--large .esc-social__link {
	width: 54px;
	height: 54px;
}

/* --- Avisos ------------------------------------------------------------- */

.esc-notice {
	padding: 1rem 1.25rem;
	margin-block: var(--esc-space-md);
	border-left: 3px solid var(--esc-border);
	border-radius: var(--esc-radius-sm);
	background: var(--esc-surface);
}

.esc-notice--success {
	border-left-color: #2ecc71;
}

.esc-notice--error {
	border-left-color: var(--esc-primary);
}

.esc-block-placeholder {
	padding: 1rem;
	border: 1px dashed var(--esc-border);
	border-radius: var(--esc-radius-sm);
	color: var(--esc-muted);
	text-align: center;
}

/* --- Estado vacío ------------------------------------------------------- */

.esc-empty {
	padding-block: var(--esc-space-xl);
	text-align: center;
}

.esc-empty__title {
	margin-block-end: 0.5rem;
}

/* --- Migas de pan ------------------------------------------------------- */

.esc-breadcrumbs {
	padding-block: var(--esc-space-sm) 0;
	font-size: 0.875rem;
}

.esc-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--esc-muted);
}

.esc-breadcrumbs__item + .esc-breadcrumbs__item::before {
	content: "/";
	margin-inline-end: 0.4rem;
	color: var(--esc-border);
}

.esc-breadcrumbs__item {
	display: flex;
	align-items: center;
}

.esc-breadcrumbs a {
	color: var(--esc-muted);
	text-decoration: none;
}

.esc-breadcrumbs a:hover,
.esc-breadcrumbs a:focus-visible {
	color: var(--esc-primary);
}

/* --- Paginación --------------------------------------------------------- */

.navigation.pagination {
	margin-block-start: var(--esc-space-lg);
}

.navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
}

.navigation.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding-inline: 0.75rem;
	border: 1px solid var(--esc-border);
	border-radius: var(--esc-radius-sm);
	color: var(--esc-text);
	text-decoration: none;
	transition: border-color var(--esc-transition-fast), background-color var(--esc-transition-fast);
}

.navigation.pagination .page-numbers:hover,
.navigation.pagination .page-numbers:focus-visible {
	border-color: var(--esc-primary);
}

.navigation.pagination .page-numbers.current {
	background: var(--esc-primary);
	border-color: var(--esc-primary);
	color: #fff;
	font-weight: 700;
}

.navigation.pagination .page-numbers.dots {
	border-color: transparent;
}