/* SpaMaster 360 v47.32
   Phase 1: Liquid Glass Component Library
   Objetivo: componentes reutilizables sin tocar la lógica legacy.
*/
:root{
  --sm360-brand:#6d4aff;
  --sm360-brand-2:#8b5cf6;
  --sm360-ink:#0f172a;
  --sm360-muted:#64748b;
  --sm360-line:rgba(148,163,184,.24);
  --sm360-surface:rgba(255,255,255,.82);
  --sm360-surface-strong:rgba(255,255,255,.94);
  --sm360-gray-bg:#f4f7fb;
  --sm360-radius-lg:24px;
  --sm360-radius-md:18px;
  --sm360-shadow:0 24px 70px rgba(15,23,42,.16), inset 0 1px 0 rgba(255,255,255,.88);
}
.sm360-component-ready *{box-sizing:border-box;}
.sm360-card,
.sm360-stat-card,
.sm360-form-card{
  background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(248,250,252,.78))!important;
  border:1px solid var(--sm360-line)!important;
  border-radius:var(--sm360-radius-lg)!important;
  box-shadow:0 16px 42px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.92)!important;
  backdrop-filter:blur(18px) saturate(1.08)!important;
}
.sm360-button,
button.sm360-button,
.sm360-modal .btn,
.sm360-form-actions .btn{
  min-height:46px;
  border-radius:16px!important;
  border:1px solid rgba(109,74,255,.16)!important;
  padding:0 18px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  font-weight:850!important;
  letter-spacing:-.01em!important;
  cursor:pointer!important;
  transition:transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s, border-color .16s, filter .16s!important;
}
.sm360-button:hover,
button.sm360-button:hover,
.sm360-form-actions .btn:hover{transform:translateY(-1px)!important;}
.sm360-button-primary,
.sm360-form-actions .btn.primary,
.sm360-form-actions .pos-modal-submit{
  color:#fff!important;
  background:linear-gradient(135deg,var(--sm360-brand),var(--sm360-brand-2))!important;
  box-shadow:0 14px 32px rgba(109,74,255,.22), inset 0 1px 0 rgba(255,255,255,.28)!important;
}
.sm360-button-ghost,
.sm360-modal .btn.ghost{
  color:var(--sm360-ink)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(248,250,252,.76))!important;
  box-shadow:0 10px 22px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.94)!important;
}
.sm360-input,
.sm360-select,
.sm360-textarea,
.sm360-form input:not([type="checkbox"]):not([type="radio"]),
.sm360-form select,
.sm360-form textarea{
  width:100%!important;
  min-height:48px!important;
  border-radius:16px!important;
  border:1px solid rgba(148,163,184,.28)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(248,250,252,.86))!important;
  padding:12px 15px!important;
  color:var(--sm360-ink)!important;
  font-weight:720!important;
  outline:none!important;
  box-shadow:0 8px 20px rgba(15,23,42,.035), inset 0 1px 0 rgba(255,255,255,.9)!important;
}
.sm360-input:focus,
.sm360-select:focus,
.sm360-textarea:focus,
.sm360-form input:focus,
.sm360-form select:focus,
.sm360-form textarea:focus{
  border-color:rgba(109,74,255,.42)!important;
  box-shadow:0 0 0 4px rgba(109,74,255,.10),0 12px 28px rgba(109,74,255,.08), inset 0 1px 0 rgba(255,255,255,.94)!important;
}
.sm360-field{display:grid!important;gap:8px!important;margin:0!important;}
.sm360-label,
.sm360-field label,
.sm360-form label{
  color:var(--sm360-muted)!important;
  font-size:12px!important;
  text-transform:uppercase!important;
  letter-spacing:.055em!important;
  font-weight:900!important;
}
.sm360-payment-grid,
.sm360-form .pos-pay-method-grid,
.sm360-form .expense-pay-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
  align-items:stretch!important;
}
.sm360-payment-card,
button.sm360-payment-card,
.sm360-form button.pos-pay-method-btn,
.sm360-form button.expense-pay-btn{
  min-height:84px!important;
  padding:13px 12px!important;
  border-radius:20px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  text-align:center!important;
  background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(245,249,255,.74))!important;
  border:1px solid rgba(148,163,184,.24)!important;
  color:var(--sm360-ink)!important;
  font-size:14px!important;
  line-height:1.08!important;
  font-weight:880!important;
  box-shadow:0 12px 28px rgba(15,23,42,.07), inset 0 1px 0 rgba(255,255,255,.94)!important;
  position:relative!important;
  overflow:hidden!important;
}
.sm360-payment-card.active,
.sm360-payment-card.is-selected,
.sm360-form button.pos-pay-method-btn.active,
.sm360-form button.expense-pay-btn.active,
.sm360-form button.expense-pay-btn.is-selected{
  border-color:color-mix(in srgb, var(--sm360-pay-color, var(--sm360-brand)) 42%, rgba(148,163,184,.24))!important;
  box-shadow:0 18px 42px color-mix(in srgb, var(--sm360-pay-color, var(--sm360-brand)) 16%, transparent), inset 0 0 0 2px color-mix(in srgb, var(--sm360-pay-color, var(--sm360-brand)) 16%, transparent), inset 0 1px 0 rgba(255,255,255,.96)!important;
}
.sm360-payment-card[data-sm360-payment-method="cash"],
.sm360-form [data-sm360-payment-method="cash"]{--sm360-pay-color:#16a34a;}
.sm360-payment-card[data-sm360-payment-method="card"],
.sm360-form [data-sm360-payment-method="card"]{--sm360-pay-color:#2563eb;}
.sm360-payment-card[data-sm360-payment-method="transfer"],
.sm360-form [data-sm360-payment-method="transfer"]{--sm360-pay-color:#7c3aed;}
.sm360-modal{
  position:fixed!important;
  inset:0!important;
  display:flex;
  align-items:center!important;
  justify-content:center!important;
  padding:18px!important;
  background:rgba(15,23,42,.28)!important;
  backdrop-filter:blur(12px) saturate(1.03)!important;
  overflow:auto!important;
}
.sm360-modal-card{
  width:min(940px,calc(100vw - 36px));
  max-height:calc(100vh - 36px);
  overflow:hidden;
  border-radius:28px;
  background:linear-gradient(145deg,#fff 0%,#f8fafc 48%,#f4f7fb 100%);
  border:1px solid rgba(148,163,184,.25);
  box-shadow:var(--sm360-shadow);
}
@media(max-width:760px){
  .sm360-payment-grid,
  .sm360-form .pos-pay-method-grid,
  .sm360-form .expense-pay-grid{grid-template-columns:1fr!important;}
  .sm360-payment-card,
  .sm360-form button.pos-pay-method-btn,
  .sm360-form button.expense-pay-btn{min-height:70px!important;flex-direction:row!important;justify-content:flex-start!important;text-align:left!important;padding:12px 16px!important;}
}