:root{--bg:#080b12;--card:#111722;--line:#273244;--text:#f5f7fb;--muted:#8e9aac;--a:#38bdf8}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 50% -10%,#16253a,#080b12 48%);color:var(--text);font-family:Arial,sans-serif;min-height:100vh}.topbar{height:68px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff10}.topbar a{color:var(--muted);text-decoration:none;font-size:12px}.brand{font-size:13px;font-weight:800;letter-spacing:.15em}.mark{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--a);color:#061018;margin-right:8px}.shell{max-width:1050px;margin:auto;padding:60px 20px}.hero{margin-bottom:28px}.eyebrow{font-size:10px;letter-spacing:.2em;color:#7dd3fc;font-weight:800}h1{font-size:clamp(34px,6vw,58px);margin:10px 0 8px}.hero p{color:var(--muted)}.card{background:#111722ee;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 25px 70px #0005}.grid{display:grid;grid-template-columns:1.5fr .8fr}.grid>div,.summary{padding:28px}.summary{background:#0d131d;border-left:1px solid var(--line)}label{display:block;font-size:12px;color:#b9c2cf;margin:0 0 8px}input,select{width:100%;height:48px;margin-bottom:20px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:#090e17;color:var(--text)}.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.slot{height:43px;border:1px solid var(--line);border-radius:9px;background:#090e17;color:var(--text);cursor:pointer}.slot.active{background:var(--a);color:#061018;border-color:var(--a);font-weight:800}.slot.disabled{opacity:.25;cursor:not-allowed;text-decoration:line-through}.empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:25px;border:1px dashed var(--line);border-radius:10px}.summary small{color:#7dd3fc;letter-spacing:.16em}.summary h2{margin:10px 0 28px}.summary p{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:13px 0;margin:0;color:var(--muted);font-size:13px}.summary b{color:var(--text)}.summary .price{font-size:18px;color:#7dd3fc}.customer{padding:28px;border-top:1px solid var(--line)}button{width:100%;height:50px;border:0;border-radius:10px;background:var(--a);font-weight:800;cursor:pointer}.msg{text-align:center;color:#7dd3fc;font-size:13px;min-height:20px;margin-top:12px}@media(max-width:750px){.grid{grid-template-columns:1fr}.summary{border-left:0;border-top:1px solid var(--line)}.slots{grid-template-columns:repeat(3,1fr)}}@media(max-width:430px){.slots{grid-template-columns:repeat(2,1fr)}}

/* ADMIN v4 */
.admin-top{height:68px;border-bottom:1px solid #fff1;background:#070a10ee;display:flex;align-items:center;justify-content:space-between;padding:0 4%;position:sticky;top:0;z-index:10;backdrop-filter:blur(10px)}
.admin-user{display:flex;gap:18px;align-items:center;font-size:12px;color:var(--muted)}.admin-user a{color:var(--muted);text-decoration:none}
.admin-wrap{max-width:1400px;margin:auto;padding:24px 24px 70px;display:grid;grid-template-columns:210px 1fr;gap:22px}.sidebar{height:max-content;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px;position:sticky;top:90px}.sidebar a{display:block;padding:11px 12px;border-radius:9px;color:var(--muted);text-decoration:none;font-size:13px}.sidebar a:hover,.sidebar a.active{background:#ffffff08;color:var(--text)}
.admin-main{min-width:0}.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:12px 0 24px}.page-head h1{font-size:42px;margin:7px 0}.page-head p{color:var(--muted);margin:0;max-width:700px}.content-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}.metric{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}.metric small{color:var(--muted)}.metric strong{display:block;font-size:28px;margin-top:7px}.calendar-nav{display:flex;gap:7px}.calendar-title{display:flex;justify-content:center;margin-bottom:15px}.calendar-title h2{margin:0;font-size:20px}.weekdays,.calendar{display:grid;grid-template-columns:repeat(7,1fr)}.weekdays>div{padding:10px;color:var(--muted);font-size:11px;text-transform:uppercase;text-align:center;border-bottom:1px solid var(--line)}.day{min-height:125px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:9px;background:#0e141e}.day:nth-child(7n){border-right:0}.muted-day{opacity:.35}.today{box-shadow:inset 0 2px 0 var(--a)}.day-number{font-size:12px;font-weight:700;margin-bottom:8px}.day-events{display:flex;flex-direction:column;gap:5px}.event{width:100%;text-align:left;border:0;border-radius:6px;padding:6px 7px;background:#38bdf815;color:var(--a2);font-size:10px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.event.confirmada{background:#22c55e18;color:#4ade80}.event.cancelada{background:#fb718518;color:#fb7185}.event.pendiente{background:#f59e0b18;color:#fbbf24}.more{font-size:10px;color:var(--muted);padding:3px}.modal{position:fixed;inset:0;background:#0009;display:grid;place-items:center;padding:20px;z-index:50}.modal.hidden{display:none}.modal-box{position:relative;width:min(480px,100%);background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:0 30px 100px #0008}.modal-close{position:absolute;right:15px;top:12px;background:none;color:var(--muted);font-size:25px;width:auto;height:auto}.detail-list>div{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-top:1px solid var(--line);font-size:13px}.detail-list span{color:var(--muted)}.btn-link{display:block;text-align:center;margin-top:20px;padding:12px;border-radius:9px;background:var(--a);color:#061018;font-weight:800;text-decoration:none}.schedule-day{display:grid;grid-template-columns:130px 1fr;gap:15px;padding:15px 0;border-bottom:1px solid var(--line)}.schedule-day:last-child{border-bottom:0}.schedule-ranges{display:flex;flex-wrap:wrap;gap:8px}.range{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:9px;padding:6px 8px}.range.off{opacity:.45}.muted{color:var(--muted)}.check-field{display:flex;align-items:center}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:13px}th,td{padding:13px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}th{color:var(--muted);font-weight:600}.btn-small{border:1px solid var(--line);background:#0a1019;color:var(--text);border-radius:7px;padding:7px 10px;cursor:pointer;text-decoration:none;font-size:12px}.btn-small.danger{border-color:#fb718555}.notice{padding:11px 13px;border-radius:9px;background:#38bdf815;color:var(--a2);margin-bottom:14px;font-size:13px}
@media(max-width:900px){.admin-wrap{grid-template-columns:1fr}.sidebar{position:static;display:flex;overflow:auto;gap:3px}.sidebar a{white-space:nowrap}.metrics{grid-template-columns:1fr 1fr}.day{min-height:105px}}
@media(max-width:600px){.admin-wrap{padding:15px}.page-head{align-items:flex-start;flex-direction:column}.page-head h1{font-size:34px}.weekdays>div{font-size:9px}.day{min-height:90px;padding:6px}.event{font-size:9px;padding:5px 4px}.schedule-day{grid-template-columns:1fr}.metrics{grid-template-columns:1fr 1fr}}

.customer-nav{display:flex;align-items:center;gap:16px;color:var(--muted);font-size:12px}.customer-nav a{color:var(--muted);text-decoration:none}.customer-nav a:hover{color:var(--text)}
.auth-card{max-width:500px;margin:55px auto;padding:30px}.auth-card h1{font-size:38px;margin:8px 0}.auth-card p{color:var(--muted)}.auth-card button{margin-top:5px}.auth-foot{text-align:center;margin-top:18px}.auth-foot a{color:var(--a2)}
.reservation-list{padding:0;overflow:hidden}.reservation-item{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 26px;border-bottom:1px solid var(--line)}.reservation-item:last-child{border-bottom:0}.reservation-main h2{margin:6px 0 3px;font-size:18px}.reservation-main p{margin:0;color:var(--muted);font-size:13px}.reservation-date{font-size:11px;color:var(--a2);font-weight:700}.reservation-status{padding:7px 10px;border-radius:999px;font-size:11px;white-space:nowrap}.reservation-status.pendiente{background:#f59e0b18;color:#fbbf24}.reservation-status.confirmada{background:#22c55e18;color:#4ade80}.reservation-status.cancelada{background:#fb718518;color:#fb7185}.empty-state{text-align:center;padding:55px 25px}.empty-state p{color:var(--muted)}.inline-btn{display:inline-block;width:auto!important;padding:12px 18px}.page-head{margin-bottom:24px}
@media(max-width:600px){.customer-nav{gap:9px}.reservation-item{align-items:flex-start;flex-direction:column}.page-head{align-items:flex-start!important}}

.hidden{display:none!important}.profile-booking{border:1px solid var(--line);background:#080d15;border-radius:12px;padding:15px 16px;margin-bottom:15px}.profile-booking-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}.profile-booking-head span{font-size:10px;letter-spacing:.15em;color:var(--a2);font-weight:800}.profile-booking-head a{font-size:11px;color:var(--a2);text-decoration:none}.profile-booking strong{font-size:15px}.profile-booking p{margin:4px 0 0;color:var(--muted);font-size:12px}

.profile-card{padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}.profile-card h2{margin:7px 0 2px;font-size:20px}.profile-card p{margin:0;color:var(--muted);font-size:13px}.reservation-actions{display:flex;align-items:flex-end;flex-direction:column;gap:9px}.reservation-actions .actions{display:flex;gap:7px}.history-title{margin-top:35px}.history{opacity:.78}.reservation-status{font-weight:700}
@media(max-width:600px){.profile-card{align-items:flex-start;flex-direction:column}.reservation-actions{align-items:flex-start}}

.profile-booking.hidden{display:none!important}.profile-booking{display:block;border:1px solid var(--line);background:#080d15;border-radius:12px;padding:15px 16px;margin-bottom:15px}.profile-booking-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}.profile-booking-head span{font-size:10px;letter-spacing:.15em;color:var(--a2);font-weight:800}.profile-booking-head a{font-size:11px;color:var(--a2);text-decoration:none}.profile-booking strong{font-size:15px}.profile-booking p{margin:4px 0 0;color:var(--muted);font-size:12px}

.reservation-metrics{grid-template-columns:repeat(4,1fr)}.filter-card{padding:18px 20px}.reservation-filters{display:grid;grid-template-columns:1fr 1fr 1fr 170px;gap:12px;align-items:end}.filter-button button{height:48px}.table-sub{font-size:11px;color:var(--muted)}.admin-actions{display:flex;flex-wrap:wrap;gap:6px}.btn-small.success{border-color:#22c55e55;color:#4ade80;background:#22c55e10}.btn-small.danger{border-color:#fb718555;color:#fb7185;background:#fb718510}.calendar-modal-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:18px}.calendar-modal-actions .btn-small{width:auto;height:auto}.admin-reservations .reservation-status{display:inline-block}.admin-reservations td{vertical-align:middle}
@media(max-width:900px){.reservation-filters{grid-template-columns:1fr 1fr}.filter-button{grid-column:1/-1}.reservation-metrics{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.reservation-filters{grid-template-columns:1fr}.filter-button{grid-column:auto}.admin-actions{flex-direction:column;align-items:flex-start}}

.professionals{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:20px}.professional-card{width:100%;height:auto;min-height:78px;display:flex;align-items:center;gap:12px;text-align:left;padding:12px;background:#090e17;border:1px solid var(--line);border-radius:12px;color:var(--text)}.professional-card.active{border-color:var(--a);background:#38bdf812}.professional-avatar{width:46px;height:46px;flex:0 0 46px;border-radius:50%;background:#162131;display:grid;place-items:center;overflow:hidden;color:var(--a);font-weight:800}.professional-avatar img{width:100%;height:100%;object-fit:cover}.professional-card strong{display:block}.professional-card p{margin:4px 0 0;color:var(--muted);font-size:11px;line-height:1.35}.professional-edit-card{padding:24px}.professional-edit-card h2{margin:7px 0}.professional-edit-card textarea{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;background:#090e17;color:var(--text);resize:vertical;margin-bottom:20px}
@media(max-width:600px){.professionals{grid-template-columns:1fr}}

.professional-state{display:inline-block;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:700}.professional-state.is-active{color:#4ade80;background:#22c55e12}.professional-state.is-inactive{color:#fb7185;background:#fb718512}

.profile-visible{color:#4ade80;font-weight:700}.profile-hidden{color:#fb7185;font-weight:700}

.professionals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:8px 0 22px}
.professional-card{width:100%;height:auto;min-height:76px;display:flex;align-items:center;gap:12px;text-align:left;padding:12px;background:#090e17;border:1px solid var(--line);border-radius:12px;color:var(--text);cursor:pointer}
.professional-card:hover{border-color:#38bdf866}
.professional-card.active{border-color:var(--a);background:#38bdf812;box-shadow:0 0 0 1px #38bdf822}
.professional-avatar{width:44px;height:44px;flex:0 0 44px;border-radius:50%;background:#162131;display:grid;place-items:center;overflow:hidden;color:var(--a);font-weight:800}
.professional-avatar img{width:100%;height:100%;object-fit:cover}
.professional-card strong{display:block;font-size:14px}
.professional-card p{margin:4px 0 0;color:var(--muted);font-size:11px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:650px){.professionals{grid-template-columns:1fr}}

.assignment-delete{white-space:nowrap}

.professional-hours-editor{margin:20px 0;padding:18px;border:1px solid var(--line);border-radius:12px;background:#090e17}.professional-hours-editor h3{margin:0 0 5px}.professional-hour-row{display:grid;grid-template-columns:180px 130px 45px 130px;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}.professional-hour-row .check-field{margin:0}.professional-hour-row input[type=time]{margin:0}.professional-hour-row span{color:var(--muted);font-size:12px;text-align:center}
@media(max-width:650px){.professional-hour-row{grid-template-columns:1fr 1fr}.professional-hour-row .check-field{grid-column:1/-1}.professional-hour-row span{display:none}}

.simple-hours{margin-top:18px}.hours-shortcuts{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0 14px}.simple-hours-grid{display:grid;gap:6px;max-width:760px}.simple-hour-row{display:grid;grid-template-columns:150px 180px 1fr;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:#090e17}.day-toggle{margin:0;display:flex;align-items:center;gap:8px}.hour-preset{margin:0}.custom-hours{display:flex;align-items:center;gap:7px}.custom-hours[hidden]{display:none}.custom-hours input{margin:0}.simple-hour-row .hidden-start,.simple-hour-row .hidden-end{display:none}
@media(max-width:650px){.simple-hour-row{grid-template-columns:1fr 1fr}.custom-hours{grid-column:1/-1}.hours-shortcuts .btn-small{font-size:10px}}

.simple-hours-grid{display:grid;gap:7px;max-width:820px}.simple-hour-row{display:grid;grid-template-columns:150px 180px 1fr;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:#090e17}.simple-hour-row .day-name{font-size:13px}.simple-hour-row .hour-preset{margin:0}.simple-hour-row .custom-hours{display:flex;align-items:center;gap:8px}.simple-hour-row .custom-hours input{margin:0}.simple-hour-row .custom-hours[hidden]{display:none}
@media(max-width:650px){.simple-hour-row{grid-template-columns:1fr 1fr}.simple-hour-row .custom-hours{grid-column:1/-1}}

.simple-hours-grid{display:grid;gap:7px;max-width:820px}.simple-hour-row{display:grid;grid-template-columns:170px 180px 1fr;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:9px;background:#090e17}.day-check{display:flex;align-items:center;gap:12px}.day-checkbox{width:28px;height:28px;margin:0;accent-color:#1687ff;cursor:pointer}.day-check label{margin:0;cursor:pointer}.simple-hour-row .hour-preset{margin:0}.simple-hour-row .custom-hours{display:flex;align-items:center;gap:8px}.simple-hour-row .custom-hours input{margin:0}.simple-hour-row .custom-hours[hidden]{display:none}
@media(max-width:650px){.simple-hour-row{grid-template-columns:1fr 1fr}.simple-hour-row .custom-hours{grid-column:1/-1}}

.simple-hour-row{grid-template-columns:150px 190px 1fr}.day-name{margin:0}

.danger-outline{border-color:#fb718555;color:#fb7185;background:transparent}.danger-outline:hover{background:#fb718512}

.service-actions{display:flex;flex-wrap:wrap;align-items:center;gap:7px;min-width:260px}.service-actions form{display:inline-flex;margin:0}.service-actions .btn-small{width:auto;white-space:nowrap;flex:0 0 auto}.service-actions .danger{min-width:105px}.service-actions .danger-outline{min-width:80px}

.calendar-toolbar{display:flex;justify-content:space-between;align-items:flex-end;gap:15px;margin-bottom:18px}.calendar-filter-label{display:block;margin:0;min-width:260px}.calendar-filter-label select{margin:7px 0 0;height:42px}.event-professional{display:block;opacity:.7;margin-top:2px;font-size:9px}
@media(max-width:600px){.calendar-toolbar{align-items:stretch;flex-direction:column}.calendar-filter-label{min-width:0}.calendar-nav{justify-content:flex-end}}

.custom-absence-times{padding-top:0}.inline-times{display:flex;align-items:center;gap:8px}.inline-times input{margin:0}.affected-item{display:flex;justify-content:space-between;gap:15px;padding:14px 0;border-bottom:1px solid var(--line)}.affected-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
@media(max-width:650px){.affected-item{flex-direction:column}.inline-times{width:100%}}

.simple-hour-row{grid-template-columns:150px 180px 1fr}.custom-hours{display:flex;flex-direction:column;align-items:flex-start;gap:7px}.time-row,.split-row{display:flex;align-items:center;gap:8px}.split-row[hidden]{display:none}.time-row input,.split-row input{margin:0}

.professional-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.professional-actions form{margin:0}.professional-actions .btn-small{white-space:nowrap;width:auto}.danger-outline{border:1px solid #fb718555;color:#fb7185;background:transparent}.danger-outline:hover{background:#fb718512}

#otherReasonWrap{margin-top:0}

.admin-main{min-width:0}.content-card{min-width:0}
.professional-services-table{width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.professional-services-table table{min-width:920px}
.professional-services-table td.schedule-cell{max-width:330px;white-space:normal;overflow-wrap:anywhere;line-height:1.5}
.professional-services-table td:last-child{min-width:125px}

.admin-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.reservation-modal-card{width:min(620px,calc(100vw - 30px))}.reservation-edit-summary{padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#0a1019;margin:14px 0;color:var(--muted);line-height:1.7}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.modal-actions .btn{width:auto}

/* v41: fondo sólido para la ventana Gestionar reserva */
#reservationModal{
  position:fixed !important;
  inset:0 !important;
  z-index:9999 !important;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(3,8,18,.82) !important;
  backdrop-filter:blur(3px);
}
#reservationModal.hidden{display:none !important}
#reservationModal .reservation-modal-card{
  position:relative;
  z-index:10000;
  box-sizing:border-box;
  width:min(620px,calc(100vw - 40px)) !important;
  max-height:calc(100vh - 40px);
  overflow-y:auto;
  background:#111827 !important;
  background-color:#111827 !important;
  border:1px solid #26354a !important;
  border-radius:14px;
  padding:24px;
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  color:#f8fafc;
}
#reservationModal .reservation-modal-card h2,
#reservationModal .reservation-modal-card label,
#reservationModal .reservation-modal-card strong{
  color:#f8fafc;
}
#reservationModal .reservation-modal-card input,
#reservationModal .reservation-modal-card select{
  background:#070d17 !important;
  color:#f8fafc !important;
}
#reservationModal .reservation-modal-card .modal-close{
  position:absolute;
  top:10px;
  right:12px;
  width:auto;
  margin:0;
  padding:4px 10px;
  background:transparent;
  color:#94a3b8;
  font-size:24px;
}

.professional-reservations-section{margin-top:34px}.professional-reservations{padding:0}.professional-reservation-item{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px 20px;border-bottom:1px solid var(--line)}.professional-reservation-item:last-child{border-bottom:0}.professional-reservation-info h3{margin:5px 0}.professional-reservation-info p{margin:0;color:var(--muted)}.professional-reservation-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.professional-reservation-actions .btn-small{width:auto}.reservation-status.en_curso{border-color:#38bdf8;color:#38bdf8}.reservation-status.finalizada{border-color:#34d399;color:#34d399}
@media(max-width:700px){.professional-reservation-item{align-items:flex-start;flex-direction:column}.professional-reservation-actions{justify-content:flex-start}}

.booking-extra-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:22px 0}
.booking-extra-fields textarea{width:100%;box-sizing:border-box;resize:vertical;min-height:110px}
.booking-extra-fields input[type=file]{width:100%;box-sizing:border-box;padding:12px;border:1px solid var(--line);border-radius:10px;background:#070d17;color:#f8fafc}
.booking-extra-fields small{display:block;margin-top:7px}
@media(max-width:700px){.booking-extra-fields{grid-template-columns:1fr}}

.reservation-reason{margin-top:8px!important;color:#cbd5e1!important;line-height:1.45}
.reservation-photos{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.reservation-photos a{display:block;width:72px;height:72px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.reservation-photos img{width:100%;height:100%;object-fit:cover;display:block}

.reservation-detail-modal-card{max-width:900px;background:#101722!important;border:1px solid #2b3a4f!important;color:#f8fafc}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.detail-grid>div{background:#0a111c;border:1px solid var(--line);border-radius:10px;padding:14px}
.detail-grid small{display:block;color:#93a4bc;margin-bottom:6px}
.detail-grid strong{display:block}
.detail-grid>div>span{display:block;color:#aebbd0;margin-top:4px}
.detail-wide{grid-column:1/-1}
.detail-wide p{margin:0;line-height:1.55;color:#d7e0ed}
.detail-photos{display:flex;gap:10px;flex-wrap:wrap}
.detail-photos a{width:100px;height:100px;border-radius:10px;overflow:hidden;border:1px solid var(--line);display:block}
.detail-photos img{width:100%;height:100%;object-fit:cover;display:block}
.history-list{display:grid;gap:10px}
.history-item{border-left:2px solid #38bdf8;padding:10px 12px;background:#0b1320;border-radius:0 8px 8px 0}
.history-item strong{font-size:.95rem;text-transform:capitalize}
.history-item>span{display:block;color:#8fa1ba;font-size:.82rem;margin-top:4px}
.history-item p{margin:6px 0 0;color:#cbd5e1;line-height:1.4}
.history-state{color:#38bdf8!important}
@media(max-width:700px){.detail-grid{grid-template-columns:1fr}.detail-wide{grid-column:auto}}

/* Notificaciones — diseño compacto y alineado con la cabecera */
.notification-wrap{
  position:relative;
  display:flex;
  align-items:center;
  height:40px;
}
.notification-bell{
  position:relative;
  width:40px;
  height:40px;
  padding:0;
  border:1px solid var(--line);
  border-radius:10px;
  background:#0a111c;
  color:#e8eef7;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:border-color .2s,background .2s;
}
.notification-bell:hover{
  border-color:#38bdf8;
  background:#101b29;
}
.bell-icon{
  position:relative;
  display:block;
  width:16px;
  height:16px;
  font-size:0;
  transform:none;
}
.notification-badge{
  position:absolute;
  right:-6px;
  top:-6px;
  min-width:18px;
  height:18px;
  padding:0 4px;
  border-radius:999px;
  background:#ef4444;
  color:#fff;
  font-size:10px;
  line-height:18px;
  font-weight:800;
  text-align:center;
  border:2px solid #080b12;
  box-sizing:border-box;
}
.notification-badge.hidden{display:none}
.notification-panel{
  position:absolute;
  right:0;
  top:48px;
  width:340px;
  max-width:calc(100vw - 30px);
  background:#101722;
  border:1px solid #2b3a4f;
  border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  z-index:1000;
  overflow:hidden;
}
.notification-panel.hidden{display:none}
.notification-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid #253246;
}
.notification-panel-head strong{
  color:#f3f7fc;
  font-size:13px;
}
.notification-panel-head a{
  color:#38bdf8;
  font-size:11px;
  text-decoration:none;
}
.notification-panel-head a:hover{text-decoration:underline}
.notification-item{
  display:block;
  width:100%;
  min-height:0;
  height:auto;
  margin:0;
  padding:13px 16px;
  text-align:left;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.05);
  border-radius:0;
  background:transparent;
  color:var(--text);
  cursor:pointer;
  box-sizing:border-box;
}
.notification-item:hover{background:rgba(255,255,255,.035)}
.notification-item.unread{background:rgba(56,189,248,.055)}
.notification-item strong,
.notification-item span,
.notification-item small{
  display:block;
}
.notification-item strong{
  color:#f3f7fc;
  font-size:12px;
  line-height:1.3;
  margin-bottom:4px;
}
.notification-item span{
  color:#aebbd0;
  font-size:11px;
  line-height:1.45;
}
.notification-item small{
  color:#66758a;
  font-size:9px;
  line-height:1.3;
  margin-top:6px;
}
.notification-empty{
  padding:20px 16px;
  color:#8291a6;
  font-size:11px;
  text-align:center;
}
@media(max-width:600px){
  .notification-panel{
    right:-50px;
    width:320px;
  }
}

/* Cabecera: campana y enlaces en una sola línea */
.topbar .customer-nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:18px;
}
.topbar .customer-nav > a{
  display:flex;
  align-items:center;
  white-space:nowrap;
}

/* v55: campana SVG visible, sin depender de fuentes ni pseudo-elementos */
.notification-bell .bell-icon,
.notification-bell .bell-icon svg{
  visibility:visible!important;
  opacity:1!important;
}
.notification-bell .bell-icon{
  width:20px!important;
  height:20px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#e6edf7!important;
  font-size:0!important;
  transform:none!important;
}
.notification-bell .bell-icon svg{
  display:block!important;
  width:20px!important;
  height:20px!important;
}

/* v56 — campana limpia y proporcionada */
.notification-bell{
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  border-radius:12px!important;
  padding:0!important;
  box-sizing:border-box!important;
}
.notification-bell .bell-icon{
  width:22px!important;
  height:22px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;
  transform:none!important;
}
.notification-bell .bell-icon svg{
  width:22px!important;
  height:22px!important;
  display:block!important;
  color:#e6edf7!important;
  overflow:visible!important;
}

/* v57 — icono de campana minimalista, sin elementos decorativos */
.notification-bell .bell-icon{
  width:22px!important;
  height:22px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  color:#e6edf7!important;
}
.notification-bell .bell-icon::before,
.notification-bell .notification-bell .bell-icon svg{
  width:22px!important;
  height:22px!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
}

/* Campana final: SVG únicamente, sin pseudo-elementos */
.notification-bell .bell-icon {
  width: 22px !important;
  height: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  color: #e6edf7 !important;
  font-size: 0 !important;
}
.notification-bell .bell-icon svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* v59 — notificaciones dentro del área de cliente */
.client-notifications{
  margin:0 0 30px;
  overflow:hidden;
}
.client-notifications-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 22px;
  border-bottom:1px solid var(--line);
}
.client-notifications-head h2{
  margin:6px 0 0;
  font-size:20px;
}
.notification-count{
  display:inline-grid;
  place-items:center;
  min-width:20px;
  height:20px;
  padding:0 6px;
  margin-left:5px;
  border-radius:999px;
  background:#ef4444;
  color:#fff;
  font-size:10px;
  vertical-align:middle;
}
.client-notifications-list{
  display:grid;
}
.client-notification{
  display:flex;
  align-items:center;
  gap:12px;
  padding:15px 22px;
  border-bottom:1px solid var(--line);
}
.client-notification:last-child{border-bottom:0}
.client-notification.unread{background:#38bdf808}
.client-notification.read{opacity:.68}
.client-notification-dot{
  width:8px;
  height:8px;
  flex:0 0 8px;
  border-radius:50%;
  background:transparent;
}
.client-notification.unread .client-notification-dot{
  background:#38bdf8;
  box-shadow:0 0 0 4px #38bdf812;
}
.client-notification-body{
  flex:1;
  min-width:0;
}
.client-notification-body strong{
  display:block;
  font-size:13px;
  color:var(--text);
}
.client-notification-body p{
  margin:4px 0 3px;
  color:var(--muted);
  font-size:11px;
  line-height:1.45;
}
.client-notification-body small{
  color:#68788e;
  font-size:9px;
}
.notification-read{
  flex:0 0 auto;
  border:0;
  background:transparent;
  color:var(--a2);
  font-size:10px;
  cursor:pointer;
  padding:7px;
}
.notification-read:hover{text-decoration:underline}
.notification-empty-area{
  padding:22px;
  color:var(--muted);
  font-size:12px;
  text-align:center;
}
@media(max-width:600px){
  .client-notifications-head{align-items:flex-start;flex-direction:column}
  .client-notification{align-items:flex-start;padding:14px 16px}
  .notification-read{padding:5px 0}
}

/* v60 — servicio asociado a cada notificación */
.client-notification-body .notification-service{
  margin:4px 0 2px!important;
  color:var(--a2)!important;
  font-size:10px!important;
  font-weight:800!important;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.notification-item .notification-service{
  display:block;
  margin:4px 0 2px;
  color:#38bdf8;
  font-size:9px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.cancellation-reason{border-color:#ef444455!important}
.cancellation-reason small{color:#f87171!important}

/* v63 — detalle de reserva desplazable */
#reservationDetailModal{
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-height:100vh!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  box-sizing:border-box!important;
  padding:24px 18px!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:center!important;
  z-index:9999!important;
}
#reservationDetailModal.hidden{display:none!important}
#reservationDetailModal .reservation-detail-modal-card{
  width:min(760px,100%)!important;
  max-height:calc(100vh - 48px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  box-sizing:border-box!important;
  margin:0 auto!important;
  scrollbar-width:thin;
  overscroll-behavior:contain;
}
#reservationDetailModal .reservation-detail-modal-card::-webkit-scrollbar{
  width:8px;
}
#reservationDetailModal .reservation-detail-modal-card::-webkit-scrollbar-track{
  background:transparent;
}
#reservationDetailModal .reservation-detail-modal-card::-webkit-scrollbar-thumb{
  background:#334155;
  border-radius:999px;
}
#reservationDetailModal .reservation-detail-modal-card::-webkit-scrollbar-thumb:hover{
  background:#475569;
}
@media(max-width:700px){
  #reservationDetailModal{
    padding:10px!important;
  }
  #reservationDetailModal .reservation-detail-modal-card{
    max-height:calc(100vh - 20px)!important;
    border-radius:12px!important;
  }
}

/* v64 — estado de recordatorios */
.reminder-status-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:8px;
}
.reminder-status-grid>div{
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#0a111b;
}
.reminder-status-grid strong,
.reminder-status-grid span{
  display:block;
}
.reminder-status-grid strong{font-size:11px;color:var(--text);margin-bottom:4px}
.reminder-status-grid span{font-size:10px}
.reminder-status-grid .sent{color:#4ade80}
.reminder-status-grid .pending{color:#8291a6}
@media(max-width:600px){.reminder-status-grid{grid-template-columns:1fr}}

/* v65 — preferencias de notificación */
.guest-notification-options{
  margin:14px 0;
  padding:13px 15px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#0a111b;
}
.guest-notification-options .field-label{
  display:block;
  font-size:11px;
  font-weight:700;
  margin-bottom:9px;
}
.notify-option{
  display:inline-flex!important;
  align-items:center;
  gap:5px;
  margin-right:14px;
  width:auto!important;
  font-size:11px;
}
.guest-notification-options small{
  display:block;
  color:var(--muted);
  font-size:9px;
  margin-top:7px;
}
.notification-preferences-card{margin-top:25px}
.notification-preferences-card>h2{margin:6px 0}
.notification-preferences-table{
  margin:18px 0;
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
}
.notification-preferences-head,.notification-preference-row{
  display:grid;
  grid-template-columns:minmax(190px,1.7fr) repeat(4,minmax(65px,.55fr));
  align-items:center;
  gap:8px;
  padding:11px 13px;
}
.notification-preferences-head{
  background:#0a111b;
  color:#8392a7;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.notification-preference-row{
  border-top:1px solid var(--line);
  font-size:11px;
}
.notification-preference-row label{text-align:center}
.notification-preference-row input{accent-color:#38bdf8}
.pref-mobile-label{display:none}
@media(max-width:650px){
 .notification-preferences-head{display:none}
 .notification-preference-row{grid-template-columns:1fr 1fr 1fr 1fr;gap:5px}
 .notification-preference-row strong{grid-column:1/-1;margin-bottom:3px}
 .notification-preference-row label{font-size:9px}
 .pref-mobile-label{display:inline}
}

/* v66 — preferencias visibles para reservas de invitado */
#guestNotificationOptions{
  display:block;
}
#guestNotificationOptions.hidden{
  display:none!important;
}

/* =========================================================
   v67 — Rediseño visual del formulario de reserva
   ========================================================= */
.booking-contact-area{
  display:block!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
}
.booking-section{
  background:linear-gradient(145deg,#101a2a 0%,#0c1523 100%);
  border:1px solid #26364b;
  border-radius:14px;
  padding:28px 30px;
  margin:18px 0;
  box-shadow:0 8px 30px rgba(0,0,0,.14);
}
.booking-section-heading{
  display:flex;
  align-items:flex-start;
  gap:18px;
  margin-bottom:24px;
}
.booking-section-heading h3{
  margin:2px 0 7px;
  color:#f3f6fb;
  font-size:21px;
  line-height:1.2;
  letter-spacing:-.02em;
}
.booking-section-heading p{
  margin:0;
  color:#9eacc0;
  font-size:13px;
  line-height:1.55;
}
.booking-section-icon{
  width:54px;height:54px;min-width:54px;
  border-radius:50%;
  display:grid;place-items:center;
  background:#102d52;
  border:1px solid #1b6fc1;
}
.booking-section-icon svg{
  width:28px;height:28px;
  fill:none;stroke:#3ba9ff;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
.booking-contact-grid{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:30px!important;
}
.booking-field label{
  display:block;
  color:#e8edf5;
  font-size:13px;
  font-weight:700;
  margin:0 0 10px;
}
.booking-field label span{color:#ff5964}
.booking-input-wrap{position:relative}
.booking-input-wrap svg{
  position:absolute;left:18px;top:50%;
  transform:translateY(-50%);
  width:22px;height:22px;
  fill:none;stroke:#8b99ac;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
  pointer-events:none;
}
.booking-input-wrap input{
  width:100%!important;
  box-sizing:border-box;
  height:58px!important;
  padding:0 18px 0 52px!important;
  border:1px solid #2b3b51!important;
  border-radius:10px!important;
  background:#07101b!important;
  color:#eaf0f8!important;
  font-size:15px!important;
  outline:none;
}
.booking-input-wrap input::placeholder{color:#8190a4}
.booking-input-wrap input:focus{
  border-color:#2196f3!important;
  box-shadow:0 0 0 3px rgba(33,150,243,.12)!important;
}
.notification-choice-section{padding-bottom:24px}
.notification-choice-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.notification-choice{
  position:relative;
  min-height:170px;
  box-sizing:border-box;
  display:block!important;
  padding:22px 20px 18px 20px!important;
  border:1px solid #2b3b51;
  border-radius:12px;
  background:linear-gradient(145deg,#111d2d,#0c1624);
  cursor:pointer;
  transition:.18s ease;
}
.notification-choice:hover{border-color:#45617f;transform:translateY(-1px)}
.notification-choice input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.notification-choice-check{
  position:absolute;
  right:18px;top:18px;
  width:23px;height:23px;
  border:2px solid #8b96a5;
  border-radius:5px;
  background:#09111c;
}
.notification-choice input:checked~.notification-choice-check{
  border-color:#2e9bf4;
  background:#1689ec;
}
.notification-choice input:checked~.notification-choice-check:after{
  content:"";
  position:absolute;
  left:6px;top:2px;
  width:7px;height:12px;
  border:solid white;
  border-width:0 3px 3px 0;
  transform:rotate(45deg);
}
.notification-choice-icon{
  width:44px;height:44px;
  border-radius:50%;
  display:grid;place-items:center;
  background:#123c69;
  margin-bottom:15px;
}
.notification-choice-icon svg{
  width:23px;height:23px;
  fill:none;stroke:#46aaff;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
.notification-choice-content{display:block;padding-right:15px}
.notification-choice-content strong{
  display:flex;align-items:center;gap:8px;
  color:#f2f5fa;font-size:16px;
  margin-bottom:10px;
}
.notification-choice-content em{
  font-style:normal;
  font-size:9px;
  letter-spacing:.04em;
  background:#104f35;
  color:#45df94;
  padding:4px 7px;
  border-radius:999px;
}
.notification-choice-content small{
  display:block;
  color:#aab5c5;
  font-size:12px;
  line-height:1.5;
}
.notification-choice-content .requires-phone{
  margin-top:10px;
  color:#9aa6b7;
}
.notification-whatsapp .notification-choice-icon{background:#0b573d}
.notification-whatsapp .notification-choice-icon svg{stroke:#43e68c}
.notification-sms .notification-choice-icon{background:#51245e}
.notification-sms .notification-choice-icon svg{stroke:#df70ff}
.notification-choice:has(input:checked){
  border-color:#209cf4;
  box-shadow:0 0 0 1px rgba(32,156,244,.25);
}
.booking-info-note{
  margin-top:18px;
  display:flex;align-items:center;gap:12px;
  padding:14px 17px;
  border:1px solid #174f91;
  border-radius:10px;
  background:#0b2442;
}
.booking-info-note>span{
  width:27px;height:27px;min-width:27px;
  display:grid;place-items:center;
  border-radius:50%;
  background:#249cf4;color:#07111d;
  font-weight:900;font-size:15px;
}
.booking-info-note p{margin:0;color:#aebdd0;font-size:12px}
.booking-extra-styled{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:30px!important;
  margin:24px 0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
.booking-extra-card{min-width:0}
.booking-extra-heading{
  display:flex;align-items:flex-start;gap:12px;margin-bottom:12px;
}
.booking-extra-icon{
  width:42px;height:42px;min-width:42px;
  border-radius:50%;
  display:grid;place-items:center;
  background:#102d52;border:1px solid #1b6fc1;
}
.booking-extra-icon svg{
  width:21px;height:21px;fill:none;stroke:#46aaff;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.booking-icon-purple{background:#392052;border-color:#7040a0}
.booking-icon-purple svg{stroke:#c26aff}
.booking-extra-heading label{
  display:block;color:#edf2f8;font-size:14px;font-weight:700;margin:2px 0 4px;
}
.booking-extra-heading label .muted{font-weight:400}
.booking-extra-heading small{display:block;color:#9daabd;font-size:11px;line-height:1.45}
.booking-extra-card textarea{
  width:100%;min-height:112px;box-sizing:border-box;
  resize:vertical;
  padding:14px;
  border:1px solid #2b3b51!important;
  border-radius:10px!important;
  background:#07101b!important;
  color:#edf3fa!important;
  font-size:13px;
}
.booking-counter{margin-top:7px;color:#8e9caf;font-size:10px}
.booking-file-input{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.booking-file-drop{
  min-height:112px;
  box-sizing:border-box;
  display:flex!important;align-items:center;justify-content:center;
  gap:12px;
  padding:18px;
  border:1px dashed #3a4c63;
  border-radius:10px;
  background:#0d1725;
  color:#e8edf5;
  cursor:pointer;
}
.booking-upload-icon svg{
  width:38px;height:38px;fill:none;stroke:#b9c4d1;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.booking-file-button{
  padding:10px 14px;
  border-radius:7px;
  background:#258cf0;
  color:white;
  font-size:12px;
  font-weight:700;
}
.booking-file-drop:hover{border-color:#238ff0}
.booking-file-help{display:block;margin-top:8px;color:#8e9caf;font-size:10px}
#confirmar{
  width:100%!important;
  min-height:52px!important;
  border-radius:9px!important;
  background:linear-gradient(90deg,#1667e8,#2b91f7)!important;
  border:1px solid #2b9cff!important;
  color:white!important;
  font-size:15px!important;
  font-weight:800!important;
  letter-spacing:.01em;
  box-shadow:0 5px 20px rgba(30,125,245,.18);
}
#confirmar:hover{filter:brightness(1.06);transform:translateY(-1px)}
#msg{text-align:center;margin-top:10px}
@media(max-width:800px){
  .booking-section{padding:22px 18px}
  .booking-contact-grid,.booking-extra-styled{grid-template-columns:1fr!important;gap:18px!important}
  .notification-choice-grid{grid-template-columns:1fr}
  .notification-choice{min-height:145px}
}
@media(max-width:520px){
  .booking-section-heading{gap:12px}
  .booking-section-heading h3{font-size:18px}
  .booking-section-heading p{font-size:11px}
  .booking-section-icon{width:45px;height:45px;min-width:45px}
  .booking-section-icon svg{width:23px;height:23px}
}

/* v68 — ensure v67 booking icons cannot fall back to SVG's default 300x150 size */
.booking-section-icon svg,
.booking-input-wrap svg,
.notification-choice-icon svg,
.booking-extra-icon svg,
.booking-upload-icon svg{
  display:block!important;
  width:28px!important;
  height:28px!important;
  max-width:28px!important;
  max-height:28px!important;
  min-width:0!important;
  min-height:0!important;
  box-sizing:border-box!important;
}
.booking-input-wrap svg{width:22px!important;height:22px!important;max-width:22px!important;max-height:22px!important}
.notification-choice-icon svg{width:23px!important;height:23px!important;max-width:23px!important;max-height:23px!important}
.booking-extra-icon svg{width:21px!important;height:21px!important;max-width:21px!important;max-height:21px!important}
.booking-upload-icon svg{width:38px!important;height:38px!important;max-width:38px!important;max-height:38px!important}

/* v69 — canales externos requieren teléfono solo cuando se seleccionan */
.booking-phone-field{display:none}
.booking-phone-field.phone-required{display:block}
.booking-phone-field .phone-help{display:block;margin-top:6px;color:#8e9caf;font-size:10px}
.booking-phone-field.phone-required .phone-help{color:#55b7ff}
.booking-phone-field input:invalid{box-shadow:none}
.notification-choice input:disabled~.notification-choice-check{opacity:1}

/* v70 — contacto separado */
#guestPhoneField{display:block}
#guestPhoneField .phone-help{display:block;margin-top:6px;color:#8e9caf;font-size:10px}
#guestPhoneField.phone-required .phone-help{color:#55b7ff}
.booking-contact-grid{grid-template-columns:1fr 1fr!important}
@media(max-width:800px){.booking-contact-grid{grid-template-columns:1fr!important}}

/* =========================================================
   v71 — Rediseño de Preferencias de Notificación
   ========================================================= */
.notification-preferences-card{
  margin-top:24px!important;
  padding:26px 28px 24px!important;
  background:linear-gradient(145deg,#111b2a,#0d1624)!important;
  border:1px solid #26374c!important;
  border-radius:16px!important;
  box-shadow:0 12px 35px rgba(0,0,0,.18)!important;
}
.notification-preferences-card>.eyebrow{
  color:#42b9ff!important;
  letter-spacing:.16em;
  font-size:10px;
  font-weight:800;
}
.notification-preferences-card>h2{
  margin:5px 0 7px!important;
  font-size:23px!important;
  line-height:1.15;
  color:#f3f6fb!important;
}
.notification-preferences-card>p{
  margin:0 0 20px!important;
  max-width:850px;
  color:#94a4b9!important;
  font-size:12px!important;
  line-height:1.55;
}
.notification-preferences-table{
  margin:0 0 18px!important;
  border:1px solid #26374c!important;
  border-radius:12px!important;
  overflow:hidden!important;
  background:#0a1320!important;
}
.notification-preferences-head{
  display:grid!important;
  grid-template-columns:minmax(260px,1.7fr) repeat(4,105px)!important;
  gap:10px!important;
  padding:13px 16px!important;
  background:#08111d!important;
  border-bottom:1px solid #26374c!important;
  color:#7f91a8!important;
  font-size:9px!important;
  font-weight:800!important;
  text-transform:uppercase!important;
  letter-spacing:.09em!important;
}
.notification-preference-row{
  display:grid!important;
  grid-template-columns:minmax(260px,1.7fr) repeat(4,105px)!important;
  gap:10px!important;
  align-items:center!important;
  min-height:76px!important;
  padding:12px 16px!important;
  border-top:1px solid #1f2e41!important;
  background:#101a28!important;
  font-size:12px!important;
  transition:background .15s ease;
}
.notification-preference-row:hover{background:#132033!important}
.notification-preference-row strong{
  color:#e9eff7!important;
  font-size:12px!important;
  font-weight:700!important;
}
.notification-preference-row label{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:42px!important;
  padding:0!important;
  margin:0!important;
  border:1px solid #2a3b51!important;
  border-radius:9px!important;
  background:#0b1421!important;
  cursor:pointer!important;
  transition:.16s ease;
}
.notification-preference-row label:hover{
  border-color:#48617c!important;
  background:#101d2d!important;
}
.notification-preference-row input{
  appearance:none!important;
  -webkit-appearance:none!important;
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  min-height:18px!important;
  margin:0!important;
  padding:0!important;
  border:1.5px solid #708095!important;
  border-radius:5px!important;
  background:#07101b!important;
  cursor:pointer!important;
}
.notification-preference-row input:checked{
  border-color:#36aef7!important;
  background:#2298ec!important;
  position:relative;
}
.notification-preference-row input:checked::after{
  content:""!important;
  position:absolute!important;
  left:5px!important;
  top:1px!important;
  width:5px!important;
  height:10px!important;
  border:solid #fff!important;
  border-width:0 2px 2px 0!important;
  transform:rotate(45deg)!important;
}
.notification-preference-row label:has(input:checked){
  border-color:#238fd6!important;
  background:linear-gradient(180deg,#102b43,#0d2237)!important;
  box-shadow:inset 0 0 0 1px rgba(44,165,239,.12)!important;
}
.notification-preference-row label:nth-child(2):has(input:checked){
  border-color:#238fd6!important;
}
.notification-preference-row label:nth-child(3):has(input:checked){
  border-color:#2e9b6a!important;
  background:linear-gradient(180deg,#102b24,#0d211c)!important;
}
.notification-preference-row label:nth-child(4):has(input:checked){
  border-color:#8b4ca0!important;
  background:linear-gradient(180deg,#291b31,#211624)!important;
}
.notification-preference-row label:nth-child(5):has(input:checked){
  border-color:#a15a31!important;
  background:linear-gradient(180deg,#302117,#241911)!important;
}
.notification-preference-row .pref-mobile-label{display:none!important}
.notification-preferences-table:before{content:none!important}
.notification-preferences-card button[type="submit"]{
  width:100%!important;
  min-height:48px!important;
  border:1px solid #36b6ef!important;
  border-radius:10px!important;
  background:linear-gradient(90deg,#29afe8,#38b8ed)!important;
  color:#06111b!important;
  font-size:12px!important;
  font-weight:800!important;
  cursor:pointer!important;
  box-shadow:0 7px 20px rgba(38,171,229,.14);
}
.notification-preferences-card button[type="submit"]:hover{
  filter:brightness(1.05);
  transform:translateY(-1px);
}
@media(max-width:800px){
  .notification-preferences-card{padding:21px 16px 18px!important}
  .notification-preferences-head{display:none!important}
  .notification-preference-row{
    grid-template-columns:1fr 1fr!important;
    min-height:auto!important;
    gap:8px!important;
    padding:15px!important;
  }
  .notification-preference-row strong{
    grid-column:1/-1!important;
    margin-bottom:2px;
  }
  .notification-preference-row label{
    height:42px!important;
  }
  .notification-preference-row label:before{
    content:attr(data-channel);
  }
}

/* =========================================================
   v72 — Preferencias como tarjetas de eventos
   ========================================================= */
.notification-preferences-card{
  margin-top:24px!important;
  padding:28px!important;
  background:linear-gradient(145deg,#101a2a,#0b1421)!important;
  border:1px solid #293b51!important;
  border-radius:16px!important;
}
.notification-preferences-card .eyebrow{color:#3db8ff!important}
.notification-preferences-card>h2{
  margin:5px 0 7px!important;
  font-size:24px!important;
  color:#f4f7fb!important;
}
.notification-preferences-card .notification-intro{
  margin:0!important;
  color:#93a4b9!important;
  font-size:12px!important;
}
.pref-legend{
  display:flex;gap:18px;align-items:center;
  margin:18px 0 20px;padding-bottom:15px;
  border-bottom:1px solid #23344a;
  color:#8f9fb2;font-size:10px;
}
.pref-legend span{display:flex;align-items:center;gap:6px}
.legend-dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.legend-blue{background:#3aaeff}.legend-green{background:#42dc8c}.legend-purple{background:#d36cff}.legend-cyan{background:#4bc8ff}
.pref-events{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pref-event-card{
  padding:17px;
  border:1px solid #26384e;
  border-radius:13px;
  background:linear-gradient(145deg,#111d2c,#0d1725);
  transition:.16s ease;
}
.pref-event-card:hover{border-color:#3a526d;transform:translateY(-1px)}
.pref-event-heading{display:flex;gap:12px;align-items:flex-start;margin-bottom:15px}
.pref-event-icon{
  width:40px;height:40px;min-width:40px;border-radius:11px;
  display:grid;place-items:center;
  background:#102c49;border:1px solid #205f91;
}
.pref-event-icon svg{width:20px;height:20px;fill:none;stroke:#4ab5ff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pref-event-heading h3{margin:2px 0 4px;color:#eef3f8;font-size:13px}
.pref-event-heading p{margin:0;color:#7f90a6;font-size:10px;line-height:1.45}
.pref-channel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.pref-channel{
  position:relative;
  min-height:54px;
  display:flex!important;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;padding:6px 3px!important;
  border:1px solid #293b50!important;border-radius:9px!important;
  background:#0a1320!important;
  cursor:pointer!important;
  color:#8190a4!important;
  font-size:9px!important;
  transition:.15s ease;
}
.pref-channel input{
  position:absolute!important;opacity:0!important;pointer-events:none!important;
}
.pref-channel-icon{
  font-size:15px;line-height:1;color:#78879b;
  font-weight:700;
}
.pref-channel:has(input:checked){color:#e9f2fb!important}
.pref-channel:has(input:checked) .pref-channel-icon{color:#fff}
.pref-channel.pref-web:has(input:checked){border-color:#238fd6!important;background:#0e2941!important}
.pref-channel.pref-email:has(input:checked){border-color:#238fd6!important;background:#0e2941!important}
.pref-channel.pref-whatsapp:has(input:checked){border-color:#2b9b6a!important;background:#0d2b22!important}
.pref-channel.pref-sms:has(input:checked){border-color:#8c4ca2!important;background:#291b31!important}
.pref-save-area{margin-top:18px}
.pref-save-area button{
  width:100%!important;min-height:48px!important;
  border:1px solid #3ab8ee!important;border-radius:10px!important;
  background:linear-gradient(90deg,#2aaee8,#39b9ee)!important;
  color:#06121c!important;font-size:12px!important;font-weight:800!important;
  cursor:pointer!important;
}
.pref-save-area small{display:block;text-align:center;margin-top:8px;color:#66778c;font-size:9px}
@media(max-width:850px){.pref-events{grid-template-columns:1fr}}
@media(max-width:600px){
 .notification-preferences-card{padding:20px 15px!important}
 .pref-legend{gap:10px;flex-wrap:wrap}
 .pref-event-card{padding:14px}
 .pref-channel-grid{grid-template-columns:repeat(2,1fr)}
}

/* v73 — Tipografía y legibilidad de preferencias */
.notification-preferences-card>h2{font-size:27px!important}
.notification-preferences-card .notification-intro{
  font-size:14px!important;
  line-height:1.6!important;
}
.pref-legend{
  font-size:12px!important;
  gap:22px!important;
}
.pref-event-heading h3{
  font-size:16px!important;
  line-height:1.25!important;
}
.pref-event-heading p{
  font-size:12px!important;
  line-height:1.5!important;
}
.pref-event-icon{
  width:44px!important;height:44px!important;min-width:44px!important;
}
.pref-event-icon svg{width:22px!important;height:22px!important}
.pref-channel{
  min-height:62px!important;
  font-size:11px!important;
  gap:6px!important;
}
.pref-channel-icon{font-size:17px!important}
.pref-save-area button{font-size:14px!important;min-height:52px!important}
.pref-save-area small{font-size:11px!important}
@media(max-width:600px){
  .notification-preferences-card>h2{font-size:22px!important}
  .notification-preferences-card .notification-intro{font-size:13px!important}
  .pref-event-heading h3{font-size:15px!important}
  .pref-event-heading p{font-size:11px!important}
  .pref-channel{font-size:11px!important}
}

/* =========================================================
   v74 — Rediseño de selección de profesionales
   ========================================================= */
.booking-professionals-heading{margin:3px 0 10px}
.booking-professionals-heading label{
  display:block;margin:0 0 3px;color:#edf2f8;font-size:13px;font-weight:700;
}
.booking-professionals-heading p{margin:0;color:#8798ad;font-size:11px}
.professionals{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:11px!important;
  margin:0 0 18px!important;
}
.professional-card{
  width:100%!important;
  min-height:104px!important;
  display:flex!important;
  align-items:center!important;
  gap:15px!important;
  padding:13px!important;
  text-align:left!important;
  border:1px solid #2a3c52!important;
  border-radius:13px!important;
  background:linear-gradient(145deg,#111d2c,#0d1725)!important;
  color:#edf2f8!important;
  cursor:pointer!important;
  transition:.16s ease!important;
}
.professional-card:hover{
  border-color:#3c5b78!important;
  transform:translateY(-1px);
  box-shadow:0 7px 20px rgba(0,0,0,.15);
}
.professional-card.active{
  border-color:#2aa9f2!important;
  background:linear-gradient(145deg,#11283d,#0d1d2c)!important;
  box-shadow:0 0 0 1px rgba(42,169,242,.18),0 7px 20px rgba(0,0,0,.15);
}
.professional-avatar{
  width:76px!important;height:76px!important;min-width:76px!important;
  border-radius:12px!important;
  overflow:hidden!important;
  display:grid!important;place-items:center!important;
  background:#173252!important;
  border:1px solid #2b5278!important;
  color:#72c6ff!important;
  font-size:28px!important;font-weight:800!important;
}
.professional-avatar img{
  width:100%!important;height:100%!important;
  object-fit:cover!important;display:block!important;
}
.professional-main{min-width:0;flex:1}
.professional-name-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.professional-name-row strong{
  color:#f2f5f9!important;font-size:16px!important;line-height:1.25;
}
.professional-select{
  flex:none;
  padding:5px 8px;
  border-radius:999px;
  border:1px solid #30465d;
  color:#8ea1b5;
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.professional-card.active .professional-select{
  border-color:#2aa9f2;color:#61c4ff;background:#0d2940;
}
.professional-rating{
  display:flex;align-items:center;gap:7px;margin:6px 0 5px;
}
.professional-rating .stars{
  display:flex;gap:1px;letter-spacing:0;
}
.professional-rating .stars span{
  color:#445366;font-size:14px;line-height:1;
}
.professional-rating .stars span.filled{color:#ffc857}
.professional-rating strong{color:#f0f4f8;font-size:12px}
.professional-rating small{color:#7f91a5;font-size:10px}
.professional-rating.no-rating span{
  color:#77889c;font-size:10px;
}
.professional-main p{
  margin:0!important;
  color:#8fa0b4!important;
  font-size:11px!important;
  line-height:1.45!important;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
@media(max-width:700px){
  .professional-card{min-height:92px!important;padding:11px!important}
  .professional-avatar{width:64px!important;height:64px!important;min-width:64px!important}
  .professional-name-row strong{font-size:14px!important}
  .professional-select{font-size:8px;padding:4px 6px}
}

/* =========================================================
   v76 — Reserva compacta y sencilla
   ========================================================= */
.booking-section{
  padding:20px 22px!important;
  margin:12px 0!important;
  border-radius:12px!important;
}
.booking-section-heading{
  gap:12px!important;
  margin-bottom:15px!important;
}
.booking-section-heading h3{font-size:17px!important;margin:1px 0 4px!important}
.booking-section-heading p{font-size:11px!important}
.booking-section-icon{
  width:42px!important;height:42px!important;min-width:42px!important;
}
.booking-section-icon svg{width:21px!important;height:21px!important}
.booking-contact-grid{
  gap:12px!important;
}
.booking-field label{
  font-size:11px!important;
  margin-bottom:6px!important;
}
.booking-input-wrap input{
  height:45px!important;
  font-size:12px!important;
  border-radius:8px!important;
}
.booking-input-wrap svg{left:14px!important;width:18px!important;height:18px!important}
.booking-input-wrap input{padding-left:43px!important}

.booking-professionals-heading{margin:0 0 7px!important}
.booking-professionals-heading label{font-size:11px!important}
.booking-professionals-heading p{font-size:10px!important}
.professionals{
  gap:7px!important;
  margin-bottom:10px!important;
}
.professional-card{
  min-height:78px!important;
  padding:8px!important;
  gap:10px!important;
  border-radius:10px!important;
}
.professional-avatar{
  width:56px!important;height:56px!important;min-width:56px!important;
  border-radius:9px!important;
  font-size:21px!important;
}
.professional-name-row strong{font-size:13px!important}
.professional-select{font-size:7px!important;padding:3px 6px!important}
.professional-rating{margin:3px 0!important;gap:5px!important}
.professional-rating .stars span{font-size:11px!important}
.professional-rating strong{font-size:10px!important}
.professional-rating small{font-size:8px!important}
.professional-main p{
  font-size:9px!important;
  line-height:1.3!important;
  -webkit-line-clamp:1!important;
}
.notification-choice-section{
  padding-bottom:16px!important;
}
.notification-choice-grid{
  gap:8px!important;
}
.notification-choice{
  min-height:108px!important;
  padding:12px!important;
  border-radius:9px!important;
}
.notification-choice-check{
  width:18px!important;height:18px!important;
  right:10px!important;top:10px!important;
}
.notification-choice input:checked~.notification-choice-check:after{
  left:4px!important;top:1px!important;width:5px!important;height:9px!important;
}
.notification-choice-icon{
  width:34px!important;height:34px!important;
  margin-bottom:8px!important;
}
.notification-choice-icon svg{width:18px!important;height:18px!important}
.notification-choice-content strong{
  font-size:12px!important;margin-bottom:4px!important;
}
.notification-choice-content em{font-size:7px!important;padding:3px 5px!important}
.notification-choice-content small{
  font-size:9px!important;line-height:1.35!important;
}
.notification-choice-content .requires-phone{margin-top:5px!important}
.booking-info-note{
  margin-top:9px!important;
  padding:9px 11px!important;
  gap:8px!important;
}
.booking-info-note>span{
  width:22px!important;height:22px!important;min-width:22px!important;font-size:12px!important;
}
.booking-info-note p{font-size:9px!important}

.booking-extra-styled{
  gap:12px!important;
  margin:12px 0!important;
}
.booking-extra-heading{gap:8px!important;margin-bottom:7px!important}
.booking-extra-icon{
  width:32px!important;height:32px!important;min-width:32px!important;
}
.booking-extra-icon svg{width:16px!important;height:16px!important}
.booking-extra-heading label{font-size:11px!important;margin:1px 0 2px!important}
.booking-extra-heading small{font-size:9px!important}
.booking-extra-card textarea{
  min-height:75px!important;
  padding:10px!important;
  font-size:11px!important;
  border-radius:8px!important;
}
.booking-counter{font-size:8px!important;margin-top:4px!important}
.booking-file-drop{
  min-height:75px!important;
  padding:10px!important;
  gap:7px!important;
}
.booking-upload-icon svg{width:25px!important;height:25px!important}
.booking-file-button{padding:7px 9px!important;font-size:9px!important}
.booking-file-drop span:last-child{font-size:9px!important}
.booking-file-help{font-size:8px!important;margin-top:4px!important}
#confirmar{
  min-height:45px!important;
  border-radius:8px!important;
  font-size:13px!important;
}
#msg{font-size:10px!important}

@media(max-width:800px){
  .booking-section{padding:16px!important;margin:9px 0!important}
  .booking-section-heading{margin-bottom:11px!important}
  .booking-section-heading h3{font-size:15px!important}
  .booking-section-heading p{font-size:10px!important}
  .booking-contact-grid{grid-template-columns:1fr 1fr!important}
  .notification-choice-grid{grid-template-columns:repeat(3,1fr)!important}
  .notification-choice{min-height:125px!important}
  .booking-extra-styled{grid-template-columns:1fr 1fr!important}
}
@media(max-width:560px){
  .booking-contact-grid{grid-template-columns:1fr!important}
  .notification-choice-grid{grid-template-columns:1fr!important}
  .notification-choice{min-height:78px!important;display:grid!important;grid-template-columns:34px 1fr 20px;align-items:center;gap:9px}
  .notification-choice-icon{margin:0}
  .notification-choice-content strong{margin:0}
  .notification-choice-content small{display:none}
  .notification-choice-check{position:static;justify-self:end}
  .booking-extra-styled{grid-template-columns:1fr!important}
}

/* =========================================================
   v77 — Flujo horizontal + carruseles compactos
   ========================================================= */
.booking-section{
  padding:14px 16px!important;
  margin:7px 0!important;
  border-radius:10px!important;
}
.booking-section-heading{
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  margin-bottom:9px!important;
}
.booking-section-heading h3{font-size:14px!important;margin:0 0 2px!important}
.booking-section-heading p{font-size:9px!important}
.booking-section-icon{
  width:34px!important;height:34px!important;min-width:34px!important;
}
.booking-section-icon svg{width:17px!important;height:17px!important}

/* Contacto: una sola fila */
.booking-contact-grid{
  display:grid!important;
  grid-template-columns:1fr 1fr 1fr!important;
  gap:8px!important;
}
.booking-field label{font-size:9px!important;margin-bottom:4px!important}
.booking-input-wrap input{
  height:38px!important;
  padding-left:36px!important;
  font-size:10px!important;
  border-radius:7px!important;
}
.booking-input-wrap svg{left:11px!important;width:15px!important;height:15px!important}

/* Profesionales: carrusel horizontal */
.professionals{
  display:flex!important;
  flex-direction:row!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  gap:8px!important;
  margin:0 0 5px!important;
  padding:2px 2px 7px!important;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
}
.professional-card{
  flex:0 0 285px!important;
  width:285px!important;
  min-height:74px!important;
  height:74px!important;
  padding:7px!important;
  gap:9px!important;
  border-radius:9px!important;
  scroll-snap-align:start;
}
.professional-avatar{
  width:56px!important;height:56px!important;min-width:56px!important;
  border-radius:8px!important;
}
.professional-name-row strong{font-size:12px!important}
.professional-select{font-size:7px!important;padding:3px 5px!important}
.professional-rating{margin:2px 0!important}
.professional-rating .stars span{font-size:10px!important}
.professional-rating strong{font-size:9px!important}
.professional-rating small{font-size:7px!important}
.professional-main p{font-size:8px!important;-webkit-line-clamp:1!important}

/* Notificaciones: tres opciones en una fila */
.notification-choice-section{padding-bottom:11px!important}
.notification-choice-grid{
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:7px!important;
}
.notification-choice{
  min-height:72px!important;
  height:72px!important;
  padding:8px!important;
  display:grid!important;
  grid-template-columns:28px 1fr 17px!important;
  align-items:center!important;
  gap:7px!important;
  border-radius:8px!important;
}
.notification-choice-icon{
  width:28px!important;height:28px!important;
  margin:0!important;
}
.notification-choice-icon svg{width:15px!important;height:15px!important}
.notification-choice-content strong{
  font-size:10px!important;margin:0!important;
}
.notification-choice-content small{display:none!important}
.notification-choice-check{
  position:static!important;
  width:16px!important;height:16px!important;
  margin:0!important;
}
.notification-choice input:checked~.notification-choice-check:after{
  left:4px!important;top:1px!important;width:4px!important;height:8px!important;
}
.booking-info-note{
  margin-top:6px!important;
  padding:6px 8px!important;
}
.booking-info-note>span{width:18px!important;height:18px!important;min-width:18px!important;font-size:10px!important}
.booking-info-note p{font-size:8px!important}

/* Motivo + fotos + botón: misma fila */
.booking-extra-styled{
  display:grid!important;
  grid-template-columns:1.25fr 1fr 150px!important;
  align-items:stretch!important;
  gap:8px!important;
  margin:7px 0!important;
}
.booking-extra-card{
  min-width:0!important;
  padding:9px!important;
  border:1px solid #26374c;
  border-radius:9px;
  background:#0d1725;
}
.booking-extra-heading{gap:6px!important;margin-bottom:5px!important}
.booking-extra-icon{
  width:26px!important;height:26px!important;min-width:26px!important;
}
.booking-extra-icon svg{width:13px!important;height:13px!important}
.booking-extra-heading label{font-size:9px!important;margin:0!important}
.booking-extra-heading small{font-size:7px!important}
.booking-extra-card textarea{
  min-height:48px!important;
  height:48px!important;
  padding:7px!important;
  font-size:9px!important;
}
.booking-counter{display:none!important}
.booking-file-drop{
  min-height:48px!important;
  height:48px!important;
  padding:5px!important;
  gap:5px!important;
  border-radius:7px!important;
}
.booking-upload-icon svg{width:18px!important;height:18px!important}
.booking-file-button{padding:5px 7px!important;font-size:7px!important}
.booking-file-drop span:last-child{font-size:7px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.booking-file-help{font-size:7px!important;margin-top:3px!important}
#confirmar{
  align-self:stretch!important;
  min-height:48px!important;
  height:48px!important;
  margin:0!important;
  border-radius:8px!important;
  font-size:11px!important;
  white-space:normal!important;
}

/* Remove extra heading above professional cards */
.booking-professionals-heading{
  margin:0 0 5px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
}
.booking-professionals-heading label{font-size:10px!important}
.booking-professionals-heading p{font-size:8px!important}

/* Desktop: everything contained in compact flow */
@media(min-width:901px){
  .booking-contact-section{padding-bottom:12px!important}
  .notification-choice-section{padding-top:12px!important}
}

/* Tablet */
@media(max-width:900px){
  .booking-contact-grid{grid-template-columns:1fr 1fr 1fr!important}
  .booking-extra-styled{grid-template-columns:1fr 1fr!important}
  .booking-extra-styled #confirmar{grid-column:1/-1}
}

/* Mobile: horizontal scrollers instead of tall stacks */
@media(max-width:600px){
  .booking-section{padding:12px!important}
  .booking-contact-grid{grid-template-columns:1fr 1fr!important}
  .booking-contact-grid .booking-field:first-child{grid-column:1/-1}
  .professional-card{flex-basis:260px!important;width:260px!important}
  .notification-choice-grid{
    display:flex!important;
    overflow-x:auto!important;
    padding-bottom:5px!important;
  }
  .notification-choice{
    flex:0 0 150px!important;
  }
  .booking-extra-styled{grid-template-columns:1fr!important}
  .booking-extra-card{min-height:82px}
  .booking-extra-card textarea{height:45px!important}
  #confirmar{grid-column:auto!important}
}

/* Tiny horizontal scroll cue */
.professionals::-webkit-scrollbar{height:4px}
.professionals::-webkit-scrollbar-thumb{background:#34516d;border-radius:99px}

/* =========================================================
   v78 — Distribución horizontal real de la reserva
   ========================================================= */

/* Contenedor general de reserva: quitar sensación de bloques apilados */
.booking-contact-area{display:flex!important;flex-direction:column!important;gap:8px!important}

/* Contacto: tres columnas reales */
.booking-contact-section{width:100%!important;box-sizing:border-box!important}
.booking-contact-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
}
.booking-contact-section .booking-section-heading{margin-bottom:8px!important}

/* Profesionales: fila horizontal continua */
.professionals{
  display:flex!important;
  flex-wrap:nowrap!important;
  overflow-x:auto!important;
  align-items:stretch!important;
  gap:8px!important;
  padding:2px 2px 6px!important;
}
.professional-card{
  flex:0 0 255px!important;
  width:255px!important;
  min-height:70px!important;
  height:70px!important;
}

/* Notificaciones: una fila, sin textos secundarios que rompan altura */
.notification-choice-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
}
.notification-choice{
  width:auto!important;
  min-width:0!important;
  height:66px!important;
  min-height:66px!important;
  padding:8px 10px!important;
}

/* Motivo / fotos / confirmar: una fila completa */
.booking-extra-styled{
  display:grid!important;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) 190px!important;
  gap:8px!important;
  align-items:stretch!important;
  width:100%!important;
}
.booking-extra-card{
  min-width:0!important;
  box-sizing:border-box!important;
}
.booking-extra-card textarea{
  width:100%!important;
  box-sizing:border-box!important;
}
.booking-file-drop{
  width:100%!important;
  box-sizing:border-box!important;
}
.booking-extra-styled #confirmar{
  width:100%!important;
  height:auto!important;
  min-height:48px!important;
  align-self:stretch!important;
}

/* Reduce the main booking area itself: everything in columns */
.booking-section{
  box-sizing:border-box!important;
}

/* Desktop: turn the upper booking selector into a compact four-column strip.
   The existing summary remains at the right, while the left side stays readable. */
@media(min-width:1000px){
  .booking-main{
    min-height:0!important;
  }
  .booking-contact-section{
    padding:12px 14px!important;
  }
  .notification-choice-section{
    padding:12px 14px!important;
  }
  .booking-extra-styled{
    margin:6px 0!important;
  }
}

/* 801–999px */
@media(min-width:801px) and (max-width:999px){
  .booking-contact-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .booking-extra-styled{grid-template-columns:1fr 1fr!important}
  .booking-extra-styled #confirmar{grid-column:1/-1;min-height:44px!important}
}

/* Mobile remains horizontal where useful */
@media(max-width:700px){
  .booking-contact-grid{grid-template-columns:1fr 1fr!important}
  .booking-contact-grid .booking-field:first-child{grid-column:1/-1}
  .notification-choice-grid{
    display:flex!important;
    overflow-x:auto!important;
    flex-wrap:nowrap!important;
  }
  .notification-choice{
    flex:0 0 145px!important;
  }
  .booking-extra-styled{grid-template-columns:1fr!important}
}

/* Small visual cue that the professional row is a carousel */
.carousel-hint{
  color:#4cb9ff!important;
  white-space:nowrap;
  font-size:8px!important;
}

/* =========================================================
   v79 — Rediseño estructural: reserva realmente horizontal
   ========================================================= */

/* La página aprovecha el ancho disponible */
.shell{
  width:min(1450px,calc(100vw - 48px))!important;
  max-width:none!important;
  margin:0 auto!important;
  padding:42px 0 60px!important;
}
.hero{margin-bottom:18px!important}
.hero h1{font-size:clamp(38px,4vw,58px)!important}

/* Franja superior: servicio | profesional | fecha/hora | resumen */
.booking-top-horizontal{
  display:grid!important;
  grid-template-columns:minmax(190px,1.05fr) minmax(320px,2fr) minmax(270px,1.35fr) minmax(220px,.95fr)!important;
  gap:0!important;
  align-items:stretch!important;
  border-bottom:1px solid var(--line);
}
.booking-top-horizontal>div{
  min-width:0;
  padding:17px 15px;
  border-right:1px solid var(--line);
}
.booking-top-service select{
  width:100%!important;
  height:44px!important;
  margin-top:7px!important;
}
.booking-top-service label,
.booking-top-date-time label{
  font-size:11px!important;
  font-weight:700!important;
}
.booking-top-professional .booking-professionals-heading{
  margin:0 0 6px!important;
}
.booking-top-professional .booking-professionals-heading label{
  font-size:11px!important;
}
.booking-top-professional .booking-professionals-heading p{
  font-size:9px!important;
  margin:2px 0 0!important;
}
.booking-top-professional .professionals{
  margin:0!important;
  padding:0 0 5px!important;
  gap:7px!important;
}
.booking-top-professional .professional-card{
  flex-basis:235px!important;
  width:235px!important;
  min-height:70px!important;
  height:70px!important;
}
.booking-top-date-time{
  display:flex!important;
  flex-direction:column!important;
  min-width:0;
}
.booking-date input{
  width:100%!important;
  height:40px!important;
  margin-top:7px!important;
}
.booking-time{margin-top:10px!important;min-width:0}
.booking-time .slots{
  display:flex!important;
  flex-wrap:nowrap!important;
  overflow-x:auto!important;
  gap:5px!important;
  padding:5px 0 3px!important;
  margin:0!important;
}
.booking-time .slots button{
  flex:0 0 67px!important;
  min-height:34px!important;
  height:34px!important;
  padding:0 5px!important;
  font-size:9px!important;
}
.booking-top-summary{
  border:0!important;
  border-radius:0!important;
  padding:17px 15px!important;
  min-width:0!important;
}
.booking-top-summary h2{
  font-size:18px!important;
  margin:5px 0 10px!important;
}
.booking-top-summary .summary-line{
  display:flex!important;
  justify-content:space-between!important;
  gap:8px!important;
  padding:5px 0!important;
  border-bottom:1px solid #223144;
  font-size:9px!important;
}
.booking-top-summary .summary-line span{color:var(--muted)}
.booking-top-summary .summary-line b{
  text-align:right;
  max-width:65%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.booking-top-summary .price{
  margin:9px 0 0!important;
  font-size:16px!important;
}

/* Segunda franja: contacto en horizontal */
.booking-contact-section{
  margin:0!important;
  border-radius:0!important;
  border-left:0!important;
  border-right:0!important;
  padding:13px 15px!important;
}
.booking-contact-section .booking-section-heading{
  margin-bottom:9px!important;
}
.booking-contact-section .booking-section-heading h3{
  font-size:15px!important;
}
.booking-contact-section .booking-section-heading p{
  font-size:9px!important;
}
.booking-contact-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
}
.booking-contact-grid .booking-field label{font-size:9px!important}
.booking-contact-grid .booking-input-wrap input{
  height:38px!important;
  font-size:10px!important;
}

/* Tercera franja: canales */
.notification-choice-section{
  margin:0!important;
  border-radius:0!important;
  border-left:0!important;
  border-right:0!important;
  padding:12px 15px!important;
}
.notification-choice-section .booking-section-heading{
  margin-bottom:8px!important;
}
.notification-choice-section .booking-section-heading h3{font-size:15px!important}
.notification-choice-section .booking-section-heading p{font-size:9px!important}
.notification-choice-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
}
.notification-choice{
  min-height:60px!important;height:60px!important;
  padding:7px 10px!important;
}

/* Cuarta franja: motivo | fotos | confirmar */
.booking-extra-styled{
  display:grid!important;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) 190px!important;
  gap:8px!important;
  padding:10px 15px!important;
  margin:0!important;
}
.booking-extra-card{
  min-width:0!important;
  padding:8px!important;
}
.booking-extra-heading{
  margin-bottom:5px!important;
}
.booking-extra-heading label{font-size:9px!important}
.booking-extra-heading small{font-size:7px!important}
.booking-extra-card textarea{
  height:45px!important;
  min-height:45px!important;
  font-size:9px!important;
  margin:0!important;
}
.booking-file-drop{
  height:45px!important;
  min-height:45px!important;
}
#confirmar{
  width:100%!important;
  min-height:45px!important;
  height:45px!important;
  align-self:center!important;
  margin:0!important;
}

/* Elimina el aspecto de "página larga" del card */
.card{
  overflow:hidden!important;
  border-radius:16px!important;
}
.booking-contact-area{
  gap:0!important;
}
.booking-contact-area>*{
  border-bottom:1px solid var(--line)!important;
}
.booking-contact-area>*:last-child{
  border-bottom:0!important;
}

/* Desktop muy ancho */
@media(min-width:1400px){
  .booking-top-horizontal{
    grid-template-columns:220px minmax(430px,2.1fr) 330px 250px!important;
  }
}

/* Tablet */
@media(max-width:1000px){
  .shell{
    width:calc(100vw - 30px)!important;
    padding:30px 0 45px!important;
  }
  .booking-top-horizontal{
    grid-template-columns:1fr 1.5fr!important;
  }
  .booking-top-horizontal>div:nth-child(3){border-right:0}
  .booking-top-summary{
    grid-column:1/-1;
    border-top:1px solid var(--line)!important;
  }
}

/* Móvil */
@media(max-width:700px){
  .shell{
    width:calc(100vw - 20px)!important;
    padding:20px 0 35px!important;
  }
  .booking-top-horizontal{
    display:flex!important;
    flex-direction:column!important;
  }
  .booking-top-horizontal>div,
  .booking-top-summary{
    border-right:0!important;
    border-bottom:1px solid var(--line)!important;
  }
  .booking-contact-grid{
    grid-template-columns:1fr 1fr!important;
  }
  .booking-contact-grid .booking-field:first-child{
    grid-column:1/-1;
  }
  .notification-choice-grid{
    display:flex!important;
    overflow-x:auto!important;
  }
  .notification-choice{
    flex:0 0 150px!important;
  }
  .booking-extra-styled{
    grid-template-columns:1fr!important;
  }
}

/* =========================================================
   v80 — Corrección de textos y checkboxes
   ========================================================= */

/* Evitar que textos de controles se corten */
.booking-top-horizontal *,
.booking-contact-area *,
.notification-choice-section *,
.booking-extra-styled *{
  box-sizing:border-box;
}
.booking-top-horizontal label,
.booking-contact-area label,
.notification-choice-content,
.professional-main,
.professional-name-row{
  min-width:0;
}
.professional-name-row strong{
  min-width:0;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:normal!important;
}
.professional-select{
  flex-shrink:0!important;
  white-space:nowrap!important;
}
.professional-main p{
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.notification-choice{
  overflow:hidden!important;
}
.notification-choice-content{
  overflow:hidden!important;
}
.notification-choice-content strong{
  display:inline-block!important;
  max-width:100%!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
.notification-choice-content em{
  white-space:nowrap!important;
}
.booking-professionals-heading p{
  white-space:normal!important;
  overflow:visible!important;
}
.booking-extra-heading{
  min-width:0!important;
}
.booking-extra-heading>div{
  min-width:0!important;
}
.booking-extra-heading label,
.booking-extra-heading small{
  white-space:normal!important;
  overflow:visible!important;
}

/* Checkbox: eliminar el input nativo desplazado y dibujarlo correctamente */
.notification-choice{
  position:relative!important;
}
.notification-choice input[type="checkbox"]{
  position:absolute!important;
  opacity:0!important;
  width:1px!important;
  height:1px!important;
  margin:0!important;
  padding:0!important;
  pointer-events:none!important;
}
.notification-choice-check{
  position:relative!important;
  inset:auto!important;
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  max-width:18px!important;
  border:1.5px solid #71849a!important;
  border-radius:4px!important;
  background:#0b1522!important;
  display:block!important;
  flex:none!important;
}
.notification-choice input[type="checkbox"]:checked ~ .notification-choice-check{
  background:#258fe8!important;
  border-color:#258fe8!important;
}
.notification-choice input[type="checkbox"]:checked ~ .notification-choice-check::after{
  content:""!important;
  position:absolute!important;
  left:5px!important;
  top:2px!important;
  width:5px!important;
  height:9px!important;
  border:solid #fff!important;
  border-width:0 2px 2px 0!important;
  transform:rotate(45deg)!important;
}
.notification-choice-check::after{
  /* no mostrar marca cuando está desmarcado */
  content:none!important;
}

/* En desktop los tres canales tienen espacio real para su contenido */
@media(min-width:701px){
  .notification-choice{
    grid-template-columns:30px minmax(0,1fr) 18px!important;
    overflow:hidden!important;
  }
  .notification-choice-content{
    min-width:0!important;
  }
}

/* Ajuste de los textos pequeños para que no queden pegados */
.booking-top-service label,
.booking-top-date-time label{
  display:block!important;
  line-height:1.3!important;
}
.booking-professionals-heading label{
  display:block!important;
  line-height:1.3!important;
}
.booking-professionals-heading p{
  line-height:1.35!important;
}
.booking-contact-grid .booking-field label{
  display:block!important;
  line-height:1.3!important;
}
.booking-extra-heading label{
  display:block!important;
  line-height:1.3!important;
}

/* En pantallas pequeñas, los controles no se salen */
@media(max-width:700px){
  .notification-choice{
    grid-template-columns:28px minmax(0,1fr) 18px!important;
  }
  .notification-choice-content strong{
    font-size:10px!important;
  }
  .professional-name-row{
    align-items:flex-start!important;
  }
  .professional-name-row strong{
    max-width:150px!important;
  }
}

/* Cache bust */

/* =========================================================
   v81 — Escala tipográfica legible en reserva
   ========================================================= */

/* Labels principales */
.booking-top-horizontal label,
.booking-contact-area label,
.notification-choice-section label,
.booking-extra-styled label{
  font-size:12px!important;
  line-height:1.35!important;
}

/* Texto de ayuda */
.booking-professionals-heading p,
.booking-section-heading p,
.booking-contact-section .booking-section-heading p,
.notification-choice-section .booking-section-heading p{
  font-size:11px!important;
  line-height:1.45!important;
}

/* Servicio */
.booking-top-service select{
  font-size:13px!important;
}

/* Profesionales */
.professional-name-row strong{
  font-size:15px!important;
  line-height:1.25!important;
}
.professional-rating .stars span{
  font-size:13px!important;
}
.professional-rating strong{
  font-size:11px!important;
}
.professional-rating small{
  font-size:10px!important;
}
.professional-main p{
  font-size:10px!important;
  line-height:1.35!important;
}
.professional-select{
  font-size:9px!important;
}

/* Fecha y horarios */
.booking-date input{
  font-size:12px!important;
}
.booking-time .slots button{
  font-size:11px!important;
}

/* Resumen */
.booking-top-summary small{
  font-size:10px!important;
}
.booking-top-summary h2{
  font-size:20px!important;
}
.booking-top-summary .summary-line{
  font-size:11px!important;
  line-height:1.4!important;
}
.booking-top-summary .price{
  font-size:18px!important;
}

/* Contacto */
.booking-contact-section .booking-section-heading h3,
.notification-choice-section .booking-section-heading h3{
  font-size:17px!important;
}
.booking-contact-grid .booking-field label{
  font-size:11px!important;
}
.booking-contact-grid .booking-input-wrap input{
  font-size:12px!important;
}
.booking-contact-area .booking-field small,
.booking-contact-area .booking-field .help,
.booking-contact-area .booking-help{
  font-size:10px!important;
}

/* Notificaciones */
.notification-choice-content strong{
  font-size:13px!important;
}
.notification-choice-content small{
  font-size:10px!important;
  line-height:1.35!important;
}
.notification-choice-content em{
  font-size:8px!important;
}
.notification-choice-check{
  width:19px!important;
  height:19px!important;
  min-width:19px!important;
}

/* Información adicional */
.booking-extra-heading label{
  font-size:11px!important;
}
.booking-extra-heading small{
  font-size:9px!important;
  line-height:1.35!important;
}
.booking-extra-card textarea{
  font-size:11px!important;
}
.booking-file-button{
  font-size:10px!important;
}
.booking-file-drop span:last-child{
  font-size:9px!important;
}
.booking-file-help{
  font-size:9px!important;
}

/* Confirmación */
#confirmar{
  font-size:14px!important;
  font-weight:800!important;
}

/* El aviso de carrusel no debe quedar microscópico */
.carousel-hint{
  font-size:10px!important;
}

/* Mantener proporción en pantallas pequeñas */
@media(max-width:700px){
  .booking-top-horizontal label,
  .booking-contact-area label,
  .notification-choice-section label,
  .booking-extra-styled label{
    font-size:11px!important;
  }
  .professional-name-row strong{font-size:14px!important}
  .professional-main p{font-size:10px!important}
  .notification-choice-content strong{font-size:12px!important}
  .notification-choice-content small{font-size:9px!important}
}

/* v82 — Texto de canales de notificación centrado */
.notification-choice{
  grid-template-columns:30px minmax(0,1fr) 18px!important;
}
.notification-choice-content{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  min-width:0!important;
}
.notification-choice-content strong{
  display:block!important;
  width:100%!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:visible!important;
}
.notification-choice-content em{
  display:inline-block!important;
  margin-left:5px!important;
}
@media(max-width:700px){
  .notification-choice{
    grid-template-columns:28px minmax(0,1fr) 18px!important;
  }
  .notification-choice-content{
    justify-content:center!important;
    text-align:center!important;
  }
}

/* v83 — Canales de notificación: texto junto al icono */
.notification-choice{
  grid-template-columns:30px minmax(0,1fr) 18px!important;
}
.notification-choice-content{
  justify-content:flex-start!important;
  text-align:left!important;
  padding-left:2px!important;
}
.notification-choice-content strong{
  width:auto!important;
  text-align:left!important;
  margin:0!important;
}
.notification-choice-content em{
  margin-left:5px!important;
}
@media(max-width:700px){
  .notification-choice-content{
    justify-content:flex-start!important;
    text-align:left!important;
  }
}

/* =========================================================
   v84 — Rediseño de canales: icono + texto pegados
   ========================================================= */
.notification-redesign{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
}
.notification-redesign .notification-choice{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:10px!important;
  min-width:0!important;
  height:60px!important;
  min-height:60px!important;
  padding:8px 42px 8px 10px!important;
  overflow:hidden!important;
}
.notification-redesign .notification-choice-icon{
  flex:0 0 32px!important;
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  margin:0!important;
  display:grid!important;
  place-items:center!important;
}
.notification-redesign .notification-choice-icon svg{
  width:16px!important;
  height:16px!important;
}
.notification-redesign .notification-choice-content{
  flex:0 1 auto!important;
  min-width:0!important;
  width:auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  text-align:left!important;
  gap:2px!important;
  overflow:visible!important;
}
.notification-redesign .notification-choice-content strong{
  display:block!important;
  width:auto!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  font-size:13px!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
  text-align:left!important;
}
.notification-redesign .notification-choice-content small{
  display:block!important;
  width:auto!important;
  margin:0!important;
  color:#8496aa!important;
  font-size:9px!important;
  line-height:1.15!important;
  white-space:nowrap!important;
}
.notification-redesign .notification-choice-content em{
  display:inline-block!important;
  margin:0!important;
  padding:2px 5px!important;
  font-style:normal!important;
  font-size:7px!important;
  line-height:1!important;
  white-space:nowrap!important;
  border-radius:5px!important;
  background:#103d2b!important;
  color:#4ee39b!important;
}
.notification-redesign .notification-choice-check{
  position:absolute!important;
  right:11px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  margin:0!important;
  border-radius:4px!important;
}
.notification-redesign .notification-choice input[type="checkbox"]{
  position:absolute!important;
  opacity:0!important;
  width:1px!important;
  height:1px!important;
  pointer-events:none!important;
}
.notification-redesign .notification-choice input[type="checkbox"]:checked ~ .notification-choice-check{
  background:#258fe8!important;
  border-color:#258fe8!important;
}
.notification-redesign .notification-choice input[type="checkbox"]:checked ~ .notification-choice-check::after{
  content:""!important;
  position:absolute!important;
  left:5px!important;
  top:2px!important;
  width:5px!important;
  height:9px!important;
  border:solid #fff!important;
  border-width:0 2px 2px 0!important;
  transform:rotate(45deg)!important;
}
@media(max-width:700px){
  .notification-redesign{
    display:flex!important;
    overflow-x:auto!important;
    gap:8px!important;
  }
  .notification-redesign .notification-choice{
    flex:0 0 180px!important;
  }
}

/* =========================================================
   v85 — Tarjetas de profesionales: composición limpia
   ========================================================= */

/* La tarjeta debe ser una fila estable: foto | información | botón */
.booking-top-professional .professional-card{
  position:relative!important;
  display:grid!important;
  grid-template-columns:58px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:10px!important;
  flex:0 0 300px!important;
  width:300px!important;
  height:82px!important;
  min-height:82px!important;
  padding:8px 9px!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}

/* Foto */
.booking-top-professional .professional-avatar{
  grid-column:1!important;
  grid-row:1!important;
  width:58px!important;
  height:58px!important;
  min-width:58px!important;
  border-radius:9px!important;
  overflow:hidden!important;
  align-self:center!important;
}
.booking-top-professional .professional-avatar img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}

/* Contenido central */
.booking-top-professional .professional-main{
  grid-column:2!important;
  grid-row:1!important;
  min-width:0!important;
  width:auto!important;
  overflow:hidden!important;
  align-self:center!important;
}
.booking-top-professional .professional-name-row{
  display:flex!important;
  align-items:center!important;
  gap:5px!important;
  min-width:0!important;
  width:100%!important;
}
.booking-top-professional .professional-name-row strong{
  display:block!important;
  flex:1 1 auto!important;
  min-width:0!important;
  max-width:none!important;
  font-size:13px!important;
  line-height:1.15!important;
  white-space:normal!important;
  overflow:hidden!important;
  text-overflow:clip!important;
}
.booking-top-professional .professional-rating{
  display:flex!important;
  align-items:center!important;
  gap:3px!important;
  margin:3px 0 1px!important;
  white-space:nowrap!important;
}
.booking-top-professional .professional-rating .stars span{
  font-size:10px!important;
}
.booking-top-professional .professional-rating strong{
  font-size:9px!important;
}
.booking-top-professional .professional-rating small{
  font-size:8px!important;
}
.booking-top-professional .professional-main p{
  display:block!important;
  width:100%!important;
  margin:1px 0 0!important;
  font-size:8px!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* Botón de selección: siempre dentro de la tarjeta */
.booking-top-professional .professional-select{
  grid-column:3!important;
  grid-row:1!important;
  align-self:center!important;
  flex:none!important;
  width:auto!important;
  max-width:72px!important;
  min-width:58px!important;
  padding:5px 6px!important;
  margin:0!important;
  font-size:7px!important;
  line-height:1!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* Evita que reglas antiguas vuelvan a deformar la tarjeta */
.booking-top-professional .professional-card > *{
  box-sizing:border-box!important;
}

/* Más espacio en pantallas anchas */
@media(min-width:1200px){
  .booking-top-professional .professional-card{
    flex-basis:315px!important;
    width:315px!important;
  }
}

/* Móvil */
@media(max-width:700px){
  .booking-top-professional .professional-card{
    flex-basis:285px!important;
    width:285px!important;
    height:78px!important;
    min-height:78px!important;
    grid-template-columns:54px minmax(0,1fr) auto!important;
  }
  .booking-top-professional .professional-avatar{
    width:54px!important;
    height:54px!important;
    min-width:54px!important;
  }
  .booking-top-professional .professional-name-row strong{
    font-size:12px!important;
  }
}

/* =========================================================
   v86 — Motivo y fotos en la columna lateral derecha
   ========================================================= */
.booking-layout{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 350px!important;
  align-items:stretch!important;
  width:100%!important;
  min-width:0!important;
}
.booking-left-column{
  min-width:0!important;
  border-right:1px solid var(--line)!important;
}
.booking-right-column{
  min-width:0!important;
  padding:16px!important;
  background:linear-gradient(180deg,#101a29 0%,#0b1420 100%)!important;
}
.booking-right-title{
  font-size:15px!important;
  font-weight:800!important;
  margin:0 0 10px!important;
  color:#f1f5fb!important;
}
.booking-right-column .booking-extra-styled{
  display:flex!important;
  flex-direction:column!important;
  gap:12px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
}
.booking-right-column .booking-extra-card{
  width:100%!important;
  min-width:0!important;
  padding:12px!important;
  border:1px solid #26374c!important;
  border-radius:10px!important;
  background:#0d1725!important;
}
.booking-right-column .booking-extra-heading{
  display:flex!important;
  align-items:flex-start!important;
  gap:8px!important;
  margin-bottom:8px!important;
}
.booking-right-column .booking-extra-heading label{
  font-size:12px!important;
  line-height:1.3!important;
}
.booking-right-column .booking-extra-heading small{
  font-size:9px!important;
  line-height:1.35!important;
}
.booking-right-column .booking-extra-card textarea{
  width:100%!important;
  height:125px!important;
  min-height:125px!important;
  font-size:11px!important;
  line-height:1.45!important;
}
.booking-right-column .booking-counter{
  font-size:9px!important;
  margin-top:5px!important;
}
.booking-right-column .booking-file-drop{
  width:100%!important;
  min-height:115px!important;
  height:115px!important;
  display:flex!important;
  flex-wrap:wrap!important;
  align-content:center!important;
  justify-content:center!important;
  gap:8px!important;
  padding:12px!important;
  text-align:center!important;
}
.booking-right-column .booking-upload-icon{
  width:100%!important;
  display:block!important;
  text-align:center!important;
}
.booking-right-column .booking-upload-icon svg{
  width:30px!important;
  height:30px!important;
}
.booking-right-column .booking-file-button{
  font-size:10px!important;
  padding:7px 10px!important;
}
.booking-right-column .booking-file-drop>span:last-child{
  max-width:100%!important;
  font-size:9px!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
.booking-right-column .booking-file-help{
  font-size:9px!important;
  line-height:1.35!important;
  display:block!important;
  margin-top:5px!important;
}
.booking-left-confirm{
  padding:10px 15px 14px!important;
  border-top:1px solid var(--line)!important;
}
.booking-left-confirm #confirmar{
  width:100%!important;
  height:48px!important;
  min-height:48px!important;
}
.booking-left-confirm #msg{
  margin-top:7px!important;
}
@media(max-width:1050px){
  .booking-layout{grid-template-columns:minmax(0,1fr) 300px!important}
  .booking-right-column{padding:12px!important}
}
@media(max-width:700px){
  .booking-layout{display:flex!important;flex-direction:column!important}
  .booking-left-column{border-right:0!important}
  .booking-right-column{
    border-top:1px solid var(--line)!important;
    padding:12px!important;
  }
  .booking-right-column .booking-extra-card textarea{
    height:90px!important;min-height:90px!important;
  }
  .booking-right-column .booking-file-drop{
    min-height:85px!important;height:85px!important;
  }
}

/* =========================================================
   v87 — Información adicional: mismo nivel y estilo que
   los apartados principales, en columna derecha
   ========================================================= */
.booking-layout{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 350px!important;
  grid-template-rows:auto!important;
  align-items:start!important;
}
.booking-left-column{
  grid-column:1!important;
  grid-row:1!important;
  min-width:0!important;
}
.booking-right-column{
  grid-column:2!important;
  grid-row:1!important;
  align-self:start!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  padding:14px!important;
  margin:0!important;
  background:transparent!important;
  border:0!important;
  border-left:1px solid var(--line)!important;
  box-sizing:border-box!important;
}
.booking-right-title{
  font-size:16px!important;
  font-weight:800!important;
  margin:0!important;
  padding:13px 14px 12px!important;
  border:1px solid var(--line)!important;
  border-bottom:0!important;
  border-radius:10px 10px 0 0!important;
  background:#101a29!important;
  color:#f1f5fb!important;
}
.booking-right-column .booking-extra-styled{
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
  margin:0!important;
  padding:0!important;
}
.booking-right-column .booking-extra-card{
  border-radius:0!important;
  border:1px solid var(--line)!important;
  border-top:0!important;
  background:#101a29!important;
  padding:14px!important;
}
.booking-right-column .booking-extra-card:last-child{
  border-radius:0 0 10px 10px!important;
  border-bottom:1px solid var(--line)!important;
}
.booking-right-column .booking-extra-card + .booking-extra-card{
  border-top:1px solid var(--line)!important;
}
.booking-right-column .booking-extra-heading label{
  font-size:12px!important;
}
.booking-right-column .booking-extra-heading small{
  font-size:9px!important;
}
.booking-right-column .booking-extra-card textarea{
  height:130px!important;
  min-height:130px!important;
}
.booking-right-column .booking-file-drop{
  min-height:125px!important;
  height:125px!important;
}
@media(max-width:1050px){
  .booking-layout{
    grid-template-columns:minmax(0,1fr) 300px!important;
  }
}
@media(max-width:700px){
  .booking-layout{
    display:flex!important;
    flex-direction:column!important;
  }
  .booking-left-column,
  .booking-right-column{
    grid-column:auto!important;
    grid-row:auto!important;
    width:100%!important;
    border-left:0!important;
  }
  .booking-right-column{
    border-top:1px solid var(--line)!important;
    padding:12px!important;
  }
}

/* =========================================================
   v88 — Layout definitivo: Información adicional a la
   derecha, al mismo nivel que el contenido principal.
   ========================================================= */

/* El contenedor exterior debe ocupar todo el ancho disponible */
main.shell{
  width:min(1450px,calc(100vw - 48px))!important;
  max-width:none!important;
}
section.card{
  width:100%!important;
  max-width:none!important;
}

/* Dos columnas reales. La derecha empieza arriba, no debajo. */
.booking-layout{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 350px!important;
  grid-template-rows:auto!important;
  width:100%!important;
  max-width:none!important;
  align-items:start!important;
  justify-items:stretch!important;
  min-width:0!important;
}
.booking-left-column{
  grid-column:1!important;
  grid-row:1!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
}
.booking-right-column{
  grid-column:2!important;
  grid-row:1!important;
  width:350px!important;
  min-width:350px!important;
  max-width:350px!important;
  align-self:start!important;
  justify-self:stretch!important;
  margin:0!important;
  padding:14px!important;
  border-left:1px solid var(--line)!important;
  border-top:0!important;
  background:#0e1724!important;
  box-sizing:border-box!important;
}

/* Encabezado de información adicional exactamente como un apartado */
.booking-right-title{
  display:flex!important;
  align-items:center!important;
  min-height:48px!important;
  margin:0!important;
  padding:0 14px!important;
  border:1px solid var(--line)!important;
  border-radius:10px 10px 0 0!important;
  background:#111b2a!important;
  color:var(--text)!important;
  font-size:16px!important;
  font-weight:800!important;
  box-sizing:border-box!important;
}

/* Los dos apartados de la derecha forman un único bloque continuo */
.booking-right-column .booking-extra-styled{
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
}
.booking-right-column .booking-extra-card{
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:14px!important;
  border:1px solid var(--line)!important;
  border-top:0!important;
  border-radius:0!important;
  background:#111b2a!important;
  box-sizing:border-box!important;
}
.booking-right-column .booking-extra-card:last-child{
  border-radius:0 0 10px 10px!important;
}
.booking-right-column .booking-extra-heading{
  display:flex!important;
  align-items:flex-start!important;
  gap:8px!important;
  margin:0 0 9px!important;
}
.booking-right-column .booking-extra-heading label{
  font-size:12px!important;
  line-height:1.3!important;
}
.booking-right-column .booking-extra-heading small{
  display:block!important;
  font-size:9px!important;
  line-height:1.35!important;
}
.booking-right-column .booking-extra-card textarea{
  width:100%!important;
  height:125px!important;
  min-height:125px!important;
  margin:0!important;
  box-sizing:border-box!important;
  font-size:11px!important;
}
.booking-right-column .booking-file-drop{
  width:100%!important;
  height:110px!important;
  min-height:110px!important;
  box-sizing:border-box!important;
}
.booking-right-column .booking-file-help{
  font-size:9px!important;
}

/* El botón sigue abajo del contenido izquierdo */
.booking-left-confirm{
  width:100%!important;
  box-sizing:border-box!important;
}

/* Solo en pantallas realmente pequeñas se apila.
   Evita que un zoom del navegador convierta el escritorio en una
   columna vertical demasiado pronto. */
@media(max-width:700px){
  main.shell{
    width:calc(100vw - 20px)!important;
  }
  .booking-layout{
    display:flex!important;
    flex-direction:column!important;
  }
  .booking-left-column,
  .booking-right-column{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    grid-column:auto!important;
    grid-row:auto!important;
    border-left:0!important;
  }
  .booking-right-column{
    border-top:1px solid var(--line)!important;
    padding:12px!important;
  }
}

/* Entre 701 y 1050 px seguimos manteniendo dos columnas,
   reduciendo la lateral para que permanezca al lado. */
@media(min-width:701px) and (max-width:1050px){
  main.shell{
    width:calc(100vw - 30px)!important;
  }
  .booking-layout{
    grid-template-columns:minmax(0,1fr) 300px!important;
  }
  .booking-right-column{
    width:300px!important;
    min-width:300px!important;
    max-width:300px!important;
  }
}

/* =========================================================
   v89 — Más ancho para que las dos columnas estén realmente
   lado a lado sin comprimir el contenido principal.
   ========================================================= */

/* La reserva completa ocupa mucho más ancho en escritorio */
@media(min-width:1101px){
  main.shell{
    width:min(1750px,calc(100vw - 70px))!important;
    max-width:none!important;
  }

  section.card{
    width:100%!important;
    max-width:none!important;
  }

  .booking-layout{
    grid-template-columns:minmax(0,1fr) 430px!important;
    width:100%!important;
    min-width:0!important;
  }

  .booking-right-column{
    width:430px!important;
    min-width:430px!important;
    max-width:430px!important;
  }

  /* El bloque superior tiene espacio suficiente para no encoger
     profesionales, fecha/hora y resumen. */
  .booking-top-horizontal{
    grid-template-columns:
      minmax(190px,1fr)
      minmax(360px,2fr)
      minmax(300px,1.35fr)
      minmax(240px,.95fr)!important;
  }

  /* Campos de contacto con proporciones cómodas */
  .booking-contact-grid{
    grid-template-columns:1.1fr 1.1fr .9fr!important;
  }
}

/* Pantallas grandes: aprovechar prácticamente todo el monitor */
@media(min-width:1600px){
  main.shell{
    width:min(1850px,calc(100vw - 80px))!important;
  }
  .booking-layout{
    grid-template-columns:minmax(0,1fr) 450px!important;
  }
  .booking-right-column{
    width:450px!important;
    min-width:450px!important;
    max-width:450px!important;
  }
}

/* Tablet: mantener las dos columnas pero sin dejar la derecha
   demasiado estrecha. */
@media(min-width:701px) and (max-width:1100px){
  main.shell{
    width:calc(100vw - 36px)!important;
    max-width:none!important;
  }
  .booking-layout{
    grid-template-columns:minmax(0,1fr) 320px!important;
  }
  .booking-right-column{
    width:320px!important;
    min-width:320px!important;
    max-width:320px!important;
  }
}

/* =========================================================
   v90 — Diseño final solicitado
   ========================================================= */
@media (min-width: 1101px){
  main.shell{
    width:min(1420px, calc(100vw - 40px)) !important;
    max-width:none !important;
    margin:0 auto !important;
    padding:32px 0 50px !important;
  }
  .hero{margin-bottom:16px !important}
  .hero h1{font-size:52px !important;margin:8px 0 6px !important}
  section.card{
    width:100% !important;
    max-width:none !important;
    border-radius:18px !important;
    overflow:hidden !important;
  }
  .booking-layout{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 350px !important;
    grid-template-rows:auto !important;
    width:100% !important;
    min-width:0 !important;
    align-items:stretch !important;
  }
  .booking-left-column{
    grid-column:1 !important;
    grid-row:1 !important;
    min-width:0 !important;
    width:100% !important;
    border-right:1px solid var(--line) !important;
  }
  .booking-right-column{
    grid-column:2 !important;
    grid-row:1 !important;
    width:350px !important;
    min-width:350px !important;
    max-width:350px !important;
    padding:0 !important;
    margin:0 !important;
    background:#101a29 !important;
    border-left:0 !important;
    border-top:0 !important;
    align-self:stretch !important;
    box-sizing:border-box !important;
  }
  .booking-top-horizontal{
    display:grid !important;
    grid-template-columns:180px minmax(300px,1.55fr) 240px 210px !important;
    min-height:275px !important;
    width:100% !important;
  }
  .booking-top-horizontal>div{
    min-width:0 !important;
    padding:18px 16px !important;
  }
  .booking-top-summary{min-width:0 !important}
  .booking-right-title{
    display:block !important;
    margin:0 !important;
    padding:22px 18px 16px !important;
    border:0 !important;
    border-bottom:1px solid var(--line) !important;
    border-radius:0 !important;
    background:#101a29 !important;
    color:#f4f7fb !important;
    font-size:20px !important;
    line-height:1.2 !important;
    font-weight:800 !important;
  }
  .booking-right-column .booking-extra-styled{
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
    margin:0 !important;
    padding:0 !important;
  }
  .booking-right-column .booking-extra-card{
    width:100% !important;
    margin:0 !important;
    padding:18px !important;
    border:0 !important;
    border-bottom:1px solid #2a394d !important;
    border-radius:0 !important;
    background:#101a29 !important;
    box-sizing:border-box !important;
  }
  .booking-right-column .booking-extra-card:last-child{border-bottom:0 !important}
  .booking-right-column .booking-extra-heading{
    display:flex !important;
    align-items:flex-start !important;
    gap:9px !important;
    margin:0 0 10px !important;
  }
  .booking-right-column .booking-extra-heading label{
    font-size:13px !important;
    line-height:1.35 !important;
    font-weight:700 !important;
  }
  .booking-right-column .booking-extra-heading small{
    display:block !important;
    margin-top:4px !important;
    font-size:10px !important;
    line-height:1.4 !important;
  }
  .booking-right-column .booking-extra-card textarea{
    width:100% !important;
    height:145px !important;
    min-height:145px !important;
    margin:0 !important;
    padding:12px !important;
    font-size:12px !important;
    line-height:1.45 !important;
    box-sizing:border-box !important;
  }
  .booking-right-column .booking-counter{
    text-align:right !important;
    font-size:9px !important;
    margin-top:5px !important;
  }
  .booking-right-column .booking-file-drop{
    width:100% !important;
    height:190px !important;
    min-height:190px !important;
    padding:18px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    box-sizing:border-box !important;
    text-align:center !important;
  }
  .booking-right-column .booking-file-drop>span:last-child{
    max-width:100% !important;
    white-space:normal !important;
    font-size:10px !important;
    line-height:1.35 !important;
    text-align:center !important;
  }
  .booking-right-column .booking-file-help{
    display:block !important;
    margin-top:7px !important;
    font-size:9px !important;
    line-height:1.35 !important;
  }
  .booking-left-column .booking-contact-grid{
    grid-template-columns:1.1fr 1.1fr .95fr !important;
    gap:12px !important;
  }
  .booking-left-column .notification-choice-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:10px !important;
  }
  .booking-left-confirm{
    width:100% !important;
    padding:12px 16px 16px !important;
    box-sizing:border-box !important;
  }
  .booking-left-confirm #confirmar{
    width:100% !important;
    height:52px !important;
    min-height:52px !important;
    font-size:15px !important;
  }
}
@media (min-width:1500px){
  main.shell{width:min(1500px,calc(100vw - 60px)) !important}
  .booking-layout{grid-template-columns:minmax(0,1fr) 370px !important}
  .booking-right-column{width:370px !important;min-width:370px !important;max-width:370px !important}
}
@media (max-width:1100px) and (min-width:701px){
  main.shell{width:calc(100vw - 30px) !important;max-width:none !important}
  .booking-layout{grid-template-columns:minmax(0,1fr) 310px !important}
  .booking-right-column{width:310px !important;min-width:310px !important;max-width:310px !important}
  .booking-top-horizontal{grid-template-columns:150px minmax(220px,1fr) 200px 180px !important}
}
@media (max-width:700px){
  main.shell{width:calc(100vw - 20px) !important}
  .booking-layout{display:flex !important;flex-direction:column !important}
  .booking-left-column,.booking-right-column{width:100% !important;max-width:none !important;min-width:0 !important}
  .booking-right-column{border-top:1px solid var(--line) !important}
}

/* =========================================================
   v91 — CORRECCIÓN ESTRUCTURAL DEFINITIVA
   Información adicional forma parte del MISMO recuadro
   y permanece a la derecha en escritorio/tablet.
   ========================================================= */

/* Escritorio y tablet: SIEMPRE dos columnas */
@media (min-width:501px) {
  main.shell{
    width:calc(100vw - 30px)!important;
    max-width:1500px!important;
    margin:0 auto!important;
    padding:32px 0 50px!important;
    box-sizing:border-box!important;
  }

  section.card{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  .booking-layout{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) clamp(300px,27vw,390px)!important;
    grid-template-rows:auto!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    align-items:stretch!important;
    box-sizing:border-box!important;
  }

  .booking-left-column{
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    box-sizing:border-box!important;
    border-right:1px solid var(--line)!important;
  }

  .booking-right-column{
    grid-column:2!important;
    grid-row:1!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
    align-self:stretch!important;
    background:#101a29!important;
    border:0!important;
    border-left:1px solid var(--line)!important;
  }

  /* La parte superior se adapta al espacio disponible de la izquierda */
  .booking-top-horizontal{
    display:grid!important;
    grid-template-columns:
      minmax(125px,0.8fr)
      minmax(150px,1.35fr)
      minmax(145px,1fr)
      minmax(145px,0.9fr)!important;
    width:100%!important;
    min-width:0!important;
  }

  .booking-top-horizontal>div,
  .booking-top-summary{
    min-width:0!important;
    box-sizing:border-box!important;
  }

  /* Evitar que los profesionales rompan la columna */
  .booking-top-professional,
  .booking-top-professional .professionals{
    min-width:0!important;
    overflow:hidden!important;
  }

  /* Información adicional: mismo panel, misma alineación, sin salir del card */
  .booking-right-title{
    display:block!important;
    width:100%!important;
    margin:0!important;
    padding:20px 16px 14px!important;
    box-sizing:border-box!important;
    background:#101a29!important;
    border:0!important;
    border-bottom:1px solid var(--line)!important;
    border-radius:0!important;
    color:#f4f7fb!important;
    font-size:18px!important;
    line-height:1.25!important;
    font-weight:800!important;
  }

  .booking-right-column .booking-extra-styled{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    gap:0!important;
    box-sizing:border-box!important;
  }

  .booking-right-column .booking-extra-card{
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:16px!important;
    box-sizing:border-box!important;
    background:#101a29!important;
    border:0!important;
    border-bottom:1px solid var(--line)!important;
    border-radius:0!important;
  }

  .booking-right-column .booking-extra-card:last-child{
    border-bottom:0!important;
  }

  .booking-right-column .booking-extra-heading{
    display:flex!important;
    align-items:flex-start!important;
    gap:8px!important;
    width:100%!important;
    min-width:0!important;
    margin:0 0 9px!important;
  }

  .booking-right-column .booking-extra-heading>div{
    min-width:0!important;
    flex:1 1 auto!important;
  }

  .booking-right-column .booking-extra-heading label{
    font-size:12px!important;
    line-height:1.35!important;
  }

  .booking-right-column .booking-extra-heading small{
    display:block!important;
    margin-top:3px!important;
    font-size:9px!important;
    line-height:1.4!important;
  }

  .booking-right-column textarea{
    width:100%!important;
    height:120px!important;
    min-height:120px!important;
    box-sizing:border-box!important;
    font-size:11px!important;
  }

  .booking-right-column .booking-file-drop{
    width:100%!important;
    height:135px!important;
    min-height:135px!important;
    box-sizing:border-box!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    padding:12px!important;
    text-align:center!important;
  }

  .booking-right-column .booking-file-drop>span:last-child{
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    font-size:9px!important;
    line-height:1.35!important;
  }

  /* El botón permanece dentro de la columna izquierda */
  .booking-left-confirm{
    width:100%!important;
    box-sizing:border-box!important;
  }
}

/* Tablet pequeña: columna derecha algo más estrecha */
@media (min-width:501px) and (max-width:850px) {
  main.shell{
    width:calc(100vw - 20px)!important;
    padding-top:24px!important;
  }

  .booking-layout{
    grid-template-columns:minmax(0,1fr) 280px!important;
  }

  .booking-right-column{
    width:280px!important;
  }

  .booking-top-horizontal{
    grid-template-columns:
      minmax(100px,0.7fr)
      minmax(125px,1.2fr)
      minmax(125px,1fr)
      minmax(125px,0.9fr)!important;
  }

  .booking-right-title{
    font-size:16px!important;
    padding:16px 13px 12px!important;
  }

  .booking-right-column .booking-extra-card{
    padding:13px!important;
  }

  .booking-right-column textarea{
    height:105px!important;
    min-height:105px!important;
  }

  .booking-right-column .booking-file-drop{
    height:115px!important;
    min-height:115px!important;
  }
}

/* Solo móvil real: apilar */
@media (max-width:500px) {
  main.shell{
    width:calc(100vw - 20px)!important;
    padding:20px 0 35px!important;
  }

  .booking-layout{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
  }

  .booking-left-column,
  .booking-right-column{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    border-left:0!important;
  }

  .booking-right-column{
    border-top:1px solid var(--line)!important;
  }
}

/* =========================================================
   v97 — Foto de perfil profesional
   ========================================================= */
.professional-profile-editor{
  display:grid;
  grid-template-columns:minmax(260px,.8fr) minmax(300px,1.2fr);
  gap:24px;
  align-items:start;
}
.professional-photo-panel{
  display:flex;
  gap:18px;
  align-items:center;
  padding:18px;
  border:1px solid var(--line,#293d55);
  border-radius:12px;
  background:#0d1827;
}
.professional-photo-preview{
  flex:0 0 112px;
  width:112px;
  height:112px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:50%;
  border:2px solid #2f435c;
  background:#132235;
  color:#8ea4bb;
  font-size:38px;
  font-weight:800;
}
.professional-photo-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.professional-photo-panel strong{
  display:block;
  margin-bottom:6px;
  color:#f2f6fb;
  font-size:14px;
}
.professional-photo-panel p{
  margin:0 0 12px;
  font-size:10px;
  line-height:1.4;
}
.professional-photo-form{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.professional-photo-form input[type=file]{
  display:none;
}
.photo-upload-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:0 12px;
  border:1px solid #31506f;
  border-radius:7px;
  background:#10243a;
  color:#dce8f4;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
}
.professional-photo-form button{
  min-height:36px;
  padding:0 12px;
  font-size:11px;
}
.professional-photo-form small{
  width:100%;
  color:#8fa2b7;
  font-size:9px;
}
.professional-details-form{
  min-width:0;
}
@media(max-width:800px){
  .professional-profile-editor{grid-template-columns:1fr;}
}

/* =========================================================
   v98 — Carrusel profesional funcional
   ========================================================= */
.booking-top-professional{
  min-width:0!important;
  overflow:visible!important;
}
.professionals-carousel{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  width:100%!important;
  min-width:0!important;
  overflow:visible!important;
}
.professionals-carousel .professionals{
  flex:1 1 auto!important;
  width:100%!important;
  min-width:0!important;
  display:flex!important;
  flex-wrap:nowrap!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scroll-behavior:smooth!important;
  scrollbar-width:thin!important;
  scrollbar-color:#34516d transparent!important;
  cursor:grab!important;
  touch-action:pan-x!important;
  padding:2px 38px 7px!important;
}
.professionals-carousel .professionals.dragging{
  cursor:grabbing!important;
  scroll-behavior:auto!important;
}
.professionals-carousel .professional-card{
  flex:0 0 300px!important;
  width:300px!important;
}
.professionals-arrow{
  position:absolute!important;
  z-index:10!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid #3a5570!important;
  border-radius:50%!important;
  background:#0b1625!important;
  color:#eef5fb!important;
  font-size:24px!important;
  line-height:1!important;
  box-shadow:0 3px 12px rgba(0,0,0,.35)!important;
  cursor:pointer!important;
}
.professionals-arrow:hover:not(:disabled){
  background:#128cff!important;
  border-color:#128cff!important;
}
.professionals-arrow:disabled{opacity:.25!important;cursor:default!important}
.professionals-arrow-left{left:4px!important}
.professionals-arrow-right{right:4px!important}
@media(max-width:700px){
  .professionals-carousel .professional-card{
    flex-basis:285px!important;width:285px!important;
  }
}

/* =========================================================
   v99 — Tarjetas de profesionales más altas y seleccionables
   ========================================================= */
.booking-top-professional .professionals-carousel{
  min-height:118px!important;
  height:118px!important;
}
.booking-top-professional .professionals-carousel .professionals{
  min-height:112px!important;
  height:112px!important;
  align-items:stretch!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  padding:4px 40px 8px!important;
}
.booking-top-professional .professionals-carousel .professional-card{
  position:relative!important;
  flex:0 0 315px!important;
  width:315px!important;
  height:100px!important;
  min-height:100px!important;
  max-height:100px!important;
  display:grid!important;
  grid-template-columns:68px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:11px!important;
  padding:10px 11px!important;
  overflow:visible!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  z-index:2!important;
}
.booking-top-professional .professional-avatar{
  width:64px!important;
  height:64px!important;
  min-width:64px!important;
  border-radius:10px!important;
}
.booking-top-professional .professional-main{
  min-width:0!important;
  overflow:visible!important;
}
.booking-top-professional .professional-name-row{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  min-width:0!important;
  white-space:normal!important;
}
.booking-top-professional .professional-name-row strong{
  display:block!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:visible!important;
  white-space:normal!important;
  text-overflow:clip!important;
  font-size:13px!important;
  line-height:1.2!important;
}
.booking-top-professional .professional-rating{
  white-space:nowrap!important;
  overflow:visible!important;
  margin:4px 0!important;
}
.booking-top-professional .professional-main p{
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  overflow:hidden!important;
  margin:3px 0 0!important;
  font-size:9px!important;
  line-height:1.3!important;
}
.booking-top-professional .professional-select{
  flex:0 0 auto!important;
  white-space:nowrap!important;
}
.booking-top-professional .professionals-arrow{
  pointer-events:auto!important;
  z-index:20!important;
}
@media(max-width:700px){
  .booking-top-professional .professionals-carousel{
    min-height:112px!important;
    height:112px!important;
  }
  .booking-top-professional .professionals-carousel .professionals{
    min-height:106px!important;
    height:106px!important;
  }
  .booking-top-professional .professionals-carousel .professional-card{
    flex-basis:290px!important;
    width:290px!important;
    height:94px!important;
    min-height:94px!important;
    max-height:94px!important;
    grid-template-columns:58px minmax(0,1fr) auto!important;
  }
  .booking-top-professional .professional-avatar{
    width:54px!important;
    height:54px!important;
    min-width:54px!important;
  }
}

/* =========================================================
   v100 — Profesional: una tarjeta + ventana de detalle
   ========================================================= */
.booking-top-professional .professionals-carousel .professionals{
  overflow-x:hidden!important;
  overflow-y:hidden!important;
  padding:4px 36px 8px!important;
}
.booking-top-professional .professionals-carousel .professional-card{
  flex:0 0 100%!important;
  width:100%!important;
  max-width:100%!important;
  height:116px!important;
  min-height:116px!important;
  max-height:116px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:20px!important;
  padding:16px 20px!important;
  cursor:pointer!important;
}
.booking-top-professional .professional-avatar{
  width:82px!important;
  height:82px!important;
  min-width:82px!important;
  border-radius:12px!important;
}
.booking-top-professional .professional-main{
  flex:1 1 auto!important;
  min-width:0!important;
}
.booking-top-professional .professional-name-only strong{
  display:block!important;
  color:#f4f7fb!important;
  font-size:18px!important;
  line-height:1.25!important;
  white-space:normal!important;
}
.professional-card-price{
  display:block!important;
  margin-top:6px!important;
  color:#3eb9ff!important;
  font-size:13px!important;
  font-weight:800!important;
  line-height:1.2!important;
}
.booking-top-professional .professional-name-only:after{
  content:"Ver información →"!important;
  display:block!important;
  margin-top:7px!important;
  color:#3eb9ff!important;
  font-size:10px!important;
  font-weight:700!important;
}
.professionals-carousel .professionals-arrow{
  z-index:30!important;
}
.professional-modal{
  position:fixed!important;
  inset:0!important;
  z-index:9999!important;
  display:none!important;
  align-items:center!important;
  justify-content:center!important;
  padding:20px!important;
}
.professional-modal.open{display:flex!important}
.professional-modal-backdrop{
  position:absolute!important;
  inset:0!important;
  background:rgba(0,0,0,.72)!important;
  backdrop-filter:blur(4px)!important;
}
.professional-modal-dialog{
  position:relative!important;
  z-index:1!important;
  width:min(620px,calc(100vw - 30px))!important;
  max-height:calc(100vh - 40px)!important;
  overflow:auto!important;
  border:1px solid #38516d!important;
  border-radius:16px!important;
  background:#0d1827!important;
  box-shadow:0 25px 80px rgba(0,0,0,.5)!important;
}
.professional-modal-close{
  position:absolute!important;
  z-index:3!important;
  right:12px!important;
  top:10px!important;
  width:34px!important;
  height:34px!important;
  border:1px solid #415870!important;
  border-radius:50%!important;
  background:#091321!important;
  color:#eaf1f8!important;
  font-size:23px!important;
  line-height:1!important;
  cursor:pointer!important;
}
.professional-modal-photo{
  width:100%!important;
  height:240px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  background:#101f32!important;
}
.professional-modal-photo img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
.professional-modal-photo span{
  width:110px!important;
  height:110px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:50%!important;
  background:#173252!important;
  color:#62c4ff!important;
  font-size:50px!important;
  font-weight:800!important;
}
.professional-modal-body{
  padding:24px!important;
}
.professional-modal-body h2{
  margin:0 0 10px!important;
  color:#f4f7fb!important;
  font-size:25px!important;
}
.professional-modal-rating{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  margin-bottom:18px!important;
}
.professional-modal-rating .stars{
  display:flex!important;
  gap:2px!important;
}
.professional-modal-rating .stars span{
  color:#45576b!important;
  font-size:17px!important;
}
.professional-modal-rating .stars span.filled{color:#ffc857!important}
.professional-modal-rating strong{font-size:13px!important}
.professional-modal-rating small{color:#93a5b8!important;font-size:10px!important}
.professional-modal-rating .no-rating{color:#93a5b8!important;font-size:11px!important}
.professional-modal-bio{
  margin:0 0 22px!important;
  padding:15px!important;
  border:1px solid #293d55!important;
  border-radius:10px!important;
  background:#081320!important;
  color:#b8c7d8!important;
  font-size:12px!important;
  line-height:1.6!important;
  white-space:pre-wrap!important;
}
.professional-modal-select{
  width:100%!important;
  min-height:52px!important;
  border:0!important;
  border-radius:8px!important;
  background:#128cff!important;
  color:#fff!important;
  font-size:15px!important;
  font-weight:800!important;
  cursor:pointer!important;
}
.professional-modal-select:hover{background:#239dfb!important}
@media(max-width:700px){
  .booking-top-professional .professionals-carousel .professional-card{
    height:100px!important;
    min-height:100px!important;
    max-height:100px!important;
  }
  .booking-top-professional .professional-avatar{
    width:68px!important;height:68px!important;min-width:68px!important;
  }
  .booking-top-professional .professional-name-only strong{font-size:15px!important}
  .professional-modal-photo{height:190px!important}
  .professional-modal-body{padding:18px!important}
}

/* =========================================================
   v101 — Cada profesional ocupa TODO el ancho visible
   ========================================================= */
.booking-top-professional .professionals-carousel{
  display:flex!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  flex:1 1 auto!important;
  box-sizing:border-box!important;
}
.booking-top-professional .professionals-carousel .professionals{
  display:flex!important;
  flex:1 1 0!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scroll-snap-type:x mandatory!important;
  padding:4px 36px 8px!important;
}
.booking-top-professional .professionals-carousel .professional-card{
  box-sizing:border-box!important;
  flex:0 0 100%!important;
  width:100%!important;
  min-width:100%!important;
  max-width:100%!important;
  margin:0!important;
  scroll-snap-align:start!important;
}
@media(max-width:700px){
  .booking-top-professional .professionals-carousel .professional-card{
    flex:0 0 100%!important;
    width:100%!important;
    min-width:100%!important;
    max-width:100%!important;
  }
}

/* =========================================================
   v102 — Corrección estructural: la tarjeta rellena TODA
   la altura real de la celda Profesional.

   Diagnóstico:
   - booking-top-horizontal tiene min-height:275px;
   - la tarjeta estaba fijada artificialmente a 116px;
   - el contenedor del carrusel no estaba participando como
     elemento flexible en la altura de la celda;
   - por eso quedaba un gran hueco vacío debajo.
   ========================================================= */

/* La celda profesional debe ocupar toda la altura de la fila. */
.booking-top-horizontal > .booking-top-professional{
  align-self:stretch!important;
  min-height:0!important;
  height:100%!important;
  display:flex!important;
  flex-direction:column!important;
  box-sizing:border-box!important;
}

/* El encabezado ocupa solo lo que necesita; el carrusel absorbe
   TODO el espacio vertical restante. */
.booking-top-professional .booking-professionals-heading{
  flex:0 0 auto!important;
  min-height:0!important;
}
.booking-top-professional .professionals-carousel{
  flex:1 1 auto!important;
  min-height:0!important;
  height:auto!important;
  display:flex!important;
  align-items:stretch!important;
  position:relative!important;
}

/* El viewport del carrusel ocupa toda la altura disponible. */
.booking-top-professional .professionals-carousel .professionals{
  flex:1 1 auto!important;
  min-height:0!important;
  height:auto!important;
  align-items:stretch!important;
  display:flex!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
}

/* La tarjeta ya NO tiene una altura fija: rellena el viewport. */
.booking-top-professional .professionals-carousel .professional-card{
  flex:0 0 100%!important;
  width:100%!important;
  min-width:100%!important;
  max-width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  align-self:stretch!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
}

/* Evita que las reglas antiguas de móvil vuelvan a fijar 100/116 px. */
@media(max-width:700px){
  .booking-top-professional .professionals-carousel .professional-card{
    flex:0 0 100%!important;
    width:100%!important;
    min-width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
  }
}

/* =========================================================
   v103 — Mostrar SOLO un profesional por vez
   ========================================================= */

/* El viewport no deja asomar ninguna tarjeta vecina. */
.booking-top-professional .professionals-carousel{
  position:relative!important;
  overflow:hidden!important;
  width:100%!important;
  min-width:0!important;
  flex:1 1 auto!important;
}

/* El contenedor interno es el único que hace scroll horizontal. */
.booking-top-professional .professionals-carousel .professionals{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  padding:4px 0 8px!important;
  margin:0!important;
  box-sizing:border-box!important;
  scroll-snap-type:x mandatory!important;
  scrollbar-width:none!important;
}
.booking-top-professional .professionals-carousel .professionals::-webkit-scrollbar{
  display:none!important;
}

/* Cada tarjeta ocupa exactamente el viewport, sin dejar ver la siguiente. */
.booking-top-professional .professionals-carousel .professional-card{
  flex:0 0 100%!important;
  width:100%!important;
  min-width:100%!important;
  max-width:100%!important;
  margin:0!important;
  box-sizing:border-box!important;
  scroll-snap-align:start!important;
}

/* Las flechas quedan encima de la tarjeta, no consumen espacio. */
.booking-top-professional .professionals-carousel .professionals-arrow{
  position:absolute!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  z-index:20!important;
}
.booking-top-professional .professionals-carousel .professionals-arrow-left{
  left:8px!important;
}
.booking-top-professional .professionals-carousel .professionals-arrow-right{
  right:8px!important;
}

/* Evita que estilos generales del carrusel permitan una "ventana"
   lateral de la tarjeta siguiente. */
@media(max-width:700px){
  .booking-top-professional .professionals-carousel .professionals{
    padding-left:0!important;
    padding-right:0!important;
  }
  .booking-top-professional .professionals-carousel .professional-card{
    flex-basis:100%!important;
    width:100%!important;
    min-width:100%!important;
  }
}

/* =========================================================
   v104 — Flechas fiables tras carga asíncrona
   ========================================================= */
.booking-top-professional .professionals-carousel .professionals-arrow{
  pointer-events:auto!important;
  user-select:none!important;
  -webkit-user-select:none!important;
  z-index:100!important;
}
.booking-top-professional .professionals-carousel .professionals-arrow[hidden]{
  display:none!important;
}
.booking-top-professional .professionals-carousel .professionals{
  position:relative!important;
  z-index:1!important;
}

/* =========================================================
   v105 — Click de tarjeta profesional
   ========================================================= */
.booking-top-professional .professionals-carousel .professional-card{
  position:relative!important;
  z-index:5!important;
  pointer-events:auto!important;
  cursor:pointer!important;
}
.booking-top-professional .professionals-carousel .professional-card *{
  pointer-events:none!important;
}
.booking-top-professional .professionals-carousel .professionals-arrow{
  pointer-events:auto!important;
  z-index:50!important;
}

/* =========================================================
   v107 — Foto del profesional: retrato vertical 9:16
   ========================================================= */

/* En la ventana de información, la foto NO es una cabecera.
   Es un retrato vertical centrado. */
.professional-modal-dialog{
  overflow:hidden!important;
}

.professional-modal-photo{
  width:min(300px, 82%)!important;
  height:auto!important;
  aspect-ratio:9 / 16!important;
  margin:0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:none!important;
  background:#101f32!important;
  overflow:hidden!important;
  border-radius:12px!important;
}

.professional-modal-photo img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  display:block!important;
}

/* La información queda claramente debajo del retrato. */
.professional-modal-body{
  position:relative!important;
  padding:22px 24px 24px!important;
}

@media(max-width:700px){
  .professional-modal-photo{
    width:min(230px, 78%)!important;
    aspect-ratio:9 / 16!important;
  }
}

/* =========================================================
   v108 — Foto del profesional en formato 4:3
   ========================================================= */

/* Sustituye el retrato 9:16 por un formato horizontal 4:3,
   manteniendo la foto contenida y centrada dentro del modal. */
.professional-modal-photo{
  width:min(480px, 88%)!important;
  height:auto!important;
  aspect-ratio:4 / 3!important;
  margin:0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  border-radius:12px!important;
  background:#101f32!important;
}

.professional-modal-photo img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  display:block!important;
}

@media(max-width:700px){
  .professional-modal-photo{
    width:min(360px, 88%)!important;
    aspect-ratio:4 / 3!important;
  }
}

/* =========================================================
   v109 — Foto del profesional en formato vertical 3:4
   ========================================================= */
.professional-modal-photo{
  width:min(390px, 82%)!important;
  height:auto!important;
  aspect-ratio:3 / 4!important;
  margin:0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  border-radius:12px!important;
  background:#101f32!important;
}

.professional-modal-photo img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  display:block!important;
}

@media(max-width:700px){
  .professional-modal-photo{
    width:min(300px, 78%)!important;
    aspect-ratio:3 / 4!important;
  }
}

/* =========================================================
   v110 — Información adicional configurable por servicio
   ========================================================= */
.booking-layout.without-additional-info{
  grid-template-columns:minmax(0,1fr)!important;
}
.booking-layout.without-additional-info .booking-left-column{
  border-right:0!important;
}
.booking-right-column.additional-info-hidden{
  display:none!important;
}

.admin-main .check-field{
  align-items:flex-start!important;
  flex-direction:column!important;
  gap:5px!important;
}
.admin-main .check-field small{
  color:var(--muted)!important;
  font-size:11px!important;
  line-height:1.4!important;
}
.booking-layout.without-additional-info .booking-left-column{
  width:100%!important;
}

/* =========================================================
   v111 — Checkboxes del administrador: diseño compacto
   ========================================================= */

/* Los checks de servicios vuelven a estar junto a su texto. */
.admin-main .check-field{
  display:block!important;
}

.admin-main .check-field label{
  display:inline-flex!important;
  align-items:center!important;
  gap:10px!important;
  min-height:30px!important;
  color:var(--text)!important;
  cursor:pointer!important;
  user-select:none!important;
  font-size:14px!important;
  line-height:1.35!important;
}

/* Checkbox personalizado: pequeño, limpio y consistente con la web. */
.admin-main .check-field input[type="checkbox"]{
  appearance:none!important;
  -webkit-appearance:none!important;
  width:22px!important;
  height:22px!important;
  min-width:22px!important;
  margin:0!important;
  padding:0!important;
  border:1.5px solid #52657d!important;
  border-radius:6px!important;
  background:#0a111c!important;
  display:inline-grid!important;
  place-content:center!important;
  cursor:pointer!important;
  transition:
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    transform .12s ease!important;
  box-sizing:border-box!important;
}

.admin-main .check-field input[type="checkbox"]::before{
  content:""!important;
  width:11px!important;
  height:6px!important;
  border-left:2px solid transparent!important;
  border-bottom:2px solid transparent!important;
  transform:rotate(-45deg) scale(0)!important;
  transform-origin:center!important;
  transition:transform .12s ease!important;
  margin-top:-2px!important;
}

.admin-main .check-field input[type="checkbox"]:checked{
  background:#1688f8!important;
  border-color:#1688f8!important;
  box-shadow:0 0 0 3px rgba(22,136,248,.12)!important;
}

.admin-main .check-field input[type="checkbox"]:checked::before{
  border-left-color:#fff!important;
  border-bottom-color:#fff!important;
  transform:rotate(-45deg) scale(1)!important;
}

.admin-main .check-field input[type="checkbox"]:hover{
  border-color:#36b8f0!important;
  transform:translateY(-1px)!important;
}

.admin-main .check-field input[type="checkbox"]:focus-visible{
  outline:none!important;
  box-shadow:0 0 0 3px rgba(56,189,248,.22)!important;
}

/* Texto explicativo del ajuste de Información adicional. */
.admin-main .check-field small{
  display:block!important;
  margin:4px 0 0 32px!important;
  color:var(--muted)!important;
  font-size:12px!important;
  line-height:1.45!important;
}

/* Separación agradable entre las dos opciones. */
.admin-main .form-row + .form-row .check-field{
  margin-top:2px!important;
}

/* =========================================================
   v112 — Pie de página configurable
   ========================================================= */
.public-footer{
  width:min(1450px,calc(100vw - 48px));
  margin:22px auto 0;
  border:1px solid #25374d;
  border-radius:16px;
  background:linear-gradient(145deg,#101b2a,#0a1420);
  overflow:hidden;
}
.public-footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding:22px 26px;
}
.public-footer-brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:170px;
}
.public-footer-mark{
  width:40px;height:40px;
  display:grid;place-items:center;
  border-radius:10px;
  background:#123c69;
  color:#67c8ff;
  font-size:18px;font-weight:900;
}
.public-footer-brand strong{
  display:block;color:#f1f5fa;font-size:14px;
}
.public-footer-brand small{
  display:block;color:#8496aa;font-size:10px;margin-top:3px;
}
.public-footer-contacts{
  display:flex;
  flex:1 1 auto;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:10px;
}
.public-footer-contact{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:155px;
  padding:9px 11px;
  border:1px solid #263a51;
  border-radius:10px;
  background:#0c1725;
}
.public-footer-contact-icon{
  width:30px;height:30px;min-width:30px;
  display:grid;place-items:center;
  border-radius:8px;
  background:#123c69;
  color:#5ec4ff;
  font-size:14px;
}
.public-footer-contact small{
  display:block;color:#8294a9;font-size:8px;text-transform:uppercase;letter-spacing:.06em;
}
.public-footer-contact a,
.public-footer-contact span{
  display:block;
  color:#e5edf5;
  text-decoration:none;
  font-size:11px;
  margin-top:2px;
  overflow-wrap:anywhere;
}
.public-footer-contact a:hover{color:#5ec4ff}
.footer-admin-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:18px;
}
.footer-admin-item{
  padding:16px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#0d1724;
}
.footer-admin-check{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  cursor:pointer;
  margin-bottom:14px;
}
.footer-admin-check input[type="checkbox"]{
  appearance:none!important;-webkit-appearance:none!important;
  width:22px!important;height:22px!important;min-width:22px!important;
  margin:0!important;
  border:1.5px solid #52657d!important;
  border-radius:6px!important;background:#0a111c!important;
  display:grid!important;place-content:center!important;
}
.footer-admin-check input[type="checkbox"]::before{
  content:""!important;width:11px!important;height:6px!important;
  border-left:2px solid transparent!important;border-bottom:2px solid transparent!important;
  transform:rotate(-45deg) scale(0)!important;
}
.footer-admin-check input[type="checkbox"]:checked{
  background:#1688f8!important;border-color:#1688f8!important;
}
.footer-admin-check input[type="checkbox"]:checked::before{
  border-left-color:#fff!important;border-bottom-color:#fff!important;
  transform:rotate(-45deg) scale(1)!important;
}
.footer-admin-check > span:last-child strong{display:block;font-size:13px}
.footer-admin-check > span:last-child small{display:block;color:var(--muted);font-size:10px;margin-top:3px}
.footer-admin-icon{
  width:32px;height:32px;min-width:32px;display:grid;place-items:center;
  border-radius:8px;background:#123c69;color:#5ec4ff;font-size:14px;
}
.footer-admin-fields{
  display:grid;
  grid-template-columns:130px 1fr;
  gap:8px 10px;
  align-items:center;
}
.footer-admin-fields label{font-size:10px;color:var(--muted)}
.footer-admin-fields input{width:100%;box-sizing:border-box}
@media(max-width:950px){
  .public-footer-inner{align-items:flex-start;flex-direction:column}
  .public-footer-contacts{justify-content:flex-start;width:100%}
}
@media(max-width:700px){
  .footer-admin-list{grid-template-columns:1fr}
  .public-footer{width:calc(100vw - 30px)}
  .public-footer-inner{padding:18px}
  .public-footer-contacts{display:grid;grid-template-columns:1fr;width:100%}
  .public-footer-contact{min-width:0}
}

/* v113 — footer: encabezado limpio, contactos centrados y opciones personalizadas */
.public-footer-inner{
  display:grid!important;
  grid-template-columns:220px minmax(0,1fr)!important;
  align-items:center!important;
  gap:24px!important;
}
.public-footer-brand{
  min-width:0!important;
  justify-content:flex-start!important;
}
.public-footer-brand strong{
  color:#eaf1f8!important;
  font-size:13px!important;
  letter-spacing:.05em!important;
  white-space:nowrap!important;
}
.public-footer-contacts{
  justify-content:center!important;
  align-items:center!important;
  width:100%!important;
  flex-wrap:wrap!important;
  gap:10px!important;
}
.public-footer-contact{
  min-width:155px!important;
  max-width:260px!important;
}
.footer-admin-intro{
  color:var(--muted);
  font-size:12px;
  margin:-6px 0 16px;
}
.footer-admin-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.footer-delete{flex:0 0 auto}
.footer-add-card{margin-top:16px!important}
.footer-add-form{
  display:grid;
  grid-template-columns:1fr 1.5fr auto;
  gap:12px;
  align-items:end;
}
.footer-add-form label{display:block;margin-bottom:7px}
@media(max-width:800px){
  .public-footer-inner{grid-template-columns:1fr!important}
  .public-footer-brand{justify-content:center!important;text-align:center!important}
  .footer-add-form{grid-template-columns:1fr}
}

/* v114 — selector de emojis para opciones de contacto */
.footer-admin-icon-field{
  margin:0 0 12px;
}
.footer-admin-icon-field>label{
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-bottom:7px;
}
.emoji-picker-wrap{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
}
.footer-emoji-input{
  width:72px!important;
  min-width:72px;
  text-align:center;
  font-size:20px!important;
  padding:8px!important;
}
.emoji-picker-btn{
  width:42px;height:42px;
  border:1px solid #2b4058;
  border-radius:9px;
  background:#0b1624;
  color:#fff;
  font-size:21px;
  cursor:pointer;
}
.emoji-picker{
  position:absolute;
  z-index:50;
  left:0;
  top:48px;
  width:290px;
  max-height:210px;
  overflow:auto;
  padding:9px;
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:4px;
  border:1px solid #2d4560;
  border-radius:12px;
  background:#0b1522;
  box-shadow:0 15px 35px rgba(0,0,0,.45);
}
.emoji-picker[hidden]{display:none}
.emoji-choice{
  width:30px;height:30px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#fff;
  font-size:19px;
  cursor:pointer;
}
.emoji-choice:hover{background:#173452}
.footer-admin-icon-field small{
  display:block;
  color:var(--muted);
  font-size:9px;
  margin-top:5px;
}

/* v115 — selector ampliado */
.emoji-picker{
  width:340px!important;
  max-height:300px!important;
  grid-template-columns:repeat(9,1fr)!important;
}
.emoji-choice{
  width:32px!important;
  height:32px!important;
  font-size:20px!important;
}

/* v116 — renderizado correcto de emojis en el pie público */
.public-footer-contact-icon{
  font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif!important;
  font-size:21px!important;
  line-height:1!important;
  font-weight:400!important;
  font-style:normal!important;
  text-rendering:auto!important;
  -webkit-font-smoothing:auto!important;
  display:grid!important;
  place-items:center!important;
}

.footer-emoji-input,
.emoji-picker-btn,
.emoji-choice{
  font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif!important;
  font-weight:400!important;
}

/* v117 — emojis stored as Unicode code points and rendered by the browser */
.footer-emoji-input{font-family:monospace!important;font-size:12px!important}
.public-footer-contact-icon{
  font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif!important;
  width:30px!important;height:30px!important;
  color:#fff!important;
  background:#123c69!important;
  border-radius:8px!important;
}

/* v118 - el administrador ve el emoji real y el pie usa el icono guardado */
.footer-emoji-input{display:none!important}
.footer-emoji-value{display:none!important}
.emoji-picker-btn{
  width:44px!important;height:44px!important;
  display:grid!important;place-items:center!important;
  font-size:24px!important;line-height:1!important;padding:0!important;
  font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif!important;
}
.emoji-picker-wrap{min-height:44px}

/* v120 - logotipos reales de redes sociales */
.brand-choice img{
  width:22px!important;height:22px!important;
  display:block!important;
  object-fit:contain!important;
}
.emoji-picker-btn img{
  width:27px!important;height:27px!important;
  display:block!important;
  object-fit:contain!important;
}
.public-footer-contact-icon img{
  width:22px!important;height:22px!important;
  display:block!important;
  object-fit:contain!important;
}

/* v121 - logotipos sociales locales, sin dependencia externa */
.brand-choice img,.emoji-picker-btn img{width:24px!important;height:24px!important;object-fit:contain!important;display:block!important;}
.public-footer-contact-icon img{width:22px!important;height:22px!important;object-fit:contain!important;display:block!important;filter:brightness(0) invert(1)!important;}

/* v123 - logos sociales como SVG inline, sin img/data-uri */
.public-footer-contact-icon svg{
  width:23px!important;
  height:23px!important;
  display:block!important;
  fill:currentColor!important;
  color:#fff!important;
}
.public-footer-contact-icon img{display:none!important}

/* v124 - pie de página sin iconos ni emojis */
.footer-admin-icon-field,.emoji-picker,.emoji-picker-btn,
.footer-emoji-input,.footer-emoji-value,.public-footer-contact-icon{
  display:none!important;
}
.public-footer-contact-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* v125 - botón Eliminar de opciones personalizadas compacto */
.footer-admin-top > form{
  margin:0!important;
  width:auto!important;
  flex:0 0 auto!important;
}
.footer-admin-top .footer-delete{
  width:auto!important;
  min-width:90px!important;
  max-width:110px!important;
  height:38px!important;
  padding:7px 18px!important;
  flex:0 0 auto!important;
  white-space:nowrap!important;
}

/* v126 — opciones de contacto: sin emojis y checks iguales a Servicios */
.footer-admin-icon,
.footer-admin-icon-field,
.emoji-picker,
.emoji-picker-btn,
.footer-emoji-input,
.footer-emoji-value{
  display:none!important;
}
.footer-admin-check{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
}
.footer-admin-check input[type="checkbox"]{
  appearance:none!important;
  -webkit-appearance:none!important;
  width:22px!important;
  height:22px!important;
  min-width:22px!important;
  margin:0!important;
  padding:0!important;
  border:1.5px solid #52657d!important;
  border-radius:6px!important;
  background:#0a111c!important;
  display:inline-grid!important;
  place-content:center!important;
  cursor:pointer!important;
  box-sizing:border-box!important;
  transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .12s ease!important;
}
.footer-admin-check input[type="checkbox"]::before{
  content:""!important;
  width:11px!important;
  height:6px!important;
  border-left:2px solid transparent!important;
  border-bottom:2px solid transparent!important;
  transform:rotate(-45deg) scale(0)!important;
  transform-origin:center!important;
  transition:transform .12s ease!important;
  margin-top:-2px!important;
}
.footer-admin-check input[type="checkbox"]:checked{
  background:#1688f8!important;
  border-color:#1688f8!important;
  box-shadow:0 0 0 3px rgba(22,136,248,.12)!important;
}
.footer-admin-check input[type="checkbox"]:checked::before{
  border-left-color:#fff!important;
  border-bottom-color:#fff!important;
  transform:rotate(-45deg) scale(1)!important;
}

/* =========================================================
   v127 — Sistema visual general del panel de administración
   Basado en el estilo de "Enlaces de Contacto".
   Solo afecta a .admin-page para no tocar la web pública.
   ========================================================= */

.admin-page{
  background:
    radial-gradient(circle at 75% -10%, rgba(22,136,248,.055), transparent 34%),
    #070c13!important;
  color:#f8fafc;
}

.admin-page .admin-top{
  height:76px!important;
  padding:0 32px!important;
  background:rgba(7,12,19,.96)!important;
  border-bottom:1px solid #1d2d42!important;
  box-shadow:0 8px 28px rgba(0,0,0,.18);
}

.admin-page .admin-top .brand{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  font-size:19px!important;
  font-weight:800!important;
  letter-spacing:.2px;
}

.admin-page .admin-top .mark{
  width:40px!important;
  height:40px!important;
  border-radius:10px!important;
  display:grid!important;
  place-items:center!important;
  background:#123f70!important;
  color:#39a8ff!important;
  border:1px solid #1e6eb0!important;
  font-size:21px!important;
  font-weight:900!important;
}

.admin-page .admin-user{
  gap:14px!important;
  font-size:13px!important;
}
.admin-page .admin-user a{
  color:#cbd5e1!important;
  padding:9px 14px!important;
  border:1px solid #26384f!important;
  border-radius:8px!important;
  transition:.16s ease;
}
.admin-page .admin-user a:hover{
  color:#fff!important;
  background:#12243a!important;
  border-color:#2d5d8c!important;
}

.admin-page .admin-wrap{
  max-width:1500px!important;
  padding:24px 28px 70px!important;
  grid-template-columns:285px minmax(0,1fr)!important;
  gap:28px!important;
}

.admin-page .sidebar{
  background:#0b121c!important;
  border:1px solid #203249!important;
  border-radius:15px!important;
  padding:12px!important;
  box-shadow:0 18px 50px rgba(0,0,0,.20);
  top:96px!important;
}

.admin-page .sidebar a{
  display:flex!important;
  align-items:center!important;
  min-height:44px!important;
  padding:11px 14px!important;
  margin:3px 0!important;
  border-radius:9px!important;
  color:#aebbd0!important;
  font-size:14px!important;
  font-weight:500!important;
  transition:background .16s ease,color .16s ease,transform .16s ease!important;
}

.admin-page .sidebar a:hover{
  background:#102035!important;
  color:#f8fafc!important;
  transform:translateX(1px);
}

.admin-page .sidebar a.active{
  background:linear-gradient(90deg,#123f70,#15395e)!important;
  color:#fff!important;
  border:1px solid #1b568b!important;
  box-shadow:inset 3px 0 0 #2196f3,0 6px 20px rgba(20,110,190,.10);
  font-weight:700!important;
}

.admin-page .page-head{
  margin:0 0 26px!important;
  align-items:flex-end!important;
}
.admin-page .page-head h1{
  font-size:38px!important;
  line-height:1.08!important;
  letter-spacing:-.5px;
  margin:4px 0 8px!important;
  color:#f8fafc!important;
}
.admin-page .page-head p{
  color:#91a4bd!important;
  font-size:16px!important;
  max-width:780px!important;
}

.admin-page .content-card,
.admin-page .metric,
.admin-page .reservation-list,
.admin-page .professional-reservations,
.admin-page .professional-reservations-section > *,
.admin-page .panel,
.admin-page .card,
.admin-page .form-card{
  background:#0c1520!important;
  border:1px solid #203249!important;
  border-radius:14px!important;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
}

.admin-page .content-card{
  padding:24px!important;
}

.admin-page .metrics{
  gap:14px!important;
}
.admin-page .metric{
  padding:20px!important;
}
.admin-page .metric:hover{
  border-color:#2b4865!important;
}

.admin-page h2,
.admin-page h3{
  color:#f8fafc;
}

.admin-page label{
  color:#b9c7da;
}

.admin-page input:not([type="checkbox"]):not([type="radio"]),
.admin-page select,
.admin-page textarea{
  background:#080f19!important;
  border:1px solid #263b54!important;
  color:#f8fafc!important;
  border-radius:9px!important;
  min-height:42px;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease!important;
}

.admin-page textarea{
  min-height:110px;
}

.admin-page input:not([type="checkbox"]):not([type="radio"]):focus,
.admin-page select:focus,
.admin-page textarea:focus{
  outline:none!important;
  border-color:#258eea!important;
  box-shadow:0 0 0 3px rgba(37,142,234,.12)!important;
  background:#0a1320!important;
}

.admin-page button,
.admin-page .btn{
  border-radius:9px!important;
  font-weight:700!important;
  transition:transform .14s ease,box-shadow .14s ease,filter .14s ease!important;
}
.admin-page button:hover,
.admin-page .btn:hover{
  transform:translateY(-1px);
}

.admin-page .btn-primary,
.admin-page button[type="submit"]:not(.btn-small){
  background:linear-gradient(135deg,#1688f8,#2a9df3)!important;
  color:#fff!important;
  border:1px solid #2ca2ff!important;
  box-shadow:0 8px 24px rgba(20,130,240,.14);
}

.admin-page .btn-small{
  border:1px solid #263b54!important;
  background:#0b1521!important;
  color:#dbe7f5!important;
  border-radius:8px!important;
  padding:8px 12px!important;
}
.admin-page .btn-small:hover{
  background:#122236!important;
  border-color:#386084!important;
}
.admin-page .btn-small.danger{
  color:#ff7b7b!important;
  border-color:#713b46!important;
  background:#170f14!important;
}

.admin-page .notice{
  background:#0c3155!important;
  border:1px solid #165b91!important;
  color:#a9d8ff!important;
  border-radius:9px!important;
}

.admin-page .table-wrap{
  border:1px solid #203249!important;
  border-radius:12px!important;
  overflow:auto!important;
  background:#0b141f!important;
}
.admin-page table{
  background:transparent!important;
}
.admin-page th{
  background:#0d1926!important;
  color:#91a4bd!important;
  font-size:12px!important;
  text-transform:uppercase;
  letter-spacing:.35px;
  padding:14px 12px!important;
}
.admin-page td{
  color:#dce6f3!important;
  padding:14px 12px!important;
  border-bottom:1px solid #1c2c40!important;
}
.admin-page tbody tr:hover td{
  background:#0f1b29!important;
}

.admin-page .modal-box{
  background:#0c1520!important;
  border:1px solid #2a415c!important;
  border-radius:14px!important;
  box-shadow:0 28px 90px rgba(0,0,0,.60)!important;
}

.admin-page .schedule-day,
.admin-page .professional-hour-row{
  border-color:#203249!important;
}

.admin-page .range{
  background:#0b1521!important;
  border-color:#263b54!important;
}

.admin-page .day{
  background:#0b141f!important;
  border-color:#1d2d42!important;
}
.admin-page .weekdays>div{
  background:#0d1926!important;
  color:#91a4bd!important;
}

.admin-page .reservation-item,
.admin-page .professional-reservation-item{
  background:#0c1520!important;
  border-color:#203249!important;
  transition:background .16s ease;
}
.admin-page .reservation-item:hover,
.admin-page .professional-reservation-item:hover{
  background:#0f1b29!important;
}

/* Cards de gestión: el mismo lenguaje visual que Enlaces de Contacto. */
.admin-page .footer-admin-check,
.admin-page .professional-card,
.admin-page .service-card,
.admin-page .absence-card,
.admin-page .block-card,
.admin-page .schedule-card{
  background:#0c1520!important;
  border:1px solid #203249!important;
  border-radius:14px!important;
  box-shadow:0 8px 26px rgba(0,0,0,.10);
}

/* Separadores suaves en formularios */
.admin-page .form-row,
.admin-page .form-grid > *{
  border-color:#203249;
}

/* Responsive: mantener el sistema visual sin romper la navegación existente. */
@media(max-width:900px){
  .admin-page .admin-wrap{
    grid-template-columns:1fr!important;
    gap:16px!important;
    padding:18px!important;
  }
  .admin-page .sidebar{
    position:static!important;
    top:auto!important;
  }
  .admin-page .page-head h1{
    font-size:34px!important;
  }
}
@media(max-width:600px){
  .admin-page .admin-top{
    padding:0 16px!important;
  }
  .admin-page .admin-user span{
    display:none!important;
  }
  .admin-page .admin-wrap{
    padding:14px!important;
  }
  .admin-page .content-card{
    padding:16px!important;
  }
}

/* v128 — tipografía de administración más legible */
.admin-page{
  font-size:14px!important;
}
.admin-page .sidebar a{
  font-size:14px!important;
}
.admin-page .page-head p{
  font-size:16px!important;
}
.admin-page label,
.admin-page .muted,
.admin-page small{
  font-size:13px!important;
}
.admin-page .footer-admin-fields label,
.admin-page .footer-admin-fields .hint{
  font-size:13px!important;
}
.admin-page .footer-admin-card strong{
  font-size:17px!important;
}
.admin-page .footer-admin-card small{
  font-size:13px!important;
}
.admin-page .footer-admin-card{
  font-size:14px!important;
}
.admin-page th,
.admin-page td{
  font-size:13px!important;
}
.admin-page .btn-small{
  font-size:13px!important;
}
.admin-page input:not([type="checkbox"]):not([type="radio"]),
.admin-page select,
.admin-page textarea{
  font-size:14px!important;
}

/* v130 — segunda mejora de legibilidad en administración */
.admin-page .footer-admin-intro{
  font-size:15px!important;
  line-height:1.5!important;
  color:#aebed2!important;
}

.admin-page .footer-admin-check{
  font-size:16px!important;
}

.admin-page .footer-admin-check strong{
  font-size:16px!important;
}

.admin-page .footer-admin-fields{
  gap:10px 18px!important;
}

.admin-page .footer-admin-fields > label{
  font-size:14px!important;
  line-height:1.4!important;
  color:#c4d0df!important;
  font-weight:600!important;
}

.admin-page .footer-admin-fields > input{
  font-size:15px!important;
  min-height:48px!important;
}

.admin-page .footer-admin-fields > input::placeholder{
  font-size:14px!important;
  opacity:.75!important;
}

.admin-page .footer-admin-item{
  font-size:14px!important;
}

.admin-page .footer-admin-item + .footer-admin-item{
  margin-top:14px!important;
}

/* Mantener proporción en el resto de formularios del administrador. */
.admin-page .form-card label,
.admin-page .content-card > form label{
  font-size:14px!important;
}

.admin-page .content-card > form input:not([type="checkbox"]):not([type="radio"]),
.admin-page .content-card > form select,
.admin-page .content-card > form textarea{
  font-size:15px!important;
}

/* v132 — eliminación definitiva de reservas */
.admin-page .delete-reservation-form{
  margin:0!important;
  display:inline-flex!important;
}
.admin-page .delete-reservation{
  color:#ff7b7b!important;
  border-color:#713b46!important;
  background:#170f14!important;
  white-space:nowrap!important;
}
.admin-page .delete-reservation:hover{
  color:#fff!important;
  background:#6b2533!important;
  border-color:#a84758!important;
}
.admin-page .notice.danger{
  background:#2a1118!important;
  border-color:#7b3141!important;
  color:#ffb8c1!important;
}

/* v133 — horarios integrados en Profesionales */
.admin-page .professional-schedules-section{
  margin-top:0!important;
}
.admin-page .professional-schedule-list{
  display:grid;
  gap:12px;
  margin-top:18px;
}
.admin-page .professional-schedule-card{
  background:#0c1520!important;
  border:1px solid #203249!important;
  border-radius:12px!important;
  overflow:hidden;
}
.admin-page .professional-schedule-card summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px;
}
.admin-page .professional-schedule-card summary::-webkit-details-marker{display:none}
.admin-page .professional-schedule-card summary:after{
  content:'+'; font-size:22px; color:#7f93ab; line-height:1;
}
.admin-page .professional-schedule-card[open] summary:after{content:'−'}
.admin-page .professional-schedule-card summary span:first-child{
  display:flex; flex-direction:column; gap:3px;
}
.admin-page .professional-schedule-card summary strong{
  font-size:16px!important; color:#f8fafc;
}
.admin-page .professional-schedule-card summary small{
  font-size:13px!important; color:#91a4bd;
}
.admin-page .professional-schedule-form{
  padding:0 18px 18px;
  border-top:1px solid #203249;
}
.admin-page .professional-schedule-form .simple-hours-grid{
  margin-top:16px;
}
.admin-page .schedule-form-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:16px;
}

/* v135 — subida y previsualización de fotos de profesionales */
.professional-photo-panel .selected-photo-name{
  margin-top:8px;
  color:#8fa5bd;
  font-size:13px;
  max-width:320px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.admin-profile-photo-form{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:6px;
}
.admin-profile-photo-form input[type=file]{
  position:absolute;
  width:1px;height:1px;opacity:0;pointer-events:none;
}
.admin-profile-thumb{
  width:48px;height:48px;object-fit:cover;border-radius:8px;
  border:1px solid #2b4865;display:block;margin-bottom:5px;
}
.admin-profile-thumb-placeholder{
  width:48px;height:48px;border-radius:8px;border:1px dashed #2b4865;
  display:flex;align-items:center;justify-content:center;color:#7f93ab;margin-bottom:5px;
}

/* v136: subida automática de foto del profesional */
.professional-photo-form.is-uploading .photo-upload-button{
  opacity:.65;
  pointer-events:none;
}
.professional-photo-form.is-uploading .photo-upload-button::after{
  content:'  Subiendo…';
}

/* v139 — foto gestionada desde Profesionales */
.admin-page .professional-photo-cell{min-width:190px;vertical-align:middle}
.admin-page .professional-photo-cell .admin-profile-thumb{
  width:48px;height:48px;object-fit:cover;border-radius:8px;display:block;margin-bottom:7px
}
.admin-page .professional-photo-cell .admin-profile-thumb-placeholder{
  display:block;width:48px;height:48px;line-height:48px;text-align:center;
  border:1px solid #203249;border-radius:8px;margin-bottom:7px;color:#6f8299
}
.admin-page .admin-profile-photo-form input[type=file]{display:none}

.professional-photo-preview img{width:100%;height:100%;display:block;object-fit:cover;border-radius:inherit;}

.permission-notice{border:1px solid #29405b;background:#0d1725;padding:22px 24px;margin-bottom:20px}.permission-notice h3{margin:0 0 8px}.permission-notice p{margin:0;color:#9fb0c4;line-height:1.5}

.profile-readonly .professional-photo-form small{display:block}
.profile-readonly input[readonly],
.profile-readonly textarea[readonly]{
  opacity:.82;
  cursor:default;
}
.profile-readonly .check-field{
  opacity:.82;
}
.photo-upload-disabled{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:0 16px;
  border:1px solid #29405b;
  border-radius:8px;
  color:#8fa1b5;
  background:#0a111c;
  font-size:14px;
}

.admin-inline-edit{margin-bottom:8px}
.admin-inline-edit summary{cursor:pointer;list-style:none;text-align:center}
.admin-inline-edit summary::-webkit-details-marker{display:none}
.admin-prof-edit-form,.admin-service-profile-edit-form{display:grid;gap:8px;min-width:240px;padding:14px;margin-top:8px;border:1px solid #29405b;border-radius:10px;background:#0b1420;text-align:left}
.admin-prof-edit-form label,.admin-service-profile-edit-form label{font-size:12px;color:#9fb0c4}
.admin-prof-edit-form input,.admin-service-profile-edit-form input,.admin-service-profile-edit-form textarea{width:100%;box-sizing:border-box}
.admin-service-profile-edit-form{min-width:280px}

/* v147 — editor de profesionales compacto y contenido dentro de la tabla */
.professional-actions{
  min-width:0;
  width:100%;
  max-width:100%;
  overflow:visible;
  position:relative;
  box-sizing:border-box;
  white-space:normal;
}
.professional-actions .admin-inline-edit{
  width:100%;
  max-width:100%;
  overflow:visible;
  position:relative;
  box-sizing:border-box;
}
.professional-actions .admin-inline-edit[open]{z-index:20}
.professional-actions .admin-prof-edit-form{
  width:100%;
  max-width:230px;
  min-width:0;
  box-sizing:border-box;
  margin:6px 0 0 auto;
  padding:10px;
  gap:6px;
  overflow:visible;
}
.professional-actions .admin-prof-edit-form input{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}
.professional-actions .admin-prof-edit-form label{
  font-size:11px;
  line-height:1.2;
}
.professional-actions .admin-prof-edit-form .check-field{
  white-space:normal;
  line-height:1.25;
}
.professional-actions .admin-inline-edit summary{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  text-align:center;
}
.professional-actions form{max-width:100%}
.professional-actions .btn-small{max-width:100%;box-sizing:border-box}
.table-wrap{overflow-x:auto;overflow-y:visible}

/* La tabla principal de profesionales siempre cabe en el ancho disponible. */
.professionals-main-table table{
  width:100%;
  min-width:0;
  table-layout:fixed;
}
.professionals-main-table th,
.professionals-main-table td{
  box-sizing:border-box;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* v148 — permisos gestionados desde Editar datos */
.professionals-main-table th:nth-child(1),
.professionals-main-table td:nth-child(1){width:18%}
.professionals-main-table th:nth-child(2),
.professionals-main-table td:nth-child(2){width:18%}
.professionals-main-table th:nth-child(3),
.professionals-main-table td:nth-child(3){width:12%}
.professionals-main-table th:nth-child(4),
.professionals-main-table td:nth-child(4){width:10%}
.professionals-main-table th:nth-child(5),
.professionals-main-table td:nth-child(5){width:42%}
.professionals-main-table .professional-actions{gap:6px}
.professionals-main-table .admin-prof-edit-form{max-width:230px}

/* v154 — subida automática de foto desde el panel de administración */
.admin-profile-photo-form.is-uploading .admin-photo-picker{
  opacity:.65;
  pointer-events:none;
}

/* v155 — mantener la posición tras acciones del administrador */
.professionals-main-table tr[id^="profesional-"]{
  scroll-margin-top:90px;
}
.professionals-main-table tr:target{
  outline:1px solid rgba(38,153,255,.35);
  outline-offset:-1px;
}

/* Estado visual exclusivo del botón activar/desactivar de Profesionales. */
.admin-actions .professional-toggle.professional-activate,
.professional-toggle.professional-activate {
  color: #4ade80 !important;
  border-color: #22c55e88 !important;
  background: #22c55e10 !important;
}
.admin-actions .professional-toggle.professional-deactivate,
.professional-toggle.professional-deactivate {
  color: #fb7185 !important;
  border-color: #fb718588 !important;
  background: #fb718510 !important;
}

/* Toggle de estado de profesionales. El color del estado ya se muestra en
   la columna ESTADO; el control solo permite cambiarlo. */
.professional-status-form{
  margin:0;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
.professional-switch{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  padding:4px 0;
  margin:0;
  display:inline-flex;
  align-items:center;
  gap:9px;
  cursor:pointer;
  color:#aebdd0;
  font:inherit;
}
.professional-switch:disabled{
  opacity:.65;
  cursor:wait;
}
.professional-switch-track{
  position:relative;
  display:block;
  width:42px;
  height:24px;
  border-radius:999px;
  border:1px solid #40536a;
  background:#1b2635;
  box-sizing:border-box;
  transition:background .18s ease,border-color .18s ease;
}
.professional-switch-thumb{
  position:absolute;
  top:3px;
  left:3px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#dbe5ef;
  box-shadow:0 1px 3px rgba(0,0,0,.35);
  transition:transform .18s ease,background .18s ease;
}
.professional-switch.is-on .professional-switch-track{
  background:#16a36a;
  border-color:#20c985;
}
.professional-switch.is-on .professional-switch-thumb{
  transform:translateX(18px);
  background:#fff;
}
.professional-switch.is-on .professional-switch-label{
  color:#4ade80;
}
.professional-switch.is-off .professional-switch-track{
  background:#3a1b23;
  border-color:#8f3d4c;
}
.professional-switch.is-off .professional-switch-thumb{
  background:#f2c8cf;
}
.professional-switch.is-off .professional-switch-label{
  color:#fb7185;
}
.professional-switch:hover .professional-switch-track{
  filter:brightness(1.12);
}

.admin-inline-edit .password-help{
  display:block;
  margin:5px 0 10px;
  font-size:12px;
  line-height:1.35;
  color:#8fa3ba;
}

/* Buscador de profesionales */
.professionals-search{
  margin:0 0 18px;
  padding:14px 16px;
  border:1px solid #263b53;
  border-radius:10px;
  background:#0d1725;
}
.professionals-search label{
  display:block;
  margin-bottom:7px;
  font-size:14px;
  font-weight:600;
  color:#c7d5e6;
}
.professionals-search-row{
  display:flex;
  align-items:center;
  gap:8px;
}
.professionals-search-row input{
  flex:1;
  min-width:0;
  box-sizing:border-box;
}
.professional-search-count{
  display:block;
  margin-top:7px;
  color:#8fa3ba;
  font-size:12px;
}
.professionals-main-table tbody tr[hidden]{
  display:none;
}
@media (max-width:700px){
  .professionals-search-row{
    flex-wrap:wrap;
  }
  .professionals-search-row input{
    width:100%;
    flex-basis:100%;
  }
}

.professional-schedules-search{
  margin:0 0 18px;
  padding:14px 16px;
  border:1px solid #263b53;
  border-radius:10px;
  background:#0d1725;
}
.professional-schedules-search label{
  display:block;
  margin-bottom:7px;
  font-size:14px;
  font-weight:600;
  color:#c7d5e6;
}
.professional-schedules-search-row{
  display:flex;
  align-items:center;
  gap:8px;
}
.professional-schedules-search-row input{
  flex:1;
  min-width:0;
  box-sizing:border-box;
}
.professional-schedule-list .professional-schedule-card[hidden]{
  display:none;
}
@media (max-width:700px){
  .professional-schedules-search-row{
    flex-wrap:wrap;
  }
  .professional-schedules-search-row input{
    width:100%;
    flex-basis:100%;
  }
}

/* Botón Limpiar de los buscadores: tamaño compacto, no ocupa el campo. */
.professionals-search-row #professional-search-clear,
.professional-schedules-search-row #professional-schedule-search-clear{
  flex:0 0 auto;
  width:auto;
  min-width:0;
  height:38px;
  padding:0 14px;
  white-space:nowrap;
}