*{box-sizing:border-box;margin:0;padding:0}
:root{--blue:#0057FF;--blue-dark:#0048D4;--cream:#F8F7F4;--white:#fff;--ink:#131417;--muted:#74777D;--line:rgba(19,20,23,.10);--soft:#F2F1ED;--blue-soft:#EAF1FF;--green:#2B8A57;--green-soft:#E8F6EE;--yellow:#9B731C;--yellow-soft:#FFF3D8;--red:#B84C4C;--red-soft:#FDEAEA}
body{font-family:"DM Sans",sans-serif;background:var(--cream);color:var(--ink);min-height:100vh}
button,input,select{font:inherit}button{color:inherit}
.app-layout{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.sidebar{background:#111214;color:white;padding:18px 14px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.sidebar-top{display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:white;font-family:"Manrope",sans-serif;font-weight:800}.brand-mark{width:38px;height:38px;border-radius:12px;background:var(--blue);display:grid;place-items:center}.brand-text{font-size:18px}.sidebar-close{display:none;background:transparent;border:0;color:white;font-size:24px}
.business-mini{display:grid;grid-template-columns:40px 1fr;gap:10px;align-items:center;padding:16px 10px;margin:22px 0 14px;background:rgba(255,255,255,.06);border-radius:14px}.business-avatar{width:40px;height:40px;border-radius:12px;background:white;color:#111214;display:grid;place-items:center;font-size:10px;font-weight:800}.business-mini strong,.business-mini small{display:block}.business-mini strong{font-size:11px}.business-mini small{font-size:8px;color:rgba(255,255,255,.55);margin-top:3px}
.nav-menu{display:grid;gap:5px}.nav-item{width:100%;border:0;background:transparent;color:rgba(255,255,255,.65);display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:11px;cursor:pointer;text-align:left;font-size:11px;font-weight:700}.nav-item:hover,.nav-item.active{background:rgba(255,255,255,.09);color:white}.nav-item span{width:18px;text-align:center}
.sidebar-footer{margin-top:auto}.plan-card{padding:14px;border-radius:14px;background:rgba(0,87,255,.18);border:1px solid rgba(126,168,255,.2)}.plan-card span,.plan-card strong,.plan-card small{display:block}.plan-card span{font-size:7px;color:#8DB3FF;font-weight:800;letter-spacing:1px}.plan-card strong{font-size:10px;margin:6px 0}.plan-card small{font-size:8px;line-height:1.5;color:rgba(255,255,255,.55)}
.main-panel{min-width:0}.topbar{height:90px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(248,247,244,.9);position:sticky;top:0;z-index:30;backdrop-filter:blur(18px)}.topbar-left{display:flex;gap:13px;align-items:center}.page-kicker{display:block;color:var(--blue);font-size:8px;letter-spacing:1.3px;font-weight:800;margin-bottom:4px}.topbar h1{font-family:"Manrope",sans-serif;font-size:23px;letter-spacing:-.8px}.menu-toggle{display:none;width:38px;height:38px;border:1px solid var(--line);background:white;border-radius:10px}.topbar-actions{display:flex;align-items:center;gap:9px}.profile-chip{width:38px;height:38px;border-radius:12px;background:#DCE8FF;color:var(--blue);display:grid;place-items:center;font-size:9px;font-weight:800}
.primary-btn,.secondary-btn,.ghost-btn{border-radius:11px;cursor:pointer;font-weight:700}.primary-btn{border:0;background:var(--blue);color:white;padding:11px 14px;font-size:10px;box-shadow:0 8px 18px rgba(0,87,255,.16)}.secondary-btn{border:1px solid var(--line);background:white;padding:10px 13px;font-size:10px}.ghost-btn{border:0;background:var(--soft);padding:9px 11px;font-size:9px;color:#595C61}
.content{padding:28px}.page{display:none}.page.active{display:block;animation:fade .2s ease}@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}.stat-card,.panel{background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:18px}.stat-card{padding:18px}.stat-card span,.stat-card strong,.stat-card small{display:block}.stat-card span{font-size:9px;color:var(--muted);margin-bottom:9px}.stat-card strong{font-family:"Manrope",sans-serif;font-size:27px;letter-spacing:-1px}.stat-card small{font-size:8px;color:#999B9F;margin-top:4px}
.panel-grid{display:grid;grid-template-columns:1.45fr .55fr;gap:14px}.panel{padding:18px}.panel-header{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:16px}.panel-header.wrap{flex-wrap:wrap}.section-label{display:block;font-size:7px;color:var(--blue);letter-spacing:1.2px;font-weight:800;margin-bottom:4px}.panel-header h2{font-family:"Manrope",sans-serif;font-size:17px;letter-spacing:-.5px}
.agenda-list{display:grid}.agenda-row{display:grid;grid-template-columns:65px 1fr auto;gap:12px;align-items:center;min-height:66px;border-top:1px solid var(--line)}.agenda-row:first-child{border-top:0}.agenda-time{font-size:10px;font-weight:800}.agenda-main strong,.agenda-main small{display:block}.agenda-main strong{font-size:11px}.agenda-main small{font-size:8px;color:var(--muted);margin-top:3px}.status{padding:6px 8px;border-radius:100px;font-size:7px;font-weight:800}.status.confirmada{background:var(--green-soft);color:var(--green)}.status.pendiente{background:var(--yellow-soft);color:var(--yellow)}.status.cancelada{background:var(--red-soft);color:var(--red)}.status.libre{background:var(--blue-soft);color:var(--blue)}
.upcoming-list{display:grid;gap:9px}.upcoming-item{display:grid;grid-template-columns:48px 1fr;gap:10px;align-items:center;padding:10px;background:#F8F8F6;border-radius:12px}.time-pill{width:48px;height:38px;border-radius:10px;background:white;border:1px solid var(--line);display:grid;place-items:center;font-size:9px;font-weight:800}.upcoming-item strong,.upcoming-item small{display:block}.upcoming-item strong{font-size:10px}.upcoming-item small{font-size:8px;color:var(--muted);margin-top:2px}
.filter-row{display:flex;gap:8px}.search-input,.select-input,.modal-form input,.modal-form select,.settings-form input,.client-search-row input{height:40px;border:1px solid var(--line);background:white;border-radius:10px;padding:0 11px;outline:none;font-size:10px}.search-input:focus,.select-input:focus,.modal-form input:focus,.modal-form select:focus,.settings-form input:focus,.client-search-row input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,87,255,.07)}
.table-wrap{overflow:auto}.data-table{width:100%;border-collapse:collapse;min-width:820px}.data-table th,.data-table td{text-align:left;padding:11px 9px;border-top:1px solid var(--line);font-size:9px}.data-table th{color:var(--muted);font-size:8px;font-weight:700}.data-table td strong{font-size:9px}
.client-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.client-card{background:white;border:1px solid var(--line);border-radius:15px;padding:14px}.client-card-top{display:grid;grid-template-columns:42px 1fr auto;gap:10px;align-items:center}.client-avatar{width:42px;height:42px;border-radius:13px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;font-size:10px;font-weight:800}.client-card strong,.client-card small{display:block}.client-card strong{font-size:10px}.client-card small{font-size:8px;color:var(--muted);margin-top:2px}.client-notes{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:8px;color:var(--muted);line-height:1.45}.client-actions{display:flex;gap:5px}.client-action{width:30px;height:30px;border:1px solid var(--line);background:white;border-radius:9px;cursor:pointer}
.service-admin-list{display:grid;gap:10px}.service-admin-row{display:grid;grid-template-columns:42px 1fr 105px 110px 110px auto;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:14px;background:white}.service-icon{width:42px;height:42px;border-radius:12px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;font-size:14px}.service-admin-row strong,.service-admin-row small{display:block}.service-admin-row strong{font-size:10px}.service-admin-row small{font-size:8px;color:var(--muted);margin-top:3px}.service-meta{font-size:8px;color:var(--muted)}.price-mode{font-size:8px;font-weight:700}.row-actions{display:flex;gap:5px}.icon-btn{width:31px;height:31px;border:1px solid var(--line);background:white;border-radius:9px;cursor:pointer;font-size:10px}
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.professional-admin-card{background:white;border:1px solid var(--line);border-radius:18px;padding:18px}.professional-avatar{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:#DCE8FF;color:var(--blue);font-weight:800;margin-bottom:14px}.professional-admin-card h3{font-family:"Manrope",sans-serif;font-size:15px}.professional-admin-card p{font-size:9px;color:var(--muted);margin:5px 0 14px}.professional-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}.professional-stats div{background:#F8F8F6;border-radius:11px;padding:10px}.professional-stats span,.professional-stats strong{display:block}.professional-stats span{font-size:7px;color:var(--muted)}.professional-stats strong{font-size:12px;margin-top:3px}
.schedule-admin{display:grid;gap:9px}.schedule-day{display:grid;grid-template-columns:100px 1fr 1fr auto;gap:10px;align-items:center;padding:11px;border-top:1px solid var(--line)}.schedule-day:first-child{border-top:0}.schedule-day strong{font-size:10px}.schedule-day input[type=time]{height:36px;border:1px solid var(--line);border-radius:9px;padding:0 8px;font-size:9px}.schedule-day input[type=checkbox],.switch-row input[type=checkbox]{width:38px;height:20px;accent-color:var(--blue)}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.settings-form{display:grid;gap:13px}.settings-form label,.modal-form label{display:grid;gap:6px;font-size:9px;font-weight:700}.settings-form .primary-btn{justify-self:start}.setting-list{display:grid}.switch-row{display:flex!important;align-items:center;justify-content:space-between;gap:18px;padding:13px 0;border-top:1px solid var(--line)}.switch-row:first-child{border-top:0}.switch-row strong,.switch-row small{display:block}.switch-row strong{font-size:10px}.switch-row small{font-size:8px;color:var(--muted);margin-top:3px;line-height:1.4}.switch-row.compact{background:#F8F8F6;padding:12px;border-radius:12px;border:0!important}
.modal-backdrop{position:fixed;inset:0;background:rgba(17,18,20,.48);display:none;align-items:center;justify-content:center;padding:20px;z-index:100}.modal-backdrop.open{display:flex}.modal{width:min(520px,100%);background:var(--cream);border-radius:22px;padding:20px;box-shadow:0 30px 80px rgba(0,0,0,.2)}.appointment-modal{width:min(620px,100%)}.modal-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px}.modal-header h2{font-family:"Manrope",sans-serif;font-size:20px}.modal-close{width:34px;height:34px;border:1px solid var(--line);background:white;border-radius:10px;font-size:18px;cursor:pointer}.modal-form{display:grid;gap:13px}.form-split{display:grid;grid-template-columns:1fr 1fr;gap:10px}.primary-btn.full{width:100%;min-height:45px}
.client-selector{margin-bottom:18px}.selector-label{display:block;font-size:9px;font-weight:700;margin-bottom:7px}.client-search-row{display:grid;grid-template-columns:1fr auto;gap:8px}.client-search-results{display:none;margin-top:8px;border:1px solid var(--line);background:white;border-radius:12px;overflow:hidden;max-height:190px;overflow-y:auto}.client-search-results.open{display:block}.client-result{width:100%;border:0;background:white;padding:10px 11px;display:grid;grid-template-columns:36px 1fr;gap:9px;align-items:center;text-align:left;cursor:pointer;border-top:1px solid var(--line)}.client-result:first-child{border-top:0}.client-result:hover{background:#F8F8F6}.client-result span{width:36px;height:36px;border-radius:10px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;font-size:8px;font-weight:800}.client-result strong,.client-result small{display:block}.client-result strong{font-size:9px}.client-result small{font-size:8px;color:var(--muted);margin-top:2px}.selected-client-card{margin-top:9px;display:flex;justify-content:space-between;gap:12px;align-items:center;padding:11px;border-radius:12px;background:#F8F8F6;border:1px solid var(--line)}.selected-client-card strong,.selected-client-card small{display:block}.selected-client-card strong{font-size:9px}.selected-client-card small{font-size:8px;color:var(--muted);margin-top:2px}.selected-client-card button{border:0;background:transparent;color:var(--blue);font-size:8px;font-weight:800;cursor:pointer}
.toast{position:fixed;right:24px;bottom:24px;background:#111214;color:white;padding:12px 15px;border-radius:11px;font-size:9px;font-weight:700;opacity:0;pointer-events:none;transform:translateY(8px);transition:.2s;z-index:200}.toast.show{opacity:1;transform:none}
@media(max-width:1050px){.app-layout{grid-template-columns:210px 1fr}.stats-grid{grid-template-columns:repeat(2,1fr)}.panel-grid{grid-template-columns:1fr}.service-admin-row{grid-template-columns:42px 1fr 90px 95px auto}.service-admin-row .service-meta:nth-of-type(2){display:none}.cards-grid,.client-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.app-layout{grid-template-columns:1fr}.sidebar{position:fixed;left:-270px;top:0;width:250px;z-index:80;transition:.25s}.sidebar.open{left:0}.sidebar-close{display:block}.menu-toggle{display:block}.topbar{height:78px;padding:0 14px}.topbar h1{font-size:18px}.topbar-actions .secondary-btn{display:none}.profile-chip{display:none}.content{padding:16px}.stats-grid{grid-template-columns:1fr 1fr}.cards-grid,.settings-grid,.client-grid{grid-template-columns:1fr}.service-admin-row{grid-template-columns:40px 1fr auto}.service-admin-row>.service-meta,.service-admin-row>.price-mode{display:none}.schedule-day{grid-template-columns:90px 1fr auto}.schedule-day input[type=time]:nth-of-type(2){display:none}.form-split{grid-template-columns:1fr}.panel{padding:14px}.filter-row{width:100%;display:grid;grid-template-columns:1fr}.search-input,.select-input{width:100%}}
@media(max-width:460px){.stats-grid{grid-template-columns:1fr}.topbar-actions .primary-btn{font-size:0;padding:10px 12px}.topbar-actions .primary-btn::after{content:"+";font-size:16px}.agenda-row{grid-template-columns:55px 1fr}.agenda-row .status{display:none}.business-mini{margin-top:14px}.client-search-row{grid-template-columns:1fr}.client-search-row .secondary-btn{width:100%}}

.status.atendida{background:#E8F6EE;color:#247A4B}
.status.no-asistio{background:#F0ECFF;color:#6548A8}
.table-action{border:1px solid var(--line);background:white;border-radius:8px;padding:6px 8px;font-size:8px;font-weight:700;cursor:pointer}
.table-action:hover{border-color:var(--blue);color:var(--blue)}
.client-history-btn{margin-top:10px;width:100%;border:1px solid var(--line);background:#F8F8F6;border-radius:9px;padding:8px;font-size:8px;font-weight:700;cursor:pointer}
.history-list{display:grid;gap:10px;max-height:430px;overflow:auto}
.history-item{padding:13px;background:white;border:1px solid var(--line);border-radius:13px}
.history-item-top{display:flex;justify-content:space-between;gap:10px;align-items:center}
.history-item strong,.history-item small{display:block}.history-item strong{font-size:10px}.history-item small{font-size:8px;color:var(--muted);margin-top:3px}
.history-change{margin-top:9px;padding:8px 10px;background:var(--blue-soft);border-radius:9px;font-size:8px;color:#315EAE;line-height:1.45}
.blocked-list{display:grid;gap:8px;margin-top:16px}
.blocked-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;background:white;border:1px solid var(--line);border-radius:11px}
.blocked-item strong,.blocked-item small{display:block}.blocked-item strong{font-size:9px}.blocked-item small{font-size:8px;color:var(--muted);margin-top:2px}
.blocked-item button{border:0;background:transparent;color:var(--red);font-size:8px;font-weight:800;cursor:pointer}

.reservation-filters{
  width:100%;
  display:grid;
  grid-template-columns:repeat(5,minmax(130px,1fr)) auto;
  gap:9px;
  align-items:end;
  padding-top:4px;
}
.filter-field{
  display:grid;
  gap:5px;
}
.filter-field label{
  font-size:7px;
  color:var(--muted);
  font-weight:800;
  letter-spacing:.5px;
  text-transform:uppercase;
}
.reservation-filters .search-input,
.reservation-filters .select-input{
  width:100%;
  min-width:0;
}
.clear-filters-btn{
  height:40px;
  border:1px solid var(--line);
  background:#F8F8F6;
  color:#55595F;
  border-radius:10px;
  padding:0 12px;
  font-size:9px;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
}
.clear-filters-btn:hover{
  border-color:rgba(0,87,255,.3);
  color:var(--blue);
}
@media(max-width:1180px){
  .reservation-filters{
    grid-template-columns:repeat(3,1fr);
  }
}
@media(max-width:760px){
  .reservation-filters{
    grid-template-columns:1fr 1fr;
  }
  .clear-filters-btn{
    width:100%;
  }
}
@media(max-width:480px){
  .reservation-filters{
    grid-template-columns:1fr;
  }
}

.panel-tools{
  display:flex;
  align-items:end;
  gap:10px;
  flex-wrap:wrap;
}
.view-toggle{
  display:flex;
  gap:4px;
  padding:4px;
  background:#F1F0EC;
  border-radius:10px;
}
.view-btn{
  border:0;
  background:transparent;
  border-radius:8px;
  padding:7px 9px;
  font-size:8px;
  font-weight:800;
  color:#686B71;
  cursor:pointer;
}
.view-btn.active{
  background:white;
  color:var(--blue);
  box-shadow:0 2px 8px rgba(20,25,35,.06);
}
.client-grid.list-mode,
.cards-grid.list-mode{
  display:block;
}
.entity-list-head,
.entity-list-row{
  align-items:center;
  gap:12px;
}
.entity-list-head{
  display:grid;
  min-height:34px;
  padding:0 10px;
  background:#F8F8F6;
  border:1px solid var(--line);
  border-radius:10px 10px 0 0;
  color:var(--muted);
  font-size:7px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.4px;
}
.entity-list-row{
  display:grid;
  min-height:64px;
  padding:10px;
  background:white;
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.entity-list-row:last-child{
  border-radius:0 0 10px 10px;
}
.client-list-layout{
  grid-template-columns:1.35fr .9fr 1.2fr 1.4fr auto;
}
.professional-list-layout{
  grid-template-columns:1.4fr .8fr .7fr .7fr .8fr;
}
.entity-primary{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}
.entity-primary strong,
.entity-primary small{
  display:block;
}
.entity-primary strong{
  font-size:9px;
}
.entity-primary small{
  font-size:7px;
  color:var(--muted);
  margin-top:2px;
}
.entity-cell{
  font-size:8px;
  color:#555960;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.notes-cell{
  white-space:normal;
  line-height:1.4;
}
.entity-actions{
  justify-content:flex-end;
}
.small-avatar{
  width:38px!important;
  height:38px!important;
  border-radius:12px!important;
  margin:0!important;
  font-size:9px!important;
}
@media(max-width:980px){
  .client-list-layout{
    grid-template-columns:1.4fr .9fr 1.1fr auto;
  }
  .client-list-layout > :nth-child(4){
    display:none;
  }
  .professional-list-layout{
    grid-template-columns:1.4fr .9fr .7fr .8fr;
  }
  .professional-list-layout > :nth-child(4){
    display:none;
  }
}
@media(max-width:760px){
  .panel-tools{
    width:100%;
    align-items:stretch;
  }
  .view-toggle{
    width:100%;
  }
  .view-btn{
    flex:1;
  }
  .entity-list-head{
    display:none;
  }
  .entity-list-row{
    border:1px solid var(--line);
    border-radius:12px!important;
    margin-bottom:8px;
  }
  .client-list-layout,
  .professional-list-layout{
    grid-template-columns:1fr auto;
  }
  .client-list-layout > .entity-cell,
  .professional-list-layout > .entity-cell,
  .professional-list-layout > .status{
    display:none;
  }
}

.tomorrow-panel{
  margin-top:14px;
}
.tomorrow-count{
  font-size:8px;
  font-weight:800;
  color:var(--blue);
  background:var(--blue-soft);
  padding:7px 9px;
  border-radius:100px;
}
.tomorrow-list{
  display:grid;
  gap:8px;
}
.tomorrow-item{
  display:grid;
  grid-template-columns:90px 1fr auto;
  gap:14px;
  align-items:center;
  padding:12px;
  border:1px solid var(--line);
  border-radius:13px;
  background:white;
}
.tomorrow-time{
  width:76px;
  min-height:52px;
  border-radius:12px;
  background:#F8F8F6;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}
.tomorrow-time strong{
  font-size:11px;
}
.tomorrow-time small{
  font-size:7px;
  color:var(--muted);
  margin-top:3px;
}
.tomorrow-main strong,
.tomorrow-main span,
.tomorrow-main small{
  display:block;
}
.tomorrow-main strong{
  font-size:10px;
}
.tomorrow-main span{
  font-size:8px;
  color:#55595F;
  margin-top:3px;
}
.tomorrow-main small{
  font-size:8px;
  color:var(--muted);
  margin-top:3px;
}
.tomorrow-actions,
.reservation-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.empty-state{
  padding:18px;
  background:#F8F8F6;
  border-radius:12px;
  color:var(--muted);
  font-size:9px;
  text-align:center;
}
@media(max-width:760px){
  .tomorrow-item{
    grid-template-columns:70px 1fr;
  }
  .tomorrow-time{
    width:64px;
  }
  .tomorrow-actions{
    grid-column:1/-1;
    justify-content:stretch;
  }
  .tomorrow-actions .table-action{
    flex:1;
  }
  .reservation-actions{
    min-width:210px;
  }
}

.reservation-view-tools{
  width:100%;
  display:flex;
  justify-content:flex-end;
  margin-bottom:10px;
}
.reservation-calendar-view{
  display:none;
}
.calendar-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:14px 0;
}
.calendar-toolbar strong{
  display:block;
  font-size:11px;
}
.calendar-nav{
  display:flex;
  gap:5px;
}
.calendar-nav button{
  min-width:34px;
  height:34px;
  border:1px solid var(--line);
  background:white;
  border-radius:9px;
  font-size:9px;
  font-weight:800;
  cursor:pointer;
}
.weekly-calendar-wrap{
  overflow:auto;
  border:1px solid var(--line);
  border-radius:14px;
  background:white;
}
.weekly-calendar{
  min-width:920px;
  display:grid;
  grid-template-columns:58px repeat(7,1fr);
}
.calendar-corner,
.calendar-day-head{
  min-height:58px;
  border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);
  background:#F8F8F6;
}
.calendar-day-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.calendar-day-head span{
  font-size:7px;
  color:var(--muted);
  font-weight:800;
  text-transform:uppercase;
}
.calendar-day-head strong{
  font-size:13px;
  margin-top:3px;
}
.calendar-day-head.today{
  background:var(--blue-soft);
  color:var(--blue);
}
.calendar-time-label{
  min-height:58px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:8px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  font-size:7px;
  color:var(--muted);
  background:#FAFAF8;
}
.calendar-cell{
  min-height:58px;
  padding:3px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:relative;
}
.calendar-event{
  width:100%;
  border:0;
  border-radius:7px;
  padding:5px 6px;
  text-align:left;
  cursor:pointer;
  margin-bottom:3px;
  background:var(--blue-soft);
  color:#315EAE;
}
.calendar-event strong,
.calendar-event span,
.calendar-event small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.calendar-event strong{font-size:7px}
.calendar-event span{font-size:7px;margin-top:2px}
.calendar-event small{font-size:6px;opacity:.75;margin-top:2px}
.calendar-event.pendiente{background:var(--yellow-soft);color:var(--yellow)}
.calendar-event.atendida{background:var(--green-soft);color:var(--green)}
.calendar-event.no-asistio{background:#F0ECFF;color:#6548A8}
@media(max-width:760px){
  .reservation-view-tools{
    justify-content:stretch;
  }
  .reservation-view-tools .view-toggle{
    width:100%;
  }
  .calendar-toolbar{
    align-items:flex-start;
    flex-direction:column;
  }
}

.agenda-header-actions{display:flex;align-items:center;gap:9px}
.live-indicator{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:7px;font-weight:700}
.live-indicator>span{width:7px;height:7px;border-radius:50%;background:#35A564;box-shadow:0 0 0 4px rgba(53,165,100,.10)}
.agenda-reservation{position:relative;padding:9px 10px;min-height:76px;border-radius:12px;border:1px solid transparent;transition:.2s ease}
.agenda-reservation.pasada{opacity:.56}
.agenda-reservation.en-curso{opacity:1;background:linear-gradient(90deg,rgba(0,87,255,.10),rgba(0,87,255,.025));border-color:rgba(0,87,255,.30);box-shadow:0 9px 24px rgba(0,87,255,.08)}
.agenda-reservation.en-curso:before{content:"";position:absolute;left:-1px;top:12px;bottom:12px;width:4px;border-radius:0 5px 5px 0;background:var(--blue)}
.agenda-time-block{display:flex;flex-direction:column;justify-content:center}
.agenda-time-block small{font-size:7px;color:var(--muted);margin-top:3px}
.agenda-client-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.appointment-live-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:100px;background:var(--blue);color:white;font-size:7px;font-weight:900}
.appointment-live-badge span{width:6px;height:6px;border-radius:50%;background:white;animation:livePulse 1.4s infinite}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.3}}
.appointment-time-state{font-size:7px;font-weight:800;padding:4px 7px;border-radius:100px}
.appointment-time-state.past{background:#F0F0EE;color:#85878C}
.appointment-time-state.upcoming{background:var(--blue-soft);color:var(--blue)}
.appointment-time-state.attended{background:var(--green-soft);color:var(--green)}
.appointment-time-state.missed{background:#F0ECFF;color:#6548A8}
.current-appointment-note{margin-top:7px;color:var(--blue);font-size:8px;font-weight:700}
.agenda-row-actions{display:flex;gap:5px;align-items:center}
@media(max-width:760px){
  .live-indicator{display:none}
  .agenda-reservation{grid-template-columns:78px 1fr}
  .agenda-row-actions{grid-column:1/-1;justify-content:flex-end}
}

/* V6.11 — Cita actual destacada */
.agenda-reservation.en-curso{
  background:
    linear-gradient(90deg, rgba(0,87,255,.145) 0%, rgba(0,87,255,.055) 62%, rgba(255,255,255,.92) 100%) !important;
  border:1.5px solid rgba(0,87,255,.55) !important;
  box-shadow:
    0 0 0 3px rgba(0,87,255,.055),
    0 14px 32px rgba(0,87,255,.11) !important;
  transform:translateX(2px);
}
.agenda-reservation.en-curso::before{
  width:5px !important;
  top:8px !important;
  bottom:8px !important;
  background:var(--blue) !important;
  box-shadow:0 0 14px rgba(0,87,255,.38);
}
.agenda-reservation.en-curso .agenda-time{
  color:var(--blue);
  font-size:11px;
}
.agenda-reservation.en-curso .agenda-main>small{
  color:#315EAE;
}
.appointment-live-badge{
  letter-spacing:.45px;
  box-shadow:0 5px 12px rgba(0,87,255,.18);
}
.current-appointment-note{
  margin-top:9px !important;
  max-width:420px;
}
.current-appointment-note>span{
  display:block;
  margin-bottom:6px;
}
.appointment-progress{
  height:4px;
  width:100%;
  max-width:260px;
  border-radius:100px;
  background:rgba(0,87,255,.12);
  overflow:hidden;
}
.appointment-progress-fill{
  display:block;
  height:100%;
  border-radius:inherit;
  background:var(--blue);
  transition:width .35s ease;
}
.live-indicator strong{
  color:#55595F;
  font-size:7px;
}
.agenda-reservation.proxima{
  background:rgba(255,255,255,.66);
}
.agenda-reservation.pasada{
  background:rgba(248,248,246,.55);
}
@media(max-width:760px){
  .agenda-reservation.en-curso{
    transform:none;
  }
  .appointment-progress{
    max-width:100%;
  }
}


/* ============================================================
   V7.0 — SUPABASE AUTH + LECTURA REAL
   ============================================================ */

.auth-locked{
  display:none!important;
}

.login-screen{
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr .85fr;
  background:var(--cream);
}

.login-shell{
  width:min(540px,calc(100% - 48px));
  margin:auto;
  padding:50px 0;
}

.login-brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:"Manrope",sans-serif;
  font-weight:800;
  font-size:18px;
  margin-bottom:72px;
}

.login-copy{
  max-width:500px;
}

.login-copy h1{
  font-family:"Manrope",sans-serif;
  font-size:clamp(46px,6vw,72px);
  line-height:.98;
  letter-spacing:-3.8px;
  margin-bottom:18px;
}

.login-copy p{
  color:var(--muted);
  line-height:1.65;
  font-size:13px;
  max-width:450px;
}

.login-form{
  max-width:450px;
  display:grid;
  gap:14px;
  margin-top:30px;
}

.login-form label{
  display:grid;
  gap:7px;
  font-size:9px;
  font-weight:800;
}

.login-form input{
  height:48px;
  border:1px solid var(--line);
  background:white;
  border-radius:12px;
  padding:0 13px;
  outline:none;
  font-size:12px;
}

.login-form input:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(0,87,255,.08);
}

.login-submit{
  min-height:49px;
  margin-top:4px;
}

.login-submit:disabled{
  opacity:.6;
  cursor:wait;
}

.login-message{
  min-height:18px;
  color:var(--red);
  font-size:9px;
  line-height:1.5;
}

.login-security{
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:22px;
  color:var(--muted);
  font-size:8px;
}

.login-security span{
  color:var(--green);
  font-size:9px;
}

.login-visual{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:42px;
  background:var(--blue);
  position:relative;
  overflow:hidden;
}

.login-visual:before,
.login-visual:after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.08);
}

.login-visual:before{
  width:420px;
  height:420px;
  right:-160px;
  top:-120px;
}

.login-visual:after{
  width:300px;
  height:300px;
  left:-140px;
  bottom:-90px;
}

.login-visual-card{
  width:min(390px,100%);
  padding:30px;
  border-radius:24px;
  background:rgba(255,255,255,.95);
  box-shadow:0 30px 90px rgba(0,0,0,.18);
  position:relative;
  z-index:1;
}

.connection-dot{
  display:block;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#35A564;
  box-shadow:0 0 0 5px rgba(53,165,100,.12);
  margin-bottom:25px;
}

.login-visual-card>small{
  display:block;
  color:var(--blue);
  font-size:8px;
  letter-spacing:1.2px;
  font-weight:900;
}

.login-visual-card>strong{
  display:block;
  font-family:"Manrope",sans-serif;
  font-size:34px;
  letter-spacing:-1.5px;
  margin:5px 0 9px;
}

.login-visual-card>p{
  color:var(--muted);
  line-height:1.5;
  font-size:10px;
}

.login-stat-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
  margin-top:26px;
}

.login-stat-grid div{
  padding:13px;
  border-radius:12px;
  background:#F8F8F6;
}

.login-stat-grid span,
.login-stat-grid strong{
  display:block;
}

.login-stat-grid span{
  color:var(--muted);
  font-size:7px;
}

.login-stat-grid strong{
  margin-top:5px;
  font-family:"Manrope",sans-serif;
  font-size:17px;
}

.supabase-status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 9px;
  border-radius:100px;
  background:#E8F6EE;
  color:var(--green);
  font-size:8px;
  font-weight:800;
}

.supabase-status span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#35A564;
}

.logout-btn{
  border:1px solid var(--line);
  background:white;
  height:38px;
  padding:0 11px;
  border-radius:10px;
  font-size:9px;
  font-weight:800;
  cursor:pointer;
}

.database-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:11px 13px;
  margin-bottom:14px;
  border:1px solid rgba(0,87,255,.16);
  background:rgba(234,241,255,.62);
  border-radius:12px;
  color:#315EAE;
  font-size:8px;
}

.database-banner>div{
  display:flex;
  align-items:center;
  gap:7px;
}

.database-live-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 0 4px rgba(0,87,255,.10);
}

.database-banner strong{
  font-size:9px;
}

.read-only-disabled{
  opacity:.45!important;
  cursor:not-allowed!important;
  pointer-events:none!important;
}

@media(max-width:850px){
  .login-screen{
    grid-template-columns:1fr;
  }
  .login-visual{
    display:none;
  }
  .login-brand{
    margin-bottom:50px;
  }
}

@media(max-width:600px){
  .login-shell{
    width:calc(100% - 36px);
  }
  .login-copy h1{
    font-size:48px;
    letter-spacing:-3px;
  }
  .database-banner{
    align-items:flex-start;
    flex-direction:column;
    gap:6px;
  }
  .supabase-status{
    display:none;
  }
  .logout-btn{
    font-size:8px;
    padding:0 9px;
  }
}

/* V7.1 — Clientes con escritura real */
.db-write-enabled{
  position:relative;
}
.db-write-enabled::after{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:#63E69B;
  position:absolute;
  right:7px;
  top:7px;
  box-shadow:0 0 0 3px rgba(99,230,155,.15);
}
#clientForm button[type="submit"]:disabled{
  opacity:.6;
  cursor:wait;
}

/* V7.2 — Reservas reales */
#appointmentForm button[type="submit"]:disabled,
#editAppointmentForm button[type="submit"]:disabled{
  opacity:.6;
  cursor:wait;
}

/* V7.3 — Servicios y Profesionales reales */
.service-assignment{
  display:grid;
  gap:8px;
}
.service-assignment-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.service-check-option{
  display:flex!important;
  align-items:center;
  gap:9px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:11px;
  background:white;
  cursor:pointer;
}
.service-check-option input{
  width:16px;
  height:16px;
  accent-color:var(--blue);
}
.service-check-option span{
  min-width:0;
}
.service-check-option strong,
.service-check-option small{
  display:block;
}
.service-check-option strong{
  font-size:9px;
}
.service-check-option small{
  color:var(--muted);
  font-size:7px;
  margin-top:2px;
}
.professional-card-actions{
  display:flex;
  gap:6px;
  margin-top:13px;
}
.professional-card-actions .table-action{
  flex:1;
}
.professional-row-actions{
  display:flex;
  justify-content:flex-end;
}
#serviceForm button[type="submit"]:disabled,
#professionalForm button[type="submit"]:disabled{
  opacity:.6;
  cursor:wait;
}
@media(max-width:600px){
  .service-assignment-grid{
    grid-template-columns:1fr;
  }
}

/* V7.3.1 — calendario nocturno y horas de 12 horas */
.calendar-time-label{
  min-width:58px;
  padding-left:3px;
  padding-right:3px;
  text-align:center;
  line-height:1.2;
}
.weekly-calendar{
  min-width:980px;
}
@media(max-width:760px){
  .weekly-calendar{
    min-width:1040px;
  }
}

/* ============================================================
   V7.3.2 — Color del profesional aplicado visualmente
   ============================================================ */

.professional-color-dot,
.professional-inline-dot{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--professional-color,#0057FF);
  flex:0 0 auto;
}

.professional-inline-dot{
  width:7px;
  height:7px;
  margin-right:6px;
  vertical-align:middle;
}

.appointment-professional-line{
  display:flex!important;
  align-items:center;
  gap:6px;
}

/* La cita conserva estados, pero el profesional aporta su identidad de color. */
.agenda-reservation{
  border-left:4px solid var(--professional-color,#0057FF)!important;
}

.agenda-reservation.proxima{
  background:var(--professional-soft,rgba(0,87,255,.07))!important;
}

.agenda-reservation.en-curso{
  background:
    linear-gradient(
      90deg,
      var(--professional-soft,rgba(0,87,255,.14)) 0%,
      rgba(255,255,255,.94) 100%
    )!important;
  border-color:var(--professional-color,#0057FF)!important;
}

.agenda-reservation.en-curso::before{
  background:var(--professional-color,#0057FF)!important;
}

.agenda-reservation.en-curso .agenda-time,
.agenda-reservation.en-curso .current-appointment-note{
  color:var(--professional-color,#0057FF)!important;
}

/* Calendario semanal */
.calendar-event{
  background:var(--professional-soft,rgba(0,87,255,.13))!important;
  color:var(--professional-color,#0057FF)!important;
  border-left:4px solid var(--professional-color,#0057FF)!important;
}

.calendar-event:hover{
  box-shadow:inset 0 0 0 1px var(--professional-color,#0057FF);
}

/* El estado sigue diferenciándose mediante un pequeño patrón/borde,
   sin perder el color del profesional. */
.calendar-event.pendiente{
  border-style:solid solid solid dashed;
}
.calendar-event.atendida{
  opacity:.70;
}
.calendar-event.no-asistio{
  opacity:.48;
  text-decoration:line-through;
}

/* Ficha del profesional */
.professional-avatar{
  background:var(--professional-soft,#DCE8FF)!important;
  color:var(--professional-color,#0057FF)!important;
  border:1px solid var(--professional-color,#0057FF);
}

/* Precio: el navegador debe permitir incrementos de $1 */
#servicePrice{
  font-variant-numeric:tabular-nums;
}

/* V7.3.4 — hora de próximas reservas en una sola línea */
.upcoming-item .time-pill{
  width:auto!important;
  min-width:92px;
  padding:0 10px;
  white-space:nowrap;
  line-height:1;
  font-size:9px;
}

.agenda-row-actions{
  flex-wrap:wrap;
  justify-content:flex-end;
}
.danger-action{
  color:#B84C4C!important;
  border-color:rgba(184,76,76,.22)!important;
  background:#FFF7F7!important;
}
.danger-action:hover{
  background:#FDEAEA!important;
  border-color:rgba(184,76,76,.38)!important;
}
@media(max-width:760px){
  .agenda-row-actions .table-action{
    flex:1;
    min-width:92px;
  }
}

/* V7.3.5 — corregir superposición en Reservas por llegar */
.upcoming-item{
  display:grid!important;
  grid-template-columns:112px minmax(0,1fr)!important;
  align-items:center!important;
  column-gap:14px!important;
}

.upcoming-item .time-pill{
  width:100%!important;
  min-width:0!important;
  box-sizing:border-box;
  justify-self:stretch;
  display:flex!important;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}

.upcoming-item > div:last-child{
  min-width:0;
  padding-left:0!important;
}

.upcoming-item > div:last-child strong,
.upcoming-item > div:last-child small{
  position:static!important;
  display:block;
}

@media(max-width:600px){
  .upcoming-item{
    grid-template-columns:96px minmax(0,1fr)!important;
    column-gap:10px!important;
  }

  .upcoming-item .time-pill{
    padding-left:7px;
    padding-right:7px;
    font-size:8px;
  }
}

/* ============================================================
   V7.4 — Horarios y disponibilidad real
   ============================================================ */

.schedule-tools{
  display:flex;
  align-items:end;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

.schedule-professional-filter{
  min-width:190px;
}

.real-schedule-day{
  grid-template-columns:120px 1fr 1fr 110px!important;
}

.schedule-active-wrap{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  font-size:8px;
  color:var(--muted);
}

.schedule-active-wrap input{
  width:38px!important;
  height:20px!important;
}

.schedule-blocks-section{
  margin-top:26px;
  padding-top:20px;
  border-top:1px solid var(--line);
}

.panel-subheader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}

.panel-subheader h3{
  font-family:"Manrope",sans-serif;
  font-size:14px;
}

#blockTimeForm button[type="submit"]:disabled{
  opacity:.6;
  cursor:wait;
}

@media(max-width:760px){
  .schedule-tools{
    width:100%;
    align-items:stretch;
  }

  .schedule-professional-filter{
    width:100%;
  }

  .schedule-tools button{
    flex:1;
  }

  .real-schedule-day{
    grid-template-columns:1fr 1fr!important;
    gap:8px;
  }

  .real-schedule-day strong{
    grid-column:1/-1;
  }

  .schedule-active-wrap{
    grid-column:1/-1;
    justify-content:flex-start;
  }
}

/* ============================================================
   V7.5 — Selector visual de horas y bloqueos por rango
   ============================================================ */

.availability-box{
  padding:13px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#F8F8F6;
}

.availability-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.availability-head strong{
  display:block;
  font-size:10px;
}

.availability-summary{
  flex:0 0 auto;
  padding:5px 8px;
  border-radius:100px;
  background:var(--blue-soft);
  color:var(--blue);
  font-size:7px;
  font-weight:800;
}

.availability-message{
  padding:10px;
  border-radius:10px;
  background:white;
  border:1px dashed var(--line);
  color:var(--muted);
  font-size:8px;
  line-height:1.5;
}

.time-slots{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:7px;
}

.time-slot{
  min-height:36px;
  padding:7px 5px;
  border:1px solid var(--line);
  border-radius:9px;
  background:white;
  font-size:8px;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
}

.time-slot:hover{
  border-color:rgba(0,87,255,.35);
  color:var(--blue);
}

.time-slot.selected{
  background:var(--blue);
  border-color:var(--blue);
  color:white;
  box-shadow:0 6px 14px rgba(0,87,255,.16);
}

.hidden-field{
  display:none!important;
}

.block-date-fields{
  align-items:end;
}

@media(max-width:600px){
  .time-slots{
    grid-template-columns:repeat(3,1fr);
  }
}

@media(max-width:420px){
  .time-slots{
    grid-template-columns:repeat(2,1fr);
  }
}

/* V7.5.1 — disponibilidad por turno y edición de bloqueos */

.availability-segmented{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
  padding:4px;
  margin-bottom:10px;
  background:#ECEBE7;
  border-radius:10px;
}

.availability-period{
  border:0;
  background:transparent;
  border-radius:8px;
  min-height:34px;
  font-size:8px;
  font-weight:800;
  cursor:pointer;
  color:#6E7177;
}

.availability-period.active{
  background:white;
  color:var(--blue);
  box-shadow:0 2px 8px rgba(20,25,35,.06);
}

.time-slots{
  max-height:260px;
  overflow-y:auto;
  padding-right:3px;
}

.block-row-actions{
  display:flex;
  gap:7px;
  align-items:center;
}

.block-row-actions .remove-real-block{
  border:0;
  background:transparent;
  color:var(--red);
  font-size:8px;
  font-weight:800;
  cursor:pointer;
}

@media(max-width:600px){
  .time-slots{
    max-height:230px;
  }
}

/* ============================================================
   V7.5.2 — Modal de cita contenido dentro de la ventana
   ============================================================ */

/* El modal nunca puede superar la altura visible del navegador. */
#appointmentModal,
#editAppointmentModal{
  align-items:center;
  overflow:hidden;
}

#appointmentModal .appointment-modal,
#editAppointmentModal .appointment-modal{
  max-height:calc(100vh - 32px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}

/* Mantiene el encabezado accesible mientras se recorre el formulario. */
#appointmentModal .modal-header,
#editAppointmentModal .modal-header{
  position:sticky;
  top:-20px;
  z-index:15;
  margin-left:-20px;
  margin-right:-20px;
  padding:20px 20px 12px;
  background:var(--cream);
  border-bottom:1px solid rgba(226,224,218,.75);
}

/* La búsqueda de clientes ya no aumenta demasiado la altura del modal. */
#appointmentClientResults{
  max-height:142px!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}

/* Resultados un poco más compactos sin perder legibilidad. */
#appointmentClientResults .client-result{
  min-height:52px;
  padding-top:8px;
  padding-bottom:8px;
}

/* El área de disponibilidad también queda contenida. */
#appointmentModal .time-slots,
#editAppointmentModal .time-slots{
  max-height:210px;
  overflow-y:auto;
  overscroll-behavior:contain;
}

/* Mejor comportamiento en pantallas de poca altura. */
@media(max-height:760px){
  #appointmentModal,
  #editAppointmentModal{
    align-items:flex-start;
    padding-top:10px;
    padding-bottom:10px;
  }

  #appointmentModal .appointment-modal,
  #editAppointmentModal .appointment-modal{
    max-height:calc(100vh - 20px);
  }

  #appointmentClientResults{
    max-height:110px!important;
  }

  #appointmentModal .time-slots,
  #editAppointmentModal .time-slots{
    max-height:160px;
  }
}

