/* Importar y asignar el tipo de texto */
@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');
*{font-family: "Poppins" ,sans-serif;margin: 0;padding: 0;}
/* Inicializar variables generales */
:root{
    /* Tonos Blancos */
    --blanco_1 : #FFFFFF;
    --blanco_2 : #F5F5F9;
    --blanco_3 : #ececf0;
    /* Tonos Negros */
    --negro_1  : #191C23;
    --negro_2  : #23262F;
    --negro_3  : #2f3341;
    /* Tonos Azules */
    --azul_1   : #4988E7;
    --azul_2   : #b5cdf0;
    /* Tonos Rojos */
    --rojo_1   : #ed5555;
    --rojo_2   : #ed5555;
    /* Tonos Rojos */
    --rosa_1   : #c80378;
    --rosa_2   : #db60aa;
    --rosa_3   : #fce4ec;
    /* Tonos Morados */
    --morado_1 : #4B4EF8;
    --morado_2 : #696cff;
    /* Tonos Verdes */
    --verde_1  : #48b961;
    --verde_2  : #5fc575;
    /* Tonos Naranjas */
    --naranja_1: #e98a38;
    --naranja_2: #F0B27A;
    /* Tonos Amarillos */
    --amarillo_1:#cfad22;
    --amarillo_2:#F4D03F;
    /* Tema del diseño */
    --fondo_1 : #FFFFFF;
    --fondo_2 : #F5F5F9;
    --fondo_3 : #E2E7E8;
    --texto_1 : #252a35;
    --texto_2 : #4f5668;
    --texto_3 : #858aa1;
    --border : 1px solid rgba(0,0,0,0.15);
    --sombra : 0 0 10px rgba(0,0,0,0.05);
}
/* Etilos generales a elemtos HTML */
body{width: 100%;height: 100%;background: var(--fondo_2);position: absolute;overflow-y: scroll;display: flex;justify-content: center;}
img, embed {width: 100%;height: 100%;}
input[type="checkbox"],input[type="radio"],input[type="file"]{display: none;}
option{color: var(--texto_3);background: var(--inputs);}
input, select, button, textarea{outline: none;border: none;color: var(--texto_3);text-transform: uppercase;}
textarea{line-height: normal !important;padding-block: 10px;}
.titulo,.cuerpo,.codigo{text-transform: none !important;}
b{font-weight: 600;}
:disabled{opacity: 0.5 !important;cursor: not-allowed !important;}
.disabled{opacity: 0.5;cursor: not-allowed !important;}
.disabled:disabled{opacity: 1 !important;}
::placeholder{color: var(--texto_3);}
::-webkit-scrollbar{width: 10px;height: 10px;}
::-webkit-scrollbar-track{background: var(--fondo_1);}
::-webkit-scrollbar-thumb{background: var(--rosa_1);}
/* Color al texto */
.text_gris{color: var(--texto_3) !important;}
.text_rojo{color: var(--rojo_1) !important;}
.text_rosa{color: var(--rosa_1) !important;font-weight: 600 !important;}
.text_azul{color: var(--azul_1) !important;}
.text_verde{color: var(--verde_1) !important;}
.text_blanco{color: var(--blanco_1) !important;}
/* Colores de fondo */
.back_azul{background: var(--azul_1) !important;color: var(--blanco_1) !important;}
.back_rojo{background: var(--rojo_1) !important;color: var(--blanco_1) !important;}
.back_rosa{background: var(--rosa_1) !important;color: var(--blanco_1) !important;}
.back_morado{background: var(--morado_1) !important;color: var(--blanco_1) !important;}
.back_verde{background: var(--verde_1) !important;color: var(--blanco_1) !important;}
.back_naranja{background: var(--naranja_1) !important;color: var(--blanco_1) !important;}
.back_amarillo{background: var(--amarillo_1) !important;color: var(--blanco_1) !important;}
.back_gris{background: #566573 !important;color: var(--blanco_1) !important;}
.back_blanco{background: var(--blanco_1) !important;color: var(--texto_2) !important;}
.back_negro{background: var(--negro_2) !important;color: var(--blanco_1) !important;}
/* Agregar estilo a SweetAlert2 */
body.swal2-height-auto{height: 100% !important;}
.swal2-container{position: fixed;width: 100%;height: 100%;padding: 20px;}
.swal2-container.swal2-top-end{background: transparent !important;}
.swal2-toast{padding: 15px 15px 25px 15px !important;display: flex !important;align-items: center;border: var(--border);}
.swal2-toast .swal2-icon{margin-right: 15px !important;}
.swal2-toast .swal2-title{margin: 0 !important;border: none;font-size: 14px !important;}
.swal2-title{width: 100%;font-size: 14px;padding: 20px;border-bottom: var(--border);}
.swal2-html-container{width: calc(100% - 4  0px);margin: 0 20px !important;font-size: 14px !important;}
.swal2-actions{width: 100%;margin-top: 20px;justify-content: right;border-top: var(--border);}
.swal2-styled{margin: 20px;height: 30px;padding: 0 5px;font-size: 14px !important;}
.swal2-styled:nth-child(2n){margin-left: 0;}
.swal2-confirm{background: var(--rosa_1) !important;}
.swal2-confirm:focus{box-shadow: var(--sombra) !important;}
.swal2-imprimir{background: var(--rosa_1) !important;border-radius: .25em;color: white;margin-left: 0 !important;}
.swal2-imprimir:focus{box-shadow: var(--sombra) !important;}
.swal2-cancel{background: var(--negro_3) !important;}
.swal2-close{background: var(--rojo_1);color: var(--blanco_1);top: 20px;right: 20px;position: absolute;}
.swal2-close:focus{box-shadow: var(--sombra) !important;}
.swal2-icon{margin: 30px auto 20px;}
.swal2-timer-progress-bar{background: var(--rosa_1);height: 10px;}
.swal2-validation-message{font-size: 12px !important;}
.swal2-popup, .swal2-toast{color: var(--texto_2) !important;background: var(--fondo_1) !important;}
.swal2-popup{padding: 0;overflow: hidden;box-shadow: var(--sombra);}
.swal2-popup .swal2-title{font-weight: normal;}
.swal2-popup .swal2-close{width: 16px !important;height: 16px !important;font-size: 16px !important;top: 5px;right: 5px;}
div:where(.swal2-container) .swal2-html-container{padding: 0 !important;}
.cropper-container{z-index: 1;}
/* Clases generales */
.topi_0{margin-top: 0px !important;}
.topi_1{margin-top: 10px !important;}
.topi_2{margin-top: 20px !important;}
.righ_0{margin-right: 0px !important;}
.righ_1{margin-right: 10px !important;}
.righ_2{margin-right: 20px !important;}
.boto_0{margin-bottom: 0px !important;}
.boto_1{margin-bottom: 10px !important;}
.boto_2{margin-bottom: 20px !important;}
.text_righ{text-align: right !important;}
.text_cent{text-align: center !important;}
.text_left{text-align: left !important;}
.none{display: none !important;}
.resaltar b{font-weight: 800;}
/* Pantalla de carga */
.load{width: 100%;height: 100%;position: absolute;z-index: 99;display: flex;flex-direction: column;align-items: center;justify-content: center;background: var(--fondo_2);opacity: 1;}
.load.acti{opacity: 0;z-index: 0;display: none;}
.load_icon{
    width: 100px;
    height: 100px;
    border: 20px solid var(--rosa_1);
    border-bottom-color: var(--blanco_1);
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}
.load_text{font-size: 25px;color: var(--blanco_1);position: relative;margin-top: 20px;}
.load_text:before{content: '';animation: 5s print linear alternate infinite;color: var(--texto_2);}
.load_text:after{
    content: '';
    position: absolute;
    right: -4px;
    top: 50%;
    transform: translatey(-45%);
    width: 2px;
    height: 1.3em;
    background: currentColor;
    opacity: 0.8;
    animation: 1s blink steps(2) infinite;
}
@keyframes brinco {
    0%   {transform: translate();}
    100% {transform: rotate(360deg);}
}
@keyframes blink {
    0%   { visibility: hidden;}
    100% { visibility: visible;}
}
@keyframes print {
    0%   { content: 'CARGANDO...'}
    10%  { content: 'CARGANDO..'}
    20%  { content: 'CARGANDO.'}
    30%  { content: 'CARGANDO'}
    40%  { content: 'CARGAND'}
    50%  { content: 'CARGAN'}
    60%  { content: 'CARGA'}
    70%  { content: 'CARG'}
    80%  { content: 'CAR'}
    90%  { content: 'CA'}
    100% { content: 'C'}
}
@keyframes rotation {
    0%   {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
@media screen and (max-width: 700px){
    .load_icon{width: 100px;height: 100px;}
    .load_text{font-size: 20px;}
    .swal2-container{padding: 10px;}
}
@media screen and (max-width: 500px){
    .swal2-container{padding: 10px;}
}
@media print {
    body * {visibility: hidden;}
    #swal2-html-container * {visibility: visible;}
}