/* ============================================================
   Haricode — figuras y diagramas.
   Construidos con HTML y CSS, no como imagen: el texto es texto
   (seleccionable, traducible, accesible) y pesa cero.
   ============================================================ */

.fig{
  margin:var(--sp-7) 0 0;
  border:1px solid var(--border);border-radius:var(--r-card);
  background:var(--surface-2);overflow:hidden;
}
.fig-body{padding:var(--sp-7) var(--sp-6)}
.fig figcaption{
  padding:var(--sp-4) var(--sp-6);border-top:1px solid var(--border);
  color:var(--text-3);font-size:var(--fs-sm);line-height:1.55;
}
.fig figcaption b{color:var(--text-2);font-weight:var(--fw-medium)}

/* ── DIAGRAMA ANTES / DESPUÉS ───────────────────────────── */
.diag{
  display:grid;grid-template-columns:1fr auto 1fr;gap:var(--sp-6);
  align-items:stretch;
}
.diag-col{display:flex;flex-direction:column;min-width:0}
.diag-label{
  display:block;font-size:var(--fs-xs);color:var(--text-3);
  margin-bottom:var(--sp-5);letter-spacing:.02em;
}
.diag-col.after .diag-label{color:var(--text-2)}

/* Estado actual: piezas sueltas, desalineadas a propósito */
.diag-scatter{list-style:none;display:flex;flex-direction:column;gap:var(--sp-3);flex:1}
.diag-scatter li{
  align-self:flex-start;
  border:1px dashed var(--border-strong);border-radius:var(--r-control);
  padding:var(--sp-2) var(--sp-3);
  font-size:var(--fs-sm);color:var(--text-2);background:var(--surface-1);
}
.diag-scatter li:nth-child(2){margin-left:14%}
.diag-scatter li:nth-child(3){margin-left:5%}
.diag-scatter li:nth-child(4){margin-left:20%}
.diag-scatter li:nth-child(5){margin-left:9%}

/* Estado propuesto: una sola línea, un solo recorrido */
.diag-chain{list-style:none;position:relative;padding-left:var(--sp-6);flex:1}
.diag-chain::before{
  content:"";position:absolute;left:5px;top:10px;bottom:10px;width:1px;
  background:linear-gradient(var(--accent),var(--border));
}
.diag-chain li{
  position:relative;padding:var(--sp-2) 0 var(--sp-2) var(--sp-2);
  font-size:var(--fs-sm);color:var(--text-2);
}
.diag-chain li::before{
  content:"";position:absolute;left:calc(var(--sp-6) * -1 + 2px);top:50%;
  width:7px;height:7px;border-radius:50%;margin-top:-3.5px;
  background:var(--surface-2);border:1px solid var(--accent);
}
.diag-chain li:first-child::before{background:var(--accent)}

.diag-note{
  margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--border);
  font-size:var(--fs-xs);color:var(--text-3);line-height:1.5;
}
.diag-col.after .diag-note{color:var(--text-2)}

/* La transición entre ambos estados */
.diag-turn{
  display:flex;align-items:center;justify-content:center;
  width:40px;color:var(--text-3);
}
.diag-turn svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.5;fill:none}

@media(max-width:760px){
  .diag{grid-template-columns:1fr;gap:var(--sp-5)}
  .diag-turn{width:auto;height:32px;transform:rotate(90deg)}
  .diag-scatter li{align-self:stretch;margin-left:0!important}
}

/* ── DIAGRAMA DE CAPAS ──────────────────────────────────── */
.layers{display:flex;flex-direction:column;gap:var(--sp-2)}
.layer{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-5);align-items:center;
  border:1px solid var(--border);border-radius:var(--r-control);
  padding:var(--sp-4) var(--sp-5);background:var(--surface-1);
}
.layer strong{font-weight:var(--fw-medium);font-size:var(--fs-sm)}
.layer span{color:var(--text-3);font-size:var(--fs-xs);text-align:right}
.layer.accent{border-color:var(--accent)}
.layer.accent strong{color:var(--text)}
@media(max-width:560px){
  .layer{grid-template-columns:1fr;gap:var(--sp-1)}
  .layer span{text-align:left}
}

/* ── DIAGRAMA DE FLUJO CON CONTROL HUMANO ───────────────── */
.pipeline{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:stretch}
.stage{
  flex:1 1 128px;min-width:0;
  border:1px solid var(--border);border-radius:var(--r-control);
  padding:var(--sp-4);background:var(--surface-1);
  display:flex;flex-direction:column;gap:var(--sp-1);
}
.stage .n{font-size:var(--fs-xs);color:var(--text-3);font-variant-numeric:tabular-nums}
.stage strong{font-weight:var(--fw-medium);font-size:var(--fs-sm)}
.stage small{color:var(--text-3);font-size:var(--fs-xs);line-height:1.45}
.stage.human{border-color:var(--accent);background:var(--surface-2)}
.stage.human .n{color:var(--accent)}

/* ── UNA BASE, VARIAS SUPERFICIES ───────────────────────── */
.surfaces{display:flex;flex-direction:column;gap:var(--sp-3)}
.surfaces-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3)}
.surface{
  border:1px solid var(--border);border-radius:var(--r-control);
  padding:var(--sp-4);background:var(--surface-1);text-align:center;
}
.surface strong{display:block;font-weight:var(--fw-medium);font-size:var(--fs-sm)}
.surface small{color:var(--text-3);font-size:var(--fs-xs)}
.surfaces-link{
  height:20px;position:relative;
}
.surfaces-link::before{
  content:"";position:absolute;left:16.6%;right:16.6%;top:50%;height:1px;
  background:var(--border-strong);
}
.surfaces-link::after{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;
  background:var(--accent);
}
.surfaces-base{
  border:1px solid var(--accent);border-radius:var(--r-control);
  padding:var(--sp-5);background:var(--surface-2);
}
.surfaces-base strong{display:block;font-weight:var(--fw-medium);margin-bottom:var(--sp-2)}
.surfaces-base p{color:var(--text-2);font-size:var(--fs-sm);line-height:1.55}
@media(max-width:560px){
  .surfaces-row{grid-template-columns:1fr}
  .surfaces-link::before{display:none}
}