/**
 * Responsive Design - GMP Bienes Raíces
 * Compatible con: Desktop, Tablet, Mobile (Android & iOS)
 * Versión: 1.0.1
 */

/* ============================================
   VARIABLES Y CONFIGURACIÓN GLOBAL
   ============================================ */
   :root {
    --header-height: 70px;
    --header-height-scroll: 60px;
    --nav-zindex: 1000;
    --breakpoint-mobile: 1199px;
    --breakpoint-tablet: 991px;
    --breakpoint-desktop: 1200px;
    --transition-speed: 0.3s;
    --transition-easing: ease-in-out;
  }
  
  /* ============================================
     HEADER FIJO - TODAS LAS PÁGINAS
     ============================================ */
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--nav-zindex);
    transition: all var(--transition-speed) var(--transition-easing);
    background: #0c2442;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
  
  .header.scrolled {
    background: rgba(12, 36, 66, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  }
  
  /* ============================================
     MENÚ HAMBURGUESA - BOTÓN
     ============================================ */
  .mobile-nav-toggle {
    background: #dcc168;
    border: none;
    border-radius: 8px;
    width: 44px;
    height: 44px;
    display: none;
    align-items: center;
    justify-content: center;
    color: #0c2442;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    z-index: calc(var(--nav-zindex) + 1);
    flex-shrink: 0;
  }
  
  .mobile-nav-toggle:hover {
    background: #e8d58a;
    transform: scale(1.05);
  }
  
  .mobile-nav-toggle:focus {
    outline: 3px solid #dcc168;
    outline-offset: 2px;
  }
  
  .mobile-nav-toggle.bi-list::before {
    content: "\f479";
  }
  
  .mobile-nav-toggle.bi-x::before {
    content: "\f62a";
  }
  
  /* ============================================
     NAVEGACIÓN - DESKTOP (≥ 1200px)
     ============================================ */
  @media (min-width: 1200px) {
    /* Ocultar elementos móviles */
    .mobile-nav-toggle,
    .nav-overlay,
    .nav-close-btn {
      display: none !important;
      visibility: hidden !important;
    }
    
    /* Forzar menú visible como barra horizontal */
    #navmenu,
    #navmenu.collapse,
    #navmenu.show {
      position: static !important;
      display: flex !important;
      flex-direction: row !important;
      width: auto !important;
      height: auto !important;
      max-height: none !important;
      background: transparent !important;
      padding: 0 !important;
      margin: 0 !important;
      transform: none !important;
      overflow: visible !important;
      box-shadow: none !important;
      visibility: visible !important;
      opacity: 1 !important;
      z-index: auto !important;
    }
    
    /* Navbar horizontal */
    #navmenu .navbar-nav {
      display: flex !important;
      flex-direction: row !important;
      gap: 0.25rem !important;
      width: auto !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    
    /* Items inline */
    #navmenu .nav-item {
      display: inline-block !important;
      width: auto !important;
      margin: 0 !important;
      padding: 0 !important;
      border: none !important;
    }
    
    /* Links */
    #navmenu .nav-link {
      display: inline-block !important;
      width: auto !important;
      padding: 0.5rem 1rem !important;
      color: #ffffff !important;
      background: transparent !important;
      font-weight: 500 !important;
      font-size: 0.95rem !important;
      text-decoration: none !important;
      text-align: center !important;
      border-radius: 6px !important;
      transition: all 0.2s ease !important;
      border: none !important;
      white-space: nowrap;
    }
    
    #navmenu .nav-link:hover,
    #navmenu .nav-link.active {
      background: rgba(220, 193, 104, 0.2) !important;
      color: #dcc168 !important;
    }
    
    /* Body normal */
    body,
    body.menu-open {
      overflow: auto !important;
      position: static !important;
      width: auto !important;
    }
  }
  
  /* ============================================
     NAVEGACIÓN - MÓVIL (< 1200px) - SIDEBAR LATERAL
     ============================================ */
  @media (max-width: 1199px) {
    /* Mostrar botón hamburguesa */
    .mobile-nav-toggle {
      display: flex !important;
    }
    
    /* Overlay */
    .nav-overlay {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      background: rgba(0, 0, 0, 0.5) !important;
      z-index: 9998 !important;
      opacity: 0 !important;
      visibility: hidden !important;
      transition: all 0.3s ease !important;
    }
    
    .nav-overlay.show {
      opacity: 1 !important;
      visibility: visible !important;
    }
    
    /* Menú - Sidebar lateral */
    #navmenu,
    #navmenu.collapse {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      width: 280px !important;
      height: 100vh !important;
      max-height: 100vh !important;
      background: #0c2442 !important;
      z-index: 9999 !important;
      padding: 80px 0 0 0 !important;
      margin: 0 !important;
      transform: translateX(-100%) !important;
      transition: transform 0.3s ease !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
    }
    
    /* Menú abierto */
    #navmenu.show,
    #navmenu.collapse.show {
      transform: translateX(0) !important;
      display: block !important;
      box-shadow: 4px 0 20px rgba(0,0,0,0.3) !important;
    }
    
    /* Navbar-nav */
    #navmenu .navbar-nav {
      display: flex !important;
      flex-direction: column !important;
      gap: 0 !important;
      width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      list-style: none !important;
    }
    
    /* Nav items */
    #navmenu .nav-item {
      display: block !important;
      width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    }
    
    /* Nav links */
    #navmenu .nav-link {
      display: block !important;
      width: 100% !important;
      padding: 1rem 1.5rem !important;
      color: #ffffff !important;
      background: transparent !important;
      font-weight: 500 !important;
      font-size: 1rem !important;
      text-decoration: none !important;
      text-align: left !important;
      transition: all 0.2s ease !important;
      border: none !important;
    }
    
    #navmenu .nav-link:hover,
    #navmenu .nav-link.active {
      background: rgba(220, 193, 104, 0.2) !important;
      color: #dcc168 !important;
      padding-left: 2rem !important;
    }
    
    /* Botón de cierre (X) */
    .nav-close-btn {
      position: absolute !important;
      top: 20px !important;
      right: 20px !important;
      background: transparent !important;
      border: none !important;
      color: #dcc168 !important;
      font-size: 2rem !important;
      cursor: pointer !important;
      z-index: 10002 !important;
      width: 44px !important;
      height: 44px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }
    
    /* Prevenir scroll del body */
    body.menu-open {
      overflow: hidden !important;
    }
  }
  
  /* ============================================
     ADMINISTRADOR - SIDEBAR RESPONSIVE
     ============================================ */
  
  /* Desktop */
  @media (min-width: 992px) {
    .admin-sidebar {
      position: fixed;
      left: 0;
      top: 0;
      bottom: 0;
      width: 260px;
      transform: translateX(0) !important;
      z-index: 1000;
    }
    
    .admin-content {
      margin-left: 260px;
    }
  }
  
  /* Tablet y Móvil */
  @media (max-width: 991px) {
    .admin-sidebar {
      position: fixed;
      left: 0;
      top: 0;
      bottom: 0;
      width: 260px;
      transform: translateX(-100%);
      transition: transform 0.3s ease;
      z-index: 1000;
      overflow-y: auto;
    }
    
    .admin-sidebar.show {
      transform: translateX(0);
    }
    
    .admin-content {
      margin-left: 0;
    }
    
    /* Overlay para sidebar */
    .sidebar-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
      z-index: 999;
    }
    
    .sidebar-overlay.show {
      opacity: 1;
      visibility: visible;
    }
    
    /* Botón toggle visible */
    .sidebar-toggle,
    #mobileSidebarToggle {
      display: block !important;
    }
  }
  
  /* ============================================
     UTILIDADES RESPONSIVE
     ============================================ */
  
  .d-mobile-only {
    display: none;
  }
  
  @media (max-width: 1199px) {
    .d-mobile-only {
      display: block;
    }
    
    .d-desktop-only {
      display: none !important;
    }
  }
  
  @media (min-width: 1200px) {
    .d-mobile-only {
      display: none !important;
    }
  }
  
  /* ============================================
     OPTIMIZACIONES iOS
     ============================================ */
  
  @supports (-webkit-touch-callout: none) {
    .header {
      position: -webkit-sticky;
      position: sticky;
    }
    
    #navmenu {
      -webkit-overflow-scrolling: touch;
    }
    
    input,
    select,
    textarea {
      font-size: 16px !important;
    }
  }
  
  /* ============================================
     IMPRESIÓN
     ============================================ */
  
  @media print {
    .header,
    .mobile-nav-toggle,
    #navmenu,
    .nav-overlay,
    .nav-close-btn,
    .admin-sidebar,
    .scroll-top {
      display: none !important;
    }
    
    .admin-content {
      margin-left: 0 !important;
    }
  }