/* Guíate Alem - Estilos Móviles con Modo Oscuro */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root {
  --primary: #0037b0;
  --secondary: #006d2f;
}

html.dark, body.dark {
  background-color: #090d16 !important;
  color: #f8fafc !important;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: #faf8ff;
  color: #131b2e;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: background-color 0.2s ease, color 0.2s ease;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  position: relative;
  touch-action: pan-y;
}

.font-headline {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Safe Area Insets para Android y dispositivos con notch */
.pt-safe {
  padding-top: max(env(safe-area-inset-top, 24px), 24px) !important;
}
.pb-safe {
  padding-bottom: max(env(safe-area-inset-bottom, 20px), 20px) !important;
}
.nav-bottom-safe {
  padding-bottom: max(env(safe-area-inset-bottom, 16px), 16px) !important;
}
.content-bottom-clearance {
  padding-bottom: calc(80px + max(env(safe-area-inset-bottom, 20px), 20px)) !important;
}

/* Contención estricta para swipe horizontal */
.carousel-swipe-container {
  touch-action: pan-x;
  overflow-x: auto;
  max-width: 100%;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Modo oscuro adaptaciones */
.dark .bg-white {
  background-color: #131b2e !important;
  border-color: #1e293b !important;
}
.dark .bg-slate-50 {
  background-color: #0b1120 !important;
  border-color: #1e293b !important;
}
.dark .text-slate-900 {
  color: #f8fafc !important;
}
.dark .text-slate-800 {
  color: #f1f5f9 !important;
}
.dark .text-slate-700 {
  color: #cbd5e1 !important;
}
.dark .text-slate-600 {
  color: #94a3b8 !important;
}
.dark .border-slate-200, .dark .border-slate-100 {
  border-color: #1e293b !important;
}
.dark input {
  background-color: #0b1120 !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}