@import url("color.css");

.alerta-configuracion {
        margin: 0 50px 0 50px;
}

.alerta {
        border: 2px solid rgb(255, 255, 255);
        box-shadow: #3d3d3d 0px 0px 10px;
        border-radius: 5px;
        width: 90%;
        margin-top: 30%;
        height: 20%;
        z-index: 999;
        background-color: var(--color--terciario);
        color: var(--color--blanco);
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
}

.btn-close-alerta {
        position: absolute;
        top: 0;
        right: 0;
        background-color: #ff0000;
        font-size: 18px;
        border-radius: 50px;
        margin: 2px;
}

/* ANIMACION DE ICONOES */
/* icono de gira */
.girar {
        -webkit-animation: fa-spin 2s infinite linear !important;
        animation: fa-spin 2s infinite linear !important;
}

/* latido */
.fa-pulse {
        -webkit-animation: fa-spin 1s infinite steps(8);
        animation: fa-spin 1s infinite steps(8)
}

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

        100% {
                -webkit-transform: rotate(359deg);
                transform: rotate(359deg)
        }
}

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

        100% {
                -webkit-transform: rotate(359deg);
                transform: rotate(359deg)
        }
}

/* rebote */
.fa-bounce {
        animation: fa-bounce 1s infinite !important;
}

@keyframes fa-bounce {

        0%,
        20%,
        50%,
        80%,
        100% {
                transform: translateY(0);
        }

        40% {
                transform: translateY(-6px);
        }

        60% {
                transform: translateY(-4px);
        }
}

/* sacude */
.fa-shake {
        animation: fa-shake 1.5s infinite;
}

@keyframes fa-shake {

        0%,
        100% {
                transform: translateX(0);
        }

        10%,
        30%,
        50%,
        70%,
        90% {
                transform: translateX(-2px);
        }

        20%,
        40%,
        60%,
        80% {
                transform: translateX(4px);
        }
}

/* parpadeo */
.parpa {
        animation: blink 1s linear infinite;
}

@keyframes blink {
        0% {
                opacity: 0;
        }

        20% {
                opacity: 0.2;
        }

        40% {
                opacity: 0.4;
        }

        60% {
                opacity: 0.6;
        }

        80% {
                opacity: 0.8;
        }

        100% {
                opacity: 1;
        }
}

/* check */
.checkmark__circle {
        stroke-dasharray: 166;
        stroke-dashoffset: 166;
        stroke-width: 2;
        stroke-miterlimit: 10;
        stroke: #2ca7a7;
        fill: none;
        animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        stroke-width: 2;
        stroke: rgb(0, 0, 0);
        stroke-miterlimit: 10;
        box-shadow: inset 0px 0px 0px #353535;
        animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark__check {
        transform-origin: 50% 50%;
        stroke-dasharray: 48;
        stroke-dashoffset: 48;
        animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
        100% {
                stroke-dashoffset: 0;
        }
}

@keyframes scale {

        0%,
        100% {
                transform: none;
        }

        50% {
                transform: scale3d(1.1, 1.1, 1);
        }
}

@keyframes fill {
        100% {
                box-shadow: inset 0px 0px 0px 30px #ffffff;
        }
}

/*checkbox color y tamaño*/
input[type="checkbox"]+label {
        font-weight: bold;
        line-height: .5em;
        color: rgb(235, 2, 2);
        cursor: pointer;


}

input[type="checkbox"]:checked+label {
        color: #0fbf12;
}

input[type="checkbox"] {
        transform: scale(1.5);
        border: 1px solid rgb(255, 0, 0);
}

input[type="checkbox"]:checked {
        border: 1px solid rgb(53, 138, 41);
        background-color: rgb(53, 138, 41);
}

.checkbox-size {
        transform: scale(1.2);
        margin: 4px;
}

.checkbox-size:checked {
        transform: scale(1.2);
}

/*hacer zoom icon*/
@-webkit-keyframes hvr-icon-pulse {
        50% {
                -webkit-transform: scale(1.4);
                transform: scale(1.4);
        }

        50% {
                -webkit-transform: scale(0.9);
                transform: scale(0.9);
        }
}

@keyframes hvr-icon-pulse {
        50% {
                -webkit-transform: scale(1.4);
                transform: scale(1.4);
        }

        50% {
                -webkit-transform: scale(0.8);
                transform: scale(0.9);
        }
}

.hvr-icon-pulse {
        display: inline-block;
        vertical-align: middle;
        -webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hvr-icon-pulse .hvr-icon {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
}

.hvr-icon-pulse:hover .hvr-icon,
.hvr-icon-pulse:focus .hvr-icon,
.hvr-icon-pulse:active .hvr-icon {
        -webkit-animation-name: hvr-icon-pulse;
        animation-name: hvr-icon-pulse;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
}


/* btn flotante*/
.img-wsp {
        text-decoration: none;
        position: fixed;
        width: 100px;
        height: 40px;
        line-height: 40px;
        bottom: 25px;
        right: 25px;
        background: var(--color--segundario);
        color: var(--color--blanco);
        border-radius: 50px;
        text-align: center;
        font-size: 20px;
        box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3);
        z-index: 100;
        transition: all 300ms ease;
        display: flex;
        justify-content: center;
        align-items: center;
        animation: ripple 2s linear infinite;
}


.img-wsp:hover {
        background: var(--color--primario);
        color: var(--color--blanco);
        width: 110px;
        height: 50px;
        box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.3);

}

