/* Ejemplo aplicado largo (.ej.ejx): caso, datos, pasos, gráfico y decisión.
   Maestro en finanzas2/assets/ejx.css; copiar IGUAL a las otras apps.
   Cada app ajusta colores redefiniendo las variables --ejx-* en su propio CSS. */
.ejx{--ejx-a:#2e6da4;--ejx-d:#0d4b8c;--ejx-tx:#173a5e;--ejx-tx2:#2c4d6e;--ejx-l:#c8ddf0;--ejx-l2:#d7e6f4;--ejx-th:#e3eefa;--ejx-track:#eef3f8}
.ej.ejx{padding:14px 16px 12px;line-height:1.6}
.ejx .ejx-caso{margin:0 0 10px;font-size:.95rem;color:var(--ejx-tx)}
.ejx .ejx-caso b:first-child{display:inline-block;background:var(--ejx-a);color:#fff;border-radius:6px;padding:1px 8px;margin-right:6px;font-size:.74rem;letter-spacing:.05em;text-transform:uppercase}

/* datos del enunciado como chips */
.ejx .ejx-datos{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;padding:0;list-style:none}
.ejx .ejx-datos li{background:#fff;border:1px solid var(--ejx-l);border-radius:999px;padding:3px 11px;font-size:.84rem;color:var(--ejx-tx);white-space:nowrap}
.ejx .ejx-datos li b{color:var(--ejx-d)}

/* pasos numerados: pregunta, cuenta, lectura */
.ejx .ejx-pasos{counter-reset:ejx;list-style:none;margin:0 0 12px;padding:0}
.ejx .ejx-pasos>li{counter-increment:ejx;position:relative;padding:0 0 12px 38px;margin:0}
.ejx .ejx-pasos>li::before{content:counter(ejx);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;background:var(--ejx-a);color:#fff;font-weight:800;font-size:.82rem;display:flex;align-items:center;justify-content:center}
.ejx .ejx-pasos>li:not(:last-child)::after{content:"";position:absolute;left:12px;top:28px;bottom:2px;width:2px;background:var(--ejx-l)}
.ejx .ejx-pasos .ejx-q{display:block;font-weight:700;color:var(--ejx-d);font-size:.9rem;margin-bottom:3px}
.ejx .ejx-pasos .ejx-c{display:block;background:#fff;border:1px solid var(--ejx-l2);border-radius:8px;padding:6px 10px;margin:2px 0 4px;overflow-x:auto;max-width:100%}
.ejx .ejx-pasos .ejx-c .katex{font-size:1em}
.ejx .ejx-pasos .ejx-t{display:block;font-size:.88rem;color:var(--ejx-tx2)}

/* gráfico de barras hecho con CSS: cada fila lleva --v entre 0 y 1 */
.ejx .ejx-viz{background:#fff;border:1px solid var(--ejx-l2);border-radius:10px;padding:12px 12px 8px;margin:4px 0 12px}
.ejx .ejx-viz .ejx-tit{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ejx-a);margin:0 0 8px}
.ejx .ejx-viz .ejx-fila{display:grid;grid-template-columns:minmax(78px,30%) 1fr;align-items:center;gap:8px;margin:0 0 7px;font-size:.84rem;color:var(--ejx-tx)}
.ejx .ejx-viz .ejx-fila .ejx-bar{position:relative;height:22px;background:var(--ejx-track);border-radius:5px;overflow:hidden}
.ejx .ejx-viz .ejx-fila .ejx-bar i{position:absolute;inset:0 auto 0 0;width:calc(var(--v,0)*100%);background:var(--c,#5b9bd5);border-radius:5px}
.ejx .ejx-viz .ejx-fila .ejx-bar span{position:relative;z-index:1;display:block;padding:0 8px;line-height:22px;font-weight:700;font-size:.8rem;color:#0b2540;white-space:nowrap}
.ejx .ejx-viz .ejx-fila.ejx-alt .ejx-bar i{--c:#e0a526}
.ejx .ejx-viz .ejx-fila.ejx-ok .ejx-bar i{--c:#3fae7f}
.ejx .ejx-viz .ejx-fila.ejx-mal .ejx-bar i{--c:#d9645a}
/* barra apilada: segmentos con --v que suman 1 */
.ejx .ejx-viz .ejx-pila{display:flex;height:30px;border-radius:6px;overflow:hidden;margin:0 0 6px}
.ejx .ejx-viz .ejx-pila>span{width:calc(var(--v,0)*100%);background:var(--c,#5b9bd5);color:#fff;font-size:.76rem;font-weight:700;display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden;padding:0 4px}
.ejx .ejx-viz .ejx-pie{font-size:.8rem;color:var(--ejx-tx2);margin:6px 0 0}
/* tabla corta de escenarios */
.ejx table.ejx-tab{width:100%;border-collapse:collapse;margin:0 0 12px;font-size:.86rem;background:#fff}
.ejx table.ejx-tab th,.ejx table.ejx-tab td{border:1px solid var(--ejx-l2);padding:6px 8px;text-align:right}
.ejx table.ejx-tab th:first-child,.ejx table.ejx-tab td:first-child{text-align:left}
.ejx table.ejx-tab th{background:var(--ejx-th);color:var(--ejx-d);font-weight:700}
.ejx table.ejx-tab tr.ejx-hl td{background:#fff7e0;font-weight:700}
.ejx .ejx-scroll{overflow-x:auto;max-width:100%}

/* cierre: qué se decide con el resultado */
.ejx .ejx-res{margin:0;background:var(--ejx-d);color:#fff;border-radius:8px;padding:9px 12px;font-size:.9rem}
.ejx .ejx-res b{color:#ffd770}
@media(max-width:640px){
  .ejx .ejx-pasos>li{padding-left:34px}
  .ejx .ejx-viz .ejx-fila{grid-template-columns:minmax(64px,34%) 1fr;font-size:.8rem}
}
/* leyenda de la barra apilada: los segmentos angostos se leen aquí */
.ejx .ejx-viz .ejx-ley{display:flex;flex-wrap:wrap;gap:4px 12px;margin:2px 0 8px;font-size:.78rem;color:var(--ejx-tx2)}
.ejx .ejx-viz .ejx-ley span{display:inline-flex;align-items:center;gap:5px}
.ejx .ejx-viz .ejx-ley span::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--c)}