/* ==========================================================================
   Episodio 1 · estilo de la simulación
   Lo usan el artículo (index.html) y el laboratorio (laboratorio.html).
   ========================================================================== */

.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; } }

.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); }

.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--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__reintentar { width: 100%; margin: 0.6rem 0 0; }

.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; }

.cuenta { border: 1px solid var(--linea-suave); border-radius: var(--radio); padding: 0.5rem 0.7rem; font-size: 0.82rem; }
.cuenta__cabecera { display: flex; justify-content: space-between; font-family: var(--mono); }
.cuenta__saldo { font-weight: 500; font-variant-numeric: tabular-nums; }
.cuenta__saldo--fallo { color: var(--fallo); }
.cuenta__movimientos { list-style: none; padding: 0; margin: 0.3rem 0 0; }
.cuenta__movimientos li { display: flex; gap: 0.6rem; align-items: baseline; margin: 0.1rem 0; color: var(--tinta-suave); }
.cuenta__importe { font-family: var(--mono); color: var(--tinta); min-width: 4.5rem; }
.cuenta__duplicado, .cuenta__duplicado .cuenta__importe { color: var(--fallo); }
.cuenta__marca { font-family: var(--mono); font-size: 0.7rem; border: 1px solid var(--fallo); border-radius: 2px; padding: 0 0.3rem; margin-left: auto; }

.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--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); }

.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); }

@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-direction: row; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; margin: 0; padding: 0; border: 0; }
.lab__pie .sim__reproduccion { flex: none; flex-direction: row; align-items: center; gap: 0.5rem 1rem; }
.lab__pie .servicio { gap: 0.5rem; }
.lab__pie .servicio__nombre { font-size: 0.78rem; color: var(--tinta-suave); }

/* Panel: cabecera y estado de Ana 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__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 > .cuenta,
.lab .panel__detalle > .panel__reintentar,
.lab .panel__detalle > .panel__registro { grid-column: 1; }
.lab .panel__detalle > .codigo { grid-column: 2; grid-row: 1 / span 3; margin: 0; padding: 0.35rem 0; font-size: 0.66rem; line-height: 1.35; }
.lab .cuenta { padding: 0.35rem 0.6rem; font-size: 0.78rem; }

/* 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; }
.lab .panel__reintentar { margin: 0; }
/* Mismo alto de detalle en los dos paneles, para que los diagramas midan igual */
.lab--comparar .panel__detalle { min-height: 7.4rem; }
/* Al comparar, el broker ya enseña quién está suscrito: se ocultan esas líneas */
.lab--comparar .codigo__linea--suscripcion { display: none !important; }
.lab .cuenta__movimientos { max-height: 4.4em; overflow-y: auto; }
/* Cada movimiento en una línea: importe y marca siempre visibles, descripción recortada */
.lab .cuenta__movimientos li { white-space: nowrap; }
.lab .cuenta__movimientos li > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lab .cuenta__importe, .lab .cuenta__marca { flex: none; }
.lab .cuenta__importe { min-width: 3.6rem; }

.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); }
.lab .panel__registro .log { max-height: 7.5rem; overflow-y: auto; min-height: 0; margin-top: 0.2rem; }

/* Solo un modelo: ocupa toda la pantalla, con el detalle a la derecha */
.lab.lab--rest .panel--eventos,
.lab.lab--eventos .panel--rest { display: none; }
.lab--rest .panel,
.lab--eventos .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--rest .panel__detalle,
.lab--eventos .panel__detalle {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow-y: auto;
  padding-top: 0.3rem;
}
.lab.lab--rest .panel__detalle > *,
.lab.lab--eventos .panel__detalle > * { flex: none; }
.lab.lab--rest .panel__detalle > .codigo,
.lab.lab--eventos .panel__detalle > .codigo { font-size: 0.78rem; }
.lab--rest .panel__registro .log,
.lab--eventos .panel__registro .log { max-height: none; }

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