/* 🎨 GONHER RESPONSIVE ENHANCEMENTS
   📱 Mejoras específicas para comportamientos responsivos avanzados
   🎯 Complementa gonher-responsive.css con funcionalidades JavaScript
*/

/* ============================================
   🔧 ESTADOS DINÁMICOS DEL CUERPO
   ============================================ */

/* Estados de breakpoint aplicados por JavaScript */
body.bp-xs {
  --current-breakpoint: 'xs';
}

body.bp-sm {
  --current-breakpoint: 'sm';
}

body.bp-md {
  --current-breakpoint: 'md';
}

body.bp-lg {
  --current-breakpoint: 'lg';
}

body.bp-xl {
  --current-breakpoint: 'xl';
}

body.bp-xxl {
  --current-breakpoint: 'xxl';
}

/* Estados de orientación */
body.portrait {
  --orientation: 'portrait';
}

body.landscape {
  --orientation: 'landscape';
}

/* Estados de dispositivo */
body.touch-device {
  --device-type: 'touch';
}

body.no-touch {
  --device-type: 'no-touch';
}

/* ============================================
   📱 MENÚ TOGGLE MÓVIL
   ============================================ */

.menu-toggle {
  position: fixed;
  top: var(--spacing-md);
  left: var(--spacing-md);
  z-index: var(--z-menu-toggle, 200);
  background: var(--button-gradient);
  border: none;
  border-radius: 12px;
  color: white;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
}

.menu-toggle:hover {
  background: var(--button-hover);
  transform: scale(1.05);
}

.menu-toggle .material-symbols-outlined {
  font-size: 1.2rem;
}

/* Ocultar en pantallas grandes */
@media (min-width: 1024px) {
  .menu-toggle {
    display: none;
  }
}

/* Animacion slide del menu en mobile */
@media (max-width: 1023px) {
  .menu {
    transform: translateX(0);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s ease;
  }

  .menu.menu-hidden {
    transform: translateX(-100%);
  }

  .menu.menu-visible {
    transform: translateX(0);
  }
}

/* ============================================
   🎯 ESTADOS DE MODAL MÓVIL
   ============================================ */

