/* Importações Grupo Moveredei — mesma identidade dos documentos do processo. */

:root {
  --ground: #eef2f7;
  --surface: #ffffff;
  --surface-2: #f3f6fa;
  --surface-3: #e6ecf3;
  --ink: #0f1622;
  --ink-2: #4b5a6e;
  --ink-3: #7b8a9e;
  --line: #d3dbe6;
  --line-soft: #e7ecf3;

  --er: #17457e;  /* Eduardo · azul carimbo, também é o acento do sistema */
  --er-soft: #e2eaf6;
  --dv: #8f5d10;  /* Daniel */
  --dv-soft: #f8ecd6;
  --db: #1b6547;  /* Davi */
  --db-soft: #dbece3;
  --tb: #5b3a80;  /* Thiago */
  --tb-soft: #eae2f3;
  --eo: #8a2f3f;  /* Emerson */
  --eo-soft: #f6e2e5;

  --ok: #1b6547;      --ok-soft: #dbece3;
  --aviso: #8f5d10;   --aviso-soft: #f8ecd6;
  --erro: #9e2c2c;    --erro-soft: #f8e3e2;

  --sombra: 0 1px 2px rgba(15, 22, 34, .05), 0 10px 26px -18px rgba(15, 22, 34, .3);
  --raio: 11px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --ground: #0a0e14; --surface: #141b24; --surface-2: #1b232e; --surface-3: #232e3b;
    --ink: #e9eef5; --ink-2: #a3b1c2; --ink-3: #7a8a9e;
    --line: #2a3440; --line-soft: #212a35;
    --er: #7fafee; --er-soft: #16273c;
    --dv: #e0ac54; --dv-soft: #2c2314;
    --db: #5cc494; --db-soft: #122b21;
    --tb: #b294dc; --tb-soft: #241c33;
    --eo: #e58694; --eo-soft: #301a1f;
    --ok: #5cc494; --ok-soft: #122b21;
    --aviso: #e0ac54; --aviso-soft: #2c2314;
    --erro: #e8817d; --erro-soft: #2c1719;
    --sombra: 0 1px 2px rgba(0,0,0,.45), 0 10px 26px -18px rgba(0,0,0,.75);
  }
}

:root[data-tema="escuro"] {
  --ground: #0a0e14; --surface: #141b24; --surface-2: #1b232e; --surface-3: #232e3b;
  --ink: #e9eef5; --ink-2: #a3b1c2; --ink-3: #7a8a9e;
  --line: #2a3440; --line-soft: #212a35;
  --er: #7fafee; --er-soft: #16273c;
  --dv: #e0ac54; --dv-soft: #2c2314;
  --db: #5cc494; --db-soft: #122b21;
  --tb: #b294dc; --tb-soft: #241c33;
  --eo: #e58694; --eo-soft: #301a1f;
  --ok: #5cc494; --ok-soft: #122b21;
  --aviso: #e0ac54; --aviso-soft: #2c2314;
  --erro: #e8817d; --erro-soft: #2c1719;
  --sombra: 0 1px 2px rgba(0,0,0,.45), 0 10px 26px -18px rgba(0,0,0,.75);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin: 0;
  letter-spacing: -.018em;
  text-wrap: balance;
}
h1 { font-size: 1.7rem; font-weight: 800; }
h2 { font-size: 1.25rem; font-weight: 700; }
h3 { font-size: 1.05rem; font-weight: 700; }

a { color: var(--er); }
.mono, .num {
  font-family: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

/* ---------- estrutura ---------- */

.topo {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.topo-interno {
  max-width: 1240px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 22px; min-height: 58px; flex-wrap: wrap;
}
.marca {
  font-family: Archivo, sans-serif; font-weight: 800; font-size: 1rem;
  letter-spacing: -.02em; color: var(--ink); text-decoration: none; white-space: nowrap;
}
.marca span { color: var(--er); }
.menu { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.menu a {
  padding: 7px 12px; border-radius: 8px; text-decoration: none;
  color: var(--ink-2); font-size: .92rem; font-weight: 600; white-space: nowrap;
}
.menu a:hover { background: var(--surface-2); color: var(--ink); }
.menu a.ativo { background: var(--er-soft); color: var(--er); }
.menu .selo {
  display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 5px;
  background: var(--erro); color: #fff; font-size: .68rem; font-weight: 700;
  font-family: "IBM Plex Mono", monospace;
}
.eu { display: flex; align-items: center; gap: 9px; font-size: .88rem; color: var(--ink-2); }
.avatar {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  background: var(--er-soft); color: var(--er);
  font-family: "IBM Plex Mono", monospace; font-size: .72rem; font-weight: 600;
}
.avatar.externo { background: var(--dv-soft); color: var(--dv); }

main { max-width: 1240px; margin: 0 auto; padding: 26px 20px 70px; }

.cabecalho-pagina {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
  padding-bottom: 14px; border-bottom: 2px solid var(--ink);
}
.sobretitulo {
  font-family: "IBM Plex Mono", monospace; font-size: .7rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--er); font-weight: 500; margin-bottom: 5px;
}
.subtitulo { color: var(--ink-2); margin: 8px 0 0; max-width: 68ch; }

/* ---------- cartões ---------- */

.grade { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); }

.cartao {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--raio); padding: 18px 20px; box-shadow: var(--sombra);
}
.cartao.destaque { border-color: var(--er); border-width: 1.5px; }
.cartao.alerta { border-color: var(--erro); border-width: 1.5px; }
.cartao-titulo {
  font-family: "IBM Plex Mono", monospace; font-size: .7rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin-bottom: 8px;
}

