/* PS Booking v3 — Mobile first */

.psb-form {
    background: #f9f4f0;
    border: 1px solid #F5D4CB;
    border-radius: 16px;
    padding: 20px 18px 22px;
    margin: 16px 0 24px;
    font-family: inherit;
    max-width: 540px;
}

/* ── Barra de pasos ── */
.psb-steps-bar { display:flex; align-items:flex-start; justify-content:center; margin-bottom:22px; }
.psb-step-dot  { display:flex; flex-direction:column; align-items:center; gap:4px; flex-shrink:0; min-width:36px; }
.psb-step-dot span {
    width:26px; height:26px; border-radius:50%;
    background:#e5dbd7; color:#bbb; font-size:11px; font-weight:700;
    display:flex; align-items:center; justify-content:center; transition:.2s;
}
.psb-step-dot small { font-size:9px; color:#bbb; font-weight:600; white-space:nowrap; }
.psb-step-dot.active span { background:#1a1a2e; color:#F5D4CB; }
.psb-step-dot.active small { color:#1a1a2e; }
.psb-step-dot.done span   { background:#1a1a2e; color:#F5D4CB; font-size:0; }
.psb-step-dot.done span::after { content:'✓'; font-size:12px; }
.psb-step-dot.done small  { color:#1a1a2e; }
.psb-step-line { flex:1; height:2px; background:#e5dbd7; margin:12px 2px 0; min-width:6px; transition:.2s; }
.psb-step-line.done { background:#1a1a2e; }

/* ── Paneles ── */
.psb-panel { display:none; animation:psbIn .2s ease; }
.psb-panel.active { display:block; }
@keyframes psbIn { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:translateY(0)} }
.psb-panel-q { font-size:15px; font-weight:700; color:#1a1a2e; margin:0 0 14px; text-align:center; }

/* ── Grupos de botones (sede, pago) ── */
.psb-btn-group { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.psb-sede-btn {
    flex:1; min-width:120px; padding:14px 16px;
    border:2px solid #e5dbd7; border-radius:10px;
    background:#fff; cursor:pointer; font-size:14px; font-weight:600; color:#555;
    transition:.2s; text-align:center;
}
.psb-sede-btn:hover  { border-color:#F5D4CB; color:#1a1a2e; }
.psb-sede-btn.active { border-color:#1a1a2e; background:#1a1a2e; color:#F5D4CB; }

/* ── Calendario ── */
.psb-cal-nav { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.psb-nav-btn { background:#1a1a2e; color:#F5D4CB; border:none; border-radius:6px; width:30px; height:30px; cursor:pointer; font-size:16px; flex-shrink:0; }
#psb-month-label { font-size:14px; font-weight:700; color:#1a1a2e; flex:1; text-align:center; }
.psb-calendar { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.psb-cal-header { text-align:center; font-size:9px; font-weight:700; color:#aaa; padding:3px 0; text-transform:uppercase; }
.psb-cal-day { text-align:center; padding:6px 2px; border-radius:6px; font-size:12px; cursor:default; color:#ccc; min-height:30px; display:flex; align-items:center; justify-content:center; }
.psb-cal-day.available { background:#fff; border:1px solid #F5D4CB; color:#1a1a2e; cursor:pointer; font-weight:600; transition:.2s; }
.psb-cal-day.available:hover { background:#F5D4CB; }
.psb-cal-day.selected  { background:#1a1a2e; color:#F5D4CB; border-color:#1a1a2e; }
.psb-cal-day.today     { font-weight:800; }
.psb-cal-day.empty     { background:transparent; border:none; }

/* ── Horarios ── */
.psb-times { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.psb-time-btn { padding:9px 16px; border:2px solid #e5dbd7; border-radius:8px; background:#fff; cursor:pointer; font-size:13px; font-weight:600; color:#555; transition:.2s; }
.psb-time-btn:hover  { border-color:#F5D4CB; color:#1a1a2e; }
.psb-time-btn.active { border-color:#1a1a2e; background:#1a1a2e; color:#F5D4CB; }

/* ── Datos ── */
.psb-fields { display:flex; flex-direction:column; gap:8px; }
.psb-row2   { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.psb-fields input {
    width:100%; padding:11px 13px;
    border:1px solid #e5dbd7; border-radius:8px;
    font-size:14px; box-sizing:border-box;
    background:#fff; transition:.2s; font-family:inherit;
}
.psb-fields input:focus    { border-color:#1a1a2e; outline:none; }
.psb-fields input::placeholder { color:#bbb; }
.psb-field-error { color:#c0392b; font-size:13px; margin:6px 0 0; text-align:center; }
.psb-next-btn {
    width:100%; margin-top:12px; padding:13px;
    background:#1a1a2e; color:#F5D4CB;
    border:none; border-radius:10px;
    font-size:15px; font-weight:700; cursor:pointer; transition:.2s;
}
.psb-next-btn:hover { background:#2d2d4e; }

/* ── Botones de pago ── */
.psb-pay-btn {
    flex:1; min-width:130px; padding:16px 14px;
    border:2px solid #e5dbd7; border-radius:12px;
    background:#fff; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; gap:3px;
    transition:.2s; text-align:center;
}
.psb-pay-btn strong { font-size:13px; color:#1a1a2e; }
.psb-pay-btn span   { font-size:14px; font-weight:700; color:#1a1a2e; }
.psb-pay-btn small  { font-size:11px; color:#aaa; }
.psb-pay-btn:hover  { border-color:#F5D4CB; }
.psb-pay-btn.active { border-color:#1a1a2e; background:#1a1a2e; }
.psb-pay-btn.active strong,
.psb-pay-btn.active span { color:#F5D4CB; }
.psb-pay-btn.active small { color:#F5D4CB; opacity:.7; }

/* ── Aviso gift card ── */
.psb-giftcard-notice {
    background:#fff; border:1px dashed #F5D4CB;
    border-radius:10px; padding:12px 14px;
    font-size:13px; color:#555; text-align:center;
    margin-top:14px; line-height:1.5;
}

/* ── Resumen ── */
.psb-summary-card { background:#fff; border:1px solid #F5D4CB; border-radius:10px; padding:14px 16px; margin-bottom:12px; }
.psb-summary-row  { display:flex; justify-content:space-between; font-size:13px; padding:5px 0; border-bottom:1px dashed #f0e8e4; color:#555; gap:10px; }
.psb-summary-row:last-child { border-bottom:none; }
.psb-summary-row strong { color:#1a1a2e; font-weight:600; text-align:right; }

/* ── Hold ── */
.psb-hold-notice { background:#fff8e1; border:1px solid #ffe082; border-radius:8px; padding:10px 14px; font-size:13px; color:#5d4037; margin-bottom:12px; text-align:center; }
.psb-hold-expired { background:#fdecea; border:1px solid #f5c6cb; border-radius:8px; padding:10px 14px; font-size:13px; color:#721c24; margin-bottom:12px; text-align:center; }
.psb-link-btn { background:none; border:none; color:#1a1a2e; font-weight:700; cursor:pointer; text-decoration:underline; font-size:13px; padding:0; }

/* ── Acciones confirmar ── */
.psb-confirm-actions { display:flex; flex-direction:column; gap:8px; margin-bottom:8px; }
.psb-confirm-btn { width:100%; padding:14px; background:#1a1a2e; color:#F5D4CB; border:none; border-radius:10px; font-size:15px; font-weight:700; cursor:pointer; transition:.2s; }
.psb-confirm-btn:hover:not(:disabled) { background:#2d2d4e; }
.psb-confirm-btn:disabled { opacity:.5; cursor:not-allowed; }
.psb-add-service-link { display:block; text-align:center; padding:10px; border:2px dashed #F5D4CB; border-radius:10px; color:#1a1a2e; font-size:13px; font-weight:600; text-decoration:none; transition:.2s; }
.psb-add-service-link:hover { background:#fff; }
.psb-confirm-error { background:#fdecea; border:1px solid #f5c6cb; border-radius:8px; padding:10px 14px; font-size:13px; color:#721c24; margin-bottom:10px; text-align:center; }
.psb-confirm-loading { display:flex; align-items:center; justify-content:center; gap:10px; padding:20px; color:#555; font-size:14px; }
.psb-spinner { width:20px; height:20px; border:3px solid #e5dbd7; border-top-color:#1a1a2e; border-radius:50%; animation:psbSpin .7s linear infinite; flex-shrink:0; }
@keyframes psbSpin { to{transform:rotate(360deg)} }

/* ── Volver ── */
.psb-back-row { text-align:center; margin-top:10px; }
.psb-back-btn { background:none; border:none; color:#aaa; font-size:12px; cursor:pointer; padding:4px 8px; }
.psb-back-btn:hover { color:#1a1a2e; }

/* ── Misc ── */
.psb-loading  { color:#aaa; font-size:13px; text-align:center; padding:8px 0; }
.psb-no-slots { color:#aaa; font-size:13px; font-style:italic; text-align:center; padding:6px 0; margin:0; }

/* ── Modal ── */
#psb-modal { position:fixed; inset:0; z-index:99999; display:none; align-items:center; justify-content:center; }
#psb-modal[style*="display: block"],
#psb-modal[style*="display:block"] { display:flex !important; }
#psb-modal-bg  { position:absolute; inset:0; background:rgba(0,0,0,.55); }
#psb-modal-box { position:relative; z-index:1; background:#fff; border-radius:16px; padding:24px 20px; max-width:460px; width:90%; max-height:85vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.25); }
#psb-modal-box h3 { margin:0 0 10px; font-size:17px; color:#1a1a2e; }
#psb-modal-box > p { font-size:14px; color:#555; margin:0 0 12px; }
.psb-modal-notice { background:#fff8e1; border:1px solid #ffe082; border-radius:8px; padding:10px 13px; font-size:12px; color:#5d4037; margin-bottom:14px; line-height:1.5; }
.psb-modal-actions { display:flex; flex-direction:column; gap:8px; margin-top:16px; }
#psb-modal-services { display:flex; flex-direction:column; gap:8px; }
.psb-service-card { display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid #F5D4CB; border-radius:10px; text-decoration:none; color:inherit; transition:.2s; background:#fdfbf9; }
.psb-service-card:hover { background:#f9f4f0; border-color:#1a1a2e; }
.psb-service-card img { width:48px; height:48px; border-radius:8px; object-fit:cover; flex-shrink:0; }
.psb-service-card div { display:flex; flex-direction:column; gap:3px; }
.psb-service-card strong { font-size:13px; color:#1a1a2e; font-weight:700; }
.psb-service-card span   { font-size:12px; color:#888; }

/* ── Responsive ── */
@media (max-width:480px) {
    .psb-form    { padding:16px 14px 18px; }
    .psb-row2    { grid-template-columns:1fr; }
    .psb-btn-group { flex-direction:column; }
    .psb-pay-btn { min-width:unset; }
    .psb-step-dot small { display:none; }
    .psb-step-line { margin-top:12px; min-width:4px; }
}

/* ── Lista de espera ─────────────────────────────────────────────────────── */
.psb-waitlist-section {
    margin-top: 16px;
    border-top: 1px dashed #F5D4CB;
    padding-top: 14px;
}
.psb-waitlist-toggle {
    background: none;
    border: none;
    color: #888;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    width: 100%;
    text-align: center;
    transition: color .2s;
}
.psb-waitlist-toggle:hover { color: #1a1a2e; }
.psb-waitlist-box {
    background: #fff;
    border: 1px solid #F5D4CB;
    border-radius: 12px;
    padding: 16px;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.psb-waitlist-intro {
    font-size: 13px;
    color: #555;
    margin: 0 0 4px;
    text-align: center;
}
.psb-waitlist-box input,
.psb-waitlist-box select,
.psb-waitlist-box textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e5dbd7;
    border-radius: 8px;
    font-size: 13px;
    box-sizing: border-box;
    font-family: inherit;
    background: #fff;
    transition: border-color .2s;
}
.psb-waitlist-box input:focus,
.psb-waitlist-box select:focus,
.psb-waitlist-box textarea:focus { border-color: #1a1a2e; outline: none; }
.psb-waitlist-box input::placeholder,
.psb-waitlist-box textarea::placeholder { color: #bbb; }
.psb-waitlist-box textarea { resize: vertical; min-height: 70px; }
.psb-waitlist-success {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #10b981;
    padding: 12px;
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 8px;
    margin-top: 10px;
}