/**
 * Maule GPS — PWA app-like styles
 *
 * Hace que la web se sienta como app:
 *  - No pull-to-refresh, no overscroll bouncy
 *  - No selección accidental de texto al tap
 *  - No tap delay 300ms
 *  - No zoom con doble-tap
 *  - Safe-area insets para notch/dynamic island
 *  - Banner instalación premium (glass dark coherente)
 */

html, body {
  /* No bouncy scroll, no pull-to-refresh */
  overscroll-behavior: none;
  -webkit-overscroll-behavior: none;
  /* Smooth scroll */
  scroll-behavior: smooth;
  /* Background dark para evitar flash blanco al cargar */
  background-color: #0a0e1a;
  color: #f5f6fa;
  /* CRITICAL: 100lvh = LARGEST viewport height. En iOS PWA standalone incluye
     SIEMPRE el área completa del viewport físico (incluyendo zona del home
     indicator). 100dvh la excluye en algunos casos, dejando un "área muerta"
     negra entre el contenido y el borde físico del iPhone. Fallbacks en orden:
     100% (universal), 100vh (legacy), 100lvh (definitivo). */
  height: 100%;
  height: 100vh;
  height: 100lvh;
  min-height: 100%;
  min-height: 100vh;
  min-height: 100lvh;
}

#root {
  height: 100%;
  height: 100vh;
  height: 100lvh;
  min-height: 100%;
  min-height: 100vh;
  min-height: 100lvh;
}

body {
  /* Sin selección de texto al hacer long-press en mobile */
  -webkit-user-select: none;
  user-select: none;
  /* Sin tap highlight gris feo de Android */
  -webkit-tap-highlight-color: transparent;
  /* No tap delay (evita 300ms en móvil) */
  touch-action: manipulation;
  /* Font smoothing premium */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* CRITICAL: SIN padding del body — los safe-area-insets los maneja cada
     componente RN vía useSafeAreaInsets. Si dejamos padding aquí, el
     BottomNav (position: absolute, bottom: 0) queda flotando ENCIMA del
     padding-bottom del body (no llega al borde físico del iPhone), y se
     ve "muy despegado" en PWA browser. Standalone PWA o Safari browser:
     mismo comportamiento, body llena el viewport completo edge-to-edge. */
  padding: 0;
  margin: 0;
}

/* BottomNav: el posicionamiento está hardcoded en BottomNav.tsx con números
   puros (sin env/calc) — RN Web los traduce correctamente. No reglas CSS aquí
   para evitar que se override mal entre versiones cacheadas. */

/* Inputs y editables sí permiten selección */
input, textarea, [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
  /* CRITICAL iOS Safari: si el font-size del input es <16px, Safari hace
     zoom-in automático al focusear el input (comportamiento default de
     accesibilidad). En PWA standalone esto desfigura el layout completamente.
     Forzamos 16px a nivel global como salvavidas — si algún componente RN
     setea fontSize menor, este CSS lo sobrescribe. */
  font-size: 16px;
}

/* Sin spinner amarillo de iOS al tocar */
* {
  -webkit-touch-callout: none;
}

/* Botones y pressables sin outline azul de Chrome */
button:focus,
[role="button"]:focus {
  outline: none;
}
button:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid #00d4ff;
  outline-offset: 2px;
}

/* Scrollbars premium dark (web only) */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 212, 255, 0.3);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 212, 255, 0.5);
}

/* ============================================================
 * Banner instalación — overlay glass dark abajo
 * ============================================================ */
#mgps-install-banner {
  position: fixed;
  left: max(8px, env(safe-area-inset-left));
  right: max(8px, env(safe-area-inset-right));
  bottom: max(8px, env(safe-area-inset-bottom));
  z-index: 999999;
  background: rgba(10, 14, 26, 0.92);
  border: 1px solid rgba(0, 212, 255, 0.4);
  border-radius: 16px;
  padding: 14px;
  font-family: 'Rajdhani', system-ui, -apple-system, sans-serif;
  color: #f5f6fa;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.55),
    0 0 24px rgba(0, 212, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  transform: translateY(120%);
  opacity: 0;
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease;
  max-width: 480px;
  margin: 0 auto;
}

#mgps-install-banner.mgps-pwa-visible {
  transform: translateY(0);
  opacity: 1;
}

.mgps-pwa-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mgps-pwa-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(0, 212, 255, 0.4);
  box-shadow: 0 4px 12px rgba(0, 212, 255, 0.25);
}

.mgps-pwa-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mgps-pwa-text {
  flex: 1;
  min-width: 0;
}

.mgps-pwa-title {
  font-size: 14px;
  font-weight: 700;
  color: #f5f6fa;
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}

.mgps-pwa-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
}

.mgps-pwa-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mgps-pwa-cta {
  background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
  color: #0a0e1a;
  border: none;
  padding: 9px 16px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    0 0 12px rgba(0, 212, 255, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: transform 120ms, box-shadow 200ms;
}

.mgps-pwa-cta:active {
  transform: scale(0.95);
}

.mgps-pwa-close {
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 15px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: background 200ms;
}

.mgps-pwa-close:active {
  background: rgba(255, 255, 255, 0.12);
}

/* ============================================================
 * Splash inicial (antes de que React cargue)
 * Evita flash blanco — muestra el logo cyan sobre dark
 * ============================================================ */
#root:empty::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(0, 212, 255, 0.08) 0%, transparent 60%),
    #0a0e1a;
  z-index: 9999;
  background-image:
    radial-gradient(ellipse at center, rgba(0, 212, 255, 0.08) 0%, transparent 60%),
    url('/icon-192.png');
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, 96px 96px;
}