/* ================================================================
   PUNTOSFAMILIA — HEADER Y NAVEGACION
   ================================================================ */

/* ---- HEADER --------------------------------------------------- */

.pf-header {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  gap:              var(--space-3);
  padding:          0 var(--space-6);
  height:           64px;
  background:       var(--bg-surface);
  border-bottom:    1px solid var(--border-subtle);
  backdrop-filter:  blur(24px) saturate(160%);
  position:         sticky;
  top:              0;
  z-index:          var(--z-sticky);
  transition:       background var(--transition-normal);
}

/* ---- LOGO ---------------------------------------------------- */

.app-logo {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  text-decoration: none;
  flex-shrink: 0;
}

.app-logo-icon {
  width:           40px;
  height:          40px;
  border-radius:   var(--radius-md);
  background:      var(--gradient-primary);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           #fff;
  font-weight:     var(--weight-extrabold);
  font-size:       0.95rem;
  box-shadow:      var(--glow-primary);
  flex-shrink:     0;
  transition:      transform var(--transition-normal), box-shadow var(--transition-normal);
}

.app-logo:hover .app-logo-icon {
  transform:  scale(1.05) rotate(-4deg);
  box-shadow: var(--glow-primary), 0 0 40px var(--color-primary-glow);
}

.app-logo-text {
  font-family: 'Orbitron', var(--font-sans);
  font-weight: 900;
  font-size:   1rem;
  letter-spacing: 0.04em;
  background:  linear-gradient(135deg, #F97316 0%, #EC4899 52%, #A855F7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 10px rgba(236, 72, 153, 0.40));
  display:     none;
  white-space: nowrap;
}

@media (min-width: 480px) {
  .app-logo-text { display: block; }
}

/* ---- ACCIONES DEL HEADER ------------------------------------- */

.pf-header-actions {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  flex-shrink: 0;   /* nunca comprimir el área de botones */
}

.theme-toggle,
.pf-menu-toggle {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           38px;
  height:          38px;
  border:          1px solid var(--border-default);
  border-radius:   var(--radius-md);
  background:      var(--bg-surface-2);
  cursor:          pointer;
  font-size:       1.1rem;
  color:           var(--text-secondary);
  transition:
    background    var(--transition-fast),
    border-color  var(--transition-fast),
    color         var(--transition-fast),
    transform     var(--transition-fast);
}

.theme-toggle:hover,
.pf-menu-toggle:hover {
  background:   var(--color-primary-dim);
  border-color: var(--color-primary);
  color:        var(--color-primary);
  transform:    scale(1.05);
}

.theme-toggle:focus,
.pf-menu-toggle:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ---- NAV ----------------------------------------------------- */

.pf-nav {
  background:    transparent;
  position:      relative;
}

.pf-nav-list {
  display:      flex;
  align-items:  center;
  flex-wrap:    wrap;
  gap:          2px;
  list-style:   none;
  padding:      var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  background:   var(--bg-surface);
  backdrop-filter: blur(12px);
}

.pf-nav-link {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  padding:         6px 12px;
  border-radius:   var(--radius-sm);
  text-decoration: none;
  font-size:       var(--text-sm);
  font-weight:     var(--weight-medium);
  color:           var(--text-secondary);
  transition:
    background  var(--transition-fast),
    color       var(--transition-fast),
    box-shadow  var(--transition-fast);
  white-space: nowrap;
}

.pf-nav-link:hover {
  background: var(--color-primary-dim);
  color:      var(--color-primary);
}

.pf-nav-link-active {
  background:  var(--color-primary-dim);
  color:       var(--color-primary);
  font-weight: var(--weight-semibold);
  box-shadow:  inset 0 0 0 1px var(--color-primary-dim);
}

/* #site-header tiene z-index:1 por .pf-body>*; lo elevamos para que el
   overlay del nav móvil pinte por encima de .pf-main (también z-index:1) */
#site-header {
  position: relative;
  z-index:  var(--z-sticky);   /* 200 — gana a .pf-main z-index:1 */
}

/* ---- RESPONSIVE: menú móvil ---------------------------------- */

/* El botón ☰ solo tiene sentido en móvil/tablet */
@media (min-width: 801px) {
  .pf-menu-toggle { display: none; }
}

