/**
 * Estilos para el fondo de video en la página de login.
 */

/* El contenedor ocupa toda la pantalla y permanece fijo detrás del formulario */
/*
 * Hacemos que el contenedor cubra toda la pantalla e incluso se desplace hacia arriba 50 px
 * para que el vídeo quede solapado con la parte superior de la página. La propiedad
 * height se amplía 50 px para compensar el desplazamiento. Esto crea la ilusión
 * de margen superior negativo a la vez que cubre la totalidad de la ventana.
 * Inspirado en la técnica de video a pantalla completa de W3Schools, donde el
 * video se fija al viewport y ocupa el 100 % de la ventana【133656267546358†L924-L935】.
 */
.ytlb-video-container {
    position: fixed;
    top: -50px;
    left: 0;
    width: 100%;
    height: calc(100% + 50px);
    overflow: hidden;
    z-index: -1;
}

/* En dispositivos móviles, ajustamos la posición y la altura para que el
 * video cubra completamente la pantalla y no quede desplazado hacia arriba. */
@media (max-width: 768px) {
    .ytlb-video-container {
        /* En móviles ajustamos con margen negativo para cubrir cualquier espacio superior. */
        margin-top: -50px;
        top: 0;
        height: 100%;
    }
}


/* El iframe se ajusta a la ventana del navegador y cubre todo el fondo */
/*
 * Ajustamos el iframe para que cubra completamente el contenedor. Utilizamos
 * `right: 0` y `bottom: 0` junto con `min-width` y `min-height` según la guía
 * de vídeo a pantalla completa de W3Schools【133656267546358†L928-L935】. La
 * propiedad `object-fit: cover` asegura que el video mantenga su proporción y
 * rellene el área visible sin distorsiones. pointer-events se mantiene en none
 * para permitir la interacción con el formulario superpuesto.
 */
.ytlb-video-container iframe {
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    pointer-events: none;
    object-fit: cover;
    /*
     * Por defecto no aplicamos una escala fija al vídeo aquí. En su lugar, el plugin
     * insertará un atributo style dinámico con `transform: scale(...)` para permitir
     * que el administrador ajuste la escala del video desde la página de ajustes.
     */
}

/* Contenedor para la imagen de fondo alternativa (fallback). Este elemento cubre toda la pantalla
 * y se oculta por defecto. Cuando la reproducción automática del vídeo no esté permitida,
 * el script mostrará este contenedor y ocultará el vídeo. Su posición y tamaño son los
 * mismos que el contenedor del vídeo, y se coloca detrás del formulario utilizando z-index negativo.
 */
.ytlb-fallback-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    z-index: -1;
    pointer-events: none;
    display: none;
}

/* Ajusta la caja del formulario para que el texto sea legible sobre el video */
/*
 * Mejoramos la apariencia del formulario con un estilo "glassmorphism":
 * - Fondo translúcido con color claro y efecto blur.
 * - Bordes redondeados y sombras suaves para destacarlo sobre el video.
 * - Mayor relleno interno para que los campos no queden pegados al borde.
 */
/*
 * Estilos de “glassmorphism” para todos los formularios de acceso, registro y recuperación
 * de contraseña. Aplicamos un fondo translúcido, desenfoque y bordes redondeados para
 * garantizar la legibilidad del contenido sobre el vídeo o la imagen de fondo.
 */
body.login #loginform,
body.login #registerform,
body.login #lostpasswordform {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 32px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* Colorea los títulos y enlaces del formulario en blanco para que contrasten con el fondo */
body.login #login h1,
body.login #login h1 a {
    color: #ffffff;
}

/* Colorea las etiquetas de todos los formularios (login, registro y recuperación) */
body.login #loginform label,
body.login #registerform label,
body.login #lostpasswordform label {
    color: #ffffff;
    font-weight: 600;
}

/* Opcional: centra el formulario verticalmente */
body.login div#login {
    padding: 5% 0;
}

/*
 * Escalamos el área de login al 140 % para darle mayor presencia en pantallas de escritorio.
 * Usamos transform: scale() en lugar de la propiedad non‑standard zoom para mayor compatibilidad.
 * Para pantallas estrechas (<768px) revertimos la escala para mantener la usabilidad.
 */
/*
 * Eliminamos la escala del contenedor de login para que el formulario tenga su tamaño
 * predeterminado. El usuario solicitó que no hubiese zoom en el formulario, por lo
 * que eliminamos la transformación y dejamos que WordPress controle el ancho. El
 * relleno vertical se mantiene para centrar el formulario en la pantalla.
 */
body.login div#login {
    padding: 5% 0;
    transform: none;
    /* Centramos el contenedor horizontalmente para todas las pantallas */
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    body.login div#login {
        padding: 10% 0;
        transform: none;
    }
}

/*
 * En pantallas muy pequeñas, hacemos que el formulario se ajuste al ancho del dispositivo
 * con un margen horizontal automático. Esto mejora la legibilidad en móviles y evita que
 * el formulario sobresalga del viewport.
 */
