/* SpaMaster 360 v22.1 - Agenda engine rewrite sin profesionales */

#view-agenda{
    display:block;
}

#view-agenda.hidden{
    display:none!important;
}

.agenda-pro-module-root{
    width:100%;
}

.agenda-v221{
    display:grid;
    grid-template-columns:250px 1fr;
    gap:16px;
    min-height:760px;
}

.agenda-v221-sidebar{
    background:#fff;
    border:1px solid #dbe3ef;
    border-radius:22px;
    padding:14px;
    height:max-content;
}

.agenda-v221-field{
    display:grid;
    gap:7px;
    margin-bottom:14px;
}

.agenda-v221-field label{
    font-size:12px;
    font-weight:950;
    color:#64748b;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.agenda-v221-input,
.agenda-v221-select{
    width:100%;
    border:1px solid #cbd5e1;
    border-radius:13px;
    padding:12px;
    background:#fff;
    font-weight:850;
    color:#172033;
}

.agenda-v221-main{
    background:#fff;
    border:1px solid #dbe3ef;
    border-radius:24px;
    overflow:hidden;
}

.agenda-v221-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:14px 16px;
    border-bottom:1px solid #e2e8f0;
    flex-wrap:wrap;
}

.agenda-v221-left,
.agenda-v221-right{
    display:flex;
    align-items:center;
    gap:9px;
    flex-wrap:wrap;
}

.agenda-v221-btn{
    border:0;
    border-radius:13px;
    padding:11px 14px;
    font-weight:950;
    cursor:pointer;
    background:#f3edff;
    color:#6C4CF1;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
}

