/* Agenda — booking flow */
.agenda-section{background:oklch(98.5% 0 0)}
.agenda-inner{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.agenda-header{margin-bottom:var(--space-xxl)}
.agenda-header h1{font-size:var(--font-size-display-lg);font-weight:var(--font-weight-bold);line-height:var(--leading-tight);letter-spacing:-.015em;color:var(--fg);margin-bottom:var(--space-md)}

/* Card */
.agenda-card{background:var(--surface);border-radius:var(--r-sm);padding:var(--space-xxl);max-width:var(--content-narrow);margin-left:0;position:relative;box-shadow:0 6px 0 0 var(--border)}
.progress-line{position:absolute;top:0;left:0;height:2px;background:var(--accent);transition:width .35s var(--ease-eng);border-radius:var(--r-sm) 0 0 0}

/* Steps viewport & track — horizontal slide */
.agenda-steps-viewport{overflow:hidden;position:relative;transition:height .35s var(--ease-eng),opacity .2s ease}
.agenda-steps-track{position:relative}
.agenda-step{position:absolute;top:0;left:0;width:100%;min-width:0;opacity:0;transform:translateX(40px);transition:transform .35s var(--ease-eng),opacity .35s ease;pointer-events:none}
.agenda-step.active{position:relative;opacity:1;transform:translateX(0);pointer-events:auto}
.agenda-step h2{font-size:var(--font-size-heading-lg);font-weight:var(--font-weight-bold);margin-bottom:var(--space-xs);color:var(--fg)}
.step-desc{font-size:var(--font-size-body-sm);color:var(--fg-muted);margin-bottom:var(--space-xl);line-height:var(--leading-body)}

/* Fields */
.agenda-field{margin-bottom:var(--space-md)}
.agenda-field label{display:flex;align-items:center;gap:var(--space-6);font-size:var(--font-size-caption-sm);font-weight:var(--font-weight-regular);text-transform:uppercase;letter-spacing:.06em;color:var(--fg-muted);margin-bottom:var(--space-6)}
.agenda-badge{display:inline-flex;font-size:10px;font-weight:600;color:var(--fg-disabled);border:1px solid var(--border);border-radius:var(--r-sm);padding:1px 6px;text-transform:uppercase;letter-spacing:.04em;line-height:1.4}
.agenda-input{width:100%;padding:var(--space-10) var(--space-md);border:1px solid var(--border);border-radius:var(--r-sm);font-size:var(--font-size-body);font-family:inherit;color:var(--fg);background:var(--surface);transition:border-color .15s ease;outline:none;box-sizing:border-box}
.agenda-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.agenda-input::placeholder{color:var(--fg-disabled)}
.agenda-textarea{resize:vertical;min-height:60px}
.agenda-phone-wrap{display:flex;align-items:stretch}
.agenda-phone-prefix{display:flex;align-items:center;padding:var(--space-10) var(--space-md);border:1px solid var(--border);border-right:none;border-radius:var(--r-sm) 0 0 var(--r-sm);font-size:var(--font-size-body);color:var(--fg-muted);background:var(--surface-soft);white-space:nowrap;line-height:1.5}
.agenda-input-phone{border-radius:0 var(--r-sm) var(--r-sm) 0;flex:1;min-width:0}

/* Icon cards — replace radio buttons */
.icon-grid{display:grid;gap:var(--space-sm)}
.icon-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.icon-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.icon-card{
  display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);
  padding:var(--space-14) var(--space-lg);
  border:1px solid var(--border);border-radius:var(--r-sm);
  font-size:12px;font-weight:600;
  font-family:inherit;color:var(--fg-muted);
  background:var(--surface);cursor:pointer;text-align:center;
  transition:all .15s ease
}
.icon-card svg{display:block;width:20px;height:20px;flex-shrink:0;fill:currentColor}
.icon-card:hover{border-color:var(--accent);color:var(--accent)}
.icon-card.selected{background:var(--accent-tint);color:var(--accent);border-color:var(--accent-soft)}
.icon-card .card-desc{font-size:10px;font-weight:400;color:var(--fg-disabled);line-height:1.3;margin-top:var(--space-xxs)}

