/* ==================================================================
   CRECIMIENTO — dialecto "La hoja de ruta" (DESIGN.md §6.2)
   ------------------------------------------------------------------
   Acento musgo (--c-lime). Superficie clara (§9: nada oscuro, sombra
   sólo en lo que flota). Piezas propias:
   - riel numerado 01–10 (los espacios de trabajo, como capítulos)
   - el ciclo: seis estaciones sobre una línea (dónde está la propiedad)
   - gramática de evidencia: ● dato · ◌ estimado · ○ falta
   - rutas con estaciones y puertas de decisión (rombos) para los planes
   ================================================================== */

#section-crecimiento{
  --gx: var(--c-lime, #4d7c0f);
  --gx-ink: #3f6212;
  --gx-soft: #f1f7e6;
  --gx-softer: #f7faf1;
  --gx-line: rgba(77,124,15,.24);
  --sec-accent: var(--gx);
  --sec-accent-soft: var(--gx-soft);
}

/* ---------- Página: riel + contenido ---------- */
.gx-page{
  display: grid; grid-template-columns: 228px minmax(0,1fr); gap: 22px;
  padding: 10px 4px 48px; max-width: 1440px; margin: 0 auto; align-items: start;
}
.gx-page.single{ grid-template-columns: minmax(0,1fr); max-width: 980px; }
.gx-main{ min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.gx-muted{ color: var(--color-text-muted); }

/* ---------- Riel numerado ---------- */
.gx-rail{
  position: sticky; top: 62px; display: flex; flex-direction: column; gap: 10px;
  background: var(--color-surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  padding: 14px 10px 10px; max-height: calc(100vh - 78px); overflow: auto;
}
.gx-rail-brand{ display: flex; gap: 10px; align-items: center; padding: 2px 6px 10px; border-bottom: 1px solid var(--hairline); }
.gx-rail-mark{ width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--gx-soft); color: var(--gx-ink); flex: none; }
.gx-rail-mark svg{ width: 19px; height: 19px; }
.gx-rail-brand b{ display: block; font-family: var(--font-display); font-size: 16px; letter-spacing: -.02em; color: var(--color-primary); }
.gx-rail-brand span{ display: block; font-size: 11.5px; color: var(--color-text-muted); }
.gx-rail-list{ display: flex; flex-direction: column; gap: 2px; }
.gx-rail-item{
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: 0; border-radius: 10px; padding: 8px 8px; cursor: pointer;
  font: 500 13px/1.25 var(--font-body); color: var(--color-text-secondary);
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.gx-rail-item:hover{ background: var(--color-surface-2); color: var(--color-primary); }
.gx-rail-item.on{ background: var(--gx-soft); color: var(--gx-ink); font-weight: 650; }
.gx-rail-n{ font-family: var(--font-mono); font-size: 11px; color: var(--color-text-subtle); width: 20px; flex: none; display: grid; place-items: center; }
.gx-rail-item.on .gx-rail-n{ color: var(--gx); }
.gx-rail-n svg{ width: 15px; height: 15px; }
.gx-rail-lbl{ flex: 1; min-width: 0; }
.gx-rail-badge{ font-style: normal; font: 600 10.5px/1 var(--font-body); padding: 3px 6px; border-radius: 99px; background: var(--tone-amber-bg); color: var(--tone-amber-ink); }
.gx-rail-badge.warn{ background: var(--tone-red-bg); color: var(--tone-red-ink); }
.gx-rail-sep{ display: block; margin: 10px 8px 4px; font: 600 10px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-subtle); }
.gx-rail-foot{ border-top: 1px solid var(--hairline); padding-top: 8px; }
.gx-rail-refresh{ display: flex; gap: 8px; align-items: center; width: 100%; background: none; border: 0; cursor: pointer; font: 500 11.5px var(--font-body); color: var(--color-text-muted); padding: 6px 8px; border-radius: 8px; }
.gx-rail-refresh:hover{ background: var(--color-surface-2); color: var(--color-primary); }
.gx-rail-refresh svg{ width: 14px; height: 14px; }

/* ---------- Encabezado de cada espacio (franja compacta §9.4) ---------- */
.gx-head{
  display: flex; gap: 18px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap;
  padding: 20px 24px; border-radius: var(--radius-xl); border: 1px solid var(--hairline);
  background: radial-gradient(700px 240px at 92% -40%, color-mix(in srgb, var(--gx) 12%, transparent), transparent 66%),
              linear-gradient(120deg, #fdfefb, #f8faf3 60%, #f7f8f4);
}
.gx-head-txt{ min-width: 0; flex: 1 1 380px; }
.gx-head-eyebrow{ display: flex; gap: 8px; align-items: center; font: 600 10.5px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--gx-ink); }
.gx-head-eyebrow b{ font-family: var(--font-mono); font-weight: 500; letter-spacing: 0; padding: 3px 6px; border-radius: 6px; background: var(--gx-soft); }
.gx-head-title{ font: 700 var(--head-title, clamp(1.4rem,2vw,1.8rem))/1.14 var(--font-display); letter-spacing: -.026em; color: var(--color-primary); margin: 8px 0 6px; }
.gx-head-title .hl-em{ color: var(--gx-ink); }
.gx-head-sub{ font-size: 13.5px; line-height: 1.55; max-width: 70ch; color: var(--color-text-secondary); margin: 0; }
.gx-head-aside{ display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------- Gramática de evidencia ---------- */
.gx-ev{ display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; vertical-align: middle; position: relative; top: -1px; }
.gx-ev-dato{ background: var(--gx); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gx) 18%, transparent); }
.gx-ev-est{ border: 1.6px dashed var(--c-amber, #d97706); background: transparent; width: 9px; height: 9px; }
.gx-ev-falta{ border: 1.6px solid var(--color-text-subtle); background: transparent; width: 9px; height: 9px; }
.gx-evc{ display: inline-flex; gap: 6px; align-items: center; font: 600 11px/1 var(--font-body); padding: 4px 8px; border-radius: 99px; background: var(--color-surface-2); color: var(--color-text-secondary); white-space: nowrap; }
.gx-evc-dato{ background: var(--gx-soft); color: var(--gx-ink); }
.gx-evc-est{ background: var(--tone-amber-bg); color: var(--tone-amber-ink); }
.gx-val{ display: inline-flex; gap: 7px; align-items: center; }
.gx-val b{ font-weight: 650; font-variant-numeric: tabular-nums; }
.gx-val em{ font-style: normal; color: var(--color-text-muted); font-size: .8em; }
.gx-val.falta b{ color: var(--color-text-subtle); }
.gx-legend{ display: flex; gap: 6px 18px; flex-wrap: wrap; font-size: 11.5px; color: var(--color-text-muted); }
.gx-legend span{ display: inline-flex; gap: 6px; align-items: center; }
.gx-legend b{ color: var(--color-text-secondary); font-weight: 600; }

/* ---------- Tarjeta / stat / tags / medidor ---------- */
.gx-card{ background: var(--color-surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); min-width: 0; }
.gx-card-head{ display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 16px 18px 0; }
.gx-card-id{ display: flex; gap: 11px; align-items: flex-start; min-width: 0; }
.gx-card-ico{ width: 32px; height: 32px; border-radius: 10px; background: var(--gx-softer); color: var(--gx-ink); display: grid; place-items: center; flex: none; border: 1px solid var(--gx-line); }
.gx-card-ico svg{ width: 17px; height: 17px; }
.gx-card-head h3{ font: 650 15px/1.3 var(--font-body); color: var(--color-primary); margin: 0; letter-spacing: -.01em; }
.gx-card-head p{ margin: 3px 0 0; font-size: 12.5px; color: var(--color-text-muted); line-height: 1.45; }
.gx-card-body{ padding: 14px 18px 18px; min-width: 0; }
.gx-card-foot{ border-top: 1px solid var(--hairline); padding: 10px 18px; font-size: 12px; color: var(--color-text-muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.gx-card.tint{ background: var(--gx-softer); border-color: var(--gx-line); }
.gx-grid{ display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.gx-grid.two{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.gx-grid.asym{ grid-template-columns: minmax(0,1.65fr) minmax(0,1fr); }
.gx-grid.asym-r{ grid-template-columns: minmax(0,1fr) minmax(0,1.65fr); }

.gx-stats{ display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--color-surface); overflow: hidden; }
.gx-stat{ display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-right: 1px solid var(--hairline); min-width: 0; }
.gx-stat:last-child{ border-right: 0; }
.gx-stat-lbl{ font: 600 10.5px/1.2 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); }
.gx-stat-val{ font-size: 21px; color: var(--color-primary); }
.gx-stat-val .gx-val b{ font-weight: 700; letter-spacing: -.02em; }
.gx-stat-foot{ font-size: 11.5px; color: var(--color-text-muted); line-height: 1.4; }
.gx-stat.t-red .gx-stat-val{ color: var(--tone-red-ink); }
.gx-stat.t-green .gx-stat-val{ color: var(--tone-green-ink); }

.gx-tag{ display: inline-flex; align-items: center; gap: 5px; font: 600 11px/1 var(--font-body); padding: 4px 8px; border-radius: 99px; background: var(--tone-slate-bg); color: var(--tone-slate-ink); white-space: nowrap; }
.gx-tag.t-green{ background: var(--tone-green-bg); color: var(--tone-green-ink); }
.gx-tag.t-amber{ background: var(--tone-amber-bg); color: var(--tone-amber-ink); }
.gx-tag.t-red{ background: var(--tone-red-bg); color: var(--tone-red-ink); }
.gx-tag.t-blue{ background: var(--tone-blue-bg); color: var(--tone-blue-ink); }
.gx-tag.t-violet{ background: var(--tone-violet-bg); color: var(--tone-violet-ink); }
.gx-tag.t-lime{ background: var(--gx-soft); color: var(--gx-ink); }
.gx-tag svg{ width: 12px; height: 12px; }

.gx-meter{ display: block; height: 6px; border-radius: 99px; background: var(--color-surface-2); overflow: hidden; min-width: 60px; }
.gx-meter i{ display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--gx); transition: width var(--dur-slow) ease; }
.gx-meter.t-amber i{ background: var(--c-amber); }
.gx-meter.t-red i{ background: var(--tone-red-ink); }
.gx-meter.t-blue i{ background: var(--color-accent); }

.gx-note{ display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: var(--radius-md); background: var(--gx-softer); border: 1px solid var(--gx-line); font-size: 12.5px; line-height: 1.5; color: var(--color-text-secondary); }
.gx-note svg{ width: 16px; height: 16px; flex: none; color: var(--gx-ink); margin-top: 1px; }
.gx-note.t-warn{ background: var(--tone-amber-bg); border-color: rgba(217,119,6,.25); }
.gx-note.t-warn svg{ color: var(--tone-amber-ink); }

.gx-empty{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 38px 20px; color: var(--color-text-muted); font-size: 13px; }
.gx-empty-ico{ width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: var(--gx-soft); color: var(--gx-ink); }
.gx-empty-ico svg{ width: 22px; height: 22px; }
.gx-empty b{ color: var(--color-primary); font-size: 15px; }
.gx-empty span{ max-width: 52ch; line-height: 1.5; }
.gx-empty-act{ margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.gx-skel{ display: flex; flex-direction: column; gap: 10px; padding: 8px 0; }
.gx-skel .skeleton{ height: 12px; border-radius: 6px; }

/* Botones de la sección: se usan los del sistema (.mb / .nbtn); esto sólo ajusta íconos */
#section-crecimiento .mb svg, #section-crecimiento .nbtn svg{ width: 15px; height: 15px; vertical-align: -3px; margin-right: 4px; }
#section-crecimiento .mb.gx-icbtn{ padding-left: 10px; padding-right: 10px; }
#section-crecimiento .mb.gx-icbtn svg{ margin-right: 0; }
.gx-link{ background: none; border: 0; padding: 0; cursor: pointer; font: 600 12.5px var(--font-body); color: var(--gx-ink); display: inline-flex; gap: 5px; align-items: center; }
.gx-link:hover{ text-decoration: underline; }
.gx-link svg{ width: 14px; height: 14px; }

/* ---------- El ciclo (elemento firma) ---------- */
.gx-cycle{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); position: relative; }
.gx-cycle::before{ content: ''; position: absolute; left: 8.33%; right: 8.33%; top: 17px; height: 2px; background: repeating-linear-gradient(90deg, var(--gx-line) 0 6px, transparent 6px 11px); }
.gx-cy{ position: relative; display: flex; justify-content: center; }
.gx-cy button{ display: flex; flex-direction: column; align-items: center; gap: 7px; background: none; border: 0; cursor: pointer; padding: 0 4px; font-family: var(--font-body); text-align: center; }
.gx-cy-dot{ width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 600 13px var(--font-mono); background: var(--color-surface); border: 1.5px solid var(--hairline-strong); color: var(--color-text-subtle); position: relative; z-index: 1; transition: transform var(--dur-base) ease; }
.gx-cy-dot svg{ width: 16px; height: 16px; }
.gx-cy.done .gx-cy-dot{ background: var(--gx); border-color: var(--gx); color: #fff; }
.gx-cy.now .gx-cy-dot{ border-color: var(--gx); color: var(--gx-ink); box-shadow: 0 0 0 5px color-mix(in srgb, var(--gx) 14%, transparent); }
.gx-cy.now .gx-cy-dot::after{ content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid var(--gx); opacity: .5; animation: gxBreath 2.6s ease-in-out infinite; }
.gx-cy button:hover .gx-cy-dot{ transform: translateY(-1px); }
.gx-cy-lbl{ font-size: 12.5px; font-weight: 650; color: var(--color-primary); }
.gx-cy.next .gx-cy-lbl{ color: var(--color-text-muted); font-weight: 500; }
.gx-cy-hint{ font-size: 11.5px; color: var(--color-text-muted); line-height: 1.35; max-width: 17ch; }
.gx-cycle.compact .gx-cy-dot{ width: 26px; height: 26px; font-size: 11px; }
.gx-cycle.compact::before{ top: 12px; }
.gx-cycle.compact .gx-cy-lbl{ font-size: 11px; }
@keyframes gxBreath{ 0%,100%{ transform: scale(.94); opacity: .55 } 50%{ transform: scale(1.08); opacity: .15 } }

/* Pantalla de carga: el ciclo se recorre */
.gx-loading{ display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 70px 20px; grid-template-columns: none; }
.gx-loading p{ color: var(--color-text-muted); font-size: 13px; }
.gx-loading-route{ display: flex; gap: 0; align-items: center; flex-wrap: wrap; justify-content: center; }
.gx-loading-route span{ display: flex; flex-direction: column; align-items: center; gap: 8px; width: 96px; font-size: 11.5px; color: var(--color-text-muted); }
.gx-loading-route i{ width: 14px; height: 14px; border-radius: 50%; background: var(--gx-soft); border: 1.5px solid var(--gx-line); animation: gxStep 1.8s ease-in-out infinite; animation-delay: calc(var(--i) * .22s); }
@keyframes gxStep{ 0%,100%{ background: var(--gx-soft); transform: scale(1) } 40%{ background: var(--gx); transform: scale(1.25) } }

/* ---------- Activar (migración pendiente) ---------- */
.gx-activate{ background: var(--color-surface); border: 1px solid var(--hairline); border-radius: var(--radius-xl); padding: 30px 32px; display: flex; flex-direction: column; gap: 14px; }
.gx-activate h2{ font: 700 1.5rem/1.2 var(--font-display); color: var(--color-primary); letter-spacing: -.02em; margin: 14px 0 0; }
.gx-activate p{ margin: 0; line-height: 1.6; color: var(--color-text-secondary); max-width: 70ch; }
.gx-activate code{ font-family: var(--font-mono); font-size: 12px; background: var(--color-surface-2); padding: 2px 6px; border-radius: 6px; }
.gx-activate .mb{ align-self: flex-start; }

/* ---------- Listas con hairlines ---------- */
.gx-list{ display: flex; flex-direction: column; }
.gx-li{ display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-top: 1px solid var(--hairline); min-width: 0; }
.gx-li:first-child{ border-top: 0; padding-top: 2px; }
.gx-li-main{ flex: 1; min-width: 0; }
.gx-li-main b{ display: block; font-weight: 600; color: var(--color-primary); font-size: 13.5px; line-height: 1.35; }
.gx-li-main span{ display: block; font-size: 12px; color: var(--color-text-muted); margin-top: 2px; line-height: 1.45; }
.gx-li-side{ flex: none; display: flex; gap: 8px; align-items: center; }
.gx-facts{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.gx-facts li{ display: flex; gap: 9px; align-items: baseline; font-size: 12.5px; line-height: 1.45; color: var(--color-text-secondary); }
.gx-facts li .gx-ev{ top: 0; }

/* ---------- Próximas acciones ---------- */
.gx-next{ display: flex; flex-direction: column; }
.gx-next-item{ display: grid; grid-template-columns: 28px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--hairline); }
.gx-next-item:first-child{ border-top: 0; padding-top: 0; }
.gx-next-n{ font: 500 13px var(--font-mono); color: var(--gx); width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--gx-soft); }
.gx-next-item.t-red .gx-next-n{ background: var(--tone-red-bg); color: var(--tone-red-ink); }
.gx-next-item.t-amber .gx-next-n{ background: var(--tone-amber-bg); color: var(--tone-amber-ink); }
.gx-next-item.t-violet .gx-next-n{ background: var(--tone-violet-bg); color: var(--tone-violet-ink); }
.gx-next-item.t-blue .gx-next-n{ background: var(--tone-blue-bg); color: var(--tone-blue-ink); }
.gx-next-item b{ display: block; font-size: 13.5px; color: var(--color-primary); font-weight: 600; line-height: 1.35; }
.gx-next-item span{ display: block; font-size: 12px; color: var(--color-text-muted); margin-top: 2px; line-height: 1.4; }

/* ---------- Salud por dimensión ---------- */
.gx-dims{ display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px; }
.gx-dimchip{ display: flex; flex-direction: column; gap: 8px; padding: 12px 13px; border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--color-surface); cursor: pointer; text-align: left; font-family: var(--font-body); transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease; }
.gx-dimchip:hover{ border-color: var(--gx-line); background: var(--gx-softer); }
.gx-dimchip-top{ display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.gx-dimchip-top b{ font-size: 12.5px; color: var(--color-primary); font-weight: 600; display: flex; gap: 7px; align-items: center; }
.gx-dimchip-top b svg{ width: 14px; height: 14px; color: var(--gx-ink); }
.gx-dimchip-score{ font: 600 13px var(--font-mono); color: var(--color-primary); }
.gx-dimchip-score.none{ color: var(--color-text-subtle); font-family: var(--font-body); font-size: 11px; font-weight: 600; }
.gx-dimchip small{ font-size: 11.5px; color: var(--color-text-muted); line-height: 1.35; }

/* Ficha completa de una dimensión */
.gx-dim{ border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--color-surface); }
.gx-dim > summary{ list-style: none; cursor: pointer; display: grid; grid-template-columns: 34px minmax(0,1fr) 120px auto 18px; gap: 12px; align-items: center; padding: 14px 16px; }
.gx-dim > summary::-webkit-details-marker{ display: none; }
.gx-dim-ico{ width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--gx-softer); color: var(--gx-ink); border: 1px solid var(--gx-line); }
.gx-dim-ico svg{ width: 17px; height: 17px; }
.gx-dim-t b{ display: block; font-size: 14px; color: var(--color-primary); font-weight: 650; }
.gx-dim-t span{ display: block; font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.gx-dim-chev{ width: 16px; height: 16px; color: var(--color-text-subtle); transition: transform var(--dur-base) ease; }
.gx-dim[open] .gx-dim-chev{ transform: rotate(90deg); }
.gx-dim-body{ padding: 0 16px 16px 62px; display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 18px; }
.gx-dim-acts{ grid-column: 1 / -1; }
.gx-dim-body h4{ margin: 0 0 8px; font: 600 10.5px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); }
.gx-ask{ display: flex; flex-direction: column; gap: 8px; }
.gx-ask-item{ display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.45; color: var(--color-text-secondary); padding: 9px 11px; border-radius: 10px; border: 1px dashed var(--hairline-strong); background: var(--color-surface-2); }
.gx-ask-item .gx-ev{ margin-top: 4px; }
.gx-ask-item button{ margin-left: auto; flex: none; }

/* ---------- Escenarios ---------- */
.gx-scns{ display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.gx-scn{ border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 14px 16px; background: var(--color-surface); display: flex; flex-direction: column; gap: 9px; position: relative; }
.gx-scn.primary{ border-color: var(--gx); background: var(--gx-softer); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gx) 10%, transparent); }
.gx-scn-top{ display: flex; gap: 10px; align-items: center; }
.gx-scn-id{ font: 600 12px var(--font-mono); width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--color-surface-2); color: var(--color-text-secondary); flex: none; }
.gx-scn.primary .gx-scn-id{ background: var(--gx); color: #fff; }
.gx-scn-top b{ font-size: 14px; color: var(--color-primary); font-weight: 650; line-height: 1.25; flex: 1; }
.gx-scn-score{ font: 600 12px var(--font-mono); color: var(--color-text-muted); }
.gx-scn p{ margin: 0; font-size: 12.5px; color: var(--color-text-secondary); line-height: 1.5; }
.gx-signals{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.gx-signals li{ display: flex; gap: 8px; align-items: baseline; font-size: 12px; line-height: 1.4; color: var(--color-text-secondary); }
.gx-sig-mark{ font: 700 11px var(--font-mono); width: 14px; flex: none; text-align: center; }
.gx-sig-mark.yes{ color: var(--gx-ink); }
.gx-sig-mark.no{ color: var(--color-text-subtle); }
.gx-sig-mark.unk{ color: var(--c-amber); }
.gx-signals li.no{ color: var(--color-text-muted); }

/* Dirección principal: el veredicto */
.gx-verdict{ display: grid; grid-template-columns: minmax(0,1fr) 230px; gap: 22px; padding: 20px 22px; border-radius: var(--radius-xl); border: 1px solid var(--gx-line); background: linear-gradient(135deg, #fbfdf6, #f3f8e9); }
.gx-verdict-eyebrow{ font: 600 10.5px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--gx-ink); }
.gx-verdict h3{ font: 700 1.35rem/1.2 var(--font-display); letter-spacing: -.02em; color: var(--color-primary); margin: 8px 0 8px; }
.gx-verdict p{ margin: 0 0 10px; font-size: 13.5px; line-height: 1.6; color: var(--color-text-secondary); max-width: 72ch; }
.gx-verdict-side{ display: flex; flex-direction: column; gap: 10px; border-left: 1px solid var(--gx-line); padding-left: 18px; font-size: 12.5px; color: var(--color-text-secondary); }
.gx-verdict-side b{ color: var(--color-primary); }

/* ---------- Iniciativas (fichas ordenadas) ---------- */
.gx-inits{ display: flex; flex-direction: column; gap: 10px; }
.gx-init{ display: grid; grid-template-columns: 46px minmax(0,1fr) auto; gap: 14px; padding: 14px 16px; border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--color-surface); align-items: start; }
.gx-init.top{ border-color: var(--gx-line); background: var(--gx-softer); }
.gx-init-rank{ font: 500 22px/1 var(--font-mono); color: var(--gx); padding-top: 2px; text-align: center; }
.gx-init-main{ min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.gx-init-title{ display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.gx-init-title b{ font-size: 14.5px; color: var(--color-primary); font-weight: 650; line-height: 1.3; }
.gx-init-hyp{ margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--color-text-secondary); }
.gx-init-why{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.gx-init-why li{ font-size: 12px; color: var(--color-text-secondary); line-height: 1.45; padding-left: 14px; position: relative; }
.gx-init-why li::before{ content: ''; position: absolute; left: 2px; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--gx); }
.gx-init-nums{ display: flex; gap: 6px 18px; flex-wrap: wrap; font-size: 12px; color: var(--color-text-muted); }
.gx-init-nums span{ display: inline-flex; gap: 6px; align-items: center; }
.gx-init-nums b{ color: var(--color-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.gx-init-act{ display: flex; flex-direction: column; gap: 6px; align-items: stretch; min-width: 128px; }
.gx-init-act .mb{ white-space: nowrap; justify-content: center; }
.gx-init.blocked{ background: var(--color-surface-2); }
.gx-init.blocked .gx-init-rank{ color: var(--color-text-subtle); }
.gx-blocker{ display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.45; color: var(--tone-amber-ink); background: var(--tone-amber-bg); border-radius: 9px; padding: 7px 10px; }
.gx-blocker svg{ width: 14px; height: 14px; flex: none; margin-top: 1px; }

/* ---------- Plan por fases: ruta con puertas ---------- */
.gx-route{ display: flex; flex-direction: column; position: relative; padding-left: 4px; }
.gx-phase{ display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 14px; position: relative; padding-bottom: 6px; }
.gx-phase::before{ content: ''; position: absolute; left: 19px; top: 40px; bottom: -6px; width: 2px; background: var(--gx-line); }
.gx-phase:last-child::before{ display: none; }
.gx-phase-dot{ width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 600 14px var(--font-mono); background: var(--color-surface); border: 2px solid var(--gx-line); color: var(--gx-ink); position: relative; z-index: 1; }
.gx-phase.live .gx-phase-dot{ background: var(--gx); border-color: var(--gx); color: #fff; }
.gx-phase.done .gx-phase-dot{ background: var(--gx-soft); border-color: var(--gx); }
.gx-phase-body{ padding: 6px 0 14px; min-width: 0; }
.gx-phase-body h4{ margin: 0; font: 650 14.5px/1.3 var(--font-body); color: var(--color-primary); }
.gx-phase-body > p{ margin: 3px 0 10px; font-size: 12.5px; color: var(--color-text-muted); line-height: 1.5; }
.gx-phase-items{ display: flex; flex-direction: column; gap: 6px; }
.gx-phase-item{ display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 11px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--color-surface); font-size: 12.5px; }
.gx-phase-item b{ font-weight: 600; color: var(--color-primary); }
.gx-phase-item.blocked{ background: var(--color-surface-2); color: var(--color-text-muted); }
.gx-phase-item.blocked b{ color: var(--color-text-muted); }
.gx-phase-item.later{ border-style: dashed; background: var(--gx-softer); }
.gx-phase-item.later b{ color: var(--color-text-secondary); font-weight: 550; }
.gx-gate{ display: flex; gap: 12px; align-items: center; margin: 4px 0 12px; padding-left: 0; }
.gx-gate-dia{ width: 20px; height: 20px; transform: rotate(45deg); border-radius: 5px; border: 2px solid var(--c-amber); background: var(--color-surface); flex: none; margin-left: 14px; margin-right: 6px; position: relative; z-index: 1; }
.gx-gate.pass .gx-gate-dia{ background: var(--gx); border-color: var(--gx); }
.gx-gate.wait .gx-gate-dia{ border-color: var(--c-amber); }
.gx-gate.manual .gx-gate-dia, .gx-gate.unknown .gx-gate-dia{ border-color: var(--hairline-strong); border-style: dashed; }
.gx-gate-txt{ font-size: 12px; line-height: 1.45; color: var(--color-text-secondary); padding: 7px 11px; border-radius: 10px; background: var(--tone-amber-bg); flex: 1; min-width: 0; }
.gx-gate.pass .gx-gate-txt{ background: var(--gx-soft); color: var(--gx-ink); }
.gx-gate.manual .gx-gate-txt, .gx-gate.unknown .gx-gate-txt{ background: var(--color-surface-2); }

/* ---------- Metas ---------- */
.gx-goal{ border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--color-surface); padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.gx-goal-top{ display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.gx-goal-top h3{ margin: 0; font: 650 16px/1.3 var(--font-body); color: var(--color-primary); }
.gx-goal-top p{ margin: 4px 0 0; font-size: 12.5px; color: var(--color-text-muted); }
.gx-goal-track{ display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; align-items: center; font-size: 12.5px; color: var(--color-text-secondary); }
.gx-goal-track b{ font-variant-numeric: tabular-nums; color: var(--color-primary); }
.gx-progress{ position: relative; height: 10px; border-radius: 99px; background: var(--color-surface-2); overflow: visible; }
.gx-progress i{ position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 99px; background: var(--gx); }
.gx-progress u{ position: absolute; top: -4px; bottom: -4px; width: 2px; left: var(--x); background: var(--color-primary); border-radius: 2px; }
.gx-conflict{ display: flex; gap: 10px; padding: 11px 14px; border-radius: var(--radius-md); background: var(--tone-red-bg); color: var(--tone-red-ink); font-size: 12.5px; line-height: 1.5; align-items: flex-start; }
.gx-conflict svg{ width: 16px; height: 16px; flex: none; margin-top: 1px; }

/* ---------- Alertas ---------- */
.gx-warns{ display: flex; flex-direction: column; gap: 8px; }
.gx-warn{ display: grid; grid-template-columns: 8px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--hairline); background: var(--color-surface); }
.gx-warn-bar{ align-self: stretch; border-radius: 4px; background: var(--tone-slate-ink); opacity: .35; }
.gx-warn.high .gx-warn-bar{ background: var(--tone-red-ink); opacity: 1; }
.gx-warn.med .gx-warn-bar{ background: var(--c-amber); opacity: 1; }
.gx-warn b{ display: block; font-size: 13px; color: var(--color-primary); font-weight: 600; }
.gx-warn span{ display: block; font-size: 12px; color: var(--color-text-muted); margin-top: 2px; line-height: 1.4; }

/* ---------- Tablas de documento (cifras a la derecha) ---------- */
.gx-tablewrap{ overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--radius-md); }
.gx-table{ width: 100%; border-collapse: collapse; font-size: 12.5px; }
.gx-table th{ text-align: left; font: 600 10.5px/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); padding: 10px 12px; background: var(--color-surface-2); border-bottom: 1px solid var(--hairline); white-space: nowrap; }
.gx-table td{ padding: 9px 12px; border-top: 1px solid var(--hairline); color: var(--color-text-secondary); vertical-align: top; }
.gx-table tr:first-child td{ border-top: 0; }
.gx-table tr:hover td{ background: var(--gx-softer); }
.gx-table .num{ text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gx-table td b{ color: var(--color-primary); font-weight: 600; }

/* ---------- Gráficos SVG propios ---------- */
.gx-chartbox{ display: flex; flex-direction: column; gap: 6px; width: 100%; }
.gx-ch-plot{ position: relative; height: var(--h, 180px); }
.gx-chart{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.gx-chart .ax{ stroke: var(--hairline-strong); stroke-width: 1; }
.gx-chart .bar{ fill: var(--gx); }
.gx-chart .bar.alt{ fill: color-mix(in srgb, var(--gx) 38%, #fff); }
.gx-chart .bar.ghost{ fill: color-mix(in srgb, var(--gx) 14%, #fff); }
.gx-chart .bar.warn{ fill: var(--c-amber); }
.gx-chart .line{ fill: none; stroke: var(--gx); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.gx-chart .line.alt{ stroke: var(--color-text-subtle); stroke-dasharray: 4 4; stroke-width: 1.6; }
.gx-chart .line.proj{ stroke: var(--c-amber); stroke-dasharray: 5 4; }
.gx-chart .line.ghost{ stroke: color-mix(in srgb, var(--gx) 45%, #fff); stroke-dasharray: 3 4; }
.gx-chart .area{ fill: color-mix(in srgb, var(--gx) 11%, transparent); }
.gx-chart .thr{ stroke: var(--tone-red-ink); stroke-dasharray: 3 4; stroke-width: 1.4; }
.gx-ch-y{ position: absolute; left: 0; font: 500 11px var(--font-body); color: var(--color-text-muted); background: color-mix(in srgb, var(--color-surface) 80%, transparent); padding: 0 4px; border-radius: 4px; }
.gx-ch-y.top{ top: -2px; }
.gx-ch-y.bot{ bottom: 2px; }
.gx-ch-thr{ position: absolute; right: 0; transform: translateY(-120%); font: 600 11px var(--font-body); color: var(--tone-red-ink); background: var(--color-surface); padding: 0 4px; border-radius: 4px; }
.gx-ch-x{ position: relative; height: 16px; }
.gx-ch-x span{ position: absolute; transform: translateX(-50%); font: 500 11px var(--font-body); color: var(--color-text-muted); white-space: nowrap; }
.gx-chart-legend{ display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--color-text-muted); margin-top: 6px; }
.gx-chart-legend i{ display: inline-block; width: 12px; height: 3px; border-radius: 2px; background: var(--gx); vertical-align: middle; margin-right: 6px; }
.gx-chart-legend i.alt{ background: var(--color-text-subtle); }
.gx-chart-legend i.proj{ background: var(--c-amber); }
.gx-chart-legend i.ghost{ background: color-mix(in srgb, var(--gx) 30%, #fff); height: 8px; }

/* ---------- Segmentado / pestañas internas ---------- */
.gx-seg{ display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--color-surface-2); flex-wrap: wrap; }
.gx-seg button{ border: 0; background: none; padding: 7px 12px; border-radius: 9px; font: 600 12.5px var(--font-body); color: var(--color-text-muted); cursor: pointer; transition: background var(--dur-fast) ease, color var(--dur-fast) ease; white-space: nowrap; }
.gx-seg button:hover{ color: var(--color-primary); }
.gx-seg button.on{ background: var(--color-surface); color: var(--gx-ink); box-shadow: var(--shadow-xs); }
.gx-subnav{ display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.gx-subnav::-webkit-scrollbar{ display: none; }
.gx-subnav button{ border: 1px solid var(--hairline); background: var(--color-surface); padding: 7px 13px; border-radius: 99px; font: 600 12.5px var(--font-body); color: var(--color-text-secondary); cursor: pointer; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.gx-subnav button svg{ width: 14px; height: 14px; }
.gx-subnav button.on{ background: var(--gx-soft); border-color: var(--gx-line); color: var(--gx-ink); }

/* ---------- Formularios y modales de la sección ---------- */
.gx-modal-box{ max-width: 720px !important;
  /* Los modales viven fuera de la sección: llevan su propio acento */
  --gx: var(--c-lime, #4d7c0f); --gx-ink: #3f6212; --gx-soft: #f1f7e6; --gx-softer: #f7faf1; --gx-line: rgba(77,124,15,.24); }
.gx-modal-box.modal-wide{ max-width: 980px !important; }
.gx-modal h3{ margin: 0 0 4px; font: 700 1.2rem/1.3 var(--font-display); color: var(--color-primary); letter-spacing: -.015em; }
.gx-modal .gx-modal-sub{ margin: 0 0 16px; font-size: 13px; color: var(--color-text-muted); line-height: 1.5; }
.gx-hint{ display: block; font-size: 11.5px; color: var(--color-text-muted); margin-top: 4px; line-height: 1.4; }
.gx-field label em{ font-style: normal; font-weight: 500; color: var(--color-text-subtle); font-size: 11px; }
.gx-form-grid{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 14px; }
.gx-form-grid.three{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.gx-choice{ display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 8px; }
.gx-choice label{ display: flex; gap: 9px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: 12px; cursor: pointer; font-size: 12.5px; line-height: 1.35; background: var(--color-surface); transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease; }
.gx-choice label:hover{ border-color: var(--gx-line); }
.gx-choice input{ margin-top: 2px; accent-color: var(--gx); }
/* Los modales del sistema estiran todos los <input>: radios y casillas vuelven a su tamaño */
.gx-modal input[type=radio], .gx-modal input[type=checkbox], .gx-onb input[type=radio], .gx-onb input[type=checkbox], #section-crecimiento input[type=checkbox]{
  width: 16px !important; height: 16px !important; min-width: 16px; min-height: 0 !important; padding: 0 !important;
  margin: 2px 0 0 !important; flex: none; box-shadow: none !important; border-radius: 4px; accent-color: var(--gx, #4d7c0f);
}
.gx-modal input[type=radio], .gx-onb input[type=radio]{ border-radius: 50%; }
.gx-choice label:has(input:checked){ border-color: var(--gx); background: var(--gx-softer); }
.gx-choice label b{ display: block; color: var(--color-primary); font-weight: 600; }
.gx-choice label span{ display: block; color: var(--color-text-muted); font-size: 11.5px; margin-top: 2px; }

/* ---------- Arranque guiado ---------- */
.gx-onb{ max-width: 920px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; padding: 8px 0 40px; }
.gx-onb-head{ text-align: left; padding: 26px 28px; border-radius: var(--radius-xl); border: 1px solid var(--hairline); background: radial-gradient(800px 260px at 90% -30%, color-mix(in srgb, var(--gx) 14%, transparent), transparent 66%), linear-gradient(120deg, #fdfefb, #f6f9ef); display: flex; flex-direction: column; gap: 14px; }
.gx-onb-head h2{ margin: 0; font: 700 clamp(1.5rem, 2.4vw, 2rem)/1.15 var(--font-display); letter-spacing: -.025em; color: var(--color-primary); }
.gx-onb-head p{ margin: 0; font-size: 14px; line-height: 1.6; color: var(--color-text-secondary); max-width: 70ch; }
.gx-onb-steps{ display: flex; gap: 6px; flex-wrap: wrap; }
.gx-onb-steps span{ display: inline-flex; gap: 7px; align-items: center; font: 600 12px var(--font-body); padding: 6px 11px; border-radius: 99px; background: var(--color-surface); border: 1px solid var(--hairline); color: var(--color-text-muted); }
.gx-onb-steps span i{ font-style: normal; font-family: var(--font-mono); font-size: 11px; }
.gx-onb-steps span.on{ background: var(--gx); border-color: var(--gx); color: #fff; }
.gx-onb-steps span.done{ background: var(--gx-soft); border-color: var(--gx-line); color: var(--gx-ink); }
.gx-onb-foot{ display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.gx-import{ display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.gx-import-item{ display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 12px; border: 1px solid var(--hairline); background: var(--color-surface); }
.gx-import-item svg{ width: 18px; height: 18px; color: var(--gx-ink); flex: none; margin-top: 1px; }
.gx-import-item b{ display: block; font-size: 13px; color: var(--color-primary); font-weight: 600; }
.gx-import-item span{ display: block; font-size: 11.5px; color: var(--color-text-muted); margin-top: 2px; line-height: 1.4; }
.gx-q{ border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--color-surface); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.gx-q-top{ display: flex; gap: 10px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
.gx-q-top b{ font-size: 14px; color: var(--color-primary); font-weight: 650; }
.gx-q-why{ font-size: 12px; color: var(--color-text-muted); line-height: 1.45; margin: 0; }
.gx-q .form-row{ margin-bottom: 0; }

/* ---------- Simuladores ---------- */
.gx-sim{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.5fr); gap: 18px; }
.gx-sim-in{ display: flex; flex-direction: column; gap: 12px; }
.gx-range{ display: flex; flex-direction: column; gap: 5px; }
.gx-range-top{ display: flex; justify-content: space-between; font-size: 12.5px; color: var(--color-text-secondary); }
.gx-range-top b{ color: var(--color-primary); font-variant-numeric: tabular-nums; }
.gx-range input[type=range]{ width: 100%; accent-color: var(--gx); }
.gx-scen-cols{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.gx-scen-col{ border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 12px; display: flex; flex-direction: column; gap: 6px; background: var(--color-surface); }
.gx-scen-col.best{ border-color: var(--gx); background: var(--gx-softer); }
.gx-scen-col h5{ margin: 0; font: 600 11px/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }
.gx-scen-col .big{ font: 700 20px/1.1 var(--font-body); letter-spacing: -.02em; color: var(--color-primary); font-variant-numeric: tabular-nums; }
.gx-scen-col .row{ display: flex; justify-content: space-between; font-size: 12px; color: var(--color-text-muted); gap: 8px; }
.gx-scen-col .row b{ color: var(--color-text-secondary); font-weight: 600; font-variant-numeric: tabular-nums; }
.gx-delta-up{ color: var(--tone-green-ink) !important; }
.gx-delta-down{ color: var(--tone-red-ink) !important; }
.gx-verdict-pill{ display: inline-flex; gap: 8px; align-items: center; padding: 8px 12px; border-radius: 12px; font: 650 13px var(--font-body); }
.gx-verdict-pill.t-green{ background: var(--tone-green-bg); color: var(--tone-green-ink); }
.gx-verdict-pill.t-amber{ background: var(--tone-amber-bg); color: var(--tone-amber-ink); }
.gx-verdict-pill.t-red{ background: var(--tone-red-bg); color: var(--tone-red-ink); }
.gx-verdict-pill.t-slate{ background: var(--tone-slate-bg); color: var(--tone-slate-ink); }
.gx-verdict-pill svg{ width: 16px; height: 16px; }

/* ---------- Kanban liviano (acciones / backlog) ---------- */
.gx-board{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; align-items: start; }
.gx-col{ background: var(--color-surface-2); border-radius: var(--radius-lg); padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gx-col-head{ display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 4px; font: 600 11px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }
.gx-col-head em{ font-style: normal; font-family: var(--font-mono); }
.gx-task{ background: var(--color-surface); border: 1px solid var(--hairline); border-radius: 12px; padding: 10px 11px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; transition: border-color var(--dur-fast) ease; }
.gx-task:hover{ border-color: var(--gx-line); }
.gx-task b{ font-size: 12.5px; color: var(--color-primary); font-weight: 600; line-height: 1.35; }
.gx-task-meta{ display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 11px; color: var(--color-text-muted); }
.gx-task-meta .late{ color: var(--tone-red-ink); font-weight: 600; }
.gx-task-acts{ display: flex; gap: 6px; }
.gx-task-acts button{ border: 1px solid var(--hairline); background: var(--color-surface); border-radius: 8px; padding: 4px 8px; font: 600 11px var(--font-body); color: var(--color-text-secondary); cursor: pointer; }
.gx-task-acts button:hover{ border-color: var(--gx-line); color: var(--gx-ink); }

/* ---------- Calendario de oportunidades ---------- */
.gx-cal{ display: flex; flex-direction: column; gap: 14px; }
.gx-cal-month h4{ margin: 0 0 8px; font: 650 14px var(--font-display); color: var(--color-primary); text-transform: capitalize; }
.gx-cal-item{ display: grid; grid-template-columns: 54px 10px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--hairline); }
.gx-cal-date{ font: 600 12px var(--font-mono); color: var(--color-text-secondary); }
.gx-cal-kind{ width: 10px; height: 10px; border-radius: 3px; background: var(--color-text-subtle); }
.gx-cal-kind.holiday{ background: var(--tone-violet-ink); }
.gx-cal-kind.weak{ background: var(--c-amber); }
.gx-cal-kind.deadline{ background: var(--tone-red-ink); }
.gx-cal-kind.event{ background: var(--color-accent); }
.gx-cal-kind.work{ background: var(--gx); }
.gx-cal-kind.review{ background: var(--tone-slate-ink); }

/* ---------- Hoja de informe ---------- */
.gx-sheet{ background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 34px 40px; max-width: 860px; margin: 0 auto; color: var(--color-text); }
.gx-sheet h1{ font: 700 1.6rem/1.2 var(--font-display); letter-spacing: -.02em; margin: 6px 0 4px; color: var(--color-primary); }
.gx-sheet h2{ font: 650 1rem/1.3 var(--font-body); color: var(--color-primary); margin: 22px 0 8px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.gx-sheet p, .gx-sheet li{ font-size: 13px; line-height: 1.6; color: var(--color-text-secondary); }
.gx-sheet-meta{ font-size: 12px; color: var(--color-text-muted); }

/* Subtítulo dentro de modales y fichas */
.gx-h4{ margin: 16px 0 8px; font: 600 10.5px/1.2 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); }

/* ---------- IA ---------- */
.gx-ai{ border: 1px dashed var(--gx-line); border-radius: var(--radius-lg); padding: 14px 16px; background: linear-gradient(180deg, #fdfefb, #f8fbf2); display: flex; flex-direction: column; gap: 10px; }
.gx-ai-head{ display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; font-size: 12px; color: var(--color-text-muted); }
.gx-ai-head b{ color: var(--gx-ink); font-weight: 650; display: inline-flex; gap: 6px; align-items: center; }
.gx-ai-head b svg{ width: 15px; height: 15px; }
.gx-ai-body{ font-size: 13px; line-height: 1.6; color: var(--color-text-secondary); }
.gx-ai-body p{ margin: 0 0 8px; }
.gx-ai-body ul{ margin: 4px 0 8px; padding-left: 18px; }
.gx-ai-body li{ margin-bottom: 4px; }
.gx-ai-body h5{ margin: 10px 0 4px; font: 650 12.5px var(--font-body); color: var(--color-primary); }

/* ==================================================================
   TELÉFONO — riel arriba como tira, una columna
   ================================================================== */
@media (max-width: 1100px){
  .gx-grid.asym, .gx-grid.asym-r{ grid-template-columns: minmax(0,1fr); }
  .gx-verdict{ grid-template-columns: minmax(0,1fr); }
  .gx-verdict-side{ border-left: 0; padding-left: 0; border-top: 1px solid var(--gx-line); padding-top: 12px; }
  .gx-board{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .gx-sim{ grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 900px){
  .gx-page{ grid-template-columns: minmax(0,1fr); gap: 12px; padding-top: 4px; }
  .gx-rail{ position: sticky; top: 52px; z-index: 5; flex-direction: row; align-items: center; padding: 6px; border-radius: 14px; max-height: none; overflow: visible; }
  .gx-rail-brand, .gx-rail-foot, .gx-rail-sep{ display: none; }
  .gx-rail-list{ flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: 4px; scroll-snap-type: x proximity; }
  .gx-rail-list::-webkit-scrollbar{ display: none; }
  .gx-rail-item{ width: auto; white-space: nowrap; padding: 9px 12px; min-height: 40px; scroll-snap-align: start; }
  .gx-head{ padding: 16px 16px; border-radius: var(--radius-lg); }
  .gx-dim-body{ grid-template-columns: minmax(0,1fr); padding: 0 14px 14px; }
  .gx-dim > summary{ grid-template-columns: 34px minmax(0,1fr) auto 16px; }
  .gx-dim > summary .gx-meter{ display: none; }
  .gx-init{ grid-template-columns: 30px minmax(0,1fr); }
  .gx-init-act{ grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .gx-init-act .mb{ flex: 1 1 auto; min-height: 44px; }
  .gx-cycle{ grid-template-columns: repeat(3, minmax(0,1fr)); row-gap: 14px; }
  .gx-cycle::before{ display: none; }
  .gx-cy-hint{ display: none; }
  .gx-form-grid, .gx-form-grid.three{ grid-template-columns: minmax(0,1fr); }
  .gx-scen-cols{ grid-template-columns: minmax(0,1fr); }
  .gx-board{ grid-template-columns: minmax(0,1fr); }
  .gx-grid.two{ grid-template-columns: minmax(0,1fr); }
  .gx-stats{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .gx-stat{ border-bottom: 1px solid var(--hairline); }
  .gx-stat:nth-child(2n){ border-right: 0; }
  .gx-sheet{ padding: 22px 18px; }
  .gx-cal-item{ grid-template-columns: 48px 10px minmax(0,1fr); }
  .gx-cal-item > :last-child{ grid-column: 3; }
  #section-crecimiento .mb, #section-crecimiento .nbtn{ min-height: 40px; }
}
@media (prefers-reduced-motion: reduce){
  .gx-cy.now .gx-cy-dot::after, .gx-loading-route i{ animation: none; }
}
@media print{
  .gx-rail, .gx-head-aside, #section-crecimiento .mb, .topbar{ display: none !important; }
  .gx-page{ grid-template-columns: minmax(0,1fr); }
  .gx-sheet{ border: 0; padding: 0; }
}

/* ---------- Viaje del huésped (variante del ciclo, 7 estaciones) ---------- */
.gx-cycle.gx-journey{ grid-template-columns: repeat(7, minmax(0,1fr)); }
.gx-cycle.gx-journey::before{ left: 7.14%; right: 7.14%; }
.gx-cy.pain .gx-cy-dot{ border-color: var(--c-amber); color: var(--tone-amber-ink); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c-amber) 16%, transparent); font-family: var(--font-body); font-weight: 700; }
.gx-cy.pain .gx-cy-dot::after{ border-color: var(--c-amber); }
@media (max-width: 900px){ .gx-cycle.gx-journey{ grid-template-columns: repeat(4, minmax(0,1fr)); } }

/* ---------- A medida: cómo querés crecer, pasos editables, la semana ---------- */
.gx-stylebar{ display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid var(--gx-line); background: var(--gx-softer); border-radius: var(--radius-lg); }
.gx-stylebar-chips{ display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.gx-slider{ display: grid; grid-template-columns: minmax(0, 210px) minmax(0,1fr) 34px; gap: 10px; align-items: center; margin: 6px 0; font-size: 12.5px; }
.gx-slider label{ color: var(--color-text-secondary); font-weight: 600; }
.gx-slider input[type=range]{ width: 100%; accent-color: var(--gx); min-height: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
.gx-slider output{ font: 600 12px var(--font-mono); text-align: right; color: var(--gx-ink); }
.gx-steps-edit{ display: flex; flex-direction: column; gap: 8px; }
.gx-step-row{ display: grid; grid-template-columns: 18px minmax(0,1fr) 170px 78px 74px; gap: 8px; align-items: center;
  padding: 8px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--color-surface); }
.gx-step-row:has(input[type=checkbox]:not(:checked)){ opacity: .55; }
.gx-step-row input[type=text], .gx-step-row select, .gx-step-row input[type=number]{ min-height: 36px !important; padding: 6px 10px !important; font-size: 13px !important; width: 100% !important; max-width: none !important; }
.gx-step-row .arsel{ width: 100%; min-width: 0; }
.gx-step-num{ display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--color-text-muted); margin: 0; }
.gx-step-num span{ flex: none; }
.gx-step-detail{ grid-column: 2 / -1; font-size: 11.5px; color: var(--color-text-muted); line-height: 1.4; }
.gx-weekly{ margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.45; }
.gx-weekly li b{ color: var(--color-primary); }
.gx-weekly li span{ color: var(--color-text-secondary); }
.gx-edit-more{ margin: 4px 0 10px; }
.gx-edit-more summary{ display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.gx-edit-more summary::-webkit-details-marker{ display: none; }
@media (max-width: 720px){
  .gx-step-row{ grid-template-columns: 18px minmax(0,1fr) minmax(0,1fr); }
  .gx-step-row input[type=text]{ grid-column: 2 / -1; }
  .gx-step-row select, .gx-step-row .arsel{ grid-column: 1 / -1; }
  .gx-step-num{ grid-column: auto; }
  .gx-step-row .gx-step-num:first-of-type{ grid-column: 1 / 3; }
  .gx-slider{ grid-template-columns: minmax(0,1fr) 34px; }
  .gx-slider label{ grid-column: 1 / -1; }
}