/* ==========================================
   HEADER LAYOUT - USUARIOS NO REGISTRADOS
   ========================================== */

/* Layout CSS Grid compatible - Botones más cerca */
.header .header-container.user-guest,
.yachay-main-header .yachay-header-wrap.user-guest {
  display: -ms-grid !important;
  display: grid !important;
  -ms-grid-columns: 180px auto 300px !important;
  grid-template-columns: 180px auto 300px !important;
  grid-template-areas: "logo nav buttons" !important;
  align-items: center !important;
  gap: 0 2rem !important;
  min-height: 90px !important;
  width: 100% !important;
  position: relative !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 20px 2rem 20px 3rem !important;
}

.header-container.user-guest .logo,
.yachay-header-wrap.user-guest .yachay-brand-logo {
  -ms-grid-row: 1 !important;
  -ms-grid-column: 1 !important;
  grid-row: 1 !important;
  grid-column: 1 !important;
  grid-area: logo !important;
  justify-self: start !important;
  align-self: center !important;
  z-index: 10 !important;
}

.header-container.user-guest .nav,
.yachay-header-wrap.user-guest .yachay-main-nav {
  -ms-grid-row: 1 !important;
  -ms-grid-column: 2 !important;
  grid-row: 1 !important;
  grid-column: 2 !important;
  grid-area: nav !important;
  justify-self: start !important;
  align-self: center !important;
  display: flex !important;
  justify-content: flex-start !important;
  width: auto !important;
}

