/* ---------------------------------------------------------------------------
   Pit — folha de estilo única.

   DIREÇÃO: sala de guerra de campanha. Plano, sem sombra, sem canto
   arredondado, régua no lugar de caixa. Dado em monoespaçada porque número
   alinhado se lê de relance. Uma cor de acento e nada mais.

   Decisões deliberadas, para não voltarem por hábito:
   · raio 2px, nunca 12px
   · zero box-shadow — separação é feita com filete de 1px
   · nenhum ícone decorativo
   · a paleta não vem de biblioteca pronta: cinza de asfalto, levemente quente,
     com o azul e o ouro da campanha como únicas cores cromáticas
   · fonte única: Inter. Número alinha por algarismo tabular, não por
     monoespaçada — mono em painel dá cara de terminal
--------------------------------------------------------------------------- */

:root {
  /* asfalto: cinzas com um resto de calor, não o cinza-azulado de praxe */
  --papel:    #F1F0EC;
  --sup:      #FAFAF7;
  --sup-2:    #E7E6E1;

  --tinta:   #16181C;
  --tinta-2: #4C4F57;
  --tinta-3: #6E727C;

  --filete:   #D8D7D1;
  --filete-2: #BFBEB7;

  --azul:     #14307A;
  --azul-alto:#0D2159;
  --marinho:  #101A33;
  --ouro:     #E9B500;
  --btn-texto: #FFFFFF;

  --vermelho: #9E2B1C;
  --ambar:    #7A4E00;
  --verde:    #1B5E38;

  --logo-claro:  none;
  --logo-escuro: block;

  --raio: 2px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --papel:  #101114;
    --sup:    #16181C;
    --sup-2:  #202329;
    --tinta:   #EDEDE8;
    --tinta-2: #ACAFB6;
    --tinta-3: #8A8E97;
    --filete:   #282B32;
    --filete-2: #3A3E46;
    --azul:     #86A6F0;
    --azul-alto:#A6BEF6;
    --marinho:  #0D1526;
    --ouro:     #E9B500;
    --btn-texto: #101114;
    --vermelho: #E8705C;
    --ambar:    #D9A21F;
    --verde:    #5CB57E;
    --logo-claro:  block;
    --logo-escuro: none;
    color-scheme: dark;
  }
}

