/* ============================================================
   HRZN · SISTEMA TIPOGRAFICO GENERALIZADO
   ------------------------------------------------------------
   Lleva a TODA la aplicacion el sistema que el disenador dejo
   resuelto en FinOps.

   Reparto de responsabilidades:

     css/hrzn-type.css         solo FinOps (raiz .finops-dashboard,
                               dentro del iframe del cockpit)
     css/hrzn-type-system.css  este archivo: el shell y las paginas
                               construidas con el vocabulario .hz-
                               (Users, Insights, y las que vengan)

   Los dos comparten los MISMOS ocho tokens. Si se toca un token
   hay que tocarlo en los dos archivos, o las pantallas dejan de
   hablar el mismo idioma.

   SOLO TIPOGRAFIA: tamanios, pesos, tracking, interlineado y cifras
   tabulares. Ningun color — asi compone con horizon-dark.css en vez
   de pelearle.

   Se enlaza ULTIMO, despues de horizon-pages.css, hrzn-sidebar.css
   y horizon-dark.css.
   ============================================================ */

/* ── A · TOKENS ───────────────────────────────────────────────
   Copia literal de los de hrzn-type.css. Ver ese archivo para el
   razonamiento detras de cada valor. */
:root{
  --t-display: clamp(44px, 5.2vw, 68px);
  --t-page:    clamp(30px, 3.2vw, 42px);
  --t-section: 22px;
  --t-card:    18px;
  --t-body:    16px;
  --t-dense:   14px;   /* PISO del sistema */
  --t-label:   14px;
  --t-data:    40px;

  --tr-display: .040em;
  --tr-page:    .040em;
  --tr-section: .055em;
  --tr-label:   .140em;
  --tr-micro:   .160em;

  --lh-display: 1.00;
  --lh-section: 1.15;
  --lh-card:    1.30;
  --lh-body:    1.60;
  --lh-dense:   1.55;
}

/* el cuerpo base de la app era 13px, por debajo del piso */
body { font-size: var(--t-dense); }


/* ============================================================
   B · EL SHELL · sidebar, marca y perfil
   ------------------------------------------------------------
   Aplica a TODAS las pantallas, FinOps incluida: el sidebar es el
   unico componente compartido por las tres y era el que mas se
   alejaba del sistema. Medido antes de tocar:

     .side-link b            13px     nav principal
     .side-sublink           11.5px   subitems de AI
     .brand small            11px     rotulo FINOPS / USERS
     .sidebar-toggle-label   10.5px   "Collapse menu"
     .profile-card small     12px     "Owner"

   Cuatro de cinco por debajo del piso de 14, en el componente que
   se ve en cada pantalla del producto.
   ============================================================ */

/* IMPORTANTE · todo este bloque va acotado a
   `:root:not([data-sidebar="collapsed"])`.

   Colapsado, hrzn-sidebar.css apaga las etiquetas con `font-size: 0` y
   `display: none` para dejar solo el riel de iconos en 76px de ancho.
   Un piso de 14px con !important pisaba ese apagado y desbordaba la
   columna — medido: "AI Adoption" a 91px dentro de 60px, y lo mismo
   con "Help & Support".

   El piso rige donde hay texto que leer. En el riel de iconos no hay
   texto: hay iconos y un tooltip. */

/* nav principal · son palabras accionables, no etiquetas: sin caps */
:root:not([data-sidebar="collapsed"]) .sidebar .side-link b,
:root:not([data-sidebar="collapsed"]) .sidebar .side-group > summary b {
  font-size: var(--t-dense) !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
}

/* subitems · un escalon por debajo en peso, no en tamanio */
:root:not([data-sidebar="collapsed"]) .sidebar .side-sublink {
  font-size: var(--t-dense) !important;
  font-weight: 500 !important;
}

/* el rotulo de la marca es una etiqueta: caps + tracking micro */
:root:not([data-sidebar="collapsed"]) .sidebar .brand small {
  font-size: var(--t-dense) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: var(--tr-micro) !important;
  line-height: 1.3 !important;
}

