/* Alertagasolina Tótem. Tokens de la dirección de diseño «Tótem». */

@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo-latin-wght-normal.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "IBM Plex Sans";
	src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "IBM Plex Sans";
	src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

:root {
	--bg: #F3F5F4;
	--surface: #FFFFFF;
	--ink: #14201C;
	--accent: #0B7A4B;
	--accent-soft: #E3F1EA;
	--panel: #0F1A16;
	--panel-ink: #EAF3EE;
	--muted: #55655F;
	--line: #D5DCD8;
	--font-display: "Archivo", sans-serif;
	--font-body: "IBM Plex Sans", sans-serif;
	--radius: 6px;
	--xs: 4px;
	--sm: 8px;
	--md: 16px;
	--lg: 24px;
	--xl: 40px;
	--ancho: 1120px;
}

/* ---------- Base ---------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.5;
}

:where(h1, h2, h3) {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0 0 var(--md);
	text-wrap: balance;
}
:where(h1) { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.625rem); }
:where(h2) { font-size: 1.375rem; margin-top: var(--xl); letter-spacing: 0; }
:where(p) { margin: 0 0 var(--md); }
:where(ul, ol, dl, dd, figure) { margin: 0; padding: 0; }
:where(ul, ol) { list-style: none; }

a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--ink); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

.ag-ancho { width: min(100% - 2 * var(--md), var(--ancho)); margin-inline: auto; }
.ag-seccion { padding-block: var(--lg) var(--xl); }
.ag-principal { min-height: 60vh; }

.ag-saltar { position: absolute; left: -999px; top: 0; background: var(--surface); padding: var(--sm) var(--md); z-index: 2000; }
.ag-saltar:focus { left: var(--md); top: var(--sm); }

.ag-entradilla { font-size: 1.0625rem; color: var(--muted); max-width: 68ch; }
.ag-nota, .ag-fuente { color: var(--muted); font-size: 0.875rem; max-width: 75ch; }
.ag-fuente { margin-top: var(--xl); padding-top: var(--md); border-top: 1px solid var(--line); }
.ag-vacio, .ag-aviso { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: var(--md); max-width: 75ch; }
.ag-num { text-align: right; }

/* ---------- Cabecera y pie ---------- */

.ag-cabecera { background: var(--surface); border-bottom: 1px solid var(--line); }
.ag-cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: var(--md); min-height: 56px; }
.ag-marca { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.ag-marca:hover { color: var(--accent); }
.ag-nav { display: flex; gap: var(--lg); font-size: 0.9375rem; }
.ag-nav a { color: var(--ink); text-decoration: none; padding-block: var(--sm); }
.ag-nav a:hover { color: var(--accent); text-decoration: underline; }

.ag-pie { border-top: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 0.875rem; }
.ag-pie__fila { padding-block: var(--lg); }
.ag-pie p { margin-bottom: var(--xs); }
.ag-pie strong { color: var(--ink); }

/* ---------- Migas ---------- */

.ag-migas { font-size: 0.875rem; color: var(--muted); margin-bottom: var(--md); }
.ag-migas ol { display: flex; flex-wrap: wrap; gap: var(--xs) var(--sm); }
.ag-migas li + li::before { content: "/"; margin-right: var(--sm); color: var(--line); }
.ag-migas a { color: var(--muted); }

/* ---------- Cifras de precio ---------- */

.ag-cifra { font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; white-space: nowrap; }
.ag-unidad { font-family: var(--font-body); font-weight: 400; font-size: 0.75em; color: var(--muted); letter-spacing: 0; }

/* ---------- Tótem ---------- */

.ag-totem { background: var(--panel); color: var(--panel-ink); border-radius: var(--radius); padding: var(--md) var(--lg); }
.ag-totem__titulo { font-size: 0.875rem; margin: 0 0 var(--sm); opacity: 0.8; }
.ag-totem__fila { display: flex; align-items: baseline; justify-content: space-between; gap: var(--md); padding-block: 10px; border-top: 1px solid rgba(234, 243, 238, 0.16); }
.ag-totem__fila dt { font-size: 0.9375rem; }
.ag-totem__fila dt small { display: block; font-size: 0.75rem; opacity: 0.65; }
.ag-totem .ag-cifra { font-size: 2rem; line-height: 1; }
.ag-totem .ag-unidad { color: var(--panel-ink); opacity: 0.65; font-size: 0.4em; }
.ag-totem__pie { font-size: 0.75rem; opacity: 0.65; margin: var(--sm) 0 0; padding-top: var(--sm); border-top: 1px solid rgba(234, 243, 238, 0.16); }

/* Resumen en horizontal: más barata, media, más cara. */
.ag-totem--fila { margin-block: var(--md) var(--lg); }
.ag-totem--fila .ag-totem__filas { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--lg); border-top: 1px solid rgba(234, 243, 238, 0.16); }
.ag-totem--fila .ag-totem__fila { flex-direction: column; align-items: flex-start; gap: var(--xs); border-top: 0; padding-block: var(--md) var(--xs); }
.ag-totem--fila .ag-totem__fila:first-child dt { border-left: 3px solid var(--accent); padding-left: var(--sm); }

