/* Telas de acesso (login, troca de senha, Conectar o Claude, usuários).
   Mesmo desenho do sistema de RH da inVista: faixa Azul Legacy + cartão branco,
   PP Watch nos títulos, Inter no corpo, CTA Verde Income. */
@font-face{font-family:"PP Watch";src:url("/fonts/PPWatch-Medium.otf") format("opentype");font-weight:500;font-display:swap}

:root{
  --azul:#051c2c; --azul-2:#08283a; --verde:#007a33; --verde-hover:#00642a; --amarelo:#e3e829;
  --horizon:#f1f0eb; --branco:#fff; --texto:#1b1c19; --texto-2:#4a4a45; --texto-3:#73777d;
  --borda:#e1e7eb; --campo:#f7f7f4; --superficie-alta:#f8f7f2; --perigo:#b91c1c;
  --sombra:0 8px 24px rgba(27,28,25,.08);
  --titulo:"PP Watch","Inter",system-ui,sans-serif; --corpo:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--horizon);color:var(--texto);font:13px/1.5 var(--corpo);-webkit-font-smoothing:antialiased}
h1,h2{font-family:var(--titulo);font-weight:500;margin:0;line-height:1.2;color:var(--texto)}

/* ---- página dividida (login) ---- */
.pagina{min-height:100dvh;display:grid;grid-template-columns:1fr}
.marca{display:none;background:var(--azul);color:var(--horizon);padding:48px 40px;flex-direction:column;justify-content:space-between;align-items:flex-start}
.marca img{max-width:220px;height:auto}
.marca-texto{max-width:26ch;font-size:26px;line-height:1.35;margin:40px 0 0;font-family:var(--titulo);font-weight:500}
.marca-rodape{margin:0;font-size:13px;opacity:.75}
.coluna{display:flex;align-items:center;justify-content:center;padding:32px 16px}
.conteudo{width:100%;max-width:400px;display:flex;flex-direction:column;gap:32px}
.logotipo{display:flex;justify-content:center}
.logotipo img{height:56px;width:auto}
@media (min-width:860px){
  .pagina{grid-template-columns:minmax(320px,42%) 1fr}
  .marca{display:flex}
  .pagina .logotipo{display:none}
}

/* ---- página centrada (conectar / trocar senha) ---- */
.centro{min-height:100dvh;display:grid;place-items:center;padding:24px 16px}
.centro .conteudo{max-width:440px;gap:24px}

/* ---- cartão ---- */
.cartao{display:flex;flex-direction:column;gap:16px;padding:24px 28px;background:var(--branco);border:1px solid var(--borda);border-radius:8px;box-shadow:var(--sombra)}
.cartao h1{font-size:26px}
.formulario{display:flex;flex-direction:column;gap:16px}
.campo{display:flex;flex-direction:column;gap:4px}
.campo span{font-size:12px;font-weight:600;color:var(--texto-2)}
.campo input,.campo select{font:inherit;font-size:14px;color:var(--texto);background:var(--campo);border:1px solid var(--borda);border-radius:6px;padding:11px 14px;outline:none;width:100%}
.campo select{min-height:45px}
.campo input:focus,.campo select:focus{border-color:var(--verde);box-shadow:0 0 0 3px rgba(0,122,51,.12)}
.dica{margin:0;color:var(--texto-3);font-size:12px}

.botao{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:500 13px var(--corpo);border-radius:6px;border:1px solid transparent;cursor:pointer;padding:11px 20px;transition:background-color .15s,border-color .15s,color .15s;text-decoration:none}
.botao:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
.botao:disabled{opacity:.5;cursor:not-allowed}
.primario{background:var(--verde);color:var(--horizon)}
.primario:hover:not(:disabled){background:var(--verde-hover)}
.secundario{background:var(--branco);color:var(--texto-2);border-color:var(--borda)}
.secundario:hover:not(:disabled){background:#f4f3ee;color:var(--texto)}
.perigo{background:var(--branco);color:var(--perigo);border-color:#f0c9c9}
.perigo:hover:not(:disabled){background:#fdf3f3}
.pequeno{padding:6px 12px;font-size:12px}
@media (pointer:coarse){.botao{min-height:44px}.pequeno{min-height:36px}}

.erro{margin:0;color:var(--perigo);font-size:13px}
.aviso{margin:0;padding:12px;border:1px solid var(--verde);border-radius:6px;color:var(--texto);font-size:13px;background:var(--superficie-alta)}
.cuidado{margin:0;padding:12px;border:1px solid var(--verde);border-radius:6px;color:var(--texto);font-size:13px;background:var(--superficie-alta)}
.pergunta{margin:0;color:var(--texto);font-size:14px}
.detalhe{margin:0;color:var(--texto-3);font-size:13px}
.destino{color:var(--texto);font-weight:600;overflow-wrap:anywhere}
.acoes{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px}
.oculto{display:none!important}

/* ---- usuários (admin) ---- */
.topo{background:var(--azul);color:var(--horizon);display:flex;align-items:center;gap:16px;padding:14px 24px}
.topo img{height:30px}
.topo .tit{font-family:var(--titulo);font-size:16px;flex:1}
.topo a{color:var(--horizon);opacity:.85;text-decoration:none;font-size:13px}
.topo a:hover{opacity:1;text-decoration:underline}
.admin{max-width:1080px;margin:24px auto;padding:0 16px;display:flex;flex-direction:column;gap:20px}
.linha{display:grid;grid-template-columns:2fr 2fr 1fr auto;gap:12px;align-items:end}
@media (max-width:760px){.linha{grid-template-columns:1fr}}
.tabela-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-weight:600;color:var(--texto-3);font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding:8px 10px;border-bottom:1px solid var(--borda)}
td{padding:10px;border-bottom:1px solid var(--borda);vertical-align:middle}
td .botao{margin-right:6px}
.etiqueta{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;background:#eef1f3;color:var(--texto-2)}
.etiqueta.ok{background:rgba(0,122,51,.1);color:var(--verde)}
.etiqueta.off{background:#fdecec;color:var(--perigo)}
.etiqueta.admin{background:rgba(227,232,41,.35);color:var(--azul)}
.senha-gerada{font-family:ui-monospace,Consolas,monospace;font-size:15px;background:var(--campo);border:1px dashed var(--verde);border-radius:6px;padding:10px 12px;user-select:all}