*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;background:#f0f4f8;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem}
.wrapper{max-width:980px;width:100%;display:flex;border-radius:20px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.18)}
.left{flex:1;background:linear-gradient(145deg,#1E3A8A,#0F172A);padding:3rem 2.5rem;display:flex;flex-direction:column;justify-content:center;color:#fff}
.left-logo{display:flex;align-items:center;gap:10px;margin-bottom:2.5rem}
.left-logo i{font-size:1.6rem;color:#38bdf8}
.left-logo span{font-size:1.4rem;font-weight:800;letter-spacing:-.5px}
.left h2{font-size:1.7rem;font-weight:700;line-height:1.3;margin-bottom:.8rem}
.left p{font-size:.88rem;color:#93c5fd;line-height:1.6}
.right{flex:1;background:#f8fafc;display:flex;align-items:center;justify-content:center;padding:2.5rem 2rem}
.card{background:#fff;border-radius:16px;box-shadow:0 4px 24px rgba(0,0,0,.08);padding:2.2rem 2rem;width:100%;max-width:400px}
.card h3{font-size:1.4rem;font-weight:700;color:#0b2b3b;margin-bottom:.3rem}
.card .sub{font-size:.82rem;color:#6b8fa5;margin-bottom:1.6rem}
.tabs{display:flex;background:#f0f4f9;border-radius:40px;padding:4px;margin-bottom:1.8rem}
.tab{flex:1;text-align:center;padding:.55rem 0;font-size:.85rem;font-weight:400;color:#6b8fa5;border-radius:40px;cursor:pointer;border:none;background:transparent;font-family:'Inter',sans-serif;transition:all .15s}
.tab.active{background:#fff;color:#1d4ed8;font-weight:600;box-shadow:0 2px 8px rgba(0,0,0,.07)}
.field{margin-bottom:1.1rem}
.field-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem}
.field-header label{font-size:.75rem;font-weight:600;color:#374151;transition:color .15s}
.field-header label.err-label{color:#ef4444}
.field-header a{font-size:.72rem;color:#3B82F6;text-decoration:none;font-weight:600}
.field-header a:hover{text-decoration:underline}
.field input{width:100%;padding:.72rem 1rem;border:1.5px solid #e2edf2;border-radius:10px;font-size:.85rem;font-family:'Inter',sans-serif;color:#1a2c3e;outline:none;transition:border-color .15s,box-shadow .15s;background:#fff}
.field input:focus{border-color:#3B82F6}
.field input.err{border-color:#ef4444;background:#fff5f5;box-shadow:0 0 0 3px rgba(239,68,68,.1)}
.field .err-hint{font-size:.7rem;color:#ef4444;margin-top:4px;display:none}
.field .err-hint.show{display:block}
.check-row{display:flex;align-items:center;gap:7px;margin-bottom:1.4rem}
.check-row input{width:15px;height:15px;accent-color:#3B82F6}
.check-row label{font-size:.75rem;color:#4b6b82;font-weight:500}
.btn-cta{width:100%;background:#3B82F6;border:none;border-radius:10px;padding:.82rem;font-size:.9rem;font-weight:700;color:#fff;cursor:pointer;font-family:'Inter',sans-serif;transition:background .15s,opacity .15s}
.btn-cta:hover:not(:disabled){background:#2563eb}
.btn-cta:disabled{opacity:.6;cursor:not-allowed}
.alert-err{background:#fee2e2;color:#dc2626;border-radius:10px;padding:.75rem 1rem;font-size:.82rem;margin-bottom:1rem;display:flex;align-items:center;gap:8px}
.char-hint{font-size:.68rem;color:#9ca3af;margin-top:3px;text-align:right}
@media(max-width:720px){.wrapper{flex-direction:column}.left{padding:2rem}}

/* Responsive: cabecera compacta para que el formulario quede visible */
@media(max-width:720px){.left{padding:1.25rem 1.5rem}.left-logo{margin-bottom:0}.left h2,.left p{display:none}}
.pass-wrap{position:relative}
.pass-wrap input{padding-right:2.8rem}
.pass-toggle{position:absolute;top:50%;right:.5rem;transform:translateY(-50%);background:none;border:0;padding:.35rem;cursor:pointer;color:#6b7c93;font-size:1.1rem;line-height:1;border-radius:6px;display:flex}
.pass-toggle:hover,.pass-toggle:focus-visible{color:#3B82F6}