/* public/login/LoginPage.css */
* { box-sizing: border-box; }

:root {
  --bg:#0b0f1a;
  --card:#101828;
  --text:#e5e7eb;
  --muted:#9aa0a6;
  --border:rgba(255,255,255,.08);
  --gutter: clamp(12px, 3vw, 24px);
  --accent:#3b82f6;
}

/* ===== Tema Claro ===== */
[data-theme="light"] {
  --bg:#f9fafb;
  --card:#ffffff;
  --text:#1e293b;
  --muted:#6b7280;
  --border:rgba(0,0,0,.08);
  --accent:#2563eb;
}

html, body {
  margin:0; padding:0;
  background:var(--bg); color:var(--text);
  font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial;
  height:100%;
}

.login-wrap {
  min-height:100dvh;
  display:grid; place-items:center;
  padding: var(--gutter);
}

.card {
  width:min(420px, 92vw);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:clamp(16px, 3vw, 24px);
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}

[data-theme="light"] .card {
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}

.login-head h1 { margin:0 0 6px; font-size:22px; }
.muted { color:var(--muted); margin:0 0 16px; }
.field { display:grid; gap:6px; margin:10px 0; }

input[type="text"], input[type="password"] {
  background:#0f172a; color:var(--text);
  border:1px solid var(--border); border-radius:8px;
  padding:10px 12px;
  outline:none;
}

[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="password"] {
  background:#ffffff;
  color:var(--text);
  border:1px solid var(--border);
}

input:focus { border-color:#334155; }
[data-theme="light"] input:focus { border-color:#3b82f6; }

.btn-primary {
  width:100%; margin-top:12px;
  padding:10px 12px; border:0; border-radius:8px;
  background:var(--accent); color:white; font-weight:600; cursor:pointer;
}

.msg {
  min-height:20px;
  margin-top:10px;
  color:#fca5a5;
}

/* ===== Mostrar/ocultar senha com ícone embutido ===== */
.pw-field { position: relative; }
.pw-field > input { width: 100%; padding-right: 44px; }

.pw-eye {
  position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  border: 0; background: none; padding: 0;
  color: var(--muted);
  display: inline-grid; place-items: center;
  cursor: pointer;
}
.pw-eye:hover { color: var(--text); }

/* Ícones (invertidos): por padrão (senha ESCONDIDA) mostra o olho cortado */
.pw-eye .eye-show,
.pw-eye .eye-hide {
  width: 20px; height: 20px; display: none;
}
.pw-eye .eye-hide { display: block; }

/* Quando senha está VISÍVEL, mostra o olho aberto */
.pw-eye.is-visible .eye-hide { display: none; }
.pw-eye.is-visible .eye-show { display: block; }

/* evita que o traço do SVG seja cortado nas bordas do viewBox */
.pw-eye svg { overflow: visible; }