/* ============================================================
   HORIZON PAGES — hoja base para las pantallas que se rehacen
   con la estetica de FinOps (Automations, Insights, Settings,
   Users).

   No depende de Tailwind ni del build del cockpit: define los
   mismos componentes que se midieron sobre finops (hero, control
   bar, KPI, paneles, tabla, helm bar) partiendo de los tokens de
   LINEAMIENTOS-HORIZON.md.

   Reglas que respeta:
   1. Una sola tipografia: Poppins. Las cifras van tabulares.
   2. Titulos en MAYUSCULA con tracking. Dos niveles: 17 y 13.
   3. Bajadas y copetes en navy, nunca gris lavado.
   4. Verde = sano · Amarillo = atencion · Rojo = peligro.
      Relleno con el color vivo, texto con la variante -ink.
   5. Gradientes solo azul -> naranja, y solo en trayectoria.
   6. Cuatro radios y tres sombras. Nada mas.
   ============================================================ */

/* ============================================================
   0 · TOKENS
   ============================================================ */

:root {
  --font-sans: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-mono: 'Poppins', system-ui, -apple-system, sans-serif;

  /* tinta: cuatro niveles, ningun gris lavado */
  --hz-ink: #0A1E46;
  --hz-ink-2: #24365C;
  --hz-ink-3: #3A4A66;
  --hz-ink-4: #55668A;

  /* marca */
  --hz-blue: #2450E4;
  --hz-sky: #58A9F4;
  --hz-orange: #F97435;

  /* estado · relleno */
  --hz-ok: #1FA95C;
  --hz-warn: #F59E0B;
  --hz-bad: #E5484D;

  /* estado · texto */
  --hz-ok-ink: #127A45;
  --hz-warn-ink: #A05F02;
  --hz-bad-ink: #C4272C;

  /* superficies */
  --hz-surface: #FFFFFF;
  --hz-sunken: #EAF0FB;
  --hz-line: #DCE4F5;
  --hz-line-soft: #E9EEF9;
  --hz-canvas: #F1F5FB;

  /* radios: cuatro */
  --hz-r-card: 16px;
  --hz-r-input: 10px;
  --hz-r-tag: 8px;
  --hz-r-pill: 999px;

  /* sombras: tres */
  --hz-sh-hair: 0 1px 2px rgba(10, 30, 70, .06);
  --hz-sh-soft: 0 10px 28px -14px rgba(10, 30, 70, .20);
  --hz-sh-deep: 0 26px 64px -22px rgba(10, 30, 70, .34);

  --hz-t-fast: .16s;
  --hz-t-mid: .28s;
  --hz-ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

/* los controles heredan Arial del user agent: una sola familia en todo */
button, input, select, textarea, svg { font-family: inherit; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--hz-ink);
  background: var(--hz-canvas);
  -webkit-font-smoothing: antialiased;
}

.hz-page {
  min-height: 100%;
  padding-bottom: 28px;
  /* Historia: primero esto era solo overflow-x: hidden. La spec computa
     overflow-y a "auto" cuando solo se declara overflow-x, y eso
     convertia a .hz-page en un SEGUNDO contenedor con scroll propio
     ademas del scroll de la ventana: dos barras, y el header agarraba
     la equivocada. Se arreglo poniendo overflow-y: hidden explicito.

     Pero "hidden" en los dos ejes deja a .hz-page como contenedor de
     scroll igual, y position: sticky se ancla al contenedor de scroll
     mas cercano: el header colapsado quedaba pegado a .hz-page en vez
     de al viewport, o sea que se iba scrolleando con la pagina y la
     barra compacta nunca aparecia.

     clip hace exactamente lo que se buscaba desde el principio: recorta
     el desborde horizontal SIN volverse contenedor de scroll, y al no
     ser scrollable no fuerza al otro eje a "auto" -- overflow-y puede
     quedarse en visible. Asi no hay doble barra Y el sticky del header
     se ancla al viewport, que es lo que corresponde. */
  overflow-x: clip;
  overflow-y: visible;

  /* Segundo sintoma del colapso del header: al pasar de 248px a 64px el
     documento se acorta 184px, y el scroll anchoring del navegador
     compensaba restandole esos mismos 184px al scroll para dejar quieto
     el contenido ancla. Efecto: scrolleabas apenas pasando el umbral, el
     header colapsaba y el navegador te tiraba de vuelta arriba -- y como
     ahi el scroll quedaba abajo del umbral, se volvia a expandir. De ahi
     el forcejeo en la zona del umbral.

     Estas pantallas son estaticas despues de cargar (no hay contenido
     que entre tarde y corra el layout), asi que el anchoring no aporta
     nada y si rompe el header. Se apaga para este subarbol.
     Medido: desvio de scroll 0 en todo el recorrido, en las dos
     direcciones. */
  overflow-anchor: none;
}

