/* ===== Lliria Properties - Main CSS ===== */
:root {
  --bs-body-font-size: 14px;
  --primary: #0d6efd;
  --tab-bar-height: 64px;
  --tab-bar-bg: #1a1a2e;
  --tab-active: #3b82f6;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* ── Base iOS/Safari PWA ─────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  /* Evitar rebote de scroll al hacer pull-to-refresh en PWA */
  overscroll-behavior-y: none;
}
body {
  -webkit-text-size-adjust: 100%;
  /* Espacio para el bottom tab bar + safe area del home indicator */
  padding-bottom: calc(var(--safe-bottom) + var(--tab-bar-height));
}
body:not(.has-bottom-nav) {
  padding-bottom: var(--safe-bottom);
}

/* ── CRÍTICO iOS: Evitar zoom automático en inputs (font-size < 16px) ── */
/* iOS Safari hace zoom cuando el input tiene font-size < 16px            */
@media (max-width: 767px) {
  input[type="text"], input[type="number"], input[type="email"],
  input[type="password"], input[type="search"], input[type="tel"],
  input[type="url"], input[type="date"], input[type="datetime-local"],
  select, textarea {
    font-size: 16px !important;
  }
  /* Bootstrap .form-control y .form-select también */
  .form-control, .form-select {
    font-size: 16px !important;
  }
}

/* Quitar el tap highlight azul de iOS en botones/links */
a, button, [role="button"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Tamaño mínimo táctil (WCAG AA: 44×44px) */
.btn, button { min-height: 36px; }
@media (max-width: 768px) {
  .btn, button { min-height: 44px; }
  .btn-sm { min-height: 40px; }
}

/* Navbar: padding-top para el Dynamic Island / notch */
.navbar.sticky-top {
  padding-top: max(0.5rem, var(--safe-top));
}

/* ── Bottom Tab Bar ──────────────────────────────────────────────── */
.bottom-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  background: var(--tab-bar-bg);
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex;
  align-items: stretch;
  height: calc(var(--tab-bar-height) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  background-color: rgba(15, 23, 42, 0.92);
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: #64748b;
  text-decoration: none !important;
  background: none;
  border: none;
  font-size: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  font-weight: 500;
  padding: 6px 2px;
  cursor: pointer;
  transition: color .15s ease;
  -webkit-tap-highlight-color: transparent;
}

.tab-item i {
  font-size: 22px;
  line-height: 1;
  transition: transform .15s ease;
}

.tab-item.active,
.tab-item:active {
  color: var(--tab-active);
}

.tab-item.active i {
  transform: scale(1.1);
}

/* Botón de escanear: color destacado */
.tab-item.tab-scan { color: #f59e0b; }
.tab-item.tab-scan:active { color: #d97706; }

/* Animación de pulso cuando se toca */
.tab-item:active i {
  transform: scale(0.92);
}

/* ── Cards ───────────────────────────────────────────────────────── */
.card.rounded-4 { border-radius: 16px !important; }
.card.rounded-top-4 { border-radius: 16px 16px 0 0 !important; }

/* ── Navbar ──────────────────────────────────────────────────────── */
.navbar-brand { font-size: 1.1rem; }

/* ── Badges ──────────────────────────────────────────────────────── */
.badge { font-weight: 500; letter-spacing: .02em; }

/* ── Table — mobile tweaks ───────────────────────────────────────── */
@media (max-width: 576px) {
  .table td, .table th { font-size: 12px; padding: 6px 4px; }
  .btn-sm { font-size: 11px; padding: 4px 8px; }
  .display-6 { font-size: 1.4rem; }
}

/* ── Leaflet label fix ───────────────────────────────────────────── */
.muni-label {
  background: rgba(255,255,255,.85);
  border: none;
  box-shadow: none;
  font-size: 11px;
  font-weight: 600;
  color: #0d6efd;
  padding: 2px 5px;
  border-radius: 4px;
}

/* ── Input group icons ───────────────────────────────────────────── */
.input-group-text { border-right: none; }
.input-group .form-control { border-left: none; }
.input-group .form-control:focus { border-left: none; box-shadow: none; }

/* ── Footer ──────────────────────────────────────────────────────── */
footer { background: #f8f9fa; }

/* ── Modales: corrección safe-area en iPhone ─────────────────────── */
.modal-dialog {
  margin-bottom: calc(var(--safe-bottom) + 1rem);
}

/* ── Scroll en tablas — deslizamiento nativo iOS ─────────────────── */
.table-responsive {
  -webkit-overflow-scrolling: touch;
}

/* ── Install PWA prompt ──────────────────────────────────────────── */
#pwaInstallBanner {
  position: fixed;
  bottom: calc(var(--tab-bar-height) + var(--safe-bottom) + 8px);
  left: 12px; right: 12px;
  background: #1e3a5f;
  border: 1px solid #3b82f6;
  border-radius: 14px;
  padding: .75rem 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  z-index: 1040;
  box-shadow: 0 4px 24px rgba(0,0,0,.4);
  animation: slideUp .3s ease;
}
#pwaInstallBanner img { width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0; }
#pwaInstallBanner .msg { color: #e2e8f0; font-size: .85rem; line-height: 1.3; flex: 1; }
#pwaInstallBanner button { flex-shrink: 0; }

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ── iOS: Momentum scroll en contenedores con overflow ──────────── */
.list-group, .table-responsive, .card-body.overflow-auto,
.dropdown-menu, [data-bs-scroll="true"] {
  -webkit-overflow-scrolling: touch;
}

/* ── iOS: Evitar salto de elementos fixed cuando abre el teclado ── */
/* Los inputs en modales no deben triggear scroll del body           */
body.keyboard-open .bottom-tab-bar {
  transform: translateY(100%);
  pointer-events: none;
}

/* ── iOS: Menú desplegable en plena pantalla (dropdown sheets) ──── */
@media (max-width: 767px) {
  .dropdown-menu.show {
    border-radius: 16px 16px 0 0;
    border-left: none;
    border-right: none;
  }
}

/* ── Accesibilidad: Reducir movimiento ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ── iOS: Botón Compartir / Web Share ───────────────────────────── */
.btn-share {
  background: none;
  border: 1px solid rgba(13,110,253,.4);
  border-radius: 8px;
  color: #0d6efd;
  padding: 4px 10px;
  font-size: 13px;
  cursor: pointer;
}
.btn-share:active { background: rgba(13,110,253,.08); }