@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --bs-body-font-family: 'Inter';

    --bs-primary-rgb: 21, 112, 239;
    --bs-secondary-rgb: 93, 102, 121; /* #5d6679 (gray-600) */
    --bs-success-rgb: 46, 150, 56; /* #2E9638 */
    --bs-danger-rgb: 218, 62, 51; /* #DA3E33 */

    --bs-primary-50: #e8f1fd;
    --bs-primary-100: #b6d3fa;
    --bs-primary-200: #93bdf8;
    --bs-primary-300: #629ff4;
    --bs-primary-400: #448df2;
    --bs-primary-500: #1570ef;
    --bs-primary-600: #1366d9;
    --bs-primary-700: #0f50aa;
    --bs-primary-800: #0c3e83;
    --bs-primary-900: #092f64;

    --bs-gray: #5d6679;
    --bs-gray-50: #f0f1f3;
    --bs-gray-100: #d0d3d9;
    --bs-gray-200: #b9bdc7;
    --bs-gray-300: #989fad;
    --bs-gray-400: #858d9d;
    --bs-gray-500: #667085;
    --bs-gray-600: #5d6679;
    --bs-gray-700: #48505e;
    --bs-gray-800: #383e49;
    --bs-gray-900: #2b2f38;

    --bs-border-color: var(--bs-gray-100);

    --bs-danger-text-emphasis: #84251F;
    --bs-danger-bg-subtle: #FEECEB;
    --bs-danger-border-subtle: #DA3E33;

    --bs-success-text-emphasis: #0A653A;
    --bs-success-bg-subtle: #E7F8F0;
    --bs-success-border-subtle: #10A760;

    --bs-info-text-emphasis: #0c3e83;
    --bs-info-bg-subtle: #e8f1fd;
    --bs-info-border-subtle: #1366d9;
}

#sidebar {
    width: 100vw;
    height: 4.75rem;

    .nav {
        --bs-nav-link-padding-x: 1rem;
        --bs-nav-link-padding-y: 1rem;
    }
}

#sidebar .logo {
    height: 100%;
    filter: brightness(0) invert(1);
}

#sidebar .selector-grupo {
    min-width: 12rem;
}

@media (min-width: 768px) {
    :root {
        font-size: 14px;
    }

    .layout {
        max-width: 100vw;
        display: grid;
        grid-template-columns: auto 1fr;
    }

    #sidebar {
        position: sticky;
        top: 0;
        overscroll-behavior: contain;
        overflow-y: scroll;

        min-width: 17rem;
        max-width: 17rem;
        height: 100dvh;
        border-radius: 0px 2.25rem 2.25rem 0px;

        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    #sidebar::-webkit-scrollbar {
        display: none;
    }

    #sidebar .logo {
        height: unset;
        width: 100%;
    }

    #sidebar .logo[data-grupo="4690"] {
        transform: translateX(9%);
    }

    #sidebar .selector-grupo {
        width: 100%;
    }

    #sidebar .navbar-brand {
        align-self: center;
        max-height: 60px;
    }
}

#sidebar .nav-link:hover, #sidebar .nav-link.active {
    color: white;
}

#sidebar .icon-link {
    gap: 1rem;
}

#sidebar .btn-light {
    background: transparent;
}

#sidebar label:has(.form-check-input)  {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#sidebar .form-group {
    margin-bottom: 0.75rem;
}

#sidebar .form-check-input {
    background-color: transparent;
    border: 2px solid var(--bs-gray-600);
    padding: 0.2rem;
    margin: 0;
    margin-left: 1.25rem;
    border-radius: 0.25rem;
}

.nav-link[data-bs-toggle="collapse"] .arrow {
    transition: transform 0.15s ease;
}

.nav-link[data-bs-toggle="collapse"][aria-expanded="true"] .arrow {
    transform: rotate(-180deg);
}

#sidebar .dropdown-item.nav-link {
    padding-block: 0.5rem;
}

