/**
 * ============================================
 * MEJORAS RESPONSIVE ADICIONALES
 * Sistema de Validación - Optimizaciones Mobile
 * ============================================
 */

/* === OPTIMIZACIONES TÁCTILES === */

/* Mejorar áreas de toque en móviles (mínimo 44x44px según WCAG) */
@media (hover: none) and (pointer: coarse) {
  a, button, input, select, textarea, .clickable {
    min-height: 44px;
    min-width: 44px;
  }
  
  .nav-link {
    padding: 14px 20px;
  }
  
  .service-card {
    min-height: 88px;
  }
  
  .form-control {
    min-height: 48px;
  }
  
  .btn {
    min-height: 48px;
  }
}

/* === MEJORAS DE RENDIMIENTO MÓVIL === */

/* Optimizar animaciones en móviles */
@media (max-width: 768px) {
  * {
    -webkit-tap-highlight-color: rgba(99, 102, 241, 0.2);
  }
  
  /* Reducir complejidad de animaciones en móviles */
  .service-card,
  .hero-particles,
  body::before {
    will-change: auto;
  }
  
  /* Simplificar transformaciones */
  .service-card:hover {
    transform: translateY(-5px) !important;
  }
}

/* === MEJORAS DE LEGIBILIDAD === */

/* Mejorar contraste de texto en pantallas pequeñas */
@media (max-width: 480px) {
  body {
    font-size: 16px; /* Prevenir zoom en iOS */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  
  p, li, span, a {
    line-height: 1.6;
  }
  
  .hero-description,
  .notice-text,
  .service-description {
    line-height: 1.7;
  }
}

/* === PREVENIR ZOOM INDESEADO EN iOS === */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
select,
textarea {
  font-size: 16px !important; /* iOS no hace zoom si es >= 16px */
}

/* === MEJORAS PARA NAVEGACIÓN TÁCTIL === */

/* Mejorar feedback visual en táctil */
@media (hover: none) {
  .service-card:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
  
  .btn:active {
    transform: scale(0.97);
  }
  
  .nav-link:active {
    background: rgba(99, 102, 241, 0.15);
  }
}

/* === ORIENTACIÓN === */

/* Advertencia para landscape en móviles muy pequeños */
@media (max-width: 568px) and (orientation: landscape) {
  .landscape-warning {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(99, 102, 241, 0.95);
    color: white;
    padding: 10px;
    text-align: center;
    font-size: 14px;
    z-index: 10000;
  }
}

/* === MEJORAS DE ACCESIBILIDAD === */

/* Focus visible mejorado para navegación por teclado */
*:focus-visible {
  outline: 3px solid var(--color-primary, #6366f1);
  outline-offset: 2px;
}

/* Mejor contraste en modo alto contraste */
@media (prefers-contrast: high) {
  .service-card,
  .validation-form-card,
  .notice-card {
    border: 2px solid rgba(255, 255, 255, 0.3);
  }
  
  .btn {
    border: 2px solid currentColor;
  }
}

/* === MODO OSCURO RESPETANDO PREFERENCIAS DEL SISTEMA === */
@media (prefers-color-scheme: dark) {
  /* Ya estamos en modo oscuro por defecto, pero asegurar contraste */
  .form-control {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
  }
}

/* === OPTIMIZACIONES DE IMPRESIÓN MÓVIL === */
@media print {
  /* Ocultar elementos no necesarios */
  .navbar,
  .navbar-toggle,
  .service-arrow,
  .back-link,
  button,
  .btn,
  .notice-section {
    display: none !important;
  }
  
  /* Ajustar para impresión */
  body {
    background: white;
    color: black;
  }
  
  .service-card {
    border: 1px solid #000;
    page-break-inside: avoid;
  }
}

/* === MEJORAS ESPECÍFICAS PARA DISPOSITIVOS iOS === */
@supports (-webkit-touch-callout: none) {
  /* Prevenir zoom al rotar */
  html {
    -webkit-text-size-adjust: 100%;
  }
  
  /* Suavizar scroll en iOS */
  body {
    -webkit-overflow-scrolling: touch;
  }
  
  /* Mejorar inputs en iOS */
  input,
  textarea,
  select {
    -webkit-appearance: none;
    border-radius: 8px;
  }
}

/* === MEJORAS PARA ANDROID === */
@media screen and (max-width: 768px) {
  /* Prevenir el delay de 300ms en clicks */
  a, button, input, select, textarea {
    touch-action: manipulation;
  }
}

/* === MEJORAS PARA TABLETS === */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Aprovechar mejor el espacio en tablets */
  .container {
    max-width: 90%;
  }
  
  .services-grid {
    gap: 20px;
  }
  
  /* Navbar más espacioso en tablets */
  .navbar-container {
    padding: 0 30px;
  }
}

/* === SPLIT SCREEN / MULTITAREA === */
@media (min-width: 769px) and (max-width: 1024px) and (max-height: 600px) {
  /* Ajustes para cuando el navegador está en split screen */
  .hero {
    min-height: 40vh;
    padding-top: calc(var(--navbar-height, 80px) + 20px);
  }
  
  .hero-title {
    font-size: 1.8rem;
  }
}

/* === MEJORAS PARA PANTALLAS ULTRA ANCHAS === */
@media (min-width: 1920px) {
  .container {
    max-width: 1400px;
  }
  
  .services-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* === MODO DE AHORRO DE DATOS === */
@media (prefers-reduced-data: reduce) {
  /* Reducir animaciones y efectos */
  body::before,
  .hero-particles {
    display: none;
  }
  
  .service-card-bg {
    display: none;
  }
}

/* === MEJORAS PARA MODO LANDSCAPE EN TABLETS === */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
  .hero {
    min-height: 50vh;
  }
  
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* === SAFE AREAS (iPhone X+, notch) === */
@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  
  .navbar-container {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
  
  .container {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
  
  .navbar-menu.active {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
}

/* === MEJORAS PARA FOLD PHONES === */
@media (max-width: 653px) {
  /* Ajustes específicos para Galaxy Fold y similares */
  .service-card-inner {
    min-height: 160px;
  }
  
  .hero-title {
    font-size: 1.6rem;
  }
}

/* === DISPOSITIVOS EXTRA PEQUEÑOS (Smartwatches, etc) === */
@media (max-width: 320px) {
  :root {
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 0.75rem;
    --spacing-lg: 1rem;
  }
  
  .hero-title {
    font-size: 1.4rem;
  }
  
  .service-name {
    font-size: 1rem;
  }
  
  .navbar-brand {
    font-size: 1rem;
  }
}

/* === MODO DARK MODE FORZADO (OPCIONAL) === */
html[data-theme="dark"] {
  color-scheme: dark;
}

/* === PERFORMANCE: REDUCE WILL-CHANGE EN MÓVILES === */
@media (max-width: 768px) {
  * {
    will-change: auto !important;
  }
}