@media(max-width:600px){
  #appointmentModal,
  #editAppointmentModal{
    padding:10px;
  }

  #appointmentModal .appointment-modal,
  #editAppointmentModal .appointment-modal{
    max-height:calc(100vh - 20px);
    border-radius:17px;
  }
}

/* ============================================================
   V7.6 — Vista cliente real
   ============================================================ */

.client-booking-screen{
  position:fixed;
  inset:0;
  z-index:3000;
  background:#F8F7F4;
  display:none;
  overflow-y:auto;
}

.client-booking-screen.open{
  display:block;
}

.client-view-open{
  overflow:hidden;
}

.client-booking-shell{
  width:min(820px,calc(100% - 32px));
  margin:0 auto;
  padding:22px 0 70px;
}

.client-booking-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:8px 0 32px;
}

.client-booking-header>div:first-child{
  display:flex;
  align-items:center;
  gap:10px;
}

.client-brand-mark{
  width:38px;
  height:38px;
  border-radius:12px;
  background:var(--blue);
  color:white;
  display:grid;
  place-items:center;
  font-weight:900;
}

.client-booking-header strong,
.client-booking-header small{
  display:block;
}

.client-booking-header strong{
  font-family:"Manrope",sans-serif;
  font-size:12px;
}

.client-booking-header small{
  color:var(--muted);
  font-size:8px;
  margin-top:2px;
}

