/* Reset y base mobile-first */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  position: relative;
  z-index: 0;
  min-height: 100vh;
  min-height: -webkit-fill-available; /* iOS Safari */
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Fondo de la aplicación con transparencia - Diseño minimalista */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  height: -webkit-fill-available; /* iOS Safari */
  background: linear-gradient(135deg, #fef5f0 0%, #ffffff 50%, #f8f9fa 100%);
  background-image: url('/fondo kc.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  opacity: 0.08;
  z-index: -1;
  pointer-events: none;
}

/* Efectos de diseño minimalista */
body {
  background: linear-gradient(180deg, #ffffff 0%, #fef5f0 100%);
}

/* Ocultar scrollbar pero mantener funcionalidad */
.scrollbar-hide {
  -ms-overflow-style: none;  /* IE y Edge */
  scrollbar-width: none;  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;  /* Chrome, Safari y Opera */
}

/* Mobile-first: Base para móviles - Tamaños de toque */
button, a, input, select, textarea {
  min-height: 44px; /* Tamaño mínimo recomendado para toque */
  font-size: 16px; /* Evita zoom automático en iOS */
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"] {
  font-size: 16px; /* Previene zoom en iOS */
}

/* Ajustes para pantallas más grandes */
@media (min-width: 640px) {
  button, a, input, select, textarea {
    min-height: auto; /* Permite tamaños más pequeños en desktop */
  }
}

/* Asegurar que los contenedores no se desborden - Mobile-first */
.container,
.max-w-lg,
.max-w-md,
.max-w-2xl {
  width: 100%;
  max-width: 100%;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

@media (min-width: 640px) {
  .container,
  .max-w-lg,
  .max-w-md,
  .max-w-2xl {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Safe area para dispositivos con notch (iPhone X+) */
@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  
  header {
    padding-top: max(1.5rem, env(safe-area-inset-top));
  }
  
  nav,
  .safe-area-bottom {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}

/* Mejoras para tablets - Mobile-first */
@media (min-width: 768px) and (max-width: 1024px) {
  .max-w-lg {
    max-width: 600px;
  }
}

/* Mejoras para desktop */
@media (min-width: 1024px) {
  .max-w-lg {
    max-width: 512px;
  }
}

/* Prevenir desbordamientos horizontales en móviles */
* {
  max-width: 100%;
}

img, video, iframe {
  max-width: 100%;
  height: auto;
}