/* ============================================
   CARABANCHEL EN DATOS — Vivid Theme
   ============================================ */

/* 1. Variables */
:root {
    --bg:        #080f1e;
    --surface:   #0f1a2e;
    --surface2:  #162032;
    --border:    rgba(255,255,255,0.07);
    --text:      #f1f5f9;
    --text-muted:#94a3b8;
    --text-dim:  #64748b;

    --sky:    #38bdf8;
    --blue:   #60a5fa;
    --emerald:#34d399;
    --violet: #a78bfa;
    --amber:  #fbbf24;
    --rose:   #fb7185;
    --cyan:   #22d3ee;
    --orange: #fb923c;
    --green:  #4ade80;
    --red:    #f87171;
    --yellow: #facc15;
    --purple: #c084fc;

    --accent: var(--sky);

    --radius-xl: 22px;
    --radius:    16px;
    --radius-sm: 10px;
    --radius-xs: 6px;

    --shadow:    0 4px 30px rgba(0,0,0,0.4);
    --shadow-sm: 0 2px 14px rgba(0,0,0,0.28);
    --transition:0.18s ease;

    /* ── Medidas del layout ───────────────────────────────────────────────
       Todo el dashboard se dimensiona desde aquí. Cambiar una de estas
       variables cambia la página entera, sin tocar sección por sección. */
    --page-max:    1180px;   /* ancho del contenedor */
    --page-max-xl: 1400px;   /* ancho a partir de 1500px de pantalla */
    --page-pad:  clamp(0.75rem, 3vw,   1.25rem);  /* margen lateral */
    --card-pad:  clamp(0.9rem,  2.4vw, 1.25rem);  /* relleno de cada tarjeta */
    --col-min:   34rem;      /* ancho mínimo de columna del grid principal */
    --tile-min:  15rem;      /* ancho mínimo por defecto de las rejillas */
    --gap:       0.65rem;    /* separación por defecto dentro de una rejilla */
}

[data-theme="light"] {
    --bg:        #eef2f7;
    --surface:   #ffffff;
    --surface2:  #f4f7fb;
    --border:    rgba(0,0,0,0.07);
    --text:      #0f172a;
    --text-muted:#64748b;
    --text-dim:  #94a3b8;
    --shadow:    0 4px 24px rgba(0,0,0,0.1);
    --shadow-sm: 0 2px 10px rgba(0,0,0,0.07);
}

/* 2. Reset & Base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    font-size: 15px;
    line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
canvas { max-width: 100%; }

/* Foco visible para navegación por teclado (antes no había ninguno) */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* Enlace "saltar al contenido": oculto hasta que recibe foco con Tab */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 0.7rem 1.1rem;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.9rem;
}
.skip-link:focus {
    left: 0.75rem;
    top: 0.75rem;
}

/* Respeta la preferencia del sistema de reducir animaciones */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

.container {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 0 var(--page-pad);
}

/* Utility color classes */
.red    { color: var(--red) !important; }
.green  { color: var(--green) !important; }
.blue   { color: var(--blue) !important; }
.orange { color: var(--orange) !important; }
.yellow { color: var(--yellow) !important; }
.purple { color: var(--purple) !important; }
.cyan   { color: var(--cyan) !important; }

.dir-link { color: var(--sky); }
.dir-link:hover { text-decoration: underline; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
    background: linear-gradient(140deg, #0c1a3d 0%, #1a3580 42%, #4c1d95 100%);
    padding: 1.5rem 0 1.25rem;
}
[data-theme="light"] .hero {
    background: linear-gradient(140deg, #1e40af 0%, #2563eb 50%, #7c3aed 100%);
}

.hero-top {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

/* .hero-brand definido en HERO LOGO section */

.hero-title {
    font-size: 1.55rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.03em;
    line-height: 1.1;
}
.hero-title span { opacity: 0.6; font-weight: 400; }

.hero-sub {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.5);
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.update-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--emerald);
    flex-shrink: 0;
    animation: pulse-dot 2.5s infinite;
}
@keyframes pulse-dot {
    0%,100% { box-shadow: 0 0 0 0 rgba(52,211,153,0.4); }
    60% { box-shadow: 0 0 0 7px rgba(52,211,153,0); }
}

.hero-weather {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.hero-emoji { font-size: 3.8rem; line-height: 1; }

.hero-temp {
    font-size: 4.25rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.06em;
    line-height: 1;
}
.hero-desc  { font-size: 0.85rem; color: rgba(255,255,255,0.7); margin-top: 0.15rem; }
.hero-range { font-size: 0.75rem; color: rgba(255,255,255,0.5); }

.hero-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.btn-hero {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.85);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.88rem;
    transition: background var(--transition);
    border: 1px solid rgba(255,255,255,0.15);
}
.btn-hero:hover { background: rgba(255,255,255,0.22); }

/* Status pills */
.hero-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.hpill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.65rem;
    border-radius: 100px;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.85);
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid rgba(255,255,255,0.13);
    white-space: nowrap;
}
.hpill i { font-size: 0.7rem; opacity: 0.8; }
.hpill.good { background: rgba(52,211,153,0.18); border-color: rgba(52,211,153,0.35); color: #6ee7b7; }
.hpill.warn { background: rgba(251,191,36,0.18);  border-color: rgba(251,191,36,0.35);  color: #fde68a; }
.hpill.bad  { background: rgba(248,113,113,0.18); border-color: rgba(248,113,113,0.35); color: #fca5a5; }

/* Margen al saltar a una sección por enlace directo (#sec-…) */
.card { scroll-margin-top: 1rem; }

/* ============================================================
   MAIN GRID & CARDS
   ============================================================ */
.main-col {
    max-width: var(--page-max);
    margin: 1.25rem auto 0;
    padding: 0 var(--page-pad) 2rem;
    /* Antes era una única rejilla con las 17 secciones como hermanas directas:
       mucho scroll y ningún criterio para orientarse. Ahora .main-col solo
       apila verticalmente el aviso del día, el índice de zonas y cada zona;
       la rejilla de dos columnas vive dentro de cada zona (.zona-grid). */
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}
.main-col > * { min-width: 0; }

/* Pantallas grandes: se ensancha el contenedor. */
@media (min-width: 1500px) {
    .main-col { max-width: var(--page-max-xl); }
}

/* ============================================================
   ZONAS — agrupan las secciones por tema
   ============================================================ */
.zona-grid {
    display: grid;
    /* Dos columnas cuando caben, una cuando no: lo decide el propio grid a
       partir de --col-min, sin ninguna media query. min(100%, …) es lo que
       impide que una columna sea más ancha que la pantalla en móvil. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--col-min)), 1fr));
    gap: 1rem;
    /* Las tarjetas se ajustan a su contenido en vez de estirarse hasta la altura
       de la más alta de la fila (que dejaba huecos enormes). */
    align-items: start;
}
/* Un hijo de grid tiene min-width:auto, así que NO puede encogerse por debajo
   del ancho mínimo de su contenido. Con la previsión a 7 días (7 × 68px) eso
   forzaba ~500px y en móvil la página entera desbordaba a la derecha.
   min-width:0 permite encoger; el contenido ancho hace scroll dentro. */
.zona-grid > * { min-width: 0; }

/* Solo la zona activa se pinta: es lo que convierte el índice de arriba en
   pestañas y evita las 17 tarjetas seguidas que había antes. */
.zona { display: none; }
.zona.zona-activa {
    display: block;
    animation: zona-entra 0.22s ease;
}
@keyframes zona-entra {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

.zona-head {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1.1rem;
    padding-left: 0.15rem;
}
.zona-ico {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    color: var(--zc, var(--accent));
    background: color-mix(in srgb, var(--zc, var(--accent)) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--zc, var(--accent)) 30%, transparent);
}
.zona-titulo {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text);
    line-height: 1.25;
}
.zona-desc {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

/* ── Índice de zonas ──────────────────────────────────────────────────────
   El elemento distintivo de este rediseño: una "línea" de paradas, como un
   plano de metro (el propio dashboard ya usa esa metáfora en Transporte).
   Cada zona es una parada de color propio; pulsarla salta directo, sin
   obligar a recorrer las 17 tarjetas de arriba abajo para encontrar algo. */
.zona-nav {
    display: flex;
    align-items: flex-start;
    gap: 0;
    overflow-x: auto;
    padding: 0.9rem var(--page-pad) 1.1rem;
    margin: 0 calc(var(--page-pad) * -1);
    scrollbar-width: none;
}
.zona-nav::-webkit-scrollbar { display: none; }

.zona-parada {
    position: relative;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.85rem;
    min-width: 5.5rem;
}
/* La vía: una línea continua que atraviesa todas las paradas.
   Va en DOS mitades por parada (del borde izquierdo a su centro, y de su
   centro al borde derecho) en vez de un solo tramo por parada.
   El tramo único medía `left:-50%; width:100%`, o sea el ancho de SU parada,
   así que solo llegaba justo al centro de la parada anterior cuando las dos
   medían lo mismo. Con las etiquetas visibles no miden lo mismo nunca
   («Movilidad» al lado de «El distrito en cifras»), y la vía salía cortada a
   trozos en escritorio. En móvil no se notaba porque ahí se ocultan las
   etiquetas y todas las paradas quedan del mismo ancho.
   Cada mitad va de un borde al centro, y como las paradas se tocan (gap:0),
   donde acaba una empieza la siguiente: continua midan lo que midan. */
.zona-parada::before,
.zona-parada::after {
    content: '';
    position: absolute;
    top: 0.9rem;
    width: 50%;
    height: 2px;
    background: var(--border);
    z-index: 0;
}
.zona-parada::before { left: 0; }
.zona-parada::after  { left: 50%; }
/* Los extremos no llevan vía hacia fuera */
.zona-parada:first-child::before { display: none; }
.zona-parada:last-child::after   { display: none; }

.zona-parada-punto {
    position: relative;
    z-index: 1;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--zc, var(--accent));
    color: var(--zc, var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    transition: background var(--transition), transform var(--transition);
}
.zona-parada-label {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
    transition: color var(--transition);
}
.zona-parada:hover .zona-parada-punto,
.zona-parada:focus-visible .zona-parada-punto,
.zona-parada.activa .zona-parada-punto {
    background: var(--zc, var(--accent));
    color: var(--surface);
    transform: scale(1.08);
}
.zona-parada:hover .zona-parada-label,
.zona-parada:focus-visible .zona-parada-label,
.zona-parada.activa .zona-parada-label { color: var(--text); }
.zona-parada.activa .zona-parada-label { font-weight: 800; }

@media (max-width: 640px) {
    .zona-parada-label { display: none; }
    .zona-parada { min-width: 3.25rem; padding: 0 0.55rem; }
}

/* ── Rejillas de tarjetas ─────────────────────────────────────────────────
   Todas las rejillas del dashboard comparten esta fórmula y solo declaran su
   ancho mínimo de celda (--min). Antes cada una repetía el mismo
   `repeat(auto-fill, minmax(NNNpx, 1fr))` y necesitaba además una regla en
   móvil, porque una celda de 260px no cabe en una pantalla de 320px.
   Con min(100%, …) la celda nunca supera el ancho disponible, así que la
   versión móvil sale sola. Rejilla nueva = añadirla a esta lista. */
.rest-grid, .comercio-grid, .equip-cards-grid, .agenda-grid, .dep-grid,
.pistas-lista, .emergencia-tels, .socio-kpis, .socio-stats,
.tiempo-detalles-grid, .grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min, var(--tile-min))), 1fr));
    gap: var(--gap);
}
.agenda-grid       { --min: 17rem;   --gap: 0.75rem; }
.rest-grid         { --min: 16.5rem; --gap: 0.75rem; }
.comercio-grid     { --min: 15rem;   --gap: 0.5rem;  }
.equip-cards-grid  { --min: 15rem;   --gap: 0.65rem; }
.dep-grid          { --min: 16rem;   --gap: 0.7rem;  }
.pistas-lista      { --min: 13.5rem; --gap: 0.45rem; }
.emergencia-tels   { --min: 13rem;   --gap: 0.6rem;  }
.socio-kpis        { --min: 9.5rem;  --gap: 0.7rem;  }
.socio-stats       { --min: 8rem;    --gap: 0.6rem;  }
.tiempo-detalles-grid { --min: 8.5rem; --gap: 0.5rem; }