.client-close-btn{
  border:1px solid var(--line);
  background:white;
  border-radius:10px;
  padding:9px 12px;
  font-size:8px;
  font-weight:800;
  cursor:pointer;
}

.client-booking-hero{
  padding:35px 0 30px;
  max-width:660px;
}

.client-booking-hero h1{
  font-family:"Manrope",sans-serif;
  font-size:clamp(38px,6vw,62px);
  line-height:.98;
  letter-spacing:-3px;
  margin:8px 0 15px;
}

.client-booking-hero p{
  color:var(--muted);
  font-size:12px;
  line-height:1.6;
  max-width:560px;
}

.client-booking-card{
  background:white;
  border:1px solid var(--line);
  border-radius:22px;
  padding:22px;
  box-shadow:0 18px 55px rgba(20,25,35,.06);
}

.client-booking-form{
  display:grid;
  gap:18px;
}

.client-step{
  display:grid;
  grid-template-columns:36px 1fr;
  gap:12px;
}

.client-step-number{
  width:30px;
  height:30px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--blue-soft);
  color:var(--blue);
  font-size:8px;
  font-weight:900;
}

.client-step-content{
  display:grid;
  gap:9px;
}

.client-step-content label{
  display:grid;
  gap:7px;
  font-size:9px;
  font-weight:800;
}

