/* =====================================================================
   Portal do Cliente - folha de estilo única.
   Paleta neutra e sobria: troque as variaveis abaixo pelas cores da marca.
   ===================================================================== */

:root {
  --papel:        #faf9f7;
  --superficie:   #ffffff;
  --linha:        #e5e2db;
  --linha-forte:  #d3cfc6;
  --tinta:        #1b1a17;
  --tinta-suave:  #6c6860;
  --destaque:     #1f5c4a;
  --destaque-claro:#eaf2ef;
  --alerta:       #9a3412;
  --alerta-claro: #fdf0e8;
  --espera:       #8a6100;
  --espera-claro: #fdf6e3;
  --ok:           #1f6b3a;
  --ok-claro:     #ecf5ee;
  --producao:     #1d4e6b;
  --producao-claro:#e8f0f5;
  --interno:      #5b3fa8;
  --interno-claro:#efeafa;
  --raio:         10px;
}

* { box-sizing: border-box; }

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

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

/* ---------- estrutura ---------- */
.topo {
  background: var(--superficie);
  border-bottom: 1px solid var(--linha);
  position: sticky; top: 0; z-index: 10;
}
.topo-interno {
  max-width: 1080px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 28px; min-height: 62px;
  flex-wrap: wrap;
}
.marca { font-weight: 600; letter-spacing: -0.01em; color: var(--tinta); }
.marca span { color: var(--tinta-suave); font-weight: 400; }
.menu { display: flex; gap: 22px; flex: 1; flex-wrap: wrap; }
.menu a { color: var(--tinta-suave); font-size: 14px; padding: 4px 0; border-bottom: 2px solid transparent; }
.menu a:hover { color: var(--tinta); text-decoration: none; }
.menu a.ativo { color: var(--tinta); border-bottom-color: var(--destaque); }
.menu-conta { display: flex; align-items: center; gap: 16px; font-size: 14px; color: var(--tinta-suave); }

.pagina { max-width: 1080px; margin: 0 auto; padding: 32px 24px 80px; }
.pagina-estreita { max-width: 620px; }

/* ---------- tipografia ---------- */
h1 { font-size: 25px; letter-spacing: -0.02em; margin: 0 0 4px; font-weight: 600; }
h2 { font-size: 17px; margin: 32px 0 12px; font-weight: 600; letter-spacing: -0.01em; }
h3 { font-size: 15px; margin: 0 0 8px; font-weight: 600; }
.legenda { color: var(--tinta-suave); font-size: 14px; margin: 0 0 24px; }
.rotulo-secao {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--tinta-suave); font-weight: 600; margin: 34px 0 12px;
}
.vazio { color: var(--tinta-suave); font-size: 14px; font-style: italic; padding: 18px 0; }
.migalha { font-size: 13px; color: var(--tinta-suave); margin-bottom: 14px; }

