/* ============================================================
   Descubre Llanes 2026 · v2 — Cumbres + shell móvil
   ------------------------------------------------------------
   ⚠ Este fichero se carga SIEMPRE DESPUÉS de styles.css.
   Regla del kit CumbresAR: si va antes, las reglas del proyecto
   con la misma especificidad (#sidebar, #ficha) ganan y el shell
   móvil se rompe en silencio (la barra sale, pero el sidebar
   sigue siendo el cajón lateral de antes).

   Secciones:  1) módulo Cumbres   2) shell móvil de 5 secciones
   ============================================================ */

:root {
  --cumbre-color: #0e8a72;   /* acento del módulo en la INTERFAZ (sigue al tema) */
  /* Color del pin SOBRE EL MAPA. No sigue al tema de la interfaz a propósito:
     el mapa va siempre en base clara (ver baseStyle en app.js), así que con el
     verde claro del tema oscuro el isotipo se perdía sobre el lienzo blanco. */
  --cumbre-pin: #0e8a72;
  --tabbar-h: 0px;           /* 0 en escritorio; se activa en el @media de abajo */

  /* Tokens del kit Mapa-Marca (rótulos de cristal). La ALTITUD va en color de
     acento, distinto del nombre, para que se lea el dato sin buscarlo.
     Ojo: como color de LETRA el verde de marca no llega a 4.5:1 sobre el
     cristal claro — por eso el acento de texto es la versión oscura. */
  --mm-tinta: #1A1A1A;
  --mm-tinta-2: #5F5F5F;
  --mm-tinta-inv: #F4F1EB;
  --mm-acento-txt: #0A6355;      /* altitud sobre cristal claro */
  --mm-acento-txt-inv: #8FE0C6;  /* altitud sobre cristal ahumado (satélite/oscuro) */
  --mm-f-cuerpo: 'Montserrat', system-ui, sans-serif;
  --mm-f-titulo: 'Montserrat', system-ui, sans-serif;
}
html[data-theme="dark"] { --cumbre-color: #57ac9b; }

/* ---------- 1. Módulo Cumbres ---------- */

/* Portada del modo en la landing (misma convención que .cover-* de styles.css:
   añadir has-photo + --cover cuando haya foto real en assets/covers/cumbres.jpg) */
.cover-cumbres { background: linear-gradient(170deg, #042a23, #063d33); }

/* Miniatura de la cumbre en la lista: la foto ocupa todo el hueco del icono */
#list .sb-ico:has(img) { padding: 0; overflow: hidden; background: none; }
#list .sb-ico img { display: block; }

/* El pie del sidebar pasa a tener dos enlaces (mapa 360 + crédito) */
.sb-foot { display: flex; flex-direction: column; gap: 4px; }
.sb-foot a[href="mapa.html"] { color: var(--brand); font-weight: 600; }

/* Botón "ver más cumbres" al final del listado */
.sb-more { list-style: none; display: flex; justify-content: center; padding: 10px 6px 4px; }
.sb-more .filter-chip { font-size: .82rem; }

/* Pastilla ⛰ del mapa: hilado de carga mientras bajan las celdas */
#pill-cumbres.cargando .fp-ico { animation: cumbrePulse 1s ease-in-out infinite; }
@keyframes cumbrePulse { 50% { opacity: .35; } }

/* Ficha de cumbre */
.attr-foto {
  font-size: .68rem; color: var(--text-2);
  padding: 6px 18px 0; line-height: 1.4;
}
.f-nodata { color: var(--text-2); font-size: .86rem; }
.f-fuente {
  font-size: .68rem; color: var(--text-2); line-height: 1.5;
  padding-top: 14px; padding-bottom: 4px;
}
#meteo-cumbre .f-desc { font-size: .88rem; }

/* ---------- 2. Shell móvil de 5 secciones ----------
   Patrón: tab bar fija con el mapa en burbuja central + hoja inferior de tres
   alturas (peek 150px · medio 52dvh · lleno 86dvh). La hoja va SIEMPRE por
   encima de la barra (bottom:var(--tabbar-h)): la barra nunca queda tapada,
   que es el fallo clásico de este patrón.
   Refs Mobbin: Pangea (burbuja central + hoja), Polarsteps y Flighty (barra
   flotante sobre el mapa), Lyft (hoja por encima de la barra).           */

.tabbar, .tabbar-mas, #asa { display: none; }

@media (max-width: 760px) {
  :root { --tabbar-h: calc(58px + env(safe-area-inset-bottom)); }

  /* — La barra — */
  /* [hidden] tiene que ganar aquí: la regla de autor de abajo lo pisaría
     (shell.js quita el atributo al entrar en la app, y lo pone en la landing) */
  .tabbar[hidden] { display: none; }
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 32;
    display: flex; justify-content: space-around;
    background: var(--surface); border-top: 1px solid var(--line);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
  }
  .tabbar button {
    flex: 1; min-height: 46px; border: 0; background: transparent;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 4px 2px; border-radius: 10px;
    font-size: .62rem; font-weight: 700; line-height: 1.2; color: var(--text-2);
  }
  .tabbar button svg { width: 21px; height: 21px; }
  .tabbar button[aria-pressed="true"] { color: var(--brand); }

  /* Burbuja central: el mapa siempre a un pulgar de distancia */
  .tabbar .tb-mapa .burbuja {
    width: 46px; height: 46px; border-radius: 50%; margin-top: -20px;
    background: var(--brand-fill); color: #fff;
    display: grid; place-items: center;
    border: 3px solid var(--surface); box-shadow: var(--shadow-2);
  }
  .tabbar .tb-mapa[aria-pressed="true"] .burbuja { background: var(--brand-strong); }

  /* — Menú «Más» — */
  .tabbar-mas {
    position: fixed; right: 10px; bottom: calc(var(--tabbar-h) + 8px); z-index: 33;
    display: grid; gap: 4px; padding: 8px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 16px; box-shadow: var(--shadow-2);
    min-width: 190px;
  }
  .tabbar-mas[hidden] { display: none; }
  .tabbar-mas button {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 11px 12px; border: 0; border-radius: 10px;
    background: transparent; color: var(--text);
    font-size: .9rem; font-weight: 600; text-align: left;
  }
  .tabbar-mas button:hover { background: var(--surface-2); }
  .tabbar-mas button.active { background: var(--brand-soft); color: var(--brand-strong); }

  /* — El sidebar deja de ser cajón lateral y pasa a hoja inferior — */
  #sidebar {
    position: fixed; left: 0; right: 0; top: auto; bottom: var(--tabbar-h);
    width: auto; max-width: none; z-index: 24;
    height: 86dvh; max-height: 86dvh;
    border-radius: 18px 18px 0 0;
    border: 1px solid var(--line); border-bottom: 0;
    box-shadow: 0 -8px 30px -10px rgba(0, 0, 0, .3);
    transform: translateY(calc(86dvh - var(--altura-hoja, 150px)));
    transition: transform .25s cubic-bezier(.2, 0, 0, 1);
    overscroll-behavior: contain;
  }
  body[data-hoja="medio"] #sidebar { --altura-hoja: 52dvh; }
  body[data-hoja="lleno"] #sidebar { --altura-hoja: 86dvh; }

  /* El cajón lateral y su hamburguesa ya no pintan nada aquí */
  body.sb-open #sidebar { transform: translateY(calc(86dvh - var(--altura-hoja, 150px))); }
  #btn-menu, #sb-backdrop { display: none !important; }

  /* La cabecera de marca ocupa demasiado en una hoja: solo idiomas y tema */
  #sidebar .sb-brand, #sidebar .sb-foot { display: none; }
  #sidebar .sb-head { padding: 0 0 6px; border: 0; justify-content: flex-end; }

  /* Asa de arrastre */
  #asa {
    display: block; position: sticky; top: 0; z-index: 3;
    width: 100%; padding: 9px 0 6px; border: 0; background: var(--surface);
  }
  #asa::before {
    content: ""; display: block; width: 42px; height: 5px; border-radius: 999px;
    background: var(--line); margin: 0 auto;
  }
  #asa .asa-rotulo {
    display: block; margin-top: 5px;
    font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--text-2);
  }

  /* La ficha también respeta la barra */
  #ficha { bottom: var(--tabbar-h); max-height: calc(86dvh - var(--tabbar-h)); z-index: 26; }

  /* Las pastillas del mapa vuelven al margen: ya no hay hamburguesa que esquivar */
  .map-pills.top { left: 14px; }

  /* Hueco inferior para que el mapa no quede bajo la barra */
  #map-wrap { padding-bottom: 0; }
  .maplibregl-ctrl-bottom-right { bottom: calc(var(--tabbar-h) + 4px); }
}

/* En kiosko (pantalla de 65") mandan las pestañas laterales: nada de barra */
body.kiosk .tabbar, body.kiosk .tabbar-mas, body.kiosk #asa { display: none !important; }
body.kiosk #sidebar { position: relative; transform: none; height: auto; }