/* =====================================================================
   diagrama.css — «ver qué hace mi programa».

   Es un diagrama de flujo, pero de arriba abajo en vez de a lo ancho:
   en un celular lo ancho no cabe, y leer hacia abajo es lo natural.
   Las decisiones abren ramas y las repeticiones se meten en una caja
   con un borde que se cierra.
   ===================================================================== */

.dg{ padding:4px 2px 30px; font-size:13.5px }

.dg-tramo{ margin-bottom:22px }
.dg-cab{
  display:flex; align-items:baseline; gap:9px; margin-bottom:11px;
  border-bottom:2.5px solid var(--tinta); padding-bottom:6px;
}
.dg-cab b{ font:400 15px var(--f-titulo); text-transform:uppercase }
.dg-cab small{ font-weight:800; font-size:11.5px; color:var(--txt2) }

/* ------------------------------------------------------- cada paso */
.dg-nodo{ display:flex; flex-direction:column; align-items:center }
.dg-caja{
  border:2.5px solid var(--tinta); border-radius:12px; background:var(--crema);
  padding:8px 13px; font-weight:700; text-align:center; max-width:100%;
  box-shadow:var(--sombra-1); word-break:break-word;
}

/* la flecha entre dos pasos */
.dg-flecha{
  width:3px; height:16px; background:var(--tinta); position:relative; flex:none;
}
.dg-flecha::after{
  content:""; position:absolute; left:50%; bottom:-1px; translate:-50% 0;
  border-left:5px solid transparent; border-right:5px solid transparent;
  border-top:7px solid var(--tinta);
}

/* ------------------------------------------------------ decisiones */
.dg-pregunta{
  background:var(--amarillo); border-radius:999px; padding:9px 18px;
}
.dg-ramas{
  display:flex; gap:14px; margin-top:14px; align-items:flex-start;
  width:100%; justify-content:center; flex-wrap:wrap;
}
.dg-rama{
  display:flex; flex-direction:column; align-items:center; gap:9px;
  border:2.5px dashed var(--line2); border-radius:14px; padding:12px 10px;
  min-width:150px; flex:1 1 150px; position:relative;
}
.dg-etq{
  font:900 11px var(--f-texto); text-transform:uppercase; letter-spacing:.06em;
  border:2px solid var(--tinta); border-radius:999px; padding:2px 10px;
}
.dg-si{ background:var(--verde) }
.dg-no{ background:var(--rojo) }

/* ----------------------------------------------------- repeticiones */
.dg-lazo{ width:100% }
.dg-repite{ background:var(--lila) }
.dg-dentro{
  margin-top:12px; padding:13px 10px;
  border:2.5px solid var(--tinta); border-top-width:0;
  border-radius:0 0 14px 14px; position:relative;
  display:flex; flex-direction:column; align-items:center;
}
/* la flechita que indica que se vuelve a dar la vuelta */
.dg-dentro::after{
  content:"vuelve"; position:absolute; right:8px; bottom:6px;
  font:900 9.5px var(--f-texto); text-transform:uppercase; color:var(--txt2);
}

/* --------------------------------------------------------- remates */
.dg-vuelta{
  margin:14px auto 0; width:max-content;
  border:2.5px solid var(--tinta); border-radius:999px; background:var(--lila);
  padding:5px 14px; font:900 11px var(--f-texto); text-transform:uppercase;
  letter-spacing:.06em;
}
.dg-vacio, .dg-nada{ color:var(--txt2); font-size:12.5px; font-style:italic; margin:0 }
.dg-nada{ padding:22px 4px; text-align:center }
.dg-error{
  border:2.5px solid var(--tinta); border-radius:14px; background:var(--amarillo);
  padding:13px 16px; box-shadow:var(--sombra-1);
}
.dg-error b{ display:block; font:400 15px var(--f-titulo); text-transform:uppercase; margin-bottom:5px }
.dg-error p{ margin:0 0 6px; font-size:13px }

#diagramaView{
  flex:1; min-height:0; overflow-y:auto; padding:14px;
  background-color:var(--bg2);
  background-image:
    repeating-linear-gradient(to right,  #8b97fd1a 0 1.5px, transparent 1.5px 26px),
    repeating-linear-gradient(to bottom, #8b97fd1a 0 1.5px, transparent 1.5px 26px);
}