.client-step-content input,
.client-step-content select{
  min-height:44px;
  border:1px solid var(--line);
  border-radius:11px;
  padding:0 11px;
  background:white;
  font-size:10px;
  outline:none;
}

.client-step-content input:focus,
.client-step-content select:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(0,87,255,.08);
}

.client-helper{
  color:var(--muted);
  font-size:8px;
}

.client-slot-header{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}

.client-slot-header strong,
.client-slot-header small{
  display:block;
}

.client-slot-header strong{
  font-size:10px;
}

.client-slot-header small{
  color:var(--muted);
  font-size:8px;
  margin-top:3px;
}

.client-time-slots{
  max-height:220px;
  overflow-y:auto;
}

.client-no-slots{
  grid-column:1/-1;
  padding:13px;
  border-radius:10px;
  background:#F8F8F6;
  color:var(--muted);
  font-size:8px;
  text-align:center;
}

.client-booking-summary{
  padding:14px;
  border-radius:13px;
  background:#F8F8F6;
  border:1px solid var(--line);
}

.client-booking-summary span,
.client-booking-summary strong,
.client-booking-summary small{
  display:block;
}

.client-booking-summary span{
  font-size:7px;
  color:var(--blue);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.8px;
}

.client-booking-summary strong{
  margin-top:5px;
  font-size:10px;
}

