/* =====================================================================
   ÁREA LOGUEADA — chrome compartido por las tres pestañas
   (Para ti · Explorar · Mis intereses)
   Header con pestañas primarias, menú de usuario, thumb editorial,
   botón guardar y fila de feedback. Reutiliza tokens del sistema.
   Cárgalo en cada HTML logueado DESPUÉS de styles.css.
   ===================================================================== */

/* ----------------------------------------------------------------
   Header logueado — pestañas primarias + nav secundaria
   ---------------------------------------------------------------- */
.site-header.is-logged .btn-sub{ display:none; }
/* …pero la CTA "Crear cuenta" SÍ debe verse para invitados en la cabecera de app (p. ej. /explorar). */
.site-header.is-logged a.btn-signup{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--insight); color:var(--on-amber);
  padding:10px 18px; font-size:13.5px; font-weight:600; letter-spacing:.01em; white-space:nowrap;
}
.site-header.is-logged a.btn-signup svg{ stroke:var(--navy); }
.site-header.is-logged a.btn-signup:hover{ background:var(--insight-2); color:var(--on-amber); }

.site-header.is-logged .inner{
  display:flex; align-items:stretch; gap:0;
}
.lh-nav{
  display:flex; align-items:stretch; flex:1; min-width:0;
}

/* Pestañas primarias (Para ti / Explorar / Mis intereses) */
.lh-tabs{
  display:flex; align-items:stretch; gap:2px;
  margin-left:auto;
}
.lh-tab{
  display:inline-flex; align-items:center; gap:8px;
  padding:0 13px;
  font-family:var(--sans); font-size:14px; font-weight:600;
  color:var(--ink-2); letter-spacing:-.01em;
  border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.lh-tab svg{
  width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.lh-tab:hover{ color:var(--navy); }
.lh-tab.is-on{
  color:var(--navy);
  border-bottom-color:var(--amber);
}
.lh-tab.is-on svg{ color:var(--navy); }
.lh-tab-copy{
  position:relative;
  display:flex; flex-direction:column; justify-content:center; gap:1px;
  min-width:0; line-height:1.08;
}
.lh-tab-beta{
  position:absolute; top:-8px; right:0;
  display:block;
  font-family:var(--sans); font-size:6.5px; font-weight:800; line-height:1;
  letter-spacing:.12em; text-transform:uppercase; color:var(--amber-2);
}

/* Nav secundaria (Contenido / Temas / Sobre mí) + acciones de usuario */
.lh-secondary{
  display:flex; align-items:center; gap:0;
  margin-left:0; flex:0 0 auto;
}
.lh-secondary > a,
.lh-secondary .nav-dropdown-trigger{
  font-size:13.5px;
}

/* ----------------------------------------------------------------
   Acciones de usuario (search / bell / avatar)
   ---------------------------------------------------------------- */
.hd-user-actions{
  display:inline-flex; align-items:center; gap:4px;
  margin-left:8px; padding-left:8px;
  border-left:1px solid var(--rule-2);
}
.hd-icon-btn{
  position:relative;
  width:36px; height:36px;
  display:grid; place-items:center;
  background:transparent; color:var(--ink);
  transition:background .15s ease, color .15s ease;
}
.hd-icon-btn svg{
  width:18px; height:18px;
  stroke:currentColor; fill:none; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.hd-icon-btn:hover{ background:rgba(var(--navy-rgb),.06); color:var(--navy); }
.hd-icon-btn .hd-dot{
  position:absolute; top:7px; right:8px;
  width:8px; height:8px; border-radius:50%;
  background:var(--insight);
  box-shadow:0 0 0 2px var(--bg);
}

/* Menú de usuario (avatar + desplegable): MOVIDO a styles.css (global) para que la
   cabecera pública —que NO carga logged.css— lo herede. Editar allí. */

/* ----------------------------------------------------------------
   Thumb editorial compartido (placeholder con marco + foto real)
   ---------------------------------------------------------------- */
.ed-thumb{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:#E5E5E5;
}
.ed-thumb .grid-overlay{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.ed-thumb img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
.ed-frame{ position:absolute; inset:12px; pointer-events:none; }
.ed-frame .fc{
  position:absolute; width:12px; height:12px;
  border:1px solid rgba(250,250,248,.45);
}
.ed-frame .fc.tl{ top:0; left:0; border-right:0; border-bottom:0; }
.ed-frame .fc.tr{ top:0; right:0; border-left:0; border-bottom:0; }
.ed-frame .fc.bl{ bottom:0; left:0; border-right:0; border-top:0; }
.ed-frame .fc.br{ bottom:0; right:0; border-left:0; border-top:0; }
.ed-type{
  position:absolute; left:12px; bottom:12px;
  font-family:var(--sans); font-size:9.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  background:rgba(250,250,248,.92); color:var(--azul-marino);
  padding:5px 8px;
}

/* Badge "Nuevo" — activación ámbar */
.ed-newbadge{
  position:absolute; top:12px; left:12px;
  background:var(--insight); color:var(--on-amber);
  font-family:var(--sans); font-size:9.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  padding:4px 8px;
  z-index:3;
}

/* Botón guardar (bookmark) */
.ed-save{
  position:absolute; top:10px; right:10px;
  width:34px; height:34px;
  display:grid; place-items:center;
  background:rgba(250,250,248,.92);
  color:var(--azul-marino);
  transition:background .15s ease, color .15s ease;
  z-index:3;
}
.ed-save svg{
  width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.ed-save:hover{ background:#fff; color:var(--azul-marino); }
.ed-save.is-saved{ background:var(--ink-block); color:var(--insight); }
.ed-save.is-saved svg{ fill:currentColor; }

/* ----------------------------------------------------------------
   Fila de feedback — Me gusta / Leído / No me interesa
   ---------------------------------------------------------------- */
.fb-row{
  display:flex; align-items:center; gap:7px;
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid var(--rule-2);
}
.fb-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 11px;
  font-family:var(--sans); font-size:12px; font-weight:600;
  color:var(--ink); letter-spacing:-.01em;
  background:var(--paper);
  border:1px solid var(--rule);
  transition:color .15s ease, background .15s ease, border-color .15s ease;
}
.fb-btn span{ white-space:nowrap; }
.fb-btn svg{
  width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; flex:0 0 16px;
}
.fb-btn:hover{ border-color:var(--navy); color:var(--navy); }
/* Me gusta */
.fb-btn.like:hover{ border-color:var(--amber-2); color:var(--amber-2); }
.fb-btn.like.is-on{ background:var(--insight); border-color:var(--amber-2); color:var(--on-amber); }
.fb-btn.like.is-on svg{ fill:var(--amber-2); stroke:var(--amber-2); }
/* Leído */
.fb-btn.read.is-on{ background:var(--ink-block); border-color:var(--navy); color:var(--on-ink); }
.fb-btn.read.is-on svg{ stroke:var(--insight); }
/* Quitar — icono X + etiqueta, junto a Leído */
.fb-btn.dismiss{ position:relative; color:var(--muted); }
.fb-btn.dismiss:hover{ border-color:var(--ink); color:var(--ink); }
.fb-sep{ display:none; }

/* Estado vacío (sección con todo descartado) */
.lh-empty{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:12px; padding:44px 24px;
  border:1px dashed var(--rule);
  background:var(--paper);
}
.lh-empty p{
  font-family:var(--serif); font-weight:400; font-size:16px;
  line-height:1.4; color:var(--ink-2);
  margin:0; max-width:380px;
}
.lh-empty button{
  font-family:var(--sans); font-size:13px; font-weight:600;
  color:var(--navy); background:transparent;
  border-bottom:1.5px solid var(--amber-2); padding-bottom:3px;
}


/* Modo oscuro — pestaña activa legible en Área Cómplices.
   El estado global de app usa un fondo crema semitransparente; en dark dejaba
   texto claro sobre fondo claro. */
:root[data-theme="dark"] .site-header.is-logged .lh-tabs .lh-tab.is-on{
  background:rgba(245,194,75,.14);
  color:var(--ink);
}
:root[data-theme="dark"] .site-header.is-logged .lh-tabs .lh-tab.is-on svg{
  color:var(--ink);
}
:root[data-theme="dark"] .site-header.is-logged .lh-tabs .lh-tab.is-on:hover{
  background:rgba(245,194,75,.20);
  color:var(--navy-2);
}

/* ----------------------------------------------------------------
   Responsive — colapsa la nav logueada en el menú hamburguesa
   ---------------------------------------------------------------- */
.site-header.is-logged .nav-toggle{ display:none; margin-left:auto; }
@media (max-width: 1200px){
  .lh-tabs{ margin-left:auto; gap:0; }
  .lh-tab{ padding:0 10px; font-size:13.5px; }
  .lh-tab svg{ width:17px; height:17px; }
  .lh-secondary > a, .lh-secondary .nav-dropdown-trigger{ font-size:13px; }
}
@media (max-width: 1080px){
  .site-header.is-logged .nav-toggle{ display:flex; }
  .site-header.is-logged .inner{ flex-wrap:wrap; }
  .lh-nav{
    position:fixed; inset:0 0 0 auto; width:min(86vw,360px);
    flex-direction:column; align-items:stretch;
    background:var(--paper); border-left:1px solid var(--rule);
    padding:80px 22px 28px; gap:4px;
    transform:translateX(100%); transition:transform .25s ease;
    overflow-y:auto; z-index:50;
  }
  .lh-nav.is-open{ transform:translateX(0); }
  .lh-tabs{ flex-direction:column; align-items:stretch; margin:0 0 10px; gap:2px; }
  .lh-tab{
    padding:13px 6px; border-bottom:1px solid var(--rule-2);
  }
  .lh-tab.is-on{ border-bottom-color:var(--rule-2); color:var(--amber-2); }
  .lh-secondary{
    flex-direction:column; align-items:stretch; margin:0; gap:0;
    flex:1 1 auto;
  }
  .hd-user-actions{ margin:14px 0 0; padding-left:0; border-left:0; }
  .hd-user-name{ display:inline; }
}
@media (max-width: 560px){
  .hd-user-name{ display:none; }
}