.btn {
    --bs-btn-border-radius: var(--bs-border-radius-lg);
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: 0.625rem;

    &:has(> .icon) {
        display: inline-flex;
        align-items: center;
        column-gap: 0.5rem;
    }
}

.btn-secondary {
    --bs-btn-disabled-bg: var(--bs-gray-100);
    --bs-btn-disabled-color: var(--bs-gray-900);
    --bs-btn-disabled-border-color: var(--bs-gray-600);

    --bs-btn-bg: var(--bs-gray-600);
    --bs-btn-hover-bg: var(--bs-gray-400);

    --bs-btn-border-color: var(--bs-gray-600);
    --bs-btn-hover-border-color: var(--bs-gray-400);
}

.btn-light {
    --bs-btn-bg: white;
    --bs-btn-border-color: var(--bs-gray-300);
    --bs-btn-color: var(--bs-gray-400);

    --bs-btn-hover-bg: white;
    --bs-btn-hover-border-color: var(--bs-gray-300);
    --bs-btn-hover-color: var(--bs-gray-800);
}

.btn-outline-dark {
    --bs-btn-disabled-bg: var(--bs-gray-50);
    --bs-btn-disabled-color: var(--bs-gray-600);
    --bs-btn-disabled-border-color: var(--bs-gray-300);

    --bs-btn-hover-bg: var(--bs-gray-50);

    --bs-btn-color: var(--bs-gray-900);
    --bs-btn-border-color: var(--bs-gray-400);

    --bs-btn-hover-color: var(--bs-gray-900);
    --bs-btn-hover-border-color: var(--bs-gray-400);
}

.btn-dark {
    --bs-btn-bg: var(--bs-gray-900);
    --bs-btn-border-color: var(--bs-gray-900);
}

.bg-gray-50 { background-color: var(--bs-gray-50) !important; }
.bg-gray-100 { background-color: var(--bs-gray-100) !important; }
.bg-gray-200 { background-color: var(--bs-gray-200) !important; }
.bg-gray-300 { background-color: var(--bs-gray-300) !important; }
.bg-gray-400 { background-color: var(--bs-gray-400) !important; }
.bg-gray-500 { background-color: var(--bs-gray-500) !important; }
.bg-gray-600 { background-color: var(--bs-gray-600) !important; }
.bg-gray-700 { background-color: var(--bs-gray-700) !important; }
.bg-gray-800 { background-color: var(--bs-gray-800) !important; }
.bg-gray-900 { background-color: var(--bs-gray-900) !important; }

.border-gray-50 { border-color: var(--bs-gray-50) !important; }
.border-gray-100 { border-color: var(--bs-gray-100) !important; }
.border-gray-200 { border-color: var(--bs-gray-200) !important; }
.border-gray-300 { border-color: var(--bs-gray-300) !important; }
.border-gray-400 { border-color: var(--bs-gray-400) !important; }
.border-gray-500 { border-color: var(--bs-gray-500) !important; }
.border-gray-600 { border-color: var(--bs-gray-600) !important; }
.border-gray-700 { border-color: var(--bs-gray-700) !important; }
.border-gray-800 { border-color: var(--bs-gray-800) !important; }
.border-gray-900 { border-color: var(--bs-gray-900) !important; }

.text-gray-50 { color: var(--bs-gray-50) !important; }
.text-gray-100 { color: var(--bs-gray-100) !important; }
.text-gray-200 { color: var(--bs-gray-200) !important; }
.text-gray-300 { color: var(--bs-gray-300) !important; }
.text-gray-400 { color: var(--bs-gray-400) !important; }
.text-gray-500 { color: var(--bs-gray-500) !important; }
.text-gray-600 { color: var(--bs-gray-600) !important; }
.text-gray-700 { color: var(--bs-gray-700) !important; }
.text-gray-800 { color: var(--bs-gray-800) !important; }
.text-gray-900 { color: var(--bs-gray-900) !important; }