.client-booking-summary small{
  margin-top:3px;
  color:var(--muted);
  font-size:8px;
}

.client-confirm-btn{
  min-height:48px;
  margin-top:3px;
}

.client-booking-message{
  min-height:18px;
  color:var(--red);
  font-size:9px;
  text-align:center;
}

.client-booking-success{
  display:none;
  text-align:center;
  place-items:center;
  gap:9px;
  padding:48px 20px;
}

.success-icon{
  width:58px;
  height:58px;
  border-radius:50%;
  background:#E8F6EE;
  color:#247A4B;
  display:grid;
  place-items:center;
  font-size:24px;
  font-weight:900;
  margin-bottom:8px;
}

.client-booking-success h2{
  font-family:"Manrope",sans-serif;
  font-size:26px;
}

.client-booking-success p{
  color:var(--muted);
  font-size:10px;
  line-height:1.6;
  max-width:430px;
}

.optional-text{
  color:var(--muted);
  font-weight:500;
}

@media(max-width:600px){
  .client-booking-shell{
    width:calc(100% - 20px);
  }

  .client-booking-card{
    padding:15px;
    border-radius:17px;
  }

  .client-step{
    grid-template-columns:30px 1fr;
  }

  .client-booking-hero{
    padding-top:18px;
  }

  .client-booking-hero h1{
    font-size:42px;
  }

  .client-booking-form .form-split{
    grid-template-columns:1fr;
  }

  .client-time-slots{
    grid-template-columns:repeat(2,1fr);
  }
}


