/* ==========================================================================
   clase5.css — Estilos propios de la Clase 5 (Del prototipo a la decisión)
   Prefijo .c5-  ·  colores con variables USM → modo claro y oscuro
   ========================================================================== */

/* ---------- c5-matriz: ranking de enfoques ---------- */
.md-typeset ol.c5-rank {
  list-style: none;
  margin: 0.6rem 0 0.4rem;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.md-typeset ol.c5-rank > li.c5-rank-row {
  display: grid;
  grid-template-columns: 1.6rem minmax(7rem, 13rem) 1fr 2.8rem;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 10px;
  background: var(--md-default-bg-color);
  font-size: 0.74rem;
  position: relative;
}
.md-typeset ol.c5-rank > li.c5-rank-row.is-top {
  border-color: var(--usm-gold);
  background: color-mix(in srgb, var(--usm-gold) 10%, var(--md-default-bg-color));
}
.c5-rank-pos {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--usm-navy);
  color: #fff;
  font-weight: 700;
  font-size: 0.72rem;
}
.c5-rank-row.is-top .c5-rank-pos { background: var(--usm-gold); color: var(--usm-navy-dark); }
.c5-rank-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c5-rank-track {
  height: 0.7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--md-default-fg-color) 8%, transparent);
  overflow: hidden;
}
.c5-rank-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--usm-blue);
  transition: width 0.2s cubic-bezier(0.2, 0, 0, 1);
}
.c5-rank-row.is-top .c5-rank-fill { background: var(--usm-gold); }
.c5-rank-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---------- c5-roi: cascada ---------- */
.c5-roi-svg .c5-wf-bar.is-pos { fill: var(--usm-blue); }
.c5-roi-svg .c5-wf-bar.is-neg { fill: var(--usm-red); opacity: 0.85; }
.c5-roi-svg .c5-wf-bar.is-net { fill: var(--usm-gold); }
.c5-roi-svg .c5-wf-conn { stroke: var(--md-default-fg-color--lighter); stroke-dasharray: 3 3; }
/* --c5-k (lo fija widgets-clase5.js) agranda la letra solo si el SVG se dibuja tan chico que bajaría de ~11 px;
   con espacio de sobra vale 1 y todo queda igual */
.ia-svg text.c5-wf-lbl { font-size: calc(11px * var(--c5-k, 1)); font-weight: 600; }
.ia-svg text.c5-wf-val { font-size: calc(11px * var(--c5-k, 1)); font-weight: 700; font-variant-numeric: tabular-nums; }
.econ-stat.is-red { border-left-color: var(--usm-red); }
/* Celular: la cascada se dibuja en filas sobre un viewBox de 300 de ancho (escala ~1) */
.ia-svg.c5-roi-svg.is-mobile, .ia-svg.c5-bs-svg.is-mobile { max-width: 400px; margin-left: auto; margin-right: auto; }
.ia-svg.c5-roi-svg.is-mobile text.c5-wf-lbl,
.ia-svg.c5-roi-svg.is-mobile text.c5-wf-val { font-size: calc(12.5px * var(--c5-k, 1)); }

/* ---------- c5-bootstrap: histograma ---------- */
.ia-svg.c5-bs-svg text { font-size: calc(11px * var(--c5-k, 1)); }   /* ticks: 11 px como el resto de .ia-svg */
.ia-svg .c5-bs-bar { fill: var(--usm-blue); opacity: 0.75; }
.ia-svg .c5-bs-band { fill: var(--usm-gold); opacity: 0.22; }
.ia-svg .c5-bs-zero { stroke: var(--usm-red); stroke-width: 2; stroke-dasharray: 4 3; }
.ia-svg .c5-bs-obs { stroke: var(--usm-gold); stroke-width: 3; }
.ia-svg text.c5-bs-zero-t {
  fill: var(--usm-red); font-size: calc(10px * var(--c5-k, 1)); font-weight: 700;
  /* halo del color de fondo: la línea dorada y las barras que pasan por detrás no tapan el rótulo */
  paint-order: stroke; stroke: var(--md-default-bg-color); stroke-width: 3px; stroke-linejoin: round;
}
.ia-svg text.c5-muted { fill: var(--md-default-fg-color--light); font-size: calc(10px * var(--c5-k, 1)); }
/* Celular: viewBox de 300 de ancho → misma letra que el texto de la página */
.ia-svg.c5-bs-svg.is-mobile text { font-size: calc(12.5px * var(--c5-k, 1)); }

/* ---------- c5-piramide ---------- */
.c5-pyr { display: grid; gap: 0.45rem; margin: 0.6rem 0; justify-items: center; }
.c5-pyr-level {
  width: 100%;
  padding: 0.4rem 0.55rem 0.5rem;
  border-radius: 12px;
  border: 1.5px solid var(--md-default-fg-color--lightest);
  min-height: 3.2rem;
}
.c5-pyr-level.is-top { max-width: 58%; border-color: var(--usm-gold); background: color-mix(in srgb, var(--usm-gold) 12%, transparent); }
.c5-pyr-level.is-arg { max-width: 80%; border-color: var(--usm-navy); background: color-mix(in srgb, var(--usm-navy) 6%, transparent); }
.c5-pyr-level.is-ev { border-color: var(--usm-blue); background: color-mix(in srgb, var(--usm-blue) 6%, transparent); }
.c5-pyr-level.is-annex { border-style: dashed; }
.c5-pyr-level.is-pool { border-style: dotted; background: color-mix(in srgb, var(--md-default-fg-color) 3%, transparent); }
.md-typeset .c5-pyr-lt {
  margin: 0 0 0.3rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
  text-align: center;
}
.c5-pyr-zone { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: center; min-height: 1.6rem; }
.c5-card {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 1 1 13rem;
  max-width: 22rem;
  padding: 0.35rem 0.4rem 0.35rem 0.6rem;
  border-radius: 9px;
  border: 1.5px solid var(--md-default-fg-color--lighter);
  background: var(--md-default-bg-color);
  font-size: 0.7rem;
  line-height: 1.35;
  box-shadow: 0 1px 3px rgba(16, 25, 59, 0.08);
}
.c5-card-t { flex: 1; }
.c5-card-ctl { display: flex; flex-direction: column; gap: 0.2rem; }
.c5-card-btn {
  font: inherit;
  font-size: 0.62rem;
  line-height: 1;
  padding: 0.25rem 0.4rem;
  border-radius: 6px;
  border: 1px solid var(--md-default-fg-color--lighter);
  background: transparent;
  color: var(--md-default-fg-color);
  cursor: pointer;
}
.c5-card-btn:hover:not(:disabled) { border-color: var(--usm-gold); background: color-mix(in srgb, var(--usm-gold) 18%, transparent); }
.c5-card-btn:focus-visible { outline: 2px solid var(--usm-gold); outline-offset: 1px; }
.c5-card-btn:disabled { opacity: 0.3; cursor: default; }
.c5-card.is-right { border-color: #2e8b57; background: color-mix(in srgb, #2e8b57 12%, var(--md-default-bg-color)); }
.c5-card.is-wrong { border-color: var(--usm-red); background: color-mix(in srgb, var(--usm-red) 10%, var(--md-default-bg-color)); }

@media (max-width: 700px) {
  .c5-pyr-level.is-top, .c5-pyr-level.is-arg { max-width: 100%; }
  .md-typeset ol.c5-rank > li.c5-rank-row { grid-template-columns: 1.5rem minmax(5.5rem, 8rem) 1fr 2.4rem; gap: 0.4rem; }
}

@media (max-width: 600px) {
  /* Ranking: la barra baja a una segunda línea para que el nombre no se corte y la barra se vea */
  .md-typeset ol.c5-rank > li.c5-rank-row {
    grid-template-columns: 1.5rem 1fr auto;
    grid-template-areas: "pos name val" "pos track track";
    row-gap: 0.3rem;
  }
  .c5-rank-pos { grid-area: pos; }
  .c5-rank-name { grid-area: name; white-space: normal; }
  .c5-rank-track { grid-area: track; }
  .c5-rank-val { grid-area: val; }
  /* ROI: con montos extremos («$2.000.000») la etiqueta y su valor no caben lado a lado:
     columnas que pueden encogerse y el valor baja a su propia línea, alineado a la derecha */
  .ia-widget[data-widget="c5-roi"] .econ-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ia-widget[data-widget="c5-roi"] .econ-control label { flex-wrap: wrap; }
  .ia-widget[data-widget="c5-roi"] .econ-control label output { margin-left: auto; }
  /* cifras sin cortes («−» separado del número, «pp]» sola): la tarjeta toma la fila si hace falta */
  .ia-widget[data-widget="c5-roi"] .econ-stat strong,
  .ia-widget[data-widget="c5-bootstrap"] .econ-stat:nth-child(-n+2) strong { white-space: nowrap; }
  /* Pirámide: botones ▲ ▼ con área táctil cómoda */
  .c5-card { padding-right: 0.35rem; }
  .c5-card-ctl { gap: 0.3rem; }
  .c5-card-btn { font-size: 0.72rem; padding: 0.5rem 0.65rem; min-width: 2.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .c5-rank-fill { transition: none; }
}