/* ==========================================================================
   Service detail page (booking) — extends main.css + producto.css tokens.
   Load main.css, then producto.css (shared gallery/tabs/buybox), then this file.
   ========================================================================== */

/* ---------- Day picker ---------- */
.svc-day-picker { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; }
.svc-day-btn {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  min-width: 3.4rem; padding: .6rem .3rem; border-radius: .8rem;
  border: 1px solid rgba(22,36,28,0.15); flex-shrink: 0; transition: all .15s ease;
}
.svc-day-btn span { font-size: .68rem; font-weight: 600; color: #6B7268; text-transform: uppercase; }
.svc-day-btn strong { font-size: 1rem; font-weight: 700; color: #16241C; }
.svc-day-btn:hover { border-color: #2F6B4F; }
.svc-day-btn.active { background: #16241C; border-color: #16241C; }
.svc-day-btn.active span { color: rgba(255,255,255,0.6); }
.svc-day-btn.active strong { color: #fff; }
.svc-day-btn:disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }

/* ---------- Time slot grid ---------- */
.svc-time-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.svc-time-btn {
  height: 2.5rem; border-radius: .6rem; border: 1px solid rgba(22,36,28,0.15);
  font-size: .8rem; font-weight: 600; color: #3A493F; transition: all .15s ease;
}
.svc-time-btn:hover { border-color: #2F6B4F; }
.svc-time-btn.active { background: #2F6B4F; border-color: #2F6B4F; color: #fff; }
.svc-time-btn:disabled { opacity: .35; text-decoration: line-through; pointer-events: none; }

/* ---------- Location / map ---------- */
.svc-location { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .svc-location { grid-template-columns: 1fr 1fr; align-items: center; } }
.svc-map { aspect-ratio: 4 / 3; }

.svc-hours { width: 100%; border-collapse: collapse; }
.svc-hours tr { border-bottom: 1px solid rgba(22,36,28,0.08); }
.svc-hours th, .svc-hours td { text-align: left; padding: .55rem 0; font-size: .875rem; }
.svc-hours th { color: #6B7268; font-weight: 600; }
.svc-hours td { color: #16241C; font-weight: 600; text-align: right; }

/* ---------- Team ---------- */
.svc-team-card { background: #fff; border-radius: 1.1rem; padding: 1rem; box-shadow: 0 2px 10px rgba(22,36,28,0.06); text-align: center; }
.svc-team-avatar { aspect-ratio: 1; border-radius: 999px; max-width: 6.5rem; margin: 0 auto; }

/* ---------- Booking toast (error state) ---------- */
.pdp-toast-error { color: #C24630; }