/* ==========================================================
   SpaMaster 360 v24.0 — Liquid Glass Design System
   Capa visual global segura: no cambia lógica ni estructura de datos.
   ========================================================== */

:root{
    --sc-glass-bg:rgba(255,255,255,.72);
    --sc-glass-bg-strong:rgba(255,255,255,.86);
    --sc-glass-bg-soft:rgba(255,255,255,.58);
    --sc-glass-border:rgba(148,163,184,.22);
    --sc-glass-border-light:rgba(255,255,255,.72);
    --sc-glass-shadow:0 18px 45px rgba(15,23,42,.085);
    --sc-glass-shadow-sm:0 10px 26px rgba(15,23,42,.065);
    --sc-glass-shadow-lg:0 28px 80px rgba(15,23,42,.16);
    --sc-glass-blur:18px;
    --sc-liquid-radius:24px;
    --sc-liquid-radius-sm:16px;
    --sc-liquid-radius-xs:12px;
    --sc-liquid-primary:#6C4CF1;
    --sc-liquid-success:#16A34A;
    --sc-liquid-danger:#EF4444;
    --sc-liquid-warning:#F59E0B;
    --sc-liquid-info:#2563EB;
}

/* Fondo general con profundidad suave */
body.sc-liquid-glass-v24,
.sc-liquid-glass-v24 body{
    background:
        radial-gradient(circle at 14% 0%, rgba(108,76,241,.08), transparent 28%),
        radial-gradient(circle at 92% 4%, rgba(14,165,233,.06), transparent 26%),
        linear-gradient(180deg,#F7F9FD 0%,#EEF3FA 100%)!important;
}

/* Glass base para paneles */
.sc-liquid-glass-v24 .panel,
.sc-liquid-glass-v24 .card,
.sc-liquid-glass-v24 .dashboard-card,
.sc-liquid-glass-v24 .report-metric,
.sc-liquid-glass-v24 .metric-card,
.sc-liquid-glass-v24 .kpi-card,
.sc-liquid-glass-v24 .stat-card,
.sc-liquid-glass-v24 .form-card,
.sc-liquid-glass-v24 .pos-panel,
.sc-liquid-glass-v24 .table-wrap,
.sc-liquid-glass-v24 .agenda-card,
.sc-liquid-glass-v24 .modal-content,
.sc-liquid-glass-v24 .sc-modal,
.sc-liquid-glass-v24 .agenda-modal{
    background:
        linear-gradient(135deg,rgba(255,255,255,.84),rgba(255,255,255,.62))!important;
    border:1px solid var(--sc-glass-border)!important;
    box-shadow:var(--sc-glass-shadow-sm)!important;
    backdrop-filter:blur(var(--sc-glass-blur)) saturate(1.18)!important;
    -webkit-backdrop-filter:blur(var(--sc-glass-blur)) saturate(1.18)!important;
}

/* Hover de cards */
.sc-liquid-glass-v24 .panel:hover,
.sc-liquid-glass-v24 .card:hover,
.sc-liquid-glass-v24 .dashboard-card:hover,
.sc-liquid-glass-v24 .report-metric:hover,
.sc-liquid-glass-v24 .metric-card:hover,
.sc-liquid-glass-v24 .kpi-card:hover,
.sc-liquid-glass-v24 .stat-card:hover{
    border-color:rgba(108,76,241,.20)!important;
    box-shadow:var(--sc-glass-shadow)!important;
}

/* Topbar glass */
.sc-liquid-glass-v24 .topbar{
    background:rgba(247,249,253,.64)!important;
    backdrop-filter:blur(22px) saturate(1.20)!important;
    -webkit-backdrop-filter:blur(22px) saturate(1.20)!important;
    border-bottom:1px solid rgba(148,163,184,.14)!important;
}

/* Inputs / selects / textarea liquid */
.sc-liquid-glass-v24 input,
.sc-liquid-glass-v24 select,
.sc-liquid-glass-v24 textarea,
.sc-liquid-glass-v24 .form-control{
    background:rgba(255,255,255,.72)!important;
    border:1px solid rgba(148,163,184,.26)!important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.75),
        0 8px 20px rgba(15,23,42,.035)!important;
    backdrop-filter:blur(14px) saturate(1.10)!important;
    -webkit-backdrop-filter:blur(14px) saturate(1.10)!important;
}

.sc-liquid-glass-v24 input:focus,
.sc-liquid-glass-v24 select:focus,
.sc-liquid-glass-v24 textarea:focus{
    background:rgba(255,255,255,.88)!important;
    border-color:rgba(108,76,241,.52)!important;
    box-shadow:
        0 0 0 4px rgba(108,76,241,.10),
        0 12px 28px rgba(108,76,241,.08)!important;
}