/* ============================================================
   1 · TIPOGRAFIA — la escala del lineamiento, sin excepciones
   ============================================================ */

/* nivel 1 · titulo de panel o seccion */
.hz-panel-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--hz-ink);
}

/* nivel 2 · titulo de tarjeta (incluye las etiquetas de los KPI) */
.hz-card-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--hz-ink);
}

/* volanta / eyebrow · cabecera de tabla · label de filtro */
.hz-eyebrow {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--hz-ink-3);
}

/* bajada / copete */
.hz-lede {
  margin: 0;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--hz-ink);
}

/* metadato */
.hz-meta {
  font-size: 11px;
  font-weight: 700;
  color: var(--hz-ink-3);
}

/* dato numerico · tres pasos */
.hz-num,
.hz-num-card,
.hz-num-inline {
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
  color: var(--hz-ink);
  line-height: 1.05;
}
.hz-num { font-size: 30px; }
.hz-num-card { font-size: 24px; }
.hz-num-inline { font-size: 20px; }

.hz-num small,
.hz-num-card small,
.hz-num-inline small {
  font-size: .5em;
  font-weight: 700;
  color: var(--hz-ink-3);
  letter-spacing: 0;
}

.hz-tabular { font-variant-numeric: tabular-nums; }

/* ============================================================
   2 · ICONOGRAFIA — una sola familia, SVG de trazo
   ============================================================ */

.hz-ico {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.hz-ico.is-nav { width: 21px; height: 21px; }
.hz-ico.is-btn { width: 19px; height: 19px; }
.hz-ico.is-data { width: 15px; height: 15px; }

/* Esta hoja se carga DESPUES de horizon-skin.css, asi que su .hz-ico de
   21px pierde contra el de 17 de arriba. El sidebar del shell recupera
   su propia escala aca; sin esto los iconos de navegacion se achican. */
.sidebar .hz-ico { width: 21px; height: 21px; }
.sidebar .company-icon > .hz-ico,
.sidebar .chevron > .hz-ico { width: 17px; height: 17px; }

/* El shell envolvia cada icono en un <span class="material-symbols-rounded">
   y el skin apagaba la fuente con font-size:0. No quedaba ninguna familia
   de iconos viva, pero el control 6 del lineamiento cuenta esa clase y una
   clase con ese nombre conteniendo un SVG se lee mal. El span pasa a
   .hz-ico-slot y hereda aca lo que le daba el shell. */
.hz-ico-slot { display: block; line-height: 0; }
.hz-ico-slot > .hz-ico { display: block; }
.side-link .hz-ico-slot { color: #D4E6FF; }
.side-link.is-active .hz-ico-slot { color: #fff; }
.sidebar .chevron { display: block; }

/* ============================================================
   3 · FRANJA DE ESTADO — el pulso de la pagina
   ============================================================ */

.hz-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 31px;
  padding: 0 28px;
  background: rgba(247, 251, 255, .94);
  border-bottom: 1px solid rgba(173, 194, 217, .62);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hz-ink-3);
}
.hz-strip > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hz-strip i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hz-ok);
  box-shadow: 0 0 0 4px rgba(31, 169, 92, .12);
}
.hz-strip.is-warn i { background: var(--hz-warn); box-shadow: 0 0 0 4px rgba(245, 158, 11, .14); }
.hz-strip.is-bad i { background: var(--hz-bad); box-shadow: 0 0 0 4px rgba(229, 72, 77, .14); }
.hz-strip b { font: inherit; color: var(--hz-ink-2); }
.hz-strip small {
  padding-left: 9px;
  border-left: 1px solid var(--hz-line);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--hz-ink-3);
}
.hz-strip button {
  font: inherit;
  color: var(--hz-ink-3);
  background: none;
  border: 0;
  cursor: pointer;
}
.hz-strip button:hover { color: var(--hz-blue); }

