/* =========================================================
   PETIT ESPAI GISELLE — Reservas y panel del equipo
   (se carga además de css/style.css)
   ========================================================= */

/* ---------- Estructura de la página de reserva ---------- */
.page-booking .site-header{ position:sticky; }
.booking-call svg{ width:18px; height:18px; }
.booking-call{ white-space:nowrap; flex:none; }
.booking{ padding:2rem 0 3rem; min-height:70vh; }
.booking-layout{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:2.5rem; align-items:start; }
.booking-main{ min-width:0; }
.paso h1{ font-size:clamp(2.1rem, 4vw, 3rem); margin-bottom:0.3rem; }
.paso h1:focus{ outline:none; }
.paso-sub{ font-size:1.1rem; margin-bottom:1.6rem; }
.paso[hidden]{ display:none; }
.paso:not([hidden]){ animation:fadeSlideIn .35s ease; }
.small{ font-size:0.92rem; }

.demo-banner{
  background:#FFF4DC; border:1px solid #E8C77C; color:#5E4410;
  border-radius:var(--radio-s); padding:0.9rem 1.1rem; margin-bottom:1.4rem; font-size:0.95rem;
}

.btn-volver{
  background:none; border:none; padding:0.4rem 0; margin-bottom:0.8rem; cursor:pointer;
  font-size:1rem; color:var(--oro-texto); font-weight:500; min-height:44px;
}
.btn-volver:hover{ color:var(--espresso); text-decoration:underline; }
.paso2-elegido{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0.6rem 1.2rem;
  background:var(--marfil-oscuro); border-radius:var(--radio-s); padding:0.9rem 1.1rem; margin:0.6rem 0 1.6rem;
}
.paso2-elegido:empty{ display:none; }
.paso2-elegido .as-button{ color:var(--oro-texto); font-weight:500; min-height:44px; }
.as-button{ background:none; border:none; border-bottom:1.5px solid currentColor; cursor:pointer; font-size:inherit; padding:0 0 1px; }
.btn-block{ width:100%; }
.btn-col{ display:flex; flex-direction:column; gap:0.7rem; max-width:460px; margin:1.6rem auto 0; }

/* ---------- Pasos ---------- */
.stepper{ display:flex; gap:0.4rem; list-style:none; padding:0; margin:0 0 2rem; counter-reset:none; }
.stepper li{
  flex:1; display:flex; align-items:center; gap:0.5rem;
  font-size:0.95rem; color:var(--cacao); opacity:0.6;
  padding-bottom:0.7rem; border-bottom:3px solid var(--linea);
}
.stepper li span{
  width:30px; height:30px; border-radius:50%; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid currentColor; font-weight:600; font-size:0.9rem;
}
.stepper li.active{ opacity:1; color:var(--espresso); border-color:var(--caramelo); font-weight:500; }
.stepper li.active span{ background:var(--espresso); color:var(--marfil); border-color:var(--espresso); }
.stepper li.done{ opacity:1; border-color:var(--caramelo-suave); }
.stepper li.done span{ background:var(--caramelo-suave); border-color:var(--caramelo-suave); color:var(--espresso); }
.reserva-hecha .stepper{ display:none; }

