/**
 * Estilos de la página "El pulso del mundial".
 *
 * Solo se carga cuando WordPress renderiza esta plantilla
 * (ver enqueue en template-el-pulso-del-mundial.php).
 *
 * Estiliza las clases que emite el plugin "budweiser-pulso-mundial"
 * (shortcode [pulso_pregunta_activa]).
 */

/* -------------------------------------------------------------------------
 * Override de ancho máximo
 *
 * El tema define globalmente `.max-width-container` con la variable
 * `--container-max-width` (que en el site principal de Budweiser vale
 * 1440px o el valor que tenga el global). En las páginas de la encuesta
 * queremos alinearnos con la maquetación de somosnexho, que usa 1240px.
 *
 * Como este CSS solo se carga en estas dos páginas (hostelero y
 * Chiringuito) y se enquena DESPUÉS de global.css, este override no
 * afecta al resto del site de Budweiser.
 * ------------------------------------------------------------------------- */
.max-width-container {
	max-width: 1240px;
	background: var(--primary-blue);
}

/* -------------------------------------------------------------------------
 * Contenedor principal de la pregunta
 * ------------------------------------------------------------------------- */
.pulso-pregunta {
	font-family: var(--font-roboto);
	color: var(--primary-blue);
	background: var(--color-white);
	padding: 36px 40px;
	box-sizing: border-box;
	height: 100%;
	display: flex;
	flex-direction: column;
	/* align-items: stretch (por defecto) → cada hijo ocupa todo el ancho y
	   gestiona su propia alineación: título centrado, enunciado y respuestas
	   a la izquierda, botón a la derecha. */
	align-items: stretch;
	justify-content: center;
}

/* Cuando hay VARIAS preguntas abiertas apiladas, separar cada una de la
   siguiente. El selector de hermano adyacente solo aplica de la segunda en
   adelante, así el caso de una sola pregunta no cambia. height:100% se
   neutraliza porque con varias ya no deben estirar a la altura del contenedor. */
.pulso-pregunta + .pulso-pregunta {
	margin-top: 24px;
}
.pulso-pregunta:has(+ .pulso-pregunta),
.pulso-pregunta + .pulso-pregunta {
	height: auto;
}

.pulso-pregunta__titulo {
	font-family: var(--font-secondary);
	font-size: clamp(24px, 5vw, 50px);
	font-weight: 700;
	line-height: 1.1;
	margin: 0 0 16px;
	text-transform: uppercase;
	color: var(--primary-blue);
	text-align: center;
}

.pulso-pregunta__fecha {
	color: var(--primary-red);
}

.pulso-pregunta__enunciado {
	font-family: var(--font-roboto);
	font-size: clamp(20px, 2vw, 22px);
	font-weight: 400;
	line-height: 1.4;
	margin: 0 0 24px;
	text-align: left;
}

@media (max-width: 600px) {
	.pulso-pregunta {
		padding: 28px 24px;
	}
}

/* -------------------------------------------------------------------------
 * Listado de respuestas (compartido por form y vistas resultado)
 * ------------------------------------------------------------------------- */
.pulso-respuestas {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	border: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pulso-respuesta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 18px;
	border: 2px solid rgba(10, 5, 65, 0.15);
	border-radius: 8px;
	background: var(--color-white);
	transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.pulso-respuesta__texto {
	font-size: var(--font-size-lg, 18px);
	font-weight: 500;
}

.pulso-respuesta__badge {
	font-size: var(--font-size-sm, 14px);
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--primary-blue);
	color: var(--color-white);
	text-transform: uppercase;
}

.pulso-respuesta__badge--correcta {
	background: #1f8a3b;
}

/* -------------------------------------------------------------------------
 * Form interactivo (estado active, sin votar)
 * Las opciones votables mantienen el MISMO estilo de caja que el estado
 * cerrado (.pulso-respuesta base): borde, fondo blanco y esquinas
 * redondeadas. Solo añadimos el radio a la izquierda y el cursor/hover.
 * ------------------------------------------------------------------------- */
.pulso-respuesta--seleccionable {
	cursor: pointer;
	justify-content: flex-start;
	gap: 12px;
}

.pulso-respuesta--seleccionable:hover,
.pulso-respuesta--seleccionable:focus-within {
	border-color: var(--primary-red);
}

.pulso-respuesta--seleccionable .pulso-respuesta__texto {
	font-weight: 500;
}

/* La opción cuyo radio está marcado se resalta como caja seleccionada. */
.pulso-respuesta--seleccionable:has(input[type="radio"]:checked) {
	border-color: var(--primary-blue);
	background: rgba(10, 5, 65, 0.04);
}

