/* ============================================================
   Descubre Llanes 2026 · v2 — Estilos
   Guía Clotitec Mapas Interactivos v2 + decisiones vivas:
   tokens semánticos en :root / html[data-theme="dark"], glass
   pills, emojis nativos, modo kiosko 65".
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  --brand: #0e8a72;
  --brand-strong: #0a6355;
  /* Relleno de marca con texto encima. En claro va #0A6355 con blanco (7,17:1):
     con --brand (#0E8A72) el par se queda en 4,29:1 y estos botones llevan
     texto de .68-.92rem, por debajo del umbral de texto grande. En oscuro NO
     puede heredar lo mismo — ver el bloque dark. Decisión de marca 2026-08-13. */
  --brand-fill: #0a6355;
  --brand-soft: #e2f2ee;
  --accent: #0e8a72;
  --accent-bright: #57ac9b;

  --bg: #fcfaf6;
  --surface: #ffffff;
  --surface-2: #f2ece1;
  --text: #14231a;
  --text-2: #5b6b60;
  --line: rgba(6, 61, 51, .09);

  --glass: rgba(255, 255, 255, .92);
  --glass-2: rgba(237, 240, 238, .88);
  --glass-blur: blur(24px) saturate(180%);
  /* sombras teñidas del verde de marca, no negro puro */
  --shadow-1: 0 2px 6px rgba(6, 61, 51, .10);
  --shadow-2: 0 10px 34px rgba(6, 61, 51, .16);
  --ring: 0 0 0 3px rgba(14, 138, 114, .45);

  --ok: #16a34a;
  --warn: #d97706;
  --danger: #dc2626;

  --radius: 14px;
  --radius-s: 10px;
  --pill-h: 42px;

  --hero-1: #042a23;
  --hero-2: #063d33;
  --hero-3: #0a6355;
}

html[data-theme="dark"] {
  --brand: #57ac9b;
  --brand-strong: #0e8a72;
  /* En oscuro el relleno lleva texto TINTA (#042a23), no blanco: sobre #57AC9B
     da 5,72:1, mientras que oscurecerlo a #0E8A72 lo bajaría a 3,60:1. Por eso
     aquí --brand-fill se queda en el tono claro, al revés que en tema claro. */
  --brand-fill: #57ac9b;
  --brand-soft: rgba(87, 172, 155, .14);
  --accent: #57ac9b;
  --accent-bright: #a9d5cb;

  --bg: #0b1210;
  --surface: #131c17;
  --surface-2: #1a2620;
  --text: #e8f0ea;
  --text-2: #9fb2a6;
  --line: rgba(255, 255, 255, .10);

  --glass: rgba(19, 28, 23, .90);
  --glass-2: rgba(26, 38, 32, .86);
  --shadow-1: 0 2px 6px rgba(0, 0, 0, .35);
  --shadow-2: 0 10px 34px rgba(0, 0, 0, .5);
}

/* ---------- 2. Base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: var(--accent); }
img { max-width: 100%; }
[hidden] { display: none !important; }

/* Interacción viva: foco visible, pulsación física, transiciones suaves */
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }
button, .f-row, .sb-item, .chip { transition: background .18s, color .18s, transform .16s, box-shadow .18s; }
button:active, .f-action:active, .filter-chip:active, .floating-pill:active, .landing-cta:active, .landing-mode:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.icon-btn {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-size: 16px;
  background: var(--surface-2); color: var(--text-2);
  transition: background .15s;
}
.icon-btn:hover { background: var(--line); color: var(--text); }

/* ---------- 3. Landing ---------- */
#landing { min-height: 100%; overflow-y: auto; position: fixed; inset: 0; z-index: 60; background: var(--bg); }

.landing-hero {
  position: relative;
  background: linear-gradient(160deg, var(--hero-1), var(--hero-2) 55%, var(--hero-3));
  color: #e2f2ee;
  text-align: center;
  padding: clamp(48px, 9vh, 96px) 24px clamp(40px, 7vh, 72px);
  overflow: hidden;
}
/* Profundidad del hero: resplandores radiales + grano sutil (sin assets externos) */
.landing-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(52% 44% at 82% 8%, rgba(87, 172, 155, .16), transparent 70%),
    radial-gradient(46% 40% at 12% 92%, rgba(14, 138, 114, .12), transparent 70%);
}
.landing-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.landing-hero > * { position: relative; z-index: 1; }
/* Perfil costa→cumbres: motivo bespoke (no plantilla) que ancla el producto
   -- "de la costa a los Picos de Europa" -- en vez de solo un degradado. */
.hero-skyline { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 58px; }
.landing-logos img.logo-ayto {
  height: 74px; background: rgba(255, 255, 255, .92);
  padding: 6px 12px; border-radius: 12px;
}
.landing-langs { display: flex; gap: 6px; }
.landing-title {
  font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 800;
  letter-spacing: -.03em; line-height: 1.02; margin-top: 26px;
  text-wrap: balance;
}
.landing-title span { color: var(--accent-bright); }
.landing-sub {
  max-width: 640px; margin: 14px auto 0; font-weight: 300;
  font-size: clamp(1rem, 2.2vw, 1.25rem); color: rgba(226, 242, 238, .85);
}
.landing-cta {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 34px; padding: 16px 38px; border-radius: 14px;
  font-size: 1.15rem; font-weight: 700; color: #042a23;
  background: linear-gradient(135deg, #a9d5cb, #57ac9b); /* tints de marca: mantiene el contraste del texto en tinta */
  box-shadow: 0 6px 24px rgba(87, 172, 155, .35);
  transition: transform .15s, box-shadow .15s;
}
.landing-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(87, 172, 155, .45); }
.landing-cta .lc-ico { width: 22px; height: 22px; flex: 0 0 auto; }