.card {
    background: var(--surface);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    /* El color de la sección se declara una sola vez en --sec (ver más abajo)
       y de ahí lo leen la franja superior y el icono de la cabecera. */
    border-top: 3px solid var(--sec, var(--border));
    box-shadow: var(--shadow-sm);
    padding: var(--card-pad);
    overflow: hidden;
    /* El navegador no pinta las tarjetas fuera del viewport hasta que se
       acercan. contain-intrinsic-size reserva un alto estimado para que la
       barra de scroll no dé saltos. */
    content-visibility: auto;
    contain-intrinsic-size: auto 420px;
}
.card-wide { grid-column: 1 / -1; }

/* ── Color de cada sección ────────────────────────────────────────────────
   Una línea por sección. La franja superior de la tarjeta, el icono de la
   cabecera y cualquier detalle que use var(--sec) se tiñen solos.
   Antes esto eran dos listas paralelas de 15 reglas cada una y era fácil que
   se descuadraran: transporte y deporte, de hecho, se habían quedado sin
   color porque la lista seguía diciendo `.sec-metro`. */
.sec-noticias    { --sec: var(--sky); }
.sec-agenda      { --sec: var(--purple); }
.sec-tiempo      { --sec: var(--sky); }
.sec-aire        { --sec: var(--emerald); }
.sec-reciclaje   { --sec: var(--green); }
.sec-datos       { --sec: var(--cyan); }
.sec-emergencias { --sec: var(--rose); }
.sec-zonas       { --sec: var(--emerald); }
.sec-parking     { --sec: var(--violet); }
.sec-transporte  { --sec: var(--blue); }
.sec-equip       { --sec: var(--amber); }
.sec-restaurantes{ --sec: var(--rose); }
.sec-comercios   { --sec: var(--orange); }
.sec-deporte     { --sec: var(--emerald); }
.sec-farmacias   { --sec: var(--green); }
.sec-mapa        { --sec: var(--orange); }
.sec-socio       { --sec: var(--blue); }
.anuncio, .promo { --sec: var(--amber); }

/* Card Header */
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    gap: 0.75rem;
}
.card-header h2 {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

/* El icono hereda el color de la sección; no hace falta repetirlo por sección */
.card-header h2 i { color: var(--sec, var(--accent)); }

.badge {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.18rem 0.55rem;
    border-radius: 100px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    color: var(--text-dim);
    white-space: nowrap;
}

.loading-item { padding: 1rem 0; color: var(--text-muted); font-size: 0.85rem; }
.loading-item a { color: var(--sky); }
.chart-title { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); margin-bottom: 0.6rem; text-transform: uppercase; letter-spacing: 0.06em; }
.chart-wrap  { margin-top: 1.25rem; }
.chart-note  { font-size: 0.72rem; color: var(--text-dim); margin-top: 0.5rem; }

/* ============================================================
   TIEMPO
   ============================================================ */
/* .tiempo-detalles-grid usa la rejilla común (--min: 8.5rem): 4 columnas en la
   tarjeta ancha, 2 en móvil, sin media query. La temperatura grande y el
   emoji vivían aquí y se han quitado: ya están en la cabecera. */
.detalle {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.5rem 0.65rem;
    background: var(--surface2);
    border-radius: var(--radius-sm);
}
.detalle i { font-size: 0.8rem; margin-bottom: 0.1rem; }
.detalle span { font-size: 0.68rem; color: var(--text-muted); }
.detalle strong { font-size: 0.83rem; color: var(--text); font-weight: 600; }