/* ---------- Portada ---------- */

.ag-portada { padding-block: var(--xl); }
.ag-portada__rejilla { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--xl); align-items: start; }
.ag-portada__texto h1 { max-width: 18ch; }

.ag-provincias { columns: 4 220px; column-gap: var(--lg); margin-top: var(--md); }
.ag-provincias li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sm); padding: 6px var(--sm); border-bottom: 1px solid var(--line); break-inside: avoid; font-size: 0.9375rem; }
.ag-provincias li.es-min { background: var(--accent-soft); }
.ag-provincias a { color: var(--ink); text-decoration: none; }
.ag-provincias a:hover { color: var(--accent); text-decoration: underline; }

.ag-prosa p, .ag-prosa li { max-width: 68ch; }
.ag-prosa h2 { margin-top: 0; }

/* ---------- Buscador ---------- */

.ag-buscador { display: grid; grid-template-columns: minmax(0, 1fr) 11rem auto; gap: var(--sm) var(--md); align-items: end; margin-block: var(--lg) var(--md); max-width: 46rem; }
.ag-buscador__campo { position: relative; }
.ag-buscador label { display: block; font-size: 0.8125rem; color: var(--muted); margin-bottom: var(--xs); }
.ag-buscador input, .ag-buscador select {
	width: 100%; height: 46px; padding: 0 12px;
	font: inherit; color: var(--ink); background: var(--surface);
	border: 1px solid var(--muted); border-radius: var(--radius);
}
.ag-buscador input::placeholder { color: var(--muted); }
.ag-buscador .ag-enlace { grid-column: 1 / -1; justify-self: start; }

