/* =====================================================================
   ATENEA · Acceso (rediseño sep-2026)
   Izquierda: panel de marca (marino + listones del logo). Derecha: formulario.
   ===================================================================== */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --navy-950:#06112B; --navy-900:#0B1C45; --navy-800:#12295F;
  --blue-700:#0B3FA6; --blue-600:#0F4EC6; --blue-500:#2A6BE0; --blue-50:#EEF3FD;
  --cyan-400:#4AC1F8; --cyan-50:#EBF8FF;
  --ribbon:linear-gradient(100deg,#4AC1F8 0%,#2A6BE0 55%,#0F4EC6 100%);
  --ink:#0F1A33; --muted:#627089; --line:#E2E8F1;
  --font:"Poppins","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
}
html,body{height:100%}
body{font-family:var(--font);color:var(--ink);background:#F2F5FA;-webkit-text-size-adjust:100%}

.login-page{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(420px,.9fr)}

/* ---------- Lado de marca ---------- */
.lp-brand{position:relative;overflow:hidden;color:#fff;padding:56px 64px;display:flex;flex-direction:column;justify-content:center;
  background:radial-gradient(90% 70% at 100% 0%,rgba(74,193,248,.18),transparent 60%),linear-gradient(160deg,var(--navy-800),var(--navy-950) 70%)}
.lp-ribbons{position:absolute;inset:0;width:100%;height:100%}
.lp-brand-in{position:relative;z-index:1;max-width:520px}
.lp-logo{display:flex;align-items:center;gap:16px;margin-bottom:44px}
.lp-logo img{width:78px;height:78px;filter:drop-shadow(0 8px 20px rgba(0,0,0,.4))}
.lp-logo b{display:block;font-size:40px;font-weight:800;font-style:italic;letter-spacing:.06em;line-height:1}
.lp-logo span{display:block;font-size:12px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--cyan-400);margin-top:6px}
.lp-brand h2{font-size:34px;line-height:1.18;font-weight:700;letter-spacing:-.01em;margin-bottom:16px}
.lp-brand h2 em{font-style:italic;font-weight:800;background:var(--ribbon);-webkit-background-clip:text;background-clip:text;color:transparent;
  background-image:linear-gradient(100deg,#7FD6FB,#4AC1F8 50%,#8FB4FF)}
.lp-brand p{font-size:15.5px;line-height:1.6;color:#B9C7E6;max-width:470px}
.lp-points{list-style:none;margin-top:30px;display:grid;gap:12px}
.lp-points li{display:flex;align-items:center;gap:12px;font-size:14.5px;font-weight:500;color:#DCE5F7}
.lp-points i{width:22px;height:8px;border-radius:4px;background:var(--ribbon);transform:skewX(-24deg);flex-shrink:0}
.lp-by{position:absolute;left:64px;bottom:34px;z-index:1;display:flex;align-items:center;gap:11px;font-size:11px;color:#7F92BE;line-height:1.35}
.lp-by img{width:38px;height:38px}
.lp-by b{color:#C9D4EE;font-weight:600}

/* ---------- Formulario ---------- */
.lp-form{display:flex;align-items:center;justify-content:center;padding:40px 28px}
.login-box{width:100%;max-width:380px}
.login-box .logo{display:none;width:84px;height:84px;margin:0 auto 14px}
.login-box h1{font-size:30px;font-weight:800;font-style:italic;color:var(--navy-900);position:relative;padding-bottom:12px;margin-bottom:6px}
.login-box h1::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:4px;border-radius:4px;background:var(--ribbon);transform:skewX(-20deg)}
.subtitle{color:var(--muted);font-size:14px;margin:10px 0 24px}
.subtitle b{color:var(--ink);font-weight:600}
form{margin:0}
label{display:block;font-size:12.5px;font-weight:600;color:#44516B;margin:14px 0 6px}
input{width:100%;padding:13px 14px;border-radius:12px;border:1px solid #D3DBE7;background:#fff;font:inherit;font-size:15px;color:var(--ink);transition:border-color .15s,box-shadow .15s}
input:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 4px rgba(42,107,224,.15)}
.password-container{position:relative}
.password-container input{padding-right:48px}
.toggle-password{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:grid;place-items:center;border-radius:9px;color:#7B879D;cursor:pointer}
.toggle-password:hover{background:var(--blue-50);color:var(--blue-600)}
.toggle-password svg{width:19px;height:19px}
button{width:100%;margin-top:24px;padding:14px;border:none;border-radius:12px;cursor:pointer;font:inherit;font-size:15px;font-weight:700;letter-spacing:.04em;color:#fff;
  background:linear-gradient(100deg,#2A6BE0,#0F4EC6);box-shadow:0 8px 20px rgba(15,78,198,.3);transition:transform .12s,box-shadow .15s,filter .15s}
button:hover{filter:brightness(1.07);transform:translateY(-1px);box-shadow:0 12px 26px rgba(15,78,198,.35)}
.error{background:#FDECEC;color:#A92226;border:1px solid #F6C6C7;border-left:4px solid #D6363A;padding:11px 14px;border-radius:12px;font-size:13.5px;margin-bottom:6px}

.juez-link{display:flex;align-items:center;gap:12px;margin-top:22px;padding:13px 16px;border-radius:14px;text-decoration:none;color:#fff;
  background:linear-gradient(120deg,var(--navy-800),var(--navy-900));box-shadow:0 6px 16px rgba(11,28,69,.2);transition:transform .12s}
.juez-link:hover{transform:translateY(-1px)}
.juez-link svg{width:22px;height:22px;color:var(--cyan-400);flex-shrink:0}
.juez-link span{flex:1;font-weight:700;font-size:14.5px}
.juez-link small{display:block;font-weight:500;font-size:12px;color:#9FB0D2}
.juez-link em{font-style:normal;font-size:18px;color:var(--cyan-400)}

.plantilla-link{display:flex;align-items:center;gap:12px;margin-top:12px;padding:12px 16px;border:1px solid #CDEBD8;border-radius:14px;background:#F2FBF5;text-decoration:none;color:#14693A;font-size:13.5px;font-weight:600;transition:border-color .15s}
.plantilla-link:hover{border-color:#8FD3AA}
.plantilla-link .xl{background:#1D7A43;color:#fff;font-weight:800;font-size:11px;border-radius:8px;padding:7px 6px;letter-spacing:.04em}
.plantilla-link small{display:block;font-weight:500;color:#4A7F60;font-size:12px}

.pub-links{display:flex;justify-content:center;gap:12px;margin-top:22px;font-size:13.5px}
.pub-links a{color:var(--blue-600);font-weight:600;text-decoration:none}
.pub-links a:hover{text-decoration:underline}
.pub-links span{color:#B5BFD0}
.footer{text-align:center;margin-top:14px;font-size:12px;color:#8A96AB}

/* ---------- Tablet y celular ---------- */
@media (max-width:900px){
  .login-page{grid-template-columns:1fr}
  .lp-brand{display:none}
  body{background:linear-gradient(180deg,var(--navy-800) 0,var(--navy-950) 230px,#F2F5FA 230px)}
  .lp-form{padding:36px 18px;align-items:flex-start}
  .login-box{background:#fff;border-radius:20px;padding:28px 24px 22px;box-shadow:0 20px 50px rgba(6,17,43,.2);position:relative;overflow:hidden}
  .login-box::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;border-radius:20px 20px 0 0;background:var(--ribbon)}
  .login-box .logo{display:block}
  .login-box h1{text-align:center}
  .login-box h1::after{left:50%;margin-left:-28px}
  .subtitle{text-align:center}
  input{font-size:16px}
}