.forecast-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.35rem;
}
.forecast-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.55rem 0.3rem;
    border-radius: var(--radius-sm);
    transition: background var(--transition);
    text-align: center;
}
.forecast-day:hover { background: var(--surface2); }
.forecast-day.today {
    background: rgba(96,165,250,0.1);
    border: 1px solid rgba(96,165,250,0.22);
}
.fc-dia { font-size: 0.65rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.forecast-day.today .fc-dia { color: var(--blue); }
.fc-max { font-size: 0.85rem; font-weight: 700; color: var(--text); }
.fc-min { font-size: 0.72rem; color: var(--text-muted); }
.fc-desc { font-size: 0.62rem; color: var(--text-dim); margin-top: 0.1rem; }

/* ============================================================
   AIRE
   ============================================================ */
.aire-layout {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.25rem;
    align-items: start;
}
.aqi-gauge-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.aqi-donut-container { position: relative; width: 160px; height: 160px; }
.aqi-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
/* El canvas se declara 180×180, pero el contenedor mide 160: sin fijarle alto
   sobresalía 20px por abajo y tapaba la etiqueta. Se le fuerza el mismo tamaño
   que el contenedor para que el arco se vea entero y la etiqueta quede libre. */
#chart-aqi-donut  { width: 160px !important; height: 160px !important; }
/* Medio donut: el hueco está en la mitad superior, ahí va el número */
.aqi-center       { transform: translateY(-13%); }
.aqi-num          { font-size: 2rem; font-weight: 900; letter-spacing: -0.04em; line-height: 1; }
.aqi-unit         { font-size: 0.62rem; color: var(--text-dim); }
.aqi-label-center { font-size: 0.85rem; font-weight: 700; }

.aqi-scale { display: flex; flex-direction: column; gap: 0.2rem; width: 100%; }
.scale-item { font-size: 0.63rem; padding: 0.18rem 0.5rem; border-radius: var(--radius-xs); font-weight: 500; }
.scale-item.muy-bueno  { background: rgba(5,150,105,0.18);  color: #34d399; }
.scale-item.bueno      { background: rgba(52,211,153,0.15); color: #6ee7b7; }
.scale-item.razonable  { background: rgba(245,158,11,0.18); color: #fde68a; }
.scale-item.regular    { background: rgba(239,68,68,0.18);  color: #fca5a5; }
.scale-item.malo       { background: rgba(239,68,68,0.28);  color: #ef4444; }
.scale-item.muy-malo   { background: rgba(127,29,29,0.28);  color: #fca5a5; }

.contaminantes-grid { display: flex; flex-direction: column; gap: 0.65rem; }
.cont-item    { display: flex; flex-direction: column; gap: 0.2rem; }
.cont-header  { display: flex; justify-content: space-between; align-items: center; }
.cont-name    { font-size: 0.78rem; font-weight: 600; }
.cont-val     { font-size: 0.72rem; color: var(--text-muted); }
.cont-bar-track { height: 5px; background: var(--surface2); border-radius: 100px; overflow: hidden; }
.cont-bar-fill  { height: 100%; border-radius: 100px; transition: width 0.5s ease; }
.cont-limite  { font-size: 0.62rem; color: var(--text-dim); }

/* ============================================================
   RECICLAJE
   ============================================================ */
.reciclaje-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.recic-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.6rem 0.7rem;
    border-radius: var(--radius-sm);
    background: var(--surface2);
    border-left: 3px solid transparent;
}
.recic-item.gris    { border-left-color: #6b7280; }
.recic-item.amarillo { border-left-color: #f59e0b; }
.recic-item.azul    { border-left-color: #3b82f6; }
.recic-item.verde   { border-left-color: #22c55e; }
.recic-item.marron  { border-left-color: #92400e; }
.recic-item.naranja { border-left-color: #f97316; }
.recic-ico    { font-size: 1rem; }
.recic-nombre { font-size: 0.8rem; font-weight: 600; }
.recic-dias   { font-size: 0.68rem; color: var(--text-muted); }

.hoy-recogida {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.8rem;
    background: rgba(96,165,250,0.08);
    border: 1px solid rgba(96,165,250,0.18);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    color: var(--sky);
    margin-bottom: 1rem;
}

.punto-limpio-item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--border);
}
.punto-limpio-item:last-child { border-bottom: none; }
.punto-limpio-item > i { color: var(--green); margin-top: 0.2rem; font-size: 0.9rem; flex-shrink: 0; }
.pl-nombre  { font-size: 0.82rem; font-weight: 600; }
.pl-dir     { font-size: 0.73rem; color: var(--text-muted); margin-top: 0.1rem; display: flex; align-items: center; gap: 0.3rem; }
.pl-horario { font-size: 0.7rem; color: var(--text-dim); margin-top: 0.1rem; }

/* ============================================================
   DATOS DEL DISTRITO
   ============================================================ */
/* Era una lista de filas: quince renglones iguales que había que leer uno a
   uno. Como cada dato es una cifra suelta y sin relación con la siguiente,
   funciona mejor en rejilla: la cifra grande primero, la etiqueta debajo. */
.datos-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
    gap: 0.6rem;
}
.dato-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    padding: 0.8rem 0.75rem;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition), transform var(--transition);
}
.dato-card:hover { border-color: var(--sec, var(--accent)); transform: translateY(-1px); }
.dato-ico {
    width: 30px; height: 30px;
    border-radius: var(--radius-xs);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0;
    margin-bottom: 0.35rem;
}
.dato-ico.blue   { background: rgba(96,165,250,0.14); color: var(--blue); }
.dato-ico.green  { background: rgba(74,222,128,0.14); color: var(--green); }
.dato-ico.orange { background: rgba(251,146,60,0.14); color: var(--orange); }
.dato-ico.purple { background: rgba(167,139,250,0.14);color: var(--violet); }
.dato-ico.yellow { background: rgba(251,191,36,0.14); color: var(--amber); }
.dato-ico.red    { background: rgba(248,113,113,0.14);color: var(--red); }
.dato-ico.cyan   { background: rgba(34,211,238,0.14); color: var(--cyan); }
.dato-val   { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.dato-label { font-size: 0.72rem; color: var(--text-muted); line-height: 1.25; }
.dato-source { font-size: 0.6rem; color: var(--text-dim); margin-top: 0.3rem; }

/* ============================================================
   EMERGENCIAS
   ============================================================ */
.emergencias-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
.emergencia-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.75rem;
    background: var(--surface2);
    border-radius: var(--radius-sm);
    text-align: center;
}
.emerg-num   { font-size: 1.75rem; font-weight: 900; letter-spacing: -0.04em; line-height: 1; }
.emerg-label { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.1rem; }
.emerg-num.red    { color: var(--red); }
.emerg-num.orange { color: var(--orange); }
.emerg-num.blue   { color: var(--blue); }
.emerg-num.green  { color: var(--green); }

/* ============================================================
   ZONAS VERDES
   ============================================================ */
.zona-verde-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.5rem;
    border-radius: var(--radius-sm);
    border-bottom: 1px solid var(--border);
    transition: background var(--transition);
}
.zona-verde-item:hover { background: var(--surface2); }
.zona-verde-item:last-of-type { border-bottom: none; }
.zv-nombre { font-size: 0.82rem; }
.zv-sup    { font-size: 0.8rem; font-weight: 700; color: var(--emerald); white-space: nowrap; }

.urban-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.5rem;
    margin-top: 0.5rem;
    background: var(--surface2);
    border-radius: var(--radius-sm);
}
.urban-stat-label { font-size: 0.78rem; color: var(--text-muted); }
.urban-stat-val.green { font-size: 0.9rem; font-weight: 700; color: var(--green); }

/* ============================================================
   APARCAMIENTOS
   ============================================================ */
.aparcamiento-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
}
.aparcamiento-item:last-child { border-bottom: none; }
.ap-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.3rem; }
.ap-nombre { font-size: 0.85rem; font-weight: 600; }
.ap-plazas-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 100px;
    background: rgba(167,139,250,0.12);
    color: var(--violet);
    border: 1px solid rgba(167,139,250,0.25);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}
.ap-dir { font-size: 0.75rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.35rem; }

/* ============================================================
   METRO
   ============================================================ */
.metro-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.metro-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.85rem;
    border-radius: 100px;
    border: 1.5px solid var(--border);
    background: var(--surface2);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
}
.metro-tab:hover { border-color: rgba(255,255,255,0.2); color: var(--text); }
.metro-tab[data-line="5"].active  { background: #7DC242; border-color: #7DC242; color: #fff; }
.metro-tab[data-line="6"].active  { background: #9B9B9D; border-color: #9B9B9D; color: #fff; }
.metro-tab[data-line="11"].active { background: #009739; border-color: #009739; color: #fff; }

.metro-num-badge {
    width: 20px; height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}
.metro-tab[data-line="5"]  .metro-num-badge { background: #7DC242; }
.metro-tab[data-line="6"]  .metro-num-badge { background: #9B9B9D; }
.metro-tab[data-line="11"] .metro-num-badge { background: #009739; }
.metro-tab.active .metro-num-badge { background: rgba(255,255,255,0.25); }

.metro-panel { display: none; }
.metro-panel.active { display: block; }

.metro-stops-list {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    padding-left: 0.75rem;
    border-left: 3px solid var(--border);
}
[data-line="5"]  .metro-stops-list { border-left-color: #7DC242; }
[data-line="6"]  .metro-stops-list { border-left-color: #9B9B9D; }
[data-line="11"] .metro-stops-list { border-left-color: #009739; }

.metro-stop {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.3rem 0.5rem;
    border-radius: var(--radius-sm);
    transition: background var(--transition);
}
.metro-stop:hover { background: var(--surface2); }

.metro-stop-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid var(--surface);
}
[data-line="5"]  .metro-stop-dot { background: #7DC242; box-shadow: 0 0 0 1.5px #7DC242; }
[data-line="6"]  .metro-stop-dot { background: #9B9B9D; box-shadow: 0 0 0 1.5px #9B9B9D; }
[data-line="11"] .metro-stop-dot { background: #009739; box-shadow: 0 0 0 1.5px #009739; }

.metro-stop-name   { font-size: 0.82rem; font-weight: 500; flex: 1; }
.metro-stop-badges { display: flex; align-items: center; gap: 0.3rem; flex-shrink: 0; }
.metro-corr-badge {
    width: 18px; height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 800;
    color: #fff;
}
.metro-access-ico { font-size: 0.72rem; color: var(--sky); }

.metro-info-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border);
    font-size: 0.75rem;
}
.metro-info-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--sky);
    font-weight: 500;
    transition: opacity var(--transition);
}
.metro-info-link:hover { opacity: 0.75; }
.metro-info-link i { font-size: 0.8rem; }
.metro-leyenda { color: var(--text-dim); margin-left: auto; }

/* ============================================================
   TRANSPORTE PÚBLICO (sección combinada metro + buses)
   ============================================================ */
.sec-transporte { border-top: 3px solid var(--blue); }
.sec-transporte .card-header h2 i { color: var(--blue); }

.trans-tabs { display: flex; gap: 0.4rem; margin-bottom: 1rem; flex-wrap: wrap; }
.trans-tab { background: var(--surface2); border: 1px solid var(--border); color: var(--muted); border-radius: 8px; padding: 0.42rem 0.9rem; font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; gap: 0.4rem; }
.trans-tab:hover { border-color: rgba(255,255,255,0.25); color: var(--text); }
.trans-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.trans-panel { display: none; }
.trans-panel.active { display: block; }

.bus-lines-list { display: flex; flex-direction: column; }
.bus-line-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.48rem 0.25rem; border-bottom: 1px solid var(--border); }
.bus-line-row:last-child { border-bottom: none; }
.bus-num-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 24px; border-radius: 5px; font-size: 0.72rem; font-weight: 700; padding: 0 0.4rem; flex-shrink: 0; letter-spacing: 0.03em; }
.bus-num-badge.emt     { background: #003087; color: #fff; }
.bus-num-badge.buho    { background: #1a1a2e; color: #a78bfa; border: 1px solid rgba(167,139,250,0.5); }
.bus-num-badge.interurb { background: #15803d; color: #fff; }
.bus-route { font-size: 0.82rem; color: var(--text); flex: 1; }
.bus-arrow { color: var(--muted); margin: 0 0.2rem; font-size: 0.75rem; }
.bus-info-bar { margin-top: 0.85rem; padding-top: 0.7rem; border-top: 1px solid var(--border); font-size: 0.78rem; color: var(--muted); display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.bus-info-bar a { color: var(--accent); text-decoration: none; }
.bus-info-bar a:hover { text-decoration: underline; }
.bus-interurb-note { margin-top: 0.85rem; font-size: 0.78rem; color: var(--muted); padding: 0.65rem 0.8rem; background: var(--surface2); border-radius: var(--radius-sm); border-left: 3px solid var(--green); line-height: 1.5; }

/* ============================================================
   FARMACIAS DE GUARDIA
   ============================================================ */
.sec-farmacias { border-top: 3px solid var(--green); }
.farmacia-days { display: flex; flex-direction: column; gap: 0.5rem; }
.farmacia-day-hdr {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--text-muted);
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.4rem;
}
.farmacia-day-hdr.is-today { color: var(--green); }
.farmacia-hoy-badge { background: var(--green); color: #fff; font-size: 0.58rem; padding: 0.1rem 0.4rem; border-radius: 4px; }
.farmacia-item {
    display: flex; align-items: flex-start; gap: 0.7rem;
    padding: 0.6rem 0.75rem;
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: var(--radius-sm); margin-bottom: 0.35rem;
}
.farmacia-item:last-child { margin-bottom: 0; }
.farmacia-item-ico {
    width: 30px; height: 30px; border-radius: 7px;
    background: rgba(74,222,128,0.12); color: var(--green);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; flex-shrink: 0;
}
.farmacia-item-ico.h24 { background: rgba(251,146,60,0.12); color: var(--orange); }
.farmacia-item-body { flex: 1; min-width: 0; }
.farmacia-item-name { font-size: 0.84rem; font-weight: 600; }
.farmacia-item-meta { font-size: 0.73rem; color: var(--text-muted); margin-top: 0.12rem; line-height: 1.55; }
.farmacia-item-meta a { color: var(--accent); text-decoration: none; }
.farmacia-item-meta a:hover { text-decoration: underline; }
.farmacia-tipo-badge { font-size: 0.63rem; font-weight: 700; padding: 0.15rem 0.4rem; border-radius: 4px; flex-shrink: 0; align-self: flex-start; }
.farmacia-tipo-badge.h24    { background: rgba(251,146,60,0.15); color: var(--orange); border: 1px solid rgba(251,146,60,0.35); }
.farmacia-tipo-badge.diurna { background: rgba(56,189,248,0.15); color: var(--sky);    border: 1px solid rgba(56,189,248,0.35); }
.farmacia-empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--text-muted); font-size: 0.82rem; line-height: 1.7; }
.farmacia-footer { margin-top: 0.85rem; padding-top: 0.65rem; border-top: 1px solid var(--border); font-size: 0.72rem; color: var(--text-dim); }
/* Selector de día: dos botones para hoy y mañana (el 95 % de las consultas)
   y un desplegable nativo para el resto. Una sola línea en cualquier pantalla,
   sin scroll horizontal y con el selector del sistema en el móvil. */
.farmacia-day-picker {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
    flex-wrap: wrap;
}
.farmacia-rapidos { display: flex; gap: 0.4rem; }
.farmacia-select-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 11rem;
}
.farmacia-select-wrap > i {
    position: absolute;
    right: 0.7rem;
    font-size: 0.65rem;
    color: var(--text-dim);
    pointer-events: none;
}
.farmacia-select {
    width: 100%;
    appearance: none;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 0.3rem 1.8rem 0.3rem 0.7rem;
    cursor: pointer;
}
.farmacia-select:hover { color: var(--text); }
/* Texto solo para lectores de pantalla */
.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.farmacia-day-btn { padding: 0.3rem 0.7rem; border-radius: 20px; border: 1px solid var(--border); background: var(--surface2); color: var(--text-muted); font-size: 0.75rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.farmacia-day-btn:hover { background: var(--surface3); color: var(--text); border-color: var(--text-muted); }
.farmacia-day-btn.active { background: rgba(74,222,128,0.15); color: var(--green); border-color: var(--green); }

/* ============================================================
   EQUIPAMIENTOS
   ============================================================ */
.equip-tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.etab {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.38rem 0.75rem;
    border-radius: 100px;
    border: 1.5px solid var(--border);
    background: var(--surface2);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
}
.etab:hover { border-color: rgba(255,255,255,0.2); color: var(--text); }
.etab.active { background: var(--amber); border-color: var(--amber); color: #1a0f00; }

.equip-panel { display: none; }
.equip-panel.active { display: block; }

.equip-card {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.75rem;
    background: var(--surface2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    transition: border-color var(--transition);
    position: relative;
}
.equip-card:hover { border-color: rgba(255,255,255,0.15); }

.equip-card-ico {
    width: 32px; height: 32px;
    border-radius: var(--radius-xs);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.equip-card-ico.biblioteca { background: rgba(167,139,250,0.14); color: var(--violet); }
.equip-card-ico.deporte    { background: rgba(251,191,36,0.14);  color: var(--amber); }
.equip-card-ico.cultura    { background: rgba(251,146,60,0.14);  color: var(--orange); }
.equip-card-ico.salud      { background: rgba(248,113,113,0.14); color: var(--red); }
.equip-card-ico.mayores    { background: rgba(34,211,238,0.14);  color: var(--cyan); }
.equip-card-ico.educacion  { background: rgba(96,165,250,0.14);  color: var(--blue); }

.equip-card-body   { flex: 1; min-width: 0; }
.equip-card-nombre { font-size: 0.8rem; font-weight: 600; margin-bottom: 0.2rem; line-height: 1.3; }
.equip-card-dir, .equip-card-tel { font-size: 0.7rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.3rem; margin-top: 0.15rem; }
.equip-card-tel a  { color: var(--sky); }

.equip-card-map {
    width: 28px; height: 28px;
    border-radius: var(--radius-xs);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.78rem;
    flex-shrink: 0;
    transition: opacity var(--transition);
    align-self: center;
}
.equip-card-map:hover { opacity: 0.7; }
.equip-card-map.biblioteca { background: rgba(167,139,250,0.14); color: var(--violet); }
.equip-card-map.deporte    { background: rgba(251,191,36,0.14);  color: var(--amber); }
.equip-card-map.cultura    { background: rgba(251,146,60,0.14);  color: var(--orange); }
.equip-card-map.salud      { background: rgba(248,113,113,0.14); color: var(--red); }
.equip-card-map.mayores    { background: rgba(34,211,238,0.14);  color: var(--cyan); }
.equip-card-map.educacion  { background: rgba(96,165,250,0.14);  color: var(--blue); }

/* ============================================================
   NOTICIAS
   ============================================================ */
.noticia-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.85rem 0.5rem;
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: background var(--transition);
}
.noticia-item:last-child { border-bottom: none; }
.noticia-item:hover { background: var(--surface2); }
.noticia-item.noticia-custom { border-left: 3px solid var(--amber); padding-left: 0.75rem; background: rgba(251,191,36,0.04); }
.noticia-titulo { font-size: 0.88rem; font-weight: 600; line-height: 1.35; }

/* «Esto abre otra web». Discreto —no compite con el titular— pero suficiente
   para saber antes de pulsar si te vas del sitio. */
.enlace-fuera {
    font-size: 0.62em;
    margin-left: 0.35em;
    vertical-align: 0.15em;
    color: var(--text-dim);
    transition: color var(--transition);
}
a:hover .enlace-fuera { color: var(--text-muted); }
.noticia-desc   { font-size: 0.75rem; color: var(--text-muted); line-height: 1.4; }
.noticia-fecha  { font-size: 0.68rem; color: var(--text-dim); display: flex; align-items: center; gap: 0.3rem; }
.item-custom-badge { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.6rem; font-weight: 700; color: var(--amber); background: rgba(251,191,36,0.12); border: 1px solid rgba(251,191,36,0.3); padding: 0.1rem 0.4rem; border-radius: 100px; width: fit-content; }
/* Aviso automático procedente de datos abiertos (mercadillos) */
.aviso-badge { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.6rem; font-weight: 700; color: var(--orange); background: rgba(251,146,60,0.12); border: 1px solid rgba(251,146,60,0.3); padding: 0.1rem 0.4rem; border-radius: 100px; width: fit-content; }

/* ============================================================
   DATOS SOCIOECONÓMICOS — KPIs y estadísticas
   ============================================================ */
.socio-kpis { margin-bottom: 1.1rem; }
.kpi {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.85rem 0.9rem;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.kpi-num   { font-size: 1.5rem; font-weight: 800; line-height: 1.1; color: var(--accent); }
.kpi-num small { font-size: 0.85rem; font-weight: 600; opacity: 0.6; }
.kpi-label { font-size: 0.74rem; color: var(--text-muted); line-height: 1.3; }
.kpi-src   { font-size: 0.65rem; color: var(--text-dim); }

.socio-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.7rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.socio-num   { font-size: 1.1rem; font-weight: 800; line-height: 1.15; }
.socio-label { font-size: 0.7rem; color: var(--text-muted); line-height: 1.3; }

.socio-fuente {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border);
    font-size: 0.75rem;
    color: var(--text-dim);
    line-height: 1.5;
}
.socio-fuente a { color: var(--accent); text-decoration: underline; }

/* ============================================================
   MAPA INTERACTIVO (Leaflet + OpenStreetMap)
   ============================================================ */
.mapa-capas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}
.mapa-capa {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.34rem 0.7rem;
    border-radius: 100px;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text-dim);
    background: var(--surface2);
    border: 1px solid var(--border);
    transition: color var(--transition), border-color var(--transition), background var(--transition);
}
/* Activa: se tiñe del color con que se pinta esa capa en el mapa */
.mapa-capa.activa {
    color: var(--capa-color, var(--accent));
    border-color: var(--capa-color, var(--accent));
    background: color-mix(in srgb, var(--capa-color, #38bdf8) 14%, transparent);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .mapa-capa.activa { background: var(--surface); }
}
.mapa-capa .capa-n { font-size: 0.66rem; font-weight: 700; opacity: 0.7; }

.mapa-interactivo {
    height: 460px;
    width: 100%;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface2);
    z-index: 1;   /* por debajo de cabeceras pegajosas */
}
@media (max-width: 720px) { .mapa-interactivo { height: 340px; } }

/* En tema oscuro se invierten SOLO las teselas para que el mapa no deslumbre
   junto al resto del panel. El doble giro de tono devuelve los verdes a verde
   y los azules a azul; los marcadores y ventanas quedan intactos porque están
   en otro panel de Leaflet. */
[data-theme="dark"] .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.92) saturate(0.85);
}

/* Ventana emergente de cada punto, integrada con el tema */
.leaflet-popup-content-wrapper {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}
.leaflet-popup-tip { background: var(--surface); border: 1px solid var(--border); }
.leaflet-popup-content { margin: 0.7rem 0.85rem; font-size: 0.8rem; line-height: 1.45; }
.leaflet-popup-content .pop-desc  { color: var(--text-muted); font-size: 0.74rem; }
.leaflet-popup-content .pop-extra { color: var(--green); font-size: 0.72rem; font-weight: 600; }
.leaflet-popup-content .pop-link  { display: inline-block; margin-top: 0.4rem; color: var(--accent); font-weight: 600; font-size: 0.74rem; }
.leaflet-container a.leaflet-popup-close-button { color: var(--text-muted); }
.leaflet-control-attribution {
    background: rgba(0,0,0,0.55) !important;
    color: #cbd5e1 !important;
    font-size: 0.62rem !important;
}
.leaflet-control-attribution a { color: #93c5fd !important; }
[data-theme="light"] .leaflet-control-attribution {
    background: rgba(255,255,255,0.8) !important;
    color: #475569 !important;
}

/* ============================================================
   DEPORTE EN EL BARRIO
   ============================================================ */
.sub-titulo {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.88rem;
    font-weight: 700;
    margin-bottom: 0.6rem;
    color: var(--text);
}
.sub-titulo i { color: var(--accent); font-size: 0.85rem; }
.sub-contador {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border-radius: 100px;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text-muted);
}

.dep-card {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.85rem;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.dep-nombre  { font-size: 0.84rem; font-weight: 600; line-height: 1.35; }
.dep-dir     { font-size: 0.74rem; display: flex; align-items: flex-start; gap: 0.3rem; }
.dep-horario { font-size: 0.71rem; color: var(--text-muted); display: flex; align-items: flex-start; gap: 0.3rem; line-height: 1.4; }
.dep-tel     { font-size: 0.74rem; color: var(--green); display: inline-flex; align-items: center; gap: 0.3rem; }

.pista-item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.55rem 0.7rem;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    transition: border-color var(--transition);
}
.pista-item:hover { border-color: var(--emerald); }
.pista-nombre { font-size: 0.78rem; font-weight: 600; }
.pista-dir    { font-size: 0.68rem; color: var(--text-dim); }
/* Las que superan las 12 primeras se ocultan hasta pulsar «Ver más» */
.pista-extra  { display: none; }

/* ── Teléfonos de emergencia ── */
.emerg-tel {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.8rem 0.9rem;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition), transform var(--transition);
}
.emerg-tel:hover  { border-color: var(--rose); transform: translateY(-1px); }
.emerg-tel.destacado { background: rgba(251,113,133,0.1); border-color: rgba(251,113,133,0.4); }
.emerg-tel-num   { font-size: 1.35rem; font-weight: 800; color: var(--rose); line-height: 1.1; }
.emerg-tel.destacado .emerg-tel-num { font-size: 1.8rem; }
.emerg-tel-label { font-size: 0.72rem; color: var(--text-muted); line-height: 1.35; }

/* ============================================================
   PUBLICIDAD — bloques propios, sin scripts de terceros
   ============================================================ */
.anuncio {
    position: relative;
    padding: 0;
    overflow: hidden;
    border-style: dashed;
    border-color: rgba(255,255,255,0.10);
    /* Sin content-visibility: un anuncio debe pintarse aunque el navegador
       decida saltarse el contenido fuera de pantalla. */
    content-visibility: visible;
}
.anuncio-label {
    position: absolute;
    top: 0.5rem;
    right: 0.6rem;
    z-index: 2;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
    background: var(--surface);
    padding: 0.12rem 0.4rem;
    border-radius: 100px;
    border: 1px solid var(--border);
}
.anuncio-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.15rem;
    transition: background var(--transition);
}
a.anuncio-link:hover { background: var(--surface2); }
.anuncio-img {
    max-height: 92px;
    max-width: 190px;
    width: auto;
    height: auto;
    border-radius: var(--radius-sm);
    object-fit: contain;
    flex-shrink: 0;
}
.anuncio-cuerpo { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.anuncio-titulo { font-size: 0.95rem; font-weight: 700; }
.anuncio-texto  { font-size: 0.8rem; color: var(--text-muted); line-height: 1.45; }
.anuncio-cta {
    margin-top: 0.3rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
a.anuncio-link:hover .anuncio-cta i { transform: translateX(3px); transition: transform var(--transition); }
@media (max-width: 560px) {
    .anuncio-link { flex-direction: column; align-items: flex-start; gap: 0.65rem; }
    .anuncio-img  { max-width: 100%; max-height: 140px; }
}

/* ============================================================
   AGENDA
   ============================================================ */
/* ── Filtros de la agenda (chips) ── */
.agenda-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.9rem;
}
.agenda-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.74rem;
    font-weight: 600;
    padding: 0.34rem 0.7rem;
    border-radius: 100px;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.agenda-chip:hover { color: var(--text); border-color: rgba(255,255,255,0.18); }
.agenda-chip.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #04121f;
}
.agenda-chip .chip-n {
    font-size: 0.66rem;
    font-weight: 700;
    opacity: 0.65;
}
.agenda-chip.chip-gratis { color: var(--green); border-color: rgba(74,222,128,0.35); }
.agenda-chip.chip-gratis.active { background: var(--green); border-color: var(--green); color: #05210f; }

.agenda-vermas {
    display: block;
    width: 100%;
    margin-top: 0.9rem;
    padding: 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: color var(--transition), border-color var(--transition);
}
.agenda-vermas:hover { color: var(--text); border-color: rgba(255,255,255,0.18); }

.evento-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.9rem;
    background: var(--surface2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    transition: border-color var(--transition), transform var(--transition);
}
.evento-card:hover { border-color: rgba(255,255,255,0.15); transform: translateY(-1px); }
.evento-card.evento-custom { border-color: rgba(251,191,36,0.35); background: linear-gradient(145deg, var(--surface2) 70%, rgba(251,191,36,0.06)); }
.evento-head { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
.evento-cat-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.18rem 0.55rem;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.evento-distrito-badge { font-size: 0.65rem; color: var(--text-dim); }
/* Actividad gratuita: el dato `free` del Ayuntamiento, lo que más busca el vecino */
.evento-gratis-badge {
    font-size: 0.63rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.16rem 0.45rem;
    border-radius: 100px;
    color: var(--green);
    background: rgba(74,222,128,0.14);
    border: 1px solid rgba(74,222,128,0.35);
    white-space: nowrap;
}
.evento-encurso-badge {
    font-size: 0.63rem;
    font-weight: 700;
    padding: 0.16rem 0.45rem;
    border-radius: 100px;
    color: var(--sky);
    background: rgba(56,189,248,0.12);
    border: 1px solid rgba(56,189,248,0.3);
    white-space: nowrap;
}
.evento-publico { font-size: 0.68rem; color: var(--text-dim); display: inline-flex; align-items: center; gap: 0.25rem; }
.evento-head { flex-wrap: wrap; }
.evento-titulo { font-size: 0.82rem; font-weight: 600; line-height: 1.35; }
.evento-lugar  { font-size: 0.72rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.3rem; }
.evento-meta   { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.1rem; }
.evento-fecha, .evento-hora { font-size: 0.68rem; color: var(--text-dim); display: flex; align-items: center; gap: 0.3rem; }

/* ============================================================
   MAPA
   ============================================================ */
.mapa-layout {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.25rem;
    align-items: start;
}
.mapa-embed-wrap { border-radius: var(--radius-sm); overflow: hidden; }
.mapa-iframe { width: 100%; height: 340px; border: none; display: block; }
.mapa-links  { display: flex; flex-direction: column; gap: 0.4rem; min-width: 195px; }

.mapa-link-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.48rem 0.65rem;
    border-radius: var(--radius-sm);
    background: var(--surface2);
    border: 1px solid var(--border);
    transition: border-color var(--transition);
    font-size: 0.78rem;
}
.mapa-link-item:hover { border-color: rgba(255,255,255,0.18); }

.mapa-link-ico {
    width: 28px; height: 28px;
    border-radius: var(--radius-xs);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
}
.mapa-link-arrow { font-size: 0.65rem; color: var(--text-dim); margin-left: auto; flex-shrink: 0; }

.barrios-grid { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.barrio-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.65rem;
    border-radius: 100px;
    background: var(--surface2);
    border: 1px solid var(--border);
    font-size: 0.72rem;
    color: var(--text-muted);
    transition: all var(--transition);
}
.barrio-chip:hover { border-color: rgba(255,255,255,0.2); color: var(--text); }

/* ============================================================
   SOCIOECONOMICO
   ============================================================ */
.socio-content { padding: 0; }
.socio-subsection { margin-bottom: 1.5rem; }

.desempleo-stats { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.75rem; }
.des-stat  { display: flex; flex-direction: column; gap: 0.1rem; text-align: center; }
.des-num   { font-size: 1.4rem; font-weight: 900; line-height: 1; }
.des-label { font-size: 0.65rem; color: var(--text-muted); }
.des-num.red    { color: var(--red); }
.des-num.orange { color: var(--orange); }
.des-num.green  { color: var(--green); }

.hogares-total, .comercio-total {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.hogares-total strong, .comercio-total strong { color: var(--text); }

.ruido-limites { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.ruido-lim-badge { font-size: 0.68rem; padding: 0.2rem 0.6rem; border-radius: 100px; font-weight: 600; }
.ruido-lim-badge.diurno   { background: rgba(251,191,36,0.15); color: var(--amber); border: 1px solid rgba(251,191,36,0.3); }
.ruido-lim-badge.nocturno { background: rgba(96,165,250,0.15); color: var(--blue);  border: 1px solid rgba(96,165,250,0.3); }

.seguridad-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.seg-stat  { display: flex; flex-direction: column; gap: 0.1rem; text-align: center; padding: 0.5rem; background: var(--surface2); border-radius: var(--radius-sm); }
.seg-num   { font-size: 1.25rem; font-weight: 900; line-height: 1; }
.seg-label { font-size: 0.62rem; color: var(--text-muted); }
.seg-num.blue   { color: var(--blue); }
.seg-num.green  { color: var(--green); }
.seg-num.orange { color: var(--orange); }
.seg-num.purple { color: var(--purple); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
    border-top: 1px solid var(--border);
    padding: 1.25rem 0;
    color: var(--text-muted);
    font-size: 0.75rem;
}
.footer { padding-top: 2rem; }
.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 1.75rem;
    padding-bottom: 1.5rem;
}
.footer-marca strong { display: block; font-size: 0.95rem; color: var(--text); margin-bottom: 0.4rem; }
.footer-marca p      { line-height: 1.6; max-width: 34rem; }
.footer-marca strong + p strong { color: var(--text-muted); font-weight: 700; }

.footer h2 {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text);
    margin-bottom: 0.6rem;
}
.footer-nav ul { list-style: none; display: grid; gap: 0.35rem; }
.footer-nav a  { color: var(--text-muted); }
.footer-nav a:hover { color: var(--sky); text-decoration: underline; }

.footer-ayuda p { line-height: 1.55; margin-bottom: 0.6rem; }
.footer-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.8rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    transition: border-color var(--transition), color var(--transition);
}
.footer-btn:hover { border-color: var(--rose); color: var(--text); }

.footer-ig {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    transition: color var(--transition);
    flex-shrink: 0;
}
.footer-ig i {
    font-size: 1.05rem;
    /* El degradado de Instagram sobre el propio icono: se recorta al glifo */
    background: linear-gradient(45deg, #f09433, #dc2743 45%, #bc1888);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.footer-ig:hover { color: var(--text); text-decoration: underline; }

.footer-legal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    font-size: 0.72rem;
    color: var(--text-dim);
}
/* Las fuentes ocupan el hueco que quede; Instagram y la firma no se encogen */
.footer-fuentes { flex: 1 1 18rem; }
.footer-hecho   { flex-shrink: 0; }
@media (max-width: 640px) {
    .footer-legal { justify-content: flex-start; }
    .footer-hecho { display: none; }   /* ya lo dice el bloque de marca */
}
.footer-legal a { color: var(--text-muted); text-decoration: underline; }
.footer-legal a:hover { color: var(--sky); }
.footer-link-btn {
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    background: none;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0;
}
.footer-link-btn:hover { color: var(--text); }

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.72);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    backdrop-filter: blur(4px);
}
.modal-overlay.active { display: flex; }
.modal-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    max-width: 620px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}
.modal-header h3 { font-size: 0.95rem; font-weight: 700; display: flex; align-items: center; gap: 0.5rem; }
.modal-close {
    width: 30px; height: 30px;
    border-radius: var(--radius-xs);
    background: var(--surface2);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
    cursor: pointer;
    color: var(--text-muted);
    transition: background var(--transition);
    border: none;
}
.modal-close:hover { background: var(--border); }
.modal-body { padding: 1.25rem; }
.modal-intro { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 1rem; line-height: 1.5; }
.modal-section-title { font-size: 0.72rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; margin: 1rem 0 0.5rem; display: flex; align-items: center; gap: 0.4rem; }
.sources-grid { display: flex; flex-direction: column; gap: 0.4rem; }
.source-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface2); transition: border-color var(--transition); }
.source-item:hover { border-color: rgba(255,255,255,0.15); }
.src-ico { width: 32px; height: 32px; border-radius: var(--radius-xs); background: rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; color: var(--sky); flex-shrink: 0; }
.source-item div { display: flex; flex-direction: column; gap: 0.1rem; }
.source-item strong { font-size: 0.8rem; }
.source-item span   { font-size: 0.68rem; color: var(--text-muted); }

/* ============================================================
   HERO LOGO
   ============================================================ */
.hero-brand {
    flex: 1;
    min-width: 160px;
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.hero-logo {
    height: 68px;
    width: 68px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}
@media (max-width: 720px) {
    .hero-logo { height: 54px; width: 54px; }
}
@media (max-width: 480px) {
    .hero-logo { height: 44px; width: 44px; }
    .hero-brand { gap: 0.55rem; }
}

/* ============================================================
   COLLAPSIBLE SECTIONS
   ============================================================ */
.card-header-right { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; }
.collapse-btn { background: none; border: none; color: var(--muted); cursor: pointer; padding: 0.2rem 0.35rem; border-radius: var(--radius-sm); font-size: 0.8rem; flex-shrink: 0; line-height: 1; }
.collapse-btn:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.collapse-btn i { transition: transform 0.2s; display: inline-block; }
.card[data-collapsed="true"] .collapse-btn i { transform: rotate(-90deg); }
.card[data-collapsed="true"] > *:not(.card-header) { display: none !important; }

/* ============================================================
   RESTAURANTES
   ============================================================ */
.rest-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.9rem;
    background: var(--surface2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    transition: border-color var(--transition), transform var(--transition);
}
.rest-card:hover { border-color: rgba(255,255,255,0.15); transform: translateY(-1px); }
.rest-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.rest-nombre { font-size: 0.88rem; font-weight: 700; }
.rest-precio {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 100px;
    background: rgba(251,113,133,0.12);
    color: var(--rose);
    border: 1px solid rgba(251,113,133,0.25);
    white-space: nowrap;
}
.rest-tipo {
    font-size: 0.68rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.rest-desc { font-size: 0.78rem; color: var(--text-muted); line-height: 1.4; }
.rest-dir  { font-size: 0.72rem; color: var(--text-dim); display: flex; align-items: center; gap: 0.3rem; }
.rest-actions { display: flex; gap: 0.4rem; margin-top: 0.2rem; }
.rest-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 100px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    color: var(--text-muted);
    transition: all var(--transition);
    cursor: pointer;
}
.rest-btn:hover { border-color: rgba(255,255,255,0.2); color: var(--text); }
.rest-btn.maps { color: var(--rose); border-color: rgba(251,113,133,0.3); background: rgba(251,113,133,0.08); }
.rest-btn.web  { color: var(--sky);  border-color: rgba(56,189,248,0.3);  background: rgba(56,189,248,0.08); }

/* Patrocinado */
.patrocinado-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--amber);
    background: rgba(251,191,36,0.1);
    border: 1px solid rgba(251,191,36,0.3);
    padding: 0.12rem 0.45rem;
    border-radius: 100px;
    white-space: nowrap;
    flex-shrink: 0;
}
.rest-card.patrocinado {
    border-color: rgba(251,191,36,0.35);
    background: linear-gradient(145deg, var(--surface2) 70%, rgba(251,191,36,0.06));
}
.rest-card.patrocinado:hover { border-color: rgba(251,191,36,0.6); }
.comercio-card.patrocinado {
    border-color: rgba(251,191,36,0.35);
    background: linear-gradient(145deg, var(--surface2) 70%, rgba(251,191,36,0.06));
}
.comercio-card.patrocinado:hover { border-color: rgba(251,191,36,0.6); }
.comercio-web {
    width: 28px; height: 28px;
    border-radius: var(--radius-xs);
    background: rgba(56,189,248,0.1);
    color: var(--sky);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
    align-self: center;
    transition: opacity var(--transition);
}
.comercio-web:hover { opacity: 0.7; }

