/* ============================================================
   mobile.css - Bottom nav, safe areas, PWA tweaks (~120 lin)
   Solo mobile <769px. Todos los colores via CSS variables.
   ============================================================ */

/* === Safe area para notch/dynamic island === */
body {
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* === Bottom nav para bodegueros === */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--brand-surface);
  border-top: 1px solid var(--brand-border);
  z-index: 60;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.bottom-nav-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 56px;
}

.bottom-nav-item {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px; color: var(--brand-text-muted);
  font-size: 0.6rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: color 0.15s;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.bottom-nav-item i { font-size: 1.1rem; }
.bottom-nav-item.active { color: var(--brand-accent); }
.bottom-nav-item:active { opacity: 0.7; }

/* === Modo bodega: bottom nav visible en mobile === */
@media (max-width: 768px) {
  .bodega-mode .bottom-nav { display: block; }
  .bodega-mode .bottom-nav-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: 56px;
  }
  .bodega-mode .app-content {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 8px));
  }
  /* En bodega mobile, ocultar sidebar toggle */
  .bodega-mode .app-sidebar { display: none; }
}

/* === Mejoras tactiles mobile === */
@media (max-width: 768px) {
  /* Evitar zoom accidental en inputs */
  input, select, textarea { font-size: 16px !important; }

  /* Mejorar scroll */
  .app-content {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  /* Transiciones suaves sidebar */
  .app-sidebar {
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  /* Navbar mas compacta */
  .app-navbar { height: 52px; }

  /* KPI touch-friendly */
  .kpi-card { min-height: 80px; }

  /* Chart labels no overflow */
  .chart-bar-value { font-size: 0.55rem; }
}

/* === PWA standalone mode === */
@media (display-mode: standalone) {
  body { padding-top: env(safe-area-inset-top, 20px); }
  .app-navbar { padding-top: env(safe-area-inset-top, 0); }
}

/* === Landscape mobile === */
@media (max-width: 768px) and (orientation: landscape) {
  .login-form-wrapper { padding: 16px; }
  .login-form-inner { max-width: 340px; }
  .login-mobile-logo img { height: 36px; }
  .bottom-nav-inner { height: 48px; }
  .bottom-nav-item i { font-size: 0.95rem; }
}

/* === Tablet tweaks === */
@media (min-width: 769px) and (max-width: 1024px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .app-content { padding: 20px; }
}