*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#7c3aed,#6d28d9);min-height:100vh;display:flex;align-items:center;justify-content:center}#root{width:100%;min-height:100vh;display:flex;align-items:center;justify-content:center}.auth-container{background:#fffffff2;border-radius:15px;box-shadow:0 8px 32px #00000026;padding:40px;width:100%;max-width:420px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.auth-header{text-align:center;margin-bottom:30px}.auth-header h1{color:#333;font-size:28px;margin-bottom:8px}.auth-header p{color:#666;font-size:14px}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;color:#333;font-weight:500;font-size:14px}.form-group input{width:100%;padding:12px 15px;border:2px solid #e0e0e0;border-radius:8px;font-size:14px;transition:all .3s ease;background:#f9f9f9}.form-group input:focus{outline:none;border-color:#7c3aed;background:#fff;box-shadow:0 0 0 3px #7c3aed1a}.form-group input::placeholder{color:#aaa}.form-group.error input{border-color:#e74c3c;background:#e74c3c0d}.error-message{color:#e74c3c;font-size:12px;margin-top:5px;display:none}.form-group.error .error-message{display:block}.success-message{background:#d4edda;border:1px solid #c3e6cb;color:#155724;padding:12px;border-radius:8px;margin-bottom:20px;font-size:14px}.error-alert{background:#f8d7da;border:1px solid #f5c6cb;color:#721c24;padding:12px;border-radius:8px;margin-bottom:20px;font-size:14px}.btn{width:100%;padding:12px;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;margin-top:10px}.btn-primary{background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #7c3aed66}.btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn-secondary{background:#fff;color:#7c3aed;border:2px solid #7c3aed}.btn-secondary:hover{background:#f3f0ff}.btn-logout{background:#e74c3c;color:#fff;padding:10px 20px;width:auto;margin-left:auto;display:block}.btn-logout:hover{background:#c0392b}.auth-link{text-align:center;margin-top:20px;font-size:14px;color:#666}.auth-link a{color:#7c3aed;text-decoration:none;font-weight:600;transition:color .3s ease}.auth-link a:hover{color:#6d28d9;text-decoration:underline}.loading{display:inline-block;width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin 1s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}.principal-container{background:#fffffff2;border-radius:15px;box-shadow:0 8px 32px #00000026;padding:40px;width:100%;max-width:600px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.principal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;border-bottom:2px solid #f0f0f0;padding-bottom:20px}.principal-header h1{color:#333;font-size:28px}.user-info{background:#f9f9f9;border-radius:10px;padding:20px;margin-bottom:25px;border-left:4px solid #7c3aed}.user-info-item{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #e0e0e0}.user-info-item:last-child{border-bottom:none}.user-info-item label{font-weight:600;color:#333}.user-info-item span{color:#666}.no-data{text-align:center;padding:40px;color:#999}@media (max-width: 480px){.auth-container{padding:25px;margin:20px}.auth-header h1{font-size:24px}.principal-container{padding:25px;margin:20px}.principal-header{flex-direction:column;gap:15px;align-items:flex-start}.btn-logout{width:100%;margin-left:0}}