.pulso-respuesta--seleccionable input[type="radio"] {
	accent-color: var(--primary-red);
	width: 20px;
	height: 20px;
	margin: 0;
	flex: 0 0 auto;
}

/* -------------------------------------------------------------------------
 * Estado "ya votado" / cerrado / resuelto: respuesta del usuario y correcta
 * ------------------------------------------------------------------------- */
.pulso-respuesta--seleccionada {
	border-color: var(--primary-blue);
	background: rgba(10, 5, 65, 0.04);
}

.pulso-respuesta--correcta {
	border-color: #1f8a3b;
	background: rgba(31, 138, 59, 0.08);
}

/* -------------------------------------------------------------------------
 * Botón de envío
 * ------------------------------------------------------------------------- */
/* El formulario apila sus hijos a ancho completo y alinea el botón de envío
   a la derecha (las respuestas quedan a la izquierda, como en el cerrado). */
.pulso-form {
	display: flex;
	flex-direction: column;
}
.pulso-form .pulso-submit {
	align-self: flex-end;
}

.pulso-submit {
	font-family: var(--font-roboto);
	font-size: var(--font-size-lg, 18px);
	font-weight: 700;
	padding: 14px 32px;
	border: 0;
	border-radius: 8px;
	background: var(--primary-red);
	color: var(--color-white);
	cursor: pointer;
	transition: background-color 0.15s ease-in-out;
	text-transform: uppercase;
}

.pulso-submit:hover:not(:disabled),
.pulso-submit:focus-visible:not(:disabled) {
	background: var(--secondary-dark-red, #820014);
}

.pulso-submit:disabled {
	opacity: 0.6;
	cursor: progress;
}

.pulso-form--loading {
	opacity: 0.7;
	pointer-events: none;
}

/* -------------------------------------------------------------------------
 * Mensajes
 * ------------------------------------------------------------------------- */
.pulso-mensaje {
	font-size: var(--font-size-md, 16px);
	line-height: 1.5;
	margin: 16px 0 0;
}

.pulso-mensaje--exito,
.pulso-mensaje--acierto {
	color: #1f8a3b;
	font-weight: 700;
}

.pulso-mensaje--bloqueado,
.pulso-mensaje--info {
	color: rgba(10, 5, 65, 0.7);
}

.pulso-error {
	color: var(--primary-red);
	font-weight: 700;
	margin: 12px 0 0;
}

/* -------------------------------------------------------------------------
 * Historial de respuestas del hostelero
 * ------------------------------------------------------------------------- */
.pulso-historial {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 2px solid rgba(10, 5, 65, 0.1);
}

.pulso-historial__titulo {
	font-family: var(--font-secondary);
	font-size: clamp(18px, 2.4vw, 26px);
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--primary-blue);
	margin: 0 0 12px;
}

.pulso-historial__resumen {
	font-size: var(--font-size-md, 16px);
	color: rgba(10, 5, 65, 0.7);
	margin: 0 0 20px;
}

.pulso-historial__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pulso-historial__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 18px;
	background: var(--color-white);
	border: 1px solid rgba(10, 5, 65, 0.1);
	border-left-width: 4px;
	border-radius: 6px;
}