.agenda-v221-btn-dark{background:#172033;color:#fff}
.agenda-v221-btn-primary{background:#6C4CF1;color:#fff;box-shadow:0 10px 24px rgba(108,76,241,.22)}
.agenda-v221-btn-warning{background:#f59e0b;color:#111827}
.agenda-v221-btn-danger{background:#dc2626;color:#fff}
.agenda-v221-btn-success{background:#16a34a;color:#fff}

.agenda-v221-range{
    font-weight:950;
    color:#172033;
    min-width:330px;
}

.agenda-v221-tabs{
    display:inline-flex;
    border:1px solid #dbe3ef;
    border-radius:13px;
    overflow:hidden;
}

.agenda-v221-tabs button{
    border:0;
    background:#fff;
    padding:10px 14px;
    font-weight:950;
    cursor:pointer;
}

.agenda-v221-tabs button.active{
    background:#172033;
    color:#fff;
}

.agenda-v221-mini{
    margin-top:18px;
    border-top:1px solid #e2e8f0;
    padding-top:14px;
}

.agenda-v221-mini-head{
    font-weight:950;
    margin-bottom:10px;
    color:#172033;
}

.agenda-v221-mini-grid{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:5px;
    text-align:center;
    font-size:12px;
}

.agenda-v221-mini-grid strong{
    color:#64748b;
}

.agenda-v221-mini-day{
    border:1px solid #cbd5e1;
    background:#fff;
    border-radius:999px;
    padding:6px 0;
    cursor:pointer;
    font-weight:850;
}

.agenda-v221-mini-day.today{
    background:#6C4CF1;
    color:#fff;
    border-color:#6C4CF1;
}

.agenda-v221-grid-scroll{
    overflow:auto;
}

.agenda-v221-grid{
    min-width:980px;
    display:grid;
    grid-template-columns:64px repeat(7, minmax(140px,1fr));
}

.agenda-v221-grid.day{
    grid-template-columns:64px minmax(520px,1fr);
    min-width:650px;
}

.agenda-v221-head{
    height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:950;
    color:#172033;
    background:#f8fafc;
    border-bottom:1px solid #e2e8f0;
    border-right:1px solid #e2e8f0;
    position:sticky;
    top:0;
    z-index:5;
}

.agenda-v221-time{
    height:64px;
    border-right:1px solid #e2e8f0;
    border-bottom:1px solid #e2e8f0;
    color:#64748b;
    font-size:12px;
    padding-top:8px;
    text-align:center;
    background:#fff;
}

.agenda-v221-day-cell{
    height:64px;
    border-right:1px solid #e2e8f0;
    border-bottom:1px solid #e2e8f0;
    position:relative;
    background:#fff;
    cursor:pointer;
}

.agenda-v221-day-cell:hover{
    background:#f8fafc;
}

.agenda-v221-day-layer{
    position:relative;
}

.agenda-v221-event{
    position:absolute;
    border-radius:10px;
    padding:7px 8px 7px 13px;
    color:#172033;
    font-size:12px;
    line-height:1.15;
    box-shadow:0 8px 20px rgba(15,23,42,.10);
    overflow:hidden;
    cursor:pointer;
    z-index:3;
    border:1px solid rgba(15,23,42,.08);
}

.agenda-v221-event::before{
    content:"$";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:9px;
    background:#10b981;
    color:#064e3b;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:10px;
    font-weight:950;
}

.agenda-v221-event strong{
    display:block;
    font-weight:950;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.agenda-v221-event span{
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.agenda-v221-block{
    background:#cbd5e1!important;
    border-left:8px solid #64748b;
}

.agenda-v221-summary{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    padding:14px 16px;
    border-bottom:1px solid #e2e8f0;
    background:#f8fafc;
}

.agenda-v221-kpi{
    background:#fff;
    border:1px solid #dbe3ef;
    border-radius:16px;
    padding:12px;
}

.agenda-v221-kpi small{
    color:#64748b;
    font-weight:900;
    text-transform:uppercase;
}

.agenda-v221-kpi strong{
    display:block;
    font-size:22px;
    margin-top:4px;
}

.agenda-v221-modal-backdrop{
    position:fixed;
    inset:0;
    z-index:100000;
    background:rgba(15,23,42,.45);
    display:grid;
    place-items:center;
    padding:20px;
}

.agenda-v221-modal{
    width:min(860px,96vw);
    max-height:92vh;
    overflow:auto;
    background:#fff;
    border-radius:26px;
    box-shadow:0 28px 90px rgba(15,23,42,.25);
}

.agenda-v221-modal-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    padding:18px 22px;
    border-bottom:1px solid #e2e8f0;
}

.agenda-v221-modal-title{
    font-size:22px;
    font-weight:950;
}

.agenda-v221-close{
    border:0;
    background:#fff;
    font-size:30px;
    cursor:pointer;
}

.agenda-v221-modal-body{
    padding:18px 22px 24px;
}

.agenda-v221-form-card{
    border:1px solid #dbe3ef;
    border-radius:18px;
    padding:15px;
    margin-bottom:14px;
}

.agenda-v221-form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.agenda-v221-service-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    max-height:280px;
    overflow:auto;
}

.agenda-v221-service{
    border:1px solid #dbe3ef;
    border-radius:15px;
    padding:12px;
    background:#fff;
    cursor:pointer;
    text-align:left;
    font-weight:950;
}

.agenda-v221-service.active{
    border-color:#6C4CF1;
    box-shadow:0 10px 22px rgba(108,76,241,.14);
}

.agenda-v221-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    flex-wrap:wrap;
    margin-top:16px;
}

.agenda-v221-client-results{
    display:grid;
    gap:8px;
    margin-top:8px;
}

.agenda-v221-client-option{
    border:1px solid #dbe3ef;
    border-radius:14px;
    padding:10px 12px;
    background:#fff;
    cursor:pointer;
    text-align:left;
}

.agenda-v221-debug{
    padding:12px 16px;
    background:#f8fafc;
    border-top:1px solid #e2e8f0;
    color:#64748b;
    font-size:12px;
}

@media(max-width:1050px){
    .agenda-v221{grid-template-columns:1fr}
    .agenda-v221-form-grid,.agenda-v221-service-grid,.agenda-v221-summary{grid-template-columns:1fr}
}


/* v22.1.2 HOTFIX - las reservas deben posicionarse dentro de la grilla */
.agenda-v221-grid{
    position:relative!important;
    overflow:visible!important;
}

.agenda-v221-grid-scroll{
    position:relative!important;
    overflow:auto!important;
}

.agenda-v221-event{
    position:absolute!important;
    z-index:20!important;
    box-sizing:border-box!important;
}

.agenda-v221-head{
    z-index:30!important;
}

.agenda-v221-time,
.agenda-v221-day-cell{
    z-index:1!important;
}


/* v22.2 Drag & estados */
.agenda-v221-event{
    user-select:none;
    touch-action:none;
}

.agenda-v221-event.dragging{
    opacity:.72;
    transform:scale(.98);
    z-index:200!important;
    outline:3px solid rgba(108,76,241,.35);
}

.agenda-v221-day-cell.drag-over{
    background:#ede9fe!important;
    box-shadow:inset 0 0 0 2px #6C4CF1;
}

.agenda-v221-event::before{
    display:none!important;
}

.agenda-v221-event.is-paid::before{
    display:flex!important;
}

.agenda-status-picker{
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
    margin:12px 0 4px;
}

.agenda-status-dot{
    width:28px;
    height:28px;
    border-radius:999px;
    border:3px solid #fff;
    box-shadow:0 0 0 1px #cbd5e1, 0 8px 16px rgba(15,23,42,.12);
    cursor:pointer;
}

.agenda-status-dot.active{
    box-shadow:0 0 0 3px #172033, 0 8px 16px rgba(15,23,42,.15);
}

.agenda-status-dot[data-status="reserved"]{background:#7dd3fc}
.agenda-status-dot[data-status="confirmed"]{background:rgb(236, 190, 81)}
.agenda-status-dot[data-status="attended"]{background:#86efac}
.agenda-status-dot[data-status="cancelled"]{background:rgb(251, 193, 179)}
.agenda-status-dot[data-status="group"]{background:#d8b4fe}

.agenda-v221-event.status-reserved{background:#7dd3fc!important}
.agenda-v221-event.status-confirmed{background:rgb(236, 190, 81)!important}
.agenda-v221-event.status-attended{background:#86efac!important}
.agenda-v221-event.status-cancelled{background:rgb(251, 193, 179)!important}
.agenda-v221-event.status-group{background:#d8b4fe!important}

.agenda-status-help{
    font-size:12px;
    color:#64748b;
    font-weight:800;
}


/* v22.2.1 - Agenda limpia sin KPIs financieros globales */
body.agenda-mode .topbar .filters,
body.agenda-mode #spaChips,
body.agenda-mode .upload-strip,
body.agenda-mode .metrics-grid{
    display:none!important;
}

body.agenda-mode .topbar{
    margin-bottom:14px!important;
}

body.agenda-mode .workspace{
    overflow-x:hidden;
}

.agenda-v221-spa-alert{
    border:2px solid var(--agenda-spa-color);
    background:linear-gradient(135deg, color-mix(in srgb, var(--agenda-spa-color) 16%, white), #fff);
    border-radius:18px;
    padding:14px;
    margin-bottom:14px;
    box-shadow:0 12px 26px color-mix(in srgb, var(--agenda-spa-color) 18%, transparent);
}

.agenda-v221-spa-alert small{
    display:block;
    font-size:11px;
    text-transform:uppercase;
    font-weight:950;
    color:#64748b;
    letter-spacing:.06em;
    margin-bottom:4px;
}

.agenda-v221-spa-alert strong{
    display:block;
    font-size:20px;
    font-weight:950;
    color:#172033;
}

.agenda-v221-spa-visual-list{
    display:grid;
    gap:9px;
}

.agenda-v221-spa-card{
    width:100%;
    border:1px solid #dbe3ef;
    background:#fff;
    border-radius:15px;
    padding:11px 12px;
    display:flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
    font-weight:950;
    color:#172033;
    text-align:left;
}

.agenda-v221-spa-card:hover{
    border-color:var(--agenda-spa-color);
    box-shadow:0 10px 22px color-mix(in srgb, var(--agenda-spa-color) 14%, transparent);
}

.agenda-v221-spa-card.active{
    border:2px solid var(--agenda-spa-color);
    background:color-mix(in srgb, var(--agenda-spa-color) 12%, white);
}

.agenda-v221-spa-dot{
    width:16px;
    height:16px;
    border-radius:999px;
    background:var(--agenda-spa-color);
    box-shadow:0 0 0 4px color-mix(in srgb, var(--agenda-spa-color) 18%, white);
    flex:0 0 auto;
}


/* v22.2.2 - Horarios operativos y múltiples reservas */
.agenda-v221-day-cell.out-of-hours{
    background:#d1d5db!important;
}

.agenda-v221-day-cell.out-of-hours:hover{
    background:#cbd5e1!important;
}

.agenda-v221-head.out-of-hours-day{
    background:#e5e7eb!important;
}

.agenda-v221-event{
    min-width:56px;
}

.agenda-v221-event.overlap-compact strong{
    font-size:11px;
}

.agenda-v221-event.overlap-compact span{
    font-size:10px;
}

.agenda-v221-business-note{
    font-size:12px;
    font-weight:850;
    color:#64748b;
    margin-top:8px;
    line-height:1.35;
}


/* v22.2.3 UI refinada calendario y botones */
.agenda-v221-mini{
    margin-top:18px;
    border-top:1px solid #e2e8f0;
    padding-top:14px;
}

.agenda-v221-calendar-controls{
    display:grid;
    grid-template-columns:1fr 90px;
    gap:8px;
    margin-bottom:12px;
}

.agenda-v221-calendar-select{
    padding:9px 10px!important;
    border-radius:12px!important;
    font-size:13px;
}

.agenda-v221-calendar-card{
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:18px;
    padding:12px;
    margin-bottom:12px;
    box-shadow:0 8px 22px rgba(15,23,42,.04);
}

.agenda-v221-calendar-title{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-weight:950;
    color:#172033;
    margin-bottom:11px;
    text-transform:capitalize;
}

.agenda-v221-next-month-mark{
    font-size:10px;
    color:#64748b;
    background:#f1f5f9;
    border-radius:999px;
    padding:4px 7px;
    text-transform:uppercase;
}

.agenda-v221-mini-grid-modern{
    gap:6px!important;
}

.agenda-v221-mini-grid-modern strong{
    color:#64748b;
    font-size:11px;
    font-weight:950;
}

.agenda-v221-mini-day{
    border:0!important;
    background:#f8fafc!important;
    color:#172033;
    min-height:30px;
    border-radius:10px!important;
    font-weight:900!important;
}

.agenda-v221-mini-day:hover{
    background:#ede9fe!important;
    color:#6C4CF1;
}

.agenda-v221-mini-day.today{
    background:#172033!important;
    color:#fff!important;
}

.agenda-v221-mini-day.muted{
    color:#94a3b8!important;
    background:#fff!important;
}

.agenda-v221-btn-green{
    background:#16a34a!important;
    color:#fff!important;
    box-shadow:0 12px 26px rgba(22,163,74,.22)!important;
    font-size:15px;
    padding:12px 16px!important;
}

.agenda-v221-btn-soft{
    background:#f1f5f9!important;
    color:#334155!important;
    box-shadow:none!important;
    padding:10px 12px!important;
}

#agendaBlock{
    font-size:13px!important;
}

#agendaReport{
    font-size:13px!important;
}

.agenda-v221-toolbar{
    align-items:center;
}

.agenda-v221-right{
    gap:8px!important;
}


/* v22.2.4 - filtro lateral limpio */
.agenda-v221-status-panel{
    background:#fff;
    border:1px solid #dbe3ef;
    border-radius:18px;
    padding:13px;
    margin-bottom:14px;
    box-shadow:0 8px 22px rgba(15,23,42,.04);
}

.agenda-v221-status-panel label{
    display:block;
    font-size:12px;
    font-weight:950;
    color:#64748b;
    text-transform:uppercase;
    letter-spacing:.04em;
    margin-bottom:8px;
}

.agenda-v221-status-panel .agenda-v221-select{
    font-size:15px;
    font-weight:950;
    border-radius:14px;
    padding:13px;
}

.agenda-v221-business-note,
#agendaQuickSearch{
    display:none!important;
}


/* v22.2.5 Nueva Reserva PRO */
.agenda-client-search-wrap{
    display:flex;
    align-items:center;
    gap:10px;
    background:#f1f5f9;
    border:1px solid #cbd5e1;
    border-radius:15px;
    padding:0 12px;
}

.agenda-client-search-wrap span{
    color:#64748b;
    font-size:18px;
}

.agenda-client-search-input{
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    padding-left:0!important;
}

.agenda-phone-wrap{
    display:flex;
    align-items:center;
    border:1px solid #cbd5e1;
    border-radius:15px;
    overflow:hidden;
    background:#fff;
}

.agenda-phone-flag{
    width:54px;
    align-self:stretch;
    border:0;
    border-right:1px solid #cbd5e1;
    background:#f8fafc;
    font-size:19px;
}

.agenda-phone-input{
    border:0!important;
    border-radius:0!important;
}

.agenda-grid-full{
    grid-column:1/-1;
}

.agenda-section-label{
    display:block;
    font-size:12px;
    font-weight:950;
    color:#64748b;
    text-transform:uppercase;
    letter-spacing:.04em;
    margin-bottom:10px;
}

.agenda-service-cards{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    max-height:320px;
    overflow:auto;
}

.agenda-service-card{
    border:1px solid #dbe3ef;
    background:#fff;
    border-radius:17px;
    padding:12px;
    display:grid;
    grid-template-columns:42px 1fr;
    gap:12px;
    text-align:left;
    cursor:pointer;
    align-items:center;
}

.agenda-service-card:hover{
    border-color:#6C4CF1;
}

.agenda-service-card.active{
    border:2px solid #6C4CF1;
    box-shadow:0 12px 26px rgba(108,76,241,.14);
    background:#faf8ff;
}

.agenda-service-icon{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    background:#f1f5f9;
    border-radius:14px;
    font-size:22px;
}

.agenda-service-card strong{
    display:block;
    font-weight:950;
    color:#172033;
}

.agenda-service-card small{
    display:block;
    color:#64748b;
    margin-top:3px;
}

.agenda-service-card b{
    display:block;
    margin-top:6px;
    color:#172033;
}

.agenda-paid-check{
    display:flex;
    gap:12px;
    align-items:flex-start;
    border:1px solid #bbf7d0;
    background:#f0fdf4;
    border-radius:16px;
    padding:13px;
    margin-top:14px;
    cursor:pointer;
}

.agenda-paid-check input{
    width:20px;
    height:20px;
    margin-top:2px;
}

.agenda-paid-check strong{
    display:block;
    color:#166534;
    font-weight:950;
}

.agenda-paid-check small{
    display:block;
    color:#64748b;
    margin-top:3px;
}

.agenda-addons-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}

.agenda-addon-card{
    border:1px solid #dbe3ef;
    border-radius:16px;
    padding:11px;
    display:grid;
    grid-template-columns:auto 34px 1fr 92px;
    gap:9px;
    align-items:center;
    background:#fff;
}

.agenda-addon-icon{
    font-size:22px;
}

.agenda-addon-name{
    font-weight:900;
    color:#172033;
}

.agenda-addon-price{
    width:100%;
    border:1px solid #cbd5e1;
    border-radius:11px;
    padding:9px;
    font-weight:900;
}

.agenda-total-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    border-radius:16px;
    padding:15px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
}

.agenda-total-row span{
    font-weight:950;
    color:#64748b;
}

.agenda-total-row strong{
    font-size:24px;
    color:#16a34a;
}

@media(max-width:760px){
    .agenda-service-cards,
    .agenda-addons-grid{
        grid-template-columns:1fr;
    }

    .agenda-addon-card{
        grid-template-columns:auto 34px 1fr;
    }

    .agenda-addon-price{
        grid-column:1/-1;
    }
}

/* v22.2.6 Resumen de Reserva PRO */
.agenda-current-service{display:grid;grid-template-columns:76px 1fr;gap:14px;align-items:center;border:1px solid #dbe3ef;border-radius:18px;background:#f8fafc;padding:12px;margin-bottom:12px}
.agenda-current-service-img{width:76px;height:76px;border-radius:16px;background:#eef2f7;display:grid;place-items:center;font-size:30px;overflow:hidden}
.agenda-current-service-img img,.agenda-service-icon img{width:100%;height:100%;object-fit:cover}
.agenda-current-service small{color:#64748b;font-weight:900;text-transform:uppercase;font-size:11px}
.agenda-current-service strong{display:block;font-size:20px;color:#172033;margin-top:4px}
.agenda-service-cards-detail{max-height:230px}
.agenda-payment-pro{background:#ecfdf5;border:1px solid #bbf7d0;border-radius:20px;padding:16px;margin-bottom:14px}
.agenda-payment-pro-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.agenda-payment-pro-head small{color:#166534;font-weight:950;text-transform:uppercase;letter-spacing:.04em}
.agenda-payment-pro-head strong{display:block;font-size:22px;color:#064e3b;margin-top:4px}
.agenda-payment-pro-head span{background:#dcfce7;color:#166534;border-radius:999px;padding:8px 12px;font-weight:950}
.agenda-payment-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.agenda-payment-methods button{border:1px solid #cbd5e1;background:#fff;border-radius:16px;padding:13px 10px;display:grid;place-items:center;gap:6px;font-weight:950;cursor:pointer}
.agenda-payment-methods button.active{border:2px solid #16a34a;color:#166534;background:#f0fdf4}
.agenda-payment-methods span{font-size:24px}
.agenda-payment-actions{display:flex;justify-content:flex-end;margin-top:14px}
.agenda-detail-actions-pro{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin:16px 0}
.agenda-history-pro{border:1px solid #dbe3ef;border-radius:20px;padding:16px;background:#fff}
.agenda-history-pro h3{margin:0 0 14px;font-size:18px}
.agenda-history-pro-item{display:grid;grid-template-columns:42px 1fr;gap:12px;border:1px solid #e2e8f0;border-radius:16px;padding:13px;margin-bottom:10px}
.agenda-history-pro-icon{width:42px;height:42px;border-radius:14px;background:#f1f5f9;display:grid;place-items:center}
.agenda-history-pro-item strong{display:block;font-weight:950;color:#172033}
.agenda-history-pro-item p{margin:4px 0;color:#334155}
.agenda-history-pro-item small{color:#64748b;font-weight:800}
.agenda-history-pro-empty{color:#64748b;background:#f8fafc;border-radius:14px;padding:14px}
@media(max-width:760px){.agenda-payment-methods{grid-template-columns:1fr}}

/* v22.2.7 Nueva reserva compacta */
.agenda-v221-modal{width:min(820px,96vw)!important}
.agenda-v221-modal-head{padding:13px 18px!important}
.agenda-v221-modal-title{font-size:20px!important}
.agenda-v221-modal-body{padding:12px 16px 18px!important}
.agenda-reservation-pro .agenda-v221-form-card{padding:12px!important;margin-bottom:10px!important;border-radius:16px!important}
.agenda-reservation-pro .agenda-v221-form-grid{gap:10px!important}
.agenda-v221-field{gap:5px!important;margin-bottom:8px!important}
.agenda-v221-field label,.agenda-section-label{font-size:11px!important}
.agenda-v221-input,.agenda-v221-select{padding:10px 12px!important;border-radius:13px!important;font-size:14px!important;font-weight:650!important}
.agenda-client-search-wrap{min-height:42px!important}
.agenda-client-search-input{font-weight:650!important}
.agenda-client-clear{border:0;background:#e2e8f0;color:#334155;width:28px;height:28px;border-radius:999px;font-size:20px;line-height:1;cursor:pointer;font-weight:900}
.agenda-phone-flag{width:48px!important}
.agenda-service-cards{gap:8px!important;max-height:250px!important}
.agenda-service-card{padding:9px!important;border-radius:14px!important;grid-template-columns:48px 1fr!important;gap:10px!important}
.agenda-service-icon{width:48px!important;height:48px!important;border-radius:12px!important;overflow:hidden}
.agenda-service-icon img{width:100%;height:100%;object-fit:cover}
.agenda-service-card strong{font-size:14px!important}
.agenda-service-card small{font-size:12px!important}
.agenda-service-card b{font-size:14px!important;margin-top:4px!important}
.agenda-paid-check{padding:10px 12px!important;margin-top:9px!important;border-radius:14px!important}
.agenda-paid-check strong{font-size:14px!important}
.agenda-addons-grid{gap:8px!important}
.agenda-addon-card{padding:9px!important;border-radius:14px!important;grid-template-columns:auto 28px 1fr 82px!important}
.agenda-addon-icon{font-size:19px!important}
.agenda-addon-name{font-size:13px!important}
.agenda-addon-price{padding:8px!important;font-size:14px!important}
.agenda-total-row{padding:11px!important;border-radius:14px!important}
.agenda-total-row strong{font-size:20px!important}
.agenda-notes-area{min-height:78px!important;resize:vertical;font-weight:400!important;line-height:1.35}
.agenda-notes-area::placeholder{font-weight:400!important}
.agenda-v221-actions{margin-top:10px!important}
.agenda-btn-save-green{background:#16a34a!important;color:#fff!important;box-shadow:0 10px 22px rgba(22,163,74,.22)!important}
.agenda-btn-cancel-soft{background:#fee2e2!important;color:#991b1b!important}
.agenda-v221-client-option{padding:9px 12px!important;border-radius:13px!important}
@media(max-width:760px){.agenda-addon-card{grid-template-columns:auto 28px 1fr!important}.agenda-addon-price{grid-column:1/-1!important}.agenda-service-cards{grid-template-columns:1fr!important}}

/* v22.2.8 Detalle de reserva compacto */
.agenda-v221-modal-head{
    position:sticky!important;
    top:0!important;
    z-index:50!important;
    background:#fff!important;
    box-shadow:0 1px 0 #e2e8f0!important;
}

.agenda-detail-pro .agenda-v221-form-card{
    padding:11px 14px!important;
    margin-bottom:10px!important;
    border-radius:16px!important;
}

.agenda-detail-pro .agenda-v221-form-grid{
    gap:10px!important;
}

.agenda-detail-pro .agenda-v221-input,
.agenda-detail-pro .agenda-v221-select{
    padding:9px 11px!important;
    font-size:14px!important;
    font-weight:650!important;
}

.agenda-detail-pro .agenda-v221-field label{
    font-size:11px!important;
    margin-bottom:3px!important;
}

.agenda-detail-pro .agenda-current-service{
    padding:9px!important;
    margin-bottom:9px!important;
    grid-template-columns:56px 1fr!important;
}

.agenda-detail-pro .agenda-current-service-img{
    width:56px!important;
    height:56px!important;
}

.agenda-payment-pro.is-pending{
    background:#fff7e6!important;
    border-color:rgb(236,190,81)!important;
}

.agenda-payment-pro.is-pending .agenda-payment-pro-head small,
.agenda-payment-pro.is-pending .agenda-payment-pro-head strong{
    color:#92400e!important;
}

.agenda-payment-pro.is-pending .agenda-payment-pro-head span{
    background:#fef3c7!important;
    color:#92400e!important;
}

.agenda-payment-pro.is-paid{
    background:#ecfdf5!important;
    border-color:#86efac!important;
}

.agenda-payment-pro.is-paid .agenda-payment-pro-head small,
.agenda-payment-pro.is-paid .agenda-payment-pro-head strong{
    color:#064e3b!important;
}

.agenda-payment-pro{
    padding:13px!important;
    border-radius:18px!important;
}

.agenda-payment-methods{
    gap:8px!important;
    margin-top:10px!important;
}

.agenda-payment-methods button{
    padding:10px 8px!important;
    border-radius:14px!important;
}

.agenda-payment-methods span{
    font-size:20px!important;
}

.agenda-payment-actions{
    margin-top:10px!important;
}

.agenda-notes-card{
    background:#fff!important;
}

.agenda-detail-notes{
    min-height:78px!important;
    resize:vertical!important;
    font-size:13px!important;
    font-weight:400!important;
    line-height:1.35!important;
}

.agenda-detail-notes::placeholder{
    font-weight:400!important;
}

.agenda-detail-actions-pro{
    margin:10px 0!important;
}

.agenda-detail-tabs{
    display:flex;
    gap:8px;
    margin:12px 0 10px;
    border-bottom:1px solid #e2e8f0;
    padding-bottom:8px;
}

.agenda-detail-tabs button{
    border:0;
    border-radius:12px;
    padding:9px 13px;
    font-weight:900;
    cursor:pointer;
    background:#f1f5f9;
    color:#334155;
}

.agenda-detail-tabs button.active{
    background:#6C4CF1;
    color:#fff;
}

.agenda-history-tab{
    margin-top:8px;
}

.agenda-btn-cancel-soft{
    background:#fee2e2!important;
    color:#991b1b!important;
}

.agenda-payment-pro .agenda-paid-check small{
    display:none!important;
}

/* v22.2.9 UX avanzada */
.agenda-hover-tooltip{
    position:fixed;
    z-index:200000;
    min-width:220px;
    max-width:300px;
    background:#fff;
    border:1px solid #dbe3ef;
    border-radius:14px;
    box-shadow:0 18px 50px rgba(15,23,42,.22);
    padding:12px;
    pointer-events:none;
    color:#172033;
}
.agenda-hover-tooltip strong{display:block;font-size:14px;font-weight:950;margin-bottom:4px}
.agenda-hover-tooltip span{display:block;font-size:13px;color:#334155;margin-bottom:3px}
.agenda-hover-tooltip small{display:block;font-size:12px;color:#64748b;margin-top:3px}
.agenda-hover-tooltip p{font-size:12px;color:#334155;margin:7px 0 0;line-height:1.3;border-top:1px solid #e2e8f0;padding-top:7px}
.agenda-v221-modal-backdrop{cursor:default!important}
.agenda-v221-modal{cursor:auto!important}
.agenda-paid-check{
    justify-content:center!important;
    align-items:center!important;
    text-align:center!important;
    min-height:46px!important;
}
.agenda-paid-check input{margin:0!important}
.agenda-paid-check span{display:block}
.agenda-addons-grid{gap:6px!important}
.agenda-addon-card{
    padding:7px 9px!important;
    grid-template-columns:26px 1fr 76px!important;
    gap:7px!important;
    min-height:48px!important;
}
.agenda-addon-icon{font-size:18px!important}
.agenda-addon-name{font-size:12px!important;line-height:1.15!important}
.agenda-addon-price{padding:7px!important;font-size:13px!important}
.agenda-total-final{margin-top:10px!important}
@media(max-width:760px){
    .agenda-addon-card{grid-template-columns:26px 1fr 76px!important}
    .agenda-addon-price{grid-column:auto!important}
}

/* v22.3.0 Detalle pago POS */
.agenda-detail-tabs-top{
    margin-top:0!important;
    position:sticky;
    top:55px;
    z-index:40;
    background:#fff;
    padding-top:8px;
}
.agenda-payment-pro .agenda-v221-field{
    margin-bottom:10px!important;
}
.agenda-payment-pro #rdPrice{
    font-size:16px!important;
    font-weight:850!important;
}
.agenda-paid-check{
    justify-content:center!important;
    text-align:center!important;
    align-items:center!important;
}
.agenda-paid-check input{
    margin:0!important;
}
.agenda-notes-card{
    grid-column:1/-1!important;
}
.agenda-detail-notes{
    width:100%!important;
    min-height:84px!important;
    resize:vertical!important;
    font-size:13px!important;
    font-weight:400!important;
    line-height:1.35!important;
}
.agenda-detail-notes::placeholder{
    font-weight:400!important;
}
.agenda-detail-pro .agenda-v221-form-card{
    padding:10px 13px!important;
    margin-bottom:9px!important;
}
.agenda-payment-pro.is-paid{
    background:#ecfdf5!important;
    border-color:#86efac!important;
}
.agenda-payment-pro.is-pending{
    background:#fff7e6!important;
    border-color:rgb(236,190,81)!important;
}


/* v22.3.1 fixes */
.agenda-detail-tabs-bottom:not(.agenda-detail-tabs-top){
    display:none!important;
}
.agenda-detail-tabs-top{
    display:flex!important;
}
.agenda-paid-check{
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    text-align:center!important;
    gap:10px!important;
}
.agenda-paid-check input{
    margin:0!important;
    flex:0 0 auto!important;
}

/* Notificaciones arriba izquierda */
#scNotifyTopLeft{
    position:fixed;
    top:18px;
    left:18px;
    z-index:300000;
    display:grid;
    gap:10px;
    pointer-events:none;
}
.sc-toast-top-left{
    min-width:280px;
    max-width:380px;
    background:#fff;
    border:1px solid #dbe3ef;
    border-left:5px solid #6C4CF1;
    border-radius:16px;
    box-shadow:0 18px 45px rgba(15,23,42,.18);
    padding:12px 42px 12px 14px;
    transform:translateX(-120%);
    opacity:0;
    transition:.25s ease;
    pointer-events:auto;
    position:relative;
}
.sc-toast-top-left.show{
    transform:translateX(0);
    opacity:1;
}
.sc-toast-top-left.success{border-left-color:#16a34a}
.sc-toast-top-left.error{border-left-color:#dc2626}
.sc-toast-top-left.warning{border-left-color:rgb(236,190,81)}
.sc-toast-top-left strong{
    display:block;
    font-weight:950;
    color:#172033;
    margin-bottom:3px;
}
.sc-toast-top-left span{
    display:block;
    color:#475569;
    font-size:13px;
}
.sc-toast-top-left button{
    position:absolute;
    top:8px;
    right:8px;
    border:0;
    background:#f1f5f9;
    border-radius:999px;
    width:25px;
    height:25px;
    cursor:pointer;
    font-weight:900;
}

/* Caja POS: en ingresos los badges/botones de valor deben verse verdes */
body:not(.pos-expense-mode) .pos-income-row .money-badge,
#posIngresos .money-badge,
#posIncomes .money-badge,
[data-pos-tab="ingresos"] .money-badge{
    background:#dcfce7!important;
    color:#166534!important;
}
body:not(.pos-expense-mode) .pos-income-row .money-badge::after,
#posIngresos .money-badge::after,
#posIncomes .money-badge::after,
[data-pos-tab="ingresos"] .money-badge::after{
    color:#16a34a!important;
}

/* v22.3.2 Payment lock/delete */
.agenda-payment-status-actions{
    display:flex;
    align-items:center;
    gap:8px;
}
.agenda-delete-payment-btn{
    border:0;
    background:#fee2e2;
    color:#991b1b;
    border-radius:999px;
    width:34px;
    height:34px;
    cursor:pointer;
    font-size:16px;
    box-shadow:0 8px 18px rgba(153,27,27,.12);
}
.agenda-payment-lock-note{
    background:#fef3c7;
    color:#92400e;
    border:1px solid #fde68a;
    border-radius:14px;
    padding:10px 12px;
    font-weight:850;
    font-size:13px;
    margin-bottom:10px;
}
.rdServiceCard.locked{
    opacity:.62;
    cursor:not-allowed!important;
}
.rdServiceCard.locked:hover{
    border-color:#dbe3ef!important;
    box-shadow:none!important;
}
#rdPrice[readonly]{
    background:#f1f5f9!important;
    color:#64748b!important;
    cursor:not-allowed!important;
}


/* v22.3.3 UI superior + selector Spa */

/* Ocultar subtítulo debajo de Caja POS */
#view-pos .section-subtitle,
#view-pos .pos-subtitle,
#view-pos .view-subtitle,
#view-pos header p,
#view-pos .module-header p,
#view-pos .card-head p{
    display:none!important;
}

/* Hacer encabezado de Caja POS más compacto */
#view-pos .module-header,
#view-pos .section-header,
#view-pos .pos-header,
#view-pos .card-head:first-child{
    padding-top:14px!important;
    padding-bottom:14px!important;
    min-height:auto!important;
}

#view-pos h1,
#view-pos h2,
#view-pos .module-title{
    margin-bottom:0!important;
    line-height:1.1!important;
}

/* Ocultar bloque de título grande y filtros globales cuando no aportan en módulos operativos */
body.pos-mode .breadcrumb,
body.pos-mode .page-title,
body.pos-mode .filters,
body.pos-mode .topbar .filters,
body.pos-mode .global-period-filter,
body.pos-mode .period-filter,
body.pos-mode .month-year-filter{
    display:none!important;
}

/* Reacomodar barra superior: búsqueda/notificaciones/usuario a la derecha */
.topbar{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:12px!important;
    width:100%!important;
}

.topbar .search,
.topbar .search-box,
.topbar [type="search"],
.topbar .top-search{
    order:10!important;
}

.topbar .actions,
.topbar .top-actions,
.topbar .notifications,
.topbar .user-menu,
.topbar .user-toggle,
.topbar .profile-menu{
    order:20!important;
}

.topbar .filters{
    margin-left:auto!important;
}

/* Cuando haya buscador global, que no ocupe el lado izquierdo */
.topbar input[type="search"],
.topbar .search input,
.topbar .search-box input{
    max-width:260px!important;
}

/* Selector de spa más llamativo */
#spaChips,
.spa-chips,
.spa-tabs,
.spa-selector{
    display:flex!important;
    gap:12px!important;
    align-items:center!important;
    flex-wrap:wrap!important;
    margin:14px 0 18px!important;
}

#spaChips button,
.spa-chips button,
.spa-tabs button,
.spa-selector button,
button[data-spa]{
    position:relative!important;
    isolation:isolate!important;
    border:1px solid rgba(15,23,42,.08)!important;
    border-radius:999px!important;
    padding:13px 22px!important;
    min-height:48px!important;
    font-weight:950!important;
    background:#fff!important;
    color:#172033!important;
    box-shadow:0 10px 24px rgba(15,23,42,.08)!important;
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease!important;
    overflow:hidden!important;
}

#spaChips button::before,
.spa-chips button::before,
.spa-tabs button::before,
.spa-selector button::before,
button[data-spa]::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    background:linear-gradient(135deg, var(--spa-color, #6C4CF1), color-mix(in srgb, var(--spa-color, #6C4CF1) 60%, white))!important;
    opacity:0!important;
    z-index:-1!important;
    transition:opacity .22s ease!important;
}

#spaChips button::after,
.spa-chips button::after,
.spa-tabs button::after,
.spa-selector button::after,
button[data-spa]::after{
    content:""!important;
    position:absolute!important;
    left:8px!important;
    top:50%!important;
    width:8px!important;
    height:24px!important;
    border-radius:999px!important;
    background:var(--spa-color, #6C4CF1)!important;
    transform:translateY(-50%)!important;
    transition:height .22s ease, width .22s ease, opacity .22s ease!important;
}

#spaChips button:hover,
.spa-chips button:hover,
.spa-tabs button:hover,
.spa-selector button:hover,
button[data-spa]:hover{
    transform:translateY(-3px) scale(1.025)!important;
    border-color:var(--spa-color, #6C4CF1)!important;
    box-shadow:0 16px 34px color-mix(in srgb, var(--spa-color, #6C4CF1) 26%, transparent)!important;
}

#spaChips button:hover::before,
.spa-chips button:hover::before,
.spa-tabs button:hover::before,
.spa-selector button:hover::before,
button[data-spa]:hover::before{
    opacity:.10!important;
}

#spaChips button.active,
.spa-chips button.active,
.spa-tabs button.active,
.spa-selector button.active,
button[data-spa].active,
#spaChips button.is-active,
.spa-chips button.is-active,
.spa-tabs button.is-active,
.spa-selector button.is-active{
    color:#fff!important;
    border-color:transparent!important;
    background:var(--spa-color, #6C4CF1)!important;
    box-shadow:0 18px 38px color-mix(in srgb, var(--spa-color, #6C4CF1) 38%, transparent)!important;
    transform:translateY(-1px)!important;
}

#spaChips button.active::before,
.spa-chips button.active::before,
.spa-tabs button.active::before,
.spa-selector button.active::before,
button[data-spa].active::before,
#spaChips button.is-active::before,
.spa-chips button.is-active::before,
.spa-tabs button.is-active::before,
.spa-selector button.is-active::before{
    opacity:1!important;
}

#spaChips button.active::after,
.spa-chips button.active::after,
.spa-tabs button.active::after,
.spa-selector button.active::after,
button[data-spa].active::after,
#spaChips button.is-active::after,
.spa-chips button.is-active::after,
.spa-tabs button.is-active::after,
.spa-selector button.is-active::after{
    background:rgba(255,255,255,.95)!important;
    width:10px!important;
    height:30px!important;
}

/* Fallback por orden habitual: Todos, Makai, Sahara, Kiwi, Esbell */
#spaChips button:nth-child(2),
.spa-chips button:nth-child(2),
.spa-tabs button:nth-child(2),
.spa-selector button:nth-child(2){
    --spa-color:#0ea66b;
}
#spaChips button:nth-child(3),
.spa-chips button:nth-child(3),
.spa-tabs button:nth-child(3),
.spa-selector button:nth-child(3){
    --spa-color:#d96b1f;
}
#spaChips button:nth-child(4),
.spa-chips button:nth-child(4),
.spa-tabs button:nth-child(4),
.spa-selector button:nth-child(4){
    --spa-color:#8b5e34;
}
#spaChips button:nth-child(5),
.spa-chips button:nth-child(5),
.spa-tabs button:nth-child(5),
.spa-selector button:nth-child(5){
    --spa-color:#7c3aed;
}

/* Compactar alto superior */
.workspace > .view > .card:first-child,
.workspace .view-header-card{
    margin-bottom:12px!important;
}


/* v22.3.7 - Selector Spa diseño opción 7 */

/* Reorganizar cabecera: buscador/usuario arriba a la derecha */
.topbar{
    display:flex!important;
    justify-content:flex-end!important;
    align-items:center!important;
    gap:12px!important;
}

.topbar input[type="search"],
.topbar .search input,
.topbar .search-box input,
.topbar .top-search input{
    max-width:280px!important;
}

/* Contenedor general: chips de spa primero, filtros de fecha justo debajo */
#spaChips,
.spa-chips,
.spa-tabs,
.spa-selector{
    order:1!important;
    display:flex!important;
    gap:12px!important;
    align-items:center!important;
    flex-wrap:wrap!important;
    margin:14px 0 10px!important;
}

.filters,
.global-period-filter,
.period-filter,
.month-year-filter,
.topbar .filters{
    order:2!important;
}

/* Si el layout permite flex vertical, poner filtros debajo */
.workspace,
.main-content,
.content,
.page-content{
    --spa-v7-ready:1;
}

/* Selector de fechas más cerca del selector de spa */
.filters,
.global-period-filter,
.period-filter,
.month-year-filter{
    margin-top:4px!important;
    margin-bottom:16px!important;
}

/* Botón estilo opción 7: cápsula blanca con bloque inclinado de color a la izquierda */
#spaChips button,
.spa-chips button,
.spa-tabs button,
.spa-selector button,
button[data-spa]{
    --spa-color:#6C4CF1;
    position:relative!important;
    isolation:isolate!important;
    overflow:hidden!important;
    min-width:190px!important;
    min-height:54px!important;
    padding:12px 24px 12px 86px!important;
    border:1px solid rgba(15,23,42,.08)!important;
    border-radius:17px!important;
    background:#fff!important;
    color:#172033!important;
    font-weight:950!important;
    font-size:16px!important;
    box-shadow:0 10px 26px rgba(15,23,42,.08)!important;
    transform:translateY(0)!important;
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, color .22s ease!important;
}

/* Bloque inclinado de color */
#spaChips button::before,
.spa-chips button::before,
.spa-tabs button::before,
.spa-selector button::before,
button[data-spa]::before{
    content:attr(data-spa-icon)!important;
    position:absolute!important;
    left:-8px!important;
    top:0!important;
    bottom:0!important;
    width:82px!important;
    display:grid!important;
    place-items:center!important;
    background:linear-gradient(135deg, var(--spa-color), color-mix(in srgb, var(--spa-color) 72%, #ffffff))!important;
    color:#fff!important;
    font-size:27px!important;
    z-index:-1!important;
    transform:skewX(-14deg)!important;
    transform-origin:left center!important;
    padding-left:8px!important;
    box-shadow:10px 0 26px color-mix(in srgb, var(--spa-color) 20%, transparent)!important;
}

/* Corregir icono dentro del bloque inclinado */
#spaChips button::after,
.spa-chips button::after,
.spa-tabs button::after,
.spa-selector button::after,
button[data-spa]::after{
    content:""!important;
    position:absolute!important;
    left:62px!important;
    top:50%!important;
    width:1px!important;
    height:28px!important;
    background:rgba(255,255,255,.40)!important;
    transform:translateY(-50%) rotate(14deg)!important;
    border-radius:999px!important;
}

/* Hover llamativo */
#spaChips button:hover,
.spa-chips button:hover,
.spa-tabs button:hover,
.spa-selector button:hover,
button[data-spa]:hover{
    transform:translateY(-4px) scale(1.018)!important;
    border-color:var(--spa-color)!important;
    box-shadow:0 18px 42px color-mix(in srgb, var(--spa-color) 25%, transparent)!important;
    color:var(--spa-color)!important;
}

/* Activo: mantiene fondo blanco pero resalta con borde, sombra e indicador inferior */
#spaChips button.active,
.spa-chips button.active,
.spa-tabs button.active,
.spa-selector button.active,
button[data-spa].active,
#spaChips button.is-active,
.spa-chips button.is-active,
.spa-tabs button.is-active,
.spa-selector button.is-active{
    border:2px solid var(--spa-color)!important;
    color:var(--spa-color)!important;
    background:linear-gradient(180deg, #fff, color-mix(in srgb, var(--spa-color) 7%, #ffffff))!important;
    box-shadow:0 20px 48px color-mix(in srgb, var(--spa-color) 28%, transparent)!important;
}

/* Indicador inferior activo tipo la propuesta 10/7 */
#spaChips button.active .spa-active-line,
.spa-chips button.active .spa-active-line,
.spa-tabs button.active .spa-active-line,
.spa-selector button.active .spa-active-line{
    display:block!important;
}

#spaChips button.active::marker,
.spa-chips button.active::marker,
.spa-tabs button.active::marker,
.spa-selector button.active::marker{
    display:none!important;
}

/* Usamos outline visual inferior con box-shadow inset */
#spaChips button.active,
.spa-chips button.active,
.spa-tabs button.active,
.spa-selector button.active,
button[data-spa].active,
#spaChips button.is-active,
.spa-chips button.is-active,
.spa-tabs button.is-active,
.spa-selector button.is-active{
    box-shadow:
        0 20px 48px color-mix(in srgb, var(--spa-color) 28%, transparent),
        inset 0 -4px 0 var(--spa-color)!important;
}

/* Filtros de fecha debajo del selector Spa */
.topbar .filters{
    position:relative!important;
    width:auto!important;
}

/* Si los filtros están dentro del topbar, bajarlos visualmente y evitar que queden a la derecha */
body:not(.agenda-mode) .topbar{
    flex-wrap:wrap!important;
}

body:not(.agenda-mode) .topbar .filters{
    flex-basis:100%!important;
    justify-content:flex-start!important;
    margin-left:0!important;
}

/* Mejorar visual del selector de fechas */
.filters,
.topbar .filters{
    background:#fff!important;
    border:1px solid #e2e8f0!important;
    border-radius:18px!important;
    box-shadow:0 10px 30px rgba(15,23,42,.06)!important;
    padding:12px!important;
    gap:10px!important;
}

/* Responsive */
@media(max-width:900px){
    #spaChips button,
    .spa-chips button,
    .spa-tabs button,
    .spa-selector button,
    button[data-spa]{
        min-width:calc(50% - 8px)!important;
        padding-left:78px!important;
    }
}

@media(max-width:560px){
    #spaChips button,
    .spa-chips button,
    .spa-tabs button,
    .spa-selector button,
    button[data-spa]{
        min-width:100%!important;
    }
}


/* v22.3.8 - Caja POS limpia */

/* Ocultar en Caja POS: breadcrumb, panel administrativo y filtros superiores globales */
body.pos-clean-mode .breadcrumb,
body.pos-clean-mode .breadcrumbs,
body.pos-clean-mode .page-breadcrumb,
body.pos-clean-mode .page-title,
body.pos-clean-mode h1.page-title,
body.pos-clean-mode .admin-title,
body.pos-clean-mode .panel-title,
body.pos-clean-mode .topbar .filters,
body.pos-clean-mode .global-period-filter,
body.pos-clean-mode .period-filter,
body.pos-clean-mode .month-year-filter,
body.pos-clean-mode .filters:first-child{
    display:none!important;
}

/* Si el título Panel administrativo está en un contenedor superior, compactarlo */
body.pos-clean-mode .workspace > .topbar,
body.pos-clean-mode .main-content > .topbar,
body.pos-clean-mode .content > .topbar{
    min-height:auto!important;
    padding-top:6px!important;
    padding-bottom:6px!important;
}

/* Mantener búsqueda/notificaciones/usuario a la derecha */
body.pos-clean-mode .topbar{
    display:flex!important;
    justify-content:flex-end!important;
    align-items:center!important;
    gap:12px!important;
    margin-bottom:8px!important;
}

/* Caja POS: quitar subtítulo y hacer cabecera más delgada */
#view-pos .module-header p,
#view-pos .section-header p,
#view-pos .pos-header p,
#view-pos .card-head p,
#view-pos header p,
#view-pos .view-subtitle,
#view-pos .section-subtitle,
#view-pos .pos-subtitle{
    display:none!important;
}

#view-pos .module-header,
#view-pos .section-header,
#view-pos .pos-header,
#view-pos .card-head:first-child,
#view-pos header{
    padding:14px 18px!important;
    min-height:auto!important;
}

#view-pos h1,
#view-pos h2,
#view-pos .module-title,
#view-pos .section-title{
    margin:0!important;
    line-height:1.1!important;
}

/* Compactar la tarjeta superior del POS */
#view-pos > .card:first-child,
#view-pos .pos-header-card,
#view-pos .module-header-card{
    padding-top:12px!important;
    padding-bottom:12px!important;
    border-radius:22px!important;
}

/* v22.3.8 - Selector Spa refinado premium */

/* Contenedor selector */
#spaChips,
.spa-chips,
.spa-tabs,
.spa-selector{
    display:flex!important;
    gap:10px!important;
    align-items:center!important;
    flex-wrap:wrap!important;
    margin:12px 0 10px!important;
}

/* Reset del diseño anterior V7 */
#spaChips button,
.spa-chips button,
.spa-tabs button,
.spa-selector button,
button[data-spa]{
    --spa-color:#6C4CF1;
    position:relative!important;
    isolation:isolate!important;
    overflow:hidden!important;
    min-width:155px!important;
    min-height:50px!important;
    padding:10px 18px 10px 58px!important;
    border:1px solid #e2e8f0!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.92)!important;
    color:#172033!important;
    font-size:15px!important;
    font-weight:950!important;
    box-shadow:0 8px 22px rgba(15,23,42,.06)!important;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease,
        background .18s ease,
        color .18s ease!important;
}

/* Icono circular premium */
#spaChips button::before,
.spa-chips button::before,
.spa-tabs button::before,
.spa-selector button::before,
button[data-spa]::before{
    content:attr(data-spa-icon)!important;
    position:absolute!important;
    left:12px!important;
    top:50%!important;
    width:34px!important;
    height:34px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:14px!important;
    background:linear-gradient(135deg, var(--spa-color), color-mix(in srgb, var(--spa-color) 68%, #ffffff))!important;
    color:#fff!important;
    font-size:20px!important;
    transform:translateY(-50%)!important;
    box-shadow:0 10px 20px color-mix(in srgb, var(--spa-color) 24%, transparent)!important;
    z-index:1!important;
}

/* Línea lateral suave */
#spaChips button::after,
.spa-chips button::after,
.spa-tabs button::after,
.spa-selector button::after,
button[data-spa]::after{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    border-radius:18px!important;
    background:linear-gradient(135deg, color-mix(in srgb, var(--spa-color) 10%, transparent), transparent 60%)!important;
    opacity:0!important;
    transition:opacity .18s ease!important;
    z-index:-1!important;
}

/* Hover */
#spaChips button:hover,
.spa-chips button:hover,
.spa-tabs button:hover,
.spa-selector button:hover,
button[data-spa]:hover{
    transform:translateY(-2px)!important;
    border-color:color-mix(in srgb, var(--spa-color) 48%, #e2e8f0)!important;
    box-shadow:0 16px 34px color-mix(in srgb, var(--spa-color) 18%, transparent)!important;
    color:var(--spa-color)!important;
}

#spaChips button:hover::after,
.spa-chips button:hover::after,
.spa-tabs button:hover::after,
.spa-selector button:hover::after,
button[data-spa]:hover::after{
    opacity:1!important;
}

/* Activo: más claro, elegante y no tan pesado */
#spaChips button.active,
.spa-chips button.active,
.spa-tabs button.active,
.spa-selector button.active,
button[data-spa].active,
#spaChips button.is-active,
.spa-chips button.is-active,
.spa-tabs button.is-active,
.spa-selector button.is-active{
    background:color-mix(in srgb, var(--spa-color) 10%, #ffffff)!important;
    color:var(--spa-color)!important;
    border:2px solid var(--spa-color)!important;
    box-shadow:
        0 18px 38px color-mix(in srgb, var(--spa-color) 24%, transparent),
        inset 0 -4px 0 var(--spa-color)!important;
}

/* Activo: icono un poco más grande */
#spaChips button.active::before,
.spa-chips button.active::before,
.spa-tabs button.active::before,
.spa-selector button.active::before,
button[data-spa].active::before,
#spaChips button.is-active::before,
.spa-chips button.is-active::before,
.spa-tabs button.is-active::before,
.spa-selector button.is-active::before{
    transform:translateY(-50%) scale(1.05)!important;
}

/* Selector de fechas debajo del selector spa, pero no en Caja POS */
body:not(.pos-clean-mode) .topbar{
    flex-wrap:wrap!important;
}

body:not(.pos-clean-mode) .topbar .filters{
    flex-basis:100%!important;
    justify-content:flex-start!important;
    margin-left:0!important;
    margin-top:8px!important;
}

/* En Caja POS, quitar completamente el bloque de filtros global */
body.pos-clean-mode .topbar .filters{
    display:none!important;
}

/* Responsive */
@media(max-width:900px){
    #spaChips button,
    .spa-chips button,
    .spa-tabs button,
    .spa-selector button,
    button[data-spa]{
        min-width:calc(50% - 8px)!important;
    }
}

@media(max-width:560px){
    #spaChips button,
    .spa-chips button,
    .spa-tabs button,
    .spa-selector button,
    button[data-spa]{
        min-width:100%!important;
    }
}


/* v22.3.9 - POS limpio definitivo */

/* Caja POS: ocultar título Panel administrativo y breadcrumb aunque estén dentro del topbar */
body.pos-clean-mode .topbar .breadcrumb,
body.pos-clean-mode .topbar .breadcrumbs,
body.pos-clean-mode .topbar .page-breadcrumb,
body.pos-clean-mode .topbar h1,
body.pos-clean-mode .topbar h2,
body.pos-clean-mode .topbar .page-title,
body.pos-clean-mode .topbar .admin-title,
body.pos-clean-mode .topbar .panel-title,
body.pos-clean-mode .topbar [class*="breadcrumb"],
body.pos-clean-mode .topbar [class*="title"]{
    display:none!important;
}

/* Si la página no llegó a marcar body.pos-clean-mode, ocultar dentro del view-pos por contexto */
#view-pos ~ .topbar h1,
#view-pos ~ .topbar h2,
#view-pos ~ .topbar .page-title,
#view-pos ~ .topbar .breadcrumb,
#view-pos ~ .topbar [class*="breadcrumb"]{
    display:none!important;
}

/* Ocultar subtítulo exacto debajo de Caja POS */
#view-pos p,
#view-pos .subtitle,
#view-pos .sub-title,
#view-pos .section-subtitle,
#view-pos .view-subtitle,
#view-pos .pos-subtitle,
#view-pos .module-subtitle{
    font-size:0!important;
    line-height:0!important;
    margin:0!important;
    padding:0!important;
    height:0!important;
    overflow:hidden!important;
}

/* Pero permitir textos descriptivos internos en tablas/cards que no sean header */
#view-pos table p,
#view-pos tbody p,
#view-pos .modal p,
#view-pos .drawer p{
    font-size:inherit!important;
    line-height:inherit!important;
    height:auto!important;
    overflow:visible!important;
}

/* Cabecera POS más compacta */
#view-pos .module-header,
#view-pos .section-header,
#view-pos .pos-header,
#view-pos header,
#view-pos .card-head:first-child{
    padding:10px 16px!important;
    min-height:64px!important;
    display:flex!important;
    align-items:center!important;
    gap:14px!important;
}

#view-pos h1,
#view-pos h2,
#view-pos .module-title,
#view-pos .section-title{
    font-size:24px!important;
    margin:0!important;
}

/* Reducir altura de la tarjeta superior donde están botones paquetes/categorías/cotización */
#view-pos > .card:first-child,
#view-pos .pos-header-card,
#view-pos .module-header-card{
    padding:10px 16px!important;
    min-height:auto!important;
}

/* Agenda Master: resumen primero, toolbar después */
#agendaProMount .agenda-summary-first-v239,
#agendaProMount .agenda-v221-summary{
    order:1!important;
    margin-bottom:10px!important;
}

#agendaProMount .agenda-toolbar-after-summary-v239,
#agendaProMount .agenda-v221-toolbar{
    order:2!important;
    margin-bottom:10px!important;
}

#agendaProMount .agenda-v221-main,
#agendaProMount .agenda-main,
#agendaProMount .agenda-v221-content{
    display:flex!important;
    flex-direction:column!important;
}

/* Si toolbar aparece visualmente primero por estructura, hacerlo menos dominante */
#agendaProMount .agenda-v221-toolbar{
    background:#fff!important;
    border:1px solid #e2e8f0!important;
    border-radius:18px!important;
    padding:10px!important;
}

/* Tarjetas de resumen de agenda más arriba y limpias */
#agendaProMount .agenda-v221-summary{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:10px!important;
}

@media(max-width:900px){
    #agendaProMount .agenda-v221-summary{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }
}


/* v22.4.0 - eliminar Panel administrativo y breadcrumb en POS y Agenda */
body.pos-clean-mode .topbar .breadcrumb,
body.pos-clean-mode .topbar .breadcrumbs,
body.pos-clean-mode .topbar .page-breadcrumb,
body.pos-clean-mode .topbar h1,
body.pos-clean-mode .topbar h2,
body.pos-clean-mode .topbar .page-title,
body.pos-clean-mode .topbar .admin-title,
body.pos-clean-mode .topbar .panel-title,
body.pos-clean-mode .topbar [class*="breadcrumb"],
body.pos-clean-mode .topbar [class*="title"],
#agendaProMount ~ .topbar .breadcrumb,
#agendaProMount ~ .topbar h1,
#agendaProMount ~ .topbar h2{
    display:none!important;
}

/* Si el título está dentro de header global */
body.pos-clean-mode header .breadcrumb,
body.pos-clean-mode header .breadcrumbs,
body.pos-clean-mode header h1,
body.pos-clean-mode header h2,
body.pos-clean-mode .app-header .breadcrumb,
body.pos-clean-mode .app-header h1,
body.pos-clean-mode .app-header h2{
    display:none!important;
}

/* También ocultar por texto/estructura común sin afectar títulos internos de módulos */
body.pos-clean-mode .page-head,
body.pos-clean-mode .view-head,
body.pos-clean-mode .admin-head{
    min-height:0!important;
    padding-top:0!important;
    padding-bottom:0!important;
}

/* Subtítulo Caja POS fuera */
#view-pos .module-header p,
#view-pos .section-header p,
#view-pos .pos-header p,
#view-pos .card-head p,
#view-pos header p,
#view-pos .view-subtitle,
#view-pos .section-subtitle,
#view-pos .pos-subtitle,
#view-pos .module-subtitle{
    display:none!important;
}

/* Cabecera Caja POS compacta */
#view-pos .module-header,
#view-pos .section-header,
#view-pos .pos-header,
#view-pos header,
#view-pos .card-head:first-child,
#view-pos > .card:first-child{
    padding:10px 16px!important;
    min-height:58px!important;
    border-radius:20px!important;
}

/* Quitar edición rápida en ventas/ingresos: ocultar icono/lápiz del badge en ingresos */
#view-pos .income-row .money-badge::after,
#view-pos .pos-income-row .money-badge::after,
#view-pos .ingreso-row .money-badge::after,
#view-pos .venta-row .money-badge::after,
#view-pos #ingresos .money-badge::after,
#view-pos #posIngresos .money-badge::after,
#view-pos section[data-section="ingresos"] .money-badge::after,
body.pos-ingresos-active #view-pos .money-badge::after{
    content:""!important;
    display:none!important;
}

/* En ingresos el badge no debe parecer editable */
#view-pos .income-row .money-badge,
#view-pos .pos-income-row .money-badge,
#view-pos .ingreso-row .money-badge,
#view-pos .venta-row .money-badge,
#view-pos #ingresos .money-badge,
#view-pos #posIngresos .money-badge,
#view-pos section[data-section="ingresos"] .money-badge,
body.pos-ingresos-active #view-pos .money-badge{
    pointer-events:none!important;
    cursor:default!important;
    background:#dcfce7!important;
    color:#15803d!important;
}

/* En gastos sí queda editable y rojo */
#view-pos .expense-row .money-badge,
#view-pos .pos-expense-row .money-badge,
#view-pos .gasto-row .money-badge,
#view-pos #gastos .money-badge,
#view-pos #posGastos .money-badge,
#view-pos section[data-section="gastos"] .money-badge,
body.pos-gastos-active #view-pos .money-badge{
    pointer-events:auto!important;
    cursor:pointer!important;
    background:#fee2e2!important;
    color:#dc2626!important;
}

/* Agenda: orden real tarjetas -> toolbar -> grid */
#agendaProMount .agenda-v240-ordered{
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
    width:100%!important;
}

#agendaProMount .agenda-v240-summary-first{
    order:1!important;
    margin-bottom:0!important;
}

#agendaProMount .agenda-v240-toolbar-second{
    order:2!important;
    margin-bottom:0!important;
    background:#fff!important;
    border:1px solid #e2e8f0!important;
    border-radius:18px!important;
    padding:10px!important;
}

#agendaProMount .agenda-v240-grid-third{
    order:3!important;
}

/* Forzar que summary no baje debajo del grid por estilos anteriores */
#agendaProMount .agenda-v221-summary{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:10px!important;
}

@media(max-width:900px){
    #agendaProMount .agenda-v221-summary{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }
}


/* v22.4.1 - Ocultar definitivamente encabezado global en Agenda/POS */
body.pos-clean-mode .breadcrumb,
body.pos-clean-mode .breadcrumbs,
body.pos-clean-mode .page-breadcrumb,
body.pos-clean-mode .page-title,
body.pos-clean-mode .admin-title,
body.pos-clean-mode .panel-title,
body.pos-clean-mode h1:has(+ .breadcrumb),
body.pos-clean-mode h2:has(+ .breadcrumb){
    display:none!important;
}

/* En Agenda también quitar Panel administrativo y breadcrumb global */
body:has(#agendaProMount) .breadcrumb,
body:has(#agendaProMount) .breadcrumbs,
body:has(#agendaProMount) .page-breadcrumb,
body:has(#agendaProMount) .page-title,
body:has(#agendaProMount) .admin-title,
body:has(#agendaProMount) .panel-title{
    display:none!important;
}

/* Fallback para topbar donde se ve Panel administrativo */
body:has(#agendaProMount) .topbar h1,
body:has(#agendaProMount) .topbar h2,
body:has(#agendaProMount) .topbar [class*="breadcrumb"],
body:has(#view-pos) .topbar h1,
body:has(#view-pos) .topbar h2,
body:has(#view-pos) .topbar [class*="breadcrumb"]{
    display:none!important;
}

/* Caja POS: título sin PRO */
#view-pos h1,
#view-pos h2,
#view-pos .module-title,
#view-pos .section-title{
    white-space:normal!important;
}
#view-pos h1::first-line,
#view-pos h2::first-line{
    font-size:inherit!important;
}

/* Ocultar subtitulo de Caja POS */
#view-pos .module-header p,
#view-pos .section-header p,
#view-pos .pos-header p,
#view-pos .card-head p,
#view-pos header p,
#view-pos .view-subtitle,
#view-pos .section-subtitle,
#view-pos .pos-subtitle,
#view-pos .module-subtitle{
    display:none!important;
}

/* Ingresos: quitar edición rápida y apariencia editable */
#view-pos #ingresos .money-badge,
#view-pos #posIngresos .money-badge,
#view-pos section[data-section="ingresos"] .money-badge,
#view-pos .income-row .money-badge,
#view-pos .pos-income-row .money-badge,
#view-pos .ingreso-row .money-badge,
#view-pos .venta-row .money-badge{
    background:#dcfce7!important;
    color:#15803d!important;
    pointer-events:none!important;
    cursor:default!important;
}
#view-pos #ingresos .money-badge::after,
#view-pos #posIngresos .money-badge::after,
#view-pos section[data-section="ingresos"] .money-badge::after,
#view-pos .income-row .money-badge::after,
#view-pos .pos-income-row .money-badge::after,
#view-pos .ingreso-row .money-badge::after,
#view-pos .venta-row .money-badge::after{
    display:none!important;
    content:""!important;
}

/* Gastos conserva edición rápida */
#view-pos #gastos .money-badge,
#view-pos #posGastos .money-badge,
#view-pos section[data-section="gastos"] .money-badge,
#view-pos .expense-row .money-badge,
#view-pos .pos-expense-row .money-badge,
#view-pos .gasto-row .money-badge{
    background:#fee2e2!important;
    color:#dc2626!important;
    pointer-events:auto!important;
    cursor:pointer!important;
}



/* v22.4.3 - sc-editable-amount según contexto ingreso/gasto */
.sc-editable-amount{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:6px 12px;
    border-radius:999px;
    font-weight:900;
    line-height:1;
    transition:background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

/* Ingresos / ventas: verde */
#posIncomeTab .sc-editable-amount,
#posIncomeTable .sc-editable-amount,
#view-pos .pos-income-row .sc-editable-amount,
#view-pos .income-row .sc-editable-amount,
#view-pos .ingreso-row .sc-editable-amount,
#view-pos .venta-row .sc-editable-amount,
body.pos-income-active #view-pos .sc-editable-amount,
.sc-editable-amount.is-income{
    background:#EAFBF1!important;
    color:#169C53!important;
}

/* Ingresos: si conserva icono/lápiz, también verde */
#posIncomeTab .sc-editable-amount i,
#posIncomeTable .sc-editable-amount i,
#view-pos .pos-income-row .sc-editable-amount i,
#view-pos .income-row .sc-editable-amount i,
#view-pos .ingreso-row .sc-editable-amount i,
#view-pos .venta-row .sc-editable-amount i,
body.pos-income-active #view-pos .sc-editable-amount i,
.sc-editable-amount.is-income i{
    color:#16A34A!important;
}

#posIncomeTab .sc-editable-amount:hover,
#posIncomeTable .sc-editable-amount:hover,
#view-pos .pos-income-row .sc-editable-amount:hover,
#view-pos .income-row .sc-editable-amount:hover,
#view-pos .ingreso-row .sc-editable-amount:hover,
#view-pos .venta-row .sc-editable-amount:hover,
body.pos-income-active #view-pos .sc-editable-amount:hover,
.sc-editable-amount.is-income:hover{
    background:#DDF8E8!important;
    box-shadow:0 8px 18px rgba(22,156,83,.16)!important;
}

/* Gastos: rojo */
#posExpensesTab .sc-editable-amount,
#posExpensesTable .sc-editable-amount,
#view-pos .pos-expense-row .sc-editable-amount,
#view-pos .expense-row .sc-editable-amount,
#view-pos .gasto-row .sc-editable-amount,
body.pos-expense-active #view-pos .sc-editable-amount,
.sc-editable-amount.is-expense{
    background:#FDECEC!important;
    color:#DC2626!important;
}

#posExpensesTab .sc-editable-amount i,
#posExpensesTable .sc-editable-amount i,
#view-pos .pos-expense-row .sc-editable-amount i,
#view-pos .expense-row .sc-editable-amount i,
#view-pos .gasto-row .sc-editable-amount i,
body.pos-expense-active #view-pos .sc-editable-amount i,
.sc-editable-amount.is-expense i{
    color:#EF4444!important;
}

#posExpensesTab .sc-editable-amount:hover,
#posExpensesTable .sc-editable-amount:hover,
#view-pos .pos-expense-row .sc-editable-amount:hover,
#view-pos .expense-row .sc-editable-amount:hover,
#view-pos .gasto-row .sc-editable-amount:hover,
body.pos-expense-active #view-pos .sc-editable-amount:hover,
.sc-editable-amount.is-expense:hover{
    background:#FADDDD!important;
    box-shadow:0 8px 18px rgba(220,38,38,.16)!important;
}


/* v22.4.4 - Notificaciones a la derecha + Sidebar colapsable */

/* Notificaciones arriba a la derecha */
.sc-toast-stack,
.toast-stack,
#toastContainer,
#notificationContainer,
.notifications-container,
.sc-notifications,
.app-toast-container{
    position:fixed!important;
    top:18px!important;
    right:18px!important;
    left:auto!important;
    z-index:999999!important;
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
    align-items:flex-end!important;
    pointer-events:none!important;
}

.sc-toast,
.toast,
.notification,
.sc-notification{
    pointer-events:auto!important;
    animation:scToastSlideRight .24s ease-out!important;
}

@keyframes scToastSlideRight{
    from{ transform:translateX(24px); opacity:0; }
    to{ transform:translateX(0); opacity:1; }
}

/* Botón flotante sidebar */
.sc-sidebar-toggle{
    position:fixed!important;
    left:244px!important;
    top:18px!important;
    width:38px!important;
    height:38px!important;
    border:1px solid rgba(148,163,184,.28)!important;
    border-radius:12px!important;
    background:#ffffff!important;
    color:#111827!important;
    font-weight:900!important;
    display:grid!important;
    place-items:center!important;
    cursor:pointer!important;
    z-index:99999!important;
    box-shadow:0 10px 24px rgba(15,23,42,.14)!important;
    transition:left .22s ease, transform .18s ease, background .18s ease!important;
}

.sc-sidebar-toggle:hover{
    transform:translateY(-2px)!important;
    background:#f8fafc!important;
}

body.sc-sidebar-collapsed .sc-sidebar-toggle{
    left:14px!important;
}

/* Colapsar sidebar sin romper módulos */
body.sc-sidebar-collapsed .sidebar,
body.sc-sidebar-collapsed aside.sidebar,
body.sc-sidebar-collapsed .app-sidebar,
body.sc-sidebar-collapsed #sidebar{
    transform:translateX(-105%)!important;
    width:0!important;
    min-width:0!important;
    overflow:hidden!important;
}

/* Expandir contenido */
body.sc-sidebar-collapsed .main,
body.sc-sidebar-collapsed .main-content,
body.sc-sidebar-collapsed .content,
body.sc-sidebar-collapsed .app-main,
body.sc-sidebar-collapsed #main{
    margin-left:0!important;
    width:100%!important;
}

/* Si el layout usa grid/flex con sidebar */
body.sc-sidebar-collapsed .layout,
body.sc-sidebar-collapsed .app-layout,
body.sc-sidebar-collapsed .shell{
    grid-template-columns:0 1fr!important;
}

/* Sidebar transición */
.sidebar,
aside.sidebar,
.app-sidebar,
#sidebar{
    transition:transform .22s ease, width .22s ease, min-width .22s ease!important;
}


/* v22.4.5 - Timezone + notificaciones derecha + sidebar toggle definitivo */

/* Forzar TODAS las notificaciones a la derecha */
.sc-toast-stack,
.sc-toast-container,
.toast-container,
.toast-stack,
#toastContainer,
#notificationContainer,
#notifications,
.notifications,
.notifications-container,
.sc-notifications,
.app-toast-container,
[class*="toast"][class*="container"],
[class*="notification"][class*="container"]{
    position:fixed!important;
    top:18px!important;
    right:18px!important;
    left:auto!important;
    bottom:auto!important;
    z-index:2147483647!important;
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
    align-items:flex-end!important;
    max-width:min(420px, calc(100vw - 36px))!important;
}

.sc-toast,
.toast,
.notification,
.sc-notification,
[class*="toast"]:not([class*="container"]),
[class*="notification"]:not([class*="container"]){
    animation:scToastRightIn2245 .24s ease-out!important;
}

@keyframes scToastRightIn2245{
    from{ transform:translateX(26px); opacity:0; }
    to{ transform:translateX(0); opacity:1; }
}

/* Botón de menú lateral */
#scSidebarToggle{
    position:fixed!important;
    left:248px!important;
    top:18px!important;
    width:42px!important;
    height:42px!important;
    border:1px solid rgba(148,163,184,.30)!important;
    border-radius:999px!important;
    background:#ffffff!important;
    color:#111827!important;
    font-size:20px!important;
    font-weight:900!important;
    display:grid!important;
    place-items:center!important;
    cursor:pointer!important;
    z-index:2147483000!important;
    box-shadow:0 12px 28px rgba(15,23,42,.18)!important;
    transition:left .22s ease, transform .18s ease, background .18s ease!important;
}

#scSidebarToggle:hover{
    transform:scale(1.06)!important;
    background:#f8fafc!important;
}

body.sc-sidebar-collapsed #scSidebarToggle{
    left:14px!important;
}

/* Sidebar oculto */
body.sc-sidebar-collapsed .sidebar,
body.sc-sidebar-collapsed aside,
body.sc-sidebar-collapsed aside.sidebar,
body.sc-sidebar-collapsed .app-sidebar,
body.sc-sidebar-collapsed .side-nav,
body.sc-sidebar-collapsed .left-sidebar,
body.sc-sidebar-collapsed #sidebar{
    transform:translateX(-110%)!important;
    width:0!important;
    min-width:0!important;
    max-width:0!important;
    padding-left:0!important;
    padding-right:0!important;
    margin-left:0!important;
    margin-right:0!important;
    overflow:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
}

/* Contenido expandido cuando sidebar está oculto */
body.sc-sidebar-collapsed .main,
body.sc-sidebar-collapsed main,
body.sc-sidebar-collapsed .main-content,
body.sc-sidebar-collapsed .content,
body.sc-sidebar-collapsed .app-main,
body.sc-sidebar-collapsed .page,
body.sc-sidebar-collapsed .page-content,
body.sc-sidebar-collapsed #main{
    margin-left:0!important;
    padding-left:18px!important;
    width:100%!important;
    max-width:100%!important;
}

/* Layouts con grid */
body.sc-sidebar-collapsed .layout,
body.sc-sidebar-collapsed .app-layout,
body.sc-sidebar-collapsed .shell,
body.sc-sidebar-collapsed .dashboard-layout{
    grid-template-columns:0 1fr!important;
}

/* Layouts con flex */
body.sc-sidebar-collapsed .app,
body.sc-sidebar-collapsed .wrapper{
    gap:0!important;
}

/* transiciones */
.sidebar,
aside.sidebar,
.app-sidebar,
.side-nav,
.left-sidebar,
#sidebar,
.main,
main,
.main-content,
.content,
.app-main,
.page-content{
    transition:transform .22s ease, width .22s ease, min-width .22s ease, max-width .22s ease, margin .22s ease, padding .22s ease, opacity .18s ease!important;
}


/* v22.4.6 - Hotfix notificaciones derecha definitivo */
.sc-toast-stack,
.sc-toast-container,
.toast-container,
.toast-stack,
#toastContainer,
#notificationContainer,
#notifications,
.notifications,
.notifications-container,
.sc-notifications,
.app-toast-container,
body > .toast,
body > .notification,
body > .sc-toast,
body > .sc-notification{
    position:fixed!important;
    top:18px!important;
    right:18px!important;
    left:auto!important;
    bottom:auto!important;
    z-index:2147483647!important;
}

.sc-toast-stack,
.sc-toast-container,
.toast-container,
.toast-stack,
#toastContainer,
#notificationContainer,
#notifications,
.notifications,
.notifications-container,
.sc-notifications,
.app-toast-container{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-end!important;
    gap:10px!important;
    max-width:min(430px, calc(100vw - 36px))!important;
}

.sc-toast,
.toast,
.notification,
.sc-notification{
    margin-left:auto!important;
    margin-right:0!important;
}


/* ==========================================================
   v22.4.9 - Selector Spa Opción 10 Recta Principal
   Solo UI. No toca lógica de Caja POS ni Agenda.
   ========================================================== */

:root{
    --spa-makai:#0f9f55;
    --spa-sahara:#e65f12;
    --spa-kiwi:#9a650f;
    --spa-esbell:#7d35b8;
    --spa-all:#6c4cf1;
}

/* Contenedor principal de chips */
.spa-chips,
#spaChips,
.spa-selector,
.spa-tabs{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(150px,1fr))!important;
    gap:10px!important;
    align-items:stretch!important;
    margin:14px 0 16px!important;
    padding:0!important;
}

/* Base rectangular tipo banner */
.spa-chip,
#spaChips button,
.spa-chips button,
.spa-selector button,
.spa-tabs button,
button[data-spa]{
    --spa-color:var(--spa-all);
    --spa-color-soft:rgba(108,76,241,.18);
    --spa-icon:"●";
    --spa-subtitle:"Todos los spas";

    position:relative!important;
    isolation:isolate!important;
    overflow:hidden!important;
    min-height:86px!important;
    height:86px!important;
    width:100%!important;
    min-width:0!important;
    padding:16px 20px 16px 92px!important;
    border-radius:18px!important;
    border:1px solid rgba(226,232,240,.95)!important;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--spa-color) 82%, #000) 0%, color-mix(in srgb, var(--spa-color) 58%, #111827) 100%)!important;
    color:#fff!important;
    box-shadow:0 12px 26px rgba(15,23,42,.10)!important;
    cursor:pointer!important;
    text-align:left!important;
    font-weight:950!important;
    font-size:18px!important;
    line-height:1.05!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:flex-start!important;
    transform:translateY(0)!important;
    transition:
        transform .20s ease,
        box-shadow .20s ease,
        border-color .20s ease,
        filter .20s ease!important;
}

/* Overlay visual tipo imagen/ambiente sin usar imágenes */
.spa-chip::after,
#spaChips button::after,
.spa-chips button::after,
.spa-selector button::after,
.spa-tabs button::after,
button[data-spa]::after{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    z-index:-2!important;
    opacity:.42!important;
    background:
        radial-gradient(circle at 16% 22%, rgba(255,255,255,.25), transparent 24%),
        radial-gradient(circle at 78% 35%, rgba(255,255,255,.13), transparent 28%),
        linear-gradient(135deg, rgba(255,255,255,.10), rgba(0,0,0,.18))!important;
}

/* Icono grande en círculo blanco */
.spa-chip::before,
#spaChips button::before,
.spa-chips button::before,
.spa-selector button::before,
.spa-tabs button::before,
button[data-spa]::before{
    content:var(--spa-icon)!important;
    position:absolute!important;
    left:22px!important;
    top:50%!important;
    width:54px!important;
    height:54px!important;
    transform:translateY(-50%)!important;
    border-radius:999px!important;
    border:2px solid rgba(255,255,255,.82)!important;
    display:grid!important;
    place-items:center!important;
    color:#fff!important;
    font-size:27px!important;
    line-height:1!important;
    background:rgba(255,255,255,.10)!important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.16),
        0 12px 22px rgba(0,0,0,.18)!important;
    backdrop-filter:blur(3px)!important;
}

/* Texto principal */
.spa-chip .spa-chip-title,
.spa-chip strong,
#spaChips button strong,
.spa-chips button strong{
    position:relative!important;
    z-index:2!important;
    color:#fff!important;
    font-weight:950!important;
}

/* Subtítulo automático */
.spa-chip .spa-selector-subtitle,
#spaChips button .spa-selector-subtitle,
.spa-chips button .spa-selector-subtitle,
.spa-selector button .spa-selector-subtitle,
.spa-tabs button .spa-selector-subtitle,
button[data-spa] .spa-selector-subtitle{
    display:block!important;
    margin-top:6px!important;
    font-size:13px!important;
    line-height:1.2!important;
    font-weight:700!important;
    color:rgba(255,255,255,.88)!important;
    letter-spacing:0!important;
}

/* Barra inferior de color */
.spa-chip .spa-selector-line,
#spaChips button .spa-selector-line,
.spa-chips button .spa-selector-line,
.spa-selector button .spa-selector-line,
.spa-tabs button .spa-selector-line,
button[data-spa] .spa-selector-line{
    position:absolute!important;
    left:92px!important;
    bottom:14px!important;
    width:88px!important;
    height:4px!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.72)!important;
    box-shadow:0 0 20px rgba(255,255,255,.24)!important;
}

/* Check seleccionado */
.spa-chip .spa-selector-check,
#spaChips button .spa-selector-check,
.spa-chips button .spa-selector-check,
.spa-selector button .spa-selector-check,
.spa-tabs button .spa-selector-check,
button[data-spa] .spa-selector-check{
    position:absolute!important;
    right:14px!important;
    top:14px!important;
    width:28px!important;
    height:28px!important;
    border-radius:999px!important;
    background:#fff!important;
    color:var(--spa-color)!important;
    display:none!important;
    place-items:center!important;
    font-size:16px!important;
    font-weight:950!important;
    box-shadow:0 8px 18px rgba(15,23,42,.18)!important;
}

/* Hover */
.spa-chip:hover,
#spaChips button:hover,
.spa-chips button:hover,
.spa-selector button:hover,
.spa-tabs button:hover,
button[data-spa]:hover{
    transform:translateY(-3px)!important;
    filter:saturate(1.08) brightness(1.03)!important;
    box-shadow:0 18px 42px color-mix(in srgb, var(--spa-color) 28%, transparent)!important;
    border-color:rgba(255,255,255,.72)!important;
}

/* Activo */
.spa-chip.active,
.spa-chip.is-active,
#spaChips button.active,
#spaChips button.is-active,
.spa-chips button.active,
.spa-chips button.is-active,
.spa-selector button.active,
.spa-selector button.is-active,
.spa-tabs button.active,
.spa-tabs button.is-active,
button[data-spa].active,
button[data-spa].is-active{
    transform:translateY(-2px)!important;
    border:2px solid rgba(255,255,255,.88)!important;
    box-shadow:
        0 20px 48px color-mix(in srgb, var(--spa-color) 34%, transparent),
        0 0 0 4px color-mix(in srgb, var(--spa-color) 18%, transparent)!important;
}

/* Mostrar check activo */
.spa-chip.active .spa-selector-check,
.spa-chip.is-active .spa-selector-check,
#spaChips button.active .spa-selector-check,
#spaChips button.is-active .spa-selector-check,
.spa-chips button.active .spa-selector-check,
.spa-chips button.is-active .spa-selector-check,
.spa-selector button.active .spa-selector-check,
.spa-selector button.is-active .spa-selector-check,
.spa-tabs button.active .spa-selector-check,
.spa-tabs button.is-active .spa-selector-check,
button[data-spa].active .spa-selector-check,
button[data-spa].is-active .spa-selector-check{
    display:grid!important;
}

/* Colores por Spa */
.spa-chip[data-spa-name="todos"],
button[data-spa-name="todos"]{
    --spa-color:var(--spa-all);
    --spa-icon:"●";
}

.spa-chip[data-spa-name="makai"],
button[data-spa-name="makai"]{
    --spa-color:var(--spa-makai);
    --spa-icon:"🌴";
}

.spa-chip[data-spa-name="sahara"],
button[data-spa-name="sahara"]{
    --spa-color:var(--spa-sahara);
    --spa-icon:"🪔";
}

.spa-chip[data-spa-name="kiwi"],
button[data-spa-name="kiwi"]{
    --spa-color:var(--spa-kiwi);
    --spa-icon:"🥝";
}

.spa-chip[data-spa-name="esbell"],
button[data-spa-name="esbell"]{
    --spa-color:var(--spa-esbell);
    --spa-icon:"✿";
}

/* Modo móvil/tablet */
@media(max-width:1180px){
    .spa-chips,
    #spaChips,
    .spa-selector,
    .spa-tabs{
        grid-template-columns:repeat(2,minmax(180px,1fr))!important;
    }
}

@media(max-width:640px){
    .spa-chips,
    #spaChips,
    .spa-selector,
    .spa-tabs{
        grid-template-columns:1fr!important;
        gap:8px!important;
    }

    .spa-chip,
    #spaChips button,
    .spa-chips button,
    .spa-selector button,
    .spa-tabs button,
    button[data-spa]{
        min-height:72px!important;
        height:72px!important;
        padding-left:78px!important;
        border-radius:16px!important;
    }

    .spa-chip::before,
    #spaChips button::before,
    .spa-chips button::before,
    .spa-selector button::before,
    .spa-tabs button::before,
    button[data-spa]::before{
        left:16px!important;
        width:46px!important;
        height:46px!important;
        font-size:23px!important;
    }

    .spa-chip .spa-selector-line,
    #spaChips button .spa-selector-line,
    .spa-chips button .spa-selector-line,
    .spa-selector button .spa-selector-line,
    .spa-tabs button .spa-selector-line,
    button[data-spa] .spa-selector-line{
        left:78px!important;
        bottom:10px!important;
    }
}


/* ==========================================================
   v22.5.0 - Backgrounds reales para Selector Spa Opción 10
   ========================================================== */

.spa-chip,
#spaChips button,
.spa-chips button,
.spa-selector button,
.spa-tabs button,
button[data-spa]{
    background-size:cover!important;
    background-position:center!important;
    background-repeat:no-repeat!important;
}

/* Imagen por Spa */
.spa-chip[data-spa-name="makai"],
button[data-spa-name="makai"]{
    background-image:
        linear-gradient(90deg, rgba(3,65,32,.86), rgba(15,159,85,.56));
}

.spa-chip[data-spa-name="sahara"],
button[data-spa-name="sahara"]{
    background-image:
        linear-gradient(90deg, rgba(126,43,5,.86), rgba(230,95,18,.56));
}

.spa-chip[data-spa-name="kiwi"],
button[data-spa-name="kiwi"]{
    background-image:
        linear-gradient(90deg, rgba(72,45,6,.86), rgba(154,101,15,.56));
}

.spa-chip[data-spa-name="esbell"],
button[data-spa-name="esbell"]{
    background-image:
        linear-gradient(90deg, rgba(58,22,86,.86), rgba(125,53,184,.56));
}

/* Todos no usa foto, mantiene estilo limpio */
.spa-chip[data-spa-name="todos"],
button[data-spa-name="todos"]{
    background-image:
        linear-gradient(90deg, rgba(76,54,220,.92), rgba(108,76,241,.70))!important;
}

/* Mejor contraste de contenido sobre imagen */
.spa-chip .spa-selector-subtitle,
#spaChips button .spa-selector-subtitle,
.spa-chips button .spa-selector-subtitle,
.spa-selector button .spa-selector-subtitle,
.spa-tabs button .spa-selector-subtitle,
button[data-spa] .spa-selector-subtitle{
    text-shadow:0 2px 8px rgba(0,0,0,.24)!important;
}

.spa-chip,
#spaChips button,
.spa-chips button,
.spa-selector button,
.spa-tabs button,
button[data-spa]{
    text-shadow:0 2px 10px rgba(0,0,0,.22)!important;
}

/* Ligero brillo al hover sobre imágenes */
.spa-chip:hover::after,
#spaChips button:hover::after,
.spa-chips button:hover::after,
.spa-selector button:hover::after,
.spa-tabs button:hover::after,
button[data-spa]:hover::after{
    opacity:.30!important;
}


/* ==========================================================
   v22.5.1 - FIX backgrounds selector Spa
   Aplica imágenes aunque el selector no tenga data-spa-name al cargar.
   ========================================================== */

.spa-chip,
#spaChips button,
.spa-chips button,
.spa-selector button,
.spa-tabs button,
button[data-spa]{
    background-size:cover!important;
    background-position:center!important;
    background-repeat:no-repeat!important;
}

/* MAKAI */
.spa-chip[data-spa-name="makai"],
button[data-spa-name="makai"],
.spa-chip.spa-selector-makai,
button.spa-selector-makai,
#spaChips button.spa-selector-makai,
.spa-chips button.spa-selector-makai{
    --spa-color:#0f9f55!important;
    --spa-icon:"🌴"!important;
    background-image:
        linear-gradient(90deg, rgba(3,65,32,.90), rgba(15,159,85,.52));
}

/* SAHARA */
.spa-chip[data-spa-name="sahara"],
button[data-spa-name="sahara"],
.spa-chip.spa-selector-sahara,
button.spa-selector-sahara,
#spaChips button.spa-selector-sahara,
.spa-chips button.spa-selector-sahara{
    --spa-color:#e65f12!important;
    --spa-icon:"🪔"!important;
    background-image:
        linear-gradient(90deg, rgba(126,43,5,.90), rgba(230,95,18,.54));
}

/* KIWI */
.spa-chip[data-spa-name="kiwi"],
button[data-spa-name="kiwi"],
.spa-chip.spa-selector-kiwi,
button.spa-selector-kiwi,
#spaChips button.spa-selector-kiwi,
.spa-chips button.spa-selector-kiwi{
    --spa-color:#9a650f!important;
    --spa-icon:"🥝"!important;
    background-image:
        linear-gradient(90deg, rgba(72,45,6,.90), rgba(154,101,15,.54));
}

/* ESBELL */
.spa-chip[data-spa-name="esbell"],
button[data-spa-name="esbell"],
.spa-chip.spa-selector-esbell,
button.spa-selector-esbell,
#spaChips button.spa-selector-esbell,
.spa-chips button.spa-selector-esbell{
    --spa-color:#7d35b8!important;
    --spa-icon:"✿"!important;
    background-image:
        linear-gradient(90deg, rgba(58,22,86,.90), rgba(125,53,184,.56));
}

/* TODOS */
.spa-chip[data-spa-name="todos"],
button[data-spa-name="todos"],
.spa-chip.spa-selector-todos,
button.spa-selector-todos,
#spaChips button.spa-selector-todos,
.spa-chips button.spa-selector-todos{
    --spa-color:#6c4cf1!important;
    --spa-icon:"●"!important;
    background-image:linear-gradient(90deg, rgba(76,54,220,.94), rgba(108,76,241,.70))!important;
}

/* Fallback por posición cuando hay exactamente 5 botones: Todos, Makai, Sahara, Kiwi, Esbell */
.spa-chips button:nth-child(1),
#spaChips button:nth-child(1){
    --spa-color:#6c4cf1!important;
    --spa-icon:"●"!important;
    background-image:linear-gradient(90deg, rgba(76,54,220,.94), rgba(108,76,241,.70))!important;
}

.spa-chips button:nth-child(2),
#spaChips button:nth-child(2){
    --spa-color:#0f9f55!important;
    --spa-icon:"🌴"!important;
    background-image:
        linear-gradient(90deg, rgba(3,65,32,.90), rgba(15,159,85,.52));
}

.spa-chips button:nth-child(3),
#spaChips button:nth-child(3){
    --spa-color:#e65f12!important;
    --spa-icon:"🪔"!important;
    background-image:
        linear-gradient(90deg, rgba(126,43,5,.90), rgba(230,95,18,.54));
}

.spa-chips button:nth-child(4),
#spaChips button:nth-child(4){
    --spa-color:#9a650f!important;
    --spa-icon:"🥝"!important;
    background-image:
        linear-gradient(90deg, rgba(72,45,6,.90), rgba(154,101,15,.54));
}

.spa-chips button:nth-child(5),
#spaChips button:nth-child(5){
    --spa-color:#7d35b8!important;
    --spa-icon:"✿"!important;
    background-image:
        linear-gradient(90deg, rgba(58,22,86,.90), rgba(125,53,184,.56));
}

/* Contraste final sobre imagen */
.spa-chip,
#spaChips button,
.spa-chips button,
.spa-selector button,
.spa-tabs button,
button[data-spa]{
    color:#fff!important;
    text-shadow:0 2px 10px rgba(0,0,0,.28)!important;
}

.spa-chip *,
#spaChips button *,
.spa-chips button *,
.spa-selector button *,
.spa-tabs button *,
button[data-spa] *{
    color:inherit!important;
}


/* ==========================================================
   v22.5.2 - Selector Spa Variante B con iconos SVG
   Diseño limpio, rectangular, sin emojis ni backgrounds pesados.
   ========================================================== */

:root{
    --spa-makai:#12a85f;
    --spa-sahara:#ea650f;
    --spa-kiwi:#a36810;
    --spa-esbell:#8537b8;
    --spa-all:#7048ee;
}

/* Contenedor */
.spa-chips,
#spaChips,
.spa-selector,
.spa-tabs{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(160px,1fr))!important;
    gap:14px!important;
    align-items:stretch!important;
    margin:14px 0 18px!important;
    padding:0!important;
}

/* Card base Variante B */
.spa-chip,
#spaChips button,
.spa-chips button,
.spa-selector button,
.spa-tabs button,
button[data-spa]{
    --spa-color:var(--spa-all);
    --spa-icon-url:url("../icons/spa-selector/kiwi.svg");

    position:relative!important;
    min-height:92px!important;
    height:92px!important;
    width:100%!important;
    padding:18px 54px 18px 92px!important;
    border-radius:16px!important;
    border:1.5px solid color-mix(in srgb, var(--spa-color) 58%, #ffffff)!important;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--spa-color) 10%, #ffffff), #ffffff 76%)!important;
    color:#0f172a!important;
    text-align:left!important;
    font-size:18px!important;
    font-weight:950!important;
    line-height:1.08!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:flex-start!important;
    cursor:pointer!important;
    overflow:hidden!important;
    box-shadow:0 14px 34px rgba(15,23,42,.08)!important;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease!important;
    text-shadow:none!important;
}

/* Icono circular SVG */
.spa-chip::before,
#spaChips button::before,
.spa-chips button::before,
.spa-selector button::before,
.spa-tabs button::before,
button[data-spa]::before{
    content:""!important;
    position:absolute!important;
    left:28px!important;
    top:50%!important;
    width:54px!important;
    height:54px!important;
    transform:translateY(-50%)!important;
    border-radius:999px!important;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--spa-color) 92%, #ffffff), color-mix(in srgb, var(--spa-color) 72%, #000000))!important;
    box-shadow:
        0 12px 24px color-mix(in srgb, var(--spa-color) 24%, transparent),
        inset 0 1px 0 rgba(255,255,255,.28)!important;
}

/* SVG blanco dentro del círculo */
.spa-chip::after,
#spaChips button::after,
.spa-chips button::after,
.spa-selector button::after,
.spa-tabs button::after,
button[data-spa]::after{
    content:""!important;
    position:absolute!important;
    left:43px!important;
    top:50%!important;
    width:24px!important;
    height:24px!important;
    transform:translateY(-50%)!important;
    background:#fff!important;
    mask-image:var(--spa-icon-url)!important;
    -webkit-mask-image:var(--spa-icon-url)!important;
    mask-size:contain!important;
    -webkit-mask-size:contain!important;
    mask-repeat:no-repeat!important;
    -webkit-mask-repeat:no-repeat!important;
    mask-position:center!important;
    -webkit-mask-position:center!important;
}

/* Subtítulo */
.spa-selector-subtitle{
    display:block!important;
    margin-top:7px!important;
    font-size:13px!important;
    line-height:1.2!important;
    font-weight:700!important;
    color:#475569!important;
    text-shadow:none!important;
}

/* Barra inferior */
.spa-selector-line{
    position:absolute!important;
    left:92px!important;
    bottom:0!important;
    width:64%!important;
    height:4px!important;
    border-radius:999px 999px 0 0!important;
    background:var(--spa-color)!important;
    opacity:.92!important;
}

/* Flecha derecha */
.spa-selector-arrow{
    position:absolute!important;
    right:24px!important;
    top:50%!important;
    width:22px!important;
    height:22px!important;
    transform:translateY(-50%)!important;
    color:var(--spa-color)!important;
}

.spa-selector-arrow::before{
    content:""!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    background:currentColor!important;
    mask-image:url("../icons/spa-selector/arrow-right.svg")!important;
    -webkit-mask-image:url("../icons/spa-selector/arrow-right.svg")!important;
    mask-size:contain!important;
    -webkit-mask-size:contain!important;
    mask-repeat:no-repeat!important;
    -webkit-mask-repeat:no-repeat!important;
    mask-position:center!important;
    -webkit-mask-position:center!important;
}

/* Check activo */
.spa-selector-check{
    position:absolute!important;
    right:18px!important;
    top:14px!important;
    width:26px!important;
    height:26px!important;
    border-radius:999px!important;
    display:none!important;
    place-items:center!important;
    background:var(--spa-color)!important;
    color:#fff!important;
    font-size:15px!important;
    font-weight:950!important;
    box-shadow:0 8px 18px color-mix(in srgb, var(--spa-color) 26%, transparent)!important;
}

/* Activo: reemplaza flecha por check */
.spa-chip.active .spa-selector-check,
.spa-chip.is-active .spa-selector-check,
#spaChips button.active .spa-selector-check,
#spaChips button.is-active .spa-selector-check,
.spa-chips button.active .spa-selector-check,
.spa-chips button.is-active .spa-selector-check,
.spa-selector button.active .spa-selector-check,
.spa-selector button.is-active .spa-selector-check,
.spa-tabs button.active .spa-selector-check,
.spa-tabs button.is-active .spa-selector-check,
button[data-spa].active .spa-selector-check,
button[data-spa].is-active .spa-selector-check{
    display:grid!important;
}

.spa-chip.active .spa-selector-arrow,
.spa-chip.is-active .spa-selector-arrow,
#spaChips button.active .spa-selector-arrow,
#spaChips button.is-active .spa-selector-arrow,
.spa-chips button.active .spa-selector-arrow,
.spa-chips button.is-active .spa-selector-arrow,
.spa-selector button.active .spa-selector-arrow,
.spa-selector button.is-active .spa-selector-arrow,
.spa-tabs button.active .spa-selector-arrow,
.spa-tabs button.is-active .spa-selector-arrow,
button[data-spa].active .spa-selector-arrow,
button[data-spa].is-active .spa-selector-arrow{
    display:none!important;
}

/* Hover */
.spa-chip:hover,
#spaChips button:hover,
.spa-chips button:hover,
.spa-selector button:hover,
.spa-tabs button:hover,
button[data-spa]:hover{
    transform:translateY(-3px)!important;
    border-color:var(--spa-color)!important;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--spa-color) 14%, #ffffff), #ffffff 74%)!important;
    box-shadow:0 18px 42px color-mix(in srgb, var(--spa-color) 18%, transparent)!important;
}

