/* F4 · mensajes y resultado del servidor en /calculadoras/.
   Copia literal del bloque F4-2 de lab/calcula-atardecer/index.html
   (promoción DG-00 2026-09-23 · W-02). */

/* ── Ronda 3 (DG-00 2026-10-04) · las 6 etapas vuelven a mostrarse ──
   Las pantallas 3 a 6 se pintan con lo que devuelve el CRM (rangos,
   diagnostico, perfil y agenda); ya no se ocultan. */

.f6-agenda{
  margin-top:18px;
  padding:clamp(14px,2vw,22px);
  border-radius:16px;
  background:var(--jpm-cream-2);
  border:1px solid var(--jpm-line);
}
.f6-agenda-titulo{
  margin:0 0 10px;
  font-family:"Rubik",ui-sans-serif,system-ui,sans-serif;
  font-weight:800;
  color:var(--jpm-purple);
}
.f6-horarios{ max-height:280px; overflow:auto; }
#jpm-calc button[disabled]{ opacity:.55; cursor:not-allowed; }

.f4-msg{
  margin:0 clamp(14px,2.4vw,34px) 18px;
  padding:12px 14px;
  border-radius:12px;
  font-size:.92rem;
  line-height:1.5;
  border-left:3px solid var(--jpm-muted);
  background:var(--jpm-cream-2);
  color:var(--jpm-text);
}
.f4-msg--error{ border-left-color:#B3402A; color:#7d2d1e; background:#FBEAE5; }
.f4-msg--ok{ border-left-color:#2F6146; color:#26513a; background:#E4F0E8; }

.f4-res{
  margin:0 clamp(14px,2.4vw,34px) clamp(24px,3vw,40px);
  padding:clamp(18px,2.4vw,28px);
  border-radius:16px;
  background:var(--jpm-cream-2);
  border:1px solid var(--jpm-line);
}
.f4-res-title{
  margin:0 0 6px;
  font-family:"Rubik",ui-sans-serif,system-ui,sans-serif;
  font-weight:800;
  font-size:clamp(1.15rem,1.9vw,1.5rem);
  color:var(--jpm-purple);
}
.f4-res-note{ margin:0 0 16px; font-size:.86rem; color:var(--jpm-muted); }
.f4-res-empty{ margin:0; font-size:.95rem; color:var(--jpm-text); }
.f4-res-list{
  display:grid;
  grid-template-columns:minmax(140px,auto) 1fr;
  gap:8px 18px;
  margin:0;
}
.f4-res-list dt{
  font-family:"Rubik",ui-sans-serif,system-ui,sans-serif;
  font-weight:700; font-size:.82rem;
  color:var(--jpm-muted);
  align-self:center;
}
.f4-res-list dd{
  margin:0;
  font-size:1rem;
  color:var(--jpm-ink);
  font-variant-numeric:tabular-nums;
  align-self:center;
}
@media(max-width:700px){
  .f4-res-list{ grid-template-columns:1fr; gap:2px 0; }
  .f4-res-list dd{ margin-bottom:10px; }
}