/* ============================================================
   COMERCIOS
   ============================================================ */
.comercio-tipo-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-dim);
    padding: 0.6rem 0 0.3rem;
    margin-top: 0.25rem;
    border-top: 1px solid var(--border);
}
.comercio-tipo-label:first-child { border-top: none; padding-top: 0; }
.comercio-card {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.7rem;
    background: var(--surface2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    transition: border-color var(--transition);
}
.comercio-card:hover { border-color: rgba(255,255,255,0.15); }
.comercio-ico {
    width: 32px; height: 32px;
    border-radius: var(--radius-xs);
    background: rgba(251,146,60,0.12);
    color: var(--orange);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.comercio-body { flex: 1; min-width: 0; }
.comercio-nombre { font-size: 0.82rem; font-weight: 600; margin-bottom: 0.15rem; }
.comercio-desc { font-size: 0.72rem; color: var(--text-muted); line-height: 1.3; }
.comercio-dir  { font-size: 0.68rem; color: var(--text-dim); display: flex; align-items: center; gap: 0.25rem; margin-top: 0.2rem; }

/* ============================================================
   BUSCADOR GLOBAL (cabecera)

   Una sola caja que busca en todo lo que ya está cargado: farmacias,
   equipamientos, agenda, comercios, paradas de metro, teléfonos…
   El índice lo genera PHP (inc/buscador.php) y el filtrado es de cliente:
   no hay ninguna petición al servidor mientras se escribe.
   ============================================================ */
.buscador {
    position: relative;
    margin-top: 0.9rem;
    max-width: 560px;
}
.buscador-caja {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 100px;
    padding: 0.5rem 0.9rem;
    transition: background var(--transition), border-color var(--transition);
}
.buscador-caja:focus-within {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.4);
}
.buscador-caja > i { color: rgba(255,255,255,0.7); font-size: 0.85rem; }
.buscador-input {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    outline: none;
    color: #fff;
    font-family: inherit;
    font-size: 0.9rem;
    /* 16px reales en móvil evitarían el zoom de iOS al enfocar; como la caja
       vive en el hero y el hero no se amplía, se compensa con el tamaño mínimo */
    min-height: 1.4rem;
}
.buscador-input::placeholder { color: rgba(255,255,255,0.6); }
.buscador-limpiar {
    color: rgba(255,255,255,0.7);
    font-size: 0.8rem;
    padding: 0.2rem;
    display: none;
}
.buscador.tiene-texto .buscador-limpiar { display: block; }

.buscador-res {
    position: absolute;
    z-index: 60;
    top: calc(100% + 0.4rem);
    left: 0;
    right: 0;
    max-height: min(60vh, 420px);
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 0.35rem;
    display: none;
}
.buscador-res.abierto { display: block; }
.buscador-res-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius-sm);
    color: var(--text);
}
.buscador-res-item:hover,
.buscador-res-item.marcado { background: var(--surface2); }
.buscador-res-ico {
    width: 30px; height: 30px;
    flex-shrink: 0;
    border-radius: var(--radius-xs);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem;
    background: rgba(255,255,255,0.07);
    color: var(--res-color, var(--accent));
}
.buscador-res-txt { min-width: 0; flex: 1; }
.buscador-res-tit {
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.buscador-res-sub {
    font-size: 0.7rem;
    color: var(--text-dim);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.buscador-res-sec {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    flex-shrink: 0;
}
.buscador-vacio { padding: 0.8rem 0.7rem; font-size: 0.8rem; color: var(--text-muted); }

/* Al llegar desde el buscador, la sección parpadea una vez para que se vea
   dónde ha caído el usuario */
@keyframes destello-sec {
    from { box-shadow: 0 0 0 3px var(--sec, var(--accent)); }
    to   { box-shadow: var(--shadow-sm); }
}
.card.destacada { animation: destello-sec 1.6s ease-out 1; }

/* ============================================================
   POLEN (dentro de Calidad del Aire)
   ============================================================ */
/* ============================================================
   AVISOS FLOTANTES (toasts)
   ============================================================ */
.toast-zona {
    position: fixed;
    top: max(0.75rem, env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: min(30rem, calc(100vw - 1.5rem));
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.75rem 0.85rem;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--emerald);
    box-shadow: var(--shadow);
    font-size: 0.82rem;
    line-height: 1.4;
    animation: toast-entra 0.24s ease;
}
.toast.toast-error { border-left-color: var(--rose); }
.toast > i         { margin-top: 0.1rem; flex-shrink: 0; color: var(--emerald); }
.toast-error > i   { color: var(--rose); }
.toast > span      { flex: 1; }
.toast-cerrar {
    flex-shrink: 0;
    color: var(--text-dim);
    padding: 0.1rem 0.2rem;
    border-radius: var(--radius-xs);
    line-height: 1;
}
.toast-cerrar:hover { color: var(--text); }
.toast.saliendo { animation: toast-sale 0.2s ease forwards; }

@keyframes toast-entra { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes toast-sale  { to   { opacity: 0; transform: translateY(-10px); } }

/* ============================================================
   ADJUNTOS DEL FORMULARIO VECINAL
   ============================================================ */
.adj-campo { margin-top: 0.75rem; }
/* El input de verdad se esconde sin usar display:none, que lo saca del orden
   de tabulación: así se sigue pudiendo elegir archivo con el teclado. */
.adj-input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    overflow: hidden;
}
.adj-boton {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.75rem;              /* se pulsa con el dedo, no con el ratón */
    padding: 0.5rem 0.9rem;
    border-radius: var(--radius-sm);
    border: 1.5px dashed var(--border);
    background: var(--surface2);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition);
}
.adj-boton:hover,
.adj-input:focus-visible + .adj-boton {
    border-color: var(--sky);
    color: var(--text);
}
.adj-input:focus-visible + .adj-boton { outline: 2px solid var(--accent); outline-offset: 2px; }
.adj-ayuda { display: block; font-size: 0.7rem; color: var(--text-dim); margin-top: 0.35rem; }

.adj-lista { list-style: none; margin-top: 0.5rem; display: grid; gap: 0.35rem; }
.adj-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.4rem 0.4rem 0.55rem;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    font-size: 0.78rem;
    animation: exito-entra 0.2s ease;
}
.adj-item > i    { color: var(--sky); flex-shrink: 0; width: 1.6rem; text-align: center; }
/* Miniatura de la foto: se ve de un vistazo si es la que se quería mandar */
.adj-mini {
    width: 2.4rem; height: 2.4rem;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: var(--radius-xs);
    background: var(--surface);
}
.adj-nombre      { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adj-peso        { color: var(--text-dim); font-size: 0.72rem; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.adj-quitar {
    flex-shrink: 0;
    width: 1.9rem; height: 1.9rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-xs);
    color: var(--text-dim);
    transition: color var(--transition), background var(--transition);
}
.adj-quitar:hover { color: var(--rose); background: rgba(251,113,133,0.12); }
.adj-total {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
}
.adj-total[hidden] { display: none; }
.adj-campo.con-archivos .adj-boton { border-style: solid; border-color: var(--sky); color: var(--text); }
@media (prefers-reduced-motion: reduce) { .adj-item { animation: none; } }

/* ============================================================
   SOLICITUD DE COMERCIO — planes, datos fiscales y errores
   ============================================================ */
.promo-planes {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.7rem 0.85rem;
    margin-top: 0.75rem;
    display: grid;
    gap: 0.5rem;
}
.promo-planes legend {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0 0.35rem;
}
.promo-plan {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface2);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
.promo-plan:hover { border-color: var(--amber); }
.promo-plan input { margin-top: 0.15rem; flex-shrink: 0; accent-color: var(--amber); }
.promo-plan:has(input:checked) {
    border-color: var(--amber);
    background: rgba(251,191,36,0.08);
}
.promo-plan strong { display: block; font-size: 0.82rem; font-weight: 700; }
.promo-plan small  { display: block; font-size: 0.74rem; color: var(--text-muted); margin-top: 0.15rem; }

.promo-fiscal {
    margin-top: 0.75rem;
    padding: 0.75rem 0.85rem;
    border: 1px dashed rgba(251,191,36,0.45);
    border-radius: var(--radius-sm);
    background: rgba(251,191,36,0.05);
}
.promo-fiscal[hidden] { display: none; }
/* Antes era un rótulo («¿CADA CUÁNTO?») y por eso iba en versalitas. Ahora
   lleva el precio, y `text-transform: uppercase` lo dejaba en «15 €/MES». */
.promo-fiscal-tit {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--amber);
    margin-bottom: 0.5rem;
}
/* Las reglas .promo-ciclo* (mes a mes / todo el año) se quitaron con el
   selector de ciclo: ahora el patrocinio tiene un solo precio, escrito desde
   admin → Publicidad, y el bloque solo lo confirma. */
.promo-fiscal-nota  { font-size: 0.72rem; color: var(--text-dim); margin-top: 0.6rem; line-height: 1.5; }

.promo-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin-top: 0.75rem;
    font-size: 0.76rem;
    color: var(--text-muted);
    cursor: pointer;
    flex-wrap: wrap;
}
.promo-consent input {
    margin-top: 0.05rem;
    flex-shrink: 0;
    accent-color: var(--amber);
    /* Casillas y radios del tamaño de un dedo: los del navegador son de 13px */
    width: 1.15rem; height: 1.15rem;
}
.promo-plan input { width: 1.15rem; height: 1.15rem; }
.promo-plan:focus-within,
.promo-consent:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }

/* Un campo con error se ve, no solo se anuncia. El icono acompaña al color:
   quien no distingue el rojo también tiene que enterarse. */
.campo-error {
    display: flex;
    align-items: flex-start;
    gap: 0.3rem;
    font-style: normal;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--rose);
    margin-top: 0.25rem;
    line-height: 1.4;
}
.campo-error::before {
    content: "\f06a";                  /* fa-circle-exclamation */
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 900;
    flex-shrink: 0;
    line-height: 1.5;
}
.promo-campo.con-error > span { color: var(--rose); }
.promo-campo.con-error input,
.promo-campo.con-error textarea {
    border-color: var(--rose);
    background: rgba(251,113,133,0.06);
}
.promo-campo.con-error input:focus,
.promo-campo.con-error textarea:focus {
    border-color: var(--rose);
    box-shadow: 0 0 0 3px rgba(251,113,133,0.2);
}
.promo-consent.con-error { color: var(--rose); }
.promo-consent.con-error .campo-error { flex-basis: 100%; }
.adj-campo.con-error .adj-boton { border-color: var(--rose); color: var(--rose); }