/* Checkbox card */
.agenda-checkbox-card{display:flex;align-items:flex-start;gap:var(--space-md);padding:var(--space-14) var(--space-lg);border:1px solid var(--border);border-radius:var(--r-sm);cursor:pointer;transition:all .15s ease}
.agenda-checkbox-card:hover{border-color:var(--accent);color:var(--accent)}
.agenda-checkbox-card.checked{background:var(--accent-tint);color:var(--accent);border-color:var(--accent-soft)}
.agenda-checkbox-card input{position:absolute;opacity:0;pointer-events:none}
.agenda-checkbox-marker{width:18px;height:18px;border:2px solid var(--border);border-radius:var(--r-sm);flex-shrink:0;margin-top:1px;transition:all .15s ease;position:relative}
.agenda-checkbox-card.checked .agenda-checkbox-marker{background:var(--accent);border-color:var(--accent)}
.agenda-checkbox-card.checked .agenda-checkbox-marker::after{content:'';position:absolute;top:3px;left:3px;width:8px;height:4px;border-left:2px solid var(--on-accent);border-bottom:2px solid var(--on-accent);transform:rotate(-45deg)}
.agenda-checkbox-text{font-size:var(--font-size-body-sm);line-height:var(--leading-body);color:var(--fg)}
.agenda-checkbox-text a{color:var(--accent);text-decoration:underline}

/* Date list — vertical scrollable + slots panel */
.agenda-datetime{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl)}
.agenda-datelist{max-height:320px;overflow-y:auto;display:flex;flex-direction:column;gap:var(--space-xxs);padding-right:var(--space-sm);mask-image:linear-gradient(to bottom,black 85%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,black 85%,transparent 100%)}
.agenda-datelist::-webkit-scrollbar{width:4px}
.agenda-datelist::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--r-sm)}
.agenda-date-item{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-14) var(--space-lg);border:1px solid var(--border);border-radius:var(--r-sm);cursor:pointer;transition:all .15s ease;background:var(--surface);text-align:left;font-family:inherit}
.agenda-date-item:hover{border-color:var(--accent);color:var(--accent)}
.agenda-date-item.selected{background:var(--accent-tint);color:var(--accent);border-color:var(--accent-soft)}
.agenda-date-item.disabled{opacity:.3;pointer-events:none;cursor:default}
.agenda-date-item.disabled .agenda-date-day{color:var(--fg-disabled)}
.agenda-date-item.disabled .agenda-date-num{color:var(--fg-disabled)}
.agenda-date-item.today .agenda-date-num{color:var(--accent)}
.agenda-date-item.today{border-color:var(--accent-soft)}
.agenda-date-day{font-size:var(--font-size-caption-sm);font-weight:600;color:var(--fg-muted);min-width:24px;text-transform:uppercase}
.agenda-date-num{font-size:var(--font-size-heading-md);font-weight:var(--font-weight-bold);line-height:1}
.agenda-date-month{font-size:var(--font-size-caption-xs);color:var(--fg-muted);margin-left:auto}
.agenda-date-item.selected .agenda-date-day{color:var(--accent)}
.agenda-date-item.selected .agenda-date-month{color:var(--accent)}
.agenda-month-label{font-size:10px;font-weight:700;color:var(--fg-disabled);text-transform:uppercase;letter-spacing:.06em;padding:var(--space-sm) 0;position:sticky;top:0;z-index:1;background:var(--surface)}