/* Activo */
.spa-chip.active,
.spa-chip.is-active,
#spaChips button.active,
#spaChips button.is-active,
.spa-chips button.active,
.spa-chips button.is-active,
.spa-selector button.active,
.spa-selector button.is-active,
.spa-tabs button.active,
.spa-tabs button.is-active,
button[data-spa].active,
button[data-spa].is-active{
    border-color:var(--spa-color)!important;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--spa-color) 16%, #ffffff), #ffffff 78%)!important;
    box-shadow:
        0 18px 44px color-mix(in srgb, var(--spa-color) 18%, transparent),
        0 0 0 3px color-mix(in srgb, var(--spa-color) 13%, transparent)!important;
}

/* Colores e iconos */
.spa-selector-todos,
[data-spa-name="todos"]{
    --spa-color:var(--spa-all)!important;
    --spa-icon-url:url("../icons/spa-selector/kiwi.svg")!important;
}

.spa-selector-makai,
[data-spa-name="makai"]{
    --spa-color:var(--spa-makai)!important;
    --spa-icon-url:url("../icons/spa-selector/palm.svg")!important;
}

.spa-selector-sahara,
[data-spa-name="sahara"]{
    --spa-color:var(--spa-sahara)!important;
    --spa-icon-url:url("../icons/spa-selector/arabic-lamp.svg")!important;
}

