:root {
    --primary-color: #28B97B; /* Verde principal */
    --secondary-color: #000000; /* Negro */
    --light-gray: #D1D5DC; /* Gris claro */
    --white: #ffffff; /* Blanco */
    --hover-color: #3f3f3f; /* Color de hover */
    --header-bg: linear-gradient(0deg, rgba(0, 0, 0, 0.76), rgba(51, 51, 51, 0.32));
}

/* LOGO */
.skin-blue .main-header .logo,
.skin-blue-light .main-header .logo {
    background: var(--secondary-color);
    color: var(--white);
    border-bottom: 2px solid var(--primary-color);
}
.skin-blue .main-header .logo:hover,
.skin-blue-light .main-header .logo:hover {
    background: var(--white);
    color: var(--secondary-color);
}

/* MAIN SIDEBAR */
.skin-black-light .main-sidebar,
.skin-blue-light .main-sidebar {
    background: var(--white) !important;
    border-right: 0 !important;
}

/* HEADER */
.skin-blue .main-header .navbar,
.skin-blue-light .main-header .navbar {
    background-color: var(--secondary-color);
    border-bottom: 2px solid var(--primary-color);
}
.skin-blue-light .main-header .navbar .nav>li>a {
    color: var(--white);
    font-size: 20px;
    font-weight: 600;
}
.skin-blue-light .main-header .navbar .sidebar-toggle {
    color: var(--white);
    font-size: 25px;
    font-weight: 700;
}
.skin-blue-light .main-header .navbar .sidebar-toggle:hover {
    background-color: var(--hover-color);
    border-radius: 50%;
    transition: 0.3s ease-in-out;
}

/* BUTTONS */
.btn {
    border-radius: 18px;
    padding: 10px 20px;
    background-color: var(--primary-color);
    color: var(--white);
    transition: 0.3s ease-in-out;
}
.btn:hover {
    background-color: darken(var(--primary-color), 10%);
    transform: translateY(-2px);
}

/* BOXES */
.box-header .box-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--secondary-color);
}
.product_box {
    background-color: var(--white);
    height: 150px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.product_box:hover {
    transform: scale(1.05);
    transition: 0.3s ease-in-out;
}

/* TABLES */
.table-th-yellow {
    background-color: var(--primary-color);
    color: var(--white);
}
.table-bordered.dataTable td,
.table-bordered.dataTable th {
    border: 1px solid var(--light-gray);
    font-size: 13px;
}
.table-bordered.dataTable tbody td {
    font-size: 14px;
}
.pagination>.active>a,
.pagination>.active>span {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
}

/* MODALS */
.modal-title {
    font-weight: 600;
}
.close {
    color: var(--secondary-color);
    opacity: 1;
}

/* WIZARD */
.wizard>.steps .current a {
    background: var(--primary-color);
    color: var(--white);
}
.wizard>.content {
    background: var(--primary-color);
    border-radius: 15px;
}

/* FORM ELEMENTS */
.form-control:not(select) {
    border-radius: 15px;
}
.form-group.has-feedback span {
    color: var(--secondary-color);
}

/* HEADINGS */
.content-header>h1 {
    font-weight: 600;
    color: var(--secondary-color);
}

/* INFO BOXES */
.info-box-text,
.info-box-number {
    color: var(--secondary-color);
}

/* LEFT COLUMN */
.left-col {
    background: var(--header-bg), url(../img/basic-black-and-white-calculato.jpg);
    text-align: center;
    background-size: cover;
    background-position: center;
}

/* HOVER EFFECTS */
.treeview:hover {
    background: var(--primary-color);
}