/* La pantalla de entrada del despacho, con el mismo lenguaje que la del cliente: fondo azul
   marino en degradado, tarjeta blanca encima, acento cian. Hoja aparte de `style.css` porque
   sólo la usa esta pantalla, y porque se sirve sin sesión — cargar aquí la hoja completa del
   portal sería publicar los estilos de todo lo que hay adentro a quien todavía no entra. */
.login-body{
  margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:1.5rem; box-sizing:border-box;
  background:linear-gradient(140deg,#0a1930 0%,#132a46 55%,#16304f 100%);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink,#0f1c2e);
}

.login-card{
  background:#fff; border-radius:18px; padding:2.25rem; max-width:26rem; width:100%;
  box-sizing:border-box; box-shadow:0 24px 60px rgba(10,25,48,.35);
}

.brand-row{display:flex; align-items:center; gap:.75rem; margin-bottom:1.4rem}
.brandmark{width:34px; height:38px; object-fit:contain; display:block; flex:none}
.brand-name{font-size:1.05rem; font-weight:650; letter-spacing:-.3px; color:#0a1930}
.brand-name span{color:#29abe2}

.login-card h1{font-size:1.35rem; margin:0 0 .25rem}
.login-card .sub{margin:0 0 .4rem; color:#4a5b70; font-size:.9rem; line-height:1.6}

/* `hidden` tiene que ganarle a cualquier `display` que se ponga aquí. Sin esto, la regla
   de abajo vuelve visible el formulario del segundo factor —y el sistema le pide un código
   a quien todavía no lo ha pedido—. Va primero y con `!important` a propósito: es la clase
   de error que se ve en la pantalla y no en ninguna prueba de lógica. */
.login-card [hidden]{display:none !important}

.login-card form{display:grid; gap:0; margin:1.2rem 0 0}
.login-card .field{display:block; margin:0 0 1rem; font-size:.85rem; color:#4a5b70}
.login-card .field input{
  width:100%; box-sizing:border-box; margin-top:.4rem; padding:.7rem .85rem;
  border:1px solid #d7e0ec; border-radius:10px; font-size:.95rem; color:#0f1c2e;
  background:#fff; outline:none; transition:border-color .15s, box-shadow .15s;
}
.login-card .field input:focus{border-color:#29abe2; box-shadow:0 0 0 3px #29abe226}
.login-card .field input::placeholder{color:#9aa9bc}

/* El código del segundo factor se lee de un mensaje y se teclea de memoria: separado y
   centrado se cotejan los dígitos de un vistazo. */
.login-card #codigo{font-size:1.5rem; letter-spacing:.5rem; text-align:center;
  font-variant-numeric:tabular-nums}

.login-card .btn{
  width:100%; box-sizing:border-box; display:inline-flex; align-items:center;
  justify-content:center; gap:.6rem; border:0; border-radius:10px; padding:.8rem 1rem;
  font-size:.95rem; font-weight:600; cursor:pointer; text-decoration:none;
  background:#1b8dbd; color:#fff; transition:background .15s;
}
.login-card .btn:hover{background:#15729a}
.login-card .btn:disabled{opacity:.6; cursor:wait}
.login-card .btn.secondary{background:#fff; color:#0f1c2e; border:1px solid #d7e0ec}
.login-card .btn.secondary:hover{background:#f4f7fb; border-color:#bccbdd}
.login-card .btn + .btn{margin-top:.6rem}

.login-note{background:#f4f7fb; border-left:3px solid #29abe2; padding:.85rem .95rem;
  border-radius:0 10px 10px 0; line-height:1.55; font-size:.9rem; margin:0 0 1.1rem}

.login-error{color:#8c2f33; background:#fbeced; border-radius:10px; padding:.75rem .9rem;
  margin:1rem 0 0; font-size:.9rem; line-height:1.55}

.login-sep{display:flex; align-items:center; gap:.8rem; margin:1.4rem 0 1rem;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#8496ab}
.login-sep::before,.login-sep::after{content:""; height:1px; flex:1; background:#e3eaf3}

.login-foot{margin:1.4rem 0 0; font-size:.82rem; color:#8496ab; line-height:1.7}
.login-foot a{color:#1b8dbd}

/* Safari en iOS acerca la pantalla al enfocar un campo de menos de 16px y no la regresa. */
@media(max-width:760px){
  .login-card{padding:1.75rem}
  .login-card .field input{font-size:16px}
  .login-card #codigo{font-size:1.5rem}
}
@media(hover:none){.login-card .btn{min-height:44px}}