/* SpaMaster 360 v48.29 · Caja POS polish */
:root{
  --sm360-pos-tab-line:rgba(148,163,184,.24);
  --sm360-pos-sale:#16a34a;
  --sm360-pos-expense:#ef4444;
  --sm360-pos-close:#6d4aff;
}

/* 1) Tabs: same base border / same interaction, only hue changes */
body.sc-view-pos #posPro .pos-tab{
  --sm360-tab-color:#64748b;
  border:1px solid var(--sm360-pos-tab-line)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(248,250,252,.84))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9)!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease!important;
}
body.sc-view-pos #posPro .pos-tab.sales,
body.sc-view-pos #posPro .pos-tab[data-tab="sales"],
body.sc-view-pos #posPro .pos-tab:nth-child(1){--sm360-tab-color:var(--sm360-pos-sale)}
body.sc-view-pos #posPro .pos-tab.expense,
body.sc-view-pos #posPro .pos-tab[data-tab="expenses"],
body.sc-view-pos #posPro .pos-tab[data-tab="expense"],
body.sc-view-pos #posPro .pos-tab:nth-child(2){--sm360-tab-color:var(--sm360-pos-expense)}
body.sc-view-pos #posPro .pos-tab.closings,
body.sc-view-pos #posPro .pos-tab[data-tab="closings"],
body.sc-view-pos #posPro .pos-tab[data-tab="closing"],
body.sc-view-pos #posPro .pos-tab:nth-child(3){--sm360-tab-color:var(--sm360-pos-close)}
body.sc-view-pos #posPro .pos-tab:not(.active):hover{
  transform:translateY(-2px)!important;
  border-color:color-mix(in srgb,var(--sm360-tab-color) 36%,rgba(255,255,255,.68))!important;
  background:linear-gradient(145deg,color-mix(in srgb,var(--sm360-tab-color) 8%,#fff),rgba(255,255,255,.90))!important;
  box-shadow:0 10px 24px color-mix(in srgb,var(--sm360-tab-color) 12%,transparent),inset 0 1px 0 rgba(255,255,255,.94)!important;
}

/* 2) CTA buttons: one clean pill each, same pattern as Nueva reserva */
body.sc-view-pos #posNewSaleBtn,
body.sc-view-pos #posNewExpenseBtn{
  all:unset!important;
  box-sizing:border-box!important;
  min-height:48px!important;
  padding:0 18px!important;
  border-radius:17px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  font-family:var(--sc-font-body,Manrope,sans-serif)!important;
  font-size:14px!important;
  font-weight:850!important;
  line-height:1!important;
  cursor:pointer!important;
  white-space:nowrap!important;
  position:relative!important;
  overflow:hidden!important;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease!important;
}
body.sc-view-pos #posNewSaleBtn{
  color:#08783a!important;
  border:1px solid rgba(22,163,74,.34)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(240,253,244,.88))!important;
  box-shadow:0 8px 20px rgba(22,163,74,.08),inset 0 1px 0 rgba(255,255,255,.94)!important;
}
body.sc-view-pos #posNewExpenseBtn{
  color:#c62828!important;
  border:1px solid rgba(239,68,68,.32)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(254,242,242,.88))!important;
  box-shadow:0 8px 20px rgba(239,68,68,.08),inset 0 1px 0 rgba(255,255,255,.94)!important;
}
body.sc-view-pos #posNewSaleBtn::before,
body.sc-view-pos #posNewExpenseBtn::before{
  content:'+';
  font-size:18px;
  font-weight:900;
  line-height:1;
}
body.sc-view-pos #posNewSaleBtn::after,
body.sc-view-pos #posNewExpenseBtn::after{content:none!important;display:none!important}
body.sc-view-pos #posNewSaleBtn:hover{
  transform:translateY(-2px)!important;
  background:linear-gradient(145deg,rgba(240,253,244,.98),rgba(220,252,231,.92))!important;
  border-color:rgba(22,163,74,.55)!important;
  box-shadow:0 14px 30px rgba(22,163,74,.16),inset 0 1px 0 rgba(255,255,255,.96)!important;
}
body.sc-view-pos #posNewExpenseBtn:hover{
  transform:translateY(-2px)!important;
  background:linear-gradient(145deg,rgba(254,242,242,.98),rgba(254,226,226,.92))!important;
  border-color:rgba(239,68,68,.52)!important;
  box-shadow:0 14px 30px rgba(239,68,68,.16),inset 0 1px 0 rgba(255,255,255,.96)!important;
}
body.sc-view-pos #posNewSaleBtn > *,
body.sc-view-pos #posNewExpenseBtn > *{display:none!important}

/* 3) Center every modal action icon precisely */
body.sc-view-pos .pos-detail-actions .pos-detail-action,
body.sc-view-pos .pos-shift-actions button,
body.sc-view-pos .pos-modal-card .sm360-action-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  text-align:center!important;
}
body.sc-view-pos .pos-detail-actions .pos-detail-action i,
body.sc-view-pos .pos-detail-actions .pos-detail-action .icon,
body.sc-view-pos .pos-detail-actions .pos-detail-action svg,
body.sc-view-pos .pos-shift-actions button i,
body.sc-view-pos .pos-shift-actions button .icon,
body.sc-view-pos .pos-shift-actions button svg{
  flex:0 0 auto!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;
  position:static!important;
  transform:none!important;
}
body.sc-view-pos .pos-detail-actions .pos-detail-action i,
body.sc-view-pos .pos-detail-actions .pos-detail-action .icon{
  width:42px!important;height:42px!important;border-radius:14px!important;
}
body.sc-view-pos .pos-detail-actions .pos-detail-action svg,
body.sc-view-pos .pos-shift-actions button svg{width:20px!important;height:20px!important}

/* 4) Shift summary must scroll internally */
body.sc-view-pos #posShiftModal .pos-shift-modal-card{
  height:min(780px,calc(100vh - 44px))!important;
  max-height:calc(100vh - 44px)!important;
  overflow:hidden!important;
}
body.sc-view-pos #posShiftContent{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  scrollbar-gutter:stable!important;
}
body.sc-view-pos #posShiftContent::-webkit-scrollbar{width:9px}
body.sc-view-pos #posShiftContent::-webkit-scrollbar-thumb{background:rgba(148,163,184,.42);border-radius:999px;border:2px solid transparent;background-clip:padding-box}

@media(max-width:760px){
  body.sc-view-pos #posNewSaleBtn,body.sc-view-pos #posNewExpenseBtn{width:100%!important;min-height:46px!important}
  body.sc-view-pos .pos-detail-actions .pos-detail-action{min-height:66px!important}
}