/* V8.16.218-C1-UI-IMPACT-FULL
   Visual-only override for public booking.
   No RPC, Supabase, permissions, IDs, or booking logic changed. */

:root{
  --pb-blue:#0057FF;
  --pb-ink:#10131A;
  --pb-muted:#6B7280;
  --pb-bg:#F8F7F4;
  --pb-line:rgba(16,19,26,.10);
  --pb-soft:rgba(0,87,255,.075);
  --pb-shadow:0 28px 80px rgba(16,19,26,.11);
}

#clientBookingScreen{
  background:
    radial-gradient(circle at 12% 5%, rgba(0,87,255,.11), transparent 30rem),
    radial-gradient(circle at 92% 20%, rgba(0,87,255,.07), transparent 24rem),
    var(--pb-bg);
  color:var(--pb-ink);
}
#clientBookingScreen .client-booking-shell{
  width:min(1180px,calc(100% - 36px));
  margin:0 auto;
  padding:24px 0 40px;
}
#clientBookingScreen .client-brand-mark{display:none!important;}
#clientBookingScreen .client-booking-header{
  min-height:72px;padding:12px 18px;margin-bottom:24px;
  border:1px solid rgba(255,255,255,.7);border-radius:22px;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 12px 36px rgba(16,19,26,.055);
}
#clientBookingScreen .client-brand>div{
  display:grid;grid-template-columns:auto 1fr;
  grid-template-areas:"logo name" "logo description";
  align-items:center;column-gap:12px;
}
#clientBookingScreen .client-business-logo{
  grid-area:logo;width:46px;height:46px;border-radius:15px;
  display:grid;place-items:center;overflow:hidden;
  background:var(--pb-blue);color:#fff;font-weight:800;
  box-shadow:0 9px 20px rgba(0,87,255,.24);
}
#clientBookingScreen #clientBusinessName{grid-area:name;font-size:15px;letter-spacing:-.01em;}
#clientBookingScreen .client-business-description{
  grid-area:description;margin:2px 0 0;color:var(--pb-muted);font-size:12px;
}
#clientBookingScreen .client-brand small,
#clientBookingScreen .client-business-contact,
#clientBookingScreen .client-business-location{display:none;}
#clientBookingScreen .client-close-btn{
  border:1px solid var(--pb-line);background:#fff;border-radius:13px;
  min-height:42px;padding:0 16px;font-weight:700;
}
#clientBookingScreen .client-booking-hero{
  position:relative;overflow:hidden;display:block;text-align:center;
  padding:62px 24px 48px;margin-bottom:24px;border-radius:32px;
  background:linear-gradient(145deg,#fff 0%,#f7f9ff 52%,#eef4ff 100%);
  border:1px solid rgba(0,87,255,.10);
  box-shadow:0 20px 56px rgba(16,19,26,.07);
}
#clientBookingScreen .client-booking-hero::before{
  content:"";position:absolute;width:360px;height:360px;border-radius:50%;
  top:-250px;left:50%;transform:translateX(-50%);
  background:rgba(0,87,255,.12);
}
#clientBookingScreen .client-hero-copy{position:relative;z-index:1;max-width:760px;margin:0 auto;}
#clientBookingScreen .client-eyebrow{
  display:inline-flex;align-items:center;min-height:30px;padding:0 12px;
  border-radius:999px;background:var(--pb-soft);color:var(--pb-blue);
  font-size:11.5px;font-weight:800;letter-spacing:.12em;
}
#clientBookingScreen .client-hero-copy h1{
  margin:16px 0 14px;font-family:"Manrope",sans-serif;
  font-size:clamp(38px,6vw,70px);line-height:.98;
  letter-spacing:-.055em;color:var(--pb-ink);
}
#clientBookingScreen .client-hero-copy h1 span{color:var(--pb-blue);}
#clientBookingScreen .client-hero-copy>p{
  max-width:620px;margin:0 auto;color:var(--pb-muted);
  font-size:clamp(15px,2vw,18px);line-height:1.6;
}
#clientBookingScreen .client-hero-benefits{
  display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:24px;
}
#clientBookingScreen .client-hero-benefits span{
  padding:9px 13px;border:1px solid var(--pb-line);border-radius:999px;
  background:rgba(255,255,255,.72);color:#374151;font-size:12px;font-weight:700;
}
#clientBookingScreen .client-hero-card,
#clientBookingScreen .client-side-panel{display:none!important;}
#clientBookingScreen .client-booking-main{display:block;max-width:980px;margin:0 auto;}
#clientBookingScreen .client-booking-card{
  padding:clamp(20px,4vw,42px);border-radius:32px;
  background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.85);
  box-shadow:var(--pb-shadow);
}
#clientBookingScreen .client-booking-progress{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  padding:7px;margin:0 0 34px;border-radius:17px;background:#F3F5F8;
}
#clientBookingScreen .client-booking-progress span{
  min-height:42px;display:grid;place-items:center;border-radius:12px;
  color:#808793;font-size:12px;font-weight:800;
}
#clientBookingScreen .client-booking-progress span.active{
  background:#fff;color:var(--pb-blue);box-shadow:0 5px 15px rgba(16,19,26,.07);
}
#clientBookingScreen .booking-section{padding:28px 0 30px;border-top:1px solid var(--pb-line);}
#clientBookingScreen .booking-section:first-of-type{border-top:0;}
#clientBookingScreen .booking-section-head{
  display:grid;grid-template-columns:46px 1fr;gap:14px;margin-bottom:20px;
}
#clientBookingScreen .booking-section-number{
  width:42px;height:42px;display:grid;place-items:center;border-radius:14px;
  background:var(--pb-blue);color:#fff;font-size:11.5px;font-weight:800;
  box-shadow:0 8px 18px rgba(0,87,255,.20);
}
#clientBookingScreen .booking-section-head h2{
  margin:0;font-family:"Manrope",sans-serif;
  font-size:clamp(20px,3vw,27px);letter-spacing:-.035em;
}
#clientBookingScreen .booking-section-head p{margin:5px 0 0;color:var(--pb-muted);font-size:13px;}
#clientBookingScreen .client-field{display:grid;gap:8px;}
#clientBookingScreen .client-field>span{font-size:12px;font-weight:800;color:#343943;}
#clientBookingScreen select,
#clientBookingScreen input[type="text"],
#clientBookingScreen input[type="tel"],
#clientBookingScreen input[type="email"],
#clientBookingScreen input[type="date"],
#clientBookingScreen input[type="search"]{
  width:100%;min-height:56px;padding:0 16px;border:1px solid #E0E4EA;
  border-radius:15px;background:#FBFCFD;color:var(--pb-ink);
  font:inherit;outline:none;transition:.2s ease;
}
#clientBookingScreen select:focus,#clientBookingScreen input:focus{
  border-color:rgba(0,87,255,.58);background:#fff;
  box-shadow:0 0 0 4px rgba(0,87,255,.10);
}
#clientBookingScreen .client-slot-panel{
  padding:18px;margin-top:16px;border:1px solid #E7EAF0;
  border-radius:20px;background:#FAFBFD;
}
#clientBookingScreen .client-time-slots{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:9px;
}
#clientBookingScreen .client-time-slots button,
#clientBookingScreen .time-slot{
  min-height:46px;border:1px solid #E0E4EA;border-radius:12px;
  background:#fff;font-weight:800;transition:.15s ease;
}
#clientBookingScreen .client-time-slots button:hover,
#clientBookingScreen .time-slot:hover{
  transform:translateY(-1px);border-color:rgba(0,87,255,.40);
  box-shadow:0 8px 18px rgba(16,19,26,.06);
}
#clientBookingScreen .client-time-slots .selected,
#clientBookingScreen .time-slot.active{
  border-color:var(--pb-blue);background:var(--pb-blue);color:#fff;
}
#clientBookingScreen .form-split{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
#clientBookingScreen .client-confirm-btn{
  min-height:60px;border:0;border-radius:17px;
  background:linear-gradient(135deg,var(--pb-blue),#367BFF);
  color:#fff;font-size:15px;font-weight:800;
  box-shadow:0 16px 32px rgba(0,87,255,.24);
}
#clientBookingScreen .client-confirm-btn:hover{transform:translateY(-2px);}
#clientBookingUnavailable{
  max-width:720px;margin:70px auto;padding:56px 32px;text-align:center;
  border-radius:32px;border:1px solid rgba(0,87,255,.12);
  background:radial-gradient(circle at 50% 0%,rgba(0,87,255,.10),transparent 19rem),#fff;
  box-shadow:var(--pb-shadow);
}
#clientBookingUnavailable::before{
  content:"R";width:66px;height:66px;display:grid;place-items:center;
  margin:0 auto 20px;border-radius:22px;background:var(--pb-blue);
  color:#fff;font-family:"Manrope",sans-serif;font-weight:800;font-size:25px;
  box-shadow:0 15px 30px rgba(0,87,255,.23);
}
#clientBookingUnavailable h1,#clientBookingUnavailable h2{
  margin:0 0 10px;font-family:"Manrope",sans-serif;
  font-size:clamp(30px,5vw,46px);letter-spacing:-.045em;
}
#clientBookingUnavailable p{max-width:500px;margin:0 auto;color:var(--pb-muted);line-height:1.65;}
#clientBookingScreen .client-booking-footer{justify-content:center;margin-top:24px;color:#9298A2;font-size:11.5px;}
#clientBookingScreen .client-booking-footer span:last-child{display:none;}

