/* SpaMaster 360 v48.27 · Caja POS UI v2 */
:root{
  --sm360-pos-v2-ink:#0f172a;
  --sm360-pos-v2-muted:#64748b;
  --sm360-pos-v2-line:rgba(148,163,184,.22);
  --sm360-pos-v2-purple:#6d4aff;
  --sm360-pos-v2-green:#16a34a;
  --sm360-pos-v2-red:#ef4444;
  --sm360-pos-v2-blue:#2563eb;
  --sm360-pos-v2-orange:#f97316;
}

/* Tabs */
body.sc-view-pos #posPro .pos-tab.expense:not(.active){
  border-color:var(--sm360-pos-v2-line)!important;
  box-shadow:none!important;
  background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(248,250,252,.82))!important;
  color:#334155!important;
}
body.sc-view-pos #posPro .pos-tab.expense:not(.active):hover{
  border-color:rgba(249,115,22,.35)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(255,247,237,.9))!important;
  box-shadow:0 10px 24px rgba(249,115,22,.10)!important;
  transform:translateY(-2px);
}

/* CTA buttons */
body.sc-view-pos #posNewSaleBtn,
body.sc-view-pos #posNewExpenseBtn{
  position:relative!important;
  min-width:190px!important;
  min-height:68px!important;
  padding:12px 18px!important;
  border-radius:20px!important;
  display:grid!important;
  grid-template-columns:42px 1fr!important;
  grid-template-rows:auto auto!important;
  column-gap:12px!important;
  align-items:center!important;
  text-align:left!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.72)!important;
  box-shadow:0 14px 34px rgba(15,23,42,.12),inset 0 1px 0 rgba(255,255,255,.88)!important;
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease!important;
}
body.sc-view-pos #posNewSaleBtn{
  background:radial-gradient(circle at 12% 0%,rgba(255,255,255,.34),transparent 34%),linear-gradient(135deg,#22c55e,#0f9f4d)!important;
}
body.sc-view-pos #posNewExpenseBtn{
  background:radial-gradient(circle at 12% 0%,rgba(255,255,255,.32),transparent 34%),linear-gradient(135deg,#ff6b6b,#ef4444)!important;
}
body.sc-view-pos #posNewSaleBtn::after,
body.sc-view-pos #posNewExpenseBtn::after{
  content:attr(data-sm360-subtitle);
  grid-column:2;
  font-size:11px;
  font-weight:650;
  line-height:1.2;
  color:rgba(255,255,255,.78);
  margin-top:-4px;
}
body.sc-view-pos #posNewSaleBtn .sm360-liquid-btn-icon,
body.sc-view-pos #posNewExpenseBtn .sm360-liquid-btn-icon{
  grid-row:1/3!important;
  width:42px!important;height:42px!important;border-radius:14px!important;
  background:rgba(255,255,255,.18)!important;
  border:1px solid rgba(255,255,255,.26)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34)!important;
}
body.sc-view-pos #posNewSaleBtn .sm360-liquid-btn-text,
body.sc-view-pos #posNewExpenseBtn .sm360-liquid-btn-text{
  color:#fff!important;font-size:15px!important;font-weight:850!important;
}
body.sc-view-pos #posNewSaleBtn:hover,
body.sc-view-pos #posNewExpenseBtn:hover{
  transform:translateY(-4px) scale(1.018)!important;
  filter:saturate(1.08) brightness(1.02)!important;
}
body.sc-view-pos #posNewSaleBtn:hover{box-shadow:0 20px 45px rgba(22,163,74,.28),inset 0 1px 0 rgba(255,255,255,.92)!important}
body.sc-view-pos #posNewExpenseBtn:hover{box-shadow:0 20px 45px rgba(239,68,68,.28),inset 0 1px 0 rgba(255,255,255,.92)!important}