.spa-selector-kiwi,
[data-spa-name="kiwi"]{
    --spa-color:var(--spa-kiwi)!important;
    --spa-icon-url:url("../icons/spa-selector/kiwi.svg")!important;
}

.spa-selector-esbell,
[data-spa-name="esbell"]{
    --spa-color:var(--spa-esbell)!important;
    --spa-icon-url:url("../icons/spa-selector/flower.svg")!important;
}

/* Responsive */
@media(max-width:1180px){
    .spa-chips,
    #spaChips,
    .spa-selector,
    .spa-tabs{
        grid-template-columns:repeat(2,minmax(180px,1fr))!important;
    }
}

@media(max-width:640px){
    .spa-chips,
    #spaChips,
    .spa-selector,
    .spa-tabs{
        grid-template-columns:1fr!important;
        gap:10px!important;
    }

    .spa-chip,
    #spaChips button,
    .spa-chips button,
    .spa-selector button,
    .spa-tabs button,
    button[data-spa]{
        min-height:78px!important;
        height:78px!important;
        padding-left:82px!important;
        padding-right:48px!important;
    }

    .spa-chip::before,
    #spaChips button::before,
    .spa-chips button::before,
    .spa-selector button::before,
    .spa-tabs button::before,
    button[data-spa]::before{
        left:22px!important;
        width:48px!important;
        height:48px!important;
    }

    .spa-chip::after,
    #spaChips button::after,
    .spa-chips button::after,
    .spa-selector button::after,
    .spa-tabs button::after,
    button[data-spa]::after{
        left:35px!important;
        width:22px!important;
        height:22px!important;
    }

    .spa-selector-line{
        left:82px!important;
    }
}