/* ============================================================
   4 · HERO — video de costa, un solo protagonista
   ============================================================ */

.hz-hero {
  position: relative;
  overflow: hidden;
  min-height: 226px;
  padding: 26px 32px 28px;
  background-color: #DCE9FB;
  border-bottom: 1px solid #D9E3F0;
}
.hz-hero video,
.hz-hero .hz-hero-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 84%;
  pointer-events: none;
}
.hz-hero .hz-hero-wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(220, 239, 255, .92) 0%,
    rgba(229, 243, 255, .72) 46%,
    rgba(229, 243, 255, .18) 78%,
    transparent 100%);
}
.hz-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 48px;
  pointer-events: none;
  background: linear-gradient(rgba(237, 245, 253, 0), rgba(237, 245, 253, .86));
}
.hz-hero-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 720px;
}

/* capa 1 · saludo / contexto */
.hz-hero-greeting {
  margin: 0;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--hz-ink);
}
.hz-hero-greeting b { font-weight: 700; }

/* capa 2 · el dato */
.hz-hero-headline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
.hz-hero-headline .hz-num { font-size: 30px; }
.hz-hero-headline em {
  font-style: normal;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -.015em;
  color: var(--hz-ink-2);
}

/* capa 3 · el veredicto: punto + palabra + color, sin caja */
.hz-verdict {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--hz-ok-ink);
}
.hz-verdict::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hz-ok);
}
.hz-verdict.is-warn { color: var(--hz-warn-ink); }
.hz-verdict.is-warn::before { background: var(--hz-warn); }
.hz-verdict.is-bad { color: var(--hz-bad-ink); }
.hz-verdict.is-bad::before { background: var(--hz-bad); }

/* El hero no es blanco: es el lavado celeste sobre el video. Ahi el rojo
   -ink todavia pasa (4.6) pero el amarillo cae a 4.14, asi que sobre el
   hero — y solo ahi — el veredicto ambar baja un paso. */
.hz-hero .hz-verdict.is-warn { color: #8A5202; }

/* capa 4 · metadatos, la mas silenciosa */
.hz-hero-signals {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  padding-top: 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--hz-ink-3);
}
.hz-hero-signals span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.hz-hero-signals span + span::before {
  content: "";
  width: 1px;
  height: 13px;
  margin-right: 10px;
  background: #9BB0C8;
}
.hz-hero-signals i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hz-ok);
  box-shadow: 0 0 0 4px rgba(31, 169, 92, .12);
}
.hz-hero-signals small {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--hz-ink-3);
}

/* pastilla de utilidad, arriba a la derecha del hero */
.hz-utility {
  position: absolute;
  top: 20px;
  right: 22px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 17px;
  height: 53px;
  padding: 0 17px;
  font-size: 11px;
  color: var(--hz-ink-2);
  background: rgba(246, 251, 255, .82);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: var(--hz-r-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--hz-sh-soft);
}
.hz-utility .hz-rule {
  display: block;
  width: 1px;
  height: 24px;
  background: #BFD3E9;
}
.hz-viewers { display: flex; align-items: center; }
.hz-viewers > span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-left: -6px;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  background: var(--hz-blue);
  border: 2px solid #EEF8FF;
  border-radius: 50%;
}
.hz-viewers > span:first-child { margin-left: 0; }
.hz-viewers small { margin-left: 9px; white-space: nowrap; color: var(--hz-ink-3); }
.hz-live { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.hz-live span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hz-ok);
  box-shadow: 0 0 0 7px rgba(31, 169, 92, .08);
  animation: hz-live-pulse 2.4s infinite;
}
@keyframes hz-live-pulse {
  0%, 100% { box-shadow: 0 0 0 7px rgba(31, 169, 92, .08); }
  50% { box-shadow: 0 0 0 7px rgba(31, 169, 92, .18); }
}
.hz-period {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  color: var(--hz-ink-2);
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.hz-period .hz-ico { width: 15px; height: 15px; }

/* EL "?" DEL HERO — solo el icono, sin contenedor.
   ------------------------------------------------------------
   Era el UNICO control de la pastilla sin clase: el markup trae
   `<button id="helpBtn">` y nada mas, asi que ninguna regla lo
   alcanzaba y se quedaba con los estilos por defecto del navegador
   -- `border: 1.6px outset` y `background: #f0f0f0` --, o sea un
   cuadrado gris alrededor del icono. Sus hermanos (.hz-period,
   .hz-live) si tienen clase y por eso se veian limpios.

   Se le da el mismo tratamiento que a .hz-period: fondo y borde en
   cero, y el color como unica respuesta al hover. Sin pastilla ni
   circulo detras, que es lo que se pidio.

   El foco no se define aca: cloudbeach.css ya pone un
   `button:focus-visible` global, y conviene que siga siendo uno solo.

   Solo lo llevan insights.html y users.html, las dos pantallas que
   tienen nota de metodo (ver js/hrzn-help.js). */
.hz-help { display: flex; align-items: center; }
.hz-help > button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--hz-ink-3);
  background: none;
  border: 0;
  cursor: pointer;
}
.hz-help > button:hover,
.hz-help > button[aria-expanded="true"] { color: var(--hz-blue); }
.hz-help > button .hz-ico { width: 17px; height: 17px; }

