/* ==========================================================
   SALEPRO 2026 MODERN UI
   Pegar al FINAL del CSS
========================================================== */

:root{
    --sp26-primary: #7357ff;
    --sp26-primary-2: #20c7e8;
    --sp26-primary-3: #00d084;
    --sp26-bg: #f4f7fb;
    --sp-surface: rgba(255,255,255,.86);
    --sp-border: rgba(148,163,184,.22);
    --sp-text: #182235;
    --sp-muted: #667085;
    --sp-sidebar: #090f1d;
    --sp-sidebar-2: #111827;
    --sp-radius: 18px;
    --sp-radius-sm: 12px;
    --sp-shadow: 0 24px 70px rgba(15,23,42,.10);
    --sp-shadow-soft: 0 14px 34px rgba(15,23,42,.07);
}

html{
    scroll-behavior: smooth;
}

body{
    background:
        radial-gradient(circle at 8% 0%, rgba(115,87,255,.16), transparent 30%),
        radial-gradient(circle at 92% 4%, rgba(32,199,232,.16), transparent 28%),
        linear-gradient(180deg, #f8fbff 0%, #eef3f9 100%) !important;
    color: var(--sp-text) !important;
}

/* Header glass */
nav.navbar,
.header{
    background: rgba(255,255,255,.74) !important;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid rgba(148,163,184,.18);
    box-shadow: 0 12px 36px rgba(15,23,42,.06);
    min-height: 78px;
    padding: 0 26px !important;
}

nav.navbar a{
    color: #334155 !important;
    font-weight: 750;
}

nav.navbar a:hover{
    color: var(--sp26-primary) !important;
}

nav.navbar a.menu-btn{
    width: 48px;
    height: 48px;
    line-height: 48px;
    border-radius: 14px !important;
    background: rgba(255,255,255,.9) !important;
    border: 1px solid rgba(115,87,255,.28);
    color: var(--sp26-primary) !important;
    box-shadow: 0 14px 28px rgba(115,87,255,.12);
}

.brand-big img,
.logo img{
    max-height: 54px;
    filter: drop-shadow(0 12px 20px rgba(37,99,235,.16));
}

/* POS button */
.nav-link.pos,
.btn-pos{
    background:
        linear-gradient(135deg, var(--sp26-primary), #8b5cf6) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 16px !important;
    min-height: 54px;
    display: inline-flex !important;
    align-items: center;
    gap: 9px;
    padding: 0 22px !important;
    box-shadow: 0 18px 34px rgba(115,87,255,.28);
}

/* Sidebar 2026 */
.side-navbar{
    width: 286px !important;
    padding-left: 0 !important;
    background:
        radial-gradient(circle at top left, rgba(115,87,255,.24), transparent 34%),
        linear-gradient(180deg, var(--sp-sidebar), var(--sp-sidebar-2)) !important;
    border-right: 1px solid rgba(255,255,255,.08);
    box-shadow: 6px 0 34px rgba(15,23,42,.18);
    overflow-y: auto;
    overflow-x: hidden;
}

.side-navbar::-webkit-scrollbar{
    width: 6px;
}

.side-navbar::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,.20);
    border-radius: 999px;
}

.side-navbar .side-menu{
    padding: 24px 0 30px !important;
}

.side-navbar li a{
    min-height: 50px;
    display: flex !important;
    align-items: center;
    gap: 14px;
    margin: 6px 14px !important;
    padding: 12px 15px !important;
    border-radius: 16px !important;
    color: #dbeafe !important;
    background: transparent !important;
    font-size: 15px !important;
    font-weight: 760 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
}

.side-navbar li a i{
    width: 24px;
    min-width: 24px;
    margin: 0 !important;
    text-align: center;
    color: #a996ff !important;
    font-size: 18px !important;
    line-height: 1 !important;
}

.side-navbar li a span{
    flex: 1;
    color: inherit !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.side-navbar li a[data-toggle="collapse"]::before{
    right: 16px;
    color: rgba(219,234,254,.8);
}

.side-navbar li a:hover{
    background: rgba(255,255,255,.09) !important;
    color: #fff !important;
    transform: translateX(2px);
}

.side-navbar li.active > a,
.side-navbar li.mm-active > a,
.side-navbar li.open > a,
.side-navbar li a[aria-expanded="true"]{
    background:
        linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,246,255,.94)) !important;
    color: #5947d6 !important;
    box-shadow: 0 16px 34px rgba(0,0,0,.18);
}

.side-navbar li.active > a i,
.side-navbar li.mm-active > a i,
.side-navbar li.open > a i,
.side-navbar li a[aria-expanded="true"] i{
    color: #5947d6 !important;
}

/* Submenu */
.side-navbar li ul{
    background: rgba(255,255,255,.97) !important;
    border: 1px solid rgba(148,163,184,.20);
    box-shadow: 0 18px 40px rgba(15,23,42,.18);
    border-radius: 18px !important;
    margin: 10px 14px 16px !important;
    padding: 12px 0 !important;
}

.side-navbar li ul li a{
    min-height: auto;
    color: #475569 !important;
    margin: 2px 10px !important;
    padding: 10px 16px 10px 50px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 730 !important;
    white-space: normal !important;
}

.side-navbar li ul li a:hover,
.side-navbar li ul li.active > a{
    background: #eef2ff !important;
    color: #4f46e5 !important;
    transform: none;
}

.side-navbar li ul li a::before{
    display: none !important;
}

/* Layout */
.page{
    width: calc(100% - 286px) !important;
    margin-left: 286px !important;
    background: transparent !important;
    transition: all .25s ease;
}

