/*====================================================
        FERRE PREMIUM ERP
        Version 2.0
====================================================*/

:root{

/*=====================
    COLORES
======================*/

--primary:#2F80ED;
--primary-hover:#1E6FE8;

--secondary:#5B8DEF;

--success:#22C55E;

--warning:#F59E0B;

--danger:#EF4444;

--purple:#7C3AED;

--dark:#23374D;

--text:#1F2937;

--text-light:#6B7280;

--background:#F5F8FC;

--card:#FFFFFF;

--border:#E8EDF5;


/*=====================
    SOMBRAS
======================*/

--shadow-sm:
0 2px 10px rgba(15,23,42,.05);

--shadow:
0 10px 30px rgba(15,23,42,.08);

--shadow-lg:
0 20px 60px rgba(15,23,42,.12);


/*=====================
    BORDES
======================*/

--radius:16px;

--radius-sm:12px;

--radius-lg:22px;


/*=====================
    TRANSICIONES
======================*/

--transition:.25s ease;



/*=====================
    PAGINAS
======================*/

--page-padding-top:20px;
--page-padding-right:28px;
--page-padding-bottom:28px;
--page-padding-left:30px;

--page-gap:20px;
}
/*====================================================
        FERRE PREMIUM DESIGN SYSTEM
====================================================*/




/*==============================
    BODY
===============================*/

body{

    background:var(--background);

    color:var(--text);

    font-family:'Inter',sans-serif;

    font-size:14px;

    font-weight:500;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}

.card{
    box-sizing:border-box;
    border:1px solid #EEF2F7;
    border-radius:18px;
    background:#FFFFFF;
    box-shadow:
        0 2px 8px rgba(15,23,42,.03),
        0 12px 30px rgba(15,23,42,.05);

    transition:.25s ease;

}

.card:hover{

    transform:translateY(-2px);

    box-shadow:
        0 8px 24px rgba(15,23,42,.08);

}

.btn{

border-radius:12px;

font-weight:600;

transition:.25s;

}

.btn-primary{

background:#2F80ED;

border:none;

}

.btn-primary:hover{

background:#1E6FE8;

}

/*====================================================
        FERRE LAYOUT ERP
====================================================*/

/*
|--------------------------------------------------------------------------
| Layout principal del ERP
|--------------------------------------------------------------------------
| Aquí se controla el espaciado general del sistema.
| Ningún módulo (Dashboard, Productos, Clientes, etc.)
| debe definir márgenes globales.
|--------------------------------------------------------------------------
*/

.content-wrapper{

    margin-top:72px !important;

    background:var(--background);

    transition:var(--transition);

}

.content-header .container-fluid,
.content .container-fluid{

    padding-left:30px !important;
    padding-right:30px !important;

}

/*
|--------------------------------------------------------------------------
| Contenedor base para TODOS los módulos
|--------------------------------------------------------------------------
*/

.ferre-container{

    width:100%;

    padding:24px 30px 30px;

    box-sizing:border-box;

}

/*
|--------------------------------------------------------------------------
| Cabecera estándar
|--------------------------------------------------------------------------
*/

.ferre-page-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:24px;

}

/*
|--------------------------------------------------------------------------
| Contenido
|--------------------------------------------------------------------------
*/

.ferre-page-content{

    display:flex;

    flex-direction:column;

    gap:24px;

}

/*====================================================
SIDEBAR FERRE PREMIUM
====================================================*/

