/* Portal de Automações — mesma linguagem visual do módulo de Conciliação de NF-e:
   mesmos tokens de cor, mesma escala tipográfica, mesmos cartões e foco. */
:root{
  --ink:#173027;
  --green:#1c5a3c;
  --green-esc:#123f2a;
  --lime:#91b63d;
  --paper:#f4f6f8;
  --line:#dde5df;
  --muted:#69776f;
  --surface-soft:#f7f9f7;
  --shadow:0 1px 3px rgba(15,37,27,.07);
  --shadow-card:0 10px 30px rgba(36,70,50,.07);
  --ruim:#a93a2b;--ruim-bg:#fdf1ee;--ruim-line:#eec8c0;
  --atencao:#8a6413;--atencao-bg:#fff8e8;--atencao-line:#e9d8a3;
  --bom:#2b7043;--bom-bg:#eaf5ed;--bom-line:#c6e2cd;
  /* tons repetidos em varios componentes: nomeados para poder trocar em bloco no tema escuro */
  --surface:#fff;--surface-hover:#e1ebe4;--chip-bg:#edf3ee;--ink-soft:#53645b;
  /* serifada nos títulos de marca (login e recepção); o resto segue sem serifa */
  --serif:Georgia,"Times New Roman",Cambria,"Noto Serif",serif;
}
*{box-sizing:border-box}
input[type="checkbox"]{accent-color:var(--green)}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Inter,Segoe UI,Arial,sans-serif;
  font-size:13px;
}
.eyebrow{
  display:block;
  color:#6e8b2d;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-weight:900;
  font-size:11px;
}
:where(a,button,input,select,summary):focus-visible{
  outline:3px solid rgba(75,135,90,.28);
  outline-offset:2px;
}

/* ------------------------------------------------------------ painel */
.dashboard{width:100%;max-width:none;margin:0;padding:26px clamp(18px,2.4vw,32px) 40px}
.dashboard h1{font-size:clamp(26px,2.8vw,34px);letter-spacing:-.03em;margin:0 0 20px}
.lead{font-size:15px;color:var(--muted);line-height:1.5;margin:0 0 26px;max-width:64ch}

.module-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.module-card{
  display:flex;
  flex-direction:column;
  min-height:224px;
  padding:22px;
  border:1px solid var(--line);
  border-top:3px solid var(--lime);
  border-radius:15px;
  background:var(--surface);
  color:inherit;
  text-decoration:none;
  box-shadow:var(--shadow-card);
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
.module-card:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(36,70,50,.14)}
.module-card.livro{border-top-color:#4c8c65}
.module-card.financeiro{border-top-color:#d6a438}
.module-head{display:flex;align-items:center;justify-content:center;gap:11px;margin-bottom:13px}
/* PNG transparente: sem fundo em tema nenhum, senao a marca ganha uma caixa. */
.module-icon{width:34px;height:auto;flex:none;background:none}
.module-card h2{margin:0;font-size:18px;letter-spacing:-.015em;text-align:center}
.module-card p{
  margin:0 auto 22px;
  color:var(--ink-soft);
  font-size:13.5px;
  line-height:1.55;
  max-width:42ch;
  text-align:center;
}
.module-abrir{
  margin-top:auto;
  align-self:center;
  display:inline-flex;
  align-items:center;
  height:42px;
  padding:0 26px;
  border:1.5px solid var(--green);
  border-radius:10px;
  color:var(--green);
  font-size:12px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
  transition:background .16s,color .16s;
}
.module-card:hover .module-abrir{background:var(--green);color:#fff}
/* Sem permissão não é botão: é um aviso, e não pode parecer clicável. */
.module-restrito{
  margin-top:auto;
  align-self:center;
  padding-top:14px;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.module-card .tag{
  align-self:center;
  margin:0 0 12px;
  padding:4px 10px;
  border-radius:999px;
  background:#eaf3cf;
  color:#597a17;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.03em;
}
/* Módulo sem permissão: mesmo cartão, claramente inerte — não some (some
   confundiria "não existe" com "não posso"), mas não convida ao clique. */
.module-card.restrito{cursor:not-allowed;opacity:.6;filter:grayscale(.4)}
.module-card.restrito:hover{transform:none;box-shadow:var(--shadow-card)}
.module-card .tag.vazio{visibility:hidden}
.module-card .tag.bloqueado{display:inline-flex;align-items:center;gap:4px;background:var(--ruim-bg);color:var(--ruim)}

.painel-body{min-height:100vh;display:flex;flex-direction:column}
.painel-body .dashboard{flex:1 0 auto}
.painel-body .rodape{margin-top:auto}

/* Rodapé de marca: fecha a página e dá presença à logomarca, no lugar do
   parágrafo técnico sobre views FSV_ que não dizia nada ao operador. */
.rodape{
  display:flex;
  align-items:center;
  gap:13px;
  padding:18px clamp(18px,2.4vw,32px) 34px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:12px;
  font-weight:600;
}
.rodape img{height:30px;width:auto;opacity:.85}

/* ------------------------------------------------------------- login */
.login-body{min-height:100vh;background:var(--surface)}
.login-shell{min-height:100vh;display:grid;grid-template-columns:1fr clamp(400px,36vw,560px)}
/* Foto da lavoura ocupando o painel inteiro; o degradê escurece topo e base
   para a logomarca e a frase lerem sobre qualquer trecho da imagem. */
.login-brand{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:clamp(34px,4.6vw,64px);
  background:#0a1c12 url("img/campo.jpg") center/cover no-repeat;
  overflow:hidden;
}
.login-brand:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,rgba(8,26,16,.52),rgba(8,26,16,.10) 42%,rgba(8,26,16,.88));
}
.login-logo{
  position:relative;z-index:1;
  align-self:flex-start;
  width:min(262px,50%);
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.55));
}
.login-frase{
  position:relative;z-index:1;
  margin:0;
  max-width:15ch;
  color:#fff;
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(30px,3.6vw,52px);
  line-height:1.06;
  letter-spacing:-.02em;
  text-shadow:0 2px 20px rgba(0,0,0,.45);
}