/* ============================================================
   V7.6.2 — REDISEÑO COMPLETO VISTA CLIENTE
   ============================================================ */

.client-booking-screen{
  --client-navy:#0E1A2B;
  --client-soft:#EDF3FF;
  --client-line:#E7E9ED;
  --client-muted:#747982;
  background:
    radial-gradient(circle at 95% 5%, rgba(0,87,255,.08), transparent 28%),
    #F8F7F4;
}

.client-booking-shell{
  width:min(1180px,calc(100% - 40px));
  padding:24px 0 56px;
}

.client-booking-header{
  padding:0 0 30px;
}

.client-brand{
  display:flex;
  align-items:center;
  gap:11px;
}

.client-brand-mark{
  width:42px;
  height:42px;
  border-radius:13px;
  box-shadow:0 8px 22px rgba(0,87,255,.16);
}

.client-booking-header strong{
  font-size:13px;
}

.client-booking-header small{
  font-size:8px;
  letter-spacing:.35px;
}

.client-close-btn{
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(10px);
  padding:10px 14px;
}

.client-booking-hero{
  max-width:none;
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:30px;
  align-items:end;
  padding:52px 0 46px;
}

.client-eyebrow{
  display:block;
  color:var(--blue);
  font-size:8px;
  font-weight:900;
  letter-spacing:1.5px;
}

.client-hero-copy h1{
  max-width:720px;
  font-family:"Manrope",sans-serif;
  font-size:clamp(50px,6vw,82px);
  line-height:.92;
  letter-spacing:-5px;
  margin:12px 0 18px;
  color:var(--client-navy);
}

.client-hero-copy h1 span{
  color:var(--blue);
}

.client-hero-copy>p{
  max-width:610px;
  color:var(--client-muted);
  font-size:13px;
  line-height:1.65;
}

.client-hero-benefits{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  margin-top:22px;
}

.client-hero-benefits span{
  color:#4E5662;
  font-size:8px;
  font-weight:700;
}

.client-hero-card{
  padding:25px;
  border-radius:22px;
  background:var(--client-navy);
  color:white;
  box-shadow:0 24px 60px rgba(14,26,43,.16);
}

.client-hero-card-label{
  display:block;
  color:#7DA5FF;
  font-size:7px;
  letter-spacing:1.3px;
  font-weight:900;
}

.client-hero-card>strong{
  display:block;
  font-family:"Manrope",sans-serif;
  font-size:24px;
  margin:9px 0 6px;
}

.client-hero-card>p{
  color:#B9C1CD;
  font-size:9px;
}

.client-hero-mini{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
  margin-top:22px;
}

.client-hero-mini div{
  padding:12px 8px;
  background:rgba(255,255,255,.07);
  border-radius:12px;
  text-align:center;
}

.client-hero-mini span,
.client-hero-mini small{
  display:block;
}

