/* Conecta — folha de estilo das telas de acesso.
   Extraida do app.css do Conecta NR01 (v2.0), so o necessario para login,
   definicao de senha e avisos publicos. Mesma paleta e mesmas medidas, para as
   tres plataformas terem a mesma porta de entrada.
   Nao editar por produto: se mudar, mudar em todas as copias. */

:root{
  --paper:#F7F5F0; --surface:#FFFFFF; --surface-2:#FBFAF7; --surface-3:#F2EFE8;
  --line:#E3DFD6; --line-soft:#EDEAE2; --line-strong:#D3CEC2;
  --ink:#1B1A17; --ink-2:#57544B; --ink-3:#8A8577;
  --accent:#14544A; --accent-2:#0E3B34; --accent-soft:#E7EFEC; --accent-line:#B9D0C9;
  --amber:#8A5D0F; --amber-soft:#FAF1DF;
  --red:#96271E; --red-soft:#F8E9E6;
  --green:#1E5B32; --green-soft:#E7F0E9;
  --r:6px;
  --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font:400 14px/1.5 var(--sans);
     -webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-2);text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:var(--accent);color:#fff}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;margin:0}
hr{border:0;border-top:1px solid var(--line);margin:24px 0}

/* ------------------------------------------------------------------- marca */
.mark{width:28px;height:28px;border-radius:5px;background:var(--accent);color:#fff;
      display:grid;place-items:center;font:600 12px var(--mono);flex:none}
.mark-txt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.mark-txt b{font:600 13.5px var(--sans);letter-spacing:-.01em}
.mark-txt span{font:400 10.5px var(--mono);color:var(--ink-3);letter-spacing:.02em}

/* ------------------------------------------------------------------ botoes */
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;
     border-radius:var(--r);border:1px solid var(--line-strong);background:var(--surface);
     color:var(--ink);font-size:13px;font-weight:500;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--surface-3);text-decoration:none;color:var(--ink)}
.btn-p{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-p:hover{background:var(--accent-2);border-color:var(--accent-2);color:#fff}
.btn[disabled],.btn.off{opacity:.45;pointer-events:none}

/* -------------------------------------------------------------- formulario */
.f{display:flex;flex-direction:column;gap:5px;margin-bottom:15px}
.f label{font-size:12.5px;font-weight:500;color:var(--ink-2)}
.f input{padding:9px 11px;border:1px solid var(--line-strong);border-radius:var(--r);
         background:var(--surface);font-size:13.5px;width:100%}
.f input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.f .help{font-size:11.5px;color:var(--ink-3)}

/* ------------------------------------------------------------------ avisos */
.note{border:1px solid var(--line);border-left:3px solid var(--ink-3);border-radius:var(--r);
      padding:12px 15px;background:var(--surface-2);font-size:13px;color:var(--ink-2);
      margin:0 0 16px}
.note b{color:var(--ink)}
.note-accent{border-left-color:var(--accent);background:var(--accent-soft)}
.note-warn{border-left-color:var(--amber);background:var(--amber-soft)}
.note-crit{border-left-color:var(--red);background:var(--red-soft)}
.note-ok{border-left-color:var(--green);background:var(--green-soft)}

/* --------------------------------------------------------- entrar / publico */
.auth{min-height:100vh;display:grid;place-items:center;padding:30px 18px;background:var(--paper)}
.auth-box{width:100%;max-width:394px}
.auth-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:28px}
.auth-mark{display:flex;align-items:center;gap:11px;margin:0 0 22px}
.auth h1{font-size:23px;margin:0 0 6px}
.auth .sub{color:var(--ink-2);font-size:13px;margin:0 0 20px}
.auth-foot{text-align:center;margin-top:16px;font-size:11.5px;color:var(--ink-3)}
.auth-foot a{color:var(--ink-3);text-decoration:underline}