/* ═══════════════════════════════════════════════════════════════════
   EL RIEL — la nav vertical de TODO el dashboard (Edgar 2026-08-14:
   «todo tiene que estar asi»). Pensamiento Instagram: el nav es SOLO
   destinos con aire — 72px, iconos en blancos de 48, hover en circulo,
   el activo por COLOR, perfil ARRIBA como primer destino y la puerta
   de logout hasta abajo. Las metricas van al CONTENIDO de cada pagina.
   Nacio en ideas.css; extraido como COMPONENTE el mismo dia (regla de
   Edgar: componentes, no estilos por pestana). Solo escritorio: en
   movil cada pagina conserva su header de siempre.
   Lo cargan: ideas, index, courses, economy, profile.
   */
@media (min-width: 761px) {
  .header {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 72px; height: auto; z-index: 300;
    border-bottom: 0; border-right: 1px solid var(--border-soft);
  }
  .header-inner {
    display: flex; flex-direction: column; align-items: center;
    max-width: none; height: 100%; padding: 20px 0 18px; gap: 0;
  }
  .header-logo { flex-direction: column; gap: 0; order: 2; margin: 0; }
  .header-logo .header-logo-text { display: none; }
  .header-logo img { height: 30px; margin: 0; }
  .header .header-active-title { display: none !important; }
  .header-nav { flex-direction: column; gap: 6px; }
  .header-nav a {
    width: 48px; height: 48px; padding: 0;
    align-items: center; justify-content: center;
    border-radius: 50%;
    border-color: transparent; box-shadow: none; background: none;
  }
  .header-nav a:hover { background: color-mix(in srgb, var(--text-main) 6%, transparent); }
  .header-nav a svg { width: 22px; height: 22px; }
  /* Etiquetas fuera SIEMPRE: en el riel un destino es su icono. Antes las
     escondia el medidor de header--tight (JS + ResizeObserver); esta
     linea lo jubilo. */
  .header-nav a span { display: none; }
  /* El activo con el OVALO de la app (BarraPestanas.js): violeta
     translucido con borde lila e icono blanco — mismo lenguaje que la
     pestana activa del celular. */
  .header-nav a.active {
    background: rgba(168, 85, 247, 0.26);
    border: 1px solid rgba(196, 166, 255, 0.42);
    border-radius: 15px; box-shadow: none;
  }
  .header-nav a.active svg { color: #FFFFFF; stroke-width: 2.4; }
  /* El avatar: un destino más, al fondo, con su aro al pasar. */
  /* Perfil PRIMERO, hasta arriba (Edgar 2026-08-14): el avatar abre la
     columna y la nav va debajo. El logo baja al fondo, como firma. */
  .header-right { flex-direction: column; order: -1; margin: 0 0 16px; gap: 0;
    justify-self: auto; align-items: center; width: 100%; }
  .user-pill { margin: 0 auto; position: static; transform: none; left: auto; right: auto; }
  /* Deslogueado: las dos pastillas de auth no caben en 72px y se
     desbordaban sobre el sidebar (Edgar 2026-08-14: "esta como
     bugueado"). En el riel queda UN destino circular: Crear cuenta con
     icono; el modal que abre ya trae el cambio a Iniciar sesion. El
     texto sigue ahi (font-size 0) para lectores de pantalla, y en movil
     todo vuelve a ser como siempre. */
  .user-auth-buttons { flex-direction: column; align-items: center; gap: 6px; }
  .user-auth-btn--ghost { display: none; }
  /* Como lo haria Instagram (Edgar): la cuenta es un destino MAS del
     riel — icono fantasma, hover en circulo, cero bolota naranja. El
     span con data-i18n hereda el font-size 0 (si la clave viviera en el
     boton, i18nApply reescribiria textContent y borraria el icono). */
  .user-auth-btn--primary {
    width: 48px; height: 48px; padding: 0; border-radius: 50%;
    font-size: 0; display: grid; place-items: center;
    background: none; border: 0; box-shadow: none;
    color: var(--text-soft);
  }
  .user-auth-btn--primary:hover {
    background: color-mix(in srgb, var(--text-main) 6%, transparent);
    color: var(--text-main); transform: none; box-shadow: none;
  }
  .user-auth-btn--primary .rail-auth-ico { font-size: 24px; }
  .hstat { display: none; }   /* por si algo los devuelve antes del render */
  .user-pill { padding: 0; border-radius: 50%; }
  .user-pill:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
  .user-pill .user-pill-name, .user-pill .user-pill-caret { display: none; }
  .user-pill .user-pill-avatar { width: 32px; height: 32px; }
  /* La puerta (Edgar 2026-08-14: "hasta abajo, la puerta para
     desloguearte"): mismo blanco de 48 que la nav, en rojo al pasar.
     Solo aparece con sesion — el :has mira el user-pill visible; si el
     navegador no soporta :has, simplemente no se ve (sin romper nada). */
  .header:has(.user-pill:not([hidden])) .rail-logout {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 50%;
    color: var(--text-muted); font-size: 20px; order: 3; margin-top: auto;
    transition: var(--tr);
  }
  .rail-logout:hover { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); }
  .rail-logout:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  /* El contenido de CUALQUIER pagina se corre con padding del body:
     no hay que conocer el layout de cada una. */
  body { padding-left: 72px; }
}

