/* ============================================================================
   VG Booking Bridge — Widget v2.0
   
   Diseño: Ultra Design System + Motion Design
   Estética: Apple refinada — sin rellenos negros, solo gradientes sutiles,
   glassmorphism, sombras con color, transiciones spring.
   
   Principios:
   - Cada selección por contorno luminoso, nunca relleno sólido
   - Tipografía fluida con clamp()
   - Container queries para responsive
   - Motion con propósito: fade-up, spring, blur de entrada
   - Accesibilidad WCAG AA
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------------- */
#vgb-booking-widget,
.vgb-booking-widget{
  /* Paleta — escala de grises fría, sin negro puro */
  --vgb-bg:       hsl(220 20% 99%);
  --vgb-bg-2:     hsl(220 18% 96%);
  --vgb-bg-3:     hsl(220 15% 92%);
  --vgb-text:     hsl(220 25% 12%);
  --vgb-muted:    hsl(220 12% 42%);
  --vgb-faint:    hsl(220 10% 62%);
  --vgb-disabled: hsl(220 8% 78%);
  --vgb-border:   hsl(220 15% 90%);
  --vgb-border-md:hsl(220 12% 82%);

  /* Acentos sutiles */
  --vgb-avail:    hsl(142 45% 52%);
  --vgb-select:   hsl(220 15% 88%);
  --vgb-select-border: hsl(220 12% 72%);
  --vgb-glow:     hsl(220 30% 50% / .08);

  /* Tipografía fluida */
  --vgb-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
              'Helvetica Neue', system-ui, sans-serif;
  --vgb-fs-xs:   clamp(10px, .5cqi + 9px, 11px);
  --vgb-fs-sm:   clamp(11px, .6cqi + 10px, 12px);
  --vgb-fs-base: clamp(13px, .7cqi + 11px, 14px);
  --vgb-fs-md:   clamp(14px, .8cqi + 12px, 15px);
  --vgb-fs-lg:   clamp(15px, 1cqi + 13px, 17px);
  --vgb-fs-xl:   clamp(18px, 1.6cqi + 15px, 22px);
  --vgb-fs-2xl:  clamp(21px, 2cqi + 17px, 28px);

  /* Espaciado fluido */
  --vgb-pad-x:  clamp(16px, 4cqi, 40px);
  --vgb-pad-y:  clamp(16px, 3cqi, 28px);
  --vgb-gap:    clamp(10px, 1.5cqi, 16px);
  --vgb-gap-lg: clamp(18px, 3cqi, 32px);

  /* Geometría */
  --vgb-r: 14px;
  --vgb-r-lg: 20px;
  --vgb-r-xl: 24px;
  --vgb-tap: 44px;

  /* Motion — curvas con intención */
  --vgb-ease:    cubic-bezier(.4, 0, .2, 1);
  --vgb-spring:  cubic-bezier(.175, .885, .32, 1.275);
  --vgb-out-expo:cubic-bezier(.16, 1, .3, 1);
  --vgb-enter:   cubic-bezier(0, 0, .2, 1);

  /* Sombras con tono frío */
  --vgb-shadow-sm:  0 1px 2px hsl(220 30% 20% / .06);
  --vgb-shadow-md:  0 4px 12px hsl(220 30% 20% / .08);
  --vgb-shadow-lg:  0 8px 28px hsl(220 30% 20% / .10);
  --vgb-shadow-xl:  0 16px 48px hsl(220 30% 20% / .12);
  --vgb-shadow-glow:0 0 24px var(--vgb-glow);
}

/* ---------------------------------------------------------------------------
   2. RESET
   --------------------------------------------------------------------------- */
