:root {
  --font-sans: "Poppins", system-ui, sans-serif;
  --font-mono: "Poppins", system-ui, sans-serif;
  --hz-ink: #0A1E46;
  --hz-ink-2: #24365C;
  --hz-ink-3: #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-line: #DCE4F5;
  --hz-line-soft: #E9EEF9;
  --hz-sunken: #EAF0FB;
  --hz-r-card: 16px;
  --hz-r-input: 10px;
  --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 { font: inherit; }
.adoption-page .sidebar { z-index: 30; }
.adoption-main {
  grid-column: 2;
  width: 100%;
  height: 100vh;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--hz-ink);
  background: #F4F7FB;
  scrollbar-color: #7DA9DA #EAF0FB;
  scrollbar-width: thin;

  /* 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;
}
.adoption-main::-webkit-scrollbar { width: 10px; }
.adoption-main::-webkit-scrollbar-track { background: #EAF0FB; }
.adoption-main::-webkit-scrollbar-thumb { background: #7DA9DA; border: 3px solid #EAF0FB; border-radius: var(--hz-r-pill); }

.adoption-hero {
  position: relative;
  min-height: 214px;
  overflow: hidden;
  border-bottom: 1px solid rgba(180,204,231,.76);
  background: #D9EBFB url("../img/hrzn-header-coast.png") center 79% / cover no-repeat;
}
.adoption-hero__veil { position: absolute; inset: 0; background: rgba(239,247,255,.58); }
.adoption-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); }
.adoption-hero__copy { position: relative; z-index: 2; width: min(690px,55%); padding: 24px 32px 31px; }
.adoption-eyebrow { margin: 0; color: var(--hz-ink-3); font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.adoption-hero__copy h1 { margin: 7px 0 0; color: var(--hz-ink); font-size: 40px; font-weight: 800; line-height: 1.05; letter-spacing: -.015em; }
.adoption-hero__copy > p:not(.adoption-eyebrow) { max-width: 660px; margin: 8px 0 0; color: var(--hz-ink); font-size: 16px; font-weight: 500; }
.adoption-hero__signals { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 18px; color: var(--hz-ink-2); font-size: 14px; font-weight: 700; }
.adoption-hero__signals span { position: relative; display: inline-flex; align-items: center; gap: 7px; }
.adoption-hero__signals span + span::before { content: ""; position: absolute; left: -10px; width: 1px; height: 14px; background: rgba(85,102,138,.34); }
.adoption-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); }
.adoption-hero__signals b { color: var(--hz-bad-ink); }

.adoption-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; }
.adoption-utility > i { width: 1px; height: 23px; background: var(--hz-line); }
.adoption-viewers { display: flex; align-items: center; }
.adoption-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; }
.adoption-viewers span:first-child { margin-left: 0; }
.adoption-viewers small { margin-left: 8px; color: var(--hz-ink-3); font-size: 14px; white-space: nowrap; }
.adoption-live,.adoption-sync { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.adoption-live em { width: 7px; height: 7px; background: var(--hz-ok); border-radius: 50%; box-shadow: 0 0 0 5px rgba(31,169,92,.10); animation: adoption-pulse 2.4s infinite; }
.adoption-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; }
.adoption-period:hover { background: var(--hz-sunken); }
.adoption-clock { display: grid; justify-items: end; gap: 2px; white-space: nowrap; }
.adoption-clock b { font-size: 16px; font-variant-numeric: tabular-nums; }
.adoption-clock small { color: var(--hz-ink-3); font-size: 14px; font-weight: 600; letter-spacing: .08em; }
.adoption-score-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; }
.adoption-score-link:hover { box-shadow: var(--hz-sh-soft); }

.adoption-content { display: grid; gap: 15px; padding: 18px 24px 104px; }
.adoption-live-feed,.adoption-kpi,.adoption-briefing,.adoption-distribution,.adoption-attention,.adoption-team-card { background: #fff; border: 1px solid var(--hz-line); border-radius: var(--hz-r-card); box-shadow: var(--hz-sh-hair); }

.adoption-live-feed { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; min-height: 66px; align-items: center; gap: 15px; padding: 11px 16px; overflow: hidden; }
.adoption-live-feed::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: linear-gradient(90deg,var(--hz-blue),var(--hz-sky) 58%,var(--hz-orange)); transform: scaleX(0); transform-origin: left; animation: adoption-course 5.6s linear infinite; }
.adoption-live-feed.is-updating { animation: adoption-detected .5s ease-out; }
.adoption-live-feed__source { display: flex; align-items: center; gap: 9px; padding-right: 15px; border-right: 1px solid var(--hz-line); }
.adoption-live-feed__source > span { position: relative; display: grid; width: 34px; height: 34px; place-items: center; background: #EAF3FF; border-radius: var(--hz-r-input); }
.adoption-live-feed__source > span::before,.adoption-live-feed__source > span::after { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(36,80,228,.34); border-radius: 50%; animation: adoption-sonar 2.4s ease-out infinite; }
.adoption-live-feed__source > span::after { inset: 2px; animation-delay: .8s; }
.adoption-live-feed__source i { width: 8px; height: 8px; background: var(--hz-blue); border-radius: 50%; }
.adoption-live-feed__source small { color: var(--hz-ink-2); font-size: 14px; font-weight: 700; letter-spacing: .14em; white-space: nowrap; }
.adoption-live-feed__copy { display: grid; min-width: 0; grid-template-columns: auto minmax(0,1fr); gap: 2px 9px; align-items: center; }
.adoption-live-feed__copy b { padding: 4px 8px; color: var(--hz-blue); background: #EDF3FF; border-radius: 8px; font-size: 14px; font-weight: 700; letter-spacing: .04em; }
.adoption-live-feed__copy strong { overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.adoption-live-feed__copy span { grid-column: 1 / -1; color: var(--hz-ink-2); font-size: 14px; font-weight: 500; }
.adoption-live-feed__state { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.adoption-live-feed__state span { display: flex; align-items: center; gap: 6px; color: var(--hz-ok-ink); font-size: 14px; font-weight: 700; }
.adoption-live-feed__state span i { width: 7px; height: 7px; background: var(--hz-ok); border-radius: 50%; }
.adoption-live-feed__state span.is-watch { color: var(--hz-warn-ink); }
.adoption-live-feed__state span.is-watch i { background: var(--hz-warn); }
.adoption-live-feed__state span.is-bad { color: var(--hz-bad-ink); }
.adoption-live-feed__state span.is-bad i { background: var(--hz-bad); }
.adoption-live-feed__state time { color: var(--hz-ink-3); font-size: 14px; }
.adoption-live-feed > button { min-height: 38px; padding: 0 12px; color: #fff; background: var(--hz-blue); border: 0; border-radius: var(--hz-r-input); font-size: 14px; font-weight: 700; cursor: pointer; }

.adoption-kpis { display: grid; grid-template-columns: 1.25fr repeat(3,1fr); gap: 12px; }
.adoption-kpi { position: relative; min-height: 172px; padding: 20px; overflow: hidden; }
.adoption-kpi.is-primary { border-left: 4px solid var(--hz-blue); background: linear-gradient(100deg,#F1F6FF 0%,#fff 42%); }
.adoption-kpi header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.adoption-kpi header small { color: var(--hz-ink-3); font-size: 14px; font-weight: 700; letter-spacing: .14em; }
.adoption-kpi header span { display: flex; align-items: center; gap: 5px; color: var(--hz-ok-ink); font-size: 14px; font-weight: 700; }
.adoption-kpi header span i { width: 6px; height: 6px; background: var(--hz-ok); border-radius: 50%; }
.adoption-kpi header span.is-watch { color: var(--hz-warn-ink); }
.adoption-kpi header span.is-watch i { background: var(--hz-warn); }
.adoption-kpi > div { display: flex; align-items: baseline; gap: 7px; margin-top: 15px; }
.adoption-kpi strong { color: #071B3C; font-size: 40px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.adoption-kpi.is-primary strong { font-size: 48px; }
.adoption-kpi em { color: var(--hz-ink-3); font-size: 14px; font-style: normal; font-weight: 600; }
.adoption-kpi p { margin: 9px 0 0; color: var(--hz-ink-2); font-size: 14px; font-weight: 500; }
.adoption-kpi p b { color: var(--hz-ok-ink); }
.adoption-kpi footer { position: absolute; right: 20px; bottom: 16px; left: 20px; height: 5px; overflow: hidden; background: #EDF2F8; border-radius: 999px; }
.adoption-kpi footer span { display: block; width: var(--value); height: 100%; background: linear-gradient(90deg,var(--hz-blue),var(--hz-sky)); border-radius: inherit; }
/* La barra de la tarjeta naranja: gradiente, pero DE NARANJA A
   NARANJA.
   ------------------------------------------------------------
   Era `azul -> celeste -> naranja`: empezaba con el color de otro
   estado y solo llegaba al suyo en el ultimo tramo, o sea la barra
   contradecia el estado de su propia tarjeta.

   Ahora sigue la misma receta que la barra azul de las otras
   tarjetas, que va `--hz-blue -> --hz-sky` (oscuro a claro). El
   segundo tramo se derivo con la MISMA relacion, no a ojo:

     azul     #2450E4  h226 s78 L52
     celeste  #58A9F4  h209 s88 L65    -> +13 de luz
     naranja  #F97435  h19  s94 L59
     claro    #FFA36B  h23  s100 L71   -> +12 de luz

   El naranja base no se toca. Y #FFA36B no es ninguno de los dos
   naranjas institucionales: no es --hz-orange (#F97435, que es el
   primer tramo) ni --hz-warn (#F59E0B, el ambar de marca). */
.adoption-kpi.is-primary footer span { background: linear-gradient(90deg, var(--hz-orange), #FFA36B); }

.adoption-briefing { display: grid; grid-template-columns: 42px minmax(0,1fr) auto auto; align-items: center; gap: 14px; padding: 14px 16px; }
.adoption-briefing__mark { display: grid; width: 42px; height: 42px; place-items: center; color: #fff; background: #082A59; border-radius: var(--hz-r-input); font-size: 17.5px; font-weight: 800; }
.adoption-briefing h2 { margin: 4px 0 0; font-size: 18px; line-height: 1.35; }
.adoption-briefing > div > p:last-child { margin: 4px 0 0; color: var(--hz-ink-2); font-size: 14px; font-weight: 500; }
.adoption-briefing__states { display: grid; gap: 5px; }
.adoption-briefing__states span { display: flex; align-items: center; gap: 6px; color: var(--hz-ok-ink); font-size: 14px; font-weight: 700; white-space: nowrap; }
.adoption-briefing__states span i { width: 7px; height: 7px; background: var(--hz-ok); border-radius: 50%; }
.adoption-briefing__states span.is-watch { color: var(--hz-warn-ink); }
.adoption-briefing__states span.is-watch i { background: var(--hz-warn); }
.adoption-briefing > button b,
.adoption-attention > button b,
.adoption-progress__people button > b { font-weight: 700; }
.adoption-briefing > button { min-height: 38px; padding: 0 12px; color: #fff; background: var(--hz-blue); border: 0; border-radius: var(--hz-r-input); font-size: 14px; font-weight: 700; cursor: pointer; }

.adoption-insight-grid { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(350px,.9fr); gap: 15px; }
.adoption-distribution { overflow: hidden; }
.adoption-distribution > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 17px 20px; border-bottom: 1px solid var(--hz-line-soft); }
.adoption-distribution h2,.adoption-attention h2,.adoption-teams__head h2 { margin: 4px 0 0; font-size: 22px; letter-spacing: -.015em; }
.adoption-distribution header p:not(.adoption-eyebrow) { margin: 5px 0 0; color: var(--hz-ink-2); font-size: 14px; }
.adoption-distribution > header > span { color: var(--hz-ink-3); font-size: 14px; font-weight: 700; letter-spacing: .14em; }
.adoption-distribution__body { display: grid; grid-template-columns: 190px minmax(0,1fr); align-items: center; gap: 24px; padding: 20px; }
.adoption-donut { position: relative; display: grid; width: 148px; height: 148px; place-items: center; margin: auto; background: conic-gradient(var(--hz-ok) 0 42%,var(--hz-warn) 42% 75%,var(--hz-bad) 75% 100%); border: 0; border-radius: 50%; cursor: pointer; }
.adoption-donut::before { content: ""; position: absolute; inset: 17px; background: #fff; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--hz-line); }
.adoption-donut span { position: relative; display: grid; justify-items: center; }
.adoption-donut strong { color: #071B3C; font-size: 40px; font-weight: 800; letter-spacing: -.025em; line-height: 1; }
.adoption-donut small { margin-top: 5px; color: var(--hz-ink-3); font-size: 14px; font-weight: 700; letter-spacing: .14em; }
.adoption-distribution__course { display: grid; gap: 15px; }
.adoption-people { display: flex; gap: 10px; }
.adoption-people i { width: 13px; height: 13px; background: var(--hz-ok); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(31,169,92,.25); }
.adoption-people i.watch { background: var(--hz-warn); box-shadow: 0 0 0 1px rgba(245,158,11,.25); }
.adoption-people i.bad { background: var(--hz-bad); box-shadow: 0 0 0 1px rgba(229,72,77,.25); }
.adoption-band-track { display: grid; grid-template-columns: 42fr 33fr 25fr; height: 11px; overflow: hidden; border-radius: 999px; }
.adoption-band-track i:nth-child(1) { background: var(--hz-ok); }.adoption-band-track i:nth-child(2) { background: var(--hz-warn); }.adoption-band-track i:nth-child(3) { background: var(--hz-bad); }
.adoption-band-actions { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.adoption-band-actions button { display: grid; grid-template-columns: 8px auto; gap: 2px 7px; min-width: 0; padding: 10px; text-align: left; background: #fff; border: 1px solid var(--hz-line); border-radius: var(--hz-r-input); cursor: pointer; }
.adoption-band-actions button:hover,.adoption-band-actions button.is-active { border-color: var(--hz-blue); box-shadow: 0 0 0 2px rgba(36,80,228,.08); }
.adoption-band-actions button > i { grid-row: 1 / 3; width: 8px; height: 8px; margin-top: 3px; background: var(--hz-ok); border-radius: 50%; }
.adoption-band-actions button:nth-child(2) > i { background: var(--hz-warn); }.adoption-band-actions button:nth-child(3) > i { background: var(--hz-bad); }
.adoption-band-actions b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }.adoption-band-actions span { overflow: hidden; color: var(--hz-ink-3); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }

.adoption-attention { padding: 19px 20px; border-left: 4px solid var(--hz-orange); background: linear-gradient(135deg,#fff,#FFF9F5); }
.adoption-attention header { display: flex; align-items: center; justify-content: space-between; }
.adoption-attention header > span { padding: 5px 9px; color: var(--hz-bad-ink); background: #FFF0F0; border-radius: 8px; font-size: 14px; font-weight: 700; letter-spacing: .04em; }
.adoption-attention h2 { margin-top: 15px; color: var(--hz-bad-ink); font-size: 26px; }
.adoption-attention > p { margin: 8px 0 0; color: var(--hz-ink-2); font-size: 14px; line-height: 1.6; }
.adoption-attention > div { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.adoption-attention > div span { padding: 11px; background: rgba(255,255,255,.75); border: 1px solid #F1DDD0; border-radius: var(--hz-r-input); }
.adoption-attention > div b,.adoption-attention > div small { display: block; }
.adoption-attention > div b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }.adoption-attention > div small { margin-top: 3px; color: var(--hz-ink-3); font-size: 14px; }
.adoption-attention > button { width: 100%; min-height: 42px; margin-top: 16px; padding: 0 14px; color: #fff; background: var(--hz-blue); border: 0; border-radius: var(--hz-r-input); font-size: 14px; font-weight: 700; cursor: pointer; }
.adoption-attention > button b { float: right; }

.adoption-teams { scroll-margin-top: 16px; }
.adoption-teams__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; padding: 4px 0 0; }
.adoption-teams__head > div > p:last-child { margin: 4px 0 0; color: var(--hz-ink-3); font-size: 14px; font-weight: 500; }
.adoption-filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.adoption-segment { display: flex; align-items: center; gap: 3px; padding: 3px; background: #fff; border: 1px solid var(--hz-line); border-radius: var(--hz-r-pill); }
.adoption-segment button { height: 30px; min-height: 30px; padding: 0 11px; line-height: 1; color: var(--hz-ink-2); background: transparent; border: 0; border-radius: var(--hz-r-pill); font-size: 14px; font-weight: 600; cursor: pointer; }
.adoption-segment button.is-active { color: #fff; background: var(--hz-blue); box-shadow: var(--hz-sh-soft); }
.adoption-team-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 12px; }
.adoption-team-card { position: relative; min-height: 236px; padding: 20px; cursor: pointer; transition: .18s ease; }
.adoption-team-card:hover,.adoption-team-card:focus-within { transform: translateY(-2px); box-shadow: var(--hz-sh-soft); }
.adoption-team-card.is-hidden { display: none; }
/* La seleccion ya no corre una animacion de fondo. adoption-team-detected
   iba de #EAF4FF a #fff, o sea que al seleccionar una tarjeta se le
   borraba el tinte -- y el tinte es lo que dice si el equipo esta healthy,
   needs context o needs attention. La seleccion tapaba el estado.
   Ahora la marca la pone el filo izquierdo, en hrzn-unify.css, con el
   mismo riel que usa el hover. */
.adoption-team-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.adoption-team-card h3 { margin: 0; color: var(--hz-ink); font-size: 18px; }
.adoption-team-card header p { margin: 4px 0 0; color: var(--hz-ink-3); font-size: 14px; }
.adoption-team-card header > span { display: flex; align-items: center; gap: 6px; padding: 5px 8px; color: var(--hz-ok-ink); background: #EAF8F1; border-radius: var(--hz-r-pill); font-size: 14px; font-weight: 700; }
.adoption-team-card header > span i { width: 6px; height: 6px; background: var(--hz-ok); border-radius: 50%; }
.adoption-team-card.is-medium header > span { color: var(--hz-warn-ink); background: #FFF7E6; }.adoption-team-card.is-medium header > span i { background: var(--hz-warn); }
.adoption-team-card.is-low header > span { color: var(--hz-bad-ink); background: #FFF0F0; }.adoption-team-card.is-low header > span i { background: var(--hz-bad); }
.adoption-team-card__score { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; margin-top: 17px; }
.adoption-team-card__score strong { color: #071B3C; font-size: 26px; font-weight: 800; letter-spacing: -.015em; line-height: 1; font-variant-numeric: tabular-nums; }
.adoption-team-card__score > span { height: 7px; overflow: hidden; background: #EAF0F7; border-radius: 999px; }
.adoption-team-card__score > span i { display: block; width: var(--score); height: 100%; background: var(--hz-ok); border-radius: inherit; }
.adoption-team-card.is-medium .adoption-team-card__score > span i { background: var(--hz-warn); }.adoption-team-card.is-low .adoption-team-card__score > span i { background: var(--hz-bad); }
.adoption-team-card__tools { display: flex; flex-wrap: wrap; gap: 5px; min-height: 27px; margin-top: 13px; }
.adoption-team-card__tools span { padding: 4px 8px; color: var(--hz-blue); background: #EEF4FF; border: 1px solid #D6E2FA; border-radius: 7px; font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.adoption-team-card footer { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 10px; padding-top: 11px; border-top: 1px solid var(--hz-line-soft); }
.adoption-team-card footer b,.adoption-team-card footer small { display: block; }.adoption-team-card footer b { font-size: 16px; font-weight: 800; }.adoption-team-card footer small { margin-top: 3px; color: var(--hz-ink-3); font-size: 14px; }
.adoption-team-card footer .is-down { color: var(--hz-bad-ink); }.adoption-team-card footer .is-up { color: var(--hz-ok-ink); }
.adoption-team-card__review { position: absolute; right: 16px; bottom: 14px; min-height: 34px; padding: 0 11px; color: var(--hz-blue); background: #fff; border: 1px solid #C9D8EE; border-radius: var(--hz-r-input); font-size: 14px; font-weight: 700; cursor: pointer; opacity: 0; transition: .18s ease; }
.adoption-team-card:hover .adoption-team-card__review,.adoption-team-card:focus-within .adoption-team-card__review { opacity: 1; }

.adoption-guide { position: fixed; z-index: 80; right: 24px; bottom: 20px; }
.adoption-guide__launcher { display: flex; min-width: 258px; min-height: 66px; align-items: center; gap: 10px; padding: 9px 11px; color: #fff; background: #072451; border: 1px solid rgba(255,255,255,.12); border-radius: 15px; box-shadow: 0 18px 46px rgba(7,36,81,.28); cursor: pointer; text-align: left; }
.adoption-guide__launcher > span,.adoption-guide__panel header > span { display: grid; width: 38px; height: 38px; place-items: center; color: #fff; background: var(--hz-blue); border-radius: var(--hz-r-input); font-weight: 800; }
.adoption-guide__launcher > div { display: grid; flex: 1; gap: 1px; }.adoption-guide__launcher small { color: #B8CAE4; font-size: 14px; font-weight: 600; letter-spacing: .12em; }.adoption-guide__launcher strong { font-size: 16px; }.adoption-guide__launcher em { color: #C3D2E8; font-size: 14px; font-style: normal; }.adoption-guide__launcher > i { display: grid; width: 24px; height: 24px; place-items: center; background: var(--hz-blue); border-radius: 50%; font-size: 11px; font-style: normal; }
.adoption-guide__panel { position: absolute; right: 0; bottom: 76px; width: 330px; padding: 14px; color: var(--hz-ink); background: #fff; border: 1px solid var(--hz-line); border-radius: var(--hz-r-card); box-shadow: var(--hz-sh-deep); transform: translateY(8px); opacity: 0; pointer-events: none; transition: .18s ease; }
.adoption-guide.is-open .adoption-guide__panel { transform: none; opacity: 1; pointer-events: auto; }
.adoption-guide__panel header { display: flex; align-items: center; gap: 10px; }.adoption-guide__panel header > div { display: grid; flex: 1; }.adoption-guide__panel header small { color: var(--hz-ink-3); font-size: 14px; font-weight: 600; letter-spacing: .11em; }.adoption-guide__panel header strong { font-size: 14px; }.adoption-guide__panel header > button { width: 28px; height: 28px; background: #EEF3FA; border: 0; border-radius: 50%; cursor: pointer; }
.adoption-guide__panel > p { color: var(--hz-ink-2); font-size: 14px; line-height: 1.55; }.adoption-guide__panel > div { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }.adoption-guide__panel > div button { min-height: 36px; color: var(--hz-blue); background: #F3F7FF; border: 1px solid #D8E4F6; border-radius: var(--hz-r-input); font-size: 14px; font-weight: 700; cursor: pointer; }.adoption-guide__panel > a { display: flex; justify-content: space-between; margin-top: 9px; padding: 10px; color: #fff; background: var(--hz-blue); border-radius: var(--hz-r-input); font-size: 14px; font-weight: 700; text-decoration: none; }
.adoption-toast { position: fixed; z-index: 100; left: calc(50% + 110px); bottom: 24px; transform: translateX(-50%); padding: 11px 17px; color: var(--hz-ink); background: #fff; border: 1px solid var(--hz-line); border-radius: var(--hz-r-pill); box-shadow: var(--hz-sh-deep); font-size: 14px; }

@keyframes adoption-pulse { 70% { box-shadow: 0 0 0 9px rgba(31,169,92,0); } }
@keyframes adoption-course { to { transform: scaleX(1); } }
@keyframes adoption-sonar { from { opacity: .8; transform: scale(.6); } to { opacity: 0; transform: scale(1.55); } }
@keyframes adoption-detected { }

@media (max-width: 1350px) {
  .adoption-kpis { grid-template-columns: repeat(2,1fr); }
  .adoption-insight-grid { grid-template-columns: 1fr; }
  .adoption-team-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .adoption-briefing { grid-template-columns: 42px minmax(0,1fr) auto; }.adoption-briefing > button { grid-column: 2 / -1; justify-self: end; }
}
@media (max-width: 980px) {
  .adoption-utility { left: 20px; right: auto; }.adoption-clock,.adoption-viewers small { display: none; }
  .adoption-hero__copy { width: 100%; padding-top: 82px; }
  .adoption-live-feed { grid-template-columns: auto minmax(0,1fr) auto; }.adoption-live-feed > button { grid-column: 2 / -1; justify-self: end; }
  .adoption-teams__head { align-items: flex-start; flex-direction: column; }.adoption-filters { justify-content: flex-start; }
}
@media (max-width: 720px) {
  .adoption-content { padding-inline: 14px; }.adoption-kpis,.adoption-team-grid { grid-template-columns: 1fr; }
  .adoption-distribution__body { grid-template-columns: 1fr; }.adoption-band-actions { grid-template-columns: 1fr; }
  .adoption-live-feed { grid-template-columns: 1fr; }.adoption-live-feed__source { border-right: 0; }.adoption-live-feed__state,.adoption-live-feed > button { grid-column: auto; justify-self: stretch; }.adoption-live-feed > button { width: 100%; }
  .adoption-briefing { grid-template-columns: 42px minmax(0,1fr); }.adoption-briefing__states,.adoption-briefing > button { grid-column: 1 / -1; }
  .adoption-guide { right: 12px; }.adoption-guide__panel { width: min(330px,calc(100vw - 24px)); }.adoption-guide__launcher { min-width: 230px; }
}
@media (prefers-reduced-motion: reduce) {
  .adoption-live em,.adoption-live-feed::after,.adoption-live-feed__source > span::before,.adoption-live-feed__source > span::after,.adoption-live-feed.is-updating,.adoption-team-card.is-highlighted { animation: none !important; }
}

/* ============================================================
   FOLLOW LIVE · signals move people, teams and guidance together
   ============================================================ */

.adoption-live-feed { grid-template-columns: auto minmax(0,1fr) auto auto; }
.adoption-live-feed__actions { display: flex; align-items: center; gap: 6px; }
.adoption-live-feed__actions > span { display: flex; align-items: center; gap: 6px; padding: 0 4px; color: var(--hz-ok-ink); font-size: 14px; font-weight: 700; white-space: nowrap; }
.adoption-live-feed__actions > span i { width: 7px; height: 7px; background: var(--hz-ok); border-radius: 50%; box-shadow: 0 0 0 4px rgba(31,169,92,.10); animation: adoption-follow-pulse 2s ease-out infinite; }
.adoption-live-feed__actions button { min-height: 38px; 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; }
.adoption-live-feed__actions button:first-of-type { color: #fff; background: var(--hz-blue); border-color: var(--hz-blue); }
.adoption-live-feed__actions > em { padding: 5px 7px; color: var(--hz-warn-ink); background: #FFF7E8; border: 1px solid #E9CE97; border-radius: var(--hz-r-pill); font-size: 14px; font-style: normal; font-weight: 700; white-space: nowrap; }
.adoption-live-feed.is-paused::after { animation-play-state: paused; opacity: .35; }
.adoption-live-feed.is-paused .adoption-live-feed__actions > span { color: #64748B; }
.adoption-live-feed.is-paused .adoption-live-feed__actions > span i { background: #94A3B8; box-shadow: none; animation: none; }

.adoption-progress { overflow: hidden; background: #fff; border: 1px solid var(--hz-line); border-radius: var(--hz-r-card); box-shadow: var(--hz-sh-hair); }
.adoption-progress > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 17px; border-bottom: 1px solid var(--hz-line-soft); }
.adoption-progress h2 { margin: 4px 0 0; font-size: 18px; }
.adoption-progress > header > span { display: flex; align-items: center; gap: 6px; color: var(--hz-ok-ink); font-size: 14px; font-weight: 700; }
.adoption-progress > header > span i { width: 7px; height: 7px; background: var(--hz-ok); border-radius: 50%; }
.adoption-progress__people { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--hz-line); }
.adoption-progress__people button { display: grid; grid-template-columns: 35px minmax(0,1fr) auto 12px auto; grid-template-rows: auto auto; align-items: center; gap: 7px 8px; min-height: 96px; padding: 14px 16px; text-align: left; background: #fff; border: 0; cursor: pointer; }
.adoption-progress__people button:hover { background: #F7FAFF; }
.adoption-progress__people button.is-detected { animation: adoption-progress-detected 1.2s ease-out; }
.adoption-progress__people button > span { grid-area: 1 / 1 / 3 / 2; display: grid; width: 35px; height: 35px; place-items: center; color: var(--hz-blue); background: #ECF3FF; border-radius: 50%; font-size: 15px; font-weight: 800; }
.adoption-progress__people button > div { grid-area: 1 / 2 / 2 / 6; display: grid; min-width: 0; gap: 3px; }
.adoption-progress__people strong { overflow: hidden; font-size: 16px; font-weight: 800; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.adoption-progress__people small { overflow: hidden; color: var(--hz-ink-3); font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.adoption-progress__people em { padding: 5px 9px; border-radius: var(--hz-r-pill); font-size: 14px; font-style: normal; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.adoption-progress__people em:first-of-type { grid-area: 2 / 2 / 3 / 3; justify-self: start; }
.adoption-progress__people button > b { grid-area: 2 / 3 / 3 / 4; }
.adoption-progress__people em:last-of-type { grid-area: 2 / 4 / 3 / 6; justify-self: start; }
.adoption-progress__people em.is-bad { color: var(--hz-bad-ink); background: #FFF0F0; }.adoption-progress__people em.is-watch { color: var(--hz-warn-ink); background: #FFF7E6; }.adoption-progress__people em.is-good { color: var(--hz-ok-ink); background: #EAF8F1; }
.adoption-progress__people button > b { color: var(--hz-blue); font-size: 16px; }

.adoption-kpi.is-live-target { animation: adoption-kpi-signal 1.15s ease-out; }
.adoption-kpi.is-live-target::after { content: "Recalculated"; position: absolute; top: 11px; right: 12px; padding: 5px 7px; color: #fff; background: var(--hz-blue); border-radius: 7px; font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
/* la tarjeta de equipo ya tiene su propio borde de color (verde/
   naranja/rojo segun el score) -- el flash azul + animacion de
   is-live-target se pisaba con ese borde, pedido de Dario sacarlo. */
.adoption-band-actions button.is-detected { animation: adoption-band-detected 1.25s ease-out; }
.adoption-people i.is-detected { animation: adoption-person-ping 1.2s ease-out; }
.adoption-guide__launcher.is-proactive { position: relative; animation: adoption-guide-nudge .72s ease-out; }
/* Tinta oscura sobre el naranja, no blanca. En reposo el relleno es
   --hz-blue y el blanco encima pasa; al entrar en is-proactive pasa a
   --hz-orange y el mismo blanco cae a 2.77:1, en tipografia de 8px.
   #351601 da 5.98:1 con el mismo matiz. Es la MISMA correccion que
   score.css hace en .score-guide__launcher.is-proactive > i: los dos
   guide bots comparten el patron, si se toca uno tocar el otro. */
.adoption-guide__launcher.is-proactive > i { color: #351601; background: var(--hz-orange); box-shadow: 0 0 0 5px rgba(249,116,53,.16); }
.adoption-guide__launcher.is-proactive::before { content: "Next action 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 adoption-follow-pulse { 70% { box-shadow: 0 0 0 9px rgba(31,169,92,0); } }
/* 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 adoption-progress-detected { }
@keyframes adoption-kpi-signal { 0% { transform: translateY(-2px); } 100% { transform: none; } }
@keyframes adoption-team-live { 0% { transform: translateY(-3px); } 100% { transform: none; } }
@keyframes adoption-band-detected { 35% { box-shadow: 0 0 0 5px rgba(36,80,228,.14); } }
@keyframes adoption-person-ping { 40% { transform: scale(1.5); box-shadow: 0 0 0 8px rgba(36,80,228,.15); } }
@keyframes adoption-guide-nudge { 35% { transform: translateX(-7px); } 70% { transform: translateX(2px); } }

@media (max-width: 1380px) {
  .adoption-live-feed { grid-template-columns: auto minmax(0,1fr) auto; }
  .adoption-live-feed__actions { grid-column: 2 / -1; justify-content: flex-end; }
  .adoption-progress__people { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .adoption-live-feed__actions > span { display: none; }
}
@media (max-width: 720px) {
  .adoption-live-feed__actions { grid-column: auto; justify-content: stretch; flex-wrap: wrap; }.adoption-live-feed__actions button { flex: 1; }
  .adoption-progress__people button { grid-template-columns: 35px minmax(0,1fr); }.adoption-progress__people em,.adoption-progress__people button > b { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .adoption-live-feed__actions > span i,.adoption-progress__people button.is-detected,.adoption-kpi.is-live-target,.adoption-team-card.is-live-target,.adoption-band-actions button.is-detected,.adoption-people i.is-detected,.adoption-guide__launcher.is-proactive { animation: none !important; }
}

/* ============================================================
   FINOPS CARD COLOR CONTRACT
   Same quiet tints, semantic borders and shadow depth as FinOps.
   ============================================================ */

.adoption-live-feed,
.adoption-briefing,
.adoption-distribution,
.adoption-progress {
  border-color: var(--hz-card-blue-border);
  background: var(--hz-card-blue-bg);
  box-shadow: var(--hz-card-state-shadow);
}

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

.adoption-kpi.is-primary {
  border-color: var(--hz-card-orange-border);
  border-left: 4px solid var(--hz-card-orange-line);
  background: var(--hz-card-orange-bg);
  box-shadow: 0 12px 30px rgba(164,83,22,.10), inset 0 1px rgba(255,255,255,.96);
}

/* La cifra vuelve al tinte de las demas. El override la pintaba en
   #B85B08 y quedaba como el unico numero grande de la fila con color
   propio: al lado del 10, el 977 y el 5 en #071B3C, el 63 se leia como
   otra clase de dato en vez de como el mismo dato en otra tarjeta. El
   estado naranja ya lo cargan la insignia, el filo, el velo y la barra
   -- cuatro gestos; el quinto sobre la cifra no agregaba lectura.
   Se borra la regla en vez de reescribirla: asi hereda .adoption-kpi
   strong y no queda un literal duplicado que mantener. */

/* EL TINTE SIGUE AL ESTADO, NO A LA POSICION.
   ------------------------------------------------------------
   Esto era `.adoption-kpi:nth-child(4)`: la cuarta tarjeta se
   pintaba de verde porque era la cuarta. Que ahi cayera "Approved"
   fue casualidad, y el resultado es que los colores mentian --
   "Improving" (segunda) salia con tinte AZUL teniendo el estado y
   el punto en verde. Reordenar las tarjetas habria movido el color
   sin mover el significado.

   Ahora el tinte se deriva del estado, que es lo que el estado
   deberia gobernar:

     is-good    -> verde   Improving, Approved
     is-course  -> azul    On course
     is-primary -> naranja Needs context (mas arriba)

   `.is-course` es nueva. Hacia falta porque los tres estados
   compartian `.is-good`, asi que no habia forma de pedirle a "On
   course" un color distinto sin separarla primero. */
.adoption-kpi.is-good {
  border-color: var(--hz-card-green-border);
  background: var(--hz-card-green-bg);
}

.adoption-kpi.is-course {
  border-color: var(--hz-card-blue-border);
  background: var(--hz-card-blue-bg);
}

/* On course va en azul completo: tinte, punto y texto. El azul de
   marca ya se usa como tinta de texto en el sistema (`is-blue`,
   medido 4.96 sobre tinte), asi que no hace falta una variante
   -ink aparte. */
.adoption-kpi header span.is-course { color: var(--hz-blue); }
.adoption-kpi header span.is-course i { background: var(--hz-blue); }

.adoption-attention {
  border-color: var(--hz-card-red-border);
  border-left: 4px solid var(--hz-card-red-line);
  background: var(--hz-card-red-bg);
  box-shadow: 0 12px 30px rgba(147,49,53,.10), inset 0 1px rgba(255,255,255,.96);
}

.adoption-attention h2 { color: var(--hz-bad-ink); }

.adoption-team-card {
  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);
}

.adoption-team-card.is-medium {
  border-color: var(--hz-card-orange-border);
  border-left-color: var(--hz-card-orange-line);
  background: var(--hz-card-orange-bg);
}

.adoption-team-card.is-low {
  border-color: var(--hz-card-red-border);
  border-left-color: var(--hz-card-red-line);
  background: var(--hz-card-red-bg);
}

.adoption-team-card:hover,
.adoption-team-card:focus-within {
  box-shadow: 0 14px 32px rgba(31,77,127,.14), inset 0 1px rgba(255,255,255,.98);
}


/* ---- 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. */
.adoption-guide { display: none !important; }

/* ---- HEADER UNIFICADO: mismo video de fondo que el resto -------
   antes esta pagina tenia su propia foto (coast); ahora usa el
   mismo .hd-art (storm.mp4) que Insights/Users/Automations/Settings,
   pedido explicito de Dario para que todas compartan el mismo fondo. */
/* :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;
}