/* ========================================
   OPTIMIZACIONES AVANZADAS PARA MÓVILES
======================================== */

/* PWA y App-like behavior */
html {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

body {
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}

/* Optimización de performance para animaciones */
.form-control,
.btn,
.field-icon,
.card {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

/* Mejoras de UX para iOS */
input,
textarea,
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
}

/* Prevenir zoom en input focus para iOS */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  select,
  textarea,
  input[type="text"],
  input[type="password"],
  input[type="datetime"],
  input[type="datetime-local"],
  input[type="date"],
  input[type="month"],
  input[type="time"],
  input[type="week"],
  input[type="number"],
  input[type="email"],
  input[type="url"],
  input[type="search"],
  input[type="tel"] {
    font-size: 16px !important;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  body {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  }

  .card {
    background: rgba(30, 41, 59, 0.95);
    color: #e2e8f0;
  }

  .form-control {
    background-color: rgba(45, 55, 72, 0.8);
    border-color: #4a5568;
    color: #e2e8f0;
  }

  .form-control:focus {
    background-color: rgba(45, 55, 72, 0.9);
    border-color: #667eea;
    color: #e2e8f0;
  }

  .form-label {
    color: #e2e8f0;
  }

  .section-title {
    color: #81c784;
  }
}

/* Optimizaciones para pantallas con notch */
@supports (padding: max(0px)) {
  .container {
    padding-left: max(1rem, env(safe-area-inset-left)) !important;
    padding-right: max(1rem, env(safe-area-inset-right)) !important;
  }

  .py-5 {
    padding-top: max(2rem, env(safe-area-inset-top)) !important;
    padding-bottom: max(2rem, env(safe-area-inset-bottom)) !important;
  }
}

/* Optimizaciones para dispositivos plegables */
@media (min-width: 280px) and (max-width: 653px) {
  .card {
    margin: 0;
    border-radius: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* Mejoras para accesibilidad y contraste */
@media (prefers-contrast: high) {
  .form-control {
    border-width: 3px;
  }

  .btn-success {
    background: #2d5a2d;
    border: 3px solid #1a4d1a;
  }

  .invalid-feedback {
    background: #fff;
    color: #d00;
    border: 2px solid #d00;
  }

  .valid-feedback {
    background: #fff;
    color: #080;
    border: 2px solid #080;
  }
}

/* Reducir movimiento para usuarios sensibles */
@media (prefers-reduced-motion: reduce) {
  .form-control.is-invalid {
    animation: none;
  }

  .loading-spinner {
    animation: none;
    border: 2px solid #ccc;
    border-top: 2px solid #667eea;
  }

  * {
    transition: none !important;
    animation: none !important;
  }
}

/* Optimizaciones para conexiones lentas */
@media (prefers-reduced-data: reduce) {
  .card {
    box-shadow: none;
    backdrop-filter: none;
  }

  .loading-spinner {
    display: none;
  }

  .form-control.checking::after {
    content: "...";
    position: absolute;
    right: 10px;
  }
}

/* Gestos táctiles mejorados */
.swipe-area {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}

/* Mejoras para teclados virtuales grandes */
@media screen and (max-height: 400px) {
  .form-control {
    padding: 0.5rem 0.75rem;
    min-height: 36px;
  }

  .btn-success {
    padding: 0.5rem 1.5rem;
    font-size: 0.875rem;
  }

  .section-title {
    font-size: 0.95rem;
    margin: 0.75rem 0 !important;
  }

  .invalid-feedback,
  .valid-feedback {
    font-size: 0.75rem;
    padding: 0.4rem 0.6rem;
  }
}

/* Haptic feedback para dispositivos compatibles */
@media (hover: none) and (pointer: coarse) {
  .btn-success:active {
    transform: scale(0.96);
    transition: transform 0.1s ease;
  }

  .form-control:focus {
    transform: scale(1.01);
    transition: transform 0.2s ease;
  }
}

/* Optimizaciones para velocidad de scroll */
.scrollable-content {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}

/* Mejoras para lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus visible mejorado para navegación por teclado */
.form-control:focus-visible {
  outline: 3px solid #667eea;
  outline-offset: 2px;
}

.btn:focus-visible {
  outline: 3px solid #48bb78;
  outline-offset: 2px;
}

/* Optimizaciones específicas para Android */
@media screen and (-webkit-min-device-pixel-ratio: 1) and (min-resolution: 96dpi) {
  .form-control {
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
  }
}

/* Mejoras para navegadores más antiguos */
@supports not (backdrop-filter: blur(20px)) {
  .card {
    background: rgba(255, 255, 255, 0.98);
  }
}

/* Print styles para cuando sea necesario */
@media print {
  body {
    background: white !important;
  }

  .card {
    background: white !important;
    box-shadow: none !important;
    border: 1px solid #ccc !important;
  }

  .btn-success {
    display: none !important;
  }
}