/* ============================================================
   HRZN · HEADER UNIFICADO — v1
   ------------------------------------------------------------
   Un solo header para las 8 paginas, segun "HRZN Header - Handoff"
   (Dario, agosto 2026). Reemplaza tres implementaciones distintas
   que convivian: .hz-strip+.hz-hero (Insights/Users/Automations/
   Settings, con DOS familias de consola de reloj distintas adentro),
   <header class="X-hero"> (Adoption/Score) y .score-config-hero
   (Score Settings, sin consola).

   Los tokens y las clases .hd-title/.hd-greeting/.hd-signal/.hd-lede/
   .hd-label/.hd-clock/.hd-action/.hd-scrim y el :focus-visible salen
   TAL CUAL del bloque "paste-ready" del handoff (seccion A4). Lo que
   sigue despues -- el armado del header, la consola, el estado
   colapsado -- no viene dado; se construye seguiendo la descripcion
   de las 9 franjas (H1-H9) y el patron visual que ya tenia la pastilla
   de reloj de FinOps (hrzn-bar.css: pastilla flotante, blur, radio 16).
   ============================================================ */
:root{
  --h-action:#2450E4; --h-text:#0A1E46; --h-lead:#1B3266; --h-mut:#27447E; --h-label:#3A5A94;
  --h-surface:#FFFFFF; --h-canvas:#F4F6FC; --h-border:#DCE4F5; --h-sunken:#EAF0FB;
  --h-ok:#127A45; --h-bad:#C4272C; --h-warn-text:#A05F02; --h-warn-fill:#C98108; /* D6 */
  --h-focus:#2450E4; /* A3 · rail: #58A9F4 · dark: #8CC6FF */
  --hd-radius:16px; --hd-pad-x:24px; --hd-open-min:168px; --hd-collapsed:64px;
}
.hd-title{font:800 44px/1.0 Poppins;letter-spacing:.012em;text-transform:uppercase}  /* the <h1> */
.hd-title--collapsed{font:700 28px/1.08 Poppins;letter-spacing:.03em;text-transform:uppercase}
.hd-title--collapsed { display: none; } /* solo se ve en .is-collapsed, mas abajo */
.hd-greeting{font:400 14px/1.55 Poppins;color:var(--h-mut)}
.hd-signal{font:400 18px/1.35 Poppins;color:var(--h-lead)}
.hd-signal b{font-weight:700}  /* only the 2-3 risk words, in the tone color */
.hd-lede{font:400 16px/1.6 Poppins;max-width:64ch;color:var(--h-lead)}
.hd-label{font:700 12px/1.3 Poppins;letter-spacing:.14em;text-transform:uppercase;color:var(--h-label)}
.hd-clock{font:700 18px/1.2 Poppins;font-variant-numeric:tabular-nums}
.hd-action{font:600 14px/1 Poppins;letter-spacing:.01em;min-height:40px}  /* sentence case, never caps */
.hd-scrim{background:linear-gradient(90deg,var(--h-canvas) 0 480px,rgba(244,246,252,.9) 660px,rgba(244,246,252,.4) 840px,rgba(244,246,252,0) 980px)}
  /* text column caps at 844px: contrast holds over any art;
     transicion mas corta que el original (620/900/1120/1360) para
     dejar ver mas paisaje del hero, pedido explicito de Dario */
:focus-visible{outline:2px solid var(--h-focus);outline-offset:2px;border-radius:4px}
@media (max-width:640px){ .hd-title{font-size:28px;line-height:1.08;letter-spacing:.03em} }

/* ============================================================
   EL ARMADO — lo que el paste-ready no trae
   ============================================================ */