/* Barra superior fija: marca + idioma + CTA siempre visibles (AllTrails/Komoot) */
.landing-topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px clamp(14px, 3vw, 28px);
  background: rgba(11, 61, 32, .82);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid rgba(255, 255, 255, .10); color: #e2f2ee;
}
.ltb-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ltb-brand img { height: 34px; background: rgba(255, 255, 255, .92); border-radius: 8px; padding: 3px 6px; }
.ltb-brand b { font-size: 1rem; white-space: nowrap; }
.ltb-actions { display: flex; align-items: center; gap: 10px; }
.ltb-cta {
  height: 38px; padding: 0 18px; border-radius: 10px; font-weight: 700; color: #042a23;
  background: linear-gradient(135deg, #a9d5cb, #57ac9b); /* tints de marca: mantiene el contraste del texto en tinta */
}
.ltb-cta:hover { filter: brightness(1.05); }

/* Buscador destacado en el héroe (search-first) */
.landing-search {
  display: flex; align-items: center; gap: 8px;
  max-width: 560px; margin: 30px auto 0; padding: 6px 6px 6px 16px;
  background: var(--surface); border-radius: 999px;
  box-shadow: 0 12px 34px rgba(4, 42, 35, .30);
}
.landing-search .ls-ico { width: 19px; height: 19px; flex: 0 0 auto; color: var(--text-2); opacity: .8; }
.landing-search input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font: inherit; font-size: 1.02rem; color: var(--text); padding: 12px 4px;
}
.landing-search .ls-go {
  height: 44px; padding: 0 22px; border-radius: 999px; font-weight: 700; color: #042a23;
  background: linear-gradient(135deg, #a9d5cb, #57ac9b); /* tints de marca: mantiene el contraste del texto en tinta */
}
.landing-trust { margin-top: 16px; font-size: .82rem; color: rgba(226, 242, 238, .72); letter-spacing: .01em; }

/* Rejilla de modos: tarjetas foto-first con badge de datos y afford. (AllTrails/Komoot) */
.landing-modes { max-width: 1120px; margin: 44px auto 40px; padding: 0 24px; }
.landing-modes h2 { font-size: 1.5rem; text-align: center; }
/* Bento a propósito, NO auto-fit: con auto-fit, 6 tarjetas partían en 4+2 y
   dejaban una fila huérfana con un hueco enorme. Áreas nombradas por
   data-mode → cero huecos se añadan o no más modos (revisar si cambia el nº). */
.modes-grid {
  display: grid; gap: 16px; margin-top: 22px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "costa costa rutas    golf"
    "costa costa negocios cumbres"
    "sv360 sv360 sv360    sv360";
}
.landing-mode[data-mode="costa"]    { grid-area: costa; }
.landing-mode[data-mode="rutas"]    { grid-area: rutas; }
.landing-mode[data-mode="golf"]     { grid-area: golf; }
.landing-mode[data-mode="negocios"] { grid-area: negocios; }
.landing-mode[data-mode="cumbres"]  { grid-area: cumbres; }
.landing-mode[data-mode="sv360"]    { grid-area: sv360; flex-direction: row; align-items: stretch; }
.landing-mode[data-mode="costa"] .lm-cover { flex: 1; height: auto; min-height: 230px; }
.landing-mode[data-mode="sv360"] .lm-cover { flex: 0 0 38%; height: auto; }
.landing-mode[data-mode="sv360"] .lm-body { flex: 1; justify-content: center; }
.landing-mode {
  position: relative; overflow: hidden; text-align: left;
  background: var(--surface); border-radius: var(--radius);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-1); border: 1px solid var(--line);
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.landing-mode:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--accent); }
.lm-cover { height: 128px; position: relative; overflow: hidden; display: grid; place-items: end; padding: 14px; }
/* Capa visual de fondo: patrón topográfico por defecto, FOTO si .has-photo (con Ken Burns en hover) */
.lm-cover::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='160'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.3' opacity='0.5'%3E%3Cpath d='M-20 42 Q60 10 150 42 T320 42'/%3E%3Cpath d='M-20 74 Q60 42 150 74 T320 74'/%3E%3Cpath d='M-20 106 Q60 74 150 106 T320 106'/%3E%3Cpath d='M-20 138 Q60 106 150 138 T320 138'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover; background-position: center; opacity: .5; mix-blend-mode: soft-light;
  transition: transform .55s ease;
}
.lm-cover.has-photo::before { background-image: var(--cover); opacity: 1; mix-blend-mode: normal; }
.landing-mode:hover .lm-cover::before { transform: scale(1.08); }
/* Overlay inferior: legibilidad del tag y base para las FOTOS */
.lm-cover::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(to top, rgba(4, 42, 35, .40), transparent 62%);
}
.lm-cover.has-photo::after { background: linear-gradient(to top, rgba(4, 42, 35, .55), rgba(4, 42, 35, .05) 58%); }
.lm-cover > * { position: relative; z-index: 1; }
.lm-cover .lm-emoji { font-size: 48px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45)); transition: transform .3s; }
/* Iconos SVG de los modos: ya no centrados y a toda opacidad (icono-en-caja
   genérico); ahora grandes, tenues y anclados a la esquina, como una marca
   de agua que ancla el motivo de cada tarjeta sin competir con el dato. */
