/* Calendario de reservas: la fecha organiza las horas y la confirmación conserva su propio paso. */
.booking-professional{display:flex;align-items:center;gap:22px;margin-bottom:30px}
.booking-professional .profile-avatar{width:78px;height:78px;flex-shrink:0;margin:0}
.booking-professional h1{font-size:36px;margin:0 0 9px}
.booking-professional .eyebrow{margin-bottom:8px}
.booking-professional p{margin:0;color:var(--muted);font-size:14px}
.booking-layout{display:grid;grid-template-columns:minmax(300px,.95fr) minmax(300px,1.05fr);gap:24px;align-items:start}
.calendar-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px}
.calendar-toolbar h2{font-size:23px;text-transform:capitalize;margin:0;text-align:center}
.calendar-arrow{border:1px solid var(--line);background:white;border-radius:50%;width:38px;height:38px;font-size:26px;color:var(--navy);line-height:1;flex-shrink:0}
.calendar-arrow:hover:not(:disabled){background:#f4eddf;border-color:var(--gold)}
.calendar-arrow:disabled{opacity:.3;cursor:default}
.month-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-top:24px}
.weekday{text-align:center;font-size:11px;color:var(--muted);padding-bottom:10px;font-weight:600}
.month-day{position:relative;border:1px solid transparent;background:#f1f5f3;border-radius:9px;min-height:46px;font-size:14px;font-weight:600;color:var(--navy);padding:8px 2px 13px}
.month-day:hover:not(:disabled){border-color:var(--gold);background:#f4eddf}
.month-day.selected{background:var(--navy);color:white}
.month-day.today{border-color:var(--gold)}
.month-day:disabled{background:transparent;color:#a2aab0;opacity:1;font-weight:400;cursor:default}
.month-day.outside{color:#d2d7da}
.availability-dot{display:inline-block;width:4px;height:4px;background:#558374;border-radius:50%;vertical-align:middle}
.month-day .availability-dot{position:absolute;bottom:6px;left:calc(50% - 2px)}
.month-day.selected .availability-dot{background:#ddc499}
.calendar-help{font-size:12px;color:var(--muted);line-height:1.7;margin:20px 0 0}
.calendar-help .availability-dot{margin-right:5px}
.day-panel .eyebrow{margin-bottom:12px}
.selected-day{text-transform:capitalize;font-size:27px}
.day-period{margin:23px 0}
.day-period h3{font:600 12px Arial,sans-serif;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.booking-times{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.time-choice{border:1px solid #d6dfe2;background:white;color:var(--navy);border-radius:7px;padding:13px 5px;font-size:14px}
.time-choice:hover{border-color:var(--gold);background:#f7f2e9}
.time-choice.selected{color:white;background:var(--navy);border-color:var(--navy)}
.booking-selection{border-top:1px solid var(--line);padding:20px 0;margin-top:25px;color:var(--muted);font-size:13px;line-height:1.8}
.booking-selection strong{color:var(--navy)}
.booking-selection p{margin:5px 0 0;text-transform:capitalize}
.day-panel button:disabled{cursor:default}
.next-availability{border-top:1px solid var(--line);margin:4px 0 20px;padding-top:16px;display:flex;flex-direction:column;gap:6px;font-size:13px}
.next-availability small{font-size:9px;letter-spacing:1px;color:var(--muted)}
.next-availability strong{text-transform:capitalize;font-weight:500}
/* Agenda de trabajo: un espacio de calendario, con estados visibles también en texto. */
.agenda-controls{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px;margin:25px 0}
.agenda-controls .calendar-toolbar{justify-content:flex-start}
.agenda-controls h2{font-size:19px}
.agenda-controls h2 small{display:block;color:var(--muted);font:12px Arial,sans-serif;margin-top:5px}
.agenda-view-controls{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.agenda-professional{max-width:350px;margin-bottom:18px}
.agenda-legend{display:flex;flex-wrap:wrap;gap:18px;font-size:12px;margin:18px 0}
.agenda-legend span{display:flex;align-items:center;gap:7px}
.agenda-legend span:before{content:'';width:9px;height:9px;border-radius:3px;background:#6c9282}
.agenda-legend .reserved:before{background:#305a7e}
.agenda-legend .blocked:before{background:#8a8c92}
.agenda-days{display:flex;flex-wrap:wrap;gap:7px;margin:15px 0}
.week-scroll{overflow-x:auto;background:white;border:1px solid var(--line);border-radius:9px}
.week-board{display:grid;grid-template-columns:55px repeat(var(--calendar-days),minmax(125px,1fr));min-width:740px}
.week-board.single-day{grid-template-columns:55px minmax(200px,1fr);min-width:270px}
.week-heading{height:65px;display:flex;align-items:center;justify-content:center;text-align:center;text-transform:capitalize;font-size:12px;padding:10px;border-bottom:1px solid var(--line);background:#fafbfb;color:var(--muted)}
.week-heading.current-day{color:var(--navy);background:#f4eddf;font-weight:600}
.week-column{border-left:1px solid var(--line);min-width:0}
.time-axis{position:relative;background:#fafbfb}
.time-axis span{position:absolute;left:7px;font-size:10px;color:var(--muted);padding-top:5px}
.day-track{position:relative;background:repeating-linear-gradient(to bottom,transparent 0,transparent 69px,#e8edef 69px,#e8edef 70px)}
.agenda-event{position:absolute;left:5px;right:5px;padding:5px 8px;text-align:left;border:0;border-left:3px solid #729d86;border-radius:5px;background:#edf4ef;color:#345745;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:2px;line-height:1.25}
.agenda-event:hover{box-shadow:0 2px 8px #102c4225;filter:brightness(.97)}
.agenda-event span{font-size:10px;white-space:nowrap}
.agenda-event strong{font-size:11px;font-weight:500}
.agenda-event small{font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agenda-event.reserved{background:#e7eef6;border-color:#45698c;color:#274b6b}
.agenda-event.blocked{background:repeating-linear-gradient(135deg,#eeeff1,#eeeff1 5px,#e7e9ec 5px,#e7e9ec 7px);border-color:#8b8e96;color:#565d67}
@media(max-width:900px){.booking-layout{grid-template-columns:1fr}.booking-professional h1{font-size:29px}.agenda-controls{flex-direction:column}.booking-professional .profile-avatar{width:62px;height:62px}}
@media(max-width:450px){.month-grid{gap:3px}.month-day{min-height:40px}.booking-professional{gap:13px}.booking-professional h1{font-size:25px}.booking-times{grid-template-columns:repeat(3,minmax(0,1fr))}.calendar-toolbar{gap:8px}.calendar-toolbar h2{font-size:20px}.agenda-controls h2{font-size:16px}.calendar-arrow{width:32px;height:32px}.agenda-view-controls .btn{font-size:11px;padding:8px 10px}.booking-professional p{font-size:12px}}
