/* ============================================================
   Alertas por Barrio y Zona
   ============================================================ */

.nl-alertas {
	background: #fff;
	border: 1.5px solid #e0d9eb;
	border-radius: 12px;
	border-top: 4px solid var(--leon-purpura);
	box-shadow: 0 2px 16px rgba(91, 42, 134, .1);
	width: 100%;
	overflow: visible;
}

/* Sidebar: más compacto */
.widget .nl-alertas,
.wp-block-widget-area .nl-alertas {
	box-shadow: none;
}

.widget .nl-alertas .nl-alertas__cabecera,
.wp-block-widget-area .nl-alertas .nl-alertas__cabecera {
	padding: var(--esp-4) var(--esp-4) var(--esp-3);
}

.widget .nl-alertas .nl-alertas__form,
.wp-block-widget-area .nl-alertas .nl-alertas__form {
	padding: var(--esp-4) var(--esp-4) var(--esp-4);
}

.widget .nl-alertas .nl-alertas__titulo,
.wp-block-widget-area .nl-alertas .nl-alertas__titulo {
	font-size: var(--texto-base);
}

.widget .nl-alertas .nl-alertas__desc,
.wp-block-widget-area .nl-alertas .nl-alertas__desc {
	font-size: var(--texto-xs);
}

/* ---------- Cabecera ---------- */
.nl-alertas__cabecera {
	padding: var(--esp-6) var(--esp-8) var(--esp-4);
	border-bottom: 1px solid #f0eaf8;
}

.nl-alertas__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--esp-1);
	background: #f3edf9;
	color: var(--leon-purpura);
	font-family: var(--fuente-ui);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	padding: 3px 10px;
	border-radius: 100px;
	margin-bottom: var(--esp-3);
}

.nl-alertas__titulo {
	font-family: var(--fuente-display);
	font-size: var(--texto-xl);
	font-weight: 800;
	color: var(--tinta);
	margin: 0 0 var(--esp-1);
	line-height: 1.2;
	text-transform: none;
	letter-spacing: normal;
}

.nl-alertas__desc {
	font-family: var(--fuente-ui);
	font-size: var(--texto-sm);
	color: var(--gris);
	margin: 0;
	line-height: 1.5;
}

/* ---------- Formulario ---------- */
.nl-alertas__form {
	padding: var(--esp-4) var(--esp-6) var(--esp-6);
	display: flex;
	flex-direction: column;
	gap: var(--esp-4);
}

.nl-alertas__campo {
	display: flex;
	flex-direction: column;
	gap: var(--esp-2);
}

.nl-alertas__label {
	font-family: var(--fuente-ui);
	font-size: var(--texto-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--gris);
}

/* ---------- Dropdown custom ---------- */
.nl-alertas__dropdown {
	position: relative;
}

.nl-alertas__dropdown-btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--esp-2);
	padding: 11px var(--esp-4);
	font-family: var(--fuente-ui);
	font-size: var(--texto-base);
	color: var(--tinta);
	background: #faf8fd;
	border: 1.5px solid #ddd6e8;
	border-radius: 8px;
	cursor: pointer;
	text-align: left;
	transition: border-color var(--trans-r), box-shadow var(--trans-r);
}

.nl-alertas__dropdown-btn:hover,
.nl-alertas__dropdown-btn[aria-expanded="true"] {
	border-color: var(--leon-purpura);
	background: #fff;
}

.nl-alertas__dropdown-btn[aria-expanded="true"] {
	box-shadow: 0 0 0 3px rgba(91, 42, 134, .12);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.nl-alertas__chevron {
	flex-shrink: 0;
	color: var(--gris);
	transition: transform var(--trans-r);
}

.nl-alertas__dropdown-btn[aria-expanded="true"] .nl-alertas__chevron {
	transform: rotate(180deg);
}

.nl-alertas__dropdown-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #fff;
	border: 1.5px solid var(--leon-purpura);
	border-top: none;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	box-shadow: 0 8px 20px rgba(91, 42, 134, .15);
	max-height: 220px;
	overflow-y: auto;
	z-index: 100;
}

.nl-alertas__opcion {
	display: flex;
	align-items: center;
	gap: var(--esp-3);
	padding: 10px var(--esp-4);
	cursor: pointer;
	font-family: var(--fuente-ui);
	font-size: var(--texto-sm);
	color: var(--tinta);
	transition: background var(--trans-r);
	border-bottom: 1px solid #f5f0fa;
}