.hz-clock {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  line-height: 1;
  white-space: nowrap;
}
.hz-clock b {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--hz-ink);
  font-variant-numeric: tabular-nums;
}
.hz-clock small {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--hz-ink-3);
}

/* ============================================================
   5 · BARRA DE CONTROL — los filtros que rigen la pagina
   ============================================================ */

.hz-control {
  display: grid;
  grid-template-columns: minmax(205px, 1.15fr) auto repeat(3, minmax(118px, .68fr)) auto;
  align-items: end;
  gap: 10px;
  margin: 13px 24px 17px;
  padding: 11px 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(241, 247, 253, .96));
  border: 1px solid var(--hz-line);
  border-radius: var(--hz-r-card);
  box-shadow: var(--hz-sh-hair);
}
.hz-control-title {
  display: flex;
  align-items: center;
  align-self: center;
  gap: 10px;
  min-width: 0;
}
.hz-control-title > span {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  color: var(--hz-blue);
}
.hz-control-title strong {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--hz-ink);
}
.hz-control-title small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 500;
  color: var(--hz-ink-3);
}
.hz-switchbar {
  display: flex;
  align-self: center;
  padding: 3px;
  background: var(--hz-sunken);
  border: 1px solid var(--hz-line);
  border-radius: var(--hz-r-input);
}
.hz-switchbar button {
  min-width: 38px;
  padding: 7px 8px;
  font-family: inherit;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hz-ink-3);
  background: none;
  border: 0;
  border-radius: var(--hz-r-tag);
  cursor: pointer;
}
.hz-switchbar button.is-active {
  color: #fff;
  background: var(--hz-blue);
  box-shadow: var(--hz-sh-hair);
}
.hz-field {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.hz-field > span {
  padding-left: 2px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hz-ink-3);
}
.hz-field select {
  width: 100%;
  min-height: 33px;
  padding: 0 26px 0 9px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--hz-ink);
  background: var(--hz-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A4A66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 13px;
  border: 1px solid var(--hz-line);
  border-radius: var(--hz-r-input);
  box-shadow: var(--hz-sh-hair);
  appearance: none;
  cursor: pointer;
}
.hz-field select:focus {
  outline: none;
  border-color: var(--hz-sky);
  box-shadow: 0 0 0 3px rgba(88, 169, 244, .32);
}
.hz-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 33px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  color: var(--hz-ink-2);
  background: var(--hz-surface);
  border: 1px solid var(--hz-line);
  border-radius: var(--hz-r-input);
  box-shadow: var(--hz-sh-hair);
  cursor: pointer;
}
.hz-reset .hz-ico { width: 15px; height: 15px; }
.hz-reset:disabled { opacity: .42; cursor: default; }

/* variante de la barra cuando no filtra sino que navega la pagina */
.hz-control.is-nav {
  grid-template-columns: minmax(200px, auto) minmax(0, 1fr) auto;
  align-items: center;
}