.hd-header {
  position: relative;
  overflow: hidden;
  min-height: var(--hd-open-min);
  padding: 28px var(--hd-pad-x) 22px;
  background: var(--h-canvas);
  border-bottom: 1px solid var(--h-border);
}
.hd-header .hd-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 82%; /* la caja del header es baja y ancha, y a 50%
    vertical se veia solo tormenta -- el video tiene el sol y el agua mas
    abajo, mismo criterio que ya usaba FinOps (50% 84%) para este video */
  pointer-events: none;
}
.hd-header .hd-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hd-body {
  position: relative;
  z-index: 2;
  max-width: min(844px, calc(100% - 470px));
  display: flex;
  flex-direction: column;
  gap: 6px;
}
@media (max-width: 880px) {
  .hd-body { max-width: none; }
}
.hd-body .hd-title { color: var(--h-text); margin: 2px 0 0; }
/* .hd-greeting/.hd-lede son <p>: el navegador les mete ~1em de margen
   propio ademas del gap:6px de .hd-body, sumando huecos enormes entre
   titulo y subtitulos -- se resetean aca, el espaciado real es el gap. */
.hd-body .hd-greeting, .hd-body .hd-lede { margin: 0; }
.hd-signal { display: flex; align-items: center; gap: 9px; margin: 2px 0 0; }
.hd-signal::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--h-ok);
  box-shadow: 0 0 0 4px rgba(18, 122, 69, .12);
}
.hd-signal.is-bad::before { background: var(--h-bad); box-shadow: 0 0 0 4px rgba(196, 39, 44, .12); }
.hd-signal.is-bad b { color: var(--h-bad); }
.hd-signal.is-warn::before { background: var(--h-warn-fill); box-shadow: 0 0 0 4px rgba(201, 129, 8, .14); }
.hd-signal.is-warn b { color: var(--h-warn-text); }
/* El mensaje va dentro de un <span>: asi el punto y el texto son los unicos
   dos items flex y el gap:9px no se cuela entre el <b> y el resto de la
   frase. Los headers sin <span> (Assistant) siguen igual que siempre. */
.hd-signal > span { min-width: 0; }

/* ---- la consola: misma pastilla flotante que ya tenia FinOps ---- */
.hd-console {
  position: absolute;
  z-index: 3;
  top: 26px;
  right: var(--hd-pad-x);
  display: flex;
  align-items: center;
  gap: 15px;
  height: 46px;
  padding: 0 16px;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 14px;
  box-shadow: 0 10px 28px -14px rgba(10, 30, 70, .2);
}
.hd-rule { flex: none; width: 1px; height: 20px; background: var(--h-border); }
.hd-live { display: flex; align-items: center; gap: 7px; font: 700 13px/1 Poppins; color: var(--h-text); white-space: nowrap; }
.hd-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--h-ok); box-shadow: 0 0 0 4px rgba(18, 122, 69, .1); animation: hdLivePulse 2.2s ease-in-out infinite; }
@keyframes hdLivePulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.hd-sync { font: 500 13px/1 Poppins; color: var(--h-mut); white-space: nowrap; }
.hd-clockwrap { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.hd-clockwrap .hd-clock { color: var(--h-text); line-height: 1; }
.hd-clockwrap .hd-date { font: 700 10.5px/1 Poppins; letter-spacing: .1em; color: var(--h-label); white-space: nowrap; }
/* el "?" sigue siendo .hz-help (asi lo engancha js/hrzn-help.js, que
   ya cargan estas paginas) -- aca solo se acomoda adentro de la
   consola, no se renombra la clase que el script busca. */
.hd-console .hz-help { flex: none; display: flex; }
.hd-console .hz-help > button {
  width: 26px; height: 26px; display: grid; place-items: center;
  color: var(--h-mut); background: none; border: 0; border-radius: 50%; cursor: pointer;
}
.hd-console .hz-help > button:hover { background: var(--h-sunken); }
.hd-console .hz-help .hz-ico { width: 17px; height: 17px; }

/* ---- el switch: docks debajo de la consola ----
   sin pastilla propia, el label quedaba flotando directo sobre el
   video (el mismo problema que tenia el boton de FinOps) -- se le
   pone el mismo fondo blur que la consola para que se lea siempre. */
.hd-switch-row {
  position: absolute; z-index: 3; top: 78px; right: var(--hd-pad-x);
  padding: 6px 14px 6px 12px;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 12px;
  box-shadow: 0 10px 28px -14px rgba(10, 30, 70, .2);
}
.hd-switch {
  display: flex; align-items: center; gap: 8px;
  font: 700 10.5px/1 Poppins; letter-spacing: .12em; text-transform: uppercase; color: var(--h-text);
  background: none; border: 0; cursor: pointer; padding: 0;
}
.hd-switch i {
  position: relative; flex: none; width: 30px; height: 17px; border-radius: 99px;
  background: var(--h-border); transition: background .15s ease;
}
.hd-switch i::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(10, 30, 70, .3);
  transition: transform .15s ease;
}
.hd-switch[aria-checked="true"] i { background: var(--h-ok); }
.hd-switch[aria-checked="true"] i::after { transform: translateX(13px); }