/* Botones liquid */
.sc-liquid-glass-v24 .btn,
.sc-liquid-glass-v24 button.btn,
.sc-liquid-glass-v24 button.primary,
.sc-liquid-glass-v24 .primary,
.sc-liquid-glass-v24 .primary-btn,
.sc-liquid-glass-v24 .btn-primary{
    border-radius:16px!important;
    box-shadow:
        0 12px 28px rgba(108,76,241,.16),
        inset 0 1px 0 rgba(255,255,255,.24)!important;
}

.sc-liquid-glass-v24 .btn.ghost,
.sc-liquid-glass-v24 .ghost,
.sc-liquid-glass-v24 .btn.secondary,
.sc-liquid-glass-v24 .secondary{
    background:rgba(255,255,255,.66)!important;
    border:1px solid rgba(148,163,184,.22)!important;
    box-shadow:
        0 10px 24px rgba(15,23,42,.045),
        inset 0 1px 0 rgba(255,255,255,.70)!important;
    backdrop-filter:blur(16px) saturate(1.10)!important;
    -webkit-backdrop-filter:blur(16px) saturate(1.10)!important;
}

.sc-liquid-glass-v24 .btn:hover,
.sc-liquid-glass-v24 button:hover{
    transform:translateY(-1px);
}

/* Selector de spa glass */
.sc-liquid-glass-v24 .sc-spa-card{
    background:
        radial-gradient(circle at 12% 20%, color-mix(in srgb,var(--sc-spa-color) 9%, transparent), transparent 40%),
        linear-gradient(135deg,rgba(255,255,255,.84),rgba(255,255,255,.58))!important;
    backdrop-filter:blur(18px) saturate(1.18)!important;
    -webkit-backdrop-filter:blur(18px) saturate(1.18)!important;
    box-shadow:
        0 16px 36px color-mix(in srgb,var(--sc-spa-color) 12%, transparent),
        inset 0 1px 0 rgba(255,255,255,.72)!important;
}

.sc-liquid-glass-v24 .sc-spa-card__icon{
    box-shadow:
        0 14px 30px color-mix(in srgb,var(--sc-spa-color) 24%, transparent),
        0 0 0 7px color-mix(in srgb,var(--sc-spa-color) 9%, transparent),
        inset 0 1px 0 rgba(255,255,255,.40)!important;
}

/* KPI generales estilo liquid */
.sc-liquid-glass-v24 .report-metric,
.sc-liquid-glass-v24 .metric-card,
.sc-liquid-glass-v24 .kpi-card,
.sc-liquid-glass-v24 .stat-card{
    position:relative!important;
    overflow:hidden!important;
}

.sc-liquid-glass-v24 .report-metric::before,
.sc-liquid-glass-v24 .metric-card::before,
.sc-liquid-glass-v24 .kpi-card::before,
.sc-liquid-glass-v24 .stat-card::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    pointer-events:none!important;
    background:
        radial-gradient(circle at 10% 10%, rgba(255,255,255,.72), transparent 22%),
        linear-gradient(135deg, rgba(255,255,255,.28), transparent 48%)!important;
}

