/* SpaMaster 360 v47.33 - Liquid Glass 2.0 Design System
   Fase 3: sistema visual global no destructivo.
   Objetivo: unificar fondos, tarjetas, formularios, botones, tablas, KPIs,
   skeletons, notificaciones y animaciones sin reconstruir DOM.
*/
:root{
  --sm360-lg2-bg:#f5f6f8;
  --sm360-lg2-bg-2:#eef1f6;
  --sm360-lg2-surface:rgba(255,255,255,.78);
  --sm360-lg2-surface-strong:rgba(255,255,255,.92);
  --sm360-lg2-surface-soft:rgba(255,255,255,.62);
  --sm360-lg2-border:rgba(148,163,184,.24);
  --sm360-lg2-border-strong:rgba(124,58,237,.22);
  --sm360-lg2-purple:#6f4ef6;
  --sm360-lg2-purple-2:#7c3aed;
  --sm360-lg2-purple-soft:rgba(111,78,246,.10);
  --sm360-lg2-ink:#111827;
  --sm360-lg2-muted:#667085;
  --sm360-lg2-soft:#94a3b8;
  --sm360-lg2-success:#16a34a;
  --sm360-lg2-danger:#ef4444;
  --sm360-lg2-warning:#f59e0b;
  --sm360-lg2-info:#0ea5e9;
  --sm360-lg2-radius-xs:10px;
  --sm360-lg2-radius-sm:14px;
  --sm360-lg2-radius-md:18px;
  --sm360-lg2-radius-lg:24px;
  --sm360-lg2-radius-xl:30px;
  --sm360-lg2-shadow-sm:0 8px 22px rgba(15,23,42,.06);
  --sm360-lg2-shadow-md:0 18px 44px rgba(15,23,42,.09);
  --sm360-lg2-shadow-lg:0 30px 80px rgba(15,23,42,.14);
  --sm360-lg2-glow:0 18px 40px rgba(111,78,246,.16);
  --sm360-lg2-blur:18px;
  --sm360-lg2-blur-strong:24px;
  --sm360-lg2-ease:cubic-bezier(.2,.8,.2,1);
  --sm360-lg2-font:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html body.sm360-liquid-glass-2,
body.sm360-liquid-glass-2 .app-shell{
  background:
    radial-gradient(circle at 14% -8%, rgba(111,78,246,.065), transparent 34%),
    radial-gradient(circle at 88% 4%, rgba(124,58,237,.045), transparent 32%),
    linear-gradient(180deg,#f8fafc 0%, var(--sm360-lg2-bg) 42%, #eef1f6 100%) !important;
  color:var(--sm360-lg2-ink) !important;
  font-family:var(--sm360-lg2-font) !important;
}

body.sm360-liquid-glass-2 *,
body.sm360-liquid-glass-2 *::before,
body.sm360-liquid-glass-2 *::after{
  box-sizing:border-box;
}

/* Tipografía global */
body.sm360-liquid-glass-2 h1,
body.sm360-liquid-glass-2 h2,
body.sm360-liquid-glass-2 h3,
body.sm360-liquid-glass-2 h4{
  color:var(--sm360-lg2-ink) !important;
  letter-spacing:-.035em !important;
  line-height:1.08 !important;
}
body.sm360-liquid-glass-2 h1{font-size:clamp(24px,2vw,34px) !important;font-weight:850 !important;}
body.sm360-liquid-glass-2 h2{font-size:clamp(21px,1.6vw,28px) !important;font-weight:830 !important;}
body.sm360-liquid-glass-2 h3{font-size:20px !important;font-weight:820 !important;}
body.sm360-liquid-glass-2 p,
body.sm360-liquid-glass-2 small,
body.sm360-liquid-glass-2 .muted{color:var(--sm360-lg2-muted) !important;}

/* Superficies glass reutilizables */
body.sm360-liquid-glass-2 .sm360-glass,
body.sm360-liquid-glass-2 .sm360-card,
body.sm360-liquid-glass-2 .sm360-stat-card,
body.sm360-liquid-glass-2 .sm360-form-card,
body.sm360-liquid-glass-2 .sm360-table-card,
body.sm360-liquid-glass-2 .sm360-modal-card,
body.sm360-liquid-glass-2 .card,
body.sm360-liquid-glass-2 .panel,
body.sm360-liquid-glass-2 .pos-panel,
body.sm360-liquid-glass-2 .pos-kpi,
body.sm360-liquid-glass-2 .dashboard-card,
body.sm360-liquid-glass-2 .report-card,
body.sm360-liquid-glass-2 .inventory-card,
body.sm360-liquid-glass-2 .employee-card,
body.sm360-liquid-glass-2 .operation-card{
  background:linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,255,255,.62)) !important;
  border:1px solid var(--sm360-lg2-border) !important;
  border-radius:var(--sm360-lg2-radius-lg) !important;
  box-shadow:var(--sm360-lg2-shadow-sm), inset 0 1px 0 rgba(255,255,255,.86) !important;
  backdrop-filter:blur(var(--sm360-lg2-blur)) saturate(1.08) !important;
}