.ferre-sidebar{

    width:270px;

    background:linear-gradient(180deg,#2F80ED 0%,#4A97FF 100%);

    border-right:0;

    box-shadow:8px 0 30px rgba(30,64,175,.18);

    /* NUEVO */
    border-top-right-radius:28px;
    border-bottom-right-radius:28px;
    border-top-left-radius:0;
    border-bottom-left-radius:0;

    overflow:hidden;

}

/*========== HEADER SIDEBAR ==========*/

.ferre-sidebar .brand-link{

    display:flex;
    align-items:center;
    width:100%;
    height:95px;
    padding:12px 18px;
    background:#fff;
    overflow:hidden;
    box-sizing:border-box;

    /* NUEVO */
    border-top-right-radius:28px;
    border-bottom-right-radius:22px;

}
/*======== CAMBIO TAMAÑO DE LOGO =========*/
.premium-logo-img{         

    width:100px;
    height:100px;
    object-fit:contain;
    flex:0 0 66px;

}

.premium-brand-info{

    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
    padding-left:10px;

}
/*======== CAMBIOS TAMAÑO DE LETRA =======*/
.premium-brand-title{

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    width:100%;
    line-height:1.05;
    font-family:"Segoe UI","Inter","Poppins",sans-serif;
    color:#111827;

}

.premium-brand-title span{

    width:100%;
    text-align:center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

}

.premium-brand-title span:first-child{

    font-size:19px;
    font-weight:800;
    letter-spacing:.6px;
    text-transform:uppercase;

}

.premium-brand-title span:last-child{

    font-size:15px;
    font-weight:600;
    letter-spacing:.3px;
    color:#374151;
    margin-top:3px;

}
.ferre-sidebar .sidebar{

    display:flex;
    flex-direction:column;

    min-height:calc(100vh - 95px);

    overflow-y:auto;
    overflow-x:hidden;

    padding:16px 10px 30px;

    box-sizing:border-box;

}

.ferre-sidebar .nav-sidebar>.nav-item{

    margin-bottom:6px;

}

.ferre-sidebar .nav-link{

    border-radius:14px;

    color:#ffffff;

    min-height:46px;

    align-items:center;


    display:flex;
}

.ferre-sidebar .nav-link.active{

    background:#ffffff;

    color:#2F80ED !important;

}

.ferre-sidebar .nav-link:hover{

    background:rgba(255,255,255,.16);

}

.ferre-sidebar .nav-icon{

    width:28px;

    text-align:center;

}

/*==================================================
ACCESOS RAPIDOS
==================================================*/

.premium-shortcuts{

    width:calc(100% - 24px);

    margin:18px auto;

    padding:14px;

    background:#ffffff;

    border-radius:16px;

    box-shadow:0 8px 24px rgba(0,0,0,.08);

}

.shortcut-title{

    font-size:14px;

    font-weight:700;

    color:#1F2937;

    margin-bottom:12px;

}

.shortcut-item{

    display:flex;

    align-items:center;

    gap:12px;

    height:46px;

    padding:0 14px;

    margin-bottom:8px;

    border:1px solid #ECEFF5;

    border-radius:10px;

    background:#fff;

    color:#374151;

    font-size:13px;

    text-decoration:none;

    transition:.25s;

}

.shortcut-item i{

    width:22px;

    font-size:19px;

    text-align:center;

    margin-right:4px;

}

.shortcut-item span{

    font-size:15px;

    font-weight:600;

    color:#374151;

}

.shortcut-item:hover{

    background:#F8FBFF;

    border-color:#D9E8FF;

    color:#2F80ED;

}

/*==========================================
MODO CLARO PREMIUM
==========================================*/

.premium-theme{

    width:calc(100% - 24px);

    height:58px;

    margin:18px auto;

    padding:0 16px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    background:rgba(255,255,255,.22);

    border:1px solid rgba(255,255,255,.20);

    border-radius:18px;

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

}

.theme-left{

    display:flex;

    align-items:center;

    height:100%;

    gap:10px;

}
.theme-icon{

    font-size:14px;

    color:#203A8F;

    width:18px;

    text-align:center;

}

.theme-left span{

    font-size:13px;

    font-weight:600;

    color:#22304A;

    margin-top:-1px;

}

.theme-switch{

    position:relative;

    width:62px;

    height:32px;

    margin:0;

    flex-shrink:0;

}

.theme-switch input{

    display:none;

}

.theme-slider{

    position:absolute;

    inset:0;

    display:block;

    background:#2563EB;

    border-radius:32px;

}

.theme-slider:before{

    content:"";

    position:absolute;

    width:26px;

    height:26px;

    left:3px;

    top:3px;

    background:#fff;

    border-radius:50%;

    transition:.25s;

}

.theme-switch input:checked + .theme-slider:before{

    transform:translateX(30px);

}

/*==================================================
FOOTER
==================================================*/

.premium-footer{

    width:calc(100% - 24px);

    margin:12px auto 0;

    color:#ffffff;

    font-size:12px;

    line-height:1.6;
	
	padding-bottom:22px;

}

.premium-footer div:first-child{

    opacity:.95;

}

.premium-version{

    opacity:.8;

    margin-top:2px;

}

.sidebar-bottom{

    margin-top:auto;

    flex-shrink:0;

    padding-top:8px;

    padding-bottom:24px;

}

/*==================================================
HEADER PREMIUM
==================================================*/

.ferre-topbar{

position:fixed;

top:0;

left:270px;

right:0;

height:72px;

padding:0 26px;

background:#fff;

display:flex;

align-items:center;

justify-content:space-between;

border-bottom:1px solid #EEF2F7;

border-bottom-left-radius:24px;

box-shadow:
0 8px 30px rgba(15,23,42,.05);

z-index:999;

}

.ferre-top-left{

display:flex;

align-items:center;

gap:18px;

min-width:210px;

}

.ferre-toggle{

width:42px;

height:42px;

border-radius:14px;

border:1px solid #EEF2F7;

background:#fff;

display:flex;

align-items:center;

justify-content:center;

font-size:18px;

color:#374151;

box-shadow:
0 2px 10px rgba(15,23,42,.05);

cursor:pointer;

}

.ferre-top-left h2{

    margin:0;

    font-family:'Inter',sans-serif;

    font-size:17px;

    font-weight:700;

    letter-spacing:-0.35px;

    color:#1F2937;

}

.ferre-top-center{

flex:1;

display:flex;

justify-content:center;

padding:0 34px;

max-width:620px;

}

.ferre-search{

height:46px;

background:#fff;

border:1px solid #E8EDF5;

border-radius:28px;

display:flex;

align-items:center;

padding:0 18px;

gap:90px;

box-shadow:
0 2px 8px rgba(15,23,42,.04);

transition:.25s;

}

.ferre-search:hover{

border-color:#D7E4F7;

}

.ferre-search:focus-within{

border-color:#2F80ED;

box-shadow:
0 0 0 4px rgba(47,128,237,.08);

}

.ferre-search i{

font-size:18px;

color:#9CA3AF;

flex-shrink:0;

}

.ferre-search input{

    flex:1;

    border:0;

    outline:none;

    background:transparent;

    font-family:'Inter',sans-serif;

    font-size:15px;

    font-weight:500;

    color:#374151;

}

.ferre-search input::placeholder{

    font-family:'Inter',sans-serif;

    font-size:15px;

    font-weight:500;

    color:#9CA3AF;

}

.ferre-search button{

border:none;

background:transparent;

}

.ferre-top-right{

display:flex;

align-items:center;

margin-left:auto;

height:72px;

gap:0;

}

.ferre-header-item{

display:flex;

align-items:center;

justify-content:center;

height:72px;

padding:0 20px;

border-left:1px solid #EEF2F7;

}

.ferre-notification{

position:relative;

display:flex;

align-items:center;

justify-content:center;

width:42px;

height:42px;

border-radius:12px;

cursor:pointer;

transition:.25s;

}

.ferre-notification:hover{

background:#F8FAFD;

}

.ferre-badge{

position:absolute;

top:4px;

right:4px;

width:18px;

height:18px;

border-radius:50%;

background:#F44336;

color:#fff;

font-size:10px;

font-weight:700;

display:flex;

align-items:center;

justify-content:center;

border:2px solid #fff;

}

.ferre-icon{

position:relative;

width:42px;

height:42px;

display:flex;

align-items:center;

justify-content:center;

border-radius:12px;

color:#374151;

font-size:19px;

text-decoration:none;

}

.ferre-icon:hover{

background:#f3f7ff;

}

.ferre-icon span{

position:absolute;

top:2px;

right:2px;

width:18px;

height:18px;

background:#ef4444;

color:#fff;

border-radius:50%;

font-size:10px;

display:flex;

align-items:center;

justify-content:center;

}
/*==========================================
SUCURSAL PREMIUM
==========================================*/

.ferre-branch{

    position:relative;

    margin:0 14px;

}

.ferre-branch-card{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:14px;

    width:238px;

    height:60px;

    padding:0 16px;

    background:#FFFFFF;

    border:1px solid #E7EDF5;

    border-radius:18px;

    cursor:pointer;

    transition:.25s ease;

    box-shadow:0 4px 16px rgba(15,23,42,.05);

}

.ferre-branch-card:hover{

    border-color:#D4E4FF;

    box-shadow:0 10px 28px rgba(37,99,235,.10);

    transform:translateY(-1px);

}

.ferre-branch-left{

    display:flex;

    align-items:center;

    gap:14px;

    min-width:0;

}

.ferre-branch-icon{

    width:42px;

    height:42px;

    border-radius:14px;

    background:
        linear-gradient(
            180deg,
            #F5F9FF 0%,
            #E7F0FF 100%
        );

    border:1px solid #D7E6FF;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.90),
        0 6px 14px rgba(37,99,235,.08);

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;
}

.ferre-branch-icon [data-lucide]{

    width:20px;

    height:20px;

    stroke:#2563EB;

}

.ferre-branch-info{

    display:flex;

    flex-direction:column;

    min-width:0;

}

.branch-label{

    font-size:11px;

    font-weight:600;

    color:#94A3B8;

}

.branch-name{

    margin-top:2px;

    font-size:15px;

    font-weight:800;

    letter-spacing:.35px;

    color:#111827;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

.ferre-branch-right{

    display:flex;

    align-items:center;

    justify-content:center;

    margin-left:6px;

}

.branch-arrow{

    font-size:13px;

    color:#64748B;

    transition:.25s ease;

}

.branch-arrow.rotate-arrow{

    transform:rotate(180deg);

}

/*==========================================
NOTIFICACIONES PREMIUM
==========================================*/

.ferre-notification{

    position:relative;

}

.ferre-notification-dropdown{

    position:absolute;

    top:calc(100% + 12px);

    right:0;

    width:340px;

    display:none;

    background:#FFFFFF;

    border:1px solid #E5E7EB;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 20px 45px rgba(15,23,42,.18);

    z-index:99999;

}

.notification-header{

    display:flex;

    align-items:center;

    gap:14px;

    padding:18px;

    background:linear-gradient(180deg,#FBFDFF,#F5F8FF);

    border-bottom:1px solid #EEF2F7;

}

.notification-icon{

    width:46px;

    height:46px;

    border-radius:14px;

    background:#EEF4FF;

    display:flex;

    align-items:center;

    justify-content:center;

}

.notification-icon [data-lucide]{

    width:22px;

    height:22px;

    stroke:#2563EB;

}

.notification-title{

    display:flex;

    flex-direction:column;

}

.notification-title strong{

    font-size:16px;

    font-weight:800;

    color:#111827;

}

.notification-title span{

    margin-top:2px;

    font-size:12px;

    color:#64748B;

}

.notification-body{

    max-height:360px;

    overflow-y:auto;

    padding:12px;

}

.notification-item{

    display:flex;

    align-items:flex-start;

    gap:14px;

    padding:14px;

    border-radius:14px;

    cursor:pointer;

    transition:.25s;

}

.notification-item:hover{

    background:#F8FBFF;

}

.notification-item-icon{

    width:42px;

    height:42px;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

}

.notification-item-icon.stock{

    background:#FFF7ED;

    color:#EA580C;

}

.notification-item-icon.purchase{

    background:#EFF6FF;

    color:#2563EB;

}

.notification-item-icon.cash{

    background:#ECFDF5;

    color:#059669;

}

.notification-item-icon.client{

    background:#F5F3FF;

    color:#7C3AED;

}

.notification-footer{

    border-top:1px solid #EEF2F7;

    padding:14px 18px;

    text-align:center;

}

.notification-footer a{

    color:#2563EB;

    font-size:13px;

    font-weight:700;

    text-decoration:none;

    display:inline-flex;

    align-items:center;

    gap:8px;

    transition:.25s;

}

.notification-footer a:hover{

    color:#1D4ED8;

    gap:12px;

}

.notification-item-info{

    display:flex;

    flex-direction:column;

}

.notification-item-info strong{

    font-size:14px;

    font-weight:700;

    color:#111827;

}

.notification-item-info span{

    margin-top:4px;

    font-size:12px;

    color:#64748B;

}

/*==========================================
USUARIO PREMIUM
==========================================*/
.ferre-user-info{

display:flex;

flex-direction:column;

line-height:1.08;

}

.user-name{

    font-family:'Inter',sans-serif;

    font-size:16px;

    font-weight:700;

    color:#1F2937;

}

.user-email{

    margin-top:3px;

    font-family:'Inter',sans-serif;

    font-size:12px;

    font-weight:500;

    color:#6B7280;

}

.user-arrow{

font-size:12px;

margin-left:6px;

color:#374151;

}

.ferre-user-top{

display:flex;

align-items:center;

gap:14px;

}

.ferre-user-top img{

width:42px;

height:42px;

border-radius:50%;

object-fit:cover;

}

.ferre-user-top strong{

font-size:14px;

font-weight:700;

}

.ferre-user-top small{

display:block;

font-size:11px;

color:#6b7280;

}



/*==========================================
ICONOS LUCIDE
==========================================*/

[data-lucide]{

    width:20px;

    height:20px;

    stroke:#1f2937;

    stroke-width:2.2;

    display:block;

}

.ferre-toggle [data-lucide]{

    width:24px;

    height:24px;

}

.ferre-search button [data-lucide]{

    width:21px;

    height:21px;

    stroke:#9CA3AF;

}

.ferre-icon [data-lucide]{

    width:21px;

    height:21px;

    stroke:#111827;

}

.ferre-branch-icon [data-lucide]{

    width:18px;

    height:18px;

}

.branch-arrow[data-lucide],
.user-arrow[data-lucide]{

    width:16px;

    height:16px;

    stroke:#4B5563;

}

/*====================================================
                DASHBOARD PREMIUM
====================================================*/

.dashboard-premium{

    background:#F5F8FC;

    padding-top:20px;
    padding-right:8px;
    padding-bottom:28px;
    padding-left:40px;

    min-height:100vh;

}


/*==================================================
        DASHBOARD LAYOUT
==================================================*/



.dashboard-top{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-bottom:18px;

}

.dashboard-greeting h1{

    margin:0;

    font-family:"Inter",sans-serif;

    font-size:21px;

    font-weight:800;

    color:#111827;

    letter-spacing:-0.4px;

    line-height:1.2;

}

.dashboard-greeting h1 span{

    font-size:28px;

}

.dashboard-greeting p{

    margin-top:6px;

    font-size:15px;

    font-weight:500;

    color:#6B7280;

}

.wave{

    font-size:26px;

    margin-left:4px;

}

.dashboard-date{

    height:46px;

    padding:0 18px;

    display:flex;

    align-items:center;

    gap:12px;

    background:#fff;

    border:1px solid #E8EDF5;

    border-radius:14px;

    box-shadow:

        0 3px 12px rgba(15,23,42,.05);

}

.dashboard-date i:first-child{

    color:#2563EB;

}

.dashboard-date span{

    color:#2563EB;

    font-size:14px;

    font-weight:700;

}

.dashboard-date .fa-calendar-alt{

    color:#2563EB;

    font-size:15px;

}

.dashboard-date .fa-chevron-down{

    color:#6B7280;

    font-size:12px;

}

.dashboard-summary{

    display:grid;

    grid-template-columns:repeat(4,minmax(145px,1fr));

    gap:18px;

}

/*====================================================
            TARJETAS DASHBOARD PREMIUM
====================================================*/

.dashboard-card{

    position:relative;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    height:220px;

    padding:24px;

    background:#fff;

    border:1px solid #E8EDF5;

    border-radius:18px;

    box-shadow:0 8px 26px rgba(15,23,42,.05);

    transition:.25s;

}

.dashboard-card:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 40px rgba(15,23,42,.10);

}

.dashboard-card-top{

    display:flex;
    flex-direction:column;

    align-items:flex-start;

    gap:5px;

}

.dashboard-card-icon{

    width:35px;
    height:35px;

    border-radius:16px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:24px;

    color:#fff;

    flex-shrink:0;

}

.card-blue .dashboard-card-icon{

    background:#2563EB;

}

.card-green .dashboard-card-icon{

    background:#22C55E;

}

.card-orange .dashboard-card-icon{

    background:#F59E0B;

}

.card-purple .dashboard-card-icon{

    background:#7C3AED;

}

.dashboard-card-text{

    display:flex;
    flex-direction:column;

    gap:5px;

}

.dashboard-card-title{

    margin:0;

    font-size:10px;

    font-weight:700;

    color:#374151;

    line-height:1.35;

}

.dashboard-card-text h2{

    margin:4px 0;

    font-size:14px;

    font-weight:800;

    letter-spacing:-1px;

    line-height:1;

    color:#111827;

}

.dashboard-card-extra{

    font-size:14px;

    font-weight:600;

    line-height:1.45;

    color:#22C55E;

}

.dashboard-card-extra.danger{

    color:#F97316;

}

.dashboard-card-extra.purple{

    color:#7C3AED;

}

.dashboard-card-bottom{

    margin-top:auto;

    padding-top:4px;

    padding-bottom:3px;

    border-top:1px solid #EEF2F7;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.dashboard-card-bottom span{

    font-size:15px;

    font-weight:700;

    color:#2563EB;

}

.dashboard-card-bottom i{

    font-size:15px;

    color:#2563EB;

    transition:.25s;

}

.dashboard-card:hover .dashboard-card-bottom i{

    transform:translateX(5px);

}

/*====================================================
            DASHBOARD GRID
====================================================*/

.dashboard-layout{

    display:grid;

    grid-template-columns:minmax(0,1fr) 560px;

    gap:24px;

    align-items:start;

    
}


.dashboard-left{

    min-width:0;

    display:flex;

    flex-direction:column;

    gap:10px;

}

.dashboard-right{

    width:560px;

    min-width:560px;

    position:sticky;

    top:92px;

    align-self:start;

}

.dashboard-pos{

    width:100%;

}

/*=====================================================
=            DASHBOARD POS PREMIUM
=====================================================*/

.dashboard-pos-card{

    background:#fff;

    border-radius:14px;

    overflow:hidden;

    border:1px solid #E9EEF6;

    box-shadow:0 10px 35px rgba(15,23,42,.06);

    display:flex;
	
    flex-direction:column;
	
    
}

.dashboard-pos-body{

    display:flex;

    flex-direction:column;

    flex:1;

}

.dashboard-pos-header{

    height:45px;

    background:#1E5EFF;

    color:#fff;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 16px;

    font-size:22px;

    font-weight:700;

}

.dashboard-pos-header span{

    font-size:15px;

    font-weight:700;

}

.dashboard-pos-header i{

font-size:16px;

}

.dashboard-pos-tabs{

    display:flex;

    background:#fff;

    border-bottom:1px solid #EEF2F7;

}

.dashboard-pos-tabs button{

    flex:1;

    height:44px;

    border:none;

    background:#fff;

    font-size:14px;

    font-weight:600;

    color:#4B5563;

    transition:.25s;

    white-space:nowrap;
}

.dashboard-pos-tabs button.active{

    color:#1E5EFF;

    border-bottom:3px solid #1E5EFF;

}

.dashboard-pos-search{

    display:flex;
    align-items:center;
    gap:10px;

    margin:16px;

}

.dashboard-pos-search-box{

    display:flex;
    align-items:center;

    width:100%;
    height:42px;

    border:1px solid #E5E7EB;
    border-radius:10px;
    background:#fff;

    overflow:hidden;

}

.dashboard-pos-search-box i.fa-search{

    margin:0 12px;
    color:#9CA3AF;
    font-size:14px;

}


.dashboard-pos-search-box input{

    flex:1;

    border:none;
    outline:none;
    background:transparent;

    font-size:13px;

}

.dashboard-pos-barcode{

    width:46px;
    height:100%;

    border:none;
    border-left:1px solid #E5E7EB;

    background:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;

}

.dashboard-pos-barcode:hover{

    background:#F8FAFC;

}



.dashboard-pos-search-box input{

    flex:1;
    height:100%;

    border:none;
    outline:none;

    background:transparent;

    padding:0 14px 0 0;

    font-size:14px;
    font-weight:500;

}

.dashboard-pos-search-box input::placeholder{

    color:#6B7280;

}

.dashboard-pos-barcode{

    flex:0 0 46px;

    height:100%;

    border:none;

    border-left:1px solid #E5E7EB;

    background:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

}

.dashboard-pos-barcode i{

    font-size:16px;

    color:#4B5563;

}

.dashboard-pos-categorias{

    margin:0 16px 14px;

    overflow:hidden;

}

.dashboard-pos-categorias::-webkit-scrollbar{

    display:none;

}

.dashboard-pos-categorias::-webkit-scrollbar{

    display:none;

}

.cat-scroll{

    display:flex;
    flex-wrap:nowrap;

    align-items:center;

    gap:10px;

    overflow-x:auto;
    overflow-y:hidden;

    white-space:nowrap;

    padding:4px 0 8px;

    scroll-behavior:smooth;

    -webkit-overflow-scrolling:touch;

    scrollbar-width:thin;

}

.cat-scroll::-webkit-scrollbar{

    display:none;

}

.cat-scroll button{

    flex:0 0 auto;

    display:flex;

    align-items:center;

    gap:8px;

    height:38px;

    padding:0 18px;

    border:none;

    border-radius:999px;

    background:#F3F6FB;

    color:#4B5563;

    font-size:13px;

    font-weight:600;

    transition:.20s;

    cursor:pointer;

}

.cat-scroll button i{

    font-size:12px;

}

.cat-scroll button:hover{

    background:#E8F0FF;

    color:#2962FF;

}

.cat-scroll button.active{

    background:#2962FF;

    color:#fff;

    box-shadow:0 8px 18px rgba(41,98,255,.20);

}



/*==================================================
PRODUCTOS POS PREMIUM
==================================================*/

#dashboardProductos{

    padding:14px;
    overflow-y:auto;
    overflow-x:hidden;

    

    scrollbar-width:thin;
    scrollbar-color:#CBD5E1 transparent;

}

#dashboardProductos::-webkit-scrollbar{

    width:6px;

}

#dashboardProductos::-webkit-scrollbar-thumb{

    background:#CBD5E1;
    border-radius:20px;

}

.dashboard-pos-grid{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:12px;

    align-content:start;

}

.dashboard-pos-product{

    background:#FFFFFF;

    border:1px solid #E7EDF5;

    border-radius:12px;

    height:165px;

    padding:10px;

    display:flex;

    flex-direction:column;

    transition:.25s;

}

.dashboard-pos-product:hover{

    border-color:#2F80ED;

    box-shadow:0 8px 18px rgba(47,128,237,.10);

    transform:translateY(-2px);

}

.dashboard-pos-product-image{

    height:72px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:8px;

}

.dashboard-pos-product-image img{

    width:58px;

    height:58px;

    object-fit:contain;

}

.dashboard-pos-product-body{

    display:flex;

    flex-direction:column;

    

}

.dashboard-pos-product-name{

    font-size:12px;

    font-weight:700;

    color:#1F2937;

    line-height:16px;

    overflow:hidden;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

}

.dashboard-pos-product-price{

    margin-top:auto;

    color:#2563EB;

    font-size:14px;

    font-weight:800;

}

@media(max-width:1600px){

.dashboard-pos-grid{

    grid-template-columns:repeat(4,minmax(0,1fr));

}

}

@media(max-width:1450px){

.dashboard-pos-grid{

    grid-template-columns:repeat(3,minmax(0,1fr));

}

}

/*==========================================
ACCIONES PRODUCTO POS
==========================================*/

.dashboard-pos-actions{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:8px;

    margin-top:12px;

    padding-top:6px;
	
	transform:translateY(-21px);

}

.dashboard-btn-view{

    width:34px;

    height:34px;

    border:none;

    border-radius:10px;

    background:#EEF5FF;

    color:#2563EB;

    cursor:pointer;

    transition:.25s;

}