.client-hero-mini span{
  font-size:13px;
  font-weight:900;
  color:#8BADFF;
}

.client-hero-mini small{
  margin-top:4px;
  color:#D7DCE4;
  font-size:7px;
}

.client-booking-main{
  display:grid;
  grid-template-columns:minmax(0,1fr) 310px;
  gap:20px;
  align-items:start;
}

.client-booking-card{
  padding:0;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(28,35,45,.07);
}

.client-booking-form{
  gap:0;
}

.client-booking-progress{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding:14px 20px;
  background:#FBFBFA;
  border-bottom:1px solid var(--client-line);
}

.client-booking-progress span{
  text-align:center;
  font-size:7px;
  color:#A0A4AB;
  font-weight:800;
}

.client-booking-progress span.active{
  color:var(--blue);
}

.booking-section{
  padding:24px 26px;
  border-bottom:1px solid var(--client-line);
}

.booking-section-head{
  display:grid;
  grid-template-columns:38px 1fr;
  gap:12px;
  align-items:start;
  margin-bottom:18px;
}

.booking-section-number{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:var(--client-soft);
  color:var(--blue);
  font-size:8px;
  font-weight:900;
}

.booking-section-head h2{
  font-family:"Manrope",sans-serif;
  font-size:16px;
  letter-spacing:-.4px;
  margin-bottom:3px;
}

.booking-section-head p{
  color:var(--client-muted);
  font-size:8px;
  line-height:1.45;
}

.client-field{
  display:grid;
  gap:7px;
}

.client-field>span{
  font-size:8px;
  font-weight:800;
  color:#4D525B;
}

.client-field em{
  color:#9A9EA5;
  font-style:normal;
  font-weight:500;
  margin-left:3px;
}

.client-field input,
.client-field select{
  width:100%;
  min-height:47px;
  border:1px solid var(--client-line);
  border-radius:12px;
  padding:0 12px;
  background:white;
  font-size:10px;
  outline:none;
  transition:.18s ease;
}

.client-field input:focus,
.client-field select:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(0,87,255,.07);
}

.client-inline-note{
  margin-top:8px;
  padding:9px 10px;
  background:#FAFAF8;
  border-radius:9px;
  color:var(--client-muted);
  font-size:8px;
}

.client-slot-panel{
  padding:14px;
  border:1px solid var(--client-line);
  border-radius:14px;
  background:#FBFBFA;
}

.client-slot-header{
  margin-bottom:10px;
}

.client-slot-header strong{
  font-size:10px;
}

.client-time-slots{
  max-height:220px;
}

.client-time-slots .time-slot{
  min-height:39px;
  background:white;
  border-color:#E1E4E8;
}

.client-time-slots .time-slot.selected{
  background:var(--blue);
  border-color:var(--blue);
  color:white;
  transform:translateY(-1px);
}

.client-booking-summary{
  margin:20px 26px 0;
  padding:15px;
  display:grid;
  grid-template-columns:34px 1fr;
  gap:11px;
  align-items:center;
  background:#EEF4FF;
  border-color:#D6E3FF;
}

.summary-icon{
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:white;
  color:var(--blue);
  font-size:11px;
  font-weight:900;
}

.client-booking-summary span{
  color:#6283C4;
}

.client-booking-summary strong{
  color:#18325D;
}

.client-confirm-btn{
  width:calc(100% - 52px)!important;
  margin:15px 26px 0!important;
  min-height:52px;
  border-radius:12px;
  font-size:10px;
}

.client-booking-message{
  padding:0 26px 18px;
}

.client-side-panel{
  display:grid;
  gap:14px;
}

.client-side-card{
  padding:20px;
  border:1px solid var(--client-line);
  border-radius:18px;
  background:white;
}

.client-side-card.featured{
  background:var(--blue);
  border-color:var(--blue);
  color:white;
}

.client-side-card>span{
  display:block;
  color:#8A8F97;
  font-size:7px;
  font-weight:900;
  letter-spacing:1.1px;
}

.client-side-card.featured>span{
  color:#AFC6FF;
}

.client-side-card>strong{
  display:block;
  font-family:"Manrope",sans-serif;
  font-size:18px;
  line-height:1.15;
  margin:8px 0;
}

.client-side-card>p{
  color:var(--client-muted);
  font-size:8px;
  line-height:1.55;
}

.client-side-card.featured>p{
  color:#D7E2FF;
}

.client-side-card ol{
  list-style:none;
  display:grid;
  gap:14px;
  margin-top:16px;
}

.client-side-card li{
  display:grid;
  grid-template-columns:26px 1fr;
  gap:9px;
  align-items:start;
}

.client-side-card li>b{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:var(--client-soft);
  color:var(--blue);
  font-size:8px;
}

.client-side-card li strong,
.client-side-card li small{
  display:block;
}

.client-side-card li strong{
  font-size:8px;
}

.client-side-card li small{
  color:var(--client-muted);
  font-size:7px;
  margin-top:2px;
  line-height:1.4;
}

.client-booking-footer{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:24px 2px 0;
  color:#999DA4;
  font-size:7px;
}

.client-booking-success{
  min-height:570px;
  padding:70px 30px;
}

.client-booking-success h2{
  font-size:36px;
  letter-spacing:-1.5px;
}

.client-booking-success p{
  font-size:11px;
}

.client-booking-success>small{
  max-width:430px;
  color:var(--client-muted);
  font-size:8px;
  line-height:1.5;
}

.success-divider{
  width:60px;
  height:1px;
  background:var(--client-line);
  margin:5px 0;
}

@media(max-width:960px){
  .client-booking-hero{
    grid-template-columns:1fr;
  }

  .client-hero-card{
    display:none;
  }

  .client-booking-main{
    grid-template-columns:1fr;
  }

  .client-side-panel{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:640px){
  .client-booking-shell{
    width:calc(100% - 18px);
    padding-top:14px;
  }

  .client-booking-header{
    padding-bottom:18px;
  }

  .client-close-btn{
    font-size:7px;
    padding:9px 10px;
  }

  .client-booking-hero{
    padding:30px 6px 28px;
  }

  .client-hero-copy h1{
    font-size:48px;
    letter-spacing:-3.5px;
  }

  .client-hero-benefits{
    display:grid;
    gap:8px;
  }

  .client-booking-main{
    display:block;
  }

  .client-side-panel{
    display:none;
  }

  .client-booking-card{
    border-radius:18px;
  }

  .client-booking-progress{
    padding:12px 8px;
  }

  .booking-section{
    padding:20px 16px;
  }

  .booking-section-head{
    grid-template-columns:32px 1fr;
  }

  .booking-section-number{
    width:30px;
    height:30px;
  }

  .client-booking-summary{
    margin-left:16px;
    margin-right:16px;
  }

  .client-confirm-btn{
    width:calc(100% - 32px)!important;
    margin-left:16px!important;
    margin-right:16px!important;
  }

  .client-booking-message{
    padding-left:16px;
    padding-right:16px;
  }

  .client-booking-form .form-split{
    grid-template-columns:1fr;
  }
}

/* ============================================================
   V7.6.3 — Advertencia de citas cercanas
   ============================================================ */

.duplicate-appointment-modal{
  z-index:4500!important;
}

.duplicate-warning-card{
  width:min(500px,calc(100% - 24px));
  padding:24px;
}

.duplicate-warning-icon{
  width:42px;
  height:42px;
  border-radius:13px;
  display:grid;
  place-items:center;
  background:#FFF4DB;
  color:#A06A00;
  font-size:19px;
  font-weight:900;
  margin-bottom:15px;
}

.duplicate-warning-copy h2{
  font-family:"Manrope",sans-serif;
  font-size:21px;
  letter-spacing:-.6px;
  margin:5px 0 8px;
}

.duplicate-warning-copy p{
  color:var(--muted);
  font-size:9px;
  line-height:1.55;
}

.duplicate-existing-list{
  display:grid;
  gap:8px;
  margin:17px 0;
  max-height:220px;
  overflow-y:auto;
}

.duplicate-existing-item{
  display:grid;
  grid-template-columns:90px 1fr;
  align-items:center;
  gap:11px;
  padding:11px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#FAFAF8;
}

.duplicate-date-badge{
  padding:8px;
  border-radius:9px;
  background:white;
  border:1px solid var(--line);
}

.duplicate-date-badge span,
.duplicate-date-badge strong{
  display:block;
}

.duplicate-date-badge span{
  color:#9A6A08;
  font-size:6px;
  font-weight:900;
  text-transform:uppercase;
}

.duplicate-date-badge strong{
  margin-top:3px;
  font-size:9px;
}

.duplicate-existing-item>div:last-child strong,
.duplicate-existing-item>div:last-child small{
  display:block;
}

.duplicate-existing-item>div:last-child strong{
  font-size:9px;
}

.duplicate-existing-item>div:last-child small{
  color:var(--muted);
  font-size:7px;
  margin-top:3px;
}

.duplicate-warning-actions{
  display:flex;
  justify-content:flex-end;
  gap:7px;
  flex-wrap:wrap;
  margin-top:17px;
}

@media(max-width:600px){
  .duplicate-warning-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .duplicate-warning-actions button{
    width:100%;
  }

  .duplicate-existing-item{
    grid-template-columns:82px 1fr;
  }
}

/* ============================================================
   V7.7 — Gestión pública segura de cita
   ============================================================ */

.appointment-manage-screen{
  position:fixed;
  inset:0;
  z-index:5000;
  display:none;
  overflow-y:auto;
  background:
    radial-gradient(circle at 90% 0%, rgba(0,87,255,.09), transparent 32%),
    #F8F7F4;
}

.appointment-manage-screen.open{
  display:block;
}

.appointment-manage-shell{
  width:min(900px,calc(100% - 28px));
  margin:0 auto;
  padding:24px 0 70px;
}

.manage-header{
  padding-bottom:42px;
}

.manage-layout{
  display:none;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:16px;
}

.manage-card{
  padding:25px;
  border:1px solid var(--line);
  border-radius:22px;
  background:white;
  box-shadow:0 16px 50px rgba(25,32,42,.06);
}

#manageLoadingCard{
  text-align:center;
  padding:70px 25px;
}