@media(max-width:760px){
  #clientBookingScreen .client-booking-shell{width:min(100% - 20px,1180px);padding-top:10px;}
  #clientBookingScreen .client-booking-header{padding:10px 12px;border-radius:18px;}
  #clientBookingScreen .client-business-description{display:none;}
  #clientBookingScreen .client-close-btn{padding:0 11px;font-size:11.5px;}
  #clientBookingScreen .client-booking-hero{padding:44px 18px 36px;border-radius:24px;}
  #clientBookingScreen .client-hero-copy h1{font-size:clamp(38px,12vw,56px);}
  #clientBookingScreen .client-booking-card{padding:18px;border-radius:24px;}
  #clientBookingScreen .client-booking-progress{
    overflow-x:auto;grid-template-columns:repeat(4,minmax(92px,1fr));
  }
  #clientBookingScreen .form-split{grid-template-columns:1fr;}
  #clientBookingUnavailable{margin:36px auto;padding:42px 20px;border-radius:24px;}
}

/* ==========================================================
   RESERVAPP PUBLIC BOOKING RESPONSIVE V1
   Shell + header + hero + booking card
   ========================================================== */


/* TABLET — iPad / pantallas intermedias */

@media (min-width:761px) and (max-width:1024px){

  #clientBookingScreen .client-booking-shell{
    width:calc(100% - 40px);
    max-width:920px;
    padding:20px 0 36px;
  }

  #clientBookingScreen .client-booking-header{
    min-height:68px;
    padding:10px 16px;
    margin-bottom:20px;
    border-radius:20px;
  }

  #clientBookingScreen .client-booking-hero{
    padding:52px 32px 42px;
    margin-bottom:20px;
    border-radius:28px;
  }

  #clientBookingScreen .client-hero-copy{
    max-width:680px;
  }

  #clientBookingScreen .client-hero-copy h1{
    font-size:clamp(44px,6.2vw,60px);
  }

  #clientBookingScreen .client-hero-copy>p{
    max-width:580px;
    font-size:16px;
  }

  #clientBookingScreen .client-hero-benefits{
    margin-top:20px;
  }

  #clientBookingScreen .client-booking-main{
    max-width:820px;
  }

  #clientBookingScreen .client-booking-card{
    padding:32px;
    border-radius:28px;
  }

}


/* SMARTPHONE */

@media (max-width:760px){

  #clientBookingScreen{
    overflow-x:hidden;
  }

  #clientBookingScreen .client-booking-shell{
    width:100%;
    max-width:none;
    padding:0 12px 28px;
  }

  #clientBookingScreen .client-booking-header{
    min-height:64px;
    margin:0 -12px 12px;
    padding:9px 14px;
    border-radius:0 0 18px 18px;
    border-top:0;
  }

  #clientBookingScreen .client-brand>div{
    column-gap:9px;
    min-width:0;
  }

  #clientBookingScreen .client-business-logo{
    width:40px;
    height:40px;
    border-radius:12px;
  }

  #clientBookingScreen #clientBusinessName{
    max-width:150px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:14px;
  }

  #clientBookingScreen .client-close-btn{
    min-height:38px;
    padding:0 11px;
    flex:none;
    white-space:nowrap;
    font-size:11px;
  }

  #clientBookingScreen .client-booking-hero{
    padding:36px 16px 30px;
    margin-bottom:12px;
    border-radius:22px;
  }

  #clientBookingScreen .client-booking-hero::before{
    width:280px;
    height:280px;
    top:-205px;
  }

  #clientBookingScreen .client-eyebrow{
    min-height:27px;
    padding:0 10px;
    font-size:10px;
  }

  #clientBookingScreen .client-hero-copy h1{
    margin:13px 0 11px;
    font-size:clamp(34px,10.8vw,48px);
    line-height:1;
    letter-spacing:-.05em;
  }

  #clientBookingScreen .client-hero-copy>p{
    max-width:330px;
    font-size:14px;
    line-height:1.55;
  }

  #clientBookingScreen .client-hero-benefits{
    gap:7px;
    margin-top:18px;
  }

  #clientBookingScreen .client-hero-benefits span{
    padding:7px 9px;
    font-size:10.5px;
  }

  #clientBookingScreen .client-booking-main{
    width:100%;
    max-width:none;
  }

  #clientBookingScreen .client-booking-card{
    padding:20px 16px;
    border-radius:22px;
  }

}


/* SMARTPHONE COMPACTO */

@media (max-width:430px){

  #clientBookingScreen .client-booking-shell{
    padding-left:10px;
    padding-right:10px;
  }

  #clientBookingScreen .client-booking-header{
    margin-left:-10px;
    margin-right:-10px;
    padding-left:12px;
    padding-right:12px;
  }

  #clientBookingScreen .client-business-logo{
    width:38px;
    height:38px;
  }

  #clientBookingScreen #clientBusinessName{
    max-width:125px;
    font-size:13px;
  }

  #clientBookingScreen .client-close-btn{
    min-height:36px;
    padding:0 9px;
    font-size:10.5px;
  }

  #clientBookingScreen .client-booking-hero{
    padding:32px 13px 27px;
  }

  #clientBookingScreen .client-hero-copy h1{
    font-size:clamp(32px,10.5vw,43px);
  }

  #clientBookingScreen .client-hero-benefits{
    max-width:310px;
    margin-left:auto;
    margin-right:auto;
  }

  #clientBookingScreen .client-booking-card{
    padding:18px 14px;
    border-radius:20px;
  }

}


/* PANTALLAS MUY ESTRECHAS */

@media (max-width:380px){

  #clientBookingScreen #clientBusinessName{
    max-width:105px;
  }

  #clientBookingScreen .client-close-btn{
    padding:0 8px;
    font-size:10px;
  }

  #clientBookingScreen .client-hero-copy h1{
    font-size:34px;
  }

  #clientBookingScreen .client-hero-benefits span{
    font-size:10px;
  }

}

/* ==========================================================
   RESERVAPP PUBLIC BOOKING RESPONSIVE V2 — COMPACT HERO
   Prioridad UX: llegar más rápido a la reserva
   ========================================================== */

@media (max-width:760px){

  #clientBookingScreen .client-booking-hero{
    padding:22px 16px 20px;
    margin-bottom:10px;
    text-align:left;
    background:#fff;
    border-radius:18px;
    box-shadow:0 8px 24px rgba(16,19,26,.045);
  }

  #clientBookingScreen .client-booking-hero::before{
    display:none;
  }

  #clientBookingScreen .client-hero-copy{
    max-width:none;
    margin:0;
  }

  #clientBookingScreen .client-eyebrow{
    min-height:auto;
    padding:0;
    background:transparent;
    font-size:9.5px;
    letter-spacing:.14em;
  }

  #clientBookingScreen .client-hero-copy h1{
    margin:7px 0 7px;
    font-size:27px;
    line-height:1.08;
    letter-spacing:-.04em;
  }

  #clientBookingScreen .client-hero-copy h1 br{
    display:none;
  }

  #clientBookingScreen .client-hero-copy h1 span{
    color:inherit;
  }

  #clientBookingScreen .client-hero-copy>p{
    max-width:none;
    margin:0;
    font-size:12.5px;
    line-height:1.5;
    color:var(--pb-muted);
  }

  #clientBookingScreen .client-hero-benefits{
    display:none;
  }

}


@media (max-width:430px){

  #clientBookingScreen .client-booking-hero{
    padding:19px 14px 18px;
    border-radius:16px;
  }

  #clientBookingScreen .client-hero-copy h1{
    font-size:25px;
  }

  #clientBookingScreen .client-hero-copy>p{
    font-size:12px;
  }

}

/* ==========================================================
   RESERVAPP PUBLIC BOOKING RESPONSIVE V3 — SIMPLE PROGRESS
   Mobile: reemplaza pestañas con scroll por progreso compacto
   ========================================================== */

@media (max-width:760px){

  #clientBookingScreen .client-booking-progress{
    position:relative;
    display:block;
    overflow:visible;
    margin:0 0 22px;
    padding:0 0 18px;
    background:transparent;
    border-radius:0;
  }

  #clientBookingScreen .client-booking-progress::before{
    content:"Paso 1 de 4";
    display:block;
    margin-bottom:10px;
    color:var(--pb-muted);
    font-size:11px;
    font-weight:800;
    letter-spacing:.04em;
  }

  #clientBookingScreen .client-booking-progress::after{
    content:"";
    display:block;
    width:25%;
    height:5px;
    border-radius:999px;
    background:var(--pb-blue);
    box-shadow:
      0 0 0 999px #E9EDF3;
    clip-path:inset(0 -999px 0 0 round 999px);
  }

  #clientBookingScreen .client-booking-progress span{
    display:none;
  }

}

@media (max-width:430px){

  #clientBookingScreen .client-booking-progress{
    margin-bottom:18px;
    padding-bottom:14px;
  }

}

/* ==========================================================
   RESERVAPP PUBLIC BOOKING V4 — VISUAL SERVICES
   Mobile-first service picker
   ========================================================== */

#clientBookingScreen .client-service-options{
  display:none;
}

@media (max-width:760px){

  #clientBookingScreen #clientBookingService{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }

  #clientBookingScreen .client-service-options{
    display:grid;
    gap:9px;
  }

  #clientBookingScreen .client-service-option{
    width:100%;
    min-height:68px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:13px 15px;
    border:1px solid #E0E4EA;
    border-radius:15px;
    background:#fff;
    color:var(--pb-ink);
    text-align:left;
    font:inherit;
    cursor:pointer;
    transition:
      border-color .15s ease,
      background .15s ease,
      box-shadow .15s ease,
      transform .15s ease;
  }

  #clientBookingScreen .client-service-option:active{
    transform:scale(.99);
  }

  #clientBookingScreen .client-service-option-main{
    min-width:0;
    display:grid;
    gap:4px;
  }

  #clientBookingScreen .client-service-option-main strong{
    font-size:14px;
    line-height:1.3;
  }

  #clientBookingScreen .client-service-option-main small{
    color:var(--pb-muted);
    font-size:11.5px;
    line-height:1.3;
  }

  #clientBookingScreen .client-service-option-price{
    flex:none;
    color:#343943;
    font-size:12.5px;
    white-space:nowrap;
  }

  #clientBookingScreen .client-service-option.selected{
    border-color:var(--pb-blue);
    background:rgba(0,87,255,.055);
    box-shadow:0 0 0 3px rgba(0,87,255,.08);
  }

  #clientBookingScreen .client-service-option.selected::after{
    content:"✓";
    flex:none;
    width:24px;
    height:24px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--pb-blue);
    color:#fff;
    font-size:12px;
    font-weight:800;
  }

  #clientBookingScreen .client-service-option.selected
  .client-service-option-price{
    display:none;
  }

}