@keyframes ripple {
        0% {
                box-shadow: 0 0 0 .2rem rgb(145, 202, 216),
                        0 0 0 .1rem rgb(135, 245, 245),
                        0 0 0 .4rem rgb(97, 161, 161);
        }

        100% {
                box-shadow: 0 0 0 .2rem rgb(145, 202, 216),
                        0 0 0 .4rem rgba(130, 202, 216, 0.973),
                        0 0 0 .6rem rgb(154, 255, 247);
        }
}

@keyframes ripple {
        0% {
                box-shadow: 0 0 0 .2rem rgb(145, 202, 216),
                        0 0 0 .1rem rgb(135, 245, 245),
                        0 0 0 .4rem rgb(97, 161, 161);
        }

        100% {
                box-shadow: 0 0 0 .2rem rgb(145, 202, 216),
                        0 0 0 .4rem rgba(130, 202, 216, 0.973),
                        0 0 0 .6rem rgb(154, 255, 247);
        }
}

/* btn whatsapp*/
.wsp {
        position: fixed;
        width: 55px;
        height: 55px;
        line-height: 63px;
        bottom: 25px;
        right: 25px;
        background: #20B038;
        border-radius: 50px;
        text-align: center;
        font-size: 35px;
        box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3);
        z-index: 100;
        transition: all 300ms ease;
        display: flex;
        justify-content: center;
        align-items: center;
        animation: ripple 2s linear infinite;
}

.wsp:hover {
        background: #20B038;

}

@keyframes ripple {
        0% {
                box-shadow: 0 0 0 0 rgb(29, 146, 58),
                        0 0 0 .1rem rgba(0, 255, 0, 0.2),
                        0 0 0 .5rem rgba(0, 255, 13, 0.315);
        }

        100% {
                box-shadow: 0 0 0 .2rem rgba(72, 255, 0, 0.39),
                        0 0 0 .4rem rgba(55, 201, 19, 0.973),
                        0 0 0 .8rem rgba(4, 252, 78, 0.158);
        }
}

/* -BOTONES- */

.btn-pdf {
        background-color: #dc3545;
        color: #ffffff;
}

.btn-whatsapp {
        background-color: #00a884;
        color: #ffffff;
}

.btn-eye {
        background-color: #3b3d3d;
        color: #ffffff;
}

.btn-send {
        background-color: rgb(0, 218, 96);
        color: #ffffff;
}

.btn-off {
        background-color: rgba(78, 80, 79, 0.075);
        color: #303030;
}

.btn-off:hover {
        color: #303030;
        background-color: rgb(149, 122, 180);
}

/* BOTONES PARA MODAL */
/* ESTILO PARA BOTONES DEL MODAL */
/* CIRCULO */
.circulo {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 3em;
        width: 3em;
        border-radius: 50%;
        /* centrar icono */
        text-decoration: none;
        cursor: pointer;
}

.circulo:hover {
        transform: scale(1.1);
        color: #fff;
}

.btn-create {
        background-color: #7a7a7a;
        color: #ffffff;

}

.btn-create:hover {
        background-color: #00a884;
        color: #ffffff;
}


.btn-outline-create {
        color: var(--color--primario);
        border-color: var(--color--primario);
}

.btn-outline-create:hover {
        color: #fff;
        background-color: var(--color--primario);
        border-color: var(--color--primario);
}

.spinner-oculto {
        display: none;
        width: 15px;
        height: 15px
}

/* BOTONES PARA MODAL */
.btn_success {

        background-color: #666666;
        color: #ffffff;
}

/* hover */
.btn_success:hover {
        background-color: var(--color--terciario);
        color: #ffffff;
        /* texto necrita */
        font-weight: bold;
        /* scale */
        transform: scale(1.1);
}

.btn_siguiente {

        background-color: var(--color--terciario);
        color: #ffffff;
}

/* hover */
.btn_siguiente:hover {
        background-color: #666666;
        color: #ffffff;
        /* texto necrita */
        font-weight: bold;
        /* scale */
        transform: scale(1.05);
}

.btn_anterior {

        background-color: #F21667;
        color: #ffffff;
}

/* hover */
.btn_anterior:hover {
        background-color: #666666;
        color: #ffffff;
        /* texto necrita */
        font-weight: bold;
        /* scale */
        transform: scale(1.05);
}

/* adaptar para mobile */
@media (max-width: 768px) {
        .alerta {
                border: 2px solid rgb(255, 255, 255);
                box-shadow: #3d3d3d 0px 0px 10px;
                border-radius: 5px;
                width: 90%;
                margin: 50% 0 0 3%;
                height: 20%;
                z-index: 999;
                background-color: var(--color--terciario);
                color: var(--color--blanco);
                display: flex;
                justify-content: center;
                align-items: center;
                position: absolute;
        }
}

/* boton redondeado para model juego */
.border_redondeado {
        border-radius: 50px;
        border: 2px solid #5e5d5d;
        width: 95%;
        height: 20%;
}
/* hover */
.border_redondeado:hover {
        background-color: #666666;
        color: #ffffff;
        /* texto necrita */
        font-weight: bold;
        /* scale */
}

/* zomm */
.zoom_2{
        /* aumentar tamaño y volver */
        transform: scale(1.1);
        transition: transform 0.5s;
}
/* animar escalaar que */