/* (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, #667eea 0%, #764ba2 100%);
    display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; color: #333;
}
.login-container {
    background: #ffffff; 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: #444; 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: #555; }
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: #764ba2; outline: none; box-shadow: 0 0 0 3px rgba(118, 75, 162, 0.1); }

button { width: 100%; padding: 14px; background: linear-gradient(to right, #667eea, #764ba2); 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: #666;
    margin-bottom: 20px;
    text-decoration: none;
}
.forgot-pass:hover { color: #764ba2; text-decoration: underline; }

/* --- 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: #555;
    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: #764ba2;

    /* 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: #764ba2; /* El morado de tu marca */
}

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