/* ============================================================================
   BARRA INFERIOR DE LA VISTA APP  ·  Beneficio Municipal
   ============================================================================
   La usan `beneficios.html` y `comercios-admin.html`. Vivía en el <style> de la
   primera; se sacó acá cuando el usuario pidió que la barra siguiera visible
   «en cada opción que entremos» desde Más — y el panel de comercios es una
   página aparte. Copiar los estilos habría dado dos barras que se ven iguales
   hoy y se separan a la primera corrección; es el mismo motivo por el que
   existe `pinamar-ui.css`.

   ⚠️ Sólo ≤768 px. Por encima de eso cada página tiene su propia navegación
   (la barra superior hasta 1024, el sidebar más arriba).
   ⚠️ Los overrides de tema Clásico viven en `tema.css` y apuntan a
   `body.app-view .app-nav`: cualquier regla que se agregue acá necesita su
   contraparte allá, o en tema claro queda una franja negra al pie.
   ============================================================================ */
/* ── Barra SUPERIOR de la vista app ───────────────────────────────────────
   El escudo del Municipio centrado, y nada más. La usan `beneficios.html` y
   `comercios-admin.html`.
   🔴 Vive acá desde que el usuario señaló que el encabezado del panel de
   comercios «no es igual» al del resto: tenía el logo chico a la izquierda,
   el título al lado y un chip de rol, contra el logo centrado y limpio de las
   demás pantallas. Dos encabezados distintos en la misma app hacen dudar de
   si uno sigue en el mismo lado. Definida en un solo archivo, no pueden
   volver a separarse.
   ⚠️ El aspecto de la barra (fondo, sticky, borde) lo da la regla `nav` de
   `styles.css`; acá sólo va el reparto en tres columnas. */
.benef-nav-movil { display: none; }
/* 🔴 EL ESPACIO DE LA BARRA DE SCROLL, RESERVADO SIEMPRE. Sin esto el contenido
   se corre 7 px según la pantalla scrollee o no: la columna centrada reparte el
   sobrante, y cuando aparece la barra hay 15 px menos que repartir. Se veía al
   comparar el «Volver» de Comercios (x=493) con el del Mapa (x=500) —esa vista
   no scrollea— y era justo lo que el usuario pidió corregir: «misma estética y
   ubicación exacta».
   Medido con la regla puesta: el «Volver» de Comercios, el del Mapa, el título
   de la sección y el aviso de ubicación quedan los cuatro en x=493.
   ⚠️ Es preferible a alinear el botón con un número mágico: eso arreglaría UN
   botón y dejaría corrido todo lo demás de esa pantalla.
   ⚠️ En el celular no cambia nada: ahí las barras son superpuestas (ancho 0) y
   además `body.app-view` las esconde. Y donde no esté soportado, se comporta
   como hasta ahora. */
/* ⚰️ La regla `html { scrollbar-gutter: stable }` se MUDÓ a `styles.css`
     (03-sep-2026). Estaba acá porque nació resolviendo la alineación del botón
     «Volver» de Beneficios, pero no tiene nada que ver con la barra inferior: es
     cómo se comporta cualquier página. Viviendo acá, Obras —que no carga esta
     hoja— se quedó sin ella, y su pantalla saltaba de costado tres veces al
     cargar. Todas las páginas que cargan ESTA hoja cargan también `styles.css`,
     así que no se pierde nada. */

/* ── Salida de una sub-pantalla ────────────────────────────────────────────
   🔴 Vive acá y no en el <style> de una página porque tiene que ser EL MISMO
   botón en todas: el usuario señaló que en el panel de comercios estaba en otro
   lugar y con otra forma, y que «si cambia de lugar, marea». Un control de
   navegación que se mueve obliga a buscarlo de nuevo en cada pantalla.
   Va SIEMPRE arriba del contenido y alineado a la izquierda.

   🔴 ESTÁ FUERA DEL @MEDIA DE CELULAR, y antes no. Nació como botón del
   teléfono, pero desde el 30-ago-2026 se usa también en escritorio —en
   Comercios al venir de un rubro, en el Mapa al venir de otra pantalla, y en el
   panel de comercios—. Adentro del media query, en la PC quedaba sin estilos:
   cada página tenía que repetirlos o mostrar otro botón distinto, que es
   exactamente cómo el panel terminó con DOS.
   Qué se muestra y cuándo lo decide cada página; la FORMA se define una vez y
   acá. */