:root[data-tema="escuro"] {
  --papel:  #101114;
  --sup:    #16181C;
  --sup-2:  #202329;
  --tinta:   #EDEDE8;
  --tinta-2: #ACAFB6;
  --tinta-3: #8A8E97;
  --filete:   #282B32;
  --filete-2: #3A3E46;
  --azul:     #86A6F0;
  --azul-alto:#A6BEF6;
  --marinho:  #0D1526;
  --ouro:     #E9B500;
  --btn-texto: #101114;
  --vermelho: #E8705C;
  --ambar:    #D9A21F;
  --verde:    #5CB57E;
  --logo-claro:  block;
  --logo-escuro: none;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Número em coluna precisa alinhar. Isso se resolve com algarismo tabular,
   que a própria fonte de texto oferece — não precisa de monoespaçada. */
.mono, td.prazo, td.cod, .contagem .n, .card .numero,
.linha-frente .cont, .selo, .chip, .modulo .estado,
thead th, .contagem .lado, .quem {
  font-variant-numeric: tabular-nums;
}

a { color: var(--azul); }
::selection { background: var(--ouro); color: #16181C; }

/* ------------------------------------------------------------------- topo */

.topo {
  background: var(--sup);
  border-bottom: 1px solid var(--filete-2);
  padding: 0 24px;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 10;
}

/* O logotipo entra inteiro: nome de urna, número e cargo formam um bloco que
   não se separa (Bloco 2.3 do CLAUDE.md). */
.marca { display: flex; align-items: center; padding: 11px 0; text-decoration: none; }
.marca img { height: 42px; width: auto; }
.marca .lg-escuro { display: var(--logo-escuro); }
.marca .lg-claro  { display: var(--logo-claro); }

.menu { display: flex; flex: 1; flex-wrap: wrap; }
.menu a {
  color: var(--tinta-2); text-decoration: none;
  padding: 9px 0; margin-right: 22px;
  font-weight: 600; font-size: .93rem;
  border-bottom: 2px solid transparent;
  transition: color .1s ease, border-color .1s ease;
}
.menu a:hover { color: var(--tinta); }
.menu a.ativo { color: var(--tinta); border-bottom-color: var(--ouro); font-weight: 600; }

.quem {
  font-size: .82rem; color: var(--tinta-3);
  display: flex; align-items: center; gap: 14px; white-space: nowrap;
}
.quem a { color: var(--tinta-2); text-decoration: none; border-bottom: 1px solid var(--filete-2); }
.quem a:hover { color: var(--azul); border-bottom-color: var(--azul); }

.tema {
  background: none; border: 0; cursor: pointer; padding: 0;
  color: var(--tinta-3); display: grid; place-items: center; flex: none;
  width: 22px; height: 22px;
}
.tema:hover { color: var(--tinta); }
.tema svg { width: 17px; height: 17px; }
.tema .lua { display: var(--logo-escuro); }
.tema .sol { display: var(--logo-claro); }

/* ---------------------------------------------------------------- conteúdo */

main { max-width: 1240px; margin: 0 auto; padding: 34px 24px 90px; }

h1 {
  font-weight: 700; font-size: 1.85rem; line-height: 1.12;
  margin: 0 0 4px; letter-spacing: -.02em;
}
h2 {
  font-weight: 500; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--tinta-3);
  margin: 44px 0 14px; padding-bottom: 9px;
  border-bottom: 1px solid var(--filete);
}
.sub { color: var(--tinta-3); margin: 0 0 26px; font-size: .93rem; }

/* ============================ TELA INICIAL ============================== */

/* Faixa de contagem: bloco chapado, sem gradiente. Um filete de ouro embaixo
   e nada mais. */
.contagem {
  background: var(--marinho);
  border-bottom: 3px solid var(--ouro);
  padding: 24px 28px; color: #fff; margin-bottom: 34px;
  display: flex; align-items: baseline; gap: 24px; flex-wrap: wrap;
}
.contagem .n {
  font-size: 3.4rem; font-weight: 600; line-height: 1;
  color: var(--ouro); letter-spacing: -.04em;
}
.contagem .txt { font-size: .95rem; color: #9FA8BC; }
.contagem .txt strong {
  display: block; color: #fff; font-size: 1.05rem; font-weight: 600;
  letter-spacing: -.01em;
}
.contagem .lado {
  margin-left: auto; text-align: right; font-size: .8rem; color: #9FA8BC; line-height: 1.75;
}
.contagem .lado b { color: var(--ouro); font-weight: 500; }

/* Módulos: fichas planas. Sem ícone, sem sombra, sem canto. O acento aparece
   como filete à esquerda no hover. */
.modulos { display: grid; gap: 0; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); border-top: 1px solid var(--filete); }

.modulo {
  border-bottom: 1px solid var(--filete);
  border-right: 1px solid var(--filete);
  border-left: 3px solid transparent;
  background: var(--sup);
  padding: 20px 22px 22px;
  text-decoration: none; color: inherit; display: block;
  transition: border-left-color .1s ease, background .1s ease;
}
.modulo:hover { border-left-color: var(--ouro); background: var(--sup-2); }
.modulo h3 {
  margin: 0 0 5px; font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em;
  display: flex; align-items: center; gap: 8px;
}
.modulo p { margin: 0; color: var(--tinta-3); font-size: .87rem; line-height: 1.45; }
.modulo .estado {
  margin-top: 14px; font-size: .78rem; color: var(--tinta-2);
  padding-top: 11px; border-top: 1px solid var(--filete);
}
.modulo .estado .alerta { color: var(--vermelho); }

.modulo.embreve { background: transparent; }
.modulo.embreve h3, .modulo.embreve p { color: var(--tinta-3); }
.modulo.embreve:hover { border-left-color: transparent; background: transparent; }

.selo {
  font-size: .64rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--filete-2); color: var(--tinta-3);
  padding: 2px 6px; white-space: nowrap;
}