/* campo suelto · el mismo select de la barra, fuera de la grilla */
.hz-input,
.hz-select {
  min-width: 220px;
  min-height: 36px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--hz-ink);
  background: var(--hz-surface);
  border: 1px solid var(--hz-line);
  border-radius: var(--hz-r-input);
  box-shadow: var(--hz-sh-hair);
}
.hz-select {
  padding-right: 28px;
  font-weight: 600;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A4A66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 13px;
  appearance: none;
  cursor: pointer;
}
.hz-input:focus,
.hz-select:focus {
  outline: none;
  border-color: var(--hz-sky);
  box-shadow: 0 0 0 3px rgba(88, 169, 244, .32);
}

/* ============================================================
   6 · KPI — la fila de cifras
   ============================================================ */

.hz-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
  padding: 0 24px 17px;
}
.hz-kpi-grid.is-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hz-kpi-grid .is-wide { grid-column: span 2; }

.hz-kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  min-height: 150px;
  padding: 18px;
  background: var(--hz-surface);
  border: 1px solid var(--hz-line);
  border-radius: var(--hz-r-card);
  box-shadow: var(--hz-sh-hair);
  transition: box-shadow var(--hz-t-mid) var(--hz-ease), transform var(--hz-t-mid) var(--hz-ease);
}
/* Vuelve el hover a TODAS las .hz-kpi -- pedido explicito de Dario:
   cada tarjeta lleva a su lista/seccion relacionada en la misma
   pagina (data-kpi-target + el listener compartido en hrzn-header.js),
   asi que el gesto de "esto se puede clickear" aplica siempre. */
.hz-kpi[data-kpi-target] { cursor: pointer; }
.hz-kpi[data-kpi-target]:hover,
.hz-kpi[data-kpi-target]:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--hz-sh-soft);
}
.hz-kpi[data-kpi-target]:focus-visible { outline: none; box-shadow: var(--hz-sh-soft), 0 0 0 3px rgba(88, 169, 244, .32); }
/* un solo gesto de tintado por estado, nunca tres colores.
   El borde de color solo aparece al pasar el mouse -- pedido explicito
   de Dario, mismo criterio que .intg en settings.html. */
.hz-kpi.is-lead { background: linear-gradient(155deg, rgba(36, 80, 228, .06) 0%, #fff 62%); }
.hz-kpi.is-warn {
  border-left: 4px solid transparent;
  background: linear-gradient(160deg, rgba(245, 158, 11, .06) 0%, #fff 62%);
}
.hz-kpi.is-warn:hover { border-left-color: var(--hz-warn); }
.hz-kpi.is-bad {
  border-left: 4px solid transparent;
  background: linear-gradient(160deg, rgba(229, 72, 77, .06) 0%, #fff 62%);
}
.hz-kpi.is-bad:hover { border-left-color: var(--hz-bad); }
.hz-kpi.is-ok {
  border-left: 4px solid transparent;
  background: linear-gradient(160deg, rgba(31, 169, 92, .06) 0%, #fff 62%);
}
.hz-kpi.is-ok:hover { border-left-color: var(--hz-ok); }
.hz-kpi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.hz-kpi-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 11px;
  border-top: 1px solid var(--hz-line-soft);
  font-size: 11px;
  font-weight: 700;
  color: var(--hz-ink-3);
}
.hz-kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--hz-ink-2);
}
.hz-kpi-delta.is-ok { color: var(--hz-ok-ink); }
.hz-kpi-delta.is-warn { color: var(--hz-warn-ink); }
.hz-kpi-delta.is-bad { color: var(--hz-bad-ink); }
.hz-kpi-delta .hz-ico { width: 15px; height: 15px; }
/* KPI que navega · SOLO cuando la cifra se explica en OTRA pantalla.
   Si el dato esta en esta misma pagina, la tarjeta es un <div> y no se mueve. */
a.hz-kpi {
  text-decoration: none;
  color: inherit;
}
a.hz-kpi:hover {
  transform: translateY(-1px);
  box-shadow: var(--hz-sh-soft);
}
a.hz-kpi:focus-visible {
  outline: none;
  border-color: var(--hz-sky);
  box-shadow: 0 0 0 3px rgba(88, 169, 244, .32);
}

/* el destino, rotulado abajo a la derecha: se sabe adonde antes de hacer click */
.hz-kpi-go {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  color: var(--hz-ink-3);
  transition: color var(--hz-t-fast) var(--hz-ease);
}
/* nowrap arriba a proposito: si falta lugar se parte el texto de la izquierda
   del pie, nunca el rotulo del destino */
.hz-kpi-go svg {
  width: 13px;
  height: 13px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--hz-t-fast) var(--hz-ease);
}
a.hz-kpi:hover .hz-kpi-go { color: var(--hz-blue); }
a.hz-kpi:hover .hz-kpi-go svg { transform: translate(1px, -1px); }


/* insignia · una por card, maximo */
.hz-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: var(--hz-r-tag);
  color: var(--hz-ink-3);
  background: var(--hz-sunken);
  white-space: nowrap;
}
.hz-badge.is-ok { color: var(--hz-ok-ink); background: rgba(31, 169, 92, .10); }
.hz-badge.is-warn { color: var(--hz-warn-ink); background: rgba(245, 158, 11, .10); }
.hz-badge.is-bad { color: var(--hz-bad-ink); background: rgba(229, 72, 77, .10); }
.hz-badge.is-blue { color: var(--hz-blue); background: rgba(36, 80, 228, .10); }
.hz-badge i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ============================================================
   7 · PANELES
   ============================================================ */

