/* Estilos de la página de acceso (/login). Externos para permitir CSP sin
   'unsafe-inline' en style-src. Usan las variables de style.css. */
.lg-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.lg-card { width: 100%; max-width: 380px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; padding: 2rem 1.75rem; box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.lg-brand { font-family: var(--mono); font-size: .72rem; letter-spacing: .18em; color: var(--accent-2); text-transform: uppercase; }
.lg-title { font-size: 1.35rem; margin: .35rem 0 1.4rem; color: var(--text); }
.lg-field { margin-bottom: .9rem; }
.lg-field label { display: block; font-size: .78rem; color: var(--muted); margin-bottom: .35rem; }
.lg-field input { width: 100%; padding: .7rem .8rem; background: #0a0e18; border: 1px solid var(--line);
  border-radius: 9px; color: var(--text); font-family: inherit; font-size: .95rem; box-sizing: border-box; }
.lg-field input:focus { outline: none; border-color: var(--accent); }
.lg-btn { width: 100%; padding: .75rem; border: 0; border-radius: 9px; cursor: pointer; font-family: inherit;
  font-size: .95rem; font-weight: 600; color: #0a0c14; background: linear-gradient(135deg, var(--accent), var(--teal)); }
.lg-btn:disabled { opacity: .55; cursor: default; }
.lg-otp { display: flex; gap: .5rem; margin-top: .6rem; }
.lg-otp button { flex: 1; padding: .55rem; background: transparent; border: 1px solid var(--line);
  border-radius: 8px; color: var(--accent-2); font-family: var(--mono); font-size: .72rem; cursor: pointer; }
.lg-otp button:hover { background: rgba(108,99,255,.12); }
.lg-msg { margin-top: 1rem; font-size: .82rem; min-height: 1.1em; }
.lg-msg.err { color: #ff6b6b; }
.lg-msg.ok { color: var(--teal); }
.lg-hide { display: none; }
.lg-foot { margin-top: 1.4rem; font-size: .72rem; color: var(--dim); font-family: var(--mono); }
/* Ojo mostrar/ocultar contraseña */
.lg-pass { position: relative; }
.lg-pass input { padding-right: 2.6rem; }
.lg-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; border-radius: 6px; cursor: pointer; opacity: .7; background: transparent center / 19px 19px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa3b2' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 12S5.5 5 12 5s10.5 7 10.5 7-4 7-10.5 7S1.5 12 1.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.lg-eye:hover { opacity: 1; }
.lg-eye.is-on { opacity: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c63ff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 6.1A10.8 10.8 0 0 1 12 6c6.5 0 10.5 6 10.5 6a18 18 0 0 1-3.3 3.9M6.3 6.3A18 18 0 0 0 1.5 12S5.5 18 12 18c1.5 0 2.8-.3 4-.8'/%3E%3C/svg%3E"); }
/* Confiar en este dispositivo */
.lg-check { display: flex; align-items: flex-start; gap: .5rem; font-size: .8rem; color: var(--muted); margin: 0 0 .9rem; cursor: pointer; line-height: 1.3; }
.lg-check input { margin-top: .15rem; accent-color: var(--accent); flex-shrink: 0; }
/* Link de texto (olvidé / volver) */
.lg-textlink { display: block; width: 100%; text-align: center; background: none; border: 0; color: var(--accent-2); font-family: inherit; font-size: .8rem; cursor: pointer; margin-top: .9rem; padding: .3rem; }
.lg-textlink:hover { color: var(--accent-3); text-decoration: underline; }