/* Pantallas de acceso del área reservada · Fundación República
   Claras, con la paleta de marca (verde + coral). */
:root{
  --verde:#22a24a;--verde-osc:#15803a;--verde-prof:#0c5a29;--verde-tint:#eef8f1;
  --coral:#ef8a86;--coral-fuerte:#e75b56;
  --tinta:#12211a;--gris:#5b6b62;--gris-cl:#8a978f;--linea:#e4ebe6;--hueso:#f6f9f6;
  --display:'Manrope',system-ui,sans-serif;--sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(700px 480px at 50% -8%,var(--verde-tint),var(--hueso) 60%);
  font-family:var(--sans);color:var(--tinta);padding:24px;-webkit-font-smoothing:antialiased}
.auth{width:100%;max-width:430px}
.auth-card{background:#fff;border:1px solid var(--linea);border-radius:24px;overflow:hidden;
  box-shadow:0 30px 70px rgba(12,33,26,.14)}
.auth-head{background:linear-gradient(135deg,var(--verde) 0%,var(--verde-prof) 100%);
  padding:32px 30px 26px;text-align:center;color:#fff;position:relative;overflow:hidden}
.auth-head::before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%);top:-90px;right:-60px}
.auth-mark{width:66px;height:66px;border-radius:50%;background:#fff;display:grid;place-items:center;
  margin:0 auto 14px;position:relative;box-shadow:0 8px 22px rgba(0,0,0,.16)}
.auth-mark b{font-family:var(--display);font-weight:800;color:var(--coral-fuerte);font-size:34px;line-height:1}
.auth-kick{font-family:var(--display);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:#dff5e6;font-weight:700;margin-bottom:6px;position:relative}
.auth-head h1{font-family:var(--display);font-size:1.45rem;font-weight:800;letter-spacing:-.01em;position:relative}
.auth-body{padding:30px 30px 26px}
.auth-body>.sub{color:var(--gris);font-size:14px;text-align:center;margin-bottom:22px;line-height:1.55}
label{display:block;font-family:var(--display);font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--verde-osc);margin:14px 0 6px;font-weight:600}
input{width:100%;padding:13px 15px;background:var(--hueso);border:1.5px solid var(--linea);border-radius:12px;
  color:var(--tinta);font-size:16px;font-family:inherit;transition:border-color .25s,box-shadow .25s}
input:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 4px rgba(34,162,74,.14);background:#fff}
.pwd{position:relative}
.pwd .eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;
  color:var(--verde-osc);font-size:18px;cursor:pointer;padding:8px;width:auto;margin:0}
.hint{font-size:12px;color:var(--gris-cl);margin-top:6px}
.auth-btn{width:100%;margin-top:22px;padding:15px;background:var(--verde);color:#fff;border:none;border-radius:100px;
  font-family:var(--display);font-weight:700;font-size:1rem;cursor:pointer;
  box-shadow:0 12px 26px rgba(34,162,74,.32);transition:background .25s,transform .25s;display:block;text-align:center;text-decoration:none}
.auth-btn:hover{background:var(--verde-osc);transform:translateY(-2px)}
.auth-btn-line{width:100%;margin-top:10px;padding:14px;background:#fff;color:var(--verde-osc);
  border:2px solid var(--linea);border-radius:100px;font-family:var(--display);font-weight:700;font-size:.98rem;
  cursor:pointer;transition:border-color .25s,color .25s;display:block;text-align:center;text-decoration:none}
.auth-btn-line:hover{border-color:var(--verde);color:var(--verde)}
.err{background:#fdeceb;border:1px solid var(--coral);color:var(--coral-fuerte);padding:11px;
  font-size:13.5px;margin-bottom:8px;text-align:center;border-radius:12px}
.auth-foot{padding:0 30px 26px;text-align:center;font-size:13px;color:var(--gris)}
.auth-foot a{color:var(--verde-osc);text-decoration:none;font-weight:600}
.auth-foot a:hover{text-decoration:underline}
.auth-foot .row{margin-top:8px}
.step{display:flex;gap:8px;justify-content:center;margin-bottom:2px}
.step span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);
  font-weight:700;font-size:12px;background:rgba(255,255,255,.22);color:#fff}
.step span.done{background:#fff;color:var(--verde-osc)}
.avisobox{background:var(--verde-tint);border:1px solid #d3ecdb;border-radius:12px;padding:14px 16px;
  font-size:13px;color:var(--verde-prof);margin:16px 0 4px;line-height:1.55;text-align:left}
.avisobox b{color:var(--verde-osc)}
.tick{width:70px;height:70px;border-radius:50%;background:#fff;border:none;display:grid;place-items:center;
  margin:0 auto 12px;color:var(--verde);font-size:38px;box-shadow:0 8px 22px rgba(0,0,0,.16)}
@media(max-width:460px){.auth-head{padding:28px 22px 22px}.auth-body{padding:24px 22px}.auth-foot{padding:0 22px 22px}}