:root {
    --primary: #6D28D9; --secondary: #DB2777; --bg-light: #F9FAFB;
    --bg-white: #FFFFFF; --text-dark: #1F2937; --text-light: #6B7280;
    --border: #E5E7EB; --success: #10B981; --danger: #EF4444;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg-light); color: var(--text-dark);
    margin: 0; display: flex; justify-content: center; align-items: center;
    min-height: 100vh; padding: 2rem;
}
.auth-container, .main-container {
    width: 100%; max-width: 450px; background-color: var(--bg-white);
    padding: 2.5rem; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.main-container { max-width: 900px; }
h1 { text-align: center; color: var(--primary); margin-bottom: 2rem; }
.form-group { margin-bottom: 1.5rem; }
label { display: block; font-weight: 600; margin-bottom: 0.5rem; }
input[type="text"], input[type="email"], input[type="password"] {
    width: 100%; padding: 0.8rem; border: 1px solid var(--border);
    border-radius: 8px; font-size: 1rem; box-sizing: border-box;
}
.btn {
    width: 100%; padding: 1rem; border: none; border-radius: 8px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white; font-size: 1rem; font-weight: 700; cursor: pointer;
    transition: transform 0.2s;
}
.btn:hover { transform: translateY(-2px); }
.text-center { text-align: center; }
.link { color: var(--primary); text-decoration: none; }
.error, .success {
    padding: 1rem; border-radius: 8px; margin-bottom: 1rem; text-align: center;
}
.error { background-color: #FEE2E2; color: #B91C1C; }
.success { background-color: #D1FAE5; color: #065F46; }
#qr-status { margin-top: 1rem; font-weight: 600; }
#qr-canvas { margin: 1rem auto; display: block; }
		    .img-responsiva {
    width: 100%;
    max-width: 270px;
    height: auto;
    }