:root{ --bg:#141414; --card:#191919; --muted:#C7C7C7; --accent:#0146d0; --radius:18px; } *{ box-sizing:border-box } html,body{ height:100% } body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Inter,sans-serif; background: radial-gradient(1200px 800px at 70% -10%, #102957 0%, var(--bg) 40%, #0b0b0b 100%); color:#e7eaf0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; } .logo-cliente{ margin-bottom:20px; } .logo-cliente img{ max-width:160px; height:auto; display:block; } .card{ width:min(380px, 94%); background:linear-gradient(180deg,#212121 0%, var(--card) 100%); border:1px solid rgba(255,255,255,0.06); border-radius:var(--radius); box-shadow: 0 18px 50px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05); padding:26px 22px; } h1{ margin:0 0 10px; font-size:22px; font-weight:800; } .sub{ margin:0 0 18px; color:var(--muted); font-size:13px; text-align:center; } .col{ display:flex; flex-direction:column; gap:12px; } .field{ display:flex; flex-direction:column; gap:6px; } label{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; } input[type="text"], input[type="password"]{ width:100%; padding:12px 12px; border-radius:12px; border:1px solid rgba(255,255,255,0.12); background:#121212; color:#e7eaf0; font-size:15px; outline: none; } input:focus{ box-shadow:0 0 0 3px rgba(1,70,208,.25); border-color: rgba(1,70,208,.45); } .pw-wrap{ position:relative; display:flex; align-items:center; } .pw-wrap input{ padding-right:42px; } .pw-toggle{ position:absolute; right:8px; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:30px; height:30px; border-radius:8px; border:1px solid rgba(255,255,255,.08); background:#1c1c1c; color:#8db8ff; cursor:pointer; } .pw-toggle:hover{ filter:brightness(1.1); } .actions{ display:flex; align-items:center; gap:12px; justify-content:space-between; margin-top:6px; } .remember{ display:flex; align-items:center; gap:8px; font-size:13px; color:#dedede; } .remember input{ accent-color:#0146d0; } .btn{ border:none; cursor:pointer; padding:12px 16px; border-radius:12px; font-weight:800; font-size:14px; background:linear-gradient(180deg, #0146d0, var(--accent)); color:#ffffff; min-width:120px; } .btn:active{ transform:translateY(1px); } .hint{ margin-top:4px; font-size:12px; color:var(--muted); min-height:16px; } .ok{ color:#8ff5e6 } .error{ color:#ffb4b4 } .powered{ margin-top:18px; font-size:12px; color:var(--muted); letter-spacing:1.5px; text-transform:uppercase; } @media (max-width:420px){ .btn{ width:100%; } .actions{ flex-direction:column; align-items:stretch; } .remember{ order:2; justify-content:center; } } .racing-wordmark{display:block;font-size:11px;font-weight:800;letter-spacing:7px;text-align:right;margin-top:5px;color:#a6c8ff} .logo-cliente img{width:200px;max-width:100%;height:auto}