/* acciones del pie · el mismo cuerpo que el nav, porque se usan igual */
:root:not([data-sidebar="collapsed"]) .sidebar .support-link {
  font-size: var(--t-dense) !important;
  font-weight: 600 !important;
}
:root:not([data-sidebar="collapsed"]) .sidebar .sidebar-toggle-label {
  font-size: var(--t-dense) !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
}

/* la tarjeta de perfil · el nombre es identidad (700), el rol la acompania */
:root:not([data-sidebar="collapsed"]) .sidebar .profile-card b {
  font-size: var(--t-dense) !important;
  font-weight: 700 !important;
}
:root:not([data-sidebar="collapsed"]) .sidebar .profile-card small {
  font-size: var(--t-dense) !important;
  font-weight: 500 !important;
}

/* las iniciales del avatar NO entran al piso: son insignia grafica
   dentro de un circulo de ancho fijo, la misma excepcion que hace
   FinOps con AC / CR / LM. */


/* ============================================================
   C · EL VOCABULARIO .hz- · Users, Insights y sucesivas
   ------------------------------------------------------------
   horizon-pages.css define los componentes con una escala anterior
   —de 8.5px a 30px— que no es la de FinOps. Aqui se remapean uno a
   uno contra los ocho tokens.
   ============================================================ */

/* ── C1 · HEADER DE SECCION · 22 / 700 / caps / .055em ────────
   Es el titulo que abre un panel. Mismo tratamiento que los h2 de
   FinOps: FINANCIAL COURSE, SYSTEMS LOAD, BUDGETS. */
.hz-panel-title {
  font-size: var(--t-section) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: var(--tr-section) !important;
  line-height: var(--lh-section) !important;
}

/* ── C2 · ETIQUETAS · 14 / 700 / caps / .14em ─────────────────
   El token de etiqueta mide lo mismo que el cuerpo denso a
   proposito: se distingue por mayuscula + peso + tracking, no por
   tamanio. Aqui caen todos los rotulos que estaban entre 9.5 y
   11.5px. */
.hz-card-title,
.hz-eyebrow,
.hz-badge,
.hz-field > span,
.hz-formfield label,
.hz-control-title strong,
.hz-clock small {
  font-size: var(--t-label) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: var(--tr-label) !important;
  line-height: 1.3 !important;
}
/* la fecha del reloj conserva su tracking propio: 33 caracteres en
   caps a .14em se desparramaban fuera de la barra */
.hz-clock small { letter-spacing: .13em !important; }

/* la insignia baja el tracking a .08em · MEDIDO: subir de 9.5 a 14px
   con .14em dejaba "+3 VS PREV" en 111px dentro de una fila de 101, y
   "UNDER 40" en 93 dentro de 83. La insignia va en `white-space:
   nowrap`, asi que ese exceso se recortaba.

   Es el mismo ajuste que FinOps hace en las cabeceras de su tabla:
   a 9.5px ese aire hacia falta para que la mayuscula se leyera, a
   14px sobra y solo ensancha la caja. Diez caracteres a .14em son
   19,6px de puro tracking; a .08em son 11,2px. */
.hz-badge { letter-spacing: .08em !important; }

/* y la cabecera del KPI puede envolver · con el cuerpo nuevo, titulo
   e insignia no siempre entran en una linea. Envolver es preferible a
   recortar: la insignia baja a su propia linea y no se pierde nada.
   El titulo empuja, la insignia cede. */
.hz-kpi-head { flex-wrap: wrap !important; row-gap: 6px !important; }
.hz-kpi-head .hz-badge { flex: 0 0 auto !important; }

/* ── C3 · LA FRANJA DE ESTADO ─────────────────────────────────
   Era el texto mas chico de la pagina (8.5 y 9.5px) y dice el
   estado de la sesion: si no se lee, no cumple su unico trabajo.
   Es el mismo argumento por el que FinOps subio su pastilla de
   sincronia a 14. */
.hz-strip {
  font-size: var(--t-label) !important;
  font-weight: 700 !important;
  letter-spacing: var(--tr-label) !important;
  line-height: 1.3 !important;
}
.hz-strip small {
  font-size: var(--t-dense) !important;
  letter-spacing: .04em !important;
}
.hz-strip button { font-size: var(--t-dense) !important; }