@media (max-width:430px){

  #clientBookingScreen .client-service-option{
    min-height:64px;
    padding:12px 13px;
  }

}

/* ==========================================================
   RESERVAPP PUBLIC BOOKING V5 — SERVICE DENSITY
   Menos scroll + jerarquía móvil más simple
   ========================================================== */

@media (max-width:760px){

  #clientBookingScreen .booking-section{
    padding:22px 0;
  }

  #clientBookingScreen .booking-section-head{
    display:block;
    margin-bottom:16px;
  }

  #clientBookingScreen .booking-section-number{
    display:none;
  }

  #clientBookingScreen .booking-section-head h2{
    font-size:21px;
    line-height:1.15;
    letter-spacing:-.035em;
  }

  #clientBookingScreen .booking-section-head p{
    margin-top:5px;
    font-size:12.5px;
    line-height:1.45;
  }

  #clientBookingScreen .client-field>span{
    font-size:11.5px;
  }

  #clientBookingScreen .client-service-options{
    gap:8px;
  }

  #clientBookingScreen .client-service-option{
    min-height:60px;
    padding:11px 13px;
    border-radius:14px;
  }

  #clientBookingScreen .client-service-option-main strong{
    font-size:13.5px;
  }

  #clientBookingScreen .client-service-option-main small{
    font-size:11px;
  }

  #clientBookingScreen .client-service-options-toggle{
    width:100%;
    min-height:42px;
    border:0;
    border-radius:12px;
    background:transparent;
    color:var(--pb-blue);
    font:inherit;
    font-size:12px;
    font-weight:800;
    cursor:pointer;
  }

  #clientBookingScreen .client-service-options-toggle:active{
    background:rgba(0,87,255,.06);
  }

}

@media (max-width:430px){

  #clientBookingScreen .booking-section{
    padding:20px 0;
  }

  #clientBookingScreen .client-service-option{
    min-height:58px;
  }

}

/* ==========================================================
   RESERVAPP PUBLIC BOOKING V6 — VISUAL PROFESSIONALS
   Selector táctil compacto para smartphone
   ========================================================== */

#clientBookingScreen .client-professional-options{
  display:none;
}

@media (max-width:760px){

  #clientBookingScreen #clientBookingProfessional{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }

  #clientBookingScreen .client-professional-options{
    display:grid;
    gap:8px;
  }

  #clientBookingScreen .client-professional-option{
    width:100%;
    min-height:54px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 13px;
    border:1px solid #E0E4EA;
    border-radius:14px;
    background:#fff;
    color:var(--pb-ink);
    text-align:left;
    font:inherit;
    cursor:pointer;
    transition:
      border-color .15s ease,
      background .15s ease,
      box-shadow .15s ease,
      transform .15s ease;
  }

  #clientBookingScreen .client-professional-option:active{
    transform:scale(.99);
  }

  #clientBookingScreen .client-professional-option-copy{
    min-width:0;
    display:grid;
    gap:2px;
  }

  #clientBookingScreen .client-professional-option-copy strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:13.5px;
    line-height:1.3;
  }

  #clientBookingScreen .client-professional-option-copy small{
    color:var(--pb-muted);
    font-size:11px;
    line-height:1.3;
  }

  #clientBookingScreen .client-professional-option.selected{
    border-color:var(--pb-blue);
    background:rgba(0,87,255,.055);
    box-shadow:0 0 0 3px rgba(0,87,255,.08);
  }

  #clientBookingScreen .client-professional-option-check{
    flex:none;
    width:24px;
    height:24px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--pb-blue);
    color:#fff;
    font-size:12px;
    font-weight:800;
  }

  #clientBookingScreen #clientProfessionalHelper{
    margin-top:9px;
    padding:9px 11px;
    font-size:10.5px;
    line-height:1.4;
  }

}

@media (max-width:430px){

  #clientBookingScreen .client-professional-option{
    min-height:52px;
    padding:9px 12px;
  }

}

/* ==========================================================
   RESERVAPP PUBLIC BOOKING V7 — QUICK DATES
   Fecha mobile-first + calendario secundario
   ========================================================== */

#clientBookingScreen .client-quick-dates,
#clientBookingScreen .client-other-date-btn{
  display:none;
}

@media (max-width:760px){

  #clientBookingScreen .client-quick-date-block{
    display:grid;
    gap:10px;
  }

  #clientBookingScreen .client-quick-date-label{
    color:var(--pb-ink);
    font-size:11.5px;
    font-weight:800;
  }

  #clientBookingScreen .client-quick-dates{
    display:grid;
    grid-template-columns:repeat(5, minmax(0,1fr));
    gap:6px;
  }

  #clientBookingScreen .client-quick-date{
    min-width:0;
    min-height:68px;
    display:grid;
    place-items:center;
    align-content:center;
    gap:1px;
    padding:7px 3px;
    border:1px solid #E0E4EA;
    border-radius:13px;
    background:#fff;
    color:var(--pb-ink);
    font:inherit;
    cursor:pointer;
  }

  #clientBookingScreen .client-quick-date span{
    overflow:hidden;
    width:100%;
    color:var(--pb-muted);
    font-size:9px;
    font-weight:700;
    text-align:center;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-transform:capitalize;
  }

  #clientBookingScreen .client-quick-date strong{
    font-size:17px;
    line-height:1.15;
  }

  #clientBookingScreen .client-quick-date small{
    color:var(--pb-muted);
    font-size:8px;
    font-weight:800;
  }

  #clientBookingScreen .client-quick-date.selected{
    border-color:var(--pb-blue);
    background:var(--pb-blue);
    color:#fff;
    box-shadow:0 6px 16px rgba(0,87,255,.18);
  }

  #clientBookingScreen .client-quick-date.selected span,
  #clientBookingScreen .client-quick-date.selected small{
    color:rgba(255,255,255,.82);
  }

  #clientBookingScreen .client-other-date-btn{
    display:block;
    justify-self:start;
    min-height:34px;
    padding:4px 2px;
    border:0;
    background:transparent;
    color:var(--pb-blue);
    font:inherit;
    font-size:11.5px;
    font-weight:800;
    cursor:pointer;
  }

  #clientBookingScreen .client-native-date{
    display:none;
    margin-top:2px;
  }

  #clientBookingScreen .client-native-date.visible{
    display:grid;
  }

  #clientBookingScreen .client-native-date input{
    min-height:48px;
    font-size:16px;
  }

  #clientBookingScreen .client-slot-panel{
    margin-top:16px;
  }

}

@media (max-width:430px){

  #clientBookingScreen .client-quick-dates{
    gap:5px;
  }

  #clientBookingScreen .client-quick-date{
    min-height:64px;
    border-radius:12px;
  }

  #clientBookingScreen .client-quick-date strong{
    font-size:16px;
  }

}

/* ==========================================================
   RESERVAPP PUBLIC BOOKING V8 — DYNAMIC STICKY PROGRESS
   ========================================================== */

#clientBookingScreen .client-booking-progress{
  position:sticky;
  top:0;
  z-index:25;
  width:100%;
  padding:10px 0 8px;
  background:rgba(248,249,252,.96);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

#clientBookingScreen .client-booking-progress-track{
  width:100%;
  height:5px;
  overflow:hidden;
  border-radius:999px;
  background:#E5E9F0;
}

#clientBookingScreen .client-booking-progress-bar{
  width:0;
  height:100%;
  border-radius:inherit;
  background:var(--pb-blue);
  transition:width .28s ease;
}

@media (max-width:760px){

  #clientBookingScreen .client-booking-progress{
    top:0;
    padding:8px 0 7px;
  }

  #clientBookingScreen .client-booking-progress-track{
    height:4px;
  }

}

@media (prefers-reduced-motion:reduce){

  #clientBookingScreen .client-booking-progress-bar{
    transition:none;
  }

}

/* ==========================================================
   RESERVAPP PUBLIC BOOKING V8.2 — PROGRESS HOTFIX
   El progreso público es únicamente una barra visual.
   ========================================================== */

#clientBookingScreen .client-booking-progress::before,
#clientBookingScreen .client-booking-progress::after{
  content:none !important;
  display:none !important;
}

#clientBookingScreen .client-booking-progress{
  min-height:0 !important;
}

/* ==========================================================
   RESERVAPP PUBLIC BOOKING V9 — COMPACT HEADER AND HELP
   ========================================================== */

/* ----------------------------------------------------------
   CABECERA
   ---------------------------------------------------------- */

@media (max-width:760px){

  #clientBookingScreen .client-booking-header{
    min-height:auto !important;
    padding:14px 18px !important;
  }

  #clientBookingScreen .client-booking-brand{
    gap:12px !important;
  }

  #clientBookingScreen .client-booking-brand-logo,
  #clientBookingScreen .client-booking-business-logo{
    width:54px !important;
    height:54px !important;
    min-width:54px !important;
    min-height:54px !important;
    border-radius:16px !important;
  }

  #clientBookingScreen .client-booking-brand strong,
  #clientBookingScreen .client-booking-business-name{
    font-size:20px !important;
    line-height:1.15 !important;
  }

}


