/* ==========================================================================
   Simulaciones: lo común a todas (assets/simulation.js).
   Lo propio de cada episodio va en el CSS de su carpeta.
   ========================================================================== */

/* Cada simulación, dentro de una ventana con su barra de título (el id de la raíz) */
.sim {
  margin: 2.5rem 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: 0 20px 50px var(--shadow);
  padding: 0 1rem 1rem;
}
.sim::before {
  content: attr(id) ".run";
  display: block;
  margin: 0 -1rem 1rem;
  padding: 0.45rem 1rem 0.45rem 5rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-soft);
  background:
    radial-gradient(circle, #ff5f57 5px, transparent 5.5px) 1rem 50% / 12px 12px no-repeat,
    radial-gradient(circle, #febc2e 5px, transparent 5.5px) 2.1rem 50% / 12px 12px no-repeat,
    radial-gradient(circle, #28c840 5px, transparent 5.5px) 3.2rem 50% / 12px 12px no-repeat,
    var(--chrome);
  border-bottom: 1px solid var(--line-soft);
}
.sim__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 1rem;
  margin-bottom: 1rem;
}
/* Sin lista de retos, los mandos ocupan todo el ancho */
.sim__top--no-challenges { grid-template-columns: minmax(0, 1fr); }
.challenges, .sim__controls {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 0.8rem 1rem;
}
.challenges__header, .sim__title {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
}
.challenges__header strong { font-weight: 500; }
.challenges__list { list-style: none; padding: 0; margin: 0; font-size: 0.88rem; }
.challenges__list li { display: flex; gap: 0.55rem; align-items: baseline; margin: 0.2rem 0; }
.challenges__mark {
  flex: none;
  width: 0.95rem; height: 0.95rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 0.7rem;
  line-height: 0.9rem;
  text-align: center;
  transform: translateY(0.12rem);
}
.challenges__done { color: var(--ink-soft); }
.challenges__done .challenges__mark { border-color: var(--ok); color: var(--ok); background: var(--ok-bg); }

.sim__services { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.9rem; }
.service { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.service__name { font-family: var(--mono); font-size: 0.82rem; }
.sim__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sim__playback {
  display: flex; flex-direction: column; gap: 0.4rem;
  margin-top: 0.9rem; padding-top: 0.8rem;
  border-top: 1px dashed var(--line-soft);
}
.sim__playback .button { padding: 0.25rem 0.7rem; }
.sim__checkbox { display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; min-height: 1.9rem; }
.sim__checkbox input { accent-color: var(--active); margin: 0; }
.message--held { animation: detenido 1s ease-in-out infinite; }
@keyframes detenido { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .message--held { animation: none; } }

/* Grupo de casillas (fallos que se pueden provocar) */
.sim__failures { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.sim__failures .sim__checkbox { min-height: 1.6rem; }

.sim__reading {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
  background: var(--paper-2);
  font-size: 0.95rem;
}
.sim__reading:empty { display: none; }
.sim__reading--fail { border-color: var(--fail); background: var(--fail-bg); }
.sim__reading--ok { border-color: var(--ok); background: var(--ok-bg); }
.sim__reading--slow { border-color: var(--slow); background: var(--slow-bg); }

/* ---------- Paneles ---------- */

.sim__panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
/* Escenario único: un solo panel a todo el ancho */
.sim--single .sim__panels { grid-template-columns: minmax(0, 1fr); }
.panel {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 0.9rem 1rem 1rem;
  min-width: 0;
}
.panel__header { border-bottom: 1px solid var(--line-soft); padding-bottom: 0.5rem; margin-bottom: 0.6rem; }
.panel__title { margin: 0; font-size: 1.05rem; font-family: var(--mono); font-weight: 500; }
.panel__subtitle { margin: 0; font-size: 0.85rem; color: var(--ink-soft); }
.panel__client {
  display: flex; justify-content: space-between; gap: 0.5rem;
  font-family: var(--mono); font-size: 0.78rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  color: var(--ink-soft);
}
.panel__client--waiting { color: var(--active); border-color: var(--active); background: var(--active-bg); }
.panel__client--ok { color: var(--ok); border-color: var(--ok); background: var(--ok-bg); }
.panel__client--error { color: var(--fail); border-color: var(--fail); background: var(--fail-bg); }
.panel__client--slow { color: var(--slow); border-color: var(--slow); background: var(--slow-bg); }
.panel__client--rejected { color: var(--ink); border-color: var(--line); background: var(--paper-2); }
.panel__clock { font-variant-numeric: tabular-nums; white-space: nowrap; }
.panel__svg { margin: 0.6rem 0; }
.panel__detail > * + * { margin-top: 0.6rem; }

/* ---------- Diagrama: cajas anchas, casillas y conexiones ---------- */

.broker rect { fill: var(--paper-2); stroke: var(--ink); stroke-width: 1; }
.broker__name { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; fill: var(--ink-soft); }
.cell rect { fill: var(--paper); stroke: var(--line); stroke-width: 0.8; }
.cell text { font-size: 8.5px; text-anchor: middle; fill: var(--ink-soft); }
.cell--pending rect { stroke: var(--slow); fill: var(--slow-bg); }
.cell--pending text { fill: var(--slow); font-weight: 500; }
.cell--ok rect { stroke: var(--ok); fill: var(--ok-bg); }
.cell--ok text { fill: var(--ok); }
.cell--fail rect { stroke: var(--fail); fill: var(--fail-bg); }
.cell--fail text { fill: var(--fail); font-weight: 500; }
.cell--active rect { stroke: var(--active); fill: var(--active-bg); stroke-width: 1.4; }
.cell--active text { fill: var(--active); }

/* Conexión que se salta el broker (una consulta de vuelta, por ejemplo) */
.edge--query { stroke: var(--slow); stroke-dasharray: 3 3; }
.edge--faint { opacity: 0.35; }

/* ---------- Detalle: fichas con datos ---------- */

.sim-card { border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 0.5rem 0.7rem; font-size: 0.82rem; }
.sim-card__header { display: flex; justify-content: space-between; gap: 0.6rem; font-family: var(--mono); }
.sim-card__value { font-weight: 500; font-variant-numeric: tabular-nums; }
.sim-card__value--fail { color: var(--fail); }
.sim-card__value--ok { color: var(--ok); }
.sim-card__value--slow { color: var(--slow); }
.sim-card__list { list-style: none; padding: 0; margin: 0.3rem 0 0; }
.sim-card__list li { display: flex; gap: 0.6rem; align-items: baseline; margin: 0.1rem 0; color: var(--ink-soft); }
.sim-card__list .sim-card__fail, .sim-card__list .sim-card__fail .sim-card__amount { color: var(--fail); }
.sim-card__list .sim-card__pending, .sim-card__list .sim-card__pending .sim-card__amount { color: var(--slow); }
.sim-card__amount { font-family: var(--mono); color: var(--ink); min-width: 4.5rem; font-variant-numeric: tabular-nums; }
.sim-card__mark { font-family: var(--mono); font-size: 0.7rem; border: 1px solid currentColor; border-radius: 2px; padding: 0 0.3rem; margin-left: auto; white-space: nowrap; }
.sim-card__rows { display: grid; grid-template-columns: auto auto; justify-content: space-between; gap: 0.1rem 1rem; margin-top: 0.2rem; font-family: var(--mono); font-size: 0.78rem; }
.sim-card__rows dt { color: var(--ink-soft); }
.sim-card__rows dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

.code { font-size: 0.72rem; padding: 0.5rem 0; margin: 0.8rem 0 0.6rem; }
.code__line { display: block; padding: 0 0.8rem; border-left: 2px solid transparent; white-space: pre; }
.code__line--hidden { display: none; }
.code__line--new { color: var(--ok); }
.code__line--new::before { content: "+"; position: absolute; margin-left: -0.65rem; }
.code__line--removed { color: var(--fail); text-decoration: line-through; }
.code__line--note { color: var(--ink-soft); }
.code__line--active { background: var(--active-bg); border-left-color: var(--active); color: var(--active); }
.code__line--fail { background: var(--fail-bg); border-left-color: var(--fail); color: var(--fail); }
.code__line--ok { background: var(--ok-bg); border-left-color: var(--ok); color: var(--ok); }

.log { list-style: none; padding: 0; margin: 0; font-size: 0.78rem; color: var(--ink-soft); min-height: 6rem; }
.log li { padding: 0.15rem 0 0.15rem 0.7rem; border-left: 2px solid var(--line-soft); margin: 0; }
.log .log--separator { border-left-color: var(--ink); color: var(--ink); margin-top: 0.3rem; }
.log .log--ok { border-left-color: var(--ok); }
.log .log--fail { border-left-color: var(--fail); color: var(--fail); }
.log .log--slow { border-left-color: var(--slow); }

@media (max-width: 900px) {
  .sim__top { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .sim__panels { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .panel { padding: 0.7rem 0.6rem 0.8rem; }
  .panel__svg .node__name { font-size: 13px; }
  .panel__svg .node__state { font-size: 10px; }
  .panel__svg .message text, .panel__svg .cell text { font-size: 10px; }
}

/* Rótulo sobre una conexión («comando», «síncrono»…) */
.edge__label { font-size: 8px; fill: var(--ink-soft); letter-spacing: 0.04em; }

/* Opción de un control segmented que provoca un fallo (rechaza, no contesta…) */
.segmented input:checked + label.segmented__fail { color: var(--fail); background: var(--fail-bg); }

/* En pantallas estrechas, un control segmented largo parte en varias líneas */
@media (max-width: 480px) {
  .sim .segmented { flex-wrap: wrap; max-width: 100%; }
}

/* ==========================================================================
   Modo carga (tráfico continuo): partículas, pools, marcador,
   minigráfico, contadores y la hora del reloj
   ========================================================================== */

.particle { fill: var(--active); }
.particle--ok { fill: var(--ok); }
.particle--fail { fill: var(--fail); }
.particle--slow { fill: var(--slow); }
.particle--priority { fill: var(--ink); }
.particle--faint { fill: var(--line); }

/* (.slots .slot…: por encima de «.node rect», porque suelen ir dentro de un servicio) */
.slots .slot { fill: var(--paper); stroke: var(--line); stroke-width: 0.8; }
.slots .slot.slot--active { fill: var(--active); stroke: var(--active); }
.slots .slot.slot--slow { fill: var(--slow); stroke: var(--slow); }
.slots .slot.slot--fail { fill: var(--fail); stroke: var(--fail); }
.slots .slot.slot--ok { fill: var(--ok); stroke: var(--ok); }
.slots .slot.slot--priority { fill: var(--ink); stroke: var(--ink); }
.slots .slot.slot--off { fill: none; stroke: var(--line-soft); stroke-dasharray: 2 2; }

/* Fondo de un rótulo con fondo (sobre una conexión, por ejemplo) */
.label__bg { fill: var(--paper); opacity: 0.92; }

/* Título de una caja de servicio (arriba a la izquierda) */
.box__title { font-size: 11px; font-weight: 500; }

/* Rótulos pequeños dentro de una caja (nombre de un pool, una cola…) */
.box__label { font-size: 8px; fill: var(--ink-soft); }
.box__figure { font-size: 9px; font-weight: 500; fill: var(--ink); }
.box__figure--fail { fill: var(--fail); }
.box__figure--slow { fill: var(--slow); }
.box__figure--ok { fill: var(--ok); }

/* Marcador: las tres cifras comunes, siempre con el mismo color */
.scoreboard dt::before { content: "■ "; font-size: 0.7em; vertical-align: 0.15em; color: var(--line); }
.scoreboard .scoreboard__ok::before { color: var(--ok); }
.scoreboard .scoreboard__fail::before { color: var(--fail); }
.scoreboard .scoreboard__slow::before { color: var(--slow); }
.scoreboard .scoreboard__active::before { color: var(--active); }

/* Minigráfico */
.sim-card--chart .sim-card__header { align-items: baseline; }
.chart { display: block; width: 100%; height: 46px; margin-top: 0.2rem; overflow: visible; }
.chart__line { fill: none; stroke: var(--active); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.chart__area { fill: var(--active-bg); stroke: none; }
.chart__limit { stroke: var(--fail); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.chart__legend { color: var(--fail); font-size: 0.72rem; margin-left: auto; }

/* Contador − valor + */
.counter { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); }
.counter__button {
  font: inherit; font-family: var(--mono); font-size: 0.8rem;
  width: 1.7rem; height: 1.6rem;
  border: 0; background: none; color: var(--ink); cursor: pointer;
}
.counter__button:hover:not(:disabled) { color: var(--active); }
.counter__button:disabled { opacity: 0.35; cursor: not-allowed; }
.counter__value { font-family: var(--mono); font-size: 0.8rem; min-width: 1.8rem; text-align: center; font-variant-numeric: tabular-nums; }

/* Hora del reloj de la simulación */
.sim__time {
  font-family: var(--mono); font-size: 0.82rem; font-variant-numeric: tabular-nums;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 0.1rem 0.5rem; color: var(--ink);
}
.sim__time:empty { display: none; }

/* Grupo de mandos con rótulo (compartimentos, umbrales…) */
.sim__group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.8rem; }