/* =====================================================
   CPS ERP 2026
   Diseño Moderno
===================================================== */

:root{

    --primary:#0F4C81;
    --primary-dark:#0B3A61;
    --secondary:#2563EB;

    --success:#16A34A;
    --warning:#F59E0B;
    --danger:#DC2626;

    --background:#EEF3F9;

    --card:#FFFFFF;

    --text:#233044;
    --text-light:#6B7280;

    --radius:18px;
}

/* =====================================================
   FONDO
===================================================== */

html,
body{
    background:var(--background);
    font-family:'Nunito Sans',sans-serif;
}

.bg-soft,
.container-fluid{
    background:var(--background) !important;
}

/* =====================================================
   LINKS
===================================================== */

a{
    text-decoration:none !important;
    color:inherit;
}


/* =====================================================
   CUERPO
===================================================== */

.card-body{

    padding:18px !important;
}

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

.icon{

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

}

.icon-shape{

    width:58px;

    height:58px;

    border-radius:20px !important;

    background:
        linear-gradient(
            135deg,
            #2563EB,
            #0F4C81
        ) !important;

    color:white !important;

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

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

    transition:.25s;
}

.card:hover .icon-shape{

    transform:scale(1.08);

}

.icon-shape i,
.icon-shape span{

    color:white !important;

    font-size:32px;

}

/* =====================================================
   TITULOS
===================================================== */

.card h2{

    color:var(--text);

    font-size:22px;

    font-weight:700;

    margin-bottom:12px;

    line-height:1.2;

}

/* =====================================================
   DESCRIPCION
===================================================== */

.card small{

    color:var(--text-light);

    font-size:17px;

    line-height:1.6;

}

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

.footer{

    margin-top:25px;

    background:#fff;

    border-radius:18px;

    box-shadow:
        0 8px 20px rgba(15,76,129,.08);

}

.footer p{

    color:#6B7280;

}

/* =====================================================
   NAVBAR
===================================================== */

.navbar-dashboard{

    background:transparent !important;

    box-shadow:none !important;

}

/* =====================================================
   USUARIO
===================================================== */

.navbar-nav .font-small{

    color:#233044;

    font-weight:600;

}

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

@media(max-width:1200px){

    .card-body{

        padding:26px !important;

    }

    .icon-shape{

        width:70px !important;
        height:70px !important;

    }

}

@media(max-width:768px){

    .card{

        margin-bottom:16px;

    }

    .card h2{

        font-size:20px;

    }

    .card small{

        font-size:15px;

    }

}

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

*{

    transition:
        background .20s,
        color .20s;

}

/*=====================================================
 SIDEBAR MODERNO
======================================================*/

.sidebar{

    background:#16213E !important;

    border-right:none !important;

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

}

.sidebar-inner{

    padding-top:20px !important;

}

.sidebar .nav-link{

    color:#d9e2ef !important;

    border-radius:12px;

    margin:4px 10px;

    padding:13px 16px;

    transition:.25s;

    font-size:15px;

}

.sidebar .nav-link:hover{

    background:#2563EB !important;

    color:white !important;

}

.sidebar .nav-item.active .nav-link{

    background:#2563EB !important;

    color:white !important;

}

.sidebar-icon{

    width:24px;

    text-align:center;

    margin-right:10px;

}

.sidebar .link-arrow{

    color:#8ea9d2;

}

.sidebar-brand{

    text-align:center;

    padding:10px 0 30px;

}

.logo-sidebar{

    width:70px;

    margin-bottom:15px;

}

.sidebar-brand h4{

    color:white;

    font-weight:700;

    margin:0;

}

.sidebar-brand small{

    color:#94A3B8;

}

/************************************************
 AJUSTE DEL LAYOUT
************************************************/

.sidebar{
    width:240px !important;
    min-width:240px !important;
}

.content{
    margin-left:240px !important;
    width:calc(100% - 240px) !important;
    padding:24px !important;
}

@media (max-width: 991px){

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

}

/*==================================================
 SIDEBAR CPS ERP
==================================================*/

.sidebar{

    width:250px !important;
    min-width:250px !important;

    background:linear-gradient(
        180deg,
        #16213E 0%,
        #1B2442 100%
    ) !important;

    border-right:none !important;

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

}

.sidebar-inner{

    padding:18px 14px !important;

}

/*--------------------------------*/

.sidebar-brand{

    text-align:center;

    margin-bottom:25px;

}

.logo-sidebar{

    width:72px;

    height:72px;

    border-radius:18px;

    background:white;

    padding:8px;

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

    margin-bottom:12px;

}

.sidebar-brand h4{

    color:white;

    font-size:17px;

    font-weight:700;

    margin-bottom:2px;

}

.sidebar-brand small{

    color:#9CA3AF;

    font-size:13px;

}

/*--------------------------------*/

.sidebar .nav-item{

    margin-bottom:4px;

}

/*--------------------------------*/