/* Sin medición de aire: se dice, no se rellena con una estimación */
.aire-sin-dato {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.9rem 1rem;
    background: var(--surface2);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
}
.aire-sin-dato > i { color: var(--text-dim); font-size: 1.1rem; margin-top: 0.1rem; flex-shrink: 0; }
.aire-sin-dato strong { display: block; font-size: 0.85rem; font-weight: 700; }
.aire-sin-dato span   { display: block; font-size: 0.78rem; color: var(--text-muted); margin-top: 0.2rem; }

.polen-aviso-nivel {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 0.4rem;
}
.polen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr));
    gap: 0.5rem;
}
.polen-item {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    padding: 0.5rem 0.65rem;
    background: var(--surface2);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--polen-color, var(--green));
}
.polen-nombre { font-size: 0.78rem; font-weight: 600; }
.polen-nivel  { font-size: 0.72rem; font-weight: 700; color: var(--polen-color, var(--green)); }
.polen-valor  { font-size: 0.68rem; color: var(--text-dim); }
.polen-valor small { font-size: 0.62rem; }

/* ============================================================
   AVISOS DEL DÍA

   Una línea por aviso, arriba del contenido. La idea es que se lea de un
   vistazo y no tape nada: título corto en negrita + la recomendación al lado.
   ============================================================ */
.avisos-tira { display: grid; gap: 0.4rem; }
.aviso-linea {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--aviso-color, var(--amber));
}
.aviso-linea > i {
    color: var(--aviso-color, var(--amber));
    font-size: 0.9rem;
    flex-shrink: 0;
}
.aviso-linea-txt {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
    line-height: 1.35;
}
.aviso-linea-txt strong { font-size: 0.82rem; font-weight: 700; }
.aviso-linea-txt span   { font-size: 0.76rem; color: var(--text-muted); }
.aviso-linea-txt:hover span { color: var(--text); }
.aviso-cerrar {
    color: var(--text-dim);
    font-size: 0.78rem;
    padding: 0.25rem 0.35rem;
    border-radius: var(--radius-xs);
    flex-shrink: 0;
}
.aviso-cerrar:hover { color: var(--text); background: var(--surface2); }

/* ============================================================
   RECLAMO PARA COMERCIOS («¿quieres aparecer aquí?»)

   Es el bloque que se enseña cuando una sección de negocio está vacía y,
   en pequeño, al final cuando ya tiene contenido. No es publicidad de
   terceros: es la oferta de la propia web, así que no lleva rel="sponsored".
   ============================================================ */
.promo {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.1rem;
    border-radius: var(--radius-sm);
    border: 1px dashed rgba(251,191,36,0.45);
    background: linear-gradient(135deg, rgba(251,191,36,0.08), transparent 70%);
}
.promo-ico {
    width: 44px; height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    color: var(--amber);
    background: rgba(251,191,36,0.14);
}
.promo-txt { flex: 1; min-width: 12rem; }
.promo-tit { font-size: 0.95rem; font-weight: 800; letter-spacing: -0.01em; }
.promo-sub { font-size: 0.8rem; color: var(--text-muted); line-height: 1.45; margin-top: 0.15rem; }
.promo-acciones { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.promo-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.95rem;
    border-radius: 100px;
    font-size: 0.78rem;
    font-weight: 700;
    background: var(--amber);
    color: #1a1205;
    white-space: nowrap;
    transition: filter var(--transition);
}
.promo-btn:hover { filter: brightness(1.1); }
.promo-btn.secundario {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
}
.promo-btn.secundario:hover { color: var(--text); }

/* Versión reducida al pie de una sección que ya tiene comercios */
.promo.compacta { padding: 0.75rem 0.9rem; margin-top: 0.9rem; }
.promo.compacta .promo-ico { width: 34px; height: 34px; font-size: 0.9rem; }
.promo.compacta .promo-tit { font-size: 0.82rem; }
.promo.compacta .promo-sub { font-size: 0.74rem; }