.lm-cover .lm-icon {
  width: 84px; height: 84px; opacity: .24;
  filter: brightness(0) invert(1);
  transform: translate(14px, 14px) rotate(-6deg);
  transition: transform .3s, opacity .3s;
}
.landing-mode:hover .lm-emoji { transform: scale(1.08) translateY(-2px); }
.landing-mode:hover .lm-icon { opacity: .38; transform: translate(6px, 6px) rotate(-6deg) scale(1.06); }
.landing-mode[data-mode="costa"] .lm-icon { width: 126px; height: 126px; opacity: .3; }
.landing-mode[data-mode="costa"]:hover .lm-icon { opacity: .44; }
/* Portadas por modo — familia tonal única de marca (verde/tinta/turquesa),
   solo varía el ángulo y el punto de luz: antes cada tarjeta tenía un tono
   distinto (cian, ámbar, morado…) y parecía un icon-pack de plantilla IA.
   FOTO real: añade class="… has-photo" y style="--cover:url('assets/covers/<modo>.jpg')" al .lm-cover.
   Convención de archivos: assets/covers/{costa,rutas,negocios,sv360}.jpg  (≥ 800×450, apaisadas). */
.cover-costa    { background: linear-gradient(135deg, #042a23, #0e8a72 65%, #57ac9b); }
.cover-rutas    { background: linear-gradient(150deg, #063d33, #0a6355); }
.cover-golf     { background: linear-gradient(160deg, #042a23, #0a6355); }
.cover-negocios { background: linear-gradient(140deg, #0a6355, #57ac9b); }
.cover-sv360    { background: linear-gradient(120deg, #063d33, #57ac9b); }
/* .cover-cumbres vive en cumbres.css (se carga después): mismo criterio tonal. */
.lm-tag {
  position: absolute; top: 10px; left: 10px; font-size: .64rem; font-weight: 800; letter-spacing: .06em;
  padding: 3px 8px; border-radius: 6px; background: #042a23; color: var(--accent-bright);
}
.lm-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.lm-body b { font-size: 1.06rem; }
.lm-desc { font-size: .85rem; color: var(--text-2); line-height: 1.4; }
.lm-meta { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lm-badge { font-size: .82rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.lm-badge b { font-size: 1.15rem; font-weight: 800; color: var(--brand); }
.lm-go { font-size: .85rem; font-weight: 700; color: var(--accent); white-space: nowrap; }

/* Franja "todo incluye": antes 6 tarjetas que duplicaban los modos */
.landing-included { max-width: 1120px; margin: 0 auto 52px; padding: 0 24px; text-align: center; }
.landing-included h3 { font-size: 1rem; color: var(--text-2); font-weight: 600; margin-bottom: 14px; }
.included-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.inc-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 16px; font-size: .9rem; box-shadow: var(--shadow-1);
}
.inc-chip .inc-ico { width: 18px; height: 18px; flex: 0 0 auto; }

.landing-footer {
  background: var(--hero-2); color: rgba(226, 242, 238, .8);
  text-align: center; padding: 34px 20px;
}

/* Guiño institucional: franja con los colores del escudo de Llanes
   (rojo #E2211C · oro #F4B234 · verde #00933B, muestreados del logo oficial
   del Ayuntamiento). Cierra por abajo las dos cabeceras de marca. */
.sb-head { position: relative; } /* .landing-topbar ya es sticky: no tocarla */
.landing-topbar::after, .sb-head::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, #E2211C 0 33.4%, #F4B234 33.4% 66.7%, #00933B 66.7% 100%);
  pointer-events: none;
}
.landing-footer .logo-ayto-mini { height: 44px; background: rgba(255,255,255,.92); border-radius: 8px; padding: 4px 8px; }
.landing-footer p { margin-top: 10px; font-size: .9rem; }
.landing-footer .credit a { color: var(--accent-bright); text-decoration: none; font-weight: 600; }
.landing-footer .logo-clotitec-mini { height: 24px; vertical-align: middle; opacity: .9; }
.landing-footer .credit a:hover .logo-clotitec-mini { opacity: 1; }
.landing-footer .foot-link { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(226, 242, 238, .3); transition: border-color .15s; }
.landing-footer .foot-link:hover { border-color: var(--accent-bright); }

/* ---------- 4. Layout app ---------- */
#app { position: fixed; inset: 0; display: flex; }
#sidebar {
  width: 384px; flex: 0 0 384px; height: 100%;
  display: flex; flex-direction: column;
  background: var(--surface); opacity: .97;
  box-shadow: var(--shadow-2); z-index: 20;
}
#map-wrap { flex: 1; position: relative; }
#map { position: absolute; inset: 0; }

#btn-menu {
  display: none; position: fixed; top: 14px; left: 14px; z-index: 40;
  width: 46px; height: 46px; border-radius: 14px; font-size: 20px;
  background: var(--glass); backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-1);
}
#sb-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 10, 5, .45); z-index: 25; }

/* ---------- 5. Sidebar ---------- */
.sb-head {
  background: linear-gradient(150deg, var(--hero-1), var(--hero-2));
  color: #e2f2ee; padding: 14px 16px;
}
.sb-brand { display: flex; gap: 12px; align-items: center; }
.sb-brand img { height: 46px; background: rgba(255,255,255,.92); border-radius: 10px; padding: 3px 7px; }
.sb-brand b { display: block; font-size: 1.02rem; line-height: 1.2; }
.sb-brand small { color: rgba(226, 242, 238, .75); font-size: .78rem; }
.sb-tools { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.sb-langs { display: flex; gap: 6px; }
.lang-btn {
  min-width: 40px; height: 30px; border-radius: 8px; font-size: .8rem; font-weight: 700;
  background: rgba(255, 255, 255, .14); color: #e2f2ee;
  border: 1px solid rgba(255, 255, 255, .22);
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 9px;
}
.lang-btn .flag { width: 18px; height: 12px; border-radius: 2px; flex: none; display: block; box-shadow: 0 0 0 1px rgba(0, 0, 0, .18); }
.lang-btn.active { background: var(--accent-bright); color: #042a23; border-color: transparent; }
#btn-theme {
  width: 38px; height: 30px; border-radius: 8px; font-size: 15px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22);
}

/* 3 columnas × 2 filas: con 6 modos queda 3+3 lineal (antes 4+2 descuadrado). */
.mode-tabs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--surface-2); padding: 8px; gap: 6px;
}
.mode-tab {
  display: grid; justify-items: center; align-content: start; gap: 4px;
  padding: 10px 4px 8px; border-radius: var(--radius-s);
  color: var(--text-2); transition: background .15s, color .15s;
  min-height: 64px; /* filas gemelas aunque una etiqueta parta en dos líneas */
}
.mode-tab span { font-size: 22px; display: grid; place-items: center; }
.mode-tab span svg { width: 24px; height: 24px; }
.tabbar-mas .mas-ico { width: 20px; height: 20px; vertical-align: -4px; margin-right: 2px; }

/* Iconos propios de cobertura (a pie / vista aérea / todas) y de las pastillas
   superponibles. Heredan color y tamaño del contexto, como los emojis a los
   que sustituyen. */
.sv-i { width: 1.1em; height: 1.1em; vertical-align: -.2em; flex: 0 0 auto; }
.fp-ico .sv-i { width: 1.2em; height: 1.2em; vertical-align: -.22em; }
.sb-ico .sv-i { width: 22px; height: 22px; vertical-align: 0; }
.sv-ico .sv-i { width: 28px; height: 28px; color: #fff; vertical-align: 0; }
.sv-gal-h .sv-i { width: 15px; height: 15px; }

/* ---------- Panel "glass" del borde derecho (zoom cercano) ----------
   Cristal esmerilado con texto en tinta (pedido 2026-08-20): nombres de lo
   visible en el mapa, máx. 40, ordenado por cercanía al centro. */
#glass-list {
  position: absolute; top: 150px; right: 14px; z-index: 9;
  width: min(252px, 34vw); max-height: calc(100% - 172px);
  overflow-y: auto; overscroll-behavior: contain; padding: 8px;
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(26, 26, 26, .14);
  color: #1A1A1A;
}
#glass-list h4 {
  margin: 2px 6px 6px; font-size: .7rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: rgba(26, 26, 26, .55);
}
.gl-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 8px; border: 0; border-radius: 9px; background: none;
  text-align: left; font: inherit; font-size: .8rem; font-weight: 600;
  color: #1A1A1A; cursor: pointer;
}
.gl-item:hover { background: rgba(255, 255, 255, .72); }
.gl-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
.gl-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-item small { margin-left: auto; flex: 0 0 auto; font-size: .68rem; font-weight: 500; color: rgba(26, 26, 26, .5); }
/* En pantallas estrechas la hoja inferior ya hace de lista: el cristal sobra. */
@media (max-width: 720px) { #glass-list { display: none; } }
.mode-tab small { font-size: .68rem; font-weight: 600; line-height: 1.15; text-align: center; }
.mode-tab.active { background: var(--brand-fill); color: #fff; box-shadow: var(--shadow-1); }
html[data-theme="dark"] .mode-tab.active { color: #042a23; }

.sb-search {
  display: flex; align-items: center; gap: 8px;
  margin: 12px 14px 8px; padding: 0 12px;
  background: var(--surface-2); border-radius: 12px;
}
.sb-search input {
  flex: 1; height: 44px; border: 0; background: none; color: var(--text);
  font-size: .95rem; outline: none;
}

/* Los filtros se ENVUELVEN, ya no se desplazan de lado. En costa, rutas, 360 y
   cumbres son pocos y entran en una o dos líneas; lo que había antes escondía
   media lista detrás de un gesto que en una pantalla táctil de kiosko nadie
   descubre. */
.filter-row {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 14px;
}
.filter-chip {
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px; border-radius: 17px;
  background: var(--surface-2); color: var(--text-2);
  font-size: .82rem; font-weight: 600; white-space: nowrap;
  border: 1.5px solid transparent; transition: all .15s;
}
.filter-chip:hover { border-color: var(--line); }
.filter-chip.active { background: var(--chip-color, var(--brand)); color: #fff; }
.filter-chip .count { opacity: .65; font-weight: 500; font-size: .75rem; }
.sector-row { background: var(--surface-2); margin: 0 14px; border-radius: 12px; padding: 8px; }

/* ---------- Filtros de Negocios: rejilla de categorías ---------- */
.filtros { padding: 8px 14px 4px; }
.filtros-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.filtros-head .fh-t {
  font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-2);
}
.fx-todos {
  height: 26px; padding: 0 11px; border-radius: 13px;
  background: var(--surface-2); color: var(--text-2);
  font-size: .76rem; font-weight: 700;
}
.fx-todos.active { background: var(--brand-fill); color: #fff; }
html[data-theme="dark"] .fx-todos.active { color: #042a23; }

.filtros-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.ft-tile {
  position: relative; display: grid; justify-items: center; align-content: start;
  gap: 5px; padding: 11px 5px 9px; min-height: 78px;
  border-radius: 13px; background: var(--surface-2); color: var(--text-2);
  border: 1.5px solid transparent; transition: background .15s, border-color .15s, color .15s;
}
.ft-tile:hover { border-color: var(--tile-color, var(--line)); }
.ft-tile .ft-ico { display: grid; place-items: center; color: var(--tile-color, var(--text-2)); }
.ft-tile .ft-ico .sv-i { width: 26px; height: 26px; }
.ft-tile .ft-lab {
  font-size: .72rem; font-weight: 600; line-height: 1.15; text-align: center;
  /* dos líneas como mucho: "Restauración" y "Alojamiento" caben sin cortar */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ft-tile .ft-count {
  position: absolute; top: 6px; right: 7px;
  font-size: .66rem; font-weight: 700; color: var(--text-2); opacity: .75;
}
/* Seleccionada: se tiñe con SU color de categoría, el mismo de sus pines */
.ft-tile.active {
  background: var(--tile-color); color: #fff; border-color: var(--tile-color);
}
.ft-tile.active .ft-ico, .ft-tile.active .ft-count { color: #fff; opacity: 1; }

/* ---------- Subfiltros: panel con las opciones en varias líneas ---------- */
.sector-panel {
  margin: 8px 14px 4px; padding: 9px 10px 10px;
  background: var(--surface-2); border-radius: 13px;
  border-left: 3px solid var(--macro-color, var(--brand));
}
.sector-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sector-head .sh-ico { display: grid; place-items: center; color: var(--macro-color, var(--brand)); }
.sector-head .sh-ico .sv-i { width: 19px; height: 19px; }
.sector-head b { font-size: .84rem; }
.sector-head .sh-n {
  font-size: .7rem; font-weight: 700; color: var(--text-2);
  background: var(--surface); border-radius: 9px; padding: 2px 7px;
}
.sector-head .sh-x {
  margin-left: auto; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: .78rem;
  background: var(--surface); color: var(--text-2);
}
.sector-head .sh-x:hover { background: var(--macro-color, var(--brand)); color: #fff; }
/* Todas las opciones a la vista; si una categoría trae muchas, el panel crece
   hasta un tope razonable y solo entonces se desplaza — en vertical, que es
   como se lee. */
.sector-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  max-height: 30vh; overflow-y: auto;
}
.sector-chips .filter-chip { height: 31px; font-size: .78rem; }

.list-meta { padding: 6px 18px 2px; font-size: .78rem; color: var(--text-2); }

.sb-list { flex: 1; overflow-y: auto; list-style: none; padding: 6px 10px 14px; }
.sb-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 10px; border-radius: 12px; cursor: pointer;
  border-left: 3px solid var(--item-color, transparent);
  transition: background .12s, transform .14s;
  animation: itemIn .3s ease backwards;
}
/* entrada escalonada de los primeros elementos de la lista */
.sb-item:nth-child(1) { animation-delay: .02s; }
.sb-item:nth-child(2) { animation-delay: .05s; }
.sb-item:nth-child(3) { animation-delay: .08s; }
.sb-item:nth-child(4) { animation-delay: .11s; }
.sb-item:nth-child(5) { animation-delay: .14s; }
.sb-item:nth-child(6) { animation-delay: .17s; }
.sb-item:nth-child(7) { animation-delay: .20s; }
.sb-item:nth-child(8) { animation-delay: .23s; }
@keyframes itemIn { from { opacity: 0; transform: translateY(7px); } }
.sb-item:hover, .sb-item.active { background: var(--surface-2); }
.sb-item:hover { transform: translateX(2px); }
.sb-item:hover .chev { color: var(--accent); }
.sb-ico {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px;
  display: grid; place-items: center; font-size: 21px;
  background: var(--item-bg, var(--surface-2));
}
.sb-item b { display: block; font-size: .92rem; font-weight: 600; line-height: 1.25; }
.sb-item small { color: var(--text-2); font-size: .78rem; }
.sb-item .chev { margin-left: auto; color: var(--text-2); font-size: 18px; }

.sb-foot { padding: 10px; text-align: center; border-top: 1px solid var(--line); }
.sb-foot a { font-size: .72rem; color: var(--text-2); text-decoration: none; }
/* Logo Clotitec en el pie del sidebar: pastilla blanca para que funcione igual
   en tema claro y oscuro (el PNG es símbolo negro + texto verde). */
.sb-foot .logo-clotitec-sb { height: 16px; vertical-align: -4px; background: rgba(255,255,255,.92); border-radius: 5px; padding: 2px 5px; }

/* ---------- 6. Pills del mapa ---------- */
.map-pills {
  position: absolute; z-index: 10; display: flex; gap: 8px; flex-wrap: wrap;
  align-items: flex-start;
}
.map-pills.top { top: 14px; left: 14px; right: 14px; }

/* Grupos de control: un solo bloque de cristal con los botones dentro,
   separados por una línea fina. Da una barra ordenada en vez de pastillas
   sueltas que se recolocaban solas al cambiar el ancho de la ventana. */
.pill-group {
  display: flex; align-items: stretch; gap: 0;
  border-radius: 22px; overflow: hidden;
  background: linear-gradient(135deg, var(--glass), var(--glass-2));
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-1), inset 0 0 0 1px rgba(255, 255, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .5);
}
html[data-theme="dark"] .pill-group {
  box-shadow: var(--shadow-1), inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .12);
}
/* Dentro del grupo el botón pierde su propio cristal: lo pone el contenedor. */
.pill-group .floating-pill {
  background: none; box-shadow: none; backdrop-filter: none;
  border-radius: 0; padding: 8px 14px;
}
.pill-group .floating-pill + .floating-pill { box-shadow: inset 1px 0 0 rgba(26, 26, 26, .12); }
html[data-theme="dark"] .pill-group .floating-pill + .floating-pill { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .12); }
.pill-group .floating-pill:hover { transform: none; background: rgba(255, 255, 255, .38); }
html[data-theme="dark"] .pill-group .floating-pill:hover { background: rgba(255, 255, 255, .10); }
.pill-group .floating-pill.active { background: var(--brand-fill); color: #fff; }
html[data-theme="dark"] .pill-group .floating-pill.active { color: #042a23; }
/* Una capa encendida se subraya además con una barra de acento abajo: se ve de
   un vistazo qué hay puesto sin leer las etiquetas. */
.pill-group .floating-pill.active::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: 4px; height: 2.5px;
  border-radius: 2px; background: rgba(255, 255, 255, .85);
}
.pill-group .floating-pill { position: relative; }
/* El dato del tiempo no es un control: se distingue en cursiva de peso normal. */
.fp-dato .fp-label { font-variant-numeric: tabular-nums; }
.floating-pill {
  display: flex; align-items: center; gap: 7px;
  min-height: var(--pill-h); padding: 8px 16px; border-radius: 22px;
  background: linear-gradient(135deg, var(--glass), var(--glass-2));
  backdrop-filter: var(--glass-blur);
  /* glass real: borde interior 1px que simula refracción del canto */
  box-shadow: var(--shadow-1), inset 0 0 0 1px rgba(255, 255, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .5);
  font-size: .88rem; font-weight: 600; color: var(--text);
  transition: transform .12s, background .15s;
}
html[data-theme="dark"] .floating-pill {
  box-shadow: var(--shadow-1), inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.floating-pill:hover { transform: translateY(-1px); }
.floating-pill.active { background: var(--brand-fill); color: #fff; }
html[data-theme="dark"] .floating-pill.active { color: #042a23; }
.fp-ico { font-size: 17px; }
.map-ctrl-help {
  background: var(--brand-fill) !important; color: #fff !important;
  font-weight: 800; animation: helpPulse 2.5s ease-in-out infinite;
}
html[data-theme="dark"] .map-ctrl-help { color: #042a23 !important; }
@keyframes helpPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(14, 138, 114, .45); }
  50% { box-shadow: 0 0 0 9px rgba(14, 138, 114, 0); }
}

#tiempo-panel {
  position: absolute; top: 66px; left: 14px; z-index: 11;
  width: 250px; padding: 14px 16px; border-radius: var(--radius);
  background: var(--glass); backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-2); font-size: .88rem;
}
#tiempo-panel .tp-row { display: flex; justify-content: space-between; padding: 3px 0; }
#tiempo-panel .tp-big { font-size: 1.7rem; font-weight: 800; }
#tiempo-panel .tp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }

/* ---------- 7. Ficha ---------- */
#ficha {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 15;
  width: min(440px, 100%);
  background: var(--surface); box-shadow: var(--shadow-2);
  overflow-y: auto; overscroll-behavior: contain;
  animation: fichaIn .22s ease;
}
@keyframes fichaIn { from { transform: translateX(30px); opacity: 0; } }
#ficha-close { position: absolute; top: 12px; right: 12px; z-index: 2; background: var(--glass); }

.fh-hero { position: relative; min-height: 116px; padding: 22px 20px 18px; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; }
.fh-hero.img { min-height: 210px; background-size: cover; background-position: center; }
.fh-hero .fh-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.55)); }
.fh-hero > * { position: relative; }
.fh-hero h2 { font-size: 1.35rem; font-weight: 800; line-height: 1.2; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.fh-hero .fh-sub { font-size: .85rem; opacity: .92; margin-top: 3px; }

.fh-360 { width: 100%; aspect-ratio: 16/10; border: 0; display: block; background: #000; }

.f-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 18px 0; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 28px; padding: 0 11px; border-radius: 14px;
  background: var(--surface-2); font-size: .76rem; font-weight: 600; color: var(--text-2);
}
.chip.warn { background: rgba(217, 119, 6, .14); color: var(--warn); }
.chip.star { background: rgba(217, 119, 6, .12); color: #b45309; }

.f-section { padding: 14px 18px 0; }
.f-section h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); margin-bottom: 8px; }
.f-desc { font-size: .93rem; line-height: 1.55; color: var(--text); }

.audio-btn {
  display: flex; align-items: center; gap: 12px; width: calc(100% - 36px);
  margin: 14px 18px 0; padding: 12px 16px; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--brand-soft), rgba(87, 172, 155, .16));
  border: 1.5px solid rgba(14, 138, 114, .25);
  font-weight: 700; color: var(--text); text-align: left;
}
.audio-btn .ab-ico {
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 42px;
  display: grid; place-items: center; font-size: 18px;
  background: var(--brand-fill); color: #fff;
}
.audio-btn.playing .ab-ico { animation: pulseAudio 1.1s ease-in-out infinite; }
@keyframes pulseAudio { 50% { transform: scale(1.12); } }
.audio-btn small { display: block; font-weight: 500; color: var(--text-2); font-size: .75rem; }

.f-rows { margin-top: 4px; }
.f-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 8px; margin: 0 -8px; border-bottom: 1px solid var(--line);
  font-size: .9rem; color: var(--text); text-decoration: none;
  border-radius: var(--radius-s); cursor: pointer;
}
.f-row:last-child { border-bottom: 0; }
.f-row:hover { background: var(--surface-2); }
.f-row:hover .fr-go { transform: translateX(3px); color: var(--accent); }
.f-row .fr-ico { font-size: 17px; width: 24px; text-align: center; }
.f-row .fr-go { margin-left: auto; color: var(--text-2); font-size: 18px; transition: transform .16s, color .16s; }
.f-row small { color: var(--text-2); display: block; font-size: .74rem; }