.nl-alertas__opcion:last-child { border-bottom: none; }

.nl-alertas__opcion:hover { background: #f8f4fc; }

.nl-alertas__opcion input[type="checkbox"] {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	accent-color: var(--leon-purpura);
	cursor: pointer;
}

.nl-alertas__opcion:has(input:checked) {
	background: #f3edf9;
	color: var(--leon-purpura);
	font-weight: 600;
}

/* ---------- Input email ---------- */
.nl-alertas__input {
	width: 100%;
	padding: 11px var(--esp-4);
	font-family: var(--fuente-ui);
	font-size: var(--texto-base);
	border: 1.5px solid #ddd6e8;
	border-radius: 8px;
	background: #faf8fd;
	color: var(--tinta);
	transition: border-color var(--trans-r), box-shadow var(--trans-r);
	box-sizing: border-box;
}

.nl-alertas__input::placeholder { color: #b5aec5; }

.nl-alertas__input:focus {
	outline: none;
	border-color: var(--leon-purpura);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(91, 42, 134, .12);
}

/* ---------- RGPD ---------- */
.nl-alertas__rgpd {
	font-size: 11px;
	color: #9c97a5;
	margin: 0;
	line-height: 1.6;
}

/* ---------- Botón ---------- */
/* Especificidad alta para sobrescribir estilos de botón de Blocksy */
.nl-alertas .nl-alertas__btn,
.nl-popup__card .nl-alertas__btn {
	display: inline-block;
	width: auto;
	background: var(--leon-purpura);
	color: #fff;
	font-family: var(--fuente-ui);
	font-weight: 700;
	font-size: var(--texto-sm);
	letter-spacing: .03em;
	padding: 11px 32px;
	border: 2px solid var(--leon-purpura);
	border-radius: 100px;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--trans-r), border-color var(--trans-r), transform var(--trans-r), box-shadow var(--trans-r);
	align-self: flex-start;
}

.nl-alertas .nl-alertas__btn:hover,
.nl-popup__card .nl-alertas__btn:hover {
	background: var(--leon-purpura-osc);
	border-color: var(--leon-purpura-osc);
	box-shadow: 0 4px 14px rgba(91, 42, 134, .35);
	transform: translateY(-1px);
	color: #fff;
}

.nl-alertas .nl-alertas__btn:active,
.nl-popup__card .nl-alertas__btn:active { transform: none; box-shadow: none; }

.nl-alertas .nl-alertas__btn:disabled,
.nl-popup__card .nl-alertas__btn:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- Feedback ---------- */
.nl-alertas__feedback {
	padding: var(--esp-3) var(--esp-4);
	border-radius: 6px;
	font-family: var(--fuente-ui);
	font-size: var(--texto-sm);
	font-weight: 600;
}

.nl-alertas__feedback--ok  { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.nl-alertas__feedback--error { background: #fff1f2; color: #9f1239; border: 1px solid #fecdd3; }

/* Aviso cuando no hay zonas configuradas */
.nl-alertas-aviso {
	font-family: var(--fuente-ui);
	font-size: var(--texto-sm);
	color: var(--gris);
	padding: var(--esp-4);
	border: 1px dashed var(--linea);
	border-radius: 8px;
}

/* ============================================================
   Popup — trigger compacto
   ============================================================ */

.nl-popup-trigger {
	display: flex;
	align-items: center;
	gap: var(--esp-4);
	background: linear-gradient(135deg, var(--leon-purpura) 0%, #7b4db5 100%);
	border-radius: 12px;
	padding: var(--esp-4) var(--esp-6);
	color: #fff;
	width: 100%;
	box-sizing: border-box;
}

.nl-popup-trigger__visual {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	background: rgba(255,255,255,.15);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nl-popup-trigger__texto {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.nl-popup-trigger__titulo {
	font-family: var(--fuente-display);
	font-size: var(--texto-base);
	font-weight: 800;
	line-height: 1.2;
	color: #fff;
}

.nl-popup-trigger__sub {
	font-family: var(--fuente-ui);
	font-size: var(--texto-xs);
	color: rgba(255,255,255,.75);
	line-height: 1.4;
}

.nl-popup-trigger__btn {
	flex-shrink: 0;
	background: #fff;
	color: var(--leon-purpura);
	font-family: var(--fuente-ui);
	font-weight: 700;
	font-size: var(--texto-xs);
	letter-spacing: .03em;
	padding: 9px 20px;
	border: none;
	border-radius: 100px;
	cursor: pointer;
	transition: background var(--trans-r), transform var(--trans-r), box-shadow var(--trans-r);
	white-space: nowrap;
}

.nl-popup-trigger__btn:hover {
	background: #f0e6ff;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0,0,0,.2);
}

@media (max-width: 520px) {
	.nl-popup-trigger {
		flex-wrap: wrap;
		padding: var(--esp-4);
	}
	.nl-popup-trigger__btn { width: 100%; text-align: center; padding: 10px; }
}

/* ============================================================
   Popup — modal
   ============================================================ */

.nl-popup {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--esp-4);
	box-sizing: border-box;
}

.nl-popup[hidden] { display: none; }

.nl-popup__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(22, 19, 26, .6);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	cursor: pointer;
}

.nl-popup__card {
	position: relative;
	background: #fff;
	border-radius: 16px;
	border-top: 5px solid var(--leon-purpura);
	box-shadow: 0 24px 64px rgba(22, 19, 26, .3);
	width: 100%;
	max-width: 440px;
	max-height: 90vh;
	overflow-y: auto;
	animation: nl-popup-in .2s ease;
}

@keyframes nl-popup-in {
	from { opacity: 0; transform: scale(.95) translateY(8px); }
	to   { opacity: 1; transform: scale(1)  translateY(0); }
}

.nl-popup__cerrar {
	position: absolute;
	top: var(--esp-4);
	right: var(--esp-4);
	width: 32px;
	height: 32px;
	background: #f3edf9;
	border: none;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--leon-purpura);
	transition: background var(--trans-r);
	z-index: 1;
}

.nl-popup__cerrar:hover { background: #e6d8f5; }

.nl-popup__cabecera {
	padding: var(--esp-6) var(--esp-6) var(--esp-4);
	text-align: center;
	border-bottom: 1px solid #f0eaf8;
}

.nl-popup__icono {
	width: 56px;
	height: 56px;
	background: linear-gradient(135deg, var(--leon-purpura) 0%, #9b6fcf 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	margin: 0 auto var(--esp-4);
}

.nl-popup__titulo {
	font-family: var(--fuente-display);
	font-size: var(--texto-2xl);
	font-weight: 800;
	color: var(--tinta);
	margin: 0 0 var(--esp-2);
	line-height: 1.15;
	text-transform: none;
	letter-spacing: normal;
}

.nl-popup__desc {
	font-family: var(--fuente-ui);
	font-size: var(--texto-sm);
	color: var(--gris);
	margin: 0;
	line-height: 1.55;
}

/* El formulario dentro del modal reutiliza .nl-alertas__form */
.nl-popup__card .nl-alertas__form {
	padding: var(--esp-6);
}

/* Dark mode popup */
.nl-dark-mode .nl-popup__card {
	background: #1e1728;
	border-color: var(--leon-purpura);
}

.nl-dark-mode .nl-popup__cabecera { border-color: #2d2040; }
.nl-dark-mode .nl-popup__titulo { color: #f0eaf9; }
.nl-dark-mode .nl-popup__cerrar { background: rgba(91,42,134,.3); color: #c9a8f0; }
.nl-dark-mode .nl-popup__backdrop { background: rgba(10, 7, 15, .75); }

/* ---------- Dark mode ---------- */
.nl-dark-mode .nl-alertas {
	background: #1e1728;
	border-color: #3a2d50;
}

.nl-dark-mode .nl-alertas__cabecera { border-color: #2d2040; }
.nl-dark-mode .nl-alertas__titulo { color: #f0eaf9; }
.nl-dark-mode .nl-alertas__badge { background: rgba(91, 42, 134, .4); }

.nl-dark-mode .nl-alertas__dropdown-btn,
.nl-dark-mode .nl-alertas__input {
	background: #2a1f38;
	border-color: #3d2f52;
	color: #f0eaf9;
}

.nl-dark-mode .nl-alertas__dropdown-panel {
	background: #1e1728;
	border-color: var(--leon-purpura);
}

.nl-dark-mode .nl-alertas__opcion { color: #d4c9e8; border-color: #2d2040; }
.nl-dark-mode .nl-alertas__opcion:hover { background: #2d2040; }
.nl-dark-mode .nl-alertas__opcion:has(input:checked) { background: rgba(91,42,134,.35); color: #c9a8f0; }