:root {
    color-scheme: light dark;
}

a {
    color: white;
}

* {
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
    font-family: Inter, sans-serif;
    color: #DDDDDD;
}

body {
    height: 100vh;
    width: 100%;
    background: linear-gradient(to bottom right, #22262D, #1A1B21);

    .container {
        flex-direction: column;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0;
        height: max-content;

        h1 {
            text-align: center;
            margin-bottom: 25px;
            margin-top: 10px;
            max-width: 500px;
            font-family: 'Roboto', sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: 16px;
            line-height: 100%;
            letter-spacing: 0;
            color: #BBBBBB;
        }

        .privacy-link {
            text-align: center;
            font-family: 'Roboto', sans-serif;
            font-size: 11px;
            margin-top: 20px;
            font-weight: normal;
            color: #909090;
        }

        .help {
            max-width: 400px;
            width: 100%;
            margin-bottom: 30px;
        }

        .images {
            display: flex;
            height: 100px;
            align-items: center;
            justify-content: center;
            gap: 25px;
            margin-top: 72px;

            img {
                width: 230px;
                height: 115px;
                object-fit: contain;
                /* Mantiene proporciones del logo */
            }
        }

        form {
            /* border: 0.5px solid #555555;  */
            background: #212328;
            padding: 32px;
            border-radius: 25px;
            max-width: 380px;
            width: 100%;
            box-shadow: 10px 10px 35px 0px #00000040;

            .form-group {
                margin-bottom: 15px;

                label {
                    font-size: 14px;
                    font-family: 'Roboto', sans-serif;
                    display: block;
                    margin-bottom: 5px;
                }

                input,
                textarea,
                select {
                    font-family: 'Roboto', sans-serif;
                    font-size: 12px;
                    width: 100%;
                    max-width: 100%;
                    min-width: 100%;
                    padding: 10px 12px;
                    margin-top: 5px;
                    margin-bottom: 5px;
                    border: none;
                    border-radius: 3px;
                    transition: border-color 0.3s;
                    background-color: #212328;

                    &:focus {
                        border: #007bff;
                        outline: none;
                    }

                    &:placeholder {
                        color: #aaa;
                    }
                }

                textarea {
                    min-height: 100px;
                }

                .input-icon {
                    position: relative;
                    display: flex;
                    align-items: center;
                }

                img {
                    position: absolute;
                    left: 7px;
                    top: 14px;
                    opacity: 1;
                    pointer-events: none;
                    color: #909090;
                }

                .icon-email {
                    width: 16px;
                }

                .icon-password {
                    height: 20px;
                }

                input {
                    padding-left: 35px;
                    /* deja espacio para el ícono */
                    border: 1px solid #35373C;
                    border-radius: 5px;
                    transition: all 0.3s ease;
                }

                input:focus {
                    border: 1px solid #007bff;
                    /* Azul brillante */
                    background-color: #35373C;
                    outline: none;
                }
            }

            .checkbox-form-group {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .input-icon {
                    display: flex;
                    align-items: center;
                    gap: 8px;

                    input[type="checkbox"] {
                        width: 20px;
                        height: 20px;
                        cursor: pointer;
                        accent-color: #007bff;
                        appearance: none;
                        -webkit-appearance: none;

                        /* 🔹 Estilo personalizado */
                        border: 1px solid #35373C;
                        background-color: #212328;
                        border-radius: 5px;
                    }
                }

                label {
                    font-family: 'Roboto', sans-serif;
                    color: #DDDDDD;
                    font-size: 14px;
                    cursor: pointer;
                    user-select: none;
                }

                a {
                    color: #9FE2FB;
                    font-size: 12px;
                    text-decoration: none;
                    transition: 0.2s;

                    &:hover {
                        color: #007bff;
                        text-decoration: underline;
                    }
                }
            }
        }
    }

}

.submit-btn button {
    color: #DDDDDD;
    width: 100%;
    display: flex;
    justify-content: center;
}

.sign-up {

    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;

    label {
        color: #fff;
        margin-right: 5px;
    }

    a {
        text-align: center;
        color: #9FE2FB;
        transition: all ease .2s;

        &:hover {
            color: #007bff;
            text-decoration: underline;
        }
    }
}

#miTabla_wrapper {
    width: 95%;
}

