/* Definir una variable CSS para el color */
:root {
    /*    --color-fondo: rgb(31,97,141);
    --color-tabla: rgb(74,127,180);
    --color-modal: rgb(74,127,180);*/

    --color-fondo: #0c9547;
    --color-tabla: #0c9547;
    --color-modal: #0c9547;
    --color-negro: #0f581f;
    /*   --color-negro: #131516;*/

    --background-color: rgb(12,151,69);
    --background-gradient: linear-gradient(180deg, rgba(12,151,69,1) 12%, rgba(12,151,83,1) 33%, rgba(12,151,87,1) 52%, rgba(12,151,99,1) 75%, rgba(12,151,103,1) 91%);
    --background-gradient02:  linear-gradient(180deg, rgba(10,120,55,1) 12%, rgba(10,120,70,1) 33%, rgba(10,120,75,1) 52%, rgba(10,120,85,1) 75%, rgba(10,120,90,1) 91%);
}

.border_menu {
    border: 1px solid #ffff01; /* Cambia #000 al color que prefieras */
    border-radius: 5px; /* Opcional: agrega bordes redondeados si lo deseas */
}


.color_verde_solido {
    background-color: #147a36 !important;
}

.FondoDegradago01 {
    background: var(--background-color);
    background: var(--background-gradient);
   
}

FondoDegradado02 {
    background: var(--background-color);
    background: var( --background-gradient02);
}


encadebazado_tabla

.FondoDegradago02 {
    background: rgb(13,150,40);
    background: linear-gradient(180deg, rgba(13,150,40,1) 0%, rgba(13,150,72,1) 25%, rgba(13,150,104,1) 55%, rgba(13,150,136,1) 87%);
}

.color_titulo {
    /*  color: var(--color-modal);*/
    /* color: var(--color-negro);*/
    color: #064e3b;
}

.color_negro{
    background-color: var(--color-negro);
}

.encadebazado_tabla {
    background-color: var(--color-negro);
    color: white;
}

.fondo_modal {
    outline: 2px solid #0c9547;
    border-radius: 10px;
}

.fondo_secundario {
    outline: 2px solid var(--color-fondo); /* Cambia 'red' al color que desees */
    border-radius: 2px;
}

