:root {
  --tinta: #16222b;
  --tinta-fraca: #5a6b76;
  --fundo: #eef1f3;
  --papel: #ffffff;
  --borda: #d3dade;
  --destaque: #16697a;
  --destaque-forte: #0f4d5a;
  --destaque-fraco: #e3eef1;
  --ok: #2c7a4b;
  --ok-fundo: #e7f4ec;
  --alerta: #9a5b00;
  --erro: #a32c2c;
  --erro-fundo: #fbeaea;
  --sombra: 0 1px 3px rgba(22, 34, 43, .10);
}

/* Escuro automático, quando o sistema pede e o visitante não fixou o claro */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tinta: #e6edf1;
    --tinta-fraca: #9aabb5;
    --fundo: #131a20;
    --papel: #1b242c;
    --borda: #2c3a45;
    --destaque: #4bb3c9;
    --destaque-forte: #7fd0e2;
    --destaque-fraco: #1e333c;
    --ok: #6cc08a;
    --ok-fundo: #1c2f24;
    --alerta: #e0a758;
    --erro: #e08080;
    --erro-fundo: #33201f;
    --sombra: 0 1px 3px rgba(0, 0, 0, .35);
  }
}

/* Escuro escolhido na mão */
:root[data-theme="dark"] {
  --tinta: #e6edf1;
  --tinta-fraca: #9aabb5;
  --fundo: #131a20;
  --papel: #1b242c;
  --borda: #2c3a45;
  --destaque: #4bb3c9;
  --destaque-forte: #7fd0e2;
  --destaque-fraco: #1e333c;
  --ok: #6cc08a;
  --ok-fundo: #1c2f24;
  --alerta: #e0a758;
  --erro: #e08080;
  --erro-fundo: #33201f;
  --sombra: 0 1px 3px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: 15px/1.5 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

.sprite { display: none; }

.ic {
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -.22em;
  margin-right: .45em;
  flex: none;
}

.icone-so .ic { margin-right: 0; }

/* Cabeçalho */
.topo {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding: .75rem 1.25rem;
  background: var(--papel);
  border-bottom: 1px solid var(--borda);
}

.marca { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; }
.marca-icone { display: block; border-radius: 7px; }
.marca-nome { font-size: 1.3rem; font-weight: 700; letter-spacing: .04em; color: var(--destaque); }
.marca-desc { display: block; font-size: .76rem; color: var(--tinta-fraca); }

.abas { display: flex; gap: .3rem; flex: 1; flex-wrap: wrap; }

.abas a, .conta, .icone-so {
  display: inline-flex;
  align-items: center;
  padding: .5rem .8rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--tinta-fraca);
  text-decoration: none;
  font: inherit;
  font-weight: 600;
  font-size: .92rem;
  white-space: nowrap;
  cursor: pointer;
}

.abas a:hover, .conta:hover, .icone-so:hover { background: var(--fundo); color: var(--tinta); }
.abas a.ativa, .conta.ativa { background: var(--destaque); color: #fff; }
.canto { display: flex; align-items: center; gap: .2rem; }

/* Corpo */
.corpo { max-width: 960px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }

.cartao {
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--sombra);
}

h1 { font-size: 1.3rem; margin: 0 0 .25rem; }
h2 { font-size: 1.05rem; margin: 0 0 .75rem; }
.legenda { color: var(--tinta-fraca); font-size: .9rem; margin: 0 0 1.1rem; }

/* Recados */
.recado, .recado-erro {
  display: flex;
  align-items: flex-start;
  gap: .1rem;
  padding: .7rem .85rem;
  border-radius: 7px;
  font-size: .92rem;
  margin-bottom: 1rem;
}

.recado { background: var(--ok-fundo); color: var(--ok); }
.recado-erro { background: var(--erro-fundo); color: var(--erro); }

/* Campos */
.campo { margin-bottom: 1.1rem; }
.campo > label { display: block; font-weight: 600; margin-bottom: .4rem; font-size: .93rem; }
.dica { color: var(--tinta-fraca); font-size: .84rem; margin-top: .3rem; }
.linha { display: flex; gap: .9rem; flex-wrap: wrap; }
.linha > .campo { flex: 1; min-width: 200px; }

input[type="file"], input[type="password"], input[type="text"], input[type="email"], select {
  width: 100%;
  padding: .6rem .7rem;
  border: 1px solid var(--borda);
  border-radius: 7px;
  background: var(--fundo);
  color: var(--tinta);
  font: inherit;
}