/* ---------- cartoes ---------- */
.cartao {
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 20px; margin-bottom: 14px;
}
.cartao-lista { display: block; transition: border-color .15s; }
a.cartao-lista:hover { border-color: var(--linha-forte); text-decoration: none; }
.cartao-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ---------- etiquetas de status ---------- */
.selo {
  display: inline-block; font-size: 11.5px; font-weight: 600; padding: 3px 9px;
  border-radius: 999px; white-space: nowrap; letter-spacing: 0.01em;
}
.selo-pedido            { background: var(--espera-claro); color: var(--espera); }
.selo-aprovacao_interna { background: var(--interno-claro); color: var(--interno); }
.selo-ativo             { background: var(--destaque-claro); color: var(--destaque); }
.selo-briefing          { background: var(--destaque-claro); color: var(--destaque); }
.selo-execucao          { background: var(--destaque-claro); color: var(--destaque); }
.selo-aprovacao_cliente { background: var(--espera-claro); color: var(--espera); }
.selo-ajustes           { background: var(--alerta-claro); color: var(--alerta); }
.selo-aprovado          { background: var(--ok-claro); color: var(--ok); }
.selo-orcamento         { background: var(--espera-claro); color: var(--espera); }
.selo-producao          { background: var(--producao-claro); color: var(--producao); }
.selo-entregue          { background: var(--ok-claro); color: var(--ok); }
.selo-cancelado         { background: #f0eeea; color: var(--tinta-suave); }
.selo-interno           { background: var(--interno-claro); color: var(--interno); }
.selo-neutro            { background: #f0eeea; color: var(--tinta-suave); }
.selo-atencao           { background: var(--alerta-claro); color: var(--alerta); }

/* ---------- quadro por etapa ---------- */
.quadro {
  display: flex; gap: 12px; overflow-x: auto; padding-bottom: 14px;
  scrollbar-width: thin;
}
.coluna {
  flex: 0 0 212px; background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 12px; align-self: flex-start;
  max-height: none;
}
.coluna-topo {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 600; color: var(--tinta-suave); padding-bottom: 10px;
  border-bottom: 1px solid var(--linha); margin-bottom: 10px;
}
.coluna-topo b { font-size: 13px; color: var(--tinta); letter-spacing: 0; }
.card-job {
  display: block; background: var(--papel); border: 1px solid var(--linha);
  border-radius: 8px; padding: 11px 12px; margin-bottom: 9px;
  transition: border-color .15s;
}
a.card-job:hover { border-color: var(--linha-forte); text-decoration: none; }
.card-job .codigo {
  font-size: 11px; color: var(--tinta-suave); font-variant-numeric: tabular-nums;
}
.card-job .nome { font-weight: 500; font-size: 13.5px; display: block; margin: 2px 0 6px; color: var(--tinta); }
.card-job .rodape { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11.5px; color: var(--tinta-suave); }
.coluna-vazia { font-size: 12.5px; color: var(--tinta-suave); font-style: italic; padding: 6px 0 10px; }

/* ---------- valores ---------- */
.valor {
  font-variant-numeric: tabular-nums; font-weight: 600;
}
.valor-grande { font-size: 21px; letter-spacing: -0.01em; }
.tabela-custos { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela-custos th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--tinta-suave); font-weight: 600; padding: 0 0 8px; border-bottom: 1px solid var(--linha);
}
.tabela-custos td { padding: 9px 0; border-bottom: 1px solid var(--linha); }
.tabela-custos tr:last-child td { border-bottom: none; }
.tabela-custos .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- caminho de pastas ---------- */
.trilha {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: 13px; color: var(--tinta-suave); margin-bottom: 14px;
}
.trilha a { color: var(--tinta-suave); }
.trilha a:hover { color: var(--tinta); }
.trilha .sep { color: var(--linha-forte); }
.trilha .atual { color: var(--tinta); font-weight: 500; }

/* ---------- formularios ---------- */
/* ---------- formularios ---------- */
label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 5px; color: var(--tinta); }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=url],
select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--linha-forte);
  border-radius: 8px; font: inherit; font-size: 14px; background: var(--superficie);
  color: var(--tinta);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--destaque); box-shadow: 0 0 0 3px var(--destaque-claro);
}
textarea { min-height: 92px; resize: vertical; }
.campo { margin-bottom: 14px; }
.campos-lado { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.caixa-marcar { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.caixa-marcar input { width: auto; }
.dica { font-size: 12.5px; color: var(--tinta-suave); margin-top: 5px; }

/* ---------- botoes ---------- */
button, .botao {
  display: inline-block; font: inherit; font-size: 14px; font-weight: 500;
  padding: 9px 16px; border-radius: 8px; border: 1px solid var(--destaque);
  background: var(--destaque); color: #fff; cursor: pointer; text-decoration: none;
}
button:hover, .botao:hover { filter: brightness(1.08); text-decoration: none; }
.botao-neutro { background: var(--superficie); color: var(--tinta); border-color: var(--linha-forte); }
.botao-perigo { background: var(--superficie); color: var(--alerta); border-color: #e9c9b8; }
.botao-pequeno { padding: 5px 11px; font-size: 13px; }
.acoes { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 18px; }

/* ---------- avisos ---------- */
.aviso { padding: 12px 16px; border-radius: 8px; margin-bottom: 18px; font-size: 14px; }
.aviso-ok  { background: var(--ok-claro); color: var(--ok); border: 1px solid #cfe4d6; }
.aviso-erro{ background: var(--alerta-claro); color: var(--alerta); border: 1px solid #eed3c4; }

/* ---------- listas e tabelas ---------- */
.linha-item {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 13px 0; border-bottom: 1px solid var(--linha);
}
.linha-item:last-child { border-bottom: none; }
.linha-item .titulo { font-weight: 500; }
.meta { font-size: 13px; color: var(--tinta-suave); }

.lista-links { list-style: none; padding: 0; margin: 0; }
.lista-links li {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--linha);
}
.lista-links li:last-child { border-bottom: none; }

/* ---------- conversa ---------- */
.mensagem { padding: 14px 0; border-bottom: 1px solid var(--linha); }
.mensagem:last-child { border-bottom: none; }
.mensagem-topo { display: flex; gap: 10px; align-items: baseline; margin-bottom: 4px; }
.mensagem-autor { font-weight: 600; font-size: 14px; }
.mensagem-corpo { white-space: pre-wrap; }
.etiqueta-lado { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: #f0eeea; color: var(--tinta-suave); }
.etiqueta-lado.agencia { background: var(--destaque-claro); color: var(--destaque); }

/* ---------- linha do tempo ---------- */
.tempo { list-style: none; padding: 0; margin: 0; font-size: 13.5px; }
.tempo li { padding: 8px 0 8px 16px; border-left: 2px solid var(--linha); color: var(--tinta-suave); }
.tempo li b { color: var(--tinta); font-weight: 500; }

/* ---------- tela de login ---------- */
.tela-acesso {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
}
.caixa-acesso {
  background: var(--superficie); border: 1px solid var(--linha); border-radius: 14px;
  padding: 36px; width: 100%; max-width: 400px;
}
.caixa-acesso h1 { font-size: 21px; margin-bottom: 6px; }
.caixa-acesso button { width: 100%; margin-top: 6px; }
.rodape-acesso { text-align: center; margin-top: 18px; font-size: 13.5px; }

/* ---------- responsivo ---------- */
@media (max-width: 720px) {
  .grade-2, .campos-lado { grid-template-columns: 1fr; }
  .topo-interno { min-height: 0; padding: 12px 18px; gap: 12px; }
  .pagina { padding: 22px 18px 60px; }
  .linha-item { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ---------- seções recolhíveis ---------- */
.secao { margin-top: 34px; }
.secao > summary {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--tinta-suave); font-weight: 600; cursor: pointer;
  padding: 6px 0; list-style: none; display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid transparent;
}
.secao > summary::-webkit-details-marker { display: none; }
.secao > summary::before {
  content: "▸"; font-size: 10px; color: var(--linha-forte);
  transition: transform .15s; display: inline-block;
}
.secao[open] > summary::before { transform: rotate(90deg); }
.secao > summary:hover { color: var(--tinta); }
.secao > summary:focus-visible { outline: 2px solid var(--destaque); outline-offset: 3px; }
.secao > *:not(summary) { margin-top: 12px; }