.hz-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 0 24px;
}
.hz-panel {
  padding: 22px;
  background: var(--hz-surface);
  border: 1px solid var(--hz-line);
  border-radius: var(--hz-r-card);
  box-shadow: var(--hz-sh-hair);
}
.hz-panel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.hz-panel-head .hz-lede { margin-top: 4px; }

.hz-subgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 13px;
}
.hz-subcard {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  background: #FBFCFE;
  border: 1px solid var(--hz-line);
  border-radius: var(--hz-r-input);
  box-shadow: var(--hz-sh-hair);
}
.hz-subcard-foot {
  padding-top: 10px;
  border-top: 1px solid var(--hz-line-soft);
  font-size: 11px;
  font-weight: 700;
  color: var(--hz-ink-3);
}

/* barra de capacidad · color plano de estado, nunca gradiente */
.hz-bar {
  position: relative;
  height: 6px;
  border-radius: var(--hz-r-pill);
  background: var(--hz-sunken);
  overflow: hidden;
}
.hz-bar > i {
  display: block;
  height: 100%;
  border-radius: var(--hz-r-pill);
  background: var(--hz-ok);
  transition: width var(--hz-t-mid) var(--hz-ease);
}
.hz-bar.is-warn > i { background: var(--hz-warn); }
.hz-bar.is-bad > i { background: var(--hz-bad); }
.hz-bar.is-neutral > i { background: var(--hz-blue); }
/* la unica excepcion: trayectoria en el tiempo */
.hz-bar.is-course > i { background: linear-gradient(90deg, var(--hz-blue) 0%, var(--hz-orange) 100%); }
.hz-bar.is-course.is-over > i {
  background: linear-gradient(90deg, var(--hz-blue) 0%, var(--hz-orange) 68%, var(--hz-bad) 100%);
}

/* ============================================================
   8 · ESTADO — punto + palabra + color, sin caja
   ============================================================ */

.hz-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--hz-ok-ink);
  white-space: nowrap;
}
.hz-state::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hz-ok);
}
.hz-state.is-warn { color: var(--hz-warn-ink); }
.hz-state.is-warn::before { background: var(--hz-warn); }
.hz-state.is-bad { color: var(--hz-bad-ink); }
.hz-state.is-bad::before { background: var(--hz-bad); }
/* pausado es un estado propio, no metadata -- por eso rompe la regla
   de "nunca gris" de horizon-skin.css a proposito: gris de verdad,
   pedido explicito, para que se lea distinto de todo lo demas. */
