.score-config-main { background: #F4F7FB; }

.score-config-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 154px;
  align-items: center;
  gap: 24px;
  padding: 22px 30px;
  overflow: hidden;
  background-color: #DCEBFA;
  background-image: url("../img/hrzn-header-coast.png");
  background-position: center 78%;
  background-size: cover;
  border-bottom: 1px solid #C7D9EC;
}
.score-config-hero::before { content: ""; position: absolute; inset: 0; background: rgba(241,248,255,.72); }
.score-config-hero > * { position: relative; z-index: 1; }
.score-config-hero h1 { margin: 7px 0 0; color: var(--hz-ink); font-size: 40px; font-weight: 800; letter-spacing: -.015em; }
.score-config-hero > div:first-child > p:last-child { margin: 7px 0 0; color: var(--hz-ink); font-size: 16px; font-weight: 500; }
.score-config-hero > a { position: absolute; right: 30px; bottom: 18px; color: var(--hz-blue); font-size: 14px; font-weight: 700; text-decoration: none; }
.score-config-access { display: grid; justify-items: end; gap: 4px; margin-bottom: 34px; }
.score-config-access span { display: flex; align-items: center; gap: 7px; color: var(--hz-ok-ink); font-size: 14px; font-weight: 700; }
.score-config-access span i { width: 8px; height: 8px; background: var(--hz-ok); border-radius: 50%; }
.score-config-access small { color: var(--hz-ink-3); font-size: 14px; font-weight: 600; }

/* nota de acceso -- vivia en el header viejo (score-config-hero), que
   se retiro con el header unificado. No es uno de los 9 slots fijos
   asi que no vuelve a la cabecera; se muda a una linea chica arriba
   del contenido para no perder la info. */
.score-config-access-note { display: flex; align-items: center; gap: 8px; margin: 2px 4px 0; color: var(--hz-ok-ink); font-size: 14px; font-weight: 600; }
.score-config-access-note i { flex: none; width: 7px; height: 7px; background: var(--hz-ok); border-radius: 50%; }

