:root{
  --login-primary: var(--fn-primary, #087cf0);
  --login-primary-strong: #086fdc;
  --login-primary-soft: #eaf5ff;
  --login-navy: #071d3d;
  --login-text: #0b2346;
  --login-muted: #6883a4;
  --login-border: #d6e3f0;
  --login-page-bg: #f7fbff;
  --login-card-bg: #ffffff;
  --login-shadow: 0 18px 44px rgba(29,73,119,.08);
  --login-radius-card: 19px;
  --login-font: var(--fn-font, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

.login-page,
.login-page *{box-sizing:border-box}

.login-page{
  margin:0;
  min-width:320px;
  min-height:100vh;
  color:var(--login-text);
  background:var(--login-page-bg);
  font-family:var(--login-font);
  -webkit-font-smoothing:antialiased;
}

.login-page button,
.login-page input{font:inherit}

.login-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,1.52fr) minmax(470px,.98fr);
  overflow:hidden;
  background:#fff;
}

.login-hero{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 30% 30%,rgba(255,255,255,.96) 0 33%,rgba(255,255,255,.72) 46%,transparent 60%),
    linear-gradient(135deg,#ffffff 0%,#f8fbff 43%,#e7f2fc 100%);
  border-right:1px solid #eef4f9;
}

.login-hero::before{
  content:"";
  position:absolute;
  z-index:-2;
  width:72%;
  height:105%;
  right:-25%;
  top:-20%;
  border-radius:50%;
  background:linear-gradient(165deg,rgba(183,216,246,.48),rgba(234,245,255,.03));
  transform:rotate(15deg);
}

.login-hero::after{
  content:"";
  position:absolute;
  z-index:-2;
  width:85%;
  height:48%;
  left:-18%;
  bottom:-28%;
  border-radius:50% 50% 0 0;
  background:linear-gradient(155deg,rgba(204,229,251,.95),rgba(244,249,255,.4));
  transform:rotate(12deg);
}

.login-hero-orb{position:absolute;pointer-events:none;z-index:-1;border-radius:50%}
.login-hero-orb-a{width:560px;height:560px;right:-155px;top:-145px;background:radial-gradient(circle at 44% 42%,rgba(184,216,245,.55),rgba(220,236,252,.05) 72%)}
.login-hero-orb-b{width:540px;height:300px;left:-135px;bottom:-132px;background:rgba(196,224,248,.58);transform:rotate(10deg)}

.login-hero-content{
  position:relative;
  z-index:4;
  width:min(72%,720px);
  margin-left:8.4%;
  padding-top:4.5vh;
}

.login-brand-logo{display:block}
.login-brand-logo-large{width:575px;max-width:92%;height:auto}
.login-brand-logo-card{width:230px;height:auto;margin:-40px auto 16px}

.login-tagline{display:flex;align-items:center;gap:13px;width:390px;max-width:85%;margin:10px 0 45px 4px;color:#6983a4;font-size:15px}
.login-tagline span{height:1px;flex:1;background:#9db2c8}
.login-tagline p{margin:0;white-space:nowrap}

.login-hero-copy{max-width:590px}
.login-hero-copy h1{margin:0 0 15px;font-size:34px;line-height:1.15;letter-spacing:-.035em;color:#092142;font-weight:800}
.login-hero-copy h1 strong{color:#0a82f2;font-weight:800}
.login-hero-copy p{margin:0;color:#6680a0;font-size:18px;line-height:1.47;max-width:580px}

.login-hero-features{
  position:absolute;
  left:calc(100% + 58px);
  top:137px;
  width:205px;
  display:grid;
  gap:23px;
  color:#5c7ca4;
}
.login-feature{display:flex;align-items:center;gap:14px;font-size:14px;line-height:1.17}
.login-feature svg{width:29px;height:29px;flex:0 0 auto;fill:none;stroke:#4f7fb5;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.login-modules{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:17px;
  width:535px;
  max-width:100%;
  margin-top:69px;
}
.login-module{position:relative;text-align:center;color:#0a61bd;padding:0 9px}
.login-module:not(:last-child)::after{content:"";position:absolute;right:-8px;top:3px;height:67px;width:1px;background:linear-gradient(to bottom,transparent,#e3edf6 20%,#e3edf6 80%,transparent)}
.login-module svg{width:38px;height:38px;margin-bottom:7px;fill:none;stroke:#056fd9;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.login-module strong{display:block;font-size:16px;margin-bottom:4px}
.login-module small{display:block;color:#6c84a2;font-size:12px;line-height:1.3}

.login-city-wrap{position:absolute;z-index:1;left:34%;right:-1%;bottom:-3px;height:66%;opacity:.97;pointer-events:none}
.login-city{display:block;width:100%;height:100%}

.login-hero-cloud{position:absolute;z-index:5;right:11.4%;top:35%;display:flex;align-items:center;gap:10px;color:#5a7699}
.login-hero-cloud svg{width:81px;height:81px;fill:none;stroke:#35699f;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.login-hero-cloud p{margin:0;font-size:11px;line-height:1.3;letter-spacing:.05em}
.login-hero-cloud strong{font-weight:700}

.login-hero-footer-note{position:absolute;z-index:5;left:5.3%;bottom:6.4%;color:#58779b;font-size:12px;letter-spacing:.18em;line-height:1.42}
.login-hero-footer-note span{display:block;width:38px;height:3px;background:#0d83ef;margin-bottom:13px}
.login-hero-footer-note p{margin:0}

.login-access{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:90px 54px 50px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.95),rgba(249,252,255,.94)),
    linear-gradient(155deg,#f9fcff,#edf6ff);
  overflow:hidden;
}
.login-access::before{content:"";position:absolute;right:-170px;top:160px;width:470px;height:320px;background:linear-gradient(135deg,transparent 15%,rgba(215,234,251,.92) 16%,rgba(241,248,255,.28) 72%);clip-path:polygon(55% 0,100% 0,100% 78%,0 100%);opacity:.9}

.login-access-slogan{position:absolute;top:31px;right:41px;display:flex;align-items:flex-start;gap:18px;color:#607ea3;font-size:14px;line-height:1.35;text-align:left;z-index:2}
.login-access-slogan p{margin:0}
.login-access-slogan span{width:19px;height:3px;background:#0a83f1;margin-top:6px;border-radius:4px}

.login-card{
  position:relative;
  z-index:3;
  width:min(100%,545px);
  margin-top:0;
  padding:84px 33px 35px;
  background:rgba(255,255,255,.96);
  border:1px solid #d9e5f0;
  border-radius:var(--login-radius-card);
  box-shadow:var(--login-shadow);
}

.login-card-header{text-align:center}
.login-card-header h2{margin:4px 0 3px;color:#071d3b;font-size:31px;line-height:1.15;letter-spacing:-.03em;font-weight:800}
.login-card-header p{margin:0 0 45px;color:#6984a6;font-size:17px;line-height:1.4}

.login-form{display:block}
.login-field-label{display:block;margin:0 0 9px;color:#0b203e;font-size:14px;font-weight:750}
.login-input-wrap{position:relative;height:56px;margin-bottom:20px}
.login-input-wrap>svg{position:absolute;left:17px;top:50%;transform:translateY(-50%);width:22px;height:22px;fill:none;stroke:#5f82aa;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.login-input-wrap input{width:100%;height:100%;border:1px solid #cddceb;border-radius:12px;background:#fff;color:#102b4d;padding:0 50px 0 52px;outline:none;font-size:16px;transition:border-color .16s ease,box-shadow .16s ease}
.login-input-wrap input::placeholder{color:#8aa0bc;opacity:1}
.login-input-wrap input:focus{border-color:#6eb5f7;box-shadow:0 0 0 4px rgba(20,137,239,.09)}

.login-password-toggle{position:absolute;right:11px;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;background:transparent;color:#6484aa;display:grid;place-items:center;cursor:pointer;padding:7px;border-radius:8px}
.login-password-toggle:hover{background:#f2f7fc}
.login-password-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.login-eye-closed{display:none}
.login-password-toggle[aria-pressed="true"] .login-eye-open{display:none}
.login-password-toggle[aria-pressed="true"] .login-eye-closed{display:block}

.login-form-meta{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:1px 0 33px;color:#5f7da0;font-size:14px}
.login-remember{display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none}
.login-remember input{position:absolute;opacity:0;pointer-events:none}
.login-remember>span{width:19px;height:19px;border-radius:4px;background:#0b85f2;border:1px solid #0876db;display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.login-remember svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.login-remember input:not(:checked)+span{background:#fff;border-color:#b9cce0}
.login-remember input:not(:checked)+span svg{display:none}
.login-forgot{color:#0077eb;white-space:nowrap;cursor:default}

.login-submit{width:100%;height:58px;border:0;border-radius:12px;background:linear-gradient(90deg,#3094ef 0%,#0c76e8 100%);color:#fff;font-weight:750;font-size:17px;display:flex;align-items:center;justify-content:center;gap:12px;box-shadow:0 9px 21px rgba(13,118,232,.18);cursor:pointer;transition:filter .16s ease,transform .16s ease,opacity .16s ease}
.login-submit:hover{filter:saturate(1.06) brightness(.98)}
.login-submit:active{transform:translateY(1px)}
.login-submit:disabled{opacity:.64;cursor:wait;transform:none}
.login-submit svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

.login-error{display:none;margin-top:13px;padding:11px 13px;border-radius:10px;background:#fff1f3;border:1px solid #f7c9d0;color:#b7243e;font-size:13px;line-height:1.4}
.login-error.show{display:block}

.login-divider{height:1px;margin:31px 0 21px;background:linear-gradient(90deg,transparent,#e6edf5 12%,#e6edf5 88%,transparent)}
.login-support{height:58px;border:1px solid #cfddec;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:11px;color:#066fcf;font-size:15px;font-weight:650;background:#fbfdff}
.login-support svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.login-version{text-align:center;color:#8ca1b9;font-size:12px;margin:28px 0 0}

@media (max-width:1250px){
  .login-shell{grid-template-columns:minmax(0,1.25fr) minmax(430px,.92fr)}
  .login-hero-content{width:78%;margin-left:7%}
  .login-hero-features{left:calc(100% + 28px)}
  .login-hero-cloud{right:7%;top:38%}
  .login-access{padding-left:34px;padding-right:34px}
}

@media (max-width:980px){
  .login-shell{display:block;overflow:visible;background:#f5faff}
  .login-hero{min-height:auto;padding:46px 22px 62px;border-right:0;border-bottom:1px solid #e7eff7}
  .login-hero-content{width:min(100%,720px);margin:0 auto;padding:0}
  .login-brand-logo-large{width:315px;margin:0 auto}
  .login-tagline{margin:8px auto 34px;width:330px;max-width:100%}
  .login-hero-copy{text-align:center;margin:0 auto}
  .login-hero-copy h1{font-size:30px}
  .login-hero-copy p{font-size:16px}
  .login-hero-features{position:static;width:min(100%,560px);margin:35px auto 0;grid-template-columns:repeat(2,1fr);gap:17px 28px}
  .login-modules{margin:38px auto 0;width:min(100%,560px)}
  .login-city-wrap{display:none}
  .login-hero-cloud{display:none}
  .login-hero-footer-note{display:none}
  .login-access{min-height:auto;padding:78px 20px 48px}
  .login-access-slogan{top:22px;right:25px}
  .login-card{margin:0;width:min(100%,560px)}
}

@media (max-width:600px){
  .login-hero{padding:33px 18px 42px}
  .login-brand-logo-large{width:270px;max-width:92%}
  .login-tagline{width:285px;font-size:12px;gap:8px;margin-bottom:27px}
  .login-hero-copy h1{font-size:25px}
  .login-hero-copy p{font-size:14px;line-height:1.5}
  .login-hero-features{grid-template-columns:1fr 1fr;gap:15px 13px;margin-top:27px}
  .login-feature{gap:9px;font-size:12px}
  .login-feature svg{width:24px;height:24px}
  .login-modules{grid-template-columns:repeat(2,1fr);gap:24px 8px;margin-top:32px}
  .login-module:nth-child(2)::after{display:none}
  .login-module svg{width:32px;height:32px}
  .login-module strong{font-size:14px}
  .login-module small{font-size:11px}
  .login-access{padding:70px 14px 28px}
  .login-access-slogan{top:17px;right:17px;font-size:11px}
  .login-card{padding:26px 18px 18px;border-radius:16px}
  .login-brand-logo-card{width:155px;margin:0 auto 8px}
  .login-card-header h2{font-size:27px}
  .login-card-header p{font-size:14px;margin-bottom:28px}
  .login-field-label{font-size:13px}
  .login-input-wrap{height:52px;margin-bottom:18px}
  .login-input-wrap input{font-size:14px;padding-left:47px}
  .login-form-meta{font-size:12px;gap:10px;margin-bottom:27px}
  .login-submit,.login-support{height:54px;font-size:15px}
  .login-divider{margin:24px 0 18px}
  .login-version{margin-top:22px}
}

@media (max-width:390px){
  .login-form-meta{align-items:flex-start;flex-direction:column}
  .login-forgot{padding-left:28px}
}

/* =============================================================
   AJUSTE_ALTO
   El diseno original se calculo para una ventana alta. En un
   portatil de menos de ~920 px de alto la columna de acceso no
   cabia y aparecia barra de desplazamiento en toda la pagina.
   Aqui solo se comprime el espaciado vertical y el tamano de
   letra: no se cambia ningun color, ninguna forma ni la
   composicion. En pantallas altas nada de esto se aplica y el
   diseno queda intacto. En movil tampoco: por debajo de 981 px
   manda el bloque original, que si debe poder desplazarse.
   ============================================================= */
@media (min-width:981px){
  .login-page{overflow:hidden}
  .login-shell{height:100vh;min-height:100vh}
  .login-hero{height:100vh;min-height:0}
  .login-access{height:100vh;min-height:0;align-items:center;overflow-y:auto}
}

@media (min-width:981px) and (max-height:920px){
  .login-access{padding:26px 54px}
  .login-card{padding:62px 30px 26px}
  .login-brand-logo-card{width:196px;margin:-30px auto 12px}
  .login-card-header h2{font-size:27px}
  .login-card-header p{font-size:15px;margin-bottom:28px}
  .login-field-label{margin-bottom:7px;font-size:13px}
  .login-input-wrap{height:50px;margin-bottom:15px}
  .login-form-meta{margin:0 0 22px}
  .login-submit{height:52px;font-size:16px}
  .login-divider{margin:22px 0 15px}
  .login-support{height:50px}
  .login-version{margin-top:18px}

  .login-hero-content{padding-top:2.6vh}
  .login-brand-logo-large{width:470px}
  .login-hero-copy h1{font-size:29px;margin-bottom:11px}
  .login-hero-copy p{font-size:16px}
  .login-hero-cloud svg{width:68px;height:68px}
  .login-module svg{width:34px;height:34px;margin-bottom:5px}
  .login-module:not(:last-child)::after{height:58px}
}

@media (min-width:981px) and (max-height:800px){
  .login-access{padding:18px 46px}
  .login-card{padding:54px 26px 20px}
  .login-brand-logo-card{width:172px;margin:-26px auto 8px}
  .login-card-header h2{font-size:24px}
  .login-card-header p{font-size:14px;margin-bottom:22px}
  .login-input-wrap{height:46px;margin-bottom:12px}
  .login-form-meta{margin:0 0 18px;font-size:13px}
  .login-submit{height:48px;font-size:15px}
  .login-divider{margin:18px 0 12px}
  .login-support{height:46px;font-size:14px}
  .login-version{margin-top:14px}

  .login-hero-content{padding-top:1.6vh}
  .login-brand-logo-large{width:400px}
  .login-hero-copy h1{font-size:26px;margin-bottom:9px}
  .login-hero-copy p{font-size:15px}
  .login-hero-features{gap:14px}
  .login-feature{font-size:13px}
  .login-feature svg{width:25px;height:25px}
  .login-hero-cloud{top:32%}
  .login-hero-cloud svg{width:60px;height:60px}
  .login-module svg{width:31px;height:31px}
  .login-module:not(:last-child)::after{height:52px}
}

@media (min-width:981px) and (max-height:700px){
  .login-card{padding:48px 24px 16px}
  .login-brand-logo-card{width:150px;margin:-22px auto 6px}
  .login-card-header h2{font-size:22px}
  .login-card-header p{font-size:13px;margin-bottom:18px}
  .login-input-wrap{height:42px;margin-bottom:10px}
  .login-field-label{margin-bottom:5px;font-size:12px}
  .login-form-meta{margin:0 0 14px}
  .login-submit{height:44px}
  .login-divider{margin:14px 0 10px}
  .login-support{height:42px}
  .login-version{margin-top:10px}
  .login-brand-logo-large{width:340px}
}

/* =============================================================
   RETOQUES_ACCESO
   Anadido despues del diseno original. No cambia la composicion
   ni los colores de marca: solo cierra tres huecos reales.

   1. Aviso de sesion cerrada por inactividad. La pantalla tenia
      sitio para el error del formulario, pero no para explicar
      por que a alguien lo acaban de sacar del panel.
   2. Foco de teclado visible. El boton de entrar, el ojo de la
      contrasena y la casilla no ensenaban nada al tabular: quien
      no usa raton se perdia.
   3. Contraste del texto de apoyo. Los grises claros sobre blanco
      se quedaban por debajo de lo legible en pantallas con brillo
      bajo, que es como se ve un portatil en una caja de empalme.
   ============================================================= */

.login-aviso{
  display:none;
  align-items:flex-start;
  gap:11px;
  margin:-24px 0 26px;
  padding:13px 15px;
  border-radius:11px;
  border:1px solid #ffd9a3;
  background:#fff8ec;
  color:#8a5406;
  font-size:13.5px;
  line-height:1.45;
  text-align:left;
}
.login-aviso.show{display:flex}
.login-aviso svg{
  width:19px;height:19px;flex:0 0 auto;margin-top:1px;
  fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}
.login-aviso strong{display:block;font-weight:750;margin-bottom:1px}

.login-mayus{
  display:none;
  margin:-13px 0 13px;
  color:#8a5406;
  font-size:12.5px;
  line-height:1.3;
}
.login-mayus.show{display:block}

.login-seguridad{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:19px 0 0;
  color:#5d7a9c;
  font-size:12.5px;
  line-height:1.35;
  text-align:center;
}
.login-seguridad svg{
  width:16px;height:16px;flex:0 0 auto;
  fill:none;stroke:#4d80b6;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}

/* Contraste: los grises de apoyo suben un escalon. Mismo tono, mas
   oscuro, para que se lean con el portatil al sol. */
.login-card-header p{color:#566f8d}
.login-form-meta{color:#4f6a89}
.login-version{color:#7a90a8}

/* Foco de teclado. El anillo se dibuja fuera del control para no mover
   nada de sitio. Solo con :focus-visible, asi el raton no lo enciende. */
.login-page :focus-visible{outline:none}
.login-submit:focus-visible,
.login-password-toggle:focus-visible,
.login-support:focus-visible{
  box-shadow:0 0 0 3px #fff,0 0 0 6px rgba(11,131,242,.55);
}
.login-remember input:focus-visible+span{
  box-shadow:0 0 0 3px #fff,0 0 0 6px rgba(11,131,242,.55);
}

/* El enlace de olvido y el de soporte todavia no llevan a ningun sitio.
   Que se vean apagados evita el clic que no responde. */
.login-forgot[aria-disabled="true"],
.login-support[aria-disabled="true"]{
  opacity:.62;
  cursor:not-allowed;
}

@media (prefers-reduced-motion:reduce){
  .login-page *{transition:none!important;animation:none!important}
}

@media (max-width:600px){
  .login-aviso{margin:-18px 0 20px;font-size:13px}
  .login-seguridad{font-size:11.5px;margin-top:15px}
}

@media (min-width:981px) and (max-height:920px){
  .login-aviso{margin:-16px 0 18px;padding:11px 13px}
  .login-seguridad{margin-top:14px}
}

@media (min-width:981px) and (max-height:800px){
  .login-aviso{margin:-12px 0 14px;font-size:13px}
  .login-seguridad{margin-top:11px;font-size:12px}
}