/* Street View embebido en fichas de negocio */
.sv-wrap { position: relative; }
.sv-wrap .fh-360.sv { aspect-ratio: 16/9; }
.sv-tag {
  position: absolute; left: 12px; bottom: 12px;
  padding: 5px 12px; border-radius: 14px; font-size: .74rem; font-weight: 700;
  background: var(--glass); backdrop-filter: blur(10px); color: var(--text);
  box-shadow: var(--shadow-1); pointer-events: none;
}
.fh-hero.slim { min-height: 0; padding: 16px 20px 14px; }
.fh-hero.slim h2 { font-size: 1.18rem; }

.chip.link { cursor: pointer; }
.chip.link:hover { background: var(--brand-soft); color: var(--brand-strong); }
html[data-theme="dark"] .chip.link:hover { color: var(--accent-bright); }

.f-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 14px 18px 0; }
.f-stat { background: var(--surface-2); border-radius: var(--radius-s); text-align: center; padding: 10px 4px; }
.f-stat b { display: block; font-size: 1.15rem; font-weight: 800; color: var(--brand); }
.f-stat span { font-size: .68rem; color: var(--text-2); }

.f-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.f-tag { font-size: .74rem; padding: 4px 10px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-strong); font-weight: 600; }
html[data-theme="dark"] .f-tag { color: var(--accent-bright); }