.score-config-content { display: grid; gap: 13px; padding: 15px 22px 86px; }
.score-config-warning { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 11px 14px; background: #F4F8FF; border: 1px solid #BFD2EC; border-left: 4px solid var(--hz-blue); border-radius: var(--hz-r-card); box-shadow: var(--hz-sh-hair); }
.score-config-warning > span { display: grid; width: 40px; height: 40px; place-items: center; color: var(--hz-blue); background: #E5EEFF; border-radius: var(--hz-r-input); font-family: var(--font-mono); font-size: 14px; font-weight: 700; }
.score-config-warning strong { color: var(--hz-ink); font-size: 14px; }
.score-config-warning p { margin: 3px 0 0; color: var(--hz-ink-2); font-size: 14px; font-weight: 500; }
.score-config-warning > b { color: var(--hz-blue); font-family: var(--font-mono); font-size: 14px; letter-spacing: .08em; }

.score-config-tabs { display: flex; gap: 2px; padding: 4px; overflow-x: auto; background: #fff; border: 1px solid var(--hz-line); border-radius: var(--hz-r-card); box-shadow: var(--hz-sh-hair); }
.score-config-tabs button { min-height: 38px; flex: 1 0 auto; padding: 0 18px; color: var(--hz-ink-3); background: transparent; border: 0; border-radius: var(--hz-r-input); font-family: var(--font-mono); font-size: 14px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase; cursor: pointer; }
.score-config-tabs button.is-active { color: #fff; background: var(--hz-blue); }

.score-config-view { min-width: 0; }
.score-config-view[hidden] { display: none !important; }
.score-config-layout { display: grid; grid-template-columns: 245px minmax(0,1fr) 260px; gap: 13px; align-items: start; }
.score-metric-list, .score-recipe-editor, .score-validation-panel, .score-config-view:not([data-config-view="recipes"]) { background: #fff; border: 1px solid var(--hz-line); border-radius: var(--hz-r-card); box-shadow: var(--hz-sh-hair); }

.score-metric-list { overflow: hidden; }
.score-metric-list > header { padding: 15px; border-bottom: 1px solid var(--hz-line-soft); }
.score-metric-list h2, .score-config-panel-head h2, .score-validation-panel h2, .score-objective-guidance h2, .score-config-modal h2 { margin: 5px 0 0; color: var(--hz-ink); font-size: 22px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.score-metric-list header > p:last-child { margin: 5px 0 0; color: var(--hz-ink); font-size: 14px; font-weight: 500; }
.score-metric-list > button { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 8px; width: 100%; min-height: 72px; align-items: center; padding: 10px 12px; color: var(--hz-ink); background: #fff; border: 0; border-bottom: 1px solid var(--hz-line-soft); text-align: left; cursor: pointer; }
.score-metric-list > button:last-child { border-bottom: 0; }
.score-metric-list > button:hover { background: #F8FAFD; }
.score-metric-list > button.is-active { background: #F0F5FF; box-shadow: inset 4px 0 var(--hz-blue); }
.score-metric-list > button:disabled { cursor: not-allowed; opacity: .78; }
.score-metric-list > button > span { grid-row: 1 / 3; display: grid; width: 34px; height: 34px; place-items: center; color: var(--hz-blue); background: #EAF1FF; border-radius: var(--hz-r-input); font-size: 14px; font-weight: 800; }
.score-metric-list button div { min-width: 0; }
.score-metric-list button strong { display: block; font-size: 14px; }
.score-metric-list button small { display: block; margin-top: 3px; color: var(--hz-ink-3); font-size: 14px; font-weight: 500; line-height: 1.4; }
.score-metric-list button em { grid-column: 2; display: flex; align-items: center; gap: 5px; color: var(--hz-ok-ink); font-size: 14px; font-style: normal; font-weight: 700; }
.score-metric-list button em i { width: 6px; height: 6px; background: var(--hz-ok); border-radius: 50%; }
.score-metric-list button:nth-of-type(3) em { color: var(--hz-warn-ink); }
.score-metric-list button:nth-of-type(3) em i { background: var(--hz-warn); }
.score-metric-list button:nth-of-type(4) em { color: var(--hz-ink-3); }
.score-metric-list button:nth-of-type(4) em i { background: #7B879D; }

.score-recipe-editor { overflow: hidden; }
.score-config-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 17px; border-bottom: 1px solid var(--hz-line-soft); }
.score-config-panel-head > div > p:last-child { margin: 5px 0 0; color: var(--hz-ink); font-size: 16px; font-weight: 500; }
.score-range-preview { display: grid; min-width: 132px; justify-items: end; gap: 2px; }
.score-range-preview small { color: var(--hz-ink-3); font-family: var(--font-mono); font-size: 14px; font-weight: 700; letter-spacing: .12em; }
.score-range-preview strong { color: var(--hz-ink); font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.score-range-preview span { color: var(--hz-ink-3); font-size: 14px; font-weight: 600; }

.score-component-table > header, .score-component-table > article { display: grid; grid-template-columns: 82px minmax(160px,1.4fr) 86px minmax(130px,1fr) 86px; align-items: center; gap: 10px; }
.score-component-table > header { padding: 9px 13px; color: var(--hz-ink-3); background: #F7F9FC; border-bottom: 1px solid var(--hz-line); font-family: var(--font-mono); font-size: 14px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase; }
.score-component-table > article { min-height: 78px; padding: 10px 13px; border-bottom: 1px solid var(--hz-line-soft); }
.score-component-table > article:last-child { border-bottom: 0; }
.score-component-table article > div:nth-child(2) strong { display: block; color: var(--hz-ink); font-size: 14px; }
.score-component-table article > div:nth-child(2) small { display: block; margin-top: 4px; color: var(--hz-ink-3); font-size: 14px; font-weight: 500; line-height: 1.35; }
.score-switch { display: grid; grid-template-columns: minmax(34px,1fr); justify-items: start; gap: 4px; cursor: pointer; }
.score-switch input { position: absolute; opacity: 0; }
.score-switch > span { position: relative; width: 34px; height: 19px; background: #B7C2D3; border-radius: var(--hz-r-pill); transition: background .18s ease; }
.score-switch > span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 13px; height: 13px; background: #fff; border-radius: 50%; box-shadow: var(--hz-sh-hair); transition: transform .18s ease; }
.score-switch input:checked + span { background: var(--hz-blue); }
.score-switch input:checked + span::after { transform: translateX(15px); }
.score-switch em { color: var(--hz-ink-3); font-size: 14px; font-style: normal; font-weight: 600; }
.score-weight { display: flex; min-height: 34px; align-items: center; overflow: hidden; border: 1px solid #C6D3E5; border-radius: var(--hz-r-input); }
.score-weight input { width: 100%; min-width: 0; padding: 0 5px 0 9px; color: var(--hz-ink); background: transparent; border: 0; outline: 0; font-family: var(--font-mono); font-size: 14px; font-weight: 700; }
.score-weight span { padding-right: 8px; color: var(--hz-ink-3); font-size: 14px; }
.score-target strong { display: block; color: var(--hz-ink); font-size: 14px; }
.score-target small { display: block; margin-top: 3px; color: var(--hz-ink-3); font-size: 14px; }
.score-impact { color: var(--hz-ok-ink); font-family: var(--font-mono); font-size: 14px; font-weight: 700; text-align: right; }
.score-component-table article.is-disabled { background: #F7F8FA; opacity: .68; }

.score-recipe-rules { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; padding: 12px; background: #F7F9FC; border-top: 1px solid var(--hz-line); }
.score-recipe-rules article { padding: 11px; background: #fff; border: 1px solid var(--hz-line); border-radius: var(--hz-r-input); }
.score-recipe-rules small { color: var(--hz-ink-3); font-family: var(--font-mono); font-size: 14px; font-weight: 700; letter-spacing: .12em; }
.score-recipe-rules h3 { margin: 4px 0 0; color: var(--hz-ink); font-size: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.score-recipe-rules p { margin: 8px 0 0; color: var(--hz-ink-2); font-size: 14px; font-weight: 500; line-height: 1.4; }
.score-band-preview { display: grid; grid-template-columns: 40fr 30fr 30fr; height: 26px; margin-top: 10px; overflow: hidden; color: #fff; border-radius: var(--hz-r-tag); font-family: var(--font-mono); font-size: 14px; font-weight: 700; }
.score-band-preview span { display: grid; place-items: center; }
/* LAS TRES BANDAS LLEVAN TINTA OSCURA, NO BLANCA.
   ------------------------------------------------------------
   El relleno de cada banda ES el color que la tarjeta esta
   previsualizando, asi que NO se puede oscurecer: dejaria de mostrar
   el color real. Lo que se cambia es el texto.

   La banda del medio ya lo hacia (#3E2A00 sobre el ambar, 6.37:1).
   Las otras dos seguian con el blanco que hereda .score-band-preview
   y no llegaban, con tipografia de 7-9px:

                              blanco   tinta oscura
     0–39    sobre #E5484D     3.91  X   #2A0405  4.80
     40–69   sobre #F59E0B      --       #3E2A00  6.37   (ya estaba)
     70–100  sobre #1FA95C     3.05  X   #052E19  4.88

   Es lo que pide hrzn-color.css:87: los tres colores de estado no
   sirven como fondo de texto blanco -- "medido sobre blanco, NINGUNO
   de los tres sirve como texto" --, y la etiqueta va en una variante
   oscura del MISMO matiz. */
.score-band-preview span:nth-child(1) { color: #2A0405; background: var(--hz-bad); }
.score-band-preview span:nth-child(2) { color: #3E2A00; background: var(--hz-warn); }
.score-band-preview span:nth-child(3) { color: #052E19; background: var(--hz-ok); }
.score-recipe-rules label { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; margin-top: 12px; }
.score-recipe-rules input[type="range"] { width: 100%; accent-color: var(--hz-blue); }
.score-recipe-rules label strong { color: var(--hz-ink); font-size: 26px; font-weight: 800; }
.score-recipe-rules dl { display: grid; gap: 6px; margin: 10px 0 0; }
.score-recipe-rules dl div { display: flex; justify-content: space-between; gap: 8px; }
.score-recipe-rules dt { color: var(--hz-ink-3); font-size: 14px; }
.score-recipe-rules dd { margin: 0; color: var(--hz-ink); font-size: 14px; font-weight: 700; }

.score-validation-panel { position: sticky; top: 13px; overflow: hidden; }
.score-validation-panel > header { display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 9px; padding: 14px; border-bottom: 1px solid var(--hz-line-soft); }
.score-validation-panel > header > span { display: grid; width: 34px; height: 34px; place-items: center; color: var(--hz-ok-ink); background: #E8F7EF; border-radius: var(--hz-r-input); font-weight: 800; }
.score-validation-panel h2 { font-size: 16px; }
#validationMessages { display: grid; gap: 1px; padding: 11px 14px; }
#validationMessages p { display: flex; align-items: center; gap: 7px; margin: 0; padding: 7px 0; color: var(--hz-ink-2); border-bottom: 1px solid var(--hz-line-soft); font-size: 14px; font-weight: 500; }
#validationMessages p i { width: 7px; height: 7px; flex: 0 0 auto; background: var(--hz-ok); border-radius: 50%; }
#validationMessages p.is-error { color: var(--hz-bad-ink); }
#validationMessages p.is-error i { background: var(--hz-bad); }
.score-validation-panel > section { margin: 0 14px; padding: 11px; background: #F5F8FD; border-left: 3px solid var(--hz-blue); border-radius: var(--hz-r-input); }
.score-validation-panel > section small { color: var(--hz-ink-3); font-family: var(--font-mono); font-size: 14px; font-weight: 700; letter-spacing: .1em; }
.score-validation-panel > section strong { display: block; margin-top: 5px; color: var(--hz-ink); font-size: 14px; }
.score-validation-panel > section p { margin: 4px 0 0; color: var(--hz-ink-2); font-size: 14px; line-height: 1.45; }
.score-validation-panel > a { display: flex; min-height: 38px; align-items: center; justify-content: center; margin: 12px 14px 14px; color: var(--hz-blue); background: #F0F5FF; border-radius: var(--hz-r-input); font-size: 14px; font-weight: 700; text-decoration: none; }

.score-config-actions { position: sticky; z-index: 20; bottom: 12px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; padding: 10px 12px; color: var(--hz-ink); background: #fff; border: 1px solid var(--hz-line); border-radius: var(--hz-r-card); box-shadow: var(--hz-sh-deep); }
.score-config-actions > div { display: grid; gap: 2px; margin-right: auto; }
.score-config-actions > div strong { font-size: 14px; }
.score-config-actions > div span { color: var(--hz-ink-3); font-size: 14px; }
.score-config-actions button, .score-new-measurement, .score-objective-table button, .score-config-modal footer button { min-height: 38px; padding: 0 14px; color: #fff; background: var(--hz-blue); border: 1px solid var(--hz-blue); border-radius: var(--hz-r-input); font-size: 14px; font-weight: 700; cursor: pointer; }
.score-config-actions button.is-secondary, .score-config-modal footer button.is-secondary { color: var(--hz-ink-2); background: transparent; border-color: #C6D3E5; }

.score-config-view:not([data-config-view="recipes"]) { overflow: hidden; }
.score-direct-change { display: flex; align-items: center; gap: 6px; color: var(--hz-bad-ink); font-size: 14px; font-weight: 700; }
.score-direct-change i { width: 8px; height: 8px; background: var(--hz-bad); border-radius: 50%; }
.score-objective-layout { display: grid; grid-template-columns: minmax(0,1fr) 285px; gap: 13px; padding: 14px; }
.score-measurement-table strong, .score-profile-grid h3, .score-wizard-fields strong { margin: 4px 0 0; color: var(--hz-ink); font-size: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
/* El "!" iba arriba del titulo porque este panel vivia en la columna angosta
   de 320px al costado de la tabla. Ahora va a lo ancho, asi que el icono pasa
   a la izquierda del titulo: mismo armado que `.score-config-warning`
   (40px minmax(0,1fr)) y que el header de `.score-validation-panel`.
   La lista arranca en la segunda columna para alinear con el titulo. */
.score-objective-guidance {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 0 12px;
  align-self: start;
  padding: 14px;
  background: #FFF8ED;
  border: 1px solid #E5CEA1;
  border-radius: var(--hz-r-card);
}
.score-objective-guidance > span { display: grid; width: 36px; height: 36px; place-items: center; color: var(--hz-warn-ink); background: #FFEDC4; border-radius: var(--hz-r-input); font-weight: 800; }
.score-objective-guidance h2 { margin: 0; font-size: 16px; }
.score-objective-guidance ol { grid-column: 2; }
.score-objective-guidance ol { display: grid; gap: 9px; margin: 12px 0 0; padding-left: 18px; color: var(--hz-ink-2); font-size: 14px; line-height: 1.45; }

.score-measurement-budgets { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; padding: 14px; background: #F7F9FC; border-bottom: 1px solid var(--hz-line); }
.score-measurement-budgets article { padding: 12px; background: #fff; border: 1px solid var(--hz-line); border-radius: var(--hz-r-input); }
.score-measurement-budgets small { color: var(--hz-ink-3); font-family: var(--font-mono); font-size: 14px; font-weight: 700; letter-spacing: .1em; }
.score-measurement-budgets strong { display: block; margin-top: 6px; color: var(--hz-ink); font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.score-measurement-budgets > article > span { display: block; height: 7px; margin-top: 10px; overflow: hidden; background: var(--hz-sunken); border-radius: var(--hz-r-pill); }
.score-measurement-budgets > article > span i { display: block; height: 100%; background: var(--hz-blue); border-radius: inherit; }
.score-measurement-budgets p { margin: 7px 0 0; color: var(--hz-ink-3); font-size: 14px; }
.score-measurement-table > header, .score-measurement-table > article { display: grid; grid-template-columns: 1.4fr 1fr .7fr .7fr .6fr; align-items: center; gap: 12px; padding: 10px 15px; }
.score-measurement-table > header { color: var(--hz-ink-3); background: #F7F9FC; border-bottom: 1px solid var(--hz-line); font-family: var(--font-mono); font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.score-measurement-table > article { min-height: 62px; border-bottom: 1px solid var(--hz-line-soft); color: var(--hz-ink-2); font-size: 14px; }
.score-measurement-table article:last-child { border-bottom: 0; }
.score-measurement-table strong { font-size: 14px; letter-spacing: 0; text-transform: none; }
.score-measurement-table small { display: block; margin-top: 3px; color: var(--hz-ink-3); font-size: 14px; }
.score-measurement-table em { display: flex; align-items: center; gap: 5px; color: var(--hz-ok-ink); font-style: normal; font-weight: 700; }
.score-measurement-table em i { width: 7px; height: 7px; background: var(--hz-ok); border-radius: 50%; }
.score-measurement-table em.is-draft { color: var(--hz-ink-3); }
.score-measurement-table em.is-draft i { background: #7B879D; }

.score-profile-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; padding: 14px; }
.score-profile-grid article { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 8px 11px; align-items: center; padding: 13px; border: 1px solid var(--hz-line); border-radius: var(--hz-r-input); }
.score-profile-grid article > span { grid-row: 1 / 3; display: grid; width: 42px; height: 42px; place-items: center; color: var(--hz-blue); background: #EAF1FF; border-radius: var(--hz-r-input); font-size: 14px; font-weight: 800; }
.score-profile-grid article small { color: var(--hz-ink-3); font-family: var(--font-mono); font-size: 14px; font-weight: 700; letter-spacing: .1em; }
.score-profile-grid h3 { margin-top: 3px; }
.score-profile-grid p { margin: 4px 0 0; color: var(--hz-ink-2); font-size: 14px; line-height: 1.4; }
.score-profile-grid article > strong { grid-column: 2; color: var(--hz-ink); font-size: 26px; font-weight: 800; }

.score-history { margin: 0; padding: 0; list-style: none; }
.score-history li { display: grid; grid-template-columns: 112px 92px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 13px 15px; border-bottom: 1px solid var(--hz-line-soft); }
.score-history li:last-child { border-bottom: 0; }
.score-history time { color: var(--hz-ink-3); font-family: var(--font-mono); font-size: 14px; font-weight: 700; }
.score-history li > span { padding: 5px 7px; color: var(--hz-blue); background: #EDF3FF; border-radius: var(--hz-r-tag); font-family: var(--font-mono); font-size: 14px; font-weight: 700; text-align: center; }
.score-history li > span.is-agent { color: var(--hz-warn-ink); background: #FFF4D9; }
.score-history strong { color: var(--hz-ink); font-size: 14px; }
.score-history p { margin: 3px 0 0; color: var(--hz-ink-2); font-size: 14px; }
.score-history button { min-height: 32px; padding: 0 10px; color: var(--hz-blue); background: #F0F5FF; border: 1px solid #C9D9EF; border-radius: var(--hz-r-input); font-size: 14px; font-weight: 700; cursor: pointer; }

.score-config-modal { position: fixed; z-index: 120; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(1,26,59,.55); }
.score-config-modal[hidden] { display: none; }
.score-config-modal > section { width: min(640px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; background: #fff; border: 1px solid var(--hz-line); border-radius: var(--hz-r-card); box-shadow: var(--hz-sh-deep); }
.score-config-modal > section > header { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 17px; border-bottom: 1px solid var(--hz-line-soft); }
.score-config-modal header button { width: 32px; height: 32px; color: var(--hz-ink-3); background: #F3F6FA; border: 1px solid var(--hz-line); border-radius: var(--hz-r-input); font-size: 22px; cursor: pointer; }
.score-objective-old-new { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 15px 17px; }
.score-objective-old-new article, .score-objective-old-new label { display: grid; gap: 5px; padding: 12px; background: #F7F9FC; border: 1px solid var(--hz-line); border-radius: var(--hz-r-input); }
.score-objective-old-new small { color: var(--hz-ink-3); font-family: var(--font-mono); font-size: 14px; font-weight: 700; letter-spacing: .1em; }
.score-objective-old-new strong, .score-objective-old-new input { color: var(--hz-ink); font-size: 26px; font-weight: 800; }
.score-objective-old-new input { width: 100%; border: 0; outline: 0; background: transparent; }
.score-objective-old-new em { color: var(--hz-ink-3); font-size: 14px; font-style: normal; }
.score-objective-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 17px; }
.score-objective-fields label, .score-wizard-fields > label { display: grid; gap: 5px; }
.score-objective-fields label.is-wide { grid-column: 1 / -1; }
.score-objective-fields label span, .score-wizard-fields > label span { color: var(--hz-ink-3); font-size: 14px; font-weight: 700; }
.score-objective-fields input, .score-objective-fields textarea, .score-wizard-fields input, .score-wizard-fields select { width: 100%; min-height: 39px; padding: 8px 10px; color: var(--hz-ink); background: #fff; border: 1px solid #C5D2E5; border-radius: var(--hz-r-input); font-size: 14px; font-weight: 600; resize: vertical; }
.score-objective-confirm { display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 10px; margin: 14px 17px 0; padding: 11px; background: #FFF8ED; border: 1px solid #E5CEA1; border-radius: var(--hz-r-input); }
.score-objective-confirm > span { display: grid; width: 34px; height: 34px; place-items: center; color: var(--hz-warn-ink); background: #FFEDC4; border-radius: var(--hz-r-input); font-weight: 800; }
.score-objective-confirm p { margin: 0; color: var(--hz-ink-2); font-size: 14px; line-height: 1.45; }
.score-objective-confirm strong { color: var(--hz-ink); }
.score-config-modal footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 15px; padding: 12px 17px; background: #F7F9FC; border-top: 1px solid var(--hz-line); }
.score-config-modal footer button.is-secondary { color: var(--hz-ink-2); border-color: #C6D3E5; }

.score-measurement-wizard { width: min(870px, 100%) !important; }
.score-wizard-progress { display: grid; grid-template-columns: repeat(9,1fr); gap: 4px; padding: 12px 17px; background: #F7F9FC; border-bottom: 1px solid var(--hz-line); }
.score-wizard-progress span { display: grid; height: 26px; place-items: center; color: var(--hz-ink-3); background: #E7ECF4; border-radius: var(--hz-r-tag); font-family: var(--font-mono); font-size: 14px; font-weight: 700; }
.score-wizard-progress span.is-active { color: #fff; background: var(--hz-blue); }
.score-wizard-layout { display: grid; grid-template-columns: minmax(0,1fr) 250px; gap: 14px; padding: 15px 17px; }
.score-wizard-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.score-wizard-fields > label:first-child { grid-column: 1 / -1; }
.score-wizard-fields fieldset { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 2px 0 0; padding: 0; border: 0; }
.score-wizard-fields legend { margin-bottom: 7px; color: var(--hz-ink-3); font-size: 14px; font-weight: 700; }
.score-wizard-fields fieldset label { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 8px; padding: 10px; border: 1px solid var(--hz-line); border-radius: var(--hz-r-input); cursor: pointer; }
.score-wizard-fields fieldset label:has(input:checked) { border-color: var(--hz-blue); background: #F0F5FF; }
.score-wizard-fields fieldset strong { margin: 0; font-size: 14px; letter-spacing: 0; text-transform: none; }
.score-wizard-fields fieldset small { display: block; margin-top: 3px; color: var(--hz-ink-3); font-size: 14px; }
.score-wizard-layout > aside { padding: 13px; background: #F4F8FF; border: 1px solid #C9D9EF; border-radius: var(--hz-r-card); }
.score-wizard-layout > aside h3 { margin: 5px 0 0; color: var(--hz-ok-ink); font-size: 16px; letter-spacing: .06em; }
.score-wizard-layout > aside > p:not(.score-eyebrow) { color: var(--hz-ink-2); font-size: 14px; line-height: 1.45; }
.score-wizard-layout > aside div { display: grid; gap: 5px; margin-top: 12px; padding: 10px; background: #fff; border-radius: var(--hz-r-input); }
.score-wizard-layout > aside div strong { color: var(--hz-ink); font-size: 14px; }
.score-wizard-layout > aside div span, .score-wizard-layout > aside > small { color: var(--hz-ink-3); font-size: 14px; line-height: 1.45; }
.score-wizard-layout > aside > small { display: block; margin-top: 12px; }

@media (max-width: 1220px) {
  .score-config-layout { grid-template-columns: 220px minmax(0,1fr); }
  .score-validation-panel { position: static; grid-column: 1 / -1; }
  .score-recipe-rules { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .score-config-hero { grid-template-columns: 1fr; min-height: 190px; }
  .score-config-access { justify-items: start; margin: 0; }
  .score-config-layout, .score-objective-layout { grid-template-columns: 1fr; }
  .score-metric-list { display: grid; grid-template-columns: repeat(2,1fr); }
  .score-metric-list > header { grid-column: 1 / -1; }
  .score-measurement-budgets, .score-profile-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .score-config-content { padding-inline: 12px; }
  .score-config-warning { grid-template-columns: 38px minmax(0,1fr); }
  .score-config-warning > b { grid-column: 1 / -1; }
  .score-config-panel-head { align-items: flex-start; flex-direction: column; }
  .score-range-preview { justify-items: start; }
  .score-component-table { overflow-x: auto; }
  .score-component-table > header, .score-component-table > article { min-width: 720px; }
  .score-config-actions { flex-wrap: wrap; }
  .score-config-actions > div { width: 100%; }
  /* el dl de Objectives ya no es grilla de columnas, son filas label/valor:
     no hay nada que reacomodar en angosto. */
  .score-measurement-table { overflow-x: auto; }
  .score-measurement-table > header, .score-measurement-table > article { min-width: 720px; }
  .score-history li { grid-template-columns: 90px 92px minmax(0,1fr); }
  .score-history li button { grid-column: 3; justify-self: start; }
  .score-wizard-layout { grid-template-columns: 1fr; }
  .score-wizard-fields { grid-template-columns: 1fr; }
  .score-wizard-fields > label:first-child, .score-wizard-fields fieldset { grid-column: 1; }
  .score-wizard-fields fieldset { grid-template-columns: 1fr; }
}

/* ============================================================
   HORIZON 2050 · FINOPS CONFIGURATION HIERARCHY
   ============================================================ */

.score-config-main { color: var(--hz-ink); }

.score-config-hero {
  min-height: 178px;
  padding: 24px 34px;
  background-position: center 74%;
}

.score-config-hero::before { background: rgba(241,248,255,.58); }
.score-config-hero h1 { font-size: 40px; letter-spacing: -.025em; }
.score-config-hero > div:first-child > p:last-child { font-size: 18px; line-height: 1.45; }
.score-config-hero > a { right: 34px; bottom: 21px; font-size: 14px; }
.score-config-access span { font-size: 16px; }
.score-config-access small { font-size: 14px; }

.score-config-content {
  gap: 16px;
  padding: 18px 28px 100px;
}

.score-config-warning { min-height: 76px; padding: 13px 16px; }
.score-config-warning > span { font-family: var(--font-sans); font-size: 14px; }
.score-config-warning strong { font-size: 16px; }
.score-config-warning p { font-size: 14px; line-height: 1.45; }
.score-config-warning > b { font-family: var(--font-sans); font-size: 14px; font-weight: 600; }

.score-config-tabs { padding: 5px; }
.score-config-tabs button { min-height: 42px; font-family: var(--font-sans); font-size: 14px; font-weight: 600; }

.score-config-layout {
  grid-template-columns: 260px minmax(620px,1fr) 300px;
  gap: 16px;
}

.score-metric-list h2,
.score-config-panel-head h2,
.score-validation-panel h2,
.score-objective-guidance h2,
.score-config-modal h2 { font-size: 22px; }

.score-metric-list > header { padding: 17px; }
.score-metric-list header > p:last-child { font-size: 14px; line-height: 1.45; }
.score-metric-list > button { min-height: 86px; padding: 12px 14px; }
.score-metric-list > button > span { width: 38px; height: 38px; font-size: 14px; }
.score-metric-list button strong { font-size: 16px; }
.score-metric-list button small { font-size: 14px; }
.score-metric-list button em { font-size: 14px; }
.score-metric-list button em i { width: 7px; height: 7px; }

.score-config-panel-head { padding: 18px 20px; }
.score-config-panel-head > div > p:last-child { font-size: 16px; line-height: 1.5; }
.score-range-preview { min-width: 150px; }
.score-range-preview small { font-family: var(--font-sans); font-size: 14px; font-weight: 700; letter-spacing: .14em; }
.score-range-preview strong { font-size: 26px; }
.score-range-preview span { font-size: 14px; }

.score-component-table > header,
.score-component-table > article {
  grid-template-columns: 92px minmax(180px,1.45fr) 94px minmax(150px,1fr) 92px;
  gap: 12px;
}

.score-component-table > header {
  padding: 11px 15px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .08em;
}

.score-component-table > article { min-height: 92px; padding: 12px 15px; }
.score-component-table article > div:nth-child(2) strong { font-size: 16px; }
.score-component-table article > div:nth-child(2) small { font-size: 14px; line-height: 1.45; }
.score-switch em { font-size: 14px; }
.score-weight { min-height: 38px; }
.score-weight input { font-family: var(--font-sans); font-size: 14px; }
.score-weight span { font-size: 14px; }
.score-target strong { font-size: 14px; }
.score-target small { font-size: 14px; }
.score-impact { font-family: var(--font-sans); font-size: 14px; }

.score-recipe-rules { gap: 12px; padding: 14px; }
.score-recipe-rules article { padding: 14px; }
.score-recipe-rules small { font-family: var(--font-sans); font-size: 14px; font-weight: 700; letter-spacing: .14em; }
.score-recipe-rules p { font-size: 14px; line-height: 1.5; }
.score-band-preview { height: 30px; font-family: var(--font-sans); font-size: 14px; }
.score-recipe-rules label strong { font-size: 26px; }
.score-recipe-rules dt,
.score-recipe-rules dd { font-size: 14px; }
/* cifras tabulares: son cantidades leidas en columna contra el borde derecho,
   y Poppins no es mono (`--font-mono` apunta a Poppins aca), asi que sin esto
   no alinean. */
.score-recipe-rules dd { font-variant-numeric: tabular-nums; }

.score-validation-panel > header { padding: 16px; }
.score-validation-panel > header > span { width: 38px; height: 38px; }
.score-validation-panel h2 { font-size: 16px; }
#validationMessages { padding: 13px 16px; }
#validationMessages p { padding-block: 9px; font-size: 14px; line-height: 1.4; }
.score-validation-panel > section { margin-inline: 16px; padding: 13px; }
.score-validation-panel > section small { font-family: var(--font-sans); font-size: 14px; font-weight: 700; letter-spacing: .14em; }
.score-validation-panel > section strong { font-size: 14px; }
.score-validation-panel > section p { font-size: 14px; line-height: 1.5; }
.score-validation-panel > a { min-height: 42px; margin: 14px 16px 16px; font-size: 14px; }

.score-config-actions { gap: 10px; padding: 12px 14px; }
.score-config-actions > div strong { font-size: 16px; }
.score-config-actions > div span { font-size: 14px; }
.score-config-actions button,
.score-new-measurement,
.score-objective-table button,
.score-config-modal footer button { min-height: 40px; font-size: 14px; }

.score-direct-change { font-size: 14px; }
/* Objectives es una tabla, no una grilla de cards: necesita el ancho completo
   para sus ocho columnas, asi que la guia "before you change a target" baja
   debajo en vez de robar 320px al costado. */
.score-objective-layout { grid-template-columns: minmax(0,1fr); gap: 16px; padding: 16px; }
.score-measurement-table strong,
.score-profile-grid h3,
.score-wizard-fields strong { font-size: 16px; }
.score-objective-guidance { padding: 16px; }
.score-objective-guidance ol { font-size: 14px; line-height: 1.5; }

.score-measurement-budgets { gap: 12px; padding: 16px; }
.score-measurement-budgets article { padding: 15px; }
.score-measurement-budgets small { font-family: var(--font-sans); font-size: 14px; font-weight: 700; letter-spacing: .14em; }
.score-measurement-budgets strong { font-size: 40px; }
.score-measurement-budgets p { font-size: 14px; }
.score-measurement-table > header,
.score-measurement-table > article { padding: 12px 17px; }
.score-measurement-table > header { font-family: var(--font-sans); font-size: 16px; font-weight: 700; letter-spacing: .08em; }
.score-measurement-table > article { min-height: 72px; font-size: 14px; }
.score-measurement-table strong { font-size: 16px; }
.score-measurement-table small { font-size: 14px; }

.score-profile-grid { gap: 14px; padding: 16px; }
.score-profile-grid article { padding: 15px; }
.score-profile-grid article > span { width: 46px; height: 46px; font-size: 14px; }
.score-profile-grid article small { font-family: var(--font-sans); font-size: 14px; font-weight: 700; letter-spacing: .14em; }
.score-profile-grid p { font-size: 14px; line-height: 1.5; }
.score-profile-grid article > strong { font-size: 26px; }

.score-history li { min-height: 76px; padding: 14px 17px; }
.score-history time { font-family: var(--font-sans); font-size: 14px; font-weight: 500; }
.score-history li > span { font-family: var(--font-sans); font-size: 14px; font-weight: 600; }
.score-history strong { font-size: 16px; }
.score-history p { font-size: 14px; }
.score-history button { min-height: 36px; font-size: 14px; }

.score-config-modal > section > header { padding: 17px 19px; }
.score-objective-old-new { padding: 17px 19px; }
.score-objective-old-new small { font-family: var(--font-sans); font-size: 14px; font-weight: 700; letter-spacing: .14em; }
.score-objective-old-new strong,
.score-objective-old-new input { font-size: 40px; }
.score-objective-old-new em { font-size: 14px; }
.score-objective-fields { padding-inline: 19px; }
.score-objective-fields label span,
.score-wizard-fields > label span { font-size: 14px; }
.score-objective-fields input,
.score-objective-fields textarea,
.score-wizard-fields input,
.score-wizard-fields select { min-height: 42px; font-size: 14px; }
.score-objective-confirm p { font-size: 14px; }

.score-wizard-progress span { height: 30px; font-family: var(--font-sans); font-size: 14px; font-weight: 600; }
.score-wizard-layout { grid-template-columns: minmax(0,1fr) 280px; gap: 16px; padding: 17px 19px; }
.score-wizard-fields legend { font-size: 14px; }
.score-wizard-fields fieldset strong { font-size: 14px; }
.score-wizard-fields fieldset small { font-size: 14px; }
.score-wizard-layout > aside > p:not(.score-eyebrow) { font-size: 14px; line-height: 1.5; }
.score-wizard-layout > aside div strong { font-size: 14px; }
.score-wizard-layout > aside div span,
.score-wizard-layout > aside > small { font-size: 14px; }

@media (max-width: 1460px) {
  .score-config-layout { grid-template-columns: 250px minmax(0,1fr); }
  .score-validation-panel { position: static; grid-column: 1 / -1; }
  .score-recipe-rules { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 900px) {
  .score-config-hero { min-height: 210px; padding-inline: 20px; }
  .score-config-hero h1 { font-size: 40px; }
  .score-config-content { padding-inline: 14px; }
  .score-config-layout,
  .score-objective-layout { grid-template-columns: 1fr; }
  .score-recipe-rules { grid-template-columns: 1fr; }
}

/* ============================================================
   OBJECTIVES · TABLA
   Reusa `.score-measurement-table` tal cual —header tintado, filas con
   nombre + descriptor, estado con punto— porque es el patron de tabla que
   ya tiene el sistema: el mismo de la pestania Measurements de esta pagina
   y el de la tabla de personas de Users. Aca solo se declara el reparto de
   columnas, la celda del valor vigente y el estado provisional.
   ============================================================ */

/* La ultima columna va en px y no en `auto` a proposito: el header y cada fila
   son grids independientes, asi que un `auto` medía 0 en el header (solo tiene
   la etiqueta sr-only) y 158px en las filas (el boton), y los titulos quedaban
   corridos hasta 158px respecto de sus celdas. Por eso la tabla de Measurements
   tampoco usa `auto` en ninguna columna. */
.score-objective-table > header,
.score-objective-table > article {
  grid-template-columns: 1.9fr 1.1fr .7fr .8fr 1.1fr 1fr .85fr 190px;
}

/* valor vigente: es el dato que se leia como titular de cada card, asi que
   conserva peso propio dentro de la fila */
.score-objective-table b {
  color: var(--hz-ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.score-objective-table em.is-provisional { color: var(--hz-warn-ink); }
.score-objective-table em.is-provisional i { background: var(--hz-warn); }

/* la accion de cada fila es secundaria: la primaria de la pantalla es publicar.
   Mismo secundario que el pie de los modales. */
.score-objective-table button {
  color: var(--hz-ink-2);
  background: transparent;
  border-color: #C6D3E5;
  white-space: nowrap;
}
.score-objective-table button:hover { color: var(--hz-blue); border-color: var(--hz-blue); }

/* Mismo recurso que ya usa la tabla de Measurements: por debajo de su ancho
   comodo, scroll horizontal en vez de apretar ocho columnas hasta partir cada
   valor en dos lineas. Medido: a 1200px de viewport la tabla mide 875px y nada
   envuelve; a 900px baja a 747px y "20 active days", "Higher is better" y la
   fecha se parten. */
@media (max-width: 1180px) {
  .score-objective-table { overflow-x: auto; }
  .score-objective-table > header,
  .score-objective-table > article { min-width: 870px; }
}

/* ============================================================
   FINOPS CARD COLOR CONTRACT
   Configuration cards use the same information/status surfaces.
   ============================================================ */

.score-config-warning {
  border-color: var(--hz-card-blue-border);
  border-left: 4px solid var(--hz-card-blue-line);
  background: var(--hz-card-blue-bg);
  box-shadow: var(--hz-card-state-shadow);
}

.score-recipe-rules article,
.score-measurement-budgets article,
.score-profile-grid article {
  border-color: var(--hz-card-blue-border);
  border-left: 4px solid var(--hz-card-blue-line);
  background: var(--hz-card-blue-bg);
  box-shadow: var(--hz-card-state-shadow);
}

.score-validation-panel {
  border-color: var(--hz-card-green-border);
  border-left: 4px solid var(--hz-card-green-line);
  background: var(--hz-card-green-bg);
  box-shadow: var(--hz-card-state-shadow);
}

.score-objective-guidance {
  border-color: var(--hz-card-orange-border);
  border-left: 4px solid var(--hz-card-orange-line);
  background: var(--hz-card-orange-bg);
  box-shadow: var(--hz-card-state-shadow);
}

.score-wizard-layout > aside {
  border-color: var(--hz-card-green-border);
  border-left: 4px solid var(--hz-card-green-line);
  background: var(--hz-card-green-bg);
  box-shadow: var(--hz-card-state-shadow);
}

.score-objective-old-new article {
  border-color: var(--hz-card-neutral-border);
  border-left: 4px solid var(--hz-card-neutral-line);
  background: var(--hz-card-neutral-bg);
}

.score-objective-old-new label {
  border-color: var(--hz-card-blue-border);
  border-left: 4px solid var(--hz-card-blue-line);
  background: var(--hz-card-blue-bg);
}