/* ==========================================================
   ERP DESIGN SYSTEM V2
   Sistema visual global del ERP Comercial
   POS SYSTEM / ERP SYSTEM

   Propósito:
   - Centralizar patrones visuales reutilizables.
   - Evitar estilos duplicados entre módulos.
   - Mantener compatibilidad progresiva con vistas existentes.
   - Servir como base para PC, tablet y móvil.

   Orden recomendado:
   1. Bootstrap / AdminLTE
   2. DataTables / Select2
   3. erp-theme-v2.css
   4. CSS específico del módulo
========================================================== */


/* ==========================================================
   01. DESIGN TOKENS
========================================================== */

:root{
    /* Marca y estados */
    --erp-primary:#0d6efd;
    --erp-primary-rgb:13,110,253;
    --erp-primary-dark:#0a58ca;
    --erp-primary-soft:#eaf2ff;

    --erp-success:#198754;
    --erp-success-rgb:25,135,84;
    --erp-success-dark:#146c43;
    --erp-success-soft:#e8f7ef;

    --erp-danger:#dc3545;
    --erp-danger-rgb:220,53,69;
    --erp-danger-dark:#b02a37;
    --erp-danger-soft:#fdecec;

    --erp-warning:#ffc107;
    --erp-warning-rgb:255,193,7;
    --erp-warning-dark:#8a6800;
    --erp-warning-soft:#fff8df;

    --erp-info:#0dcaf0;
    --erp-info-rgb:13,202,240;
    --erp-info-dark:#087990;
    --erp-info-soft:#e7f9fd;

    --erp-purple:#6610f2;
    --erp-purple-soft:#f1edff;

    --erp-orange:#fd7e14;
    --erp-orange-soft:#fff3e6;

    --erp-teal:#20c997;
    --erp-teal-soft:#e9fbf6;

    /* Texto y superficies */
    --erp-heading:#0f172a;
    --erp-text:#334155;
    --erp-text-soft:#475569;
    --erp-muted:#64748b;
    --erp-subtle:#94a3b8;

    --erp-background:#f4f7fb;
    --erp-surface:#ffffff;
    --erp-surface-soft:#f8fafc;
    --erp-surface-muted:#f1f5f9;
    --erp-border:#e5e7eb;
    --erp-border-soft:#edf0f4;
    --erp-overlay:rgba(15,23,42,.55);

    /* Tipografía */
    --erp-font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    --erp-font-size-xs:.75rem;
    --erp-font-size-sm:.8125rem;
    --erp-font-size-md:.875rem;
    --erp-font-size-base:1rem;
    --erp-font-size-lg:1.125rem;
    --erp-font-size-xl:1.375rem;
    --erp-font-size-2xl:1.875rem;

    --erp-font-weight-medium:500;
    --erp-font-weight-semibold:600;
    --erp-font-weight-bold:700;
    --erp-font-weight-extrabold:800;

    /* Espaciado */
    --erp-space-1:.25rem;
    --erp-space-2:.5rem;
    --erp-space-3:.75rem;
    --erp-space-4:1rem;
    --erp-space-5:1.25rem;
    --erp-space-6:1.5rem;
    --erp-space-7:2rem;
    --erp-space-8:2.5rem;

    /* Bordes */
    --erp-radius-xs:.375rem;
    --erp-radius-sm:.5rem;
    --erp-radius-md:.75rem;
    --erp-radius-lg:1rem;
    --erp-radius-xl:1.375rem;
    --erp-radius-pill:999px;

    /* Sombras */
    --erp-shadow-xs:0 2px 8px rgba(15,23,42,.035);
    --erp-shadow-sm:0 5px 15px rgba(15,23,42,.05);
    --erp-shadow-md:0 10px 25px rgba(15,23,42,.08);
    --erp-shadow-lg:0 18px 42px rgba(15,23,42,.12);
    --erp-shadow-modal:0 24px 70px rgba(15,23,42,.22);

    /* Movimiento */
    --erp-transition-fast:.16s ease;
    --erp-transition:.25s ease;
    --erp-transition-slow:.4s ease;

    /* Capas */
    --erp-z-sticky:1020;
    --erp-z-dropdown:1050;
    --erp-z-modal:1060;

    /* Compatibilidad temporal con V1 */
    --radius-sm:var(--erp-radius-sm);
    --radius-md:var(--erp-radius-md);
    --radius-lg:var(--erp-radius-lg);
    --radius-xl:var(--erp-radius-xl);
    --shadow-soft:var(--erp-shadow-sm);
    --shadow-medium:var(--erp-shadow-md);
    --shadow-heavy:var(--erp-shadow-lg);
}


/* ==========================================================
   02. FUNDAMENTOS
========================================================== */

html{
    scroll-behavior:smooth;
}

body{
    background:var(--erp-background);
    color:var(--erp-text);
    font-family:var(--erp-font-family);
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6{
    color:var(--erp-heading);
}

a{
    transition:color var(--erp-transition-fast);
}

::selection{
    background:rgba(var(--erp-primary-rgb),.18);
}

.erp-screen{
    min-height:100%;
}

.erp-content{
    padding-block:var(--erp-space-4);
}

.erp-section{
    margin-bottom:var(--erp-space-6);
}


/* ==========================================================
   03. TIPOGRAFÍA Y JERARQUÍA
========================================================== */

.erp-eyebrow{
    display:inline-block;
    margin-bottom:var(--erp-space-1);
    color:var(--erp-primary);
    font-size:var(--erp-font-size-xs);
    font-weight:var(--erp-font-weight-bold);
    letter-spacing:.08em;
    text-transform:uppercase;
}

.erp-page-title{
    margin:0;
    color:var(--erp-heading);
    font-size:clamp(1.55rem,2vw,1.95rem);
    font-weight:var(--erp-font-weight-extrabold);
    line-height:1.15;
}

.erp-page-subtitle{
    margin:.35rem 0 0;
    color:var(--erp-muted);
    font-size:.9375rem;
}

.erp-section-title{
    margin:0;
    color:var(--erp-heading);
    font-size:1rem;
    font-weight:var(--erp-font-weight-bold);
}

.erp-section-subtitle{
    margin:.2rem 0 0;
    color:var(--erp-muted);
    font-size:var(--erp-font-size-sm);
}

.erp-money,
.erp-number{
    font-variant-numeric:tabular-nums;
}


/* ==========================================================
   04. ENCABEZADO DE PÁGINA Y TOOLBAR
========================================================== */

.erp-page-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--erp-space-5);
    padding:var(--erp-space-5) 0 var(--erp-space-3);
    margin-bottom:var(--erp-space-5);
}

.erp-page-header__main{
    display:flex;
    align-items:center;
    gap:var(--erp-space-3);
    min-width:0;
}

.erp-page-header__content{
    min-width:0;
}

.erp-page-icon{
    flex:0 0 auto;
    width:48px;
    height:48px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:var(--erp-radius-md);
    background:var(--erp-primary-soft);
    color:var(--erp-primary);
    font-size:1.25rem;
}

.erp-header-actions,
.erp-toolbar{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:var(--erp-space-2);
}

.erp-toolbar{
    padding:var(--erp-space-3);
    border:1px solid var(--erp-border-soft);
    border-radius:var(--erp-radius-md);
    background:var(--erp-surface);
    box-shadow:var(--erp-shadow-xs);
}

.erp-last-update{
    display:inline-flex;
    align-items:center;
    gap:var(--erp-space-2);
    min-height:40px;
    padding:.55rem .8rem;
    border:1px solid var(--erp-border);
    border-radius:var(--erp-radius-sm);
    background:var(--erp-surface);
    color:var(--erp-muted);
    font-size:var(--erp-font-size-sm);
}


/* ==========================================================
   05. CARDS Y SUPERFICIES
========================================================== */

.erp-card,
.card{
    border:1px solid rgba(226,232,240,.9);
    border-radius:var(--erp-radius-lg);
    background:var(--erp-surface);
    box-shadow:var(--erp-shadow-sm);
}

.erp-card{
    overflow:hidden;
}

.erp-card--flat{
    box-shadow:none;
}

.erp-card--interactive{
    transition:transform var(--erp-transition),box-shadow var(--erp-transition);
}

.erp-card--interactive:hover{
    transform:translateY(-3px);
    box-shadow:var(--erp-shadow-md);
}

.erp-card-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--erp-space-3);
    padding:var(--erp-space-5);
    border-bottom:1px solid var(--erp-border-soft);
    background:linear-gradient(180deg,var(--erp-surface),var(--erp-surface-soft));
}

.erp-card-body{
    padding:var(--erp-space-5);
}

.erp-card-footer{
    padding:var(--erp-space-4) var(--erp-space-5);
    border-top:1px solid var(--erp-border-soft);
    background:var(--erp-surface-soft);
}

.card-header{
    font-weight:var(--erp-font-weight-bold);
    letter-spacing:.01em;
}

.card-header.bg-white{
    background:linear-gradient(180deg,var(--erp-surface),var(--erp-surface-soft)) !important;
}


/* ==========================================================
   06. BOTONES
========================================================== */

.btn,
.erp-btn{
    border-radius:var(--erp-radius-md);
    font-weight:var(--erp-font-weight-semibold);
    transition:
        transform var(--erp-transition-fast),
        box-shadow var(--erp-transition-fast),
        background-color var(--erp-transition-fast),
        border-color var(--erp-transition-fast);
}

.btn:hover,
.erp-btn:hover{
    transform:translateY(-2px);
}

.btn:active,
.erp-btn:active{
    transform:translateY(0);
}

.btn:focus-visible,
.erp-btn:focus-visible{
    outline:3px solid rgba(var(--erp-primary-rgb),.22);
    outline-offset:2px;
}

.erp-btn-primary{
    color:#fff;
    background:var(--erp-primary);
    border-color:var(--erp-primary);
    box-shadow:0 8px 18px rgba(var(--erp-primary-rgb),.18);
}

.erp-btn-primary:hover{
    color:#fff;
    background:var(--erp-primary-dark);
    border-color:var(--erp-primary-dark);
}

.erp-btn-soft{
    color:var(--erp-primary);
    background:var(--erp-primary-soft);
    border-color:transparent;
}

.erp-btn-icon,
.erp-action-group .btn{
    width:36px;
    height:36px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border-radius:var(--erp-radius-sm) !important;
}

.erp-action-group{
    display:inline-flex;
    align-items:center;
    gap:.25rem;
}

.erp-btn-loading{
    pointer-events:none;
    opacity:.78;
}

