:root{
  --fundo:#f6f7f9; --papel:#ffffff; --borda:#e2e5ea; --borda-forte:#cbd1da;
  --texto:#1a1d23; --texto-suave:#5b6472; --texto-fraco:#828b99;
  --marca:#1f4d7a; --marca-clara:#e8f0f8; --marca-escura:#163a5c;
  --vermelho:#b3261e; --vermelho-fundo:#fdeceb;
  --ambar:#8a5a00;  --ambar-fundo:#fdf3e0;
  --verde:#1b6b3a;  --verde-fundo:#e7f4ec;
  --roxo:#5b3fa8;   --roxo-fundo:#efeaff;
  --raio:8px; --sombra:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
}
@media (prefers-color-scheme: dark){
  :root{
    --fundo:#13151a; --papel:#1b1e25; --borda:#2b303a; --borda-forte:#3a4150;
    --texto:#e8eaee; --texto-suave:#a6aebc; --texto-fraco:#7e8796;
    --marca:#7fb3e6; --marca-clara:#16293c; --marca-escura:#9cc6f0;
    --vermelho:#f28b82; --vermelho-fundo:#3a1d1b;
    --ambar:#e0a850;  --ambar-fundo:#332813;
    --verde:#7bc99a;  --verde-fundo:#12301f;
    --roxo:#b9a3f0;   --roxo-fundo:#241c3d;
    --sombra:0 1px 2px rgba(0,0,0,.4);
  }
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--fundo); color:var(--texto);
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--marca)} a:hover{text-decoration:none}
h1{font-size:1.5rem;margin:0 0 1rem} h2{font-size:1.05rem;margin:0 0 .75rem}
small{color:var(--texto-fraco)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86em}

/* ---------- topo ---------- */
.topo{background:var(--papel);border-bottom:1px solid var(--borda);position:sticky;top:0;z-index:20}
.topo-interno{max-width:1240px;margin:0 auto;padding:.7rem 1rem;display:flex;gap:1.25rem;align-items:center;flex-wrap:wrap}
.marca{display:flex;gap:.6rem;align-items:center;text-decoration:none;color:var(--texto)}
.marca strong{display:block;font-size:.98rem;line-height:1.1}
.marca small{display:block;font-size:.76rem}
.marca-icone{width:26px;height:26px;border-radius:6px;background:linear-gradient(135deg,var(--marca),var(--marca-escura));flex:0 0 auto}
.menu{display:flex;gap:.25rem;margin-left:auto}
.menu a{padding:.4rem .7rem;border-radius:6px;text-decoration:none;color:var(--texto-suave);font-weight:500}
.menu a:hover{background:var(--marca-clara);color:var(--marca)}
.menu a.ativo{background:var(--marca-clara);color:var(--marca)}
.usuario{display:flex;gap:.6rem;align-items:center;font-size:.85rem;color:var(--texto-suave)}
.usuario-nome{font-weight:600;color:var(--texto)}
.link-discreto{color:var(--texto-fraco);text-decoration:none}
.link-discreto:hover{color:var(--marca);text-decoration:underline}

.pagina{max-width:1240px;margin:0 auto;padding:1.5rem 1rem 3rem}
.rodape{max-width:1240px;margin:0 auto;padding:0 1rem 2rem;color:var(--texto-fraco);font-size:.82rem}
.migalha{margin:0 0 1rem}

/* ---------- faixas ---------- */
.faixa{padding:.7rem .9rem;border-radius:var(--raio);margin-bottom:1rem;border:1px solid transparent;font-size:.92rem}
.faixa-ok{background:var(--verde-fundo);border-color:var(--verde);color:var(--verde)}
.faixa-erro{background:var(--vermelho-fundo);border-color:var(--vermelho);color:var(--vermelho)}
.faixa-atencao{background:var(--ambar-fundo);border-color:var(--ambar);color:var(--ambar)}
.faixa a{color:inherit;font-weight:600}