.manage-loading-dot{
  width:14px;
  height:14px;
  margin:0 auto 18px;
  border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 0 8px rgba(0,87,255,.08);
  animation:livePulse 1.2s infinite;
}

.manage-card h1{
  font-family:"Manrope",sans-serif;
  font-size:32px;
  letter-spacing:-1.5px;
  margin:7px 0 8px;
}

.manage-card>p{
  color:var(--muted);
  font-size:9px;
  line-height:1.55;
}

.manage-error-card{
  display:none;
  text-align:center;
  padding:60px 25px;
}

.manage-error-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  margin:0 auto 15px;
  border-radius:14px;
  background:#FFF1F1;
  color:#B84C4C;
  font-weight:900;
  font-size:20px;
}

.manage-appointment-info{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
  margin-top:22px;
}

.manage-appointment-info>div{
  padding:13px;
  border-radius:12px;
  background:#F8F8F6;
}

.manage-appointment-info span,
.manage-appointment-info strong{
  display:block;
}

.manage-appointment-info span{
  color:var(--muted);
  font-size:7px;
  text-transform:uppercase;
  font-weight:800;
}

.manage-appointment-info strong{
  margin-top:5px;
  font-size:9px;
}

.manage-actions{
  display:flex;
  gap:8px;
  margin-top:20px;
  flex-wrap:wrap;
}

.manage-actions button:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.manage-help-card{
  background:#0E1A2B;
  color:white;
}

.manage-help-card h2{
  font-family:"Manrope",sans-serif;
  font-size:18px;
  margin:9px 0;
}

.manage-help-card p{
  color:#B8C0CC;
  font-size:8px;
  line-height:1.6;
}

.manage-reschedule-card{
  display:none;
  margin-top:16px;
}

.manage-reschedule-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:20px;
}

.manage-reschedule-head h2{
  font-family:"Manrope",sans-serif;
  font-size:20px;
  margin-top:5px;
}

.manage-availability-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:14px 0 9px;
  color:var(--muted);
  font-size:8px;
}

.manage-time-slots{
  max-height:260px;
  overflow-y:auto;
  margin-bottom:15px;
}

.manage-success{
  display:none;
  place-items:center;
  text-align:center;
  gap:9px;
  padding:45px 20px;
  margin-top:16px;
  border:1px solid #CFEBD9;
  border-radius:20px;
  background:#F5FCF7;
}

.manage-success h2{
  font-family:"Manrope",sans-serif;
  font-size:24px;
}

.manage-success p{
  color:var(--muted);
  font-size:9px;
}

.management-link{
  color:var(--blue);
  overflow-wrap:anywhere;
  font-size:8px;
}

@media(max-width:700px){
  .manage-layout{
    grid-template-columns:1fr;
  }

  .manage-help-card{
    display:none;
  }

  .manage-appointment-info{
    grid-template-columns:1fr;
  }

  .manage-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .manage-actions button{
    width:100%;
  }
}

/* V7.8.6 — Enviar recordatorio como enlace directo de WhatsApp */
.reminder-link{
  text-decoration:none!important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  cursor:pointer;
}

.reminder-link[href="#"]{
  opacity:.45;
  pointer-events:none;
}

/* ============================================================
   V7.9 — Seguimiento de recordatorios
   ============================================================ */

.reminder-sent{
  border-color:rgba(53,165,100,.25)!important;
  background:#F1FAF4!important;
  color:#247A4B!important;
}

.reminder-status{
  display:inline-flex!important;
  align-items:center;
  gap:4px;
  color:#4C8B65!important;
  font-size:7px!important;
  font-weight:700;
  white-space:nowrap;
}

.reminder-status::before{
  content:"✓";
  width:13px;
  height:13px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#E4F5EA;
  color:#247A4B;
  font-size:7px;
}

.agenda-row-actions .reminder-status,
.tomorrow-actions .reminder-status{
  align-self:center;
}

/* V7.9.3 — Botón nuevo de recordatorio */
.tracked-reminder-btn{
  cursor:pointer;
}
.tracked-reminder-btn.reminder-sent{
  background:#F1FAF4!important;
  border-color:rgba(53,165,100,.30)!important;
  color:#247A4B!important;
}
.tracked-reminder-btn:disabled{
  opacity:.65;
  cursor:wait;
}

/* ============================================================
   V8.1 — Experiencia de reserva pública
   ============================================================ */

.public-booking-mode #clientBookingScreen{
  background:
    radial-gradient(circle at 90% 0%, rgba(0,87,255,.07), transparent 30%),
    #f7f9fc;
}

.public-booking-mode .client-booking-shell{
  max-width:1120px;
  margin:0 auto;
}

.public-booking-mode #clientBookingMessage{
  color:#667085;
  line-height:1.5;
}

.public-booking-mode input[type="date"]:invalid{
  border-color:#d92d20;
}

.public-success-check{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  margin:0 auto 8px;
  border-radius:50%;
  background:#eaf8ef;
  color:#247a4b;
  font-size:24px;
  font-weight:800;
}

#clientBookingSuccessText{
  display:grid;
  gap:7px;
  text-align:center;
  line-height:1.45;
}

#clientBookingSuccessText > strong{
  font-size:18px;
  margin-bottom:5px;
}

.public-manage-button{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-height:44px;
  margin-top:12px;
  padding:0 18px;
  border-radius:12px;
  background:#111827;
  color:white!important;
  text-decoration:none!important;
  font-weight:750;
}

#clientBookingSuccessText small{
  color:#667085;
  font-size:11px;
}

@media (max-width: 680px){
  .public-booking-mode .client-booking-shell{
    width:100%;
  }

  .public-booking-mode #clientBookingScreen{
    padding-left:12px;
    padding-right:12px;
  }

  .public-manage-button{
    width:100%;
  }
}

/* ============================================================
   V8.2 — Publicación y enlace público
   ============================================================ */

.public-booking-link-panel{
  margin-bottom:18px;
}

.panel-description{
  margin-top:5px;
  color:var(--muted);
  font-size:8px;
  line-height:1.5;
}

.public-link-box{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#F8F8F6;
}

.public-link-preview{
  min-width:0;
}

.public-link-preview span,
.public-link-preview strong{
  display:block;
}

.public-link-preview span{
  color:var(--muted);
  font-size:7px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.public-link-preview strong{
  margin-top:5px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:9px;
  color:#273142;
}

.public-link-actions{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
}

.public-link-note{
  display:flex;
  gap:8px;
  align-items:flex-start;
  margin-top:10px;
  padding:10px 12px;
  border-radius:10px;
  background:#EEF4FF;
  color:#506A9A;
  font-size:7px;
  line-height:1.5;
}

.public-link-note strong{
  color:#234D9A;
}

@media(max-width:720px){
  .public-link-box{
    grid-template-columns:1fr;
  }

  .public-link-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .public-link-actions button{
    width:100%;
  }
}

/* ============================================================
   V8.3 — Base multi-negocio
   ============================================================ */

.multi-business-panel{
  margin-bottom:18px;
}

.multi-business-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.multi-business-summary>div{
  padding:13px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#F8F8F6;
}

.multi-business-summary span,
.multi-business-summary strong{
  display:block;
}

.multi-business-summary span{
  color:var(--muted);
  font-size:7px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.multi-business-summary strong{
  margin-top:5px;
  font-size:9px;
  overflow-wrap:anywhere;
}

.multi-business-ready{
  color:#247A4B;
}

@media(max-width:720px){
  .multi-business-summary{
    grid-template-columns:1fr;
  }
}