.dashboard-btn-view:hover{

    background:#2563EB;

    color:#FFFFFF;

    transform:translateY(-2px);

}

.dashboard-btn-cart{

    width:34px;
    height:34px;

    border:none;
    border-radius:10px;

    background:#EEF5FF;
    color:#2563EB;

    cursor:pointer;
    transition:.25s;

}

.dashboard-btn-cart:hover{

    background:#2563EB;
    color:#FFFFFF;
    transform:translateY(-2px);

}

.dashboard-btn-cart i{

    margin-right:6px;

}

/*====================================================
HEADER CARRITO PREMIUM
====================================================*/

.dashboard-cart-card{

    display:flex;
    flex-direction:column;

    background:#FFFFFF;

    border:1px solid #E7EDF5;

    border-radius:20px;

    overflow:hidden;

    box-shadow:
        0 10px 28px rgba(15,23,42,.06);

}

.dashboard-cart-header{

    height:66px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 22px;

    background:#FFFFFF;

    border-bottom:1px solid #EDF2F7;

}

.dashboard-cart-title{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:22px;

    font-weight:800;

    color:#1F2937;

    letter-spacing:-.3px;

}

.dashboard-cart-title span{

    color:#2563EB;

    font-weight:700;

}

.dashboard-cart-clear{

    display:flex;

    align-items:center;

    gap:8px;

    border:none;

    background:transparent;

    color:#EF4444;

    font-size:14px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

.dashboard-cart-clear:hover{

    color:#DC2626;

}

.dashboard-cart-body{

    flex:1;

    padding:18px;

    overflow-y:auto;

    max-height:540px;

    background:#F8FAFD;

}

.dashboard-cart-items{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.dashboard-cart-footer{

    background:#FFFFFF;

    border-top:1px solid #EDF2F7;

    padding:22px;

}

/*=========================================================
        ITEM DEL CARRITO
=========================================================*/

.dashboard-cart-item{

    display:grid;

    grid-template-columns:86px 1fr;

    gap:18px;

    background:#FFFFFF;

    border:1px solid #E8EDF5;

    border-radius:18px;

    padding:18px;

    transition:.25s;

    box-shadow:0 6px 18px rgba(15,23,42,.04);
	
	overflow:hidden;

}

.dashboard-cart-item:hover{

    transform:translateY(-2px);

    border-color:#D7E5FF;

    box-shadow:0 12px 30px rgba(37,99,235,.08);

}

/*====================================*/

.dashboard-cart-image{

    width:86px;

    height:86px;

    border-radius:16px;

    background:#F8FAFD;

    border:1px solid #EDF2F7;

    display:flex;

    justify-content:center;

    align-items:center;

}

.dashboard-cart-image img{

    width:72px;

    height:72px;

    object-fit:contain;

}

/*====================================*/

.dashboard-cart-info{

display:flex;
flex-direction:column;

flex:1;

min-width:0;

overflow:hidden;

}

/*====================================*/

.dashboard-cart-title{

    font-size:17px;

    font-weight:800;

    line-height:1.35;

    color:#111827;

    margin-bottom:6px;

}

.dashboard-cart-code{

    font-size:13px;

    color:#64748B;

    margin-bottom:16px;

}

/*====================================*/

/* ===========================
   FILA INFERIOR DEL PRODUCTO
=========================== */

.dashboard-cart-bottom{
    display:grid;
    grid-template-columns:95px 110px minmax(76px,1fr) 50px;
    align-items:end;
    column-gap:6px;
    width:100%;
    min-width:0;
}


/*====================================*/

/* ===========================
   PRECIO UNITARIO
=========================== */

.dashboard-cart-unit{

    display:flex;

    flex-direction:column;

    justify-content:center;

    margin-top:-6px;
	
	width:auto;

    flex-shrink:0;
	
	min-width:0;

}

.dashboard-cart-unit label{

    font-size:13px;

    color:#8b97a8;

    margin-bottom:4px;

}

.dashboard-cart-unit small{

    font-size:12px;

    color:#94A3B8;

    margin-bottom:4px;

}

.dashboard-cart-unit strong{

    font-size:18px;

    font-weight:700;

    color:#2563eb;

}

/*====================================*/

.dashboard-cart-qty{

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid #E8EDF5;

    border-radius:12px;

    overflow:hidden;

    height:42px;
	
	flex-shrink:0;

}

.dashboard-cart-qty button{

    width:34px;
	
	min-width:34px;

    height:42px;

    border:none;

    background:#F8FAFD;

    color:#2563EB;

    font-size:20px;

    font-weight:700;

    cursor:pointer;

    transition:.20s;

}

.dashboard-cart-qty button:hover{

    background:#2563EB;

    color:#FFFFFF;

}

.dashboard-cart-qty span{

    width:42px;
	
	min-width:42px;

    text-align:center;

    font-size:17px;

    font-weight:700;

    color:#111827;

}

/* ===========================
   TOTAL
=========================== */

.dashboard-cart-total{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:flex-start;

    margin-top:-6px;
	
	width:95px;

    flex-shrink:0;

}

.dashboard-cart-total label{

    font-size:13px;

    color:#8b97a8;

    margin-bottom:4px;

}

.dashboard-cart-total small{

    display:block;

    font-size:12px;

    color:#94A3B8;

    margin-bottom:4px;

}

.dashboard-cart-total strong{

    font-size:18px;

    font-weight:700;

    color:#2563eb;

    white-space:nowrap;

}

/*====================================*/

.dashboard-cart-delete{

    width:42px;

    height:42px;

    border:none;

    border-radius:12px;

    background:#FFF1F2;

    color:#EF4444;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    transition:.25s;

}

.dashboard-cart-delete:hover{

    background:#EF4444;

    color:#FFFFFF;

}

.dashboard-cart-items{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.dashboard-cart-footer{

    padding:20px;

    border-top:1px solid #edf2f7;

    background:#fff;

}

.cart-summary{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-bottom:20px;

}

.cart-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:16px;

}

.cart-row strong{

    font-size:18px;

    color:#1f2937;

}

.cart-total{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-top:14px;

    border-top:1px dashed #dbe4ef;

}

.cart-total span{

    font-size:21px;

    font-weight:700;

}

.cart-total strong{

    font-size:30px;

    color:#246BFD;

}

.dashboard-cart-actions{

    display:flex;

    gap:14px;

}

.btn-cart{

    flex:1;

    height:54px;

    border-radius:14px;

    font-size:17px;

    font-weight:700;

    border:none;

    cursor:pointer;

}

.btn-save{

    background:#fff;

    color:#246BFD;

    border:2px solid #246BFD;

}

.btn-charge{

    background:#22c55e;

    color:#fff;

}

/*====================================================
        MODAL PRODUCTO PREMIUM V2
====================================================*/

/*====================================================
        GALERIA PREMIUM
====================================================*/

.premium-gallery-layout{

    display:grid;

    grid-template-columns:118px 1fr;

    gap:24px;

    height:100%;

}

.premium-gallery-thumbs{

    display:flex;

    flex-direction:column;

    gap:16px;

    align-items:center;

}

.thumb{

    width:102px;

    height:102px;

    background:#fff;

    border:2px solid #E8EDF5;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    transition:.25s;

    overflow:hidden;

}

.thumb img{

    width:82px;

    height:82px;

    object-fit:contain;

}

.thumb:hover{

    border-color:#2F80ED;

    transform:translateY(-2px);

}

.thumb.active{

    border:3px solid #2962FF;

    box-shadow:

        0 10px 25px rgba(41,98,255,.18);

}

/*====================================================
        IMAGEN PRINCIPAL
====================================================*/

.premium-gallery-main{

    position:relative;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    width:100%;
    height:100%;

    background:#F8FAFD;

    border:1px solid #EEF2F7;

    border-radius:24px;

    overflow:hidden;

}

.premium-gallery-main img{

    max-width:92%;
    max-height:620px;

    object-fit:contain;

    cursor:zoom-in;

    transition:
        transform .12s linear;

    transform-origin:center center;

    will-change:transform;

}

.premium-gallery-main.zoom-active img{

    transform:scale(2.2);

}

.premium-gallery-main img:hover{

    transform:scale(1.05);

}

.premium-zoom-btn{

    position:absolute;

    top:20px;
    right:20px;

    width:54px;
    height:54px;

    border:none;

    border-radius:50%;

    background:#FFFFFF;

    box-shadow:0 10px 30px rgba(0,0,0,.10);

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;

    z-index:10;

    transition:.25s;

}

.premium-zoom-btn:hover{

    transform:scale(1.08);

}

.premium-zoom-btn i{

    font-size:22px;

    color:#1F2937;

}

/*====================================================
DOTS
====================================================*/

.premium-gallery-dots{

    position:absolute;

    bottom:82px;

    display:flex;

    gap:10px;

}

.premium-gallery-dots span{

    width:10px;
    height:10px;

    border-radius:50%;

    background:#D1D5DB;

}

.premium-gallery-dots span.active{

    width:22px;

    border-radius:999px;

    background:#2962FF;

}

/*====================================================
MENSAJE
====================================================*/

.premium-gallery-help{

    position:absolute;

    bottom:18px;

    display:flex;
    align-items:center;
    gap:10px;

    padding:14px 22px;

    background:#F3F6FC;

    border-radius:18px;

    font-size:15px;

    color:#64748B;

    font-weight:500;

}

.premium-gallery-help i{

    color:#2962FF;

    font-size:18px;

}

/*====================================================
VIDEO
====================================================*/

.premium-video-thumb{

    display:flex;

    flex-direction:column;

    justify-content:center;
    align-items:center;

    gap:12px;

    font-weight:600;

    color:#1F2937;

}

.premium-video-thumb i{

    width:50px;
    height:50px;

    border-radius:50%;

    background:#1F3FFF;

    color:#FFFFFF;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:18px;

}

.premium-video-thumb span{

    font-size:15px;

}



/*==============================
OVERLAY
==============================*/

.premium-product-modal{

    position:fixed;
    inset:0;

    display:none;
    align-items:center;
    justify-content:center;

    background:rgba(17,24,39,.45);
    backdrop-filter:blur(8px);

    z-index:999999;

    padding:35px;

}

.premium-product-modal.show{

    display:flex;

}

/*==============================
CONTENEDOR
==============================*/

.premium-product-container{

    width:min(1550px,96vw);

    height:min(900px,94vh);

    background:#FFFFFF;

    border-radius:26px;

    overflow:hidden;

    display:grid;

    grid-template-columns:660px 1fr;

    box-shadow:
        0 25px 80px rgba(15,23,42,.22);

    position:relative;

}

/*==============================
BOTON CERRAR
==============================*/

.premium-modal-close{

    position:absolute;

    right:22px;
    top:22px;

    width:54px;
    height:54px;

    border:none;

    border-radius:50%;

    background:#FFFFFF;

    box-shadow:
        0 8px 25px rgba(0,0,0,.10);

    cursor:pointer;

    z-index:20;

    transition:.25s;

}

.premium-modal-close:hover{

    transform:rotate(90deg);

}

.premium-modal-close i{

    font-size:22px;

    color:#111827;

}

/*==============================
COLUMNAS
==============================*/

.premium-product-left{

    padding:38px;

    border-right:1px solid #EEF2F7;

    overflow:hidden;

}

.premium-product-right{

    padding:34px 38px;

    overflow-y:auto;

}

/*==============================
SCROLL DERECHO
==============================*/

.premium-product-right::-webkit-scrollbar{

    width:7px;

}

.premium-product-right::-webkit-scrollbar-thumb{

    background:#CBD5E1;

    border-radius:20px;

}

/*====================================================
        HEADER DEL PRODUCTO
====================================================*/

.premium-product-header{

    display:flex;
    justify-content:space-between;
    align-items:flex-start;

    gap:28px;

    margin-bottom:22px;

}

.premium-product-title{

    flex:1;

}

.premium-product-badge{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    height:28px;

    padding:0 14px;

    background:linear-gradient(
        135deg,
        #6D5BFF,
        #5B5CE2
    );

    color:#fff;

    border-radius:8px;

    font-size:12px;

    font-weight:700;

    letter-spacing:.8px;

    text-transform:uppercase;

    margin-bottom:14px;

}

.premium-product-title h1{

    margin:0;

    font-size:34px;

    line-height:1.05;

    font-weight:800;

    color:#111827;

    letter-spacing:-1px;

    text-transform:uppercase;

}

.premium-product-title h2{

    margin:12px 0 0;

    font-size:28px;

    line-height:1.05;

    font-weight:800;

    color:#2962FF;

    text-transform:uppercase;

}

.premium-product-status{

    display:flex;
    align-items:center;
    gap:10px;

    padding:12px 18px;

    background:#F3FCF6;

    border:1px solid #DDF6E5;

    border-radius:999px;

    white-space:nowrap;

    font-size:16px;

    font-weight:700;

    color:#16A34A;

}

.premium-product-status::before{

    content:"";

    width:12px;
    height:12px;

    border-radius:50%;

    background:#22C55E;

}

/*=====================================================
=            BLOQUE 3 - CODIGO Y SKU PREMIUM
=====================================================*/

.premium-codes{

    display:flex;
    align-items:center;
    gap:14px;

    margin-top:22px;
    margin-bottom:24px;

}

.premium-code-card{

    display:inline-flex;
    align-items:center;
    justify-content:flex-start;

    gap:8px;

    padding:0 14px;

    height:30px;

    background:#f7f9fc;

    border:1px solid #e8edf7;

    border-radius:14px;

    box-sizing:border-box;

    flex:none;

    width:auto;

    min-width:0;

    white-space:nowrap;

    transition:.25s;

}

.premium-code-card:hover{

    border-color:#cddcff;

    background:#fbfcff;

}

.premium-code-card:first-child{

    width:215px;

}

.premium-code-card:last-child{

    width:155px;

}

.premium-code-card i{

    font-size:15px;

    color:#2557f5;

    width:16px;

    text-align:center;

}

.premium-code-card span{

    font-size:13px;

    font-weight:600;

    color:#6b7280;

    margin:0;

}

.premium-code-card strong{

    font-size:14px;

    font-weight:800;

    color:#1f2937;

    letter-spacing:.0px;

}

#modalCodigo{

    color:#2557f5;

}

#modalSku{

    color:#1f2937;

}