.text-primary-50 { color: var(--bs-primary-50) !important; }
.text-primary-100 { color: var(--bs-primary-100) !important; }
.text-primary-200 { color: var(--bs-primary-200) !important; }
.text-primary-300 { color: var(--bs-primary-300) !important; }
.text-primary-400 { color: var(--bs-primary-400) !important; }
.text-primary-500 { color: var(--bs-primary-500) !important; }
.text-primary-600 { color: var(--bs-primary-600) !important; }
.text-primary-700 { color: var(--bs-primary-700) !important; }
.text-primary-800 { color: var(--bs-primary-800) !important; }
.text-primary-900 { color: var(--bs-primary-900) !important; }

.fw-heavy { font-weight: 900; }

.w-max { width: max-content !important; }
.w-fit { width: fit-content !important; }
.h-fit { height: fit-content !important; }

.bootstrap-select > .dropdown-toggle.bs-placeholder {
    color: var(--bs-gray-400);
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-label-group label {
    color: var(--bs-gray-700);
    margin-bottom: 0.375rem;
}

.form-control {
    padding-block: 0.625rem;
}

.form-control:disabled {
    --bs-secondary-bg: white;
    --bs-body-color: var(--bs-gray-400);
    --bs-border-color: var(--bs-gray-100);
}

.form-control::placeholder, .form-select {
    color: var(--bs-gray-500);
}

hgroup {
    margin-bottom: 2.25rem;
    color: var(--bs-gray-500);

    > * {
        font-weight: inherit;
        margin-bottom: 0;
    }

    > :first-child {
        color: var(--bs-gray-900);
        margin-bottom: 0.75rem;
    }
}

.clear-link {
    color: inherit;
    text-decoration: none;
}

.breadcrumb, .breadcrumb-item::before {
    color: var(--bs-gray-300) !important;
    font-weight: 400;
}

.breadcrumb a {
    text-decoration: none;
    color: inherit;
}

.breadcrumb .active {
    font-weight: 700;
    color: var(--bs-gray-700);
}

.card {
    border-color: #d4d4d4;
}

.sort-icon {
    color: #F0F1F3;
}

.sort-icon:not(.active) .background {
    display: none;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    margin-left: 0.5rem;
}

#catalogo {
    --bs-gutter-x: 1.25rem;
    --bs-gutter-y: 1.25rem;
}

.input-group {
    --bs-border-radius: 0.5rem;
}

.table {
    font-size: 0.9375rem;
    color: var(--bs-gray-700);
    margin-bottom: 0;

    th {
        font-weight: 700;
        vertical-align: middle;
    }

    th, td {
        padding-block: 0.5rem;
        padding-inline: 0.75rem;
    }

    tr > :first-child {
        padding-left: 1.5rem;
    }

    tr > :last-child {
        padding-right: 1.5rem;
    }

    thead th {
        font-weight: 500;
        color: var(--bs-gray-500);
    }

    thead tr, tbody tr {
        border-bottom: 0.5px solid var(--bs-gray-100);
    }

    tfoot th, tfoot td {
        border: none;
    }
}

.dt-bootstrap5 {
    overflow-x: scroll;
    overflow-y: clip;

    &:has(.dataTable.border) {
        border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
        border-radius: var(--bs-border-radius-lg);

        .dataTable.border {
            border: none !important;
        }
    }

    > .row:first-child {
        padding-top: 0.5rem;
        padding-inline: 1rem;
    }

    > .row:last-child {
        padding-bottom: 0.5rem;
        padding-inline: 1rem;
    }

    > :first-child:has(>div:not(:empty)) {
        margin-bottom: 0.5rem !important;
    }

    > .row:not(:last-child) {
        margin-top: 0 !important;
    }
}

.dt-bootstrap5:has(.noheader) > :first-child {
    display: none;
}

input[type=checkbox][role=switch] {
    cursor: pointer;
    transform: scale(140%);
}

input[type=checkbox]:not([role=switch]).form-check-input {
    padding: 0.75rem;
    cursor: pointer;
}

.card-header {
    --bs-card-cap-bg: white;
}