/* === IMPORTACIÓN DE FUENTE ===
   Traemos 'Inter' para garantizar ese look moderno y limpio.
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

/* === VARIABLES CSS ===
   Definimos los colores aquí. Si Roch's cambia de azul mañana, 
   solo lo cambias aquí y se actualiza todo el sitio.
*/
:root {
    --primary-color: #1C65BA; /* Azul Roch's */
    --primary-hover: #164a8a; /* Un tono más oscuro para el hover */
    --text-color: #333333;
    --text-light: #666666;
    --bg-color: #f0f2f5;      /* Gris muy suave para el fondo de pantalla */
    --white: #ffffff;
    --shadow: 0 8px 24px rgba(28, 101, 186, 0.15); /* Sombra con un toque azulado sutil */
}

/* === RESET BÁSICO === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Manejo correcto de tamaños */
    font-family: 'Inter', sans-serif;
}

/* === CUERPO, CENTRADO Y FONDO (COVER) === */
body {
    /* Color de respaldo por si la imagen tarda en cargar */
    background-color: var(--bg-color);

    /* AQUÍ AGREGAMOS LA IMAGEN:
       1. linear-gradient(...): Crea una capa azul Roch's (85% opacidad) sobre la foto.
          Esto asegura que el texto sea legible y se mantenga la identidad de marca.
       2. url('...'): Carga tu archivo exacto 'fondo_login.jpg'.
    */
    background-image: linear-gradient(rgba(28, 101, 186, 0.85), rgba(4, 28, 56, 0.9)), url('cover.png');

    /* Propiedades para que la imagen cubra toda la pantalla siempre */
    background-size: cover;       /* Escala la imagen para llenar el fondo */
    background-position: center;  /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que se repita como mosaico */

    /* Centrado del formulario de Login */
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* === CONTENEDOR DE LA TARJETA === */
.login-container {
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: center;
}

/* === TARJETA DE LOGIN (CARD) === */
.login-box {
    background-color: var(--white);
    width: 100%;
    max-width: 400px; /* Ancho máximo elegante */
    padding: 40px;
    border-radius: 12px; /* Bordes redondeados modernos */
    box-shadow: var(--shadow); /* Profundidad */
    text-align: center;
}                                                                                                                                                                                                                                                       /*aca tambien el rulo se la come*/

/* === HEADER Y LOGO === */
.login-header {
    margin-bottom: 30px;
}

.logo {
    max-width: 150px; /* Ajusta esto según el tamaño real de tu logo */
    height: auto;
    margin-bottom: 20px;
}

.login-header h1 {
    font-size: 24px;
    color: var(--text-color);
    margin-bottom: 8px;
    font-weight: 600;
}

.login-header p {
    font-size: 14px;
    color: var(--text-light);
}

/* === INPUTS Y ETIQUETAS === */
.input-group {
    margin-bottom: 20px;
    text-align: left; /* Alineamos etiquetas a la izquierda para mejor lectura */
}

.input-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 8px;
}

.input-group input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    font-size: 15px;
    transition: all 0.3s ease; /* Suaviza el efecto al hacer clic */
    outline: none;
}

/* Efecto al escribir en el campo */
.input-group input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(28, 101, 186, 0.1); /* Anillo de enfoque suave */
}

/* === BOTÓN PRINCIPAL === */
.btn-login {
    width: 100%;
    padding: 14px;
    background-color: var(--primary-color);
    color: var(--white);
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 10px;
}

.btn-login:hover {
    background-color: var(--primary-hover); /* Oscurece al pasar el mouse */
}

/* === FOOTER DEL FORMULARIO === */
.form-footer {
    margin-top: 20px;
}

.form-footer a {
    color: var(--primary-color);
    font-size: 14px;
    text-decoration: none;
    font-weight: 500;
}

.form-footer a:hover {
    text-decoration: underline;
}