/* NutriVive - Donde entrenar gratis (mapapp)
   Ajustado (2026-09-23) para seguir el sistema de diseno del sitio
   (DESIGN.md y css/tokens.css) en vez de una paleta y tipografia propias:
   Bricolage Grotesque + Public Sans, tokens de color, radio y sombra ya
   cargados via un link a tokens.css en index.html (que a su vez autoaloja
   las fuentes reales de marca). Ya no se usa Montserrat ni una paleta
   local - ver mapapp.md 5.3 y 5.4. */

  :root {
    --head-h: 56px;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
  }
  *, *::before, *::after { box-sizing: inherit; }
  [hidden] { display: none !important; }
  html, body { height: 100%; margin: 0; }
  body {
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--color-text);
    background: var(--color-bg-elevated);
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
  }
  button, input { font: inherit; color: inherit; }
  :focus-visible { outline: 2px solid var(--color-green-mid); outline-offset: 2px; }

  /* Cabecera — misma banda oscura que el header del sitio principal */
  .bar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    padding-top: env(safe-area-inset-top, 0px);
    height: calc(var(--head-h) + env(safe-area-inset-top, 0px));
    background: var(--color-header-bg); color: var(--color-header-text);
    display: flex; align-items: center; gap: 12px;
    padding-left: 16px; padding-right: 12px;
  }
  /* Logotipo oficial (mismo archivo y tratamiento que el header del sitio
     principal, ver css/components.css .logo-img): PNG con alfa real,
     forzado a blanco vía filter para que valga sobre el fondo oscuro. */
  .brand { display: flex; align-items: center; height: 30px; text-decoration: none; flex: none; }
  .brand img { height: 30px; width: auto; display: block; filter: brightness(0) invert(1); }

  /* Bloque derecho de la cabecera: botón "cambiar zona" (oculto hasta que
     hay resultados), selector de idioma y "volver a inicio" — en ese
     orden, pegado a la derecha (feedback de Carlos, 2026-09-23). */
  .bar-right { display: flex; align-items: center; gap: 14px; margin-left: auto; flex: none; }

  .lang-switch { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
  .lang-btn { font: 700 13px var(--font-body); color: var(--color-header-text); opacity: .55; padding: 4px 2px; transition: opacity .2s, color .2s; }
  .lang-btn:hover { opacity: 1; color: var(--color-header-text-hover); }
  .lang-btn.is-active { opacity: 1; color: var(--color-green-bright); cursor: default; }
  .lang-sep { color: var(--color-header-text); opacity: .3; font: 13px var(--font-body); }

  /* Enlace explícito "volver a inicio" — a la derecha del todo, con
     palabra + flecha (feedback de Carlos, 2026-09-23: el logo solo no se
     leía como enlace). */
  .back-home { display: flex; align-items: center; gap: 4px; text-decoration: none; color: var(--color-header-text); opacity: .85; flex: none; transition: opacity .2s ease, transform .2s ease; }
  .back-home:hover, .back-home:focus-visible { opacity: 1; transform: translateX(2px); }
  .back-home-icon { width: 16px; height: 16px; flex: none; }
  .back-home-label { font-size: 13px; font-weight: 700; white-space: nowrap; }
  @media (prefers-reduced-motion: reduce) { .back-home { transition: none; } }
  @media (max-width: 480px) { .back-home-label { display: none; } }

  /* Tagline junto al logo — mismo componente y mecanismo que
     css/components.css .header-tagline (letra a letra, 100% CSS, sin
     JS), cicla "Dónde entrenar gratis" / "Sin excusas". Redeclarado acá
     en vez de importado porque esta página no carga components.css
     completo, solo tokens.css. */
  .bar-tagline {
    display: inline-flex; align-items: center; height: 1em; overflow: hidden;
    font: 600 11px/1 var(--font-data); color: var(--color-green-bright);
    text-transform: uppercase; flex: 1; min-width: 0; margin-left: 4px;
  }
  .tw-col { display: inline-block; width: 1ch; height: 1em; overflow: hidden; margin-right: .04em; }
  .tw-col-inner {
    display: flex; flex-direction: column;
    animation: tw-flip 6s steps(1) infinite;
    /* Excepción deliberada y acotada a este único elemento decorativo,
       igual que en el header del sitio principal: sin el !important, la
       regla global de prefers-reduced-motion lo congelaría. */
    animation-duration: 6s !important;
    animation-iteration-count: infinite !important;
  }
  .tw-col-inner span { display: block; height: 1em; line-height: 1; text-align: center; }
  @keyframes tw-flip { 0% { transform: translateY(0); } 50% { transform: translateY(-1em); } 100% { transform: translateY(0); } }
  .tw-col:nth-child(1) .tw-col-inner { animation-delay: 0s; }
  .tw-col:nth-child(2) .tw-col-inner { animation-delay: .05s; }
  .tw-col:nth-child(3) .tw-col-inner { animation-delay: .1s; }
  .tw-col:nth-child(4) .tw-col-inner { animation-delay: .15s; }
  .tw-col:nth-child(5) .tw-col-inner { animation-delay: .2s; }
  .tw-col:nth-child(6) .tw-col-inner { animation-delay: .25s; }
  .tw-col:nth-child(7) .tw-col-inner { animation-delay: .3s; }
  .tw-col:nth-child(8) .tw-col-inner { animation-delay: .35s; }
  .tw-col:nth-child(9) .tw-col-inner { animation-delay: .4s; }
  .tw-col:nth-child(10) .tw-col-inner { animation-delay: .45s; }
  .tw-col:nth-child(11) .tw-col-inner { animation-delay: .5s; }
  .tw-col:nth-child(12) .tw-col-inner { animation-delay: .55s; }
  .tw-col:nth-child(13) .tw-col-inner { animation-delay: .6s; }
  .tw-col:nth-child(14) .tw-col-inner { animation-delay: .65s; }
  .tw-col:nth-child(15) .tw-col-inner { animation-delay: .7s; }
  .tw-col:nth-child(16) .tw-col-inner { animation-delay: .75s; }
  .tw-col:nth-child(17) .tw-col-inner { animation-delay: .8s; }
  .tw-col:nth-child(18) .tw-col-inner { animation-delay: .85s; }
  .tw-col:nth-child(19) .tw-col-inner { animation-delay: .9s; }
  .tw-col:nth-child(20) .tw-col-inner { animation-delay: .95s; }
  .tw-col:nth-child(21) .tw-col-inner { animation-delay: 1s; }
  @media (max-width: 480px) { .bar-tagline { display: none; } }
  .bar-btn {
    background: none; border: 1.5px solid oklch(90% 0.012 140 / .25); color: var(--color-header-text);
    border-radius: var(--radius-pill); padding: 7px 14px; font-size: 13px; font-weight: 700; cursor: pointer;
    transition: border-color .2s ease;
  }
  .bar-btn:hover { border-color: var(--color-green-mid); }

  /* Mapa */
  .app { position: fixed; left: 0; right: 0; bottom: 0; top: calc(var(--head-h) + env(safe-area-inset-top, 0px)); }
  #map { position: absolute; inset: 0; background: var(--color-bg); }
  .leaflet-container { font-family: var(--font-body); }

  .map-btn {
    position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 600;
    background: var(--color-text); color: var(--color-bg-elevated); border: 0; border-radius: var(--radius-pill);
    padding: 10px 18px; font-size: 14px; font-weight: 700; cursor: pointer;
    box-shadow: var(--shadow-dropdown);
  }
  .map-fab {
    position: absolute; right: 14px; top: 14px; z-index: 600;
    width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
    background: var(--color-bg-elevated); box-shadow: var(--shadow-dropdown);
    display: grid; place-items: center;
  }
  .map-fab svg { width: 22px; height: 22px; }

  /* Marcadores: solo los dos colores de marca, diferenciados por forma
     (regla de mapapp.md — negro y verde literales aquí a propósito: son
     la marca del dato en el mapa, no superficie de interfaz). */
  .pin { display: block; width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--color-bg-elevated);
    box-shadow: 0 2px 6px rgba(0,0,0,.35); transition: transform .15s; }
  .pin-calistenia { background: var(--color-green-mid); }
  .pin-aparatos { background: #000; }
  .pin-pista { background: var(--color-bg-elevated); border: 5px solid var(--color-green-mid); }
  .is-active .pin { transform: scale(1.35); }
  .me { width: 18px; height: 18px; border-radius: 50%; background: #000;
    border: 4px solid var(--color-bg-elevated); box-shadow: 0 0 0 4px var(--color-green-mid); }

  .leaflet-popup-content-wrapper { border-radius: var(--radius-card); }
  .leaflet-popup-content { margin: 14px 16px; font-size: 14px; line-height: 1.4; }
  .pop-title { font: 800 16px var(--font-display); letter-spacing: -.005em; margin: 0 0 2px; }
  .pop-meta { color: var(--color-text-muted); margin: 0 0 10px; }

  /* Pantalla de inicio */
  .intro {
    position: absolute; z-index: 700; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--color-bg-elevated); border-radius: var(--radius-hero); padding: 24px 20px 20px;
    box-shadow: 0 12px 40px rgba(0,0,0,.25);
    max-width: 460px; margin: 0 auto;
  }
  .intro h1 {
    margin: 0 0 10px; font: 800 clamp(30px, 8vw, 42px) var(--font-display);
    line-height: 1.05; letter-spacing: -.02em; color: var(--color-text);
  }
  .intro p { margin: 0 0 20px; font-size: 15px; line-height: 1.5; color: var(--color-text-muted); max-width: 38ch; }
  .btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; border: 0; border-radius: var(--radius-card); padding: 15px 18px;
    font: 700 16px var(--font-body); cursor: pointer; text-decoration: none;
    transition: transform .2s, background .2s, box-shadow .2s;
  }
  .btn-primary { background: var(--color-green-mid); color: #fff; }
  .btn-primary:hover { background: var(--color-green-hover); box-shadow: var(--glow-green); }
  .btn[disabled] { opacity: .6; cursor: progress; }
  .or { display: flex; align-items: center; gap: 12px; margin: 14px 0; color: var(--color-text-muted); font-size: 13px; }
  .or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
  .search { display: flex; gap: 8px; }
  .search input {
    flex: 1; min-width: 0; border: 1.5px solid var(--color-border); border-radius: var(--radius-card);
    padding: 13px 14px; font-size: 16px; background: var(--color-bg);
  }
  .search input:focus { border-color: var(--color-green-mid); outline: none; background: var(--color-bg-elevated); }
  .search button { width: auto; background: var(--color-text); color: var(--color-bg-elevated); padding: 13px 18px; }
  .msg { margin: 14px 0 0; font-size: 14px; line-height: 1.45; font-weight: 600; }
  .msg:empty { display: none; }

  /* Panel de resultados (hoja inferior en móvil) */
  .sheet {
    position: absolute; z-index: 650; left: 0; right: 0; bottom: 0;
    background: var(--color-bg-elevated); border-radius: var(--radius-hero) var(--radius-hero) 0 0;
    box-shadow: 0 -8px 30px rgba(0,0,0,.18);
    display: flex; flex-direction: column;
    height: 46%; transition: height .25s ease;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .sheet[data-state="peek"] { height: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .sheet[data-state="full"] { height: 86%; }
  .sheet-head { padding: 8px 18px 12px; cursor: pointer; touch-action: none; border-bottom: 1px solid var(--color-border); }
  .grip { display: block; width: 40px; height: 5px; border-radius: var(--radius-pill); background: var(--color-border); margin: 0 auto 10px; }
  .zone { margin: 0 0 4px; font-size: 12.5px; font-weight: 700; color: var(--color-green-dark); }
  .count { margin: 0; font: 800 22px var(--font-display); letter-spacing: -.01em; line-height: 1.1; color: var(--color-text); }
  .sub { margin: 4px 0 0; font-size: 13.5px; color: var(--color-text-muted); line-height: 1.4; }
  .controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .chip {
    border: 1.5px solid var(--color-border); background: var(--color-bg-elevated); border-radius: var(--radius-pill);
    padding: 6px 12px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
  }
  .chip[aria-pressed="true"] { background: var(--color-text); border-color: var(--color-text); color: var(--color-bg-elevated); }
  .chip .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
  .sep { width: 1px; background: var(--color-border); margin: 2px 2px; }

  .list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }
  .item { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: start;
    padding: 14px 18px; border-bottom: 1px solid var(--color-border); cursor: pointer; }
  .item:hover, .item.is-active { background: var(--color-bg); }
  .item .pin { width: 18px; height: 18px; margin-top: 2px; box-shadow: none; border-width: 0; }
  .item .pin-pista { border-width: 4px; }
  .item h3 { margin: 0; font-size: 15px; font-weight: 800; line-height: 1.3; color: var(--color-text); }
  .addr { margin: 2px 0 0; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
  .addr.is-pending { color: var(--color-text-muted); font-weight: 500; font-style: italic; }
  .item .meta { margin: 2px 0 8px; font-size: 13px; color: var(--color-text-muted); }
  .go { display: inline-block; font-size: 13px; font-weight: 700; color: #fff;
    background: var(--color-green-mid); border-radius: var(--radius-pill); padding: 6px 12px; text-decoration: none; }
  .dist { text-align: right; }
  .dist strong { display: block; font: 700 15px var(--font-data); color: var(--color-text); }
  .dist span { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }

  .empty { padding: 22px 18px; }
  .empty p { margin: 0 0 14px; line-height: 1.5; font-size: 15px; }
  .empty .btn { width: auto; display: inline-flex; }

  .attrib { padding: 12px 18px 16px; font-size: 12px; color: var(--color-text-muted); line-height: 1.5; }
  .attrib a { color: var(--color-green); font-weight: 700; }

  /* Escritorio: panel lateral */
  @media (min-width: 900px) {
    .sheet, .sheet[data-state] {
      top: 0; bottom: 0; left: 0; right: auto; width: 400px; height: auto;
      border-radius: 0; box-shadow: 4px 0 20px rgba(0,0,0,.08);
    }
    .sheet-head { cursor: default; }
    .grip { display: none; }
    .app.has-results #map { left: 400px; }
    .app.has-results .map-btn { left: calc(50% + 200px); }
    .intro { left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, -50%); width: 440px; padding: 32px 28px 26px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .sheet, .pin, .bar-btn, .btn-primary, .chip { transition: none; }
  }

/* Contenedor de los filtros: no genera caja propia (antes style="" inline,
   bloqueado por la CSP). */
#filters { display: contents; }