/* ---------- Paso 1: tratamientos ---------- */
.svc-search{ position:relative; margin-bottom:1rem; }
.svc-search svg{ position:absolute; left:1rem; top:50%; transform:translateY(-50%); width:20px; height:20px; color:var(--oro-texto); }
.svc-search input{
  width:100%; min-height:54px; padding:0.8rem 1rem 0.8rem 2.9rem;
  font-family:var(--sans); font-size:1.05rem; color:var(--espresso);
  border:1.5px solid var(--linea); border-radius:999px; background:var(--blanco);
}
.svc-search input:focus{ outline:none; border-color:var(--caramelo); box-shadow:0 0 0 4px rgba(185,138,82,0.15); }
.chip-row{ display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.chip small{ opacity:0.75; margin-left:0.25rem; }

.svc-grupo{ margin-bottom:1.6rem; }
.svc-grupo-titulo{ font-size:1.5rem; margin:0 0 0.7rem; }
.svc-option{
  width:100%; display:grid; grid-template-columns:auto 1fr auto; gap:0.9rem; align-items:center;
  text-align:left; background:var(--blanco); color:var(--cacao);
  border:1.5px solid var(--linea); border-radius:var(--radio-s);
  padding:1rem 1.1rem; margin-bottom:0.55rem; cursor:pointer; font-size:1rem;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.svc-option:hover{ border-color:var(--caramelo-suave); }
.svc-option.on{ border-color:var(--espresso); background:#FFFDFB; box-shadow:0 0 0 1px var(--espresso); }
.svc-check{
  width:26px; height:26px; border-radius:8px; border:2px solid var(--caramelo-suave); flex:none;
  display:flex; align-items:center; justify-content:center; transition:all .2s ease;
}
.svc-option.on .svc-check{ background:var(--espresso); border-color:var(--espresso); }
.svc-option.on .svc-check::after{ content:""; width:7px; height:13px; border:solid var(--marfil); border-width:0 2.5px 2.5px 0; transform:rotate(45deg) translate(-1px,-1px); }
.svc-info{ display:flex; flex-direction:column; gap:0.15rem; min-width:0; }
.svc-nombre{ font-weight:500; color:var(--espresso); line-height:1.35; }
.badge-pop{ font-style:normal; font-size:0.72rem; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; background:var(--rosa-polvo); color:#7A3B2A; padding:0.1em 0.55em; border-radius:999px; white-space:nowrap; }
.svc-desc{ font-size:0.92rem; opacity:0.85; }
.svc-dur{ font-size:0.9rem; color:var(--oro-texto); }
.svc-precio{ font-weight:600; color:var(--espresso); white-space:nowrap; text-align:right; }
.svc-precio s{ display:block; font-weight:400; font-size:0.85rem; opacity:0.55; }

/* Desplegables del paso 1 (la base está en style.css: .acc-item) */
.svc-grupo .acordeon{ gap:0.5rem; }
.svc-acc.tiene{ border-color:var(--espresso); box-shadow:0 0 0 1px var(--espresso); }
.acc-elegido{ color:var(--verde); font-weight:600; }
.svc-acc .acc-cuerpo{ padding-bottom:0.4rem; }
.svc-acc .svc-elige{ margin:0 0 0.2rem; }
.svc-acc + .upsell{ margin-top:0; }

.svc-acc{ scroll-margin-top:90px; }
/* Aviso: más de 4 zonas = presupuesto personalizado */
.aviso-zonas{
  display:flex; flex-direction:column; gap:0.4rem; padding:1rem 1.1rem; margin:0.2rem 0 0.4rem;
  background:#FFF4DC; border:1.5px solid #D9A53A; border-radius:var(--radio-s); color:#4A3500; animation:fadeSlideIn .25s ease;
}
.aviso-zonas .btn-row{ margin-top:0.4rem; gap:0.5rem; }
/* Línea de descuento en el resumen */
.sum-datos .dto dt{ color:var(--verde); font-weight:500; }
.sum-datos .dto dd{ color:var(--verde); font-weight:600; white-space:nowrap; }
.sum-datos .dto.pack dt{ color:#5E4410; font-weight:400; font-size:0.9rem; }

/* Tratamiento con varias opciones */
.svc-trat{
  background:var(--blanco); border:1.5px solid var(--linea); border-radius:var(--radio-s);
  padding:1rem 1.1rem 0.5rem; margin-bottom:0.55rem; transition:border-color .2s ease;
}
.svc-trat.tiene{ border-color:var(--espresso); }
.svc-trat-head{ display:flex; flex-direction:column; gap:0.15rem; margin-bottom:0.5rem; }
.svc-elige{ font-size:0.85rem; font-weight:600; color:var(--oro-texto); margin-top:0.35rem; }
.svc-option.svc-sub{
  border:none; border-top:1px solid var(--linea); border-radius:0; margin:0; padding:0.75rem 0.2rem; background:none; box-shadow:none;
}
.svc-option.svc-sub:hover{ background:var(--marfil); }
.svc-option.svc-sub.on{ background:#FFFDFB; box-shadow:none; }
.svc-option.svc-sub .svc-nombre{ font-weight:400; }
.svc-option.svc-sub.on .svc-nombre{ font-weight:600; }
.svc-option.svc-sub .svc-info{ flex-direction:row; flex-wrap:wrap; align-items:baseline; column-gap:0.6rem; }

.upsell{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  background:var(--rosa-polvo); border-radius:var(--radio-s); padding:0.8rem 1rem; margin:-0.2rem 0 0.8rem;
  font-size:0.97rem; animation:fadeSlideIn .3s ease;
}
.vacio{ padding:1.5rem; background:var(--marfil-oscuro); border-radius:var(--radio-s); }
.vacio a{ text-decoration:underline; }

/* ---------- Paso 2: profesional + calendario ---------- */
.mini-label{ font-weight:500; color:var(--espresso); margin:0.6rem 0 0.5rem; }
.pro-picker .chip-row{ margin-bottom:1.6rem; }

.calendar-widget{ background:var(--blanco); border-radius:var(--radio); padding:1.4rem; box-shadow:var(--sombra-suave); }
.calendar-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.calendar-head h2{ margin:0; font-size:1.6rem; text-transform:capitalize; }
.cal-nav{
  width:48px; height:48px; border-radius:50%; font-size:1.5rem; line-height:1;
  background:var(--marfil); border:1.5px solid var(--linea); color:var(--espresso); cursor:pointer;
}
.cal-nav:hover:not(:disabled){ border-color:var(--caramelo); }
.cal-nav:disabled{ opacity:0.3; cursor:not-allowed; }

.calendar-weekdays, .calendar-grid{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:0.35rem; }
.calendar-weekdays{ text-align:center; font-size:0.85rem; font-weight:500; margin-bottom:0.4rem; color:var(--oro-texto); }
.calendar-grid{ min-height:280px; align-content:start; }
.cal-day{ min-width:0; }
.cal-loading{ grid-column:1 / -1; display:flex; align-items:center; justify-content:center; opacity:0.75; }
.cal-day{
  aspect-ratio:1/1; min-height:44px; border-radius:12px; border:1.5px solid transparent;
  background:var(--marfil); color:var(--espresso); font-size:1.05rem; font-weight:500;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  cursor:pointer; position:relative; transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
.cal-day.empty{ background:transparent; cursor:default; }
.cal-day .marca{ width:6px; height:6px; border-radius:50%; }
.cal-day.libre .marca{ background:var(--verde); }
.cal-day.pocas .marca{ background:#D08A2E; }
.cal-day.libre:hover, .cal-day.pocas:hover{ border-color:var(--caramelo); transform:translateY(-2px); }
.cal-day.cerrado, .cal-day.lleno{ background:transparent; color:rgba(43,23,16,0.3); cursor:not-allowed; font-weight:400; }
.cal-day.lleno .num{ text-decoration:line-through; }
.cal-day.today{ border-color:var(--caramelo-suave); }
.cal-day.selected{ background:var(--espresso); color:var(--marfil); border-color:var(--espresso); }
.cal-day.selected .marca{ background:var(--caramelo-suave); }

.cal-legend{ display:flex; flex-wrap:wrap; gap:0.4rem 1.2rem; margin-top:1rem; font-size:0.88rem; }
.cal-legend span{ display:inline-flex; align-items:center; gap:0.4rem; }
.lg{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.lg.libre{ background:var(--verde); } .lg.pocas{ background:#D08A2E; } .lg.lleno{ background:rgba(43,23,16,0.2); }

.time-slots{ margin-top:2rem; scroll-margin-top:90px; animation:fadeSlideIn .35s ease; }
.slots-title{ font-size:1.5rem; }
.slots-title span{ color:var(--oro-texto); font-style:italic; }
.slot-grupo h3{ font-family:var(--sans); font-size:0.9rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--oro-texto); font-weight:500; margin:1.2rem 0 0.6rem; }
.slots-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); gap:0.55rem; }
.slot-btn{
  min-height:52px; font-family:var(--sans); font-size:1.08rem; font-weight:500;
  border:1.5px solid var(--linea); background:var(--blanco); color:var(--espresso);
  border-radius:12px; cursor:pointer; transition:all .15s ease;
}
.slot-btn:hover{ border-color:var(--caramelo); }
.slot-btn.selected{ background:var(--espresso); border-color:var(--espresso); color:var(--marfil); }

/* ---------- Paso 3: formulario ---------- */
.field{ display:flex; flex-direction:column; margin-bottom:1.2rem; }
.field label{ font-size:1rem; font-weight:500; color:var(--espresso); margin-bottom:0.4rem; }
.field .opt{ font-weight:400; opacity:0.7; }
.field input, .field select, .field textarea{
  font-family:var(--sans); font-size:1.08rem; min-height:54px;
  padding:0.75em 0.95em; border:1.5px solid rgba(43,23,16,0.2);
  background:var(--blanco); color:var(--espresso); border-radius:var(--radio-s);
}
.field textarea{ min-height:96px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--caramelo); box-shadow:0 0 0 4px rgba(185,138,82,0.15); }
.field input[aria-invalid="true"]{ border-color:#A6412F; }
.field .hint{ font-size:0.9rem; opacity:0.8; margin-top:0.35rem; }
.err{ color:#A6412F; font-size:0.93rem; font-weight:500; margin-top:0.3rem; display:block; }
.err:empty{ display:none; }

.check{ display:flex; gap:0.75rem; align-items:flex-start; margin:0.2rem 0 0.9rem; cursor:pointer; font-size:1rem; line-height:1.45; }
.check input{ width:24px; height:24px; flex:none; accent-color:var(--espresso); margin:0; cursor:pointer; }
.check a{ text-decoration:underline; }
.info-rgpd{
  margin:1rem 0 1.4rem; padding:0.9rem 1rem; border:1px solid var(--linea); border-radius:var(--radio-s);
  font-size:0.86rem; line-height:1.45; color:var(--cacao); background:var(--marfil-oscuro);
}
.info-rgpd b{ display:block; margin-bottom:0.4rem; }
.info-rgpd dl{ display:grid; grid-template-columns:max-content 1fr; gap:0.25rem 0.9rem; margin:0; }
.info-rgpd dt{ font-weight:600; }
.info-rgpd dd{ margin:0; }
.info-rgpd a{ text-decoration:underline; }
@media (max-width:560px){ .info-rgpd dl{ grid-template-columns:1fr; } .info-rgpd dd{ margin-bottom:0.35rem; } }

.form-msg{ margin:1rem 0; padding:0.9em 1.1em; font-size:0.97rem; border-radius:var(--radio-s); display:none; }
.form-msg.show{ display:block; }
.form-msg.error{ background:#F8E3DE; color:#7A2F22; }
.form-msg.success{ background:#E1EDDC; color:#2F4F26; }
.form-msg a{ text-decoration:underline; }
#form-cita .btn-block{ margin-top:0.8rem; }

.resumen-final{ background:var(--marfil-oscuro); border-radius:var(--radio); padding:1.2rem 1.4rem; margin-bottom:1.8rem; }

/* ---------- Paso 4: confirmación ---------- */
.paso-ok{ text-align:center; max-width:620px; margin:0 auto; }
.paso-ok:focus{ outline:none; }
.paso-ok .resumen-final{ text-align:left; }
.ok-icon{
  width:84px; height:84px; border-radius:50%; background:var(--verde); color:#fff;
  display:flex; align-items:center; justify-content:center; margin:0.5rem auto 1.2rem;
  animation:pop .5s cubic-bezier(.2,1.4,.4,1);
}
.ok-icon svg{ width:44px; height:44px; }
@keyframes pop{ from{ transform:scale(0.4); opacity:0; } to{ transform:scale(1); opacity:1; } }

/* ---------- Resumen lateral ---------- */
.booking-summary{
  position:sticky; top:96px; background:var(--blanco); border-radius:var(--radio);
  padding:1.5rem; box-shadow:var(--sombra);
}
.booking-summary h2{ font-size:1.6rem; margin-bottom:0.8rem; }
.sum-items{ list-style:none; margin:0 0 1rem; padding:0; }
.sum-items li{ display:flex; gap:0.6rem; align-items:flex-start; justify-content:space-between; padding:0.55rem 0; border-bottom:1px solid var(--linea); font-size:0.97rem; }
.sum-items li span{ flex:1; }
.sum-items li b{ white-space:nowrap; color:var(--espresso); font-weight:600; }
.quitar{ background:var(--marfil-oscuro); border:none; width:28px; height:28px; border-radius:50%; cursor:pointer; font-size:1.1rem; line-height:1; color:var(--cacao); flex:none; }
.quitar:hover{ background:var(--nude); }
.sum-datos{ margin:0; }
.sum-datos div{ display:flex; justify-content:space-between; gap:1rem; padding:0.35rem 0; font-size:0.97rem; }
.sum-datos dt{ opacity:0.75; }
.sum-datos dd{ margin:0; text-align:right; color:var(--espresso); font-weight:500; }
.sum-datos dd::first-letter{ text-transform:uppercase; }
.sum-datos .total{ border-top:1px solid var(--linea); margin-top:0.4rem; padding-top:0.7rem; font-size:1.1rem; }
.sum-datos .total dd{ font-weight:600; }
.sum-bar{ margin-top:1.2rem; }
.sum-totales{ display:none; }
.sum-bar .btn{ width:100%; }
.sum-bar .btn:disabled{ opacity:0.45; cursor:not-allowed; }
.reserva-hecha .booking-summary{ display:none; }
.reserva-hecha .booking-layout{ grid-template-columns:1fr; }

/* ---------- Reserva con Treatwell (PEG.reservas.motor = "treatwell") ---------- */
.motor-treatwell .stepper, .motor-treatwell .paso, .motor-treatwell .booking-summary, .motor-treatwell .demo-banner{ display:none; }
.motor-treatwell .booking-layout{ grid-template-columns:1fr; max-width:980px; }
.motor-treatwell .booking-footer{ padding-bottom:1.6rem; }
.tw-reserva [hidden]{ display:none !important; }
.tw-reserva h1{ margin-bottom:0.4rem; }
.tw-elegido{ background:var(--marfil-oscuro); border-left:3px solid var(--caramelo); border-radius:8px; padding:0.8rem 1rem; margin-bottom:1.2rem; }
.tw-aviso{ border:1px solid var(--linea); border-radius:16px; padding:1.6rem; display:flex; flex-direction:column; align-items:flex-start; gap:1rem; background:#fff; }
.tw-aviso p{ margin:0; }
.tw-aviso small a{ text-decoration:underline; }
.tw-marco{ border:1px solid var(--linea); border-radius:16px; overflow:hidden; background:#fff; }
.tw-marco > div{ height:max(640px, calc(100vh - 150px)); }
.tw-marco iframe{ display:block; }
.tw-alt{ margin-top:1rem; font-size:0.95rem; }
.tw-alt a{ text-decoration:underline; }
@media (max-width: 880px){
  .tw-aviso{ padding:1.2rem; }
  .tw-aviso .btn{ width:100%; }
  .tw-marco{ margin-inline:calc(var(--pad) * -1); border-radius:0; border-inline:0; }
}

.booking-footer{ padding:1.6rem 0 7rem; }

@media (max-width: 880px){
  .booking{ padding-top:1.2rem; }
  .booking-layout{ grid-template-columns:1fr; }
  .booking-call span{ display:none; }
  .booking-call{ padding:0.45em 0.9em; }
  .stepper li{ font-size:0.85rem; flex-direction:column; align-items:flex-start; gap:0.3rem; }
  .booking-summary{
    position:fixed; left:0; right:0; bottom:0; top:auto; z-index:150;
    border-radius:18px 18px 0 0; padding:0.8rem var(--pad) calc(0.8rem + env(safe-area-inset-bottom));
    box-shadow:0 -10px 30px -10px rgba(43,23,16,0.3);
  }
  .sum-full{ display:none; }
  .sum-bar{ margin:0; display:flex; align-items:center; gap:0.8rem; }
  .sum-totales{ display:flex; flex-direction:column; flex:1; font-size:0.92rem; line-height:1.3; min-width:0; }
  .sum-totales b{ color:var(--espresso); }
  .sum-ahorro{ color:var(--verde); font-weight:600; }
  .sum-cuando{ color:var(--oro-texto); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .sum-cuando::first-letter{ text-transform:uppercase; }
  .sum-bar .btn{ width:auto; flex:none; min-height:54px; padding:0.6em 1.3em; font-size:1rem; }
  .calendar-widget{ padding:1rem 0.7rem; }
  .calendar-grid{ gap:0.25rem; }
  .cal-day{ font-size:1rem; border-radius:10px; }
  .svc-option{ padding:0.9rem; gap:0.7rem; }
}

/* ---------- Panel del equipo ---------- */
.admin-shell{ min-height:100vh; background:var(--marfil); }
.admin-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:1rem var(--pad); border-bottom:1px solid var(--linea); background:var(--marfil-oscuro);
}
.admin-topbar .logo{ font-size:1.4rem; }
.login-wrap{ max-width:420px; margin:6rem auto; padding:0 var(--pad); }
.booking-card{ background:var(--blanco); border-radius:var(--radio); padding:clamp(1.5rem, 4vw, 2.4rem); box-shadow:var(--sombra-suave); }
.submit-row .btn{ width:100%; }

.admin-toolbar{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding:2rem var(--pad) 0; }
.filter-tabs{ display:flex; gap:0.5rem; flex-wrap:wrap; }
.filter-tabs button{
  font-family:var(--sans); font-size:0.95rem; min-height:42px; padding:0.4em 1.1em;
  border:1.5px solid var(--linea); background:var(--blanco); color:var(--cacao); cursor:pointer; border-radius:999px;
}
.filter-tabs button.active{ background:var(--espresso); color:var(--marfil); border-color:var(--espresso); }

.admin-rgpd{ margin:2.5rem var(--pad) 3rem; padding:1.2rem 1.4rem; border:1px solid var(--linea); border-radius:var(--radio-s); background:var(--blanco); max-width:760px; }
.admin-rgpd h2{ font-size:1.4rem; margin-bottom:0.4rem; }
.admin-rgpd p{ font-size:0.95rem; margin-bottom:0.8rem; }
.admin-stats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(170px,1fr)); gap:0.8rem; padding:1.5rem var(--pad) 0; }
.admin-stats div{ background:var(--blanco); border-radius:var(--radio-s); padding:1rem 1.2rem; box-shadow:var(--sombra-suave); }
.admin-stats b{ display:block; font-family:var(--serif); font-size:1.9rem; color:var(--espresso); line-height:1.1; }
.admin-stats span{ font-size:0.88rem; opacity:0.8; }

.citas-list{ padding:1.5rem var(--pad) 4rem; }
.date-group{ margin-bottom:2.2rem; }
.date-group h3{ font-size:1.3rem; border-bottom:1px solid var(--linea); padding-bottom:0.5rem; margin-bottom:1rem; }
.date-group h3::first-letter{ text-transform:uppercase; }
.cita-row{
  display:grid; grid-template-columns:90px 1.3fr 1.4fr 1.2fr auto; gap:1rem; align-items:center;
  padding:1rem 1.1rem; background:var(--blanco); border-radius:var(--radio-s); margin-bottom:0.6rem;
  font-size:0.95rem; box-shadow:var(--sombra-suave);
}
.cita-row .hora{ font-family:var(--serif); font-size:1.3rem; color:var(--espresso); line-height:1.1; }
.cita-row .hora small{ display:block; font-family:var(--sans); font-size:0.8rem; opacity:0.7; }
.cita-row .cliente strong{ display:block; color:var(--espresso); }
.cita-row .cliente a{ text-decoration:underline; }
.cita-row .notas{ font-size:0.88rem; opacity:0.9; }
.cita-actions{ display:flex; gap:0.4rem; flex-wrap:wrap; justify-content:flex-end; }
.cita-actions button, .cita-actions a{
  font-family:var(--sans); font-size:0.85rem; min-height:38px; padding:0.35em 0.9em;
  border:1.5px solid var(--linea); background:var(--blanco); cursor:pointer; border-radius:999px;
  display:inline-flex; align-items:center;
}
.cita-actions .ok:hover{ border-color:#3F6B45; color:#3F6B45; }
.cita-actions .cancel:hover{ border-color:#A6412F; color:#A6412F; }
.cita-actions .wa{ border-color:#25D366; color:#1B7A43; }

.badge{ display:inline-block; font-size:0.78rem; padding:0.15em 0.75em; border-radius:999px; margin-top:0.2rem; }
.badge.pendiente{ background:#F6E6BF; color:#6B5115; }
.badge.confirmada{ background:#D5E6CB; color:#3D5C31; }
.badge.cancelada{ background:#EFD2CB; color:#7A2F22; }
.badge.completada{ background:#DED8EE; color:#443A6B; }
.badge.nueva{ background:var(--rosa-polvo); color:#7A3B2A; }
.empty-state{ padding:3rem 1rem; text-align:center; opacity:0.8; }

@media (max-width: 880px){
  .cita-row{ grid-template-columns:1fr; }
  .cita-actions{ justify-content:flex-start; }
}

/* Reserva en pantallas medianas: el botón de ayuda solo con icono para que quepa el menú */
@media (max-width: 1020px){
  .booking-call span{ display:none; }
  .booking-call{ padding:0.45em 0.9em; }
}

.sum-ahorro{ display:none; }
@media (max-width: 880px){ .sum-ahorro{ display:block; } }

/* ---------- Packs, avisos de ahorro, mañanas y siguiente cita ---------- */
.aviso-pack{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0.6rem 1rem;
  padding:0.9rem 1.1rem; margin:0.1rem 0 0.4rem; border-radius:var(--radio-s);
  background:#FFF4DC; border:1.5px solid #D9A53A; color:#4A3500; font-size:0.96rem; line-height:1.45; animation:fadeSlideIn .25s ease;
}
.aviso-pack span{ flex:1 1 240px; }
.aviso-pack.ok{ background:#E4F1E3; border-color:var(--verde); color:#1B3A1F; }
.svc-option.en-pack{ opacity:0.75; }
.svc-incluida{ font-weight:500; font-size:0.82rem; color:var(--verde); white-space:normal; display:block; max-width:9ch; line-height:1.2; }
.pill-tip{
  font-family:var(--sans); font-size:0.72rem; font-weight:600; text-transform:uppercase; letter-spacing:0.04em;
  background:#E4F1E3; color:#1B3A1F; padding:0.15em 0.6em; border-radius:999px; margin-left:0.4rem; vertical-align:middle; white-space:nowrap;
}
.consejo-manana{ font-size:0.95rem; margin:-0.4rem 0 1.2rem; }
.siguiente-cita{
  max-width:460px; margin:1.6rem auto 0; padding:1.2rem 1.3rem; border-radius:var(--radio);
  background:var(--espresso); color:var(--nude); text-align:center;
}
.siguiente-cita p{ margin:0 0 0.9rem; line-height:1.5; }
.siguiente-cita b{ color:var(--marfil); display:block; font-family:var(--serif); font-size:1.35rem; margin-bottom:0.2rem; }
.siguiente-cita .btn{ width:100%; }
.sum-items b s{ font-weight:400; opacity:0.55; font-size:0.85em; }