:root {
  --papel:       #F4F6F7;
  --painel:      #FFFFFF;
  --tinta:       #131A20;
  --grafite:     #43505A;
  --cinza:       #6E7C88;
  --linha:       #DCE3E7;
  --linha-forte: #C3CDD3;
  --sinal:       #0F6E70;
  --sinal-fraco: #E3EFEF;

  --ok:            #2E7D5B;
  --ok-fundo:      #E6F2EC;
  --atencao:       #9A6B1E;
  --atencao-fundo: #FAF0DC;
  --risco:         #A8433A;
  --risco-fundo:   #F8EAE8;
  --andamento:       #1F6390;
  --andamento-fundo: #E6EFF6;

  --texto: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --dados: "Cascadia Mono", ui-monospace, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papel:       #0F1519;
    --painel:      #161E23;
    --tinta:       #E7EDF0;
    --grafite:     #BCC8D0;
    --cinza:       #8D9BA5;
    --linha:       #28323A;
    --linha-forte: #3A4650;
    --sinal:       #52B3B1;
    --sinal-fraco: #15292B;

    --ok:            #6BBE95;
    --ok-fundo:      #16291F;
    --atencao:       #D9AC5C;
    --atencao-fundo: #2C2416;
    --risco:         #E08E82;
    --risco-fundo:   #2C1D1B;
    --andamento:       #7FB4DA;
    --andamento-fundo: #16242E;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--sinal); }

/* ------------------------------------------------------------ cabecalho */

.topo {
  background: var(--painel);
  border-bottom: 1px solid var(--linha);
}

.topo-interno {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.marca { display: flex; flex-direction: column; gap: 1px; }

.marca strong { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; }

.marca span { font-size: 0.8rem; color: var(--cinza); }

.sessao { display: flex; align-items: center; gap: 14px; font-size: 0.84rem; color: var(--cinza); }

.sessao a {
  color: var(--grafite);
  text-decoration: none;
  border: 1px solid var(--linha-forte);
  border-radius: 3px;
  padding: 5px 12px;
}
.sessao a:hover { border-color: var(--sinal); color: var(--sinal); }

/* ------------------------------------------------------------ corpo */

main { max-width: 1080px; margin: 0 auto; padding: 28px 24px 72px; }

h2 {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cinza);
  margin: 34px 0 14px;
}

/* ------------------------------------------------------------ estado */

.estado {
  border-radius: 4px;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 4px solid;
}

.estado h1 { margin: 0; font-size: 1.24rem; font-weight: 600; letter-spacing: -0.01em; }
.estado p  { margin: 0; font-size: 0.92rem; color: var(--grafite); }

.estado.ok        { background: var(--ok-fundo);        border-color: var(--ok); }
.estado.ok h1     { color: var(--ok); }
.estado.atencao   { background: var(--atencao-fundo);   border-color: var(--atencao); }
.estado.atencao h1{ color: var(--atencao); }
.estado.risco     { background: var(--risco-fundo);     border-color: var(--risco); }
.estado.risco h1  { color: var(--risco); }
.estado.andamento { background: var(--andamento-fundo); border-color: var(--andamento); }
.estado.andamento h1 { color: var(--andamento); }

/* ------------------------------------------------------------ cartoes */

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 14px;
}

.cartao {
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: 4px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cartao-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }

.cartao-nome { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.cartao-nome strong {
  font-family: var(--dados);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.cartao-nome span { font-size: 0.78rem; color: var(--cinza); }

.cartao dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 14px;
  font-size: 0.85rem;
}

.cartao dt { color: var(--cinza); }

.cartao dd {
  margin: 0;
  text-align: right;
  font-family: var(--dados);
  font-size: 0.83rem;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ selo */

.selo {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 2px;
  white-space: nowrap;
  flex-shrink: 0;
}

.selo.ok        { color: var(--ok);        background: var(--ok-fundo); }
.selo.atencao   { color: var(--atencao);   background: var(--atencao-fundo); }
.selo.risco     { color: var(--risco);     background: var(--risco-fundo); }
.selo.andamento { color: var(--andamento); background: var(--andamento-fundo); }

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

.rolagem { overflow-x: auto; background: var(--painel); border: 1px solid var(--linha); border-radius: 4px; }

table { width: 100%; border-collapse: collapse; font-size: 0.86rem; min-width: 660px; }

thead th {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cinza);
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--linha-forte);
  white-space: nowrap;
}

tbody td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--linha);
  white-space: nowrap;
}

tbody tr:last-child td { border-bottom: 0; }

td.mono { font-family: var(--dados); font-variant-numeric: tabular-nums; }
td.num  { text-align: right; font-family: var(--dados); font-variant-numeric: tabular-nums; }

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

.entrada {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.caixa {
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: 5px;
  padding: 36px 34px;
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.caixa header { display: flex; flex-direction: column; gap: 3px; }
.caixa header strong { font-size: 1.14rem; font-weight: 600; letter-spacing: -0.01em; }
.caixa header span { font-size: 0.85rem; color: var(--cinza); }

form { display: flex; flex-direction: column; gap: 15px; }

label { display: flex; flex-direction: column; gap: 5px; font-size: 0.82rem; color: var(--grafite); }

input {
  font: inherit;
  font-size: 0.94rem;
  padding: 10px 12px;
  border: 1px solid var(--linha-forte);
  border-radius: 3px;
  background: var(--papel);
  color: var(--tinta);
}

input:focus { outline: 2px solid var(--sinal); outline-offset: 1px; border-color: var(--sinal); }

button {
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 11px 16px;
  border: 0;
  border-radius: 3px;
  background: var(--sinal);
  color: #fff;
  cursor: pointer;
}

button:hover { filter: brightness(1.08); }
button:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

.erro {
  background: var(--risco-fundo);
  color: var(--risco);
  border-left: 3px solid var(--risco);
  padding: 11px 14px;
  font-size: 0.86rem;
  border-radius: 2px;
}

/* ------------------------------------------------------------ rodape */

.rodape {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--linha);
  font-size: 0.78rem;
  color: var(--cinza);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

@media (max-width: 560px) {
  .topo-interno, main { padding-left: 16px; padding-right: 16px; }
  .estado { padding: 16px 18px; }
}

/* ------------------------------------------------------------ aviso */

.aviso {
  margin: 0 0 18px;
  padding: 12px 16px;
  background: var(--atencao-fundo);
  border-left: 3px solid var(--atencao);
  border-radius: 2px;
  font-size: 0.9rem;
  color: var(--atencao);
}

.aviso a { color: inherit; font-weight: 600; }

/* Mesma caixa do login, porem dentro de uma pagina com cabecalho. */
.caixa-solta { max-width: 420px; margin: 8px 0; }
.caixa-solta .estado { margin-bottom: 4px; }