/* Para pantallas menores a 799px (tablets y móviles), reducimos el ancho del
 * formulario a 260 px y lo centramos. Esto incluye las páginas de recuperar
 * contraseña y registro de usuario. */
@media (max-width: 799px) {
    body.login #login {
        width: 320px !important;
        margin-left: auto;
        margin-right: auto;
    }
    /* Asegura que los formularios de acceso, registro y recuperación no excedan los 320 px de ancho en móviles.
     * Establecemos max-width en 320px y centramos cada formulario con márgenes automáticos. */
    body.login #loginform,
    body.login #registerform,
    body.login #lostpasswordform {
        max-width: 320px;
        width: 100% !important;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Para pantallas de escritorio y tablets, ampliamos el ancho del contenedor del formulario
 * para que tenga una presencia mayor. WordPress fija el ancho del contenedor
 * (#login) en ~320px; lo incrementamos a 420px de manera predeterminada. En
 * pantallas muy anchas, el formulario seguirá centrado gracias al margen automático. */
/* En pantallas mayores o iguales a 800px, ampliamos el ancho del contenedor a 480px */
@media (min-width: 800px) {
    body.login #login {
        width: 480px;
        margin-left: auto;
        margin-right: auto;
    }
}

/*
 * Estilos para los enlaces de "¿Perdiste tu contraseña?" y "Registrarse" (contenidos en #nav) y para
 * el enlace de "Volver al sitio" (#backtoblog). Aplicamos un fondo translúcido y un
 * ligero desenfoque para imitar un panel de vidrio, con texto legible sobre él.
 */
body.login #nav, body.login #backtoblog {
    text-align: center;
    margin-top: 20px;
}

body.login #nav a, body.login #backtoblog a {
    display: inline-block;
    margin: 4px 8px;
    padding: 6px 14px;
    /* Simplificamos el estilo: sin efecto de vidrio ni sombras. */
    background: none;
    border-radius: 0;
    color: #fff;
    text-decoration: underline;
    font-size: 14px;
    font-weight: 500;
    box-shadow: none;
    transition: color 0.3s;
}

body.login #nav a:hover, body.login #backtoblog a:hover {
    color: #ddd;
}

/*
 * Estilos para los campos de entrada y el botón de envío. Damos un aspecto minimalista con
 * esquinas redondeadas y un fondo ligeramente translúcido para integrarse con el
 * efecto de vidrio del formulario. Los bordes se eliminan y se añade relleno interno.
 */
body.login #loginform input[type="text"],
body.login #registerform input[type="text"],
body.login #lostpasswordform input[type="text"],
body.login #loginform input[type="password"],
body.login #registerform input[type="password"],
body.login #lostpasswordform input[type="password"],
body.login #loginform input[type="email"],
body.login #registerform input[type="email"],
body.login #lostpasswordform input[type="email"] {
    width: 100%;
    padding: 12px 14px;
    margin: 6px 0 14px 0;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.6);
    color: #333;
    font-size: 16px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background 0.3s;
}

body.login #loginform input[type="text"]:focus,
body.login #registerform input[type="text"]:focus,
body.login #lostpasswordform input[type="text"]:focus,
body.login #loginform input[type="password"]:focus,
body.login #registerform input[type="password"]:focus,
body.login #lostpasswordform input[type="password"]:focus,
body.login #loginform input[type="email"]:focus,
body.login #registerform input[type="email"]:focus,
body.login #lostpasswordform input[type="email"]:focus {
    background: rgba(255, 255, 255, 0.8);
    outline: none;
}

/* Botón de envío con estilo minimalista y fondo blanco translúcido */
body.login #loginform input#wp-submit,
body.login #registerform input#wp-submit,
body.login #lostpasswordform input#wp-submit {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 8px;
    /* Botón semitransparente con color verde por defecto; se puede sobrescribir desde el backend. */
    background: rgba(0, 201, 122, 0.8);
    color: #ffffff;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: background 0.3s, opacity 0.3s;
}

body.login #loginform input#wp-submit:hover,
body.login #registerform input#wp-submit:hover,
body.login #lostpasswordform input#wp-submit:hover {
    opacity: 0.9;
}

/* Ajuste para la casilla "Recordarme" y su etiqueta */
body.login #loginform .forgetmenot input[type="checkbox"] {
    vertical-align: middle;
    margin-right: 6px;
}

body.login #loginform .forgetmenot label {
    color: #fff;
    font-size: 14px;
}

/*
 * Estiliza los mensajes de error y notificación que aparecen en la página de login,
 * incluyendo la página de recuperación de contraseña. WordPress utiliza clases
 * .message y #login_error para mostrar información o errores. Les damos un
 * fondo translúcido y un borde sutil para integrarlos con el estilo de vidrio
 * del formulario y mantenemos el texto en blanco para que sea legible sobre
 * el video de fondo.
 */
body.login #login_error,
body.login .message {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #ffffff;
    border-left: 4px solid rgba(255, 255, 255, 0.6);
    padding: 16px;
    margin: 0 0 24px;
    border-radius: 6px;
}

body.login .message a {
    color: #ffffff;
    text-decoration: underline;
}