/* Slots panel */
.agenda-slots-panel{}
.agenda-slots-panel label{display:block;font-size:var(--font-size-caption-sm);font-weight:var(--font-weight-regular);text-transform:uppercase;letter-spacing:.06em;color:var(--fg-muted);margin-bottom:var(--space-md)}
.agenda-slots{display:flex;flex-wrap:wrap;gap:var(--space-sm)}
.slots-empty{display:flex;flex-direction:column;align-items:center;padding:var(--space-xl) 0;width:100%;font-size:var(--font-size-body-sm);color:var(--fg-muted);text-align:center}
.slots-empty-icon{margin:0 auto var(--space-md);width:28px;height:28px;color:var(--fg-disabled);fill:currentColor}
.agenda-slot{padding:var(--space-14) var(--space-lg);border:1px solid var(--border);border-radius:var(--r-sm);font-size:12px;font-family:inherit;font-weight:600;color:var(--fg-muted);background:var(--surface);cursor:pointer;text-align:center;transition:all .15s ease}
.agenda-slot:hover{border-color:var(--accent);color:var(--accent)}
.agenda-slot.selected{background:var(--accent-tint);color:var(--accent);border-color:var(--accent-soft)}
.agenda-slot.booked{color:var(--fg-disabled);cursor:default;pointer-events:none;opacity:.4}
.slot-skeleton{width:70px;height:36px;border-radius:var(--r-sm);background:var(--border);animation:slot-pulse 1s ease-in-out infinite}
@keyframes slot-pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* Summary — icon-card style consistent with step 2 */
.agenda-summary{display:flex;flex-direction:column;gap:var(--space-lg)}
.summary-section{border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden}
.summary-section-head{display:flex;align-items:center;justify-content:space-between;padding:var(--space-sm) var(--space-lg);background:var(--surface-soft);border-bottom:1px solid var(--border)}
.summary-section-title{font-size:10px;font-weight:700;color:var(--fg-muted);text-transform:uppercase;letter-spacing:.06em}
.summary-edit{background:none;border:none;padding:2px 8px;font-size:11px;font-weight:600;color:var(--accent);cursor:pointer;border-radius:var(--r-sm);transition:background .1s}
.summary-edit:hover{background:var(--accent-soft)}
.summary-grid{display:flex;flex-direction:column;gap:var(--space-xxs);padding:var(--space-md) var(--space-lg)}
.summary-item{display:flex;align-items:center;gap:var(--space-lg);padding:var(--space-14) var(--space-lg);border:1px solid var(--border);border-radius:var(--r-sm);transition:all .15s ease;cursor:pointer}
.summary-item:hover{border-color:var(--accent);color:var(--accent)}
.summary-item:hover .summary-icon{color:var(--accent)}
.summary-icon{width:20px;height:20px;flex-shrink:0;fill:currentColor;color:var(--fg-muted)}
.summary-item-info{display:flex;flex-direction:column;gap:1px;min-width:0}
.summary-item-label{font-size:10px;font-weight:600;color:var(--fg-muted);text-transform:uppercase;letter-spacing:.04em}
.summary-item-value{font-size:12px;font-weight:600;color:var(--fg)}
.summary-address{font-size:var(--font-size-caption-sm);color:var(--fg-disabled);padding:var(--space-sm) var(--space-lg);border-top:1px solid var(--border);text-align:center}

/* Nav buttons */
.agenda-nav{display:flex;justify-content:space-between;margin-top:var(--space-xxl)}
.agenda-nav .btn{gap:var(--space-6)}
.agenda-nav .btn svg{width:16px;height:16px;flex-shrink:0}

/* Info bar below card */
.agenda-info{font-size:var(--font-size-caption-xs);color:var(--fg-disabled);line-height:var(--leading-body);text-align:center;padding:var(--space-lg) 0 0;border-top:1px solid var(--border);margin-top:var(--space-xxl)}
.agenda-info svg{width:12px;height:12px;vertical-align:middle;margin:-1px 4px 0 0;color:var(--fg-disabled);fill:currentColor}