.login-panel{position:relative;display:grid;place-items:center;padding:clamp(28px,4vw,48px)}
.login-card{width:min(380px,100%)}
.login-card h1{font-family:var(--serif);font-size:clamp(28px,2.6vw,34px);letter-spacing:-.02em;margin:0 0 8px}
.muted{color:var(--muted);font-size:13.5px;line-height:1.55;margin:0 0 26px}
.login-card label{
  display:grid;
  gap:7px;
  margin:0 0 16px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--muted);
}
.campo{position:relative;display:block}
.campo-ic{
  position:absolute;
  left:14px;top:50%;
  transform:translateY(-50%);
  width:17px;height:17px;
  color:var(--green);
  pointer-events:none;
}
.login-card input{
  width:100%;
  height:48px;
  border:1px solid var(--line);
  border-radius:10px;
  padding:0 14px 0 41px;
  background:var(--surface);
  color:var(--ink);
  font:inherit;
  font-size:14.5px;
  outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.login-card input::placeholder{color:var(--muted);opacity:.7}
.login-card input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(75,135,90,.18)}
.campo-senha input{padding-right:46px}
.ver-senha{
  position:absolute;
  right:7px;top:50%;
  transform:translateY(-50%);
  width:34px;height:34px;
  display:grid;place-items:center;
  padding:0;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  transition:.15s;
}
.ver-senha:hover{background:var(--chip-bg);color:var(--green)}
.ver-senha svg{width:17px;height:17px}
.login-card button[type=submit]{
  width:100%;
  height:48px;
  margin:8px 0 18px;
  border:0;
  border-radius:10px;
  background:var(--green);
  color:#fff;
  font:inherit;
  font-size:14.5px;
  font-weight:800;
  letter-spacing:.02em;
  cursor:pointer;
  transition:background .15s;
}
.login-card button[type=submit]:hover{background:var(--green-esc)}
.login-card button[type=submit]:disabled{opacity:.6;cursor:progress}
.login-card small{display:block;color:var(--muted);font-size:11.5px;line-height:1.5;text-align:center}
.alert{
  margin:0 0 18px;
  padding:12px 14px;
  border:1px solid var(--ruim-line);
  border-left:4px solid var(--ruim);
  border-radius:9px;
  background:var(--ruim-bg);
  color:var(--ruim);
  font-size:13px;
  line-height:1.45;
}
.alert.system{
  border-color:var(--atencao-line);
  border-left-color:var(--atencao);
  background:var(--atencao-bg);
  color:var(--atencao);
}

@media(max-width:1180px){
  .module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* A foto vira faixa: some a coluna lateral, mas a marca continua presente. */
@media(max-width:980px){
  .login-shell{grid-template-columns:1fr}
  .login-brand{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    min-height:184px;
    padding:24px 22px;
  }
  .login-logo{width:172px;align-self:auto}
  .login-frase{font-size:24px;max-width:11ch;text-align:right}
  .login-panel{padding:32px 20px 46px}
  /* Na faixa curta o degrade vertical deixa o meio quase limpo e a logomarca
     cai sobre o trecho claro da foto; aqui o escurecimento vira uniforme. */
  .login-brand:after{background:linear-gradient(90deg,rgba(8,26,16,.84),rgba(8,26,16,.58))}
}
@media(max-width:900px){
  .dashboard{padding:22px 16px 40px}
  .rodape{padding-inline:16px}
}
@media(max-width:700px){
  .module-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  /* sem a frase sobra so a logomarca: centralizada fica melhor que encostada. */
  .login-brand{min-height:150px;justify-content:center}
  .login-frase{display:none}
}
/* ---------------------------------------------------------------- tema escuro */
:root[data-theme="dark"]{
  --ink:#e9ebe4;--green:#3fa563;--green-esc:#5cbb7e;--lime:#a8cf5c;--paper:#0e1512;
  --line:#39443c;--muted:#9aa3a0;--surface-soft:#182019;
  --shadow:0 1px 2px rgba(0,0,0,.35);--shadow-card:0 10px 30px rgba(0,0,0,.4);
  --surface:#141b16;--surface-hover:#1a2b20;--chip-bg:#1c2420;--ink-soft:#c7cdc7;
  --ruim:#e5877a;--ruim-bg:#331a1a;--ruim-line:#4a2624;
  --atencao:#e6d34a;--atencao-bg:#2c2a12;--atencao-line:#4a4520;
  --bom:#5cbb7e;--bom-bg:#15271c;--bom-line:#28402f;
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ink:#e9ebe4;--green:#3fa563;--green-esc:#5cbb7e;--lime:#a8cf5c;--paper:#0e1512;
  --line:#39443c;--muted:#9aa3a0;--surface-soft:#182019;
  --shadow:0 1px 2px rgba(0,0,0,.35);--shadow-card:0 10px 30px rgba(0,0,0,.4);
  --surface:#141b16;--surface-hover:#1a2b20;--chip-bg:#1c2420;--ink-soft:#c7cdc7;
  --ruim:#e5877a;--ruim-bg:#331a1a;--ruim-line:#4a2624;
  --atencao:#e6d34a;--atencao-bg:#2c2a12;--atencao-line:#4a4520;
  --bom:#5cbb7e;--bom-bg:#15271c;--bom-line:#28402f;
}}

