/* ==========================================================
   SpaMaster 360 v26.7 — FINAL Elegant POS Buttons
   IDs reales: #posNewSaleBtn / #posNewExpenseBtn
   Se carga al final y neutraliza v26.5.
   ========================================================== */

:root{
    --sm360-sale:#16A34A;
    --sm360-sale-dark:#0F7A3D;
    --sm360-expense:#EF4444;
    --sm360-expense-dark:#B91C1C;
}

/* Base final */
html body #view-pos #posNewSaleBtn,
html body #view-pos #posNewExpenseBtn,
html body #posNewSaleBtn,
html body #posNewExpenseBtn{
    all:unset!important;
    box-sizing:border-box!important;
    cursor:pointer!important;
    position:relative!important;
    isolation:isolate!important;
    overflow:hidden!important;

    height:46px!important;
    min-height:46px!important;
    padding:0 16px 0 12px!important;
    border-radius:16px!important;

    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:9px!important;

    font-family:var(--sc-font-display,"General Sans",sans-serif)!important;
    font-size:14px!important;
    font-weight:820!important;
    letter-spacing:-.018em!important;
    line-height:1!important;
    white-space:nowrap!important;
    text-decoration:none!important;

    backdrop-filter:blur(18px) saturate(1.12)!important;
    -webkit-backdrop-filter:blur(18px) saturate(1.12)!important;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease,
        background .18s ease,
        color .18s ease!important;
}

/* Venta final: glass blanco verdoso, no sólido */
html body #view-pos #posNewSaleBtn,
html body #posNewSaleBtn{
    color:var(--sm360-sale-dark)!important;
    background:
        linear-gradient(135deg,rgba(255,255,255,.86),rgba(236,253,245,.82))!important;
    border:1px solid rgba(22,163,74,.32)!important;
    box-shadow:
        0 10px 24px rgba(22,163,74,.13),
        inset 0 1px 0 rgba(255,255,255,.90)!important;
}

/* Gasto final: glass blanco rojizo, no sólido */
html body #view-pos #posNewExpenseBtn,
html body #posNewExpenseBtn{
    color:var(--sm360-expense-dark)!important;
    background:
        linear-gradient(135deg,rgba(255,255,255,.86),rgba(254,242,242,.82))!important;
    border:1px solid rgba(239,68,68,.32)!important;
    box-shadow:
        0 10px 24px rgba(239,68,68,.13),
        inset 0 1px 0 rgba(255,255,255,.90)!important;
}

/* Texto final: no blanco */
html body #posNewSaleBtn *,
html body #posNewSaleBtn .sm360-liquid-btn-text,
html body #posNewSaleBtn .sm360-btn-label,
html body #posNewSaleBtn span:not(.sm360-liquid-btn-icon){
    color:var(--sm360-sale-dark)!important;
    opacity:1!important;
}

html body #posNewExpenseBtn *,
html body #posNewExpenseBtn .sm360-liquid-btn-text,
html body #posNewExpenseBtn .sm360-btn-label,
html body #posNewExpenseBtn span:not(.sm360-liquid-btn-icon){
    color:var(--sm360-expense-dark)!important;
    opacity:1!important;
}

/* Iconos sutiles */
html body #posNewSaleBtn .sm360-liquid-btn-icon,
html body #posNewSaleBtn .sm360-btn-icon,
html body #posNewSaleBtn .sm360-liquid-btn-icon-sale{
    width:24px!important;
    height:24px!important;
    min-width:24px!important;
    border-radius:9px!important;
    background:linear-gradient(135deg,#16A34A,#0F7A3D)!important;
    border:0!important;
    box-shadow:none!important;
}

html body #posNewExpenseBtn .sm360-liquid-btn-icon,
html body #posNewExpenseBtn .sm360-btn-icon,
html body #posNewExpenseBtn .sm360-liquid-btn-icon-expense{
    width:24px!important;
    height:24px!important;
    min-width:24px!important;
    border-radius:9px!important;
    background:linear-gradient(135deg,#EF4444,#B91C1C)!important;
    border:0!important;
    box-shadow:none!important;
}

html body #posNewSaleBtn .sm360-liquid-btn-icon::before,
html body #posNewExpenseBtn .sm360-liquid-btn-icon::before,
html body #posNewSaleBtn .sm360-btn-icon::before,
html body #posNewExpenseBtn .sm360-btn-icon::before{
    width:13px!important;
    height:13px!important;
    background:#fff!important;
    opacity:1!important;
}

/* Hover elegante: leve elevación + color más presente */
html body #posNewSaleBtn:hover{
    transform:translateY(-1px)!important;
    color:#fff!important;
    background:
        linear-gradient(135deg,#18B368,#128A4D)!important;
    border-color:rgba(255,255,255,.34)!important;
    box-shadow:
        0 14px 32px rgba(22,163,74,.22),
        inset 0 1px 0 rgba(255,255,255,.34)!important;
}

html body #posNewExpenseBtn:hover{
    transform:translateY(-1px)!important;
    color:#fff!important;
    background:
        linear-gradient(135deg,#F05252,#C81E1E)!important;
    border-color:rgba(255,255,255,.32)!important;
    box-shadow:
        0 14px 32px rgba(239,68,68,.22),
        inset 0 1px 0 rgba(255,255,255,.32)!important;
}

html body #posNewSaleBtn:hover *,
html body #posNewExpenseBtn:hover *{
    color:#fff!important;
}

html body #posNewSaleBtn:hover .sm360-liquid-btn-icon,
html body #posNewExpenseBtn:hover .sm360-liquid-btn-icon{
    background:rgba(255,255,255,.20)!important;
    border:1px solid rgba(255,255,255,.24)!important;
}

html body #posNewSaleBtn:active,
html body #posNewExpenseBtn:active{
    transform:translateY(0)!important;
    box-shadow:
        0 8px 18px rgba(15,23,42,.08),
        inset 0 1px 0 rgba(255,255,255,.82)!important;
}

/* Quitar halos o pseudo elementos heredados */
html body #posNewSaleBtn::before,
html body #posNewSaleBtn::after,
html body #posNewExpenseBtn::before,
html body #posNewExpenseBtn::after{
    content:none!important;
    display:none!important;
}