body.sm360-liquid-glass-2 .sm360-card:hover,
body.sm360-liquid-glass-2 .pos-kpi:hover,
body.sm360-liquid-glass-2 .dashboard-card:hover{
  transform:translateY(-1px);
  box-shadow:var(--sm360-lg2-shadow-md), inset 0 1px 0 rgba(255,255,255,.88) !important;
}

/* Botones */
body.sm360-liquid-glass-2 button,
body.sm360-liquid-glass-2 .btn,
body.sm360-liquid-glass-2 .sm360-btn{
  font-family:var(--sm360-lg2-font) !important;
  font-weight:780 !important;
  letter-spacing:-.015em !important;
  transition:transform .16s var(--sm360-lg2-ease), box-shadow .16s var(--sm360-lg2-ease), border-color .16s var(--sm360-lg2-ease), background .16s var(--sm360-lg2-ease) !important;
}
body.sm360-liquid-glass-2 button:not(:disabled):hover,
body.sm360-liquid-glass-2 .btn:not(:disabled):hover,
body.sm360-liquid-glass-2 .sm360-btn:not(:disabled):hover{transform:translateY(-1px);}
body.sm360-liquid-glass-2 button:disabled,
body.sm360-liquid-glass-2 .btn:disabled{opacity:.58 !important;cursor:not-allowed !important;}

body.sm360-liquid-glass-2 .btn.primary,
body.sm360-liquid-glass-2 .sm360-btn-primary,
body.sm360-liquid-glass-2 button[data-sm360-role="primary"]{
  background:linear-gradient(135deg,var(--sm360-lg2-purple),var(--sm360-lg2-purple-2)) !important;
  color:white !important;
  border:1px solid rgba(111,78,246,.30) !important;
  box-shadow:var(--sm360-lg2-glow), inset 0 1px 0 rgba(255,255,255,.26) !important;
}
body.sm360-liquid-glass-2 .btn.ghost,
body.sm360-liquid-glass-2 .sm360-btn-secondary,
body.sm360-liquid-glass-2 button[data-sm360-role="secondary"]{
  background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(248,250,252,.68)) !important;
  color:var(--sm360-lg2-ink) !important;
  border:1px solid var(--sm360-lg2-border) !important;
  box-shadow:var(--sm360-lg2-shadow-sm), inset 0 1px 0 rgba(255,255,255,.88) !important;
}
body.sm360-liquid-glass-2 .btn.danger,
body.sm360-liquid-glass-2 .sm360-btn-danger{
  background:linear-gradient(135deg,#ef4444,#fb7185) !important;
  color:white !important;
  border:1px solid rgba(239,68,68,.28) !important;
}
body.sm360-liquid-glass-2 .btn.success,
body.sm360-liquid-glass-2 .sm360-btn-success{
  background:linear-gradient(135deg,#16a34a,#22c55e) !important;
  color:white !important;
  border:1px solid rgba(22,163,74,.28) !important;
}

/* Inputs y formularios */
body.sm360-liquid-glass-2 input,
body.sm360-liquid-glass-2 select,
body.sm360-liquid-glass-2 textarea,
body.sm360-liquid-glass-2 .sm360-input{
  background:rgba(255,255,255,.84) !important;
  border:1px solid rgba(148,163,184,.28) !important;
  border-radius:16px !important;
  color:var(--sm360-lg2-ink) !important;
  font-family:var(--sm360-lg2-font) !important;
  font-weight:650 !important;
  outline:none !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.84), 0 8px 22px rgba(15,23,42,.035) !important;
  transition:border-color .16s var(--sm360-lg2-ease), box-shadow .16s var(--sm360-lg2-ease), background .16s var(--sm360-lg2-ease) !important;
}
body.sm360-liquid-glass-2 input:focus,
body.sm360-liquid-glass-2 select:focus,
body.sm360-liquid-glass-2 textarea:focus,
body.sm360-liquid-glass-2 .sm360-input:focus{
  border-color:rgba(111,78,246,.46) !important;
  box-shadow:0 0 0 4px rgba(111,78,246,.10), 0 12px 28px rgba(111,78,246,.07), inset 0 1px 0 rgba(255,255,255,.92) !important;
  background:rgba(255,255,255,.94) !important;
}
body.sm360-liquid-glass-2 label,
body.sm360-liquid-glass-2 .form-label,
body.sm360-liquid-glass-2 .sm360-label{
  color:#344054 !important;
  font-size:12px !important;
  text-transform:uppercase !important;
  letter-spacing:.055em !important;
  font-weight:850 !important;
}

/* Selectores/chips */
body.sm360-liquid-glass-2 .sm360-selector-chip,
body.sm360-liquid-glass-2 .chip,
body.sm360-liquid-glass-2 .category-chip,
body.sm360-liquid-glass-2 .filter-chip,
body.sm360-liquid-glass-2 .spa-chip{
  background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(248,250,252,.68)) !important;
  border:1px solid rgba(148,163,184,.24) !important;
  border-radius:20px !important;
  box-shadow:0 10px 26px rgba(15,23,42,.05), inset 0 1px 0 rgba(255,255,255,.88) !important;
}
body.sm360-liquid-glass-2 .sm360-selector-chip.active,
body.sm360-liquid-glass-2 .chip.active,
body.sm360-liquid-glass-2 .category-chip.active,
body.sm360-liquid-glass-2 .filter-chip.active,
body.sm360-liquid-glass-2 .spa-chip.active{
  border-color:rgba(111,78,246,.34) !important;
  background:linear-gradient(145deg,rgba(111,78,246,.13),rgba(255,255,255,.84)) !important;
  box-shadow:0 16px 34px rgba(111,78,246,.13), inset 0 1px 0 rgba(255,255,255,.9) !important;
}

