/* 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.4em 1em;
    padding-left: 0.4em;
    display: flex;
    align-items: center;
    border: none;
    border-radius: 5px;
    overflow: hidden;

    cursor: pointer;
}



/**/

.btnEditar {

    font-size: 14px;
    font-family: inherit;
    background: var(--color-fondo);
    color: white;
    padding: 0.2em 1em;
    padding-left: 0.4em;
    display: flex;
    align-items: center;
    border: none;
    border-radius: 5px;
    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.2em 1em;
    padding-left: 0.4em;
    display: flex;
    align-items: center;
    border: none;
    border-radius: 5px;
    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.4em 1em;
    padding-left: 0.4em;
    display: flex;
    align-items: center;
    border: none;
    border-radius: 4px;
    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: 5px 36px;
    border: 1px 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.4em 1em;
    padding-left: 0.4em;
    display: flex;
    align-items: center;
    border: none;
    border-radius: 4px;
    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%;
}


.page-item.active .page-link {
    background-color: #0d6efd; /* azul por defecto */
    border-color: #0d6efd;
}


/* Cambiar color de fondo y borde de la página activa */
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
    background-color: #198754 !important; /* verde Bootstrap */
    border-color: #198754 !important;
    color: white !important;
}

/* Cambiar color del texto de los links */
.dataTables_wrapper .dataTables_paginate .page-link {
    color: #198754 !important; /* texto verde */
}

/*  Cambiar color al pasar el mouse */
.dataTables_wrapper .dataTables_paginate .page-link:hover {
    background-color: #157347 !important; /* verde más oscuro */
    color: white !important;
}



/*Estilos compactos para tablas*/
/* =====================================================
   ESTILO INSTITUCIONAL UNCSM - TABLA VERDE COMPACTA
   Aplica agregando la clase: class="table tabla-verde-uncsm"
   ===================================================== */

.tabla-verde-uncsm {
    width: 100%;
    background-color: #f8f9f8;
    border-collapse: collapse;
    font-size: 13px;
}

    /* Encabezado */
    .tabla-verde-uncsm thead th {
        background-color: #155724; /* verde institucional oscuro */
        color: #ffffff;
        font-weight: 600;
        text-align: center;
        vertical-align: middle;
        padding: 6px 8px;
        border: 1px solid #0f3d2e;
    }

    /* Celdas del cuerpo */
    .tabla-verde-uncsm tbody td {
        padding: 4px 6px;
        border: 1px solid #c7dec7;
        color: #000;
        background-color: #eef7ee;
        vertical-align: middle;
        text-align: center;
    }

    /* Filas alternas */
    .tabla-verde-uncsm tbody tr:nth-child(even) {
        background-color: #e3f1e3;
    }

    /* Hover */
    .tabla-verde-uncsm tbody tr:hover {
        background-color: #d2ebd2;
    }

    /* Bordes finos */
    .tabla-verde-uncsm th,
    .tabla-verde-uncsm td {
        border-width: 1px !important;
    }

/* Paginación (DataTables + Bootstrap) */
.dataTables_wrapper .dataTables_paginate .page-item .page-link {
    padding: 3px 8px !important;
    font-size: 13px;
    color: #198754 !important;
}

.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
    background-color: #198754 !important;
    border-color: #198754 !important;
    color: white !important;
}

/* Ajustes de márgenes */
div.dataTables_wrapper {
    margin-top: 0 !important;
}

/* Botones dentro de las celdas */
.tabla-verde-uncsm button {
    padding: 3px 8px;
    font-size: 12px;
    border-radius: 4px;
}

/* Texto y alineación */
.tabla-verde-uncsm td {
    line-height: 1.2;
}

/* Opcional: sombra ligera */
.tabla-verde-uncsm {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}


/* CSS MÍNIMO REQUERIDO */
.filters th {
    padding: 3px 5px !important; /* Ajusta el relleno */
}

.dataTables_scrollHeadInner table {
    width: 100% !important; /* Asegura el ancho del encabezado */
}

/* CSS de ejemplo para hacer los bordes blancos/claros, si están ocultos */
.table-bordered {
    border-color: #ffffff !important; /* Bordes blancos */
}

/* CSS que debes añadir a tu archivo de estilos principal */
.div-scroll-vertical {
    max-height: 70vh; /* Altura máxima del 70% del viewport */
    overflow-y: auto; /* Permite el scroll vertical si es necesario */
}


/* CSS que debes incluir para mejorar la presentación */

