/* index.css - Estilos de index.html */

body { background-color: #0f0f11 !important; color: white !important; font-family: 'Segoe UI', sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; }
        
        .login-container { background: #18181b; padding: 40px 30px; border-radius: 12px; border: 1px solid #2c2c30; width: 100%; max-width: 380px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); text-align: center; }
        
        .input-login { width: 100%; padding: 15px; margin-bottom: 20px; border-radius: 8px; border: 1px solid #3f3f46; background: #27272a; color: white; box-sizing: border-box; font-size: 1rem; outline: none; transition: 0.2s; }
        .input-login:focus { border-color: #34d399; }
        
        .recordar-container { display: flex; align-items: center; justify-content: flex-start; margin-bottom: 25px; margin-top: -5px; }
        .recordar-container input[type="checkbox"] { width: 18px; height: 18px; accent-color: #34d399; cursor: pointer; border-radius: 4px; }
        .recordar-container label { color: #a1a1aa; font-size: 0.9rem; margin-left: 10px; cursor: pointer; user-select: none; transition: color 0.2s;}
        .recordar-container label:hover { color: #fff; }

        /* FIX: evitar que style.css (input{width:100%}) afecte el checkbox en móvil/desktop */
        .recordar-container { width: 100%; justify-content: flex-start; gap: 10px; text-align: left; }
        .recordar-container input[type="checkbox"]{
            width: 18px !important;
            height: 18px !important;
            padding: 0 !important;
            margin: 0 !important;
            flex: 0 0 auto !important;
            display: inline-block !important;
        }
        .recordar-container label{
            margin: 0 !important;
            line-height: 1.2;
            white-space: normal;
        }


        .btn-ingresar { width: 100%; padding: 16px; border-radius: 8px; border: none; background: #34d399; color: #0f0f11; font-weight: 800; font-size: 1.1rem; cursor: pointer; text-transform: uppercase; transition: 0.2s; }
        .btn-ingresar:hover { background: #10b981; transform: scale(0.98); }
        .btn-ingresar:disabled { background: #3f3f46; color: #a1a1aa; cursor: not-allowed; transform: none; }

        .toast-alerta { display: none; padding: 12px; border-radius: 8px; font-size: 0.9rem; font-weight: bold; margin-top: 15px; animation: fadeIn 0.3s; }
        .alerta-error { background: rgba(239, 68, 68, 0.1); border: 1px solid #ef4444; color: #ef4444; }
        .alerta-exito { background: rgba(52, 211, 153, 0.1); border: 1px solid #34d399; color: #34d399; }
        
        .link-recuperar { color: #71717a; font-size: 0.85rem; display: block; margin-top: 25px; text-decoration: none; transition: 0.2s; }
        .link-recuperar:hover { color: #34d399; }

        @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }