/* ===== ESTILOS ESPECÍFICOS PARA EL HEADER ===== */
/* Este archivo extiende base.css - asegúrate de incluirlo primero */

/* Clase de utilidad para botones en el header */
.btn-header {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    border-radius: var(--border-radius-small);
}

/* Botón de login específico */
.btn-login {
    color: var(--primary);
    border: 1px solid var(--primary);
    background-color: transparent;
}

.btn-login:hover {
    background-color: var(--background-light);
}

/* Botón hamburguesa */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
}

.mobile-menu-toggle .toggle-bar {
  width: 24px;
  height: 3px;
  background-color: var(--dark-text);
  border-radius: var(--radius-sm);
}

/* Menú móvil */
.mobile-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: var(--white);
  box-shadow: var(--shadow-md);
  z-index: 999;
}

.mobile-nav-list {
  list-style: none;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.mobile-nav-link {
  color: var(--medium-text);
  font-weight: 600;
  padding: var(--space-2) 0;
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
  color: var(--primary);
}

/* Responsive */
@media (max-width: 768px) {
  .main-nav, .header-actions { display: none; }
  .mobile-menu-toggle { display: flex; }
}


/* Responsive específico del header */
@media (max-width: 768px) {
    .header-container {
        padding: var(--space-2) var(--space-4);
    }
    
    .main-nav .nav-list {
        gap: var(--space-4);
    }
}

@media (max-width: 640px) {
    .header-brand .brand-name {
        font-size: var(--text-lg);
    }
    
    .main-nav {
        display: none; /* Para móviles, necesitarás un menú hamburguesa */
    }
    
    .header-actions {
        gap: var(--space-2);
    }
}