/* 1. Centrar todo el contenido de la tabla */
#Tabla_ReporteTutores th,
#Tabla_ReporteTutores td {
    text-align: center !important; /* Fuerza el centrado en todas las celdas */
    vertical-align: middle; /* Centrado vertical */
    /* Usamos !important solo si hay estilos de Bootstrap que lo impidan */
}

    /* 2. Compactar la fila de filtros (reducir el relleno) */
    #Tabla_ReporteTutores th.filters {
        padding-top: 3px !important; /* Reduce el relleno superior del input */
        padding-bottom: 3px !important; /* Reduce el relleno inferior del input */
        vertical-align: top;
    }

/* 3. Asegurar que los inputs de búsqueda sean compactos */
.filters input.form-control-sm {
    height: 25px; /* Altura fija pequeña para los inputs */
    padding: 0.2rem 0.5rem; /* Ajuste del padding interno del input */
}


/* Clase base para asegurar la compactación y alineación */
.tabla-ajustada th,
.tabla-ajustada td {
    white-space: nowrap; /* Fuerza todo el texto a una sola línea */
    padding: 0.3rem !important; /* Reduce el relleno aún más para compactar */
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
}

    /* 1. Ajustar Ancho Mínimo para las Columnas de Texto Largo */
    .tabla-ajustada th:nth-child(2), /* Nombre del Centro */
    .tabla-ajustada th:nth-child(6) { /* Nombre del Tutor */
        min-width: 150px; /* Ancho mínimo para nombres largos */
        width: 150px;
    }


.filters input {
    text-transform: none !important; /* Muestra el texto tal como lo genera JS */
}

    .filters input::placeholder {
        text-transform: capitalize; /* Convierte el texto del placeholder a Mayúscula Inicial */
    }