/* ── C4 · EL HERO ES EL TITULO DE LA PAGINA ───────────────────
   Sube el bloque entero, no solo la cifra: si la cifra crece y su
   contexto se queda, el hero se desequilibra.

   La cifra al display, la frase que la cierra al paso siguiente
   —exactamente el reparto de FinOps entre "$55" y "left this
   month."— y la prosa al paso de tarjeta. */
.hz-hero-headline .hz-num {
  font-size: var(--t-display) !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
  line-height: var(--lh-display) !important;
}
.hz-hero-headline em {
  font-size: var(--t-page) !important;
  font-weight: 800 !important;
  font-style: normal !important;
  letter-spacing: -.025em !important;
  line-height: var(--lh-display) !important;
}
.hz-hero-greeting {
  font-size: var(--t-card) !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}
.hz-hero-greeting b { font-weight: 700 !important; }

/* el veredicto es la lectura del hero, no un pie */
.hz-verdict {
  font-size: var(--t-card) !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}

/* las senales del pie del hero van al cuerpo de lectura */
.hz-hero-signals,
.hz-hero-signals span,
.hz-hero-signals small {
  font-size: var(--t-body) !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
}

/* ── C5 · LA BARRA DE UTILIDAD ────────────────────────────────
   Presencia, estado y ultimo sync. El manual exige el last-sync
   visible en toda vista: no puede vivir a 9px. */
.hz-utility { font-size: var(--t-dense) !important; }
.hz-utility :where(b, small, span, button) { font-size: var(--t-dense) !important; }
.hz-period,
.hz-period b { font-size: var(--t-dense) !important; font-weight: 700 !important; }
.hz-clock b {
  font-size: var(--t-dense) !important;
  font-weight: 700 !important;
}
/* insignia grafica dentro de circulo fijo · misma excepcion que FinOps */
.hz-viewers > span { font-size: 11px !important; letter-spacing: 0 !important; }
.hz-viewers small { font-size: var(--t-dense) !important; }

/* ── C6 · LA BARRA DE CONTROL ─────────────────────────────────
   Se usa para operar el tablero. Los selects renderizaban a 11px,
   el mismo defecto que FinOps corrigio en su seccion 15. */
.hz-control-title small { font-size: var(--t-dense) !important; font-weight: 500 !important; }

.hz-switchbar button {
  font-size: var(--t-label) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: var(--tr-label) !important;
}
.hz-switchbar button.is-active { font-weight: 700 !important; }

.hz-field select,
.hz-field select option,
.hz-input,
.hz-select,
.hz-formfield :is(input, select, textarea) {
  font-size: var(--t-dense) !important;
}
.hz-reset { font-size: var(--t-dense) !important; font-weight: 700 !important; }

/* ── C7 · LA CIFRA MANDA · proporcion etiqueta:cifra 3,3 : 1 ──
   Toda cifra: peso 800, tracking negativo, interlineado 1. */
.hz-num {
  font-size: var(--t-data) !important;
  letter-spacing: -.025em !important;
  line-height: var(--lh-display) !important;
}
.hz-num-card {
  font-size: 26px !important;
  letter-spacing: -.015em !important;
  line-height: 1.15 !important;
}
.hz-num-inline {
  font-size: 20px !important;
  letter-spacing: -.02em !important;
  line-height: 1.15 !important;
}
.hz-num, .hz-num-card, .hz-num-inline { font-weight: 800 !important; }

/* el sufijo de la cifra sigue siendo relativo: escala con ella */
.hz-num small,
.hz-num-card small,
.hz-num-inline small { font-size: .5em !important; }

/* el pie y el delta del KPI son el contexto de la cifra */
.hz-kpi-foot,
.hz-kpi-foot span { font-size: var(--t-dense) !important; }

/* el pie del KPI tambien envuelve · MEDIDO en Insights: a 14px el pie
   pedia 233px dentro de 202, y el flex apretaba el rotulo de destino
   ("FinOps") de 68px a 36 — o sea que recortaba justo lo que dice
   adonde lleva el click.

   horizon-pages.css ya declara la intencion correcta: «nowrap arriba a
   proposito: si falta lugar se parte el texto de la izquierda del pie,
   nunca el rotulo del destino». Lo que faltaba era permitirselo — el
   texto de la izquierda no podia encoger por el piso de min-content
   que traen los hijos de flex. */