.ag-boton {
	display: inline-flex; align-items: center; justify-content: center;
	height: 46px; padding: 0 var(--lg);
	font: inherit; font-weight: 600; color: #FFFFFF; background: var(--accent);
	border: 0; border-radius: var(--radius); cursor: pointer; text-decoration: none; white-space: nowrap;
}
.ag-boton:hover { background: var(--ink); color: #FFFFFF; }
.ag-boton:active { transform: translateY(1px); }
.ag-enlace { font: inherit; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.ag-enlace:hover { color: var(--ink); }
[hidden] { display: none !important; }

.ag-sugerencias { position: absolute; z-index: 1500; left: 0; right: 0; top: 100%; margin-top: 2px; background: var(--surface); border: 1px solid var(--muted); border-radius: var(--radius); overflow: hidden; }
.ag-sugerencias a { display: flex; justify-content: space-between; gap: var(--md); padding: 10px 12px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.ag-sugerencias li:last-child a { border-bottom: 0; }
.ag-sugerencias a:hover, .ag-sugerencias a:focus { background: var(--accent-soft); }
.ag-sugerencias span { color: var(--muted); font-size: 0.875rem; text-align: right; }

.ag-resultados { margin-top: var(--lg); max-width: 46rem; border-top: 1px solid var(--line); }
.ag-resultados li { display: flex; justify-content: space-between; gap: var(--md); padding: 12px var(--sm); border-bottom: 1px solid var(--line); }
.ag-resultados a { font-weight: 600; }
.ag-resultados span { color: var(--muted); font-size: 0.875rem; text-align: right; }

/* ---------- Pestañas de carburante ---------- */

.ag-carburantes { margin-block: var(--md); border-bottom: 1px solid var(--line); overflow-x: auto; }
.ag-carburantes ul { display: flex; gap: var(--xs); }
.ag-carburantes a { display: block; padding: 10px 14px; color: var(--muted); text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; font-size: 0.9375rem; }
.ag-carburantes a:hover { color: var(--ink); }
.ag-carburantes a[aria-current] { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }

/* ---------- Tablas ---------- */

.ag-tabla-caja { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; }
.ag-tabla { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.ag-tabla th, .ag-tabla td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.ag-tabla tbody tr:last-child > * { border-bottom: 0; }
.ag-tabla thead th { font-size: 0.8125rem; font-weight: 600; color: var(--muted); background: var(--bg); }
.ag-tabla th.ag-num, .ag-tabla td.ag-num, .ag-tabla .ag-tabla__precio, .ag-tabla .ag-tabla__km { text-align: right; white-space: nowrap; }
.ag-tabla__n { width: 3rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ag-tabla__rotulo { display: block; font-family: var(--font-display); font-weight: 700; color: var(--ink); text-decoration: none; }
.ag-tabla__rotulo:hover { color: var(--accent); text-decoration: underline; }
.ag-tabla__dir { display: block; color: var(--muted); font-size: 0.875rem; }
.ag-tabla__horario { color: var(--muted); font-size: 0.875rem; max-width: 16rem; }
.ag-tabla__precio .ag-cifra { font-size: 1.25rem; }
.ag-tabla tr.es-min { background: var(--accent-soft); }
.ag-etiqueta { display: block; font-size: 0.75rem; font-weight: 600; color: var(--accent); }
.ag-tabla--datos tbody th { font-weight: 600; }
.ag-tabla--datos .ag-cifra { font-size: 1.0625rem; }
.ag-tabla--corta { max-width: 26rem; }
.ag-tabla-caja:has(.ag-tabla--corta) { max-width: 26rem; }

/* ---------- Lista y mapa en dos columnas ---------- */

.ag-dos { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--lg); align-items: start; }
.ag-dos__mapa { position: sticky; top: var(--md); }
.ag-dos--ficha { margin-top: var(--lg); }
.ag-dos--ficha h2 { margin-top: var(--lg); font-size: 1.125rem; }

.ag-mapa { height: 520px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); z-index: 0; }
.ag-dos--ficha .ag-mapa { height: 380px; }
.ag-mapa[data-dinamico] { height: min(70vh, 640px); }
.leaflet-container { font-family: var(--font-body); }
.leaflet-container a { color: var(--accent); }
.leaflet-popup-content-wrapper { border-radius: var(--radius); box-shadow: none; border: 1px solid var(--muted); }
.leaflet-popup-content { margin: 12px 14px; font-size: 0.875rem; line-height: 1.4; }
.leaflet-popup-content strong { font-family: var(--font-display); display: block; }
.leaflet-popup-tip { box-shadow: none; border: 1px solid var(--muted); }

.ag-pin { width: auto !important; height: auto !important; }
.ag-pin span {
	display: inline-block; transform: translate(-50%, -100%);
	padding: 2px 6px; background: var(--surface); color: var(--ink);
	border: 1px solid var(--muted); border-radius: var(--radius);
	font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ag-pin.es-min span { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.ag-pin.es-min { z-index: 900 !important; }

.ag-mapa-estado { color: var(--muted); font-size: 0.875rem; margin-top: var(--sm); }
.ag-mapa-lista { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.ag-mapa-lista:empty { display: none; }
.ag-mapa-lista li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--md); padding: 10px 12px; border-bottom: 1px solid var(--line); }
.ag-mapa-lista li:last-child { border-bottom: 0; }
.ag-mapa-lista li:first-child { background: var(--accent-soft); }
.ag-mapa-lista a { font-family: var(--font-display); font-weight: 700; color: var(--ink); text-decoration: none; }
.ag-mapa-lista a:hover { color: var(--accent); text-decoration: underline; }
.ag-mapa-lista small { display: block; color: var(--muted); font-size: 0.875rem; }

/* ---------- Ficha ---------- */

.ag-comparacion { margin-top: var(--md); font-weight: 600; }
.ag-datos > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--md); padding-block: 10px; border-bottom: 1px solid var(--line); }
.ag-datos dt { color: var(--muted); font-size: 0.875rem; }
.ag-datos + p { margin-top: var(--lg); }

/* ---------- Municipios ---------- */

.ag-municipios { columns: 4 200px; column-gap: var(--lg); font-size: 0.9375rem; }
.ag-municipios li { display: flex; justify-content: space-between; gap: var(--sm); padding: 5px 0; border-bottom: 1px solid var(--line); break-inside: avoid; }
.ag-municipios a { color: var(--ink); text-decoration: none; }
.ag-municipios a:hover { color: var(--accent); text-decoration: underline; }
.ag-municipios span { color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- Móvil ---------- */

@media (max-width: 860px) {
	.ag-portada__rejilla, .ag-dos { grid-template-columns: minmax(0, 1fr); }
	.ag-dos__mapa { position: static; }
	.ag-mapa { height: 360px; }
	.ag-buscador { grid-template-columns: minmax(0, 1fr); }
	.ag-buscador .ag-boton { width: 100%; }
	.ag-tabla__horario { display: none; }
	.ag-nav { gap: var(--md); }
}
@media (max-width: 520px) {
	.ag-totem { padding: var(--md); }
	.ag-totem .ag-cifra { font-size: 1.625rem; }
	.ag-totem--fila .ag-totem__filas { gap: var(--md); }
	.ag-totem--fila .ag-cifra { font-size: 1.25rem; }
	.ag-tabla__n { display: none; }
	.ag-tabla th, .ag-tabla td { padding: 10px 8px; }
	.ag-datos > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; scroll-behavior: auto !important; }
}

@media print {
	.ag-cabecera, .ag-pie, .ag-buscador, .ag-carburantes, .ag-mapa, .ag-dos__mapa { display: none; }
	.ag-dos { grid-template-columns: minmax(0, 1fr); }
}