.styled-table {
    margin-top: 50px;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 10px;
    width: 100% !important;
    background-color: #21222d;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);

    thead {
        th {
            color: #FFF;
            font-weight: bold;
            font-size: 14px;
        }

        tr {
            background-color: #232431;
            color: #FFF;
            font-weight: bold;
        }
    }

    th,
    td {
        padding: 12px 15px;
        text-align: left;
        color: #7a7a7a;
    }

    tbody {
        td {
            font-size: 14px;
        }

        tr:nth-of-type(even) {
            background-color: #232431;
        }

        button {
            font-size: 14px;
            padding: 10px;
            margin: 0;
        }
    }
}

button {
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    cursor: pointer;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    padding: 10px 12px;
    margin-top: 20px;
    border: none;
    background: #1D69CC;
    border-radius: 10px;
    box-sizing: border-box;
    transition: border-color 0.3s;
    border: 1px solid;
    border-color: #35373C;

    &:hover {
        border-color: #007bff;
    }

    &:disabled {
        cursor: not-allowed;
        background: #282931;
        border-color: #282931;
        color: #AAAAAA;

        &:hover {
            border-color: #282931;
        }
    }

}

.docusign-page {
    font-size: 16px;
    cursor: pointer;
    padding: 14.5px 12px;
    margin-top: 5px;
    border: none;
    background: #171821;
    border-radius: 5px;
    box-sizing: border-box;
    transition: border-color 0.3s;
    border: 1px solid #171821;

    &:hover {
        border-color: #007bff;
    }

    &.disabled {
        cursor: not-allowed;
        background: #282931;
        border-color: #282931;
        color: #AAAAAA;

        &:hover {
            border-color: #282931;
        }
    }

}

#alert-loading {
    border-radius: 5px;
    position: fixed;
    padding: 20px;
    background-color: #454653;
    right: 0%;
    top: 10px;
    transition: all ease .3s;
    transform: translateX(-10px);

    &.hidden {
        transform: translateX(calc(100% + 10px));
    }
}

#loading-card {
    border-radius: 5px;
    position: fixed;
    padding: 20px;
    background-color: #454653;
    right: 0%;
    bottom: 10px;
    transition: all ease .3s;

    &.show {
        transform: translateX(-10px);
    }

    &.hidden {
        transform: translateX(calc(100% + 10px));
    }

    .text-container {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;

        .spiner-loader {
            display: block;
            border: 3px solid #464646;
            /* Light grey */
            border-top: 3px solid #a9dfd8;
            /* Blue */
            border-radius: 50%;
            width: 20px;
            height: 20px;
            animation: spin 1s linear infinite;
        }

        .hidden {
            display: none;
        }

        .icon-check {
            color: #11EE22;
        }

        .icon-cross {
            color: #EE1122;
        }
    }

    .container-progress-bar {
        width: 100%;
        height: 20px;
        background-color: #232431;
        margin-top: 10px;
        border-radius: 5px;
        display: flex;
        justify-content: left;
        overflow: hidden;

        &.hidden {
            display: none;
        }

        .progress-bar {
            background-color: #77Acff99;
            border-radius: 5px;
            height: 100%;
            width: 0;
            transition: all ease .5s;
        }
    }
}

.foot-card {
    position: fixed;
    bottom: 10px;
    left: 10px;
    padding: 20px;
    background-color: #21222D;
    border-radius: 10px;
    display: grid;

    .ds-status {
        margin: auto;
        padding: 10px;
    }

    .button-docusign {
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: all ease .3s;
        border-radius: 5px;
        padding: 5px;

        &:hover {
            background-color: #FFFFFF15;
            transition: all ease .3s;
        }
    }

    .logout {
        padding: 10px;
        border-radius: 10px;
        display: grid;

        a {
            gap: 5px;
            display: flex;
            justify-content: center;
            align-items: center;

            &:hover {
                color: red;
                border-radius: 5px;

                svg {
                    stroke: red;
                }
            }
        }
    }
}