.erp-btn-loading .erp-btn-loading__icon{
    animation:erpSpin .75s linear infinite;
}

.btn-recargar-erp{
    padding:.5rem 1.15rem;
    box-shadow:0 8px 18px rgba(var(--erp-primary-rgb),.14);
}

.btn-recargar-erp:hover i{
    animation:erpSpin .65s ease;
}


/* ==========================================================
   07. KPI SYSTEM
========================================================== */

.erp-kpi-grid,
.kpi-premium-row{
    --erp-kpi-gap:1rem;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:var(--erp-kpi-gap);
}

.erp-kpi,
.erp-kpi-card,
.kpi-premium-row .kpi-card{
    --erp-kpi-color:var(--erp-primary);
    --erp-kpi-soft:var(--erp-primary-soft);

    position:relative;
    min-height:132px;
    display:flex;
    align-items:center;
    gap:var(--erp-space-4);
    padding:var(--erp-space-5);
    overflow:hidden;
    border:1px solid rgba(226,232,240,.9);
    border-top:4px solid var(--erp-kpi-color);
    border-radius:var(--erp-radius-lg);
    background:linear-gradient(180deg,var(--erp-surface),var(--erp-surface-soft));
    box-shadow:var(--erp-shadow-sm);
    transition:transform var(--erp-transition),box-shadow var(--erp-transition);
}

.erp-kpi::after,
.erp-kpi-card::after,
.kpi-premium-row .kpi-card::after{
    content:"";
    position:absolute;
    right:-34px;
    top:-34px;
    width:94px;
    height:94px;
    border-radius:50%;
    background:color-mix(in srgb,var(--erp-kpi-color) 7%,transparent);
    pointer-events:none;
}

.erp-kpi:hover,
.erp-kpi-card:hover,
.kpi-premium-row .kpi-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--erp-shadow-md);
}
.erp-kpi__icon{

    align-self:flex-start;

    margin-top:2px;

}

.erp-kpi__icon,
.erp-kpi-icon,
.kpi-icon{
    position:relative;
    z-index:1;
    flex:0 0 auto;
    width:50px;
    height:50px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:var(--erp-radius-md);
    background:var(--erp-kpi-soft);
    color:var(--erp-kpi-color);
    font-size:1.35rem;
    transition:transform var(--erp-transition);
}

.erp-kpi:hover .erp-kpi__icon,
.erp-kpi-card:hover .erp-kpi-icon,
.kpi-card:hover .kpi-icon{
    transform:scale(1.06);
}

.erp-kpi__content{
    position:relative;
    z-index:1;
    min-width:0;
}

.erp-kpi__label,
.erp-kpi small,
.erp-kpi-card small,
.kpi-card small{
    display:block;
    margin:0 0 .35rem;
    color:var(--erp-text-soft) !important;
    font-size:var(--erp-font-size-sm);
    font-weight:var(--erp-font-weight-bold);
}

.erp-kpi__value,
.erp-kpi h2,
.erp-kpi-card h2,
.kpi-card h2{
    margin:0;
    color:var(--erp-heading);
    font-size:clamp(1.45rem,2vw,2.15rem);
    font-weight:var(--erp-font-weight-extrabold);
    line-height:1.08;
    font-variant-numeric:tabular-nums;
}

.erp-kpi__subtitle,
.erp-kpi-subtitle,
.kpi-subtitle{
    display:block;
    margin-top:.4rem;
    color:var(--erp-subtle);
    font-size:var(--erp-font-size-xs);
}

.erp-kpi--compact{
    min-height:104px;
    padding:var(--erp-space-4);
}

.erp-kpi--large{
    min-height:154px;
}

.erp-kpi--primary,
.kpi-total,
.kpi-primary{
    --erp-kpi-color:var(--erp-primary);
    --erp-kpi-soft:var(--erp-primary-soft);
}

.erp-kpi--success,
.kpi-success,
.kpi-activos,
.kpi-entradas,
.kpi-monto{
    --erp-kpi-color:var(--erp-success);
    --erp-kpi-soft:var(--erp-success-soft);
}

.erp-kpi--danger,
.kpi-danger,
.kpi-inactivos,
.kpi-salidas,
.kpi-anuladas{
    --erp-kpi-color:var(--erp-danger);
    --erp-kpi-soft:var(--erp-danger-soft);
}

.erp-kpi--warning,
.kpi-warning{
    --erp-kpi-color:var(--erp-warning);
    --erp-kpi-soft:var(--erp-warning-soft);
}

.erp-kpi--info,
.kpi-info,
.kpi-credito{
    --erp-kpi-color:var(--erp-info);
    --erp-kpi-soft:var(--erp-info-soft);
}

.erp-kpi--purple,
.kpi-existencia{
    --erp-kpi-color:var(--erp-purple);
    --erp-kpi-soft:var(--erp-purple-soft);
}

.erp-kpi--orange,
.kpi-valor{
    --erp-kpi-color:var(--erp-orange);
    --erp-kpi-soft:var(--erp-orange-soft);
}

.erp-kpi--teal,
.kpi-ultimo{
    --erp-kpi-color:var(--erp-teal);
    --erp-kpi-soft:var(--erp-teal-soft);
}


/* ==========================================================
   08. TABLAS Y DATATABLES
========================================================== */

.erp-table,
.table{
    vertical-align:middle;
}

.erp-table thead th,
.table thead th{
    padding:.8rem .75rem;
    color:#374151;
    font-size:var(--erp-font-size-sm);
    font-weight:var(--erp-font-weight-bold);
    letter-spacing:.02em;
    vertical-align:middle;
    white-space:nowrap;
}

.erp-table--uppercase thead th{
    text-transform:uppercase;
    letter-spacing:.045em;
}

.erp-table--dark thead th,
.table-dark th{
    color:#fff;
    background:#1f2937 !important;
    border-color:#374151 !important;
}

.erp-table tbody td,
.table tbody td{
    padding:.75rem;
    font-size:var(--erp-font-size-md);
    vertical-align:middle;
}

.erp-table tbody tr,
.table tbody tr{
    transition:background-color var(--erp-transition-fast);
}

.erp-table tbody tr:hover,
.table-hover tbody tr:hover{
    background:rgba(var(--erp-primary-rgb),.045);
}

.dataTables_wrapper{
    color:var(--erp-text);
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
    min-height:38px;
    border:1px solid #ced4da;
    border-radius:var(--erp-radius-sm);
    background:var(--erp-surface);
}

.dataTables_wrapper .dataTables_filter input{
    padding:.4rem .7rem;
}

.dataTables_wrapper .dataTables_length select{
    padding:.35rem 1.8rem .35rem .55rem;
}

.dataTables_info{
    color:var(--erp-muted);
    font-size:var(--erp-font-size-sm);
}

.dt-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:.35rem;
}

.dt-buttons .btn,
.dataTables_wrapper .dt-buttons .btn{
    margin:0;
    border-radius:var(--erp-radius-sm);
    font-weight:var(--erp-font-weight-semibold);
}

.page-link{
    margin:0 .125rem;
    border-radius:var(--erp-radius-xs);
}


/* ==========================================================
   09. BADGES Y ESTADOS
========================================================== */

.erp-badge,
.badge-erp{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.35rem;
    min-height:28px;
    padding:.35rem .72rem;
    border-radius:var(--erp-radius-pill);
    font-size:var(--erp-font-size-xs);
    font-weight:var(--erp-font-weight-bold);
    line-height:1;
}

.erp-badge--primary,
.badge-info-erp{
    color:var(--erp-primary-dark);
    background:var(--erp-primary-soft);
}

.erp-badge--success,
.badge-entrada{
    color:var(--erp-success-dark);
    background:var(--erp-success-soft);
}

.erp-badge--danger,
.badge-salida,
.badge-anulacion{
    color:var(--erp-danger-dark);
    background:var(--erp-danger-soft);
}

.erp-badge--warning,
.badge-ajuste{
    color:var(--erp-warning-dark);
    background:var(--erp-warning-soft);
}

.erp-badge--info{
    color:var(--erp-info-dark);
    background:var(--erp-info-soft);
}

.erp-badge--neutral,
.badge-light-erp{
    color:var(--erp-text);
    background:var(--erp-surface-soft);
    border:1px solid var(--erp-border);
}

.erp-status{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    font-size:var(--erp-font-size-sm);
    font-weight:var(--erp-font-weight-bold);
}

.erp-status::before{
    content:"";
    width:8px;
    height:8px;
    flex:0 0 auto;
    border-radius:50%;
    background:currentColor;
}