.continue-application {
    --color: #fff;
    --background: #404660;
    --background-hover: #3A4059;
    --background-left: #2B3044;
    --folder: #F3E9CB;
    --folder-inner: #BEB393;
    --paper: #FFFFFF;
    --paper-lines: #BBC1E1;
    --paper-behind: #E1E6F9;
    --pencil-cap: #fff;
    --pencil-top: #275EFE;
    --pencil-middle: #fff;
    --pencil-bottom: #5C86FF;
    --shadow: rgba(13, 15, 25, .2);
    border: none;
    outline: none;
    cursor: pointer;
    position: relative;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;
    line-height: 19px;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    padding: 17px 29px 17px 69px;
    transition: background 0.3s;
    color: var(--color);
    background: var(--bg, var(--background));
}

    .continue-application > div {
        top: 0;
        left: 0;
        bottom: 0;
        width: 53px;
        position: absolute;
        overflow: hidden;
        border-radius: 5px 0 0 5px;
        background: var(--background-left);
    }

        .continue-application > div .folder {
            width: 23px;
            height: 27px;
            position: absolute;
            left: 15px;
            top: 13px;
        }

            .continue-application > div .folder .top {
                left: 0;
                top: 0;
                z-index: 2;
                position: absolute;
                transform: translateX(var(--fx, 0));
                transition: transform 0.4s ease var(--fd, 0.3s);
            }

                .continue-application > div .folder .top svg {
                    width: 24px;
                    height: 27px;
                    display: block;
                    fill: var(--folder);
                    transform-origin: 0 50%;
                    transition: transform 0.3s ease var(--fds, 0.45s);
                    transform: perspective(120px) rotateY(var(--fr, 0deg));
                }

            .continue-application > div .folder:before, .continue-application > div .folder:after,
            .continue-application > div .folder .paper {
                content: "";
                position: absolute;
                left: var(--l, 0);
                top: var(--t, 0);
                width: var(--w, 100%);
                height: var(--h, 100%);
                border-radius: 1px;
                background: var(--b, var(--folder-inner));
            }

            .continue-application > div .folder:before {
                box-shadow: 0 1.5px 3px var(--shadow), 0 2.5px 5px var(--shadow), 0 3.5px 7px var(--shadow);
                transform: translateX(var(--fx, 0));
                transition: transform 0.4s ease var(--fd, 0.3s);
            }

            .continue-application > div .folder:after,
            .continue-application > div .folder .paper {
                --l: 1px;
                --t: 1px;
                --w: 21px;
                --h: 25px;
                --b: var(--paper-behind);
            }

            .continue-application > div .folder:after {
                transform: translate(var(--pbx, 0), var(--pby, 0));
                transition: transform 0.4s ease var(--pbd, 0s);
            }

            .continue-application > div .folder .paper {
                z-index: 1;
                --b: var(--paper);
            }

                .continue-application > div .folder .paper:before, .continue-application > div .folder .paper:after {
                    content: "";
                    width: var(--wp, 14px);
                    height: 2px;
                    border-radius: 1px;
                    transform: scaleY(0.5);
                    left: 3px;
                    top: var(--tp, 3px);
                    position: absolute;
                    background: var(--paper-lines);
                    box-shadow: 0 12px 0 0 var(--paper-lines), 0 24px 0 0 var(--paper-lines);
                }

                .continue-application > div .folder .paper:after {
                    --tp: 6px;
                    --wp: 10px;
                }

        .continue-application > div .pencil {
            height: 2px;
            width: 3px;
            border-radius: 1px 1px 0 0;
            top: 8px;
            left: 105%;
            position: absolute;
            z-index: 3;
            transform-origin: 50% 19px;
            background: var(--pencil-cap);
            transform: translateX(var(--pex, 0)) rotate(35deg);
            transition: transform 0.4s ease var(--pbd, 0s);
        }

            .continue-application > div .pencil:before, .continue-application > div .pencil:after {
                content: "";
                position: absolute;
                display: block;
                background: var(--b, linear-gradient(var(--pencil-top) 55%, var(--pencil-middle) 55.1%, var(--pencil-middle) 60%, var(--pencil-bottom) 60.1%));
                width: var(--w, 5px);
                height: var(--h, 20px);
                border-radius: var(--br, 2px 2px 0 0);
                top: var(--t, 2px);
                left: var(--l, -1px);
            }

            .continue-application > div .pencil:before {
                -webkit-clip-path: polygon(0 5%, 5px 5%, 5px 17px, 50% 20px, 0 17px);
                clip-path: polygon(0 5%, 5px 5%, 5px 17px, 50% 20px, 0 17px);
            }

            .continue-application > div .pencil:after {
                --b: none;
                --w: 3px;
                --h: 6px;
                --br: 0 2px 1px 0;
                --t: 3px;
                --l: 3px;
                border-top: 1px solid var(--pencil-top);
                border-right: 1px solid var(--pencil-top);
            }

    .continue-application:before, .continue-application:after {
        content: "";
        position: absolute;
        width: 10px;
        height: 2px;
        border-radius: 1px;
        background: var(--color);
        transform-origin: 9px 1px;
        transform: translateX(var(--cx, 0)) scale(0.5) rotate(var(--r, -45deg));
        top: 26px;
        right: 16px;
        transition: transform 0.3s;
    }

    .continue-application:after {
        --r: 45deg;
    }

    .continue-application:hover {
        --cx: 2px;
        --bg: var(--background-hover);
        --fx: -40px;
        --fr: -60deg;
        --fd: .15s;
        --fds: 0s;
        --pbx: 3px;
        --pby: -3px;
        --pbd: .15s;
        --pex: -24px;
    }

/* CSS para Fijar EXCLUSIVAMENTE la Primera Fila (Header Principal) */

/* 1. Regla general para la cabecera (Anula la fijación en las filas inferiores) */
#Tabla_ReporteTutores thead th {
    position: static; /* Por defecto, no pegajoso */
    z-index: 5; /* Base Z-Index */
}

/* 2. Fijación del Encabezado Principal */
/* Apunta a los TH dentro de la PRIMERA fila TR de THEAD */
#Tabla_ReporteTutores thead tr:first-child th {
    position: -webkit-sticky; /* Soporte para Safari */
    position: sticky;
    top: 0; /* Se pega a la parte superior del contenedor de scroll */
    z-index: 30; /* El más alto, asegurando que quede encima de todo */
    background-color: #0c9547; /* Mantiene el fondo del encabezado principal */
    color: white;
}

/* 3. Asegura que la fila de Filtros (la segunda fila TR) NO se pegue */
/* La fila de filtros tendrá position: static y se desplazará inmediatamente */
#Tabla_ReporteTutores thead tr.filters th {
    /* La fila de filtros ya está en position: static por la regla general,
       aseguramos que no tenga ningún desplazamiento fijo. */
    top: auto;
    z-index: 10; /* Menor Z-Index para que pase por debajo del encabezado principal si es necesario */
    background-color: #E6FFE6; /* Mantiene el fondo del filtro */
}

/* 4. Desactiva la fijación de las celdas de datos */
#Tabla_ReporteTutores tbody td:first-child {
    position: static !important;
    left: auto !important;
}