/*=========================================================
=           BLOQUE 2 - MARCA / CATEGORIA / ETC            =
=========================================================*/

.premium-info-grid{
    display:flex;
    gap:14px;
    margin-top:18px;
    margin-bottom:22px;
}

.premium-info-card{

    display:flex;

    align-items:center;

    gap:14px;

    min-height:72px;

    padding:16px 18px;

    background:#F8FAFD;

    border:1px solid #E6EBF4;

    border-radius:18px;

    transition:.25s;

}

.premium-info-card:hover{

    border-color:#CFE0FF;

    box-shadow:0 10px 25px rgba(37,87,245,.08);

}

.premium-info-icon{

    width:34px;
    min-width:34px;

    display:flex;
    justify-content:center;
    align-items:center;

    margin-right:14px;
}

.premium-info-icon i{

    font-size:24px;

    color:#1f55ff;

    line-height:1;
}

.premium-info-text{

    display:flex;
    flex-direction:column;
    justify-content:center;

    line-height:1.15;
}

.premium-info-text span{

    font-size:13px;

    color:#5f6c82;

    font-weight:600;

    margin-bottom:6px;
}

.premium-info-text strong{

    font-size:14px;

    font-weight:700;

    color:#17243d;

    letter-spacing:-.2px;
}

/*=========================================================
=          BLOQUE 4 - PRECIO Y STOCK PREMIUM             =
=========================================================*/

.premium-price-stock{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;

    margin-top:24px;
    margin-bottom:26px;

}

.premium-price-card,
.premium-stock-card{

    background:#FFFFFF;

    border:1px solid #E7EDF5;

    border-radius:20px;

    padding:10px;

    transition:.25s;

}

.premium-price-card{

    background: linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
    border:1px solid #E8EEF8;
    border-radius:18px;
    padding:18px 22px;
    box-shadow:0 4px 18px rgba(37,87,245,.05);

}

.premium-stock-card{

    background:linear-gradient(180deg,#F8FFF8 0%,#F2FFF5 100%);
    border:1px solid #DDF4E4;
    border-radius:18px;
    padding:18px 22px;
    box-shadow:0 4px 18px rgba(22,163,74,.05);

}

.premium-price-card small,
.premium-stock-card small{

    display:block;

    font-size:15px;

    font-weight:600;

    color:#64748B;

    margin-bottom:10px;

}

.premium-stock-card small{

    color:#16A34A;

}

.premium-price-card h2{

    display:flex;
    align-items:flex-end;
    gap:8px;

    margin:6px 0;

    font-size:36px;
    font-weight:800;
    line-height:1;
    letter-spacing:-0.5px;
    color:#2557F5;

}

.premium-price-card h2 span{

    display:inline;
    margin:0;

    font:inherit;
    color:inherit;
}

.premium-stock-card h2{

    display:flex;
    align-items:flex-end;
    gap:8px;

    margin:6px 0;

    font-size:36px;
    font-weight:800;
    line-height:1;
    color:#16A34A;

}

.premium-price-card > span{

    display:block;

    margin-top:8px;

    font-size:15px;

    color:#64748B;

    font-weight:500;

}

.premium-stock-card span{

    font-size:15px;
    font-weight:600;
    color:#16A34A;

    margin-left:2px;
    margin-bottom:4px;

    line-height:1;

}

/*====================================================
COMPRA PREMIUM NUEVA
====================================================*/

.premium-buy-wrapper{

    display:flex;

    align-items:flex-end;

    gap:28px;

    margin-top:32px;

}

.premium-qty-wrapper{

    width:270px;

    flex-shrink:0;

}

.premium-cart-wrapper{

    flex:1;

    display:flex;

    flex-direction:column;

    align-items:center;

}

.premium-label{

    display:block;

    margin-bottom:12px;

    font-size:15px;

    font-weight:700;

    color:#111827;

}

.premium-qty-box{

    display:flex;

    align-items:center;

    height:62px;

    border:1px solid #E6ECF5;

    border-radius:18px;

    overflow:hidden;

    background:#fff;

}

.premium-qty-box button{

    width:62px;

    min-width:62px;

    height:64px;

    border:none;

    background:#fff;

    color:#2962FF;

    font-size:22px;

    cursor:pointer;

}

.premium-qty-box input{

    width:calc(100% - 124px);

    flex:none;

    border:none;

    outline:none;

    text-align:center;

    font-size:34px;

    font-weight:700;

    color:#111827;

    background:#fff;

}

.premium-qty-box button:hover{

    background:#F5F8FF;

}



.premium-modal-cart{

    width:100%;

    height:64px;

    border:none;

    border-radius:18px;

    background:linear-gradient(135deg,#2962FF,#1E5EFF);

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    font-size:18px;

    font-weight:700;

    transition:.25s;

    cursor:pointer;

}

.premium-modal-cart:hover{

    transform:translateY(-2px);

    box-shadow:0 12px 30px rgba(41,98,255,.25);

}

.premium-modal-cart i{

    font-size:24px;

}

.premium-buy-security{

    margin-top:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    font-size:15px;

    font-weight:600;

    color:#16A34A;

}

.premium-buy-security i{

    font-size:18px;

}

/*=====================================================
    MODAL FINALIZAR VENTA - DASHBOARD POS
    FERRE PREMIUM - VERSION DEFINITIVA
=====================================================*/

.dashboard-sale-modal{

    position:fixed;
    inset:0;

    width:100%;
    height:100%;

    display:none;

    align-items:center;
    justify-content:center;

    padding:20px;

    background:rgba(15,23,42,.55);

    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);

    overflow:hidden;

    z-index:999999;

}


/*=====================================================
    CONTENEDOR DEL MODAL
=====================================================*/

.dashboard-sale-dialog{

    position:relative;

    width:100%;
    max-width:620px;

    max-height:calc(100vh - 40px);

    margin:0;

    display:flex;
    flex-direction:column;

    background:#FFFFFF;

    border-radius:22px;

    overflow:hidden;

    box-shadow:
        0 25px 70px rgba(15,23,42,.25);

    animation:dashboardSaleOpen .22s ease;

}


@keyframes dashboardSaleOpen{

    from{

        opacity:0;

        transform:
            translateY(20px)
            scale(.97);

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}


/*=====================================================
    CABECERA
=====================================================*/

.dashboard-sale-header{

    flex:0 0 auto;

    display:flex;

    align-items:center;
    justify-content:space-between;

    padding:24px 28px;

    background:#FFFFFF;

    border-bottom:1px solid #E8EDF5;

}

.dashboard-sale-header h3{

    margin:0;

    font-size:24px;

    font-weight:800;

    color:#111827;

}

.dashboard-sale-header span{

    display:block;

    margin-top:5px;

    font-size:14px;

    color:#8491A5;

}


/*=====================================================
    BOTON CERRAR
=====================================================*/

.dashboard-sale-close{

    flex:0 0 42px;

    width:42px;
    height:42px;

    border:0;

    border-radius:12px;

    background:#F5F7FB;

    color:#64748B;

    cursor:pointer;

    font-size:17px;

    transition:.20s ease;

}

.dashboard-sale-close:hover{

    background:#EEF2F7;

    color:#334155;

}


/*=====================================================
    CUERPO
    SOLO ESTA ZONA PUEDE HACER SCROLL
=====================================================*/

.dashboard-sale-body{

    flex:1 1 auto;

    min-height:0;

    padding:26px 28px;

    overflow-y:auto;
    overflow-x:hidden;

    background:#FFFFFF;

    scrollbar-width:thin;

    scrollbar-color:#CBD5E1 transparent;

}

.dashboard-sale-body::-webkit-scrollbar{

    width:6px;

}

.dashboard-sale-body::-webkit-scrollbar-track{

    background:transparent;

}

.dashboard-sale-body::-webkit-scrollbar-thumb{

    background:#CBD5E1;

    border-radius:20px;

}

.dashboard-sale-body::-webkit-scrollbar-thumb:hover{

    background:#94A3B8;

}


/*=====================================================
    CAMPOS
=====================================================*/

.dashboard-sale-grid{

    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:18px;

}

.dashboard-sale-field{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.dashboard-sale-full{

    margin-bottom:20px;

}

.dashboard-sale-field label{

    font-size:13px;

    font-weight:700;

    color:#475569;

}

.dashboard-sale-field select,
.dashboard-sale-field input{

    width:100%;

    height:46px;

    border:1px solid #DCE4EF;

    border-radius:12px;

    padding:0 14px;

    outline:none;

    font-size:14px;

    color:#172033;

    background:#FFFFFF;

    transition:.20s ease;

}

.dashboard-sale-field select:focus,
.dashboard-sale-field input:focus{

    border-color:#2563EB;

    box-shadow:
        0 0 0 3px rgba(37,99,235,.10);

}


/*=====================================================
    INPUT CON ICONO
=====================================================*/

.dashboard-sale-input{

    position:relative;

}

.dashboard-sale-input i{

    position:absolute;

    left:15px;

    top:50%;

    transform:translateY(-50%);

    color:#2563EB;

}

.dashboard-sale-input input{

    padding-left:43px;

}


/*=====================================================
    CAMPO MONETARIO
=====================================================*/

.dashboard-sale-money{

    display:flex;

    align-items:center;

    height:46px;

    border:1px solid #DCE4EF;

    border-radius:12px;

    overflow:hidden;

    background:#FFFFFF;

    transition:.20s ease;

}

.dashboard-sale-money:focus-within{

    border-color:#2563EB;

    box-shadow:
        0 0 0 3px rgba(37,99,235,.10);

}

.dashboard-sale-money span{

    padding-left:14px;

    font-weight:700;

    color:#2563EB;

}

.dashboard-sale-money input{

    height:44px;

    border:0;

    box-shadow:none !important;

}


/*=====================================================
    RESUMEN
=====================================================*/

.dashboard-sale-summary{

    margin-top:24px;

    padding:18px 20px;

    background:#F6F9FF;

    border:1px solid #DBE7FF;

    border-radius:15px;

}

.dashboard-sale-summary div{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:7px 0;

}

.dashboard-sale-summary span{

    color:#64748B;

    font-size:14px;

}

.dashboard-sale-summary strong{

    color:#2563EB;

    font-size:21px;

    font-weight:800;

}


/*=====================================================
    FOOTER
=====================================================*/

.dashboard-sale-footer{

    flex:0 0 auto;

    display:flex;

    justify-content:flex-end;

    gap:12px;

    padding:20px 28px;

    background:#F8FAFC;

    border-top:1px solid #E8EDF5;

}


/*=====================================================
    BOTONES
=====================================================*/

.dashboard-sale-cancel,
.dashboard-sale-confirm{

    height:48px;

    padding:0 24px;

    border-radius:12px;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:.20s ease;

}

.dashboard-sale-cancel{

    background:#FFFFFF;

    border:1px solid #D7DFEB;

    color:#64748B;

}

.dashboard-sale-cancel:hover{

    background:#F8FAFC;

    color:#334155;

}

.dashboard-sale-confirm{

    background:#2563EB;

    border:1px solid #2563EB;

    color:#FFFFFF;

}

.dashboard-sale-confirm:hover{

    background:#1D4ED8;

    border-color:#1D4ED8;

}

.dashboard-sale-confirm i{

    margin-right:7px;

}


/*=====================================================
    RESPONSIVE
=====================================================*/

@media(max-width:650px){

    .dashboard-sale-modal{

        padding:10px;

    }

    .dashboard-sale-dialog{

        max-height:calc(100vh - 20px);

    }

    .dashboard-sale-header{

        padding:20px;

    }

    .dashboard-sale-body{

        padding:20px;

    }

    .dashboard-sale-grid{

        grid-template-columns:1fr;

    }

    .dashboard-sale-footer{

        padding:16px 20px;

    }

}

/* =========================================================
   SWEETALERT SIEMPRE ENCIMA DE MODALES PREMIUM
========================================================= */

.swal2-container {
    z-index: 9999999 !important;
}

/* =====================================================
   MODAL VENTA REGISTRADA PREMIUM
===================================================== */

.sale-success-overlay{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.58);
    backdrop-filter:blur(4px);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:99999;
    padding:24px;
}

.sale-success-modal{
    position:relative;
    width:100%;
    max-width:620px;
    background:#fff;
    border-radius:22px;
    padding:32px 30px 26px;
    box-shadow:0 30px 80px rgba(15,23,42,.28);
    animation:saleSuccessIn .28s ease;
}

@keyframes saleSuccessIn{
    from{
        opacity:0;
        transform:translateY(18px) scale(.97);
    }

    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

.sale-success-close{
    position:absolute;
    top:18px;
    right:18px;
    width:38px;
    height:38px;
    border:0;
    border-radius:10px;
    background:#f1f5f9;
    color:#64748b;
    cursor:pointer;
    font-size:15px;
}

.sale-success-icon{
    width:72px;
    height:72px;
    margin:0 auto 14px;
    border:4px solid #22c55e;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#22c55e;
    font-size:31px;
}

.sale-success-modal h2{
    margin:0;
    text-align:center;
    color:#0f172a;
    font-size:25px;
    font-weight:800;
}

.sale-success-subtitle{
    margin:7px 0 22px;
    text-align:center;
    color:#64748b;
    font-size:14px;
}

.sale-success-document{
    border:1px solid #dbe3ef;
    border-radius:16px;
    padding:20px;
    background:#fff;
}

.sale-success-document-top{
    display:flex;
    align-items:center;
    gap:14px;
}

.sale-success-document-icon{
    width:50px;
    height:50px;
    border-radius:12px;
    background:#eff6ff;
    color:#2563eb;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
}

.sale-success-document-info{
    flex:1;
}

.sale-success-document-info span{
    display:block;
    color:#475569;
    font-size:11px;
    font-weight:700;
}

.sale-success-document-info strong{
    display:block;
    margin-top:3px;
    color:#2563eb;
    font-size:20px;
    font-weight:800;
}

.sale-success-status{
    padding:8px 12px;
    border-radius:20px;
    background:#dcfce7;
    color:#16a34a;
    font-size:11px;
    font-weight:800;
}

.sale-success-data{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    padding:18px 0;
    margin-top:18px;
    border-top:1px solid #e2e8f0;
    border-bottom:1px solid #e2e8f0;
}

.sale-success-data div{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.sale-success-data div:last-child{
    border-left:1px solid #e2e8f0;
    padding-left:24px;
}

.sale-success-data span,
.sale-success-client span{
    color:#64748b;
    font-size:12px;
}

.sale-success-data strong{
    color:#0f172a;
    font-size:15px;
}

#ventaExitoTotal{
    color:#2563eb;
    font-size:22px;
    font-weight:800;
}

.sale-success-client{
    display:flex;
    align-items:center;
    gap:12px;
    padding-top:18px;
}

.sale-success-client > i{
    width:34px;
    height:34px;
    border-radius:10px;
    background:#eff6ff;
    color:#2563eb;
    display:flex;
    align-items:center;
    justify-content:center;
}

.sale-success-client strong{
    display:block;
    margin-top:3px;
    color:#0f172a;
    font-size:13px;
}

.sale-success-question{
    margin:22px 0 15px;
    text-align:center;
    color:#1e293b;
    font-size:15px;
    font-weight:700;
}

.sale-success-actions{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}

.sale-success-action{
    border:1px solid #dbe3ef;
    border-radius:15px;
    background:#fff;
    padding:18px 12px 12px;
    display:flex;
    flex-direction:column;
    align-items:center;
    cursor:pointer;
    transition:.22s ease;
}

.sale-success-action:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 25px rgba(15,23,42,.10);
}

.sale-action-icon{
    width:48px;
    height:48px;
    border-radius:13px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    margin-bottom:12px;
}

.sale-success-action strong{
    color:#0f172a;
    font-size:13px;
}

.sale-success-action small{
    color:#64748b;
    font-size:11px;
    margin:5px 0 14px;
}

.sale-action-button{
    width:100%;
    padding:8px;
    border-radius:7px;
    color:#fff;
    font-size:11px;
    font-weight:700;
}

.action-pdf .sale-action-icon{
    background:#eff6ff;
    color:#2563eb;
}

.action-pdf .sale-action-button{
    background:#2563eb;
}

.action-print .sale-action-icon{
    background:#ecfdf5;
    color:#16a34a;
}

.action-print .sale-action-button{
    background:#16a34a;
}

.action-whatsapp{
    border-color:#22c55e;
}

.action-whatsapp .sale-action-icon{
    background:#ecfdf5;
    color:#16a34a;
}

.action-whatsapp .sale-action-button{
    background:#16a34a;
}

.sale-success-finish{
    width:100%;
    margin-top:20px;
    height:44px;
    border:1px solid #dbe3ef;
    border-radius:10px;
    background:#f8fafc;
    color:#475569;
    font-weight:600;
    cursor:pointer;
}

@media(max-width:650px){

    .sale-success-modal{
        padding:26px 18px 20px;
    }

    .sale-success-actions{
        grid-template-columns:1fr;
    }

}

/*====================================================
= DASHBOARD REPORTES PREMIUM
====================================================*/

/*#title-header-ventas-mes{
    display:block;
    font-family:'Inter',sans-serif;
    font-size:34px;
    font-weight:800;
    line-height:1.15;
    color:#0f172a;
    letter-spacing:-1px;
    margin-bottom:18px;
}

#title-header-ventas-mes span{
    color:#2563eb;
}

.titulo-fieldset{
    font-family:'Inter',sans-serif;
    font-size:19px;
    font-weight:700;
    color:#0f172a;
    letter-spacing:.2px;
}

.card-gray table{
    font-family:'Inter',sans-serif;
}

.card-gray table thead th{
    font-size:15px;
    font-weight:700;
    color:#ef4444;
}

.card-gray table tbody td{
    font-size:14px;
    font-weight:500;
    color:#334155;
}

.card-gray{
    border-radius:18px;
    overflow:hidden;
}

.chart canvas{
    image-rendering:auto;
}
*/

/*=========================================
REPORTES DASHBOARD PREMIUM
=========================================*/

.dashboard-reportes{

    display:flex;
    flex-direction:column;
    gap:16px;
    width:100%;

}

.dashboard-reportes-row{

    display:grid;

    grid-template-columns:repeat(1,minmax(0,2fr));

    gap:20px;

}

.dashboard-reportes-full{

    width:100%;

}

.dashboard-reportes-half{

    width:100%;

    display:flex;

}

.dashboard-reportes-half > .card{

    width:100%;

    min-height:380px;

    display:flex;

    flex-direction:column;

}

/*=========================================
CENTRO GRAFICOS PREMIUM
=========================================*/

.dashboard-chart-wrapper{

    position:relative;

    width:100%;

    height:330px;

}

.dashboard-chart-center{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    pointer-events:none;

    text-align:center;

}

.chart-center-icon{

    width:42px;

    height:42px;

    border-radius:50%;

    background:#EEF5FF;

    color:#2563EB;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:8px;

    font-size:18px;

}

.chart-doc{

    background:#FFF3F3;

    color:#EF4444;

}

.dashboard-chart-center span{

    font-size:12px;

    font-weight:600;

    color:#64748B;

    margin-bottom:6px;

    letter-spacing:.3px;

}

.dashboard-chart-center strong{

    font-size:12px;

    font-weight:700;

    color:#2563EB;

    line-height:1.15;

    text-align:center;

    max-width:90px;

    margin-top:2px;

}

/*====================================================
TABLAS PREMIUM DASHBOARD
====================================================*/

.dashboard-table-content{

    max-height:520px;

    overflow-y:auto;

    overflow-x:hidden;

    scrollbar-width:thin;

    scrollbar-color:#CBD5E1 transparent;

}

.dashboard-table-content::-webkit-scrollbar{

    width:6px;

}

.dashboard-table-content::-webkit-scrollbar-thumb{

    background:#CBD5E1;

    border-radius:20px;

}

.dashboard-table-content table{

    margin-bottom:0;

}

.dashboard-table-content thead th{

    position:sticky;

    top:0;

    background:#FFFFFF;

    z-index:2;

    border-top:none;

    border-bottom:2px solid #EEF2F7;

    padding:14px 16px;

    font-size:14px;

    font-weight:700;

    color:#EF4444;

}

.dashboard-table-content tbody td{

    padding:14px 16px;

    vertical-align:middle;

    border-top:1px solid #F1F5F9;

    font-size:14px;

    color:#374151;

}

.dashboard-table-content tbody tr{

    transition:.20s ease;

}

.dashboard-table-content tbody tr:hover{

    background:#F8FBFF;

}

.dashboard-table-content tbody td:first-child{

    font-weight:700;

    color:#111827;

}

.dashboard-table-content tbody td:nth-child(2){

    color:#2563EB;

    font-weight:700;

}

.dashboard-table-content tbody td:last-child{

    font-weight:700;

    color:#16A34A;

}

.ferre-user-top{
    position:relative;
    cursor:pointer;
}

.ferre-user-dropdown{

    position:absolute;

    top:calc(100% + 14px);

    right:0;

    width:240px;

    background:#fff;

    border-radius:14px;

    box-shadow:0 18px 45px rgba(0,0,0,.15);

    border:1px solid #edf2f7;

    display:none;

    overflow:hidden;

    z-index:99999;

}

.ferre-user-dropdown a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 18px;

    color:#374151;

    text-decoration:none;

    font-size:15px;

    transition:.25s;

}

.ferre-user-dropdown a:hover{

    background:#f4f8ff;

    color:#2563eb;

}

.dropdown-divider{

    height:1px;

    background:#ececec;

}

.logout{

    color:#ef4444 !important;

}

/*==========================================================
=            MI CUENTA - FERRE PREMIUM
==========================================================*/

.ferre-page{

    padding-top:24px;
    padding-right:24px;
    padding-bottom:24px;

    /* separación del menú */
    padding-left:38px;

}

/*==========================================================
HERO PREMIUM V2
==========================================================*/

.ferre-account-hero{

    position:relative;

    overflow:hidden;

    display:flex;

    justify-content:space-between;

    align-items:center;

    min-height:155px;

    padding:0 42px;

    margin-bottom:20px;

    border-radius:22px;

    background:
        radial-gradient(circle at 12% 25%,rgba(255,255,255,.10),transparent 22%),
        radial-gradient(circle at 90% 15%,rgba(255,255,255,.08),transparent 20%),
        linear-gradient(135deg,#0f4fd3 0%,#1b63ea 45%,#2a73f5 100%);

    box-shadow:
        0 10px 30px rgba(37,99,235,.18);

}

.ferre-account-hero::before{

    content:"";

    position:absolute;

    top:-70px;

    right:240px;

    width:420px;

    height:420px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.08);

}

.ferre-account-hero::after{

    content:"";

    position:absolute;

    right:330px;

    top:28px;

    width:82px;

    height:82px;

    background-image:
        radial-gradient(rgba(255,255,255,.18) 1.5px,transparent 1.5px);

    background-size:12px 12px;

    opacity:.9;

}

.ferre-header-left{

    display:flex;

    align-items:center;

    gap:24px;

    z-index:2;

}

.ferre-header-avatar{

    width:88px;

    height:88px;

    border-radius:50%;

    background:rgba(255,255,255,.12);

    display:flex;

    justify-content:center;

    align-items:center;

    backdrop-filter:blur(8px);

    border:1px solid rgba(255,255,255,.10);

}

.ferre-header-avatar i{

    color:#fff;

    font-size:42px;

}

.ferre-header-badge{

    display:none;

}

.ferre-header-content h1{

    margin:0;

    color:#fff;

    font-size:32px;

    font-weight:700;

    letter-spacing:-.4px;

}

.ferre-header-content p{

    margin-top:8px;

    color:rgba(255,255,255,.92);

    font-size:14px;

    font-weight:400;

}

.ferre-header-right{

    display:flex;

    align-items:center;

    gap:34px;

    z-index:2;

}

.ferre-header-divider{

    width:1px;

    height:56px;

    background:rgba(255,255,255,.20);

}

.ferre-header-stat{

    text-align:left;

    color:#fff;

}

.ferre-header-stat small{

    display:block;

    font-size:13px;

    color:rgba(255,255,255,.82);

    margin-bottom:4px;

}

.ferre-header-stat strong{

    display:block;

    font-size:17px;

    font-weight:700;

    color:#fff;

}

/*==========================================================
CARD
==========================================================*/

.ferre-card{

    background:#fff;

    border:none;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 12px 35px rgba(15,23,42,.06);

    transition:.30s;

}

.ferre-card:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 40px rgba(15,23,42,.10);

}

