/* ==========================================================
   SpaMaster 360 v26.1 — POS Button Template Fix
   El botón ya no usa success/danger; usa sm360-liquid-btn.
   ========================================================== */

.sm360-liquid-btn,
button.sm360-liquid-btn,
#posNewSale.sm360-liquid-btn,
#posNewExpense.sm360-liquid-btn{
    all:unset!important;
    box-sizing:border-box!important;
    cursor:pointer!important;
    position:relative!important;
    overflow:hidden!important;
    height:52px!important;
    min-height:52px!important;
    padding:0 18px 0 14px!important;
    border-radius:20px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:10px!important;
    font-family:var(--sc-font-display,"General Sans",sans-serif)!important;
    font-size:14px!important;
    font-weight:850!important;
    letter-spacing:-.02em!important;
    line-height:1!important;
    text-decoration:none!important;
    white-space:nowrap!important;
    border:1px solid rgba(255,255,255,.48)!important;
    backdrop-filter:blur(22px) saturate(1.22)!important;
    -webkit-backdrop-filter:blur(22px) saturate(1.22)!important;
    transition:transform .16s ease, box-shadow .16s ease, filter .16s ease!important;
}

.sm360-liquid-btn:hover{
    transform:translateY(-2px)!important;
    filter:saturate(1.08)!important;
}

.sm360-liquid-sale,
#posNewSale.sm360-liquid-sale{
    color:#0F8A4D!important;
    background:
        radial-gradient(circle at 25% 18%, rgba(255,255,255,.95), rgba(255,255,255,.56) 42%, rgba(236,253,245,.74) 100%)!important;
    border-color:rgba(24,179,104,.48)!important;
    box-shadow:
        0 18px 42px rgba(24,179,104,.20),
        0 0 0 6px rgba(24,179,104,.08),
        inset 0 1px 0 rgba(255,255,255,.96)!important;
}

.sm360-liquid-expense,
#posNewExpense.sm360-liquid-expense{
    color:#C92A2A!important;
    background:
        radial-gradient(circle at 25% 18%, rgba(255,255,255,.95), rgba(255,255,255,.56) 42%, rgba(254,242,242,.76) 100%)!important;
    border-color:rgba(240,68,68,.48)!important;
    box-shadow:
        0 18px 42px rgba(240,68,68,.20),
        0 0 0 6px rgba(240,68,68,.08),
        inset 0 1px 0 rgba(255,255,255,.96)!important;
}

.sm360-liquid-btn-icon{
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    border-radius:12px!important;
    display:grid!important;
    place-items:center!important;
    color:#fff!important;
    box-shadow:
        0 10px 22px var(--sm360-icon-glow),
        inset 0 1px 0 rgba(255,255,255,.34)!important;
}

.sm360-liquid-btn-icon::before{
    content:""!important;
    width:16px!important;
    height:16px!important;
    background:#fff!important;
    display:block!important;
    mask:var(--sm360-icon-mask) center / contain no-repeat!important;
    -webkit-mask:var(--sm360-icon-mask) center / contain no-repeat!important;
}

.sm360-liquid-btn-icon-sale{
    --sm360-icon-glow:rgba(24,179,104,.24);
    --sm360-icon-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.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
    background:linear-gradient(135deg,#22C55E,#15803D)!important;
}

.sm360-liquid-btn-icon-expense{
    --sm360-icon-glow:rgba(240,68,68,.24);
    --sm360-icon-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.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m15 8 4 4-4 4'/%3E%3C/svg%3E");
    background:linear-gradient(135deg,#F87171,#B91C1C)!important;
}

.sm360-liquid-btn-text{
    color:inherit!important;
    font-weight:850!important;
}

/* Desactivar pseudo iconos anteriores */
#posNewSale::before,
#posNewSale::after,
#posNewExpense::before,
#posNewExpense::after{
    display:none!important;
    content:none!important;
}

/* Botón Todos: icono más pequeño */
.sc-spa-card--todos .sc-spa-card__icon{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
}
.sc-spa-card--todos .sc-spa-card__icon::before{
    width:15px!important;
    height:15px!important;
}
