/* ═══════════════════════════════════════════════════════════════════════
   MARCA.CSS — login corporativo para las páginas que NO cargan comun.css
   (caja, nómina, proyectos, tablet, trabajadores)

   Esas páginas son mini-apps con su propio CSS y su propia autenticación.
   Enlazar comun.css ahí chocaría con sus .app-header, .btn, .btn-primary,
   .field y .tabs, así que este archivo trae SOLO lo del login.

   Los colores van en hexadecimal a propósito: no depende de que la página
   tenga definidos los tokens de marca en su :root.

   IMPORTANTE: enlazar DESPUÉS del <style> propio de la página, para que
   la regla de #login-overlay de aquí gane a la de ellos.
   ═══════════════════════════════════════════════════════════════════════ */

/* La página lo prende con .style.display='flex' (inline gana sobre esto) */
#login-overlay{
  position:fixed; inset:0; z-index:9999;
  display:none; align-items:center; justify-content:center; padding:20px;
  background:#f7f7f7;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(1,106,109,.055) 0, transparent 42%),
    radial-gradient(circle at 88% 82%, rgba(224,106,60,.10) 0, transparent 45%);
  overflow-y:auto;
  font-family:'Nunito Sans','Segoe UI',system-ui,sans-serif;
}

.login-card{
  background:#fff; border:1px solid #d9d8d4; border-radius:20px;
  box-shadow:0 18px 50px rgba(0,62,80,.16);
  padding:34px 30px 28px; max-width:400px; width:100%;
  animation:marca-rise .5s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes marca-rise{ from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;} }

.login-lockup{ display:flex; justify-content:center; }
#login-overlay .logo-mark{ display:inline-flex; gap:3px; align-items:center; }
#login-overlay .logo-mark .l{
  width:30px; height:30px; background:#003e50;
  display:flex; align-items:center; justify-content:center;
  font-size:17px; font-weight:900; color:#fff; letter-spacing:-.5px; border-radius:2px;
}
.login-tagline{
  background:#003e50; color:#fff;
  font-size:8.5px; font-weight:700; letter-spacing:.055em;
  text-align:center; padding:5px 8px; border-radius:2px;
  margin:7px 0 22px; line-height:1.3;
}

.login-h{ font-size:19px; font-weight:900; color:#003e50; text-align:center; letter-spacing:-.01em; }
.login-p{ font-size:13px; color:#46707c; text-align:center; margin:5px 0 22px; }

.login-field{ position:relative; margin-bottom:14px; }
.login-field label{
  display:block; font-size:11px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:#46707c; margin-bottom:6px;
}
.login-input{
  width:100%; box-sizing:border-box;
  padding:12px 14px; border:1.5px solid #d9d8d4; border-radius:8px;
  font-family:inherit; font-size:15px; color:#003e50; background:#fff;
  transition:border-color .15s, box-shadow .15s;
}
.login-input:focus{ outline:none; border-color:#016a6d; box-shadow:0 0 0 3px rgba(1,106,109,.10); }
.login-input::placeholder{ color:#9bb0b6; }

.login-eye{
  position:absolute; right:6px; bottom:6px;
  width:34px; height:34px; border:none; background:none; cursor:pointer;
  display:grid; place-items:center; color:#46707c; border-radius:6px;
}
.login-eye:hover{ color:#016a6d; background:rgba(1,106,109,.055); }
.login-eye svg{ width:19px; height:19px; fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.login-eye svg[hidden]{ display:none; }

.login-btn{
  width:100%; margin-top:6px; padding:13px;
  background:#003e50; color:#fff; border:none; border-radius:8px;
  font-family:inherit; font-size:15px; font-weight:800; letter-spacing:.02em;
  cursor:pointer; transition:background .16s, transform .12s;
}
.login-btn:hover:not(:disabled){ background:#016a6d; }
.login-btn:active:not(:disabled){ transform:translateY(1px); }
.login-btn:disabled{ opacity:.65; cursor:progress; }

.login-msg{ margin-top:13px; font-size:13px; font-weight:600; color:#e06a3c;
  min-height:18px; text-align:center; }
.login-link{ display:block; text-align:center; margin-top:8px;
  font-size:13px; font-weight:600; color:#016a6d; text-decoration:none; }
.login-link:hover{ text-decoration:underline; }
.login-pie{ margin-top:22px; padding-top:16px; border-top:1px solid #d9d8d4;
  font-size:11px; color:#46707c; text-align:center; letter-spacing:.04em; }

#login-overlay a:focus-visible,
#login-overlay button:focus-visible,
#login-overlay input:focus-visible{ outline:2px solid #016a6d; outline-offset:2px; }

@media (max-width:600px){
  .login-card{ padding:28px 22px 24px; border-radius:16px; }
}
@media (prefers-reduced-motion:reduce){
  .login-card{ animation:none; }
}