.ferre-card-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px 28px;

    border-bottom:1px solid #eef2f7;

}

.ferre-card-body{

    padding:28px;

}

.ferre-card-title{

    font-size:20px;

    font-weight:700;

    color:#1e293b;

}

.ferre-card-title i{

    color:#2563eb;

    margin-right:10px;

}

.ferre-card-subtitle{

    color:#64748b;

    font-size:13px;

    margin-top:6px;

}



/*==========================================================
FORMULARIOS
==========================================================*/

.ferre-label{

    font-size:13px;

    font-weight:700;

    color:#475569;

    margin-bottom:8px;

    display:block;

}

.ferre-input{

    height:52px;

    border:1px solid #dbe4ee;

    border-radius:14px;

    font-size:15px;

    transition:.30s;

}

.ferre-input:focus{

    border-color:#2563eb;

    box-shadow:0 0 0 4px rgba(37,99,235,.12);

}

/*==========================================================
BOTONES
==========================================================*/

.ferre-btn{

    border:none;

    border-radius:14px;

    padding:13px 24px;

    font-weight:600;

    transition:.30s;

}

.ferre-btn-primary{

    background:#2563eb;

    color:#fff;

}

.ferre-btn-primary:hover{

    background:#1d4ed8;

}

.ferre-btn-success{

    background:#16a34a;

    color:#fff;

}

.ferre-btn-success:hover{

    background:#15803d;

}

/*==========================================================
PANEL DERECHO
==========================================================*/

.ferre-account-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 0;

    border-bottom:1px solid #edf2f7;

}

.ferre-account-label{

    color:#64748b;

    font-size:13px;

}

.ferre-status-badge{

    padding:6px 12px;

    border-radius:40px;

    font-size:12px;

    font-weight:700;

}

.ferre-badge-success{

    background:#dcfce7;

    color:#15803d;

}

.ferre-progress{

    height:10px;

    border-radius:20px;

    overflow:hidden;

    background:#e5e7eb;

}

.ferre-progress .progress-bar{

    background:#2563eb;

}

.ferre-account-note{

    padding:14px;

    border-radius:12px;

    background:#eff6ff;

    color:#1e40af;

    font-size:13px;

    line-height:1.6;

}

/*==========================================================
SEGURIDAD
==========================================================*/

.ferre-security-box{

    background:#f8fafc;

    border-radius:18px;

    padding:28px;

    height:100%;

    text-align:center;

}

.ferre-security-icon{

    width:70px;

    height:70px;

    margin:auto auto 18px;

    border-radius:18px;

    background:#dbeafe;

    color:#2563eb;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

}

.ferre-divider{

    margin:22px 0;

    border-top:1px solid #edf2f7;

}

/*==========================================================
RESPONSIVE
==========================================================*/

@media(max-width:992px){

    .ferre-page-header{

        flex-direction:column;

        gap:20px;

        align-items:flex-start;

    }

    .ferre-header-right{

        width:100%;

        justify-content:flex-start;

    }

}

/*==================================================
MI CUENTA V2
==================================================*/

.ferre-profile-card{

    height:100%;

}

.ferre-profile-cover{

    position:relative;

    height:95px;

    background:linear-gradient(135deg,#3B82F6,#2563EB);

    overflow:hidden;

}

.ferre-profile-cover-pattern{

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at 20% 20%,
    rgba(255,255,255,.15) 0,
    transparent 22%),

    radial-gradient(circle at 80% 40%,
    rgba(255,255,255,.12) 0,
    transparent 20%);

}