/* ----------------------------------------------------------
   AYUDA
   ---------------------------------------------------------- */

#clientBookingScreen .client-booking-help-inline{
  position:relative;
}

@media (max-width:760px){

  #clientBookingScreen .client-booking-help-inline{
    margin-top:18px !important;
    padding:18px !important;
    border:1px solid #E3E7EE !important;
    border-radius:18px !important;
    background:#fff !important;
    box-shadow:none !important;
  }

  #clientBookingScreen .client-booking-help-icon{
    display:none !important;
  }

  #clientBookingScreen .client-booking-help-copy{
    width:100%;
  }

  #clientBookingScreen .client-booking-help-copy .client-eyebrow{
    display:none !important;
  }

  #clientBookingScreen .client-booking-help-copy > strong{
    display:block;
    margin:0 0 5px;
    color:var(--pb-ink);
    font-size:15px;
    line-height:1.3;
  }

  #clientBookingScreen .client-booking-help-copy > strong::after{
    content:" Podemos ayudarte.";
    color:var(--pb-muted);
    font-weight:500;
  }

  #clientBookingScreen .client-booking-help-actions{
    display:flex !important;
    flex-wrap:wrap;
    gap:8px;
    margin-top:14px;
  }

  /*
   * El teléfono sigue usando el href tel: existente,
   * pero ya no mostramos el número al usuario.
   */
  #clientBookingScreen #clientHelpPhone{
    min-height:42px;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    padding:0 16px;
    border:1px solid var(--pb-blue);
    border-radius:12px;
    background:var(--pb-blue);
    color:#fff !important;
    font-size:0 !important;
    font-weight:800;
    text-decoration:none !important;
  }

  #clientBookingScreen #clientHelpPhone::before{
    content:"Contactar";
    font-size:12px;
  }

  #clientBookingScreen #clientHelpMapsLink{
    min-height:42px;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    padding:0 16px;
    border:1px solid #DCE2EA;
    border-radius:12px;
    background:#fff;
    color:var(--pb-ink) !important;
    font-size:12px;
    font-weight:800;
    text-decoration:none !important;
  }

  #clientBookingScreen #clientHelpEmail,
  #clientBookingScreen #clientHelpAddress{
    font-size:11px;
  }

}

@media (max-width:430px){

  #clientBookingScreen .client-booking-help-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr;
  }

  #clientBookingScreen #clientHelpPhone,
  #clientBookingScreen #clientHelpMapsLink{
    width:100%;
    padding:0 10px;
  }

}

/* ==========================================================
   RESERVAPP PUBLIC BOOKING V9.1 — HELP MOBILE FIX
   ========================================================== */

@media (max-width:760px){

  /* Tarjeta completa */
  #clientBookingScreen .client-booking-help.client-booking-help-inline{
    display:block !important;
    width:100% !important;
    min-height:0 !important;
    height:auto !important;
    margin:18px 0 0 !important;
    padding:16px !important;
    box-sizing:border-box !important;
    overflow:visible !important;
  }

  /* Quitar elementos decorativos antiguos */
  #clientBookingScreen .client-booking-help-icon,
  #clientBookingScreen .client-booking-help::before,
  #clientBookingScreen .client-booking-help::after{
    display:none !important;
    content:none !important;
  }

  #clientBookingScreen .client-booking-help-copy{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
  }

  #clientBookingScreen .client-booking-help-copy .client-eyebrow{
    display:none !important;
  }

  #clientBookingScreen .client-booking-help-copy > strong{
    display:block !important;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    font-size:15px !important;
    line-height:1.35 !important;
    white-space:normal !important;
  }

  #clientBookingScreen .client-booking-help-copy > strong::after{
    content:" · Podemos ayudarte.";
    color:var(--pb-muted);
    font-weight:500;
  }

  /* Acciones */
  #clientBookingScreen .client-booking-help-actions{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    align-items:stretch !important;
    width:100% !important;
    gap:8px !important;
    margin:13px 0 0 !important;
  }

  #clientBookingScreen #clientHelpPhone,
  #clientBookingScreen #clientHelpMapsLink{
    position:static !important;
    float:none !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:42px !important;
    min-height:42px !important;

    margin:0 !important;
    padding:0 12px !important;

    box-sizing:border-box !important;

    border-radius:11px !important;

    line-height:1 !important;
    text-align:center !important;
    white-space:nowrap !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
  }

  #clientBookingScreen #clientHelpPhone{
    border:1px solid var(--pb-blue) !important;
    background:var(--pb-blue) !important;
    color:#fff !important;
    font-size:0 !important;
  }

  #clientBookingScreen #clientHelpPhone::before{
    content:"Contactar";
    display:block;
    font-size:12px !important;
    font-weight:800;
    line-height:1 !important;
    white-space:nowrap !important;
  }

  #clientBookingScreen #clientHelpMapsLink{
    border:1px solid #DCE2EA !important;
    background:#fff !important;
    color:var(--pb-ink) !important;
    font-size:12px !important;
    font-weight:800 !important;
  }

  /* Información secundaria, si existe */
  #clientBookingScreen #clientHelpEmail,
  #clientBookingScreen #clientHelpAddress{
    grid-column:1 / -1;
    width:100% !important;
    max-width:100% !important;
    margin:2px 0 0 !important;
    font-size:11px !important;
    line-height:1.4 !important;
    overflow-wrap:anywhere !important;
  }

}

@media (max-width:380px){

  #clientBookingScreen .client-booking-help-actions{
    grid-template-columns:1fr !important;
  }

}

/* ==========================================================
   RESERVAPP PUBLIC BOOKING V9.2 — FLOATING HELP
   ========================================================== */

#clientBookingScreen .client-help-launcher{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:80;

  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  padding:0 16px 0 10px;

  border:0;
  border-radius:999px;

  background:var(--pb-blue);
  color:#fff;

  box-shadow:
    0 10px 30px rgba(0,87,255,.24);

  font:inherit;
  font-size:13px;
  font-weight:800;

  cursor:pointer;
}

#clientBookingScreen .client-help-launcher[hidden]{
  display:none !important;
}

#clientBookingScreen .client-help-launcher-icon{
  width:28px;
  height:28px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:rgba(255,255,255,.18);

  font-size:15px;
  font-weight:900;
}

#clientBookingScreen .client-booking-help.client-booking-help-inline{
  position:fixed !important;

  right:22px !important;
  bottom:82px !important;

  z-index:79;

  width:min(340px, calc(100vw - 32px)) !important;
  min-height:0 !important;
  height:auto !important;

  margin:0 !important;
  padding:20px !important;

  border:1px solid #E0E5EC !important;
  border-radius:20px !important;

  background:#fff !important;

  box-shadow:
    0 18px 50px rgba(20,31,52,.18) !important;

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transform:translateY(8px) scale(.98);

  transition:
    opacity .18s ease,
    transform .18s ease,
    visibility .18s ease;
}

#clientBookingScreen .client-booking-help.client-booking-help-inline.help-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;

  transform:translateY(0) scale(1);
}

/*
 El atributo hidden lo utiliza la lógica del negocio.
 Cuando el negocio tiene soporte disponible, JS mantiene
 el launcher activo; el panel sigue controlado por help-open.
*/
#clientBookingScreen .client-booking-help.client-booking-help-inline[hidden]{
  display:block !important;
}

#clientBookingScreen .client-help-close{
  position:absolute;
  top:10px;
  right:10px;

  width:32px;
  height:32px;

  display:grid;
  place-items:center;

  border:0;
  border-radius:50%;

  background:#F2F4F7;
  color:var(--pb-ink);

  font-size:21px;
  line-height:1;

  cursor:pointer;
}

#clientBookingScreen .client-booking-help-copy{
  width:100% !important;
  padding-right:26px;
}

#clientBookingScreen .client-booking-help-copy > strong{
  display:block !important;
  margin:0 !important;

  font-size:16px !important;
  line-height:1.3 !important;
}

#clientBookingScreen .client-booking-help-copy > strong::after{
  content:"" !important;
}

#clientBookingScreen .client-booking-help-actions{
  display:grid !important;
  grid-template-columns:1fr !important;

  width:100% !important;

  gap:8px !important;
  margin-top:16px !important;
}

#clientBookingScreen #clientHelpPhone,
#clientBookingScreen #clientHelpMapsLink{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;

  min-height:44px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  margin:0 !important;
  padding:0 14px !important;

  border-radius:12px !important;

  white-space:nowrap !important;
  word-break:normal !important;
}

#clientBookingScreen #clientHelpPhone{
  border:1px solid var(--pb-blue) !important;
  background:var(--pb-blue) !important;
  color:#fff !important;

  font-size:0 !important;
}

#clientBookingScreen #clientHelpPhone::before{
  content:"Contactar";

  font-size:12px !important;
  font-weight:800;
}

#clientBookingScreen #clientHelpMapsLink{
  border:1px solid #DCE2EA !important;
  background:#fff !important;
  color:var(--pb-ink) !important;

  font-size:12px !important;
  font-weight:800 !important;
}

@media (max-width:760px){

  #clientBookingScreen .client-help-launcher{
    right:16px;
    bottom:18px;

    min-height:46px;

    padding-right:15px;
  }

  #clientBookingScreen .client-booking-help.client-booking-help-inline{
    right:16px !important;
    bottom:74px !important;

    width:calc(100vw - 32px) !important;

    padding:18px !important;
  }

}

@media (prefers-reduced-motion:reduce){

  #clientBookingScreen .client-booking-help.client-booking-help-inline{
    transition:none;
  }

}

/* ==========================================================
   RESERVAPP PUBLIC BOOKING V10 — COMPACT SUMMARY
   ========================================================== */

