/* =========================================================================
   BARRA DE ESTADO EN LAS PÁGINAS PÚBLICAS  (reserva, tienda y sus derivadas)
   =========================================================================

   Los enlaces públicos también se abren DENTRO de la app. En Android el
   WebView pide overlay de la barra de estado, y allí env(safe-area-inset-top)
   solo trae el recorte de la cámara —cero en casi todos los teléfonos—, así
   que el contenido quedaba pegado debajo de la hora y la batería.

   El panel ya lo resolvía en mobile-app.css, pero estas vistas son
   independientes: no cargan ese CSS ni el shell. Aquí va lo mínimo para que
   se comporten igual.

   La variable se define SOLO para Android a propósito:
     · iOS   — el WebView ya entrega el contenido por debajo de la barra;
               sumar el inset otra vez dejaría un hueco de más.
     · web   — no hay ninguna barra que esquivar.
   En los dos casos el fallback es 0 y estas reglas no suman nada.

   24dp es la altura estándar y sirve de valor por defecto para que se vea
   bien de inmediato; native-shell.js lo sustituye por la altura REAL del
   teléfono en cuanto responde el plugin, que es mayor en equipos con cámara
   perforada.
   ========================================================================= */

html.is-android { --ma-safe-top: 24px; }

/* ── Páginas con el topbar público pegajoso ──────────────────────────────
   El hueco va DENTRO de la barra, no encima: así su propio fondo pinta
   también la franja de la barra de estado. Con el hueco fuera se veía el
   contenido de la página pasar por detrás al desplazar.

   Van tres tramos porque el alto de la barra se decide en tres sitios
   distintos, y cada uno hay que respetarlo tal cual. */

/* ≤640px — movil/topbar.css deja la barra en 54px y lo hace con !important,
   así que aquí no queda otra que responder con la misma moneda: sin el
   !important esta regla no llega a aplicarse nunca.
   El alto CRECE lo mismo que el hueco, no se reparte: si solo se añadiera el
   padding, la barra seguiría midiendo 54px y el contenido se apretaría. */
@media (max-width: 640px) {
  html.is-native-app .mx-public-topbar-inner {
    box-sizing: border-box;
    height: calc(54px + var(--ma-safe-top, 0px)) !important;
    padding-top: var(--ma-safe-top, 0px) !important;
  }
}

/* 641–960px — catalogo.css pasa la barra a alto automático con padding de
   12px. Con alto automático basta sumar el hueco al padding: no hay altura
   fija que pueda contar el inset dos veces. */
@media (min-width: 641px) and (max-width: 960px) {
  html.is-native-app .mx-public-topbar-inner {
    padding-top: calc(12px + var(--ma-safe-top, 0px));
  }
}

/* ≥961px — vuelve el alto fijo de 62px. Aquí border-box es OBLIGATORIO: con
   content-box el padding se suma al height y el inset acaba contando dos
   veces (el mismo fallo que dejó doble margen en el topbar de iOS). */
@media (min-width: 961px) {
  html.is-native-app .mx-public-topbar-inner {
    box-sizing: border-box;
    height: calc(62px + var(--ma-safe-top, 0px));
    padding-top: var(--ma-safe-top, 0px);
  }
}

/* ── Páginas sin topbar (reserva de grupo, seña, pedido) ─────────────────
   No hay barra donde meter el hueco, así que lo pone el propio body. */
html.is-native-app body.mx-pub-safe {
  padding-top: var(--ma-safe-top, 0px);
}

/* Lo que va en position:fixed no se entera del padding del body y hay que
   bajarlo aparte (el selector de idioma de la página de pedido).

   La colocación entera vive aquí, no en un style= de la vista: un estilo en
   línea gana a cualquier hoja, así que con el top escrito ahí esta regla no
   llegaba a aplicarse nunca. */
.mx-pub-fija {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 30;
}
html.is-native-app .mx-pub-fija {
  top: calc(var(--ma-safe-top, 0px) + 14px);
}