/* New category icons in expense and finance */
.sm360-pos-category-icon{
  --cat-color:#6d4aff;
  width:38px;height:38px;min-width:38px;border-radius:13px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--cat-color)!important;
  background:linear-gradient(145deg,color-mix(in srgb,var(--cat-color) 13%,#fff),rgba(255,255,255,.94) 68%)!important;
  border:1px solid color-mix(in srgb,var(--cat-color) 25%,#dbe6f2)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.96),0 7px 18px color-mix(in srgb,var(--cat-color) 12%,transparent)!important;
  overflow:hidden;font-size:0!important;
}
.sm360-pos-category-icon svg{width:21px;height:21px;stroke-width:2.15;display:block}
.expense-cat-main{display:grid!important;grid-template-columns:38px 1fr auto!important;align-items:center!important;gap:12px!important}
.expense-cat-child{display:flex!important;align-items:center!important;gap:10px!important}
.expense-cat-child>.sm360-pos-category-icon{width:30px;height:30px;min-width:30px;border-radius:10px}
.expense-cat-child>.sm360-pos-category-icon svg{width:17px;height:17px}

/* Modal overlay common */
body.sc-view-pos #posDetailModal.open,
body.sc-view-pos #posOpenModal.open,
body.sc-view-pos #posCloseModal.open,
body.sc-view-pos #posShiftModal.open{
  display:flex!important;position:fixed!important;inset:0!important;
  align-items:center!important;justify-content:center!important;
  padding:22px!important;overflow:auto!important;
  background:rgba(15,23,42,.30)!important;
  backdrop-filter:blur(14px) saturate(1.06)!important;
  z-index:40010!important;
}
body.sc-view-pos #posDetailModal .pos-modal-card,
body.sc-view-pos #posOpenModal .pos-modal-card,
body.sc-view-pos #posCloseModal .pos-modal-card,
body.sc-view-pos #posShiftModal .pos-modal-card{
  position:relative!important;z-index:40020!important;margin:auto!important;padding:0!important;
  overflow:hidden!important;border-radius:28px!important;
  border:1px solid rgba(255,255,255,.78)!important;
  background:radial-gradient(circle at 14% 0%,rgba(109,74,255,.07),transparent 34%),linear-gradient(145deg,rgba(255,255,255,.97),rgba(248,250,252,.93) 58%,rgba(241,245,249,.9))!important;
  box-shadow:0 34px 90px rgba(15,23,42,.26),inset 0 1px 0 rgba(255,255,255,.96)!important;
  backdrop-filter:blur(22px) saturate(1.08)!important;
  animation:sm360PosV2Enter .22s cubic-bezier(.2,.8,.2,1) both!important;
}
@keyframes sm360PosV2Enter{from{opacity:0;transform:translateY(12px) scale(.975)}to{opacity:1;transform:none}}

/* Open/close cash */
body.sc-view-pos #posOpenModal .pos-modal-card,
body.sc-view-pos #posCloseModal .pos-modal-card{width:min(760px,calc(100vw - 44px))!important}
body.sc-view-pos #posOpenModal .pos-modal-head,
body.sc-view-pos #posCloseModal .pos-modal-head{
  min-height:78px!important;padding:18px 22px!important;margin:0!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  border-bottom:1px solid var(--sm360-pos-v2-line)!important;
  background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(248,250,252,.72))!important;
}
body.sc-view-pos #posOpenModal .pos-modal-head h3,
body.sc-view-pos #posCloseModal .pos-modal-head h3{font-family:var(--sc-font-display)!important;font-size:22px!important;font-weight:900!important;color:var(--sm360-pos-v2-ink)!important;margin:0!important}
body.sc-view-pos #posOpenModal .pos-form-grid,
body.sc-view-pos #posCloseModal .pos-form-grid{padding:22px!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:14px!important}
body.sc-view-pos #posOpenModal input,body.sc-view-pos #posOpenModal textarea,
body.sc-view-pos #posCloseModal input,body.sc-view-pos #posCloseModal textarea{
  min-height:58px!important;border-radius:16px!important;border:1px solid var(--sm360-pos-v2-line)!important;background:rgba(255,255,255,.84)!important;padding:15px 16px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.9)!important
}
body.sc-view-pos #posSaveOpenCash,body.sc-view-pos #posSaveCloseCash{
  width:calc(100% - 44px)!important;margin:0 22px 22px!important;min-height:52px!important;border:0!important;border-radius:16px!important;color:#fff!important;font-weight:850!important;background:linear-gradient(135deg,#7c3aed,#5e2bff)!important;box-shadow:0 14px 30px rgba(109,74,255,.24)!important;transition:.18s ease!important
}
body.sc-view-pos #posSaveOpenCash:hover,body.sc-view-pos #posSaveCloseCash:hover{transform:translateY(-2px)!important;box-shadow:0 18px 38px rgba(109,74,255,.32)!important}

