:root {
  --font-sans: "Poppins", system-ui, -apple-system, sans-serif;
  --font-mono: "Poppins", system-ui, -apple-system, sans-serif;
  --hz-ink: #0A1E46;
  --hz-ink-2: #24365C;
  --hz-ink-3: #3A4A66;
  --hz-ink-4: #55668A;
  --hz-blue: #2450E4;
  --hz-sky: #58A9F4;
  --hz-orange: #F97435;
  --hz-ok: #1FA95C;
  --hz-warn: #F59E0B;
  --hz-bad: #E5484D;
  --hz-ok-ink: #127A45;
  --hz-warn-ink: #A05F02;
  --hz-bad-ink: #C4272C;
  --hz-surface: #FFFFFF;
  --hz-sunken: #EAF0FB;
  --hz-line: #DCE4F5;
  --hz-line-soft: #E9EEF9;
  --hz-r-card: 16px;
  --hz-r-input: 10px;
  --hz-r-tag: 8px;
  --hz-r-pill: 999px;
  --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);
}

* { box-sizing: border-box; }
button, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.score-page .sidebar { z-index: 30; }
.score-page { overflow-x: hidden; scrollbar-color: #7DA9DA #EAF0FB; scrollbar-width: thin; }

.score-main {
  grid-column: 2;
  width: 100%;
  height: auto;
  min-height: 100vh;
  min-width: 0;
  overflow: visible;
  color: var(--hz-ink);
  background: #F4F7FB;

  /* Al colapsar, el header pierde ~150px de alto y el scroll anchoring
     del navegador compensaba restandoselos al scroll: te tiraba para
     atras justo al cruzar el umbral y el header volvia a expandirse.
     Mismo apagado que en .hz-page (horizon-pages.css). */
  overflow-anchor: none;
}

.score-page::-webkit-scrollbar { width: 10px; }
.score-page::-webkit-scrollbar-track { background: #EAF0FB; }
.score-page::-webkit-scrollbar-thumb { background: #7DA9DA; border: 3px solid #EAF0FB; border-radius: var(--hz-r-pill); }

.score-hero {
  position: relative;
  min-height: 214px;
  overflow: hidden;
  border-bottom: 1px solid rgba(180, 204, 231, .76);
  background-color: #D9EBFB;
  background-image: url("../img/hrzn-header-coast.png");
  background-repeat: no-repeat;
  background-position: center 79%;
  background-size: cover;
}

.score-hero__veil {
  position: absolute;
  inset: 0;
  background: rgba(239, 247, 255, .58);
}

.score-hero::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 34px;
  background: rgba(244, 247, 251, .84);
  mask-image: linear-gradient(transparent, #000);
  pointer-events: none;
}

.score-hero__copy {
  position: relative;
  z-index: 2;
  width: min(650px, 54%);
  padding: 24px 32px 31px;
}

.score-kicker,
.score-eyebrow,
.score-section-head small,
.score-trend small,
.score-units small,
.score-breakdown small,
.score-guide small {
  color: var(--hz-ink-3);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.score-hero__copy h1 {
  margin: 7px 0 0;
  color: var(--hz-ink);
  font-size: 40px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.015em;
}

.score-hero__copy > p:not(.score-kicker) {
  max-width: 610px;
  margin: 8px 0 0;
  color: var(--hz-ink);
  font-size: 16px;
  font-weight: 500;
}

.score-hero__signals {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 18px;
  color: var(--hz-ink-3);
  font-size: 14px;
  font-weight: 700;
}

.score-hero__signals span { display: inline-flex; align-items: center; gap: 7px; }
.score-hero__signals span + span { position: relative; }
.score-hero__signals span + span::before { content: ""; position: absolute; left: -10px; width: 1px; height: 14px; background: rgba(85, 102, 138, .34); }
.score-hero__signals i { width: 8px; height: 8px; background: var(--hz-ok); border-radius: 50%; box-shadow: 0 0 0 5px rgba(31,169,92,.12); }
.score-hero__signals b { color: var(--hz-warn-ink); }

.score-utility {
  position: absolute;
  z-index: 4;
  top: 18px;
  right: 24px;
  display: flex;
  min-height: 51px;
  align-items: center;
  gap: 13px;
  padding: 0 14px;
  color: var(--hz-ink-2);
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(220,228,245,.92);
  border-radius: var(--hz-r-card);
  box-shadow: var(--hz-sh-deep);
  font-size: 14px;
  font-weight: 700;
}

.score-utility > i { width: 1px; height: 23px; background: var(--hz-line); }
.score-viewers { display: flex; align-items: center; }
.score-viewers span { display: grid; width: 25px; height: 25px; place-items: center; margin-left: -6px; color: #fff; background: var(--hz-blue); border: 2px solid #fff; border-radius: 50%; font-size: 10.5px; font-weight: 700; }
.score-viewers span:first-child { margin-left: 0; }
.score-viewers small { margin-left: 8px; color: var(--hz-ink-3); font-size: 14px; white-space: nowrap; }
.score-live, .score-sync { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.score-live em { width: 7px; height: 7px; background: var(--hz-ok); border-radius: 50%; box-shadow: 0 0 0 5px rgba(31,169,92,.10); }
.score-period { min-height: 34px; padding: 0 9px; color: var(--hz-ink); background: transparent; border: 0; border-radius: var(--hz-r-input); font-size: 14px; font-weight: 700; cursor: pointer; }
.score-period:hover { background: var(--hz-sunken); }
.score-clock { display: grid; justify-items: end; gap: 2px; white-space: nowrap; }
.score-clock b { color: var(--hz-ink); font-family: var(--font-mono); font-size: 16px; font-variant-numeric: tabular-nums; }
.score-clock small { color: var(--hz-ink-3); font-family: var(--font-mono); font-size: 14px; letter-spacing: .10em; }

.score-config-link {
  position: absolute;
  z-index: 4;
  right: 24px;
  bottom: 36px;
  display: flex;
  min-height: 39px;
  align-items: center;
  gap: 12px;
  padding: 0 15px;
  color: var(--hz-blue);
  background: #fff;
  border: 1px solid #BED0E8;
  border-radius: var(--hz-r-input);
  box-shadow: var(--hz-sh-hair);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.score-config-link:hover { box-shadow: var(--hz-sh-soft); }

.score-content {
  display: grid;
  gap: 15px;
  padding: 18px 24px 96px;
}

.score-overview,
.score-explorer,
.score-breakdown,
.score-principles {
  background: var(--hz-surface);
  border: 1px solid var(--hz-line);
  border-radius: var(--hz-r-card);
  box-shadow: var(--hz-sh-hair);
}

.score-section-head,
.score-explorer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--hz-line-soft);
}

.score-section-head h2,
.score-explorer__header h2,
.score-breakdown h2,
.score-principles > header h2 {
  margin: 5px 0 0;
  color: var(--hz-ink);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.score-section-head p:not(.score-eyebrow),
.score-explorer__header p:not(.score-eyebrow),
.score-breakdown header > p:not(.score-eyebrow) {
  margin: 5px 0 0;
  color: var(--hz-ink);
  font-size: 16px;
  font-weight: 500;
}

.score-reliability-key { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 14px; color: var(--hz-ink-3); font-size: 14px; font-weight: 700; }
.score-reliability-key span { display: flex; align-items: center; gap: 6px; }
.score-reliability-key i { width: 8px; height: 8px; border-radius: 50%; }
.score-reliability-key .is-good { background: var(--hz-ok); }
.score-reliability-key .is-watch { background: var(--hz-warn); }
.score-reliability-key .is-unknown { background: #7B879D; }

.score-subject-grid {
  display: grid;
  grid-template-columns: 1.02fr 1.12fr 1.12fr .94fr;
  gap: 1px;
  background: var(--hz-line-soft);
}

.score-subject { position: relative; min-width: 0; background: #fff; --score-edge: var(--hz-blue); }
.score-subject.is-selected { z-index: 2; }
.score-subject__button { width: 100%; padding: 17px; color: inherit; background: transparent; border: 0; text-align: left; cursor: pointer; }
.score-subject__button > header { display: grid; grid-template-columns: 35px minmax(min-content,1fr) minmax(0,auto); grid-template-rows: auto auto; align-items: center; gap: 2px 9px; }
.score-subject__button > header > .score-subject__mark { grid-area: 1 / 1 / 3 / 2; }
.score-subject__button > header > div { display: contents; }
.score-subject__button > header small { grid-area: 1 / 2 / 2 / 3; }
.score-subject__button > header > em { grid-area: 1 / 3 / 2 / 4; justify-self: end; }
.score-subject__button > header h3 { grid-area: 2 / 2 / 3 / 4; margin: 0; }
.score-subject__mark { display: grid; width: 35px; height: 35px; place-items: center; color: var(--hz-blue); background: #EDF4FF; border-radius: var(--hz-r-input); font-size: 15px; font-weight: 800; }
.score-subject__button header small { display: block; color: var(--hz-ink-3); font-family: var(--font-mono); font-size: 14px; font-weight: 700; letter-spacing: .12em; }
.score-subject__button h3,
.score-component-detail h3,
.score-trend h3,
.score-units h3,
.score-principles h3 {
  margin: 3px 0 0;
  color: var(--hz-ink);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.score-subject__button header em { display: flex; min-width: 0; align-items: center; gap: 5px; color: var(--hz-ink-3); font-size: 14px; font-style: normal; font-weight: 700; line-height: 1.3; }
.score-subject__button header em i { flex: none; width: 7px; height: 7px; border-radius: 50%; }
.score-subject.is-medium,
.score-subject.is-watch { --score-edge: var(--hz-orange); }
.score-subject.is-medium header em i { background: var(--hz-warn); }
.score-subject.is-watch header em i { background: var(--hz-warn); }
.score-subject.is-building header em i { background: #7B879D; }

.score-subject__value { display: flex; align-items: baseline; gap: 7px; margin-top: 14px; }
.score-subject__value strong { color: var(--hz-ink); font-size: 40px; font-weight: 800; letter-spacing: -.015em; line-height: 1; font-variant-numeric: tabular-nums; }
.score-subject__value span { color: var(--hz-ink-3); font-size: 14px; font-weight: 700; }
.score-subject.is-building .score-subject__value strong { font-size: 26px; }
.score-subject__button > p { margin: 8px 0 0; color: var(--hz-ink-2); font-size: 14px; font-weight: 500; line-height: 1.5; }
.score-subject__button > p b { color: var(--hz-ink); font-weight: 700; }

.score-coverage { display: grid; gap: 6px; margin-top: 12px; }
.score-coverage > span { display: block; height: 7px; overflow: hidden; background: var(--hz-sunken); border-radius: var(--hz-r-pill); }
.score-coverage > span i { display: block; height: 100%; background: var(--hz-ok); border-radius: inherit; }
.score-coverage small { color: var(--hz-ink-3); font-size: 14px; font-weight: 600; }
.score-coverage small b { color: var(--hz-ink-2); }
.score-building-track { position: relative; height: 7px; margin-top: 12px; overflow: hidden; background: var(--hz-sunken); border-radius: var(--hz-r-pill); }
.score-building-track span { display: block; width: 42%; height: 100%; background: var(--hz-blue); border-radius: inherit; }

.score-subject__button > footer { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--hz-line-soft); color: var(--hz-ink-3); font-size: 14px; font-weight: 600; }
.score-subject__button > footer b { flex: none; margin-left: auto; color: var(--hz-blue); font-size: 14px; white-space: nowrap; }

.score-trust-banner {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  align-items: center;
  gap: 13px;
  min-height: 68px;
  padding: 11px 15px;
  background: #FFF9EF;
  border: 1px solid #E8D6AD;
  border-left: 4px solid var(--hz-warn);
  border-radius: var(--hz-r-card);
  box-shadow: var(--hz-sh-hair);
}
.score-trust-icon { display: grid; width: 42px; height: 42px; place-items: center; color: var(--hz-warn-ink); background: #FFF4D9; border-radius: var(--hz-r-input); font-family: var(--font-mono); font-size: 16px; font-weight: 700; }
.score-trust-banner strong { color: var(--hz-ink); font-size: 16px; }
.score-trust-banner p { margin: 3px 0 0; color: var(--hz-ink-2); font-size: 14px; font-weight: 500; }
.score-trust-banner button { min-height: 34px; padding: 0 11px; color: var(--hz-warn-ink); background: transparent; border: 1px solid #D9BE83; border-radius: var(--hz-r-input); font-size: 14px; font-weight: 700; cursor: pointer; }
.score-trust-banner button:hover { background: #FFF3D6; }

.score-detail-layout { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 15px; align-items: start; }
.score-explorer { overflow: hidden; }
.score-controls { display: flex; align-items: center; gap: 9px; }
.score-segment { display: flex; gap: 2px; padding: 3px; background: var(--hz-sunken); border: 1px solid var(--hz-line); border-radius: var(--hz-r-pill); }
.score-segment button { min-height: 29px; padding: 0 12px; color: var(--hz-ink-3); background: transparent; border: 0; border-radius: var(--hz-r-pill); font-family: var(--font-mono); font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.score-segment button.is-active { color: #fff; background: var(--hz-blue); }
.score-select { display: grid; grid-template-columns: auto auto; align-items: center; gap: 7px; }
.score-select span { color: var(--hz-ink-3); font-family: var(--font-mono); font-size: 14px; font-weight: 700; letter-spacing: .12em; }
.score-select select { min-height: 36px; padding: 0 28px 0 10px; color: var(--hz-ink); background: #fff; border: 1px solid #C7D4E8; border-radius: var(--hz-r-input); font-size: 14px; font-weight: 700; }

.score-comparability { padding: 9px 17px; color: var(--hz-ok-ink); background: #F1FAF5; border-bottom: 1px solid #CEE8DA; font-size: 14px; font-weight: 500; }
.score-comparability.is-warning { color: var(--hz-warn-ink); background: #FFF9EF; border-color: #E8D6AD; }
.score-comparability.is-unknown { color: var(--hz-ink-2); background: #F4F6FA; border-color: var(--hz-line); }

.score-trend { padding: 15px 17px 10px; border-bottom: 1px solid var(--hz-line-soft); }
.score-trend > header, .score-units > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.score-trend-key { display: flex; gap: 13px; color: var(--hz-ink-3); font-size: 14px; font-weight: 600; }
.score-trend-key span { display: flex; align-items: center; gap: 5px; }
/* El swatch de "Score" lleva la rampa completa del chartplotter
   —los mismos cinco hex y offsets que js/score.js le da al trazo—
   porque una muestra azul plana ya no describe la linea. El de
   "Provisional" va punteado, igual que su tramo en el grafico. */
.score-trend-key i {
  width: 22px;
  height: 3px;
  border-radius: var(--hz-r-pill);
  background: linear-gradient(90deg, #0A1E46 0%, #2450E4 25%, #58A9F4 54%, #F69C7E 58%, #F05A28 100%);
}
.score-trend-key span:last-child i {
  background: repeating-linear-gradient(90deg, var(--hz-orange) 0 5px, transparent 5px 10px);
  border-radius: 0;
}
.score-chart-wrap { position: relative; height: 226px; margin-top: 8px; }
#scoreChart { display: block; width: 100%; height: 100%; outline: 0; border-radius: var(--hz-r-input); }
#scoreChart:focus-visible { box-shadow: inset 0 0 0 3px rgba(36,80,228,.20); }
.score-chart-tooltip { position: absolute; z-index: 4; min-width: 126px; padding: 8px 9px; color: #fff; background: #08234D; border-radius: var(--hz-r-tag); box-shadow: var(--hz-sh-soft); font-size: 14px; font-weight: 600; pointer-events: none; transform: translate(-50%, -115%); }
.score-chart-tooltip b { display: block; margin-bottom: 2px; font-size: 14px; }

.score-units { padding: 15px 17px 17px; }
.score-units > header > span { color: var(--hz-ink-3); font-size: 14px; font-weight: 700; }
.score-table-wrap { margin-top: 11px; overflow-x: auto; border: 1px solid var(--hz-line); border-radius: var(--hz-r-input); }
.score-units table { width: 100%; border-collapse: collapse; min-width: 690px; }
.score-units th { padding: 9px 10px; color: var(--hz-ink-3); background: #F6F8FC; border-bottom: 1px solid var(--hz-line); font-family: var(--font-mono); font-size: 14px; font-weight: 700; letter-spacing: .12em; text-align: left; text-transform: uppercase; }
.score-units td { padding: 11px 10px; color: var(--hz-ink); border-bottom: 1px solid var(--hz-line-soft); font-size: 14px; font-weight: 400; vertical-align: middle; }
.score-units tr:last-child td { border-bottom: 0; }
.score-units tbody tr { cursor: pointer; }
.score-units tbody tr:hover, .score-units tbody tr.is-selected { background: #F4F8FF; }
.score-unit-name { display: grid; gap: 3px; }
.score-unit-name strong { font-size: 14px; }
.score-unit-name small { color: var(--hz-ink-3); font-family: var(--font-sans); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.score-unit-reading { font-size: 26px; font-weight: 800; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.score-unit-reading.is-absent { font-size: 14px; font-weight: 700; }
.score-unit-coverage { min-width: 128px; }
.score-unit-coverage span { display: block; height: 6px; overflow: hidden; background: var(--hz-sunken); border-radius: var(--hz-r-pill); }
.score-unit-coverage i { display: block; height: 100%; background: var(--hz-ok); border-radius: inherit; }
/* la barra sigue el mismo estado que la columna STATUS de la fila --
   ver coverageMarkup() en score.js, que le pone esta misma clase. */
.score-unit-coverage i.is-watch { background: var(--hz-warn); }
.score-unit-coverage i.is-bad { background: var(--hz-bad); }
.score-unit-coverage i.is-unknown { background: #7B879D; }
.score-unit-coverage small { display: block; margin-top: 4px; color: var(--hz-ink-3); font-family: var(--font-sans); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.score-status { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.score-status i { width: 8px; height: 8px; border-radius: 50%; }
.score-status.is-good { color: var(--hz-ok-ink); }
.score-status.is-good i { background: var(--hz-ok); }
.score-status.is-watch { color: var(--hz-warn-ink); }
.score-status.is-watch i { background: var(--hz-warn); }
.score-status.is-bad { color: var(--hz-bad-ink); }
.score-status.is-bad i { background: var(--hz-bad); }
.score-status.is-unknown { color: var(--hz-ink-3); }
.score-status.is-unknown i { background: #7B879D; }
.score-table-open { width: 30px; height: 30px; color: var(--hz-blue); background: #F0F5FF; border: 0; border-radius: var(--hz-r-tag); cursor: pointer; }

.score-breakdown { position: sticky; top: 15px; overflow: hidden; }
.score-breakdown > header { padding: 17px; border-bottom: 1px solid var(--hz-line-soft); }
.score-breakdown__score { display: flex; align-items: end; justify-content: space-between; gap: 12px; padding: 17px 17px 10px; }
.score-breakdown__score > strong { color: var(--hz-ink); font-size: 40px; font-weight: 800; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.score-breakdown__score > span { display: flex; align-items: center; gap: 6px; color: var(--hz-ok-ink); font-size: 14px; font-weight: 700; }
.score-breakdown__score > span i { width: 8px; height: 8px; background: var(--hz-ok); border-radius: 50%; }
.score-breakdown__score > span.is-watch { color: var(--hz-warn-ink); }
.score-breakdown__score > span.is-watch i { background: var(--hz-warn); }
.score-breakdown__score > span.is-bad { color: var(--hz-bad-ink); }
.score-breakdown__score > span.is-bad i { background: var(--hz-bad); }
.score-breakdown__score > span.is-unknown { color: var(--hz-ink-3); }
.score-breakdown__score > span.is-unknown i { background: #7B879D; }

.score-breakdown__coverage { padding: 0 17px 14px; }
.score-breakdown__coverage > span { display: block; height: 7px; overflow: hidden; background: var(--hz-sunken); border-radius: var(--hz-r-pill); }
.score-breakdown__coverage i { display: block; height: 100%; background: var(--hz-ok); border-radius: inherit; }
.score-breakdown__coverage p { margin: 6px 0 0; color: var(--hz-ink-3); font-size: 14px; font-weight: 500; }
.score-breakdown__coverage b { color: var(--hz-ink-2); }

.score-formula { display: grid; grid-template-columns: 14px minmax(0,1fr); align-items: baseline; gap: 9px 10px; margin: 0 17px; padding: 12px 14px; background: var(--hz-sunken); border-radius: var(--hz-r-input); }
.score-formula > div:nth-of-type(1) { grid-area: 1 / 2; }
.score-formula > span:nth-of-type(1) { grid-area: 2 / 1; }
.score-formula > div:nth-of-type(2) { grid-area: 2 / 2; }
.score-formula > span:nth-of-type(2) { grid-area: 3 / 1; }
.score-formula > div:nth-of-type(3) { grid-area: 3 / 2; }
.score-formula div { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 10px; }
.score-formula small { min-width: 0; color: var(--hz-ink-3); font-size: 14px; line-height: 1.25; }
.score-formula strong { color: var(--hz-ink); font-size: 26px; font-weight: 800; letter-spacing: -.015em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.score-formula > span { color: var(--hz-ink-4); font-size: 16px; font-weight: 700; text-align: center; }

.score-component-detail { margin: 13px 17px 0; padding: 12px; border: 1px solid var(--hz-line); border-radius: var(--hz-r-input); }
.score-component-detail header { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 8px; }
.score-component-detail header small { grid-column: 1; }
.score-component-detail header h3 { grid-column: 1; }
.score-component-detail header span { grid-column: 2; grid-row: 1 / 3; display: flex; align-items: center; gap: 5px; color: var(--hz-ok-ink); font-size: 14px; font-weight: 700; }
.score-component-detail header span i { width: 7px; height: 7px; background: var(--hz-ok); border-radius: 50%; }
.score-component-detail dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 13px; margin: 12px 0 0; }
.score-component-detail dl div { padding-top: 8px; border-top: 1px solid var(--hz-line-soft); }
.score-component-detail dt { color: var(--hz-ink-3); font-size: 14px; font-weight: 600; }
.score-component-detail dd { margin: 3px 0 0; color: var(--hz-ink); font-size: 14px; font-weight: 700; }
.score-counterfactual { margin: 13px 17px 0; padding: 11px 12px; background: #F7FAFE; border-left: 3px solid var(--hz-blue); border-radius: var(--hz-r-input); }
.score-counterfactual strong { display: block; margin-top: 4px; color: var(--hz-ink-2); font-size: 14px; line-height: 1.45; }
.score-breakdown-cta { display: flex; width: calc(100% - 34px); min-height: 39px; align-items: center; justify-content: center; gap: 9px; margin: 14px 17px 17px; color: #fff; background: var(--hz-blue); border: 0; border-radius: var(--hz-r-input); box-shadow: var(--hz-sh-soft); font-size: 14px; font-weight: 700; cursor: pointer; }

.score-principles { padding: 17px; }
.score-principles > header { margin-bottom: 12px; }
.score-principles > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 11px; }
.score-principles article { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 3px 10px; padding: 12px; background: #F8FAFD; border: 1px solid var(--hz-line-soft); border-radius: var(--hz-r-input); }
.score-principles article > span { grid-row: 1 / 3; display: grid; width: 34px; height: 34px; place-items: center; color: var(--hz-blue); background: #EDF4FF; border-radius: var(--hz-r-tag); font-family: var(--font-mono); font-size: 14px; font-weight: 700; }
.score-principles article p { margin: 4px 0 0; color: var(--hz-ink-2); font-size: 14px; font-weight: 500; line-height: 1.45; }

.score-guide { position: fixed; right: 24px; bottom: 24px; z-index: 80; display: grid; justify-items: end; pointer-events: none; }
.score-guide__launcher { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 10px; min-width: 230px; min-height: 62px; padding: 9px; color: #fff; background: #031A3B; border: 1px solid rgba(151,199,255,.48); border-radius: var(--hz-r-card); box-shadow: var(--hz-sh-deep); cursor: pointer; pointer-events: auto; }
.score-guide__launcher > span, .score-guide__panel header > span { display: grid; width: 42px; height: 42px; place-items: center; color: #fff; background: var(--hz-blue); border-radius: var(--hz-r-input); font-size: 22px; font-weight: 800; }
.score-guide__launcher div { display: grid; gap: 1px; text-align: left; }
.score-guide__launcher small { color: #A9C3E6; font-size: 14px; }
.score-guide__launcher strong { color: #fff; font-size: 16px; }
.score-guide__launcher em { color: #CBDCF1; font-size: 14px; font-style: normal; }
.score-guide__launcher > i { display: grid; width: 24px; height: 24px; place-items: center; color: #fff; background: var(--hz-blue); border-radius: 50%; font-size: 11px; font-style: normal; font-weight: 700; }
.score-guide__panel { position: absolute; right: 0; bottom: calc(100% + 12px); width: min(390px, calc(100vw - 32px)); padding: 14px; color: #fff; background: #031A3B; border: 1px solid rgba(151,199,255,.38); border-radius: var(--hz-r-card); box-shadow: var(--hz-sh-deep); opacity: 0; visibility: hidden; transform: translateY(10px) scale(.97); transform-origin: 92% 100%; pointer-events: none; transition: opacity .2s ease, transform .2s ease, visibility .2s ease; }
.score-guide.is-open .score-guide__panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; }
.score-guide__panel header { display: grid; grid-template-columns: 36px minmax(0,1fr) 30px; align-items: center; gap: 9px; padding-bottom: 11px; border-bottom: 1px solid rgba(255,255,255,.12); }
.score-guide__panel header > span { width: 36px; height: 36px; font-size: 16px; }
.score-guide__panel header div { display: grid; gap: 2px; }
.score-guide__panel header small { color: #A9C3E6; font-size: 14px; }
.score-guide__panel header strong { font-size: 16px; }
.score-guide__panel header button { width: 30px; height: 30px; color: #D2E1F4; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.10); border-radius: var(--hz-r-input); font-size: 22px; cursor: pointer; }
.score-guide__panel > p { margin: 13px 0; color: #E2ECF8; font-size: 14px; font-weight: 500; line-height: 1.55; }
.score-guide__panel > div { display: grid; gap: 7px; }
.score-guide__panel > div button { min-height: 34px; padding: 0 10px; color: #D8E8FA; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--hz-r-input); font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
.score-guide__panel > div button:hover { background: rgba(255,255,255,.11); }
.score-guide__panel > a { display: flex; min-height: 38px; align-items: center; justify-content: center; gap: 8px; margin-top: 11px; color: #fff; background: var(--hz-blue); border-radius: var(--hz-r-input); font-size: 14px; font-weight: 700; text-decoration: none; }

.score-toast { position: fixed; z-index: 100; right: 24px; bottom: 100px; max-width: 360px; padding: 11px 13px; color: var(--hz-ink); background: #fff; border: 1px solid var(--hz-line); border-radius: var(--hz-r-input); box-shadow: var(--hz-sh-soft); font-size: 14px; font-weight: 600; }

.score-page button:focus-visible,
.score-page a:focus-visible,
.score-page select:focus-visible,
.score-page tr:focus-visible {
  outline: 3px solid rgba(88,169,244,.62);
  outline-offset: 2px;
}

@media (max-width: 1280px) {
  .score-utility .score-sync, .score-utility .score-clock { display: none; }
  .score-subject-grid { grid-template-columns: repeat(2,1fr); gap: 1px; }
  .score-detail-layout { grid-template-columns: minmax(0,1fr) 300px; }
}

@media (max-width: 1040px) {
  .score-hero__copy { width: 62%; }
  .score-utility { top: 15px; right: 16px; }
  .score-utility .score-viewers small, .score-utility > i:nth-of-type(2) { display: none; }
  .score-detail-layout { grid-template-columns: 1fr; }
  .score-breakdown { position: static; }
  .score-principles > div { grid-template-columns: 1fr; }
}

@media (max-width: 880px) {
  .score-main { grid-column: 1 / -1; height: auto; min-height: 100vh; overflow: visible; }
  .score-hero { min-height: 260px; }
  .score-hero__copy { width: 100%; padding: 78px 20px 26px; }
  .score-utility { left: 16px; right: 16px; justify-content: flex-end; min-height: 46px; }
  .score-utility .score-viewers, .score-utility > i, .score-config-link { display: none; }
  .score-content { padding: 14px 14px 90px; }
}

@media (max-width: 680px) {
  .score-section-head, .score-explorer__header { align-items: flex-start; flex-direction: column; }
  .score-reliability-key { justify-content: flex-start; }
  .score-subject-grid { grid-template-columns: 1fr; }
  .score-subject__button { min-height: 0; }
  .score-trust-banner { grid-template-columns: 40px minmax(0,1fr); }
  .score-trust-banner button { grid-column: 1 / -1; }
  .score-controls { width: 100%; align-items: stretch; flex-direction: column; }
  .score-segment { justify-content: stretch; }
  .score-segment button { flex: 1; }
  .score-select { justify-content: space-between; }
  .score-guide { right: 14px; bottom: 14px; }
  .score-guide__launcher { grid-template-columns: 46px; min-width: 0; width: 58px; height: 58px; padding: 6px; }
  .score-guide__launcher > span { width: 46px; height: 46px; }
  .score-guide__launcher div, .score-guide__launcher > i { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/* ============================================================
   HORIZON 2050 · FINOPS VISUAL HIERARCHY
   Same typography, density and state language as the FinOps cockpit.
   ============================================================ */

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

.score-page,
.score-page button,
.score-page select,
.score-page input,
.score-page textarea,
.score-page code,
.score-page kbd,
.score-page samp {
  font-family: var(--font-sans);
}

.score-page .brand,
.score-page .side-link { text-decoration: none; }

.score-page .side-bottom small {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.score-page .score-overview,
.score-page .score-explorer,
.score-page .score-breakdown,
.score-page .score-principles,
.score-page .score-trust-banner,
.score-page .score-subject,
.score-page .score-table-wrap {
  box-shadow: var(--hz-sh-hair);
}

.score-page .score-config-link:hover,
.score-page .score-table-open:hover {
  box-shadow: var(--hz-sh-soft);
}

.score-page .score-subject:hover {
  box-shadow: inset 4px 0 var(--score-edge), var(--hz-sh-soft);
}

.score-hero {
  min-height: 194px;
  background-position: center 72%;
}

.score-hero__veil { background: rgba(239, 247, 255, .48); }

.score-hero__copy {
  width: min(720px, 58%);
  padding: 24px 38px 28px;
}

.score-hero__copy h1 {
  margin-top: 6px;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -.025em;
}

.score-hero__copy > p:not(.score-kicker) {
  margin-top: 7px;
  font-size: 18px;
  line-height: 1.45;
}

.score-kicker,
.score-eyebrow,
.score-section-head small,
.score-trend small,
.score-units small,
.score-breakdown small,
.score-guide small {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .14em;
}

.score-hero__signals {
  gap: 9px 20px;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
}

.score-utility {
  top: 16px;
  right: 28px;
  min-height: 46px;
  gap: 12px;
  padding-inline: 14px;
  font-size: 14px;
  box-shadow: var(--hz-sh-deep);
}

.score-viewers small,
.score-period { font-size: 14px; }
.score-clock b { font-family: var(--font-sans); font-size: 18px; }
.score-clock small { font-family: var(--font-sans); font-size: 14px; font-weight: 500; }
.score-config-link { right: 28px; bottom: 24px; min-height: 40px; font-size: 14px; }

.score-content {
  gap: 18px;
  padding: 20px 28px 104px;
}

.score-section-head,
.score-explorer__header { padding: 18px 20px; }

.score-section-head h2,
.score-explorer__header h2,
.score-breakdown h2,
.score-principles > header h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .06em;
}

.score-section-head p:not(.score-eyebrow),
.score-explorer__header p:not(.score-eyebrow),
.score-breakdown header > p:not(.score-eyebrow) {
  font-size: 16px;
  line-height: 1.5;
}

.score-reliability-key { gap: 16px; font-size: 14px; }
.score-reliability-key i { width: 9px; height: 9px; }

.score-subject-grid {
  gap: 12px;
  padding: 12px;
  background: #F5F8FD;
}

.score-subject {
  overflow: hidden;
  border: 1px solid var(--hz-line);
  border-radius: var(--hz-r-card);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.score-subject:hover { transform: translateY(-2px); }
.score-subject__button { min-height: 0; padding: 20px; }
.score-subject__button > header { grid-template-columns: 40px minmax(min-content,1fr) minmax(0,auto); }
.score-subject__mark { width: 40px; height: 40px; font-size: 17px; }
.score-subject__button header small { font-family: var(--font-sans); font-size: 14px; font-weight: 500; }
.score-subject__button h3,
.score-component-detail h3,
.score-trend h3,
.score-units h3,
.score-principles h3 { font-size: 16px; }
.score-subject__button header em { font-size: 14px; }
.score-subject__button header em i { width: 8px; height: 8px; }

.score-subject__value { margin-top: 14px; }
.score-subject__value strong { font-size: 40px; color: #081B3E; }
.score-subject__value span { font-size: 14px; }
.score-subject.is-building .score-subject__value strong { font-size: 26px; }
.score-subject__button > p { font-size: 14px; line-height: 1.5; }
.score-coverage small { font-size: 14px; }
.score-coverage small b { font-weight: 800; }
.score-subject__button > footer { margin-top: 12px; padding-top: 12px; font-size: 14px; }
.score-subject__button > footer b { font-size: 14px; font-weight: 800; }

.score-trust-banner { min-height: 78px; padding: 13px 17px; }
.score-trust-banner strong { font-size: 16px; }
.score-trust-banner p { font-size: 14px; line-height: 1.45; }
.score-trust-banner button { min-height: 38px; font-size: 14px; }

.score-detail-layout { grid-template-columns: minmax(0,1fr) 370px; gap: 18px; }
.score-segment button { height: 32px; min-height: 32px; font-family: var(--font-sans); font-size: 14px; font-weight: 500; letter-spacing: .14em; line-height: 1; }
.score-select span { font-family: var(--font-sans); font-size: 14px; font-weight: 700; letter-spacing: .14em; }
.score-select select { min-height: 38px; font-size: 14px; }
.score-comparability { padding: 11px 20px; font-size: 14px; line-height: 1.45; }
.score-trend { padding: 17px 20px 12px; }
.score-trend-key { font-size: 14px; }
.score-chart-wrap { height: 238px; }
.score-chart-tooltip { font-size: 14px; }
.score-chart-tooltip b { font-size: 16px; }

.score-units { padding: 17px 20px 20px; }
.score-units > header > span { font-size: 14px; }
.score-units th { padding: 11px 12px; font-family: var(--font-sans); font-size: 16px; font-weight: 700; letter-spacing: .08em; }
.score-units td { padding: 13px 12px; font-size: 16px; font-weight: 600; }
.score-unit-name strong { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.score-unit-name small { font-size: 14px; }
.score-unit-reading { font-size: 26px; }
.score-unit-reading.is-absent { font-size: 14px; }
.score-unit-coverage small { font-size: 14px; }
.score-status { font-size: 14px; }
.score-table-open { width: 34px; height: 34px; font-size: 18px; }

.score-breakdown { top: 18px; }
.score-breakdown > header { padding: 19px; }
.score-breakdown__score { padding: 19px 19px 11px; }
.score-breakdown__score > strong { font-size: 40px; color: #081B3E; }
.score-breakdown__score > span { font-size: 14px; }
.score-breakdown__coverage { padding: 0 19px 16px; }
.score-breakdown__coverage p { font-size: 14px; }
.score-formula { margin-inline: 19px; padding: 13px 15px; }
.score-formula small { font-family: var(--font-sans); font-size: 14px; font-weight: 500; }
.score-formula strong { font-size: 26px; }
.score-component-detail { margin: 15px 19px 0; padding: 14px; }
.score-component-detail dt,
.score-component-detail dd { font-size: 14px; }
.score-component-detail header > span { font-size: 14px; }
.score-counterfactual { margin-inline: 19px; padding: 13px; }
.score-counterfactual strong { font-size: 14px; line-height: 1.5; }
.score-breakdown-cta { width: auto; min-height: 44px; margin: 15px 19px 19px; font-size: 14px; }

.score-principles > header { padding: 18px 20px; }
.score-principles > div { gap: 12px; padding: 12px; }
.score-principles article { padding: 16px; }
.score-principles article > span { font-family: var(--font-sans); font-size: 14px; font-weight: 600; }
.score-principles article p { font-size: 14px; line-height: 1.55; }

.score-guide__launcher { min-width: 248px; min-height: 64px; }
.score-guide__launcher div strong { font-size: 16px; }
.score-guide__launcher div em { font-size: 14px; }
.score-guide__panel > p { font-size: 14px; }
.score-guide__panel > div button,
.score-guide__panel > a { font-size: 14px; }
.score-toast { font-size: 14px; }

@media (max-width: 1320px) {
  .score-detail-layout { grid-template-columns: minmax(0,1fr) 330px; }
  .score-subject-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 880px) {
  .score-hero { min-height: 270px; }
  .score-hero__copy { padding: 78px 20px 28px; }
  .score-hero__copy h1 { font-size: 40px; }
  .score-content { padding: 16px 14px 92px; }
}

@media (max-width: 680px) {
  .score-subject-grid { grid-template-columns: 1fr; padding: 8px; }
  .score-subject__button { min-height: 0; }
  .score-subject__value strong { font-size: 40px; }
}

/* ============================================================
   LIVE SCORE ENGINE · signal feed + temporal scan
   ============================================================ */

.score-live-rail {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  min-height: 66px;
  align-items: center;
  gap: 15px;
  padding: 11px 16px;
  overflow: hidden;
  color: var(--hz-ink);
  background: #fff;
  border: 1px solid #C9D9F0;
  border-radius: var(--hz-r-card);
  box-shadow: var(--hz-sh-hair);
}

.score-live-rail::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--hz-blue) 0%, var(--hz-blue) 58%, var(--hz-orange) 100%);
  transform: scaleX(0);
  transform-origin: left;
  animation: score-feed-course 5.2s linear infinite;
}

.score-live-rail.is-updating { animation: score-feed-detected .5s ease-out both; }

.score-live-rail__source {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-right: 15px;
  border-right: 1px solid var(--hz-line);
}

.score-live-rail__source > span {
  position: relative;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  background: #EAF3FF;
  border-radius: var(--hz-r-input);
}

.score-live-rail__source > span::before,
.score-live-rail__source > span::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(36,80,228,.34);
  border-radius: 50%;
  animation: score-sonar 2.4s ease-out infinite;
}

.score-live-rail__source > span::before { inset: 8px; }
.score-live-rail__source > span::after { inset: 3px; animation-delay: .8s; }
.score-live-rail__source i { width: 8px; height: 8px; background: var(--hz-blue); border-radius: 50%; }
.score-live-rail__source small { color: var(--hz-ink-3); font-size: 14px; font-weight: 600; letter-spacing: .12em; white-space: nowrap; }
.score-live-rail__copy { display: grid; min-width: 0; gap: 2px; }
.score-live-rail__copy strong { overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.score-live-rail__copy span { overflow: hidden; color: var(--hz-ink-2); font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.score-live-rail__meta { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.score-live-rail__meta span { display: flex; align-items: center; gap: 6px; color: var(--hz-ok-ink); font-size: 14px; font-weight: 700; }
.score-live-rail__meta span i { width: 8px; height: 8px; background: var(--hz-ok); border-radius: 50%; }
.score-live-rail__meta span.is-watch { color: var(--hz-warn-ink); }
.score-live-rail__meta span.is-watch i { background: var(--hz-warn); }
.score-live-rail__meta span.is-bad { color: var(--hz-bad-ink); }
.score-live-rail__meta span.is-bad i { background: var(--hz-bad); }
.score-live-rail__meta time { color: var(--hz-ink-4); font-size: 14px; font-weight: 600; }

.score-subject.is-live-detected {
  animation: score-card-detected .72s ease-out;
}

.score-subject.is-live-detected::after {
  content: "";
  position: absolute;
  top: 16px;
  right: 16px;
  width: 9px;
  height: 9px;
  background: var(--hz-blue);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(36,80,228,.14);
}

.score-live-detection {
  display: grid;
  grid-template-columns: 124px minmax(0,1fr) auto;
  min-height: 58px;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
  padding: 9px 12px;
  color: var(--hz-ink);
  background: #F5F9FF;
  border: 1px solid #C9D9F0;
  border-left: 4px solid var(--hz-blue);
  border-radius: var(--hz-r-input);
}

.score-live-detection.is-provisional { border-left-color: var(--hz-orange); }
.score-live-detection.is-detected { animation: score-panel-detected .45s ease-out both; }
.score-live-detection__mode { display: flex; align-items: center; gap: 7px; color: var(--hz-blue); font-size: 14px; font-weight: 700; letter-spacing: .11em; }
.score-live-detection__mode b { font: inherit; letter-spacing: inherit; }
.score-live-detection__mode i { width: 8px; height: 8px; background: var(--hz-blue); border-radius: 50%; box-shadow: 0 0 0 5px rgba(36,80,228,.12); }
.score-live-detection.has-selection { background: linear-gradient(100deg,#EDF5FF,#fff 46%); }
.score-live-detection > div:not(.score-live-detection__value) { display: grid; min-width: 0; gap: 2px; }
.score-live-detection > div > strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.score-live-detection > div > small { color: var(--hz-ink-3); font-size: 14px; font-weight: 500; }
.score-live-detection__value { display: grid; min-width: 78px; justify-items: end; gap: 1px; }
.score-live-detection__value strong { color: var(--hz-ink); font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.score-live-detection__value span { color: var(--hz-ok-ink); font-size: 14px; font-weight: 700; }
.score-live-detection.is-provisional .score-live-detection__mode,
.score-live-detection.is-provisional .score-live-detection__value span { color: var(--hz-warn-ink); }
.score-live-detection.is-provisional .score-live-detection__mode i { background: var(--hz-orange); box-shadow: 0 0 0 5px rgba(249,116,53,.13); }

.score-sync b { transition: color .18s ease; }
.score-sync.is-syncing b { color: var(--hz-blue); }
.score-sync.is-syncing::before { content: ""; width: 7px; height: 7px; background: var(--hz-blue); border-radius: 50%; animation: score-sync-pulse .8s ease-in-out infinite; }

@keyframes score-feed-course { to { transform: scaleX(1); } }
/* EL DESTELLO DE "RECALCULANDO" YA NO TOCA EL FONDO.
   ------------------------------------------------------------
   Estas animaciones iban de un azul claro a #fff. Como las tarjetas
   llevan tinte de estado, al recalcular perdian el tinte por medio
   segundo y volvian: el estado parpadeaba a blanco. El tinte dice si
   la tarjeta esta healthy, needs context o needs attention -- es
   informacion, y una animacion de actividad no puede pisarla.

   Se les saca SOLO la propiedad background. Donde habia un
   desplazamiento vertical se conserva, asi que el gesto de actividad
   sigue estando, pero como movimiento y no como cambio de color.

   Las reglas que declaran estas animaciones NO se tocan, y las que se
   quedan sin ninguna propiedad se dejan VACIAS en vez de borrarse:
   horizon-dark-ai.css pisa unicamente el animation-name con su
   variante -dark y hereda de aca la duracion y el easing. Si se
   borrara el shorthand, el tema oscuro se quedaria en duracion 0 y sus
   animaciones dejarian de correr. */
@keyframes score-feed-detected { }
@keyframes score-sonar { 0% { opacity: .8; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.55); } }
@keyframes score-card-detected { 0% { transform: translateY(-2px); } 100% { transform: translateY(0); } }
@keyframes score-panel-detected { 0% { background: #E7F3FF; transform: translateY(2px); } 100% { background: #F5F9FF; transform: translateY(0); } }
@keyframes score-sync-pulse { 50% { opacity: .35; transform: scale(.78); } }

@media (max-width: 760px) {
  .score-live-rail { grid-template-columns: auto minmax(0,1fr); }
  .score-live-rail__meta { grid-column: 2; justify-content: space-between; }
  .score-live-detection { grid-template-columns: 1fr auto; }
  .score-live-detection__mode { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .score-live-rail::after,
  .score-live-rail.is-updating,
  .score-live-rail__source > span::before,
  .score-live-rail__source > span::after,
  .score-subject.is-live-detected,
  .score-live-detection.is-detected,
  .score-sync.is-syncing::before { animation: none !important; }
}

/* ============================================================
   ACTIONABLE SCORE · one protagonist, one briefing, one workflow
   ============================================================ */

.score-live-rail {
  grid-template-columns: auto minmax(0,1fr) auto auto;
}
.score-live-rail.is-paused::after { animation-play-state: paused; opacity: .35; }
.score-live-rail__copy > span { display: flex; align-items: center; gap: 9px; min-width: 0; }
.score-live-rail__copy > span b {
  flex: none;
  padding: 4px 6px;
  color: var(--hz-blue);
  background: #EDF3FF;
  border-radius: var(--hz-r-tag);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
}
.score-live-rail__copy > span strong { overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.score-live-rail__copy > em { overflow: hidden; color: var(--hz-ink-2); font-size: 14px; font-style: normal; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.score-live-rail__actions { display: flex; gap: 6px; }
.score-live-rail__actions button {
  min-height: 34px;
  padding: 0 11px;
  color: var(--hz-blue);
  background: #F0F5FF;
  border: 1px solid #C8D8F0;
  border-radius: var(--hz-r-input);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.score-live-rail__actions button:first-child { color: #fff; background: var(--hz-blue); border-color: var(--hz-blue); }
.score-live-rail__actions button:hover { box-shadow: var(--hz-sh-soft); }

.score-executive-brief {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--hz-line);
  border-radius: var(--hz-r-card);
  box-shadow: var(--hz-sh-hair);
}
.score-executive-brief__mark { display: grid; width: 42px; height: 42px; place-items: center; color: #082A59; font-size: 17.5px; font-weight: 800; }
.score-executive-brief h2 { margin: 4px 0 0; color: var(--hz-ink); font-size: 18px; font-weight: 700; line-height: 1.35; }
.score-executive-brief > div > p:last-child { margin: 4px 0 0; color: var(--hz-ink-2); font-size: 14px; font-weight: 500; }
.score-executive-brief__states { display: grid; gap: 5px; }
.score-executive-brief__states span { display: flex; align-items: center; gap: 6px; color: var(--hz-ok-ink); font-size: 14px; font-weight: 700; white-space: nowrap; }
.score-executive-brief__states span i { width: 7px; height: 7px; background: var(--hz-ok); border-radius: 50%; }
.score-executive-brief__states span.is-watch { color: var(--hz-warn-ink); }
.score-executive-brief__states span.is-watch i { background: var(--hz-warn); }
.score-executive-brief > a { display: flex; min-height: 38px; align-items: center; gap: 9px; padding: 0 12px; color: var(--hz-blue); background: #F0F5FF; border-radius: var(--hz-r-input); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }

.score-subject-grid { grid-template-columns: 1.42fr repeat(3,minmax(0,1fr)); }
.score-subject[data-subject="ai"] .score-subject__value strong { font-size: 48px; }
.score-subject:not([data-subject="ai"]) .score-subject__value strong { font-size: 40px; }
.score-subject:not([data-subject="ai"]) .score-subject__button { padding-inline: 16px; }

.score-trend-tools { display: flex; align-items: center; gap: 12px; }
.score-provisional-chip {
  display: flex;
  min-height: 30px;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  color: var(--hz-warn-ink);
  background: #FFF8EA;
  border: 1px solid #E5C98F;
  border-radius: var(--hz-r-pill);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.score-provisional-chip i { width: 7px; height: 7px; background: var(--hz-warn); border-radius: 50%; }

.score-table-tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.score-table-tools > span { margin-right: 4px; color: var(--hz-ink-3); font-size: 14px; font-weight: 600; }
.score-table-tools > button { display: flex; min-height: 34px; align-items: center; gap: 6px; padding: 0 10px; color: var(--hz-bad-ink); background: #FFF4F4; border: 1px solid #F0C9CB; border-radius: var(--hz-r-input); font-size: 14px; font-weight: 700; cursor: pointer; }
.score-table-tools > button i { width: 7px; height: 7px; background: var(--hz-bad); border-radius: 50%; }
.score-table-tools > button.is-active { color: #fff; background: var(--hz-bad); border-color: var(--hz-bad); }
.score-table-tools label { display: flex; align-items: center; gap: 6px; }
.score-table-tools label > span { color: var(--hz-ink-3); font-size: 14px; font-weight: 600; letter-spacing: .09em; }
.score-table-tools select { min-height: 34px; padding: 0 26px 0 9px; color: var(--hz-ink); background: #fff; border: 1px solid #C7D4E8; border-radius: var(--hz-r-input); font-size: 14px; font-weight: 600; }
.score-delta { display: inline-flex; align-items: center; gap: 3px; color: var(--hz-ok-ink); font-size: 14px; font-weight: 700; }
.score-delta.is-down { color: var(--hz-bad-ink); }
.score-delta.is-none { color: var(--hz-ink-4); }
.score-table-open { width: auto; min-width: 58px; padding: 0 10px; font-size: 14px; font-weight: 700; }
.score-units tbody tr.is-scanned { background: #EAF4FF; box-shadow: inset 4px 0 var(--hz-blue); }
.score-units th:last-child,
.score-units td:last-child { width: 90px; min-width: 90px; padding-right: 16px; text-align: right; }
.score-table-open {
  min-width: 68px;
  min-height: 36px;
  color: #164EDF;
  background: #F4F7FF;
  border: 1px solid #CAD8F3;
  box-shadow: 0 2px 5px rgba(8, 27, 62, .05);
  transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.score-units tbody tr:hover .score-table-open {
  color: #0A3CC7;
  background: #FFFFFF;
  border-color: #8FAEEA;
  box-shadow: 0 5px 12px rgba(36, 80, 228, .13);
}
.score-units tbody tr.is-selected .score-table-open,
.score-units tbody tr.is-scanned .score-table-open {
  color: #FFFFFF;
  background: var(--hz-blue);
  border-color: var(--hz-blue);
  box-shadow: 0 6px 14px rgba(36, 80, 228, .24);
}
.score-table-open:hover { transform: translateY(-1px); }
.score-table-open:focus-visible { outline: 3px solid rgba(36, 80, 228, .22); outline-offset: 2px; }
.score-breakdown.is-live-update { animation: score-breakdown-detected .52s ease-out both; }
@keyframes score-breakdown-detected { 0% { transform: translateY(2px); } 100% { transform: translateY(0); } }

@media (max-width: 1450px) {
  .score-live-rail { grid-template-columns: auto minmax(0,1fr) auto; }
  .score-live-rail__actions { grid-column: 2 / -1; justify-content: flex-end; }
  .score-executive-brief { grid-template-columns: 42px minmax(0,1fr) auto; }
  .score-executive-brief > a { grid-column: 2 / -1; justify-self: end; }
}
@media (max-width: 1320px) {
  .score-subject-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .score-subject[data-subject="ai"] { grid-column: 1 / -1; }
  .score-table-tools { align-items: flex-end; flex-direction: column; }
  .score-trend-tools { align-items: flex-end; flex-direction: column-reverse; }
}
@media (max-width: 760px) {
  .score-live-rail { grid-template-columns: auto minmax(0,1fr); }
  .score-live-rail__actions { grid-column: 1 / -1; }
  .score-executive-brief { grid-template-columns: 42px minmax(0,1fr); }
  .score-executive-brief__states,
  .score-executive-brief > a { grid-column: 1 / -1; }
  .score-trend-tools { width: 100%; align-items: flex-start; }
  .score-table-tools { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .score-breakdown.is-live-update { animation: none !important; }
}

/* ============================================================
   FOLLOW LIVE · one signal travels through the entire workspace
   ============================================================ */

.score-live-rail__actions { align-items: center; }
.score-follow-state {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
  color: var(--hz-ok-ink);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.score-follow-state i { width: 7px; height: 7px; background: var(--hz-ok); border-radius: 50%; box-shadow: 0 0 0 4px rgba(31,169,92,.10); animation: score-follow-pulse 2s ease-out infinite; }
.score-live-rail.is-paused .score-follow-state { color: #64748B; }
.score-live-rail.is-paused .score-follow-state i { background: #94A3B8; box-shadow: none; animation: none; }
.score-feed-queue { padding: 5px 7px; color: var(--hz-warn-ink); background: #FFF7E8; border: 1px solid #E9CE97; border-radius: var(--hz-r-pill); font-size: 14px; font-weight: 700; white-space: nowrap; }

.score-subject.is-recalculating::before {
  content: attr(data-live-state);
  position: absolute;
  z-index: 4;
  top: 12px;
  left: 12px;
  padding: 5px 7px;
  color: #fff;
  background: var(--hz-blue);
  border-radius: var(--hz-r-tag);
  box-shadow: var(--hz-sh-soft);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.score-subject.is-recalculating .score-subject__value strong { animation: score-number-catch .68s ease-out; }
.score-units tbody tr.is-live-target { background: #EAF4FF; box-shadow: inset 4px 0 var(--hz-blue); animation: score-row-signal 1.15s ease-out; }
.score-guide__launcher.is-proactive { position: relative; animation: score-guide-nudge .72s ease-out; }
/* La burbuja del contador: tinta oscura sobre el naranja, no blanca.
   En reposo el relleno es --hz-blue y el blanco encima da 6.28:1, que
   pasa. Al pasar a is-proactive el relleno cambia a --hz-orange y el
   MISMO blanco cae a 2.77:1 -- el peor contraste de la app, y en
   tipografia de 9px. El relleno se queda (el naranja es lo que avisa);
   el texto pasa a #351601, 5.98:1, mismo matiz mas oscuro.
   Mismo criterio que las bandas de score-config.css. */
.score-guide__launcher.is-proactive > i { color: #351601; background: var(--hz-orange); box-shadow: 0 0 0 5px rgba(249,116,53,.16); }
.score-guide__launcher.is-proactive::before { content: "Signal ready"; position: absolute; right: 10px; top: -23px; padding: 5px 7px; color: var(--hz-ink); background: #fff; border: 1px solid var(--hz-line); border-radius: 7px; box-shadow: var(--hz-sh-soft); font-size: 14px; font-weight: 700; }

@keyframes score-follow-pulse { 70% { box-shadow: 0 0 0 9px rgba(31,169,92,0); } }
@keyframes score-number-catch { from { opacity: .35; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes score-row-signal { 0% { background: #D9EDFF; } 100% { background: #EAF4FF; } }
@keyframes score-guide-nudge { 35% { transform: translateX(-7px); } 70% { transform: translateX(2px); } }

@media (max-width: 980px) {
  .score-follow-state { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .score-follow-state i,.score-subject.is-recalculating .score-subject__value strong,.score-units tbody tr.is-live-target,.score-guide__launcher.is-proactive { animation: none !important; }
}

/* ============================================================
   FINOPS CARD COLOR CONTRACT
   Navigation stays blue; health and risk use the FinOps tints.
   ============================================================ */

.score-live-rail,
.score-executive-brief {
  border-color: var(--hz-card-blue-border);
  background: var(--hz-card-blue-bg);
  box-shadow: var(--hz-card-state-shadow);
}

.score-subject {
  border-color: var(--hz-card-blue-border);
  background: var(--hz-card-blue-bg);
  box-shadow: var(--hz-card-state-shadow);
}

.score-subject.is-medium,
.score-subject.is-watch {
  border-color: var(--hz-card-orange-border);
  background: var(--hz-card-orange-bg);
}

.score-subject.is-building {
  border-color: var(--hz-card-neutral-border);
  background: var(--hz-card-neutral-bg);
}

.score-breakdown {
  border-color: var(--hz-card-green-border);
  background: var(--hz-card-green-bg);
  box-shadow: var(--hz-card-state-shadow);
}

.score-breakdown.is-watch {
  border-color: var(--hz-card-orange-border);
  background: var(--hz-card-orange-bg);
}

.score-breakdown.is-bad {
  border-color: var(--hz-card-red-border);
  background: var(--hz-card-red-bg);
}

.score-breakdown.is-unknown {
  border-color: var(--hz-card-neutral-border);
  background: var(--hz-card-neutral-bg);
}

.score-component-detail {
  border-color: var(--hz-card-green-border);
  background: var(--hz-card-green-bg);
}

.score-component-detail.is-absent {
  border-color: var(--hz-card-neutral-border);
  background: var(--hz-card-neutral-bg);
}

.score-principles article {
  border-color: var(--hz-card-blue-border);
  background: var(--hz-card-blue-bg);
  box-shadow: var(--hz-card-state-shadow);
}

/* ============================================================
   EL AMBAR DEL HERO, SOLO EN SCORE
   ------------------------------------------------------------
   Mismo caso que ya se resolvio en Settings y que aca no llegaba:
   score.html NO carga hrzn-scale.css, donde vive el override de
   #settingsMain. Su stack es el anterior -- cloudbeach,
   2050-shell y esta hoja --, asi que el fix tiene que estar aca.

   MEDIDO sobre el lavado del hero (#D9EBFB, que ademas lleva
   hrzn-header-coast.png debajo, asi que el fondo real es peor):

                  blanco   lavado del hero   su tinte al 12%
     #A05F02       5.08         4.17 X            4.63
     #8A5202       6.39         5.20              5.82

   El que fallaba es .score-hero__signals b -- "3 provisional
   days" --, pero la variable la leen otros once selectores de
   esta hoja: el banner de confianza, los estados is-watch, la
   cola del feed. Ninguno empeora. #8A5202 es el MISMO matiz 35.3
   un escalon mas oscuro, y pasa en las tres superficies.

   Va bajo #scoreMain y no en :root porque score-config.html
   carga esta misma hoja y cuelga de #scoreConfigMain. Sus
   insignias son otro problema -- blanco sobre relleno saturado,
   3.05 y 3.91 -- y se arregla por separado.

   Solo --hz-warn-ink: ninguna hoja del stack de Score lee
   --h-warn-ink, setearlo seria codigo muerto. */
#scoreMain {
  --hz-warn-ink: #8A5202;
}


/* ---- CLAUDIO REEMPLAZA A ESTE GUIDE FLOTANTE ----------------
   Mismo rincon que .horizon-bot-shell (right:24px/bottom:20-24px):
   con los dos montados se veian dos widgets pisados. En vez de
   borrar el marcado -- del que depende el JS de la pagina para leer
   sus IDs -- se oculta por CSS. */
.score-guide { display: none !important; }

/* ---- HEADER UNIFICADO: mismo video de fondo que el resto -------
   ver el mismo comentario en adoption.css. */
/* :not(.is-collapsed) -- ver abajo: el alto extra es solo del estado
   abierto, la barra compacta la dimensiona el componente. */
#hdHeader:not(.is-collapsed) {
  min-height: 214px;
}
#hdHeader:not(.is-collapsed)::after {
  content: "";
  position: absolute;
  right: 0; bottom: 0; left: 0;
  height: 34px;
  background: rgba(244, 247, 251, .84);
  mask-image: linear-gradient(transparent, #000);
  pointer-events: none;
}