/* Appointment drawers have their own design, independent of marketing. */
#dayCitasModal { position: fixed; inset: 0 auto 0 0; z-index: 1065; display: flex; flex-direction: column; width: min(620px, 100vw); height: 100vh; height: 100dvh; max-height: none; margin: 0; flex: none; border: 0; border-radius: 0; background: #fff; color: #142039; box-shadow: 12px 0 40px #0f172a30; overflow: hidden; transform: translateX(-105%); visibility: hidden; transition: transform .2s ease, visibility .2s; }
#dayCitasModal.show { transform: translateX(0); visibility: visible; }
body.day-citas-open { overflow: hidden; }
#dayCitasBackdrop { position: fixed; inset: 0; z-index: 1060; display: none; background: #17253c60; backdrop-filter: blur(2px); }
#dayCitasBackdrop.show { display: block; }
#dayCitasModal .day-citas-drawer-header { flex: 0 0 auto; display: flex; align-items: center; gap: 1rem; padding: 1.5rem 1.5rem 1rem; border: 0; background: transparent; }
.appointment-day-icon { display: grid; place-items: center; flex: 0 0 50px; height: 50px; border-radius: 13px; background: #e5efff; color: #1671f3; font-size: 1.55rem; }
.appointment-day-heading { min-width: 0; flex: 1; }
#dayCitasModal h5 { margin: 0; font-size: 1.2rem; font-weight: 800; line-height: 1.35; }
.appointment-day-heading p { margin: .3rem 0 0; color: #738199; font-size: .9rem; }
#dayCitasModal .drawer-close-btn { display: grid; place-items: center; flex: 0 0 44px; height: 44px; border: 1px solid #e6edf6; border-radius: 12px; background: #f1f5fa; color: #30415d; font-size: 1.2rem; cursor: pointer; }
.appointment-day-tools { flex: 0 0 auto; padding: 0 1.5rem 1rem; }
.appointment-day-search { display: flex; align-items: center; gap: .8rem; padding: .75rem 1rem; margin: 0 0 1rem; border: 1px solid #dce5f1; border-radius: 12px; background: #f1f5fa; color: #667894; }
.appointment-day-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: inherit; }
.appointment-day-search:focus-within { outline: 2px solid #1671f360; }
.appointment-day-filters { display: flex; gap: .65rem; flex-wrap: wrap; }
.appointment-day-filters[hidden] { display: none; }
.appointment-day-filters button { display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .65rem 1rem; border: 0; border-radius: 24px; background: #f1f5fa; color: #34445e; font-weight: 600; cursor: pointer; }
.appointment-day-filters [data-day-status="pendiente"] i { color: #1671f3; }
.appointment-day-filters [data-day-status="confirmada"] i { color: #059669; }
.appointment-day-filters button.active { background: #1671f3; color: #fff; }
.appointment-day-filters button.active i { color: inherit; }
#dayCitasModal .day-citas-drawer-body { flex: 1; min-height: 0; overflow: auto; padding: .5rem 1.5rem 1.5rem; scrollbar-width: thin; }
#dayCitasModal .appointment-day-timeline { position: relative; display: grid; grid-template-columns: 60px minmax(0, 1fr); margin-top: 16px; overflow: visible; }
.appointment-day-hours, .appointment-day-events { position: relative; min-width: 0; height: 100%; }
.appointment-day-events { border-left: 2px solid #e1e8f1; }
.appointment-day-hour { position: absolute; left: 0; top: var(--time-top); width: 50px; color: #7a89a0; font-size: .85rem; font-weight: 600; transform: translateY(-50%); }
.appointment-day-slot { position: absolute; top: var(--time-top); left: 0; width: 100%; height: 24px; border: 0; border-radius: 0; border-top: 1px dashed transparent; background: transparent; }
.appointment-day-slot.is-hour { border-top-color: #e4ebf5; }
.appointment-day-slot.is-hour::before { content: ''; position: absolute; left: -6px; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: #b1bed1; }
button.appointment-day-slot { cursor: pointer; }
button.appointment-day-slot:hover, button.appointment-day-slot:focus-visible { background: #1671f314; outline: 1px solid #1671f350; }
.appointment-day-card { position: absolute; display: flex; align-items: center; gap: .85rem; left: var(--lane-left); top: var(--card-top); width: var(--lane-width); height: var(--card-height); min-height: 64px; padding: .65rem .8rem; border: 0; border-left: 5px solid var(--cita-accent); border-radius: 9px; background: color-mix(in srgb, var(--cita-accent) 10%, white); color: #18243b; cursor: pointer; text-align: left; overflow: hidden; }
.appointment-day-card:hover { filter: brightness(.97); box-shadow: 0 4px 16px #17253c12; }
.appointment-day-time { flex: 0 0 auto; display: grid; place-items: center; padding: .55rem .65rem; border-radius: 13px; background: color-mix(in srgb, var(--cita-accent) 17%, white); color: var(--cita-accent); font-size: .95rem; font-weight: 800; }
.appointment-day-card-copy { display: grid; gap: .3rem; min-width: 0; flex: 1; }
.appointment-day-card-title, .appointment-day-client { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appointment-day-card-title { font-size: .95rem; font-weight: 750; }
.appointment-day-client { color: #728198; font-size: .85rem; }
.appointment-day-state { align-self: flex-start; border-radius: 7px; padding: .2rem .4rem; background: color-mix(in srgb, var(--cita-accent) 17%, white); color: var(--cita-accent); font-size: .7rem; font-weight: 700; }
.appointment-day-card.is-shared-slot { flex-wrap: wrap; align-content: center; gap: .3rem .5rem; padding: .4rem .5rem; }
.appointment-day-card.is-shared-slot .appointment-day-time { padding: .15rem .3rem; font-size: .75rem; }
.appointment-day-card.is-shared-slot .appointment-day-card-copy { flex-basis: 100%; gap: .15rem; order: 2; }
.appointment-day-card.is-shared-slot .appointment-day-state { margin-left: auto; font-size: .6rem; }
.appointment-day-card.is-shared-slot .appointment-day-card-title, .appointment-day-card.is-shared-slot .appointment-day-client { font-size: .75rem; }
.appointment-day-now { position: absolute; left: 60px; right: 0; top: var(--time-top); border-top: 1px dashed #ff3547; z-index: 2; pointer-events: none; }
.appointment-day-now::before { content: ''; position: absolute; top: -6px; left: -6px; width: 11px; height: 11px; border-radius: 50%; background: #ff3547; }
.appointment-day-now span { position: absolute; right: calc(100% + 10px); top: -11px; color: #ff3547; font-weight: 700; font-size: .85rem; }
.appointment-day-empty { padding: 1rem; margin-bottom: .5rem; color: #728198; background: #f5f8fc; border-radius: 10px; text-align: center; }
body.day-citas-open #citaDetailsModal { z-index: 1080; }
body.day-citas-open .modal-backdrop { z-index: 1070; }
[data-theme="dark"] #dayCitasModal { background: #111a26; color: #edf3fb; }
[data-theme="dark"] #dayCitasBackdrop { background: #0009; }
[data-theme="dark"] #dayCitasModal .drawer-close-btn, [data-theme="dark"] .appointment-day-search, [data-theme="dark"] .appointment-day-filters button:not(.active), [data-theme="dark"] .appointment-day-empty { background: #1c2838; color: #b8c6da; border-color: #33435a; }
[data-theme="dark"] .appointment-day-events { border-color: #33435a; }
[data-theme="dark"] .appointment-day-slot.is-hour { border-top-color: #33435a; }
[data-theme="dark"] .appointment-day-card { background: color-mix(in srgb, var(--cita-accent) 15%, #111a26); color: #edf3fb; }
[data-theme="dark"] .appointment-day-time, [data-theme="dark"] .appointment-day-state { background: color-mix(in srgb, var(--cita-accent) 25%, #111a26); color: color-mix(in srgb, var(--cita-accent) 65%, white); }
[data-theme="dark"] .appointment-day-client { color: #a6b7cf; }
@media (max-width: 640px) {
  #dayCitasModal .day-citas-drawer-header { padding: 1rem; gap: .6rem; }
  #dayCitasModal h5 { font-size: 1rem; }
  .appointment-day-icon { flex-basis: 40px; height: 40px; }
  .appointment-day-tools { padding: 0 1rem .75rem; }
  #dayCitasModal .day-citas-drawer-body { padding: .5rem 1rem 1rem; }
  .appointment-day-filters { gap: .4rem; }
  .appointment-day-filters button { padding: .6rem .75rem; font-size: .8rem; }
  .appointment-day-card { gap: .5rem; padding: .5rem; }
  .appointment-day-state { font-size: .6rem; }
}
@media (prefers-reduced-motion: reduce) { #dayCitasModal { transition: none; } }