/* (MISMOS ESTILOS ANTERIORES) */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #cc1d1d 0%, #910e0e 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    color: #ffffff;
}
.login-container {
    background: #141414;
    width: 100%;
    max-width: 400px;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
h2 { text-align: center; margin-bottom: 30px; color: #ffffff; font-size: 1.8rem; }
.alerta { padding: 12px; margin-bottom: 20px; border-radius: 6px; text-align: center; font-size: 0.9rem; }
.error { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.exito { background: #dcfce7; color: #166534; border: 1px solid #86efac; }

label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #ffffff;
}
input {
    width: 100%;
    padding: 12px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.3s;
}
input:focus {
    border-color: #ff0000;
    outline: none;
    box-shadow: 0 0 0 3px rgba(118, 75, 162, 0.1);
}

button {
    width: 100%;
    padding: 14px;
    background: linear-gradient(to right, #df1818, #d11919);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    margin-top: 20px; }
button:hover {
    opacity: 0.9;
}

/* NUEVO ESTILO: Enlace de recuperar */
.forgot-pass {
    display: block;
    text-align: right;
    font-size: 0.85rem;
    color: #9f9b9b;
    margin-bottom: 20px;
    text-decoration: none;
}
.forgot-pass:hover {
    color: #89adc5;
    text-decoration: underline; }

.login-logo {
    display: block;       /* Permite aplicar márgenes */
    max-width: 100px;     /* Ajusta este valor para cambiar el tamaño máximo */
    height: auto;         /* Mantiene la proporción de la imagen */
    margin: 0 auto 1rem;  /* Centra la imagen horizontalmente y da espacio abajo */
}

/* --- ESTILOS PARA EL CHECKBOX "MANTENER SESIÓN" --- */

/* 1. Contenedor para dar aire arriba y abajo */
.form-group {
    margin: 15px 0 20px 0;
    display: flex;
    align-items: center;
}

/* 2. Modificamos el label para que texto y caja estén alineados */
.form-group label {
    display: flex;        /* Flexbox para alinear horizontalmente */
    align-items: center;  /* Centrado vertical perfecto */
    cursor: pointer;      /* Manita al pasar el ratón */
    font-size: 0.95rem;   /* Un pelín más pequeño que los inputs */
    color: #ffffff;
    font-weight: 500;     /* No tan negrita como los títulos */
    margin: 0;            /* Quitamos el margen por defecto */
    user-select: none;    /* Evita que se seleccione el texto al hacer clic rápido */
}

/* 3. IMPORTANTE: Sobrescribimos el estilo general de los inputs */
/* En tu CSS tienes 'input { width: 100% }'. Esto lo arregla para el checkbox */
.form-group input[type="checkbox"] {
    width: 18px !important;  /* Tamaño fijo cuadrado */
    height: 18px;
    margin-right: 10px;      /* Espacio entre la cajita y el texto */
    margin-bottom: 0;        /* Quitamos margen inferior genérico */
    cursor: pointer;

    /* MAGIA MODERNA: Pinta el checkbox del color de tu marca */
    accent-color: #1296ed;

    /* Pequeño ajuste visual para alinearlo ópticamente con el texto */
    position: relative;
    top: -1px;
}

/* 4. Efecto Hover: Cambia el color del texto al pasar el ratón */
.form-group label:hover {
    color: #89adc5; /* El morado de tu marca */
}

.links { text-align: center; margin-top: 25px; font-size: 0.9rem; color: #ffffff; }
.links a { color: #d61111; text-decoration: none; font-weight: bold; }
.links a:hover { text-decoration: underline; }