/* Correções pontuais: acentos fixos que não passam pelas variáveis acima. */
:root[data-theme="dark"] .eyebrow{color:var(--lime)}
:root[data-theme="dark"] .module-card .tag{background:var(--bom-bg);color:var(--bom)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .eyebrow{color:var(--lime)}
:root:not([data-theme="light"]) .module-card .tag{background:var(--bom-bg);color:var(--bom)}
}

/* Login e recepção no tema escuro: o painel do formulário segue --surface, mas
   a foto e seus degradês continuam fixos (já são escuros nos dois temas). */
:root[data-theme="dark"] .login-body{background:var(--paper)}
:root[data-theme="dark"] .rodape img{opacity:.75}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .login-body{background:var(--paper)}
:root:not([data-theme="light"]) .rodape img{opacity:.75}
}

/* Botão de alternar tema. */
.theme-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;
  border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink-soft);
  cursor:pointer;padding:0;transition:.12s}
.theme-btn:hover{background:var(--surface-hover);border-color:var(--muted)}
.theme-btn svg{width:17px;height:17px}
.login-panel{position:relative}
.login-panel .theme-btn{position:absolute;top:clamp(16px,3vw,28px);right:clamp(16px,3vw,28px)}

/* --------------------------------------------------------- gestão de usuários */
.card-painel{
  padding:20px;
  margin:0 0 18px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-card);
}
.adicionar-usuario{display:flex;align-items:end;gap:12px;flex-wrap:wrap}
.adicionar-usuario label{
  display:grid;gap:6px;flex:1 1 260px;min-width:220px;
  font-size:10px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);
}
.adicionar-usuario input{
  height:42px;border:1px solid var(--line);border-radius:9px;padding:0 12px;
  background:var(--surface);color:var(--ink);font:inherit;font-size:14px;outline:none;
}
.adicionar-usuario input:focus{border-color:#7fa98d;box-shadow:0 0 0 3px rgba(75,135,90,.18)}
.primary-action{
  height:42px;padding:0 20px;border:0;border-radius:9px;background:var(--green);color:#fff;
  font:inherit;font-size:14px;font-weight:800;letter-spacing:.02em;cursor:pointer;white-space:nowrap;
}
.primary-action:hover{background:var(--green-esc)}
/* No tema escuro o verde clareia: texto branco não alcança 4,5:1. */
:root[data-theme="dark"] .primary-action{color:#0b1a12}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .primary-action{color:#0b1a12}}
.dica{margin:12px 0 0;color:var(--muted);font-size:12.5px;line-height:1.5}

.tabela-wrap{overflow-x:auto}
.tabela-usuarios{width:100%;border-collapse:collapse;min-width:760px;font-size:13px}
.tabela-usuarios th{
  padding:10px 12px;text-align:left;white-space:nowrap;
  background:var(--surface-soft);color:var(--muted);
  font-size:10px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  border-bottom:1px solid var(--line);
}
.tabela-usuarios td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tabela-usuarios tbody tr:last-child td{border-bottom:0}
.tabela-usuarios tbody tr:hover{background:var(--surface-hover)}
.col-usuario{white-space:nowrap}
.col-check{text-align:center;white-space:nowrap}
.col-check input{width:17px;height:17px;cursor:pointer}
.col-check input:disabled{cursor:not-allowed;opacity:.45}
.col-acesso{color:var(--muted);font-size:12px;white-space:nowrap}
.col-status{min-width:120px}
.voce{
  display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;
  background:var(--chip-bg);color:var(--green);font-size:10px;font-weight:800;text-transform:uppercase;
}
.status-linha{font-size:12px;font-weight:700}
.status-linha.salvando{color:var(--muted)}
.status-linha.ok{color:var(--bom)}
.status-linha.erro{color:var(--ruim)}

@media(max-width:640px){
  .adicionar-usuario{flex-direction:column;align-items:stretch}
  .adicionar-usuario label{min-width:0}
}