.indicador b {
  display: block; font-family: Archivo, sans-serif; font-size: 1.85rem;
  font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums;
}
.indicador small { display: block; color: var(--ink-2); font-size: .84rem; margin-top: 5px; }
.indicador.bom b { color: var(--ok); }
.indicador.aviso b { color: var(--aviso); }
.indicador.ruim b { color: var(--erro); }

/* ---------- tabela ---------- */

.tabela-caixa {
  overflow-x: auto; border: 1px solid var(--line);
  border-radius: var(--raio); background: var(--surface);
}
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
th {
  font-family: "IBM Plex Mono", monospace; font-size: .67rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 500;
  background: var(--surface-2); white-space: nowrap; position: sticky; top: 0;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-2); }
td.n { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.acoes { white-space: nowrap; text-align: right; }

/* ---------- etiquetas ---------- */

.etiqueta {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  font-size: .72rem; font-weight: 600; white-space: nowrap;
  font-family: "IBM Plex Mono", monospace; letter-spacing: .03em;
}
.et-ok { background: var(--ok-soft); color: var(--ok); }
.et-aviso { background: var(--aviso-soft); color: var(--aviso); }
.et-erro { background: var(--erro-soft); color: var(--erro); }
.et-neutro { background: var(--surface-3); color: var(--ink-2); }
.et-er { background: var(--er-soft); color: var(--er); }
.et-dv { background: var(--dv-soft); color: var(--dv); }
.et-db { background: var(--db-soft); color: var(--db); }
.et-tb { background: var(--tb-soft); color: var(--tb); }
.et-eo { background: var(--eo-soft); color: var(--eo); }

/* ---------- barra de saldo ---------- */

.barra { height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; margin-top: 7px; }
.barra i { display: block; height: 100%; border-radius: 4px; background: var(--ok); }
.barra i.aviso { background: var(--aviso); }
.barra i.ruim { background: var(--erro); }

/* ---------- formulários ---------- */

form .campo { margin-bottom: 15px; }
label { display: block; font-size: .85rem; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=file], select, textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: .94rem;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--er); outline-offset: 1px; border-color: var(--er);
}
.ajuda { font-size: .8rem; color: var(--ink-3); margin-top: 4px; }
.erro-campo { color: var(--erro); font-size: .84rem; margin-top: 4px; font-weight: 600; }

.botao {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px;
  border-radius: 8px; border: 1px solid var(--er); background: var(--er); color: #fff;
  font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; text-decoration: none;
}
.botao:hover { filter: brightness(1.08); }
.botao.secundario { background: var(--surface); color: var(--ink); border-color: var(--line); }
.botao.perigo { background: var(--erro); border-color: var(--erro); color: #fff; }
.botao:disabled, .botao[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
:root[data-tema="escuro"] .botao,
:root:not([data-tema="claro"]) .botao { color: #0a0e14; }
@media (prefers-color-scheme: light) { :root:not([data-tema="escuro"]) .botao { color: #fff; } }

/* ---------- avisos ---------- */

.aviso-caixa {
  border-left: 3px solid var(--er); background: var(--surface-2);
  border-radius: 0 8px 8px 0; padding: 13px 16px; margin: 14px 0; font-size: .92rem;
}
.aviso-caixa.erro { border-left-color: var(--erro); background: var(--erro-soft); }
.aviso-caixa.atencao { border-left-color: var(--aviso); background: var(--aviso-soft); }
.aviso-caixa.ok { border-left-color: var(--ok); background: var(--ok-soft); }
.aviso-caixa b { font-weight: 700; }

.vazio { text-align: center; padding: 44px 20px; color: var(--ink-3); }
.vazio p { margin: 8px 0 16px; }

/* ---------- login ---------- */

.login-tela { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-caixa {
  width: 100%; max-width: 380px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; padding: 32px;
  box-shadow: var(--sombra);
}
.login-caixa h1 { font-size: 1.4rem; margin-bottom: 4px; }
.login-caixa .sub { color: var(--ink-2); font-size: .92rem; margin-bottom: 22px; }

@media (max-width: 640px) {
  .topo-interno { min-height: auto; padding: 10px 16px; }
  .menu { order: 3; width: 100%; }
  main { padding: 18px 14px 60px; }
  h1 { font-size: 1.35rem; }
}