.hz-state.is-idle { color: #64748B; }
.hz-state.is-idle::before { background: #94A3B8; }
.hz-bar.is-paused > i { background: #94A3B8; }

/* ============================================================
   9 · BOTONES
   ============================================================ */

.hz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--hz-ink-2);
  background: var(--hz-surface);
  border: 1px solid var(--hz-line);
  border-radius: var(--hz-r-input);
  box-shadow: var(--hz-sh-hair);
  cursor: pointer;
  transition: background var(--hz-t-fast), border-color var(--hz-t-fast), box-shadow var(--hz-t-fast);
}
.hz-btn:hover { background: #F6F9FF; box-shadow: var(--hz-sh-soft); }
.hz-btn:active { transform: translateY(1px); }
.hz-btn:focus-visible {
  outline: none;
  border-color: var(--hz-sky);
  box-shadow: 0 0 0 3px rgba(88, 169, 244, .32);
}
.hz-btn .hz-ico { width: 15px; height: 15px; }
.hz-btn.is-primary {
  color: #fff;
  /* 700 sobre el azul lleno empastaba los trazos y el label costaba
     leerse; en relleno solido el texto ya tiene todo el contraste que
     necesita, el peso solo lo cierra. Un paso abajo, a medium. Los
     botones claros siguen en 700 (.hz-btn base). */
  font-weight: 500;
  background: var(--hz-blue);
  border-color: var(--hz-blue);
}
.hz-btn.is-primary:hover { background: #1C41C4; border-color: #1C41C4; }
.hz-btn.is-danger {
  color: var(--hz-bad-ink);
  background: rgba(229, 72, 77, .08);
  border-color: rgba(229, 72, 77, .34);
}
.hz-btn.is-danger:hover { background: rgba(229, 72, 77, .14); }
.hz-btn.is-sm { height: 30px; padding: 0 10px; font-size: 11px; border-radius: var(--hz-r-tag); }
.hz-btn.is-quiet { background: transparent; border-color: transparent; box-shadow: none; }
.hz-btn.is-quiet:hover { background: var(--hz-sunken); box-shadow: none; }

.hz-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--hz-ink-3);
  background: var(--hz-surface);
  border: 1px solid var(--hz-line);
  border-radius: var(--hz-r-tag);
  box-shadow: var(--hz-sh-hair);
  cursor: pointer;
  transition: background var(--hz-t-fast), color var(--hz-t-fast);
}
.hz-iconbtn:hover { background: var(--hz-sunken); color: var(--hz-blue); }
.hz-iconbtn:focus-visible {
  outline: none;
  border-color: var(--hz-sky);
  box-shadow: 0 0 0 3px rgba(88, 169, 244, .32);
}

/* pastillas de filtro · seleccion multiple o categoria */
.hz-pillbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hz-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 13px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--hz-ink-2);
  background: var(--hz-surface);
  border: 1px solid var(--hz-line);
  border-radius: var(--hz-r-pill);
  box-shadow: var(--hz-sh-hair);
  cursor: pointer;
  transition: background var(--hz-t-fast), color var(--hz-t-fast), border-color var(--hz-t-fast);
}
.hz-pill:hover { background: var(--hz-sunken); }
.hz-pill.is-on {
  color: #fff;
  background: var(--hz-blue);
  border-color: var(--hz-blue);
}
.hz-pill em {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  opacity: .72;
}
.hz-pill:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(88, 169, 244, .32);
}

/* switch */
.hz-switch {
  position: relative;
  flex: none;
  width: 42px;
  height: 24px;
  padding: 0;
  background: var(--hz-sunken);
  border: 1px solid var(--hz-line);
  border-radius: var(--hz-r-pill);
  cursor: pointer;
  transition: background var(--hz-t-fast), border-color var(--hz-t-fast);
}
.hz-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--hz-surface);
  border-radius: 50%;
  box-shadow: var(--hz-sh-hair);
  transition: left var(--hz-t-fast) var(--hz-ease);
}
.hz-switch.is-on { background: var(--hz-ok); border-color: var(--hz-ok); }
.hz-switch.is-on::after { left: 20px; }
.hz-switch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(88, 169, 244, .32);
}

/* ============================================================
   10 · TABLA
   ============================================================ */

.hz-table-scroll {
  margin-top: 14px;
  background: var(--hz-surface);
  border: 1px solid var(--hz-line);
  border-radius: var(--hz-r-input);
  overflow: auto;
}
.hz-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.hz-table thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  height: 44px;
  padding: 0 12px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hz-ink-3);
  background: var(--hz-sunken);
}
/* La linea de la cabecera va en un pseudo, no en box-shadow: con
   border-collapse el borde de una celda sticky se pierde al scrollear,
   y una sombra de mas ensucia el sistema de tres. */