.app-volver {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px;
  /* 🔴 NO SE ESTIRA NUNCA. `display: inline-flex` no alcanza: como ítem de un
     contenedor flex en columna —que es lo que es `#mapa` en la vista Mapa— el
     botón se estira a todo el ancho por el `align-items: stretch` que trae el
     padre por defecto, y se ve como una barra en vez de una píldora. Reportado
     por el usuario. `align-self` lo deja inmune a cualquier contenedor, presente
     o futuro; corregirlo en el padre sólo arreglaría el caso de hoy. */
  align-self: flex-start; flex: 0 0 auto;
  padding: 9px 15px 9px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(34,197,94,.22); background: rgba(34,197,94,.10);
  color: #7bedab; font: inherit; font-size: 14px; font-weight: 600;
  text-decoration: none;
}
.app-volver:hover { background: rgba(34,197,94,.16); }

@media (max-width: 1024px) {
  .benef-nav-movil { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
}
/* 🔴 Corrección óptica: el archivo tiene el escudo a la izquierda del texto y
   con más masa arriba, así que su centro APARENTE cae arriba y a la derecha
   del geométrico. Centrado por su caja, se ve corrido. */
.benef-nav-movil .nav-logo { transform: translate(-7px, 3px); }

/* ── Nada de «tirar para recargar» ────────────────────────────────────────
   🔴 Va FUERA de la media query y sobre `html` además de `body`: el gesto lo
   resuelve el elemento que hace scroll, y en la mayoría de los navegadores
   ése es `html`. Puesto sólo en `body` el gesto sigue funcionando.
   `contain` y no `none`: `contain` corta el rebote hacia el navegador (que es
   lo que dispara la recarga) pero deja el scroll normal y el de los
   contenedores internos. `none` mataría además el rebote elástico, que acá no
   molesta.
   🔴 Se apunta a `html` a secas y no con `:has()`: esta hoja la cargan SÓLO
   las tres páginas de la app, así que el alcance ya está acotado por ahí — y
   `:has()` no existe en los WebView viejos de Android, que es justo el
   público que más usa esto desde el teléfono.
   ⚠️ Sólo en la vista app: en el sitio de escritorio recargar tirando es un
   gesto legítimo que nadie pidió sacar. */
html, body.app-view { overscroll-behavior-y: contain; }

/* 🔴 LA BARRA NACE APAGADA, y esto NO es un detalle de estilo.
   Sus íconos no llevan `width`/`height` propios: el tamaño se lo da la regla
   `.app-tab-ic svg` de más abajo, que vive DENTRO de la media query. En una
   pantalla ancha esa media query no aplica, así que si la barra se dibuja igual,
   sus SVG se estiran al ancho del contenedor — un chevron gris del tamaño de
   toda la página. Le pasó al panel de comercios en la computadora.
   `beneficios.html` no lo sufría porque su propio <style> ya escondía `.app-nav`
   fuera de la vista app; el panel no tenía esa regla. Que la hoja se baste sola
   es lo que evita que el próximo que la incluya repita el mismo error. */
.app-nav { display: none; }

@media (max-width: 768px) {
  /* ── Sin barra de scroll a la vista ──────────────────────────────────
     Una app nativa no dibuja una barra gris flotando sobre el contenido; una web
     sí, y es de las cosas que más delatan que esto es una página. Pedido del
     usuario para TODA la app.

     🔴 Va la propiedad ESTÁNDAR `scrollbar-width`, no `::-webkit-scrollbar`.
     Medido en Chrome: `::-webkit-scrollbar:vertical { width: 0 }` no esconde
     nada —el navegador moderno resuelve la barra por la propiedad estándar y ese
     pseudo-elemento queda sin efecto—, así que la primera versión dejaba la
     página limpia y los scrollers internos con su barra intacta. El
     `::-webkit-scrollbar` se conserva sólo como respaldo para WebView viejo.

     🔴 Alcanza a los hijos (`body.app-view *`) y no sólo al documento: la ficha
     de descripción de un comercio y el selector de logos del panel scrollean por
     su cuenta, y ahí la barra se ve igual de a la derecha.

     🔴 EXCEPCIÓN: el gráfico de 14 días conserva la suya. `scrollbar-width` no
     distingue eje, y esa barra HORIZONTAL es la única señal de que el contenido
     sigue hacia el costado — sin ella nadie lo descubre. Un scroll vertical se
     intuye siempre; uno lateral, no.

     🔴 Y sólo en celular. En escritorio la barra ocupa lugar real en el layout,
     es el indicador de cuánto falta, y sacarla corre el contenido bajo el mouse.
     ⚠️ Se sigue pudiendo scrollear igual: esto oculta el dibujo, no el gesto —
     no toca el teclado, ni el foco, ni las barras del sistema operativo.
     ⚠️ La contrapartida asumida: en un scroller interno se pierde la pista de que
     hay más abajo. Se acepta porque son listas cortas y el gesto es evidente. */
  html, body.app-view, body.app-view * { scrollbar-width: none; -ms-overflow-style: none; }
  html::-webkit-scrollbar, body.app-view *::-webkit-scrollbar { width: 0; }
  body.app-view .stats-days { scrollbar-width: thin; }


    /* Bottom nav */
    body.app-view .app-nav {
      display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: 74px;
      background: #06160d; border-top: 1px solid rgba(34,197,94,.16); padding: 8px 6px; z-index: 90;
    }
    .app-tab {
      flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center;
      justify-content: center; gap: 4px; color: rgba(232,245,236,.42); font-size: 10px;
      background: none; border: 0; cursor: pointer; padding: 0; font-family: inherit;
      /* 🔴 En beneficios.html estos itens son <button> y en el panel de comercios
         son <a> (ahi cambiar de pestana implica cambiar de pagina). Sin esto la
         MISMA barra salia subrayada en una pantalla y no en la otra — el tipo de
         diferencia que hace dudar de si es la misma app. */
      text-decoration: none;
    }
    /* `relative` por el punto de aviso, que va posicionado sobre el ícono. */
    .app-tab-ic { position: relative; width: 48px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 99px; transition: background .2s; }
    .app-tab-ic svg { width: 21px; height: 21px; }
    .app-tab.active { color: #7bedab; }
    .app-tab.active .app-tab-ic { background: rgba(34,197,94,.18); }

    /* ── Botón del QR ─────────────────────────────────────────────────
       Mostrarle la credencial al comercio es LA acción de esta app, y era
       una pestaña más entre cuatro iguales. Acá sobresale de la barra: es
       lo primero que encuentra el pulgar y lo primero que se ve. */
    body.app-view .app-nav { overflow: visible; }
    .app-qr {
      flex: 0 0 auto; position: relative; width: 68px; margin-top: -22px;
      display: flex; flex-direction: column; align-items: center; gap: 4px;
      background: none; border: 0; padding: 0; cursor: pointer;
      font-family: inherit; font-size: 10px; color: rgba(232,245,236,.42);
      text-decoration: none;   /* tambien es <a> en el panel de comercios */
    }
    .app-qr-ic {
      width: 56px; height: 56px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      background: linear-gradient(160deg, #22c55e, #16a34a);
      color: #04180c; border: 4px solid #06160d; position: relative; z-index: 2;
    }
    .app-qr-ic svg { width: 26px; height: 26px; }
    .app-qr-txt { position: relative; z-index: 2; }
    .app-qr.active { color: #7bedab; }

    /* 🔴 El anillo se anima con `transform` y `opacity`, NUNCA con
       `box-shadow`: animar sombras en bucle repinta en cada cuadro y hace
       saltar el scroll en teléfonos modestos — es una de las reglas de oro
       del sistema de diseño, heredada del panel de Datos donde costó caro.
       `will-change` lo manda a su propia capa para que el latido no obligue
       a repintar la barra entera. */
    .app-qr-anillo {
      position: absolute; top: 0; left: 6px; width: 56px; height: 56px;
      border-radius: 50%; border: 2px solid #22c55e; z-index: 1;
      animation: qr-latido 2.6s ease-out infinite; will-change: transform, opacity;
    }
    @keyframes qr-latido {
      0%   { transform: scale(1);    opacity: .55; }
      70%  { transform: scale(1.45); opacity: 0; }
      100% { transform: scale(1.45); opacity: 0; }
    }
    /* Quien pidió menos movimiento no tiene por qué ver un latido perpetuo. */
    @media (prefers-reduced-motion: reduce) {
      .app-qr-anillo { animation: none; opacity: .35; }
    }

    /* ── El punto de aviso sobre «Más» (02-sep-2026) ──────────────────────
       Pedido del usuario: que quien ya entró pero no instaló vea «una
       notificación en el ícono de "Más" cosa que toquen», y adentro encuentre
       la opción marcada. Lo pone y lo saca `pin-instalar.js`, que es quien
       sabe si hay algo para ofrecer; se apaga apenas abre el panel.

       🔴 SIN ANILLO del color de la barra: ese fondo cambia con el tema —
       `#06160d` en Futurista y otro en Clásico— así que un borde fijo se vería
       mal en uno de los dos. Un punto pleno se lee bien sobre los dos y no
       necesita contraparte en `tema.css`.
       🔴 Y se anima con `transform`/`opacity`, como los otros dos latidos. */
    .app-tab-punto {
      position: absolute; top: -1px; right: 6px;
      width: 9px; height: 9px; border-radius: 50%;
      background: #22c55e; pointer-events: none;
      will-change: transform, opacity;
      animation: punto-latido 2.4s ease-in-out infinite;
    }
    @keyframes punto-latido {
      0%, 100% { transform: scale(1);    opacity: 1; }
      50%      { transform: scale(1.25); opacity: .72; }
    }
    @media (prefers-reduced-motion: reduce) {
      .app-tab-punto { animation: none; }
    }
}