/* ------------------------------------------------------------------ cards */

.grade { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); background: var(--filete); border: 1px solid var(--filete); }

.card { background: var(--sup); padding: 20px 22px; }
.card .rotulo {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--tinta-3); margin-bottom: 10px;
}
.card .numero { font-size: 2.4rem; font-weight: 600; line-height: 1; letter-spacing: -.04em; }
.card .pe { font-size: .82rem; color: var(--tinta-3); margin-top: 7px; }

.card.destaque { background: var(--marinho); color: #fff; }
.card.destaque .rotulo { color: #8794AC; }
.card.destaque .numero { color: var(--ouro); }
.card.destaque .pe { color: #9FA8BC; }
.card.alerta .numero { color: var(--vermelho); }

/* -------------------------------------------------------------- progresso */

.barra { height: 4px; background: var(--sup-2); overflow: hidden; margin-top: 12px; }
.barra i { display: block; height: 100%; background: var(--verde); }

.linha-frente { display: grid; grid-template-columns: 1fr 62px; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--filete); }
.linha-frente:last-child { border-bottom: 0; }
.linha-frente .nome { font-weight: 600; font-size: .9rem; }
.linha-frente .cont { text-align: right; color: var(--tinta-3); font-size: .8rem; }
.linha-frente .barra { margin-top: 8px; height: 3px; }

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

.rolagem { overflow-x: auto; background: var(--sup); border: 1px solid var(--filete-2); }
table { width: 100%; border-collapse: collapse; }

thead th {
  font-size: .68rem; font-weight: 500; color: var(--tinta-3);
  text-transform: uppercase; letter-spacing: .12em;
  text-align: left; padding: 11px 16px;
  border-bottom: 1px solid var(--filete-2); white-space: nowrap;
}

tbody td { padding: 14px 16px; border-bottom: 1px solid var(--filete); vertical-align: top; font-size: .9rem; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .08s ease; }
tbody tr:hover { background: var(--sup-2); }

td.prazo { white-space: nowrap; width: 92px; color: var(--tinta-2); font-size: .82rem; }
td.cod { color: var(--tinta-3); font-size: .76rem; width: 58px; white-space: nowrap; }
.tit { font-weight: 600; color: var(--tinta); line-height: 1.38; overflow-wrap: anywhere; }
.nota {
  color: var(--tinta-3); font-size: .845rem; margin-top: 3px; line-height: 1.45; max-width: 62ch;
  overflow-wrap: anywhere;   /* caminho de arquivo e URL não esticam a tabela */
}

tr.atrasada td.prazo { color: var(--vermelho); font-weight: 600; }
tr.hoje td.prazo { color: var(--ambar); font-weight: 600; }
tr.concluida .tit { color: var(--tinta-3); text-decoration: line-through; }

/* ------------------------------------------------------------------ chips */

/* Sem pílula e sem bolinha: rótulo em versalete, com filete da cor da frente
   à esquerda. Identifica sem virar enfeite. */
.chip {
  display: inline-block; font-size: .68rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .07em; white-space: nowrap;
  padding: 2px 0 2px 8px; border-left: 3px solid currentColor;
  color: var(--tinta-2);
}
.chip.frente { border-left-color: var(--cor-frente, var(--filete-2)); }

.p-Urgente { color: var(--vermelho); border-left-color: var(--vermelho); font-weight: 600; }
.p-Alta    { color: var(--ambar);    border-left-color: var(--ambar); }
.p-Média   { color: var(--tinta-3);  border-left-color: var(--filete-2); }
.p-Baixa   { color: var(--tinta-3);  border-left-color: var(--filete-2); }

.st { font-size: .8rem; font-weight: 600; white-space: nowrap; }
.st-a_fazer   { color: var(--tinta-3); }
.st-fazendo   { color: var(--azul); }
.st-revisao   { color: var(--ambar); }
.st-concluida { color: var(--verde); }
.st-cancelada { color: var(--tinta-3); text-decoration: line-through; }

/* ---------------------------------------------------------------- filtros */

.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 18px; }
.filtros select, .filtros input[type=search], .filtros input {
  font-family: inherit; font-size: .88rem; padding: 8px 11px;
  border: 1px solid var(--filete-2); border-radius: var(--raio);
  background: var(--sup); color: var(--tinta);
}
.filtros select:focus, .filtros input:focus {
  outline: 2px solid var(--ouro); outline-offset: -1px; border-color: var(--ouro);
}
.filtros .limpa { font-size: .84rem; color: var(--tinta-3); text-decoration: none; border-bottom: 1px solid var(--filete-2); }
.filtros .limpa:hover { color: var(--azul); }

/* ----------------------------------------------------------------- botões */

.btn { font-weight: 500;
  font-size: .8rem; text-transform: uppercase; letter-spacing: .08em;
  padding: 9px 18px; border: 1px solid var(--azul); border-radius: var(--raio);
  background: var(--azul); color: var(--btn-texto); cursor: pointer; text-decoration: none;
  display: inline-block; transition: background .1s ease;
}
.btn:hover { background: var(--azul-alto); border-color: var(--azul-alto); }
.btn:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }
.btn.fantasma { background: transparent; color: var(--tinta-2); border-color: var(--filete-2); }
.btn.fantasma:hover { background: var(--sup-2); color: var(--tinta); }