.sidebar .nav-link{

    display:flex;

    align-items:center;

    gap:12px;

    color:#D1D5DB !important;

    padding:12px 14px;

    border-radius:12px;

    font-size:15px;

    font-weight:500;

    transition:.25s;

}

/*--------------------------------*/

.sidebar .nav-link:hover{

    background:#2563EB !important;

    color:white !important;

    transform:translateX(4px);

}

/*--------------------------------*/

.sidebar .nav-item.active>.nav-link{

    background:#2563EB !important;

    color:white !important;

    border-left:4px solid #60A5FA;

}

/*--------------------------------*/

.sidebar-icon{

    width:22px;

    text-align:center;

    font-size:16px;

}

/*--------------------------------*/

.link-arrow{

    margin-left:auto;

    opacity:.65;

}

/*--------------------------------*/

.multi-level{

    margin-left:6px;

    padding-left:6px;

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

}

/*--------------------------------*/

.multi-level .nav-link{

    padding:9px 12px;

    font-size:12px;

    color:#BFC8D6 !important;

}

.multi-level .nav-link:hover{

    background:rgba(37,99,235,.25)!important;

}

/*--------------------------------*/

.content{

    margin-left:250px !important;

    width:calc(100% - 250px) !important;

}

@media(max-width:991px){

    .content{

        margin-left:0!important;

        width:100%!important;

    }

}

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

table.dataTable{
    border-collapse:separate !important;
    border-spacing:0 8px !important;
}

table.dataTable thead th{

    background:#F8FAFC !important;

    color:#334155 !important;

    border:none !important;

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

    padding:16px 18px !important;

}

table.dataTable tbody tr{

    background:#FFFFFF;

    box-shadow:0 3px 10px rgba(15,76,129,.05);

    transition:.20s;

}

table.dataTable tbody tr:hover{

    background:#F8FBFF !important;

    transform:scale(1.002);

}

table.dataTable tbody td{

    padding:16px 18px !important;

    border-top:none !important;

    border-bottom:none !important;

    vertical-align:middle;

}

.dataTables_wrapper{

    padding:15px;

}

.dataTables_filter input{

    border-radius:10px !important;

    border:1px solid #D1D5DB !important;

    padding:8px 12px !important;

    box-shadow:none !important;

}

.dataTables_filter input:focus{

    border-color:#2563EB !important;

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

}

.dataTables_length select{

    border-radius:10px;

    border:1px solid #D1D5DB;

    padding:6px 10px;

}

.dataTables_paginate .paginate_button{

    border-radius:10px !important;

    margin:0 3px !important;

}

.dataTables_paginate .paginate_button.current{

    background:#2563EB !important;

    color:white !important;

    border:none !important;

}

.dataTables_paginate .paginate_button:hover{

    background:#0F4C81 !important;

    color:white !important;

}

.btn{

    border-radius:10px !important;

    font-weight:600;

}

.btn-warning{

    background:#F59E0B !important;

    border:none !important;

}

.btn-danger{

    background:#DC2626 !important;

    border:none !important;

}

.btn-primary{

    background:#2563EB !important;

    border:none !important;

}

/*==================================================
 TITULOS
==================================================*/
.card-header{

    background:white !important;

    border:none !important;

    padding:24px 28px !important;

}

.card-header h4{

    font-weight:700;

    color:#233044;

}


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

.modules-header{
    padding:22px 28px;
}

.modules-title h1{

    font-size:30px;

    font-weight:700;

    color:#233044;

    margin:5px 0;

}

.modules-title p{

    color:#6B7280;

    margin:0;

    font-size:16px;

}

.breadcrumb-small{

    color:#2563EB;

    font-size:14px;

    font-weight:600;

}

.modules-user{

    display:flex;

    align-items:center;

    gap:16px;

    width:auto;

    min-width:240px;

    padding:14px 20px;

    border-radius:18px;

    background:#F8FAFC;

    border:1px solid #D9E3F2;

    margin-left:auto;

}