@media (max-width:760px){

  /*
   * Ya existe liveBookingSummary, por lo que este resumen
   * anterior es redundante en smartphone.
   */
  #clientBookingScreen #clientBookingSummary{
    display:none !important;
  }

  #clientBookingScreen .live-booking-summary{
    width:100% !important;
    margin:18px 0 12px !important;
    padding:17px 18px !important;

    border:1px solid #DFE4EC !important;
    border-radius:17px !important;

    background:#fff !important;
    box-shadow:none !important;
  }

  #clientBookingScreen .live-booking-summary-title{
    display:flex !important;
    align-items:flex-end !important;
    justify-content:space-between !important;
    gap:12px !important;

    margin:0 0 14px !important;
    padding:0 0 12px !important;

    border-bottom:1px solid #E9EDF2;
  }

  #clientBookingScreen .live-booking-summary-title span{
    margin:0 !important;

    color:var(--pb-blue) !important;

    font-size:9px !important;
    font-weight:900 !important;
    line-height:1 !important;

    letter-spacing:.13em !important;
  }

  #clientBookingScreen .live-booking-summary-title strong{
    margin:0 !important;

    color:var(--pb-muted) !important;

    font-size:10.5px !important;
    font-weight:600 !important;
    line-height:1.2 !important;

    text-align:right !important;
  }

  /*
   * Sin cuatro tarjetas individuales.
   * Una sola tarjeta contiene toda la cita.
   */
  #clientBookingScreen .live-booking-summary-items{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:11px 16px !important;

    width:100% !important;
  }

  #clientBookingScreen .live-booking-summary-items > div{
    min-width:0 !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    border-radius:0 !important;

    background:transparent !important;
    box-shadow:none !important;
  }

  /*
   * Servicio ocupa el ancho completo.
   */
  #clientBookingScreen .live-summary-service{
    grid-column:1 / -1;
  }

  /*
   * Profesional también ocupa el ancho completo.
   */
  #clientBookingScreen .live-summary-professional{
    grid-column:1 / -1;
  }

  /*
   * Fecha + hora quedan juntas al final.
   */
  #clientBookingScreen .live-summary-date{
    grid-column:1;
  }

  #clientBookingScreen .live-summary-time{
    grid-column:2;
    text-align:right;
  }

  #clientBookingScreen .live-booking-summary-items span{
    display:block !important;

    margin:0 0 3px !important;

    color:var(--pb-muted) !important;

    font-size:9px !important;
    font-weight:600 !important;
    line-height:1.2 !important;
  }

  #clientBookingScreen .live-booking-summary-items strong{
    display:block !important;

    max-width:100% !important;

    color:var(--pb-ink) !important;

    font-size:12.5px !important;
    font-weight:800 !important;
    line-height:1.3 !important;

    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  /*
   * CTA más próximo al resumen y menos alto.
   */
  #clientBookingScreen .client-confirm-btn{
    width:100% !important;
    min-height:52px !important;

    margin:12px 0 0 !important;
    padding:0 18px !important;

    border-radius:14px !important;

    font-size:14px !important;
    font-weight:800 !important;
  }

  #clientBookingScreen .client-booking-message{
    margin-top:9px !important;
  }

}

@media (max-width:380px){

  #clientBookingScreen .live-booking-summary{
    padding:15px !important;
  }

  #clientBookingScreen .live-booking-summary-title{
    display:block !important;
  }

  #clientBookingScreen .live-booking-summary-title strong{
    display:block !important;
    margin-top:4px !important;
    text-align:left !important;
  }

}

/* ==========================================================
   RESERVAPP PUBLIC BOOKING V9.3 — ADAPTIVE HELP
   ========================================================== */

@media (max-width:760px){

  #clientBookingScreen .client-help-launcher{
    right:14px !important;

    bottom:
      calc(
        14px + env(safe-area-inset-bottom, 0px)
      ) !important;

    min-width:0 !important;
    width:auto !important;

    min-height:42px !important;
    height:42px !important;

    gap:6px !important;

    padding:0 13px 0 7px !important;

    border-radius:999px !important;

    font-size:12px !important;

    box-shadow:
      0 8px 22px rgba(0,87,255,.22) !important;

    transition:
      width .18s ease,
      padding .18s ease,
      transform .18s ease,
      box-shadow .18s ease !important;
  }

  #clientBookingScreen .client-help-launcher-icon{
    width:28px !important;
    height:28px !important;

    flex:0 0 28px;

    font-size:14px !important;
  }

  /*
   * Cerca de horarios y resumen:
   * dejamos únicamente el botón circular.
   */
  #clientBookingScreen .client-help-launcher.compact{
    width:42px !important;
    min-width:42px !important;
    max-width:42px !important;

    padding:0 !important;

    gap:0 !important;
  }

  #clientBookingScreen .client-help-launcher.compact
  .client-help-launcher-icon{
    width:100% !important;
    height:100% !important;

    background:transparent !important;
  }

  #clientBookingScreen .client-help-launcher.compact
  > span:not(.client-help-launcher-icon){
    display:none !important;
  }

  /*
   * El panel se mantiene encima del launcher.
   */
  #clientBookingScreen
  .client-booking-help.client-booking-help-inline{
    right:14px !important;

    bottom:
      calc(
        66px + env(safe-area-inset-bottom, 0px)
      ) !important;

    max-height:
      calc(
        100dvh - 100px -
        env(safe-area-inset-bottom, 0px)
      );

    overflow:auto !important;
  }

}

@media (prefers-reduced-motion:reduce){

  #clientBookingScreen .client-help-launcher{
    transition:none !important;
  }

}

/* ==========================================================
   RESERVAPP PUBLIC BOOKING V11 — MOBILE FLOW DENSITY
   Flujo más continuo y menos parecido a formulario
   ========================================================== */

@media (max-width:760px){

  /* --------------------------------------------------------
     SECCIONES
     -------------------------------------------------------- */

  #clientBookingScreen .booking-section{
    padding-top:18px !important;
    padding-bottom:18px !important;
  }

  #clientBookingScreen .booking-section + .booking-section{
    border-top:1px solid #E9EDF2 !important;
  }

  #clientBookingScreen .booking-section-head{
    margin-bottom:13px !important;
  }

  #clientBookingScreen .booking-section-head h2{
    margin:0 !important;
    font-size:20px !important;
    line-height:1.18 !important;
  }

  #clientBookingScreen .booking-section-head p{
    margin:5px 0 0 !important;
    font-size:12px !important;
    line-height:1.45 !important;
  }


  /* --------------------------------------------------------
     ETIQUETAS REPETIDAS
     Servicio / Profesional / Fecha
     -------------------------------------------------------- */

  #clientBookingScreen
  .client-field:has(#clientBookingService)
  > span,

  #clientBookingScreen
  .client-field:has(#clientBookingProfessional)
  > span,

  #clientBookingScreen
  .client-quick-date-label{
    display:none !important;
  }


  /* --------------------------------------------------------
     SERVICIOS
     -------------------------------------------------------- */

  #clientBookingScreen .client-service-options{
    gap:7px !important;
  }

  #clientBookingScreen .client-service-option{
    min-height:56px !important;
    padding:9px 12px !important;
    border-radius:13px !important;
  }

  #clientBookingScreen .client-service-option-main strong{
    font-size:13.5px !important;
  }

  #clientBookingScreen .client-service-option-main small{
    margin-top:2px !important;
    font-size:10.5px !important;
  }

  #clientBookingScreen .client-service-options-toggle{
    min-height:36px !important;
    margin-top:2px !important;
    font-size:11.5px !important;
  }


  /* --------------------------------------------------------
     PROFESIONAL
     -------------------------------------------------------- */

  #clientBookingScreen .client-professional-options{
    gap:7px !important;
  }

  #clientBookingScreen .client-professional-option{
    min-height:50px !important;
  }

  #clientBookingScreen #clientProfessionalHelper{
    margin-top:8px !important;
    padding:9px 11px !important;
    border-radius:11px !important;
  }


  /* --------------------------------------------------------
     FECHAS
     -------------------------------------------------------- */

  #clientBookingScreen .client-quick-date-block{
    gap:8px !important;
  }

  #clientBookingScreen .client-quick-dates{
    margin-top:0 !important;
  }

  #clientBookingScreen .client-other-date-btn{
    min-height:30px !important;
    margin-top:2px !important;
  }


  /* --------------------------------------------------------
     HORARIOS
     -------------------------------------------------------- */

  #clientBookingScreen .client-slot-panel{
    margin-top:12px !important;
    padding:15px !important;
    border-radius:16px !important;
  }

  #clientBookingScreen .client-slot-header{
    margin-bottom:12px !important;
  }

  #clientBookingScreen .client-slot-header strong{
    font-size:13px !important;
  }

  #clientBookingScreen .client-slot-header small{
    margin-top:3px !important;
    font-size:10.5px !important;
    line-height:1.35 !important;
  }

  #clientBookingScreen .availability-segmented{
    min-height:42px !important;
    margin-bottom:11px !important;
  }

  #clientBookingScreen .availability-period{
    min-height:40px !important;
    font-size:11.5px !important;
  }

  #clientBookingScreen .client-time-slots{
    gap:7px !important;
  }

  #clientBookingScreen .time-slot{
    min-height:42px !important;
    border-radius:11px !important;
    font-size:12px !important;
  }


  /* --------------------------------------------------------
     DATOS PERSONALES
     -------------------------------------------------------- */

  #clientBookingScreen .form-split{
    gap:10px !important;
  }

  #clientBookingScreen .client-field{
    gap:6px !important;
  }

  #clientBookingScreen .client-field input{
    min-height:47px !important;
    border-radius:12px !important;
  }


  /* --------------------------------------------------------
     MENOS ESPACIO ANTES DEL RESUMEN FINAL
     -------------------------------------------------------- */

  #clientBookingScreen .live-booking-summary{
    margin-top:14px !important;
  }

  #clientBookingScreen .client-confirm-btn{
    margin-top:10px !important;
  }

}

@media (max-width:380px){

  #clientBookingScreen .booking-section{
    padding-top:16px !important;
    padding-bottom:16px !important;
  }

  #clientBookingScreen .booking-section-head h2{
    font-size:19px !important;
  }

}

/* ==========================================================
   RESERVAPP PUBLIC BOOKING V12 — CONTINUOUS PROGRESS
   Barra permanente durante todo el formulario
   ========================================================== */

@media (max-width:760px){

  /*
   * El formulario y sus contenedores no deben cortar
   * el comportamiento sticky.
   */
  #clientBookingScreen .client-booking-main,
  #clientBookingScreen .client-booking-card,
  #clientBookingScreen .client-booking-form{
    overflow:visible !important;
  }

  #clientBookingScreen .client-booking-progress{
    position:sticky !important;
    top:0 !important;
    z-index:70 !important;

    width:100% !important;

    margin:0 !important;
    padding:8px 0 7px !important;

    background:rgba(248,249,252,.97) !important;

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    box-shadow:
      0 1px 0 rgba(20,31,52,.05);
  }

  #clientBookingScreen .client-booking-progress-track{
    width:100% !important;
    height:4px !important;

    overflow:hidden;

    border-radius:999px !important;

    background:#E1E6ED !important;
  }

  #clientBookingScreen .client-booking-progress-bar{
    height:100% !important;

    border-radius:999px !important;

    background:var(--pb-blue) !important;

    transition:
      width .32s cubic-bezier(.2,.7,.2,1) !important;
  }

  /*
   * Al 100% sigue visible hasta que el sistema
   * muestre la confirmación de la reserva.
   */
  #clientBookingScreen
  .client-booking-progress.is-complete
  .client-booking-progress-bar{
    width:100%;
  }

}

@media (prefers-reduced-motion:reduce){

  #clientBookingScreen .client-booking-progress-bar{
    transition:none !important;
  }

}

/* ==========================================================
   RESERVAPP PUBLIC BOOKING V13 — SUCCESS EXPERIENCE
   ========================================================== */

#clientBookingScreen .client-booking-success.active{
  width:100%;
  max-width:720px;
  margin:0 auto;
  padding:48px 42px 40px;

  text-align:center;

  border:1px solid #E2E7EE;
  border-radius:28px;

  background:#fff;

  box-shadow:
    0 18px 50px rgba(20,31,52,.06);
}

#clientBookingScreen .client-success-check{
  display:grid;
  place-items:center;

  width:68px;
  height:68px;

  margin:0 auto 22px;

  border-radius:50%;

  background:#EAF8F0;
  color:#258451;

  font-size:32px;
  font-weight:800;
}

#clientBookingScreen .client-success-heading{
  max-width:560px;
  margin:0 auto;
}

#clientBookingScreen .client-success-heading .client-eyebrow{
  display:block;

  margin-bottom:10px;

  color:var(--pb-blue);

  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
}

#clientBookingScreen .client-success-heading h2{
  margin:0;

  color:#101722;

  font-size:clamp(34px,5vw,52px);
  line-height:1;
  letter-spacing:-.045em;
}

#clientBookingScreen #clientBookingSuccessText{
  margin:15px auto 0;

  color:#69758A;

  font-size:15px;
  line-height:1.55;
}

#clientBookingScreen .client-booking-success-details{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));

  gap:0;

  margin:30px 0 0;

  overflow:hidden;

  border:1px solid #E3E8EF;
  border-radius:17px;

  background:#FBFCFE;
}

#clientBookingScreen .client-booking-success-details > div{
  min-width:0;

  padding:15px 12px;

  border:0;
  border-right:1px solid #E3E8EF;

  background:transparent;
}

#clientBookingScreen
.client-booking-success-details > div:last-of-type{
  border-right:0;
}

#clientBookingScreen .client-booking-success-details span,
#clientBookingScreen .client-booking-success-details strong{
  display:block;
}

#clientBookingScreen .client-booking-success-details span{
  color:#929BAA;

  font-size:10px;
  font-weight:600;
}

#clientBookingScreen .client-booking-success-details strong{
  margin-top:5px;

  overflow-wrap:anywhere;

  color:#2D394E;

  font-size:12px;
  line-height:1.35;
}

#clientBookingScreen .client-success-manage{
  display:flex;
  align-items:center;
  justify-content:center;

  width:100%;
  min-height:50px;

  margin-top:18px;
  padding:0 18px;

  border-radius:13px;

  background:#111827;
  color:#fff !important;

  font-size:13px;
  font-weight:750;

  text-decoration:none !important;
}

#clientBookingScreen .client-success-manage[hidden]{
  display:none !important;
}

#clientBookingScreen .client-booking-success-actions{
  display:grid;
  grid-template-columns:1fr auto;

  align-items:center;

  gap:10px;

  margin-top:10px;
}

#clientBookingScreen
.client-booking-success-actions
#clientBookingSuccessCalendarBtn{
  width:100%;
  min-height:50px;

  border-radius:13px;
}

#clientBookingScreen .client-success-new{
  min-height:50px;

  padding:0 18px;

  border:0;
  background:transparent;

  color:#536176;

  font:inherit;
  font-size:12px;
  font-weight:700;

  cursor:pointer;
}

#clientBookingScreen .client-success-new:hover{
  color:var(--pb-blue);
}

#clientBookingScreen .client-success-note{
  display:block;

  max-width:500px;

  margin:22px auto 0;

  color:#8992A0;

  font-size:11px;
  line-height:1.5;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width:760px){

  #clientBookingScreen .client-booking-success.active{
    padding:28px 18px 24px;

    border-radius:20px;

    box-shadow:none;
  }

  #clientBookingScreen .client-success-check{
    width:54px;
    height:54px;

    margin-bottom:16px;

    font-size:25px;
  }

  #clientBookingScreen .client-success-heading .client-eyebrow{
    margin-bottom:8px;
    font-size:9.5px;
  }

  #clientBookingScreen .client-success-heading h2{
    font-size:36px;
  }

  #clientBookingScreen #clientBookingSuccessText{
    margin-top:11px;

    font-size:13px;
    line-height:1.45;
  }

  #clientBookingScreen .client-booking-success-details{
    grid-template-columns:1fr 1fr;

    margin-top:22px;
  }

  #clientBookingScreen .client-booking-success-details > div{
    padding:13px 10px;

    border-right:1px solid #E3E8EF;
    border-bottom:1px solid #E3E8EF;
  }

  #clientBookingScreen
  .client-booking-success-details > div:nth-child(2n){
    border-right:0;
  }

  #clientBookingScreen
  .client-booking-success-details > div:nth-last-child(-n+2){
    border-bottom:0;
  }

  #clientBookingScreen .client-success-manage{
    min-height:48px;
    margin-top:14px;
  }

  #clientBookingScreen .client-booking-success-actions{
    grid-template-columns:1fr;
    gap:4px;
    margin-top:8px;
  }

  #clientBookingScreen
  .client-booking-success-actions
  #clientBookingSuccessCalendarBtn{
    min-height:48px;
  }

  #clientBookingScreen .client-success-new{
    min-height:42px;
  }

  #clientBookingScreen .client-success-note{
    margin-top:15px;

    font-size:10.5px;
  }

}


/* ----------------------------------------------------------
   MÓVILES PEQUEÑOS
   ---------------------------------------------------------- */

@media (max-width:380px){

  #clientBookingScreen .client-booking-success.active{
    padding-left:14px;
    padding-right:14px;
  }

  #clientBookingScreen .client-success-heading h2{
    font-size:33px;
  }

}

/* ==========================================================
   RESERVAPP PUBLIC BOOKING V13.1 — SUCCESS POLISH
   ========================================================== */

/*
 * Reglas legacy de styles.css fuerzan display:block
 * sobre los strong del resumen.
 */
#clientBookingScreen #clientSuccessName[hidden],
#clientBookingScreen #clientSuccessPhone[hidden]{
  display:none !important;
}


/* Gestionar cita: acción importante pero secundaria */
#clientBookingScreen .client-success-manage{
  background:#F4F7FB !important;
  color:#172033 !important;

  border:1px solid #DCE3EC !important;

  box-shadow:none !important;

  transition:
    border-color .18s ease,
    background .18s ease,
    color .18s ease !important;
}

#clientBookingScreen .client-success-manage:hover{
  background:#EEF4FF !important;
  border-color:#BFD2FF !important;
  color:var(--pb-blue) !important;
}


/* Calendario pasa a ser el CTA visual principal */
#clientBookingScreen
.client-booking-success-actions
#clientBookingSuccessCalendarBtn{
  box-shadow:
    0 8px 18px rgba(0,87,255,.16) !important;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width:760px){

  #clientBookingScreen .client-booking-success.active{
    padding-top:24px !important;
    padding-bottom:20px !important;
  }

  #clientBookingScreen .client-success-check{
    margin-bottom:13px !important;
  }

  #clientBookingScreen
  .client-success-heading
  .client-eyebrow{
    margin-bottom:6px !important;
  }

  #clientBookingScreen #clientBookingSuccessText{
    margin-top:9px !important;
  }

  #clientBookingScreen .client-booking-success-details{
    margin-top:18px !important;
  }

  #clientBookingScreen .client-success-manage{
    min-height:46px !important;
    margin-top:12px !important;

    font-size:12.5px !important;
  }

  #clientBookingScreen .client-booking-success-actions{
    margin-top:7px !important;
  }

  #clientBookingScreen
  .client-booking-success-actions
  #clientBookingSuccessCalendarBtn{
    min-height:48px !important;
  }

  #clientBookingScreen .client-success-new{
    min-height:38px !important;
  }

  #clientBookingScreen .client-success-note{
    margin-top:12px !important;
  }

}

@media (prefers-reduced-motion:reduce){

  #clientBookingScreen .client-success-manage{
    transition:none !important;
  }

}

/* ==========================================================
   RESERVAPP PUBLIC BOOKING V13.2 — SUCCESS SPACING
   ========================================================== */

@media (max-width:760px){

  #clientBookingScreen .client-booking-success.active{
    padding-top:20px !important;
    padding-bottom:18px !important;
  }

  #clientBookingScreen .client-success-check{
    margin-bottom:11px !important;
  }

  #clientBookingScreen .client-booking-success-details{
    margin-top:16px !important;
  }

  #clientBookingScreen .client-success-manage{
    margin-top:10px !important;
  }

  #clientBookingScreen .client-success-note{
    margin-top:10px !important;
  }

}

/* ==========================================================
   RESERVAPP PUBLIC BOOKING V14 — COMPACT HERO
   ========================================================== */

#clientBookingScreen .client-booking-hero-compact{
  display:block !important;

  padding:30px 28px 26px !important;

  border-radius:22px !important;

  text-align:left !important;
}

#clientBookingScreen .client-booking-hero-compact::before{
  opacity:.35 !important;
}

#clientBookingScreen .client-booking-hero-compact .client-hero-copy{
  max-width:680px !important;
  margin:0 !important;
}

#clientBookingScreen .client-booking-hero-compact .client-eyebrow{
  display:block;

  margin-bottom:8px !important;

  font-size:10px !important;
  letter-spacing:.16em !important;
}

#clientBookingScreen .client-booking-hero-compact h1{
  margin:0 !important;

  max-width:none !important;

  font-size:clamp(28px,4.2vw,42px) !important;
  line-height:1.05 !important;
  letter-spacing:-.035em !important;
}

#clientBookingScreen .client-booking-hero-compact p{
  max-width:520px !important;

  margin:10px 0 0 !important;

  font-size:14px !important;
  line-height:1.45 !important;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width:760px){

  #clientBookingScreen .client-booking-hero-compact{
    margin-bottom:10px !important;

    padding:18px 18px 16px !important;

    border-radius:16px !important;
  }

  #clientBookingScreen .client-booking-hero-compact::before{
    display:none !important;
  }

  #clientBookingScreen .client-booking-hero-compact .client-eyebrow{
    margin-bottom:6px !important;

    font-size:9px !important;
  }

  #clientBookingScreen .client-booking-hero-compact h1{
    font-size:25px !important;
    line-height:1.08 !important;
  }

  #clientBookingScreen .client-booking-hero-compact p{
    margin-top:6px !important;

    font-size:12px !important;
    line-height:1.4 !important;
  }

}

@media (max-width:380px){

  #clientBookingScreen .client-booking-hero-compact{
    padding:16px 15px 14px !important;
  }

  #clientBookingScreen .client-booking-hero-compact h1{
    font-size:23px !important;
  }

}

/* RESERVAPP PUBLIC BOOKING V15 — DESKTOP PROPORTIONS */

@media (min-width:1100px){

  #clientBookingScreen .client-booking-header{
    max-width:1000px;
    margin-left:auto;
    margin-right:auto;
  }

  #clientBookingScreen .client-booking-hero{
    max-width:1000px;
    margin:20px auto 0;
  }

  #clientBookingScreen .client-booking-hero-compact{
    padding:22px 26px !important;
  }

  #clientBookingScreen .client-booking-hero-compact h1{
    font-size:34px !important;
  }

  #clientBookingScreen .client-booking-main{
    max-width:900px;
    margin:22px auto 0;
  }

  #clientBookingScreen .client-booking-card{
    padding:34px 40px;
    border-radius:24px;
  }

  #clientBookingScreen .booking-section{
    padding-top:24px;
    padding-bottom:24px;
  }

  #clientBookingScreen .client-booking-success.active{
    max-width:760px;
    padding:38px 40px 32px;
  }
}

@media (min-width:1600px){

  #clientBookingScreen .client-booking-header,
  #clientBookingScreen .client-booking-hero{
    max-width:1080px;
  }

  #clientBookingScreen .client-booking-main{
    max-width:920px;
  }

  #clientBookingScreen .client-booking-success.active{
    max-width:780px;
  }
}


/* RESERVAPP PUBLIC BOOKING V15.1 — TABLET + DESKTOP BALANCE */

/* TABLET / IPAD */
@media (min-width:761px) and (max-width:1099px){

  #clientBookingScreen .client-booking-header,
  #clientBookingScreen .client-booking-hero{
    width:92%;
    max-width:860px;
    margin-left:auto;
    margin-right:auto;
  }

  #clientBookingScreen .client-booking-header{
    padding:12px 16px;
  }

  #clientBookingScreen .client-booking-hero-compact{
    padding:18px 20px !important;
  }

  #clientBookingScreen .client-booking-main{
    width:88%;
    max-width:780px;
  }

  #clientBookingScreen .client-booking-progress{
    position:sticky;
    top:8px;
    z-index:70;
    max-width:560px;
    margin:0 auto 12px !important;
    padding:7px 10px !important;
    border-radius:999px;
    background:rgba(255,255,255,.94);
  }
}


/* MAC / WINDOWS */
@media (min-width:1100px){

  #clientBookingScreen .client-booking-header,
  #clientBookingScreen .client-booking-hero{
    max-width:920px;
  }

  #clientBookingScreen .client-booking-header{
    padding:12px 18px;
  }

  #clientBookingScreen .client-booking-hero{
    margin-top:16px;
  }

  #clientBookingScreen .client-booking-hero-compact{
    padding:18px 22px !important;
  }

  #clientBookingScreen .client-booking-hero-compact h1{
    font-size:30px !important;
  }

  #clientBookingScreen .client-booking-main{
    max-width:820px;
    margin-top:18px;
  }

  #clientBookingScreen .client-booking-progress{
    position:sticky;
    top:10px;
    z-index:70;
    max-width:620px;
    margin:0 auto 16px !important;
    padding:7px 10px !important;
    border-radius:999px;
    background:rgba(255,255,255,.94);
  }

  #clientBookingScreen .client-booking-progress-track{
    height:4px;
  }
}


/* RESERVAPP PUBLIC BOOKING V15.2 — UNIFIED LAYOUT */

/* TABLET / IPAD */
@media (min-width:761px) and (max-width:1099px){

  #clientBookingScreen .client-booking-header,
  #clientBookingScreen .client-booking-hero,
  #clientBookingScreen .client-booking-main{
    width:88% !important;
    max-width:780px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

/* MAC / WINDOWS */
@media (min-width:1100px){

  #clientBookingScreen .client-booking-header,
  #clientBookingScreen .client-booking-hero,
  #clientBookingScreen .client-booking-main{
    width:100% !important;
    max-width:820px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  #clientBookingScreen .client-booking-hero-compact{
    background:#fff !important;
    border:1px solid #e4e9f0 !important;
  }
}

/* Quitar decoración azul que compite con el progreso */
#clientBookingScreen .client-booking-hero-compact::before{
  display:none !important;
}

#clientBookingScreen .client-booking-hero-compact .client-eyebrow{
  display:inline-block !important;
  width:auto !important;
  padding:0 !important;
  background:transparent !important;
  border-radius:0 !important;
}

/* RESERVAPP PUBLIC BOOKING V15.9 — MOBILE ONLY PROGRESS */

@media (min-width:761px){
  #clientBookingScreen .client-booking-progress{
    display:none !important;
  }
}

/* RESERVAPP PUBLIC BOOKING V15.10 — SUCCESS RESPONSIVE BALANCE */

/* TABLET / IPAD */
@media (min-width:761px) and (max-width:1099px){

  #clientBookingScreen .client-booking-success.active{
    width:100% !important;
    max-width:none !important;

    margin-left:0 !important;
    margin-right:0 !important;

    padding:32px 30px 28px !important;
  }

  #clientBookingScreen .client-success-heading h2{
    font-size:30px !important;
  }

  #clientBookingScreen .client-booking-success-details{
    max-width:620px;
    margin-left:auto;
    margin-right:auto;
  }

  #clientBookingScreen .client-success-manage,
  #clientBookingScreen .client-booking-success-actions,
  #clientBookingScreen .client-success-new{
    max-width:620px;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}


/* MAC / WINDOWS */
@media (min-width:1100px){

  #clientBookingScreen .client-booking-success.active{
    width:100% !important;
    max-width:none !important;

    margin-left:0 !important;
    margin-right:0 !important;

    padding:38px 40px 32px !important;
  }

  #clientBookingScreen .client-booking-success-details{
    max-width:660px;
    margin-left:auto;
    margin-right:auto;
  }

  #clientBookingScreen .client-success-manage,
  #clientBookingScreen .client-booking-success-actions,
  #clientBookingScreen .client-success-new{
    max-width:660px;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}


/* ==========================================================
   RESERVAPP PUBLIC BOOKING V15.11 — DESKTOP SUCCESS COMPOSITION
   ========================================================== */