.recuadro_tabla {
    border: 2px solid red;
   
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.tipografia {
    font-family: Montserrat; /* Establece la fuente que desees */
    font-size: 10px; /* Tamaño de la fuente */
    color:white;
    font-weight: bold;
}

.btnDisabled {
    /*text-transform: uppercase;*/
    font-size: 14px;
    font-family: inherit;
    background: #737373;
    color: white;
    padding: 0.7em 1em;
    padding-left: 0.9em;
    display: flex;
    align-items: center;
    border: none;
    border-radius: 16px;
    overflow: hidden;

    cursor: pointer;
}



/**/

.btnEditar {

    font-size: 14px;
    font-family: inherit;
    background: var(--color-fondo);
    color: white;
    padding: 0.7em 1em;
    padding-left: 0.9em;
    display: flex;
    align-items: center;
    border: none;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.2s;
    cursor: pointer;
}

    .btnEditar span {
        display: block;
        margin-left: 0.3em;
        transition: all 0.3s ease-in-out;
    }

    .btnEditar svg {
        display: block;
        transform-origin: center center;
        transition: transform 0.3s ease-in-out;
    }

    .btnEditar:hover .svg-wrapper {
        animation: fly-1 0.6s ease-in-out infinite alternate;
    }

    .btnEditar:hover svg {
        transform: translateX(1.2em) rotate(45deg) scale(1.1);
    }

    .btnEditar:hover span {
        transform: translateX(5em);
    }

    .btnEditar:active {
        transform: scale(0.95);
    }


.btnEliminar {
    /*text-transform: uppercase;*/
    font-size: 14px;
    font-family: inherit;
    background: #d6675d;
    color: white;
    padding: 0.7em 1em;
    padding-left: 0.9em;
    display: flex;
    align-items: center;
    border: none;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.2s;
    cursor: pointer;
}

    .btnEliminar span {
        display: block;
        margin-left: 0.3em;
        transition: all 0.3s ease-in-out;
    }

    .btnEliminar svg {
        display: block;
        transform-origin: center center;
        transition: transform 0.3s ease-in-out;
    }

    .btnEliminar:hover .svg-wrapper {
        animation: fly-1 0.6s ease-in-out infinite alternate;
    }

    .btnEliminar:hover svg {
        transform: translateX(1.2em) rotate(45deg) scale(1.1);
    }

    .btnEliminar:hover span {
        transform: translateX(5em);
    }

    .btnEliminar:active {
        transform: scale(0.95);
    }

.btnReset {
    /*text-transform: uppercase;*/
    font-size: 14px;
    font-family: inherit;
    background: #60a5fa;
    color: white;
    padding: 0.7em 1em;
    padding-left: 0.9em;
    display: flex;
    align-items: center;
    border: none;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.2s;
    cursor: pointer;
}

    .btnReset span {
        display: block;
        margin-left: 0.3em;
        transition: all 0.3s ease-in-out;
    }

    .btnReset svg {
        display: block;
        transform-origin: center center;
        transition: transform 0.3s ease-in-out;
    }

    .btnReset:hover .svg-wrapper {
        animation: fly-1 0.6s ease-in-out infinite alternate;
    }

    .btnReset:hover svg {
        transform: translateX(1.2em) rotate(45deg) scale(1.1);
    }

    .btnReset:hover span {
        transform: translateX(5em);
    }

    .btnReset:active {
        transform: scale(0.95);
    }

@keyframes fly-1 {
    from {
        transform: translateY(0.1em);
    }

    to {
        transform: translateY(-0.1em);
    }
}

.card {
    width: 240px;
    height: 50px;
    background: rgb(82, 190, 128 );
    position: relative;
    display: flex;
    place-content: center;
    place-items: center;
    overflow: hidden;
    border-radius: 20px;
}

.card h4 {
  z-index: 1;
  color: white;
  font-size: 1.4em;
}

    .card::before {
        content: '';
        position: absolute;
        width: 230px;
        background-image: linear-gradient(180deg, #FBFBEF, #F4FA58);
        height: 190%;
        animation: rotBGimg 3s linear infinite;
        transition: all 0.2s linear;
    }

@keyframes rotBGimg {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.card::after {
    content: '';
    position: absolute;
    background: rgb(82, 190, 128 );
    inset: 5px;
    border-radius: 15px;
}

.button02 {
    --color: #2471A3;
    padding: 0.4em 1em;
    background-color: transparent;
    border-radius: .3em;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: .5s;
    font-weight: 200;
    font-size: 17px;
    border: 1px solid;
    font-family: inherit;
    /*   text-transform: uppercase; */
    color: var(--color);
    z-index: 1;
}

    .button02::before, .button02::after {
        content: '';
        display: block;
        width: 50px;
        height: 50px;
        transform: translate(-50%, -50%);
        position: absolute;
        border-radius: 50%;
        z-index: -1;
        background-color: var(--color);
        transition: 1s ease;
    }

    .button02::before {
        top: -1em;
        left: -1em;
    }

    .button02::after {
        left: calc(100% + 1em);
        top: calc(100% + 1em);
    }

    .button02:hover::before, .button02:hover::after {
        height: 410px;
        width: 410px;
    }

    .button02:hover {
        color: white;
    }

    .button02:active {
        filter: brightness(.8);
    }

.shadow__btn02 {
    padding: 10px 20px;
    border: none;
    font-size: 17px;
    color: #fff;
    border-radius: 7px;
    letter-spacing: 0px;
    font-weight: 700;
    /*      text-transform: uppercase; */
    transition: 0.5s;
    transition-property: box-shadow;
}

.shadow__btn02 {
    background: red;
    box-shadow: 0 0 25px red;
}

    .shadow__btn02:hover {
        box-shadow: 0 0 5px red, 0 0 25px red, 0 0 50px red, 0 0 100px red;
    }
/*/////*/
.button {
    --color: #E74C3C;
    padding: 0.4em 1em;
    background-color: transparent;
    border-radius: .3em;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: .5s;
    font-weight: 200;
    font-size: 17px;
    border: 1px solid;
    font-family: inherit;
    /*   text-transform: uppercase; */
    color: var(--color);
    z-index: 1;
}

    .button::before, .button::after {
        content: '';
        display: block;
        width: 50px;
        height: 50px;
        transform: translate(-50%, -50%);
        position: absolute;
        border-radius: 50%;
        z-index: -1;
        background-color: var(--color);
        transition: 1s ease;
    }

    .button::before {
        top: -1em;
        left: -1em;
    }

    .button::after {
        left: calc(100% + 1em);
        top: calc(100% + 1em);
    }

    .button:hover::before, .button:hover::after {
        height: 410px;
        width: 410px;
    }

    .button:hover {
        color: white;
    }

    .button:active {
        filter: brightness(.8);
    }

.shadow__btn02 {
    padding: 10px 20px;
    border: none;
    font-size: 17px;
    color: #fff;
    border-radius: 7px;
    letter-spacing: 0px;
    font-weight: 700;
    /*      text-transform: uppercase; */
    transition: 0.5s;
    transition-property: box-shadow;
}

.shadow__btn02 {
    background: red;
    box-shadow: 0 0 25px red;
}

    .shadow__btn02:hover {
        box-shadow: 0 0 5px red, 0 0 25px red, 0 0 50px red, 0 0 100px red;
    }

/*/////*/
.shadow__btn02 {
    padding: 10px 20px;
    border: none;
    font-size: 17px;
    color: #fff;
    border-radius: 7px;
    letter-spacing: 0px;
    font-weight: 700;
    /*      text-transform: uppercase; */
    transition: 0.5s;
    transition-property: box-shadow;
}

.shadow__btn {
    background: rgb(0,140,255);
    box-shadow: 0 0 25px rgb(0,140,255);
}

    .shadow__btn:hover {
        box-shadow: 0 0 5px rgb(0,140,255), 0 0 25px rgb(0,140,255), 0 0 50px rgb(0,140,255), 0 0 100px rgb(0,140,255);
    }

/******/
button {
    font-family: inherit;
    font-size: 20px;
    background: royalblue;
    color: white;
    padding: 0.7em 1em;
    padding-left: 0.9em;
    display: flex;
    align-items: center;
    border: none;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.2s;
    cursor: pointer;
}

    button span {
        display: block;
        margin-left: 0.3em;
        transition: all 0.3s ease-in-out;
    }

    button svg {
        display: block;
        transform-origin: center center;
        transition: transform 0.3s ease-in-out;
    }

    button:hover .svg-wrapper {
        animation: fly-1 0.6s ease-in-out infinite alternate;
    }

    button:hover svg {
        transform: translateX(1.2em) rotate(45deg) scale(1.1);
    }

    button:hover span {
        transform: translateX(5em);
    }

    button:active {
        transform: scale(0.95);
    }



/* ======= */
.select_persona {
    color: white;
    background-color: var(--color-modal);
    font-size: 16px;
    font-weight: 550;
    box-shadow: 0 0 0 1px white;
    text-transform: uppercase;
    font-size: 13px;
}

    .select_persona:hover,
    .select_persona:focus {
        box-shadow: 0 0 0 1px white !important;

    }


.modal-ancho-personalizado .modal-dialog {
    max-width: 95%; /* Puedes ajustar el porcentaje según tus necesidades */
    margin: 1.75rem auto;
}

.formField {
    margin: 16px 0px 16px 0px !important;
    position: relative !important;
}

.formField input {
    /*padding: 10px 5px !important;*/
    padding:2% 8% 2%  !important;
    border: none;
    border-radius: 5px;
    background-color:var(--color-modal);
    color: white;
    font-size: 15px;
    font-weight: 450;
    transition: 0.3s ease-in-out;
    box-shadow: 0 0 0 4px white;
    
}

    .formField input:hover,
    .formField input:focus {
        box-shadow: 0 0 0 2px #d1bf00;
    }

.formField label {
    position: absolute;
    left: 0;
    top: 0;
    padding: 8px 15px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    text-shadow: -1px -1px 0 transparent, 1px -1px 0 transparent, -1px 1px 0 transparent, 1px 1px 0 transparent;
    transition: 0.3s ease-in-out;
    pointer-events: none;
}

.formField input:focus + label,
.formField input:valid + label {
    transform: translateY(-32px) translateX(-5px) scale(0.95);
    transition: 0.3s ease-in-out;
}


/**Especial para TextArea*/
.formFieldArea {
    margin: 16px 0px 16px 0px !important;
    position: relative !important;
}

    .formFieldArea input {
        /*padding: 10px 5px !important;*/
        padding: 2% 2% 2% !important;
        border: none;
        border-radius: 5px;
        background-color: white;
        color: white;
        font-size: 15px;
        font-weight: 450;
        transition: 0.3s ease-in-out;
        box-shadow: 0 0 0 4px white;
    }

        .formFieldArea input:hover,
        .formFieldArea input:focus {
            box-shadow: 0 0 0 2px white;
        }

    .formFieldArea label {
        position: absolute;
        left: 0;
        top: 0;
        padding: 8px 15px;
        color: white;
        font-size: 16px;
        font-weight: 600;
        text-shadow: -1px -1px 0 transparent, 1px -1px 0 transparent, -1px 1px 0 transparent, 1px 1px 0 transparent;
        transition: 0.3s ease-in-out;
        pointer-events: none;
    }

    .formFieldArea input:focus + label,
    .formFieldArea input:valid + label {
        transform: translateY(-32px) translateX(-5px) scale(0.95);
        transition: 0.3s ease-in-out;
    }

.animated-button {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 9px 36px;
    border: 4px solid;
    border-color: transparent;
    font-size: 16px;
    background-color: var(--color-negro);
    border-radius: 50px;
    font-weight: 600;
    color: white;
    box-shadow: 0 0 0 2px #ffff01;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

    .animated-button svg {
        position: absolute;
        width: 24px;
        fill: white;
        z-index: 9;
        transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .animated-button .arr-1 {
        right: 16px;
    }

    .animated-button .arr-2 {
        left: -25%;
    }

    .animated-button .circle {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 20px;
        height: 20px;
        background-color: var(--color-negro);
        border-radius: 50%;
        opacity: 0;
        transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .animated-button .text {
        text-transform: uppercase;
        font-size: 13px;
        position: relative;
        z-index: 1;
        transform: translateX(-12px);
        transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .animated-button:hover {
        box-shadow: 0 0 0 12px transparent;
        /*   color: #212121; */
        color:white;
        border-radius: 12px;
    }

        .animated-button:hover .arr-1 {
            right: -25%;
        }

        .animated-button:hover .arr-2 {
            left: 8px;
        }

        .animated-button:hover .text {
            transform: translateX(12px);
        }

        .animated-button:hover svg {
            /*   fill: #212121; */
            fill: white;
        }

    .animated-button:active {
        scale: 0.95;
        box-shadow: 0 0 0 4px rgb(82, 190, 128 );
    }

    .animated-button:hover .circle {
        width: 220px;
        height: 220px;
        opacity: 1;
    }

.color_fondo {
    /*  background-color: #000000 ;*/
    background-color: var(--color-fondo);
}

/*Estilo para Scroll de todo el sitio*/

*::-webkit-scrollbar {
    width: 8px; /* width of the entire scrollbar */
}

*::-webkit-scrollbar-track {
    background: var(#FFFFFF); /* color of the tracking area */
}

*::-webkit-scrollbar-thumb {
    background-color: var(--color-negro); /* color of the scroll thumb */
    border-radius: 5px; /* roundness of the scroll thumb */
    /*border: 2px solid white;  creates padding around scroll thumb */
}



.menu {
    display: flex;
  
}
.menu a span:first-child {
    display: inline-block;
    padding: 10px;
}
    .menu a {
        display: block;
        position: relative;
        overflow: hidden;
    }

        .menu a span:last-child {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            transform: translateY(-100%);
        }
        .menu a span {
            transition: transform 0.2s ease-out;
        }

        .menu a:hover span:first-child {
            transform: translateY(100%);
        }

        .menu a:hover span:last-child {
            transform: none;
        }
    .menu[data-animation="to-top"] a span:last-child {
        transform: translateY(100%);
    }

    .menu[data-animation="to-top"] a:hover span:first-child {
        transform: translateY(-100%);
    }

.container, header {
    font-family: Verdana;
    font-family: 'PT Sans';
}

.letras {
    font-family: Verdana;
    font-family: 'PT Sans';
    font-size: 17px;
 /*   text-transform: uppercase;*/
}

div.dt-container .dt-input {
    border: 1px solid #aaa;
    border-radius: 3px;
    padding: 5px;
    background-color: red;
    color: inherit;
}

/* Estilo para el select del DataTasble.Net*/
/*div.dt-container .dt-input {
    border: 1px solid #aaa;
    border-radius: 3px;
    padding: 5px;
    background-color: #3d3d3d !important;
    color: inherit;
}*/

.socail-media {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    gap: 20px;
    list-style: none;
}

    .socail-media li a {
        width: 50px;
        height: 50px;
        background-color: var(--color-negro);
        display: flex;
        overflow: hidden;
        align-items: center;
        align-content: center;
        justify-content: center;
        position: relative;
        z-index: 9;
        border: 1px solid white;
        border-radius:10px;
    }

        .socail-media li a svg {
            width: 24px;
            height: 24px;
            -o-object-fit: contain;
            object-fit: contain;
            color:white;
/*            filter: invert(100%) sepia(0%) saturate(7455%) hue-rotate(57deg) brightness(108%) contrast(105%);*/
        }

        .socail-media li a::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-clip-path: polygon(0 0, 100% 0, 0 0, 0 100%);
            clip-path: polygon(0 0, 100% 0, 0 0, 0 100%);
            background-color: var(--color-modal);
            z-index: -1;
            top: 0;
            left: 0;
            opacity: 0;
        }

        .socail-media li a:hover::after {
            animation: sideClip 0.5s linear;
            -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            opacity: 1;
        }

        .socail-media li a:hover svg {
            animation: fadeInLeft 0.3s linear both;
            color: #fefe00;
            /*filter: invert(52%) sepia(85%) saturate(2286%) hue-rotate(54deg) brightness(92%) contrast(84%);*/
        }

@keyframes sideClip {
    0% {
        clip-path: polygon(0 0, 100% 0, 0 0, 0 100%);
    }

    50% {
        clip-path: polygon(0 0, 100% 0, 0 100%, 0 100%);
    }

    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.color_modal {
    background-color: var(--color-tabla);
}

.custom-select {
    color: white !important;
}

.custom-select::after {
    content: '';
    color: white;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    border: solid #000;
    border-width: 0 1px 1px 0;
    padding: 3px;
    pointer-events: none;
    display: inline-block;
    width: 6px;
    height: 6px;
    transform: rotate(45deg);
}

.navbar-toggler {
    color: white !important;
    background-color: #3d3d3d !important;
}

.hover08 figure img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.hover08 figure:hover img {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}
.crecer :hover {
    -webkit-transform: scale(1.10);
    -moz-transform: scale(1.10);
    -ms-transform: scale(1.10);
    -o-transform: scale(1.10);
    transform: scale(1.10);
  /*  background-color: var(--color-negro);*/
    border-radius: 10px;
}

.centrar_cuerpo {
    margin-top: 3% !important;
    margin-bottom: 3% !important;
}

.form-check-input:checked {
    background-color: #d1bf00 !important;
    border-color: var(--color-fondo) !important;
}

.row>*{

}

.mensaje_error{
    margin-top:2px;
    margin-bottom:2px;
}


.sombra {
    -webkit-box-shadow: 17px 21px 14px -3px rgba(0,0,0,0.68);
    -moz-box-shadow: 17px 21px 14px -3px rgba(0,0,0,0.68);
    box-shadow: 17px 21px 14px -3px rgba(0,0,0,0.68);
}



.formFieldOtro {
    margin: 16px 0px 16px 0px !important;
    position: relative !important;
}

    .formFieldOtro input {
        /*padding: 10px 5px !important;*/
        padding: 2% 8% 2% !important;
        border-radius: 2px;
        outline: 1px solid var(--color-fondo);
        background-color: #f6faf1;
        color: black;
        font-size: 15px;
        font-weight: 450;
        transition: 0.3s ease-in-out;
        box-shadow: 0 0 0 4px white;
    }

        .formFieldOtro input:hover,
        .formFieldOtro input:focus {
            box-shadow: 0 0 0 2px white;
        }

    .formFieldOtro label {
        position: absolute;
        left: 0;
        top: 0;
        padding: 8px 15px;
        color: black;
        font-size: 16px;
        font-weight: 600;
        text-shadow: -1px -1px 0 transparent, 1px -1px 0 transparent, -1px 1px 0 transparent, 1px 1px 0 transparent;
        transition: 0.3s ease-in-out;
        pointer-events: none;
    }

    .formFieldOtro input:focus + label,
    .formFieldOtro input:valid + label {
        transform: translateY(-32px) translateX(-5px) scale(0.95);
        transition: 0.3s ease-in-out;
    }


.select_personaOtro {
    color: black;
    background-color: #f6faf1;
    font-size: 16px;
    font-weight: 550;
    box-shadow: 0 0 0 4px white;
    outline: 1px solid var(--color-fondo);
}

    .select_personaOtro:hover,
    .select_personaOtro:focus {
        box-shadow: 0 0 0 2px white !important;
    }




/***********************----Luego del 20 de mayo----**************************/
/* Input container */
/*.input-container {
    position: relative;
    margin: 20px;
}*/

/* Input field */
/*.input-field {
    display: block;
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: none;
    border-bottom: 2px solid var(--color-modal);
    outline: none;
    background-color: transparent;
}*/

/* Input label */
/*.input-label {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 16px;
    color: var(--color-modal);
    pointer-events: none;
    transition: all 0.3s ease;
}*/

/* Input highlight */
/*.input-highlight {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 0;
    background-color: var(--color-negro);
    transition: all 0.3s ease;
}*/

/* Input field:focus styles */
/*.input-field:focus + .input-label {
    top: -20px;
    font-size: 12px;
    color: var(--color-negro);
}

    .input-field:focus + .input-label + .input-highlight {
        width: 100%;
    }*/
/* Input container */
.input-container {
    position: relative;
    margin: 20px;
}

/* Input field */
.input-field {
    display: block;
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: none;
    border-bottom: 2px solid white;
    outline: none;
    background-color: transparent;
}

/* Input label */
.input-label {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 16px;
    color: white;
    pointer-events: none;
    transition: all 0.3s ease;
}

/* Input highlight */
.input-highlight {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 0;
    background-color: white;
    transition: all 0.3s ease;
}

/* Input field:focus styles */
.input-field:focus + .input-label,
.input-field:not(:placeholder-shown) + .input-label {
    top: -20px;
    font-size: 12px;
    color: white;
}

    .input-field:focus + .input-label + .input-highlight {
        width: 100%;
    }

    /* To ensure the label remains up when the input has value */
    .input-field:not(:placeholder-shown) + .input-label + .input-highlight {
        width: 100%;
    }


/* Switch starts here */
.rocker {
    display: inline-block;
    position: relative;
    /*
  SIZE OF SWITCH
  ==============
  All sizes are in em - therefore
  changing the font-size here
  will change the size of the switch.
  See .rocker-small below as example.
  */
    font-size: 2em;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    color: #888;
    width: 7em;
    height: 4em;
    overflow: hidden;
    border-bottom: 0.5em solid #eee;
}

.rocker-small {
    font-size: 0.75em;
    /* Sizes the switch */
    margin: 1em;
}

.rocker::before {
    content: "";
    position: absolute;
    top: 0.5em;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #999;
    border: 0.5em solid #eee;
    border-bottom: 0;
}

.rocker input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-left,
.switch-right {
    cursor: pointer;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.5em;
    width: 3em;
    transition: 0.2s;
    user-select: none;
}

.switch-left {
    height: 2.4em;
    width: 2.75em;
    left: 0.85em;
    bottom: 0.4em;
    background-color: #ddd;
    transform: rotate(15deg) skewX(15deg);
}

.switch-right {
    right: 0.5em;
    bottom: 0;
    background-color: #bd5757;
    color: #fff;
}

    .switch-left::before,
    .switch-right::before {
        content: "";
        position: absolute;
        width: 0.4em;
        height: 2.45em;
        bottom: -0.45em;
        background-color: #ccc;
        transform: skewY(-65deg);
    }

.switch-left::before {
    left: -0.4em;
}

.switch-right::before {
    right: -0.375em;
    background-color: transparent;
    transform: skewY(65deg);
}

input:checked + .switch-left {
    background-color: #0084d0;
    color: #fff;
    bottom: 0px;
    left: 0.5em;
    height: 2.5em;
    width: 3em;
    transform: rotate(0deg) skewX(0deg);
}

    input:checked + .switch-left::before {
        background-color: transparent;
        width: 3.0833em;
    }

    input:checked + .switch-left + .switch-right {
        background-color: #ddd;
        color: #888;
        bottom: 0.4em;
        right: 0.8em;
        height: 2.4em;
        width: 2.75em;
        transform: rotate(-15deg) skewX(-15deg);
    }

        input:checked + .switch-left + .switch-right::before {
            background-color: #ccc;
        }

/* Keyboard Users */
input:focus + .switch-left {
    color: #333;
}

input:checked:focus + .switch-left {
    color: #fff;
}

input:focus + .switch-left + .switch-right {
    color: #fff;
}

input:checked:focus + .switch-left + .switch-right {
    color: #333;
}
.cta {
    position: relative;
    margin: auto;
    padding: 12px 18px;
    transition: all 0.2s ease;
    border: none;
    background: none;
    cursor: pointer;
}

    .cta:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        border-radius: 50px;
        background: #b1dae7;
        width: 45px;
        height: 45px;
        transition: all 0.3s ease;
    }

    .cta span {
        position: relative;
        font-family: "Ubuntu", sans-serif;
        font-size: 18px;
        font-weight: 700;
        letter-spacing: 0.05em;
        color: #234567;
    }

    .cta svg {
        position: relative;
        top: 0;
        margin-left: 10px;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke: #234567;
        stroke-width: 2;
        transform: translateX(-5px);
        transition: all 0.3s ease;
    }

    .cta:hover:before {
        width: 100%;
        background: #b1dae7;
    }

    .cta:hover svg {
        transform: translateX(0);
    }

    .cta:active {
        transform: scale(0.95);
    }
.Estilo_registro_usuario {
    font-weight: bold;
/*    color: #414740 !important;*/
    font-size: 18px;
}

.border-Menu {
    border-bottom: 2px solid #ffff01; /* Puedes ajustar el color y grosor del borde según sea necesario */
    padding-bottom: 10px; /* Opcional: añade padding si deseas espacio adicional debajo del borde */
}

.border-Footer {
    border-top: 2px solid #ffff01; /* Puedes ajustar el color y grosor del borde según sea necesario */
    padding-top: 10px; /* Opcional: añade padding si deseas espacio adicional debajo del borde */
}

.zoombraLogo {
    filter: drop-shadow(4px 7px 20px #0f581f);
}





.container002 {
    height: 250px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    perspective: 500px;
}

.logo002 {
    width: 256px;
    height: 100%;
    /*  background: url(../img/Logo_Bayan.png);*/
    background: url(../img/Logo_Bayan_Old.png);
    background-position: center;
    background-size: cover;
    position: absolute;
    top: -10px;
    filter: drop-shadow(0px 5px 10px #0f581f);
    animation: rotar 7s linear infinite;
}

    .logo002:hover {
        cursor: pointer;
    }

@keyframes rotar {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(-360deg);
    }
}

.bottom_part {
    width: 20rem;
    height: 20rem;
    position: absolute;
    bottom: -94px;
    background: #242424;
    border-radius: 50%;
    box-shadow: inset 0px 0px 10px 10px #11111136;
    transform: rotateX(90deg);
    display: flex;
    justify-content: center;
    align-items: center;
}

    .bottom_part::before {
        content: "";
        width: 16rem;
        height: 16rem;
        position: absolute;
        bottom: 5rem;
        background: #ff0000;
        border-radius: 50%;
        box-shadow: inset 0px 0px 10px 10px #11111136;
        filter: blur(30px);
        animation: Animate 1s linear infinite;
    }

@keyframes Animate {
    from {
        width: 16rem;
        height: 16rem;
    }

    50% {
        width: 12rem;
        height: 12rem;
    }

    to {
        width: 16rem;
        height: 16rem;
    }
}

.oculto {
    display: none;
}


/* From Uiverse.io by tranquoclong */
.inputGroup {
   /* font-family: 'Segoe UI', sans-serif;*/
    margin: 1em 0 1em 0;
   /* max-width: 190px;*/
    position: relative;
}

    .inputGroup input {
        font-size: 100%;
        padding: 0.8em;
        outline: none;
        border: 2px solid rgb(255, 255, 255);
        background-color: transparent;
        border-radius: 20px;
        width: 100%;
    }

    .inputGroup label {
        font-size: 100%;
        position: absolute;
        left: 0;
        padding: 0.8em;
        margin-left: 0.5em;
        pointer-events: none;
        transition: all 0.3s ease;
        color: rgb(255, 255, 255);
    }

    .inputGroup :is(input:focus, input:valid) ~ label {
        transform: translateY(-50%) scale(.9);
        margin: 0em;
        margin-left: 1.3em;
        padding: 0.4em;
        background-color: #0c9547;
    }

    .inputGroup :is(input:focus, input:valid) {
        border-color: rgb(255, 255, 255);
    }

/* Ajusta la altura del cuadro de selección */
.select2-container--default .select2-selection--single {
    height: 38px !important; /* Cambia la altura según tus necesidades */
    display: flex !important;
    align-items: center !important; /* Centra el contenido verticalmente */

}

    /* Ajusta el tamaño del texto dentro del select para que se vea mejor */
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: normal !important; /* Asegura que el texto no esté comprimido */
        font-size: 15px; /* Ajusta el tamaño del texto según sea necesario */

    }

/* Ajusta la altura de las opciones del menú desplegable si es necesario */
.select2-container--default .select2-results__option {
    padding: 0px !important; /* Ajusta el padding para las opciones del dropdown */
    color: black;
    background-color: #e7f9e9;
}

.color_requeridos{
    color:yellow;
}


.select2-dropdown {
    pointer-events: auto !important;
}


@font-face {
    font-family: 'Isidora Black';
    src: url('../fonts/Isidora-Black.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.tipografia_bayan{
    font-family: 'Isidora Black';
}
/*Codigo param nuevo login*/
/* From Uiverse.io by zanina-yassine */
.form_container {
    width: fit-content;
    height: fit-content;
    margin-left: 7%;
    margin-right: 7%;
  
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 50px 40px 20px 40px;
    background-color: #ffffff;
    box-shadow: 0px 106px 42px rgba(0, 0, 0, 0.01), 0px 59px 36px rgba(0, 0, 0, 0.05), 0px 26px 26px rgba(0, 0, 0, 0.09), 0px 7px 15px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
    border-radius: 11px;
    font-family: "Inter", sans-serif;
}

.logo_container {
    box-sizing: border-box;
    width: 150px;
    height: 150px;
    background: linear-gradient(180deg, rgba(248, 248, 248, 0) 50%, #F8F8F888 100%);
    border: 1px solid #F7F7F8;
    filter: drop-shadow(0px 0.5px 0.5px #EFEFEF) drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
    border-radius: 11px;
    background-color: var(--color-modal);
}

.title_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #212121;
}

.subtitle {
    font-size: 0.725rem;
    max-width: 80%;
    text-align: center;
    line-height: 1.1rem;
    color: #8B8E98
}

.input_container {
    width: 100%;
    height: fit-content;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.icon {
    width: 20px;
    position: absolute;
    z-index: 99;
    left: 12px;
    bottom: 9px;
}

.input_label {
    font-size: 0.75rem;
    color: #8B8E98;
    font-weight: 600;
}

.input_field {
    width: auto;
    height: 40px;
    padding: 0 0 0 40px;
    border-radius: 7px;
    outline: none;
    border: 1px solid #e5e5e5;
    filter: drop-shadow(0px 1px 0px #efefef) drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
    transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
}

    .input_field:focus {
        border: 1px solid transparent;
        box-shadow: 0px 0px 0px 2px #242424;
        background-color: transparent;
    }

.sign-in_btn {
    width: 100%;
    height: 40px;
    border: 0;
    background: var(--color-modal);
    border-radius: 7px;
    outline: none;
    color: #ffffff;
    cursor: pointer;
}

.sign-in_ggl {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #ffffff;
    border-radius: 7px;
    outline: none;
    color: #242424;
    border: 1px solid #e5e5e5;
    filter: drop-shadow(0px 1px 0px #efefef) drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
    cursor: pointer;
}

.sign-in_apl {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #212121;
    border-radius: 7px;
    outline: none;
    color: #ffffff;
    border: 1px solid #e5e5e5;
    filter: drop-shadow(0px 1px 0px #efefef) drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
    cursor: pointer;
}

.separator {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    color: #8B8E98;
}

    .separator .line {
        display: block;
        width: 100%;
        height: 1px;
        border: 0;
        background-color: #e8e8e8;
    }

.note {
    font-size: 0.75rem;
    color: #8B8E98;
    text-decoration: underline;
}

/*Funcion param hacer palpitar una imagen*/
@keyframes palpitar {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes destello {
    0% {
        opacity: 0;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.5); /* El destello crece */
    }

    100% {
        opacity: 0;
        transform: scale(2); /* El destello desaparece al final */
    }
}

.palpitar {
    position: relative;
    z-index: 1;
    animation: palpitar 1s infinite ease-in-out;
    height: 160px;
    width: 160px;
}

    .palpitar::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 160px; /* El ancho del destello es igual al de la imagen */
        height: 160px; /* El alto del destello es igual al de la imagen */
        background-color: rgba(0, 255, 0, 0.5); /* Color verde con transparencia */
        border-radius: 50%; /* Hace que el destello sea circular */
        transform: translate(-50%, -50%) scale(1);
        z-index: -1;
        animation: destello 1s infinite ease-in-out;
    }

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

.btnImprimir {
    font-size: 14px;
    font-family: inherit;
    background: #3bbee5;
    color: white;
    padding: 0.7em 1em;
    padding-left: 0.9em;
    display: flex;
    align-items: center;
    border: none;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.2s;
    cursor: pointer;
}

    .btnImprimir span {
        display: block;
        margin-left: 0.3em;
        transition: all 0.3s ease-in-out;
    }

.btnImprimir svg {
    display: block;
    transform-origin: center center;
    transition: transform 0.3s ease-in-out;
}

.btnImprimir:hover .svg-wrapper {
    animation: fly-1 0.6s ease-in-out infinite alternate;
}

.btnImprimir:hover svg {
    transform: translateX(1.2em) rotate(45deg) scale(1.1);
}

.btnImprimir:hover span {
    transform: translateX(5em);
}

.btnImprimir:active {
    transform: scale(0.95);
}


#loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
}

.spinner-border {
    width: 3rem;
    height: 3rem;
}


/* Loader Overlay */
#loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8); /* Fondo semitransparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Asegura que esté encima de todo */
    visibility: hidden;  
}

/* Loader Animation */
#page {
    display: flex;
    justify-content: center;
    align-items: center;
}

#container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

#h3 {
    color: rgb(82, 79, 79);
    margin-top: 200px;
    font-size: 1.5rem;
}

#ring {
    width: 190px;
    height: 190px;
    border: 1px solid transparent;
    border-radius: 50%;
    position: absolute;
}

    #ring:nth-child(1) {
        border-bottom: 8px solid #c3c30a;
        animation: rotate1 2s linear infinite;
    }

@keyframes rotate1 {
    from {
        transform: rotateX(50deg) rotateZ(110deg);
    }

    to {
        transform: rotateX(50deg) rotateZ(470deg);
    }
}

#ring:nth-child(2) {
    border-bottom: 8px solid #52be80;
    animation: rotate2 2s linear infinite;
}

@keyframes rotate2 {
    from {
        transform: rotateX(20deg) rotateY(50deg) rotateZ(20deg);
    }

    to {
        transform: rotateX(20deg) rotateY(50deg) rotateZ(380deg);
    }
}

#ring:nth-child(3) {
    border-bottom: 8px solid #0f581f;
    animation: rotate3 2s linear infinite;
}

@keyframes rotate3 {
    from {
        transform: rotateX(40deg) rotateY(130deg) rotateZ(450deg);
    }

    to {
        transform: rotateX(40deg) rotateY(130deg) rotateZ(90deg);
    }
}

#ring:nth-child(4) {
    border-bottom: 8px solid #fae40d;
    animation: rotate4 2s linear infinite;
}

@keyframes rotate4 {
    from {
        transform: rotateX(70deg) rotateZ(270deg);
    }

    to {
        transform: rotateX(70deg) rotateZ(630deg);
    }
}

/* Estilos para la imagen en el centro */
#loader-image {
    position: absolute;
    width: 100px; /* Ajusta el tamaño de la imagen */
    height: 100px;
    z-index: 10; /* Asegura que la imagen esté sobre los anillos */
    object-fit: contain;
}

/*input {
    text-transform: uppercase;
}*/


.border-div {
    border: 2px solid #000; /* Grosor de 2px, color negro */
    border-radius: 5px; /* Esquinas redondeadas */
    padding: 10px; /* Espaciado interno */
    margin: 10px; /* Espaciado externo */
}

.border-div_02 {
    border: 2px solid white; /* Grosor de 2px, color negro */
    border-radius: 5px; /* Esquinas redondeadas */
    padding: 10px; /* Espaciado interno */
    margin: 10px; /* Espaciado externo */
}


/* para quitar las flechas del input*/
/* Aplica solo a inputs con la clase .no-spinner */

.no-spinner::-webkit-inner-spin-button,
.no-spinner::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.no-spinner {
    -moz-appearance: textfield;
}

/*Mayuscylas en todos los Input*/
input[type="text"] {
    text-transform: uppercase;
}

/*Clase para hacer mas anchos los modales de Sweet Alert*/
.swal-wide {
    width: 700px !important; /* Puedes ajustar a 800px, 900px, etc. */
    max-width: 90%;
}