/* Tablas */
body.sm360-liquid-glass-2 table,
body.sm360-liquid-glass-2 .sm360-table{
  border-collapse:separate !important;
  border-spacing:0 8px !important;
  font-family:var(--sm360-lg2-font) !important;
}
body.sm360-liquid-glass-2 th,
body.sm360-liquid-glass-2 table thead th{
  color:#475467 !important;
  font-size:12px !important;
  text-transform:uppercase !important;
  letter-spacing:.05em !important;
  font-weight:850 !important;
  background:transparent !important;
  border:0 !important;
}
body.sm360-liquid-glass-2 td,
body.sm360-liquid-glass-2 table tbody td{
  background:rgba(255,255,255,.72) !important;
  border-top:1px solid rgba(148,163,184,.14) !important;
  border-bottom:1px solid rgba(148,163,184,.14) !important;
  color:#1f2937 !important;
}
body.sm360-liquid-glass-2 table tbody tr:hover td{
  background:rgba(255,255,255,.92) !important;
  box-shadow:0 10px 26px rgba(15,23,42,.045) !important;
}
body.sm360-liquid-glass-2 table tbody td:first-child{border-left:1px solid rgba(148,163,184,.14) !important;border-radius:16px 0 0 16px !important;}
body.sm360-liquid-glass-2 table tbody td:last-child{border-right:1px solid rgba(148,163,184,.14) !important;border-radius:0 16px 16px 0 !important;}

/* Badges */
body.sm360-liquid-glass-2 .badge,
body.sm360-liquid-glass-2 .pill,
body.sm360-liquid-glass-2 .status-pill,
body.sm360-liquid-glass-2 .money-badge{
  border-radius:999px !important;
  font-weight:850 !important;
  letter-spacing:-.01em !important;
  border:1px solid rgba(148,163,184,.18) !important;
  background:rgba(255,255,255,.76) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8) !important;
}

/* Modales */
body.sm360-liquid-glass-2 .modal.open,
body.sm360-liquid-glass-2 .modal.show,
body.sm360-liquid-glass-2 .pos-modal.open,
body.sm360-liquid-glass-2 .sm360-modal.open{
  background:rgba(15,23,42,.26) !important;
  backdrop-filter:blur(14px) saturate(1.06) !important;
}
body.sm360-liquid-glass-2 .modal-card,
body.sm360-liquid-glass-2 .modal-content,
body.sm360-liquid-glass-2 .pos-modal-card,
body.sm360-liquid-glass-2 .sm360-modal-card{
  background:
    radial-gradient(circle at 16% 0%, rgba(111,78,246,.055), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(248,250,252,.86)) !important;
  border:1px solid rgba(255,255,255,.72) !important;
  box-shadow:var(--sm360-lg2-shadow-lg), inset 0 1px 0 rgba(255,255,255,.92) !important;
  border-radius:var(--sm360-lg2-radius-xl) !important;
}