/* Cuando hay modal abierta en móvil */
body.modal-open-mobile .menu {
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

body.modal-open-mobile .main-content {
  margin-left: 0;
  width: 100vw;
  transition: all 0.3s ease;
}

body.modal-open-mobile .menu-toggle {
  display: none;
}

/* Prevenir scroll del body cuando modal está abierta */
/* Nota: No usar position:fixed ya que causa salto de scroll en iOS Safari */
body.modal-open-mobile {
  overflow: hidden;
  height: 100%;
  touch-action: none;
}

/* ============================================
   📊 MEJORAS DE TABLA RESPONSIVA
   ============================================ */

/* Headers móviles para tablas */
.table-responsive.mobile-headers td {
  position: relative;
  padding-left: 50%;
  padding-top: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
}

.table-responsive.mobile-headers td:before {
  content: attr(data-label);
  position: absolute;
  left: var(--spacing-sm);
  top: var(--spacing-sm);
  width: 45%;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.table-responsive.mobile-headers thead {
  display: none;
}

.table-responsive.mobile-headers tr {
  display: block;
  border: 1px solid rgba(166, 160, 143, 0.1);
  border-radius: 8px;
  margin-bottom: var(--spacing-md);
  background: rgba(166, 160, 143, 0.05);
}

.table-responsive.mobile-headers td {
  display: block;
  border: none;
  border-bottom: 1px solid rgba(166, 160, 143, 0.1);
}

.table-responsive.mobile-headers td:last-child {
  border-bottom: none;
}

/* Aplicar solo en móvil */
@media (max-width: 767px) {
  .table-responsive {
    border-radius: 0;
  }
  
  .table-responsive table {
    font-size: var(--font-xs);
  }
}

/* ============================================
   🔘 MEJORAS DE BOTONES TÁCTILES
   ============================================ */

/* Botones mejorados para dispositivos táctiles */
body.touch-device .btn {
  min-height: 48px;
  padding: var(--spacing-md) var(--spacing-lg);
  position: relative;
  overflow: hidden;
}

/* Efecto de toque */
body.touch-device .btn:active {
  transform: scale(0.98);
}

/* Efecto ripple para touch */
body.touch-device .btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
  pointer-events: none;
}

body.touch-device .btn:active::after {
  width: 200px;
  height: 200px;
}

/* ============================================
   📋 FORMULARIOS ADAPTATIVOS
   ============================================ */

/* Formularios mejorados para touch */
body.touch-device .form-control {
  min-height: 48px;
  font-size: 16px; /* Prevenir zoom en iOS */
  padding: var(--spacing-md);
}

body.touch-device select.form-control {
  background-size: 20px;
  padding-right: 48px;
}

/* Labels flotantes en móvil */
@media (max-width: 767px) {
  .form-group.floating-label {
    position: relative;
  }
  
  .form-group.floating-label label {
    position: absolute;
    top: 50%;
    left: var(--spacing-md);
    transform: translateY(-50%);
    transition: all 0.3s ease;
    pointer-events: none;
    color: rgba(255, 255, 255, 0.6);
    z-index: 1;
  }
  
  .form-group.floating-label .form-control:focus + label,
  .form-group.floating-label .form-control:not(:placeholder-shown) + label {
    top: 0;
    transform: translateY(-100%);
    font-size: var(--font-xs);
    color: var(--accent-color);
  }
}

/* ============================================
   🎨 ANIMACIONES RESPONSIVAS
   ============================================ */

/* Reducir animaciones en dispositivos de baja potencia */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Animaciones suaves para cambios de breakpoint */
.main-content,
.menu,
.modal-content {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   📐 UTILIDADES DE ORIENTACIÓN
   ============================================ */

/* Mostrar solo en portrait */
.portrait-only {
  display: none;
}

body.portrait .portrait-only {
  display: block;
}

/* Mostrar solo en landscape */
.landscape-only {
  display: none;
}

body.landscape .landscape-only {
  display: block;
}

/* Ajustes específicos para landscape en móvil */
@media (max-height: 500px) and (orientation: landscape) {
  .menu {
    padding-top: 0;
  }
  
  .main-content {
    padding-top: var(--spacing-sm);
  }
  
  .page-header {
    padding: var(--spacing-sm);
  }
  
  .modal-content {
    max-height: 90vh;
    overflow-y: auto;
  }
}

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

/* Focus mejorado para navegación por teclado */
.btn:focus-visible,
.form-control:focus-visible,
.menu-item:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(82, 89, 27, 0.2);
}

/* Texto de mayor contraste en móvil */
@media (max-width: 767px) {
  .table th,
  .table td,
  .form-control,
  .btn {
    font-weight: 500;
  }
}

/* ============================================
   🔊 FEEDBACK HÁPTICO (PARA PWA)
   ============================================ */

/* Estilos para elementos que proporcionan feedback háptico */
.haptic-feedback {
  transition: transform 0.1s ease;
}

.haptic-feedback:active {
  transform: scale(0.95);
}

/* ============================================
   🌐 SOPORTE PARA SAFE AREAS (iOS)
   ============================================ */

/* Soporte para safe areas en dispositivos con notch */
@supports (padding-top: env(safe-area-inset-top)) {
  .menu {
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
  }

  .main-content {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .menu-toggle {
    top: calc(var(--spacing-md) + env(safe-area-inset-top));
    left: calc(var(--spacing-md) + env(safe-area-inset-left));
  }

  .modal-overlay {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  .notification {
    right: calc(20px + env(safe-area-inset-right));
    top: calc(20px + env(safe-area-inset-top));
  }
}

/* ============================================
   📊 INDICADORES DE ESTADO RESPONSIVO
   ============================================ */

/* Indicador visual del breakpoint actual (solo en desarrollo) */
/* Oculto por defecto, visible solo con body.debug */
.debug-breakpoint {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-xs);
  z-index: var(--z-debug, 1200);
  border-radius: 0 0 0 8px;
  font-family: monospace;
}

body.debug .debug-breakpoint {
  display: block;
}

body.bp-xs .debug-breakpoint::after { content: 'XS'; }
body.bp-sm .debug-breakpoint::after { content: 'SM'; }
body.bp-md .debug-breakpoint::after { content: 'MD'; }
body.bp-lg .debug-breakpoint::after { content: 'LG'; }
body.bp-xl .debug-breakpoint::after { content: 'XL'; }
body.bp-xxl .debug-breakpoint::after { content: 'XXL'; }

/* ============================================
   🎯 OPTIMIZACIONES DE RENDIMIENTO
   ============================================ */

/* Optimización de will-change para elementos que se animan frecuentemente */
.menu.expanded,
.modal.show,
.notification {
  will-change: transform, opacity;
}

/* Eliminación de will-change después de animaciones */
.menu:not(.expanded),
.modal:not(.show) {
  will-change: auto;
}

/* Optimización de contenido fuera de pantalla */
.menu:not(.expanded) .menu-text {
  visibility: hidden;
  will-change: auto;
}

.menu.expanded .menu-text {
  visibility: visible;
  will-change: opacity, transform;
}

/* ============================================
   📱 MEJORAS ESPECÍFICAS PARA PWA
   ============================================ */

/* Estilos para cuando la app se ejecuta como PWA */
@media (display-mode: standalone) {
  .main-content {
    padding-top: var(--spacing-lg);
  }
  
  /* Ocultar elementos relacionados con navegador */
  .browser-only {
    display: none;
  }
}

/* Estilos para modo fullscreen */
@media (display-mode: fullscreen) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}