@media (min-width:761px){

  /* Contenedor principal */
  #clientBookingScreen .client-booking-success.active{
    padding:30px 40px 28px !important;
  }

  /* Reduce sensación de tarjeta dentro de tarjeta */
  #clientBookingScreen .client-booking-success-card{
    padding:28px 34px 26px !important;
  }

  /* Check */
  #clientBookingScreen .client-success-check{
    width:58px !important;
    height:58px !important;

    margin:0 auto 14px !important;
  }

  /* Etiqueta de estado */
  #clientBookingScreen .client-success-heading .client-eyebrow{
    display:inline-flex !important;
    width:auto !important;

    margin:0 auto 10px !important;
    padding:7px 16px !important;

    border-radius:999px !important;
  }

  /* Título */
  #clientBookingScreen .client-success-heading h2{
    margin:0 !important;
    font-size:36px !important;
    line-height:1.05 !important;
  }

  /* Resumen textual */
  #clientBookingScreen #clientBookingSuccessText{
    max-width:720px !important;

    margin:12px auto 0 !important;

    font-size:16px !important;
    line-height:1.5 !important;
  }

  /* Datos de la reserva */
  #clientBookingScreen .client-booking-success-details{
    width:100% !important;
    max-width:720px !important;

    margin:24px auto 0 !important;
  }

  /* Gestionar cita deja de ocupar visualmente toda la pantalla */
  #clientBookingScreen .client-success-manage{
    width:100% !important;
    max-width:720px !important;

    min-height:48px !important;
    margin:18px auto 0 !important;
  }

  /* Acciones finales más próximas al contenido */
  #clientBookingScreen .client-booking-success-actions{
    max-width:720px !important;
    margin:14px auto 0 !important;
  }

  #clientBookingScreen .client-success-new{
    margin-top:0 !important;
  }

  #clientBookingScreen .client-success-note{
    margin-top:14px !important;
  }
}


/* MAC / WINDOWS */
@media (min-width:1100px){

  #clientBookingScreen .client-booking-success.active{
    padding-top:28px !important;
    padding-bottom:28px !important;
  }

  #clientBookingScreen .client-booking-success-card{
    padding-top:26px !important;
    padding-bottom:24px !important;
  }

  #clientBookingScreen .client-success-heading h2{
    font-size:38px !important;
  }
}

/* ==========================================================
   RESERVAPP PUBLIC BOOKING V15.12 — SUCCESS ACTION BUTTONS
   ========================================================== */

@media (min-width:761px){

  /* Gestionar mi cita:
     botón compacto y con mayor jerarquía */
  #clientBookingScreen .client-success-manage{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:max-content !important;
    max-width:none !important;
    min-width:190px !important;
    min-height:48px !important;

    margin:20px auto 0 !important;
    padding:0 26px !important;

    background:#172033 !important;
    color:#FFFFFF !important;

    border:1px solid #172033 !important;
    border-radius:12px !important;

    font-weight:700 !important;

    box-shadow:0 8px 20px rgba(23,32,51,.14) !important;
  }

  #clientBookingScreen .client-success-manage:hover{
    background:#0F172A !important;
    border-color:#0F172A !important;
    color:#FFFFFF !important;

    transform:translateY(-1px);
  }


  /* Contenedor de las acciones inferiores */
  #clientBookingScreen .client-booking-success-actions{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:12px !important;

    width:100% !important;
    max-width:520px !important;

    margin:14px auto 0 !important;
  }


  /* Añadir a calendario */
  #clientBookingScreen
  .client-booking-success-actions
  #clientBookingSuccessCalendarBtn{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    min-width:190px !important;
    min-height:48px !important;
    padding:0 22px !important;

    border-radius:12px !important;

    font-weight:700 !important;
  }


  /* Reservar otra cita:
     convertirlo visualmente en botón */
  #clientBookingScreen .client-success-new{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:auto !important;
    min-width:190px !important;
    min-height:48px !important;

    margin:0 !important;
    padding:0 22px !important;

    background:#FFFFFF !important;
    color:#172033 !important;

    border:1px solid #D7DFEA !important;
    border-radius:12px !important;

    font-weight:700 !important;
    text-decoration:none !important;

    box-shadow:0 4px 12px rgba(23,32,51,.05) !important;

    transition:
      background .18s ease,
      border-color .18s ease,
      transform .18s ease,
      box-shadow .18s ease !important;
  }

  #clientBookingScreen .client-success-new:hover{
    background:#F7F9FC !important;
    border-color:#BFCADA !important;

    transform:translateY(-1px);

    box-shadow:0 6px 16px rgba(23,32,51,.08) !important;
  }
}


/* Tablet: permitir que los dos botones inferiores
   se adapten sin desbordarse */
@media (min-width:761px) and (max-width:900px){

  #clientBookingScreen .client-booking-success-actions{
    max-width:480px !important;
  }

  #clientBookingScreen
  .client-booking-success-actions
  #clientBookingSuccessCalendarBtn,
  #clientBookingScreen .client-success-new{
    flex:1 1 0 !important;
    min-width:0 !important;
  }
}

/* ==========================================================
   V8.16.284.1 — LANDING BRAND ALIGNMENT
   Replica visualmente el branding oficial de la landing.
   ========================================================== */

/* Cabecera: negocio a la izquierda, Reservapp a la derecha */
#clientBookingScreen .client-booking-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

/* Branding de plataforma: mismas proporciones de landing */
#clientBookingScreen .client-platform-brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0;
  border:0;
  flex:none;
  line-height:1;
}

#clientBookingScreen .client-platform-mark{
  width:34px !important;
  height:34px !important;
  min-width:34px;
  border-radius:10px;
  display:grid !important;
  place-items:center;
  padding:0;
  margin:0;
  background:#0057FF;
  color:#fff;
  font-family:"Manrope",sans-serif;
  font-size:15px;
  font-weight:800;
  line-height:1;
  box-shadow:0 6px 14px rgba(0,87,255,.28);
}

#clientBookingScreen .client-platform-stack{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:3px;
  line-height:1;
}

#clientBookingScreen .client-platform-stack > strong{
  display:block;
  margin:0;
  padding:0;
  font-family:"Manrope",sans-serif;
  font-size:18px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.3px;
  color:#10131A;
}

#clientBookingScreen .client-platform-by{
  display:inline-flex !important;
  align-items:center;
  justify-content:flex-start;
  gap:4px;
  margin:0;
  padding:0;
  white-space:nowrap;
  font-family:"Manrope",sans-serif;
  font-size:9.5px;
  line-height:13px;
  font-weight:700;
  letter-spacing:.2px;
  color:#747B87;
}

/*
 * Importante:
 * app.html tiene reglas globales para SVG.
 * Fijamos explícitamente las dimensiones del isotipo para que
 * se comporte igual que .hex-mini en la landing.
 */
#clientBookingScreen .client-platform-by svg.client-platform-hex{
  display:block !important;
  width:13px !important;
  height:13px !important;
  min-width:13px !important;
  max-width:13px !important;
  min-height:13px !important;
  max-height:13px !important;
  flex:0 0 13px !important;
  margin:0 !important;
  padding:0 !important;
  position:static !important;
  transform:none !important;
}

/* No necesitamos "Volver al panel" en un enlace público */
#clientBookingScreen .client-close-btn{
  display:none !important;
}

#clientBookingScreen .client-header-actions{
  display:flex;
  align-items:center;
  flex:none;
  gap:0;
}

/* ----------------------------------------------------------
   ESTADO NO DISPONIBLE
   Una sola señal visual; ninguna R de marca repetida.
   ---------------------------------------------------------- */

#clientBookingUnavailable::before{
  content:none !important;
  display:none !important;
}

#clientBookingUnavailable .client-booking-unavailable-mark{
  display:none !important;
}

/* El icono nuevo sustituye cualquier marca R residual */
#clientBookingUnavailable .client-booking-unavailable-icon{
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  margin:0 auto 20px;
  border-radius:20px;
  background:#EEF4FF;
  border:1px solid rgba(0,87,255,.12);
  box-shadow:none;
}

#clientBookingUnavailable .client-booking-unavailable-calendar{
  position:relative;
  display:block;
  width:30px;
  height:27px;
  border:2.5px solid #0057FF;
  border-radius:6px;
  box-sizing:border-box;
}

#clientBookingUnavailable .client-booking-unavailable-calendar::before{
  content:"";
  position:absolute;
  left:-2.5px;
  right:-2.5px;
  top:5px;
  border-top:2.5px solid #0057FF;
}

#clientBookingUnavailable .client-booking-unavailable-calendar::after{
  content:"×";
  position:absolute;
  right:-9px;
  bottom:-9px;
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#0057FF;
  border:2px solid #EEF4FF;
  color:#fff;
  font-family:Arial,sans-serif;
  font-size:13px;
  font-weight:700;
  line-height:1;
}

/* Evitar la sensación actual de tarjeta dentro de tarjeta */
#clientBookingUnavailable{
  max-width:720px;
  margin:54px auto;
  padding:54px 32px;
}

#clientBookingUnavailable .client-booking-unavailable-card{
  max-width:580px;
  margin:0 auto;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}

#clientBookingUnavailable .client-eyebrow{
  margin-bottom:16px;
}

#clientBookingUnavailable h1{
  margin:0 0 12px;
}

#clientBookingUnavailable .client-booking-unavailable-secondary{
  margin-top:4px;
}

/* ----------------------------------------------------------
   MÓVIL
   Conservamos el branding completo, pero compacto.
   ---------------------------------------------------------- */

@media(max-width:760px){

  #clientBookingScreen .client-booking-header{
    align-items:center;
    gap:10px;
  }

  #clientBookingScreen .client-platform-brand{
    gap:7px;
  }

  #clientBookingScreen .client-platform-mark{
    width:30px !important;
    height:30px !important;
    min-width:30px;
    border-radius:9px;
    font-size:13px;
  }

  /* Revierte la regla anterior que ocultaba el stack en móvil */
  #clientBookingScreen .client-platform-stack{
    display:flex !important;
  }

  #clientBookingScreen .client-platform-stack > strong{
    font-size:14px;
  }

  #clientBookingScreen .client-platform-by{
    font-size:8px;
    gap:3px;
  }

  #clientBookingScreen .client-platform-by svg.client-platform-hex{
    width:11px !important;
    height:11px !important;
    min-width:11px !important;
    max-width:11px !important;
    min-height:11px !important;
    max-height:11px !important;
    flex-basis:11px !important;
  }

  #clientBookingUnavailable{
    margin:30px auto;
    padding:38px 20px;
  }
}