@media (max-width: 800px) {
  .pf-nav-list {
    display: none;
  }

  body.nav-open .pf-nav-list {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            4px;
    position:       fixed;
    left:           0;
    right:          0;
    top:            64px;
    background:     var(--bg-elevated);
    border-bottom:  1px solid var(--border-default);
    padding:        var(--space-3) var(--space-4);
    box-shadow:     var(--shadow-lg);
    backdrop-filter: blur(24px);
    z-index:        250;   /* encima de todo dentro del stacking context de #site-header */
    animation:      slideDown var(--duration-fast) var(--ease-out) both;
  }

  body.nav-open .pf-nav-link {
    width:   100%;
    padding: 10px var(--space-4);
  }
}

/* ---- AVATAR DE USUARIO + DROPDOWN ---------------------------- */

/* El logo ocupa el espacio restante y se encoge si hace falta */
.app-logo { flex: 1; min-width: 0; overflow: hidden; }

.header-user { position: relative; }

.header-user-btn {
  width:           38px;
  height:          38px;
  border-radius:   var(--radius-full);
  border:          2px solid rgba(139, 92, 246, 0.35);
  background:      transparent;
  padding:         0;
  cursor:          pointer;
  transition:      border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  overflow:        hidden;
  flex-shrink:     0;
}

.header-user-btn:hover {
  border-color: var(--color-primary);
  box-shadow:   var(--glow-primary);
  transform:    scale(1.06);
}

.header-user-avatar {
  width:           100%;
  height:          100%;
  border-radius:   var(--radius-full);
  background:      var(--gradient-primary);
  background-size: cover;
  background-position: center;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       var(--text-xs);
  font-weight:     var(--weight-bold);
  color:           #fff;
}

/* Dropdown — portado al <body> via JS; position:fixed escapa cualquier stacking context */
.header-user-dropdown {
  position:      fixed;
  top:           0;   /* sobreescrito por JS con getBoundingClientRect */
  right:         0;   /* sobreescrito por JS con getBoundingClientRect */
  min-width:     200px;
  background:    var(--bg-elevated);
  border:        1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow:    var(--shadow-lg), var(--glow-primary);
  backdrop-filter: blur(20px);
  overflow:      hidden;
  z-index:       var(--z-modal);   /* 300 — encima de header (200) y todo el contenido */

  /* Animacion de apertura */
  opacity:       0;
  transform:     translateY(-8px) scale(0.97);
  pointer-events: none;
  transition:    opacity 150ms ease, transform 150ms ease;
}

.header-user-dropdown.open {
  opacity:        1;
  transform:      translateY(0) scale(1);
  pointer-events: auto;
}

.header-dropdown-item {
  display:         flex;
  align-items:     center;
  gap:             var(--space-2);
  padding:         10px var(--space-4);
  font-size:       var(--text-sm);
  color:           var(--text-secondary);
  text-decoration: none;
  background:      transparent;
  border:          none;
  width:           100%;
  text-align:      left;
  cursor:          pointer;
  font-family:     var(--font-sans);
  transition:      background var(--transition-fast), color var(--transition-fast);
}

.header-dropdown-item:hover {
  background: var(--color-primary-dim);
  color:      var(--color-primary);
}

.header-dropdown-divider {
  height:     1px;
  background: var(--border-subtle);
  margin:     var(--space-1) 0;
}

.header-dropdown-danger        { color: var(--color-danger); }
.header-dropdown-danger:hover  { background: var(--color-danger-dim); color: var(--color-danger); }

/* ---- RESPONSIVE HEADER (pantallas muy pequeñas) -------------- */

@media (max-width: 400px) {
  .pf-header               { padding: 0 var(--space-3); gap: var(--space-2); }
  .pf-header-actions       { gap: var(--space-1); }
  .theme-toggle,
  .pf-menu-toggle,
  .header-user-btn         { width: 32px; height: 32px; }
  .app-logo-text           { display: none !important; }
  .app-logo-icon           { width: 34px; height: 34px; }
  /* .header-user-dropdown: posicionado dinámicamente por JS, no necesita override aquí */
}

/* ---- ACCESIBILIDAD ------------------------------------------- */

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}