/*FONDO DEL LOGGIN*/
.body_login {
    background-image: url('/imagenes/NuevoBG web legal-01.png'); /* Ruta de la imagen */
    background-size: cover; /* Cubre toda la pantalla */
    background-repeat: no-repeat; /* No se repite */
    background-attachment: fixed; /* Se queda fija al hacer scroll */
    background-position: center; /* Centrada en la pantalla */
    font-family: "Inter", sans-serif;
}

/*PROPIEDAD UTILIZADA EN EL LOGGIN*/
.h-custom {
    height: calc(100% - 73px);
}

/*LOGIN IMAGEN GRANDE*/
.imagen_lateral {
    bottom: 3.5rem;
    right: 28rem;
    position: relative;
}

.image-container {
    width: 66rem; /* Ancho fijo del contenedor */
    height: 50rem; /* Altura fija del contenedor */
    overflow: hidden; /* Oculta la parte de la imagen que se salga */
    position: relative; /* Necesario para el posicionamiento */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Estilo de la imagen */
.image-container img {
    width: 100%; /* La imagen ocupa el 100% del ancho del contenedor */
    height: 100%; /* La imagen ocupa el 100% de la altura del contenedor */
    transition: transform 0.5s ease, margin-top 0.5s ease, filter 0.5s ease; /* Transición suave para el zoom, margen y filtro */
    display: block; /* Eliminar espacio en línea alrededor de la imagen */
    position: absolute; /* Necesario para mantener la posición al hacer zoom */
    top: 0;
    left: 0;
    box-shadow: 0 0 30px 30px rgba(0, 0, 0, 0.5); /* Añadir sombra difuminada */
    clip-path: inset(0); /* Asegura que la sombra se aplique dentro de la imagen */
}

/* Efecto de zoom y margen superior al pasar el cursor */
.image-container:hover img {
    transform: scale(1.2); /* Escalar la imagen a 1.2 veces su tamaño original */
    margin-top: 1rem; /* Añadir margen superior de 1rem */
}
/*SE USA EN EL PEQUEÑO FORMULARIO DE LOGGIN*/
.login_form {
    position: relative;
    left: 13rem;
    top: -4.5rem;
}
.logo_sup {
    text-align: center;
}

@media (max-width: 450px) {
    .h-custom {
        height: 100%;
    }
}

/*SE USA ESTA PROPIEDAD EN LAS AYUDAS PARA ALGUNOS CAMPOS, COMO EN OLVIDE CONTRASEÑA*/
.tooltip-container {
    position: relative;
    display: inline-block;
}

    .tooltip-container .text {
        display: inline-block;
        width: 20px;
        height: 20px;
        background-color: #404040;
        color: #fff;
        border-radius: 50%;
        text-align: center;
        line-height: 20px;
    }

.text {
    color: #333;
    font-size: 18px;
    cursor: pointer;
}

.tooltip_text {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    background: #0b798a;
    color: #fff;
    padding: 10px;
    border-radius: 4px;
    transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;
    z-index: 1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

    .tooltip_text::before {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 50%;
        border-width: 8px;
        border-style: solid;
        border-color: transparent transparent #0b798a transparent;
        transform: translateX(-50%);
    }

.tooltip-container:hover .tooltip_text {
    top: 120%;
    opacity: 1;
    visibility: visible;
    background: #0e94a0;
    transform: translate(-50%, -5px);
}