/* El canal vecinal es información, no venta: tarjeta propia en tono neutro */
.sec-vecinal { --sec: var(--sky); }
.promo.vecinal {
    border: 1px solid var(--border);
    background: var(--surface2);
}
.promo.vecinal .promo-ico { color: var(--sky); background: rgba(56,189,248,0.12); }
.promo.vecinal .promo-btn:not(.secundario) { background: var(--sky); color: #04202e; }

/* ── Formulario del reclamo ── */
.promo-form {
    flex-basis: 100%;
    display: grid;
    gap: 0.6rem;
    margin-top: 0.3rem;
    padding-top: 0.9rem;
    border-top: 1px dashed var(--border);
}
.promo-form[hidden] { display: none; }
.promo-form-fila {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: 0.6rem;
}
.promo-campo { display: grid; gap: 0.3rem; }
.promo-campo > span {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
/* El asterisco de «obligatorio»: se ve, no se lee en voz alta (aria-hidden) */
.req { color: var(--amber); font-style: normal; font-weight: 700; margin-left: 0.15rem; }

.promo-campo input,
.promo-campo textarea {
    width: 100%;
    font-family: inherit;
    /* 16px reales: por debajo de eso, Safari de iPhone hace zoom al tocar el
       campo y deja la página descolocada al salir. */
    font-size: 1rem;
    line-height: 1.4;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.75rem;
    min-height: 2.75rem;              /* objetivo cómodo para un dedo */
    resize: vertical;
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.promo-campo textarea { min-height: 5.5rem; }
.promo-campo input::placeholder,
.promo-campo textarea::placeholder { color: var(--text-dim); opacity: 1; }
.promo-campo input:hover,
.promo-campo textarea:hover { border-color: rgba(148,163,184,0.35); }
.promo-campo input:focus,
.promo-campo textarea:focus {
    outline: none;
    border-color: var(--amber);
    box-shadow: 0 0 0 3px rgba(251,191,36,0.18);
}
.promo.vecinal .promo-campo input:focus,
.promo.vecinal .promo-campo textarea:focus {
    border-color: var(--sky);
    box-shadow: 0 0 0 3px rgba(56,189,248,0.18);
}
/* A partir de tableta el campo puede volver a su tamaño de texto normal: el
   zoom de iOS solo ocurre en pantallas de móvil. */
@media (min-width: 48rem) {
    .promo-campo input,
    .promo-campo textarea { font-size: 0.88rem; min-height: 2.5rem; }
}

/* Cuántos caracteres quedan; solo aparece cuando el final está cerca */
.campo-contador {
    font-size: 0.7rem;
    color: var(--text-dim);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.campo-contador.pocos { color: var(--amber); font-weight: 700; }

.promo-form-pie { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.promo-nota { font-size: 0.7rem; color: var(--text-dim); flex: 1; min-width: 12rem; line-height: 1.45; }

/* Botón mientras se envía: se ve que está trabajando y no se puede pulsar dos veces */
.promo-btn:disabled { opacity: 0.65; cursor: progress; filter: none; }
.promo-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Acuse de recibo: ocupa el sitio del formulario tras enviarlo ── */
.promo-exito {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-top: 0.3rem;
    padding: 0.9rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(52,211,153,0.35);
    background: rgba(52,211,153,0.08);
    animation: exito-entra 0.28s ease;
}
.promo-exito[hidden] { display: none; }
.promo-exito:focus { outline: none; }
.promo-exito:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.promo-exito-ico {
    width: 38px; height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--emerald);
    background: rgba(52,211,153,0.15);
    font-size: 1.05rem;
}
.promo-exito-txt { flex: 1; min-width: 12rem; }
.promo-exito-txt strong { display: block; font-size: 0.88rem; font-weight: 700; }
.promo-exito-txt small  { display: block; font-size: 0.75rem; color: var(--text-muted); margin-top: 0.2rem; line-height: 1.45; }

@keyframes exito-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes form-entra  { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.promo-form:not([hidden]) { animation: form-entra 0.22s ease; }

@media (prefers-reduced-motion: reduce) {
    .promo-form:not([hidden]), .promo-exito { animation: none; }
}

/* ============================================================
   ATENCIÓN AL CIUDADANO — Junta, comisarías, hospital
   ============================================================ */
.sec-oficinas { --sec: var(--amber); }
.ofi-bloque + .ofi-bloque {
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px dashed var(--border);
}
.ofi-tit {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.ofi-tit i { color: var(--sec, var(--amber)); }
.ofi-nota {
    font-size: 0.75rem;
    color: var(--text-dim);
    line-height: 1.5;
    margin-top: 0.3rem;
}
.ofi-item {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border);
}
.ofi-item:last-child { border-bottom: none; }
.ofi-nombre { font-size: 0.88rem; font-weight: 600; line-height: 1.35; }
.ofi-dato {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}
.ofi-dato > i { color: var(--text-dim); font-size: 0.72rem; flex-shrink: 0; }

/* ============================================================
   CÁMARAS DE TRÁFICO
   ============================================================ */
.sec-camaras { --sec: var(--blue); }
.cam-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
    gap: 0.7rem;
}
.cam-item {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0;
    text-align: left;
    border-radius: var(--radius-sm);
    background: none;
}
.cam-foto {
    position: relative;
    display: block;
    /* 16:9 porque es lo que manda el Ayuntamiento (1280×720). Estaba a 4:3, y
       con object-fit:cover eso recortaba los lados de cada foto: justo donde
       está el cruce que se quiere mirar.

       La proporción se reserva ANTES de que llegue la imagen: sin esto, cada
       cámara que carga empuja a las de abajo y la rejilla salta entera. */
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface2);
    border: 1px solid var(--border);
}
.cam-foto img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.cam-foto img.cargada { opacity: 1; }
.cam-item:hover .cam-foto { border-color: var(--blue); }
.cam-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cam-titulo {
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-muted);
}
.cam-item:hover .cam-titulo { color: var(--text); }

/* Una cámara caída es normal: se dice, en vez de dejar el hueco roto */
.cam-estado {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-dim);
    background: var(--surface2);
}
.cam-estado[hidden] { display: none; }

.cam-nota {
    font-size: 0.72rem;
    color: var(--text-dim);
    line-height: 1.55;
    margin-top: 0.85rem;
}
.cam-nota > i { margin-right: 0.25rem; }

/* ── Visor a pantalla completa ── */
.cam-visor {
    width: min(56rem, calc(100vw - 1.5rem));
    max-height: 92vh;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow);
    overflow: hidden;
}
/* `.es-modal` lo pone el JS cuando showModal() ha funcionado de verdad, y NO
   se usa el selector :modal. Motivo: hubo versiones de Safari con showModal()
   pero sin :modal, y ahí la regla entera se descartaba: el visor perdía el
   position:fixed, se colocaba dentro de la tarjeta a 100vw × 100dvh y reventaba
   la página con la foto gigante. Con una clase normal eso no puede pasar. */
.cam-visor.es-modal { position: fixed; inset: 0; margin: auto; }
.cam-visor::backdrop { background: rgba(3, 7, 18, 0.82); }
.cam-visor:not([open]) { display: none; }
.cam-visor-cab {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--border);
}
.cam-visor-tit { font-size: 0.9rem; font-weight: 700; line-height: 1.3; }
.cam-visor-pos {
    font-size: 0.72rem;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.cam-visor-cab .aviso-cerrar { margin-left: auto; }
.cam-visor-foto {
    position: relative;
    background: #000;              /* la foto no siempre llena el hueco */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 12rem;
}
.cam-visor-foto img {
    max-width: 100%;
    max-height: 70vh;
    display: block;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.cam-visor-foto img.cargada { opacity: 1; }
.cam-visor-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.75rem; height: 2.75rem;   /* objetivo cómodo para el pulgar */
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    transition: background var(--transition);
}
.cam-visor-nav:hover { background: rgba(0, 0, 0, 0.7); }
.cam-visor-nav.prev { left: 0.5rem; }
.cam-visor-nav.next { right: 0.5rem; }
.cam-visor-pie {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.65rem 0.85rem;
    border-top: 1px solid var(--border);
}
.cam-visor-hora { font-size: 0.72rem; color: var(--text-dim); flex: 1; }

/* El botón de girar solo tiene sentido donde la pantalla es más alta que
   ancha; en el escritorio la foto ya se ve grande y girarla sería un estorbo. */
.cam-girar { display: none; }

@media (max-width: 30rem) {
    .cam-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: 0.5rem; }
    .cam-titulo { font-size: 0.7rem; }
}

/* ── El visor en el móvil ──────────────────────────────────────────────────
   Una foto de 1280×720 en un móvil de 390 px de ancho se queda en 219 px de
   alto: se ve, pero no se distingue si el cruce está atascado, que es justo a
   lo que se entra. Aquí se hace dos cosas: el visor ocupa la pantalla entera
   —sin bordes ni márgenes que roben sitio— y se puede girar la imagen para
   que use el alto del móvil en vez del ancho, que es casi el doble. */
@media (max-width: 48rem) {
    .cam-visor {
        width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        border: none;
        display: flex;
        flex-direction: column;
    }
    .cam-visor-foto {
        flex: 1;
        min-height: 0;            /* sin esto, un hijo flex no encoge nunca */
    }
    .cam-visor-foto img {
        width: 100%;
        height: 100%;
        max-height: none;
        object-fit: contain;
    }
    .cam-girar { display: inline-flex; }
}

/* Girada: la imagen se mide contra el hueco real (lo calcula el JS en
   --cam-alto/--cam-ancho, que es más fiable que adivinar cuánto ocupa la barra
   del navegador). Al rotar, lo que era el ancho de la foto pasa a ser su alto
   en pantalla, así que se le da como ancho el alto del hueco. */
.cam-visor.girado .cam-visor-foto { overflow: hidden; }
.cam-visor.girado .cam-visor-foto img {
    width: min(var(--cam-alto, 70vh), calc(var(--cam-ancho, 100vw) * 16 / 9));
    height: auto;
    max-width: none;
    max-height: none;
    object-fit: fill;
    transform: rotate(90deg);
}

/* ============================================================
   AVISAR DE UN ERROR — el formulario del pie, en cualquier página
   ============================================================ */
.aviso {
    width: min(34rem, calc(100vw - 2rem));
    max-height: min(88vh, 46rem);
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow);
    overflow: auto;
    overscroll-behavior: contain;
}
/* Centrado de verdad, en los dos ejes. Con `.es-modal` (la pone el JS cuando
   showModal() ha funcionado) y no con :modal, que hay navegadores que soportan
   showModal() pero no ese selector: allí la regla se descartaba entera y el
   diálogo se quedaba colocado dentro de la página en vez de encima. */
.aviso.es-modal {
    position: fixed;
    inset: 0;
    margin: auto;
}
.aviso::backdrop { background: rgba(3, 7, 18, 0.62); backdrop-filter: blur(2px); }
.aviso[open] { animation: aviso-entra 0.22s ease; }
/* Sin <dialog> (o sin JS) queda como un bloque normal al final del pie:
   se ve, se rellena y se envía igual. */