/* ==========================================================
   v22.5.3 - Selector Spa limpio sin backgrounds ni subtítulos
   ========================================================== */

/* Contenedor */
.spa-chips,
#spaChips,
.spa-selector,
.spa-tabs{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(160px,1fr))!important;
    gap:14px!important;
    align-items:stretch!important;
    margin:14px 0 18px!important;
    padding:0!important;
}

/* Botones limpios */
.spa-chip,
#spaChips button,
.spa-chips button,
.spa-selector button,
.spa-tabs button,
button[data-spa]{
    --spa-color:#7048ee;
    --spa-icon-url:url("../icons/spa-selector/all-spas.svg");

    position:relative!important;
    min-height:76px!important;
    height:76px!important;
    width:100%!important;
    padding:0 54px 0 112px!important;
    border-radius:16px!important;
    border:1.5px solid color-mix(in srgb, var(--spa-color) 40%, #dbe3ef)!important;
    background:#ffffff!important;
    background-image:none!important;
    color:#0f172a!important;
    text-align:left!important;
    font-size:17px!important;
    font-weight:950!important;
    line-height:1!important;
    display:flex!important;
    flex-direction:row!important;
    justify-content:flex-start!important;
    align-items:center!important;
    cursor:pointer!important;
    overflow:hidden!important;
    box-shadow:0 12px 26px rgba(15,23,42,.06)!important;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease!important;
    text-shadow:none!important;
}

/* Borde/fondo suave por color */
.spa-chip::before,
#spaChips button::before,
.spa-chips button::before,
.spa-selector button::before,
.spa-tabs button::before,
button[data-spa]::before{
    content:""!important;
    position:absolute!important;
    left:28px!important;
    top:50%!important;
    width:56px!important;
    height:56px!important;
    transform:translateY(-50%)!important;
    border-radius:999px!important;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--spa-color) 94%, #ffffff), color-mix(in srgb, var(--spa-color) 72%, #000000))!important;
    box-shadow:
        0 12px 24px color-mix(in srgb, var(--spa-color) 20%, transparent),
        inset 0 1px 0 rgba(255,255,255,.30)!important;
}

/* Icono SVG blanco dentro del círculo */
.spa-chip::after,
#spaChips button::after,
.spa-chips button::after,
.spa-selector button::after,
.spa-tabs button::after,
button[data-spa]::after{
    content:""!important;
    position:absolute!important;
    left:44px!important;
    top:50%!important;
    width:24px!important;
    height:24px!important;
    transform:translateY(-50%)!important;
    background:#fff!important;
    mask-image:var(--spa-icon-url)!important;
    -webkit-mask-image:var(--spa-icon-url)!important;
    mask-size:contain!important;
    -webkit-mask-size:contain!important;
    mask-repeat:no-repeat!important;
    -webkit-mask-repeat:no-repeat!important;
    mask-position:center!important;
    -webkit-mask-position:center!important;
}

/* Eliminar subtítulos completamente */
.spa-selector-subtitle{
    display:none!important;
}

/* Barra inferior */
.spa-selector-line{
    position:absolute!important;
    left:112px!important;
    bottom:0!important;
    width:58%!important;
    height:4px!important;
    border-radius:999px 999px 0 0!important;
    background:var(--spa-color)!important;
    opacity:.92!important;
}

/* Flecha derecha */
.spa-selector-arrow{
    position:absolute!important;
    right:24px!important;
    top:50%!important;
    width:22px!important;
    height:22px!important;
    transform:translateY(-50%)!important;
    color:var(--spa-color)!important;
}

.spa-selector-arrow::before{
    content:""!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    background:currentColor!important;
    mask-image:url("../icons/spa-selector/arrow-right.svg")!important;
    -webkit-mask-image:url("../icons/spa-selector/arrow-right.svg")!important;
    mask-size:contain!important;
    -webkit-mask-size:contain!important;
    mask-repeat:no-repeat!important;
    -webkit-mask-repeat:no-repeat!important;
    mask-position:center!important;
    -webkit-mask-position:center!important;
}

/* Check activo */
.spa-selector-check{
    position:absolute!important;
    right:18px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    width:28px!important;
    height:28px!important;
    border-radius:999px!important;
    display:none!important;
    place-items:center!important;
    background:#fff!important;
    color:var(--spa-color)!important;
    font-size:16px!important;
    font-weight:950!important;
    box-shadow:0 8px 18px rgba(15,23,42,.12)!important;
}

/* Activo: check visible, flecha oculta */
.spa-chip.active .spa-selector-check,
.spa-chip.is-active .spa-selector-check,
#spaChips button.active .spa-selector-check,
#spaChips button.is-active .spa-selector-check,
.spa-chips button.active .spa-selector-check,
.spa-chips button.is-active .spa-selector-check,
.spa-selector button.active .spa-selector-check,
.spa-selector button.is-active .spa-selector-check,
.spa-tabs button.active .spa-selector-check,
.spa-tabs button.is-active .spa-selector-check,
button[data-spa].active .spa-selector-check,
button[data-spa].is-active .spa-selector-check{
    display:grid!important;
}

.spa-chip.active .spa-selector-arrow,
.spa-chip.is-active .spa-selector-arrow,
#spaChips button.active .spa-selector-arrow,
#spaChips button.is-active .spa-selector-arrow,
.spa-chips button.active .spa-selector-arrow,
.spa-chips button.is-active .spa-selector-arrow,
.spa-selector button.active .spa-selector-arrow,
.spa-selector button.is-active .spa-selector-arrow,
.spa-tabs button.active .spa-selector-arrow,
.spa-tabs button.is-active .spa-selector-arrow,
button[data-spa].active .spa-selector-arrow,
button[data-spa].is-active .spa-selector-arrow{
    display:none!important;
}

