/**
 * 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: rgba(15, 42, 74, .55);
	backdrop-filter: blur(2px);
}

.lz-aviso__caja {
	position: relative;
	width: 100%;
	max-width: 520px;
	max-height: calc(100vh - var(--lz-space-8));
	overflow-y: auto;
	/* Explícito: overflow-y: auto habilita también el eje
	   horizontal cuando el contenido no cabe. */
	overflow-x: hidden;
	padding: var(--lz-space-6);
	/* Nivel elevado: modal: flota sobre el resto. */
	background: var(--lz-surface-raised);
	border: 1px solid var(--lz-line);
	border-radius: var(--lz-radius-md);
	box-shadow: 0 20px 50px rgba(15, 42, 74, .28);
}

.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: 40px;
	height: 40px;
	color: var(--lz-muted);
	background: none;
	border: 0;
	border-radius: var(--lz-radius-sm);
	cursor: pointer;
}

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

.lz-aviso__titulo {
	font-size: var(--lz-text-lg);
	/* Deja sitio al botón de cerrar. */
	padding-inline-end: var(--lz-space-7);
	margin-bottom: var(--lz-space-3);
}

.lz-aviso__texto {
	color: var(--lz-muted);
	font-size: var(--lz-text-base);
	margin-bottom: 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-5);
	padding: 0;
}

.lz-aviso__pie {
	font-size: var(--lz-text-xs);
	color: var(--lz-faint);
	margin: 0;
}

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

.lz-opcard {
	display: flex;
	align-items: center;
	gap: var(--lz-space-3);
	padding: var(--lz-space-3);
	background: var(--lz-surface);
	border: 1px solid var(--lz-line);
	border-radius: var(--lz-radius-sm);
}

/* Dentro del aviso, la alternativa destaca sobre el fondo de la caja. */
.lz-aviso__lista .lz-opcard {
	background: var(--lz-surface-sunken);
	transition: border-color var(--lz-duration) var(--lz-ease);
}

.lz-aviso__lista .lz-opcard:hover { border-color: var(--lz-accent); }

/* Contexto del enlace de cobertura: la tarjeta se ilumina entera al
   apuntar, así que pulsarla en cualquier punto debe llevar a la ficha. */
.lz-opcard.is-clicable { position: relative; }

.lz-opcard:hover .lz-opcard__nombre a { color: var(--lz-accent); }

.lz-opcard__nombre a { transition: color var(--lz-duration) var(--lz-ease); }

.lz-opcard__cuerpo {
	flex: 1 1 auto;
	min-width: 0;
}

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

.lz-opcard__bono {
	font-size: var(--lz-text-xs);
	color: var(--lz-muted);
	margin: 2px 0 0;
}

.lz-opcard__accion { flex-shrink: 0; }

/* 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) {
	.lz-aviso__caja { padding: var(--lz-space-5) var(--lz-space-4); }

	/* En pantallas estrechas el botón bajo el nombre evita que el
	   texto quede reducido a dos palabras por línea. */
	.lz-opcard {
		flex-wrap: wrap;
	}

	.lz-opcard__accion {
		flex-basis: 100%;
	}

	.lz-opcard__accion .lz-btn { width: 100%; }
}