/* Interface interna do escritório. Prioridade é densidade e legibilidade:
   quem usa passa o dia aqui e precisa ver muita linha de uma vez. */

:root {
  --tinta: #1a1d23;
  --tinta-fraca: #6b7280;
  --linha: #e4e7eb;
  --fundo: #f7f8fa;
  --azul: #1f3864;
  --azul-claro: #eaf0fa;
  --vermelho: #b42318;
  --vermelho-claro: #fef3f2;
  --ambar: #b54708;
  --ambar-claro: #fffaeb;
  --verde: #067647;
  --verde-claro: #ecfdf3;
}

* { box-sizing: border-box; }

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

a { color: var(--azul); }
h1 { font-size: 1.5rem; margin: 0 0 .25rem; }
h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .04em;
     color: var(--tinta-fraca); margin: 0 0 .75rem; }

/* ---------- topo ---------- */
.topo {
  display: flex; align-items: center; gap: 1.5rem;
  padding: .75rem 1.5rem; background: #fff; border-bottom: 1px solid var(--linha);
}
.marca { font-weight: 700; text-decoration: none; color: var(--azul); }
.marca span { font-weight: 400; color: var(--tinta-fraca); }
.topo nav { display: flex; gap: 1rem; align-items: center; margin-left: auto; }
.topo nav a { text-decoration: none; }
.sair { display: flex; align-items: center; gap: .5rem; }
.quem { color: var(--tinta-fraca); font-size: .875rem; }
.link { background: none; border: 0; color: var(--tinta-fraca); cursor: pointer;
        text-decoration: underline; font-size: .875rem; padding: 0; }

.conteudo { max-width: 1400px; margin: 0 auto; padding: 1.5rem; }
.conteudo.estreito { max-width: 380px; padding-top: 8vh; }
.migalha { color: var(--tinta-fraca); font-size: .875rem; margin: 0 0 .5rem; }
.subtitulo { color: var(--tinta-fraca); margin: 0 0 1.25rem; max-width: 60ch; }

