/*
 * AROIL · Localizador de estaciones — estilos de front
 * Medidas y tipografía según el handoff de diseño (Propuesta 1 · Estación,
 * sección «Nuestra red»).
 *
 * COLOR: cada token toma el valor de la paleta de las Opciones Globales de
 * Avada (`var(--awb-colorN)`) y lleva como respaldo el HEX del handoff, que es
 * el mismo valor resuelto. Así el plugin sigue a la paleta del tema y, donde esa
 * paleta no existe (otro tema, Avada sin paleta, vista previa), se ve igual.
 *
 *   --awb-color1 #FFFFFF Fondo base    --awb-color6 #5C6473 Texto secundario
 *   --awb-color3 #E2E6ED Línea         --awb-color7 #14181F Titular
 *   --awb-color4 #204791 Azul corp.    --awb-color8 #FD700D Acento naranja
 *   --awb-custom_color_4 #B64C02 Naranja legible sobre fondo claro
 *
 * Las mezclas del prototipo (`color-mix()`) están resueltas a HEX a propósito:
 * en un motor sin `color-mix` la declaración de respaldo NO protege, porque se
 * descarta en tiempo de cálculo y la propiedad cae a su valor inicial.
 *
 * Los colores propios que se configuran en Ajustes llegan como propiedades
 * personalizadas en el atributo `style` del contenedor `.aroil-est` y ganan a
 * estos valores por especificidad de cascada, sin necesidad de `!important`.
 */