.f-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 18px; margin-top: 6px;
}
.f-action {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; border-radius: var(--radius-s);
  background: var(--surface-2); font-weight: 700; font-size: .88rem;
  transition: background .15s, transform .12s;
}
.f-action:hover { transform: translateY(-1px); }
.f-action.primary { background: var(--brand-fill); color: #fff; }
html[data-theme="dark"] .f-action.primary { color: #042a23; }

#elev-wrap { padding: 6px 18px 0; }
#elev { width: 100%; height: 132px; border-radius: var(--radius-s); background: var(--surface-2); touch-action: none; cursor: crosshair; }
.elev-meta { display: flex; justify-content: space-between; font-size: .74rem; color: var(--text-2); margin-top: 4px; }

/* ---------- 8. Tutorial ---------- */
#tutorial { position: fixed; inset: 0; z-index: 90; }
#tut-spot {
  position: absolute; border-radius: 14px;
  border: 3px solid var(--accent-bright);
  box-shadow: 0 0 0 9999px rgba(0, 20, 12, .62), 0 0 40px 8px rgba(87, 172, 155, .6);
  animation: spotPulse 2s ease-in-out infinite;
  transition: all .3s ease;
}
@keyframes spotPulse { 50% { box-shadow: 0 0 0 9999px rgba(0, 20, 12, .62), 0 0 56px 14px rgba(87, 172, 155, .75); } }
#tut-card {
  position: absolute; width: min(400px, calc(100vw - 40px));
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow-2); padding: 22px;
  transition: all .3s ease;
}
#tut-bar { height: 5px; border-radius: 3px; background: var(--surface-2); overflow: hidden; margin-bottom: 16px; }
#tut-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-bright)); transition: width .3s; }
#tut-emoji { font-size: 38px; }
#tut-card h3 { margin: 8px 0 6px; font-size: 1.15rem; }
#tut-card p { color: var(--text-2); font-size: .92rem; line-height: 1.5; }
.tut-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 18px; }
.tut-nav button { padding: 9px 16px; border-radius: 10px; font-weight: 600; font-size: .88rem; background: var(--surface-2); }
.tut-nav button.primary { background: var(--brand-fill); color: #fff; }
html[data-theme="dark"] .tut-nav button.primary { color: #042a23; }
#tut-step { font-size: .78rem; color: var(--text-2); }

/* ---------- 9. Modales y toast ---------- */
#webmodal {
  position: fixed; inset: 0; z-index: 80; background: var(--bg);
  display: flex; flex-direction: column;
}
#webmodal header {
  display: flex; align-items: center; gap: 12px;
  background: var(--brand-strong); color: #fff; padding: 10px 16px;
}
#webmodal #wm-url { flex: 1; font-size: .78rem; opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#webmodal #wm-open { color: #fff; font-size: .82rem; font-weight: 600; }
#wm-frame { flex: 1; border: 0; background: #fff; }

