/* ==========================================================
   SpaMaster 360 v25.8 — POS Alert + Buttons FINAL
   Soluciona contaminación amarilla y fuerza botones Liquid Glass.
   ========================================================== */

/* 1) Nunca permitir que el contenedor del header sea alerta amarilla */
.pos-head.sm360-pos-alert,
.pos-head.pos-required-spa-alert,
.pos-head.pos-spa-warning,
#view-pos .pos-head.sm360-pos-alert,
#view-pos .pos-head.pos-required-spa-alert,
#view-pos .pos-head.pos-spa-warning{
    color:#0F172A!important;
    background:
        radial-gradient(circle at 8% 10%, rgba(94,43,255,.065), transparent 30%),
        radial-gradient(circle at 88% 8%, rgba(22,163,74,.045), transparent 26%),
        linear-gradient(135deg,rgba(255,255,255,.88),rgba(255,255,255,.68))!important;
    border:1px solid rgba(148,163,184,.18)!important;
    box-shadow:
        0 18px 44px rgba(15,23,42,.075),
        inset 0 1px 0 rgba(255,255,255,.78)!important;
}

/* 2) Reset de toda Caja POS para quitar amarillo/marrón heredado */
#view-pos .pos-head,
#view-pos .pos-filter,
#view-pos .pos-kpis,
#view-pos .pos-tabs,
#view-pos .pos-movement-panel,
#view-pos .pos-status-card,
#view-pos .pos-cash-state,
#view-pos .pos-open-state,
.pos-pro .pos-head,
.pos-pro .pos-filter,
.pos-pro .pos-kpis,
.pos-pro .pos-tabs,
.pos-pro .pos-movement-panel,
.pos-pro .pos-status-card,
.pos-pro .pos-cash-state,
.pos-pro .pos-open-state{
    color:#0F172A!important;
}

#view-pos .pos-head,
.pos-pro .pos-head{
    background:
        radial-gradient(circle at 8% 10%, rgba(94,43,255,.065), transparent 30%),
        radial-gradient(circle at 88% 8%, rgba(22,163,74,.045), transparent 26%),
        linear-gradient(135deg,rgba(255,255,255,.88),rgba(255,255,255,.68))!important;
    border-color:rgba(148,163,184,.18)!important;
}

/* 3) La alerta SOLO es el bloque exacto del mensaje */
#view-pos .sm360-pos-alert-final,
.pos-pro .sm360-pos-alert-final{
    display:block!important;
    width:100%!important;
    margin:12px 0 0!important;
    padding:12px 16px!important;
    border-radius:16px!important;
    color:#92400E!important;
    font-family:var(--sc-font-display,"General Sans",sans-serif)!important;
    font-size:13.5px!important;
    font-weight:760!important;
    line-height:1.35!important;
    background:
        linear-gradient(135deg,rgba(255,251,235,.94),rgba(255,255,255,.78))!important;
    border:1px solid rgba(245,158,11,.38)!important;
    box-shadow:
        0 12px 28px rgba(245,158,11,.10),
        inset 0 1px 0 rgba(255,255,255,.86)!important;
}

/* neutraliza clases viejas si quedaron en otros contenedores */
#view-pos .sm360-pos-alert:not(.sm360-pos-alert-final),
.pos-pro .sm360-pos-alert:not(.sm360-pos-alert-final),
#view-pos .pos-required-spa-alert:not(.sm360-pos-alert-final),
.pos-pro .pos-required-spa-alert:not(.sm360-pos-alert-final){
    color:inherit!important;
    background:inherit!important;
    border-color:inherit!important;
    box-shadow:inherit!important;
}

/* Mensajes inferiores normales */
#view-pos .pos-status-card,
#view-pos .pos-cash-state,
#view-pos .pos-open-state{
    background:
        linear-gradient(135deg,rgba(255,255,255,.86),rgba(255,255,255,.66))!important;
    border:1px solid rgba(148,163,184,.18)!important;
    color:#334155!important;
}

