/* Tela de login - ERP RH Solutions (mesmo visual do site) */
:root {
  --ink: #06303d; --ink-2: #0b4452; --mint: #0ae6a8; --mint-soft: #e6fbf5;
  --teal: #0aa393; --teal-d: #07857c; --text: #11303a; --muted: #56707a;
  --line: #e2ecea; --bg-soft: #f4f9f8; --danger: #c53030;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--text); background: #fff; -webkit-font-smoothing: antialiased; }
h1, h2 { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; margin: 0; letter-spacing: -.03em; line-height: 1.15; }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

.pagina { min-height: 100vh; display: grid; grid-template-columns: minmax(380px, 1fr) minmax(420px, 1fr); }

/* ---------- Lado da marca ---------- */
.marca {
  position: relative; overflow: hidden; color: #fff; padding: 48px 56px;
  display: flex; flex-direction: column; justify-content: space-between;
  background:
    radial-gradient(600px 420px at 100% 0%, rgba(10, 230, 168, .22), transparent 70%),
    radial-gradient(500px 400px at 0% 100%, rgba(18, 185, 168, .18), transparent 70%),
    linear-gradient(160deg, #06303d 0%, #0a4a55 100%);
}
.marca::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 22px 22px;
  mask-image: linear-gradient(180deg, transparent, #000 40%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, transparent);
}
.marca::after {
  content: ""; position: absolute; width: 420px; height: 420px; right: -140px; bottom: -140px; border-radius: 50%;
  border: 60px solid rgba(10, 230, 168, .08);
}
.marca > * { position: relative; z-index: 1; }
.marca-logo { height: 46px; width: auto; }
.selo {
  display: inline-block; padding: 6px 14px; border-radius: 999px; margin-bottom: 20px;
  background: rgba(10, 230, 168, .14); color: var(--mint); font-size: 13px; font-weight: 600; letter-spacing: .02em;
}
.marca h1 { font-size: clamp(30px, 3vw, 42px); font-weight: 800; max-width: 460px; }
.marca ul { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 14px; }
.marca li { display: flex; align-items: center; gap: 12px; font-size: 16px; color: rgba(255, 255, 255, .86); }
.marca li .ic { width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: rgba(10, 230, 168, .18); color: var(--mint); stroke-width: 3; }
.marca-rodape { font-size: 13px; color: rgba(255, 255, 255, .5); }

/* ---------- Lado do formulário ---------- */
.lado-form { position: relative; display: flex; align-items: center; justify-content: center; padding: 48px 24px; background: #fff; }
.voltar {
  position: absolute; top: 28px; right: 32px; display: inline-flex; align-items: center; gap: 6px;
  color: var(--muted); font-size: 14px; font-weight: 500; text-decoration: none; padding: 8px 12px; border-radius: 8px;
}
.voltar:hover { color: var(--ink); background: var(--bg-soft); }
.voltar .ic { width: 18px; height: 18px; }
.caixa { width: 100%; max-width: 400px; }
.logo-mobile { display: none; height: 40px; width: auto; margin-bottom: 32px; }
.caixa h2 { font-size: 34px; font-weight: 800; color: var(--ink); }
.sub { margin: 8px 0 28px; color: var(--muted); font-size: 15.5px; }

.aviso { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; font-size: 14.5px; font-weight: 500; margin-bottom: 20px; }
.aviso .ic { margin-top: 1px; }
.aviso-erro { background: #fdecec; color: var(--danger); }
.aviso-info { background: #fff6e5; color: #9a6200; }
.aviso-ok   { background: var(--mint-soft); color: var(--teal-d); }

form { display: grid; gap: 18px; }
.campo { display: grid; gap: 7px; }
.campo > span { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.entrada {
  position: relative; display: flex; align-items: center; height: 52px; border-radius: 12px;
  border: 1.5px solid var(--line); background: var(--bg-soft); transition: border-color .2s, box-shadow .2s, background .2s;
}
.entrada > .ic { position: absolute; left: 14px; color: var(--muted); pointer-events: none; }
.entrada input {
  flex: 1; height: 100%; border: 0; background: transparent; outline: none; min-width: 0;
  padding: 0 14px 0 46px; font: 400 16px 'Inter', sans-serif; color: var(--text);
}
.entrada:focus-within { border-color: var(--teal); background: #fff; box-shadow: 0 0 0 4px rgba(10, 163, 147, .14); }
.entrada:focus-within > .ic { color: var(--teal-d); }
.entrada.erro { border-color: var(--danger); }
.olho { width: 44px; height: 44px; margin-right: 4px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.olho:hover { color: var(--ink); background: rgba(6, 48, 61, .05); }
.caps { color: #9a6200; font-size: 12.5px; font-weight: 500; }

.linha { display: flex; justify-content: space-between; align-items: center; margin-top: -4px; }
.lembrar { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); cursor: pointer; }
.lembrar input { width: 17px; height: 17px; accent-color: var(--teal); }

.btn {
  height: 54px; border: 0; border-radius: 999px; cursor: pointer; margin-top: 4px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--mint); color: var(--ink); font: 700 16px 'Inter', sans-serif;
  box-shadow: 0 8px 20px rgba(10, 230, 168, .30); transition: transform .2s, box-shadow .2s, background .2s;
}
.btn:hover { transform: translateY(-2px); background: #1ff0b4; box-shadow: 0 12px 28px rgba(10, 230, 168, .40); }
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.btn:disabled { opacity: .7; transform: none; cursor: wait; }
.ajuda { margin: 28px 0 0; text-align: center; font-size: 14px; color: var(--muted); }

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
  .pagina { grid-template-columns: 1fr; }
  .marca { display: none; }
  .lado-form { align-items: flex-start; padding: 88px 20px 40px; background: linear-gradient(180deg, #eef8f5 0%, #fff 40%); }
  .logo-mobile { display: block; }
  .voltar { top: 20px; right: 16px; }
}