.remaining-slahs {
    cursor: pointer;
    position: fixed;
    display: flex;
    bottom: 20px;
    align-items: center;
    gap: 5px;
    left: 0px;
    background-color: #21222d;
    padding: 10px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    transition: all .5s ease;
    transform: translateX(calc(-100% + 30px));
    z-index: 1;

    &:hover {
        transform: translateX(0);
    }

    .arrow {
        color: #007bff;
        font-weight: bold;
        padding: 10px;
        display: block;
        width: 10px;
    }
}

.cancel {
    cursor: pointer;
}

.cancel svg {
    transition: stroke 0.3s ease;
}

.cancel:hover svg {
    stroke: red;
}

.back {
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px;
}

.back a {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #171821;
    gap: 3px;
    border: 1px solid #21222D;
    border-radius: 5px;
    padding: 5px;

    &:hover {
        border-color: #007bff;
    }
}

.foot-card-date {
    position: fixed;
    bottom: 10px;
    left: 10px;
    padding: 20px;
    background-color: #21222D;
    border-radius: 10px;
    display: grid;

    .ds-status {
        padding: 10px;
    }
}

.error-message {
    color: #EE1122;

    * {
        color: #EE1122;
    }
}

.success-message {
    color: #11EE22;

    * {
        color: #11EE22;
    }
}

.pach-download {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.panel {
    position: fixed;
    top: 10px;
    right: 10px;
    padding: 20px;
    background-color: #21222D;
    border-radius: 10px;
    display: grid;
    gap: 10px;

    a:hover svg {
        stroke: #007bff;
    }

    >a {
        cursor: pointer;
    }
}

.modal {
    overflow: scroll;
    max-height: 50vh;
    position: fixed;
    top: 20%;
    right: -550px;
    /* Oculto fuera de la pantalla */
    /* transform: translateY(-50%); */
    /* width: 500px; */
    /* background: rgb(255, 255, 255); */
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: right 0.5s ease-in-out;

    table {
        tbody {
            td {
                a {
                    cursor: pointer;
                }
            }
        }
    }

    .close-modal {
        cursor: pointer;
        position: absolute;
        top: 0;
        right: 0;
        padding: 3px;
    }

    .close-modal:hover svg {
        stroke: red;
    }
}

.modal.show {
    right: 20px;
    /* Se desplaza hacia la pantalla */
}

.styled-table-modal {
    margin-top: 0px !important;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 10px;
    /* width: 95%; */
    background-color: #21222d;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);

    thead {
        th {
            color: #FFF;
            font-weight: bold;
            font-size: 14px;
        }

        tr {
            background-color: #232431;
            color: #FFF;
            font-weight: bold;
        }
    }

    th,
    td {
        padding: 12px 15px;
        text-align: left;
        color: #7a7a7a;

        .download-modal:hover svg {
            stroke: green;
        }

        .cancel-modal:hover svg {
            stroke: red;
        }
    }

    tbody {
        td {
            font-size: 14px;
        }

        tr:nth-of-type(even) {
            background-color: #232431;
        }
    }
}

.dataTables_length select {
    background-color: #222;
    color: #fff;
    border: 1px solid #555;
    padding: 5px;
    border-radius: 5px;
}

.dataTables_length select option {
    background-color: #333;
    color: #fff;
}

/* Estilo general de los botones de paginación */
.dataTables_paginate .paginate_button {
    font-size: 16px !important;
    cursor: pointer !important;
    margin-top: 5px !important;
    border: none !important;
    background: #171821 !important;
    border-radius: 5px !important;
    box-sizing: border-box !important;
    transition: border-color 0.3s !important;
    border: 1px solid #171821 !important;
    color: white !important;
    /* Color del texto */
}

/* Efecto hover */
.dataTables_paginate .paginate_button:hover {
    border-color: #007bff !important;
    color: #007bff !important;
}

/* Botón activo */
.dataTables_paginate .paginate_button.current {
    background-color: #007bff !important;
    color: white !important;
    border-color: #007bff !important;
}

/* Desactivar botones "Anterior" y "Siguiente" cuando no hay más páginas */
.dataTables_paginate .paginate_button.disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    background: #171821 !important;
    border-color: #171821 !important;
    color: gray !important;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}