.erp-status--online{color:#16a34a;}
.erp-status--warning{color:#d97706;}
.erp-status--error{color:var(--erp-danger);}
.erp-status--neutral{color:var(--erp-muted);}

.erp-sync-status,
.estado-erp,
.estado-kardex{
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    min-width:180px;
    padding:.4rem .65rem;
    text-align:center;
}

.estado-online{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.4rem;
    margin-bottom:.15rem;
    color:#16a34a;
    font-size:var(--erp-font-size-sm);
    font-weight:var(--erp-font-weight-extrabold);
}

.estado-actualizando{color:#d97706;}
.estado-error{color:var(--erp-danger);}

.estado-fecha{
    color:var(--erp-heading);
    font-size:1rem;
    font-weight:var(--erp-font-weight-extrabold);
    line-height:1.25;
}


/* ==========================================================
   10. IMPACTOS Y MOVIMIENTOS
========================================================== */

.erp-impact,
.impacto{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:70px;
    padding:.35rem .72rem;
    border-radius:var(--erp-radius-pill);
    font-size:var(--erp-font-size-sm);
    font-weight:var(--erp-font-weight-extrabold);
}

.erp-impact--positive,
.impacto-positivo{
    color:var(--erp-success);
    background:var(--erp-success-soft);
}

.erp-impact--negative,
.impacto-negativo{
    color:var(--erp-danger);
    background:var(--erp-danger-soft);
}

.erp-impact--neutral,
.impacto-neutro{
    color:var(--erp-warning-dark);
    background:var(--erp-warning-soft);
}

.text-movimiento-entrada{
    color:var(--erp-success);
    font-weight:var(--erp-font-weight-bold);
}

.text-movimiento-salida{
    color:var(--erp-danger);
    font-weight:var(--erp-font-weight-bold);
}

.text-movimiento-ajuste{
    color:var(--erp-orange);
    font-weight:var(--erp-font-weight-bold);
}


/* ==========================================================
   11. FORMULARIOS Y FILTROS
========================================================== */

.form-label,
.erp-form-label{
    margin-bottom:.4rem;
    color:#495057;
    font-size:var(--erp-font-size-md);
    font-weight:var(--erp-font-weight-bold);
}

.form-control,
.form-select{
    min-height:38px;
    border-radius:var(--erp-radius-sm);
}

.form-control:focus,
.form-select:focus{
    border-color:var(--erp-primary);
    box-shadow:0 0 0 .2rem rgba(var(--erp-primary-rgb),.12);
}

.erp-form-section{
    padding:var(--erp-space-5);
    border:1px solid var(--erp-border-soft);
    border-radius:var(--erp-radius-md);
    background:var(--erp-surface-soft);
}

.erp-form-section__header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--erp-space-3);
    margin-bottom:var(--erp-space-4);
}

.erp-help-text{
    margin-top:.35rem;
    color:var(--erp-muted);
    font-size:var(--erp-font-size-xs);
}

.erp-required::after{
    content:" *";
    color:var(--erp-danger);
}

.erp-filter-panel{
    padding:var(--erp-space-4);
    border:1px solid var(--erp-border-soft);
    border-radius:var(--erp-radius-md);
    background:var(--erp-surface);
    box-shadow:var(--erp-shadow-xs);
}


/* ==========================================================
   12. SELECT2 INTEGRATION
========================================================== */

.select2-container{
    width:100% !important;
}

.select2-container--default .select2-selection--single{
    min-height:38px;
    border:1px solid #dee2e6;
    border-radius:var(--erp-radius-sm);
    background:var(--erp-surface);
}

.select2-container--default .select2-selection--single .select2-selection__rendered{
    padding-left:.75rem;
    padding-right:2rem;
    color:var(--erp-text);
    line-height:36px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow{
    height:36px;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single{
    border-color:var(--erp-primary);
    box-shadow:0 0 0 .2rem rgba(var(--erp-primary-rgb),.12);
}

.select2-dropdown{
    border-color:var(--erp-border);
    border-radius:var(--erp-radius-sm);
    box-shadow:var(--erp-shadow-md);
    overflow:hidden;
}

.select2-container--default .select2-results__option--highlighted[aria-selected]{
    background:var(--erp-primary);
}


/* ==========================================================
   13. MODALES Y CAJAS DE DETALLE
========================================================== */

.erp-modal,
.modal-content{
    border:none;
    border-radius:var(--erp-radius-xl);
    overflow:hidden;
}

.erp-modal{
    box-shadow:var(--erp-shadow-modal);
}

.modal-header{
    border-bottom:1px solid var(--erp-border-soft);
    background:linear-gradient(180deg,var(--erp-surface),var(--erp-surface-soft));
}

.modal-footer{
    border-top:1px solid var(--erp-border-soft);
    background:var(--erp-surface);
}

.modal-title{
    color:var(--erp-heading);
    font-size:1.25rem;
    font-weight:var(--erp-font-weight-extrabold);
}

.erp-detail-box,
.detalle-box,
.modal-box-erp{
    min-height:82px;
    padding:var(--erp-space-4);
    margin-bottom:var(--erp-space-4);
    border:1px solid var(--erp-border-soft);
    border-radius:var(--erp-radius-md);
    background:linear-gradient(180deg,var(--erp-surface),var(--erp-surface-soft));
    transition:
        transform var(--erp-transition),
        box-shadow var(--erp-transition),
        background-color var(--erp-transition);
}

.erp-detail-box:hover,
.detalle-box:hover,
.modal-box-erp:hover{
    transform:translateY(-2px);
    background:var(--erp-surface);
    box-shadow:var(--erp-shadow-sm);
}

.erp-detail-box__label,
.detalle-box small,
.modal-box-erp small{
    display:block;
    margin-bottom:.35rem;
    color:var(--erp-muted);
    font-size:var(--erp-font-size-xs);
    font-weight:var(--erp-font-weight-bold);
    letter-spacing:.04em;
    text-transform:uppercase;
}

.erp-detail-box__value,
.detalle-box h6,
.modal-box-erp h6{
    margin:0;
    color:#212529;
    font-size:.9375rem;
    font-weight:var(--erp-font-weight-extrabold);
}


/* ==========================================================
   14. RESÚMENES FINANCIEROS
========================================================== */

.erp-summary{
    border:1px solid var(--erp-border-soft);
    border-radius:var(--erp-radius-lg);
    background:var(--erp-surface);
    box-shadow:var(--erp-shadow-sm);
    overflow:hidden;
}

.erp-summary__header{
    padding:var(--erp-space-4) var(--erp-space-5);
    border-bottom:1px solid var(--erp-border-soft);
    background:var(--erp-surface-soft);
}

.erp-summary__body{
    padding:var(--erp-space-5);
}

.erp-summary__row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--erp-space-3);
    padding:.5rem 0;
    color:var(--erp-text-soft);
}

.erp-summary__row + .erp-summary__row{
    border-top:1px dashed var(--erp-border);
}

.erp-summary__row strong{
    color:var(--erp-heading);
    font-variant-numeric:tabular-nums;
}

.erp-summary__total{
    margin-top:.5rem;
    padding-top:var(--erp-space-4);
    border-top:2px solid var(--erp-border);
    font-size:1.2rem;
    font-weight:var(--erp-font-weight-extrabold);
}

.erp-summary__total strong{
    color:var(--erp-success);
}


/* ==========================================================
   15. ESTADOS VACÍOS, CARGA Y MENSAJES
========================================================== */

.erp-empty-state{
    padding:3rem 1.5rem;
    color:var(--erp-muted);
    text-align:center;
}

.erp-empty-state__icon{
    width:64px;
    height:64px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-bottom:var(--erp-space-4);
    border-radius:50%;
    background:var(--erp-surface-muted);
    color:var(--erp-subtle);
    font-size:1.6rem;
}

.erp-empty-state__title{
    margin-bottom:.35rem;
    color:var(--erp-heading);
    font-weight:var(--erp-font-weight-bold);
}

.erp-loading-overlay{
    position:absolute;
    inset:0;
    z-index:10;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.72);
    backdrop-filter:blur(2px);
}

.erp-spinner{
    width:28px;
    height:28px;
    border:3px solid var(--erp-border);
    border-top-color:var(--erp-primary);
    border-radius:50%;
    animation:erpSpin .75s linear infinite;
}


/* ==========================================================
   16. BREADCRUMBS Y ACCESOS RÁPIDOS
========================================================== */

.breadcrumb-wrapper{
    margin-bottom:var(--erp-space-4);
}

.breadcrumb{
    margin-bottom:0;
    padding:0;
    background:transparent;
    font-size:var(--erp-font-size-md);
}

.breadcrumb-item{
    font-weight:var(--erp-font-weight-medium);
}

.breadcrumb-item a{
    color:var(--erp-primary);
    text-decoration:none;
}

.erp-quick-access,
.acceso-rapido{
    display:block;
    height:100%;
    padding:var(--erp-space-5);
    border:1px solid var(--erp-border-soft);
    border-radius:var(--erp-radius-lg);
    background:var(--erp-surface);
    box-shadow:var(--erp-shadow-sm);
    cursor:pointer;
    transition:transform var(--erp-transition),box-shadow var(--erp-transition);
}

.erp-quick-access:hover,
.acceso-rapido:hover{
    transform:translateY(-4px);
    box-shadow:var(--erp-shadow-md);
}

.erp-quick-access__icon,
.acceso-rapido .icono{
    width:64px;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:auto auto var(--erp-space-3);
    border-radius:50%;
    color:#fff;
    font-size:1.75rem;
}


/* ==========================================================
   17. UTILIDADES
========================================================== */

.erp-shadow-xs{box-shadow:var(--erp-shadow-xs) !important;}
.erp-shadow-sm,.shadow-soft{box-shadow:var(--erp-shadow-sm) !important;}
.erp-shadow-md,.shadow-medium{box-shadow:var(--erp-shadow-md) !important;}
.erp-shadow-lg,.shadow-heavy{box-shadow:var(--erp-shadow-lg) !important;}

.erp-radius-sm,.radius-sm{border-radius:var(--erp-radius-sm) !important;}
.erp-radius-md,.radius-md{border-radius:var(--erp-radius-md) !important;}
.erp-radius-lg,.radius-lg{border-radius:var(--erp-radius-lg) !important;}
.erp-radius-xl,.radius-xl{border-radius:var(--erp-radius-xl) !important;}

.erp-text-muted,.text-muted-erp{color:var(--erp-muted) !important;}
.erp-text-success{color:var(--erp-success) !important;}
.erp-text-danger{color:var(--erp-danger) !important;}
.erp-text-warning{color:var(--erp-warning-dark) !important;}

.erp-bg-soft{background:var(--erp-surface-soft) !important;}
.erp-position-relative{position:relative !important;}
.erp-nowrap{white-space:nowrap !important;}


/* ==========================================================
   18. ANIMACIONES
========================================================== */

.erp-fade-up,
.fade-up{
    animation:erpFadeUp .35s ease both;
}