/* ---- la accion: bajo la pastilla ---- */
.hd-action-row { position: absolute; z-index: 3; top: 78px; right: var(--hd-pad-x); display: flex; justify-content: flex-end; }
.hd-switch-row + .hd-action-row { top: 116px; }
.hd-action {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0 16px; border-radius: 10px; cursor: pointer; white-space: nowrap;
  text-decoration: none; /* es <a> en AI Adoption/Score/Score Settings -- el navegador la subraya por default */
}
.hd-action:hover, .hd-action:focus { text-decoration: none; }
/* mismo criterio que .hz-btn.is-primary: sobre el azul lleno, 600
   empastaba el label. El .hd-action base sigue en 600 para las
   variantes claras (.is-quiet), que no tienen relleno. */
.hd-action.is-primary { color: #fff; font-weight: 500; background: var(--h-action); border: 0; }
.hd-action.is-primary:hover { filter: brightness(1.06); }
.hd-action.is-quiet { color: var(--h-action); background: #fff; border: 1px solid var(--h-border); }
.hd-action.is-quiet:hover { background: var(--h-sunken); }

/* ============================================================
   ESTADO COLAPSADO — al hacer scroll, sticky, <=64px
   ============================================================ */
.hd-header.is-collapsed {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 0;
  height: var(--hd-collapsed);
  padding: 0 var(--hd-pad-x);
  display: flex;
  align-items: center;
  gap: 18px;
  /* background casi opaco (.96) -- el backdrop-filter que tenia
     antes no se notaba y ahora que el collapse realmente se
     dispara (el bug del doble-scroll lo tapaba) es carga real de
     compositing en cada frame de scroll, justo en la transicion
     colapsado<->abierto -- de ahi el freeze al subir. */
  background: rgba(244, 246, 252, .98);
  box-shadow: 0 8px 20px -14px rgba(10, 30, 70, .3);
}
/* el video en .hd-art seguia con autoplay+loop de fondo; sacarlo del
   render tree con display:none en cada colapso/expansion (justo lo
   que dispara scrollear hasta arriba del todo) lo obligaba a
   reiniciar decodificacion cada vez -- eso era el resto del freeze.
   opacity:0 lo deja fuera de vista (igual clippeado por el overflow
   del header a los 64px) pero sin tocar el video. */
.hd-header.is-collapsed .hd-art,
.hd-header.is-collapsed .hd-scrim { opacity: 0; pointer-events: none; }
.hd-header.is-collapsed .hd-greeting,
.hd-header.is-collapsed .hd-lede { display: none; }
.hd-header.is-collapsed .hd-body {
  position: static;
  flex: 1 1 auto;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  max-width: none;
  min-width: 0;
}
.hd-header.is-collapsed .hd-title { display: none; }
.hd-header.is-collapsed .hd-title--collapsed {
  display: block;
  flex: none;
  color: var(--h-text);
  margin: 0;
}
.hd-header.is-collapsed .hd-signal > span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hd-header.is-collapsed .hd-signal {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hd-header.is-collapsed .hd-console,
.hd-header.is-collapsed .hd-action-row {
  position: static;
  flex: none;
  height: auto;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.hd-header.is-collapsed .hd-clockwrap .hd-date,
.hd-header.is-collapsed .hd-help { display: none; }
.hd-header.is-collapsed .hd-switch-row { display: none; } /* el toggle no es de escritura rapida: se queda arriba */

@media (max-width: 880px) {
  .hd-console, .hd-switch-row, .hd-action-row { position: static; margin-top: 14px; justify-content: flex-start; }
  .hd-switch-row + .hd-action-row { margin-top: 10px; }
}