/* =========================================================================
   Signlab - Familia de componentes de datos
   Donut, barras horizontales, barra segmentada, escala de madurez,
   lollipop, radar y resumen de ambitos.
   Todos los colores y medidas llegan como variables CSS desde WPBakery.
   ========================================================================= */

.signlab-chart {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.signlab-chart *,
.signlab-chart *::before,
.signlab-chart *::after {
  box-sizing: border-box;
}

/* Texto alternativo solo para lectores de pantalla */
.signlab-chart__sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- Leyenda */

.signlab-chart__legend {
  display: grid;
  grid-template-columns: repeat(var(--signlab-chart-legend-columns, auto-fit), minmax(160px, 1fr));
  gap: 10px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.signlab-chart__legend-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0;
  font-size: var(--signlab-chart-legend-size, 15px);
  line-height: 1.4;
}

.signlab-chart__swatch {
  flex: 0 0 auto;
  align-self: center;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background-color: var(--signlab-chart-color, currentColor);
}

.signlab-chart__legend-label {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--signlab-chart-label, #262124);
}

.signlab-chart__legend-value {
  flex: 0 0 auto;
  color: var(--signlab-chart-value, #BA006F);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.signlab-chart__legend-note {
  flex: 1 0 100%;
  color: var(--signlab-chart-value, #BA006F);
  font-size: 0.86em;
  opacity: 0.85;
}

/* =========================================================================
   1. Donut
   ========================================================================= */

.signlab-donut {
  display: flex;
  gap: var(--signlab-chart-gap, 32px);
  align-items: center;
}

.signlab-donut.is-legend-right  { flex-direction: row; }
.signlab-donut.is-legend-left   { flex-direction: row-reverse; }
.signlab-donut.is-legend-bottom { flex-direction: column; }
.signlab-donut.is-legend-top    { flex-direction: column-reverse; }

.signlab-donut.is-align-center { justify-content: center; align-items: center; }
.signlab-donut.is-align-left   { justify-content: flex-start; }
.signlab-donut.is-align-right  { justify-content: flex-end; }

.signlab-donut.is-legend-bottom.is-align-left,
.signlab-donut.is-legend-top.is-align-left   { align-items: flex-start; }
.signlab-donut.is-legend-bottom.is-align-right,
.signlab-donut.is-legend-top.is-align-right  { align-items: flex-end; }

.signlab-donut__figure {
  position: relative;
  flex: 0 0 auto;
  width: var(--signlab-chart-size, 240px);
  max-width: 100%;
}

.signlab-donut__svg {
  display: block;
  width: 100%;
  height: auto;
  transform: rotate(-90deg);
}

.signlab-donut__track {
  stroke: var(--signlab-chart-track, rgba(186, 0, 111, 0.10));
}

.signlab-donut__segment {
  stroke-dasharray: var(--signlab-chart-dash, 0) var(--signlab-chart-dash-rest, 0);
  transition: stroke-dasharray 0.9s ease;
}

.signlab-donut__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 18%;
  text-align: center;
  pointer-events: none;
}

.signlab-donut__center-value {
  color: var(--signlab-chart-center-value, #262124);
  font-size: var(--signlab-chart-center-value-size, 34px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.signlab-donut__center-text {
  color: var(--signlab-chart-center-text, #6E6469);
  font-size: var(--signlab-chart-center-text-size, 13px);
  line-height: 1.3;
}

.signlab-donut__legend {
  flex: 1 1 auto;
  min-width: 0;
}

.signlab-donut.is-legend-bottom .signlab-donut__legend,
.signlab-donut.is-legend-top .signlab-donut__legend {
  width: 100%;
}

/* =========================================================================
   2. Barras horizontales
   ========================================================================= */

.signlab-bars__list {
  display: flex;
  flex-direction: column;
  gap: var(--signlab-chart-bar-gap, 16px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.signlab-bars__item {
  display: grid;
  grid-template-columns: var(--signlab-chart-label-width, 180px) minmax(0, 1fr) auto;
  grid-template-areas: "label track value";
  align-items: center;
  gap: 6px 14px;
  margin: 0;
}

.signlab-bars.is-label-top .signlab-bars__item {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label value"
    "track track";
}

.signlab-bars__label {
  grid-area: label;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  color: var(--signlab-chart-label, #262124);
  font-size: var(--signlab-chart-label-size, 15px);
  line-height: 1.35;
}

.signlab-bars__description {
  color: var(--signlab-chart-description, #6E6469);
  font-size: 0.86em;
  line-height: 1.4;
}

.signlab-bars__track {
  grid-area: track;
  position: relative;
  display: block;
  width: 100%;
  height: var(--signlab-chart-bar-height, 18px);
  overflow: hidden;
  border-radius: var(--signlab-chart-radius, 999px);
  background-color: var(--signlab-chart-track, rgba(186, 0, 111, 0.10));
}

.signlab-bars__fill {
  display: block;
  width: var(--signlab-chart-fill, 0%);
  height: 100%;
  border-radius: inherit;
  background-color: var(--signlab-chart-color, #BA006F);
  transition: width 0.9s ease;
}

.signlab-bars__value {
  grid-area: value;
  color: var(--signlab-chart-value, #262124);
  font-size: var(--signlab-chart-value-size, 15px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* =========================================================================
   3. Barra segmentada al 100%
   ========================================================================= */

.signlab-stacked__bar {
  display: flex;
  width: 100%;
  height: var(--signlab-chart-height, 44px);
  gap: var(--signlab-chart-segment-gap, 0px);
  overflow: hidden;
  border-radius: var(--signlab-chart-radius, 10px);
}

.signlab-stacked__segment {
  display: flex;
  flex: 0 1 var(--signlab-chart-share, 0%);
  align-items: center;
  justify-content: center;
  min-width: 0;
  background-color: var(--signlab-chart-color, #BA006F);
  transition: flex-basis 0.9s ease;
}

.signlab-stacked__inline {
  overflow: hidden;
  padding: 0 6px;
  color: var(--signlab-chart-inline-text, #ffffff);
  font-size: var(--signlab-chart-inline-size, 13px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.signlab-stacked__segment.is-narrow .signlab-stacked__inline {
  display: none;
}

.signlab-stacked__labels {
  display: flex;
  gap: var(--signlab-chart-segment-gap, 0px);
  width: 100%;
  margin-top: 8px;
}

.signlab-stacked__label {
  flex: 0 1 var(--signlab-chart-share, 0%);
  min-width: 0;
  padding: 0 4px;
  color: var(--signlab-chart-label, #262124);
  font-size: 0.82em;
  line-height: 1.3;
}

.signlab-stacked__label-text {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.signlab-stacked__legend {
  margin-top: 18px;
}

/* Leyenda desactivada en escritorio: se reserva para movil */
.signlab-stacked.is-legend-mobile-only .signlab-stacked__legend {
  display: none;
}

/* =========================================================================
   4. Escala de madurez
   ========================================================================= */

.signlab-maturity__steps,
.signlab-maturity__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.signlab-maturity__steps {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--signlab-chart-gap, 20px);
}

.signlab-maturity__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  text-align: center;
}

/* Conector del timeline */
.signlab-maturity.is-variant-timeline .signlab-maturity__step::before {
  content: "";
  position: absolute;
  top: calc(var(--signlab-chart-marker-size, 44px) / 2 - 1px);
  right: 0;
  left: 0;
  z-index: 0;
  height: 2px;
  background-color: var(--signlab-chart-connector, rgba(138, 0, 83, 0.16));
}

.signlab-maturity.is-variant-timeline .signlab-maturity__step:first-child::before { left: 50%; }
.signlab-maturity.is-variant-timeline .signlab-maturity__step:last-child::before  { right: 50%; }

.signlab-maturity__marker {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--signlab-chart-marker-size, 44px);
  height: var(--signlab-chart-marker-size, 44px);
  border-radius: 50%;
  background-color: var(--signlab-chart-color, #BA006F);
  color: var(--signlab-chart-marker-text, #ffffff);
  font-size: calc(var(--signlab-chart-marker-size, 44px) * 0.4);
  font-weight: 800;
  line-height: 1;
}

.signlab-maturity__step.is-highlight .signlab-maturity__marker {
  box-shadow: 0 0 0 4px var(--signlab-chart-connector, rgba(138, 0, 83, 0.16));
}

.signlab-maturity__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
}

.signlab-maturity__label {
  color: var(--signlab-chart-label, #262124);
  font-size: var(--signlab-chart-label-size, 15px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.signlab-maturity__value {
  color: var(--signlab-chart-value, #262124);
  font-size: var(--signlab-chart-value-size, 22px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.signlab-maturity__description {
  color: var(--signlab-chart-description, #6E6469);
  font-size: var(--signlab-chart-description-size, 14px);
  line-height: 1.5;
}

.signlab-maturity__step.is-highlight .signlab-maturity__label {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Variante escalera */
.signlab-maturity.is-variant-stairs .signlab-maturity__steps {
  align-items: end;
}

.signlab-maturity.is-variant-stairs .signlab-maturity__step {
  justify-content: flex-end;
}

.signlab-maturity__column {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: var(--signlab-chart-stairs-height, 180px);
  margin-bottom: 14px;
}

.signlab-maturity__column-fill {
  display: block;
  width: 100%;
  height: var(--signlab-chart-step, 100%);
  border-radius: var(--signlab-chart-radius, 12px) var(--signlab-chart-radius, 12px) 0 0;
  background-color: var(--signlab-chart-color, #BA006F);
  transition: height 0.9s ease, width 0.9s ease;
}

/* Variante barra progresiva */
.signlab-maturity__progress {
  display: flex;
  width: 100%;
  height: var(--signlab-chart-height, 52px);
  overflow: hidden;
  border-radius: var(--signlab-chart-radius, 12px);
}

.signlab-maturity__slice {
  display: flex;
  flex: 0 1 var(--signlab-chart-share, 0%);
  align-items: center;
  justify-content: center;
  min-width: 0;
  background-color: var(--signlab-chart-color, #BA006F);
  transition: flex-basis 0.9s ease;
}

.signlab-maturity__slice.is-highlight {
  outline: 2px solid var(--signlab-chart-marker-text, #ffffff);
  outline-offset: -4px;
}

.signlab-maturity__slice-value {
  overflow: hidden;
  padding: 0 6px;
  color: var(--signlab-chart-marker-text, #ffffff);
  font-size: 0.8em;
  font-weight: 700;
  white-space: nowrap;
}

.signlab-maturity__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px 20px;
  margin-top: 16px;
}

.signlab-maturity__list .signlab-maturity__item {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 10px;
  margin: 0;
}

.signlab-maturity__list .signlab-chart__swatch {
  align-self: center;
}

.signlab-maturity__list .signlab-maturity__value,
.signlab-maturity__list .signlab-maturity__description {
  grid-column: 2;
}

.signlab-maturity__list .signlab-maturity__value {
  font-size: var(--signlab-chart-label-size, 15px);
}

.signlab-maturity__item.is-highlight .signlab-maturity__label {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* =========================================================================
   5. Lollipop
   ========================================================================= */

.signlab-lollipop__list {
  display: flex;
  flex-direction: column;
  gap: var(--signlab-chart-row-gap, 18px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.signlab-lollipop__item {
  display: grid;
  grid-template-columns: var(--signlab-chart-label-width, 220px) minmax(0, 1fr) auto;
  grid-template-areas: "label track value";
  align-items: center;
  gap: 6px 14px;
  margin: 0;
}

.signlab-lollipop__label {
  grid-area: label;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.signlab-lollipop__label-text {
  color: var(--signlab-chart-label, #262124);
  font-size: var(--signlab-chart-label-size, 15px);
  line-height: 1.35;
}

.signlab-lollipop__description {
  color: var(--signlab-chart-description, #6E6469);
  font-size: 0.86em;
  line-height: 1.4;
}

.signlab-lollipop__track {
  grid-area: track;
  position: relative;
  display: block;
  width: 100%;
  height: var(--signlab-chart-dot-size, 16px);
}

.signlab-lollipop__track::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: var(--signlab-chart-line, 4px);
  transform: translateY(-50%);
  border-radius: 999px;
  background-color: var(--signlab-chart-track, rgba(186, 0, 111, 0.10));
}

.signlab-lollipop__line {
  position: absolute;
  top: 50%;
  left: 0;
  width: var(--signlab-chart-fill, 0%);
  height: var(--signlab-chart-line, 4px);
  transform: translateY(-50%);
  border-radius: 999px;
  background-color: var(--signlab-chart-color, #BA006F);
  transition: width 0.9s ease;
}

.signlab-lollipop__dot {
  position: absolute;
  top: 50%;
  left: var(--signlab-chart-fill, 0%);
  width: var(--signlab-chart-dot-size, 16px);
  height: var(--signlab-chart-dot-size, 16px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: var(--signlab-chart-color, #BA006F);
  transition: left 0.9s ease;
}

.signlab-lollipop__value {
  grid-area: value;
  color: var(--signlab-chart-value, #262124);
  font-size: var(--signlab-chart-value-size, 15px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.signlab-lollipop__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  margin-left: calc(var(--signlab-chart-label-width, 220px) + 14px);
  color: var(--signlab-chart-description, #6E6469);
  font-size: 0.8em;
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   6. Radar / nebulosa
   ========================================================================= */

.signlab-radar {
  position: relative;
  width: min(100%, var(--signlab-chart-size, 360px));
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: var(--signlab-chart-border-width, 4px) solid var(--signlab-chart-border, rgba(255, 255, 255, 0.55));
  border-radius: 50%;
  background-color: var(--signlab-chart-bg, transparent);
}

.signlab-radar__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: var(--signlab-chart-ring-size, 60%);
  height: var(--signlab-chart-ring-size, 60%);
  transform: translate(-50%, -50%);
  border: 1px solid var(--signlab-chart-ring, rgba(255, 255, 255, 0.3));
  border-radius: 50%;
}

.signlab-radar__axis {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 100%;
  height: 1px;
  transform: translate(-50%, -50%) rotate(var(--signlab-chart-axis-angle, 0deg));
  transform-origin: center;
  background-color: var(--signlab-chart-axis, rgba(255, 255, 255, 0.22));
}

.signlab-radar__blob {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: var(--signlab-chart-blob-size, 50%);
  height: var(--signlab-chart-blob-size, 50%);
  transform: translate(-50%, -50%) rotate(-8deg);
  transform-origin: center;
  border-radius: 35% 65% 58% 42% / 42% 38% 62% 58%;
  background:
    radial-gradient(
      circle at 35% 35%,
      var(--signlab-chart-blob-1, rgba(148, 163, 184, 0.72)) 0%,
      var(--signlab-chart-blob-2, rgba(100, 116, 139, 0.52)) 42%,
      var(--signlab-chart-blob-3, rgba(100, 116, 139, 0.18)) 72%,
      transparent 100%
    );
  filter: blur(var(--signlab-chart-blob-blur, 13px));
  opacity: 0.92;
  pointer-events: none;
}

.signlab-radar__blob::before {
  content: "";
  position: absolute;
  inset: -15%;
  border-radius: 65% 35% 42% 58% / 38% 57% 43% 62%;
  background:
    radial-gradient(
      circle at 65% 55%,
      var(--signlab-chart-blob-2, rgba(100, 116, 139, 0.52)) 0%,
      var(--signlab-chart-blob-3, rgba(100, 116, 139, 0.18)) 60%,
      transparent 78%
    );
  filter: blur(var(--signlab-chart-blob-blur-lg, 15px));
  opacity: 0.8;
}

.signlab-radar.is-animated .signlab-radar__blob {
  will-change: transform, border-radius, filter, opacity;
  animation: signlab-radar-nebula var(--signlab-chart-duration, 12s) ease-in-out infinite alternate;
}

.signlab-radar.is-animated .signlab-radar__blob::before {
  animation: signlab-radar-nebula-secondary calc(var(--signlab-chart-duration, 12s) * 1.35) ease-in-out infinite alternate;
}

.signlab-radar__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--signlab-chart-logo-size, 105px);
  height: var(--signlab-chart-logo-size, 105px);
  padding: var(--signlab-chart-logo-padding, 20px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.signlab-radar__logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes signlab-radar-nebula {
  0% {
    transform: translate(-50%, -50%) rotate(-10deg) scaleX(0.94) scaleY(1.06);
    border-radius: 35% 65% 58% 42% / 42% 38% 62% 58%;
    opacity: 0.82;
  }
  35% {
    transform: translate(-46%, -53%) rotate(3deg) scaleX(1.08) scaleY(0.96);
    border-radius: 58% 42% 36% 64% / 51% 60% 40% 49%;
    opacity: 0.95;
  }
  70% {
    transform: translate(-54%, -47%) rotate(-3deg) scaleX(0.98) scaleY(1.12);
    border-radius: 44% 56% 67% 33% / 63% 42% 58% 37%;
    opacity: 0.88;
  }
  100% {
    transform: translate(-49%, -52%) rotate(9deg) scaleX(1.07) scaleY(1.02);
    border-radius: 62% 38% 49% 51% / 37% 56% 44% 63%;
    opacity: 0.96;
  }
}

@keyframes signlab-radar-nebula-secondary {
  0%   { transform: translate(-6%, 4%) rotate(0deg) scale(0.9);    opacity: 0.55; }
  50%  { transform: translate(8%, -7%) rotate(18deg) scale(1.1);   opacity: 0.85; }
  100% { transform: translate(-3%, 6%) rotate(-12deg) scale(1);    opacity: 0.65; }
}

/* =========================================================================
   7. Ambitos / resumen numerico
   ========================================================================= */

.signlab-scope {
  display: grid;
  grid-template-columns: var(--signlab-chart-summary-width, 180px) minmax(0, 1fr);
  gap: var(--signlab-chart-gap, 26px);
  align-items: stretch;
}

.signlab-scope__summary {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 220px;
  padding: 28px 24px;
  border-radius: var(--signlab-chart-radius, 16px);
  background-color: var(--signlab-chart-primary, #262124);
  color: var(--signlab-chart-summary-text, #ffffff);
}

.signlab-scope__eyebrow {
  margin: 0 0 16px;
  color: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
  opacity: 0.72;
}

.signlab-scope__number {
  display: block;
  margin: 0 0 8px;
  color: inherit;
  font-size: clamp(42px, 6vw, var(--signlab-chart-number-size, 68px));
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.9;
}

.signlab-scope__number-text {
  display: block;
  max-width: 14ch;
  color: inherit;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
}

.signlab-scope__list {
  display: grid;
  grid-template-columns: repeat(var(--signlab-chart-columns, 3), minmax(0, 1fr));
  align-content: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.signlab-scope__item {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 62px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--signlab-chart-item-border, rgba(138, 0, 83, 0.16));
  border-radius: calc(var(--signlab-chart-radius, 16px) * 0.75);
  background-color: var(--signlab-chart-item-bg, #FAF7F8);
  transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

.signlab-scope__item:hover {
  transform: translateY(-2px);
  border-color: var(--signlab-chart-primary, #262124);
  background-color: var(--signlab-chart-item-hover-bg, #ffffff);
}

.signlab-scope.has-wide-last .signlab-scope__item:last-child {
  grid-column: span 2;
}

.signlab-scope__index {
  flex: 0 0 auto;
  color: var(--signlab-chart-primary, #262124);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
}

.signlab-scope__name {
  color: var(--signlab-chart-item-text, #262124);
  font-size: var(--signlab-chart-item-size, 14px);
  font-weight: 600;
  line-height: 1.25;
}

/* =========================================================================
   Estado inicial de las animaciones.
   "is-armed" lo añade el JS: sin JS el grafico se pinta ya en su estado final.
   ========================================================================= */

.signlab-chart--animate.is-armed:not(.is-visible) .signlab-donut__segment {
  stroke-dasharray: 0 var(--signlab-chart-circumference, 999);
}

.signlab-chart--animate.is-armed:not(.is-visible) .signlab-bars__fill,
.signlab-chart--animate.is-armed:not(.is-visible) .signlab-lollipop__line {
  width: 0;
}

.signlab-chart--animate.is-armed:not(.is-visible) .signlab-lollipop__dot {
  left: 0;
}

.signlab-chart--animate.is-armed:not(.is-visible) .signlab-stacked__segment,
.signlab-chart--animate.is-armed:not(.is-visible) .signlab-maturity__slice {
  flex-basis: 0;
}

.signlab-chart--animate.is-armed:not(.is-visible) .signlab-maturity__column-fill {
  height: 0;
}

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 999px) {
  .signlab-scope {
    grid-template-columns: minmax(140px, 25%) minmax(0, 1fr);
    gap: 18px;
  }

  .signlab-scope__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  /* Escala de madurez: timeline y escalera pasan a vertical */
  .signlab-maturity.is-variant-timeline .signlab-maturity__steps,
  .signlab-maturity.is-variant-stairs .signlab-maturity__steps {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    align-items: stretch;
  }

  .signlab-maturity.is-variant-timeline .signlab-maturity__step,
  .signlab-maturity.is-variant-stairs .signlab-maturity__step {
    display: grid;
    grid-template-columns: var(--signlab-chart-marker-size, 44px) minmax(0, 1fr);
    grid-template-areas:
      "marker body"
      "bar    bar";
    align-items: center;
    gap: 10px 14px;
    text-align: left;
  }

  .signlab-maturity__marker { grid-area: marker; }
  .signlab-maturity__body   { grid-area: body; margin-top: 0; }
  .signlab-maturity__column { grid-area: bar; }

  .signlab-maturity.is-variant-timeline .signlab-maturity__step::before {
    top: var(--signlab-chart-marker-size, 44px);
    right: auto;
    bottom: calc(-1 * var(--signlab-chart-gap, 20px));
    left: calc(var(--signlab-chart-marker-size, 44px) / 2 - 1px);
    width: 2px;
    height: auto;
  }

  .signlab-maturity.is-variant-timeline .signlab-maturity__step:first-child::before { left: calc(var(--signlab-chart-marker-size, 44px) / 2 - 1px); }
  .signlab-maturity.is-variant-timeline .signlab-maturity__step:last-child::before  { display: none; }

  .signlab-maturity.is-variant-stairs .signlab-maturity__column {
    align-items: stretch;
    height: 14px;
    margin-top: 4px;
    margin-bottom: 0;
  }

  .signlab-maturity.is-variant-stairs .signlab-maturity__column-fill {
    width: var(--signlab-chart-step, 100%);
    height: 100%;
    border-radius: 999px;
  }

  .signlab-chart--animate.is-armed:not(.is-visible) .signlab-maturity__column-fill {
    width: 0;
    height: 100%;
  }
}

@media (max-width: 690px) {
  /* Donut: grafico arriba, leyenda debajo */
  .signlab-donut,
  .signlab-donut.is-legend-right,
  .signlab-donut.is-legend-left {
    flex-direction: column;
    align-items: center;
  }

  .signlab-donut__legend {
    width: 100%;
  }

  /* Barras: etiqueta y valor arriba, barra a todo el ancho */
  .signlab-bars__item,
  .signlab-lollipop__item {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "label value"
      "track track";
  }

  .signlab-lollipop__scale {
    margin-left: 0;
  }

  /* Barra segmentada: sin texto interior, informacion en la leyenda */
  .signlab-stacked__inline,
  .signlab-stacked__labels {
    display: none;
  }

  .signlab-stacked.is-legend-mobile-only .signlab-stacked__legend {
    display: grid;
  }

  .signlab-stacked__legend {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Radar */
  .signlab-radar {
    width: min(100%, var(--signlab-chart-size-mobile, 290px));
  }

  .signlab-radar__logo {
    width: calc(var(--signlab-chart-logo-size, 105px) * 0.84);
    height: calc(var(--signlab-chart-logo-size, 105px) * 0.84);
    padding: calc(var(--signlab-chart-logo-padding, 20px) * 0.84);
  }

  /* Ambitos */
  .signlab-scope {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .signlab-scope__summary {
    min-height: auto;
    padding: 24px;
  }

  .signlab-scope__number-text {
    max-width: none;
  }

  .signlab-scope__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
  }

  .signlab-scope.has-wide-last .signlab-scope__item:last-child {
    grid-column: auto;
  }

  .signlab-scope__item {
    min-height: 54px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .signlab-radar.is-animated .signlab-radar__blob,
  .signlab-radar.is-animated .signlab-radar__blob::before {
    animation: none;
  }

  .signlab-donut__segment,
  .signlab-bars__fill,
  .signlab-stacked__segment,
  .signlab-maturity__slice,
  .signlab-maturity__column-fill,
  .signlab-lollipop__line,
  .signlab-lollipop__dot,
  .signlab-scope__item {
    transition: none;
  }

  .signlab-scope__item:hover {
    transform: none;
  }
}