/* Hover */
.spa-chip:hover,
#spaChips button:hover,
.spa-chips button:hover,
.spa-selector button:hover,
.spa-tabs button:hover,
button[data-spa]:hover{
    transform:translateY(-3px)!important;
    border-color:var(--spa-color)!important;
    background:color-mix(in srgb, var(--spa-color) 5%, #ffffff)!important;
    box-shadow:0 18px 42px color-mix(in srgb, var(--spa-color) 15%, transparent)!important;
}

/* Activo */
.spa-chip.active,
.spa-chip.is-active,
#spaChips button.active,
#spaChips button.is-active,
.spa-chips button.active,
.spa-chips button.is-active,
.spa-selector button.active,
.spa-selector button.is-active,
.spa-tabs button.active,
.spa-tabs button.is-active,
button[data-spa].active,
button[data-spa].is-active{
    border-color:var(--spa-color)!important;
    background:color-mix(in srgb, var(--spa-color) 7%, #ffffff)!important;
    box-shadow:
        0 18px 44px color-mix(in srgb, var(--spa-color) 18%, transparent),
        0 0 0 3px color-mix(in srgb, var(--spa-color) 13%, transparent)!important;
}

/* Colores e iconos */
.spa-selector-todos,
[data-spa-name="todos"]{
    --spa-color:#7048ee!important;
    --spa-icon-url:url("../icons/spa-selector/all-spas.svg")!important;
}

.spa-selector-makai,
[data-spa-name="makai"]{
    --spa-color:#12a85f!important;
    --spa-icon-url:url("../icons/spa-selector/palm.svg")!important;
}

.spa-selector-sahara,
[data-spa-name="sahara"]{
    --spa-color:#ea650f!important;
    --spa-icon-url:url("../icons/spa-selector/arabic-lamp.svg")!important;
}

.spa-selector-kiwi,
[data-spa-name="kiwi"]{
    --spa-color:#a36810!important;
    --spa-icon-url:url("../icons/spa-selector/kiwi.svg")!important;
}

.spa-selector-esbell,
[data-spa-name="esbell"]{
    --spa-color:#8537b8!important;
    --spa-icon-url:url("../icons/spa-selector/flower.svg")!important;
}

/* Forzar color de texto del botón */
.spa-chip *,
#spaChips button *,
.spa-chips button *,
.spa-selector button *,
.spa-tabs button *,
button[data-spa] *{
    text-shadow:none!important;
}

/* Responsive */
@media(max-width:1180px){
    .spa-chips,
    #spaChips,
    .spa-selector,
    .spa-tabs{
        grid-template-columns:repeat(2,minmax(180px,1fr))!important;
    }
}

@media(max-width:640px){
    .spa-chips,
    #spaChips,
    .spa-selector,
    .spa-tabs{
        grid-template-columns:1fr!important;
    }

    .spa-chip,
    #spaChips button,
    .spa-chips button,
    .spa-selector button,
    .spa-tabs button,
    button[data-spa]{
        min-height:72px!important;
        height:72px!important;
        padding-left:96px!important;
    }

    .spa-chip::before,
    #spaChips button::before,
    .spa-chips button::before,
    .spa-selector button::before,
    .spa-tabs button::before,
    button[data-spa]::before{
        left:24px!important;
        width:50px!important;
        height:50px!important;
    }

    .spa-chip::after,
    #spaChips button::after,
    .spa-chips button::after,
    .spa-selector button::after,
    .spa-tabs button::after,
    button[data-spa]::after{
        left:37px!important;
        width:23px!important;
        height:23px!important;
    }

    .spa-selector-line{
        left:96px!important;
    }
}


/* ==========================================================
   v22.5.4 - Selector Spa sin backgrounds + icono Todos SVG
   ========================================================== */

/* Forzar que ningún selector use imágenes de fondo */
.spa-chip,
#spaChips button,
.spa-chips button,
.spa-selector button,
.spa-tabs button,
button[data-spa]{
    background-image:none!important;
    background:#ffffff!important;
}

/* Estado hover/activo limpio sin background de imagen */
.spa-chip:hover,
#spaChips button:hover,
.spa-chips button:hover,
.spa-selector button:hover,
.spa-tabs button:hover,
button[data-spa]:hover{
    background:color-mix(in srgb, var(--spa-color) 5%, #ffffff)!important;
}

.spa-chip.active,
.spa-chip.is-active,
#spaChips button.active,
#spaChips button.is-active,
.spa-chips button.active,
.spa-chips button.is-active,
.spa-selector button.active,
.spa-selector button.is-active,
.spa-tabs button.active,
.spa-tabs button.is-active,
button[data-spa].active,
button[data-spa].is-active{
    background:color-mix(in srgb, var(--spa-color) 7%, #ffffff)!important;
}

/* Icono oficial para Todos */
.spa-selector-todos,
[data-spa-name="todos"]{
    --spa-color:#7048ee!important;
    --spa-icon-url:url("../icons/spa-selector/all-spas.svg")!important;
}


/* ==========================================================
   v22.5.5 - Selector Spa FINAL limpio y corregido
   Corrige iconos, barras, colores, activo y hover.
   ========================================================== */

:root{
    --spa-all:#6f4cf6;
    --spa-makai:#17a861;
    --spa-sahara:#ea650f;
    --spa-kiwi:#9b6515;
    --spa-esbell:#8a42c1;
}

/* Layout */
.spa-chips,
#spaChips,
.spa-selector,
.spa-tabs{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(160px,1fr))!important;
    gap:14px!important;
    align-items:stretch!important;
    margin:14px 0 18px!important;
    padding:0!important;
}

/* Reset total del botón */
.spa-chip,
#spaChips button,
.spa-chips button,
.spa-selector button,
.spa-tabs button,
button[data-spa]{
    --spa-color:var(--spa-all);
    --spa-bg:rgba(111,76,246,.055);
    --spa-border:rgba(111,76,246,.32);
    --spa-icon-url:url("../icons/spa-selector/all-spas.svg");

    position:relative!important;
    isolation:isolate!important;
    overflow:hidden!important;
    width:100%!important;
    min-width:0!important;
    height:74px!important;
    min-height:74px!important;
    padding:0 54px 0 104px!important;
    border-radius:16px!important;
    border:1.5px solid var(--spa-border)!important;
    background:var(--spa-bg)!important;
    background-image:none!important;
    color:#0f172a!important;
    text-align:left!important;
    font-size:17px!important;
    font-weight:950!important;
    line-height:1!important;
    display:flex!important;
    flex-direction:row!important;
    justify-content:flex-start!important;
    align-items:center!important;
    gap:0!important;
    cursor:pointer!important;
    box-shadow:0 10px 24px rgba(15,23,42,.06)!important;
    text-shadow:none!important;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease!important;
}

/* Icon circle */
.spa-chip::before,
#spaChips button::before,
.spa-chips button::before,
.spa-selector button::before,
.spa-tabs button::before,
button[data-spa]::before{
    content:""!important;
    position:absolute!important;
    left:28px!important;
    top:50%!important;
    width:52px!important;
    height:52px!important;
    transform:translateY(-50%)!important;
    border-radius:999px!important;
    background:linear-gradient(135deg, color-mix(in srgb, var(--spa-color) 94%, #fff), color-mix(in srgb, var(--spa-color) 76%, #000))!important;
    box-shadow:0 12px 24px color-mix(in srgb, var(--spa-color) 20%, transparent)!important;
    z-index:1!important;
}

/* SVG icon */
.spa-chip::after,
#spaChips button::after,
.spa-chips button::after,
.spa-selector button::after,
.spa-tabs button::after,
button[data-spa]::after{
    content:""!important;
    position:absolute!important;
    left:42px!important;
    top:50%!important;
    width:24px!important;
    height:24px!important;
    transform:translateY(-50%)!important;
    z-index:2!important;
    background:#fff!important;
    mask:var(--spa-icon-url) center / contain no-repeat!important;
    -webkit-mask:var(--spa-icon-url) center / contain no-repeat!important;
}

/* Remove subtitle completely */
.spa-selector-subtitle{
    display:none!important;
}

/* Bottom line corrected: always bottom and no overlap with text */
.spa-selector-line{
    position:absolute!important;
    left:104px!important;
    right:58px!important;
    bottom:0!important;
    width:auto!important;
    height:4px!important;
    border-radius:999px 999px 0 0!important;
    background:var(--spa-color)!important;
    opacity:.82!important;
    pointer-events:none!important;
}

/* Arrow corrected */
.spa-selector-arrow{
    position:absolute!important;
    right:24px!important;
    top:50%!important;
    width:20px!important;
    height:20px!important;
    transform:translateY(-50%)!important;
    color:var(--spa-color)!important;
    z-index:3!important;
    display:block!important;
}

.spa-selector-arrow::before{
    content:""!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    background:currentColor!important;
    mask:url("../icons/spa-selector/arrow-right.svg") center / contain no-repeat!important;
    -webkit-mask:url("../icons/spa-selector/arrow-right.svg") center / contain no-repeat!important;
}

/* Check corrected */
.spa-selector-check{
    position:absolute!important;
    right:18px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    width:28px!important;
    height:28px!important;
    border-radius:999px!important;
    display:none!important;
    place-items:center!important;
    background:#fff!important;
    color:var(--spa-color)!important;
    font-size:16px!important;
    font-weight:950!important;
    box-shadow:0 8px 18px rgba(15,23,42,.12)!important;
    z-index:4!important;
}

/* Active check */
.spa-chip.active .spa-selector-check,
.spa-chip.is-active .spa-selector-check,
#spaChips button.active .spa-selector-check,
#spaChips button.is-active .spa-selector-check,
.spa-chips button.active .spa-selector-check,
.spa-chips button.is-active .spa-selector-check,
.spa-selector button.active .spa-selector-check,
.spa-selector button.is-active .spa-selector-check,
.spa-tabs button.active .spa-selector-check,
.spa-tabs button.is-active .spa-selector-check,
button[data-spa].active .spa-selector-check,
button[data-spa].is-active .spa-selector-check{
    display:grid!important;
}

.spa-chip.active .spa-selector-arrow,
.spa-chip.is-active .spa-selector-arrow,
#spaChips button.active .spa-selector-arrow,
#spaChips button.is-active .spa-selector-arrow,
.spa-chips button.active .spa-selector-arrow,
.spa-chips button.is-active .spa-selector-arrow,
.spa-selector button.active .spa-selector-arrow,
.spa-selector button.is-active .spa-selector-arrow,
.spa-tabs button.active .spa-selector-arrow,
.spa-tabs button.is-active .spa-selector-arrow,
button[data-spa].active .spa-selector-arrow,
button[data-spa].is-active .spa-selector-arrow{
    display:none!important;
}

/* Hover */
.spa-chip:hover,
#spaChips button:hover,
.spa-chips button:hover,
.spa-selector button:hover,
.spa-tabs button:hover,
button[data-spa]:hover{
    transform:translateY(-2px)!important;
    border-color:var(--spa-color)!important;
    background:color-mix(in srgb, var(--spa-color) 8%, #ffffff)!important;
    box-shadow:0 18px 40px color-mix(in srgb, var(--spa-color) 16%, transparent)!important;
}

/* Active */
.spa-chip.active,
.spa-chip.is-active,
#spaChips button.active,
#spaChips button.is-active,
.spa-chips button.active,
.spa-chips button.is-active,
.spa-selector button.active,
.spa-selector button.is-active,
.spa-tabs button.active,
.spa-tabs button.is-active,
button[data-spa].active,
button[data-spa].is-active{
    border-color:var(--spa-color)!important;
    background:color-mix(in srgb, var(--spa-color) 10%, #ffffff)!important;
    box-shadow:
        0 18px 42px color-mix(in srgb, var(--spa-color) 17%, transparent),
        0 0 0 3px color-mix(in srgb, var(--spa-color) 12%, transparent)!important;
}

/* Per-spa theme */
.spa-selector-todos,
[data-spa-name="todos"]{
    --spa-color:var(--spa-all)!important;
    --spa-bg:rgba(111,76,246,.065)!important;
    --spa-border:rgba(111,76,246,.35)!important;
    --spa-icon-url:url("../icons/spa-selector/all-spas.svg")!important;
}

.spa-selector-makai,
[data-spa-name="makai"]{
    --spa-color:var(--spa-makai)!important;
    --spa-bg:rgba(23,168,97,.055)!important;
    --spa-border:rgba(23,168,97,.35)!important;
    --spa-icon-url:url("../icons/spa-selector/palm.svg")!important;
}

.spa-selector-sahara,
[data-spa-name="sahara"]{
    --spa-color:var(--spa-sahara)!important;
    --spa-bg:rgba(234,101,15,.055)!important;
    --spa-border:rgba(234,101,15,.38)!important;
    --spa-icon-url:url("../icons/spa-selector/arabic-lamp.svg")!important;
}

.spa-selector-kiwi,
[data-spa-name="kiwi"]{
    --spa-color:var(--spa-kiwi)!important;
    --spa-bg:rgba(155,101,21,.055)!important;
    --spa-border:rgba(155,101,21,.34)!important;
    --spa-icon-url:url("../icons/spa-selector/kiwi.svg")!important;
}

.spa-selector-esbell,
[data-spa-name="esbell"]{
    --spa-color:var(--spa-esbell)!important;
    --spa-bg:rgba(138,66,193,.055)!important;
    --spa-border:rgba(138,66,193,.34)!important;
    --spa-icon-url:url("../icons/spa-selector/flower.svg")!important;
}

/* Strong text cleanup */
.spa-chip *,
#spaChips button *,
.spa-chips button *,
.spa-selector button *,
.spa-tabs button *,
button[data-spa] *{
    text-shadow:none!important;
}

/* Responsive */
@media(max-width:1180px){
    .spa-chips,
    #spaChips,
    .spa-selector,
    .spa-tabs{
        grid-template-columns:repeat(2,minmax(180px,1fr))!important;
    }
}

@media(max-width:640px){
    .spa-chips,
    #spaChips,
    .spa-selector,
    .spa-tabs{
        grid-template-columns:1fr!important;
    }

    .spa-chip,
    #spaChips button,
    .spa-chips button,
    .spa-selector button,
    .spa-tabs button,
    button[data-spa]{
        height:70px!important;
        min-height:70px!important;
        padding-left:94px!important;
    }

    .spa-chip::before,
    #spaChips button::before,
    .spa-chips button::before,
    .spa-selector button::before,
    .spa-tabs button::before,
    button[data-spa]::before{
        left:24px!important;
        width:48px!important;
        height:48px!important;
    }

    .spa-chip::after,
    #spaChips button::after,
    .spa-chips button::after,
    .spa-selector button::after,
    .spa-tabs button::after,
    button[data-spa]::after{
        left:36px!important;
        width:23px!important;
        height:23px!important;
    }

    .spa-selector-line{
        left:94px!important;
    }
}


/* ==========================================================
   v22.5.6 - Selector Spa PREMIUM rebuild
   Componente final limpio: iconos grandes, círculo fuerte,
   barra inferior correcta por color y estados premium.
   ========================================================== */

:root{
    --spa-all:#6366F1;
    --spa-makai:#16A34A;
    --spa-sahara:#F97316;
    --spa-kiwi:#B7791F;
    --spa-esbell:#8B5CF6;
}

.spa-chips,
#spaChips,
.spa-selector,
.spa-tabs{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(175px,1fr))!important;
    gap:16px!important;
    align-items:stretch!important;
    margin:16px 0 20px!important;
    padding:0!important;
}

/* Botón base premium */
.spa-chip,
#spaChips button,
.spa-chips button,
.spa-selector button,
.spa-tabs button,
button[data-spa]{
    --spa-color:var(--spa-all);
    --spa-bg:rgba(99,102,241,.055);
    --spa-border:rgba(99,102,241,.32);
    --spa-icon-url:url("../icons/spa-selector/all-spas.svg");

    position:relative!important;
    isolation:isolate!important;
    overflow:hidden!important;
    width:100%!important;
    min-width:0!important;
    height:90px!important;
    min-height:90px!important;
    padding:0 58px 0 118px!important;
    border-radius:18px!important;
    border:1.5px solid var(--spa-border)!important;
    background:linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--spa-color) 5%, #fff) 100%)!important;
    background-image:none!important;
    color:#0f172a!important;
    text-align:left!important;
    font-size:18px!important;
    font-weight:950!important;
    letter-spacing:-.015em!important;
    line-height:1!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    cursor:pointer!important;
    box-shadow:0 12px 26px rgba(15,23,42,.07)!important;
    text-shadow:none!important;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease,
        background .18s ease!important;
}

/* Círculo contenedor del icono: más grande y con más contraste */
.spa-chip::before,
#spaChips button::before,
.spa-chips button::before,
.spa-selector button::before,
.spa-tabs button::before,
button[data-spa]::before{
    content:""!important;
    position:absolute!important;
    left:28px!important;
    top:50%!important;
    width:68px!important;
    height:68px!important;
    transform:translateY(-50%)!important;
    border-radius:999px!important;
    background:
        radial-gradient(circle at 30% 24%, rgba(255,255,255,.45), transparent 24%),
        linear-gradient(135deg, color-mix(in srgb, var(--spa-color) 96%, #fff), color-mix(in srgb, var(--spa-color) 72%, #000))!important;
    box-shadow:
        0 16px 32px color-mix(in srgb, var(--spa-color) 28%, transparent),
        0 0 0 7px color-mix(in srgb, var(--spa-color) 10%, transparent),
        inset 0 1px 0 rgba(255,255,255,.38)!important;
    z-index:1!important;
    transition:transform .18s ease, box-shadow .18s ease!important;
}

/* Icono SVG: más grande y perfectamente centrado */
.spa-chip::after,
#spaChips button::after,
.spa-chips button::after,
.spa-selector button::after,
.spa-tabs button::after,
button[data-spa]::after{
    content:""!important;
    position:absolute!important;
    left:45px!important;
    top:50%!important;
    width:34px!important;
    height:34px!important;
    transform:translateY(-50%)!important;
    z-index:2!important;
    background:#fff!important;
    mask:var(--spa-icon-url) center / contain no-repeat!important;
    -webkit-mask:var(--spa-icon-url) center / contain no-repeat!important;
    pointer-events:none!important;
}

/* Sin subtítulos */
.spa-selector-subtitle{
    display:none!important;
}

/* Barra inferior: color del spa, más ancha, más visible y bien ubicada */
.spa-selector-line{
    position:absolute!important;
    left:118px!important;
    right:58px!important;
    bottom:13px!important;
    width:auto!important;
    height:6px!important;
    border-radius:999px!important;
    background:var(--spa-color)!important;
    opacity:.96!important;
    box-shadow:0 6px 16px color-mix(in srgb, var(--spa-color) 25%, transparent)!important;
    pointer-events:none!important;
    transition:right .18s ease, opacity .18s ease, transform .18s ease!important;
}

/* Flecha */
.spa-selector-arrow{
    position:absolute!important;
    right:24px!important;
    top:50%!important;
    width:22px!important;
    height:22px!important;
    transform:translateY(-50%)!important;
    color:#0f172a!important;
    opacity:.9!important;
    z-index:3!important;
    display:block!important;
    transition:transform .18s ease, color .18s ease, opacity .18s ease!important;
}

.spa-selector-arrow::before{
    content:""!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    background:currentColor!important;
    mask:url("../icons/spa-selector/arrow-right.svg") center / contain no-repeat!important;
    -webkit-mask:url("../icons/spa-selector/arrow-right.svg") center / contain no-repeat!important;
}

/* Check activo */
.spa-selector-check{
    position:absolute!important;
    right:18px!important;
    top:18px!important;
    transform:none!important;
    width:30px!important;
    height:30px!important;
    border-radius:999px!important;
    display:none!important;
    place-items:center!important;
    background:#fff!important;
    color:var(--spa-color)!important;
    font-size:17px!important;
    font-weight:950!important;
    box-shadow:
        0 10px 22px rgba(15,23,42,.13),
        0 0 0 4px color-mix(in srgb, var(--spa-color) 10%, transparent)!important;
    z-index:4!important;
}

/* Activo */
.spa-chip.active,
.spa-chip.is-active,
#spaChips button.active,
#spaChips button.is-active,
.spa-chips button.active,
.spa-chips button.is-active,
.spa-selector button.active,
.spa-selector button.is-active,
.spa-tabs button.active,
.spa-tabs button.is-active,
button[data-spa].active,
button[data-spa].is-active{
    border:2px solid var(--spa-color)!important;
    background:linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--spa-color) 9%, #fff) 100%)!important;
    box-shadow:
        0 18px 44px color-mix(in srgb, var(--spa-color) 19%, transparent),
        0 0 0 4px color-mix(in srgb, var(--spa-color) 13%, transparent)!important;
}

.spa-chip.active .spa-selector-check,
.spa-chip.is-active .spa-selector-check,
#spaChips button.active .spa-selector-check,
#spaChips button.is-active .spa-selector-check,
.spa-chips button.active .spa-selector-check,
.spa-chips button.is-active .spa-selector-check,
.spa-selector button.active .spa-selector-check,
.spa-selector button.is-active .spa-selector-check,
.spa-tabs button.active .spa-selector-check,
.spa-tabs button.is-active .spa-selector-check,
button[data-spa].active .spa-selector-check,
button[data-spa].is-active .spa-selector-check{
    display:grid!important;
}

.spa-chip.active .spa-selector-arrow,
.spa-chip.is-active .spa-selector-arrow,
#spaChips button.active .spa-selector-arrow,
#spaChips button.is-active .spa-selector-arrow,
.spa-chips button.active .spa-selector-arrow,
.spa-chips button.is-active .spa-selector-arrow,
.spa-selector button.active .spa-selector-arrow,
.spa-selector button.is-active .spa-selector-arrow,
.spa-tabs button.active .spa-selector-arrow,
.spa-tabs button.is-active .spa-selector-arrow,
button[data-spa].active .spa-selector-arrow,
button[data-spa].is-active .spa-selector-arrow{
    opacity:0!important;
}

/* Hover premium */
.spa-chip:hover,
#spaChips button:hover,
.spa-chips button:hover,
.spa-selector button:hover,
.spa-tabs button:hover,
button[data-spa]:hover{
    transform:translateY(-3px)!important;
    border-color:var(--spa-color)!important;
    background:linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--spa-color) 8%, #fff) 100%)!important;
    box-shadow:0 20px 46px color-mix(in srgb, var(--spa-color) 18%, transparent)!important;
}

.spa-chip:hover::before,
#spaChips button:hover::before,
.spa-chips button:hover::before,
.spa-selector button:hover::before,
.spa-tabs button:hover::before,
button[data-spa]:hover::before{
    transform:translateY(-50%) scale(1.045)!important;
}

.spa-chip:hover .spa-selector-arrow,
#spaChips button:hover .spa-selector-arrow,
.spa-chips button:hover .spa-selector-arrow,
.spa-selector button:hover .spa-selector-arrow,
.spa-tabs button:hover .spa-selector-arrow,
button[data-spa]:hover .spa-selector-arrow{
    color:var(--spa-color)!important;
    transform:translate(4px,-50%)!important;
}

/* Temas por spa */
.spa-selector-todos,
[data-spa-name="todos"]{
    --spa-color:var(--spa-all)!important;
    --spa-bg:rgba(99,102,241,.055)!important;
    --spa-border:rgba(99,102,241,.32)!important;
    --spa-icon-url:url("../icons/spa-selector/all-spas.svg")!important;
}

.spa-selector-makai,
[data-spa-name="makai"]{
    --spa-color:var(--spa-makai)!important;
    --spa-bg:rgba(22,163,74,.055)!important;
    --spa-border:rgba(22,163,74,.32)!important;
    --spa-icon-url:url("../icons/spa-selector/palm.svg")!important;
}

.spa-selector-sahara,
[data-spa-name="sahara"]{
    --spa-color:var(--spa-sahara)!important;
    --spa-bg:rgba(249,115,22,.055)!important;
    --spa-border:rgba(249,115,22,.36)!important;
    --spa-icon-url:url("../icons/spa-selector/arabic-lamp.svg")!important;
}

.spa-selector-kiwi,
[data-spa-name="kiwi"]{
    --spa-color:var(--spa-kiwi)!important;
    --spa-bg:rgba(183,121,31,.055)!important;
    --spa-border:rgba(183,121,31,.34)!important;
    --spa-icon-url:url("../icons/spa-selector/kiwi.svg")!important;
}

.spa-selector-esbell,
[data-spa-name="esbell"]{
    --spa-color:var(--spa-esbell)!important;
    --spa-bg:rgba(139,92,246,.055)!important;
    --spa-border:rgba(139,92,246,.34)!important;
    --spa-icon-url:url("../icons/spa-selector/flower.svg")!important;
}

.spa-chip *,
#spaChips button *,
.spa-chips button *,
.spa-selector button *,
.spa-tabs button *,
button[data-spa] *{
    text-shadow:none!important;
}

/* Responsive */
@media(max-width:1180px){
    .spa-chips,
    #spaChips,
    .spa-selector,
    .spa-tabs{
        grid-template-columns:repeat(2,minmax(190px,1fr))!important;
    }
}

@media(max-width:640px){
    .spa-chips,
    #spaChips,
    .spa-selector,
    .spa-tabs{
        grid-template-columns:1fr!important;
    }

    .spa-chip,
    #spaChips button,
    .spa-chips button,
    .spa-selector button,
    .spa-tabs button,
    button[data-spa]{
        height:82px!important;
        min-height:82px!important;
        padding-left:108px!important;
    }

    .spa-chip::before,
    #spaChips button::before,
    .spa-chips button::before,
    .spa-selector button::before,
    .spa-tabs button::before,
    button[data-spa]::before{
        left:24px!important;
        width:62px!important;
        height:62px!important;
    }

    .spa-chip::after,
    #spaChips button::after,
    .spa-chips button::after,
    .spa-selector button::after,
    .spa-tabs button::after,
    button[data-spa]::after{
        left:39px!important;
        width:32px!important;
        height:32px!important;
    }

    .spa-selector-line{
        left:108px!important;
    }
}


/* ==========================================================
   v22.5.7 - Selector Spa DOM Rebuild Clean
   Solución definitiva: no usa ::before/::after anteriores.
   El botón conserva su lógica, pero la UI vive dentro de spans propios.
   ========================================================== */

:root{
    --sc-spa-all:#6C4CF1;
    --sc-spa-makai:#12A05A;
    --sc-spa-sahara:#EA650F;
    --sc-spa-kiwi:#A56A17;
    --sc-spa-esbell:#8547C9;
}

/* Layout limpio */
.spa-chips,
#spaChips,
.spa-selector,
.spa-tabs{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(160px,1fr))!important;
    gap:14px!important;
    width:100%!important;
    margin:14px 0 18px!important;
    padding:0!important;
    align-items:stretch!important;
}

/* Reset completo del botón visual */
button.sc-spa-card,
.spa-chip.sc-spa-card,
#spaChips button.sc-spa-card,
.spa-chips button.sc-spa-card,
.spa-selector button.sc-spa-card,
.spa-tabs button.sc-spa-card,
button[data-spa].sc-spa-card{
    --sc-spa-color:var(--sc-spa-all);
    --sc-spa-soft:rgba(108,76,241,.07);
    --sc-spa-border:rgba(108,76,241,.28);
    --sc-spa-icon:url("../icons/spa-selector/all-spas.svg");

    all:unset!important;
    box-sizing:border-box!important;
    position:relative!important;
    overflow:hidden!important;
    width:100%!important;
    height:78px!important;
    min-height:78px!important;
    border-radius:18px!important;
    border:1.5px solid var(--sc-spa-border)!important;
    background:#fff!important;
    color:#0f172a!important;
    cursor:pointer!important;
    display:grid!important;
    grid-template-columns:58px 1fr 22px!important;
    align-items:center!important;
    gap:16px!important;
    padding:10px 18px 10px 18px!important;
    box-shadow:0 10px 26px rgba(15,23,42,.055)!important;
    font-family:inherit!important;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease!important;
}

/* Anular pseudo-elementos viejos que estaban dañando la UI */
button.sc-spa-card::before,
button.sc-spa-card::after,
.spa-chip.sc-spa-card::before,
.spa-chip.sc-spa-card::after,
#spaChips button.sc-spa-card::before,
#spaChips button.sc-spa-card::after,
.spa-chips button.sc-spa-card::before,
.spa-chips button.sc-spa-card::after,
.spa-selector button.sc-spa-card::before,
.spa-selector button.sc-spa-card::after,
.spa-tabs button.sc-spa-card::before,
.spa-tabs button.sc-spa-card::after,
button[data-spa].sc-spa-card::before,
button[data-spa].sc-spa-card::after{
    content:none!important;
    display:none!important;
}

/* Fondo activo/hover sutil */
button.sc-spa-card:hover,
.spa-chip.sc-spa-card:hover,
#spaChips button.sc-spa-card:hover,
.spa-chips button.sc-spa-card:hover,
.spa-selector button.sc-spa-card:hover,
.spa-tabs button.sc-spa-card:hover,
button[data-spa].sc-spa-card:hover{
    transform:translateY(-2px)!important;
    border-color:var(--sc-spa-color)!important;
    background:linear-gradient(180deg,#fff 0%, var(--sc-spa-soft) 100%)!important;
    box-shadow:0 18px 38px color-mix(in srgb, var(--sc-spa-color) 15%, transparent)!important;
}

button.sc-spa-card.active,
button.sc-spa-card.is-active,
.spa-chip.sc-spa-card.active,
.spa-chip.sc-spa-card.is-active,
#spaChips button.sc-spa-card.active,
#spaChips button.sc-spa-card.is-active,
.spa-chips button.sc-spa-card.active,
.spa-chips button.sc-spa-card.is-active,
.spa-selector button.sc-spa-card.active,
.spa-selector button.sc-spa-card.is-active,
.spa-tabs button.sc-spa-card.active,
.spa-tabs button.sc-spa-card.is-active,
button[data-spa].sc-spa-card.active,
button[data-spa].sc-spa-card.is-active{
    border:2px solid var(--sc-spa-color)!important;
    background:linear-gradient(180deg,#fff 0%, var(--sc-spa-soft) 100%)!important;
    box-shadow:
        0 18px 42px color-mix(in srgb, var(--sc-spa-color) 16%, transparent),
        0 0 0 4px color-mix(in srgb, var(--sc-spa-color) 10%, transparent)!important;
}

/* Icono */
.sc-spa-card__icon{
    width:58px!important;
    height:58px!important;
    border-radius:999px!important;
    display:grid!important;
    place-items:center!important;
    background:
        radial-gradient(circle at 30% 24%, rgba(255,255,255,.38), transparent 24%),
        linear-gradient(135deg, color-mix(in srgb, var(--sc-spa-color) 95%, #fff), color-mix(in srgb, var(--sc-spa-color) 76%, #000))!important;
    box-shadow:
        0 12px 24px color-mix(in srgb, var(--sc-spa-color) 24%, transparent),
        0 0 0 6px color-mix(in srgb, var(--sc-spa-color) 9%, transparent)!important;
    flex:0 0 auto!important;
    transition:transform .18s ease!important;
}

button.sc-spa-card:hover .sc-spa-card__icon{
    transform:scale(1.04)!important;
}

.sc-spa-card__icon::before{
    content:""!important;
    display:block!important;
    width:32px!important;
    height:32px!important;
    background:#fff!important;
    mask:var(--sc-spa-icon) center / contain no-repeat!important;
    -webkit-mask:var(--sc-spa-icon) center / contain no-repeat!important;
}

/* Texto */
.sc-spa-card__content{
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    height:100%!important;
    position:relative!important;
}

.sc-spa-card__name{
    display:block!important;
    font-size:16px!important;
    line-height:1!important;
    font-weight:900!important;
    color:#0f172a!important;
    letter-spacing:-.01em!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
}

/* Barra debajo del nombre */
.sc-spa-card__line{
    position:absolute!important;
    left:0!important;
    bottom:13px!important;
    width:74px!important;
    height:5px!important;
    border-radius:999px!important;
    background:var(--sc-spa-color)!important;
    box-shadow:0 5px 14px color-mix(in srgb, var(--sc-spa-color) 24%, transparent)!important;
}

/* Flecha */
.sc-spa-card__arrow{
    width:22px!important;
    height:22px!important;
    display:block!important;
    background:#111827!important;
    mask:url("../icons/spa-selector/arrow-right.svg") center / contain no-repeat!important;
    -webkit-mask:url("../icons/spa-selector/arrow-right.svg") center / contain no-repeat!important;
    opacity:.88!important;
    transition:transform .18s ease, background .18s ease, opacity .18s ease!important;
}

button.sc-spa-card:hover .sc-spa-card__arrow{
    transform:translateX(4px)!important;
    background:var(--sc-spa-color)!important;
}

/* Check activo */
.sc-spa-card__check{
    position:absolute!important;
    right:14px!important;
    top:12px!important;
    width:28px!important;
    height:28px!important;
    border-radius:999px!important;
    background:#fff!important;
    color:var(--sc-spa-color)!important;
    display:none!important;
    place-items:center!important;
    font-weight:950!important;
    font-size:16px!important;
    box-shadow:0 10px 20px rgba(15,23,42,.14)!important;
}

button.sc-spa-card.active .sc-spa-card__check,
button.sc-spa-card.is-active .sc-spa-card__check,
.spa-chip.sc-spa-card.active .sc-spa-card__check,
.spa-chip.sc-spa-card.is-active .sc-spa-card__check{
    display:grid!important;
}

button.sc-spa-card.active .sc-spa-card__arrow,
button.sc-spa-card.is-active .sc-spa-card__arrow,
.spa-chip.sc-spa-card.active .sc-spa-card__arrow,
.spa-chip.sc-spa-card.is-active .sc-spa-card__arrow{
    opacity:0!important;
}

/* Temas por spa */
.sc-spa-card--todos{
    --sc-spa-color:var(--sc-spa-all)!important;
    --sc-spa-soft:rgba(108,76,241,.075)!important;
    --sc-spa-border:rgba(108,76,241,.30)!important;
    --sc-spa-icon:url("../icons/spa-selector/all-spas.svg")!important;
}

.sc-spa-card--makai{
    --sc-spa-color:var(--sc-spa-makai)!important;
    --sc-spa-soft:rgba(18,160,90,.075)!important;
    --sc-spa-border:rgba(18,160,90,.30)!important;
    --sc-spa-icon:url("../icons/spa-selector/palm.svg")!important;
}

.sc-spa-card--sahara{
    --sc-spa-color:var(--sc-spa-sahara)!important;
    --sc-spa-soft:rgba(234,101,15,.075)!important;
    --sc-spa-border:rgba(234,101,15,.34)!important;
    --sc-spa-icon:url("../icons/spa-selector/arabic-lamp.svg")!important;
}

.sc-spa-card--kiwi{
    --sc-spa-color:var(--sc-spa-kiwi)!important;
    --sc-spa-soft:rgba(165,106,23,.075)!important;
    --sc-spa-border:rgba(165,106,23,.30)!important;
    --sc-spa-icon:url("../icons/spa-selector/kiwi.svg")!important;
}

.sc-spa-card--esbell{
    --sc-spa-color:var(--sc-spa-esbell)!important;
    --sc-spa-soft:rgba(133,71,201,.075)!important;
    --sc-spa-border:rgba(133,71,201,.30)!important;
    --sc-spa-icon:url("../icons/spa-selector/flower.svg")!important;
}

/* Responsive */
@media(max-width:1180px){
    .spa-chips,
    #spaChips,
    .spa-selector,
    .spa-tabs{
        grid-template-columns:repeat(2,minmax(190px,1fr))!important;
    }
}

@media(max-width:640px){
    .spa-chips,
    #spaChips,
    .spa-selector,
    .spa-tabs{
        grid-template-columns:1fr!important;
    }

    button.sc-spa-card,
    .spa-chip.sc-spa-card,
    #spaChips button.sc-spa-card,
    .spa-chips button.sc-spa-card,
    .spa-selector button.sc-spa-card,
    .spa-tabs button.sc-spa-card,
    button[data-spa].sc-spa-card{
        height:74px!important;
        min-height:74px!important;
        grid-template-columns:52px 1fr 22px!important;
        gap:14px!important;
    }

    .sc-spa-card__icon{
        width:52px!important;
        height:52px!important;
    }

    .sc-spa-card__icon::before{
        width:29px!important;
        height:29px!important;
    }
}


/* ==========================================================
   v22.5.8 - Selector Spa Single Engine / No Flicker
   Desactiva conflictos visuales de versiones anteriores.
   ========================================================== */

:root{
    --sc-spa-all:#6C4CF1;
    --sc-spa-makai:#12A05A;
    --sc-spa-sahara:#EA650F;
    --sc-spa-kiwi:#A56A17;
    --sc-spa-esbell:#8547C9;
}

/* Evitar flash de contenido viejo mientras JS reconstruye */
.spa-chips:not(.sc-spa-ready) button,
#spaChips:not(.sc-spa-ready) button,
.spa-selector:not(.sc-spa-ready) button,
.spa-tabs:not(.sc-spa-ready) button{
    opacity:0!important;
}

/* Layout */
.spa-chips.sc-spa-ready,
#spaChips.sc-spa-ready,
.spa-selector.sc-spa-ready,
.spa-tabs.sc-spa-ready{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(160px,1fr))!important;
    gap:14px!important;
    width:100%!important;
    margin:14px 0 18px!important;
    padding:0!important;
    align-items:stretch!important;
}

/* Reset completo: solo versión final */
button.sc-spa-card,
.spa-chip.sc-spa-card,
#spaChips button.sc-spa-card,
.spa-chips button.sc-spa-card,
.spa-selector button.sc-spa-card,
.spa-tabs button.sc-spa-card,
button[data-spa].sc-spa-card{
    --sc-spa-color:var(--sc-spa-all);
    --sc-spa-soft:rgba(108,76,241,.07);
    --sc-spa-border:rgba(108,76,241,.28);
    --sc-spa-icon:url("../icons/spa-selector/all-spas.svg");

    all:unset!important;
    box-sizing:border-box!important;
    position:relative!important;
    overflow:hidden!important;
    width:100%!important;
    height:78px!important;
    min-height:78px!important;
    border-radius:18px!important;
    border:1.5px solid var(--sc-spa-border)!important;
    background:#fff!important;
    color:#0f172a!important;
    cursor:pointer!important;
    display:grid!important;
    grid-template-columns:58px 1fr 22px!important;
    align-items:center!important;
    gap:16px!important;
    padding:10px 18px!important;
    box-shadow:0 10px 26px rgba(15,23,42,.055)!important;
    font-family:inherit!important;
    opacity:1!important;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease!important;
}

button.sc-spa-card::before,
button.sc-spa-card::after,
.spa-chip.sc-spa-card::before,
.spa-chip.sc-spa-card::after,
#spaChips button.sc-spa-card::before,
#spaChips button.sc-spa-card::after,
.spa-chips button.sc-spa-card::before,
.spa-chips button.sc-spa-card::after,
.spa-selector button.sc-spa-card::before,
.spa-selector button.sc-spa-card::after,
.spa-tabs button.sc-spa-card::before,
.spa-tabs button.sc-spa-card::after,
button[data-spa].sc-spa-card::before,
button[data-spa].sc-spa-card::after{
    content:none!important;
    display:none!important;
}

/* Card hover/active */
button.sc-spa-card:hover,
.spa-chip.sc-spa-card:hover,
#spaChips button.sc-spa-card:hover,
.spa-chips button.sc-spa-card:hover,
.spa-selector button.sc-spa-card:hover,
.spa-tabs button.sc-spa-card:hover{
    transform:translateY(-2px)!important;
    border-color:var(--sc-spa-color)!important;
    background:linear-gradient(180deg,#fff 0%, var(--sc-spa-soft) 100%)!important;
    box-shadow:0 18px 38px color-mix(in srgb, var(--sc-spa-color) 15%, transparent)!important;
}

button.sc-spa-card.active,
button.sc-spa-card.is-active,
.spa-chip.sc-spa-card.active,
.spa-chip.sc-spa-card.is-active,
#spaChips button.sc-spa-card.active,
#spaChips button.sc-spa-card.is-active,
.spa-chips button.sc-spa-card.active,
.spa-chips button.sc-spa-card.is-active,
.spa-selector button.sc-spa-card.active,
.spa-selector button.sc-spa-card.is-active,
.spa-tabs button.sc-spa-card.active,
.spa-tabs button.sc-spa-card.is-active{
    border:2px solid var(--sc-spa-color)!important;
    background:linear-gradient(180deg,#fff 0%, var(--sc-spa-soft) 100%)!important;
    box-shadow:
        0 18px 42px color-mix(in srgb, var(--sc-spa-color) 16%, transparent),
        0 0 0 4px color-mix(in srgb, var(--sc-spa-color) 10%, transparent)!important;
}

/* Icon */
.sc-spa-card__icon{
    width:58px!important;
    height:58px!important;
    border-radius:999px!important;
    display:grid!important;
    place-items:center!important;
    background:
        radial-gradient(circle at 30% 24%, rgba(255,255,255,.38), transparent 24%),
        linear-gradient(135deg, color-mix(in srgb, var(--sc-spa-color) 95%, #fff), color-mix(in srgb, var(--sc-spa-color) 76%, #000))!important;
    box-shadow:
        0 12px 24px color-mix(in srgb, var(--sc-spa-color) 24%, transparent),
        0 0 0 6px color-mix(in srgb, var(--sc-spa-color) 9%, transparent)!important;
    transition:transform .18s ease!important;
}

.sc-spa-card:hover .sc-spa-card__icon{
    transform:scale(1.04)!important;
}

.sc-spa-card__icon::before{
    content:""!important;
    display:block!important;
    width:34px!important;
    height:34px!important;
    background:#fff!important;
    mask:var(--sc-spa-icon) center / contain no-repeat!important;
    -webkit-mask:var(--sc-spa-icon) center / contain no-repeat!important;
}

/* Content */
.sc-spa-card__content{
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    height:100%!important;
    position:relative!important;
}

.sc-spa-card__name{
    font-size:16px!important;
    line-height:1!important;
    font-weight:900!important;
    color:#0f172a!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
}

/* Line */
.sc-spa-card__line{
    position:absolute!important;
    left:0!important;
    bottom:12px!important;
    width:82px!important;
    height:5px!important;
    border-radius:999px!important;
    background:var(--sc-spa-color)!important;
    box-shadow:0 5px 14px color-mix(in srgb, var(--sc-spa-color) 24%, transparent)!important;
}

/* Arrow */
.sc-spa-card__arrow{
    width:22px!important;
    height:22px!important;
    display:block!important;
    background:#111827!important;
    mask:url("../icons/spa-selector/arrow-right.svg") center / contain no-repeat!important;
    -webkit-mask:url("../icons/spa-selector/arrow-right.svg") center / contain no-repeat!important;
    opacity:.88!important;
    transition:transform .18s ease, background .18s ease, opacity .18s ease!important;
}

.sc-spa-card:hover .sc-spa-card__arrow{
    transform:translateX(4px)!important;
    background:var(--sc-spa-color)!important;
}

/* Check */
.sc-spa-card__check{
    position:absolute!important;
    right:14px!important;
    top:12px!important;
    width:28px!important;
    height:28px!important;
    border-radius:999px!important;
    background:#fff!important;
    color:var(--sc-spa-color)!important;
    display:none!important;
    place-items:center!important;
    font-weight:950!important;
    font-size:16px!important;
    box-shadow:0 10px 20px rgba(15,23,42,.14)!important;
}

.sc-spa-card.active .sc-spa-card__check,
.sc-spa-card.is-active .sc-spa-card__check{
    display:grid!important;
}

.sc-spa-card.active .sc-spa-card__arrow,
.sc-spa-card.is-active .sc-spa-card__arrow{
    opacity:0!important;
}

/* Themes */
.sc-spa-card--todos{
    --sc-spa-color:var(--sc-spa-all)!important;
    --sc-spa-soft:rgba(108,76,241,.075)!important;
    --sc-spa-border:rgba(108,76,241,.30)!important;
    --sc-spa-icon:url("../icons/spa-selector/all-spas.svg")!important;
}

.sc-spa-card--makai{
    --sc-spa-color:var(--sc-spa-makai)!important;
    --sc-spa-soft:rgba(18,160,90,.075)!important;
    --sc-spa-border:rgba(18,160,90,.30)!important;
    --sc-spa-icon:url("../icons/spa-selector/palm.svg")!important;
}

.sc-spa-card--sahara{
    --sc-spa-color:var(--sc-spa-sahara)!important;
    --sc-spa-soft:rgba(234,101,15,.075)!important;
    --sc-spa-border:rgba(234,101,15,.34)!important;
    --sc-spa-icon:url("../icons/spa-selector/arabic-lamp.svg")!important;
}

.sc-spa-card--kiwi{
    --sc-spa-color:var(--sc-spa-kiwi)!important;
    --sc-spa-soft:rgba(165,106,23,.075)!important;
    --sc-spa-border:rgba(165,106,23,.30)!important;
    --sc-spa-icon:url("../icons/spa-selector/kiwi.svg")!important;
}

.sc-spa-card--esbell{
    --sc-spa-color:var(--sc-spa-esbell)!important;
    --sc-spa-soft:rgba(133,71,201,.075)!important;
    --sc-spa-border:rgba(133,71,201,.30)!important;
    --sc-spa-icon:url("../icons/spa-selector/flower.svg")!important;
}

@media(max-width:1180px){
    .spa-chips.sc-spa-ready,
    #spaChips.sc-spa-ready,
    .spa-selector.sc-spa-ready,
    .spa-tabs.sc-spa-ready{
        grid-template-columns:repeat(2,minmax(190px,1fr))!important;
    }
}

@media(max-width:640px){
    .spa-chips.sc-spa-ready,
    #spaChips.sc-spa-ready,
    .spa-selector.sc-spa-ready,
    .spa-tabs.sc-spa-ready{
        grid-template-columns:1fr!important;
    }
}


/* ==========================================================
   v22.5.9 - Sidebar + selector check + Nómina integrada
   ========================================================== */

/* Selector Spa: check con color del Spa */
.sc-spa-card__check{
    background:var(--sc-spa-color)!important;
    color:#ffffff!important;
    border:2px solid #ffffff!important;
    box-shadow:
        0 10px 22px color-mix(in srgb, var(--sc-spa-color) 32%, transparent),
        0 0 0 4px color-mix(in srgb, var(--sc-spa-color) 10%, transparent)!important;
    opacity:0!important;
    transform:scale(.74)!important;
    transition:opacity .18s ease, transform .18s ease!important;
}

.sc-spa-card.active .sc-spa-card__check,
.sc-spa-card.is-active .sc-spa-card__check{
    display:grid!important;
    opacity:1!important;
    transform:scale(1)!important;
}

/* Sidebar scrollbar minimalista */
.side-nav,
#sideNav,
aside.side-nav{
    scrollbar-width:thin!important;
    scrollbar-color:rgba(148,163,184,.42) transparent!important;
}

.side-nav::-webkit-scrollbar,
#sideNav::-webkit-scrollbar,
aside.side-nav::-webkit-scrollbar{
    width:8px!important;
}

.side-nav::-webkit-scrollbar-track,
#sideNav::-webkit-scrollbar-track,
aside.side-nav::-webkit-scrollbar-track{
    background:transparent!important;
}

.side-nav::-webkit-scrollbar-thumb,
#sideNav::-webkit-scrollbar-thumb,
aside.side-nav::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg, rgba(148,163,184,.28), rgba(148,163,184,.48))!important;
    border-radius:999px!important;
    border:2px solid rgba(15,23,42,.95)!important;
}

.side-nav::-webkit-scrollbar-thumb:hover,
#sideNav::-webkit-scrollbar-thumb:hover,
aside.side-nav::-webkit-scrollbar-thumb:hover{
    background:linear-gradient(180deg, rgba(167,139,250,.65), rgba(99,102,241,.58))!important;
}

/* Eliminar visualmente cualquier residuo de botón Treinta si viene de JS/cache */
button[id*="treinta" i],
a[id*="treinta" i],
button[class*="treinta" i],
a[class*="treinta" i]{
    display:none!important;
}

/* Menú lateral: quitar falso resaltado de featured-nav si no está activo */
.side-nav .nav.featured-nav:not(.active),
.side-nav .nav-link-direct.featured-nav:not(.active),
#sideNav .nav.featured-nav:not(.active),
#sideNav .nav-link-direct.featured-nav:not(.active){
    background:transparent!important;
    border-color:transparent!important;
    box-shadow:none!important;
    color:#e5e7eb!important;
}

/* Finanzas Master y Nómina Master no deben parecer activos */
.side-nav .nav[data-view="report"]:not(.active),
.side-nav .nav[data-view="payroll-control"]:not(.active),
.side-nav .nav-nomina-integrated:not(.active){
    background:transparent!important;
    border:1px solid transparent!important;
    box-shadow:none!important;
}

/* Hover general del nav, más limpio */
.side-nav .nav:not(.active):hover,
#sideNav .nav:not(.active):hover,
.side-nav .nav-link-direct:not(.active):hover,
#sideNav .nav-link-direct:not(.active):hover{
    background:rgba(255,255,255,.07)!important;
    border-color:rgba(255,255,255,.10)!important;
}

/* Agenda Master resaltada en morado sin marcarla como activa */
.side-nav .nav[data-view="agenda"]:not(.active),
#sideNav .nav[data-view="agenda"]:not(.active){
    position:relative!important;
    background:linear-gradient(90deg, rgba(124,58,237,.18), rgba(168,85,247,.06))!important;
    border:1px solid rgba(168,85,247,.20)!important;
    box-shadow:0 12px 28px rgba(124,58,237,.10)!important;
}

.side-nav .nav[data-view="agenda"]:not(.active)::after,
#sideNav .nav[data-view="agenda"]:not(.active)::after{
    content:""!important;
    position:absolute!important;
    left:18px!important;
    right:18px!important;
    bottom:0!important;
    height:3px!important;
    border-radius:999px 999px 0 0!important;
    background:linear-gradient(90deg,#7C3AED,#A855F7)!important;
    opacity:.9!important;
}

.side-nav .nav[data-view="agenda"]:not(.active) span,
#sideNav .nav[data-view="agenda"]:not(.active) span{
    filter:drop-shadow(0 0 8px rgba(168,85,247,.45))!important;
}

.side-nav .nav[data-view="agenda"]:hover,
#sideNav .nav[data-view="agenda"]:hover{
    background:linear-gradient(90deg, rgba(124,58,237,.28), rgba(168,85,247,.10))!important;
    border-color:rgba(168,85,247,.34)!important;
    box-shadow:0 16px 34px rgba(124,58,237,.18)!important;
}

/* Nómina Master integrada dentro del sistema */
#view-payroll-control{
    padding:0!important;
}

#view-payroll-control .payroll-clean-frame{
    width:100%!important;
    min-height:calc(100vh - 130px)!important;
    height:calc(100vh - 130px)!important;
    border:0!important;
    border-radius:22px!important;
    background:#f6f8fc!important;
    box-shadow:0 14px 34px rgba(15,23,42,.08)!important;
}

/* Cuando se vea Nómina, el iframe se siente como módulo interno */
body.sc-view-payroll-control .topbar .breadcrumb,
body.sc-view-payroll-control .topbar h1{
    display:none!important;
}


/* ==========================================================
   v22.6.0 - Sidebar/nav refinement + top filter cleanup
   ========================================================== */

/* Ocultar selector Spa redundante en la barra superior de fechas */
.sc-top-spa-filter-hidden,
.topbar .spa-filter-block,
.filters .spa-filter-block.sc-top-spa-filter-hidden{
    display:none!important;
}

/* Check de selector Spa: fondo color spa y chulo blanco bien contrastado */
.sc-spa-card__check{
    background:var(--sc-spa-color)!important;
    color:#fff!important;
    border:2px solid #fff!important;
    text-shadow:none!important;
    box-shadow:
        0 10px 22px color-mix(in srgb, var(--sc-spa-color) 34%, transparent),
        0 0 0 4px color-mix(in srgb, var(--sc-spa-color) 10%, transparent)!important;
}
.sc-spa-card__check::before{
    content:"✓"!important;
    color:#fff!important;
    font-weight:950!important;
}

/* Nuevo icono Sahara: duna/desierto */
.sc-spa-card--sahara{
    --sc-spa-icon:url("../icons/spa-selector/sahara-dune.svg")!important;
}

/* Sidebar: color y tipografía más premium */
.side-nav,
#sideNav,
aside.side-nav{
    background:
        radial-gradient(circle at 20% 0%, rgba(124,58,237,.16), transparent 28%),
        linear-gradient(180deg,#0d1426 0%,#080f1e 48%,#060b16 100%)!important;
    border-right:1px solid rgba(148,163,184,.16)!important;
    box-shadow:14px 0 34px rgba(15,23,42,.22)!important;
    font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif!important;
}

/* Brand más fino */
.side-nav .brand-block,
#sideNav .brand-block{
    padding-bottom:18px!important;
    border-bottom:1px solid rgba(148,163,184,.12)!important;
}

.side-nav .brand-text strong,
#sideNav .brand-text strong{
    letter-spacing:-.02em!important;
    font-weight:900!important;
}

.side-nav .brand-text span,
#sideNav .brand-text span{
    color:#9ca3af!important;
}