/* Visor partido: la panorámica ocupa media pantalla y la otra media sigue
   siendo el mapa, vivo y encuadrado en la foto. Así se ve DÓNDE está tomada y
   se puede saltar a otra chincheta sin cerrar el visor. Solo a partir de
   900 px: por debajo no caben las dos cosas y se queda a pantalla completa. */
@media (min-width: 900px) {
  #webmodal.wm-split {
    left: auto; right: 0; width: 50vw;
    border-left: 1px solid rgba(255, 255, 255, .18);
    box-shadow: -20px 0 60px rgba(0, 0, 0, .34);
  }
  /* El mapa asoma por la izquierda: no se puede tapar con un velo */
  #webmodal.wm-split::before { content: none; }
}
#wm-blocked { flex: 1; display: grid; place-content: center; text-align: center; gap: 16px; padding: 30px; }

#qrmodal {
  position: fixed; inset: 0; z-index: 85;
  background: rgba(0, 15, 8, .55); backdrop-filter: blur(6px);
  display: grid; place-items: center;
}
.qr-card {
  position: relative; background: var(--surface); border-radius: 20px;
  box-shadow: var(--shadow-2); padding: 28px 30px; text-align: center;
  width: min(360px, calc(100vw - 40px));
}
.qr-card h3 { font-size: 1.05rem; margin-bottom: 16px; padding-right: 30px; }
#qr-box { display: grid; place-items: center; }
#qr-box svg { width: 220px; height: 220px; }
.qr-card p { margin-top: 14px; font-size: .82rem; color: var(--text-2); }
#qr-close { position: absolute; top: 10px; right: 10px; }

#toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  z-index: 95; padding: 12px 22px; border-radius: 24px;
  background: var(--text); color: var(--bg);
  font-size: .9rem; font-weight: 600; box-shadow: var(--shadow-2);
  animation: toastIn .2s ease;
}
@keyframes toastIn { from { transform: translate(-50%, 12px); opacity: 0; } }

/* ---------- 10. Kiosko ---------- */
#attract {
  position: fixed; inset: 0; z-index: 100; cursor: pointer;
  background: linear-gradient(160deg, var(--hero-1), var(--hero-2) 55%, var(--hero-3));
  display: grid; place-content: center; justify-items: center; gap: 22px;
  color: #e2f2ee; text-align: center;
}
#attract img { height: 110px; background: rgba(255,255,255,.92); border-radius: 16px; padding: 8px 14px; }
#attract h1 { font-size: 4.4rem; font-weight: 800; letter-spacing: -.02em; }
#attract h1 span { color: var(--accent-bright); }
.attract-touch { font-size: 1.5rem; font-weight: 300; animation: touchPulse 2.2s ease-in-out infinite; }
/* El logo Clotitec del attract NO hereda la pastilla blanca de 110px del logo
   del Ayuntamiento (#attract img): es un cierre discreto en blanco. */
#attract img.attract-clotitec { height: 26px; background: none; border-radius: 0; padding: 0; opacity: .8; }
@keyframes touchPulse { 50% { opacity: .45; } }