/* Bases fuera del media: la puerta NO existe sin sesion ni en movil, y
   el icono del boton de cuenta solo se pinta en el riel. */
.rail-logout { display: none; }
.rail-auth-ico { display: none; }
@media (min-width: 761px) { .rail-auth-ico { display: inline; } }

/* ═══ EL LOGO NO ES UN DESTINO (Edgar 2026-08-17: "el logo de Piofly
   está a la izquierda en Cursos, bórralo") ═══════════════════════════
   El riel es solo destinos, con aire. Ideas ya lo escondía por su
   cuenta; aquí queda para las cinco. */
@media (min-width: 761px) {
  .header .header-logo { display: none !important; }
}

/* ═══ EL CIELO DEBAJO DEL RIEL (Edgar: "esos estilos de la barra los
   quiero exactamente igual para ideas, inicio, social, perfil. me
   encanta") ══════════════════════════════════════════════════════════
   El riel siempre fue el mismo componente; lo que cambiaba era el
   suelo. En Cursos el body lleva el cielo y el riel —que es
   transparente— se apoya en él. Estas son sus mismas cuatro manchas
   sobre #0E0819, para las páginas que no traen cielo propio.
   `body` y no un ::before: así el riel se apoya de verdad, como en la
   app. Solo oscuro — el mundo galáctico no tiene versión clara. */
[data-theme="dark"] body.cielo-riel, [data-theme="negro"] body.cielo-riel {
  background:
    radial-gradient(42% 34% at 14% 6%,  rgba(168, 85, 247, .30), transparent 68%),
    radial-gradient(36% 28% at 88% 4%,  rgba(236, 72, 153, .17), transparent 70%),
    radial-gradient(58% 42% at 52% 46%, rgba(49, 46, 129, .26),  transparent 74%),
    radial-gradient(30% 26% at 8% 88%,  rgba(59, 130, 246, .10), transparent 70%),
    #0E0819 !important;
  background-attachment: fixed !important;
}

/* ═══ EL RIEL ES CRISTAL, NO UN PANEL (Edgar 2026-08-17, segunda vez:
   "quiero que tenga los estilos que tiene dentro de cursos") ═════════
   Medido en produccion: en Cursos el riel iba con blanco al 5% y borde
   al 9% —se apoyaba en el cielo— y en las otras cuatro con el gris
   opaco del panel, que lo tapaba. Mismo componente, dos suelos. Aqui
   queda el cristal para las cinco; el blur ya lo traia. */
@media (min-width: 761px) {
  /* Especificidad alta A PROPOSITO: el tema por sector guardado pinta
     el header con `body[data-chat-theme] .header` (0,2,1 + !important) y
     le ganaba a un `[data-theme] .header`. Con html + body delante
     (0,2,2) el cristal manda en las cinco paginas, con sector o sin el. */
  html[data-theme="dark"] body .header,
  html[data-theme="negro"] body .header,
  html[data-theme="dark"] body[data-chat-theme] .header,
  html[data-theme="negro"] body[data-chat-theme] .header {
    background: rgba(255, 255, 255, 0.05) !important;
    border-right-color: rgba(255, 255, 255, 0.09) !important;
  }
}