/* Success state — fade in */
.agenda-success{text-align:center;padding:calc(var(--space-xxl)*1.5) 0;display:none;opacity:0;transition:opacity .35s ease}
.agenda-success.active{display:block;opacity:1}
.agenda-success-icon{width:56px;height:56px;border-radius:50%;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;margin:0 auto var(--space-lg);color:var(--accent)}
.agenda-success h2{font-size:var(--font-size-heading-lg);font-weight:var(--font-weight-bold);margin-bottom:var(--space-sm)}
.agenda-success p{font-size:var(--font-size-body);color:var(--fg-muted);margin-bottom:var(--space-xxl);line-height:var(--leading-body)}
.agenda-success-detail{font-size:var(--font-size-body-sm);color:var(--fg-muted);margin-bottom:var(--space-xxs)}
.agenda-success-detail strong{color:var(--fg)}
.agenda-success-addr{font-size:var(--font-size-caption-xs);color:var(--fg-disabled);margin-bottom:var(--space-xxl)}

/* Loading — overlay dentro del card */
.agenda-loading-overlay{position:absolute;inset:0;background:var(--surface);display:none;align-items:center;justify-content:center;flex-direction:column;gap:var(--space-lg);z-index:10;border-radius:var(--r-sm)}
.agenda-loading-overlay.active{display:flex}
.agenda-loading-overlay .spinner{width:24px;height:24px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite}
.agenda-loading-overlay p{font-size:var(--font-size-body-sm);color:var(--fg-muted)}

/* Loading — inline (slots) */
.agenda-loading{text-align:center;padding:var(--space-xl);color:var(--fg-muted)}
.agenda-loading .spinner{width:24px;height:24px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite;margin:0 auto var(--space-md)}
@keyframes spin{to{transform:rotate(360deg)}}

/* Validation */
.agenda-input.error{border-color:#e52020;box-shadow:0 0 0 2px rgba(229,32,32,.15)}
.agenda-error{font-size:12px;color:#e52020;margin-top:4px;display:none;line-height:var(--leading-body)}
.agenda-error.show{display:block}
.step-error{font-size:var(--font-size-caption-sm);color:#e52020;margin-bottom:var(--space-lg);padding:var(--space-sm) var(--space-md);background:rgba(229,32,32,.06);border-radius:var(--r-sm);display:none}
.step-error.show{display:block}

/* Autocomplete — custom dropdown */
.autocomplete-wrap{position:relative}
.autocomplete-input{padding-right:calc(var(--space-md)*3)!important}
.autocomplete-arrow{position:absolute;right:var(--space-md);top:50%;transform:translateY(-50%);color:var(--fg-muted);pointer-events:none;transition:transform .15s ease}
.autocomplete-wrap.open .autocomplete-arrow{transform:translateY(-50%)rotate(180deg);color:var(--accent)}
.autocomplete-dropdown{position:absolute;top:calc(100% + 2px);left:0;right:0;z-index:50;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);max-height:240px;overflow-y:auto;display:none}
.autocomplete-wrap.open .autocomplete-dropdown{display:block}
.autocomplete-item{padding:var(--space-sm) var(--space-md);font-size:var(--font-size-body-sm);cursor:pointer;transition:background .1s;color:var(--fg)}
.autocomplete-item:hover,.autocomplete-item.hover{background:var(--accent-soft);color:var(--accent)}
.autocomplete-item.highlight{background:var(--accent);color:var(--on-accent)}
.autocomplete-empty{padding:var(--space-sm) var(--space-md);font-size:var(--font-size-caption-sm);color:var(--fg-disabled)}

/* ── Responsive ── */
@media(max-width:480px){
  .icon-grid.cols-3{grid-template-columns:repeat(2,1fr)}
  .icon-card{padding:var(--space-md) var(--space-14)}
}

@media(max-width:640px){
  .agenda-datetime{grid-template-columns:1fr;gap:var(--space-lg)}
  .agenda-datelist{max-height:240px}
}