/* ==========================================================================
   Simulaciones (episodio 2 en adelante): lo común a todas.
   Lo usan el artículo (index.html) y el laboratorio (laboratorio.html) junto
   con assets/simulacion.js. Lo propio de cada episodio va en el CSS de su
   carpeta. El episodio 1 es anterior y lleva su propia hoja.
   ========================================================================== */

.sim { margin-top: 1.5rem; }
.sim__arriba {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 1rem;
  margin-bottom: 1rem;
}
.retos, .sim__mandos {
  border: 1px solid var(--linea-suave);
  border-radius: var(--radio);
  background: var(--papel);
  padding: 0.8rem 1rem;
}
.retos__cabecera, .sim__titulo {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 0.5rem;
}
.retos__cabecera strong { font-weight: 500; }
.retos__lista { list-style: none; padding: 0; margin: 0; font-size: 0.88rem; }
.retos__lista li { display: flex; gap: 0.55rem; align-items: baseline; margin: 0.2rem 0; }
.retos__marca {
  flex: none;
  width: 0.95rem; height: 0.95rem;
  border: 1px solid var(--linea);
  border-radius: 2px;
  font-size: 0.7rem;
  line-height: 0.9rem;
  text-align: center;
  transform: translateY(0.12rem);
}
.retos__hecho { color: var(--tinta-suave); }
.retos__hecho .retos__marca { border-color: var(--ok); color: var(--ok); background: var(--ok-fondo); }

.sim__servicios { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.9rem; }
.servicio { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.servicio__nombre { font-family: var(--mono); font-size: 0.82rem; }
.sim__acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sim__reproduccion {
  display: flex; flex-direction: column; gap: 0.4rem;
  margin-top: 0.9rem; padding-top: 0.8rem;
  border-top: 1px dashed var(--linea-suave);
}
.sim__reproduccion .boton { padding: 0.25rem 0.7rem; }
.sim__casilla { display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; min-height: 1.9rem; }
.sim__casilla input { accent-color: var(--activo); margin: 0; }
.mensaje--detenido { animation: detenido 1s ease-in-out infinite; }
@keyframes detenido { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .mensaje--detenido { animation: none; } }

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

.sim__lectura {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
  background: var(--papel-2);
  font-size: 0.95rem;
}
.sim__lectura:empty { display: none; }
.sim__lectura--fallo { border-color: var(--fallo); background: var(--fallo-fondo); }
.sim__lectura--ok { border-color: var(--ok); background: var(--ok-fondo); }
.sim__lectura--lento { border-color: var(--lento); background: var(--lento-fondo); }

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

.sim__paneles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.panel {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel);
  padding: 0.9rem 1rem 1rem;
  min-width: 0;
}
.panel__cabecera { border-bottom: 1px solid var(--linea-suave); padding-bottom: 0.5rem; margin-bottom: 0.6rem; }
.panel__titulo { margin: 0; font-size: 1.05rem; font-family: var(--mono); font-weight: 500; }
.panel__subtitulo { margin: 0; font-size: 0.85rem; color: var(--tinta-suave); }
.panel__cliente {
  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(--linea-suave); border-radius: var(--radio);
  color: var(--tinta-suave);
}
.panel__cliente--esperando { color: var(--activo); border-color: var(--activo); background: var(--activo-fondo); }
.panel__cliente--ok { color: var(--ok); border-color: var(--ok); background: var(--ok-fondo); }
.panel__cliente--error { color: var(--fallo); border-color: var(--fallo); background: var(--fallo-fondo); }
.panel__cliente--lento { color: var(--lento); border-color: var(--lento); background: var(--lento-fondo); }
.panel__cliente--rechazada { color: var(--tinta); border-color: var(--linea); background: var(--papel-2); }
.panel__reloj { font-variant-numeric: tabular-nums; white-space: nowrap; }
.panel__svg { margin: 0.6rem 0; }
.panel__detalle > * + * { margin-top: 0.6rem; }

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

