/* =====================================================================
   Gestao PNAB Paulista 2026
   Identidade visual alinhada ao Mapa Cultural do Paulista:
   azul-marinho #0B1F3A e dourado #E8B931.

   Escolhas deliberadas:
   - fonte do sistema, sem webfont: a equipe vai usar isso em rede
     municipal, e cada requisicao externa e tempo de espera;
   - tabela densa, nao cartoes espacosos: sao 552 projetos e o parecerista
     precisa varrer a lista, nao admira-la;
   - area de analise em duas colunas, com o criterio a esquerda e a
     justificativa a direita, para a nota nunca ser dada sem o texto ao lado.
   ===================================================================== */

:root {
  --navy:        #0b1f3a;
  --navy-claro:  #16355e;
  --navy-escuro: #071525;
  --gold:        #e8b931;
  --gold-escuro: #c79a1c;

  --tinta:       #15202b;
  --tinta-fraca: #5b6b7c;
  --linha:       #dde4ec;
  --fundo:       #f4f6fa;
  --branco:      #fff;

  --verde:       #1b7f4d;
  --verde-fundo: #e4f5ec;
  --vermelho:    #b32020;
  --verm-fundo:  #fdeaea;
  --amarelo:     #8a6400;
  --amar-fundo:  #fdf3d7;
  --azul:        #15558f;
  --azul-fundo:  #e6effa;
  --roxo:        #5b3c9b;
  --roxo-fundo:  #eee9fa;
  --cinza:       #566;
  --cinza-fundo: #eceff3;

  --raio:  8px;
  --raio-g: 12px;
  --sombra: 0 1px 2px rgba(11,31,58,.08), 0 4px 12px rgba(11,31,58,.06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.25; font-weight: 650; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
  background: var(--cinza-fundo);
  padding: .1em .35em;
  border-radius: 4px;
}

/* ---------------------------------------------------------- cabecalho */
.topo {
  background: var(--navy);
  color: #fff;
  border-bottom: 3px solid var(--gold);
}
.topo-interno {
  max-width: 1360px;
  margin: 0 auto;
  padding: .65rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.marca {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: #fff;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.marca:hover { text-decoration: none; }
.marca-selo {
  background: var(--gold);
  color: var(--navy-escuro);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  padding: .25rem .45rem;
  border-radius: 4px;
}
.marca-sub {
  font-weight: 400;
  font-size: .8rem;
  opacity: .72;
  border-left: 1px solid rgba(255,255,255,.25);
  padding-left: .6rem;
}

.menu { display: flex; gap: .15rem; margin-left: auto; flex-wrap: wrap; }
.menu a {
  color: rgba(255,255,255,.82);
  padding: .4rem .7rem;
  border-radius: var(--raio);
  font-size: .9rem;
  white-space: nowrap;
}
.menu a:hover { background: rgba(255,255,255,.1); color: #fff; text-decoration: none; }
.menu a.ativo { background: var(--gold); color: var(--navy-escuro); font-weight: 650; }

.eu {
  display: flex; align-items: center; gap: .6rem;
  font-size: .82rem; color: rgba(255,255,255,.72);
  padding-left: .9rem; border-left: 1px solid rgba(255,255,255,.2);
  white-space: nowrap;
}
.eu strong { color: #fff; font-weight: 600; display: block; font-size: .86rem; }
.eu a { color: var(--gold); }

/* -------------------------------------------------------------- corpo */
.conteudo { max-width: 1360px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }

.cabecalho-pagina {
  display: flex; align-items: flex-end; gap: 1rem;
  flex-wrap: wrap; margin-bottom: 1.1rem;
}
.cabecalho-pagina p { margin: .15rem 0 0; color: var(--tinta-fraca); font-size: .92rem; }
.cabecalho-pagina .acoes { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }

.card {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  padding: 1.15rem 1.25rem;
  box-shadow: var(--sombra);
  margin-bottom: 1.1rem;
}
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.card-titulo {
  display: flex; align-items: center; gap: .6rem;
  margin: -1.15rem -1.25rem 1rem; padding: .8rem 1.25rem;
  border-bottom: 1px solid var(--linha);
  background: #fbfcfe;
  border-radius: var(--raio-g) var(--raio-g) 0 0;
}
.card-titulo h2, .card-titulo h3 { margin: 0; }
.card-titulo .direita { margin-left: auto; font-size: .85rem; color: var(--tinta-fraca); }

/* ------------------------------------------------------------ numeros */
.numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .8rem;
  margin-bottom: 1.1rem;
}
.num {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-left: 4px solid var(--navy);
  border-radius: var(--raio);
  padding: .85rem 1rem;
  box-shadow: var(--sombra);
}
.num:hover { text-decoration: none; }
a.num:hover { border-left-color: var(--gold); }
.num-valor { font-size: 1.85rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.num-rotulo { font-size: .78rem; color: var(--tinta-fraca); text-transform: uppercase; letter-spacing: .04em; margin-top: .3rem; }
.num.alerta  { border-left-color: var(--vermelho); } .num.alerta  .num-valor { color: var(--vermelho); }
.num.atencao { border-left-color: var(--amarelo);  } .num.atencao .num-valor { color: var(--amarelo); }
.num.ok      { border-left-color: var(--verde);    } .num.ok      .num-valor { color: var(--verde); }

/* ------------------------------------------------------------ tabelas */
.tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabela th {
  text-align: left; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--tinta-fraca); font-weight: 650;
  padding: .5rem .6rem; border-bottom: 2px solid var(--linha);
  background: #fbfcfe; position: sticky; top: 0; z-index: 1;
}
.tabela td { padding: .55rem .6rem; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela tbody tr:hover { background: #fafbfd; }
.tabela .num-col { text-align: right; font-variant-numeric: tabular-nums; }
.tabela .col-selo { width: 1%; white-space: nowrap; }
.tabela .col-det  { color: var(--tinta-fraca); font-size: .85rem; }
.rolar-x { overflow-x: auto; margin: 0 -1.25rem; padding: 0 1.25rem; }

/* -------------------------------------------------------------- selos */
.selo {
  display: inline-block; font-size: .72rem; font-weight: 650;
  padding: .18rem .5rem; border-radius: 999px; white-space: nowrap;
  text-transform: uppercase; letter-spacing: .03em;
}
.selo.verde    { background: var(--verde-fundo); color: var(--verde); }
.selo.vermelho { background: var(--verm-fundo);  color: var(--vermelho); }
.selo.amarelo  { background: var(--amar-fundo);  color: var(--amarelo); }
.selo.azul     { background: var(--azul-fundo);  color: var(--azul); }
.selo.roxo     { background: var(--roxo-fundo);  color: var(--roxo); }
.selo.cinza    { background: var(--cinza-fundo); color: var(--cinza); }
.selo.gold     { background: #fcf3d6; color: var(--gold-escuro); }

/* ------------------------------------------------------------ botoes */
.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  font: inherit; font-size: .9rem; font-weight: 600;
  padding: .5rem .95rem; border-radius: var(--raio);
  border: 1px solid var(--linha); background: var(--branco);
  color: var(--tinta); cursor: pointer; text-decoration: none;
}
.btn:hover { background: #f7f9fc; text-decoration: none; }
.btn-primario { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-primario:hover { background: var(--navy-claro); }
.btn-ouro { background: var(--gold); border-color: var(--gold-escuro); color: var(--navy-escuro); }
.btn-ouro:hover { background: var(--gold-escuro); }
.btn-perigo { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.btn-perigo:hover { filter: brightness(1.1); }
.btn-p { font-size: .8rem; padding: .3rem .6rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ----------------------------------------------------------- formulario */
label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .75rem; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=file], select, textarea {
  width: 100%; font: inherit; font-weight: 400; margin-top: .25rem;
  padding: .5rem .65rem; border: 1px solid #c3cfdd; border-radius: var(--raio);
  background: #fff; color: var(--tinta);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid rgba(21,85,143,.3); outline-offset: 0; border-color: var(--azul);
}
textarea { min-height: 76px; resize: vertical; line-height: 1.45; }
.grade2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.grade2 .col2 { grid-column: 1 / -1; }
.dica { font-size: .85rem; color: var(--tinta-fraca); margin: .1rem 0 .9rem; }
.filtros { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; }
.filtros label { margin-bottom: 0; }
.filtros select, .filtros input { min-width: 150px; }

/* ------------------------------------------------------------- avisos */
.aviso {
  padding: .7rem .9rem; border-radius: var(--raio);
  border-left: 4px solid; margin-bottom: .8rem; font-size: .9rem;
}
.aviso.ok      { background: var(--verde-fundo); border-color: var(--verde);    color: #0f5c37; }
.aviso.erro    { background: var(--verm-fundo);  border-color: var(--vermelho); color: #8d1a1a; }
.aviso.atencao { background: var(--amar-fundo);  border-color: var(--amarelo);  color: #6b4e00; }
.aviso.info    { background: var(--azul-fundo);  border-color: var(--azul);     color: #114273; }
.aviso strong { font-weight: 700; }

/* --------------------------------------------------------- checklist */
.item-doc {
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: .8rem .9rem; margin-bottom: .6rem; background: #fff;
}
.item-doc.eliminatorio { border-left: 4px solid var(--vermelho); }
.item-doc.condicional  { border-left: 4px solid var(--amarelo); }
.item-doc-topo { display: flex; gap: .6rem; align-items: flex-start; flex-wrap: wrap; }
.item-doc-id {
  font-family: ui-monospace, Consolas, monospace; font-size: .78rem;
  font-weight: 700; color: var(--navy); background: var(--azul-fundo);
  padding: .15rem .4rem; border-radius: 4px; white-space: nowrap;
}
.item-doc-desc { flex: 1 1 320px; font-size: .92rem; }
.item-doc-ajuda {
  font-size: .82rem; color: var(--tinta-fraca); margin-top: .35rem;
  padding-left: .6rem; border-left: 2px solid var(--linha);
}
.item-doc-anexo {
  font-size: .8rem; margin-top: .4rem; color: var(--verde);
  background: var(--verde-fundo); padding: .3rem .5rem; border-radius: 4px;
  font-family: ui-monospace, Consolas, monospace; word-break: break-all;
}
.opcoes { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .55rem; }
.opcoes label {
  margin: 0; font-weight: 500; font-size: .83rem; cursor: pointer;
  border: 1px solid var(--linha); border-radius: 999px;
  padding: .25rem .6rem; display: inline-flex; align-items: center; gap: .3rem;
  background: #fff;
}
.opcoes input { margin: 0; accent-color: var(--navy); }
.opcoes label:has(input:checked) { border-color: var(--navy); background: var(--azul-fundo); font-weight: 650; }
.opcoes label.op-conforme:has(input:checked)  { border-color: var(--verde);    background: var(--verde-fundo); color: var(--verde); }
.opcoes label.op-nao:has(input:checked)       { border-color: var(--vermelho); background: var(--verm-fundo);  color: var(--vermelho); }
.opcoes label.op-na:has(input:checked)        { border-color: var(--cinza);    background: var(--cinza-fundo); color: var(--cinza); }

/* ----------------------------------------------------------- criterio */
.criterio {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 1rem; border: 1px solid var(--linha); border-radius: var(--raio);
  padding: .9rem 1rem; margin-bottom: .75rem; background: #fff;
}
.criterio-desc { font-size: .92rem; }
.criterio-letra {
  display: inline-block; width: 1.7rem; height: 1.7rem; line-height: 1.7rem;
  text-align: center; border-radius: 50%; background: var(--navy);
  color: #fff; font-weight: 700; font-size: .85rem; margin-right: .4rem;
}
.criterio-pont { font-size: .78rem; color: var(--tinta-fraca); margin-top: .3rem; }
.criterio-niveis { display: flex; flex-direction: column; gap: .3rem; margin: .55rem 0 .2rem; }
.criterio-niveis label {
  margin: 0; font-weight: 500; font-size: .85rem; cursor: pointer;
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: .4rem .6rem; display: flex; align-items: center; gap: .45rem; background: #fff;
}
.criterio-niveis label:has(input:checked) {
  border-color: var(--navy); background: var(--azul-fundo); font-weight: 650;
}
.criterio-niveis .pts { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--navy); }
.criterio-just label { margin: 0; }
.criterio-just textarea { min-height: 118px; }
.obrig { color: var(--vermelho); font-weight: 700; }

.barra-nota {
  position: sticky; bottom: 0; z-index: 5;
  background: var(--navy); color: #fff;
  border-radius: var(--raio-g); padding: .8rem 1.1rem;
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  box-shadow: 0 -2px 16px rgba(11,31,58,.22); margin-top: 1rem;
}
.barra-nota .bn-item { font-size: .78rem; opacity: .75; text-transform: uppercase; letter-spacing: .04em; }
.barra-nota .bn-valor { font-size: 1.5rem; font-weight: 700; line-height: 1; }
.barra-nota .bn-total .bn-valor { color: var(--gold); }
.barra-nota form, .barra-nota .acoes { margin-left: auto; display: flex; gap: .5rem; }

/* ------------------------------------------------------- dados do projeto */
.ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .9rem 1.4rem; }
.ficha-item .rot { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-fraca); font-weight: 650; }
.ficha-item .val { font-size: .95rem; margin-top: .1rem; word-break: break-word; }

.form-resp { border-top: 1px solid var(--linha); padding: .55rem 0; }
.form-resp .p { font-size: .82rem; color: var(--tinta-fraca); font-weight: 600; }
.form-resp .r { font-size: .92rem; margin-top: .15rem; white-space: pre-wrap; }
.form-resp .r.arq { font-family: ui-monospace, Consolas, monospace; font-size: .82rem; color: var(--azul); word-break: break-all; }

.vazio { text-align: center; padding: 2.5rem 1rem; color: var(--tinta-fraca); }
.vazio h3 { color: var(--tinta); }

/* -------------------------------------------------------- login / instalador */
.tela-login, .tela-instalador { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-escuro) 100%); min-height: 100vh; }
.caixa-login { max-width: 400px; margin: 0 auto; padding: 4rem 1.25rem; }
.caixa-login .card { padding: 1.6rem; }
.login-marca { text-align: center; color: #fff; margin-bottom: 1.4rem; }
.login-marca .selo-g {
  display: inline-block; background: var(--gold); color: var(--navy-escuro);
  font-size: .72rem; font-weight: 800; letter-spacing: .1em;
  padding: .3rem .6rem; border-radius: 5px; margin-bottom: .7rem;
}
.login-marca h1 { font-size: 1.3rem; margin: 0; }
.login-marca p { margin: .25rem 0 0; font-size: .88rem; opacity: .7; }

.inst { max-width: 740px; margin: 0 auto; padding: 2.5rem 1.25rem 5rem; }
.inst-topo { text-align: center; color: #fff; margin-bottom: 1.5rem; }
.inst-topo h1 { font-size: 1.5rem; margin: .5rem 0 .2rem; }
.inst-topo p { margin: 0; opacity: .72; font-size: .92rem; }
.inst-selo {
  display: inline-block; background: var(--gold); color: var(--navy-escuro);
  font-size: .72rem; font-weight: 800; letter-spacing: .1em;
  padding: .3rem .6rem; border-radius: 5px;
}
.passos { margin: .8rem 0 1.2rem; padding-left: 1.3rem; }
.passos li { margin-bottom: .5rem; }

@media (max-width: 860px) {
  .criterio { grid-template-columns: 1fr; }
  .grade2 { grid-template-columns: 1fr; }
  .topo-interno { flex-wrap: wrap; }
  .menu { order: 3; width: 100%; margin-left: 0; }
  .eu { margin-left: auto; }
}

@media print {
  .topo, .menu, .btn, .barra-nota, .cabecalho-pagina .acoes { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .card { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
  .conteudo { max-width: none; padding: 0; }
}