.hz-kpi-foot {
  flex-wrap: wrap !important;
  row-gap: 6px !important;
  align-items: flex-start !important;
}
.hz-kpi-foot > :first-child { flex: 1 1 auto !important; min-width: 0 !important; }
.hz-kpi-go { flex: 0 0 auto !important; }
.hz-kpi-delta,
.hz-kpi-delta span {
  font-size: var(--t-dense) !important;
  font-weight: 600 !important;
}

/* ── C8 · LA TABLA ────────────────────────────────────────────
   Dos reglas heredadas de FinOps:

   1. Ninguna cabecera puede ser mas chica que su contenido. Estaban
      a 9.5px contra celdas de 12: jerarquia invertida.
   2. La primera columna es la IDENTIDAD de la fila, no dato denso:
      sube un paso y toma el peso maximo.

   El tracking de la cabecera baja de .14em a .08em: a 9.5px hacia
   falta ese aire, a 16 solo ensancha la columna. */
.hz-table thead th {
  font-size: var(--t-body) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  white-space: nowrap !important;
}
.hz-table tbody td {
  font-size: var(--t-dense) !important;
  font-weight: 500 !important;
  line-height: var(--lh-dense) !important;
}
.hz-table tbody td b { font-weight: 700 !important; }

/* cifras: un paso por encima del texto denso, y tabulares por
   contenedor para que las columnas no bailen al actualizarse */