/* 4) BOTONES NUEVA VENTA / NUEVO GASTO — máxima prioridad */
html body #view-pos .pos-head #posNewSale,
html body #view-pos .pos-head button#posNewSale,
html body .pos-pro .pos-head #posNewSale,
html body button#posNewSale.sm360-pos-action,
html body #posNewSale{
    all:unset!important;
    box-sizing:border-box!important;
    cursor:pointer!important;
    position:relative!important;
    overflow:hidden!important;
    min-height:50px!important;
    height:50px!important;
    padding:0 18px!important;
    border-radius:18px!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;
    color:#fff!important;
    background:
        radial-gradient(circle at 25% 18%, rgba(255,255,255,.34), transparent 32%),
        linear-gradient(135deg, rgba(25,195,116,.98) 0%, rgba(18,158,84,.94) 55%, rgba(12,111,62,.98) 100%)!important;
    border:1px solid rgba(255,255,255,.36)!important;
    box-shadow:
        0 18px 42px rgba(24,179,104,.28),
        0 0 0 5px rgba(24,179,104,.08),
        inset 0 1px 0 rgba(255,255,255,.35)!important;
    backdrop-filter:blur(18px) saturate(1.18)!important;
    -webkit-backdrop-filter:blur(18px) saturate(1.18)!important;
    transition:transform .16s ease, box-shadow .16s ease, filter .16s ease!important;
}

html body #view-pos .pos-head #posNewExpense,
html body #view-pos .pos-head button#posNewExpense,
html body .pos-pro .pos-head #posNewExpense,
html body button#posNewExpense.sm360-pos-action,
html body #posNewExpense{
    all:unset!important;
    box-sizing:border-box!important;
    cursor:pointer!important;
    position:relative!important;
    overflow:hidden!important;
    min-height:50px!important;
    height:50px!important;
    padding:0 18px!important;
    border-radius:18px!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;
    color:#fff!important;
    background:
        radial-gradient(circle at 25% 18%, rgba(255,255,255,.32), transparent 32%),
        linear-gradient(135deg, rgba(255,82,82,.98) 0%, rgba(220,38,38,.94) 55%, rgba(153,27,27,.98) 100%)!important;
    border:1px solid rgba(255,255,255,.34)!important;
    box-shadow:
        0 18px 42px rgba(240,68,68,.28),
        0 0 0 5px rgba(240,68,68,.08),
        inset 0 1px 0 rgba(255,255,255,.32)!important;
    backdrop-filter:blur(18px) saturate(1.18)!important;
    -webkit-backdrop-filter:blur(18px) saturate(1.18)!important;
    transition:transform .16s ease, box-shadow .16s ease, filter .16s ease!important;
}

html body #posNewSale:hover,
html body #posNewExpense:hover{
    transform:translateY(-2px)!important;
    filter:saturate(1.08)!important;
}

/* Iconos forzados, incluso si el HTML tiene texto plano */
html body #posNewSale::before,
html body #posNewExpense::before{
    content:""!important;
    width:19px!important;
    height:19px!important;
    min-width:19px!important;
    background:#fff!important;
    display:inline-block!important;
    mask:var(--sm360-btn-icon) center / contain no-repeat!important;
    -webkit-mask:var(--sm360-btn-icon) center / contain no-repeat!important;
}

html body #posNewSale{
    --sm360-btn-icon: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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}
html body #posNewExpense{
    --sm360-btn-icon: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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m15 8 4 4-4 4'/%3E%3C/svg%3E");
}

/* si se inyectan spans, mantenerlos bien */
html body #posNewSale .sm360-action-icon,
html body #posNewExpense .sm360-action-icon{
    display:none!important;
}
html body #posNewSale .sm360-action-label,
html body #posNewExpense .sm360-action-label{
    color:#fff!important;
}

/* 5) Tabs con colores correctos */
html body #view-pos .pos-tab.income.active,
html body #view-pos .pos-tab[data-pos-tab="income"].active{
    background:linear-gradient(135deg,#18B368,#15803D)!important;
    color:#fff!important;
}
html body #view-pos .pos-tab.expense.active,
html body #view-pos .pos-tab[data-pos-tab="expenses"].active{
    background:linear-gradient(135deg,#F04444,#B91C1C)!important;
    color:#fff!important;
}
html body #view-pos .pos-tab.closings.active,
html body #view-pos .pos-tab[data-pos-tab="closings"].active{
    background:linear-gradient(135deg,#22104E,#5E2BFF)!important;
    color:#fff!important;
}
html body #view-pos .pos-tab.active *{color:#fff!important;}

/* 6) Selector Spa cuadrado Liquid Glass */
.sc-spa-card__icon{
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    border-radius:15px!important;
}
.sc-spa-card__icon::before{
    width:21px!important;
    height:21px!important;
}