body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}

/*.container {
    display: flex;
    height: 100%;
    overflow: hidden;*/ /* Para ocultar la inclinación fuera del contenedor */
/*}*/

.left-section {
    background: url(../IMG/FONDO/fondo.gif) no-repeat center center fixed;
    background-position: center center;
    background-size: cover;
    flex: 1;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 24px;
    font-weight: bold;
    width: 90%;
    position: relative; /* Necesario para posicionar los pseudo-elementos */
}

    .left-section:after {
        right: 100%; /* Posicionamiento a la izquierda */
    }

.right-section {
    width: 50%;
    height: 100vh; /* 100% de la altura de la pantalla */
    overflow: hidden; /* Para evitar el scroll si la imagen es más grande */
}

    .right-section img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ajusta la imagen para que cubra todo el espacio del div */
    }

/*.left-section:after,
    .right-section:after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        background-color: gray;*/ /* Color de la inclinación */
/*z-index: -1;*/ /* Para que esté detrás del contenido */
/*transform-origin: bottom left;*/ /* Origen de la transformación */
/*transform: skewX(-10deg);*/ /* Inclinación hacia arriba */
/*}*/
.right-section {
    background-color: #35526a;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Sombra suave para resaltar el elemento */
}

    .right-section img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ajusta la imagen para que cubra todo el espacio del div */
        /* Ajusta el brillo para oscurecer la imagen */
    }

.form-signin {
    max-width: 730px;
    padding: 15px;
    margin: 0 auto;
    color: #FFF;
}

#PanelLoguin .loginFields .Texto {
    text-align: center;
    padding: 30%;
    color: rgba(51, 122, 183, 0.7);
    font-size: x-large; /* Tamaño moderado */
    font-weight: bold;
    position: relative; /* Posiciona el texto sobre la imagen */
    top: 0%;
    left: 0%;
    transform: translate(-50%, -50%); /* Centra el texto */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Añade sombra al texto para mayor contraste */
    /*background-color: rgba(51, 122, 183, 0.7);*/ /* Fondo semitransparente armonizando con #337AB7 */
    padding: 10% 10%; /* Espaciado interno */
    border-radius: 10px; /* Bordes redondeados */
}

.PanelLoguin {
    display: flex;
    justify-content: center;
    align-items: center;
}

#LoginUsuario {
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
}

.loginFields {
    background-color: white;
    border-radius: 6%;
    position: relative;
    box-shadow: 0px 3px 15px -1px rgba(0,0,0,0.3);
    padding: 20px;
    width: 75%
}

#seleccionperfil #validaciontres #perfildirec #perfiladmon #perfilcoordi #perfiladminweb #perfilservic #perfildirector #perfiltres {
    background: linear-gradient(135deg, #FFFFFF 0%, #F0F0F0 100%); /* Fondo degradado */
    border: 1px solid #D5D5D5; /* Bordes delgados y suaves */
    border-radius: 8px; /* Esquinas redondeadas */
    color: #858585;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.2;
    padding: 10px 12px; /* Espaciado interno */
    transition: all 0.3s ease; /* Transición suave */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    width: 100%; /* Ancho completo del contenedor */
}

    #seleccionperfil #validaciontres #perfildirec #perfiladmon #perfilcoordi #perfiladminweb #perfilservic #perfildirector #perfiltres:focus {
        border-color: #337AB7; /* Color de borde al enfocar */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada al enfocar */
        outline: none; /* Elimina el borde de enfoque predeterminado */
    }

#doc-text, #doc-text > div {
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    text-align: center; /* Asegura que el texto esté centrado */
    margin: 0 auto;
    flex-direction: column; /* Coloca los hijos en columna */
}

.loginButton {
    display: block;
    margin: 20px auto; /* Centra el botón y añade espacio superior e inferior */
}

.imgcontainer {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.ifancybox {
    color: #337AB7;
    font-size: large;
    font-weight: bold;
    font-family: Calibri;
    cursor: pointer;
    margin-bottom: 10px; /* Espacio entre los enlaces */
}

.cajas.transparentes {
    background-color: transparent !important;
    border: none !important;
}

@media (max-width: 580px) {
    #LoginUsuario {
        width: 60%;
    }

    #right {
        display: none
    }

    .left-section {
        flex: 1;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        font-size: 19px;
        font-weight: bold;
        position: relative; /* Necesario para posicionar los pseudo-elementos */
    }

    #PanelLoguin .loginFields .Texto {
        text-align: center;
        padding: 5%;
        color: rgba(51, 122, 183, 0.7);
        font-size: 0.1em; /* Tamaño moderado */
        font-weight: bold;
        position: relative; /* Posiciona el texto sobre la imagen */
        top: 0%;
        left: 0%;
        transform: translate(-50%, -50%); /* Centra el texto */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Añade sombra al texto para mayor contraste */
        /*background-color: rgba(51, 122, 183, 0.7);*/ /* Fondo semitransparente armonizando con #337AB7 */
        padding: 10% 10%; /* Espaciado interno */
        border-radius: 10px; /* Bordes redondeados */
    }
}

.loginFields {
    background-color: #FFF;
    border-radius: 3%;
    position: relative;
    box-shadow: 0px 3px 15px -1px rgba(0,0,0,0.3);
    opacity: 0.9;
    max-width: 930px
}

.austarEnY {
    transform: translateY(-20px);
}

@media (max-width: 1050px) {
    .PanelLoguin {
        display: block;
        width: 100%;
    }

    .form-signin {
        max-width: 100%;
    }

    .loginFields {
        width: 100%;
        transform: scale(0.85) translateY(-72px);
    }
}

@media (max-width: 650px) {
    .loginFields {
        transform: translateY(-35px);
    }
}