/* ---------- Apartar cita ---------- */
dialog {
    border: 0;
    padding: 0;
    width: min(560px, 100%);
    max-height: min(92vh, 900px);
    border-radius: 28px;
    background: var(--hueso);
    color: var(--piedra);
    box-shadow: 0 30px 80px -30px rgba(46, 40, 35, .6);
}
dialog::backdrop { background: rgba(46, 40, 35, .45); backdrop-filter: blur(3px); }
dialog[open] { animation: subir .35s var(--suave); }
@keyframes subir { from { opacity: 0; transform: translateY(24px); } }
.hoja { padding: var(--s3) var(--s3) var(--s4); }
.hoja-cabeza { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s2); }
.pasos-indicador { display: flex; gap: 6px; }
.pasos-indicador span { width: 28px; height: 4px; border-radius: 4px; background: var(--linea); transition: background .3s ease; }
.pasos-indicador span.hecho { background: var(--salvia-honda); }
.cerrar { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--arena); cursor: pointer; font-size: 22px; line-height: 1; }
.hoja h2 { font-family: var(--serif); font-size: 36px; line-height: 1.05; margin-bottom: 4px; }
.hoja .sub { color: var(--piedra-suave); margin: 0 0 var(--s3); }
.opciones { display: flex; flex-wrap: wrap; gap: var(--s1); }
.dias { display: grid; grid-auto-flow: column; grid-auto-columns: 64px; gap: var(--s1); overflow-x: auto; padding-bottom: var(--s1); scroll-snap-type: x mandatory; }
.dia { flex-direction: column; min-height: 72px; padding: 8px 4px; border-radius: 16px; scroll-snap-align: start; gap: 2px; }
.dia small { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; opacity: .75; }
.dia b { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1; }
.dia:disabled { opacity: .35; cursor: default; }
.horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--s1); margin-top: var(--s3); min-height: 60px; }
.vacio { color: var(--piedra-suave); font-size: 15px; grid-column: 1 / -1; }
.resumen { background: var(--arena); border-radius: var(--r); padding: var(--s2) var(--s3); margin-bottom: var(--s2); font-size: 15px; }
.resumen b { font-family: var(--serif); font-weight: 400; font-size: 22px; display: block; }
.opcional { margin-top: var(--s3); padding-top: var(--s2); border-top: 1px dashed var(--linea); }
.opcional > p { font-size: 14px; color: var(--piedra-suave); margin: 0 0 var(--s1); }
.grupo { margin-bottom: var(--s2); }
.grupo span { display: block; font-size: 14px; margin-bottom: 6px; }
.grupo .chip { min-height: 38px; padding: 6px 12px; font-size: 14px; }
.hoja-pie { display: flex; gap: var(--s1); justify-content: space-between; margin-top: var(--s4); }
.hoja-pie .boton { flex: 1; }
.listo { text-align: center; padding: var(--s4) 0 var(--s2); }
.listo .sello { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto var(--s3); background: var(--salvia-clara); display: grid; place-content: center; color: var(--salvia-honda); animation: brotar .6s var(--suave); }
@keyframes brotar { from { transform: scale(.5); opacity: 0; } }


@media (max-width: 820px) {
    dialog { max-height: 100dvh; height: 100dvh; max-width: 100%; margin: 0; border-radius: 0; }
}