select { cursor: pointer; }

input[type="file"]::file-selector-button {
  font: inherit;
  margin-right: .8rem;
  padding: .4rem .8rem;
  border: 1px solid var(--borda);
  border-radius: 5px;
  background: var(--papel);
  color: var(--tinta);
  cursor: pointer;
}

.marcador { display: inline-flex; align-items: center; gap: .45rem; font-size: .92rem; cursor: pointer; }
.marcador input { width: auto; }

.botao {
  display: inline-flex;
  align-items: center;
  padding: .65rem 1.2rem;
  border: 0;
  border-radius: 7px;
  background: var(--destaque);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.botao:hover { background: var(--destaque-forte); }
.botao:disabled { opacity: .55; cursor: progress; }

.botao-fraco { background: transparent; color: var(--destaque); border: 1px solid var(--borda); }
.botao-fraco:hover { background: var(--fundo); color: var(--destaque-forte); }
.botao-risco { background: transparent; color: var(--erro); border: 1px solid var(--borda); }
.botao-risco:hover { background: var(--erro-fundo); }
.botao-mini { padding: .4rem .7rem; font-size: .86rem; }

/* Andamento */
.painel-log { display: none; margin-top: 1.25rem; }
.painel-log.visivel { display: block; }

.situacao { display: flex; align-items: center; gap: .3rem; font-weight: 600; margin-bottom: .6rem; }
.situacao.rodando { color: var(--destaque); }
.situacao.concluido { color: var(--ok); }
.situacao.erro { color: var(--erro); }

.log {
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: 7px;
  padding: .8rem;
  max-height: 340px;
  overflow: auto;
  font-family: Consolas, "SF Mono", Menlo, monospace;
  font-size: .82rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.log .aviso { color: var(--alerta); }
.log .falha { color: var(--erro); font-weight: 600; }

.resultados { margin-top: 1rem; display: flex; flex-direction: column; gap: .5rem; }

.resultados a {
  display: inline-flex;
  align-items: center;
  padding: .6rem .8rem;
  border: 1px solid var(--borda);
  border-radius: 7px;
  background: var(--fundo);
  color: var(--destaque);
  text-decoration: none;
  font-weight: 600;
  font-size: .92rem;
}

.resultados a:hover { border-color: var(--destaque); }

/* Tabelas */
.tabela { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabela th, .tabela td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela th { color: var(--tinta-fraca); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.tabela tr:last-child td { border-bottom: 0; }
.numero { text-align: right; font-variant-numeric: tabular-nums; }
.acoes { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }

.etiqueta {
  display: inline-block;
  padding: .15rem .55rem;
  border-radius: 20px;
  font-size: .76rem;
  font-weight: 700;
  background: var(--destaque-fraco);
  color: var(--destaque-forte);
}

.etiqueta.apagada { background: var(--fundo); color: var(--tinta-fraca); }

/* Pessoa na lista de usuários */
.pessoa { display: flex; flex-direction: column; }
.pessoa small { color: var(--tinta-fraca); font-size: .84rem; }

/* Entrada (login, esqueci, redefinir) */
.entrada { max-width: 400px; margin: 9vh auto 0; padding: 0 1rem; }
.entrada .marca { justify-content: center; margin-bottom: 1.2rem; }
.entrada .marca-nome { font-size: 1.9rem; }
.entrada .marca-icone { width: 52px; height: 52px; }
.entrada .rodape-link { text-align: center; margin-top: 1rem; font-size: .9rem; }
.entrada .rodape-link a { color: var(--destaque); }

/* Largura média: o menu desce inteiro para a segunda linha, em vez de
   quebrar no meio e deixar duas abas penduradas. */
@media (max-width: 900px) {
  .topo { gap: .6rem .9rem; padding: .7rem 1rem; }
  /* flex-basis 100%, e nao width: o "flex: 1" da regra base zera a base e o
     width sozinho nao tira as abas da primeira linha. */
  .abas { order: 3; flex: 1 0 100%; }
  .abas a { flex: 1; justify-content: center; padding: .5rem .35rem; font-size: .88rem; }
  .abas a .ic { margin-right: .3em; }
  .canto { margin-left: auto; }
}

@media (max-width: 560px) {
  .marca-desc { display: none; }
  .corpo { padding: 1rem .9rem 2.5rem; }
  .acoes { justify-content: flex-start; }
  .conta { padding: .5rem; }
}