.ferre-profile-body{

    padding:0 24px 24px;

    text-align:center;

}

.ferre-profile-avatar{

    width:118px;
    height:118px;

    margin:-58px auto 16px;

    position:relative;

    border-radius:50%;

    overflow:hidden;

    background:#F5F8FC;

    border:5px solid #fff;
	
	

    box-shadow:0 8px 24px rgba(0,0,0,.12);

}

.ferre-profile-avatar img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    object-position:center;

}

.ferre-avatar-edit{

    position:absolute;

    right:4px;

    bottom:4px;

    width:38px;

    height:38px;

    border-radius:50%;

    background:#2563EB;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    box-shadow:0 8px 18px rgba(37,99,235,.25);

}

.ferre-profile-name{

    font-size:18px;

    font-weight:700;

    line-height:1.25;

    color:#1F2937;

    margin-bottom:6px;

}

.ferre-profile-role{

    font-size:14px;

    color:#64748B;

    margin-bottom:16px;

}

.ferre-profile-status{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 18px;

    border-radius:999px;

    background:#ECFDF5;

    color:#16A34A;

    font-weight:700;

    margin-bottom:22px;

}

.ferre-online-dot{

    width:9px;

    height:9px;

    border-radius:50%;

    background:#16A34A;

}

.ferre-profile-info{

    margin-top:10px;

}

.ferre-profile-row{

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px 0;

    border-top:1px solid #EEF2F7;

    text-align:left;

}

.ferre-profile-row i{

    width:38px;

    height:38px;

    border-radius:10px;

    background:#EFF6FF;

    color:#2563EB;

    display:flex;

    align-items:center;

    justify-content:center;

}

.ferre-profile-row small{

    display:block;

    color:#64748B;

    font-size:12px;

}

.ferre-profile-row strong{

    display:block;

    color:#1F2937;

    font-size:14px;

    font-weight:700;

}

/*==========================================================
PASSWORD PREMIUM
==========================================================*/

.ferre-password-status{

    display:flex;
    align-items:center;
    gap:18px;

    width:100%;
    height:92px;

    padding:16px 18px;

    border:1px solid #E8EDF5;
    border-radius:16px;

    background:#FFFFFF;

}

.ferre-password-circle{

    width:58px;
    height:58px;

    flex:0 0 58px;

    border-radius:50%;

    background:#ECFDF5;

    display:flex;
    justify-content:center;
    align-items:center;

}

.ferre-password-circle i{

    font-size:24px;
    color:#16A34A;

}

.ferre-password-info{

    flex:1;

    display:flex;
    flex-direction:column;
    justify-content:center;

    min-width:0;

}

.ferre-password-info small{

    margin:0;

    font-size:13px;

    color:#64748B;

}

.ferre-password-info strong{

    margin:2px 0 8px;

    font-size:18px;

    font-weight:700;

    color:#16A34A;

    line-height:1.1;

}

.ferre-password-bars{

    display:flex;

    gap:4px;

    margin-bottom:8px;

}

.ferre-password-bars .bar{

    flex:1;

    height:7px;

    border-radius:999px;

    background:#D9E4F8;

    transition:.25s;

}

.ferre-password-message{

    margin:0;

    font-size:12px;

    line-height:1.35;

    color:#64748B;

}

.ferre-password-tip{

    display:flex;
    align-items:center;

    margin-top:16px;

    font-size:14px;

    color:#475569;

}

.ferre-password-tip i{

    color:#64748B;

}

/*=========================================
BARRAS ACTIVAS
=========================================*/

.ferre-password-bars .bar.active{

    background:#2563eb;

}

.ferre-password-bars .bar.active.red{

    background:#ef4444;

}

.ferre-password-bars .bar.active.orange{

    background:#f97316;

}

.ferre-password-bars .bar.active.yellow{

    background:#f59e0b;

}

.ferre-password-bars .bar.active.blue{

    background:#2563eb;

}

.ferre-password-bars .bar.active.green{

    background:#16a34a;

}

/*=====================================================
CRUD PREMIUM
=====================================================*/

.ferre-crud-card{

    border:0;

    border-radius:18px;

    overflow:hidden;

    background:#fff;

    box-shadow:
        0 15px 35px rgba(15,23,42,.08);

}

.ferre-crud-body{

    padding:30px;

    position:relative;

}

.ferre-crud-title{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:12px;

    background:#2563eb;

    color:#fff;

    font-size:15px;

    font-weight:700;

    letter-spacing:.4px;

    margin-bottom:25px;

    box-shadow:
        0 8px 20px rgba(37,99,235,.25);

}

/*=====================================================
ACCIONES CRUD
=====================================================*/

.ferre-crud-actions{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:28px;

    margin-bottom:10px;

}

.ferre-crud-actions .ferre-btn{

    min-width:150px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    font-size:15px;

}

/*=====================================================
DATATABLE PREMIUM CRUD
=====================================================*/

.ferre-table{

    width:100%;

    border-collapse:separate;

    border-spacing:0;

    overflow:hidden;

    border-radius:16px;

    background:#FFFFFF;

}

.ferre-table thead th{

    background:#2563EB;

    color:#FFFFFF;

    font-size:14px;

    font-weight:700;

    padding:16px;

    border:none;

    text-transform:uppercase;

    letter-spacing:.4px;

}

.ferre-table tbody td{

    padding:16px;

    border-bottom:1px solid #EEF2F7;

    vertical-align:middle;

}

.ferre-table tbody tr{

    transition:.25s;

}

.ferre-table tbody tr:hover{

    background:#F8FBFF;

}

/*=====================================================
DATATABLE CONTROLS PREMIUM
=====================================================*/

.dataTables_wrapper{

    padding-top:8px;

}

.dataTables_length,
.dataTables_filter{

    margin-bottom:18px;

}

.dataTables_length label,
.dataTables_filter label{

    font-weight:600;

    color:#475569;

    font-size:14px;

}

.dataTables_length select{

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    min-width:80px;

    height:44px;

    border:1px solid #D8E2EF !important;

    border-radius:14px !important;

    background:#FFFFFF;

    padding:0 38px 0 14px;

    font-size:14px;

    font-weight:600;

    color:#334155;

    outline:none;

}

.dataTables_length select:hover{

    border-color:#2563EB;

}

.dataTables_length select:focus{

    border-color:#2563EB;

    box-shadow:0 0 0 4px rgba(37,99,235,.10);

}

.dataTables_filter input{

    width:300px !important;

    height:44px;

    border:1px solid #D8E2EF !important;

    border-radius:14px !important;

    background:#FFFFFF;

    padding:0 18px;

    font-size:14px;

    color:#334155;

    outline:none;

    transition:.25s;

}

.dataTables_filter input:hover{

    border-color:#2563EB;

}

.dataTables_filter input:focus{

    border-color:#2563EB;

    box-shadow:0 0 0 4px rgba(37,99,235,.10);

}

.dataTables_filter{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:10px;

}

.dataTables_length{

    display:flex;

    align-items:center;

    gap:10px;

}

.dataTables_filter label,
.dataTables_length label{

    display:flex;

    align-items:center;

    gap:10px;

    margin:0;

    font-weight:600;

    color:#475569;

}

    

.dataTables_filter input:focus{

    border-color:#2563EB;

    box-shadow:0 0 0 4px rgba(37,99,235,.12);

}

.dataTables_info{

    font-size:14px;

    color:#64748B;

    font-weight:500;

}

.dataTables_paginate{

    margin-top:14px !important;

}

.dataTables_paginate .paginate_button{

    min-width:38px;

    height:38px;

    border-radius:10px !important;

    border:none !important;

    margin:0 3px;

    background:#F8FAFC !important;

    color:#334155 !important;

    transition:.25s;

}

.dataTables_paginate .paginate_button.current{

    background:#2563EB !important;

    color:#FFFFFF !important;

}

.dataTables_paginate .paginate_button:hover{

    background:#2563EB !important;

    color:#FFFFFF !important;

}

/*=====================================================
BOTONES CRUD PREMIUM
=====================================================*/

.ferre-action-group{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

}

.ferre-action-btn{

    width:38px;

    height:38px;

    border:none;

    border-radius:10px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.25s;

    color:#fff;

}

.ferre-action-edit{

    background:#2563EB;

}

.ferre-action-edit:hover{

    background:#1D4ED8;

    transform:translateY(-2px);

}

.ferre-action-disable{

    background:#DC2626;

}

.ferre-action-disable:hover{

    background:#B91C1C;

    transform:translateY(-2px);

}

.ferre-action-enable{

    background:#16A34A;

}

.ferre-action-enable:hover{

    background:#15803D;

    transform:translateY(-2px);

}

/*=============================================
BADGES PREMIUM
=============================================*/

.ferre-status-badge{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:6px;

    min-width:90px;

    padding:6px 14px;

    border-radius:30px;

    font-size:12px;

    font-weight:700;

    color:#fff;

}

.ferre-status-success{
    background:#16A34A;
}

.ferre-status-danger{
    background:#DC2626;
}

/*==================================================
=            EMPRESA PREMIUM
==================================================*/

.empresa-premium-card{

    border:none;
    border-radius:22px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 15px 45px rgba(15,23,42,.08);

}