.aroil-est {
	--aroil-est-bg: var(--awb-color1, #FFFFFF);
	--aroil-est-line: var(--awb-color3, #E0E5F0);
	--aroil-est-primary: var(--awb-color4, #204791);
	--aroil-est-muted: var(--awb-color6, #5C6473);
	--aroil-est-heading: var(--awb-color7, #14181F);
	--aroil-est-accent: var(--awb-color8, #FD700D);
	--aroil-est-accent-text: var(--awb-custom_color_4, #B64C02);

	/* Mapa. Composición en claro: España es la zona iluminada, los países
	   vecinos retroceden en gris y el naranja de los pines queda como único
	   acento del bloque.

	   Los tres neutros del mapa son valores fijos, no heredados: la paleta de
	   cinco colores de AROIL (dos azules, naranja, texto y blanco) no tiene
	   grises, y derivarlos del azul con `color-mix()` no es una opción porque en
	   un motor sin `color-mix` el respaldo de `var()` no protege —la
	   declaración se descarta en tiempo de cálculo y el relleno cae a
	   transparente—. Se pueden cambiar desde Ajustes. Pines, rótulos y acentos
	   sí siguen a Avada. */
	--aroil-est-spain: #F2F6FC;
	--aroil-est-border: #B7C2D6;
	--aroil-est-land: #D4D9E1;
	--aroil-est-stroke: var(--awb-color1, #FFFFFF);
	--aroil-est-pin: var(--awb-color8, #FD700D);
	/* Borde de los pines. Sobre el mapa claro el naranja de marca se queda en
	   2,58:1 y la WCAG 1.4.11 pide 3:1 para los objetos gráficos que hacen
	   falta para entender el contenido. El naranja legible de la paleta sube el
	   contorno a 4,81:1 sin cambiar el color del pin. */
	--aroil-est-pin-edge: var(--awb-custom_color_4, #B64C02);
	--aroil-est-label: var(--awb-color7, #14181F);
	--aroil-est-halo: var(--awb-color1, #FFFFFF);

	--aroil-est-radius: 10px;
	--aroil-est-cols: 1.35fr .65fr;
	--aroil-est-list-cols: 3;

	color: var(--aroil-est-heading);
	font-variant-numeric: tabular-nums;
}

.aroil-est *,
.aroil-est *::before,
.aroil-est *::after {
	box-sizing: border-box;
}

/* ==========================================================================
   1. Rejilla del localizador
   ========================================================================== */

.aroil-est-grid {
	display: grid;
	grid-template-columns: var(--aroil-est-cols);
	gap: 24px;
	align-items: start;
}

.aroil-est-col-side {
	display: grid;
	gap: 16px;
}

/* ==========================================================================
   2. Tarjeta del mapa
   ========================================================================== */

.aroil-est-mapcard {
	background: var(--aroil-est-bg);
	border: 1px solid var(--aroil-est-line);
	border-radius: var(--aroil-est-radius);
	padding: 24px;
}

.aroil-est-mapcard.is-bare {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
}

/* El contenedor del mapa. Los pines se colocan encima en porcentaje, así que
   su caja tiene que coincidir exactamente con la del SVG: de ahí el
   `aspect-ratio` con la misma proporción que el `viewBox` (1000 × 580). */
.aroil-est-map {
	position: relative;
	aspect-ratio: 1000 / 580;
	width: 100%;
}

.aroil-est-svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* Los vecinos se separan entre sí con el trazo claro; el contorno de España
   es un trazo propio, porque sobre una tarjeta blanca un relleno casi blanco
   sin línea perdería la silueta. */
.aroil-est-geo-near {
	fill: var(--aroil-est-land);
	stroke: var(--aroil-est-stroke);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.aroil-est-geo-spain {
	fill: var(--aroil-est-spain);
	stroke: var(--aroil-est-border);
	stroke-width: 1.1;
	vector-effect: non-scaling-stroke;
}

/* ==========================================================================
   3. Pines y etiquetas
   ========================================================================== */

.aroil-est-pins {
	position: absolute;
	inset: 0;
}

/* El pin es un enlace con área de pulsación propia de 26 px centrada en la
   coordenada: el punto de color es sólo su parte visible. Sin esa caja el
   enlace mediría 0 × 0 y no habría objetivo táctil ni anillo de foco. */
.aroil-est-pin {
	position: absolute;
	width: 26px;
	height: 26px;
	margin: 0;
	border: 0;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	text-decoration: none;
	color: inherit;
	z-index: 2;
}

/* Las estaciones en servicio quedan por encima cuando dos pines se solapan. */
.aroil-est-pin.is-open {
	z-index: 3;
}

.aroil-est-pin:hover,
.aroil-est-pin:focus-visible,
.aroil-est-pin.is-active {
	z-index: 5;
}

.aroil-est-dot {
	position: absolute;
	left: 50%;
	top: 50%;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: transform .15s ease;
}

/* En servicio: disco lleno con anillo blanco. */
.aroil-est-pin.is-open .aroil-est-dot {
	width: 13px;
	height: 13px;
	background: var(--aroil-est-pin);
	box-shadow: 0 0 0 1.5px var(--aroil-est-pin-edge);
}

/* El realce del pin activo es un anillo, no un disco difuminado: un disco
   naranja translúcido sobre el azul de España se apaga hasta un gris sucio,
   mientras que el anillo se lee igual sobre cualquier fondo. Además es
   decoración, así que no recibe pulsaciones: si las recibiera, con dos
   estaciones próximas se tragaría el pin del vecino (comprobado con
   Valladolid y Palencia, a 20 px en pantalla). */
.aroil-est-pin .aroil-est-dot::after {
	content: "";
	position: absolute;
	inset: -7px;
	border: 2px solid var(--aroil-est-pin-edge);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease;
}

.aroil-est-pin:hover .aroil-est-dot::after,
.aroil-est-pin:focus-visible .aroil-est-dot::after,
.aroil-est-pin.is-active .aroil-est-dot::after {
	opacity: 1;
}

/* Próxima apertura, en obras o cerrada: anillo discontinuo. */
.aroil-est-pin.is-soon .aroil-est-dot,
.aroil-est-pin.is-works .aroil-est-dot,
.aroil-est-pin.is-closed .aroil-est-dot {
	width: 18px;
	height: 18px;
}

.aroil-est-ring {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.aroil-est-ring circle {
	fill: none;
	stroke: var(--aroil-est-pin-edge);
	stroke-width: 2.4;
	stroke-dasharray: 3.4 2.8;
	stroke-linecap: round;
}

.aroil-est-pin:hover .aroil-est-dot,
.aroil-est-pin:focus-visible .aroil-est-dot,
.aroil-est-pin.is-active .aroil-est-dot {
	transform: translate(-50%, -50%) scale(1.12);
}

.aroil-est-pin:focus-visible {
	outline: 2px solid var(--aroil-est-pin);
	outline-offset: 3px;
}

/* La etiqueta se ancla al punto y se desplaza con los valores guardados en la
   estación. `data-anchor` decide por qué lado crece, igual que el
   `text-anchor` del prototipo. */
/* El rótulo también es zona de pulsación: con dos estaciones a pocos
   kilómetros los puntos se solapan y la etiqueta, que se separa a mano con el
   desplazamiento de cada estación, es el objetivo grande e inequívoco. */
.aroil-est-label {
	position: absolute;
	left: 50%;
	top: 50%;
	display: block;
	white-space: nowrap;
	transform: translate(var(--aroil-est-dx, 16px), calc(var(--aroil-est-dy, 6px) - .72em));
}

.aroil-est-label[data-anchor="end"] {
	transform: translate(calc(var(--aroil-est-dx, 16px) - 100%), calc(var(--aroil-est-dy, 6px) - .72em));
	text-align: right;
}

.aroil-est-label[data-anchor="middle"] {
	transform: translate(calc(var(--aroil-est-dx, 16px) - 50%), calc(var(--aroil-est-dy, 6px) - .72em));
	text-align: center;
}

.aroil-est-label-name,
.aroil-est-label-state {
	display: block;
	color: var(--aroil-est-label);
	/* Halo: sustituye al `paint-order: stroke` del SVG del prototipo. */
	text-shadow: 0 0 3px var(--aroil-est-halo), 0 0 3px var(--aroil-est-halo), 0 0 5px var(--aroil-est-halo);
}

.aroil-est-label-name {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.15;
}

.aroil-est-label-state {
	font-size: 11px;
	line-height: 1.3;
	opacity: .7;
}

.aroil-est-pin:hover .aroil-est-label-name,
.aroil-est-pin:focus-visible .aroil-est-label-name {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.aroil-est-pin.is-active .aroil-est-label-name {
	color: var(--aroil-est-accent-text);
}

/* ==========================================================================
   4. Leyenda
   ========================================================================== */

.aroil-est-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin-top: 12px;
	padding-top: 14px;
	border-top: 1px solid var(--aroil-est-line);
	font-size: 13px;
	line-height: 1.4;
	color: var(--aroil-est-muted);
}

.aroil-est-legend span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.aroil-est-lg {
	flex: 0 0 auto;
	width: 11px;
	height: 11px;
	border-radius: 50%;
}

/* Las muestras de la leyenda se construyen igual que los pines, para que
   signifiquen lo mismo y cumplan el mismo mínimo de contraste. */
.aroil-est-lg.is-open {
	background: var(--aroil-est-pin);
	box-shadow: 0 0 0 1px var(--aroil-est-pin-edge);
}

.aroil-est-lg.is-soon {
	border: 2px dashed var(--aroil-est-pin-edge);
}

.aroil-est-legend-note {
	font-style: italic;
	opacity: .85;
}

/* ==========================================================================
   5. Panel y ficha de estación
   ========================================================================== */

.aroil-est-panel {
	background: var(--aroil-est-bg);
	border: 1px solid var(--aroil-est-line);
	border-radius: var(--aroil-est-radius);
	padding: 26px;
}

.aroil-est-panel.is-bare {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
}

.aroil-est-panel-title {
	margin: 0 0 16px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--aroil-est-muted);
}

/* Selector de estaciones: alternativa al mapa cuando los pines quedan
   demasiado juntos para el dedo y los rótulos ya se han retirado. */
.aroil-est-tabs {
	display: none;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 18px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--aroil-est-line);
}

.aroil-est-tab {
	padding: 7px 14px;
	border: 1px solid var(--aroil-est-line);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--aroil-est-muted);
	text-decoration: none;
}

.aroil-est-tab.is-active {
	border-color: var(--aroil-est-primary);
	background: var(--aroil-est-primary);
	color: var(--awb-color1, #FFFFFF);
}

.aroil-est-tab:focus-visible {
	outline: 2px solid var(--aroil-est-pin);
	outline-offset: 2px;
}

/* Con JavaScript sólo se ve la ficha activa. La regla que lo invierte cuando no
   hay JavaScript viaja en un <noscript> junto al bloque. */
.aroil-est-panel.is-single .aroil-est-card {
	display: none;
}

.aroil-est-panel.is-single .aroil-est-card.is-active {
	display: block;
	animation: aroil-est-in .22s ease both;
}

@keyframes aroil-est-in {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: none; }
}

.aroil-est-card-head {
	display: grid;
	gap: 8px;
	margin-bottom: 18px;
}

.aroil-est-state {
	justify-self: start;
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* Sobre la pastilla naranja el texto va en el titular oscuro: el blanco sólo
   contrasta 2,80:1 y el titular sube a 6,35:1 (regla de contraste AROIL). */
.aroil-est-state.is-open {
	background: var(--aroil-est-accent);
	color: var(--aroil-est-heading);
}

.aroil-est-state.is-soon,
.aroil-est-state.is-works,
.aroil-est-state.is-closed {
	border: 1px dashed var(--aroil-est-accent);
	color: var(--aroil-est-accent-text);
}

.aroil-est-name {
	margin: 0;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.02em;
	color: var(--aroil-est-primary);
}

.aroil-est-address {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--aroil-est-muted);
}

.aroil-est-address.is-pending {
	font-style: italic;
	opacity: .8;
}

.aroil-est-note {
	margin: 0;
	font-size: 13px;
	color: var(--aroil-est-accent-text);
}

.aroil-est-figure {
	margin: 0 0 18px;
	border-radius: 8px;
	overflow: hidden;
}

.aroil-est-figure img,
img.aroil-est-photo {
	display: block;
	width: 100%;
	height: auto;
}

/* --- Filas de datos --- */

.aroil-est-data {
	margin: 0;
	display: grid;
	gap: 14px;
}

.aroil-est-row {
	display: grid;
	gap: 6px;
	padding-bottom: 14px;
	border-bottom: 1px dashed var(--aroil-est-line);
}

.aroil-est-row:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.aroil-est-data dt {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--aroil-est-muted);
}

.aroil-est-data dd {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--aroil-est-heading);
}

.aroil-est-data dd a {
	color: var(--aroil-est-primary);
	text-decoration: none;
}

.aroil-est-data dd a:hover {
	text-decoration: underline;
}

.aroil-est-sep {
	color: var(--aroil-est-line);
}

/* --- Combustibles --- */

.aroil-est-fuels {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 7px;
}

.aroil-est-fuels li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.aroil-est-fuel-name {
	font-size: 14px;
}

.aroil-est-fuel-price {
	flex: 0 0 auto;
	font-size: 15px;
	font-weight: 700;
	color: var(--aroil-est-primary);
}

.aroil-est-fuel-price em {
	font-size: 11px;
	font-style: normal;
	font-weight: 600;
	color: var(--aroil-est-muted);
}

/* --- Pastillas --- */

.aroil-est-chips {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.aroil-est-chips li {
	padding: 4px 10px;
	border: 1px solid var(--aroil-est-line);
	border-radius: 999px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--aroil-est-muted);
}

.aroil-est-extra {
	margin: 14px 0 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--aroil-est-muted);
}

/* --- Cómo llegar --- */

.aroil-est-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--aroil-est-line);
}

.aroil-est-nav-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--aroil-est-muted);
}

.aroil-est-nav-link {
	font-size: 14px;
	font-weight: 600;
	color: var(--aroil-est-primary);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .15s ease;
}

.aroil-est-nav-link:hover,
.aroil-est-nav-link:focus-visible {
	border-bottom-color: currentColor;
}

/* ==========================================================================
   6. Listado sin mapa
   ========================================================================== */

.aroil-est-list {
	display: grid;
	grid-template-columns: repeat(var(--aroil-est-list-cols), minmax(0, 1fr));
	gap: 16px;
	align-items: start;
}

.aroil-est-list .aroil-est-card {
	background: var(--aroil-est-bg);
	border: 1px solid var(--aroil-est-line);
	border-radius: var(--aroil-est-radius);
	padding: 26px;
}

/* ==========================================================================
   7. Adaptación a pantallas pequeñas
   ========================================================================== */

@media (max-width: 1080px) {
	.aroil-est-grid {
		grid-template-columns: 1fr;
	}
}

/* Por debajo de este ancho las etiquetas del mapa se solapan: se retiran y la
   información queda en la ficha, que es donde se lee de verdad. */
@media (max-width: 860px) {
	.aroil-est-label {
		display: none;
	}

	.aroil-est-tabs {
		display: flex;
	}

	.aroil-est-mapcard {
		padding: 16px;
	}

	.aroil-est-panel {
		padding: 22px;
	}
}

@media (max-width: 782px) {
	.aroil-est-list {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   8. Accesibilidad
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.aroil-est-panel.is-single .aroil-est-card.is-active {
		animation: none;
	}

	.aroil-est-dot,
	.aroil-est-nav-link {
		transition: none;
	}
}

.aroil-est .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}