.broker rect { fill: var(--papel-2); stroke: var(--tinta); stroke-width: 1; }
.broker__nombre { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; fill: var(--tinta-suave); }
.celda rect { fill: var(--papel); stroke: var(--linea); stroke-width: 0.8; }
.celda text { font-size: 8.5px; text-anchor: middle; fill: var(--tinta-suave); }
.celda--pendiente rect { stroke: var(--lento); fill: var(--lento-fondo); }
.celda--pendiente text { fill: var(--lento); font-weight: 500; }
.celda--ok rect { stroke: var(--ok); fill: var(--ok-fondo); }
.celda--ok text { fill: var(--ok); }
.celda--fallo rect { stroke: var(--fallo); fill: var(--fallo-fondo); }
.celda--fallo text { fill: var(--fallo); font-weight: 500; }
.celda--activa rect { stroke: var(--activo); fill: var(--activo-fondo); stroke-width: 1.4; }
.celda--activa text { fill: var(--activo); }

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

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

.ficha-sim { border: 1px solid var(--linea-suave); border-radius: var(--radio); padding: 0.5rem 0.7rem; font-size: 0.82rem; }
.ficha-sim__cabecera { display: flex; justify-content: space-between; gap: 0.6rem; font-family: var(--mono); }
.ficha-sim__valor { font-weight: 500; font-variant-numeric: tabular-nums; }
.ficha-sim__valor--fallo { color: var(--fallo); }
.ficha-sim__valor--ok { color: var(--ok); }
.ficha-sim__valor--lento { color: var(--lento); }
.ficha-sim__lista { list-style: none; padding: 0; margin: 0.3rem 0 0; }
.ficha-sim__lista li { display: flex; gap: 0.6rem; align-items: baseline; margin: 0.1rem 0; color: var(--tinta-suave); }
.ficha-sim__lista .ficha-sim__fallo, .ficha-sim__lista .ficha-sim__fallo .ficha-sim__importe { color: var(--fallo); }
.ficha-sim__lista .ficha-sim__pendiente, .ficha-sim__lista .ficha-sim__pendiente .ficha-sim__importe { color: var(--lento); }
.ficha-sim__importe { font-family: var(--mono); color: var(--tinta); min-width: 4.5rem; font-variant-numeric: tabular-nums; }
.ficha-sim__marca { 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; }
.ficha-sim__filas { 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; }
.ficha-sim__filas dt { color: var(--tinta-suave); }
.ficha-sim__filas dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

.codigo { font-size: 0.72rem; padding: 0.5rem 0; margin: 0.8rem 0 0.6rem; }
.codigo__linea { display: block; padding: 0 0.8rem; border-left: 2px solid transparent; white-space: pre; }
.codigo__linea--oculta { display: none; }
.codigo__linea--nueva { color: var(--ok); }
.codigo__linea--nueva::before { content: "+"; position: absolute; margin-left: -0.65rem; }
.codigo__linea--quitada { color: var(--fallo); text-decoration: line-through; }
.codigo__linea--nota { color: var(--tinta-suave); }
.codigo__linea--activa { background: var(--activo-fondo); border-left-color: var(--activo); color: var(--activo); }
.codigo__linea--fallo { background: var(--fallo-fondo); border-left-color: var(--fallo); color: var(--fallo); }
.codigo__linea--ok { background: var(--ok-fondo); border-left-color: var(--ok); color: var(--ok); }

.log { list-style: none; padding: 0; margin: 0; font-size: 0.78rem; color: var(--tinta-suave); min-height: 6rem; }
.log li { padding: 0.15rem 0 0.15rem 0.7rem; border-left: 2px solid var(--linea-suave); margin: 0; }
.log .log--separador { border-left-color: var(--tinta); color: var(--tinta); margin-top: 0.3rem; }
.log .log--ok { border-left-color: var(--ok); }
.log .log--fallo { border-left-color: var(--fallo); color: var(--fallo); }
.log .log--lento { border-left-color: var(--lento); }

.panel__registro > summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--tinta-suave);
  padding: 0.15rem 0;
}
.panel__registro > summary:hover { color: var(--tinta); }