.empresa-premium-header{

    background:linear-gradient(135deg,#2563eb,#1d4ed8);

    border:none;

    padding:22px 28px;

}

.empresa-header-icon{

    width:58px;

    height:58px;

    border-radius:18px;

    background:rgba(255,255,255,.18);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:24px;

}

.empresa-title{

    color:#fff;

    font-size:24px;

    font-weight:700;

    margin:0;

}

.empresa-subtitle{

    color:rgba(255,255,255,.90);

    font-size:13px;

}

.empresa-premium-body{

    padding:32px;

}

/*=========================================
=        SECCIONES EMPRESA PREMIUM
=========================================*/

.empresa-section{

    background:#fff;

    border:1px solid #edf2f7;

    border-radius:18px;

    padding:24px;

    margin-bottom:24px;

    box-shadow:0 8px 24px rgba(15,23,42,.05);

}

.empresa-section{

    position:relative;

    overflow:hidden;

}

.empresa-section-title{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:1.35rem;

    font-weight:700;

    color:#1e3a8a;

    margin-bottom:26px;

    padding-bottom:18px;

    border-bottom:1px solid #edf2f7;

}

.empresa-section-title i{

    width:36px;

    height:36px;

    border-radius:10px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#dbeafe;

    color:#2563eb;

    font-size:15px;

}

/*==================================================
EMPRESA - LOGO PREVIEW
==================================================*/

.empresa-logo-card{

    width:190px;

    height:190px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:center;

    border:2px dashed #d9e6f7;

    border-radius:18px;

    background:#fbfdff;

    transition:.25s;

}

.empresa-logo-card:hover{

    border-color:#3b82f6;

    background:#f4f8ff;

}

.empresa-logo-preview{

    max-width:150px;

    max-height:150px;

    width:auto;

    height:auto;

    object-fit:contain;

    display:block;

    transition:.25s;

}

/*=====================================================
=            FORMULARIOS PREMIUM EMPRESA              =
=====================================================*/

.empresa-section label{
    display:block;
    margin-bottom:8px !important;
    margin-left:2px !important;
    font-size:.83rem;
    font-weight:600;
    color:#344767;
    letter-spacing:.2px;
}

.empresa-section label i{
    color:#3b82f6;
    width:18px;
    text-align:center;
}

.empresa-section .form-control,
.empresa-section .form-select{

    height:48px !important;

    border:1px solid #d9e3f1 !important;

    border-radius:14px !important;

    background:#fff !important;

    font-size:.93rem;

    font-weight:500;

    color:#334155;

    padding-left:14px;

    box-shadow:none;

    transition:.25s;
}

.empresa-section .form-control:hover,
.empresa-section .form-select:hover{

    border-color:#b8c8e6 !important;
}

.empresa-section .form-control:focus,
.empresa-section .form-select:focus{

    border-color:#3b82f6 !important;

    box-shadow:0 0 0 .20rem rgba(59,130,246,.15)!important;
}

.empresa-section input[type=file]{

    padding:10px 14px !important;

    height:48px !important;
}

.empresa-section .invalid-feedback{

    font-size:.76rem;
}

/*=====================================================
=      EMPRESA - INPUT FILE PREMIUM                   =
=====================================================*/

.empresa-section input[type="file"]{

    border:1px solid #d7e3f3 !important;

    border-radius:14px !important;

    background:#fff;

    height:48px !important;

    overflow:hidden;

    cursor:pointer;

}

.empresa-section input[type="file"]::file-selector-button{

    background:linear-gradient(135deg,#2563eb,#3b82f6);

    color:#fff;

    border:none;

    padding:0 20px;

    margin-right:18px;

    height:48px;

    cursor:pointer;

    font-weight:600;

    transition:.25s;

}

.empresa-section input[type="file"]::file-selector-button:hover{

    background:linear-gradient(135deg,#1d4ed8,#2563eb);

}

/*=====================================================
=            FERRE PREMIUM SWITCH
=====================================================*/

.ferre-switch-wrapper{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;

    margin-top:12px;

}

.ferre-switch-text{

    font-size:14px;

    font-weight:700;

    color:#94A3B8;

    transition:.30s;

    user-select:none;

}

.ferre-switch{

    position:relative;

    width:64px;
    height:34px;

    margin:0;

    flex-shrink:0;

}

.ferre-switch input{

    display:none;

}

.ferre-slider{

    position:absolute;

    inset:0;

    border-radius:999px;

    background:linear-gradient(180deg,#E9EEF6 0%,#CBD5E1 100%);
    border:1px solid #D7DFEA;

    cursor:pointer;

    transition:.30s;

    box-shadow:
    inset 0 2px 4px rgba(255,255,255,.75),
    inset 0 -2px 4px rgba(0,0,0,.08),
    0 4px 12px rgba(37,99,235,.08);

}

.ferre-slider::before{

    content:"";

    position:absolute;

    left:4px;
    top:4px;

    width:26px;
    height:26px;

    border-radius:50%;

    background:#FFFFFF;
	
	border:1px solid rgba(0,0,0,.05);
	
	background:linear-gradient(
    180deg,
    #FFFFFF 0%,
    #F8FAFC 100%
    );

    box-shadow:
    0 6px 14px rgba(15,23,42,.18),
    0 2px 4px rgba(255,255,255,.90);

    transition:.30s;

}

.ferre-switch input:checked + .ferre-slider{

    background:#2563EB;

}

.ferre-switch input:checked + .ferre-slider::before{

    transform:translateX(30px);

}

.ferre-switch input:checked ~ .ferre-switch-on{

    color:#2563EB;

}

.ferre-switch input:not(:checked) ~ .ferre-switch-off{

    color:#2563EB;

}

/*=====================================================
 BOTÓN PREMIUM EMPRESA
=====================================================*/

.empresa-btn-save{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    min-width:280px;
    height:56px;

    padding:0 30px;

    border:none;

    border-radius:16px;

    background:linear-gradient(
        180deg,
        #22C55E 0%,
        #16A34A 100%
    );

    color:#fff;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:all .30s ease;

    box-shadow:
        0 12px 25px rgba(22,163,74,.25);

}

.empresa-btn-save i{

    font-size:18px;

}

.empresa-btn-save:hover{

    transform:translateY(-2px);

    box-shadow:
        0 18px 35px rgba(22,163,74,.35);

}

.empresa-btn-save:active{

    transform:translateY(0);

}

.empresa-btn-save:focus{

    outline:none;

}

/*=========================================================
SUCURSAL HEADER PREMIUM
=========================================================*/

.branch-arrow{

    transition:.25s ease;

}

.branch-arrow.rotate-arrow{

    transform:rotate(180deg);

}

.ferre-item-sucursal{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    padding:16px;

    margin-bottom:8px;

    border:1px solid transparent;

    border-radius:16px;

    background:#FFFFFF;

    cursor:pointer;

    transition:.25s;
	
	box-shadow:
    0 2px 8px rgba(15,23,42,.03);
	
	align-items:center;

    }

.ferre-item-sucursal:hover{

    background:#F8FBFF;

    border-color:#CFE0FF;
	
	box-shadow:
    0 8px 22px rgba(37,99,235,.08);

    transform:translateY(-1px);

}

.branch-item-left{

    display:flex;

    align-items:center;

    gap:14px;

}

.branch-item-icon{

    width:42px;

    height:42px;

    border-radius:12px;

    background:#EEF5FF;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#2563EB;

    flex-shrink:0;

}

.branch-item-info{

    display:flex;

    flex-direction:column;

}

.branch-item-info strong{

    font-size:15px;

    font-weight:700;

    color:#111827;

}

.branch-item-info small{

    margin-top:2px;

    font-size:12px;

    color:#64748B;

}

.branch-active{

    padding:6px 12px;

    border-radius:999px;

    background:#DBEAFE;

    color:#2563EB;

    font-size:11px;

    font-weight:700;

}

.ferre-item-sucursal i{

    color:#2563EB;

    font-size:15px;

}

.ferre-branch-dropdown{

    position:absolute;

    top:calc(100% + 12px);

    right:0;

    width:270px;

    display:none;

    background:#FFFFFF;

    border:1px solid #E5E7EB;

    border-radius:14px;

    overflow:hidden;

    box-shadow:0 18px 45px rgba(0,0,0,.15);

    z-index:99999;

}

/*=========================================================
HEADER DROPDOWN SUCURSAL
=========================================================*/

.branch-dropdown-header{

    display:flex;

    align-items:center;

    gap:14px;

    padding:18px;

    border-bottom:1px solid #EEF2F7;

    background:
    linear-gradient(
    180deg,
    #FBFDFF,
    #F4F8FF
    );

    position:relative;

}

.branch-dropdown-header::after{

    content:"";

    position:absolute;

    left:18px;

    right:18px;

    bottom:0;

    height:1px;

    background:#EEF2F7;

}

.branch-dropdown-icon{

    width:44px;

    height:44px;

    border-radius:12px;

    background:#EAF2FF;

    display:flex;

    align-items:center;

    justify-content:center;

}

.branch-dropdown-icon [data-lucide]{

    width:20px;

    height:20px;

    stroke:#2563EB;

}

.branch-dropdown-title{

    display:flex;

    flex-direction:column;

}

.branch-dropdown-title strong{

    font-size:15px;

    font-weight:800;

    color:#111827;

}

.branch-dropdown-title span{

    margin-top:2px;

    font-size:12px;

    color:#64748B;

}

.branch-dropdown-body{

    padding:10px;

    max-height:320px;

    overflow-y:auto;

}

/*====================================================
SIDEBAR COLLAPSE PREMIUM
====================================================*/

/* Header */
body.sidebar-collapse .ferre-topbar{

    left:70px !important;

}

/* Contenido */
body.sidebar-collapse .content-wrapper{

    margin-left:70px !important;

}

/* Estado normal */

body:not(.sidebar-collapse) .content-wrapper{

    margin-left:270px !important;

}

/*====================================================
    HEADER PREMIUM MODAL PRODUCTO (NUEVA ESTRUCTURA)
====================================================*/

.premium-header{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:22px;
}

.premium-header-top{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:20px;

    width:100%;

    margin-bottom:12px;

}

.premium-category-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:6px 14px;

    background:linear-gradient(135deg,#6D5BFF,#5B5CE2);

    color:#fff;

    border-radius:8px;

    font-size:12px;
    font-weight:700;
    letter-spacing:.8px;
    text-transform:uppercase;
}

.premium-status{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:8px 14px;

    background:#ECFDF5;

    border:1px solid #D8F3DC;

    border-radius:999px;

    color:#16A34A;

    font-size:13px;

    font-weight:700;

    white-space:nowrap;

    flex-shrink:0;

    margin-right:56px;

}

.premium-title{

    margin:6px 0 0;

    font-size:30px;

    font-weight:800;

    line-height:1.12;

    letter-spacing:-.5px;

    color:#111827;

    text-transform:uppercase;

}

.premium-subtitle{

    margin-top:6px;

    font-size:22px;

    font-weight:700;

    color:#2F5CF4;

    line-height:1.15;

    text-transform:uppercase;

}

/*=====================================================
=            ERP CONFIGURACION PREMIUM
=====================================================*/

#contenedor_modulos_erp > div{

    display:flex;

}

.erp-card-modulo{

    width:100%;

    min-height:100%;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    background:#fff;

    border:1px solid #edf2f7;

    border-radius:22px;

    padding:28px;

    box-shadow:0 12px 30px rgba(15,23,42,.08);

    transition:.35s;

    position:relative;

    overflow:hidden;

    box-sizing:border-box;

}


.erp-card-modulo::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:6px;

    background:linear-gradient(90deg,#2563eb,#3b82f6,#60a5fa);

}

.erp-card-modulo:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(37,99,235,.18);

}

.erp-card-icon{

    width:72px;

    height:72px;

    border-radius:20px;

    background:#eff6ff;

    color:#2563eb;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    margin-bottom:18px;

}

.erp-card-name{

    font-size:22px;

    font-weight:700;

    color:#0f172a;

}

.erp-card-count{

    display:inline-block;

    margin-top:12px;

    padding:6px 14px;

    border-radius:50px;

    background:#dbeafe;

    color:#1d4ed8;

    font-weight:700;

    font-size:13px;

}

.erp-preview{

    margin-top:22px;

    margin-bottom:22px;
	
	flex:1;

}

.erp-preview-item{

    display:flex;

    align-items:center;

    gap:10px;

    padding:7px 0;

    color:#334155;

}

.erp-preview-item i{

    color:#16a34a;

}

.erp-preview-more{

    margin-top:10px;

    font-weight:700;

    color:#2563eb;

}

.erp-btn-configurar{

    width:100%;

    height:48px;

    border:none;

    border-radius:14px;

    background:#2563eb;

    color:#fff;

    font-weight:700;

    transition:.3s;

}

.erp-btn-configurar:hover{

    background:#1d4ed8;

}

.erp-capacidad-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 0;

    border-bottom:1px solid #eef2f7;

}

.erp-capacidad-info{

    display:flex;

    align-items:center;

    gap:12px;

    font-weight:600;

    color:#34495e;

}

.erp-capacidad-info i{

    width:26px;

    text-align:center;

    color:#0d6efd;

    font-size:18px;

}

/*=====================================================
GRID DE CAPACIDADES
=====================================================*/

.erp-capacidades-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));

    gap:18px;

    margin-top:20px;

}

/*=====================================================
TARJETA
=====================================================*/

.erp-capacidad-card{

    background:#FFFFFF;

    border:1px solid #E7EDF5;

    border-radius:18px;

    transition:.25s;

    cursor:pointer;

    overflow:hidden;

}

.erp-capacidad-label{

    display:flex;

    align-items:center;

    justify-content:space-between;

    width:100%;

    padding:18px;

    margin:0;

    cursor:pointer;

}

.erp-capacidad-right{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    margin-left:18px;

}

.erp-capacidad-right input{

    width:22px;

    height:22px;

    cursor:pointer;

}

.erp-capacidad-titulo{

    font-size:17px;

    font-weight:700;

    color:#1F2937;

    line-height:1.2;

}

.erp-capacidad-card:hover{

    transform:translateY(-3px);

    border-color:#2563EB;

    box-shadow:
        0 12px 30px rgba(37,99,235,.10);

}

/*=====================================================
HEADER DE CADA CAPACIDAD
=====================================================*/



.erp-capacidad-left{

    display:flex;

    align-items:center;

    gap:14px;

    flex:1;

}

.erp-capacidad-icon{

    width:52px;

    height:52px;

    border-radius:14px;

    background:#EEF5FF;

    color:#2563EB;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

    flex-shrink:0;

}

/*====================================================
        CONFIGURADOR ERP PREMIUM V2
====================================================*/

/*====================================================
CONTENEDOR PRINCIPAL
====================================================*/

/*.premium-product-modal{

    backdrop-filter:blur(6px);

    background:rgba(15,23,42,.55);

}

.premium-product-container{

    width:min(1500px,96vw);

    max-width:1500px;

    height:90vh;

    max-height:90vh;

    border-radius:22px;

    overflow:hidden;

    background:#ffffff;

    box-shadow:
        0 25px 80px rgba(15,23,42,.25);

    display:flex;

    flex-direction:column;

}

.premium-product-header{

    min-height:72px;

    padding:0 28px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    background:linear-gradient(135deg,#2563eb,#1d4ed8);

    color:#fff;

    border-bottom:none;

}

.premium-product-body{

    flex:1;

    overflow:hidden;

    display:flex;

    background:#f8fafc;

}

.premium-product-footer{

    padding:18px 24px;

    background:#fff;

    border-top:1px solid #e5e7eb;

}*/

/*=========================================================
  MODAL ERP - CONFIGURADOR DE MÓDULOS
=========================================================*/

.erp-modal{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(15,23,42,.55);
    backdrop-filter:blur(6px);
    z-index:99999;
}

.erp-modal.show{
    display:flex;
}

.erp-modal-container{

    width:min(1500px,96vw);

    max-width:1500px;

    height:90vh;

    max-height:90vh;

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    box-shadow:0 25px 80px rgba(15,23,42,.25);

}

