/* SpaMaster360 v47.34 — Technical Debt Cleanup / Frontend Architecture Phase 4
   Capa final de consolidación: Design System > Components > Module.
   Objetivo: bloquear residuos visuales de CSS legacy sin alterar lógica de negocio. */
:root{
  --sm360-z-base: 1;
  --sm360-z-dropdown: 300;
  --sm360-z-topbar: 700;
  --sm360-z-sidebar: 720;
  --sm360-z-overlay: 40000;
  --sm360-z-modal: 40010;
  --sm360-z-toast: 50000;
  --sm360-brand-purple:#6f4ef6;
  --sm360-brand-purple-dark:#4f2fd4;
  --sm360-bg-soft:#f5f6f8;
  --sm360-surface-glass:rgba(255,255,255,.82);
  --sm360-border-glass:rgba(148,163,184,.20);
}
html body.sc-view-pos{background:var(--sm360-bg-soft)!important;}
html body .topbar, html body header.topbar{z-index:var(--sm360-z-topbar)!important;}
html body .side-nav, html body .sidebar{z-index:var(--sm360-z-sidebar)!important;}
html body > .pos-modal.open[id^="pos"],
html body.sc-view-pos #view-pos .pos-modal.open{
  z-index:var(--sm360-z-modal)!important;
  position:fixed!important;
  inset:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:18px!important;
  overflow:auto!important;
  background:rgba(15,23,42,.28)!important;
  backdrop-filter:blur(12px) saturate(1.05)!important;
  -webkit-backdrop-filter:blur(12px) saturate(1.05)!important;
  transform:none!important;
  translate:none!important;
}
html body > .pos-modal.open[id^="pos"] .pos-modal-card,
html body.sc-view-pos #view-pos .pos-modal.open .pos-modal-card{
  z-index:calc(var(--sm360-z-modal) + 10)!important;
  transform:none!important;
  translate:none!important;
}
/* Gasto: solo el renderer v47.30 controla el DOM; esta hoja solo estabiliza apariencia. */
html body.sc-view-pos #posExpenseModal .pos-modal-card.sm360-expense-card-v4730,
html body.sc-view-pos #posExpenseModal .pos-modal-card.pos-expense-compact-card{
  max-width:min(920px, calc(100vw - 36px))!important;
  max-height:min(920px, calc(100vh - 36px))!important;
  overflow:hidden!important;
  border-radius:28px!important;
  background:linear-gradient(145deg, rgba(255,255,255,.96), rgba(248,249,252,.92) 58%, rgba(244,242,255,.88))!important;
  border:1px solid rgba(255,255,255,.72)!important;
  box-shadow:0 34px 90px rgba(15,23,42,.26), inset 0 1px 0 rgba(255,255,255,.94)!important;
}
html body.sc-view-pos #posExpenseModal .expense-compact-form{
  padding:22px 28px 28px!important;
  max-height:calc(100vh - 150px)!important;
  overflow:auto!important;
}
html body.sc-view-pos #posExpenseModal .expense-pay-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
}
html body.sc-view-pos #posExpenseModal button.expense-pay-btn,
html body.sc-view-pos #posSaleModal button.pos-pay-method-btn{
  min-height:84px!important;
  padding:14px 12px!important;
  border-radius:20px!important;
  border:1px solid color-mix(in srgb, var(--sm360-pay-color, #6f4ef6) 22%, rgba(148,163,184,.24))!important;
  background:linear-gradient(145deg, rgba(255,255,255,.96), rgba(248,250,252,.82))!important;
  box-shadow:0 14px 30px rgba(15,23,42,.07), inset 0 1px 0 rgba(255,255,255,.94)!important;
  color:#172033!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  text-align:center!important;
  overflow:hidden!important;
}
html body.sc-view-pos #posExpenseModal button.expense-pay-btn.active,
html body.sc-view-pos #posExpenseModal button.expense-pay-btn.is-selected,
html body.sc-view-pos #posSaleModal button.pos-pay-method-btn.active{
  border-color:color-mix(in srgb, var(--sm360-pay-color, #6f4ef6) 42%, transparent)!important;
  box-shadow:0 18px 38px color-mix(in srgb, var(--sm360-pay-color, #6f4ef6) 18%, transparent), inset 0 1px 0 rgba(255,255,255,.94)!important;
}
html body.sc-view-pos #posExpenseModal [data-sm360-payment-method="cash"],
html body.sc-view-pos #posSaleModal [data-sm360-payment-method="cash"]{--sm360-pay-color:#16a34a!important;}
html body.sc-view-pos #posExpenseModal [data-sm360-payment-method="card"],
html body.sc-view-pos #posSaleModal [data-sm360-payment-method="card"]{--sm360-pay-color:#2563eb!important;}
html body.sc-view-pos #posExpenseModal [data-sm360-payment-method="transfer"],
html body.sc-view-pos #posSaleModal [data-sm360-payment-method="transfer"]{--sm360-pay-color:#6f4ef6!important;}
html body.sc-view-pos .sm360-pay-icon{width:38px!important;height:38px!important;margin:0!important;padding:0!important;border-radius:15px!important;background:color-mix(in srgb, var(--sm360-pay-color, #6f4ef6) 14%, rgba(255,255,255,.9))!important;display:grid!important;place-items:center!important;}
html body.sc-view-pos .sm360-pay-label{font-size:14px!important;font-weight:860!important;line-height:1.12!important;margin:0!important;padding:0!important;white-space:normal!important;word-break:normal!important;hyphens:none!important;}
html body.sc-view-pos .sm360-pay-check{position:absolute!important;top:10px!important;right:10px!important;width:22px!important;height:22px!important;border-radius:999px!important;background:var(--sm360-pay-color,#6f4ef6)!important;color:white!important;display:none!important;place-items:center!important;font-size:13px!important;font-weight:900!important;}
html body.sc-view-pos button.active > .sm360-pay-check,
html body.sc-view-pos button.is-selected > .sm360-pay-check{display:grid!important;}
@media (max-width:700px){
  html body.sc-view-pos #posExpenseModal .expense-pay-grid{grid-template-columns:1fr!important;}
  html body.sc-view-pos #posExpenseModal button.expense-pay-btn{min-height:72px!important;flex-direction:row!important;justify-content:flex-start!important;text-align:left!important;padding:14px 16px!important;}
}