/* ---------- cartões ---------- */
.cartoes-resumo{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.75rem;margin-bottom:1.25rem}
.cartao{background:var(--papel);border:1px solid var(--borda);border-radius:var(--raio);padding:.9rem 1rem;
        text-decoration:none;color:var(--texto);box-shadow:var(--sombra);display:block;border-left:3px solid var(--borda-forte)}
.cartao:hover{border-color:var(--borda-forte)}
.cartao-numero{display:block;font-size:1.8rem;font-weight:700;line-height:1.1}
.cartao-rotulo{display:block;font-size:.82rem;color:var(--texto-suave);margin-top:.15rem}
.cartao-vencido{border-left-color:var(--vermelho)} .cartao-vencido .cartao-numero{color:var(--vermelho)}
.cartao-hoje{border-left-color:var(--ambar)} .cartao-hoje .cartao-numero{color:var(--ambar)}
.cartao-semana{border-left-color:var(--marca)}
.cartao-triagem{border-left-color:var(--roxo)} .cartao-triagem .cartao-numero{color:var(--roxo)}

/* ---------- filtros e formulários ---------- */
.filtros{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem;align-items:center}
input,select,textarea{
  font:inherit;padding:.48rem .6rem;border:1px solid var(--borda-forte);border-radius:6px;
  background:var(--papel);color:var(--texto);max-width:100%
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--marca);outline-offset:1px;border-color:var(--marca)}
textarea{width:100%;resize:vertical}
label{display:block;font-size:.83rem;font-weight:600;color:var(--texto-suave);margin:.7rem 0 .25rem}
.campo-busca{flex:1;min-width:220px}
.campo-mini{width:120px;padding:.3rem .45rem;font-size:.85rem}
.campo-caixa label{display:flex;gap:.4rem;align-items:center;font-weight:500;margin-top:1.6rem}
.campo-caixa input{width:auto}
.formulario-linha{display:flex;gap:.75rem;flex-wrap:wrap;align-items:flex-end}
.formulario-linha>div{flex:1;min-width:160px}
.formulario-linha label{margin-top:0}
.formulario-inline{display:inline-flex;gap:.25rem;align-items:center}

.botao{display:inline-block;padding:.5rem .9rem;border:1px solid var(--borda-forte);border-radius:6px;
  background:var(--papel);color:var(--texto);font:inherit;font-weight:500;cursor:pointer;text-decoration:none;text-align:center}