@keyframes erpFadeUp{
    from{
        opacity:0;
        transform:translateY(10px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes erpSpin{
    to{transform:rotate(360deg);}
}

@media(prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        scroll-behavior:auto !important;
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
}


/* ==========================================================
   ERP-004 — DATA TOOLBAR
========================================================== */

.erp-data-toolbar{
    display:grid;
    grid-template-columns:auto minmax(260px, 380px);
    align-items:center;
    justify-content:space-between;
    gap:var(--erp-space-4);

    margin-bottom:var(--erp-space-4);
    padding:var(--erp-space-4);

    border:1px solid var(--erp-border-soft);
    border-radius:var(--erp-radius-md);

    background:var(--erp-surface-soft);
}


/* ==========================================================
   SELECTOR DE REGISTROS
========================================================== */

.erp-toolbar-length{
    display:flex;
    align-items:center;
    gap:7px;
    flex:0 0 auto;
}



.erp-toolbar-label,
.erp-toolbar-text{
    margin:0;
    color:var(--erp-text-soft);
    font-size:var(--erp-font-size-sm);
    font-weight:var(--erp-font-weight-semibold);
    white-space:nowrap;
}

.erp-toolbar-select{
    width:82px;
    min-height:40px;
    padding-left:.65rem;
    padding-right:1.8rem;

    border-color:var(--erp-border);
    border-radius:var(--erp-radius-sm);

    background-color:var(--erp-surface);
    font-weight:var(--erp-font-weight-semibold);
}


/* ==========================================================
   BUSCADOR
========================================================== */

.erp-toolbar-search{
    position:relative;
    width:100%;
}

.erp-toolbar-search__icon{
    position:absolute;
    top:50%;
    left:14px;

    color:var(--erp-subtle);
    font-size:14px;

    transform:translateY(-50%);
    pointer-events:none;
}

.erp-toolbar-search__input{
    width:100%;
    min-height:42px;

    padding:9px 42px 9px 40px;

    border:1px solid var(--erp-border);
    border-radius:var(--erp-radius-sm);

    background:var(--erp-surface);
    color:var(--erp-text);

    font-size:var(--erp-font-size-md);

    outline:none;

    transition:
        border-color var(--erp-transition-fast),
        box-shadow var(--erp-transition-fast),
        background-color var(--erp-transition-fast);
}

.erp-toolbar-search__input::placeholder{
    color:var(--erp-subtle);
}

.erp-toolbar-search__input:hover{
    border-color:#cbd5e1;
}

.erp-toolbar-search__input:focus{
    border-color:var(--erp-primary);

    box-shadow:
        0 0 0 .2rem rgba(var(--erp-primary-rgb), .12);
}


/* Botón para limpiar búsqueda */

.erp-toolbar-search__clear{
    position:absolute;
    top:50%;
    right:10px;

    width:28px;
    height:28px;

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

    padding:0;

    border:0;
    border-radius:50%;

    background:transparent;
    color:var(--erp-muted);

    transform:translateY(-50%);

    transition:
        color var(--erp-transition-fast),
        background-color var(--erp-transition-fast);
}

.erp-toolbar-search__clear:hover{
    background:var(--erp-surface-muted);
    color:var(--erp-danger);
}


/* ==========================================================
   OCULTAR CONTROLES NATIVOS DE DATATABLES

   Solo se ocultan el selector y el buscador originales.
   Los botones permanecen visibles durante ERP-004.1.
========================================================== */

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter{
    display:none;
}

/* ==========================================================
   19. RESPONSIVE
========================================================== */

@media(max-width:1199.98px){
    .erp-kpi-grid,
    .kpi-premium-row{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:991.98px){
    .erp-page-header{
        align-items:flex-start;
    }

    .erp-sync-status,
    .estado-erp,
    .estado-kardex{
        align-items:flex-start;
        min-width:0;
        text-align:left;
    }

    .estado-online{
        justify-content:flex-start;
    }
}

@media(max-width:767.98px){
    .erp-page-header{
        flex-direction:column;
        align-items:stretch;
        gap:var(--erp-space-4);
    }

    .erp-page-header__main{
        align-items:flex-start;
    }

    .erp-header-actions,
    .erp-toolbar{
        width:100%;
        justify-content:flex-start;
    }

    .erp-header-actions .btn{
        flex:1 1 auto;
    }

    .erp-kpi-grid,
    .kpi-premium-row{
        grid-template-columns:1fr;
    }

    .erp-kpi,
    .erp-kpi-card,
    .kpi-premium-row .kpi-card{
        min-height:108px;
    }

    .erp-kpi__value,
    .erp-kpi h2,
    .erp-kpi-card h2,
    .kpi-card h2{
        font-size:1.55rem;
    }

    .erp-card-header,
    .card-header{
        flex-direction:column;
        align-items:flex-start !important;
        gap:var(--erp-space-2);
    }

    .dt-buttons{
        width:100%;
        margin-bottom:.6rem;
    }

    .dt-buttons .btn{
        flex:1 1 auto;
    }

    .erp-detail-box,
    .detalle-box,
    .modal-box-erp{
        min-height:auto;
    }

    .erp-summary{
        position:static !important;
    }

    .erp-data-toolbar{
    grid-template-columns:1fr;
}

.erp-toolbar-length{
    justify-content:flex-start;
}

.erp-toolbar-search{
    max-width:none;
}

}

@media(max-width:575.98px){
    .erp-page-icon{
        width:42px;
        height:42px;
    }

    .erp-toolbar{
        padding:var(--erp-space-2);
    }

    .erp-header-actions .btn,
    .erp-toolbar .btn{
        width:100%;
    }

    .erp-card-header,
    .erp-card-body,
    .erp-card-footer{
        padding-left:var(--erp-space-4);
        padding-right:var(--erp-space-4);
    }

    .erp-action-group .btn{
        width:40px;
        height:40px;
    }

    .erp-data-toolbar{
    padding:var(--erp-space-3);
}

.erp-toolbar-length{
    display:grid;
    grid-template-columns:auto 82px 1fr;
}

.erp-toolbar-text{
    overflow:hidden;
    text-overflow:ellipsis;
}

.erp-toolbar-search__input{
    min-height:44px;
}
}


/* ==========================================================
   20. COMPATIBILIDAD PROGRESIVA V1
   Estos alias se retirarán cuando todos los módulos migren.
========================================================== */

.kpi-card{
    position:relative;
}

.badge{
    border-radius:var(--erp-radius-pill);
}

.progress-sm{
    height:8px;
    border-radius:var(--erp-radius-pill);
    background:#e9ecef;
}

.progress-sm .progress-bar{
    border-radius:var(--erp-radius-pill);
}

/* ==========================================================
   ERP-005
   DATATABLE
   Design System V2
========================================================== */

/*----------------------------------------------------------
TABLA BASE
----------------------------------------------------------*/

.erp-table{
    border-collapse:separate;
    border-spacing:0;
}


/*----------------------------------------------------------
ENCABEZADO
----------------------------------------------------------*/

.erp-table thead th{

    background:var(--erp-surface-soft);

    color:var(--erp-heading);

    font-size:13px;

    font-weight:700;

    letter-spacing:.3px;

    text-transform:uppercase;

    vertical-align:middle;

    padding:16px 14px;

    border-bottom:1px solid #dbe2ea !important;

}


/*----------------------------------------------------------
CUERPO
----------------------------------------------------------*/

.erp-table tbody td{

    padding:10px;

    height:56px;

    vertical-align:middle;

    border-top:none;

    border-bottom:1px solid var(--erp-border-soft);

}


/*----------------------------------------------------------
HOVER
----------------------------------------------------------*/

.erp-table tbody tr{

    transition:
        background-color .18s ease,
        transform .18s ease;

}

.erp-table tbody tr:hover{

    background:
        rgba(var(--erp-primary-rgb),.035);

}


/*----------------------------------------------------------
COLUMNA PRINCIPAL

(Nombre, Producto, Cliente, etc.)
----------------------------------------------------------*/

.erp-table__primary{

    color:var(--erp-heading);

    font-weight:600;

}


/*----------------------------------------------------------
COLUMNAS NUMÉRICAS
----------------------------------------------------------*/

.erp-table__number{

    font-variant-numeric:
        tabular-nums;

}


/*----------------------------------------------------------
BADGE DEL ID
----------------------------------------------------------*/

.erp-table .badge{

    min-width:44px;

    padding:.45rem .70rem;

    font-weight:600;

    border-radius:999px;

}


/*----------------------------------------------------------
ACCIONES
----------------------------------------------------------*/

.erp-table-actions{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

}


/*----------------------------------------------------------
BOTONES
----------------------------------------------------------*/

.erp-table-action{

    width:38px;

    height:38px;

    padding:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:10px !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease;

}


.erp-table-action:hover{

    transform:translateY(-2px);

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

}


/*----------------------------------------------------------
ORDENAMIENTO
----------------------------------------------------------*/

table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after{

    opacity:.30;

}


table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:after{

    opacity:1;

    color:var(--erp-primary);

}


/*----------------------------------------------------------
PAGINACIÓN
----------------------------------------------------------*/

.dataTables_wrapper .dataTables_paginate .paginate_button{

    border-radius:8px !important;

    margin-left:3px;

    transition:.18s;

}


.dataTables_wrapper .dataTables_paginate .paginate_button.current{

    background:var(--erp-primary) !important;

    color:#fff !important;

    border-color:var(--erp-primary) !important;

}


.dataTables_wrapper .dataTables_paginate .paginate_button:hover{

    transform:translateY(-1px);

}


/*----------------------------------------------------------
INFORMACIÓN
----------------------------------------------------------*/

.dataTables_info{

    color:var(--erp-text-soft);

    font-size:13px;

}


/*----------------------------------------------------------
RESPONSIVE
----------------------------------------------------------*/

@media(max-width:768px){

    .erp-table thead th{

        padding:14px 10px;

        font-size:12px;

    }

    .erp-table tbody td{

        padding:12px 10px;

        height:52px;

    }

    .erp-table-action{

        width:36px;

        height:36px;

    }

}

/* ==========================================================
   ERP-005 — BADGES DE STOCK UNIFORMES
========================================================== */

.erp-stock-cell{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    min-width:105px;
}

.erp-stock-badge{
    min-width:48px;
    min-height:28px;

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

    padding:6px 11px;

    border-radius:var(--erp-radius-pill);

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

    white-space:nowrap;
    font-variant-numeric:tabular-nums;
}

/* Stock normal */

.erp-stock-badge--normal{
    color:#fff;
    background:var(--erp-success);
}

/* Stock crítico */

.erp-stock-badge--critical{
    min-width:58px;

    color:#212529;
    background:var(--erp-warning);
}

/* Producto agotado */

.erp-stock-badge--out{
    min-width:98px;

    color:#fff;
    background:var(--erp-danger);
}

/* Iconos dentro del badge */

.erp-stock-badge i{
    width:13px;
    flex:0 0 13px;
    text-align:center;
}

/* ==========================================================
   ERP-001 · PAGE ACTIONS
========================================================== */

.erp-page-actions{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:12px;
    flex:0 0 auto;
}

.erp-page-meta{
    display:flex;
    justify-content:flex-end;
    width:100%;
}

.erp-page-buttons{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:nowrap;
    gap:10px;
}

.erp-page-buttons .btn{
    white-space:nowrap;
}

@media(max-width:991.98px){

    .erp-page-actions{
        width:100%;
        align-items:flex-start;
    }

    .erp-page-meta{
        justify-content:flex-start;
    }

    .erp-page-buttons{
        justify-content:flex-start;
        flex-wrap:wrap;
    }

}

@media(max-width:575.98px){

    .erp-page-buttons{
        width:100%;
    }

    .erp-page-buttons .btn{
        flex:1 1 100%;
    }

}

/* ==========================================================
   ERP-006 · BADGES DE STOCK ALINEADOS
========================================================== */

.erp-badge-cell{
    width:100px;

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

.erp-badge-cell .erp-badge{
    width:92px;
    min-width:92px;
    min-height:28px;

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

    padding:6px 8px;

    border-radius:var(--erp-radius-pill);

    font-size:12px;
    font-weight:var(--erp-font-weight-bold);
    line-height:1;

    white-space:nowrap;
    font-variant-numeric:tabular-nums;
}

.erp-badge-cell .erp-badge i{
    width:13px;
    flex:0 0 13px;
    text-align:center;
}

/******************/


.erp-toolbar-buttons{
    display:flex;
    align-items:center;
    min-width:0;
}

.erp-toolbar-buttons .dt-button{

    border:1px solid #dbe4f0;

    background:#fff;

    color:#334155;

    border-radius:15px;

    transition:.20s;

}

.erp-toolbar-buttons .dt-button:hover{

    background:#f8fbff;

    border-color:#2b73ff;

    color:#2b73ff;

}



.erp-toolbar-buttons .dt-buttons{
    display:flex !important;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
    margin:0;
}

.erp-toolbar-buttons .dt-button{
    margin:0 !important;
}


/*******************************/

.erp-toolbar-right{
    flex:0 1 380px;
    min-width:270px;
    margin-left:auto;
}


.erp-toolbar-search{
    width:100%;
}

/********************/
.erp-toolbar-left{
    display:flex;
    align-items:center;
    gap:8px;
    flex:1 1 auto;
    min-width:0;
    flex-wrap:wrap;
}





.erp-toolbar-buttons .dt-button{
    margin:0 !important;
    padding:8px 12px !important;
    white-space:nowrap;
}

/* ==========================================================
   ERP-007 · FORM SECTIONS
========================================================== */

.erp-form-section{
    padding:20px;
    margin-bottom:20px;

    border:1px solid var(--erp-border-soft);
    border-radius:var(--erp-radius-lg);

    background:var(--erp-surface);
}

.erp-form-section:last-child{
    margin-bottom:0;
}

.erp-form-section__header{
    display:flex;
    align-items:flex-start;
    gap:12px;

    margin-bottom:18px;
    padding-bottom:14px;

    border-bottom:1px solid var(--erp-border-soft);
}

.erp-form-section__icon{
    width:38px;
    height:38px;
    flex:0 0 38px;

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

    border-radius:10px;

    color:var(--erp-primary);
    background:var(--erp-primary-soft);
}

.erp-form-section__content{
    min-width:0;
}

.erp-form-section__title{
    margin:0;

    color:var(--erp-heading);

    font-size:16px;
    font-weight:700;
    line-height:1.25;
}

.erp-form-section__subtitle{
    margin:4px 0 0;

    color:var(--erp-text-soft);

    font-size:13px;
    line-height:1.45;
}

.erp-form-section__body{
    min-width:0;
}


/* Variantes semánticas opcionales */

.erp-form-section--success
.erp-form-section__icon{
    color:var(--erp-success);
    background:var(--erp-success-soft);
}

.erp-form-section--warning
.erp-form-section__icon{
    color:#8a6800;
    background:var(--erp-warning-soft);
}

.erp-form-section--danger
.erp-form-section__icon{
    color:var(--erp-danger);
    background:var(--erp-danger-soft);
}

.erp-form-section--info
.erp-form-section__icon{
    color:var(--erp-info);
    background:var(--erp-info-soft);
}


/* Responsive */

@media(max-width:575.98px){

    .erp-form-section{
        padding:16px;
    }

    .erp-form-section__header{
        gap:10px;
    }

    .erp-form-section__icon{
        width:34px;
        height:34px;
        flex-basis:34px;
    }

}



    /*=========================================================
ERP-008 · ICONOGRAFÍA DE ACCIONES
=========================================================*/

.erp-icon-primary{
    color:var(--erp-primary);
}

.erp-icon-success{
    color:var(--erp-success);
}

.erp-icon-warning{
    color:var(--erp-warning);
}

.erp-icon-danger{
    color:var(--erp-danger);
}

.erp-icon-secondary{
    color:var(--erp-secondary);
}

.erp-icon-info{
    color:var(--erp-info);
}




/********/

/* ==========================================================
   ERP-009 · ACTION BUTTONS
   Botones de acciones para tablas y listados
========================================================== */

.erp-actions{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-wrap:nowrap;
    gap:8px;
}
.erp-actions{

    display:inline-flex;

    padding:4px;

    border-radius:12px;

    background:#fff;

    border:1px solid var(--erp-border-soft);

}

.erp-action-btn{
    width:38px;
    height:38px;
    padding:0;

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

    border:1px solid var(--erp-border);
    border-radius:10px;

    background:var(--erp-surface);
    color:var(--erp-secondary);

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

    cursor:pointer;

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

.erp-action-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 14px rgba(15, 23, 42, .10);
}

.erp-action-btn:active{
    transform:translateY(0);
    box-shadow:none;
}

.erp-action-btn:focus-visible{
    outline:0;
    box-shadow:
        0 0 0 3px var(--erp-primary-soft);
}

.erp-action-btn i{
    pointer-events:none;
}


/* ==========================================================
   VARIANTES SEMÁNTICAS
========================================================== */

.erp-action-btn--primary{
    color:var(--erp-primary);
    border-color:var(--erp-primary);
}

.erp-action-btn--primary:hover{
    color:#fff;
    background:var(--erp-primary);
    border-color:var(--erp-primary);
}


.erp-action-btn--success{
    color:var(--erp-success);
    border-color:var(--erp-success);
}

.erp-action-btn--success:hover{
    color:#fff;
    background:var(--erp-success);
    border-color:var(--erp-success);
}


.erp-action-btn--warning{
    color:var(--erp-warning);
    border-color:var(--erp-warning);
}

.erp-action-btn--warning:hover{
    color:var(--erp-warning-contrast, #212529);
    background:var(--erp-warning);
    border-color:var(--erp-warning);
}


.erp-action-btn--danger{
    color:var(--erp-danger);
    border-color:var(--erp-danger);
}

.erp-action-btn--danger:hover{
    color:#fff;
    background:var(--erp-danger);
    border-color:var(--erp-danger);
}


/* ==========================================================
   ACTIVAR
========================================================== */

.erp-action-btn--desactivar{
    color:var(--erp-success);
    border-color:var(--erp-success);
}

.erp-action-btn--desactivar:hover{
    color:#fff;
    background:var(--erp-success);
    border-color:var(--erp-success);
}


/* ==========================================================
   DESACTIVAR
========================================================== */

.erp-action-btn--activar{
    color:var(--erp-warning);
    border-color:var(--erp-warning);
}

.erp-action-btn--activar:hover{
    color:#fff;
    background:var(--erp-warning);
    border-color:var(--erp-warning);
}


/* ==========================================================
   ELIMINAR FÍSICO
========================================================== */

.erp-action-btn--eliminar{

    color:#dc3545;
    border:1px solid #dc3545;
    background:#fff;

}



.erp-action-btn--eliminar:hover{

    color:#fff;
    background:#dc3545;
    border-color:#dc3545;

}


/* ==========================================================
   BLOQUEADO (RN-003)
========================================================== */

.erp-action-btn--bloqueado{
    color:#9ca3af;
    border-color:#d1d5db;
    background:#f8f9fa;
    cursor:not-allowed;
    opacity:.60;
}

.erp-action-btn--bloqueado:hover{
    color:#9ca3af;
    background:#f8f9fa;
    border-color:#d1d5db;
}


.erp-action-btn--info{
    color:var(--erp-info);
    border-color:var(--erp-info);
}

.erp-action-btn--info:hover{
    color:#fff;
    background:var(--erp-info);
    border-color:var(--erp-info);
}


.erp-action-btn--secondary{
    color:var(--erp-secondary);
    border-color:var(--erp-secondary);
}

.erp-action-btn--secondary:hover{
    color:#fff;
    background:var(--erp-secondary);
    border-color:var(--erp-secondary);
}


/* ==========================================================
   ESTADO DESHABILITADO
========================================================== */

.erp-action-btn:disabled,
.erp-action-btn.is-disabled{
    opacity:.45;
    cursor:not-allowed;
    pointer-events:none;
    transform:none;
    box-shadow:none;
}


/* ==========================================================
   VARIANTE COMPACTA PARA TABLAS DENSAS
========================================================== */

.erp-action-btn--sm{
    width:34px;
    height:34px;
    border-radius:9px;
    font-size:13px;
}


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

@media(max-width:575.98px){

    .erp-actions{
        gap:6px;
    }

    .erp-action-btn{
        width:36px;
        height:36px;
    }

}


/* ==========================================================
   ERP-009 · ACTION BUTTONS
   Botones de acciones para tablas y listados
========================================================== */

.erp-actions{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-wrap:nowrap;
    gap:8px;
}

.erp-action-btn{
    width:38px;
    height:38px;
    padding:0;

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

    border:1px solid var(--erp-border);
    border-radius:10px;

    background:var(--erp-surface);
    color:var(--erp-secondary);

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

    cursor:pointer;

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

.erp-action-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 14px rgba(15, 23, 42, .10);
}

.erp-action-btn:active{
    transform:translateY(0);
    box-shadow:none;
}

.erp-action-btn:focus-visible{
    outline:0;
    box-shadow:
        0 0 0 3px var(--erp-primary-soft);
}

.erp-action-btn i{
    pointer-events:none;
}


/* ==========================================================
   VARIANTES SEMÁNTICAS
========================================================== */

.erp-action-btn--primary{
    color:var(--erp-primary);
    border-color:var(--erp-primary);
}

.erp-action-btn--primary:hover{
    color:#fff;
    background:var(--erp-primary);
    border-color:var(--erp-primary);
}


.erp-action-btn--success{
    color:var(--erp-success);
    border-color:var(--erp-success);
}

.erp-action-btn--success:hover{
    color:#fff;
    background:var(--erp-success);
    border-color:var(--erp-success);
}


.erp-action-btn--warning{
    color:var(--erp-warning);
    border-color:var(--erp-warning);
}

.erp-action-btn--warning:hover{
    color:var(--erp-warning-contrast, #212529);
    background:var(--erp-warning);
    border-color:var(--erp-warning);
}


.erp-action-btn--danger{
    color:var(--erp-danger);
    border-color:var(--erp-danger);
}

.erp-action-btn--danger:hover{
    color:#fff;
    background:var(--erp-danger);
    border-color:var(--erp-danger);
}


.erp-action-btn--info{
    color:var(--erp-info);
    border-color:var(--erp-info);
}

.erp-action-btn--info:hover{
    color:#fff;
    background:var(--erp-info);
    border-color:var(--erp-info);
}


.erp-action-btn--secondary{
    color:var(--erp-secondary);
    border-color:var(--erp-secondary);
}

.erp-action-btn--secondary:hover{
    color:#fff;
    background:var(--erp-secondary);
    border-color:var(--erp-secondary);
}


/* ==========================================================
   ESTADO DESHABILITADO
========================================================== */

.erp-action-btn:disabled,
.erp-action-btn.is-disabled{
    opacity:.45;
    cursor:not-allowed;
    pointer-events:none;
    transform:none;
    box-shadow:none;
}


/* ==========================================================
   VARIANTE COMPACTA PARA TABLAS DENSAS
========================================================== */

.erp-action-btn--sm{
    width:34px;
    height:34px;
    border-radius:9px;
    font-size:13px;
}


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

@media(max-width:575.98px){

    .erp-actions{
        gap:6px;
    }

    .erp-action-btn{
        width:36px;
        height:36px;
    }

}




/* ==========================================================
   ERP-004 · DATA TOOLBAR
   Componente genérico para cualquier DataTable
========================================================== */

.erp-data-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:16px;

    width:100%;
    margin-bottom:18px;
    padding:12px 14px;

    background:var(--erp-surface);
    border:1px solid var(--erp-border-soft);
    border-radius:var(--erp-radius-lg);
}


/* ==========================================================
   DISTRIBUCIÓN
========================================================== */

.erp-toolbar-left,
.erp-toolbar-right{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
}

.erp-toolbar-left{
    flex:1 1 auto;
}

.erp-toolbar-right{
    flex:0 1 auto;
    margin-left:auto;
}


/* ==========================================================
   SELECTOR DE CANTIDAD
========================================================== */

.erp-toolbar-length{
    display:inline-flex;
    align-items:center;
    flex-wrap:nowrap;
    gap:8px;

    white-space:nowrap;
}

.erp-toolbar-label,
.erp-toolbar-text{
    margin:0;

    color:var(--erp-text-soft);

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

.erp-toolbar-select{
    width:auto;
    min-width:72px;
    height:34px;

    padding-top:4px;
    padding-bottom:4px;

    border-color:var(--erp-border);
    border-radius:8px;

    font-size:13px;
}

.erp-toolbar-select:focus{
    border-color:var(--erp-primary);

    box-shadow:
        0 0 0 3px var(--erp-primary-soft);
}


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

.erp-toolbar-buttons{
    display:inline-flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
}

.erp-toolbar-buttons .dt-buttons{
    display:inline-flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
}

.erp-toolbar-buttons .dt-button,
.erp-toolbar-buttons .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;

    min-height:34px;
    margin:0;
    padding:6px 10px;

    border-radius:8px;

    font-size:13px;
    font-weight:500;
    line-height:1;

    white-space:nowrap;

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

.erp-toolbar-buttons .dt-button:hover,
.erp-toolbar-buttons .btn:hover{
    transform:translateY(-1px);

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


/* Evita márgenes internos agregados por DataTables */

.erp-toolbar-buttons .dt-buttons > *{
    margin:0;
}


/* ==========================================================
   BUSCADOR
========================================================== */

.erp-toolbar-search{
    position:relative;

    display:flex;
    align-items:center;

    width:280px;
    max-width:100%;
}

.erp-toolbar-search__icon{
    position:absolute;
    left:12px;
    z-index:2;

    color:var(--erp-text-soft);

    font-size:13px;

    pointer-events:none;
}

.erp-toolbar-search__input{
    width:100%;
    height:36px;

    padding:
        6px
        38px
        6px
        36px;

    color:var(--erp-text);
    background:var(--erp-surface);

    border:1px solid var(--erp-border);
    border-radius:10px;

    font-size:13px;

    outline:none;

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

.erp-toolbar-search__input::placeholder{
    color:var(--erp-text-muted);
}

.erp-toolbar-search__input:focus{
    border-color:var(--erp-primary);

    box-shadow:
        0 0 0 3px var(--erp-primary-soft);
}

.erp-toolbar-search__clear{
    position:absolute;
    right:7px;

    width:26px;
    height:26px;
    padding:0;

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

    color:var(--erp-text-soft);
    background:transparent;

    border:0;
    border-radius:7px;

    font-size:12px;

    cursor:pointer;

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

.erp-toolbar-search__clear:hover{
    color:var(--erp-danger);
    background:var(--erp-danger-soft);
}

.erp-toolbar-search__clear[hidden]{
    display:none !important;
}


/* ==========================================================
   ERP-005 · DATATABLE GENÉRICO
========================================================== */

.erp-table{
    width:100% !important;
    margin-bottom:0 !important;

    color:var(--erp-text);

    border-collapse:separate;
    border-spacing:0;
}

.erp-table thead th{
    padding:13px 12px;

    color:var(--erp-heading);
    background:var(--erp-surface-soft);

    border-top:0;
    border-bottom:1px solid var(--erp-border);

    font-size:12px;
    font-weight:700;
    letter-spacing:.025em;
    line-height:1.3;
    text-transform:uppercase;

    white-space:nowrap;
}

.erp-table tbody td{
    padding:12px;

    /*--color:var(--erp-text);*/

    border-bottom:1px solid var(--erp-border-soft);

    font-size:13px;
    vertical-align:middle;
}

.erp-table tbody tr:last-child td{
    border-bottom:0;
}

.erp-table tbody tr{
    transition:
        background-color .15s ease,
        box-shadow .15s ease;
}

.erp-table.table-hover tbody tr:hover > *{
    background:var(--erp-surface-soft);
}


/* ==========================================================
   DATATABLES · CONTENEDOR
========================================================== */

.dataTables_wrapper{
    width:100%;
}

.dataTables_wrapper .row{
    margin-left:0;
    margin-right:0;
}

.dataTables_wrapper .dataTables_info{
    padding-top:16px;

    color:var(--erp-text-soft);

    font-size:13px;
}


/* ==========================================================
   PAGINACIÓN
========================================================== */

.dataTables_wrapper .dataTables_paginate{
    padding-top:12px;
}

.dataTables_wrapper .pagination{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:4px;

    margin:0;
}

.dataTables_wrapper .page-item .page-link{
    min-width:34px;
    height:34px;
    padding:6px 9px;

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

    color:var(--erp-text);
    background:var(--erp-surface);

    border:1px solid var(--erp-border-soft);
    border-radius:8px;

    font-size:13px;

    box-shadow:none;

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

.dataTables_wrapper .page-item .page-link:hover{
    color:var(--erp-primary);
    background:var(--erp-primary-soft);
    border-color:var(--erp-primary);
}

.dataTables_wrapper .page-item.active .page-link{
    color:#fff;
    background:var(--erp-primary);
    border-color:var(--erp-primary);
}

.dataTables_wrapper .page-item.disabled .page-link{
    color:var(--erp-text-muted);
    background:var(--erp-surface-soft);

    opacity:.65;
}


/* ==========================================================
   MENÚ DE VISIBILIDAD DE COLUMNAS
========================================================== */

div.dt-button-collection{
    padding:8px;

    background:var(--erp-surface);

    border:1px solid var(--erp-border-soft);
    border-radius:12px;

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

div.dt-button-collection .dt-button{
    width:100%;
    margin:0;
    padding:8px 12px;

    color:var(--erp-text);
    background:transparent;

    border:0;
    border-radius:8px;

    text-align:left;
}

div.dt-button-collection .dt-button:hover{
    color:var(--erp-primary);
    background:var(--erp-primary-soft);
}

div.dt-button-collection .dt-button.active{
    color:var(--erp-primary);
    background:var(--erp-primary-soft);

    font-weight:600;
}


/* ==========================================================
   CONTENEDOR TEMPORAL DE BOTONES

   DataTables crea aquí los botones y luego JavaScript
   los mueve hacia .js-erp-table-buttons.
========================================================== */

.erp-dt-buttons-source{
    display:none !important;
}


/* ==========================================================
   ESTADOS VACÍOS
========================================================== */

.erp-table .dataTables_empty{
    padding:36px 20px;

    color:var(--erp-text-soft);

    font-size:14px;
    text-align:center;
}


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

@media(max-width:991.98px){

    .erp-data-toolbar{
        align-items:stretch;
    }

    .erp-toolbar-left,
    .erp-toolbar-right{
        width:100%;
    }

    .erp-toolbar-right{
        margin-left:0;
    }

    .erp-toolbar-search{
        width:100%;
    }

}


@media(max-width:575.98px){

    .erp-data-toolbar{
        padding:12px;
        gap:12px;
    }

    .erp-toolbar-left{
        align-items:flex-start;
        flex-direction:column;
    }

    .erp-toolbar-length{
        width:100%;
    }

    .erp-toolbar-buttons,
    .erp-toolbar-buttons .dt-buttons{
        width:100%;
    }

    .erp-toolbar-buttons .dt-button,
    .erp-toolbar-buttons .btn{
        flex:1 1 auto;
    }

    .erp-table thead th,
    .erp-table tbody td{
        padding:10px;

        font-size:12px;
    }

    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate{
        width:100%;

        text-align:center;
    }

    .dataTables_wrapper .pagination{
        justify-content:center;
    }

}


/* ==========================================================
   ERP-020 · DASHBOARD Y REPORTES
   Estilos reutilizables para dashboards, reportes y KPIs
========================================================== */

/* ----------------------------------------------------------
   KPI BOXES (small-box)
   ---------------------------------------------------------- */

.small-box {
    position: relative;
    overflow: hidden;
    border-radius: var(--erp-radius-lg);
    margin-bottom: 20px;
    padding: 20px 20px 18px;
    color: #fff;
    transition: transform var(--erp-transition), box-shadow var(--erp-transition);
    box-shadow: var(--erp-shadow-sm);
    min-height: 110px;
}

.small-box:hover {
    transform: translateY(-4px);
    box-shadow: var(--erp-shadow-md);
}

.small-box .inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.small-box .inner h3 {
    font-size: 32px;
    font-weight: 800;
    margin: 0;
    line-height: 1.1;
    color: #fff;
}

.small-box .inner p {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    opacity: .85;
    letter-spacing: .3px;
}

.small-box .inner p small {
    font-weight: 400;
    opacity: .7;
    font-size: 12px;
}

.small-box .icon {
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 1;
    font-size: 48px;
    opacity: .20;
    transition: opacity var(--erp-transition), transform var(--erp-transition);
}

.small-box:hover .icon {
    opacity: .30;
    transform: scale(1.05);
}

/* Variantes de color de small-box */
.small-box.bg-primary {
    background: linear-gradient(135deg, #0d6efd, #0a58ca);
}
.small-box.bg-success {
    background: linear-gradient(135deg, #198754, #146c43);
}
.small-box.bg-danger {
    background: linear-gradient(135deg, #dc3545, #b02a37);
}
.small-box.bg-warning {
    background: linear-gradient(135deg, #ffc107, #d39e00);
}
.small-box.bg-warning .inner h3,
.small-box.bg-warning .inner p {
    color: #212529;
}
.small-box.bg-info {
    background: linear-gradient(135deg, #0dcaf0, #087990);
}
.small-box.bg-secondary {
    background: linear-gradient(135deg, #6c757d, #495057);
}
.small-box.bg-dark {
    background: linear-gradient(135deg, #212529, #0d0d0d);
}

/* Fila de KPIs */
.row-kpi {
    margin-bottom: 24px;
}

.row-kpi .col-lg-3,
.row-kpi .col-lg-4,
.row-kpi .col-md-4,
.row-kpi .col-md-8 {
    margin-bottom: 16px;
}

/* ----------------------------------------------------------
   REPORTE TABLE CARD
   ---------------------------------------------------------- */

.reporte-table-card {
    border: 1px solid var(--erp-border-soft);
    border-radius: var(--erp-radius-lg);
    background: var(--erp-surface);
    box-shadow: var(--erp-shadow-sm);
    overflow: hidden;
    height: 100%;
    transition: box-shadow var(--erp-transition);
}

.reporte-table-card:hover {
    box-shadow: var(--erp-shadow-md);
}

.reporte-table-card .card-header {
    padding: 16px 20px;
    background: linear-gradient(180deg, var(--erp-surface), var(--erp-surface-soft));
    border-bottom: 1px solid var(--erp-border-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.reporte-table-card .card-header.bg-danger {
    background: linear-gradient(135deg, #dc3545, #b02a37) !important;
}

.reporte-table-card .card-header.bg-danger .card-title {
    color: #fff;
}

.reporte-table-card .card-body {
    padding: 16px 20px;
}

.reporte-table-card .card-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--erp-heading);
    margin: 0;
    letter-spacing: -.2px;
}

/* ----------------------------------------------------------
   TABLAS DE REPORTES
   ---------------------------------------------------------- */

.table-reportes {
    font-size: 14px;
    margin-bottom: 0;
}

.table-reportes thead th {
    background: var(--erp-surface-soft);
    color: var(--erp-heading);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 12px 14px;
    border-bottom: 2px solid var(--erp-border);
}

.table-reportes tbody td {
    padding: 10px 14px;
    vertical-align: middle;
    border-bottom: 1px solid var(--erp-border-soft);
}

.table-reportes tbody tr:hover {
    background: rgba(var(--erp-primary-rgb), .035);
}

.table-reportes tbody tr:last-child td {
    border-bottom: none;
}

/* ----------------------------------------------------------
   BADGES DE CANTIDAD Y STOCK CRÍTICO
   ---------------------------------------------------------- */

.badge-cantidad {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 4px 10px;
    border-radius: var(--erp-radius-pill);
    background: var(--erp-primary-soft);
    color: var(--erp-primary-dark);
    font-size: 13px;
    font-weight: 700;
}

.badge-stock-critico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 4px 12px;
    border-radius: var(--erp-radius-pill);
    background: var(--erp-danger-soft);
    color: var(--erp-danger-dark);
    font-size: 14px;
    font-weight: 800;
}

/* ----------------------------------------------------------
   ACCESO RÁPIDO (Cards de navegación)
   ---------------------------------------------------------- */

.acceso-rapido {
    display: block;
    padding: 16px 12px;
    border: 1px solid var(--erp-border-soft);
    border-radius: var(--erp-radius-lg);
    background: var(--erp-surface);
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    transition: transform var(--erp-transition), box-shadow var(--erp-transition), border-color var(--erp-transition);
    box-shadow: var(--erp-shadow-xs);
    height: 100%;
    min-height: 105px;
}

.acceso-rapido:hover {
    transform: translateY(-4px);
    box-shadow: var(--erp-shadow-md);
    border-color: var(--erp-primary);
}

.acceso-rapido .icono {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 22px;
    color: #fff;
    transition: transform var(--erp-transition);
}

.acceso-rapido:hover .icono {
    transform: scale(1.06);
}

.acceso-rapido .icono.bg-primary {
    background: var(--erp-primary);
}
.acceso-rapido .icono.bg-success {
    background: var(--erp-success);
}
.acceso-rapido .icono.bg-warning {
    background: var(--erp-warning);
    color: #212529;
}
.acceso-rapido .icono.bg-danger {
    background: var(--erp-danger);
}
.acceso-rapido .icono.bg-info {
    background: var(--erp-info);
}
.acceso-rapido .icono.bg-secondary {
    background: var(--erp-secondary);
}
.acceso-rapido .icono.bg-dark {
    background: var(--erp-dark);
}

.acceso-rapido h6 {
    font-size: 14px;
    font-weight: 700;
    color: var(--erp-heading);
    margin: 12px 0 0;
}

/* ----------------------------------------------------------
   LISTAS PARA TOP PRODUCTOS / CLIENTES / CATEGORÍAS
   ---------------------------------------------------------- */

.list-group-flush {
    margin: -4px -4px -4px -4px;
}

.list-group-item {
    padding: 10px 4px;
    border-bottom: 1px solid var(--erp-border-soft);
    background: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.list-group-item:last-child {
    border-bottom: none;
}

.list-group-item small {
    display: block;
    margin-top: 2px;
}

/* ----------------------------------------------------------
   RESPONSIVE DE DASHBOARD
   ---------------------------------------------------------- */

@media (max-width: 991.98px) {
    .small-box .inner h3 {
        font-size: 26px;
    }
    .small-box .icon {
        font-size: 38px;
        right: 10px;
        top: 10px;
    }
    .reporte-table-card .card-body {
        padding: 14px 16px;
    }
}

@media (max-width: 767.98px) {
    .small-box {
        min-height: 90px;
        padding: 16px;
    }
    .small-box .inner h3 {
        font-size: 22px;
    }
    .small-box .icon {
        font-size: 32px;
        right: 8px;
        top: 8px;
    }
    .acceso-rapido {
        min-height: 90px;
        padding: 12px 8px;
    }
    .acceso-rapido .icono {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }
    .acceso-rapido h6 {
        font-size: 13px;
    }
    .row-kpi .col-lg-3,
    .row-kpi .col-lg-4,
    .row-kpi .col-md-4 {
        padding-left: 6px;
        padding-right: 6px;
    }
    .row-kpi {
        margin-left: -6px;
        margin-right: -6px;
    }
    .table-reportes {
        font-size: 13px;
    }
    .table-reportes thead th,
    .table-reportes tbody td {
        padding: 8px 10px;
    }
    .badge-cantidad,
    .badge-stock-critico {
        font-size: 12px;
        padding: 3px 8px;
    }
}

@media (max-width: 575.98px) {
    .small-box .inner h3 {
        font-size: 18px;
    }
    .small-box .inner p {
        font-size: 12px;
    }
    .reporte-table-card .card-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .reporte-table-card .card-title {
        font-size: 15px;
    }
}

/* ==========================================================
   ERP-030 · DARK MODE (Global)
========================================================== */

body.dark-mode {
    background: #121826;
    color: #e5e7eb;
}

body.dark-mode .card,
body.dark-mode .erp-card {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .card-header,
body.dark-mode .erp-card-header {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .card-header.bg-white,
body.dark-mode .erp-card-header {
    background: #1f2937 !important;
}

body.dark-mode .card-title {
    color: #f3f4f6;
}

body.dark-mode .list-group-item {
    background: transparent;
    border-color: #374151;
    color: #e5e7eb;
}

body.dark-mode .table-reportes thead th {
    background: #1f2937;
    color: #f3f4f6;
    border-color: #374151;
}

body.dark-mode .table-reportes tbody td {
    border-color: #374151;
    color: #e5e7eb;
}

body.dark-mode .table-reportes tbody tr:hover {
    background: rgba(255, 255, 255, .04);
}

body.dark-mode .acceso-rapido {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .acceso-rapido:hover {
    border-color: #0d6efd;
}

body.dark-mode .acceso-rapido h6 {
    color: #f3f4f6;
}

body.dark-mode .badge-cantidad {
    background: rgba(13, 110, 253, .2);
    color: #6ea8fe;
}

body.dark-mode .badge-stock-critico {
    background: rgba(220, 53, 69, .2);
    color: #f87171;
}

body.dark-mode .estado-fecha {
    color: #f3f4f6;
}

body.dark-mode .erp-page-subtitle,
body.dark-mode .erp-page-subtitle small {
    color: #94a3b8;
}

body.dark-mode .erp-badge--neutral {
    color: #e5e7eb;
    background: #374151;
    border-color: #4b5563;
}

body.dark-mode .text-muted {
    color: #94a3b8 !important;
}

body.dark-mode .small-box {
    background: #1f2937 !important;
}

body.dark-mode .small-box .inner h3,
body.dark-mode .small-box .inner p {
    color: #f3f4f6;
}

body.dark-mode .small-box.bg-primary {
    background: linear-gradient(135deg, #1a3a6b, #0d2b4a) !important;
}
body.dark-mode .small-box.bg-success {
    background: linear-gradient(135deg, #1a4a2a, #0d2a1a) !important;
}
body.dark-mode .small-box.bg-danger {
    background: linear-gradient(135deg, #4a1a1a, #2a0d0d) !important;
}
body.dark-mode .small-box.bg-warning {
    background: linear-gradient(135deg, #4a3a0a, #2a1a0a) !important;
}
body.dark-mode .small-box.bg-info {
    background: linear-gradient(135deg, #0a3a4a, #0a1a2a) !important;
}
body.dark-mode .small-box.bg-secondary {
    background: linear-gradient(135deg, #2a2a2a, #1a1a1a) !important;
}
body.dark-mode .small-box.bg-dark {
    background: linear-gradient(135deg, #0a0a0a, #000000) !important;
}

body.dark-mode .reporte-table-card {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .reporte-table-card .card-header {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .reporte-table-card .card-header.bg-danger {
    background: linear-gradient(135deg, #4a1a1a, #2a0d0d) !important;
}

body.dark-mode .erp-page-header__content .erp-eyebrow {
    color: #6ea8fe;
}

body.dark-mode .erp-page-title {
    color: #f3f4f6;
}

/* Modal en Dark Mode */
body.dark-mode .modal-content {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .modal-header {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .modal-title {
    color: #f3f4f6;
}

body.dark-mode .modal-body {
    color: #e5e7eb;
}

body.dark-mode .modal-footer {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .btn-close {
    filter: invert(1);
}

/* Formularios en Dark Mode */
body.dark-mode .form-control,
body.dark-mode .form-select {
    background: #1a1a2a;
    color: #e5e7eb;
    border-color: #374151;
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    background: #1a1a2a;
    color: #e5e7eb;
    border-color: #0d6efd;
}

body.dark-mode .form-label {
    color: #cbd5e1;
}

body.dark-mode .form-text {
    color: #94a3b8;
}

body.dark-mode .input-group-text {
    background: #1a1a2a;
    color: #e5e7eb;
    border-color: #374151;
}

body.dark-mode .erp-form-section {
    background: #1a1a2a;
    border-color: #374151;
}

body.dark-mode .erp-form-section__title {
    color: #f3f4f6;
}

body.dark-mode .erp-form-section__subtitle {
    color: #94a3b8;
}

body.dark-mode .erp-form-section__icon {
    background: rgba(13, 110, 253, .2);
    color: #6ea8fe;
}

body.dark-mode .erp-form-section--success .erp-form-section__icon {
    background: rgba(25, 135, 84, .2);
    color: #6ea8fe;
}

body.dark-mode .erp-form-section--warning .erp-form-section__icon {
    background: rgba(255, 193, 7, .2);
    color: #fbbf24;
}

body.dark-mode .erp-form-section--info .erp-form-section__icon {
    background: rgba(13, 202, 240, .2);
    color: #67e8f9;
}

body.dark-mode .erp-form-section--danger .erp-form-section__icon {
    background: rgba(220, 53, 69, .2);
    color: #f87171;
}

/* Select2 en Dark Mode */
body.dark-mode .select2-container--default .select2-selection--single {
    background: #1a1a2a;
    border-color: #374151;
    color: #e5e7eb;
}

body.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #e5e7eb;
}

body.dark-mode .select2-dropdown {
    background: #1a1a2a;
    border-color: #374151;
}

body.dark-mode .select2-search--dropdown .select2-search__field {
    background: #1a1a2a;
    color: #e5e7eb;
    border-color: #374151;
}

body.dark-mode .select2-results__option {
    color: #e5e7eb;
}

body.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: #0d6efd;
    color: #fff;
}

/* DataTables en Dark Mode */
body.dark-mode .dataTables_wrapper {
    color: #e5e7eb;
}

body.dark-mode .dataTables_info {
    color: #94a3b8;
}

body.dark-mode .dataTables_wrapper .dataTables_filter input {
    background: #1a1a2a;
    color: #e5e7eb;
    border-color: #374151;
}

body.dark-mode .dataTables_wrapper .dataTables_length select {
    background: #1a1a2a;
    color: #e5e7eb;
    border-color: #374151;
}

body.dark-mode .page-link {
    background: #1a1a2a;
    color: #e5e7eb;
    border-color: #374151;
}

body.dark-mode .page-link:hover {
    background: #374151;
    color: #fff;
}

body.dark-mode .page-item.active .page-link {
    background: #0d6efd;
    border-color: #0d6efd;
}

body.dark-mode .page-item.disabled .page-link {
    background: #1a1a2a;
    color: #64748b;
    border-color: #374151;
}

/* Tablas en Dark Mode */
body.dark-mode .erp-table thead th {
    background: #1f2937;
    color: #f3f4f6;
    border-color: #374151;
}

body.dark-mode .erp-table tbody td {
    border-color: #374151;
    color: #e5e7eb;
}

body.dark-mode .erp-table tbody tr:hover {
    background: rgba(255, 255, 255, .04);
}

body.dark-mode .erp-table__primary {
    color: #f3f4f6;
}

body.dark-mode .erp-table .badge {
    background: #374151;
    color: #e5e7eb;
}

body.dark-mode .table-dark th {
    background: #0d0d1a !important;
    border-color: #1a1a2a !important;
}

/* Swal2 en Dark Mode */
body.dark-mode .swal2-popup {
    background: #1f2937;
    color: #e5e7eb;
}

body.dark-mode .swal2-title {
    color: #f3f4f6;
}

body.dark-mode .swal2-html-container {
    color: #e5e7eb;
}

/* Botones en Dark Mode */
body.dark-mode .btn-outline-secondary {
    color: #94a3b8;
    border-color: #4b5563;
}

body.dark-mode .btn-outline-secondary:hover {
    background: #374151;
    color: #fff;
}

body.dark-mode .btn-light {
    background: #374151;
    color: #e5e7eb;
    border-color: #4b5563;
}

body.dark-mode .btn-light:hover {
    background: #4b5563;
    color: #fff;
}

body.dark-mode .btn-outline-primary {
    color: #6ea8fe;
    border-color: #0d6efd;
}

body.dark-mode .btn-outline-primary:hover {
    background: #0d6efd;
    color: #fff;
}


/* ==========================================================
   ERP-021 · TABLAS DE REPORTES - MEJORA VISUAL
========================================================== */

/* Mejora de legibilidad en celdas */
.table-reportes tbody td {
    padding: 10px 14px;
    vertical-align: middle;
    font-size: 14px;
    line-height: 1.4;
    color: #1f2937;
}

/* Producto con código más pequeño */
.table-reportes tbody td .producto-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.table-reportes tbody td .producto-info .codigo {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.table-reportes tbody td .producto-info .nombre {
    font-weight: 600;
    color: #1f2937;
}

/* Factura con estilo */
.table-reportes tbody td .factura-numero {
    font-weight: 700;
    color: #0d6efd;
    font-size: 14px;
    letter-spacing: 0.5px;
    background: #eaf2ff;
    padding: 2px 10px;
    border-radius: 6px;
    display: inline-block;
}

/* Fecha más limpia */
.table-reportes tbody td .fecha-texto {
    font-size: 13px;
    color: #4b5563;
    white-space: nowrap;
}

/* Cliente */
.table-reportes tbody td .cliente-nombre {
    font-weight: 500;
    color: #1f2937;
}

.table-reportes tbody td .cliente-nombre.sin-cliente {
    color: #9ca3af;
    font-style: italic;
    font-weight: 400;
}

/* Montos con mejor formato */
.table-reportes tbody td .monto-total {
    font-weight: 700;
    color: #0d6efd;
    font-size: 15px;
    letter-spacing: 0.2px;
}

.table-reportes tbody td .monto-total.text-success {
    color: #198754;
}

/* Stock en tabla de stock crítico */
.table-reportes tbody td .stock-critico-numero {
    font-weight: 800;
    color: #dc3545;
    background: #fdecec;
    padding: 2px 12px;
    border-radius: 999px;
    font-size: 14px;
    display: inline-block;
    min-width: 40px;
    text-align: center;
}

/* Acciones */
.table-reportes tbody td .acciones-group {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.table-reportes tbody td .acciones-group .btn-sm {
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 6px;
}

/* Encabezados más refinados */
.table-reportes thead th {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1f2937;
    padding: 12px 14px;
    background: #f1f5f9;
    border-bottom: 2px solid #e5e7eb;
}

/* Alternancia de filas más suave */
.table-reportes tbody tr:nth-child(even) {
    background: #fafbfc;
}

.table-reportes tbody tr:hover {
    background: #eef6ff !important;
}

/* Borde de tabla más limpio */
.table-reportes {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 8px;
    overflow: hidden;
}

.table-reportes thead th:first-child {
    border-top-left-radius: 8px;
}

.table-reportes thead th:last-child {
    border-top-right-radius: 8px;
}

/* ==========================================================
   DARK MODE - TABLAS DE REPORTES
========================================================== */

body.dark-mode .table-reportes tbody td {
    color: #e5e7eb;
}

body.dark-mode .table-reportes tbody td .producto-info .codigo {
    color: #94a3b8;
}

body.dark-mode .table-reportes tbody td .producto-info .nombre {
    color: #f3f4f6;
}

body.dark-mode .table-reportes tbody td .factura-numero {
    background: rgba(13, 110, 253, 0.2);
    color: #6ea8fe;
}

body.dark-mode .table-reportes tbody td .fecha-texto {
    color: #94a3b8;
}

body.dark-mode .table-reportes tbody td .cliente-nombre {
    color: #e5e7eb;
}

body.dark-mode .table-reportes tbody td .cliente-nombre.sin-cliente {
    color: #64748b;
}

body.dark-mode .table-reportes tbody td .monto-total {
    color: #6ea8fe;
}

body.dark-mode .table-reportes tbody td .stock-critico-numero {
    background: rgba(220, 53, 69, 0.2);
    color: #f87171;
}

body.dark-mode .table-reportes thead th {
    background: #1a1a2e;
    color: #f3f4f6;
    border-bottom: 2px solid #374151;
}

body.dark-mode .table-reportes tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.03);
}

body.dark-mode .table-reportes tbody tr:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

.erp-topbar {
    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 36px;

    margin-bottom: 8px;
}

.erp-topbar__breadcrumb {
    min-width: 0;
}

.erp-topbar__user {
    flex-shrink: 0;

    display: flex;

    align-items: center;
}

.erp-topbar__user .btn {
    padding: 5px 10px;

    font-size: 13px;

    border-radius: 7px;
}

.erp-topbar__user .badge {
    margin-left: 5px;

    font-size: 10px;
}

/* ==========================================================
   CORRECCIÓN GLOBAL - TABLE.SCSS OVERRIDE
   ========================================================== */

/* Para todo el sitio en dark mode */
body.dark-mode .table {
    --bs-table-bg: transparent !important;
    background-color: transparent !important;
}

/* Para DataTables en dark mode */
body.dark-mode .dataTables_wrapper table.dataTable {
    --bs-table-bg: transparent !important;
    background-color: transparent !important;
}

body.dark-mode .dataTables_wrapper table.dataTable tbody td {
    background-color: transparent !important;
    color: #e5e7eb !important;
    border-color: #374151 !important;
}

body.dark-mode .dataTables_wrapper table.dataTable tbody tr {
    background-color: transparent !important;
}

body.dark-mode .dataTables_wrapper table.dataTable tbody tr.odd {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

body.dark-mode .dataTables_wrapper table.dataTable tbody tr.even {
    background-color: transparent !important;
}

body.dark-mode .dataTables_wrapper table.dataTable tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
}