.user-avatar{

    width:55px;

    height:55px;

    border-radius:50%;

    background:linear-gradient(135deg,#2563EB,#0F4C81);

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

    font-weight:700;

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

}

.modules-user small{

    color:#6B7280;

}

.modules-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.user-avatar{

    width:52px;

    height:52px;

    font-size:18px;

}

/*==================================================
 IDENTIDAD DEL SISTEMA
==================================================*/

.system-name{

    display:inline-block;

    margin:10px 0 4px;

    padding:4px 10px;

    border-radius:20px;

    background:rgba(37,99,235,.08);

    color:#2563EB;

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}

.modules-user{

    display:flex;

    align-items:center;

    gap:15px;

    padding:10px 15px;

    border-radius:18px;

    background:#F8FAFC;

    border:1px solid rgba(37,99,235,.08);

}

.modulo-card{

    border:1px solid #E6EDF7;

}

.modulo-card:hover{

    transform:
        translateY(-6px);

    border:1px solid #2563EB!important;

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

}

.modulo-card:hover .icon-shape{

    transform:
        rotate(-4deg)
        scale(1.08);

}

/*=========================================
 LOGO LOGIN
==========================================*/

.login-logo{

    text-align:center;

    margin-bottom:20px;

}

.login-logo img{

    width:90px;

    height:auto;

}

.system-name{

    display:inline-block;

    padding:5px 12px;

    margin-bottom:12px;

    border-radius:20px;

    background:#EAF2FF;

    color:#2563EB;

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;

}

/*==================================================
 LOGIN
==================================================*/

html,
body{
    height:100%;
}

body{
    min-height:100vh;
}

main{
    min-height:100vh;
}

.login-page{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(135deg,#EEF3F9,#DCE9F9);

    padding:40px;
}

.login-card{

    width:100%;

    max-width:480px;

    background:#FFFFFF;

    border-radius:24px;

    padding:45px;

    box-shadow:0 25px 60px rgba(15,76,129,.12);
}

/*==================================================
 LOGIN
==================================================*/

.login-card{

    width:100%;

    max-width:480px;

    background:#FFFFFF;

    border-radius:24px;

    padding:45px;

    box-shadow:0 25px 60px rgba(15,76,129,.12);

}

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

@media (max-width: 1440px){

    .sidebar{
        width:220px !important;
        min-width:220px !important;
    }

    .content{
        margin-left:220px !important;
        width:calc(100% - 220px) !important;
        padding:18px !important;
    }

    .card-body{
        padding:22px !important;
    }

    .modules-header{
        padding:20px 28px;
        margin-bottom:24px;
    }

    .modules-title h1{
        font-size:26px;
    }

    .icon-shape{
        width:58px;
        height:58px;
    }

    .icon-shape i{
        font-size:28px;
    }

    .card h2{
        font-size:20px;
    }

    .card small{
        font-size:15px;
    }

}

@media (max-width:1280px){

    .sidebar{
        width:205px !important;
        min-width:205px !important;
    }

    .content{
        margin-left:205px !important;
        width:calc(100% - 205px) !important;
    }

    .modules-header{
        padding:20px 24px;
    }

    .user-avatar{
        width:52px;
        height:52px;
        font-size:18px;
    }

}
/*==================================================
 TARJETAS DE MÓDULOS
==================================================*/

.modulo-card{

    width:100%;
    min-height:170px;
    border:none;

}

.modulo-card .card-body{

    padding:22px !important;

}

.modulo-card .icon-shape{

    width:62px;
    height:62px;

}

.modulo-card h2{

    margin-bottom:10px;
    font-size:20px;
    font-weight:700;
    line-height:1.2;

}

.modulo-card small{
    font-size:15px;
    color:#64748B;

}

.modulo-card .card-body{

    display:flex;

    align-items:center;

}

.modulo-card small{

    color:#64748B;

    font-size:15px;

}

.modulo-card h2{

    color:#1E293B;

    font-weight:700;

}


/*==================================================
 ALINEACIÓN
==================================================*/

.g-4{
    --bs-gutter-y:1rem;
}

/*==========================================
 BARRA DE FILTROS
==========================================*/

.filters-bar{

    background:#FFFFFF;

    border:1px solid #E5E7EB;

    border-radius:18px;

    padding:22px;

    margin-bottom:24px;

    box-shadow:0 8px 24px rgba(15,76,129,.06);

}

.filters-bar label{

    font-weight:600;

    color:#334155;

    margin-bottom:8px;

}

/* ==========================================
   SELECT2 ERP
========================================== */

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

.select2-container--default .select2-selection--single{
    height:40px !important;
    min-height:40px !important;
    border-radius:8px;
}

.select2-container--default .select2-selection__rendered{
    line-height:44px !important;
    font-size:15px !important;
    padding-left:14px;
}

.select2-container--default .select2-selection__arrow{
    height:44px !important;
}

.form-control{
    height:46px !important;
    font-size:15px !important;
    border-radius:8px;
}
/*====================================================
  ERP ULTRA COMPACTO
====================================================*/

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

.table thead th {
    background: #f5f7fa;
    color: #243447;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 6px 8px;
    line-height: 1.1;
    white-space: nowrap;
}

.table tbody td {
    padding: 5px 8px;
    font-size: 11px;
    line-height: 1.15;
    vertical-align: middle;
}

.table tbody tr {
    height: 34px;
}

.table tbody tr:hover {
    background: #f7fbff;
}

.table-striped tbody tr:nth-of-type(odd) {
    background: #fcfcfc;
}

/* DataTables */
.dataTables_wrapper,
.dataTables_wrapper label,
.dataTables_wrapper input,
.dataTables_wrapper select,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    font-size: 11px;
}

.dataTables_wrapper input,
.dataTables_wrapper select {
    height: 28px;
    padding: 2px 6px;
}

/* Botones pequeños */
.btn-sm {
    font-size: 11px;
    padding: 3px 8px;
}