.erp-modal-header{

    min-height:74px;

    padding:0 28px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    background:linear-gradient(135deg,#2563eb,#1d4ed8);

    color:#fff;

}

.erp-modal-header h3{

    margin:0;

    font-size:34px;

    font-weight:700;

}

.erp-modal-header small{

    display:block;

    margin-top:4px;

    color:rgba(255,255,255,.85);

}

.erp-close{

    width:42px;

    height:42px;

    border:none;

    border-radius:10px;

    background:#ffffff;

    color:#1d4ed8;

    font-size:24px;

    cursor:pointer;

    transition:.25s;

}

.erp-close:hover{

    transform:scale(1.08);

}

.erp-modal-body{

    flex:1;

    overflow:auto;

    padding:28px;

    background:#f8fafc;

}

.erp-modal-footer{

    padding:18px 24px;

    background:#fff;

    border-top:1px solid #e5e7eb;

    display:flex;

    justify-content:flex-end;

    gap:12px;

}

/* ==========================================================
   FERRETERÍA MATIZADOS FACTURADOR
   EDITAR PRODUCTO
   MODAL SKU PREMIUM DEFINITIVO
   10/08/2026
========================================================== */

/* MODAL GENERAL */
.ferre-modal-sku .modal-dialog{
    max-width: 1160px;
    margin: 1.75rem auto;
}

.ferre-modal-sku .ferre-sku-content{
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    background: #f8fafc;
    box-shadow: 0 25px 70px rgba(15, 23, 42, .28);
}


/* ==========================================================
   HEADER
========================================================== */

.ferre-modal-sku .ferre-sku-header{
    min-height: 92px;
    padding: 18px 28px;

    border: 0;

    background:
        linear-gradient(
            135deg,
            #0757e8 0%,
            #0878f5 55%,
            #0d8af5 100%
        );

    color: #fff;
}

.ferre-modal-sku .ferre-sku-header-icon{
    width: 52px;
    height: 52px;
    flex: 0 0 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-right: 15px;

    border-radius: 15px;

    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.20);

    color: #fff;
    font-size: 20px;

    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.ferre-modal-sku .ferre-sku-header .modal-title{
    margin: 0;

    color: #fff;

    font-size: 23px;
    font-weight: 750;
    line-height: 1.15;
}

.ferre-modal-sku .ferre-sku-header small{
    display: block;

    margin-top: 5px;

    color: rgba(255,255,255,.88);

    font-size: 13px;
    font-weight: 500;
}

.ferre-modal-sku .ferre-sku-close{
    margin: 0 !important;
    padding: 0 !important;

    color: #fff !important;

    font-size: 30px;
    font-weight: 300;

    opacity: .90 !important;
    text-shadow: none !important;

    transition: .2s ease;
}

.ferre-modal-sku .ferre-sku-close:hover{
    opacity: 1 !important;
    transform: scale(1.08);
}


/* ==========================================================
   BODY
========================================================== */

.ferre-modal-sku .modal-body{
    padding: 22px;
    background: #f6f8fb;
}


/* ==========================================================
   TARJETAS / SECCIONES
========================================================== */

.ferre-modal-sku .ferre-sku-section{
    margin-bottom: 16px;
    padding: 20px 20px 17px;

    border: 1px solid #e4e9f0;
    border-radius: 14px;

    background: #fff;

    box-shadow:
        0 3px 12px rgba(15,23,42,.035);
}

.ferre-modal-sku .ferre-sku-section:last-child{
    margin-bottom: 0;
}


/* TÍTULO DE CADA SECCIÓN */

.ferre-modal-sku .ferre-sku-section-title{
    display: flex;
    align-items: center;

    margin-bottom: 18px;
}

.ferre-modal-sku .ferre-sku-section-icon{
    width: 38px;
    height: 38px;
    flex: 0 0 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-right: 11px;

    border-radius: 10px;

    background: #eaf3ff;

    color: #0875ed;
    font-size: 15px;
}

.ferre-modal-sku .ferre-icon-money{
    background: #eaf8f0;
    color: #17934d;
}

.ferre-modal-sku .ferre-icon-stock{
    background: #fff4df;
    color: #dc8b08;
}

.ferre-modal-sku .ferre-icon-variant{
    background: #eeeaff;
    color: #6c52d9;
}

.ferre-modal-sku .ferre-sku-section-title strong{
    display: block;

    color: #172235;

    font-size: 15px;
    font-weight: 750;
    line-height: 1.2;
}

.ferre-modal-sku .ferre-sku-section-title span{
    display: block;

    margin-top: 3px;

    color: #8995a5;

    font-size: 12px;
    font-weight: 500;
}


/* ==========================================================
   LABELS
========================================================== */

.ferre-modal-sku label{
    display: block;

    margin-bottom: 7px;

    color: #27364b;

    font-size: 13px;
    font-weight: 700;
}

.ferre-modal-sku label > i{
    margin-right: 5px;
    color: #8492a6;
}


/* ==========================================================
   INPUTS
========================================================== */

.ferre-modal-sku .form-control{
    height: 44px;

    padding: 9px 13px;

    border: 1px solid #dbe2eb;
    border-radius: 9px;

    background: #fff;

    color: #26364a;

    font-size: 14px;
    font-weight: 500;

    box-shadow: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.ferre-modal-sku .form-control:focus{
    border-color: #1684f5;

    background: #fff;

    box-shadow:
        0 0 0 3px rgba(22,132,245,.10);
}

.ferre-modal-sku .form-control[readonly]{
    background: #f2f5f8;
    color: #657286;
}


/* ==========================================================
   INPUT CON ICONO
========================================================== */

.ferre-modal-sku .ferre-sku-input-icon{
    position: relative;
}

.ferre-modal-sku .ferre-sku-input-icon > i{
    position: absolute;

    left: 14px;
    top: 50%;

    z-index: 2;

    transform: translateY(-50%);

    color: #8190a3;
    font-size: 13px;

    pointer-events: none;
}

.ferre-modal-sku .ferre-sku-input-icon .form-control{
    padding-left: 39px;
}


/* ==========================================================
   CAMPOS MONETARIOS
========================================================== */

.ferre-modal-sku .ferre-sku-money{
    display: flex;

    height: 44px;

    overflow: hidden;

    border: 1px solid #dbe2eb;
    border-radius: 9px;

    background: #fff;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.ferre-modal-sku .ferre-sku-money:focus-within{
    border-color: #1684f5;

    box-shadow:
        0 0 0 3px rgba(22,132,245,.10);
}

.ferre-modal-sku .ferre-sku-money > span{
    width: 45px;
    flex: 0 0 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-right: 1px solid #e0e6ed;

    background: #f5f7fa;

    color: #344258;

    font-size: 14px;
    font-weight: 750;
}

.ferre-modal-sku .ferre-sku-money .form-control{
    height: 42px;

    border: 0 !important;
    border-radius: 0;

    box-shadow: none !important;
}


/* ==========================================================
   VARIANTES
========================================================== */

.ferre-modal-sku .ferre-sku-variants{
    border-color: #dfe6ef;
}

.ferre-modal-sku #listaVariantesEditarSKU{
    margin-bottom: 17px;
}


/*
   IMPORTANTE:
   El JS actual todavía genera temporalmente:
   "Valores actuales"
*/

.ferre-modal-sku #listaVariantesEditarSKU .form-group{
    margin-bottom: 0;

    padding: 14px;

    border: 1px solid #dce7f5;
    border-radius: 10px;

    background: #f8fbff;
}

.ferre-modal-sku #listaVariantesEditarSKU .form-control{
    border-color: #d6e3f2;
    background: #fff;
}


/* COMBINACIÓN */

.ferre-modal-sku .ferre-sku-combination{
    padding: 15px;

    border: 1px solid #d8eadf;
    border-radius: 11px;

    background: #f8fcf9;
}

.ferre-modal-sku .ferre-sku-combination label{
    color: #1d5134;
}

.ferre-modal-sku .ferre-sku-combination label i{
    color: #25a45c;
}

.ferre-modal-sku .ferre-sku-combination .form-control{
    border-color: #cfe4d6;

    background: #fff;

    color: #247044;

    font-size: 15px;
    font-weight: 700;
}

.ferre-modal-sku .ferre-sku-combination small{
    display: block;

    margin-top: 7px;

    color: #4d8b67;

    font-size: 11px;
    font-weight: 500;
}


/* ==========================================================
   FOOTER
========================================================== */

.ferre-modal-sku .ferre-sku-footer{
    padding: 16px 22px;

    border-top: 1px solid #e3e8ef;

    background: #fff;
}

.ferre-modal-sku .ferre-sku-footer .btn{
    height: 42px;

    padding: 0 18px;

    border-radius: 9px;

    font-size: 13px;
    font-weight: 700;

    transition: .2s ease;
}

.ferre-modal-sku .ferre-sku-footer .btn i{
    margin-right: 6px;
}


/* CANCELAR */

.ferre-modal-sku .ferre-sku-btn-cancel{
    min-width: 115px;

    border: 1px solid #d7dee8;

    background: #fff;

    color: #3f4b5d;
}

.ferre-modal-sku .ferre-sku-btn-cancel:hover{
    border-color: #c5ceda;
    background: #f4f6f8;
}


/* GUARDAR */

.ferre-modal-sku .ferre-sku-btn-save{
    min-width: 155px;

    border: 0;

    background: linear-gradient(
        135deg,
        #18a84e,
        #07933c
    );

    color: #fff;

    box-shadow:
        0 5px 13px rgba(8,147,60,.18);
}

.ferre-modal-sku .ferre-sku-btn-save:hover{
    color: #fff;

    transform: translateY(-1px);

    box-shadow:
        0 7px 16px rgba(8,147,60,.24);
}


/* ESTADO DESHABILITADO ACTUAL */

.ferre-modal-sku .ferre-sku-btn-save:disabled{
    opacity: .55;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1200px){

    .ferre-modal-sku .modal-dialog{
        max-width: calc(100% - 40px);
    }

}

@media (max-width: 768px){

    .ferre-modal-sku .modal-dialog{
        max-width: none;
        margin: 10px;
    }

    .ferre-modal-sku .modal-body{
        padding: 14px;
    }

    .ferre-modal-sku .ferre-sku-header{
        min-height: 80px;
        padding: 15px 18px;
    }

    .ferre-modal-sku .ferre-sku-section{
        padding: 16px;
    }

    .ferre-modal-sku .ferre-sku-header-icon{
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }

    .ferre-modal-sku .ferre-sku-header .modal-title{
        font-size: 20px;
    }

}

/* =========================================================
   ACORDEÓN ÚNICO - PRODUCTOS / VARIANTES
   ========================================================= */

#tbl_productos td.detalle-producto{
    cursor:pointer;
    position:relative;
}


/* Botón + */

#tbl_productos td.detalle-producto::before{

    content:"+";

    display:inline-flex;

    align-items:center;
    justify-content:center;

    width:20px;
    height:20px;

    border-radius:50%;

    background:#22c55e;

    color:#fff;

    font-size:16px;
    font-weight:700;

    line-height:20px;

    box-shadow:0 1px 3px rgba(0,0,0,.18);

    transition:all .18s ease;
}


/* Hover */

#tbl_productos td.detalle-producto:hover::before{

    transform:scale(1.08);

}


/* Botón - */

#tbl_productos td.detalle-producto.detalle-abierto::before{

    content:"−";

    background:#ef4444;

}


/* Detalle normal */

.detalle-producto-normal{

    background:#f8fafc;

    border-top:1px solid #e5e7eb;

}


/* Detalle SKU */

.detalle-variantes-sku{

    background:#ffffff;

    border-top:1px solid #e5e7eb;

}


.detalle-variantes-sku table thead th{

    background:#0f172a !important;

    color:#ffffff !important;

    border-color:#1e293b !important;

    padding:12px 10px;

}


.detalle-variantes-sku table tbody td{

    padding:13px 10px;

    vertical-align:middle !important;

}

/* =========================================================
   FIX DEFINITIVO - MODAL FINALIZAR VENTA
   ========================================================= */


/* Liberamos el panel POS del contexto que estaba
   atrapando visualmente al modal */
.dashboard-right{
    position: static !important;
}


/* Overlay global */
#dashboardVentaModal.dashboard-sale-modal{

    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    margin: 0 !important;
    padding: 20px !important;

    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;

    background: rgba(15, 23, 42, .55) !important;

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    z-index: 999999 !important;
}


/* Ventana */
#dashboardVentaModal .dashboard-sale-dialog{

    position: relative !important;

    width: 100% !important;
    max-width: 620px !important;

    height: auto !important;

    max-height: calc(100vh - 40px) !important;

    margin: 0 auto !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;

    background: #fff !important;

    border-radius: 22px !important;

    box-shadow:
        0 25px 70px rgba(15, 23, 42, .25) !important;
}


/* Cabecera fija dentro del modal */
#dashboardVentaModal .dashboard-sale-header{

    flex: 0 0 auto !important;

    position: relative !important;

    background: #fff !important;

    z-index: 2 !important;
}


/* ÚNICAMENTE esta parte hace scroll */
#dashboardVentaModal .dashboard-sale-body{

    flex: 1 1 auto !important;

    min-height: 0 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    overscroll-behavior: contain;
}


/* Footer siempre visible */
#dashboardVentaModal .dashboard-sale-footer{

    flex: 0 0 auto !important;

    position: relative !important;

    background: #f8fafc !important;

    z-index: 2 !important;
}

/* =========================================================
   SWEETALERT2 - SIEMPRE ENCIMA DE LOS MODALES DEL SISTEMA
========================================================= */

body.swal2-shown > .swal2-container,
.swal2-container{
    z-index: 9999999 !important;
}

/* =========================================================
   ENCABEZADO PREMIUM - FINALIZAR VENTA
========================================================= */

#dashboardVentaModal .dashboard-sale-header{

    background: linear-gradient(
        135deg,
        #2563EB 0%,
        #3B82F6 100%
    ) !important;

    border-bottom: none !important;

}


/* TITULO */

#dashboardVentaModal .dashboard-sale-header h3{

    color: #FFFFFF !important;

}


/* SUBTITULO */

#dashboardVentaModal .dashboard-sale-header span{

    color: rgba(255,255,255,.82) !important;

}


/* BOTON CERRAR */

#dashboardVentaModal .dashboard-sale-close{

    background: rgba(255,255,255,.16) !important;

    color: #FFFFFF !important;

    border: 1px solid rgba(255,255,255,.20) !important;

}


#dashboardVentaModal .dashboard-sale-close:hover{

    background: rgba(255,255,255,.28) !important;

    color: #FFFFFF !important;

}

/* =========================================================
   SELECTOR PREMIUM DE VARIANTES / TALLAS
   Dashboard POS
   ========================================================= */

#grupoTalla{
    margin-top: 24px;
}

#grupoTalla > label,
#grupoTalla .premium-variant-label{
    display: block;
    margin-bottom: 12px;

    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}


/* CONTENEDOR DE LAS TALLAS */

#modalTallas{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}


/* BOTÓN DE TALLA */

#modalTallas .premium-variant-option{
    appearance: none;
    -webkit-appearance: none;

    min-width: 48px;
    height: 44px;

    padding: 0 14px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;

    border: 1.5px solid #dbe4f0;
    border-radius: 11px;

    color: #334155;

    font-size: 14px;
    font-weight: 700;
    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 2px 5px rgba(15, 23, 42, 0.04);

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


/* HOVER */

#modalTallas .premium-variant-option:hover{
    border-color: #2563eb;

    color: #2563eb;

    background: #f8fbff;

    transform: translateY(-1px);

    box-shadow:
        0 5px 12px rgba(37, 99, 235, 0.12);
}


/* TALLA SELECCIONADA */

#modalTallas .premium-variant-option.active{
    background: #2563eb;

    border-color: #2563eb;

    color: #ffffff;

    box-shadow:
        0 5px 14px rgba(37, 99, 235, 0.25);

    transform: translateY(-1px);
}


/* CLICK */

#modalTallas .premium-variant-option:active{
    transform: scale(0.97);
}


/* FOCUS */

#modalTallas .premium-variant-option:focus{
    outline: none;
}


/* RESPONSIVE */

@media (max-width: 768px){

    #modalTallas{
        gap: 8px;
    }

    #modalTallas .premium-variant-option{
        min-width: 44px;
        height: 42px;
        padding: 0 12px;
    }

}

/* =========================================
   MEDIOS DE PAGO
========================================= */

.empresa-pago-box {
    border: 1px solid #e7eaf0;
    border-radius: 14px;
    padding: 18px;
    background: #fff;
    height: 100%;
}

.empresa-pago-title {
    font-size: 15px;
    font-weight: 600;
    color: #172554;
    margin-bottom: 12px;
}

.empresa-qr-preview {
    width: 190px;
    height: 190px;
    margin: 5px auto 0;
    border: 1px dashed #d8dde7;
    border-radius: 12px;
    background: #f8f9fb;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}

.empresa-qr-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
}