.hz-table { font-variant-numeric: tabular-nums; }
.hz-table tbody td.hz-tabular,
.hz-table tbody .hz-tabular {
  font-size: var(--t-body) !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

/* ── C9 · TITULOS DE TARJETA · 18 / 600 / SIN caps ────────────
   Son frases, no etiquetas. La mayuscula ahi cuesta comprension
   sin dar jerarquia — es la regla explicita de FinOps. */
.hz-panel-head > h3,
.hz-subcard > h3 {
  font-size: var(--t-card) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: -.005em !important;
  line-height: var(--lh-card) !important;
}

/* ── C10 · PROSA, ESTADOS Y CONTROLES ─────────────────────────
   La bajada de panel es texto descriptivo: cuerpo denso.
   .hz-lede dentro de .hz-policy si es lectura: cuerpo de lectura. */
.hz-lede { font-size: var(--t-dense) !important; font-weight: 500 !important; line-height: var(--lh-dense) !important; }
.hz-policy .hz-lede { font-size: var(--t-body) !important; line-height: var(--lh-body) !important; }

.hz-meta,
.hz-subcard-foot,
.hz-state { font-size: var(--t-dense) !important; }

/* la pastilla de estado no encoge · MEDIDO: "Medium" pedia 66px dentro
   de 61 porque el flex la comprimia por debajo de su contenido. Una
   pastilla recortada deja de nombrar el estado, que es su unico
   trabajo. */
.hz-state { flex: 0 0 auto !important; white-space: nowrap !important; }

.hz-btn,
.hz-btn.is-sm,
.hz-pill,
.hz-pill em,
.hz-toast { font-size: var(--t-dense) !important; }

.hz-empty,
.hz-empty * {
  font-size: var(--t-dense) !important;
  line-height: var(--lh-dense) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}


/* ============================================================
   D · CLASES PROPIAS DE USERS
   ============================================================ */

.filter-bar p { font-size: var(--t-dense) !important; }

/* la celda de persona · identidad de fila, igual que la columna
   SOURCE de la tabla de budgets: nombre 16/800, segunda linea 16/500 */
.u-name { font-size: var(--t-body) !important; font-weight: 800 !important; line-height: 1.35 !important; }
.u-mail { font-size: var(--t-body) !important; font-weight: 500 !important; line-height: 1.35 !important; }
/* insignia grafica en circulo fijo */
.u-avatar { font-size: 11px !important; }

/* el score es la cifra de la fila */
.u-score b { font-size: var(--t-body) !important; font-weight: 700 !important; }

/* la tarjeta de equipo · el nombre es un NOMBRE DE CATEGORIA, no una
   frase: entra en caps trackeadas, igual que los titulos de
   SYSTEMS LOAD en FinOps (14 / 600 / .06em) */
.team-name {
  font-size: var(--t-dense) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  line-height: 1.25 !important;
}
.team-meta { font-size: var(--t-dense) !important; font-weight: 700 !important; }

/* la cabecera de la tarjeta de equipo envuelve, igual que la del KPI ·
   MEDIDO: "Marketing" + su insignia pedian 280px dentro de 275. */
.team-head { flex-wrap: wrap !important; row-gap: 6px !important; }
.team-foot,
.team-foot small {
  font-size: var(--t-label) !important;
  font-weight: 700 !important;
  letter-spacing: var(--tr-label) !important;
}
.team-stack .u-avatar,
.team-stack .more { font-size: 11px !important; }


/* ============================================================
   E · CLASES PROPIAS DE INSIGHTS
   ============================================================ */

/* el titulo del insight es una FRASE · 18 / 600 / sin caps.
   Estaba en caps a 13px: el peor de los dos mundos — chico para
   leerse y en mayuscula, que a esa medida cuesta comprension. */
.ins-title {
  font-size: var(--t-card) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: -.005em !important;
  line-height: var(--lh-card) !important;
}

.ins-rank { font-size: var(--t-dense) !important; font-weight: 800 !important; }
.ins-conf {
  font-size: var(--t-label) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: var(--tr-label) !important;
}
.ins-body { font-size: var(--t-dense) !important; font-weight: 500 !important; line-height: var(--lh-dense) !important; }

/* la cifra de impacto y su rotulo · el patron de tres niveles:
   rotulo 14 en caps -> cifra 20 peso 800 -> contexto 14 */
.ins-impact b {
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  line-height: 1.15 !important;
}
.ins-impact span {
  font-size: var(--t-label) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: var(--tr-label) !important;
}

/* la evidencia desplegada SI es texto de lectura: cuerpo de lectura */
.ev-read,
.ev-why {
  font-size: var(--t-body) !important;
  line-height: var(--lh-body) !important;
}
.ev-ttl {
  font-size: var(--t-label) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: var(--tr-label) !important;
}

/* texto dentro del SVG · va en unidades de viewBox y escala con el
   dibujo, asi que el numero del CSS no es el que aterriza en
   pantalla. Calibrado contra la escala real del grafico. */
.chart .axis { font-size: 13px !important; font-weight: 600 !important; }
.chart .lg {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .10em !important;
}


/* ============================================================
   F · PISO DE 14px · barrido final
   ------------------------------------------------------------
   Lo que no cayo en ninguna regla nombrada. Va acotado a los
   contenedores de prosa y estado —nunca a los que llevan cifras
   grandes— porque un piso global arrastra hacia abajo los titulos
   cuyo texto vive en un span interno. Es la leccion que FinOps
   documenta en su seccion 3bis tras probar cuatro variantes.
   ============================================================ */
.hz-page :is(.hz-strip, .hz-control, .hz-kpi-foot, .hz-panel-head,
             .hz-subcard-foot, .hz-policy, .filter-bar, .team-foot)
  :where(p, span, small, b, strong, em, li, a, time, label):not([class*="hz-num"]) {
  font-size: var(--t-dense);
}

/* seguro de envoltura · subir el cuerpo agranda cada bloque de
   texto, y en columnas angostas eso desborda la caja. min-width:0
   desarma el piso de min-content que traen los hijos de flex/grid. */
.hz-page :where(p, span, div, td, li) {
  min-width: 0;
  overflow-wrap: break-word;
}

/* cifras tabulares por contenedor · Poppins trae cifras
   proporcionales y las columnas bailan al actualizarse */
.hz-kpi,
.hz-table,
.hz-subcard,
.hz-utility,
.ins-impact { font-variant-numeric: tabular-nums; }

/* la cifra del hero NO va tabular: la figura tabular le da al punto
   decimal el ancho de un digito y abre un hueco visible */
.hz-hero-headline { font-variant-numeric: normal; }