/* ===== Tarjeta de Login (scope: .zl-login) ===== */
.zl-login, .zl-login * { box-sizing: border-box; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; }
.zl-login { --bg:#fff; --fg:#222; --accent:#5a60e7; --muted:#747980; --ring:0 0 0 3px rgba(90,96,231,.35); color:var(--fg); }
.zl-login .card {
  width: min(420px, 92vw);
  margin: 16px auto;
  background: var(--bg);
  color: var(--fg);
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0,0,0,.08);
  padding: 22px;
}
.zl-login h2 { margin: 0 0 14px; font-size: 1.2rem; text-align: center; }
.zl-login .field { margin: 10px 0; position: relative; }
.zl-login .input {
  width: 100%;
  padding: 12px 40px 12px 12px;
  border-radius: 8px;
  border: 1px solid #d7d8e6;
  background: transparent;
  color: inherit;
  font-size: .95rem;
}
.zl-login .input::placeholder { color: #9aa0a6; }
.zl-login .input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.zl-login .toggle {
  position: absolute; inset-inline-end: 10px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; cursor: pointer; font-size: .95rem; opacity: .8;
}
.zl-login .toggle:hover { opacity: 1; }
.zl-login .actions { display: grid; gap: 8px; margin-top: 6px; }
.zl-login .btn {
  display: inline-flex; justify-content: center; align-items: center;
  padding: .7rem 1rem; border-radius: 8px; border: 1px solid var(--accent);
  background: var(--accent); color: #fff; cursor: pointer; text-decoration: none;
}
.zl-login .btn:hover { filter: brightness(1.05); }
.zl-login .links { display: grid; place-items: center; gap: 6px; margin-top: 10px; font-size: .9rem; }
.zl-login .links a { color: var(--accent); text-decoration: none; }
.zl-login .links a:hover { text-decoration: underline; }
.zl-login .alert {
  display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 8px;
  margin-top: 10px; padding: 10px 12px; border-radius: 8px;
  background: #f8d7da; border: 1px solid #f5c6cb; color: #721c24;
}
.hidden { display: none; }
.toggle svg {
  cursor: pointer;
  vertical-align: middle;
}
.toggle svg {
  cursor: pointer;
  vertical-align: middle;
  fill: #1a9cff; /* color azul brillante */
  stroke: #004a99; /* borde más oscuro */
  stroke-width: 0.5px;
  transition: fill 0.3s ease, stroke 0.3s ease;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.15));
  width: 24px;
  height: 24px;
}

.toggle svg:hover {
  fill: #005fcc;
  stroke: #003366;
  filter: drop-shadow(0 0 4px #005fcc);
}

.zl-login .close { border: 0; background: transparent; cursor: pointer; font-size: 1rem; line-height: 1; }
@media (max-width: 420px){ .zl-login .card{ padding: 18px; } }