/* POS KPI liquid glass */
.sc-liquid-glass-v24 .pos-kpi{
    border-radius:24px!important;
    background:
        radial-gradient(circle at 9% 18%, var(--pos-kpi-soft,rgba(100,116,139,.10)), transparent 34%),
        linear-gradient(135deg,rgba(255,255,255,.84) 0%, color-mix(in srgb, var(--pos-kpi-color,#64748b) 5%, rgba(255,255,255,.72)) 100%)!important;
    border:1px solid color-mix(in srgb, var(--pos-kpi-color,#64748b) 20%, rgba(255,255,255,.55))!important;
    box-shadow:
        0 20px 52px rgba(15,23,42,.105),
        inset 0 1px 0 rgba(255,255,255,.82)!important;
    backdrop-filter:blur(20px) saturate(1.22)!important;
    -webkit-backdrop-filter:blur(20px) saturate(1.22)!important;
}

.sc-liquid-glass-v24 .pos-kpi-icon{
    background:
        linear-gradient(135deg, color-mix(in srgb,var(--pos-kpi-color,#64748b) 14%, rgba(255,255,255,.92)), rgba(255,255,255,.50))!important;
    border:1px solid color-mix(in srgb,var(--pos-kpi-color,#64748b) 18%, rgba(255,255,255,.70))!important;
    box-shadow:
        0 14px 30px var(--pos-kpi-glow,rgba(100,116,139,.13)),
        inset 0 1px 0 rgba(255,255,255,.92)!important;
}

/* Tabs liquid */
.sc-liquid-glass-v24 .pos-tabs,
.sc-liquid-glass-v24 .tabs,
.sc-liquid-glass-v24 .tabbar{
    background:rgba(255,255,255,.58)!important;
    border:1px solid rgba(148,163,184,.18)!important;
    border-radius:18px!important;
    overflow:hidden!important;
    box-shadow:0 10px 26px rgba(15,23,42,.045)!important;
    backdrop-filter:blur(16px) saturate(1.12)!important;
    -webkit-backdrop-filter:blur(16px) saturate(1.12)!important;
}

.sc-liquid-glass-v24 .pos-tab,
.sc-liquid-glass-v24 .tab{
    background:transparent!important;
    border:0!important;
    transition:background .18s ease, color .18s ease, transform .18s ease!important;
}

.sc-liquid-glass-v24 .pos-tab.active,
.sc-liquid-glass-v24 .tab.active{
    background:
        linear-gradient(135deg,rgba(22,163,74,.92),rgba(21,128,61,.90))!important;
    color:#fff!important;
    box-shadow:0 10px 24px rgba(22,163,74,.18)!important;
}

/* Tables liquid */
.sc-liquid-glass-v24 .table-wrap{
    border-radius:22px!important;
    overflow:hidden!important;
}

.sc-liquid-glass-v24 table th{
    background:rgba(248,250,252,.74)!important;
    backdrop-filter:blur(12px)!important;
    -webkit-backdrop-filter:blur(12px)!important;
}

.sc-liquid-glass-v24 table tbody tr{
    transition:background .16s ease, transform .16s ease!important;
}

.sc-liquid-glass-v24 table tbody tr:hover{
    background:rgba(108,76,241,.035)!important;
}

/* Modals liquid */
.sc-liquid-glass-v24 .modal,
.sc-liquid-glass-v24 .modal-content,
.sc-liquid-glass-v24 .agenda-modal,
.sc-liquid-glass-v24 .sc-modal{
    background:
        linear-gradient(135deg,rgba(255,255,255,.90),rgba(255,255,255,.72))!important;
    border:1px solid rgba(255,255,255,.72)!important;
    box-shadow:var(--sc-glass-shadow-lg)!important;
    backdrop-filter:blur(24px) saturate(1.22)!important;
    -webkit-backdrop-filter:blur(24px) saturate(1.22)!important;
}

/* Toasts / alerts liquid */
.sc-liquid-glass-v24 .toast,
.sc-liquid-glass-v24 .notification,
.sc-liquid-glass-v24 .alert{
    background:rgba(255,255,255,.78)!important;
    border:1px solid rgba(148,163,184,.22)!important;
    box-shadow:0 18px 44px rgba(15,23,42,.12)!important;
    backdrop-filter:blur(18px) saturate(1.18)!important;
    -webkit-backdrop-filter:blur(18px) saturate(1.18)!important;
}

/* Badges */
.sc-liquid-glass-v24 .badge,
.sc-liquid-glass-v24 .pill,
.sc-liquid-glass-v24 .status-badge,
.sc-liquid-glass-v24 .tag{
    background:rgba(255,255,255,.68)!important;
    border:1px solid rgba(148,163,184,.18)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.72)!important;
}

/* Sidebar polish sobre enterprise */
.sc-liquid-glass-v24 .side-nav,
.sc-liquid-glass-v24 #sideNav,
.sc-liquid-glass-v24 .sidebar{
    box-shadow:
        16px 0 40px rgba(2,6,23,.24),
        inset -1px 0 0 rgba(255,255,255,.04)!important;
}

.sc-liquid-glass-v24 .side-nav .nav,
.sc-liquid-glass-v24 #sideNav .nav{
    backdrop-filter:blur(10px)!important;
    -webkit-backdrop-filter:blur(10px)!important;
}

/* Agenda cards / reservas */
.sc-liquid-glass-v24 .agenda-event,
.sc-liquid-glass-v24 .reservation-card,
.sc-liquid-glass-v24 .calendar-event{
    border-radius:14px!important;
    box-shadow:
        0 12px 28px rgba(15,23,42,.10),
        inset 0 1px 0 rgba(255,255,255,.35)!important;
    backdrop-filter:blur(8px) saturate(1.10)!important;
    -webkit-backdrop-filter:blur(8px) saturate(1.10)!important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
    .sc-liquid-glass-v24 *,
    .sc-liquid-glass-v24 *::before,
    .sc-liquid-glass-v24 *::after{
        transition:none!important;
        animation:none!important;
    }
}