:root{

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

    --cb-green-dark:#1F4D2C;
    --cb-green:#2E7D32;
    --cb-lime:#B8CF2E;
    --cb-lime-dark:#A2BC1E;

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

    --cb-sidebar-bg:rgba(18,68,34,.92);
    --cb-sidebar-brand:rgba(18,68,34,1);
    --cb-sidebar-active:rgba(181,205,51,.85);
    --cb-sidebar-header:rgba(181,205,51,.95);

    --cb-login-bg:#EEF6D9;

    --cb-input-focus:rgba(184,207,46,.20);

    /*==================================================
    ESTILOS
    ==================================================*/

    --cb-radius:1rem;

    --cb-shadow-sm:0 .125rem .25rem rgba(0,0,0,.075);
    --cb-shadow-lg:0 .5rem 1rem rgba(0,0,0,.10);

    --cb-transition:.25s ease;

}

/*==================================================
MODO OSCURO
==================================================*/

[data-bs-theme="dark"] body{
    color:#fff;
}

[data-bs-theme="dark"] .app-main{
    color:#fff;
}

[data-bs-theme="dark"] .card{
    background-color:#1a1a1a;
    color:#fff;
}

[data-bs-theme="dark"] .card-body{
    color:#fff;
}

[data-bs-theme="dark"] .card-header{
    background-color:#fff;
    color:#000;
}

[data-bs-theme="dark"] .card-title{
    color:#000!important;
}

[data-bs-theme="dark"] .card-header .card-title{
    color:#000!important;
}

[data-bs-theme="dark"] .card-header h1,
[data-bs-theme="dark"] .card-header h2,
[data-bs-theme="dark"] .card-header h3,
[data-bs-theme="dark"] .card-header h4,
[data-bs-theme="dark"] .card-header h5,
[data-bs-theme="dark"] .card-header h6{
    color:#000!important;
}

[data-bs-theme="dark"] .table{
    color:#fff;
}

[data-bs-theme="dark"] .table thead th{
    background-color:#2d2d2d;
    color:#fff;
}

[data-bs-theme="dark"] .table tbody tr{
    background-color:#1a1a1a;
    color:#fff;
}

[data-bs-theme="dark"] .table tbody tr:hover{
    background-color:#2d2d2d;
    color:#fff;
}

[data-bs-theme="dark"] .form-control{
    background-color:#2d2d2d;
    border-color:#444;
    color:#fff;
}

[data-bs-theme="dark"] .form-control:focus{
    background-color:#2d2d2d;
    border-color:var(--cb-lime);
    color:#fff;
}

[data-bs-theme="dark"] .form-label{
    color:#fff;
}

[data-bs-theme="dark"] .text-muted{
    color:#aaa!important;
}

[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6{
    color:#fff;
}

[data-bs-theme="dark"] .card-header h1,
[data-bs-theme="dark"] .card-header h2,
[data-bs-theme="dark"] .card-header h3,
[data-bs-theme="dark"] .card-header h4,
[data-bs-theme="dark"] .card-header h5,
[data-bs-theme="dark"] .card-header h6{
    color:#000;
}

[data-bs-theme="dark"] .page-header{
    background-color:#fff;
    color:#000;
}

[data-bs-theme="dark"] .page-header h1,
[data-bs-theme="dark"] .page-header h2,
[data-bs-theme="dark"] .page-header h3{
    color:#000;
}

[data-bs-theme="dark"] .btn-light{
    background-color:#2d2d2d;
    border-color:#444;
    color:#fff;
}

[data-bs-theme="dark"] .btn-light:hover{
    background-color:#3d3d3d;
    border-color:#555;
    color:#fff;
}

[data-bs-theme="dark"] .modal-content{
    background-color:#1a1a1a;
    color:#fff;
}

[data-bs-theme="dark"] .modal-header{
    background-color:#fff;
    color:#000;
}

[data-bs-theme="dark"] .modal-title{
    color:#000;
}

[data-bs-theme="dark"] .modal-body{
    color:#fff;
}

[data-bs-theme="dark"] .modal-footer{
    background-color:#2d2d2d;
    color:#fff;
}

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

.dashboard-card{

    border:none;
    border-radius:var(--cb-radius);
    box-shadow:var(--cb-shadow-sm);
    transition:var(--cb-transition);

}

.dashboard-card:hover{

    transform:translateY(-2px);
    box-shadow:var(--cb-shadow-lg);

}

.dashboard-card-body{

    min-height:320px;

}

.kpi-card{

    border:none;
    border-radius:var(--cb-radius);
    box-shadow:var(--cb-shadow-sm);
    transition:var(--cb-transition);

}

.kpi-card:hover{

    transform:translateY(-2px);

    box-shadow:var(--cb-shadow-lg);

}

.kpi-icon{

    font-size:1.8rem;

}

.section-title{

    font-weight:600;

}

.text-primary{

     color:var(--cb-login-bg)!important;
}
/* ======================================================
   COMPONENTES
====================================================== */

.component-card{

    border: none;

    border-radius: var(--cb-radius);

    box-shadow: var(--cb-shadow-sm);

    transition: var(--cb-transition);

}

.component-card:hover{

    transform: translateY(-2px);

    box-shadow: var(--cb-shadow-lg);

}

.component-card-body{

    min-height: 220px;

}
/*==================================================
=            SIDEBAR COMBARRANQUILLA
==================================================*/

/* Fondo principal */

.app-sidebar{

    background:var(--cb-sidebar-bg)!important;

}

/* Logo */

.sidebar-brand{

    background:var(--cb-sidebar-brand);

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

}

.sidebar-brand .brand-image{

    border-radius:50%;

}

/* Texto del logo */

.sidebar-brand .brand-text{

    color:#fff;

    font-weight:600;

    letter-spacing:.5px;

}

/* Iconos */

.app-sidebar .nav-icon{

    color:#fff;

}

/* Texto del menú */

.app-sidebar .nav-link{

    color:#fff!important;

    border-radius:.5rem;

    margin:2px 8px;

    transition:var(--cb-transition);

}

/* Hover */

.app-sidebar .nav-link:hover{

    background:var(--cb-lime)!important;

    color:#fff;

}

/* Menú activo */

.app-sidebar .nav-link.active{

    background:var(--cb-sidebar-active);

    color:#fff!important;

    font-weight:600;

}

/* Icono del menú activo */

.app-sidebar .nav-link.active .nav-icon{

    color:#fff;

}

/* Encabezados */

.app-sidebar .nav-header{

    color:var(--cb-sidebar-header);

    font-size:.78rem;

    text-transform:uppercase;

    letter-spacing:1px;

    font-weight:700;

    margin-top:18px;

}

/*==================================================
BUSCADOR DE EMPRESAS CON AUTOCOMPLETADO
==================================================*/

#sugerenciasEmpresas {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    max-height: 300px;
    overflow-y: auto;
}