.pulso-historial__item--acerto    { border-left-color: #1f8a3b; }
.pulso-historial__item--fallo     { border-left-color: var(--primary-red); }
.pulso-historial__item--pendiente { border-left-color: #888; }

.pulso-historial__estado {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
	color: var(--color-white);
}

.pulso-historial__estado--acerto    { background: #1f8a3b; }
.pulso-historial__estado--fallo     { background: var(--primary-red); }
.pulso-historial__estado--pendiente { background: #888; }

.pulso-historial__cuerpo {
	flex: 1 1 auto;
	min-width: 0;
}

.pulso-historial__pregunta {
	font-weight: 600;
	color: var(--primary-blue);
	margin: 0 0 4px;
	font-size: var(--font-size-md, 16px);
}

.pulso-historial__detalle {
	font-size: var(--font-size-sm, 14px);
	color: rgba(10, 5, 65, 0.7);
	margin: 0;
	line-height: 1.5;
}

.pulso-historial__correcta {
	color: #1f8a3b;
}

/* =========================================================================
 * Componentes secundarios (shortcodes adicionales del wireframe)
 * ========================================================================= */

/* -------------------------------------------------------------------------
 * [pulso_marcador_global]
 * ------------------------------------------------------------------------- */
.pulso-marcador {
	background: var(--color-white);
	border: 1px solid rgba(10, 5, 65, 0.1);
	border-radius: 8px;
	padding: 24px;
	margin: 24px 0;
	text-align: center;
}
.pulso-marcador__titulo {
	font-family: var(--font-secondary);
	font-size: clamp(16px, 2vw, 22px);
	font-weight: 700;
	text-transform: uppercase;
	margin: 0 0 16px;
	color: var(--primary-blue);
}
.pulso-marcador__teams {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}
.pulso-marcador__team {
	display: flex;
	align-items: center;
	gap: 10px;
}
.pulso-marcador__team--hosteleros .pulso-marcador__score { background: var(--primary-red); }
.pulso-marcador__team--chiringuito .pulso-marcador__score { background: var(--primary-blue); }
.pulso-marcador__name {
	font-family: var(--font-secondary);
	font-weight: 700;
	font-size: clamp(14px, 1.6vw, 18px);
	color: var(--primary-blue);
}
.pulso-marcador__score {
	color: var(--color-white);
	font-weight: 700;
	font-size: clamp(28px, 4vw, 44px);
	padding: 6px 16px;
	border-radius: 6px;
	min-width: 50px;
	line-height: 1;
}
.pulso-marcador__vs {
	font-weight: 700;
	color: rgba(10, 5, 65, 0.5);
	font-size: 18px;
}
.pulso-marcador__meta {
	margin: 14px 0 0;
	font-size: var(--font-size-sm, 14px);
	color: rgba(10, 5, 65, 0.65);
}

/* -------------------------------------------------------------------------
 * [pulso_resultado_dia_anterior]
 * ------------------------------------------------------------------------- */
.pulso-resultado {
	background: var(--color-white);
	border: 1px solid rgba(10, 5, 65, 0.1);
	border-radius: 8px;
	padding: 24px;
	margin: 24px 0;
}
.pulso-resultado__titulo {
	font-family: var(--font-secondary);
	font-size: clamp(18px, 2.2vw, 24px);
	text-transform: uppercase;
	font-weight: 700;
	margin: 0 0 12px;
	color: var(--primary-blue);
}
.pulso-resultado__fecha {
	display: block;
	font-size: 14px;
	font-weight: 400;
	color: rgba(10, 5, 65, 0.6);
	text-transform: none;
	margin-top: 4px;
}
.pulso-resultado__punto {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 6px;
	font-weight: 700;
	margin: 0 0 12px;
}
.pulso-resultado__punto--hosteleros  { background: var(--primary-red); color: #fff; }
.pulso-resultado__punto--chiringuito { background: var(--primary-blue); color: #fff; }
.pulso-resultado__punto--ambos       { background: #1f8a3b; color: #fff; }
.pulso-resultado__punto--ninguno     { background: #eee; color: #555; }
.pulso-resultado__pregunta {
	font-size: var(--font-size-lg, 18px);
	margin: 0 0 16px;
}
.pulso-resultado__columnas {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin: 0 0 16px;
}
@media (max-width: 600px) {
	.pulso-resultado__columnas { grid-template-columns: 1fr; }
}
.pulso-resultado__col {
	background: #f6f7f7;
	padding: 12px 16px;
	border-radius: 6px;
}
.pulso-resultado__col-label {
	display: block;
	font-size: 12px;
	text-transform: uppercase;
	color: rgba(10, 5, 65, 0.65);
	margin-bottom: 4px;
}
.pulso-resultado__col-value {
	margin: 0;
	font-weight: 600;
	color: var(--primary-blue);
}
.pulso-resultado__correcta {
	font-size: var(--font-size-md, 16px);
	color: #1f8a3b;
	margin: 0;
}

/* -------------------------------------------------------------------------
 * [pulso_proximas_preguntas]
 * ------------------------------------------------------------------------- */
.pulso-proximas {
	background: var(--color-white);
	border: 1px solid rgba(10, 5, 65, 0.1);
	border-radius: 8px;
	padding: 24px;
	margin: 24px 0;
}
.pulso-proximas__titulo {
	font-family: var(--font-secondary);
	font-size: clamp(18px, 2.2vw, 24px);
	text-transform: uppercase;
	font-weight: 700;
	margin: 0 0 12px;
	color: var(--primary-blue);
}
.pulso-proximas__lista {
	list-style: none;
	margin: 0;
	padding: 0;
}
.pulso-proximas__item {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px solid rgba(10, 5, 65, 0.08);
}
.pulso-proximas__item:last-child { border-bottom: 0; }
.pulso-proximas__fecha {
	font-weight: 600;
	color: var(--primary-blue);
	text-transform: capitalize;
}
.pulso-proximas__detalle {
	color: rgba(10, 5, 65, 0.7);
	font-size: 14px;
}

/* -------------------------------------------------------------------------
 * [pulso_ranking_local]
 * ------------------------------------------------------------------------- */
.pulso-ranking-local {
	background: var(--color-white);
	border: 1px solid rgba(10, 5, 65, 0.1);
	border-radius: 8px;
	padding: 24px;
	margin: 24px 0;
}
.pulso-ranking-local__titulo {
	font-family: var(--font-secondary);
	font-size: clamp(18px, 2.2vw, 24px);
	text-transform: uppercase;
	font-weight: 700;
	margin: 0 0 4px;
	color: var(--primary-blue);
}
.pulso-ranking-local__subtitulo {
	font-size: 13px;
	color: rgba(10, 5, 65, 0.65);
	margin: 0 0 16px;
}
.pulso-ranking-local__lista {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}
.pulso-ranking-local__item {
	display: grid;
	grid-template-columns: 36px 1fr auto;
	gap: 12px;
	align-items: center;
	padding: 8px 0;
	border-bottom: 1px solid rgba(10, 5, 65, 0.06);
}
.pulso-ranking-local__item:last-child { border-bottom: 0; }
.pulso-ranking-local__pos {
	font-weight: 700;
	color: var(--primary-blue);
}
.pulso-ranking-local__nombre { font-weight: 500; }
.pulso-ranking-local__aciertos {
	font-weight: 700;
	color: var(--primary-red);
}
.pulso-ranking-local__yo {
	background: var(--primary-blue);
	color: var(--color-white);
	padding: 14px 18px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.pulso-ranking-local__yo-label {
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.5px;
	opacity: 0.8;
}
.pulso-ranking-local__yo-pos {
	font-size: 28px;
	font-weight: 700;
	background: var(--primary-red);
	padding: 4px 14px;
	border-radius: 6px;
	line-height: 1;
}
.pulso-ranking-local__yo-aciertos {
	font-weight: 600;
}

/* -------------------------------------------------------------------------
 * [pulso_partidos_anteriores]
 * ------------------------------------------------------------------------- */
.pulso-partidos {
	background: var(--color-white);
	border: 1px solid rgba(10, 5, 65, 0.1);
	border-radius: 8px;
	padding: 24px;
	margin: 24px 0;
}
.pulso-partidos__titulo {
	font-family: var(--font-secondary);
	font-size: clamp(18px, 2.2vw, 24px);
	text-transform: uppercase;
	font-weight: 700;
	margin: 0 0 4px;
	color: var(--primary-blue);
}
.pulso-partidos__subtitulo {
	font-size: 13px;
	color: rgba(10, 5, 65, 0.65);
	margin: 0 0 16px;
}
.pulso-partidos__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.pulso-partidos__item {
	background: #f6f7f7;
	border-radius: 6px;
	padding: 14px 18px;
}
.pulso-partidos__cabecera {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
	flex-wrap: wrap;
}
.pulso-partidos__fecha {
	font-size: 13px;
	color: rgba(10, 5, 65, 0.6);
}
.pulso-partidos__ganador {
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: 999px;
	color: var(--color-white);
}
.pulso-partidos__ganador--hosteleros  { background: var(--primary-red); }
.pulso-partidos__ganador--chiringuito { background: var(--primary-blue); }
.pulso-partidos__ganador--ambos       { background: #1f8a3b; }
.pulso-partidos__ganador--ninguno     { background: #888; }
.pulso-partidos__pregunta {
	font-weight: 600;
	color: var(--primary-blue);
	margin: 0 0 8px;
}
.pulso-partidos__correcta {
	font-size: 14px;
	color: #1f8a3b;
	margin: 0 0 8px;
}
.pulso-partidos__columnas {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
@media (max-width: 600px) {
	.pulso-partidos__columnas { grid-template-columns: 1fr; }
}
.pulso-partidos__col small {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	color: rgba(10, 5, 65, 0.6);
	margin-bottom: 2px;
}
.pulso-partidos__col p {
	margin: 0;
	font-weight: 600;
}

/* =========================================================================
 * Modal de aceptación de bases legales [pulso_modal_legal]
 * ========================================================================= */

/* Bloquea el scroll del body cuando el modal está abierto. */
body.pulso-modal-legal-open {
	overflow: hidden;
}

.pulso-modal-legal[hidden] {
	display: none;
}

.pulso-modal-legal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	/* Anclado arriba en vez de centrado verticalmente: dentro del iframe que
	   somosnexho expande a la altura total del contenido, el iframe NO tiene
	   scroll propio, así que un centrado vertical (align-items:center) dejaría
	   el modal a mitad de la página completa (varios miles de px → muy por
	   debajo de lo que el usuario ve al entrar). Como el modal aparece al
	   cargar, con el usuario en el top, alinearlo arriba lo deja siempre a la
	   vista. El padding-top da el aire superior. */
	align-items: flex-start;
	justify-content: center;
	padding: 32px 16px;
	box-sizing: border-box;
}

.pulso-modal-legal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(10, 5, 65, 0.45);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.pulso-modal-legal__dialog {
	position: relative;
	max-width: 560px;
	width: 100%;
	background: var(--color-white);
	border-radius: 16px;
	padding: 56px 48px 48px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
	font-family: var(--font-primary);
	color: var(--primary-blue);
}

@media (max-width: 600px) {
	.pulso-modal-legal__dialog {
		padding: 48px 24px 32px;
		border-radius: 12px;
	}
}

.pulso-modal-legal__title {
	font-family: var(--font-secondary);
	font-size: clamp(22px, 3vw, 32px);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 16px;
	color: var(--primary-blue);
}

.pulso-modal-legal__text {
	font-size: var(--font-size-md, 16px);
	line-height: 1.5;
	margin: 0 0 16px;
	color: var(--primary-blue);
}

.pulso-modal-legal__text--bold {
	font-weight: 700;
	margin-top: 8px;
}

.pulso-modal-legal__check {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 24px 0 28px;
	cursor: pointer;
	font-size: var(--font-size-md, 16px);
	line-height: 1.4;
}

.pulso-modal-legal__check input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.pulso-modal-legal__check-box {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border: 2px solid var(--primary-blue);
	border-radius: 4px;
	background: var(--color-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-white);
	transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.pulso-modal-legal__check-box svg {
	opacity: 0;
	transition: opacity 0.15s ease-in-out;
}

.pulso-modal-legal__check input[type="checkbox"]:checked + .pulso-modal-legal__check-box {
	background: var(--primary-blue);
}

.pulso-modal-legal__check input[type="checkbox"]:checked + .pulso-modal-legal__check-box svg {
	opacity: 1;
}

.pulso-modal-legal__check input[type="checkbox"]:focus-visible + .pulso-modal-legal__check-box {
	outline: 2px solid var(--primary-red);
	outline-offset: 2px;
}

.pulso-modal-legal__check-text a {
	color: var(--primary-blue);
	text-decoration: underline;
}

.pulso-modal-legal__check-text a:hover {
	color: var(--primary-red);
}

.pulso-modal-legal__button {
	display: block;
	width: 100%;
	background: var(--primary-red);
	color: var(--color-white);
	font-family: var(--font-primary);
	font-weight: 700;
	font-size: var(--font-size-lg, 18px);
	text-transform: uppercase;
	border: 0;
	border-radius: 8px;
	padding: 18px 24px;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out, opacity 0.15s ease-in-out;
	letter-spacing: 0.5px;
}

.pulso-modal-legal__button:hover:not(:disabled),
.pulso-modal-legal__button:focus-visible:not(:disabled) {
	background: var(--secondary-dark-red, #820014);
	outline: none;
}

.pulso-modal-legal__button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* -------------------------------------------------------------------------
 * Barra superior de la página del Chiringuito (sesión + cerrar sesión)
 * ------------------------------------------------------------------------- */
.pulso-chiringuito-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	background: var(--color-white);
	padding: 12px 20px;
	box-shadow: 0 4px 18px rgba(10, 5, 65, 0.08);
}

.pulso-chiringuito-header__user {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.pulso-chiringuito-header__user-label {
	font-family: var(--font-roboto);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: rgba(10, 5, 65, 0.55);
}

.pulso-chiringuito-header__user-name {
	font-family: var(--font-roboto);
	font-size: var(--font-size-md, 16px);
	font-weight: 700;
	color: var(--primary-blue);
}

.pulso-chiringuito-header__logout {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-roboto);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	text-decoration: none;
	color: var(--primary-red);
	background: transparent;
	border: 2px solid var(--primary-red);
	border-radius: 8px;
	padding: 8px 16px;
	transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.pulso-chiringuito-header__logout:hover,
.pulso-chiringuito-header__logout:focus-visible {
	background: var(--primary-red);
	color: var(--color-white);
	outline: none;
}

.pulso-chiringuito-header__logout-icon {
	flex: 0 0 auto;
}

@media (max-width: 600px) {
	.pulso-chiringuito-header {
		padding: 12px 16px;
	}
	.pulso-chiringuito-header__logout span {
		/* En móvil dejamos solo el icono para ahorrar espacio. */
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.pulso-chiringuito-header__logout {
		padding: 8px 12px;
	}
}