/* Grupos */
.side-nav .nav-group p,
#sideNav .nav-group p{
    color:#93a4c7!important;
    letter-spacing:.09em!important;
    font-size:11px!important;
    font-weight:900!important;
    margin:18px 0 8px!important;
}

/* Botones de menú */
.side-nav .nav,
#sideNav .nav,
.side-nav .nav-link-direct,
#sideNav .nav-link-direct{
    border-radius:14px!important;
    min-height:46px!important;
    font-size:15px!important;
    font-weight:850!important;
    letter-spacing:-.01em!important;
    color:#e8eefc!important;
    border:1px solid transparent!important;
    transition:transform .16s ease, background .16s ease, box-shadow .16s ease, border-color .16s ease!important;
}

.side-nav .nav b,
#sideNav .nav b,
.side-nav .nav-link-direct b,
#sideNav .nav-link-direct b{
    font-weight:900!important;
}

/* Hover general */
.side-nav .nav:not(.active):hover,
#sideNav .nav:not(.active):hover,
.side-nav .nav-link-direct:not(.active):hover,
#sideNav .nav-link-direct:not(.active):hover{
    transform:translateX(3px)!important;
    background:rgba(255,255,255,.075)!important;
    border-color:rgba(255,255,255,.11)!important;
    box-shadow:0 12px 26px rgba(0,0,0,.16)!important;
}