.sugerencia-item {
    transition: background-color 0.2s ease;
}

.sugerencia-item:hover,
.sugerencia-item.active {
    background-color: #f8f9fa !important;
}

.sugerencia-item mark {
    background-color: #fff3cd;
    padding: 0 2px;
    border-radius: 2px;
}

/* Estilos para modo oscuro */
[data-bs-theme="dark"] #sugerenciasEmpresas {
    background-color: #1a1a1a;
    border-color: #444;
    color: #fff;
}

[data-bs-theme="dark"] .sugerencia-item:hover,
[data-bs-theme="dark"] .sugerencia-item.active {
    background-color: #2d2d2d !important;
}

[data-bs-theme="dark"] .sugerencia-item mark {
    background-color: #6c757d;
    color: #fff;
}

/*==================================================
BUSCADOR SIMPLE DE EMPRESAS
==================================================*/

#empresa-buscador {
    cursor: pointer;
}

#empresa-select {
    max-height: 300px;
    overflow-y: auto;
}

/* Estilos para modo oscuro */
[data-bs-theme="dark"] #empresa-buscador {
    background-color: #2d2d2d;
    border-color: #444;
    color: #fff;
}

[data-bs-theme="dark"] #empresa-select {
    background-color: #2d2d2d;
    border-color: #444;
    color: #fff;
}

[data-bs-theme="dark"] #empresa-select option {
    background-color: #2d2d2d;
    color: #fff;
}

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

.btn-primary{

    background:var(--cb-sidebar-active);

    border-color:var(--cb-sidebar-active);

}

.btn-primary:hover{

    background:var(--cb-sidebar-bg)!important;

    border-color:var(--cb-sidebar-bg)!important;

}

/* Botón de cierre de sesión */
.btn-logout{

    background:var(--cb-green-dark);

    border-color:var(--cb-green-dark);

    color:#fff;

    font-weight:600;

    transition:var(--cb-transition);

}

.btn-logout:hover{

    background:var(--cb-green);

    border-color:var(--cb-green);

    color:#fff;

}

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

/* ==========================================================
   EMPRESAS BI - LOGIN
   Bootstrap + AdminLTE
========================================================== */

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

.login-page{

    min-height:100vh;

    background:linear-gradient(

        to bottom,

        #fff 0%,

        #fff 65%,

        var(--cb-login-bg) 100%

    );

}

/* ==========================================================
   BARRA SUPERIOR
========================================================== */

.login-topbar{

    height:85px;

    background:var(--cb-green-dark);

    border-bottom:4px solid var(--cb-lime);

    margin-bottom:45px;

}

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

.login-logo h2{

    color:var(--cb-green-dark);

    font-weight:700;

    margin-bottom:.25rem;

}

.login-logo small{

    color:#6c757d;

}

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

.login-box .card{

    border:none;

    border-radius:var(--cb-radius);

}

.login-card-body{

    border-top:5px solid var(--cb-lime);

    border-radius:var(--cb-radius);

}

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

.form-control:focus{

    border-color:var(--cb-lime);

    box-shadow:0 0 0 .2rem var(--cb-input-focus);

}

.input-group-text{

    background:#fff;

    color:var(--cb-green-dark);

}

/* ==========================================================
   BOTÓN
========================================================== */

.btn-login{

    background:linear-gradient(

        180deg,

        var(--cb-lime),

        var(--cb-lime-dark)

    );

    color:#fff;

    border:none;

    font-weight:600;

    transition:var(--cb-transition);

}

.btn-login:hover{

    background:var(--cb-green-dark);

    color:#fff;

    transform:translateY(-1px);

}

/* ==========================================================
   LINK
========================================================== */

.login-card-body a{

    color:var(--cb-green-dark);

    text-decoration:none;

    font-weight:500;

}

.login-card-body a:hover{

    color:var(--cb-green);

}

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

@media (max-width:768px){

    .login-topbar{

        height:70px;

        margin-bottom:35px;

    }

}