.aviso:not([open]) { display: none; }
.aviso-form { display: grid; gap: 0.7rem; padding: 1.1rem 1.15rem 1.25rem; }
.aviso-cab { display: flex; align-items: center; gap: 0.6rem; }
.aviso-cab h2 {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.aviso-cab h2 i { color: var(--amber); }
.aviso-cerrar {
    margin-left: auto;
    width: 2.2rem; height: 2.2rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    transition: color var(--transition), background var(--transition);
}
.aviso-cerrar:hover { color: var(--text); background: var(--surface2); }
.aviso-intro { font-size: 0.82rem; color: var(--text-muted); line-height: 1.55; }
.aviso-pagina {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
    font-size: 0.74rem;
    color: var(--text-dim);
    line-height: 1.5;
}
.aviso-pagina i { color: var(--text-dim); }
.aviso-pagina code {
    font-size: 0.72rem;
    padding: 0.1rem 0.35rem;
    border-radius: var(--radius-xs);
    background: var(--surface2);
    color: var(--text-muted);
    word-break: break-all;
}
.aviso .promo-resultado { margin-bottom: 0; }

@keyframes aviso-entra { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .aviso[open] { animation: none; } }

/* En el móvil, igual de centrado pero aprovechando el ancho */
@media (max-width: 30rem) {
    .aviso {
        width: calc(100vw - 1.25rem);
        max-height: 85vh;
    }
    .aviso-form { padding: 1rem 1rem 1.15rem; }
}

/* Sin JavaScript (o sin <dialog>) no hay modal: el formulario se queda como un
   bloque normal al final del pie. Así se ve entero, se rellena y se envía; un
   position:fixed sin backdrop sería una caja flotante imposible de cerrar. */
.aviso[open]:not(.es-modal) {
    position: static;
    margin: 1.5rem auto;
    max-height: none;
}

/* Campo trampa para bots: fuera de pantalla, nunca oculto con display:none
   (algunos bots detectan display:none y saltan el campo). */
.hp-campo {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}

/* Confirmación tras enviar el formulario */
.promo-resultado {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    margin-bottom: 0.9rem;
    background: rgba(52,211,153,0.12);
    border: 1px solid rgba(52,211,153,0.35);
    color: var(--emerald);
}
.promo-resultado.error {
    background: rgba(248,113,113,0.12);
    border-color: rgba(248,113,113,0.35);
    color: var(--red);
}

/* ============================================================
   SCROLL-TO-TOP BUTTON
   ============================================================ */
.btn-top {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    box-shadow: 0 4px 16px rgba(96,165,250,0.4);
    cursor: pointer;
    transition: all var(--transition);
    border: none;
    z-index: 100;
}
.btn-top.visible { display: flex; }
.btn-top:hover { background: var(--sky); transform: translateY(-2px); }

/* ============================================================
   LIGHT THEME ADJUSTMENTS
   ============================================================ */
[data-theme="light"] .card { box-shadow: 0 2px 10px rgba(0,0,0,0.07); }
[data-theme="light"] .badge { background: rgba(0,0,0,0.04); }
[data-theme="light"] .recic-item,
[data-theme="light"] .equip-card,
[data-theme="light"] .emergencia-stat,
[data-theme="light"] .detalle,
[data-theme="light"] .seg-stat { background: #f4f7fb; }
/* El :not(.active) NO es decorativo: sin él, estas reglas tienen la misma
   especificidad que «.etab.active» (dos clases) y, como van después en el
   fichero, ganaban y le borraban el fondo a la pestaña elegida. En tema claro
   no se veía cuál estaba seleccionada. */
[data-theme="light"] .metro-tab:not(.active) { background: #f4f7fb; border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .etab:not(.active)      { background: #f4f7fb; border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .trans-tab:not(.active) { background: #f4f7fb; border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .evento-card, [data-theme="light"] .mapa-link-item { background: #f4f7fb; }
[data-theme="light"] .hpill     { color: rgba(255,255,255,0.9); }
[data-theme="light"] .btn-hero  { color: rgba(255,255,255,0.9); }

/* ============================================================
   RESPONSIVE

   Aquí solo queda lo que NO se puede resolver desde el propio layout.
   Las rejillas de tarjetas, el grid principal y los márgenes ya se adaptan
   solos (auto-fill + min(100%,…) + clamp), así que sus reglas de móvil se
   han borrado: eran ~15 líneas que había que recordar actualizar cada vez
   que se tocaba una rejilla.
   ============================================================ */

/* Rejillas de tamaño fijo: estas sí necesitan un punto de corte explícito */
@media (max-width: 900px) {
    .aire-layout        { grid-template-columns: 1fr; }
    .mapa-layout        { grid-template-columns: 1fr; }
    .mapa-links         { min-width: unset; width: 100%; }
    .seguridad-stats    { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
    .hero-top { gap: 0.75rem; }
    .hero-temp { font-size: 3.25rem; }
    .hero-emoji { font-size: 3rem; }
    /* Los 7 días no caben en móvil: se desplazan en horizontal dentro de la
       tarjeta (con min-width:0 en la tarjeta, esto ya no desborda la página). */
    .forecast-grid {
        grid-template-columns: repeat(7, minmax(68px, 1fr));
        overflow-x: auto;
        padding-bottom: 0.35rem;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }
    .forecast-grid > * { scroll-snap-align: start; }
}

@media (max-width: 480px) {
    .hero-weather { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
    .hero-temp  { font-size: 2.75rem; }
    .hero-emoji { font-size: 2.4rem; }
    .hero-title { font-size: 1.25rem; }
    .hero-actions { gap: 0.3rem; }
    .btn-hero { width: 32px; height: 32px; font-size: 0.8rem; }
    .reciclaje-grid { grid-template-columns: 1fr; }
    .emergencias-grid { grid-template-columns: 1fr 1fr; }
    .dato-source { display: none; }
    .kpi-num         { font-size: 1.3rem; }
    .emerg-tel.destacado .emerg-tel-num { font-size: 1.6rem; }
    /* Texto secundario nunca por debajo de 11px: eran ilegibles en móvil */
    .kpi-src, .pista-dir, .evento-publico, .socio-fuente { font-size: 0.7rem; }
}


/* ============================================================
   PÁGINAS DE CONTENIDO (/asociaciones y las que vengan)

   Comparten los tokens del panel pero se leen distinto: aquí se viene a
   LEER una lista, no a mirar de un vistazo. Por eso hay más aire, el
   ancho de línea es menor y las fichas no compiten entre sí.
   ============================================================ */
/* La cabecera de una página es la MISMA que la de la portada: el degradado
   azul de `.hero`, que ya viene puesto en el HTML. Aquí solo se ajusta el
   espacio; el fondo NO se toca a propósito.

   Antes había aquí un `background` propio con un tinte suave, y eso provocaba
   el fallo del tema claro: `.pag-hero` (una clase) perdía contra
   `[data-theme="light"] .hero` (atributo + clase), así que en claro salía el
   degradado azul mientras el texto seguía usando var(--text) —casi negro— y
   el título no se leía. */
.pag-hero { padding: 1.25rem 0 1.75rem; }

/* Sobre el degradado, el texto va SIEMPRE en blanco, en los dos temas: el
   fondo es azul oscuro tanto en claro como en oscuro, así que las variables
   de texto del tema no valen aquí. */
.pag-migas {
    display: flex; align-items: center; gap: .5rem;
    font-size: .75rem; color: rgba(255,255,255,0.55); margin-bottom: .9rem;
}
.pag-migas a { color: rgba(255,255,255,0.75); }
.pag-migas a:hover { color: #fff; text-decoration: underline; }
.pag-migas i { font-size: .6rem; }

.pag-titulo {
    display: flex; align-items: center; gap: .7rem;
    font-size: clamp(1.5rem, 4vw, 2.1rem);
    font-weight: 800; letter-spacing: -.02em; line-height: 1.15;
    color: #fff;
}
/* El color de la página se queda solo en el icono, para seguir distinguiendo
   una página de otra. Se aclara con blanco antes de pintarlo: algunos colores
   de la paleta (el azul, el violeta) sobre el degradado azul del hero se
   quedaban sin contraste. Si el navegador no soporta color-mix, cae al color
   tal cual, que es lo que había antes. */
.pag-titulo i {
    font-size: .8em;
    color: var(--zc, var(--sky));
    color: color-mix(in srgb, var(--zc, var(--sky)) 65%, white);
}
.pag-entradilla {
    margin-top: .6rem; max-width: 46ch;
    font-size: .92rem; color: rgba(255,255,255,0.78); line-height: 1.6;
}

.pag-main { padding: 1.75rem var(--page-pad) 3rem; max-width: var(--page-max); }

/* Índice de categorías */
.pag-indice { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.75rem; }
.pag-indice a {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .4rem .75rem; border-radius: 100px;
    border: 1px solid var(--border); background: var(--surface2);
    font-size: .78rem; font-weight: 600; color: var(--text-muted);
    transition: border-color var(--transition), color var(--transition);
}
.pag-indice a:hover { border-color: var(--zc, var(--sky)); color: var(--text); }
.pag-indice span { font-size: .7rem; color: var(--text-dim); }

.pag-bloque { margin-bottom: 2.25rem; scroll-margin-top: 1rem; }
.pag-bloque-tit {
    display: flex; align-items: center; gap: .5rem;
    font-size: .78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: var(--text-muted); margin-bottom: .9rem;
    padding-bottom: .5rem; border-bottom: 1px solid var(--border);
}
.pag-bloque-tit i { color: var(--zc, var(--sky)); }

/* Fichas */
.fichas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
    gap: .85rem;
}
.ficha {
    display: flex; flex-direction: column; gap: .6rem;
    padding: 1rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    transition: border-color var(--transition), transform var(--transition);
}
.ficha:hover { border-color: var(--zc, var(--sky)); transform: translateY(-2px); }
.ficha-cab { display: flex; align-items: flex-start; gap: .65rem; }
.ficha-ico {
    flex-shrink: 0; width: 2.2rem; height: 2.2rem; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center; font-size: .85rem;
    color: var(--zc, var(--sky));
    background: color-mix(in srgb, var(--zc, var(--sky)) 14%, transparent);
}
.ficha-nombre { font-size: .95rem; font-weight: 700; line-height: 1.25; }
.ficha-cat    { font-size: .7rem; color: var(--text-dim); }
.ficha-desc   { font-size: .82rem; color: var(--text-muted); line-height: 1.55; }

.ficha-datos { list-style: none; display: grid; gap: .3rem; font-size: .78rem; }
.ficha-datos li { display: flex; align-items: flex-start; gap: .45rem; color: var(--text-muted); }
.ficha-datos i  { color: var(--text-dim); width: .9rem; margin-top: .15rem; flex-shrink: 0; }
.ficha-datos a  { color: var(--text-muted); }
.ficha-datos a:hover { color: var(--zc, var(--sky)); text-decoration: underline; }

.ficha-enlaces { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: .2rem; }
.ficha-enlace {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .6rem; border-radius: var(--radius-xs);
    background: var(--surface2); border: 1px solid var(--border);
    font-size: .72rem; font-weight: 600; color: var(--text-muted);
}
.ficha-enlace:hover { border-color: var(--zc, var(--sky)); color: var(--text); }

/* «Apuntarse» es la acción de la ficha, no un enlace más de la fila */
.ficha-enlace.principal {
    background: color-mix(in srgb, var(--zc, var(--sky)) 16%, transparent);
    border-color: color-mix(in srgb, var(--zc, var(--sky)) 40%, transparent);
    color: var(--text);
}

/* La foto: el hueco lo reserva el aspect-ratio, así que la lista no pega el
   salto cuando cada imagen termina de llegar. */
.ficha-foto {
    width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
    border-radius: var(--radius-sm); background: var(--surface2);
    margin: -.25rem 0 .1rem;
}

/* Gratis se ve de lejos: es el dato que hace que alguien se apunte. El color
   no va solo —el icono del regalo dice lo mismo sin depender de la vista. */
.ficha-datos li.es-gratis      { color: var(--emerald); font-weight: 600; }
.ficha-datos li.es-gratis i    { color: var(--emerald); }
.ficha-datos strong            { font-weight: 600; color: var(--text-dim); }

.ficha-revisado {
    margin-top: .1rem; font-size: .68rem; color: var(--text-dim);
    display: flex; align-items: center; gap: .3rem;
}

/* Patrocinado: el mismo ámbar que en restaurantes y comercios, para que
   signifique lo mismo en toda la web. */
.ficha.patrocinado {
    border-color: rgba(251,191,36,0.35);
    background: linear-gradient(145deg, var(--surface) 70%, rgba(251,191,36,0.06));
}
.ficha.patrocinado:hover { border-color: rgba(251,191,36,0.6); }
.ficha-cab .patrocinado-badge { margin-left: auto; }

.pag-aviso.patrocinio       { border-color: rgba(251,191,36,0.35); }
.pag-aviso.patrocinio > i   { color: var(--amber); }

/* Puente de la agenda a /cursos: una línea al final de la tarjeta */
.agenda-puente {
    display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
    margin-top: .9rem; padding-top: .75rem;
    border-top: 1px solid var(--border);
    font-size: .78rem; color: var(--text-muted);
}
.agenda-puente i { color: var(--violet); }
.agenda-puente a { font-weight: 600; color: var(--violet); }
.agenda-puente a:hover { text-decoration: underline; }

/* Vacío: una invitación, no un error */
.pag-vacio { text-align: center; padding: 3rem 1rem; max-width: 34rem; margin: 0 auto; }
.pag-vacio > i  { font-size: 2.5rem; color: var(--zc, var(--sky)); opacity: .3; }
.pag-vacio h2   { font-size: 1.1rem; font-weight: 700; margin: .9rem 0 .5rem; }
.pag-vacio p    { font-size: .87rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 1.25rem; }

.pag-cta {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .55rem 1rem; border-radius: var(--radius-sm);
    background: var(--zc, var(--sky)); color: #04121f;
    font-size: .82rem; font-weight: 700; flex-shrink: 0;
}
.pag-cta:hover { filter: brightness(1.08); }

.pag-aviso {
    display: flex; align-items: center; gap: .85rem; flex-wrap: wrap;
    padding: 1rem 1.1rem; margin-top: 1rem;
    border: 1px dashed var(--border); border-radius: var(--radius);
    background: var(--surface2);
}
.pag-aviso > i      { color: var(--zc, var(--sky)); font-size: 1.1rem; }
.pag-aviso strong   { display: block; font-size: .85rem; }
.pag-aviso span     { display: block; font-size: .78rem; color: var(--text-muted); }
.pag-aviso > div    { flex: 1 1 14rem; }

/* Enlace desde la portada a las páginas de contenido: una franja, no una
   tarjeta. La portada no debe crecer por esto. */
.mas-barrio {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    padding: .85rem 1rem;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface2);
}
.mas-barrio i      { color: var(--emerald); }
.mas-barrio strong { font-size: .85rem; }
.mas-barrio span   { font-size: .78rem; color: var(--text-muted); }
.mas-barrio a      { margin-left: auto; font-size: .8rem; font-weight: 700; color: var(--emerald); }
.mas-barrio a:hover { text-decoration: underline; }