/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║ public/login/login.css — Login | CONSART WEBMAIL (clean webmail style)    ║
   ║ - Layout clean + ícones nos campos                                       ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */

:root{
  --bg: #ffffff;
  --card: #ffffff;
  --stroke: #dfe6ee;
  --txt: #1b2430;
  --muted: #6b7a8c;

  --primary: #4aa7ff;
  --primaryHover: #2f95ff;

  --danger: #ff4d4d;
  --ok: #22c55e;

  --shadow: 0 14px 40px rgba(10, 30, 60, .12);
  --r: 10px;

  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

*{ box-sizing:border-box; }

body.login-page{
  margin:0;
  min-height: 100vh;
  font-family: var(--font);
  color: var(--txt);
  background: var(--bg);
  display:grid;
  place-items:center;
}

/* centralizado como o login 2 */
.wrap{
  width: 100%;
  min-height: 100vh;
  padding-top: 50px;        /* controla a altura do bloco */
  display: flex;
  justify-content: center;
}

.card{
  width: min(420px, 92vw);
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* Logo central no topo */
.brand{
  display:flex;
  flex-direction: column;
  align-items:center;
  text-align:center;
  gap: 6px;
  margin-bottom: 8px; /* ↓ aproxima do formulário */
}

.brand__logoimg{
  width: 450px;
  max-width: 100%;
  height: auto;
  display:block;
}

.brand__subtitle{
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px; /* garante mais “colado” */
}

/* Form */
.form{
  display:flex;
  flex-direction: column;
  gap: 10px; /* era 12px */
}

.field label{
  display:block;
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 6px;
}

/* ─────────────────────────────────────────────
   Inputs com ícones (estilo webmail)
───────────────────────────────────────────── */

.input-icon{
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon .icon{
  position: absolute;
  left: 12px;
  font-size: 15px;
  opacity: .65;
  pointer-events: none;
}

.input-icon input{
  width:100%;
  padding: 11px 12px;
  padding-left: 38px;   /* espaço para ícone */
  padding-right: 44px;  /* espaço para botão olho */
  border-radius: 8px;
  border: 1px solid var(--stroke);
  background: #fff;
  color: var(--txt);
  outline: none;
}

.input-icon input:focus{
  border-color: rgba(74,167,255,.75);
  box-shadow: 0 0 0 3px rgba(74,167,255,.18);
}

.input-icon input::placeholder{ color: #9aa9bb; }

/* botão olho dentro do campo */
.iconbtn{
  width: 42px;
  height: 42px;
  border-radius: 8px;
  border: 1px solid var(--stroke);
  background: #f7fbff;
  color: #2b3a4a;
  cursor: pointer;
}

.iconbtn:hover{ background: #eef6ff; }

/* versão interna (sem borda, dentro do input) */
.iconbtn--inside{
  position: absolute;
  right: 6px;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  opacity: .65;
}

.iconbtn--inside:hover{
  opacity: 1;
}

/* Linha: remember + limpar */
.row{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 12px;
  margin-top: 2px;
}

.check{
  display:flex;
  align-items:center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.link{
  border: none;
  background: transparent;
  color: #2f95ff;
  cursor: pointer;
  font-weight: 700;
  padding: 0;
}

.link:hover{ text-decoration: underline; }

/* Botões */
.btn{
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgba(47,149,255,.25);
  background: #f7fbff;
  color: #1b2430;
  cursor: pointer;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
}

.btn--primary{
  background: var(--primary);
  border-color: rgba(0,0,0,.08);
  color: #fff;
}

.btn--primary:hover{ background: var(--primaryHover); }

.btn:active{ transform: translateY(1px); }

/* Mensagens */
.msg{
  margin: 6px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.10);
  background: #f6f8fb;
  color: #1b2430;
  font-size: 13px;
}

.msg--err{
  border-color: rgba(255,77,77,.35);
  background: rgba(255,77,77,.10);
}

.msg--ok{
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.10);
}

.hidden{ display:none !important; }

/* Footer */
.foot{
  margin-top: 10px;
  display:flex;
  justify-content:center;
}
.muted{ color: var(--muted); }

/* Mobile tweak */
@media (max-width: 420px){
  .brand__logoimg{ width: 190px; }
  .card{ padding: 18px; }
}