/* ═══════════════════════════════════════════════════════════════════════════
   ASTRO SEGURIDAD 360° — OFFICIAL BRAND DESIGN SYSTEM v3.0
   ("Astro Midnight Navy #000631 & Mint-Emerald #00E096")
   Unified visual identity between astroseguridad.lat Web, Logo & Mobile App
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@500;600;700;800;900&display=swap');

:root {
  /* Official Astro Seguridad Brand Tokens (from Logo & Web) */
  --astro-navy: #000631;
  --astro-navy-light: #000C5C;
  --astro-navy-card: #070F3E;
  --astro-navy-surface: #0D1854;
  --astro-emerald: #00E096;
  --astro-emerald-dark: #00B377;
  --astro-emerald-light: #33E6AB;
  --astro-emerald-glow: rgba(0, 224, 150, 0.25);
  --astro-cyan: #00B3FF;

  /* Light & Dark Surface Tokens */
  --astro-bg-light: #F8FAFC;
  --astro-card-light: #FFFFFF;
  --astro-border-light: rgba(0, 6, 49, 0.08);
  --astro-bg-dark: #000631;
  --astro-card-dark: #070F3E;
  --astro-surface-dark: #0D1854;
  --astro-border-dark: rgba(255, 255, 255, 0.09);

  /* Emergency Semantic Tokens */
  --astro-crimson: #EF4444;
  --astro-crimson-dark: #DC2626;
  --astro-crimson-glow: rgba(239, 68, 68, 0.38);
}