@media (max-width: 900px) {
  .sim__arriba { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .sim__paneles { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .panel { padding: 0.7rem 0.6rem 0.8rem; }
  .panel__svg .nodo__nombre { font-size: 13px; }
  .panel__svg .nodo__estado { font-size: 10px; }
  .panel__svg .mensaje text, .panel__svg .celda text { font-size: 10px; }
}

/* ==========================================================================
   Laboratorio (laboratorio.html)
   ========================================================================== */

.lab .sim__servicios { flex-direction: row; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin: 0; }
.lab .servicio { justify-content: flex-start; gap: 0.5rem; }
.lab__pie .sim__reproduccion { flex: none; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; margin: 0; padding: 0; border: 0; }
.lab__pie .servicio { gap: 0.5rem; }
.lab__pie .servicio__nombre { font-size: 0.78rem; color: var(--tinta-suave); }

/* Panel: cabecera y estado arriba, diagrama que crece, detalle abajo */
.lab .panel {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "cab cli" "diag diag" "det det";
  column-gap: 1rem;
  padding: 0.6rem 0.8rem 0.7rem;
}
.lab .panel.panel--oculto { display: none; }
.lab .panel__cabecera { grid-area: cab; border: 0; padding: 0; margin: 0; align-self: center; }
.lab .panel__titulo { font-size: 0.95rem; }
.lab .panel__subtitulo { display: none; }
.lab .panel__cliente { grid-area: cli; align-self: center; }
.lab .panel__diagrama { grid-area: diag; min-height: 0; display: flex; }
.lab .panel__svg { width: 100%; height: 100%; margin: 0.3rem 0; }

.lab .panel__detalle {
  grid-area: det;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 0.5rem 0.7rem;
  align-items: start;
}
.lab .panel__detalle > * + * { margin-top: 0; }
.lab .panel__detalle > * { grid-column: 1; }
.lab .panel__detalle > .codigo { grid-column: 2; grid-row: 1 / span 4; margin: 0; padding: 0.35rem 0; font-size: 0.66rem; line-height: 1.35; }
.lab .ficha-sim { padding: 0.35rem 0.6rem; font-size: 0.78rem; }
.lab .ficha-sim__lista { max-height: 4.4em; overflow-y: auto; }
.lab .ficha-sim__lista li { white-space: nowrap; }
.lab .ficha-sim__lista li > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lab .ficha-sim__importe, .lab .ficha-sim__marca { flex: none; }
.lab .ficha-sim__importe { min-width: 3.6rem; }
.lab .panel__registro .log { max-height: 7.5rem; overflow-y: auto; min-height: 0; margin-top: 0.2rem; }

/* En el laboratorio, texto del diagrama algo mayor */
.lab .nodo .nodo__nombre { font-size: 12.5px; }
.lab .nodo .nodo__estado { font-size: 9.5px; }
.lab .mensaje text { font-size: 9.5px; }
.lab .celda text { font-size: 9.5px; }

/* Mismo alto de detalle en los dos paneles, para que los diagramas midan igual */
.lab--comparar .panel__detalle { min-height: 7.4rem; }

/* Solo un modelo: ocupa toda la pantalla, con el detalle a la derecha */
.lab--solo .panel {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "cab cli" "diag det";
}
.lab--solo .panel__detalle {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow-y: auto;
  padding-top: 0.3rem;
}
.lab.lab--solo .panel__detalle > * { flex: none; }
.lab.lab--solo .panel__detalle > .codigo { font-size: 0.78rem; }
.lab--solo .panel__registro .log { max-height: none; }
.lab--solo .ficha-sim__lista { max-height: none; }

@media (max-width: 760px), (max-height: 520px) {
  .lab .panel,
  .lab--solo .panel { display: block; }
  .lab .panel.panel--oculto { display: none; }
  .lab .panel__svg { height: auto; }
  .lab .panel__detalle { display: block; }
  .lab .panel__detalle > * { margin-top: 0.5rem; }
}

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

/* Opción de un control segmentado que provoca un fallo (rechaza, no contesta…) */
.segmentado input:checked + label.segmentado__fallo { color: var(--fallo); background: var(--fallo-fondo); }
.pixel .segmentado input:checked + label.segmentado__fallo { border-color: var(--fallo); color: var(--fallo); background: var(--papel-2); }

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

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

.particula { fill: var(--activo); }
.particula--ok { fill: var(--ok); }
.particula--fallo { fill: var(--fallo); }
.particula--lento { fill: var(--lento); }
.particula--prioridad { fill: var(--tinta); }
.particula--tenue { fill: var(--linea); }

/* (.casillas .casilla…: por encima de «.nodo rect», porque suelen ir dentro de un servicio) */
.casillas .casilla { fill: var(--papel); stroke: var(--linea); stroke-width: 0.8; }
.casillas .casilla.casilla--activa { fill: var(--activo); stroke: var(--activo); }
.casillas .casilla.casilla--lento { fill: var(--lento); stroke: var(--lento); }
.casillas .casilla.casilla--fallo { fill: var(--fallo); stroke: var(--fallo); }
.casillas .casilla.casilla--ok { fill: var(--ok); stroke: var(--ok); }
.casillas .casilla.casilla--prioridad { fill: var(--tinta); stroke: var(--tinta); }
.casillas .casilla.casilla--apagada { fill: none; stroke: var(--linea-suave); stroke-dasharray: 2 2; }

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

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

/* Rótulos pequeños dentro de una caja (nombre de un pool, una cola…) */
.caja__rotulo { font-size: 8px; fill: var(--tinta-suave); }
.caja__cifra { font-size: 9px; font-weight: 500; fill: var(--tinta); }
.caja__cifra--fallo { fill: var(--fallo); }
.caja__cifra--lento { fill: var(--lento); }
.caja__cifra--ok { fill: var(--ok); }
.lab .caja__rotulo { font-size: 9px; }
.lab .caja__cifra { font-size: 10px; }

/* Marcador: las tres cifras comunes, siempre con el mismo color */
.marcador dt::before { content: "■ "; font-size: 0.7em; vertical-align: 0.15em; color: var(--linea); }
.marcador .marcador__ok::before { color: var(--ok); }
.marcador .marcador__fallo::before { color: var(--fallo); }
.marcador .marcador__lento::before { color: var(--lento); }
.marcador .marcador__activo::before { color: var(--activo); }

/* Minigráfico */
.ficha-sim--grafico .ficha-sim__cabecera { align-items: baseline; }
.grafico { display: block; width: 100%; height: 46px; margin-top: 0.2rem; overflow: visible; }
.grafico__linea { fill: none; stroke: var(--activo); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.grafico__area { fill: var(--activo-fondo); stroke: none; }
.grafico__limite { stroke: var(--fallo); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.grafico__leyenda { color: var(--fallo); font-size: 0.72rem; margin-left: auto; }
.lab .grafico { height: 38px; }

/* Contador − valor + */
.contador { display: inline-flex; align-items: center; border: 1px solid var(--linea); border-radius: var(--radio); }
.contador__boton {
  font: inherit; font-family: var(--mono); font-size: 0.8rem;
  width: 1.7rem; height: 1.6rem;
  border: 0; background: none; color: var(--tinta); cursor: pointer;
}
.contador__boton:hover:not(:disabled) { color: var(--activo); }
.contador__boton:disabled { opacity: 0.35; cursor: not-allowed; }
.contador__valor { 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__hora {
  font-family: var(--mono); font-size: 0.82rem; font-variant-numeric: tabular-nums;
  border: 1px solid var(--linea-suave); border-radius: var(--radio);
  padding: 0.1rem 0.5rem; color: var(--tinta);
}
.sim__hora:empty { display: none; }

/* Grupo de mandos con rótulo (compartimentos, umbrales…) */
.sim__grupo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.8rem; }
.lab .marcador dt { white-space: nowrap; }