/* ==========================================================================
   Agenda modal · Clínica Dental Dra. Díaz & Asociados
   Native <dialog>: focus trap, Esc and top layer come from the browser.
   ========================================================================== */

html.bk-lock{overflow:hidden}

.bk{width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:0;border:0;border-radius:24px;background:#FFFFFF;color:#24303C;
  font-family:'DM Sans',system-ui,sans-serif;overflow:auto;overscroll-behavior:contain;box-shadow:0 40px 90px rgba(20,36,52,.4)}
.bk::backdrop{background:rgba(31,53,73,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

.bk[open]{animation:bkIn .7s cubic-bezier(.16,1,.3,1) both}
.bk[open]::backdrop{animation:bkFade .6s ease both}
.bk.is-closing{animation:bkOut .32s ease-in both}
.bk.is-closing::backdrop{animation:bkFade .32s ease reverse both}
@keyframes bkIn{from{opacity:0;translate:0 44px;scale:.96}to{opacity:1;translate:0 0;scale:1}}
@keyframes bkOut{to{opacity:0;translate:0 20px;scale:.98}}
@keyframes bkFade{from{opacity:0}to{opacity:1}}

.bk-in{position:relative;padding:36px}
.bk-head{padding-right:52px;margin-bottom:26px}
.bk-eb{font-size:15px;font-weight:500;color:#3D7A7C}
.bk-title{margin:6px 0 8px;font-family:'Outfit',system-ui,sans-serif;font-size:32px;line-height:1.15;font-weight:600;color:#1F3549}
.bk-sub{margin:0;font-size:15px;line-height:1.6;color:#4A5763}

.bk-close{position:absolute;right:20px;top:20px;width:44px;height:44px;border:0;border-radius:50%;background:#EEF5F5;color:#2E4863;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background-color .4s ease,color .4s ease,rotate .6s cubic-bezier(.22,1,.36,1)}
.bk-close:hover{background:#2E4863;color:#FFFFFF;rotate:90deg}
.bk-close:focus-visible{outline:2px solid #3D7A7C;outline-offset:2px}

.bk-form{display:flex;flex-direction:column;gap:18px}
.bk-form fieldset{border:0;padding:0;margin:6px 0 0;display:flex;flex-wrap:wrap;gap:12px 22px;font-size:14px;color:#4A5763}
.bk-form legend{font-weight:700;color:#1F3549;margin-bottom:10px;font-size:15px;padding:0}
.bk-form fieldset label{display:flex;gap:8px;align-items:center;cursor:pointer}
.bk-form .btn{align-self:flex-start;background:#2E4863;color:#FFFFFF;padding:0 8px 0 22px;margin-top:8px}

/* Fields follow the panel in, one by one */
.bk[open] .bk-st{animation:bkItem .8s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.12s + var(--k,0) * 55ms)}
@keyframes bkItem{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}

/* Confirmation */
.bk-done{display:none;text-align:center;padding:20px 0 8px}
.bk.is-done .bk-head,.bk.is-done .bk-form{display:none}
.bk.is-done .bk-done{display:block}
.bk-done svg{display:block;margin:0 auto 18px}
.bk-done circle{fill:#3D7A7C}
.bk-done path{fill:none;stroke:#FFFFFF;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16;stroke-dashoffset:16}
.bk.is-done .bk-done path{animation:bkDraw .9s cubic-bezier(.77,0,.18,1) .25s forwards}
@keyframes bkDraw{to{stroke-dashoffset:0}}
.bk-done .bk-sub{max-width:420px;margin:0 auto 22px}
.bk-done .btn{background:#3D7A7C;color:#FFFFFF}

@media (max-width:680px){
  .bk{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-radius:20px}
  .bk-in{padding:24px 20px}
  .bk-close{right:12px;top:12px}
  .bk-title{font-size:26px}
  .bk .field input,.bk .field select{font-size:16px} /* below 16px iOS zooms in on focus */
}

@media (prefers-reduced-motion:reduce){
  .bk[open],.bk[open]::backdrop,.bk.is-closing,.bk.is-closing::backdrop,.bk[open] .bk-st{animation:none}
  .bk-done path{stroke-dashoffset:0}
  .bk.is-done .bk-done path{animation:none}
}