html, body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, .font-display {
  font-family: 'Outfit', 'Inter', sans-serif;
  letter-spacing: -0.02em;
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* ── Official Astro Midnight Navy Background + Technical Grid in Dark Mode ── */
html.dark body,
html.dark .dark\:bg-background-dark {
  background-color: var(--astro-bg-dark) !important;
  background-image:
    radial-gradient(circle at 50% -10%, rgba(0, 224, 150, 0.12), transparent 48%),
    radial-gradient(circle at 90% 25%, rgba(0, 179, 255, 0.08), transparent 42%),
    linear-gradient(to right, rgba(0, 224, 150, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 224, 150, 0.03) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 56px 56px, 56px 56px;
  background-attachment: fixed;
}

/* ── Clean Institutional Light Mode with Subtle Technical Grid ── */
body.bg-background-light:not(.dark),
html:not(.dark) body {
  background-color: var(--astro-bg-light);
  background-image:
    radial-gradient(circle at 50% -15%, rgba(0, 224, 150, 0.08), transparent 45%),
    linear-gradient(to right, rgba(0, 6, 49, 0.022) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 6, 49, 0.022) 1px, transparent 1px);
  background-size: 100% 100%, 56px 56px, 56px 56px;
  background-attachment: fixed;
}

html.dark .dark\:bg-card-dark,
html.dark .dark\:bg-card-dark\/60 {
  background-color: rgba(7, 15, 62, 0.88) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* ── Elevated Astro Glass Card ── */
.astro-card {
  background: var(--astro-card-light);
  border: 1px solid var(--astro-border-light);
  box-shadow:
    0 10px 28px -6px rgba(0, 6, 49, 0.06),
    0 2px 6px -1px rgba(0, 6, 49, 0.03);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}

html.dark .astro-card {
  background: linear-gradient(180deg, rgba(13, 24, 84, 0.82) 0%, rgba(7, 15, 62, 0.92) 100%);
  border: 1px solid var(--astro-border-dark);
  box-shadow:
    0 14px 34px -8px rgba(0, 2, 20, 0.65),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* ── Brand Primary Button (Official Web Identity: #00E096 bg + #000631 Navy text) ── */
.astro-btn-primary {
  background: linear-gradient(135deg, #00E096 0%, #00C584 100%);
  color: #000631 !important;
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow:
    0 10px 25px -4px rgba(0, 224, 150, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.astro-btn-primary:hover {
  background: linear-gradient(135deg, #33E6AB 0%, #00E096 100%);
  box-shadow: 0 14px 30px -4px rgba(0, 224, 150, 0.48);
  transform: translateY(-1px);
}

.astro-btn-primary:active {
  transform: scale(0.975);
}

/* ── Premium Form Inputs ── */
.astro-input {
  background-color: rgba(248, 250, 252, 0.9);
  border: 1.5px solid rgba(0, 6, 49, 0.12);
  color: #000631;
  transition: all 0.2s ease;
}

.astro-input::placeholder {
  color: #94A3B8;
}

.astro-input:focus {
  background-color: #FFFFFF;
  border-color: #00E096;
  box-shadow: 0 0 0 4px rgba(0, 224, 150, 0.15);
  outline: none;
}

html.dark .astro-input {
  background-color: rgba(0, 6, 49, 0.55);
  border: 1.5px solid rgba(255, 255, 255, 0.11);
  color: #FFFFFF;
}

html.dark .astro-input::placeholder {
  color: #64748B;
}

html.dark .astro-input:focus {
  background-color: rgba(0, 6, 49, 0.82);
  border-color: #00E096;
  box-shadow: 0 0 0 4px rgba(0, 224, 150, 0.18);
  outline: none;
}

/* ── Tactile Red SOS Button ── */
.astro-sos-btn {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 55%, #B91C1C 100%);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    0 12px 28px -6px rgba(220, 38, 38, 0.5),
    0 4px 10px -2px rgba(220, 38, 38, 0.35),
    inset 0 1px 1px rgba(255, 255, 255, 0.35),
    inset 0 -2px 4px rgba(0, 0, 0, 0.25);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.astro-sos-btn:hover {
  box-shadow:
    0 16px 34px -6px rgba(239, 68, 68, 0.62),
    0 6px 14px -2px rgba(239, 68, 68, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.45);
}

.astro-sos-btn:active {
  transform: scale(0.975);
}

/* Subtle pulsing ring for SOS icon */
@keyframes sosRingPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.35);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0);
  }
}

.astro-sos-icon-badge {
  animation: sosRingPulse 2.2s infinite ease-in-out;
}

/* ── Bento Action Tile ── */
.astro-bento-tile {
  background: var(--astro-card-light);
  border: 1px solid var(--astro-border-light);
  box-shadow: 0 4px 14px -2px rgba(0, 6, 49, 0.04);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

html.dark .astro-bento-tile {
  background: linear-gradient(180deg, rgba(13, 24, 84, 0.72) 0%, rgba(7, 15, 62, 0.88) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 22px -4px rgba(0, 2, 20, 0.55), inset 0 1px 0 0 rgba(255, 255, 255, 0.07);
}

.astro-bento-tile:hover {
  border-color: rgba(0, 224, 150, 0.35);
}

.astro-bento-tile:active {
  transform: scale(0.96);
}

/* ── Tactical Dark Mode Leaflet Map Filter ── */
html.dark .leaflet-tile-pane {
  filter: invert(100%) hue-rotate(190deg) brightness(90%) contrast(94%) saturate(90%);
}

html.dark .leaflet-container {
  background: #000631 !important;
}

/* ── Floating Bottom Navigation Dock ── */
.astro-bottom-dock {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(0, 6, 49, 0.07);
  box-shadow: 0 -8px 28px rgba(0, 6, 49, 0.06);
}

html.dark .astro-bottom-dock {
  background: rgba(0, 6, 49, 0.90);
  border-top: 1px solid rgba(0, 224, 150, 0.14);
  box-shadow: 0 -10px 32px rgba(0, 2, 20, 0.75);
}

nav.fixed.bottom-0 {
  bottom: 0 !important;
  padding-bottom: max(14px, env(safe-area-inset-bottom, 14px)) !important;
}

/* ── Astro Header Bar ── */
.astro-header-glass {
  background: rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 6, 49, 0.07);
}

html.dark .astro-header-glass {
  background: rgba(0, 6, 49, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}