/* ============================================================
   header.css — Header único compartido, EXTRAÍDO 1:1 del bloque
   "RE-ESTILO DE header.php" que ya vivía en portafolios.css (la
   única vista que consumía el partial). Mismos nombres de
   variables, mismos breakpoints, mismos valores — cero cambios
   visuales respecto a como se veía en Nosotros.

   DEPENDE de que la vista que lo incluye ya haya definido estos
   tokens de tema (hoy los define portafolios.css; deberían
   replicarse igual en academia.css / consultoria.css / index.css
   cuando adopten este mismo header):
     --purple, --purple-light, --purple-dark, --green, --red,
     --surface-0, --surface-1, --surface-2,
     --text-primary, --text-secondary, --text-muted,
     --border-soft, --border-strong,
     --overlay-nav, --overlay-nav-scrolled, --shadow-color
   Si la vista los carga, el header hereda modo claro/oscuro
   automáticamente sin código extra aquí.
   ============================================================ */

header {
    position: fixed;
    top: 0; left: 0; right: 0;
    background: var(--overlay-nav);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-soft);
    padding: 1rem 0;
    z-index: 1000;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.header-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 3rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 2rem;
}

.logo-container { display: flex; align-items: center; gap: 0.75rem; }
.logo-container a { display: flex; align-items: center; }
.logo { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }

.site-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.5px;
    white-space: nowrap;
}

.logo-accent { color: var(--purple); }

/* ── Nav centrado, solo escritorio ────────────────────────── */
.nav-links-desktop { justify-self: center; }

.nav-links { display: flex; gap: 2.2rem; list-style: none; align-items: center; }

.nav-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.3s;
    position: relative;
    white-space: nowrap;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -8px; left: 0;
    width: 0; height: 2px;
    background: var(--purple);
    transition: width 0.3s;
}

.nav-links a:hover { color: var(--text-primary); }
.nav-links a:hover::after { width: 100%; }

/* ── Derecha: toggle + login/registro (o avatar) + hamburguesa ── */
.header-actions-right { display: flex; align-items: center; gap: 0.8rem; justify-self: end; }

.theme-toggle-btn {
    width: 40px; height: 40px;
    border-radius: 10px;
    border: 1px solid var(--border-soft);
    background: rgba(139, 92, 246, 0.06);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.25s;
    flex-shrink: 0;
}

.theme-toggle-btn:hover { border-color: var(--border-strong); background: rgba(139, 92, 246, 0.14); }

.theme-toggle-btn .theme-icon-dark,
.theme-toggle-btn .theme-icon-light {
    position: absolute;
    font-size: 20px;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

[data-theme="dark"] .theme-toggle-btn .theme-icon-dark { opacity: 1; transform: scale(1) rotate(0deg); }
[data-theme="dark"] .theme-toggle-btn .theme-icon-light { opacity: 0; transform: scale(0.5) rotate(-90deg); }
[data-theme="light"] .theme-toggle-btn .theme-icon-dark { opacity: 0; transform: scale(0.5) rotate(90deg); }
[data-theme="light"] .theme-toggle-btn .theme-icon-light { opacity: 1; transform: scale(1) rotate(0deg); }

.nav-actions-desktop { display: flex; align-items: center; gap: 0.9rem; }

.btn-outline-nav {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
    padding: 0.6rem 1.4rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.87rem;
    text-decoration: none;
    transition: all 0.3s;
    white-space: nowrap;
}

.btn-outline-nav:hover { background: var(--purple); border-color: var(--purple); color: #fff; }

.btn-session {
    background: var(--purple);
    color: #fff;
    border: 1px solid var(--purple);
    padding: 0.6rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.87rem;
    text-decoration: none;
    transition: all 0.3s;
    display: inline-block;
    white-space: nowrap;
}

/* Ying-yang: solo un botón del par está "encendido" (relleno) a la
   vez. Por defecto lo está .btn-session; al pasar sobre
   .btn-outline-nav, éste se enciende y .btn-session se "apaga". */
.nav-actions-desktop:has(.btn-outline-nav:hover) .btn-session,
.nav-panel-actions:has(.btn-outline-nav:hover) .btn-session {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--text-primary);
}

/* ── Avatar de sesión (escritorio) ─────────────────────────── */
.user-menu-wrapper { position: relative; }

.user-avatar-trigger {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: linear-gradient(135deg, var(--purple), var(--purple-dark));
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s;
}

.user-avatar-trigger:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(139, 92, 246, 0.4); }