/* Agenda Master estilo Update Manager */
.side-nav .nav[data-view="agenda"],
#sideNav .nav[data-view="agenda"],
.side-nav .nav-agenda-pro,
#sideNav .nav-agenda-pro{
    background:linear-gradient(135deg,#6D5DF6 0%,#7C3AED 48%,#4C1D95 100%)!important;
    color:#ffffff!important;
    border:1px solid rgba(255,255,255,.12)!important;
    box-shadow:
        0 14px 30px rgba(124,58,237,.28),
        inset 0 1px 0 rgba(255,255,255,.18)!important;
}

.side-nav .nav[data-view="agenda"]:hover,
#sideNav .nav[data-view="agenda"]:hover,
.side-nav .nav-agenda-pro:hover,
#sideNav .nav-agenda-pro:hover,
.side-nav .nav[data-view="agenda"].active,
#sideNav .nav[data-view="agenda"].active{
    transform:translateX(4px) translateY(-1px)!important;
    background:linear-gradient(135deg,#7C3AED 0%,#A855F7 48%,#5B21B6 100%)!important;
    box-shadow:
        0 18px 38px rgba(168,85,247,.34),
        0 0 0 3px rgba(168,85,247,.12),
        inset 0 1px 0 rgba(255,255,255,.22)!important;
}

/* Caja POS: hover y activo más claro */
.side-nav .nav-pos-highlight,
#sideNav .nav-pos-highlight,
.side-nav .nav[data-view="pos"],
#sideNav .nav[data-view="pos"]{
    position:relative!important;
}

.side-nav .nav[data-view="pos"]:hover,
#sideNav .nav[data-view="pos"]:hover,
.side-nav .nav-pos-highlight:hover,
#sideNav .nav-pos-highlight:hover{
    transform:translateX(4px) translateY(-1px)!important;
    background:linear-gradient(135deg,#F59E0B 0%,#FBBF24 55%,#B45309 100%)!important;
    color:#111827!important;
    border-color:rgba(251,191,36,.65)!important;
    box-shadow:
        0 18px 34px rgba(245,158,11,.30),
        0 0 0 3px rgba(245,158,11,.10)!important;
}

.side-nav .nav[data-view="pos"].active,
#sideNav .nav[data-view="pos"].active,
.side-nav .nav-pos-highlight.active,
#sideNav .nav-pos-highlight.active{
    background:linear-gradient(135deg,#F59E0B 0%,#FBBF24 55%,#B45309 100%)!important;
    color:#111827!important;
    border-color:rgba(251,191,36,.70)!important;
    box-shadow:
        0 18px 34px rgba(245,158,11,.32),
        0 0 0 3px rgba(245,158,11,.12)!important;
}

/* Finanzas Master y Nómina Master normales si no están activos */
.side-nav .nav[data-view="report"]:not(.active),
#sideNav .nav[data-view="report"]:not(.active),
.side-nav .nav[data-view="payroll-control"]:not(.active),
#sideNav .nav[data-view="payroll-control"]:not(.active){
    background:transparent!important;
    border-color:transparent!important;
    box-shadow:none!important;
    color:#e8eefc!important;
}

/* Scrollbar aún más minimalista */
.side-nav::-webkit-scrollbar,
#sideNav::-webkit-scrollbar{
    width:7px!important;
}
.side-nav::-webkit-scrollbar-thumb,
#sideNav::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg, rgba(148,163,184,.20), rgba(148,163,184,.46))!important;
    border-radius:999px!important;
    border:2px solid #080f1e!important;
}
.side-nav::-webkit-scrollbar-thumb:hover,
#sideNav::-webkit-scrollbar-thumb:hover{
    background:linear-gradient(180deg, rgba(168,85,247,.62), rgba(99,102,241,.56))!important;
}

/* Botón salir con icono SVG y rojo pálido */
.side-nav .logout,
#sideNav .logout,
.sc-logout-pro{
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
    min-height:48px!important;
    padding:0 16px!important;
    margin:18px 8px 8px!important;
    border-radius:14px!important;
    color:#fff!important;
    text-decoration:none!important;
    font-weight:900!important;
    background:linear-gradient(135deg, rgba(248,113,113,.86), rgba(185,28,28,.78))!important;
    border:1px solid rgba(252,165,165,.35)!important;
    box-shadow:0 14px 30px rgba(185,28,28,.22)!important;
}

.sc-logout-icon{
    width:21px!important;
    height:21px!important;
    display:inline-block!important;
    background:#fff!important;
    mask:url("../icons/system/power.svg") center / contain no-repeat!important;
    -webkit-mask:url("../icons/system/power.svg") center / contain no-repeat!important;
}

.side-nav .logout:hover,
#sideNav .logout:hover,
.sc-logout-pro:hover{
    transform:translateY(-1px)!important;
    background:linear-gradient(135deg, rgba(252,165,165,.92), rgba(220,38,38,.86))!important;
    box-shadow:0 18px 38px rgba(220,38,38,.28)!important;
}

/* Ocultar cualquier Limpiar Treinta */
button[id*="treinta" i],
a[id*="treinta" i],
button[class*="treinta" i],
a[class*="treinta" i]{
    display:none!important;
}


/* ==========================================================
   v22.6.1 - Tipografía + Sidebar compacto + Check fix
   ========================================================== */

/* Tipografía más redondeada/profesional sin depender de archivos externos */
:root{
    --sc-font-rounded:"Nunito Sans","Aptos Rounded","Aptos","Inter","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
}

html,
body,
button,
input,
select,
textarea,
table,
.app-shell,
.workspace,
.panel,
.side-nav,
#sideNav{
    font-family:var(--sc-font-rounded)!important;
}

/* Mejor render de texto */
body{
    -webkit-font-smoothing:antialiased!important;
    -moz-osx-font-smoothing:grayscale!important;
    text-rendering:geometricPrecision!important;
}

/* Check duplicado: el JS escribe ✓ y el CSS también; dejamos solo CSS */
.sc-spa-card__check{
    font-size:0!important;
    line-height:1!important;
}

.sc-spa-card__check::before{
    content:"✓"!important;
    display:block!important;
    color:#fff!important;
    font-size:17px!important;
    line-height:1!important;
    font-weight:950!important;
}

/* Sidebar más compacto */
.side-nav,
#sideNav,
aside.side-nav{
    padding-top:14px!important;
    padding-bottom:12px!important;
}

.side-nav .brand-block,
#sideNav .brand-block{
    padding:0 14px 13px!important;
    margin-bottom:8px!important;
}

.side-nav .brand-text strong,
#sideNav .brand-text strong{
    font-size:15px!important;
    font-weight:900!important;
}

.side-nav .brand-text span,
#sideNav .brand-text span{
    font-size:11px!important;
}

.side-nav .nav-group,
#sideNav .nav-group{
    margin-bottom:8px!important;
}

.side-nav .nav-group p,
#sideNav .nav-group p{
    font-size:10.5px!important;
    letter-spacing:.08em!important;
    margin:12px 0 6px!important;
    padding-left:4px!important;
}

/* Menú lateral con menos espacio entre elementos */
.side-nav .nav,
#sideNav .nav,
.side-nav .nav-link-direct,
#sideNav .nav-link-direct{
    min-height:40px!important;
    height:40px!important;
    padding:0 13px!important;
    margin:3px 0!important;
    border-radius:12px!important;
    font-size:14.2px!important;
    line-height:1!important;
    gap:10px!important;
}

.side-nav .nav span,
#sideNav .nav span,
.side-nav .nav-link-direct span,
#sideNav .nav-link-direct span{
    width:21px!important;
    min-width:21px!important;
    font-size:14.5px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
}

.side-nav .nav b,
#sideNav .nav b,
.side-nav .nav-link-direct b,
#sideNav .nav-link-direct b{
    font-weight:900!important;
    letter-spacing:-.01em!important;
}

/* Hover más compacto */
.side-nav .nav:not(.active):hover,
#sideNav .nav:not(.active):hover,
.side-nav .nav-link-direct:not(.active):hover,
#sideNav .nav-link-direct:not(.active):hover{
    transform:translateX(2px)!important;
}

/* Agenda Master estilo Update Manager pero compacto */
.side-nav .nav[data-view="agenda"],
#sideNav .nav[data-view="agenda"],
.side-nav .nav-agenda-pro,
#sideNav .nav-agenda-pro{
    min-height:42px!important;
    height:42px!important;
    margin:4px 0!important;
    border-radius:13px!important;
}

/* Caja POS compacto */
.side-nav .nav[data-view="pos"],
#sideNav .nav[data-view="pos"],
.side-nav .nav-pos-highlight,
#sideNav .nav-pos-highlight{
    min-height:42px!important;
    height:42px!important;
    margin:4px 0!important;
    border-radius:13px!important;
}

/* Botón salir más integrado y compacto */
.side-nav .logout,
#sideNav .logout,
.sc-logout-pro{
    min-height:43px!important;
    height:43px!important;
    margin:13px 6px 6px!important;
    padding:0 14px!important;
    border-radius:13px!important;
    font-size:14.2px!important;
}

.sc-logout-icon{
    width:19px!important;
    height:19px!important;
}

/* Scrollbar lateral más delgada */
.side-nav::-webkit-scrollbar,
#sideNav::-webkit-scrollbar{
    width:6px!important;
}

.side-nav::-webkit-scrollbar-thumb,
#sideNav::-webkit-scrollbar-thumb{
    border-width:1.5px!important;
}