/* ========================================================== SpaMaster 360 v26.5 — POS Buttons + Cash Status SAFE Solo toca IDs reales: posNewSaleBtn, posNewExpenseBtn, posCashStatus. ========================================================== */ /* Recuperar color de botones Nueva venta / Nuevo gasto */ html body #posNewSaleBtn, html body button#posNewSaleBtn, html body #view-pos #posNewSaleBtn{ opacity:1!important; visibility:visible!important; color:#fff!important; background: radial-gradient(circle at 22% 14%, rgba(255,255,255,.32), transparent 34%), linear-gradient(135deg,#22C55E 0%,#16A34A 56%,#0F7A3D 100%)!important; border:1px solid rgba(255,255,255,.34)!important; box-shadow: 0 18px 44px rgba(22,163,74,.30), 0 0 0 6px rgba(22,163,74,.09), inset 0 1px 0 rgba(255,255,255,.36)!important; } html body #posNewExpenseBtn, html body button#posNewExpenseBtn, html body #view-pos #posNewExpenseBtn{ opacity:1!important; visibility:visible!important; color:#fff!important; background: radial-gradient(circle at 22% 14%, rgba(255,255,255,.30), transparent 34%), linear-gradient(135deg,#F87171 0%,#EF4444 56%,#B91C1C 100%)!important; border:1px solid rgba(255,255,255,.32)!important; box-shadow: 0 18px 44px rgba(239,68,68,.30), 0 0 0 6px rgba(239,68,68,.09), inset 0 1px 0 rgba(255,255,255,.34)!important; } /* Asegurar que texto e iconos no queden blancos sobre blanco */ html body #posNewSaleBtn .sm360-liquid-btn-text, html body #posNewExpenseBtn .sm360-liquid-btn-text, html body #posNewSaleBtn span, html body #posNewExpenseBtn span{ color:#fff!important; opacity:1!important; } html body #posNewSaleBtn .sm360-liquid-btn-icon, html body #posNewExpenseBtn .sm360-liquid-btn-icon{ background:rgba(255,255,255,.22)!important; border:1px solid rgba(255,255,255,.28)!important; box-shadow: 0 10px 24px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.42)!important; } html body #posNewSaleBtn .sm360-liquid-btn-icon::before, html body #posNewExpenseBtn .sm360-liquid-btn-icon::before{ background:#fff!important; opacity:1!important; } /* Hover animado sin reestructurar nada */ html body #posNewSaleBtn, html body #posNewExpenseBtn{ transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease, filter .18s ease!important; } html body #posNewSaleBtn:hover{ transform:translateY(-3px) scale(1.015)!important; filter:saturate(1.12) brightness(1.03)!important; box-shadow: 0 24px 56px rgba(22,163,74,.38), 0 0 0 7px rgba(22,163,74,.12), inset 0 1px 0 rgba(255,255,255,.42)!important; } html body #posNewExpenseBtn:hover{ transform:translateY(-3px) scale(1.015)!important; filter:saturate(1.12) brightness(1.03)!important; box-shadow: 0 24px 56px rgba(239,68,68,.38), 0 0 0 7px rgba(239,68,68,.12), inset 0 1px 0 rgba(255,255,255,.40)!important; } html body #posNewSaleBtn:active, html body #posNewExpenseBtn:active{ transform:translateY(0) scale(.99)!important; } /* Mejorar SOLO la sección real de estado de caja */ html body #posCashStatus{ position:relative!important; overflow:hidden!important; min-height:78px!important; border-radius:24px!important; padding:18px 20px 18px 74px!important; background: radial-gradient(circle at 4% 16%, rgba(94,43,255,.08), transparent 30%), radial-gradient(circle at 96% 10%, rgba(37,99,235,.055), transparent 28%), linear-gradient(135deg,rgba(255,255,255,.90),rgba(255,255,255,.68))!important; border:1px solid rgba(148,163,184,.20)!important; box-shadow: 0 18px 46px rgba(15,23,42,.075), inset 0 1px 0 rgba(255,255,255,.82)!important; backdrop-filter:blur(20px) saturate(1.18)!important; -webkit-backdrop-filter:blur(20px) saturate(1.18)!important; } /* Icono visual seguro dentro de estado de caja */ html body #posCashStatus::before{ content:""!important; position:absolute!important; left:20px!important; top:50%!important; transform:translateY(-50%)!important; width:42px!important; height:42px!important; border-radius:16px!important; background: linear-gradient(135deg,rgba(94,43,255,.18),rgba(255,255,255,.60))!important; border:1px solid rgba(94,43,255,.16)!important; box-shadow: 0 12px 26px rgba(94,43,255,.12), inset 0 1px 0 rgba(255,255,255,.86)!important; } html body #posCashStatus::after{ content:""!important; position:absolute!important; left:31px!important; top:50%!important; transform:translateY(-50%)!important; width:20px!important; height:20px!important; background:#5E2BFF!important; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='14' x='3' y='5' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M7 15h.01'/%3E%3Cpath d='M11 15h2'/%3E%3C/svg%3E") center/contain no-repeat!important; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='14' x='3' y='5' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M7 15h.01'/%3E%3Cpath d='M11 15h2'/%3E%3C/svg%3E") center/contain no-repeat!important; pointer-events:none!important; } html body #posCashStatus strong{ display:inline-flex!important; align-items:center!important; font-family:var(--sc-font-display,"General Sans",sans-serif)!important; font-size:16px!important; font-weight:850!important; letter-spacing:-.025em!important; color:#0F172A!important; margin-right:8px!important; } html body #posCashStatus .muted{ color:#64748B!important; font-weight:650!important; font-size:14px!important; } html body #posCashStatus .pos-status{ border-radius:999px!important; padding:5px 10px!important; font-size:12px!important; font-weight:850!important; background:rgba(100,116,139,.10)!important; color:#475569!important; border:1px solid rgba(148,163,184,.16)!important; } /* Acciones inline de caja dentro del bloque real */ html body #posCashStatus .pos-cash-actions-inline{ position:absolute!important; right:18px!important; top:50%!important; transform:translateY(-50%)!important; display:flex!important; align-items:center!important; gap:10px!important; } html body #posCashStatus #posInlineOpen, html body #posCashStatus #posInlineClose{ all:unset!important; box-sizing:border-box!important; cursor:pointer!important; min-height:46px!important; padding:0 18px!important; border-radius:16px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; font-family:var(--sc-font-display,"General Sans",sans-serif)!important; font-size:14px!important; font-weight:850!important; color:#fff!important; border:1px solid rgba(255,255,255,.30)!important; transition:transform .16s ease, box-shadow .16s ease, filter .16s ease!important; } html body #posCashStatus #posInlineOpen{ background:linear-gradient(135deg,#2563EB,#1D4ED8)!important; box-shadow: 0 16px 36px rgba(37,99,235,.26), inset 0 1px 0 rgba(255,255,255,.28)!important; } html body #posCashStatus #posInlineClose{ background:linear-gradient(135deg,#7C3AED,#5E2BFF)!important; box-shadow: 0 16px 36px rgba(94,43,255,.26), inset 0 1px 0 rgba(255,255,255,.28)!important; } html body #posCashStatus #posInlineOpen:hover, html body #posCashStatus #posInlineClose:hover{ transform:translateY(-2px)!important; filter:saturate(1.08)!important; } /* Responsive seguro del estado de caja */ @media(max-width:900px){ html body #posCashStatus{ padding:72px 16px 16px 16px!important; } html body #posCashStatus::before{ top:18px!important; transform:none!important; } html body #posCashStatus::after{ top:29px!important; transform:none!important; } html body #posCashStatus .pos-cash-actions-inline{ position:static!important; transform:none!important; margin-top:14px!important; justify-content:flex-start!important; } }