.hz-table thead th::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--hz-line);
}
.hz-table tbody td {
  padding: 13px 12px;
  font-size: 12px;
  font-weight: 400;
  color: var(--hz-ink);
  border-top: 1px solid var(--hz-line-soft);
}
.hz-table tbody td b { font-weight: 600; }
/* cebra igual que .budgets-table de FinOps (mismo tinte, #f2f7fc94),
   para que no quede tan plano -- pedido explicito de Dario. */
.hz-table tbody tr:nth-child(2n) { background: #f2f7fc94; }
.hz-table tbody tr:hover { background: #F4F8FF; }
.hz-table thead th:first-child,
.hz-table tbody td:first-child { padding-left: 16px; }
.hz-table thead th:last-child,
.hz-table tbody td:last-child { padding-right: 16px; }

/* ============================================================
   12 · DRAWER + OVERLAY + TOAST
   ============================================================ */

.hz-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(10, 30, 70, .28);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--hz-t-mid);
}
.hz-overlay.is-on { opacity: 1; pointer-events: auto; }

.hz-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 71;
  display: flex;
  flex-direction: column;
  width: 440px;
  max-width: 92vw;
  background: var(--hz-surface);
  border-left: 1px solid var(--hz-line);
  box-shadow: var(--hz-sh-deep);
  transform: translateX(100%);
  transition: transform var(--hz-t-mid) var(--hz-ease);
}
.hz-drawer.is-on { transform: none; }
.hz-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--hz-line);
}
.hz-drawer-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
  overflow: auto;
}
.hz-drawer-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 18px 22px;
  border-top: 1px solid var(--hz-line);
}
.hz-formfield label {
  display: block;
  margin-bottom: 6px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hz-ink-3);
}
.hz-formfield input,
.hz-formfield select,
.hz-formfield textarea {
  width: 100%;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--hz-ink);
  background: var(--hz-surface);
  border: 1px solid var(--hz-line);
  border-radius: var(--hz-r-input);
  box-shadow: var(--hz-sh-hair);
}
.hz-formfield textarea { resize: vertical; }
.hz-formfield input:focus,
.hz-formfield select:focus,
.hz-formfield textarea:focus {
  outline: none;
  border-color: var(--hz-sky);
  box-shadow: 0 0 0 3px rgba(88, 169, 244, .32);
}

.hz-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 80;
  padding: 11px 18px;
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  background: var(--hz-ink);
  border-radius: var(--hz-r-input);
  box-shadow: var(--hz-sh-deep);
  transform: translateX(-50%) translateY(14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--hz-t-fast), transform var(--hz-t-fast);
}
.hz-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   13 · UTILIDADES MINIMAS
   ============================================================ */

.hz-row { display: flex; align-items: center; gap: 10px; }
.hz-row.is-between { justify-content: space-between; }
.hz-col { display: flex; flex-direction: column; gap: 6px; }
.hz-grow { flex: 1; min-width: 0; }
.hz-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hz-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ============================================================
   14 · RESPONSIVE
   ============================================================ */

/* El iframe del shell mide ~1060px con la sidebar puesta: el corte va en
   1023 para que la fila de KPI siga entera ahi, igual que en FinOps. */
@media (max-width: 1023px) {
  .hz-kpi-grid,
  .hz-kpi-grid.is-five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hz-kpi-grid .is-wide { grid-column: span 2; }
  .hz-control {
    grid-template-columns: minmax(200px, 1fr) auto repeat(2, minmax(130px, 1fr));
  }
  .hz-control.is-nav { grid-template-columns: minmax(0, 1fr) auto; }
  .hz-control.is-nav .hz-pillbar { grid-column: 1 / -1; order: 3; }
}
@media (max-width: 1180px) {
  .hz-utility { gap: 10px; }
  .hz-utility .hz-rule,
  .hz-viewers small,
  .hz-clock small { display: none; }
}
@media (max-width: 880px) {
  .hz-hero { padding: 22px 18px 26px; }
  .hz-utility { position: static; margin-bottom: 16px; max-width: 100%; }
  .hz-control { grid-template-columns: 1fr 1fr; margin-inline: 14px; padding: 10px; }
  .hz-control-title { grid-column: 1 / -1; }
  .hz-kpi-grid,
  .hz-kpi-grid.is-five { grid-template-columns: 1fr; padding-inline: 14px; }
  .hz-stack { padding-inline: 14px; }
  .hz-strip { padding-inline: 14px; }
  .hz-strip small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01ms !important; }
}