.header-container.user-guest .nav .nav-menu,
.yachay-header-wrap.user-guest .yachay-main-nav .yachay-nav-list {
  display: flex !important;
  flex-direction: row !important;
  list-style: none !important;
  gap: 1.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.header-container.user-guest .nav-actions,
.yachay-header-wrap.user-guest .yachay-nav-buttons {
  -ms-grid-row: 1 !important;
  -ms-grid-column: 3 !important;
  grid-row: 1 !important;
  grid-column: 3 !important;
  grid-area: buttons !important;
  justify-self: end !important;
  align-self: center !important;
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  flex-wrap: nowrap !important;
  width: auto !important;
}

.header-container.user-guest .menu-toggle,
.yachay-header-wrap.user-guest .yachay-mobile-toggle {
  display: none !important;
  position: absolute !important;
  right: 1rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Mobile responsive */
@media (max-width: 1390px) {
  .header .header-container.user-guest,
  .yachay-main-header .yachay-header-wrap.user-guest {
    grid-template-columns: 150px 1fr auto !important;
    padding: 15px 1rem !important;
    gap: 1rem !important;
  }

  /* Menú móvil más compacto */
  .header-container.user-guest .nav,
  .yachay-header-wrap.user-guest .yachay-main-nav {
    width: 65% !important;
    max-width: 300px !important;
  }

  /* Menú hamburguesa para invitados - responsive.css maneja la funcionalidad base */
  .header-container.user-guest .menu-toggle,
  .yachay-header-wrap.user-guest .yachay-mobile-toggle {
    display: block !important;
    position: absolute !important;
    right: 1rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  .header-container.user-guest .nav,
  .yachay-header-wrap.user-guest .yachay-main-nav {
    position: fixed !important;
    top: 0 !important;
    left: -100% !important;
    width: 80% !important;
    height: 100vh !important;
    background: var(--bg-primary) !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding: 120px 2rem 2rem !important;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1) !important;
    transition: left 0.3s ease !important;
    z-index: 1000 !important;
  }

  .header-container.user-guest .nav.active,
  .yachay-header-wrap.user-guest .yachay-main-nav.active {
    left: 0 !important;
  }

  .header-container.user-guest .nav .nav-menu,
  .yachay-header-wrap.user-guest .yachay-main-nav .yachay-nav-list {
    flex-direction: column !important;
    gap: 2rem !important;
    align-items: flex-start !important;
  }

  .header-container.user-guest .nav-actions,
  .yachay-header-wrap.user-guest .yachay-nav-buttons {
    flex-direction: column !important;
    gap: 1rem !important;
    width: auto !important;
  }
}

/* Elementos solo móviles */
.desktop-hidden {
  display: none;
}

.mobile-icon {
  display: none;
  margin-right: 0.75rem;
  width: 20px;
  text-align: center;
}

.mobile-text {
  display: none;
}

@media (max-width: 1390px) {
  .desktop-hidden {
    display: block !important;
  }

  .mobile-icon {
    display: inline-block !important;
  }

  .mobile-text {
    display: inline !important;
  }

  .hide-mobile {
    display: none !important;
  }

  /* Ocultar botón de tema original en móvil para evitar duplicación */
  .theme-toggle-btn,
  #theme-toggle,
  .header .theme-toggle-btn,
  .yachay-main-header .theme-toggle-btn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -9999px !important;
  }

  /* Mostrar botón de tema móvil */
  .nav-actions-mobile #theme-toggle-mobile {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    left: auto !important;
  }

  /* Asegurar que las 3 líneas del hamburguesa aparezcan para invitados */
  .menu-toggle,
  .yachay-mobile-toggle {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-around !important;
    align-items: center !important;
    width: 40px !important;
    height: 40px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 8px !important;
  }

  .menu-toggle span,
  .yachay-mobile-toggle span {
    display: block !important;
    width: 25px !important;
    height: 3px !important;
    background: #333 !important;
    border-radius: 3px !important;
    transition: all 0.3s ease !important;
    margin: 2px 0 !important;
  }

  /* Modo oscuro para las líneas */
  .dark-mode .menu-toggle span,
  .dark-mode .yachay-mobile-toggle span,
  [data-theme="dark"] .menu-toggle span,
  [data-theme="dark"] .yachay-mobile-toggle span {
    background: #fff !important;
  }

  /* ESTILOS CORRECTOS PARA BOTONES MÓVILES - UNO DEBAJO DEL OTRO SIN FONDOS */
  .nav-actions-mobile {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 1rem !important;
    margin-top: var(--spacing-lg) !important;
    padding-top: var(--spacing-md) !important;
    border-top: 1px solid var(--primary-200) !important;
    will-change: border-color, background !important;
    backface-visibility: hidden !important;
    transform: translateZ(0) !important;
  }

  /* RESETEAR TODOS LOS BOTONES DENTRO - SIN FONDOS NI BORDES */
  .nav-actions-mobile .btn {
    width: auto !important;
    min-width: 50% !important;
    max-width: 70% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
    padding: 12px 24px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    letter-spacing: 0.3px !important;
    transition: all 0.3s ease !important;
  }

  /* Botón Iniciar Sesión - Azul */
  .nav-actions-mobile .btn-secondary {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%) !important;
    border: 2px solid #2563eb !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25) !important;
  }

  .nav-actions-mobile .btn-secondary:hover {
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35) !important;
    transform: translateY(-1px) !important;
  }

  .dark-mode .nav-actions-mobile .btn-secondary,
  [data-theme="dark"] .nav-actions-mobile .btn-secondary {
    background: linear-gradient(135deg, #60a5fa 0%, #93c5fd 100%) !important;
    border: 2px solid #60a5fa !important;
    color: #18181b !important;
    box-shadow: 0 2px 8px rgba(96, 165, 250, 0.3) !important;
  }

  /* Botón Registrarse - Verde */
  .nav-actions-mobile .btn-primary {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%) !important;
    border: 2px solid #059669 !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25) !important;
  }

  .nav-actions-mobile .btn-primary:hover {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.35) !important;
    transform: translateY(-1px) !important;
  }

  .dark-mode .nav-actions-mobile .btn-primary,
  [data-theme="dark"] .nav-actions-mobile .btn-primary {
    background: linear-gradient(135deg, #34d399 0%, #6ee7b7 100%) !important;
    border: 2px solid #34d399 !important;
    color: #18181b !important;
    box-shadow: 0 2px 8px rgba(52, 211, 153, 0.3) !important;
  }

  .dark-mode .nav-actions-mobile .btn-secondary:hover,
  [data-theme="dark"] .nav-actions-mobile .btn-secondary:hover {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
  }

  .dark-mode .nav-actions-mobile .btn-primary:hover,
  [data-theme="dark"] .nav-actions-mobile .btn-primary:hover {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4) !important;
  }

  .nav-actions-mobile.force-update {
    animation: forceUpdateMobile 0.1s linear !important;
  }

  @keyframes forceUpdateMobile {
    0% { opacity: 0.99; }
    100% { opacity: 1; }
  }
}