/* ========================================================================
 * INYMO · Aceros y Techos PWA — estilos moviles y badges
 * ======================================================================== */

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --at-orange: #8cc63f;
  --at-orange-dark: #7ab32e;
  --at-bg: #060b14;
  --at-txt: #f1f5f9;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  /* touch-action:manipulation removido — bloqueaba scroll en Android */
}
html, body {
  overscroll-behavior-y: contain;
  /* overflow-x:hidden removido — bloqueaba scroll vertical en PWA standalone */
}

/* Safe area para notch (iOS) — solo cuando esta instalada */
body.pwa-standalone {
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

/* Inputs con al menos 16px para que iOS no haga zoom */
input, select, textarea {
  font-size: 16px !important;
}

/* En celular real, forzar escala 1:1 */
@media (max-width: 640px) {
  html, body {
    font-size: 15px;
  }
  /* Evita textos gigantes por text inflation de Chrome Android */
  * { -webkit-text-size-adjust: none; text-size-adjust: none; }
}

/* Ocultar link "Aplicación" cuando ya está instalada como PWA */
html.pwa-standalone .sb-link-app,
body.pwa-standalone .sb-link-app {
  display: none !important;
}
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
  .sb-link-app { display: none !important; }
}

/* Badge flotante con contador de leads nuevos (bottom-right FAB style
 * para no tapar contenido superior ni conflicto con indicadores del topbar) */
.nav-badge {
  position: fixed;
  bottom: calc(20px + var(--safe-bottom));
  right: 20px;
  background: #dc2626;
  color: white;
  padding: 12px 16px;
  border-radius: 28px;
  display: none;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  z-index: 1100;
  min-width: 48px;
  min-height: 48px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.45), 0 2px 6px rgba(0,0,0,0.3);
  text-decoration: none;
  user-select: none;
}
.nav-badge.visible { display: inline-flex; }
.nav-badge.parpadea { animation: navBadgePulse 1.4s ease-in-out infinite; }
.nav-badge .badge-num {
  background: white;
  color: #dc2626;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  min-width: 22px;
  text-align: center;
}
.nav-badge i { font-size: 18px; }

@keyframes navBadgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.6); }
  50%      { box-shadow: 0 0 0 12px rgba(220,38,38,0); }
}

/* Toast cuando llega un lead nuevo — sale de arriba para visibilidad
 * pero con más espacio para no tapar indicadores del topbar */
.toast-nuevo-lead {
  position: fixed;
  top: calc(24px + var(--safe-top));
  left: 50%;
  transform: translateX(-50%);
  background: var(--at-bg);
  color: var(--at-txt);
  padding: 14px 20px;
  border-radius: 10px;
  border-left: 4px solid var(--at-orange);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  z-index: 1200;
  animation: toastSlideDown 0.3s ease-out;
  max-width: 90vw;
  font-weight: 500;
  font-size: 14px;
}
@keyframes toastSlideDown {
  from { transform: translate(-50%, -40px); opacity: 0; }
  to   { transform: translate(-50%, 0); opacity: 1; }
}