/**
 * Aviso de operador sin acuerdo y tarjeta de operador suelto.
 */

/* ============================================================
   Aviso de operador sin acuerdo
   ============================================================ */

.lz-aviso {
	position: fixed;
	inset: 0;
	/* La capa más alta del sitio: el aviso puede abrirse desde el
	   ranking, desde la barra móvil o desde el panel de navegación, de
	   modo que tiene que cubrir a todos ellos. Se suma 1 al token de
	   modal en lugar de empatar con el panel móvil, que también lo usa:
	   un empate dejaría el resultado en manos del orden del marcado. */
	z-index: calc(var(--lz-z-modal) + 1);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--lz-space-4);
}

.lz-aviso[hidden] { display: none; }

.lz-aviso__fondo {
	position: absolute;
	inset: 0;
	background: var(--lz-overlay);
	backdrop-filter: blur(2px);
}

.lz-aviso__caja {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 560px;
	max-height: calc(100vh - var(--lz-space-8));
	overflow-y: auto;
	overflow-x: hidden;
	padding: var(--lz-space-6);
	background: var(--lz-surface-raised);
	border: 1px solid var(--lz-line);
	border-radius: var(--lz-radius-lg);
	box-shadow: var(--lz-shadow-lg);
}

.lz-aviso__caja:focus,
.lz-aviso__caja:focus-visible { outline: none; }

@media (prefers-reduced-motion: no-preference) {
	.lz-aviso:not([hidden]) .lz-aviso__caja { animation: lz-entrar var(--lz-duration) var(--lz-ease); }
}

.lz-aviso__cerrar {
	position: absolute;
	top: var(--lz-space-3);
	inset-inline-end: var(--lz-space-3);
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--lz-tap, 44px);
	height: var(--lz-tap, 44px);
	color: var(--lz-muted);
	background: none;
	border: 0;
	border-radius: var(--lz-radius);
	cursor: pointer;
	transition: background-color var(--lz-duration) var(--lz-ease), color var(--lz-duration) var(--lz-ease);
}

.lz-aviso__cerrar:hover { color: var(--lz-heading); background: var(--lz-surface-sunken); }
.lz-aviso__cerrar:active { transform: scale(.96); }

/* Cabecera: una etiqueta que dice qué tipo de aviso es antes del título. */
.lz-aviso__titulo {
	font-size: var(--lz-text-xl);
	padding-inline-end: var(--lz-space-10);
	margin: 0 0 var(--lz-space-2);
}

.lz-aviso__titulo::before {
	content: "Sin acuerdo comercial";
	display: block;
	margin-bottom: var(--lz-space-2);
	font-family: var(--lz-font-body);
	font-size: var(--lz-text-xs);
	font-weight: 700;
	letter-spacing: var(--lz-tracking-wider);
	text-transform: uppercase;
	color: var(--lz-warning);
}

.lz-aviso__texto {
	color: var(--lz-muted);
	font-size: var(--lz-text-base);
	line-height: var(--lz-leading-normal);
	margin: 0 0 var(--lz-space-5);
}

.lz-aviso__lista {
	display: flex;
	flex-direction: column;
	gap: var(--lz-space-3);
	list-style: none;
	margin: 0 0 var(--lz-space-4);
	padding: 0;
}

.lz-aviso__pie {
	font-size: var(--lz-text-xs);
	color: var(--lz-muted);
	margin: 0;
	padding-top: var(--lz-space-4);
	border-top: 1px solid var(--lz-line);
}

/* Enlace dentro de texto: subrayado, no solo color (WCAG 1.4.1). */
.lz-aviso__pie a { text-decoration: underline; text-underline-offset: .15em; }

/* Móvil: hoja inferior. Se alcanza con el pulgar y no tapa la página
   entera con una caja flotante a media altura. */
@media (max-width: 575px) {
	.lz-aviso { align-items: flex-end; padding: 0; }

	.lz-aviso__caja {
		max-width: none;
		max-height: 88vh;
		padding: var(--lz-space-6) var(--lz-space-4) calc(var(--lz-space-5) + env(safe-area-inset-bottom));
		border-radius: var(--lz-radius-lg) var(--lz-radius-lg) 0 0;
		border-bottom: 0;
	}

	/* Asa visual de hoja. */
	.lz-aviso__caja::before {
		content: "";
		position: absolute;
		top: 8px;
		left: 50%;
		width: 40px;
		height: 4px;
		margin-left: -20px;
		border-radius: 2px;
		background: var(--lz-line);
	}

	.lz-aviso__titulo { font-size: var(--lz-text-lg); }
}

/* ============================================================
   Tarjeta de operador (alternativas y shortcode)
   ============================================================ */

.lz-opcard {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--lz-space-2) var(--lz-space-4);
	padding: var(--lz-space-4);
	background: var(--lz-surface);
	border: 1px solid var(--lz-line);
	border-radius: var(--lz-radius-md);
	transition: border-color var(--lz-duration) var(--lz-ease), box-shadow var(--lz-duration) var(--lz-ease);
}

/* Contexto del enlace de cobertura: la tarjeta entera lleva a la ficha. */
.lz-opcard.is-clicable { position: relative; }

.lz-opcard:hover { border-color: var(--lz-brand-text); box-shadow: var(--lz-shadow); }
.lz-opcard:focus-within { border-color: var(--lz-focus); }

/* Los logos están pensados para fondo claro, también en modo oscuro. */
.lz-opcard__logo {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: var(--lz-radius);
	background: var(--lz-white, #F4F4F4);
	overflow: hidden;
	font-family: var(--lz-font-display);
	font-size: var(--lz-text-sm);
	text-transform: uppercase;
	color: #1C1C1C;
}

.lz-opcard__logo img { width: 100%; height: 100%; object-fit: contain; }

.lz-opcard__cuerpo { min-width: 0; }

.lz-opcard__nombre {
	font-size: var(--lz-text-md);
	margin: 0;
}

.lz-opcard__nombre a { color: var(--lz-heading); transition: color var(--lz-duration) var(--lz-ease); }
.lz-opcard:hover .lz-opcard__nombre a { color: var(--lz-brand-text); }

.lz-opcard__bono {
	font-size: var(--lz-text-sm);
	color: var(--lz-muted);
	margin: 2px 0 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.lz-opcard__accion {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--lz-space-1);
	min-width: 9rem;
}

/* +18 junto al CTA (obligatorio): compacto, sin competir con el botón. */
.lz-opcard__accion .lz-cta-edad {
	margin-top: 0;
	gap: .3rem;
	font-size: .6875rem;
	font-weight: 600;
	color: var(--lz-muted);
}

.lz-opcard__accion .lz-cta-edad .lz-age { padding: 0 4px; font-size: .625rem; }

/* Aviso para el editor cuando un shortcode está mal escrito. Solo lo ve
   quien puede corregirlo. */
.lz-aviso-editor {
	padding: var(--lz-space-3) var(--lz-space-4);
	color: var(--lz-heading);
	background: var(--lz-accent-surface);
	border: 1px dashed var(--lz-accent-border);
	border-radius: var(--lz-radius-sm);
	font-size: var(--lz-text-sm);
}

@media (max-width: 575px) {
	/* El botón baja bajo el nombre: así el texto no queda a dos palabras por línea. */
	.lz-opcard { grid-template-columns: auto 1fr; }
	.lz-opcard__accion { grid-column: 1 / -1; min-width: 0; }
	.lz-opcard__accion .lz-btn { width: 100%; }
}