body.kiosk { font-size: 17.5px; }
body.kiosk #sidebar { width: 430px; flex-basis: 430px; }
body.kiosk .floating-pill { min-height: 52px; padding: 10px 20px; font-size: 1rem; }
body.kiosk .mode-tab span { font-size: 27px; }
body.kiosk .mode-tab span svg { width: 30px; height: 30px; }
body.kiosk .sb-item { padding: 13px 10px; }
body.kiosk .sb-ico { width: 48px; height: 48px; flex-basis: 48px; font-size: 24px; }
body.kiosk #ficha { width: 500px; }
body.kiosk .f-action { min-height: 56px; }
body.kiosk #btn-menu { display: none !important; }

/* ---------- 11. Responsive ---------- */
@media (max-width: 1020px) {
  .modes-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "costa    costa"
      "rutas    golf"
      "negocios cumbres"
      "sv360    sv360";
  }
}
@media (max-width: 760px) {
  #sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; width: min(86vw, 384px);
    transform: translateX(-104%); transition: transform .25s ease; z-index: 30;
  }
  body.sb-open #sidebar { transform: translateX(0); }
  body.sb-open #sb-backdrop { display: block; }
  #btn-menu { display: grid; place-items: center; }
  .map-pills.top { top: 14px; left: 72px; }
  .floating-pill .fp-label { display: none; }
  .floating-pill { padding: 8px 13px; }
  #pill-tiempo .fp-label { display: inline; }  /* la temperatura sí se ve */
  #ficha {
    top: auto; width: 100%; max-height: 76vh;
    border-radius: 18px 18px 0 0;
    animation: fichaUp .25s ease;
  }
  @keyframes fichaUp { from { transform: translateY(40px); opacity: 0; } }
  .ltb-brand b { display: none; }
  .landing-search { flex-wrap: wrap; border-radius: 20px; }
  .landing-search .ls-go { flex: 1; }
  #tiempo-panel { left: 14px; right: 14px; width: auto; }
}
@media (max-width: 460px) {
  .modes-grid { gap: 10px; }
  .lm-cover { height: 92px; }
  .landing-mode[data-mode="costa"] .lm-cover { min-height: 168px; }
  /* Banner apaisado → columna: en móvil estrecho una fila lateral deja la
     portada demasiado angosta para leerse. */
  .landing-mode[data-mode="sv360"] { flex-direction: column; }
  .landing-mode[data-mode="sv360"] .lm-cover { flex: 0 0 auto; height: 92px; }
  .lm-body { padding: 12px; }
  .f-stats { grid-template-columns: repeat(2, 1fr); }
  .f-actions { grid-template-columns: 1fr; }
}

/* Scrollbars discretos */
.sb-list::-webkit-scrollbar, #ficha::-webkit-scrollbar { width: 8px; }
.sb-list::-webkit-scrollbar-thumb, #ficha::-webkit-scrollbar-thumb {
  background: var(--line); border-radius: 4px;
}

/* Atribución MapLibre acorde al tema */
.maplibregl-ctrl-attrib { background: var(--glass) !important; color: var(--text-2); font-size: 10px; }
.maplibregl-ctrl-attrib a { color: var(--text-2); }

/* Galería de panorámicas 360° vinculadas en las fichas */
.sv-gal-h { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); margin-bottom: 8px; }
.sv-gal-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.sv-gal-row::-webkit-scrollbar { height: 6px; }
.sv-gal-row::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.sv-thumb {
  position: relative; flex: 0 0 auto; width: 132px; height: 76px; padding: 0;
  border-radius: 10px; overflow: hidden; border: 1px solid var(--line);
  background: var(--surface-2); scroll-snap-align: start; cursor: pointer;
}
.sv-thumb.sv-ph { display: grid; place-items: center; background: linear-gradient(135deg, #0e7490, #22d3ee); }
.sv-thumb.sv-ph.dron { background: linear-gradient(135deg, #6d28d9, #c084fc); border-color: transparent; }
.sv-ico { font-size: 26px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45)); transition: transform .2s; }
.sv-thumb:hover .sv-ico { transform: scale(1.12); }
.sv-n { position: absolute; bottom: 5px; right: 7px; font-size: .72rem; font-weight: 800; color: #fff; opacity: .85; }
body.kiosk .sv-thumb { width: 150px; height: 86px; }