/* ===========================================================
   Estilos de la página de agenda (formulario)
   Reusa las variables de styles.css
   =========================================================== */

/* .breadcrumb{font-size:.9rem;color:var(--gris-60);padding:20px 0 0}
.breadcrumb a{color:var(--azul);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb span{color:var(--gris-30)} */

.block-first{padding-top:24px;border-top:none}
.block-first h1{font-size:2rem;font-weight:700;color:var(--azul);margin:.3em 0 .4em;letter-spacing:-.01em}
.lead-sm{font-size:1.08rem;color:var(--gris-90);max-width:720px;margin:0 0 8px}

/* ---------- Formulario ---------- */
.form-card{
  background:#fff;border:1px solid var(--gris-30);border-radius:var(--radio);
  padding:24px;box-shadow:var(--sombra);margin-top:22px;max-width:760px;
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field-wide{grid-column:1 / -1}
.field span{font-size:.92rem;font-weight:600;color:var(--gris-90)}
.field span em{color:var(--area-soc);font-style:normal}
.field .opt{font-weight:400;color:var(--gris-60)}
.field input{
  padding:11px 14px;border:1px solid var(--gris-30);border-radius:8px;
  font:inherit;font-size:1rem;color:var(--gris-90);background:#fff;transition:.15s;
}
.field input:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px var(--azul-claro)}
.field input::placeholder{color:#9aa0a6}
.field-note{font-size:.82rem;font-weight:400;color:var(--gris-60)}
.field-note.bad{color:var(--area-soc);font-weight:600}

.form-error{color:var(--area-soc);font-weight:600;font-size:.95rem;margin:16px 0 0}

.form-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:20px}
.form-hint{color:var(--area-salud);font-weight:600;font-size:.92rem}

.form-preview{margin-top:20px;border-top:1px solid var(--gris-10);padding-top:16px}
.preview-label{font-size:.85rem;color:var(--gris-60);margin:0 0 8px;font-weight:600}
.form-preview pre{
  background:var(--gris-10);border:1px solid var(--gris-30);border-radius:8px;
  padding:14px 16px;font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;
  font-size:.88rem;color:var(--gris-90);white-space:pre-wrap;word-break:break-word;margin:0;
}

.back-link{margin-top:28px}
.back-link a{color:var(--azul);text-decoration:none;font-weight:600}
.back-link a:hover{text-decoration:underline}

@media (max-width:600px){
  .form-grid{grid-template-columns:1fr}
  .field-wide{grid-column:auto}
}