/* ---------- avisos ---------- */
.aviso { padding: .625rem .875rem; border-radius: 6px; margin: 0 0 1rem; }
.aviso.erro { background: var(--vermelho-claro); color: var(--vermelho);
              border: 1px solid #fecdca; }

/* ---------- tabela ---------- */
.tabela { width: 100%; border-collapse: collapse; background: #fff;
          border: 1px solid var(--linha); border-radius: 8px; overflow: hidden; }
.tabela th {
  text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--tinta-fraca); padding: .625rem .75rem; border-bottom: 1px solid var(--linha);
  background: #fcfcfd; font-weight: 600; white-space: nowrap;
}
.tabela td { padding: .625rem .75rem; border-bottom: 1px solid var(--linha);
             vertical-align: top; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela a { text-decoration: none; }
.tabela a:hover { text-decoration: underline; }
.etapa .ordem { display: inline-block; min-width: 1.4em; text-align: center;
                color: var(--tinta-fraca); font-size: .8125rem; }
.fraco { color: var(--tinta-fraca); }
.ruim { color: var(--vermelho); font-weight: 600; }
.destaque-terceiro { color: var(--ambar); }

/* ---------- etiquetas ---------- */
.etiqueta { display: inline-block; padding: .125rem .5rem; border-radius: 999px;
            font-size: .75rem; font-weight: 600; white-space: nowrap; }
.etiqueta.em-andamento { background: var(--azul-claro); color: var(--azul); }
.etiqueta.atrasado { background: var(--vermelho-claro); color: var(--vermelho); }
.etiqueta.concluído, .etiqueta.concluido { background: var(--verde-claro); color: var(--verde); }
.etiqueta.antes-do-protocolo { background: #f2f4f7; color: var(--tinta-fraca); }
.etiqueta.arquivado { background: #f2f4f7; color: var(--tinta-fraca); }
.etiqueta.espera { background: var(--ambar-claro); color: var(--ambar); }

/* ---------- processo ---------- */
.cabecalho-processo { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.indicadores { display: flex; flex-wrap: wrap; gap: 1px; background: var(--linha);
               border: 1px solid var(--linha); border-radius: 8px; overflow: hidden;
               margin-bottom: 1.5rem; }
.indicadores > div { flex: 1 1 140px; background: #fff; padding: .75rem 1rem; }
.indicadores .rotulo { display: block; font-size: .75rem; text-transform: uppercase;
                       letter-spacing: .04em; color: var(--tinta-fraca); }
.indicadores .valor { display: block; font-size: 1.25rem; font-weight: 600;
                      font-variant-numeric: tabular-nums; }

.colunas { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; }
.coluna-larga { flex: 3 1 620px; min-width: 0; }
.coluna-estreita { flex: 1 1 300px; min-width: 0; }

.etapas .sub { color: var(--tinta-fraca); font-size: .8125rem; margin-top: .125rem; }
.etapas .obs { font-size: .8125rem; margin-top: .25rem; padding: .25rem .5rem;
               background: var(--fundo); border-radius: 4px; }
.etapas tr.feita td { background: #fbfdfc; }
.etapas tr.feita strong { color: var(--tinta-fraca); font-weight: 500; }
.etapas tr.dispensada td { background: #fafafa; opacity: .55; }
.etapas tr.atual { box-shadow: inset 3px 0 0 var(--azul); }
.linha-acao { display: flex; gap: .25rem; flex-wrap: wrap; }
.linha-acao input[type=text] { min-width: 8rem; }

/* ---------- histórico ---------- */
.anotar { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.historico { list-style: none; margin: 0; padding: 0; }
.historico li { padding: .5rem 0; border-bottom: 1px solid var(--linha); font-size: .875rem; }
.historico li.auto { color: var(--tinta-fraca); }
.historico .quando { font-size: .75rem; color: var(--tinta-fraca); }

/* ---------- formulário ---------- */
.cartao { background: #fff; border: 1px solid var(--linha); border-radius: 8px; padding: 1.5rem; }
.entrada h1 { text-align: center; margin-bottom: 1.25rem; }
.entrada form { display: flex; flex-direction: column; gap: .75rem; }

.formulario { display: flex; flex-wrap: wrap; gap: .875rem; background: #fff;
              border: 1px solid var(--linha); border-radius: 8px; padding: 1.25rem; }
.campo { flex: 1 1 220px; display: flex; flex-direction: column; gap: .25rem;
         font-size: .8125rem; color: var(--tinta-fraca); }
.campo.largo { flex-basis: 100%; }
.campo.caixa { flex-direction: row; align-items: center; gap: .5rem; flex-basis: 100%; }
.campo small { font-weight: 400; opacity: .8; }
.campo.acoes { align-items: flex-start; }

label { font-size: .8125rem; color: var(--tinta-fraca); display: flex;
        flex-direction: column; gap: .25rem; }
input, select, textarea {
  font: inherit; color: var(--tinta); padding: .4375rem .5rem;
  border: 1px solid #d0d5dd; border-radius: 6px; background: #fff; width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--azul-claro); border-color: var(--azul);
}
.campo.caixa input { width: auto; }

.botao { display: inline-block; background: var(--azul); color: #fff; border: 0;
         padding: .5rem 1rem; border-radius: 6px; font: inherit; font-weight: 600;
         cursor: pointer; text-decoration: none; text-align: center; }
.botao:hover { filter: brightness(1.15); }
.botao.pequeno { padding: .3125rem .625rem; font-size: .8125rem; }

.vazio { background: #fff; border: 1px dashed var(--linha); border-radius: 8px;
         padding: 3rem; text-align: center; color: var(--tinta-fraca); }
.ficha { margin-top: 1.5rem; }
.ficha summary { cursor: pointer; font-weight: 600; padding: .5rem 0; }
.rodape-nota { color: var(--tinta-fraca); font-size: .8125rem; max-width: 75ch;
               margin-top: 1rem; }

@media (max-width: 720px) {
  .topo { flex-wrap: wrap; gap: .75rem; }
  .conteudo { padding: 1rem; }
  .tabela { display: block; overflow-x: auto; }
}

/* ---------- contatos e follow-up ---------- */
.contatos { list-style: none; margin: 0 0 .75rem; padding: 0; }
.contatos li { padding: .5rem 0; border-bottom: 1px solid var(--linha); font-size: .875rem; }
.contato-nome { font-weight: 600; }
.contato-dado { font-size: .8125rem; }
.contato-obs { font-size: .8125rem; color: var(--tinta-fraca); margin-top: .125rem; }
.contatos form { display: inline; }
.etiqueta.papel { background: #f2f4f7; color: var(--tinta-fraca); font-weight: 500; }
.etiqueta.email { background: var(--azul-claro); color: var(--azul); }
.etiqueta.email.recebido { background: var(--verde-claro); color: var(--verde); }

.bloco-dobravel { margin-bottom: 1rem; border: 1px solid var(--linha);
                  border-radius: 6px; background: #fff; }
.bloco-dobravel summary { cursor: pointer; padding: .5rem .75rem; font-size: .875rem;
                          font-weight: 600; }
.bloco-dobravel > form, .bloco-dobravel > p { padding: 0 .75rem .75rem; margin: 0; }
.empilhado { display: flex; flex-direction: column; gap: .375rem; }
.espaco-acima { margin-top: 1.5rem; }
.link.pequeno { font-size: .75rem; }
.pequeno { font-size: .8125rem; }

.historico li.email_enviado, .historico li.email_recebido { color: var(--tinta); }
.historico li.evento { color: var(--tinta-fraca); }
.historico .com-quem { font-size: .75rem; color: var(--tinta-fraca); }
.historico .assunto { font-weight: 600; }
.linha-botoes { flex-direction: row !important; align-items: center; gap: 1rem; }
button[disabled] { opacity: .5; cursor: not-allowed; }
input[disabled] { background: var(--fundo); color: var(--tinta-fraca); }

/* ---------- acesso ---------- */
.aviso.ok { background: var(--verde-claro); color: var(--verde); border: 1px solid #abefc6; }
.link-convite { background: var(--ambar-claro); border: 1px solid #fedf89; color: var(--ambar); }
.link-convite input { margin-top: .5rem; font-family: ui-monospace, monospace;
                      font-size: .8125rem; }
.centro { text-align: center; margin-top: 1rem; }
.acao form { display: block; margin-bottom: .25rem; }
a.quem { text-decoration: none; }
a.quem:hover { text-decoration: underline; }