.page.active{
    width: 100% !important;
    margin-left: 0 !important;
}

.container-fluid{
    padding: 28px 32px !important;
}

/* Page title */
section header h1,
section header h2,
.page-title{
    color: var(--sp-text) !important;
    font-weight: 850 !important;
    letter-spacing: 0;
}

/* Cards */
.card,
.dashboard-header .card,
.statistics div[class*='col-'] .card,
.table-responsive,
.form-container,
.modal-content{
    background: var(--sp-surface) !important;
    border: 1px solid var(--sp-border) !important;
    border-radius: var(--sp-radius) !important;
    box-shadow: var(--sp-shadow-soft) !important;
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.card{
    overflow: hidden;
    margin-bottom: 26px;
}

.card:hover,
.dashboard-header .card:hover,
.statistics div[class*='col-'] .card:hover{
    box-shadow: var(--sp-shadow) !important;
}

.card-header{
    background: rgba(255,255,255,.72) !important;
    border-bottom: 1px solid rgba(148,163,184,.18) !important;
    padding: 1.1rem 1.3rem !important;
}

.card-body{
    padding: 1.45rem !important;
}

/* Dashboard metrics */
.dashboard-counts .card,
.dashboard-counts .count-title{
    min-height: 154px;
    border-radius: 20px !important;
    transition: transform .18s ease, box-shadow .18s ease;
}

.dashboard-counts .card:hover,
.dashboard-counts .count-title:hover{
    transform: translateY(-3px);
}

.dashboard-counts .count-number{
    font-size: 2.75rem;
    font-weight: 850;
    color: #1f2937;
}

.dashboard-counts strong,
.dashboard-counts .count-title span{
    color: var(--sp-muted);
    font-weight: 800;
}

.dashboard-counts .icon,
.statistics .income .icon{
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(135deg, rgba(115,87,255,.16), rgba(32,199,232,.14));
    color: var(--sp26-primary) !important;
}

/* Buttons */
.btn{
    border-radius: 14px !important;
    font-weight: 800 !important;
    transition: all .18s ease;
    box-shadow: none !important;
}

.btn:hover{
    transform: translateY(-1px);
}

.btn-primary{
    background: linear-gradient(135deg, var(--sp26-primary), #8b5cf6) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 16px 30px rgba(115,87,255,.22) !important;
}

.btn-success{
    background: linear-gradient(135deg, #00d084, #16d39a) !important;
    border-color: transparent !important;
}

.btn-danger{
    background: linear-gradient(135deg, #ff5b7f, #ef4444) !important;
    border-color: transparent !important;
}

.btn-default,
.bootstrap-select .btn-default{
    background: rgba(255,255,255,.92) !important;
    border: 1px solid rgba(148,163,184,.26) !important;
    color: #475569 !important;
}

/* Forms */
.form-control,
.bootstrap-select .dropdown-toggle,
.selectpicker,
.input-group-text{
    min-height: 46px;
    border-radius: 14px !important;
    border: 1px solid rgba(148,163,184,.30) !important;
    background: rgba(255,255,255,.92) !important;
    box-shadow: none !important;
}

.form-control:focus,
.bootstrap-select .dropdown-toggle:focus{
    border-color: var(--sp26-primary) !important;
    box-shadow: 0 0 0 4px rgba(115,87,255,.12) !important;
}

label{
    color: var(--sp-text);
    font-weight: 800;
}

/* Tables */
.table{
    background: transparent !important;
    color: #475569;
}

.table thead th{
    background: rgba(248,250,252,.82) !important;
    color: #475569;
    border-top: 0 !important;
    border-bottom: 1px solid rgba(148,163,184,.22) !important;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.table td{
    vertical-align: middle !important;
    border-color: rgba(226,232,240,.80) !important;
}

.table-hover tbody tr{
    transition: all .15s ease;
}

.table-hover tbody tr:hover{
    background: rgba(238,242,255,.72) !important;
}

/* Dropdowns */
.dropdown-menu{
    border: 1px solid rgba(148,163,184,.22) !important;
    border-radius: 16px !important;
    box-shadow: var(--sp-shadow) !important;
    overflow: hidden;
}

.dropdown-item,
nav.navbar .dropdown-menu a{
    border-radius: 10px;
}

.dropdown-item:hover,
nav.navbar .dropdown-menu a:hover{
    background: #eef2ff !important;
    color: #4f46e5 !important;
}

/* Login */
.login-page,
.register-page{
    background:
        radial-gradient(circle at 12% 4%, rgba(115,87,255,.18), transparent 32%),
        radial-gradient(circle at 88% 90%, rgba(32,199,232,.16), transparent 30%),
        #f4f7fb !important;
}

.login-page .form-inner,
.register-page .form-inner{
    border-radius: 24px !important;
    border: 1px solid rgba(148,163,184,.22);
    background: rgba(255,255,255,.88) !important;
    box-shadow: 0 30px 90px rgba(15,23,42,.16) !important;
    backdrop-filter: blur(16px);
}

/* Responsive */
@media (max-width: 1199px){
    .page{
        width: 100% !important;
        margin-left: 0 !important;
    }

    .side-navbar{
        left: -286px;
    }

    .side-navbar.show-sm{
        left: 0 !important;
    }
}

@media (max-width: 991px){
    nav.navbar,
    .header{
        min-height: 66px;
        padding: 0 14px !important;
    }

    .brand-big img,
    .logo img{
        max-height: 42px;
    }

    .container-fluid{
        padding: 18px !important;
    }

    .dashboard-counts .count-number{
        font-size: 2rem;
    }
}