/* =========================================================
   METLAB ERP - CSS MAESTRO
   Diseño base: layout, componentes y dashboard
========================================================= */

:root{
    --area-comercial:#dc090f;
    --area-recepcion:#16a34a;
    --area-compras:#f97316;
    --area-inventario:#7c3aed;
    --area-calidad:#92400e;
    --area-clientes:#2563eb;

    --erp-bg:#f4f6fb;
    --erp-card:#ffffff;
    --erp-border:#e5e7eb;
    --erp-text:#111827;
    --erp-muted:#6b7280;
}

/* =========================================================
   BARRA SUPERIOR / CONTROL BAR
========================================================= */

.erp-controlbar{
    min-height:92px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:14px 24px;
    background:#fff;
    border-bottom:1px solid var(--erp-border);
}

.erp-control-left,
.erp-brand,
.erp-top-actions{
    display:flex;
    align-items:center;
}

.erp-control-left{ gap:22px; }
.erp-brand{ gap:10px; }
.erp-top-actions{ gap:10px; }

.erp-breadcrumb{
    font-weight:700;
    color:#374151;
}

.erp-breadcrumb span{
    color:var(--area-comercial);
    margin:0 8px;
}

.erp-alert-strip{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.erp-alert-pill{
    padding:8px 13px;
    border-radius:999px;
    font-size:.86rem;
    font-weight:800;
}

.erp-alert-pill.danger{ color:#dc090f; background:#fee2e2; }
.erp-alert-pill.warning{ color:#b45309; background:#fef3c7; }
.erp-alert-pill.success{ color:#15803d; background:#dcfce7; }
.erp-alert-pill.info{ color:#0369a1; background:#e0f2fe; }

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

.erp-shell{
    display:flex;
    min-height:calc(100vh - 92px);
    width:100%;
}

.erp-sidebar{
    width:270px;
    flex:0 0 270px;
    background:#ffffff;
    border-right:1px solid var(--erp-border);
    padding:22px 16px;
    position:sticky;
    top:0;
    align-self:flex-start;
    min-height:calc(100vh - 92px);
    z-index:1;
}

.erp-main{
    flex:1 1 auto;
    min-width:0;
    padding:28px;
    background:var(--erp-bg);
    overflow:hidden;
}

.erp-page-wrap,
.erp-page{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
}

/* =========================================================
   SIDEBAR / MENÚ
========================================================= */

.erp-sidebar-brand{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px;
    border:1px solid var(--erp-border);
    border-radius:18px;
    margin-bottom:24px;
    background:#fff;
}

.erp-sidebar-brand span{
    display:block;
    font-size:13px;
    color:var(--erp-muted);
}

.erp-logo-box{
    width:42px;
    height:42px;
    border-radius:14px;
    background:var(--area-comercial);
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
}

.erp-sidebar-section{
    font-size:12px;
    text-transform:uppercase;
    color:#9ca3af;
    letter-spacing:.08em;
    font-weight:900;
    margin:22px 8px 10px;
}

.erp-nav-link{
    display:flex;
    align-items:center;
    gap:10px;
    padding:13px 14px;
    border-radius:14px;
    color:var(--erp-text);
    text-decoration:none;
    font-weight:800;
    margin-bottom:6px;
    transition:all .2s ease;
}

.erp-nav-link:hover{
    background:#f3f4f6;
    color:var(--erp-text);
    transform:translateX(4px);
}

.erp-nav-comercial:hover{ background:#fee2e2; color:#dc090f; }
.erp-nav-recepcion:hover{ background:#dcfce7; color:#15803d; }
.erp-nav-compras:hover{ background:#ffedd5; color:#c2410c; }
.erp-nav-inventario:hover{ background:#ede9fe; color:#6d28d9; }
.erp-nav-calidad:hover{ background:#fef3c7; color:#92400e; }
.erp-nav-clientes:hover{ background:#dbeafe; color:#1d4ed8; }

.erp-sidebar-user{
    border-top:1px solid var(--erp-border);
    margin-top:24px;
    padding-top:16px;
    font-size:13px;
    color:var(--erp-muted);
}

/* =========================================================
   COMPONENTES GENERALES
========================================================= */

.erp-page-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    margin-bottom:22px;
}

.erp-page-title{
    font-size:30px;
    font-weight:800;
    margin:0;
    color:var(--erp-text);
}

.erp-page-subtitle{
    color:var(--erp-muted);
    margin-top:4px;
}

.erp-card{
    background:var(--erp-card);
    border:1px solid var(--erp-border);
    border-radius:18px;
    box-shadow:0 10px 28px rgba(15,23,42,.06);
}

.erp-card-body{ padding:22px; }

.erp-section-title{
    font-size:18px;
    font-weight:800;
    margin-bottom:14px;
}

.erp-alert-list{
    display:grid;
    gap:10px;
}

.erp-alert-item{
    padding:13px 15px;
    border-radius:14px;
    background:#f9fafb;
    border:1px solid var(--erp-border);
    font-weight:600;
}

/* KPIs genéricos */
.erp-kpi-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
    margin-bottom:22px;
}

.erp-kpi{
    background:#fff;
    border:1px solid var(--erp-border);
    border-radius:18px;
    padding:20px;
    border-left:7px solid var(--area-comercial);
    box-shadow:0 10px 25px rgba(15,23,42,.06);
}

.erp-kpi small{
    color:var(--erp-muted);
    font-weight:700;
}

.erp-kpi h3{
    font-size:34px;
    font-weight:900;
    margin:8px 0 0;
}

.erp-area-comercial{ border-left-color:var(--area-comercial); }
.erp-area-recepcion{ border-left-color:var(--area-recepcion); }
.erp-area-compras{ border-left-color:var(--area-compras); }
.erp-area-inventario{ border-left-color:var(--area-inventario); }
.erp-area-calidad{ border-left-color:var(--area-calidad); }
.erp-area-clientes{ border-left-color:var(--area-clientes); }

/* =========================================================
   DASHBOARD METLAB 2.0
========================================================= */

.mlab-dashboard{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    animation:mlabFadeUp .45s ease both;
}

.mlab-hero{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    background:linear-gradient(135deg,#dc090f 0%,#7f0004 55%,#111827 100%);
    color:white;
    border-radius:24px;
    padding:28px;
    margin-bottom:24px;
    box-shadow:0 18px 38px rgba(220,9,15,.22);
    position:relative;
    overflow:hidden;
}

.mlab-hero::after{
    content:"";
    position:absolute;
    width:240px;
    height:240px;
    border-radius:50%;
    background:rgba(255,255,255,.12);
    right:-70px;
    top:-80px;
}

.mlab-hero h1{
    font-size:36px;
    font-weight:900;
    margin:0;
}

.mlab-hero p{
    margin:8px 0 0;
    opacity:.9;
}

.mlab-kpi-grid{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
    margin-bottom:24px;
}

.mlab-kpi-card{
    background:#fff;
    border-radius:22px;
    padding:22px;
    border:1px solid var(--erp-border);
    box-shadow:0 12px 28px rgba(15,23,42,.08);
    transition:all .25s ease;
    position:relative;
    overflow:hidden;
}

.mlab-kpi-card:hover{
    transform:translateY(-6px);
    box-shadow:0 22px 45px rgba(15,23,42,.14);
}

.mlab-kpi-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:7px;
    height:100%;
}

.mlab-red::before{ background:var(--area-comercial); }
.mlab-green::before{ background:var(--area-recepcion); }
.mlab-orange::before{ background:var(--area-compras); }
.mlab-blue::before{ background:var(--area-clientes); }

.mlab-kpi-icon{
    font-size:28px;
    margin-bottom:10px;
}

.mlab-kpi-title{
    color:var(--erp-muted);
    font-weight:800;
    font-size:14px;
}

.mlab-kpi-number{
    font-size:38px;
    font-weight:900;
    line-height:1;
    margin-top:8px;
}

.mlab-kpi-text{
    color:var(--erp-muted);
    margin-top:8px;
}

.mlab-panel-grid{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:20px;
}

.mlab-panel{
    background:#fff;
    border:1px solid var(--erp-border);
    border-radius:22px;
    padding:22px;
    box-shadow:0 12px 28px rgba(15,23,42,.07);
}

.mlab-panel-title{
    font-size:18px;
    font-weight:900;
    margin-bottom:16px;
}

.mlab-task{
    padding:14px 16px;
    border-radius:16px;
    background:#f9fafb;
    border:1px solid var(--erp-border);
    margin-bottom:10px;
    font-weight:700;
    transition:all .2s ease;
}

.mlab-task:hover{
    background:#fff;
    transform:translateX(6px);
    box-shadow:0 8px 18px rgba(15,23,42,.08);
}

/* =========================================================
   ANIMACIONES
========================================================= */

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

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

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

    .mlab-panel-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:768px){
    .erp-controlbar,
    .erp-page-header{
        flex-direction:column;
        align-items:flex-start;
    }

    .erp-shell{
        flex-direction:column;
    }

    .erp-sidebar{
        width:100%;
        flex:0 0 auto;
        min-height:auto;
        position:relative;
    }

    .erp-main{
        padding:18px;
    }

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

    .mlab-hero h1{
        font-size:28px;
    }
    /* Sidebar visual premium */
.erp-sidebar-brand-pro{
    display:flex;
    align-items:center;
    gap:12px;
    min-height:82px;
    border-radius:20px;
    background:linear-gradient(135deg,#ffffff,#f8fafc);
    box-shadow:0 12px 28px rgba(15,23,42,.07);
}

.erp-brand-icon{
    width:48px;
    height:48px;
    border-radius:16px;
    background:linear-gradient(135deg,#dc090f,#8b0005);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    font-weight:900;
    box-shadow:0 10px 22px rgba(220,9,15,.28);
}

.erp-brand-title{
    font-size:18px;
    font-weight:900;
    color:#111827;
    line-height:1.1;
}

.erp-brand-subtitle{
    font-size:13px;
    color:#6b7280;
    font-weight:600;
}
/* Iconos circulares por módulo */
.erp-dot{
    width:16px;
    height:16px;
    border-radius:50%;
    display:inline-block;
    border:2px solid #111827;
    flex:0 0 16px;
}

.erp-dot-red{ background:#ef233c; }
.erp-dot-green{ background:#16c60c; }
.erp-dot-blue{ background:#0078d4; }
.erp-dot-orange{ background:#ff6b00; }
.erp-dot-purple{ background:#7c3aed; }
.erp-dot-brown{ background:#8b5e34; }

/* Submenú lateral ERP */
.erp-submenu{
    margin:4px 0 14px 28px;
    padding-left:14px;
    border-left:2px solid #f3caca;
    display:grid;
    gap:4px;
}

.erp-submenu-link{
    display:block;
    padding:9px 12px;
    border-radius:12px;
    color:#374151;
    text-decoration:none;
    font-size:14px;
    font-weight:700;
}

.erp-submenu-link:hover{
    background:#fee2e2;
    color:#dc090f;
}
   
}

/* Flechas de desplazamiento del menú lateral */
.erp-sidebar{
    display:flex;
    flex-direction:column;
}

.erp-sidebar-menu{
    flex:1;
    overflow-y:auto;
    scroll-behavior:smooth;
    padding-right:4px;
    max-height:calc(100vh - 210px);
}

.erp-sidebar-menu::-webkit-scrollbar{
    width:6px;
}

.erp-sidebar-menu::-webkit-scrollbar-track{
    background:transparent;
}

.erp-sidebar-menu::-webkit-scrollbar-thumb{
    background:#e5e7eb;
    border-radius:999px;
}

.erp-sidebar-menu::-webkit-scrollbar-thumb:hover{
    background:#9ca3af;
}