select.status-inline { font-size: .76rem; padding: 4px 6px;
  border: 1px solid var(--filete); border-radius: var(--raio);
  background: var(--sup); color: var(--tinta-2); cursor: pointer;
}
select.status-inline:hover { border-color: var(--filete-2); }

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

.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--marinho); }
.login { background: var(--sup); padding: 40px 36px; width: 100%; max-width: 380px; border-top: 3px solid var(--ouro); }
.login .marca { justify-content: center; padding: 0 0 26px; }
.login .marca img { height: 54px; }
.login h1 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .16em;
  color: var(--tinta-3); font-weight: 500; margin-bottom: 20px; text-align: center;
}
.login label {
  display: block;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--tinta-3); margin: 16px 0 5px;
}
.login input {
  width: 100%; font-family: inherit; font-size: .98rem; padding: 10px 12px;
  border: 1px solid var(--filete-2); border-radius: var(--raio);
  background: var(--sup); color: var(--tinta);
}
.login input:focus { outline: 2px solid var(--ouro); outline-offset: -1px; border-color: var(--ouro); }
.login .btn { width: 100%; margin-top: 26px; padding: 12px; }


/* ------------------------------------------------------------- formulário */

/* Bloco de formulário fora do login. Existe para que senha.php e usuarios.php
   parem de carregar estilo inline — era ali que os tokens da paleta antiga
   sobreviveram sem ninguém ver. */
.forma {
  background: var(--sup); border: 1px solid var(--filete);
  border-radius: var(--raio); padding: 22px 24px; max-width: 460px;
}
.forma.larga { max-width: 560px; }
.forma label {
  display: block;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--tinta-3); margin: 16px 0 5px;
}
.forma label:first-of-type { margin-top: 0; }
.forma label.escolha {
  font-family: inherit; font-size: .89rem; text-transform: none;
  letter-spacing: 0; color: var(--tinta-2); margin: 0 0 6px; font-weight: 400;
}
.forma input[type=text], .forma input[type=email], .forma input[type=password] {
  width: 100%; font-family: inherit; font-size: .98rem; padding: 10px 12px;
  border: 1px solid var(--filete-2); border-radius: var(--raio);
  background: var(--sup); color: var(--tinta);
}
.forma input:focus { outline: 2px solid var(--ouro); outline-offset: -1px; border-color: var(--ouro); }
.forma .btn { margin-top: 20px; }

.apagado { opacity: .45; }
.junto { margin-left: 6px; }

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

.erro, .aviso, .ok {
  padding: 12px 15px; font-size: .89rem; margin-bottom: 18px;
  border-left: 3px solid currentColor; background: var(--sup);
}
.erro  { color: var(--vermelho); }
.aviso { color: var(--ambar); }
.ok    { color: var(--verde); }
.erro strong, .aviso strong, .ok strong { color: var(--tinta); }
.login .erro { margin: 16px 0 0; }

.vazio { padding: 54px 24px; text-align: center; color: var(--tinta-3); background: var(--sup); border: 1px solid var(--filete); }


/* ------------------------------------------------------------------- foco */

/* Quem navega por teclado precisa enxergar onde está. O contorno em ouro
   aparece só no foco por teclado, nunca no clique de mouse. */
.menu a:focus-visible,
.modulo:focus-visible,
.quem a:focus-visible,
.tema:focus-visible,
select.status-inline:focus-visible,
.filtros .limpa:focus-visible {
  outline: 2px solid var(--ouro);
  outline-offset: 2px;
  border-radius: var(--raio);
}
.modulo:focus-visible { outline-offset: -2px; }
select.status-inline:focus { outline: 2px solid var(--ouro); outline-offset: -1px; }

/* -------------------------------------------------------------- responsivo */

@media (max-width: 780px) {
  .topo { padding: 0 15px; gap: 8px 14px; position: static; }
  .marca { padding: 10px 0; }
  .marca img { height: 34px; }
  /* flex:1 zera o flex-basis, então width:100% não pega. Precisa ser flex-basis. */
  .menu { order: 3; flex: 1 0 100%; overflow-x: auto; padding-bottom: 2px; }
  .menu a { margin-right: 18px; font-size: .87rem; white-space: nowrap; }
  .quem { padding: 10px 0; font-size: .76rem; margin-left: auto; gap: 11px; }

  main { padding: 22px 15px 70px; }
  h1 { font-size: 1.55rem; }
  h2 { margin: 34px 0 12px; }
  .card .numero { font-size: 2rem; }

  .contagem { padding: 20px; gap: 16px; }
  .contagem .n { font-size: 2.8rem; }
  .contagem .lado { margin-left: 0; text-align: left; flex: 1 0 100%; }
  .modulos { grid-template-columns: 1fr; }
  .modulo { border-right: 0; }
  .grade { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* No celular a tabela deixa de ser tabela: cada linha vira uma ficha.
   Rolar sete colunas na horizontal com o polegar não funciona. */
@media (max-width: 700px) {
  .rolagem { overflow: visible; background: transparent; border: 0; border-top: 1px solid var(--filete-2); }
  table, tbody, tr, td { display: block; width: 100%; }
  thead { display: none; }

  tbody tr { background: var(--sup); border-bottom: 1px solid var(--filete); padding: 15px 15px 17px; }
  tbody tr:hover { background: var(--sup); }
  tbody td { border: 0; padding: 0; }

  td.prazo, td.cod { display: inline-block; width: auto; margin-right: 12px; }
  td.prazo br { display: none; }
  td.prazo > span { margin-left: 6px; }

  td:nth-child(3) { margin: 9px 0 12px; }
  .nota { max-width: none; }

  td:nth-child(4), td:nth-child(5) { display: inline-block; width: auto; margin: 0 14px 0 0; }
  td:nth-child(6), td:nth-child(7) { display: inline-block; width: auto; margin-top: 13px; font-size: .8rem; color: var(--tinta-3); }
  td:nth-child(6) { margin-right: 14px; }

  .filtros select, .filtros input { flex: 1 1 140px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}