/* base.css — PULSE
   Reset del mockup (verbatim) + shell del documento: tipografia base, safe areas,
   altura de viewport y la TRADUCCION 2/3. Nada de esto es un componente.
   Orden de carga: tokens.css -> base.css -> components.css -> screens.css */

* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-font-smoothing:antialiased; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter, Roboto, sans-serif;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

/* Altura de viewport: 100dvh con fallback -webkit-fill-available (iOS < 15.4).
   El navegador que no entiende dvh se queda con la declaracion previa. */
html { min-height: -webkit-fill-available; min-height: 100dvh; }
body { min-height: -webkit-fill-available; min-height: 100dvh; }

/* Safe areas del notch/isla (el <meta viewport-fit=cover> va en index.html).
   El inset inferior lo consume .tabbar (traduccion 2/3, abajo). */
body {
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Reset minimo de controles: en el mockup los botones/inputs son <div>;
   en la app son elementos reales y el estilo del UA rompe la fidelidad. */
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; touch-action: manipulation; }
a { color: inherit; text-decoration: none; }

/* TRADUCCION 2/3 (docs/design-app.md §2):
   .home-indicator (chrome del iPhone, BORRADO) -> el respiro inferior lo da la
   tabbar con el inset real del dispositivo. Prefijo html: la regla verbatim de
   .tabbar vive en components.css (que carga despues) y usa el shorthand padding.

   TRADUCCION 4 (misma clase de bug que la 3 y que el FAB de ventas.mjs):
   en el mockup la .tabbar es el ULTIMO hijo de .app dentro de .screen, un
   rectangulo de 820px con overflow:hidden -> "al fondo del frame" y "al fondo
   del viewport" coinciden por accidente. En la app no existe .screen: el
   documento scrollea, la tabbar se queda al final del contenido y SOLO aparece
   al llegar abajo del todo (medido: top 1056px en un viewport de 844px).
   La traduccion es la misma que .dim/.sheet: sale del flujo y se fija al
   viewport. La GEOMETRIA horizontal se conserva: en el mockup la tabbar hereda
   los 20px de padding de .app y agrega 10px propios; ya fija (left/right 0)
   esos 30px los pone ella, mas el inset lateral real (body ya no la contiene).
   `height` la vuelve deterministica en vez de depender del line-height de
   .tab: 12 de padding-top + 38 de contenido (icono 21 + gap 4 + etiqueta ~13)
   + 12 de padding-bottom = --tabbar-h. `background` porque el contenido ahora
   pasa POR DEBAJO: en el mockup .screen recortaba, aqui hay que taparlo.
   z-index 10 < .dim (20) < .sheet (30): la hoja y su velo siguen ganando. */
html { --tabbar-h: 62px; }

html .tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  margin-top: 0;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  background: var(--bg);
  padding-left: calc(30px + env(safe-area-inset-left));
  padding-right: calc(30px + env(safe-area-inset-right));
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

/* El hueco que la tabbar dejo de ocupar en el flujo, para que la ultima fila de
   contenido siga siendo alcanzable: los 16px de margin-top que la separaban del
   contenido + su alto + el respiro de 4px que .app ya tenia debajo.
   Solo el .app del shell ([data-shell], components/shell.mjs) — login, tiendas y
   fechas usan .app SIN tabbar y no deben ganar 82px de aire muerto abajo. */
html .app[data-shell] {
  padding-bottom: calc(20px + var(--tabbar-h) + env(safe-area-inset-bottom));
}