.vgb-booking-widget *,
.vgb-booking-widget *::before,
.vgb-booking-widget *::after{box-sizing:border-box}
.vgb-booking-widget h1,.vgb-booking-widget h2,.vgb-booking-widget h3,
.vgb-booking-widget h4,.vgb-booking-widget p,.vgb-booking-widget ul,
.vgb-booking-widget ol,.vgb-booking-widget li,.vgb-booking-widget figure,
.vgb-booking-widget blockquote,.vgb-booking-widget dl,.vgb-booking-widget dd{margin:0;padding:0}
.vgb-booking-widget button{
  font-family:inherit;font-size:inherit;line-height:inherit;
  margin:0;border:none;background:none;color:inherit;
  cursor:pointer;text-align:inherit;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.vgb-booking-widget input,
.vgb-booking-widget textarea,
.vgb-booking-widget select{font-family:inherit;margin:0}
.vgb-booking-widget a{text-decoration:none;-webkit-tap-highlight-color:transparent}
.vgb-booking-widget img,.vgb-booking-widget svg{display:block;max-width:100%}

/* ---------------------------------------------------------------------------
   3. CONTENEDOR
   --------------------------------------------------------------------------- */
#vgb-booking-widget,
.vgb-booking-widget{
  container-type:inline-size;
  container-name:vgb;
  display:block;width:100%;
  max-width:var(--vgb-max-w,100%);
  margin-inline:auto;
  font-family:var(--vgb-font)!important;
  font-size:var(--vgb-fs-md);
  line-height:1.5;
  color:var(--vgb-text);
  text-align:left;
  /* Se funde con el tema: sin tarjeta, sin sombra, sin borde */
  background:transparent;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
  position:relative;
  isolation:isolate;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}

/* ---------------------------------------------------------------------------
   4. BARRA DE PROGRESO + CONTEXTO
   --------------------------------------------------------------------------- */
.vgb-top-progress{height:2px;width:100%;background:var(--vgb-bg-3);overflow:hidden}
.vgb-top-progress-fill{
  height:100%;width:25%;
  background:linear-gradient(90deg,var(--vgb-border-md),var(--vgb-muted));
  transition:width .5s var(--vgb-out-expo);
}

.vgb-progress{
  position:relative;display:flex;align-items:center;
  min-height:20px;padding:14px var(--vgb-pad-x);
  border-bottom:.5px solid var(--vgb-border);
}
.vgb-prog-context{font-size:var(--vgb-fs-sm);font-weight:500;color:var(--vgb-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55%}
.vgb-prog-label{
  font-size:var(--vgb-fs-sm);color:var(--vgb-faint);white-space:nowrap;
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
}
.vgb-prog-label.vgb-prog-solo{color:var(--vgb-text);font-weight:500;font-size:var(--vgb-fs-base)}
.vgb-prog-center-name{margin-left:auto;font-size:var(--vgb-fs-xs);color:var(--vgb-faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:35%;
  letter-spacing:.02em}

/* ---------------------------------------------------------------------------
   5. CUERPO
   --------------------------------------------------------------------------- */
.vgb-body{padding:var(--vgb-pad-y) var(--vgb-pad-x) calc(var(--vgb-pad-y) * 1.3)}

/* Animación de entrada de cada paso */
@keyframes vgb-fade-up{
  from{opacity:0;transform:translateY(24px);filter:blur(6px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
.vgb-step{animation:vgb-fade-up .5s var(--vgb-out-expo) both}

.vgb-section-title{font-size:var(--vgb-fs-base);font-weight:600;line-height:1.4;margin-bottom:4px}
.vgb-section-hint{font-size:var(--vgb-fs-sm);color:var(--vgb-muted);line-height:1.5;margin-bottom:var(--vgb-gap)}
.vgb-optional{font-size:var(--vgb-fs-xs);font-weight:400;color:var(--vgb-faint);margin-left:6px}
.vgb-divider{height:.5px;background:var(--vgb-border);margin:var(--vgb-gap-lg) 0}
.vgb-center{text-align:center}

/* ---------------------------------------------------------------------------
   6. ESQUELETOS
   --------------------------------------------------------------------------- */
@keyframes vgb-pulse{0%,100%{opacity:.4}50%{opacity:.75}}
.vgb-skeleton-block{background:var(--vgb-bg-3);border-radius:8px;animation:vgb-pulse 1.6s ease-in-out infinite}
.vgb-cal-day-skel{aspect-ratio:1;border-radius:50%;background:var(--vgb-bg-3);animation:vgb-pulse 1.6s ease-in-out infinite}
.vgb-slot-skel{height:var(--vgb-tap);border-radius:12px;background:var(--vgb-bg-3);animation:vgb-pulse 1.6s ease-in-out infinite}

/* ---------------------------------------------------------------------------
   7. DESPLEGABLES
   --------------------------------------------------------------------------- */
.vgb-select-wrap{position:relative;margin-bottom:var(--vgb-gap)}
.vgb-select-trigger{
  display:flex;align-items:center;gap:12px;
  width:100%;min-height:56px;padding:12px 16px;
  background:var(--vgb-bg);
  border:.5px solid var(--vgb-border);
  border-radius:var(--vgb-r);
  box-shadow:var(--vgb-shadow-sm);
  transition:border-color .2s var(--vgb-ease),box-shadow .2s var(--vgb-ease);
}
.vgb-select-trigger.open{border-color:var(--vgb-border-md);box-shadow:var(--vgb-shadow-md)}
.vgb-trig-text{flex:1;min-width:0}
.vgb-trig-val{font-size:var(--vgb-fs-md);font-weight:500;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vgb-trig-val.placeholder{font-weight:400;color:var(--vgb-faint)}
.vgb-trig-sub{font-size:var(--vgb-fs-sm);color:var(--vgb-muted);margin-top:2px}
.vgb-chev{width:16px;height:16px;flex-shrink:0;color:var(--vgb-faint);
  transition:transform .3s var(--vgb-spring)}
.vgb-select-trigger.open .vgb-chev{transform:rotate(180deg)}

.vgb-dropdown{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;
  max-height:min(340px,60cqh);overflow-y:auto;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  background:hsl(220 20% 99% / .92);
  backdrop-filter:blur(24px) saturate(1.6);
  -webkit-backdrop-filter:blur(24px) saturate(1.6);
  border:.5px solid var(--vgb-border-md);
  border-radius:var(--vgb-r);
  box-shadow:var(--vgb-shadow-xl);
  opacity:0;transform:translateY(-6px) scale(.98);pointer-events:none;
  transition:opacity .2s var(--vgb-ease),transform .28s var(--vgb-spring);
}
.vgb-dropdown.open{opacity:1;transform:none;pointer-events:auto}

.vgb-dropdown-item{
  display:flex;align-items:center;gap:12px;
  width:100%;min-height:var(--vgb-tap);padding:12px 16px;
  border-bottom:.5px solid var(--vgb-border);
  transition:background .14s var(--vgb-ease);
}
.vgb-dropdown-item:last-child{border-bottom:none}
.vgb-dropdown-item.selected{background:hsl(220 15% 94%)}
.vgb-item-info{flex:1;min-width:0}
.vgb-item-name{font-size:var(--vgb-fs-base);font-weight:500;line-height:1.3}
.vgb-item-role{font-size:var(--vgb-fs-sm);color:var(--vgb-muted);margin-top:1px}
.vgb-item-price{font-size:var(--vgb-fs-base);font-weight:600;flex-shrink:0}
.vgb-check-icon{
  width:18px;height:18px;flex-shrink:0;border-radius:50%;
  background:transparent;color:var(--vgb-muted);
  border:1.5px solid var(--vgb-border-md);
  font-size:10px;display:none;place-items:center;
}
.vgb-dropdown-item.selected .vgb-check-icon{display:grid;
  background:var(--vgb-select);border-color:var(--vgb-select-border)}

/* ---------------------------------------------------------------------------
   8. AVATARES
   --------------------------------------------------------------------------- */
.vgb-avatar{
  width:44px;height:44px;flex-shrink:0;
  display:grid;place-items:center;
  border-radius:50%;overflow:hidden;
  background:var(--vgb-bg-3);color:var(--vgb-muted);
  font-size:var(--vgb-fs-lg);font-weight:500;
}
.vgb-avatar img{width:100%;height:100%;object-fit:cover}
.vgb-avatar-sm{width:32px;height:32px;font-size:var(--vgb-fs-base)}
.vgb-avatar-svc{background:hsl(220 15% 94%);font-size:20px}

/* ---------------------------------------------------------------------------
   9. CUADRÍCULA DE ESPECIALISTAS — antes de elegir

   La cuadrícula se adapta según cuántos profesionales hay:
   - 2: una fila de 2
   - 3: una fila de 3
   - 4: 2 arriba, 2 abajo
   - 5: 2 arriba, 3 abajo (impares → más abajo que arriba)
   - 6: 3 arriba, 3 abajo
   - 7: 3 arriba, 4 abajo
   - 8: 4 arriba, 4 abajo

   En móvil (<480px): siempre 2 columnas.
   --------------------------------------------------------------------------- */
.vgb-res-grid{
  display:grid;
  gap:var(--vgb-gap);
  margin-bottom:var(--vgb-gap-lg);
  justify-items:center;
}

/* Por defecto: 2 columnas centradas */
.vgb-res-grid{grid-template-columns:repeat(2,minmax(0,180px));justify-content:center}

/* 1 profesional: centrado solo */
.vgb-res-grid[data-count="1"]{grid-template-columns:minmax(0,200px)}

/* 2: una fila de 2 */
.vgb-res-grid[data-count="2"]{grid-template-columns:repeat(2,minmax(0,190px))}

/* 3: una fila de 3 */
.vgb-res-grid[data-count="3"]{grid-template-columns:repeat(3,minmax(0,180px))}

/* 4: 2×2 perfecto */
.vgb-res-grid[data-count="4"]{grid-template-columns:repeat(2,minmax(0,190px))}

/* 5: 2 arriba + 3 abajo → grid de 6 celdas, las 2 primeras centradas */
.vgb-res-grid[data-count="5"]{grid-template-columns:repeat(6,minmax(0,1fr));max-width:600px;margin-inline:auto}
.vgb-res-grid[data-count="5"] .vgb-res-tile:nth-child(1){grid-column:2/4}
.vgb-res-grid[data-count="5"] .vgb-res-tile:nth-child(2){grid-column:4/6}
.vgb-res-grid[data-count="5"] .vgb-res-tile:nth-child(3){grid-column:1/3}
.vgb-res-grid[data-count="5"] .vgb-res-tile:nth-child(4){grid-column:3/5}
.vgb-res-grid[data-count="5"] .vgb-res-tile:nth-child(5){grid-column:5/7}

/* 6: 3×2 perfecto */
.vgb-res-grid[data-count="6"]{grid-template-columns:repeat(3,minmax(0,180px))}

/* 7: 3 arriba + 4 abajo */
.vgb-res-grid[data-count="7"]{grid-template-columns:repeat(12,minmax(0,1fr));max-width:760px;margin-inline:auto}
.vgb-res-grid[data-count="7"] .vgb-res-tile:nth-child(1){grid-column:2/6}
.vgb-res-grid[data-count="7"] .vgb-res-tile:nth-child(2){grid-column:5/9}
.vgb-res-grid[data-count="7"] .vgb-res-tile:nth-child(3){grid-column:8/12}
.vgb-res-grid[data-count="7"] .vgb-res-tile:nth-child(4){grid-column:1/4}
.vgb-res-grid[data-count="7"] .vgb-res-tile:nth-child(5){grid-column:4/7}
.vgb-res-grid[data-count="7"] .vgb-res-tile:nth-child(6){grid-column:7/10}
.vgb-res-grid[data-count="7"] .vgb-res-tile:nth-child(7){grid-column:10/13}

/* 8: 4×2 perfecto */
.vgb-res-grid[data-count="8"]{grid-template-columns:repeat(4,minmax(0,170px))}

/* 9: 4 arriba + 5 abajo */
.vgb-res-grid[data-count="9"]{grid-template-columns:repeat(5,minmax(0,1fr));max-width:900px;margin-inline:auto}
.vgb-res-grid[data-count="9"] .vgb-res-tile:nth-child(1){grid-column:1/2}
.vgb-res-grid[data-count="9"] .vgb-res-tile:nth-child(2){grid-column:2/3}
.vgb-res-grid[data-count="9"] .vgb-res-tile:nth-child(3){grid-column:3/4}
.vgb-res-grid[data-count="9"] .vgb-res-tile:nth-child(4){grid-column:4/5}

/* 10+: 5 por fila */
.vgb-res-grid[data-count="10"],
.vgb-res-grid[data-count="11"],
.vgb-res-grid[data-count="12"]{grid-template-columns:repeat(5,minmax(0,1fr))}

/* ---- Móvil: siempre 2 columnas, sin importar cuántos ---- */
@container vgb (max-width: 479px){
  .vgb-res-grid,
  .vgb-res-grid[data-count="3"],
  .vgb-res-grid[data-count="5"],
  .vgb-res-grid[data-count="6"],
  .vgb-res-grid[data-count="7"],
  .vgb-res-grid[data-count="8"],
  .vgb-res-grid[data-count="9"]{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    max-width:none;
  }
  .vgb-res-grid[data-count="1"]{grid-template-columns:1fr!important}
  /* Reset nth-child para que no fuercen posiciones raras en 2 columnas */
  .vgb-res-grid .vgb-res-tile{grid-column:auto!important}
}
@keyframes vgb-card-in{
  from{opacity:0;transform:translateY(20px) scale(.95);filter:blur(4px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
.vgb-res-tile{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:22px 16px;text-align:center;
  width:100%;max-width:200px;
  background:var(--vgb-bg);
  border:.5px solid var(--vgb-border);
  border-radius:var(--vgb-r-lg);
  box-shadow:var(--vgb-shadow-sm);
  animation:vgb-card-in .5s var(--vgb-out-expo) both;
  transition:transform .32s var(--vgb-spring),
             border-color .2s var(--vgb-ease),
             box-shadow .2s var(--vgb-ease);
}
.vgb-res-tile:nth-child(2){animation-delay:.06s}
.vgb-res-tile:nth-child(3){animation-delay:.12s}
.vgb-res-tile:nth-child(4){animation-delay:.18s}
.vgb-res-tile:hover{
  border-color:var(--vgb-border-md);
  box-shadow:var(--vgb-shadow-md),var(--vgb-shadow-glow);
  transform:translateY(-3px);
}
.vgb-res-tile:active{transform:translateY(0) scale(.98)}
.vgb-res-tile-avatar{
  width:clamp(64px,11cqi,84px);height:clamp(64px,11cqi,84px);
  border-radius:var(--vgb-r-lg);overflow:hidden;flex-shrink:0;
  display:grid;place-items:center;
  background:linear-gradient(145deg,var(--vgb-bg-2),var(--vgb-bg-3));
  color:var(--vgb-faint);font-size:var(--vgb-fs-xl);
  box-shadow:inset 0 1px 2px hsl(220 20% 100% / .5);
  margin-inline:auto;
}
.vgb-res-tile-avatar img{width:100%;height:100%;object-fit:cover}
.vgb-res-tile-body{width:100%;min-width:0;text-align:center!important}
.vgb-res-tile-name{font-size:var(--vgb-fs-md);font-weight:600;letter-spacing:-.01em;
  line-height:1.3;text-align:center!important}

/* ---------------------------------------------------------------------------
   10. FICHA PROTAGONISTA — tras elegir
   --------------------------------------------------------------------------- */
@keyframes vgb-reveal{
  from{opacity:0;transform:translateY(16px) scale(.98);filter:blur(4px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
.vgb-primary-card{
  position:relative;
  display:grid;grid-template-columns:auto 1fr;gap:20px;
  align-items:start;text-align:left!important;
  padding:clamp(22px,4cqi,32px);
  margin-bottom:var(--vgb-gap-lg);
  background:linear-gradient(135deg,var(--vgb-bg-2) 0%,hsl(220 18% 97%) 100%);
  border:.5px solid var(--vgb-border);
  border-radius:var(--vgb-r-xl);
  box-shadow:var(--vgb-shadow-md);
  animation:vgb-reveal .5s var(--vgb-out-expo) both;
}
/* Brillo superior — efecto cristal sutil */
.vgb-primary-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 10%,hsl(0 0% 100% / .5) 50%,transparent 90%);
  border-radius:var(--vgb-r-xl) var(--vgb-r-xl) 0 0;
}
@container vgb (max-width: 479px){
  .vgb-primary-card{grid-template-columns:1fr;justify-items:center;text-align:center!important}
  .vgb-primary-desc{text-align:center!important}
  .vgb-primary-svc-head{justify-content:center}
}

.vgb-primary-change{
  position:absolute;top:14px;right:14px;
  display:flex;align-items:center;gap:5px;
  padding:6px 14px;border-radius:99px;
  background:hsl(220 20% 99% / .8);backdrop-filter:blur(8px);
  border:.5px solid var(--vgb-border);
  font-size:var(--vgb-fs-xs);font-weight:500;color:var(--vgb-muted);
  transition:all .18s var(--vgb-ease);
}

.vgb-primary-avatar{
  width:clamp(76px,12cqi,100px);height:clamp(76px,12cqi,100px);
  border-radius:var(--vgb-r-lg);overflow:hidden;
  display:grid;place-items:center;
  background:linear-gradient(145deg,var(--vgb-bg-3),var(--vgb-bg-2));
  color:var(--vgb-faint);font-size:var(--vgb-fs-2xl);
  box-shadow:var(--vgb-shadow-md),inset 0 1px 2px hsl(0 0% 100% / .4);
  grid-row:1/span 2;
}
.vgb-primary-avatar img{width:100%;height:100%;object-fit:cover}
.vgb-primary-name{font-size:var(--vgb-fs-xl);font-weight:600;
  letter-spacing:-.02em;line-height:1.2;margin-bottom:6px}
.vgb-primary-desc{
  font-size:var(--vgb-fs-base);color:var(--vgb-muted);
  line-height:1.7;letter-spacing:-.003em;
  text-align:justify!important;hyphens:auto;-webkit-hyphens:auto;
}
.vgb-primary-card .vgb-tags{display:none}
.vgb-primary-divider{width:100%;height:.5px;background:var(--vgb-border);
  margin:18px 0 14px;grid-column:1/-1}
.vgb-primary-svc-head{display:flex;align-items:center;gap:8px;
  margin-bottom:12px;grid-column:1/-1}
.vgb-svc-box-title{font-size:var(--vgb-fs-base);font-weight:600;letter-spacing:-.01em}
.vgb-primary-card .vgb-select-wrap{margin-bottom:0;grid-column:1/-1}

/* ---------------------------------------------------------------------------
   11. CALENDARIO
   --------------------------------------------------------------------------- */
.vgb-step2-grid{display:flex;flex-direction:column;align-items:center}
.vgb-step2-grid > .vgb-cal-block{
  width:100%;
  max-width:520px;   /* nunca más ancho que esto — evita celdas gigantes */
}
.vgb-step2-grid > .vgb-slots-wrap{width:100%;max-width:520px}
.vgb-cal-nav{display:flex;align-items:center;justify-content:space-between;
  gap:8px;margin-bottom:var(--vgb-gap)}
.vgb-cal-month{font-size:var(--vgb-fs-md);font-weight:600;letter-spacing:-.02em}
.vgb-cal-btn{width:var(--vgb-tap);height:var(--vgb-tap);
  display:grid;place-items:center;border-radius:50%;
  font-size:19px;color:var(--vgb-muted);
  transition:background .14s var(--vgb-ease)}
.vgb-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(2px,.5cqi,4px)}
.vgb-cal-dow{padding:4px 0 8px;text-align:center;
  font-size:var(--vgb-fs-xs);font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--vgb-faint)}

.vgb-cal-day{
  position:relative;aspect-ratio:1;min-height:36px;
  display:grid;place-items:center;
  font-size:var(--vgb-fs-base);border-radius:50%;
  transition:all .22s var(--vgb-ease);
}
.vgb-cal-day.today{font-weight:700}

/* SELECCIÓN: degradado sutil + sombra con brillo, NUNCA negro */
.vgb-cal-day.selected{
  background:linear-gradient(145deg,hsl(220 15% 92%),hsl(220 12% 86%));
  color:var(--vgb-text);font-weight:700;
  box-shadow:0 2px 8px hsl(220 20% 50% / .12),
             inset 0 1px 1px hsl(0 0% 100% / .5);
  transform:scale(1.08);
}
.vgb-cal-day.past,.vgb-cal-day.closed{color:var(--vgb-disabled);cursor:not-allowed}
.vgb-cal-day.empty{pointer-events:none}
.vgb-cal-day.avail::after{content:'';position:absolute;bottom:clamp(3px,.6cqi,5px);
  left:50%;transform:translateX(-50%);
  width:6px;height:6px;border-radius:50%;
  background:var(--vgb-avail);opacity:.6;
  box-shadow:0 0 6px 2px var(--vgb-avail)}
.vgb-cal-day.avail{color:var(--vgb-text);font-weight:500}
.vgb-cal-day.avail.selected::after{opacity:.8;box-shadow:0 0 8px 3px var(--vgb-avail)}

/* ---------------------------------------------------------------------------
   12. HORARIOS
   --------------------------------------------------------------------------- */
.vgb-slots-wrap{max-height:0;opacity:0;overflow:hidden;
  transition:max-height .45s var(--vgb-ease),opacity .3s var(--vgb-ease),margin .3s var(--vgb-ease)}
.vgb-slots-wrap.visible{max-height:640px;opacity:1;margin-top:var(--vgb-gap-lg)}
.vgb-slots-label{margin-bottom:10px}
.vgb-slots{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(clamp(68px,17cqi,86px),1fr));
  gap:clamp(6px,1.2cqi,10px)}

.vgb-slot{
  min-height:var(--vgb-tap);display:grid;place-items:center;
  padding:8px 4px;font-size:var(--vgb-fs-base);font-weight:500;
  background:var(--vgb-bg);border:.5px solid var(--vgb-border);
  border-radius:12px;box-shadow:var(--vgb-shadow-sm);
  transition:all .2s var(--vgb-ease);
}
/* SELECCIÓN: gradiente + sombra luminosa, NUNCA negro */
.vgb-slot.selected{
  background:linear-gradient(145deg,hsl(220 15% 92%),hsl(220 12% 86%));
  font-weight:600;
  box-shadow:0 2px 8px hsl(220 20% 50% / .12),
             inset 0 1px 1px hsl(0 0% 100% / .5);
  border-color:var(--vgb-select-border);
  transform:scale(1.04);
}
.vgb-slot.taken{color:var(--vgb-disabled);text-decoration:line-through;cursor:not-allowed}
.vgb-approx{grid-column:1/-1;margin-top:6px;text-align:center;
  font-size:var(--vgb-fs-xs);color:var(--vgb-faint)}
.vgb-empty-msg{grid-column:1/-1;padding:20px 0;text-align:center;
  font-size:var(--vgb-fs-base);color:var(--vgb-muted);line-height:1.6}
.vgb-empty-msg small{font-size:var(--vgb-fs-xs);color:var(--vgb-faint)}

/* ---------------------------------------------------------------------------
   13. ERROR Y WHATSAPP
   --------------------------------------------------------------------------- */
.vgb-error-block{grid-column:1/-1;padding:20px 16px;text-align:center;
  background:var(--vgb-bg-2);border-radius:var(--vgb-r)}
.vgb-error-block p{margin-bottom:14px;font-size:var(--vgb-fs-base);
  color:var(--vgb-muted);line-height:1.5}
.vgb-wa-btn,.vgb-confirm-link{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--vgb-tap);padding:11px 22px;border-radius:99px;
  background:var(--vgb-bg);border:.5px solid var(--vgb-border);
  color:var(--vgb-text);font-size:var(--vgb-fs-md);font-weight:500;
  box-shadow:var(--vgb-shadow-sm);
  transition:all .18s var(--vgb-ease);
}

/* ---------------------------------------------------------------------------
   14. FORMULARIO
   --------------------------------------------------------------------------- */
.vgb-form-row{display:grid;grid-template-columns:1fr;gap:var(--vgb-gap)}
.vgb-form-group{margin-bottom:var(--vgb-gap)}
.vgb-label{display:block;margin-bottom:5px;
  font-size:var(--vgb-fs-sm);font-weight:600;color:var(--vgb-muted);line-height:1.3}
.vgb-optional-inline{font-weight:400;color:var(--vgb-faint)}
.vgb-input{
  display:block;width:100%;min-height:var(--vgb-tap);
  padding:12px 16px;font-size:16px;line-height:1.4;color:var(--vgb-text);
  background:var(--vgb-bg);
  border:.5px solid var(--vgb-border);border-radius:var(--vgb-r);
  box-shadow:var(--vgb-shadow-sm);
  appearance:none;-webkit-appearance:none;resize:none;
  transition:border-color .18s var(--vgb-ease),box-shadow .18s var(--vgb-ease);
}
.vgb-input::placeholder{color:var(--vgb-faint)}
.vgb-input:focus{outline:none;border-color:var(--vgb-border-md);
  box-shadow:var(--vgb-shadow-md),0 0 0 3px hsl(220 30% 50% / .06)}
textarea.vgb-input{min-height:80px;resize:vertical}

/* ---------------------------------------------------------------------------
   15. RESUMEN
   --------------------------------------------------------------------------- */
.vgb-recap{margin-bottom:var(--vgb-gap-lg);overflow:hidden;
  background:var(--vgb-bg-2);border:.5px solid var(--vgb-border);
  border-radius:var(--vgb-r);box-shadow:var(--vgb-shadow-sm)}
.vgb-recap-row{display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:11px 16px;border-bottom:.5px solid var(--vgb-border);
  font-size:var(--vgb-fs-base)}
.vgb-recap-row:last-child{border-bottom:none}
.vgb-recap-key{color:var(--vgb-muted);flex-shrink:0}
.vgb-recap-val{font-weight:500;text-align:right;min-width:0;overflow-wrap:anywhere}

/* ---------------------------------------------------------------------------
   16. CASILLA
   --------------------------------------------------------------------------- */
.vgb-check{display:flex;align-items:flex-start;gap:12px;margin:var(--vgb-gap) 0 var(--vgb-gap-lg)}
.vgb-checkbox{
  width:22px;height:22px;flex-shrink:0;margin-top:1px;
  display:grid;place-items:center;
  background:var(--vgb-bg);border:1.5px solid var(--vgb-border-md);border-radius:6px;
  appearance:none;-webkit-appearance:none;cursor:pointer;
  box-shadow:var(--vgb-shadow-sm);
  transition:all .18s var(--vgb-ease);
}
.vgb-checkbox:checked{background:var(--vgb-select);border-color:var(--vgb-select-border)}
.vgb-checkbox:checked::after{content:'';width:10px;height:5px;
  border-left:2px solid var(--vgb-muted);border-bottom:2px solid var(--vgb-muted);
  transform:rotate(-45deg) translateY(-1px)}
.vgb-check-label{font-size:var(--vgb-fs-sm);color:var(--vgb-muted);line-height:1.5;cursor:pointer}
.vgb-check-label a{color:var(--vgb-text);text-decoration:underline}

/* ---------------------------------------------------------------------------
   17. BOTONES — nunca relleno negro sólido
   --------------------------------------------------------------------------- */
.vgb-btn-wrap{margin-top:var(--vgb-gap-lg)}
.vgb-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:48px;padding:14px 20px;
  background:linear-gradient(145deg,var(--vgb-bg-2),var(--vgb-bg-3));
  color:var(--vgb-text);
  border:.5px solid var(--vgb-border-md);
  border-radius:var(--vgb-r);
  box-shadow:var(--vgb-shadow-sm),inset 0 1px 1px hsl(0 0% 100% / .4);
  font-size:var(--vgb-fs-md);font-weight:500;line-height:1.2;
  letter-spacing:-.01em;
  transition:all .22s var(--vgb-ease);
}
.vgb-btn:hover:not(:disabled){
  box-shadow:var(--vgb-shadow-md),var(--vgb-shadow-glow);
  transform:translateY(-1px);
  border-color:var(--vgb-select-border);
}
.vgb-btn:active:not(:disabled){transform:translateY(0) scale(.99)}
.vgb-btn:disabled{opacity:.3;cursor:not-allowed}
.vgb-btn-secondary{max-width:240px;margin-inline:auto;background:var(--vgb-bg)}
.vgb-btn-back{
  display:inline-flex;align-items:center;gap:6px;
  min-height:var(--vgb-tap);padding:6px 0;margin-bottom:var(--vgb-gap);
  font-size:var(--vgb-fs-base);font-weight:500;color:var(--vgb-muted);
  transition:color .14s var(--vgb-ease);
}
.vgb-btn-spinner{width:15px;height:15px;flex-shrink:0;border-radius:50%;
  border:2px solid var(--vgb-border);border-top-color:var(--vgb-muted);
  animation:vgb-spin .7s linear infinite}
@keyframes vgb-spin{to{transform:rotate(360deg)}}

.vgb-step:not(.vgb-step-has-recap) .vgb-btn-wrap{display:flex;justify-content:center}
.vgb-step:not(.vgb-step-has-recap) .vgb-btn{max-width:320px}

/* ---------------------------------------------------------------------------
   18. CONFIRMACIÓN
   --------------------------------------------------------------------------- */
.vgb-confirm{padding:clamp(28px,6cqi,52px) 16px;text-align:center}
.vgb-confirm-icon{
  width:clamp(56px,10cqi,68px);height:clamp(56px,10cqi,68px);
  margin:0 auto var(--vgb-gap-lg);
  display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(145deg,var(--vgb-bg-2),var(--vgb-bg-3));
  border:.5px solid var(--vgb-border);
  color:var(--vgb-muted);
  box-shadow:var(--vgb-shadow-md),inset 0 1px 2px hsl(0 0% 100% / .5);
  animation:vgb-pop .5s var(--vgb-spring) both;
}
.vgb-confirm-icon svg{width:55%;height:55%}
.vgb-confirm-icon svg path{stroke-dasharray:40;stroke-dashoffset:40;
  animation:vgb-draw .5s var(--vgb-out-expo) .2s forwards}
@keyframes vgb-draw{to{stroke-dashoffset:0}}
@keyframes vgb-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.vgb-confirm-title{font-size:var(--vgb-fs-xl);font-weight:600;
  letter-spacing:-.02em;line-height:1.2;margin-bottom:10px}
.vgb-confirm-body{max-width:34ch;margin:0 auto var(--vgb-gap-lg);
  font-size:var(--vgb-fs-md);color:var(--vgb-muted);line-height:1.6}
.vgb-confirm-code{display:inline-flex;margin-bottom:var(--vgb-gap);
  padding:8px 20px;border-radius:99px;
  background:var(--vgb-bg-2);border:.5px solid var(--vgb-border);
  font-family:'SF Mono',ui-monospace,Menlo,monospace;
  font-size:var(--vgb-fs-base);font-weight:600;letter-spacing:.04em}
.vgb-confirm-with{display:flex;flex-direction:column;align-items:center;gap:8px;
  margin-bottom:var(--vgb-gap-lg)}
.vgb-confirm-with-label{font-size:var(--vgb-fs-xs);color:var(--vgb-faint);
  text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.vgb-confirm-with-card{display:inline-flex;align-items:center;gap:10px;
  padding:8px 18px 8px 8px;border-radius:99px;
  background:var(--vgb-bg-2);border:.5px solid var(--vgb-border);
  box-shadow:var(--vgb-shadow-sm)}
.vgb-confirm-with-name{font-size:var(--vgb-fs-base);font-weight:600}

/* ---------------------------------------------------------------------------
   19. MINI-FICHA DEL ESPECIALISTA (PASO 3)
   --------------------------------------------------------------------------- */
.vgb-step3-specialist{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;margin-bottom:var(--vgb-gap-lg);
  background:linear-gradient(135deg,var(--vgb-bg-2),hsl(220 18% 97%));
  border:.5px solid var(--vgb-border);
  border-radius:var(--vgb-r);
  box-shadow:var(--vgb-shadow-sm);
}
.vgb-step3-specialist-text{min-width:0;text-align:left!important}
.vgb-step3-specialist-name{font-size:var(--vgb-fs-base);font-weight:600;line-height:1.3}
.vgb-step3-specialist-desc{font-size:var(--vgb-fs-xs);color:var(--vgb-muted);line-height:1.4;
  margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------------------------------------------------------------------------
   20. ESTADO VACÍO
   --------------------------------------------------------------------------- */
.vgb-empty-state-w{padding:clamp(28px,6cqi,48px) 20px;text-align:center}
.vgb-empty-ico{font-size:clamp(30px,6cqi,38px);margin-bottom:14px;opacity:.45}
.vgb-empty-t{font-size:var(--vgb-fs-lg);font-weight:600;margin-bottom:6px}
.vgb-empty-d{max-width:32ch;margin:0 auto var(--vgb-gap-lg);
  font-size:var(--vgb-fs-base);color:var(--vgb-muted);line-height:1.55}

/* ---------------------------------------------------------------------------
   21. TOAST
   --------------------------------------------------------------------------- */
.vgb-toast{
  position:absolute;z-index:80;left:16px;right:16px;bottom:16px;
  padding:13px 18px;border-radius:var(--vgb-r);
  background:hsl(220 20% 12% / .9);backdrop-filter:blur(16px);
  color:hsl(220 20% 96%);font-size:var(--vgb-fs-base);font-weight:500;text-align:center;
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .28s var(--vgb-ease),transform .32s var(--vgb-spring)}
.vgb-toast.show{opacity:1;transform:none}

/* ===========================================================================
   22. CONTAINER QUERIES
   =========================================================================== */
@container vgb (max-width: 359px){
  .vgb-slots{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vgb-prog-label{display:none}
}
@container vgb (min-width: 380px){.vgb-form-row{grid-template-columns:1fr 1fr}}

@container vgb (min-width: 680px){
  .vgb-step2-grid.has-date{
    display:grid;grid-template-columns:1.05fr .95fr;gap:var(--vgb-gap-lg);
    align-items:start;width:100%;
  }
  .vgb-step2-grid.has-date .vgb-slots-wrap{max-height:none;opacity:1;margin-top:0;overflow:visible}
  .vgb-step2-grid.has-date .vgb-slots-wrap:not(.visible){opacity:.3;pointer-events:none}
  .vgb-step3-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--vgb-gap-lg);align-items:start}
  .vgb-recap{margin-bottom:0;position:sticky;top:16px}
  .vgb-step-has-recap .vgb-btn-wrap{display:flex;justify-content:flex-end}
  .vgb-step-has-recap .vgb-btn{max-width:340px}
}
@container vgb (min-width: 900px){
  .vgb-res-tile{flex-basis:200px;max-width:220px}
  .vgb-cal-day{min-height:42px}
}

/* ===========================================================================
   23. MOBILE: DESPLEGABLE COMO PANEL INFERIOR
   =========================================================================== */
@media (max-width: 600px){
  .vgb-dropdown{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:99999;
    max-height:min(70vh,70svh);border-radius:20px 20px 0 0;border-bottom:none;
    transform:translateY(100%);box-shadow:0 -8px 32px hsl(220 20% 20% / .15);
    padding-bottom:env(safe-area-inset-bottom,0)}
  .vgb-dropdown.open{transform:translateY(0)}
  .vgb-dropdown::before{content:'';display:block;width:38px;height:4px;
    margin:10px auto 6px;border-radius:99px;background:var(--vgb-border-md)}
}

/* ===========================================================================
   24. HOVER / TOUCH
   =========================================================================== */
@media (hover: hover) and (pointer: fine){
  .vgb-select-trigger:hover{border-color:var(--vgb-border-md);box-shadow:var(--vgb-shadow-md)}
  .vgb-dropdown-item:hover{background:hsl(220 15% 96%)}
  .vgb-cal-btn:hover{background:var(--vgb-bg-2)}
  .vgb-cal-day:hover:not(.past):not(.closed):not(.empty):not(.selected){
    background:hsl(220 15% 95%)}
  .vgb-slot:hover:not(.taken):not(.selected){
    box-shadow:var(--vgb-shadow-md);border-color:var(--vgb-border-md);
    transform:translateY(-1px)}
  .vgb-btn-back:hover{color:var(--vgb-text)}
  .vgb-confirm-link:hover,.vgb-wa-btn:hover{
    box-shadow:var(--vgb-shadow-md);border-color:var(--vgb-border-md);
    transform:translateY(-1px)}
  .vgb-primary-change:hover{background:var(--vgb-bg);border-color:var(--vgb-border-md);
    color:var(--vgb-text)}
}
@media (hover: none){
  .vgb-slot:active:not(.taken){transform:scale(.96)}
  .vgb-cal-day:active:not(.past):not(.closed){transform:scale(.92)}
  .vgb-btn:active:not(:disabled){transform:scale(.985)}
}
@media (max-height: 480px) and (orientation: landscape){
  .vgb-confirm{padding:20px 16px}
  .vgb-dropdown{max-height:min(56vh,56svh)}
}

/* ===========================================================================
   25. ACCESIBILIDAD
   =========================================================================== */
.vgb-booking-widget :focus-visible{outline:2px solid var(--vgb-select-border);
  outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion: reduce){
  .vgb-booking-widget *,.vgb-booking-widget *::before,.vgb-booking-widget *::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}
@media (prefers-contrast: more){
  #vgb-booking-widget,.vgb-booking-widget{
    --vgb-border:hsl(220 15% 70%);--vgb-border-md:hsl(220 12% 55%);
    --vgb-muted:hsl(220 15% 28%);--vgb-faint:hsl(220 10% 40%)}
}

/* ===========================================================================
   26. TEMA OSCURO (explícito, no automático)
   =========================================================================== */
.vgb-booking-widget[data-theme="dark"]{
  --vgb-bg:           hsl(0 0% 7%);
  --vgb-bg-2:         hsl(0 0% 11%);
  --vgb-bg-3:         hsl(0 0% 15%);
  --vgb-text:         hsl(0 0% 94%);
  --vgb-muted:        hsl(0 0% 60%);
  --vgb-faint:        hsl(0 0% 40%);
  --vgb-disabled:     hsl(0 0% 28%);
  --vgb-border:       hsl(0 0% 18%);
  --vgb-border-md:    hsl(0 0% 28%);
  --vgb-select:       hsl(0 0% 14%);
  --vgb-select-border:hsl(0 0% 34%);
  --vgb-avail:        hsl(142 45% 45%);
  --vgb-avail-bg:     hsl(142 30% 12%);
  --vgb-glow:         hsl(220 30% 60% / .1);
  --vgb-shadow-sm:    0 1px 3px hsl(0 0% 0% / .4);
  --vgb-shadow-md:    0 4px 14px hsl(0 0% 0% / .5);
  --vgb-shadow-lg:    0 8px 32px hsl(0 0% 0% / .6);
  --vgb-shadow-glow:  0 0 28px hsl(220 40% 60% / .08);
}

@media print{
  .vgb-booking-widget{box-shadow:none;border:1px solid #000}
  .vgb-btn,.vgb-btn-back,.vgb-progress{display:none}
}

/* ===========================================================================
   27. RESPALDO SIN CONTAINER QUERIES
   =========================================================================== */
@supports not (container-type: inline-size){
  #vgb-booking-widget,.vgb-booking-widget{
    --vgb-fs-xs:11px;--vgb-fs-sm:12px;--vgb-fs-base:14px;
    --vgb-fs-md:15px;--vgb-fs-lg:17px;--vgb-fs-xl:21px;
    --vgb-pad-x:24px;--vgb-pad-y:20px;--vgb-gap:14px;--vgb-gap-lg:24px}
  @media (min-width:480px){.vgb-form-row{grid-template-columns:1fr 1fr}}
  @media (min-width:820px){
    .vgb-widget-wide .vgb-step2-grid.has-date{
      display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:start;width:100%}
    .vgb-widget-wide .vgb-step3-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:28px;align-items:start}
    .vgb-widget-wide .vgb-step2-grid.has-date .vgb-slots-wrap{max-height:none;opacity:1;margin-top:0;overflow:visible}
  }
}

/* Clases legacy de resourceCard — se mantienen para compatibilidad */
.vgb-card{display:none;gap:var(--vgb-gap);padding:18px;
  background:var(--vgb-bg-2);border:.5px solid var(--vgb-border);border-radius:var(--vgb-r-lg)}
.vgb-card.visible{display:flex}
.vgb-avatar-lg{width:56px;height:56px;font-size:var(--vgb-fs-xl)}
.vgb-card-body{flex:1;min-width:0}
.vgb-card-name{font-size:var(--vgb-fs-lg);font-weight:600}
.vgb-card-role{font-size:var(--vgb-fs-sm);color:var(--vgb-muted)}
.vgb-card-desc{font-size:var(--vgb-fs-sm);color:var(--vgb-muted);line-height:1.5}


/* ===========================================================================
   28. INTEGRACIÓN CON TEMAS — el widget se funde con la página
   
   Por defecto el widget es una 'tarjeta' con sombra y borde redondeado.
   Con data-style='integrated', la caja exterior desaparece y el contenido
   se integra directamente en el flujo de la página, como si fuera parte
   nativa del tema — sin rectángulo blanco sobrepuesto.
   =========================================================================== */
.vgb-booking-widget[data-style="integrated"]{
  background:transparent;
  box-shadow:none;
  border-radius:0;
  overflow:visible;
}
.vgb-booking-widget[data-style="integrated"] .vgb-top-progress{
  border-radius:99px;
  margin:0 auto 4px;
  width:min(200px,60%);
  height:2px;
  opacity:.5;
}
.vgb-booking-widget[data-style="integrated"] .vgb-progress{
  border-bottom:none;
  padding-bottom:8px;
}
/* Integrado: las tarjetas internas heredan el color del fondo de página */
.vgb-booking-widget[data-style="integrated"] .vgb-primary-card,
.vgb-booking-widget[data-style="integrated"] .vgb-res-tile,
.vgb-booking-widget[data-style="integrated"] .vgb-recap,
.vgb-booking-widget[data-style="integrated"] .vgb-step3-specialist{
  background:transparent;
  box-shadow:none;
  border-color:var(--vgb-border);
}

/* ---------------------------------------------------------------------------
   SERVICIOS — nombre + duración + precio, sin emojis, todo legible
   --------------------------------------------------------------------------- */
.vgb-svc-info{flex:1;min-width:0}
.vgb-svc-name{font-size:var(--vgb-fs-base);font-weight:500;line-height:1.3}
.vgb-svc-meta{font-size:var(--vgb-fs-sm);color:var(--vgb-faint);margin-top:1px}
.vgb-svc-price{
  font-size:var(--vgb-fs-md);font-weight:700;
  color:var(--vgb-text);
  flex-shrink:0;
  padding:4px 12px;
  background:var(--vgb-bg-2);
  border-radius:8px;
  white-space:nowrap;
}

/* Botones de Añadir a calendario en la confirmación */
.vgb-cal-add-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:var(--vgb-gap-lg)}
.vgb-cal-add-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 18px;border-radius:99px;
  background:var(--vgb-bg-2);border:.5px solid var(--vgb-border);
  color:var(--vgb-text);font-size:var(--vgb-fs-sm);font-weight:500;
  box-shadow:var(--vgb-shadow-sm);transition:all .18s var(--vgb-ease);
}
.vgb-cal-add-btn:hover{box-shadow:var(--vgb-shadow-md);transform:translateY(-1px)}

/* Validación en tiempo real del formulario */
.vgb-input.invalid{border-color:hsl(0 60% 65%);box-shadow:0 0 0 3px hsl(0 60% 65% / .1)}
.vgb-input.valid{border-color:var(--vgb-avail);box-shadow:0 0 0 3px hsl(142 45% 52% / .08)}

body{margin:0;background:hsl(220 20% 96%);padding:40px 20px;font-family:-apple-system,sans-serif}
/* ══ v3.1 Motion & Refinement ══ */
@keyframes vgb-tile-select{
  0%{transform:translateY(0) scale(1)}
  30%{transform:translateY(-10px) scale(1.07);filter:blur(.3px)}
  62%{transform:translateY(-3px) scale(1.02);filter:blur(0)}
  100%{transform:translateY(0) scale(1)}
}
.vgb-res-tile{background:transparent!important;border-color:transparent!important;box-shadow:none!important;
  transition:transform .36s cubic-bezier(.175,.885,.32,1.275),background .24s,border-color .24s,opacity .3s,filter .3s!important}
.vgb-res-tile:hover{background:var(--vgb-bg-2)!important;border-color:var(--vgb-border)!important;box-shadow:none!important;transform:translateY(-2px)!important}
.vgb-res-tile:active{transform:scale(.96)!important}

/* Dark mode: los tiles necesitan un fondo base visible */
.vgb-booking-widget[data-theme="dark"] .vgb-res-tile{
  background:hsl(220 16% 16% / .5)!important;
  border-color:hsl(220 15% 22%)!important;
}
.vgb-res-grid.has-selection .vgb-res-tile:not(.vgb-res-tile--selected){
  opacity:.28!important;filter:saturate(.2) blur(.5px)!important;transform:scale(.93)!important;pointer-events:none}
.vgb-res-tile--selected{
  background:var(--vgb-bg)!important;border-color:var(--vgb-border-md)!important;
  box-shadow:0 0 0 1.5px var(--vgb-border-md),var(--vgb-shadow-md),0 0 0 1px hsl(220 20% 100%/.7) inset,var(--vgb-shadow-glow)!important;
  opacity:1!important;filter:none!important;transform:scale(1)!important;pointer-events:auto!important;
  animation:vgb-tile-select .44s cubic-bezier(.175,.885,.32,1.275) both!important}
.vgb-res-tile--selected .vgb-res-tile-avatar{transform:scale(1.06);transition:transform .44s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 4px 18px hsl(220 30% 20%/.16)}
.vgb-select-trigger{background:var(--vgb-bg-2)!important;border-color:transparent!important;border-radius:99px!important;box-shadow:none!important;min-height:50px!important;
  transition:background .2s,border-color .2s,border-radius .28s cubic-bezier(.175,.885,.32,1.275)!important}
.vgb-select-trigger:hover{background:var(--vgb-bg)!important;border-color:var(--vgb-border)!important}
.vgb-select-trigger.open{border-radius:var(--vgb-r) var(--vgb-r) 0 0!important;border-color:var(--vgb-border-md)!important;background:var(--vgb-bg)!important}
.vgb-dropdown-item{transition:background .14s,padding-left .2s cubic-bezier(.175,.885,.32,1.275)}
.vgb-dropdown-item:hover,.vgb-dropdown-item.selected{padding-left:20px}
.vgb-dropdown-item.selected{background:transparent!important}
.vgb-theme-toggle{position:absolute;top:10px;right:12px;z-index:20;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:transparent;border:.5px solid transparent;
  color:var(--vgb-faint);opacity:.38;cursor:pointer;
  transition:color .2s,background .2s,border-color .2s,opacity .2s,transform .36s cubic-bezier(.175,.885,.32,1.275)}
.vgb-theme-toggle:hover{opacity:1;background:var(--vgb-bg-2);border-color:var(--vgb-border);color:var(--vgb-muted);transform:rotate(22deg)}
.vgb-theme-toggle:active{transform:rotate(0deg) scale(.86)}
.vgb-theme-toggle svg{width:13px;height:13px;display:block;stroke:currentColor;fill:none;stroke-width:1.8}
.vgb-booking-widget[data-theme="light"] .vgb-icon-moon{display:block}
.vgb-booking-widget[data-theme="light"] .vgb-icon-sun{display:none}
.vgb-booking-widget[data-theme="dark"] .vgb-icon-sun{display:block}
.vgb-booking-widget[data-theme="dark"] .vgb-icon-moon{display:none}

/* ── FIX dropdown overflow ── */
/* Permitir que el dropdown salga del widget sin cortar el background del dark mode */
#vgb-booking-widget,
.vgb-booking-widget{
  overflow:visible!important;
  /* El background se aplica con un pseudo-elemento para que overflow:visible no lo cancele */
}
#vgb-booking-widget::before,
.vgb-booking-widget::before{
  content:'';
  position:absolute;
  inset:0;
  background:var(--vgb-bg);
  border-radius:var(--vgb-r-xl);
  z-index:0;
  pointer-events:none;
}
#vgb-booking-widget > *,
.vgb-booking-widget > *{
  position:relative;
  z-index:1;
}
.vgb-booking-widget[data-style="integrated"]::before{
  display:none;
}
/* Barra de progreso: clip separado */
.vgb-top-progress{
  border-radius:var(--vgb-r-xl) var(--vgb-r-xl) 0 0;
  overflow:hidden;
}

/* ── Motion mejorado: grid inicial ── */
@keyframes vgb-card-in{
  from{opacity:0;transform:translateY(28px) scale(.92);filter:blur(8px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
.vgb-res-grid{
  perspective:800px;
}
.vgb-res-tile{
  animation:vgb-card-in .55s cubic-bezier(.16,1,.3,1) both!important;
  transform-origin:center bottom;
}
.vgb-res-tile:nth-child(1){animation-delay:.04s!important}
.vgb-res-tile:nth-child(2){animation-delay:.1s!important}
.vgb-res-tile:nth-child(3){animation-delay:.16s!important}
.vgb-res-tile:nth-child(4){animation-delay:.22s!important}
.vgb-res-tile:nth-child(5){animation-delay:.28s!important}
/* Avatar con ring sutil */
.vgb-res-tile-avatar{
  transition:transform .44s cubic-bezier(.175,.885,.32,1.275),
             box-shadow .3s cubic-bezier(.4,0,.2,1)!important;
  ring:0;
}
.vgb-res-tile:hover .vgb-res-tile-avatar{
  transform:scale(1.08) translateY(-2px)!important;
  box-shadow:0 6px 20px hsl(220 30% 20%/.14)!important;
}
/* Nombre con slide sutil en hover */
.vgb-res-tile-name{
  transition:transform .3s cubic-bezier(.175,.885,.32,1.275)!important;
}
.vgb-res-tile:hover .vgb-res-tile-name{
  transform:translateY(-1px)!important;
}

/* ═══════════════════════════════════════════════════════════════
   BOTONES DE ACCIÓN — confirmación final
   Geométricos, apilados verticalmente, mismo tamaño
   ═══════════════════════════════════════════════════════════════ */
.vgb-confirm-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:var(--vgb-gap-lg);
  max-width:340px;
  margin-inline:auto;
}

.vgb-action-btn{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  width:100%;
  min-height:52px;
  padding:14px 18px;
  background:hsl(0 0% 100%);
  border:1px solid var(--vgb-border-md);
  border-radius:12px;              /* GEOMÉTRICO */
  font-family:var(--vgb-font);
  font-size:var(--vgb-fs-base);
  font-weight:500;
  color:var(--vgb-text);
  text-decoration:none;
  cursor:pointer;
  text-align:left;
  letter-spacing:-.01em;
  transition:
    transform .16s cubic-bezier(.175,.885,.32,1.275),
    border-color .16s ease,
    box-shadow .2s ease,
    background .16s ease;
  box-shadow:0 1px 2px hsl(220 40% 20% / .05);
}

.vgb-action-btn:hover{
  border-color:hsl(220 15% 62%);
  background:hsl(220 20% 99%);
  transform:translateY(-1px);
  box-shadow:0 4px 12px hsl(220 40% 20% / .10);
}

.vgb-action-btn:active{
  transform:translateY(0);
}

.vgb-action-icon{
  display:grid;
  place-items:center;
  width:20px;height:20px;
  flex-shrink:0;
  color:var(--vgb-muted);
  transition:color .16s ease;
}

.vgb-action-btn:hover .vgb-action-icon{
  color:var(--vgb-text);
}

/* Variante fantasma — última acción */
.vgb-action-btn--ghost{
  background:transparent;
  border-style:dashed;
  color:var(--vgb-muted);
}
.vgb-action-btn--ghost:hover{
  background:hsl(220 20% 98%);
  border-style:solid;
  color:var(--vgb-text);
}

.vgb-action-btn:focus-visible{
  outline:2px solid hsl(211 100% 50%);
  outline-offset:2px;
}

/* Responsive — Apple/Google Calendar breakpoints */
@container vgb (max-width: 420px){
  .vgb-confirm-actions{max-width:100%}
  .vgb-action-btn{
    min-height:48px;
    padding:12px 14px;
    font-size:var(--vgb-fs-sm);
    gap:10px;
  }
}

@media (prefers-reduced-motion: reduce){
  .vgb-action-btn{transition-duration:.01ms}
}