/* KPI cards */
body.sm360-liquid-glass-2 .sm360-kpi,
body.sm360-liquid-glass-2 .kpi-card,
body.sm360-liquid-glass-2 .pos-kpi{
  position:relative !important;
  overflow:hidden !important;
}
body.sm360-liquid-glass-2 .sm360-kpi::before,
body.sm360-liquid-glass-2 .kpi-card::before,
body.sm360-liquid-glass-2 .pos-kpi::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background:radial-gradient(circle at 88% 16%, rgba(111,78,246,.12), transparent 34%);
  opacity:.9;
}
body.sm360-liquid-glass-2 .sm360-kpi strong,
body.sm360-liquid-glass-2 .kpi-card strong,
body.sm360-liquid-glass-2 .pos-kpi strong{
  font-size:clamp(22px,2vw,32px) !important;
  letter-spacing:-.05em !important;
}

/* Skeleton loading */
body.sm360-liquid-glass-2 .sm360-skeleton,
body.sm360-liquid-glass-2 [data-sm360-skeleton="1"]{
  position:relative !important;
  overflow:hidden !important;
  color:transparent !important;
  background:linear-gradient(90deg,rgba(226,232,240,.54),rgba(255,255,255,.72),rgba(226,232,240,.54)) !important;
  background-size:220% 100% !important;
  animation:sm360Lg2Skeleton 1.25s var(--sm360-lg2-ease) infinite !important;
  border-radius:14px !important;
}
@keyframes sm360Lg2Skeleton{0%{background-position:220% 0;}100%{background-position:-220% 0;}}

/* Toasts / notificaciones */
body.sm360-liquid-glass-2 .toast,
body.sm360-liquid-glass-2 .sc-toast,
body.sm360-liquid-glass-2 .notification-toast,
body.sm360-liquid-glass-2 .nc33-toast{
  background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(248,250,252,.78)) !important;
  border:1px solid rgba(255,255,255,.72) !important;
  border-radius:20px !important;
  box-shadow:0 22px 60px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.88) !important;
  backdrop-filter:blur(18px) saturate(1.10) !important;
}

/* Navegación */
body.sm360-liquid-glass-2 .side-nav,
body.sm360-liquid-glass-2 aside.sidebar{
  background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(248,250,252,.72)) !important;
  border-right:1px solid rgba(148,163,184,.18) !important;
  box-shadow:8px 0 32px rgba(15,23,42,.045) !important;
  backdrop-filter:blur(18px) saturate(1.06) !important;
}
body.sm360-liquid-glass-2 .nav,
body.sm360-liquid-glass-2 .side-nav .nav{
  border-radius:16px !important;
  transition:background .16s var(--sm360-lg2-ease), transform .16s var(--sm360-lg2-ease), box-shadow .16s var(--sm360-lg2-ease) !important;
}
body.sm360-liquid-glass-2 .nav.active,
body.sm360-liquid-glass-2 .side-nav .nav.active{
  background:linear-gradient(145deg,rgba(111,78,246,.14),rgba(255,255,255,.76)) !important;
  color:var(--sm360-lg2-purple) !important;
  box-shadow:0 14px 34px rgba(111,78,246,.12), inset 0 1px 0 rgba(255,255,255,.88) !important;
}

/* Animaciones estándar */
body.sm360-liquid-glass-2 .sm360-animate-in,
body.sm360-liquid-glass-2 .view.active,
body.sm360-liquid-glass-2 .pos-modal.open .pos-modal-card,
body.sm360-liquid-glass-2 .modal.open .modal-card{
  animation:sm360Lg2Enter .24s var(--sm360-lg2-ease) both;
}
@keyframes sm360Lg2Enter{
  from{opacity:0;transform:translateY(8px) scale(.992);filter:blur(3px);}
  to{opacity:1;transform:translateY(0) scale(1);filter:blur(0);}
}

/* Responsive */
@media (max-width: 900px){
  body.sm360-liquid-glass-2 .sm360-card,
  body.sm360-liquid-glass-2 .card,
  body.sm360-liquid-glass-2 .panel,
  body.sm360-liquid-glass-2 .pos-panel{
    border-radius:20px !important;
  }
  body.sm360-liquid-glass-2 .modal-card,
  body.sm360-liquid-glass-2 .pos-modal-card{
    border-radius:24px !important;
  }
}

/* Utilidades Fase 3 */
.sm360-lg2-accent{color:var(--sm360-lg2-purple) !important;}
.sm360-lg2-bg{background:var(--sm360-lg2-bg) !important;}
.sm360-lg2-glass{background:var(--sm360-lg2-surface) !important;border:1px solid var(--sm360-lg2-border) !important;box-shadow:var(--sm360-lg2-shadow-sm) !important;backdrop-filter:blur(var(--sm360-lg2-blur)) !important;}
.sm360-lg2-purple-btn{background:linear-gradient(135deg,var(--sm360-lg2-purple),var(--sm360-lg2-purple-2)) !important;color:white !important;}