/* Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


/* Reset de estilos */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* Altura mínima del viewport */
html, body {
    height: 100%;
}
/* Lista de elementos que necesitan reset */
body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, pre, form, fieldset, input, textarea, blockquote {
    margin: 0;
    padding: 0;
}
/* Correcciones */
body {
    line-height: 1;
    font-family: 'Poppins', sans-serif;
}

ol, ul {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Evitar subrayados de enlaces */
a {
    text-decoration: none;
    color: inherit;
}

/* Estilos de imagen */
img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Formularios */
input, button, textarea, select {
    font-family: inherit;
    font-size: inherit;
}


/*************/

/* Estilos */

.d-block {
    display: block !important;
}

.d-none {
    display: none !important;
}

.login {
    background-color: #2E2933;
}

.wrapper {
    display: flex;
    flex-direction: row;
}

.login .wrapper section {
    width: 50%;
}

.login .wrapper .form {
    position: relative;
    padding: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

    .login .wrapper .form .center-form {
        min-width: 320px !important;
    }

        .login .wrapper .form .center-form .img-brand {
            margin: 0 auto;
            margin-bottom: 56px;
        }

        .login .wrapper .form .center-form .btn-google {
            min-width: 100%;
            padding: 8px 16px;
            font-size: 14px;
            border-radius: 6px;
            border: 0;
            background-color: #433E47;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #FFF;
            cursor: pointer;
        }

            .login .wrapper .form .center-form .btn-google img {
                margin-right: 10px;
            }

        .login .wrapper .form .center-form .hr-text {
            margin: 16px 0;
            position: relative;
            text-align: center;
        }

            .login .wrapper .form .center-form .hr-text::before {
                content: "";
                position: absolute;
                width: 100%;
                height: 1px;
                left: 0;
                top: 50%;
                background-color: #979499;
            }

            .login .wrapper .form .center-form .hr-text p {
                position: relative;
                max-width: fit-content;
                color: #979499;
                font-size: 12px;
                background-color: #2E2933;
                margin: 0 auto;
                padding: 0 16px;
                z-index: 1;
            }

/* Forms */

form .input-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
}

    form .input-group input {
        display: flex;
        height: 48px;
        padding: 8px 12px;
        align-items: center;
        gap: 8px;
        align-self: stretch;
        border-radius: 6px;
        border: 1px solid var(--Black-Light-black, #433E47);
        background: var(--Black-Dark-black, #252129);
        color: var(--Black-Dark-gray, #979499);
        /* P3 */
        font-family: 'Poppins', sans-serif;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px; /* 166.667% */
    }

    form .input-group label {
        color: var(--Black-White, #FFF);
        /* P2 */
        font-family: 'Poppins', sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px; /* 157.143% */
    }

/*******/

form .input-group-2 {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
    margin-top: 12px;
}

    form .input-group-2 input, form .input-group-2 .dropdown {
        position: relative;
        display: flex;
        height: 40px;
        padding: 8px 12px;
        align-items: center;
        gap: 8px;
        align-self: stretch;
        border-radius: 6px;
        border: 1px solid var(--Black-Gray, #D3D3D4);
        background: var(--Black-white, #FFF);
        color: var(--Black-Dark-gray, #2E2933);
        /* P3 */
        font-family: 'Poppins', sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px; /* 166.667% */
    }

        form .input-group-2 input:disabled, form .input-group-2 .dropdown.disabled {
            background-color: #F3F3F3;
            cursor: not-allowed;
            color: #979499;
        }

        form .input-group-2 input::placeholder {
            color: #979499;
        }

        form .input-group-2 .dropdown::before {
            content: "";
            cursor: pointer;
            width: 16px;
            height: 16px;
            background: url(../media/icons/Small\ Down.svg) no-repeat center;
            position: absolute;
            right: 16px;
            top: unset;
        }

    form .input-group-2 label {
        color: var(--Black-Black, #000);
        /* P2 */
        font-family: 'Poppins', sans-serif;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px; /* 157.143% */
    }

/******/

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -8px;
    margin-left: -8px;
}

.col {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 16px;
    padding-left: 16px;
}

/* Clases de columnas */
.col-1 {
    width: 8.33333%;
    padding-left: 8px;
    padding-right: 8px;
}

.col-2 {
    width: 16.66667%;
    padding-left: 8px;
    padding-right: 8px;
}

.col-3 {
    width: 25%;
    padding-left: 8px;
    padding-right: 8px;
}

.col-4 {
    width: 33.33333%;
    padding-left: 8px;
    padding-right: 8px;
}

.col-5 {
    width: 41.66667%;
    padding-left: 8px;
    padding-right: 8px;
}

.col-6 {
    width: 50%;
    padding-left: 8px;
    padding-right: 8px;
}

.col-7 {
    width: 58.33333%;
    padding-left: 8px;
    padding-right: 8px;
}

.col-8 {
    width: 66.66667%;
    padding-left: 8px;
    padding-right: 8px;
}

.col-9 {
    width: 75%;
    padding-left: 8px;
    padding-right: 8px;
}

.col-10 {
    width: 83.33333%;
    padding-left: 8px;
    padding-right: 8px;
}

.col-11 {
    width: 91.66667%;
    padding-left: 8px;
    padding-right: 8px;
}

.col-12 {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
}

/******/

form .submit-btn {
    display: flex;
    border: 0;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    min-width: 100%;
    align-self: stretch;
    border-radius: 6px;
    background: var(--Brand-Orange, #F09700);
    margin: 16px 0;
    color: var(--Black-White, #FFF);
    text-align: center;
    /* P2 */
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px; /* 157.143% */
    cursor: pointer;
}

/*********************/

.sidebar .wrapper .sidebar-nav {
    position: relative;
    padding: 24px 16px;
    width: 200px;
    height: 100vh;
    background: var(--Black-Black, #2E2933);
}

    .sidebar .wrapper .sidebar-nav.collapsed {
        padding: 24px 16px;
        width: 72px;
        height: 100vh;
        background: var(--Black-Black, #2E2933);
    }

    .sidebar .wrapper .sidebar-nav .img-brand-sidebar {
        height: 24px;
        margin-bottom: 24px;
    }

    .sidebar .wrapper .sidebar-nav.collapsed .img-brand-sidebar {
        width: 24px;
        height: 24px;
        object-fit: cover;
        object-position: left;
        margin: 0 auto 24px auto;
    }

    .sidebar .wrapper .sidebar-nav .sidebar-items {
        color: var(--Black-White, #FFF);
        /* P3 */
        font-family: 'Poppins', sans-serif;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px; /* 166.667% */
    }

        .sidebar .wrapper .sidebar-nav .sidebar-items .item-list {
            cursor: pointer;
            display: flex;
            height: 40px;
            padding: 8px;
            align-items: center;
            gap: 8px;
            align-self: stretch;
            box-shadow: 0px 4px 24px 0px rgba(51, 51, 51, 0.24);
            border-radius: 8px;
            margin-bottom: 16px;
        }

    .sidebar .wrapper .sidebar-nav.collapsed .sidebar-items .item-list a {
        display: none;
    }

    .sidebar .wrapper .sidebar-nav .sidebar-items .item-list.active, .sidebar .wrapper .sidebar-nav .sidebar-items .item-list.active:hover {
        border: 1px solid var(--Brand-Blue, #61708F);
        background: var(--Brand-DegradadeBlue, linear-gradient(90deg, #363E4F 0%, #8CA2CF 100%));
    }

    .sidebar .wrapper .sidebar-nav .sidebar-items .item-list:hover {
        background: var(--Black-Dark-black, #252129);
        box-shadow: 0px 4px 24px 0px rgba(51, 51, 51, 0.24);
    }

.logout-section {
    cursor: pointer;
    position: absolute;
    display: flex;
    flex-direction: row;
    align-items: center;
    bottom: 24px;
    left: 16px;
    width: calc(100% - 32px);
    padding: 8px 16px;
    border-top: 1px solid #363E4F;
}

.sidebar .wrapper .sidebar-nav.collapsed .logout-section {
    padding: 8px 0;
}

    .sidebar .wrapper .sidebar-nav.collapsed .logout-section a {
        display: none;
    }

    .sidebar .wrapper .sidebar-nav.collapsed .logout-section span {
        margin: 0 auto;
    }

.logout-section .btn-logout {
    color: var(--Brand-Orange, #F09700);
    /* P3 */
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 166.667% */
    border: 0;
    min-width: 100%;
    padding: 8px;
    text-align: left;
    background: none;
}

.ic-db, .ic-man, .ic-con, .ic-para, .ic-log {
    display: block;
    max-width: 24px;
    max-height: 24px;
    min-width: 24px;
    min-height: 24px;
    margin-right: 8px;
}

.ic-db {
    background: url(../media/icons/List.svg) no-repeat center;
}

.ic-man {
    background: url(../media/icons/Spanner.svg) no-repeat center;
}

.ic-con {
    background: url(../media/icons/Convenio.svg) no-repeat center;
}

.ic-para {
    background: url(../media/icons/Filter.svg) no-repeat center;
}

.ic-log {
    background: url(../media/icons/Logout.svg) no-repeat center;
}

/***************/

.sidebar .wrapper .content {
    width: 100%;
    height: 100vh;
    background: var(--Black-Light-gray, #F3F3F3);
    overflow: scroll;
}

    .sidebar .wrapper .content .main-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 24px;
        position: sticky;
        position: -webkit-sticky;
        top: 0; /* required */
        width: 100%;
        background: var(--Black-Light-gray, #F3F3F3);
        z-index: 2;
    }

        .sidebar .wrapper .content .main-header .main-title {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            color: var(--Brand-Blue, #61708F);
            /* H4 B */
            font-family: 'Poppins', sans-serif;
            font-size: 24px;
            font-style: normal;
            font-weight: 600;
            line-height: 32px; /* 133.333% */
        }

    .sidebar .wrapper .content .tabs {
        padding: 0px 24px 0 24px !important ;
    }

.btn-add {
    display: flex;
    cursor: pointer;
    height: 40px;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 6px;
    border: 0;
    color: #FFF;
    background: var(--Brand-Orange, #F09700);
}

    .btn-add:disabled {
        background-color: #D3D3D4;
        cursor: not-allowed;
    }

.ic-back-title {
    display: inline-block;
    cursor: pointer;
    width: 24px;
    height: 24px;
    margin-right: 8px;
    background: url(../media/icons/back-arrow.svg) no-repeat center;
}

.sidebar .wrapper .content .tabs .list-tab {
    display: flex;
    flex-direction: row;
}

    .sidebar .wrapper .content .tabs .list-tab .list-item {
        display: flex;
        cursor: pointer;
        padding: 16px;
        align-items: center;
        gap: 4px;
        border-radius: 8px 8px 0px 0px;
    }

        .sidebar .wrapper .content .tabs .list-tab .list-item.active {
            border-radius: 8px 8px 0px 0px;
            border-bottom: 4px solid var(--Brand-Light-orange, #F2B449);
            background: var(--Black-White, #FFF);
            box-shadow: 0px 0px 16px 0px rgba(51, 51, 51, 0.08);
        }

        .sidebar .wrapper .content .tabs .list-tab .list-item .icon {
            width: 20px;
            height: 20px;
            display: block;
        }

.ic-cli {
    background: url(../media/icons/Navigation/User\ 01.svg) no-repeat center;
}

.ic-cond {
    background: url(../media/icons/Navigation/con\ 2.svg) no-repeat center;
}

.ic-pro {
    background: url(../media/icons/Navigation/veh\ 5.svg) no-repeat center;
}

.ic-veh {
    background: url(../media/icons/Navigation/pro\ 4.svg) no-repeat center;
}

.ic-ina {
    background: url(../media/icons/ina.svg) no-repeat center;
}

/**/

.sidebar .wrapper .content .tabs .list-tab .list-item.active .ic-cli {
    background: url(../media/icons/Navigation/User\ 01-yel.svg) no-repeat center;
}

.sidebar .wrapper .content .tabs .list-tab .list-item.active .ic-cond {
    background: url(../media/icons/Navigation/Con\ 2-yel.svg) no-repeat center;
}

.sidebar .wrapper .content .tabs .list-tab .list-item.active .ic-pro {
    background: url(../media/icons/Navigation/veh\ 5-yel.svg) no-repeat center;
}

.sidebar .wrapper .content .tabs .list-tab .list-item.active .ic-veh {
    background: url(../media/icons/Navigation/pro\ 4-yel.svg) no-repeat center;
}

.sidebar .wrapper .content .tabs .list-tab .list-item.active .ic-ina {
    background: url(../media/icons/ina-yel.svg) no-repeat center;
}

.table-search {
    background-color: #FFF;
}

    .table-search .search-section {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 16px 24px;
    }

    .table-search table {
        min-width: 100%;
        text-align: left;
    }

.input-search {
    display: flex;
    justify-content: flex-start;
}

    .input-search input {
        display: flex;
        padding: 8px 10px;
        align-items: center;
        flex: 1 0 0;
        height: 40px;
        align-self: stretch;
        border-radius: 8px 0px 0px 8px;
        border: 1px solid var(--Black-Gray, #D3D3D4);
        background: var(--Black-White, #FFF);
    }

    .input-search button {
        cursor: pointer;
        display: flex;
        height: 40px;
        width: 40px;
        padding: 0px 8px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        border-radius: 0px 6px 6px 0px;
        border: 0;
        background-color: var(--Brand-Blue, #61708F);
        background-image: url(../media/icons/Search.svg);
        background-repeat: no-repeat;
        background-position: center;
    }

.btn-deny {
    position: relative;
    cursor: pointer;
    display: flex;
    height: 40px;
    width: 40px;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: 1px solid var(--Black-Light-gray, #F3F3F3);
    background: var(--Black-White, #FFF);
    background-image: url(../media/icons/ina-red.svg);
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0px 0px 4px 0px rgba(51, 51, 51, 0.04);
}

.search-section .btn-deny:disabled {
    cursor: not-allowed;
    background-image: url(../media/icons/ina-disabled.svg);
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0px 0px 4px 0px rgba(51, 51, 51, 0.04);
}


/* Estilos Tabla */

table, thead, tr, th, tbody, td {
    border: 1px solid #F3F3F3;
}

th, td {
    padding: 16px 20px;
}

.number-row {
    position: relative;
    color: var(--Black-Gray-Font, #6D6970);
    /* P4 */
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 180% */
    border-top: 1px solid var(--Black-White, #FFF) !important;
    background: var(--Black-Light-gray, #F3F3F3);
}

    .number-row::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 1px;
        left: 0;
        bottom: 0;
        background-color: #FFF;
    }

thead > tr > th {
    position: relative;
}

tbody > tr:hover {
    background-color: #F3F3F3;
}

.icon-order {
    cursor: pointer;
    position: absolute;
    right: 16px;
    top: unset;
    width: 16px;
    height: 16px;
    background: url(../media/icons/Ordenar.svg) no-repeat center;
}

/* Modal */

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgb(37, 33, 41, 0.5);
    z-index: 3;
}

    .modal .modal-content {
        background-color: #FFF;
        border-radius: 8px;
        max-width: 480px;
        margin: 15% auto;
        transition: transform .3s ease-out,-webkit-transform .3s ease-out;
        transform: translate(0, -25%);
    }


        .modal .modal-content .modal-header {
            display: flex;
            flex-direction: row;
            align-items: center;
            height: 82px;
            width: 100%;
            padding: 21px 24px;
            position: relative;
        }

            .modal .modal-content .modal-header .ic-modal {
                width: 40px;
                height: 40px;
                background-color: #F3F3F3;
                background-repeat: no-repeat;
                background-position: center;
                border-radius: 100%;
                margin-right: 8px;
            }

                .modal .modal-content .modal-header .ic-modal.logout {
                    background-image: url(../media/icons/Logout-blue.svg);
                }

                .modal .modal-content .modal-header .ic-modal.trash {
                    background-image: url(../media/icons/Trash.svg);
                }

            .modal .modal-content .modal-header h3 {
                font-weight: 400;
                font-size: 14px;
            }

            .modal .modal-content .modal-header::before {
                content: "";
                height: 1px;
                width: calc(100% - 48px);
                position: absolute;
                left: 24px;
                bottom: 5px;
                background-color: #F3F3F3;
            }

        .modal .modal-content .modal-body {
            padding: 16px 24px;
        }

            .modal .modal-content .modal-body p {
                font-weight: 400;
                font-size: 12px;
                color: #6D6970;
            }

        .modal .modal-content .modal-footer {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            background: #F3F3F3;
            padding: 16px 24px;
            border-radius: 0 0 8px 8px;
        }

            .modal .modal-content .modal-footer button {
                cursor: pointer;
                width: 97px;
                height: 40px;
                padding: 8px, 16px, 8px, 16px;
                border-radius: 6px;
                gap: 10px;
                padding: 9px 16px;
                /*P2*/
                font-family: 'Poppins', sans-serif;
                font-size: 14px;
                font-weight: 400;
                line-height: 22px;
                letter-spacing: 0em;
                text-align: center;
                border: 0;
                margin-left: 8px;
            }

.btn-cerrar-modal {
    background-color: #FFF;
}

.btn-modal {
    background: #61708F;
    color: #FFF;
}

/* tooltip */

.tooltiptext {
    visibility: hidden;
    background-color: #555;
    color: #fff;
    text-align: center;
    font-size: 10px;
    border-radius: 6px;
    padding: 8px;
    position: absolute;
    z-index: 1;
    top: 125%;
    right: -30%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

    .tooltiptext::after {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
        transform: rotate(180deg);
    }

.btn-deny:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* Cuerpo principal */

.body-content {
    background-color: #FFF;
    padding: 24px;
}

.card-form {
    background: #FFF;
    box-shadow: 0px 0px 16px 0px rgba(51,51,51,0.08);
    border-radius: 8px;
    border: 1px solid #F3F3F3;
    margin-bottom: 16px;
}

    .card-form .card-header {
        padding: 16px 24px;
        border-bottom: 1px solid #F3F3F3;
    }

        .card-form .card-header p {
            font-size: 14px;
            font-weight: 600;
        }

    .card-form .card-body {
        padding: 16px 24px;
    }

.action-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
}

    .action-buttons > * {
        margin-left: 8px;
    }

.link-upload {
    display: block;
    text-decoration: underline;
    color: #F09700;
    font-size: 14px;
    margin: 8px 0;
}

    .link-upload.disabled {
        cursor: not-allowed;
        color: #979499;
    }

/* Input File */

.input-file {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
    margin-top: 12px;
}

    .input-file .custom-file {
        position: relative;
        border: 1px solid #D3D3D4;
        border-radius: 6px;
        background-color: #F3F3F3;
        height: 40px;
    }

        .input-file .custom-file .custom-file-input {
            opacity: 0;
        }

    .input-file .span-label {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: var(--Black-Black, #000);
        /* P2 */
        font-family: 'Poppins', sans-serif;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px; /* 157.143% */
    }

        .input-file .span-label span {
            color: #979499;
        }

    .input-file .custom-file.uploaded .custom-file-label {
        color: #252129;
    }

    .input-file .custom-file-label {
        position: absolute;
        left: 12px;
        bottom: 12px;
        pointer-events: none;
        color: #979499;
        font-size: 14px;
    }

    .input-file .ic-fileInput {
        width: 22px;
        height: 22px;
        position: absolute;
        right: 16px;
        top: 6px;
        pointer-events: none;
        background: url(../media/icons/Upload.svg) no-repeat center;
    }

/******/

.file-table {
    width: 100%;
    border-radius: 6px;
    border: 1px solid #F3F3F3;
}


    .file-table table {
        width: 100%;
        text-align: left;
        font-size: 12px;
    }

        .file-table table thead {
            border-radius: 6px;
            box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.08);
            font-weight: 400;
        }

            .file-table table thead tr th:nth-child(2) {
                border-right: none;
            }

            .file-table table thead tr th:nth-child(3) {
                border-left: none;
            }

        .file-table table tbody tr td {
            border-left: none;
            border-right: none;
        }

.buttons-table {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

    .buttons-table button {
        width: 40px;
        height: 40px;
        border: 0;
        margin-right: 8px;
        cursor: pointer;
    }

    .buttons-table .ic-download {
        background: url(../media/icons/btn-Navigation/Download.svg) no-repeat center;
    }

    .buttons-table .ic-delete {
        background: url(../media/icons/btn-Navigation/Trash.svg) no-repeat center;
    }