.user-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    min-width: 230px;
    background: var(--surface-1);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    box-shadow: 0 15px 40px var(--shadow-color);
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: all 0.25s ease;
}

.user-menu-wrapper:hover .user-dropdown,
.user-menu-wrapper:focus-within .user-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-dropdown-header {
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 0.4rem;
}

.user-dropdown-header div:first-child { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); }
.user-dropdown-header div:last-child { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 0.9rem;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.88rem;
    text-decoration: none;
    transition: background 0.2s;
}

/* El botón "Cerrar sesión" usa la misma clase que los <a> del
   dropdown pero es un <button>; este reset reemplaza el style
   inline que tenía antes en el HTML. */
button.user-dropdown-item {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
}

.user-dropdown-item .material-symbols-outlined { font-size: 19px; }
.user-dropdown-item:hover { background: rgba(139, 92, 246, 0.1); }
.user-dropdown-item.logout:hover { background: rgba(239, 68, 68, 0.1); color: var(--red); }

/* ── Hamburguesa: SOLO móvil ───────────────────────────────── */
.hamburger {
    display: none;
    width: 42px; height: 42px;
    border-radius: 10px;
    border: 1px solid var(--border-soft);
    background: rgba(139, 92, 246, 0.06);
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.25s;
    flex-shrink: 0;
}

.hamburger:hover { border-color: var(--border-strong); background: rgba(139, 92, 246, 0.14); }

.hamburger span {
    display: block;
    width: 18px; height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Panel de navegación móvil: dropdown anclado bajo la
   hamburguesa (no barra de ancho completo). header ya es
   position:fixed, así que sirve como contenedor de referencia
   para este position:absolute sin CSS extra. ── */
.nav-panel {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 1.25rem;
    left: auto;
    width: 300px;
    max-width: calc(100vw - 2rem);
    background: var(--overlay-nav-scrolled);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    box-shadow: 0 20px 50px var(--shadow-color);
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
    padding: 1.5rem;
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.25s ease;
    z-index: 999;
}

.nav-panel.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.nav-panel .nav-links {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
    max-width: 280px;
}

.nav-panel-actions,
.nav-panel-user {
    border-top: 1px solid var(--border-soft);
    padding-top: 1.5rem;
    width: 100%;
    max-width: 280px;
}

.nav-panel-actions { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
.nav-panel-actions .btn-outline-nav,
.nav-panel-actions .btn-session { text-align: center; width: 100%; }

.nav-panel-user { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.nav-panel-user .user-dropdown-header { border-bottom: none; text-align: center; width: 100%; }
.nav-panel-user .user-dropdown-item { justify-content: center; width: 100%; }

/* ════════════════════════════════════════════════════════════
   BREAKPOINTS DEL HEADER — idénticos a los que ya usaba Nosotros
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .header-content { padding: 0 2rem; }
}

@media (max-width: 900px) {
    .nav-links-desktop,
    .nav-actions-desktop,
    .user-menu-desktop { display: none; }

    .hamburger { display: flex; }
    .nav-panel { display: flex; }

    .header-content { padding: 0 1.25rem; grid-template-columns: auto 1fr auto; }
    .header-actions-right { gap: 0.6rem; }
}

@media (min-width: 901px) {
    .nav-panel { display: none !important; }
}

/* <425px: el dropdown anclado se siente angosto — pasa a ocupar
   casi todo el ancho, centrado. */
@media (max-width: 425px) {
    .nav-panel { left: 1rem; right: 1rem; width: auto; max-width: none; border-radius: 16px; }
}

@media (max-width: 480px) {
    .site-title { font-size: 1.05rem; }
    .header-content { padding: 0 1rem; gap: 0.75rem; }
}

@media (max-width: 360px) {
    .site-title { font-size: 0.92rem; }
    .logo { width: 34px; height: 34px; }
    .header-actions-right { gap: 0.4rem; }
    .theme-toggle-btn, .hamburger { width: 38px; height: 38px; }
}