/* ============================================================
   TIPOGRAFÍA DE MARCA — Saira (servida desde nuestro dominio)
   ------------------------------------------------------------
   Se sirve local a propósito: la CSP del sitio permite solo
   `font-src 'self'`, así que Google Fonts quedaría bloqueado.
   Además carga más rápido y ningún tercero ve a los visitantes.
   Es una fuente VARIABLE: un archivo de 33 KB cubre 100–900.
   Ojo: este bloque está duplicado en admin.css, que es el otro
   CSS compartido (las páginas de admin no cargan header.css).
   ============================================================ */
@font-face{
  font-family:"Saira";
  src:url("assets/fonts/saira.woff2") format("woff2-variations");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
/* `html body` para ganarle a la regla `body{font-family:...}` que cada
   página trae en su <style> propio, sin depender del orden de carga. */
html body{
  font-family:"Saira","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
}
/* Cifras de ancho fijo: mantiene alineadas las columnas de cuotas y saldos. */
html body{ font-variant-numeric:tabular-nums }

/* ============================================================
   Header flotante — pastilla de vidrio líquido (compartido)
   ------------------------------------------------------------
   Fuente única de verdad del header de thegreenhouse.bet.
   Sustituye la barra sólida de ancho completo por una pastilla
   flotante con blur y filo neón. El sitio es oscuro de arriba a
   abajo, así que la pastilla es OSCURA en ambos estados: sobre el
   contenido superior más transparente, y al bajar más opaca con el
   neón más marcado (un header claro se vería roto sobre el neón).

   IMPORTANTE: el header es `fixed`, así que ya no reserva espacio.
   Cada página debe dejar aire arriba con la variable:
       :root{ --hdr-space: 92px }   (ajústala si su barra es más alta)
   El padding se aplica solo si la página marca su contenedor con
   la clase .hdr-offset (o usa su propio padding, como index.html).
   ============================================================ */

.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 18px;
  position:fixed;top:14px;left:16px;right:16px;z-index:40;
  border-radius:16px;
  background:rgba(10,13,7,.5);
  -webkit-backdrop-filter:blur(9px) saturate(1.35);backdrop-filter:blur(9px) saturate(1.35);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.10),0 10px 30px rgba(0,0,0,.45),0 0 16px rgba(143,255,61,.10);
  border-bottom:none;                 /* la barra vieja tenía borde inferior */
  transition:background .3s,box-shadow .3s;
}
/* Filo neón (hairline) arriba y abajo, enmascarado para que sea solo el borde */
.topbar::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;pointer-events:none;
  background:linear-gradient(180deg,rgba(143,255,61,.38) 0%,rgba(143,255,61,.08) 22%,rgba(143,255,61,0) 45%,rgba(143,255,61,0) 55%,rgba(143,255,61,.08) 78%,rgba(143,255,61,.38) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
}
.topbar.scrolled{
  background:rgba(8,11,6,.82);
  -webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.12),0 12px 34px rgba(0,0,0,.6),0 0 16px rgba(143,255,61,.30);
}
.topbar.scrolled::before{
  background:linear-gradient(180deg,rgba(143,255,61,.65) 0%,rgba(143,255,61,.16) 22%,rgba(143,255,61,0) 45%,rgba(143,255,61,0) 55%,rgba(143,255,61,.16) 78%,rgba(143,255,61,.65) 100%);
}

/* En pantallas chicas los botones del header no deben partir su texto en varias
   líneas: inflan la pastilla y empujan el contenido hacia abajo sin necesidad
   (visto en móvil: "Volver al inicio" se partía en 3 líneas). */
.topbar .back, .topbar .btn-auth{ white-space:nowrap }
/* Y en pantallas muy angostas la marca cede tamaño para que quepan ambos:
   a 375px, marca (244px) + botón (139px) no caben en la pastilla (355px). */
@media(max-width:520px){
  .topbar .brand{ font-size:19px;line-height:1.1 }
  .topbar .brand small{ font-size:11px }
}

/* Espacio para que el contenido no quede debajo del header flotante.
   .wrap es el contenedor de contenido en las páginas de cliente; .hdr-offset
   queda disponible por si alguna página usa otro contenedor. index.html trae su
   propio padding en .layout. Se usa margin-top (no padding) para no romper
   páginas cuyo .wrap ya define su propio padding. */
:root{ --hdr-space:78px }
.topbar ~ .wrap, .hdr-offset{ margin-top:var(--hdr-space) }

@media(max-width:980px){
  :root{ --hdr-space:70px }
  /* La pastilla DEBE poder envolverse en móvil. Sin esto los botones se salen de
     la pantalla y quedan imposibles de pulsar (medido en comprobantes.html:
     "Cerrar sesión" a 128px fuera del viewport). admin.css ya lo hacía y por eso
     las páginas de admin salían bien. El alto extra no es problema: header.js
     mide el alto real y ajusta el hueco del contenido. */
  .topbar{ padding:9px 12px;gap:10px;row-gap:9px;top:10px;left:10px;right:10px;flex-wrap:wrap }
}
/* En teléfono el grupo de botones toma la fila completa para repartirse sin
   desbordar. Solo aquí: en tableta suele caber en una sola fila y forzarlo
   engordaría la pastilla sin motivo. */
@media(max-width:560px){
  .topbar > .nav{ width:100% }
}