/* ===========================================================
   auth-meridian.css — Pantallas de autenticación (estilo "Meridian")
   Usado por: login, forgot-password, reset-password
   Panel de marca azul marino (izquierda) + formulario (derecha).
   Tipografía editorial (Fraunces) + Public Sans. Tema claro, autónomo.
   =========================================================== */

.cd-meridian{
  --blue:#2b6cf0; --blue-2:#3b82f6; --blue-d:#143a86; --navy:#0c1c3f;
  --paper:#fbfcff; --ink:#16203a; --muted:#5f6b80; --line:#e6e9f2;
}

.cd-meridian *{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
.cd-meridian{
  margin:0; min-height:100vh;
  font-family:'Public Sans',system-ui,-apple-system,Segoe UI,sans-serif;
  color:var(--ink); background:var(--paper);
  display:grid; grid-template-columns:.92fr 1.08fr; overflow:hidden;
}

/* ---------- IZQUIERDA: PANEL DE MARCA ---------- */
.cd-meridian .auth-brand{
  position:relative; overflow:hidden; color:#eaf1ff; padding:52px 54px;
  display:flex; flex-direction:column; justify-content:space-between;
  background:linear-gradient(155deg,#143a86 0%,#1c4fb5 45%,#0f2f72 100%);
}
.cd-meridian .rings{position:absolute; right:-160px; top:-120px; width:560px; height:560px; opacity:.5; z-index:0}
.cd-meridian .rings::before,.cd-meridian .rings::after{content:""; position:absolute; inset:0; border-radius:50%; border:1px solid rgba(255,255,255,.18)}
.cd-meridian .rings::after{inset:90px; border-color:rgba(255,255,255,.12)}
.cd-meridian .ring2{position:absolute; left:-120px; bottom:-140px; width:420px; height:420px; border-radius:50%; border:1px solid rgba(255,255,255,.12); z-index:0}
.cd-meridian .dots{position:absolute; inset:0; z-index:0; opacity:.4;
  background-image:radial-gradient(rgba(255,255,255,.25) 1.2px,transparent 1.2px); background-size:26px 26px;
  -webkit-mask:radial-gradient(120% 90% at 80% 10%,#000,transparent 70%); mask:radial-gradient(120% 90% at 80% 10%,#000,transparent 70%)}
.cd-meridian .auth-brand>.brand-top,
.cd-meridian .auth-brand>.quote,
.cd-meridian .auth-brand>.trust{position:relative; z-index:1}

.cd-meridian .brand-top{display:flex; align-items:center; gap:14px; opacity:0; animation:cd-rise .8s cubic-bezier(.2,.8,.2,1) forwards .1s}
.cd-meridian .logo-badge{width:52px; height:52px; border-radius:14px; display:grid; place-items:center; background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.18); overflow:hidden; padding:7px}
.cd-meridian .logo-badge img{width:100%; height:100%; object-fit:contain}
.cd-meridian .wm{font-weight:700; letter-spacing:.16em; font-size:1.05rem; line-height:1}
.cd-meridian .wm small{display:block; letter-spacing:.28em; font-size:.58rem; opacity:.7; font-weight:500; margin-top:5px}

.cd-meridian .quote{max-width:460px}
.cd-meridian .quote .eyebrow{font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; opacity:.85; font-weight:600; margin-bottom:24px; display:inline-block; animation:cd-rise .8s cubic-bezier(.2,.8,.2,1) both .25s}
.cd-meridian .quote h1{font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:clamp(2rem,3vw,2.9rem); line-height:1.12; letter-spacing:-.01em; margin:0; animation:cd-rise .9s cubic-bezier(.2,.8,.2,1) both .35s}
.cd-meridian .quote h1 em{font-style:italic; color:#bcd6ff}
.cd-meridian .quote p{margin:18px 0 0; line-height:1.65; opacity:.85; max-width:400px; animation:cd-rise .9s cubic-bezier(.2,.8,.2,1) both .45s}

.cd-meridian .trust{display:flex; gap:26px; align-items:center; animation:cd-rise .9s cubic-bezier(.2,.8,.2,1) both .6s}
.cd-meridian .trust div b{font-family:'Fraunces',Georgia,serif; font-size:1.6rem; display:block}
.cd-meridian .trust div span{font-size:.74rem; opacity:.8}
.cd-meridian .trust .sep{width:1px; height:34px; background:rgba(255,255,255,.2)}

/* ---------- DERECHA: FORMULARIO ---------- */
.cd-meridian .auth-form{display:flex; flex-direction:column; justify-content:center; padding:52px 9%; position:relative}
.cd-meridian .form-wrap{width:100%; max-width:410px; margin:0 auto}
.cd-meridian .form-wrap>*,
.cd-meridian .form-wrap form>*{opacity:0; animation:cd-rise .7s cubic-bezier(.2,.8,.2,1) forwards}
.cd-meridian .form-wrap>*:nth-child(1){animation-delay:.3s}
.cd-meridian .form-wrap>*:nth-child(2){animation-delay:.4s}
.cd-meridian .form-wrap form>*:nth-child(1){animation-delay:.5s}
.cd-meridian .form-wrap form>*:nth-child(2){animation-delay:.58s}
.cd-meridian .form-wrap form>*:nth-child(3){animation-delay:.66s}
.cd-meridian .form-wrap form>*:nth-child(4){animation-delay:.74s}
.cd-meridian .form-wrap form>*:nth-child(5){animation-delay:.82s}
.cd-meridian .form-wrap form>*:nth-child(6){animation-delay:.9s}

.cd-meridian .ftitle{font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:2.1rem; letter-spacing:-.01em; margin:0}
.cd-meridian .fsub{color:var(--muted); margin:10px 0 34px; font-size:.96rem; line-height:1.5}

.cd-meridian .field{margin-bottom:20px}
.cd-meridian .field label{display:block; font-size:.8rem; font-weight:600; color:var(--ink); margin-bottom:9px}
.cd-meridian .input{position:relative}
.cd-meridian .input>i{position:absolute; left:16px; top:50%; transform:translateY(-50%); color:#9aa3b8; font-size:.9rem; transition:.2s; pointer-events:none}
.cd-meridian .input input{
  width:100%; height:54px; border-radius:13px; border:1.5px solid var(--line); background:#fff; color:var(--ink);
  font-size:.96rem; padding:0 46px; font-family:inherit; outline:none; transition:.2s;
}
.cd-meridian .input input::placeholder{color:#aeb5c5}
.cd-meridian .input input:focus{border-color:var(--blue); box-shadow:0 0 0 4px rgba(43,108,240,.14)}
.cd-meridian .input input:focus ~ i{color:var(--blue)}
.cd-meridian .input .eye{left:auto; right:16px; cursor:pointer; pointer-events:auto}
.cd-meridian .input .eye:hover{color:var(--blue)}

.cd-meridian .field-error{color:#d6293a; font-size:.8rem; margin-top:7px}

.cd-meridian .row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:2px 0 28px; font-size:.88rem; flex-wrap:wrap}
.cd-meridian .check{display:flex; align-items:center; gap:9px; color:var(--muted); cursor:pointer; user-select:none}
.cd-meridian .check input{appearance:none; -webkit-appearance:none; width:18px; height:18px; border-radius:6px; border:1.5px solid var(--line); display:grid; place-items:center; cursor:pointer; transition:.2s; margin:0}
.cd-meridian .check input:checked{background:var(--blue); border-color:var(--blue)}
.cd-meridian .check input:checked::after{content:"\2713"; color:#fff; font-size:.7rem; font-weight:700}
.cd-meridian .link{color:var(--blue-d); text-decoration:none; font-weight:600}
.cd-meridian .link:hover{text-decoration:underline}

.cd-meridian .submit{
  width:100%; height:56px; border:none; border-radius:13px; cursor:pointer; color:#fff;
  font-family:'Public Sans',sans-serif; font-weight:700; font-size:1rem; letter-spacing:.01em;
  background:linear-gradient(100deg,var(--blue-2),var(--blue-d));
  box-shadow:0 14px 28px rgba(20,58,134,.28); transition:transform .2s,box-shadow .2s;
  display:flex; align-items:center; justify-content:center; gap:10px; position:relative; overflow:hidden;
}
.cd-meridian .submit:hover{transform:translateY(-2px); box-shadow:0 20px 38px rgba(20,58,134,.36)}
.cd-meridian .submit:active{transform:translateY(0)}
.cd-meridian .submit::after{content:""; position:absolute; top:0; left:-120%; width:55%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent); transform:skewX(-20deg); transition:left .6s}
.cd-meridian .submit:hover::after{left:150%}

.cd-meridian .alert-ok{margin-top:18px; padding:13px 16px; border-radius:12px; font-size:.86rem; background:rgba(43,108,240,.08); border:1px solid rgba(43,108,240,.20); color:var(--blue-d)}
.cd-meridian .back{display:block; text-align:center; margin-top:22px; font-size:.88rem}
.cd-meridian .foot{margin-top:36px; text-align:center; font-size:.8rem; color:#98a0b2}

@keyframes cd-rise{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:translateY(0)}}

@media (prefers-reduced-motion: reduce){
  .cd-meridian *{animation:none !important; transition:none !important}
  .cd-meridian .form-wrap>*,.cd-meridian .form-wrap form>*,.cd-meridian .quote>*,.cd-meridian .brand-top,.cd-meridian .trust{opacity:1 !important}
}

@media (max-height:760px){
  .cd-meridian .auth-brand{padding:40px}
  .cd-meridian .quote h1{font-size:clamp(1.6rem,2.4vw,2.2rem)}
  .cd-meridian .auth-form{padding-top:44px; padding-bottom:44px}
}

@media (max-width:900px){
  .cd-meridian{grid-template-columns:1fr}
  .cd-meridian .auth-brand{display:none}
  .cd-meridian .auth-form{padding:48px 26px}
}