*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:"Segoe UI",Roboto,Arial,sans-serif;
  background:linear-gradient(135deg,#e8f0fe 0%,#eef1f4 60%,#dde8f5 100%);
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
}
.container{
  text-align:center;
  width:100%;max-width:420px;
  padding:20px;
}
.logo img{
  max-width: 280px;
  width: 100%;
  height: auto;
  margin-bottom: 0px;
}
h1{font-size:27px;font-weight:700;color:#1a3a5c;margin:8px 0 4px}
.subtitle{color:#666;font-size:14px;margin-bottom:22px}

/* ── CARD ── */
.card{
  background:#fff;border-radius:14px;
  padding:30px;box-shadow:0 10px 30px rgba(0,0,0,.11);
  text-align:left;
}
.card h2{
  font-size:18px;font-weight:700;color:#1a3a5c;
  margin-bottom:20px;display:flex;align-items:center;gap:8px;
}
.card h2 .icon{
  width:32px;height:32px;border-radius:8px;
  background:#5b8fc2;display:flex;align-items:center;justify-content:center;
}
.card h2 .icon svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

label{font-size:13px;color:#444;display:block;margin-bottom:5px;font-weight:600}

.input-wrap{position:relative;margin-bottom:16px}
.input-wrap input{
  width:100%;padding:12px 42px 12px 14px;
  border:1.5px solid #dde2e8;border-radius:8px;
  font-size:14px;color:#333;background:#fafbfc;
  transition:border-color .2s,box-shadow .2s;outline:none;
}
.input-wrap input:focus{border-color:#5b8fc2;box-shadow:0 0 0 3px rgba(91,143,194,.12);background:#fff}
.input-wrap input::placeholder{color:#bbb}
.eye-btn{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;padding:0;
  color:#aaa;transition:color .2s;
}
.eye-btn:hover{color:#5b8fc2}
.eye-btn svg{width:18px;height:18px;display:block}

/* PASSWORD STRENGTH */
.pwd-strength{margin-top:-10px;margin-bottom:14px}
.pwd-bars{display:flex;gap:4px;margin-bottom:4px}
.pwd-bar{height:4px;flex:1;border-radius:2px;background:#eee;transition:background .3s}
.pwd-bar.weak  {background:#e74c3c}
.pwd-bar.fair  {background:#f39c12}
.pwd-bar.good  {background:#3498db}
.pwd-bar.strong{background:#27ae60}
.pwd-txt{font-size:11px;color:#888;text-align:right}

/* BOTÓN PRINCIPAL */
.btn-main{
  width:100%;padding:13px;
  background:#5b8fc2;color:#fff;
  border:none;border-radius:8px;
  font-size:15px;font-weight:700;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:background .2s,transform .1s,box-shadow .2s;
  letter-spacing:.03em;margin-top:4px;
}
.btn-main:hover{background:#4a7eb1;box-shadow:0 4px 14px rgba(91,143,194,.35)}
.btn-main:active{transform:scale(.98)}
.btn-main:disabled{opacity:.6;cursor:not-allowed}
.btn-main svg{width:18px;height:18px;flex-shrink:0}

/* LINK */
.link{
  text-align:center;margin-top:14px;
  cursor:pointer;color:#5b8fc2;font-size:13px;
  text-decoration:underline;text-underline-offset:3px;
}
.link:hover{color:#0d47a1}
.link-secondary{
  text-align:center;margin-top:10px;
  cursor:pointer;color:#888;font-size:12px;
}
.link-secondary:hover{color:#555}

/* TOAST */
.toast{
  position:fixed;top:20px;right:20px;z-index:9999;
  background:#333;color:#fff;padding:12px 18px;
  border-radius:10px;font-size:14px;max-width:320px;
  box-shadow:0 6px 20px rgba(0,0,0,.2);
  display:flex;align-items:center;gap:10px;
  transform:translateX(120%);transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.toast.show{transform:translateX(0)}
.toast.ok  {background:#27ae60}
.toast.err {background:#e74c3c}
.toast.warn{background:#f39c12}
.toast svg{width:18px;height:18px;flex-shrink:0}

/* MODAL REGISTRO */
.modal-backdrop{
  position:fixed;inset:0;z-index:10000;
  background:rgba(20,34,50,.45);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  opacity:0;pointer-events:none;
  transition:opacity .22s ease;
}
.modal-backdrop.show{opacity:1;pointer-events:auto}
.modal-card{
  width:100%;max-width:420px;
  background:#fff;border-radius:14px;
  padding:32px 30px 28px;
  text-align:center;
  box-shadow:0 24px 60px rgba(26,58,92,.24);
  transform:translateY(10px) scale(.98);
  transition:transform .22s ease;
}
.modal-backdrop.show .modal-card{transform:translateY(0) scale(1)}
.modal-icon{
  width:64px;height:64px;border-radius:16px;
  background:#eafaf1;color:#27ae60;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 18px;
}
.modal-icon svg{width:34px;height:34px}
.modal-card h2{
  font-size:23px;color:#1a3a5c;
  margin-bottom:10px;font-weight:800;
}
.modal-card p{
  color:#555;font-size:14px;line-height:1.65;
  margin-bottom:22px;
}
.modal-action{max-width:220px;margin:0 auto}

/* SPINNER */
.spin{
  width:18px;height:18px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.4);
  border-top-color:#fff;
  animation:spin .7s linear infinite;flex-shrink:0;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* PANEL ANIMACIONES */
.panel{display:none;animation:fadeIn .25s ease}
.panel.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* RECUPERAR — inbox icon */
.inbox-icon{
  width:56px;height:56px;border-radius:14px;
  background:#e8f2fd;margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;
}
.inbox-icon svg{width:28px;height:28px;stroke:#5b8fc2;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sent-msg{text-align:center;padding:10px 0 4px;font-size:14px;color:#555;line-height:1.6}
.sent-msg strong{color:#1a3a5c}
.sent-msg em{color:#5b8fc2;font-style:normal;font-weight:600}

/* REQUIREMENTS LIST */
.req-list{list-style:none;margin:6px 0 14px;padding:0}
.req-list li{
  font-size:12px;color:#aaa;padding:2px 0;
  display:flex;align-items:center;gap:6px;transition:color .2s;
}
.req-list li::before{
  content:'○';font-size:10px;
}
.req-list li.ok{color:#27ae60}
.req-list li.ok::before{content:'✓';font-weight:700}

/* RESPONSIVE */
@media(max-width:480px){
  .container{padding:16px}
  .card{padding:24px 20px}
}