.botao:hover{border-color:var(--marca);color:var(--marca)}
.botao-principal{background:var(--marca);border-color:var(--marca);color:#fff}
.botao-principal:hover{background:var(--marca-escura);border-color:var(--marca-escura);color:#fff}
.botao-sucesso{background:var(--verde);border-color:var(--verde);color:#fff}
.botao-sucesso:hover{filter:brightness(1.1);color:#fff}
.botao-vazado{background:transparent}
.botao-largo{width:100%;margin-top:.8rem}
.mini-botao{white-space:nowrap;padding:.28rem .55rem;font-size:.8rem;border:1px solid var(--borda-forte);border-radius:5px;
  background:var(--papel);color:var(--texto-suave);cursor:pointer;font-family:inherit}
.mini-botao:hover{border-color:var(--marca);color:var(--marca)}

/* ---------- tabelas ---------- */
.tabela-rolagem{overflow-x:auto;background:var(--papel);border:1px solid var(--borda);border-radius:var(--raio);box-shadow:var(--sombra)}
.tabela{width:100%;border-collapse:collapse;font-size:.9rem}
.tabela th{text-align:left;padding:.6rem .8rem;border-bottom:1px solid var(--borda);
  font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;color:var(--texto-fraco);white-space:nowrap}
.tabela td{padding:.6rem .8rem;border-bottom:1px solid var(--borda);vertical-align:top}
.tabela tbody tr:last-child td{border-bottom:none}
.tabela tbody tr:hover{background:var(--marca-clara)}
.celula-titulo a{font-weight:600;text-decoration:none}
.celula-titulo small{display:block;color:var(--texto-fraco);font-size:.8rem;margin-top:.1rem}
.celula-acoes{display:flex;gap:.35rem;flex-wrap:wrap}
.celula-mensagem{max-width:320px;font-size:.82rem;color:var(--texto-suave)}
.linha-inativa{opacity:.55}
.linha-vencido{background:color-mix(in srgb, var(--vermelho-fundo) 55%, transparent)}
.contagem{color:var(--texto-fraco);font-size:.83rem;margin-top:.6rem}
.vazio{color:var(--texto-fraco);padding:1rem 0}

/* ---------- pílulas ---------- */
.pilula{display:inline-block;padding:.18rem .5rem;border-radius:99px;font-size:.76rem;font-weight:600;white-space:nowrap}
.pilula-grande{font-size:.88rem;padding:.3rem .75rem}
.pilula-vencido{background:var(--vermelho-fundo);color:var(--vermelho)}
.pilula-hoje,.pilula-urgente{background:var(--ambar-fundo);color:var(--ambar)}
.pilula-proximo{background:var(--marca-clara);color:var(--marca)}
.pilula-tranquilo{background:var(--verde-fundo);color:var(--verde)}
.pilula-sem-data{background:var(--roxo-fundo);color:var(--roxo)}
.pilula-cumprido{background:var(--verde-fundo);color:var(--verde)}
.pilula-arquivado{background:var(--fundo);color:var(--texto-fraco);border:1px solid var(--borda)}
.pilula-herdado{background:var(--roxo-fundo);color:var(--roxo);margin-left:.35rem}
.etiqueta{display:inline-block;white-space:nowrap;padding:.15rem .45rem;border-radius:4px;background:var(--fundo);
  border:1px solid var(--borda);font-size:.76rem;color:var(--texto-suave)}
.etiqueta-papel{text-transform:capitalize}

/* ---------- blocos e detalhe ---------- */
.bloco{background:var(--papel);border:1px solid var(--borda);border-radius:var(--raio);
  padding:1.1rem;margin-bottom:1rem;box-shadow:var(--sombra)}
.bloco-estreito{max-width:420px}
.bloco-destaque{border-color:var(--marca);border-left:3px solid var(--marca)}
.detalhe-topo{display:flex;gap:1rem;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;margin-bottom:1rem}
.detalhe-topo h1{margin:0 0 .3rem}
.detalhe-meta{margin:0;color:var(--texto-suave);font-size:.88rem}
.detalhe-selos{display:flex;gap:.35rem;align-items:center;flex-wrap:wrap}
.detalhe-colunas{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(280px,1fr);gap:1rem;align-items:start}
@media (max-width:900px){.detalhe-colunas{grid-template-columns:1fr}}
.texto-publicacao{background:var(--fundo);border:1px solid var(--borda);border-radius:6px;
  padding:.9rem;max-height:460px;overflow:auto;font-size:.88rem;line-height:1.6;white-space:normal}
.lista-dados{margin:0 0 .9rem;display:grid;gap:.35rem}
.lista-dados>div{display:flex;gap:.5rem;font-size:.88rem}
.lista-dados dt{color:var(--texto-fraco);min-width:120px;margin:0}
.lista-dados dd{margin:0;font-weight:500}
.dica{font-size:.82rem;color:var(--texto-suave);margin:.5rem 0}
.acoes-prazo{margin-top:1rem;border-top:1px solid var(--borda);padding-top:.8rem}
.historico{list-style:none;margin:0;padding:0;font-size:.85rem}
.historico li{padding:.5rem 0;border-bottom:1px solid var(--borda)}
.historico li:last-child{border-bottom:none}
.historico strong{display:block}
.historico span{display:block;color:var(--texto-suave)}
.historico small{display:block;color:var(--texto-fraco);margin-top:.15rem}
.lista-anexos{list-style:none;margin:0 0 .8rem;padding:0;font-size:.87rem}
.lista-anexos li{padding:.45rem 0;border-bottom:1px solid var(--borda)}
.lista-anexos li:last-child{border-bottom:none}
.lista-anexos small{display:block;color:var(--texto-fraco);font-size:.78rem}
.lista-anexos form{display:inline-block;margin-top:.25rem}

/* ---------- login ---------- */
.tela-login{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:1rem}
.caixa-login{background:var(--papel);border:1px solid var(--borda);border-radius:12px;
  padding:2rem;width:100%;max-width:380px;box-shadow:0 4px 24px rgba(16,24,40,.10)}
.marca-login{text-align:center;margin-bottom:1.5rem}
.marca-login .marca-icone{width:42px;height:42px;border-radius:10px;margin:0 auto .7rem}
.marca-login h1{font-size:1.2rem;margin:0}
.marca-login p{margin:.2rem 0 0;color:var(--texto-suave);font-size:.88rem}
.caixa-login label{margin-top:.9rem}
.caixa-login input{width:100%}
.nota-login{text-align:center;color:var(--texto-fraco);font-size:.8rem;margin:1.2rem 0 0}

/* ---------- contagem do prazo ---------- */
.linha-tempo{list-style:none;margin:.2rem 0 .6rem;padding:0 0 0 .9rem;border-left:2px solid var(--borda)}
.linha-tempo li{position:relative;display:flex;justify-content:space-between;gap:.6rem;padding:.3rem 0;font-size:.86rem}
.linha-tempo li::before{content:"";position:absolute;left:calc(-.9rem - 5px);top:.72rem;width:8px;height:8px;
  border-radius:50%;background:var(--borda-forte)}
.linha-tempo span{color:var(--texto-suave)}
.linha-tempo strong{font-weight:600;white-space:nowrap}
.linha-tempo-fatal::before{background:var(--marca)!important}
.linha-tempo-fatal strong{color:var(--marca)}
.formulario-recalculo label{margin-top:.4rem}
.formulario-inline{flex-wrap:wrap}
.campo-dias{width:5rem}
.campo-nome{width:12rem;padding:.3rem .45rem;font-size:.85rem}
.calculo-resumo{display:block;font-size:.76rem;color:var(--texto-fraco);white-space:nowrap}
.calculo-presumido{color:var(--ambar)}

/* ---------- painel no celular: cada prazo vira um cartão ---------- */
@media (max-width:720px){
  .pagina{padding:1rem .75rem 2.5rem}
  .topo-interno{gap:.6rem}
  .menu{margin-left:0;order:3;width:100%;overflow-x:auto}
  .usuario{margin-left:auto}
  .filtros>*{flex:1 1 100%}
  .filtros .botao{flex:1 1 40%}

  .tabela-cartoes-movel{background:transparent;border:none;box-shadow:none;overflow:visible}
  .tabela-cartoes-movel .tabela thead{display:none}
  .tabela-cartoes-movel .tabela,.tabela-cartoes-movel .tabela tbody{display:block}
  .tabela-cartoes-movel .tabela tr{display:grid;grid-template-columns:1fr 1fr;gap:.35rem .75rem;
    background:var(--papel);border:1px solid var(--borda);border-radius:var(--raio);
    box-shadow:var(--sombra);padding:.8rem .9rem;margin-bottom:.65rem}
  .tabela-cartoes-movel .tabela tr.linha-vencido{border-left:3px solid var(--vermelho)}
  .tabela-cartoes-movel .tabela tr.linha-hoje,
  .tabela-cartoes-movel .tabela tr.linha-urgente{border-left:3px solid var(--ambar)}
  .tabela-cartoes-movel .tabela td{display:block;padding:0;border:none;min-width:0}
  .tabela-cartoes-movel .celula-situacao,
  .tabela-cartoes-movel .celula-titulo{grid-column:1 / -1}
  .tabela-cartoes-movel .celula-titulo a{font-size:.98rem}
  .tabela-cartoes-movel td[data-rotulo]::before{content:attr(data-rotulo);display:block;font-size:.7rem;
    text-transform:uppercase;letter-spacing:.04em;color:var(--texto-fraco);font-weight:600}
  .tabela-cartoes-movel td.mono{overflow-wrap:anywhere}
  .lista-dados>div{flex-direction:column;gap:0}
}