/* Standard close buttons */
body.sc-view-pos #posDetailClose,
body.sc-view-pos #posShiftClose,
body.sc-view-pos #posOpenModal [data-close],
body.sc-view-pos #posCloseModal [data-close]{
  width:44px!important;height:44px!important;border-radius:15px!important;border:1px solid rgba(239,68,68,.22)!important;background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(254,242,242,.9))!important;color:#dc2626!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;font-size:0!important;box-shadow:0 8px 22px rgba(239,68,68,.08),inset 0 1px 0 rgba(255,255,255,.96)!important;transition:.18s ease!important
}
body.sc-view-pos #posDetailClose::before,body.sc-view-pos #posShiftClose::before,
body.sc-view-pos #posOpenModal [data-close]::before,body.sc-view-pos #posCloseModal [data-close]::before{content:'×';font-size:24px;font-weight:700;line-height:1}
body.sc-view-pos #posDetailClose:hover,body.sc-view-pos #posShiftClose:hover,
body.sc-view-pos #posOpenModal [data-close]:hover,body.sc-view-pos #posCloseModal [data-close]:hover{background:#ef4444!important;color:#fff!important;transform:translateY(-2px)!important;box-shadow:0 13px 28px rgba(239,68,68,.22)!important}

/* Movement detail / edit */
body.sc-view-pos #posDetailModal .pos-detail-modal-card{width:min(900px,calc(100vw - 44px))!important;max-height:calc(100vh - 44px)!important;display:flex!important;flex-direction:column!important}
body.sc-view-pos #posDetailContent{overflow:auto!important;padding-bottom:0!important}
body.sc-view-pos .pos-detail-top{
  min-height:82px!important;padding:18px 22px!important;display:grid!important;grid-template-columns:48px 1fr 44px!important;align-items:center!important;gap:14px!important;
  background:radial-gradient(circle at 5% 0%,rgba(22,163,74,.16),transparent 32%),linear-gradient(135deg,rgba(240,253,244,.96),rgba(255,255,255,.9) 55%,rgba(248,250,252,.78))!important;
  border-bottom:1px solid rgba(22,163,74,.18)!important
}
body.sc-view-pos .pos-detail-top.expense{background:radial-gradient(circle at 5% 0%,rgba(239,68,68,.18),transparent 32%),linear-gradient(135deg,rgba(254,242,242,.96),rgba(255,255,255,.9) 55%,rgba(248,250,252,.78))!important;border-bottom-color:rgba(239,68,68,.18)!important}
body.sc-view-pos .pos-detail-icon{width:46px;height:46px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:0;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);box-shadow:0 8px 20px rgba(15,23,42,.08),inset 0 1px 0 #fff;color:var(--sm360-pos-v2-green)}
body.sc-view-pos .pos-detail-top.expense .pos-detail-icon{color:var(--sm360-pos-v2-red)}
body.sc-view-pos .pos-detail-icon svg{width:24px;height:24px;stroke-width:2.2}
body.sc-view-pos .pos-detail-title{font-family:var(--sc-font-display)!important;font-size:22px!important;font-weight:900!important;color:var(--sm360-pos-v2-ink)!important}
body.sc-view-pos .pos-detail-center{padding:20px 24px 8px!important;text-align:left!important;display:flex!important;align-items:baseline!important;gap:10px!important;flex-wrap:wrap!important}
body.sc-view-pos .pos-detail-center strong{font-size:18px!important;color:var(--sm360-pos-v2-ink)!important}.pos-detail-center span{color:var(--sm360-pos-v2-muted)!important}
body.sc-view-pos .pos-detail-box{margin:10px 22px 18px!important;padding:8px!important;border-radius:20px!important;background:rgba(255,255,255,.65)!important;border:1px solid var(--sm360-pos-v2-line)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.9)!important}
body.sc-view-pos .pos-detail-row{min-height:48px!important;padding:11px 13px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;border-bottom:1px solid rgba(148,163,184,.14)!important;gap:16px!important}
body.sc-view-pos .pos-detail-row:last-child{border-bottom:0!important}.pos-detail-row span{color:var(--sm360-pos-v2-muted)!important}.pos-detail-row strong{text-align:right!important;color:var(--sm360-pos-v2-ink)!important}
body.sc-view-pos .pos-edit-form{margin:0 22px 18px!important;padding:0!important;display:none!important;grid-template-columns:1fr 1fr!important;gap:12px!important}
body.sc-view-pos .pos-edit-form.open{display:grid!important;padding:18px!important;border:1px solid rgba(109,74,255,.2)!important;border-radius:20px!important;background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(245,243,255,.76))!important;animation:sm360PosV2Expand .18s ease both!important}
@keyframes sm360PosV2Expand{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
body.sc-view-pos .pos-edit-form input,body.sc-view-pos .pos-edit-form textarea{min-height:50px!important;border-radius:14px!important;border:1px solid var(--sm360-pos-v2-line)!important;background:#fff!important;padding:12px 14px!important}.pos-edit-form textarea{grid-column:1/-1!important;min-height:90px!important}
body.sc-view-pos #posSaveMovementEdit{grid-column:1/-1!important;min-height:48px!important;border-radius:14px!important;background:linear-gradient(135deg,#7c3aed,#5e2bff)!important;color:#fff!important;border:0!important}
body.sc-view-pos .pos-detail-actions{position:sticky!important;bottom:0!important;padding:14px 20px!important;display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:10px!important;background:rgba(255,255,255,.88)!important;backdrop-filter:blur(16px)!important;border-top:1px solid var(--sm360-pos-v2-line)!important}
body.sc-view-pos .pos-detail-action{min-height:54px!important;border-radius:15px!important;border:1px solid var(--sm360-pos-v2-line)!important;background:linear-gradient(145deg,#fff,#f8fafc)!important;color:#334155!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;font-weight:760!important;transition:.18s ease!important}
body.sc-view-pos .pos-detail-action i{font-style:normal!important;font-size:0!important;display:inline-flex!important}.pos-detail-action i svg{width:19px;height:19px;stroke-width:2.15}
body.sc-view-pos .pos-detail-action:hover{transform:translateY(-2px)!important;border-color:rgba(109,74,255,.28)!important;box-shadow:0 10px 24px rgba(15,23,42,.08)!important}.pos-detail-action.danger{color:#dc2626!important;border-color:rgba(239,68,68,.2)!important}

/* Shift summary */
body.sc-view-pos #posShiftModal .pos-shift-modal-card{width:min(980px,calc(100vw - 44px))!important;max-height:calc(100vh - 44px)!important;display:flex!important;flex-direction:column!important}
body.sc-view-pos #posShiftContent{overflow:auto!important}
body.sc-view-pos .pos-shift-header{position:sticky!important;top:0!important;z-index:5!important;min-height:78px!important;padding:17px 20px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(248,250,252,.82))!important;border-bottom:1px solid var(--sm360-pos-v2-line)!important;backdrop-filter:blur(16px)!important}
body.sc-view-pos .pos-shift-header h3{font-family:var(--sc-font-display)!important;font-size:22px!important;font-weight:900!important;margin:0!important}
body.sc-view-pos .pos-shift-methods{padding:18px 20px 8px!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
body.sc-view-pos .pos-shift-method{border:1px solid var(--sm360-pos-v2-line)!important;border-radius:18px!important;background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(248,250,252,.82))!important;overflow:hidden!important;transition:.18s ease!important}.pos-shift-method:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(15,23,42,.08)}
body.sc-view-pos .pos-shift-method-head{min-height:58px!important;padding:14px 16px!important;display:grid!important;grid-template-columns:1fr auto 18px!important;align-items:center!important;gap:10px!important;cursor:pointer!important}.pos-shift-method-head strong{color:var(--sm360-pos-v2-ink)!important}
body.sc-view-pos .pos-shift-method.active{border-color:rgba(22,163,74,.28)!important;background:linear-gradient(145deg,rgba(240,253,244,.96),rgba(255,255,255,.88))!important}
body.sc-view-pos .pos-shift-method-body{padding:0 16px;max-height:0;overflow:hidden;color:var(--sm360-pos-v2-muted);transition:.2s ease}.pos-shift-method.open .pos-shift-method-body{max-height:100px;padding:0 16px 14px}
body.sc-view-pos .pos-shift-info-card{margin:10px 20px!important;padding:16px 18px!important;border-radius:18px!important;border:1px solid var(--sm360-pos-v2-line)!important;background:rgba(255,255,255,.72)!important;display:grid!important;grid-template-columns:1fr auto!important;gap:5px 12px!important}.pos-shift-info-card>span{grid-column:2;grid-row:1/4}.pos-shift-info-card a{color:var(--sm360-pos-v2-blue)!important;text-decoration:none!important;font-weight:700!important}
body.sc-view-pos .pos-shift-transactions{margin:10px 20px!important;border-radius:18px!important;border:1px solid var(--sm360-pos-v2-line)!important;background:#fff!important;overflow:hidden!important;max-height:0!important;opacity:0!important;transition:.22s ease!important}.pos-shift-transactions.open{max-height:320px!important;opacity:1!important;overflow:auto!important}
body.sc-view-pos .pos-shift-bottom{padding:16px 20px 20px!important;display:grid!important;grid-template-columns:1fr!important;gap:14px!important}.pos-shift-summary{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:10px!important}.pos-shift-summary-row{padding:14px!important;border-radius:16px!important;border:1px solid var(--sm360-pos-v2-line)!important;background:linear-gradient(145deg,#fff,#f8fafc)!important;display:flex!important;flex-direction:column!important;gap:5px!important}.pos-shift-summary-row span{font-size:11px!important;text-transform:uppercase!important;letter-spacing:.06em!important;color:var(--sm360-pos-v2-muted)!important}.pos-shift-summary-row strong{font-size:17px!important}
body.sc-view-pos .pos-shift-actions{display:grid!important;grid-template-columns:52px 52px 1fr!important;gap:10px!important}.pos-shift-actions button{min-height:50px!important;border-radius:15px!important}.pos-shift-actions .icon{font-size:0!important;border:1px solid var(--sm360-pos-v2-line)!important;background:#fff!important}.pos-shift-actions .icon svg{width:20px;height:20px}.pos-shift-actions .primary{border:0!important;background:linear-gradient(135deg,#7c3aed,#5e2bff)!important;color:#fff!important;font-weight:850!important;box-shadow:0 12px 26px rgba(109,74,255,.22)!important}

@media(max-width:760px){
  body.sc-view-pos #posNewSaleBtn,body.sc-view-pos #posNewExpenseBtn{min-width:150px!important}
  body.sc-view-pos #posOpenModal .pos-form-grid,body.sc-view-pos #posCloseModal .pos-form-grid,.pos-edit-form.open{grid-template-columns:1fr!important}
  body.sc-view-pos .pos-detail-actions{grid-template-columns:repeat(2,1fr)!important}
  body.sc-view-pos .pos-shift-methods{grid-template-columns:1fr!important}
  body.sc-view-pos .pos-shift-summary{grid-template-columns:repeat(2,1fr)!important}
}