/* Maquetas de las páginas de preguntas
   ---------------------------------------------------------------------------
   Dibujos de pantallas reales del sistema, no capturas. Salió de la maqueta
   de la puerta que está en la portada y por el mismo motivo: una captura se
   desactualiza sin que nadie lo note, pesa, y lleva adentro el nombre y el
   correo de alguien —y si hay un QR, un token que funciona—. Un dibujo no
   tiene nada de eso y se corrige editando texto.

   Los colores son los del producto, copiados de src/styles.css. Si allá
   cambian, esto queda viejo: son dos archivos distintos porque estas páginas
   son estáticas y no pasan por el compilador. Es la única desventaja frente
   a la maqueta de la portada, que sí lee las variables.

   Un archivo compartido y no un bloque repetido en cada página: son cinco
   páginas y un bloque copiado cinco veces se corrige en cuatro. */

:root{
  --m-bg:#0B0B0F;
  --m-panel:#14141A;
  --m-panel-2:#1C1C24;
  --m-borde:#26262F;
  --m-texto:#F2F2EE;
  --m-dim:#C6C6C0;
  --m-mudo:#8A8A94;
  --m-violeta:#7C6BFF;
  --m-ok:#34D399;
  --m-warn:#FBBF24;
  --m-error:#F43F5E;
  --m-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

figure.maq{ margin:30px 0 34px; }

/* Dice que los datos son inventados. Una cifra sin ese aviso se lee como
   real, y estas páginas las mira gente que está por contratar. */
figure.maq figcaption{
  margin-top:10px; font-size:13.5px; color:var(--m-mudo); line-height:1.5;
}

.maq-panel{
  background:var(--m-panel); border:1px solid var(--m-borde);
  border-radius:14px; padding:18px 17px;
}
.maq-panel + .maq-panel{ margin-top:10px; }

.maq-cabecera{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-bottom:14px;
}
.maq-cabecera > div{ min-width:0; }
.maq-rotulo{
  font-family:var(--m-mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--m-mudo); margin:0 0 4px;
}
.maq-titulo{
  font-size:17px; font-weight:700; color:var(--m-texto);
  margin:0; letter-spacing:-.01em; line-height:1.3;
}

/* ---------- Pastillas de estado ---------- */
.maq-pastilla{
  display:inline-flex; align-items:center; gap:7px; flex:none;
  font-family:var(--m-mono); font-size:11px; letter-spacing:.05em;
  border-radius:100px; padding:6px 11px;
  background:var(--m-panel-2); color:var(--m-mudo);
}
.maq-pastilla::before{
  content:''; width:7px; height:7px; border-radius:50%;
  background:currentColor; flex:none;
}
.maq-pastilla.ok{ background:#34D3991F; color:var(--m-ok); }
.maq-pastilla.warn{ background:#FBBF241F; color:var(--m-warn); }
.maq-pastilla.mal{ background:#F43F5E1F; color:var(--m-error); }
.maq-pastilla.sin-punto::before{ display:none; }
.maq-derecha{ margin-left:auto; }

/* ---------- El veredicto de la puerta ----------
   Grande y en un solo color: se lee de reojo, con gente esperando. Un
   intento repetido no se puede parecer a un ingreso válido. */
.maq-veredictos{ display:grid; gap:10px; }
@media(min-width:620px){ .maq-veredictos{ grid-template-columns:repeat(3,1fr); } }

.maq-veredicto{
  background:var(--m-panel); border:1px solid var(--m-borde);
  border-radius:14px; padding:20px 16px; text-align:center;
}
.maq-veredicto .circulo{
  width:48px; height:48px; border-radius:50%; margin:0 auto 13px;
  display:grid; place-items:center;
}
.maq-veredicto .circulo svg{ width:24px; height:24px; }
.maq-veredicto h3{
  font-size:17px; margin:0 0 5px; color:var(--m-texto); letter-spacing:-.01em;
}
.maq-veredicto p{
  margin:0; font-size:13.5px; color:var(--m-mudo); line-height:1.5;
}
.maq-veredicto.ok .circulo{ background:#34D39924; color:var(--m-ok); }
.maq-veredicto.ok h3{ color:var(--m-ok); }
.maq-veredicto.warn .circulo{ background:#FBBF2424; color:var(--m-warn); }
.maq-veredicto.warn h3{ color:var(--m-warn); }
.maq-veredicto.mal .circulo{ background:#F43F5E24; color:var(--m-error); }
.maq-veredicto.mal h3{ color:var(--m-error); }

/* ---------- Cifras ---------- */
.maq-cifras{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.maq-cifras > div{
  background:var(--m-panel); border:1px solid var(--m-borde);
  border-radius:12px; padding:15px 13px;
}
.maq-cifras p{ margin:0 0 3px; font-size:12px; color:var(--m-mudo); }
.maq-cifras b{
  display:block; font-family:var(--m-mono); font-size:24px; font-weight:700;
  line-height:1.1; color:var(--m-texto);
}
.maq-cifras small{ font-size:11px; color:var(--m-mudo); }
@media(max-width:520px){
  .maq-cifras{ grid-template-columns:1fr; }
  .maq-cifras > div{ display:flex; align-items:baseline; gap:10px; }
  .maq-cifras p{ margin:0; }
  .maq-cifras b{ font-size:20px; margin-left:auto; }
}

/* ---------- Una fila de lista: un grupo, un asistente ---------- */
.maq-fila{
  background:var(--m-panel-2); border-radius:11px;
  padding:13px 14px; display:flex; align-items:center; gap:12px;
  flex-wrap:wrap;
}
.maq-fila + .maq-fila{ margin-top:8px; }
.maq-fila b{
  display:block; font-size:15px; color:var(--m-texto); letter-spacing:-.005em;
}
.maq-fila small{
  display:block; margin-top:2px;
  font-size:12.5px; color:var(--m-mudo); font-family:var(--m-mono);
}

/* ---------- La barra de estado de la puerta ---------- */
.maq-estado{
  display:flex; align-items:center; gap:13px; flex-wrap:wrap;
  background:var(--m-panel-2); border-radius:11px; padding:13px 14px;
}
.maq-estado + .maq-estado{ margin-top:8px; }
.maq-panel + .maq-veredicto,
.maq-veredicto + .maq-panel,
.maq-panel + .maq-veredictos,
.maq-panel + .maq-cifras{ margin-top:10px; }
.maq-estado b{ display:block; font-size:14.5px; color:var(--m-texto); }
.maq-estado small{ display:block; margin-top:2px; font-size:12.5px; color:var(--m-mudo); }
.maq-boton{
  flex:none; font-size:13px; font-weight:600; color:var(--m-texto);
  background:transparent; border:1px solid var(--m-borde);
  border-radius:8px; padding:9px 14px;
}

/* ---------- Barra de ocupación ---------- */
.maq-barra{
  height:8px; border-radius:100px; background:var(--m-panel-2);
  overflow:hidden; margin:12px 0 8px;
}
.maq-barra > span{ display:block; height:100%; background:var(--m-violeta); }
.maq-nota{ margin:0; font-size:13px; color:var(--m-mudo); }