:root {
  --header-bg: #40506a;
  --navy-deep: #232e42;
  --gold: #c9a45f;
  --gold-light: #e3c78a;
  --gold-dark: #a3803f;
  --cream: #f7f5f0;
  --card: #ffffff;
  --row-alt: #efece3;
  --border: #ddd7c6;
  --text-dark: #232e42;
  --text-muted: #6b7280;
  --danger: #8c3f3f;
  --danger-bg: #f3e6e6;
  --status-encerrado: #8a8f98;
  --status-arquivado: #8c6d3f;
  --status-andamento: #35662c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--text-dark);
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
}

/* ---------- cabecalho ---------- */
.topo {
  background: var(--header-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  flex-wrap: wrap;
  gap: 12px;
}
.topo-marca { display: flex; align-items: center; gap: 16px; }
.topo-logo { height: 52px; display: block; border-radius: 4px; }
.topo-linha-dourada-vertical { width: 2px; height: 40px; background: var(--gold); }
.topo-textos h1 { color: #fff; font-size: 16px; margin: 0; }
.topo-textos p { color: var(--gold-light); font-size: 11px; margin: 2px 0 0; }
.linha-dourada { height: 3px; background: var(--gold); }

.topo-nav { display: flex; align-items: center; gap: 18px; }
.topo-nav a {
  color: var(--gold-light);
  text-decoration: none;
  font-size: 13px;
  padding: 6px 4px;
  border-bottom: 2px solid transparent;
}
.topo-nav a:hover, .topo-nav a.ativo { color: #fff; border-bottom-color: var(--gold); }
.topo-nav .topo-usuario { color: #cfd6e2; font-size: 12px; margin-left: 6px; }
.topo-nav .topo-sair { color: #e3b0b0; }
.topo-nav .topo-sair:hover { color: #fff; border-bottom-color: var(--danger); }

/* ---------- layout geral ---------- */
.conteudo { padding: 18px 24px 40px; max-width: 1400px; margin: 0 auto; }

.rodape {
  background: var(--navy-deep);
  color: var(--gold-light);
  font-size: 11px;
  display: flex;
  justify-content: space-between;
  padding: 8px 24px;
  position: sticky;
  bottom: 0;
}

/* ---------- mensagens ---------- */
.mensagens { margin-bottom: 14px; }
.mensagem {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 8px;
}
.mensagem-erro { background: var(--danger-bg); color: var(--danger); border: 1px solid #e0bcbc; }
.mensagem-sucesso { background: #e7f1e2; color: #35662c; border: 1px solid #c3ddb6; }
.mensagem-info { background: #fdf4de; color: #7a5a10; border: 1px solid #ecd9a0; }

/* ---------- botoes ---------- */
.botao {
  font-family: inherit;
  font-size: 13px;
  padding: 9px 16px;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease;
}
.botao:disabled { opacity: 0.5; cursor: not-allowed; }
.botao-primario { background: var(--gold); color: var(--navy-deep); font-weight: 600; }
.botao-primario:hover:not(:disabled) { background: var(--gold-light); }
.botao-primario:active:not(:disabled) { background: var(--gold-dark); }
.botao-secundario { background: var(--card); color: var(--navy-deep); border-color: var(--border); }
.botao-secundario:hover:not(:disabled) { background: var(--row-alt); }
.botao-perigo { background: var(--card); color: var(--danger); border-color: var(--border); }
.botao-perigo:hover:not(:disabled) { background: var(--danger-bg); }
.botao-largo { width: 100%; padding: 11px; font-size: 14px; }
.botao-pequeno { padding: 5px 10px; font-size: 12px; }

/* ---------- barra de ferramentas / busca ---------- */
.barra-ferramentas { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.cartao-busca {
  flex: 1 1 340px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding: 4px 12px;
}
.icone-busca { margin-right: 6px; }
.cartao-busca input {
  border: none;
  outline: none;
  flex: 1;
  padding: 9px 4px;
  font-size: 14px;
  color: var(--text-dark);
  background: transparent;
}
.botao-limpar-busca {
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 5px 6px;
  border-radius: 4px;
  flex: 0 0 auto;
}
.botao-limpar-busca:hover { background: var(--row-alt); color: var(--text-dark); }
.acoes { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- lista + aba lateral de detalhes ---------- */
.layout-lista { display: flex; gap: 14px; align-items: flex-start; }
/* flex-basis 0 + min-width 0 + max-width 100% evita que a tabela de
   largura fixa (table-layout:fixed, colunas com largura em pixels) force
   o item a manter seu tamanho de conteudo - assim ele realmente encolhe
   para caber na tela em celulares, com rolagem horizontal só dentro do
   proprio cartão da tabela (não a pagina inteira) */
.layout-lista .cartao-tabela { flex: 1 1 0%; min-width: 0; max-width: 100%; }

/* ---------- tabela ---------- */
.cartao-tabela {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.cartao-padding { padding: 18px; }
.tabela-rolagem { overflow-x: auto; max-height: 62vh; overflow-y: auto; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
#tabela-clientes { table-layout: fixed; }
thead th {
  position: sticky;
  top: 0;
  background: var(--navy-deep);
  color: var(--gold-light);
  text-align: left;
  padding: 10px 12px;
  font-size: 11px;
  letter-spacing: 0.02em;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
thead th:hover { background: var(--header-bg); }
tbody td { padding: 9px 12px; border-bottom: 1px solid var(--row-alt); vertical-align: top; }
tbody tr:nth-child(even) { background: var(--row-alt); }
tbody tr:hover { background: #efe3c8; cursor: pointer; }
tbody tr.selecionada { background: var(--gold) !important; color: var(--navy-deep); }
/* destaca visualmente processos encerrados/arquivados mesmo sem a coluna
   "Desfecho" visivel na lista simplificada (o dado continua no painel lateral) */
tbody tr.linha-encerrado { color: var(--status-encerrado); }
tbody tr.linha-arquivado { color: var(--status-arquivado); }

/* colunas redimensionaveis (so na tabela de clientes) - o th "sticky" ja
   funciona como ancora (positioned element) para a alca em position:absolute */
#tabela-clientes thead th {
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 16px;
}
#tabela-clientes tbody td {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* alca de redimensionar coluna (arrastar para aumentar/diminuir o "recuo") */
.alca-coluna {
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  z-index: 2;
}
.alca-coluna:hover, .alca-coluna:active { background: var(--gold); opacity: 0.6; }

.tabela-simples { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela-simples th { text-align: left; background: var(--navy-deep); color: var(--gold-light); padding: 9px 12px; font-size: 11px; }
.tabela-simples td { padding: 9px 12px; border-bottom: 1px solid var(--row-alt); }
.acoes-tabela { display: flex; gap: 6px; }
.acoes-tabela form { display: inline; }

.estado-vazio { padding: 40px; text-align: center; color: var(--text-muted); }

/* ---------- aba lateral de detalhes (visualizacao dos demais campos) ---------- */
.painel-lateral {
  flex: 0 0 320px;
  width: 320px;
  max-width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 62vh;
}
.painel-lateral[hidden] { display: none; }

/* divisor arrastavel entre a tabela e a aba lateral (entrega 43, a
   pedido do usuário - mesmo ajuste feito na tela "pasta do cliente" do
   programa desktop): uma faixa fina com cursor de redimensionar
   horizontal; a largura escolhida fica salva no navegador (localStorage,
   ver iniciarPainelLateralRedimensionavel em app.js) e volta a valer da
   próxima vez. */
.alca-painel-lateral {
  flex: 0 0 8px;
  width: 8px;
  cursor: col-resize;
  align-self: stretch;
  border-radius: 4px;
  background: transparent;
}
.alca-painel-lateral:hover, .alca-painel-lateral.arrastando { background: var(--gold); opacity: 0.5; }
.alca-painel-lateral[hidden] { display: none; }
@media (max-width: 900px) { .alca-painel-lateral { display: none !important; } }
.painel-cabecalho {
  background: var(--navy-deep);
  color: var(--gold-light);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
}
.painel-fechar {
  background: transparent;
  border: none;
  color: var(--gold-light);
  font-size: 13px;
  cursor: pointer;
  padding: 2px 6px;
}
.painel-fechar:hover { color: #fff; }
.painel-linha-dourada { height: 2px; background: var(--gold); flex: 0 0 auto; }
.painel-corpo { overflow-y: auto; padding: 4px 0 8px; flex: 1 1 auto; min-height: 120px; }
.painel-linha { padding: 10px 16px 0; }
.painel-rotulo {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}
.painel-valor { font-size: 13px; color: var(--text-dark); word-break: break-word; white-space: pre-line; }
.painel-rodape { padding: 12px 14px; border-top: 1px solid var(--row-alt); flex: 0 0 auto; }

@media (max-width: 900px) {
  .layout-lista { flex-direction: column; }
  .painel-lateral { flex: 1 1 auto; width: 100%; }
}

/* ---------- selo de desfecho do processo ---------- */
.selo-desfecho {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  color: #fff;
}
.selo-encerrado { background: var(--status-encerrado); }
.selo-arquivado { background: var(--status-arquivado); }
.selo-andamento { background: var(--status-andamento); }

/* ---------- selo "quem e o cliente" (Parte Autora / Parte Adversa) ---------- */
.selo-cliente {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--gold);
  color: var(--navy-deep);
}

/* ---------- rotulo de Parte Autora / Parte Adversa + botao "Cliente" ---------- */
.rotulo-com-selo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}
.rotulo-com-selo label { margin: 0; }
.botao-selo-cliente {
  font-family: inherit;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-muted);
  white-space: nowrap;
}
.botao-selo-cliente:hover { background: var(--row-alt); }
.botao-selo-cliente.ativo {
  background: var(--gold);
  color: var(--navy-deep);
  border-color: var(--gold-dark);
  font-weight: 700;
}

/* ---------- barra de status ---------- */
.barra-status {
  background: var(--navy-deep);
  color: var(--gold-light);
  font-size: 12px;
  padding: 8px 14px;
  border-radius: 0 0 6px 6px;
  margin-top: -1px;
}

/* ---------- formularios / modal ---------- */
label { display: block; font-size: 12px; font-weight: 600; color: var(--navy-deep); margin: 12px 0 4px; }
input[type=text], input[type=password], input[type=email], input[type=number], input[type=time], textarea, select {
  width: 100%;
  padding: 9px 10px;
  border-radius: 4px;
  border: 1px solid var(--border);
  font-size: 13px;
  font-family: inherit;
  color: var(--text-dark);
  background: #fff;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(201,164,95,0.25); }
textarea { resize: vertical; }
.nota-obrigatorio { color: var(--text-muted); font-size: 11px; font-style: italic; margin-top: 10px; }

.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.grade-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 14px; }

/* ---------- sugestoes (autocomplete) de partes/assunto ja cadastrados ---------- */
.campo-autocomplete-wrap { position: relative; }
.autocomplete-lista {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 10;
  margin-top: 2px;
  max-height: 190px;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(35,46,66,0.18);
}
.autocomplete-item {
  padding: 7px 10px;
  font-size: 13px;
  color: var(--text-dark);
  cursor: pointer;
  white-space: pre-wrap;
}
.autocomplete-item:hover, .autocomplete-item-ativo {
  background: var(--gold-light);
  color: var(--navy-deep);
}

/* ---------- modal de relatorios ---------- */
.modal-caixa-relatorios { max-width: 620px; min-width: 420px; }
.texto-explicativo { color: var(--text-muted); font-size: 13px; margin: 0 0 14px; }
.dica-campo { color: var(--text-muted); font-size: 11px; margin: 2px 0 0; }
.grupo-radio { display: flex; flex-direction: column; gap: 6px; }
.opcao-radio { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 400;
               color: var(--text-dark); margin: 0; cursor: pointer; }
.opcao-radio input { width: auto; }
.campo-indentado { display: flex; align-items: center; gap: 8px; margin: 0 0 4px 26px; flex-wrap: wrap; }
.campo-indentado input[type=text] { width: 140px; flex: 0 0 auto; }
.campo-indentado input:disabled { background: var(--row-alt); color: var(--text-muted); cursor: not-allowed; }
.campo-intervalo input[type=text] { width: 110px; }
.contagem-relatorio { font-weight: 700; color: var(--navy-deep); font-size: 13px; margin: 16px 0 0; }
@media (max-width: 640px) {
  .modal-caixa-relatorios { min-width: 0; }
  .campo-indentado { margin-left: 0; }
}

.modal-fundo {
  position: fixed; inset: 0; background: rgba(35,46,66,0.55);
  display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px;
}
.modal-fundo[hidden] { display: none; }
.modal-caixa {
  background: var(--cream);
  border-radius: 8px;
  width: 100%; max-width: 980px; min-width: 520px;
  max-height: 92vh; min-height: 420px;
  overflow: auto;
  resize: both;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
/* o "puxador" nativo do navegador (canto inferior direito) permite
   aumentar ou diminuir a janela do formulario manualmente */

/* tela cheia da "pasta do cliente" (entrega 43, a pedido do usuário):
   duplo clique no cabeçalho do modal-cliente alterna para ocupar quase
   toda a janela do navegador - a preferência escolhida fica salva (ver
   CHAVE_TELA_CHEIA_MODAL_CLIENTE em app.js) e volta a valer da próxima
   vez que a pasta for aberta. */
#caixa-modal-cliente.tela-cheia {
  width: 96vw !important; max-width: 96vw !important;
  height: 94vh !important; max-height: 94vh !important;
}
#cabecalho-modal-cliente { cursor: pointer; }

.modal-cabecalho { background: var(--navy-deep); padding: 16px 22px; border-radius: 8px 8px 0 0; }
.modal-cabecalho h3 { color: var(--gold-light); margin: 0; font-size: 16px; }
.modal-linha-dourada { height: 3px; background: var(--gold); }
.modal-corpo { padding: 10px 22px 22px; }
.modal-botoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* em telas estreitas (celular): formulario de 1 coluna, modal sem
   redimensionamento manual e sem largura minima, para caber na tela */
@media (max-width: 640px) {
  .grade-2, .grade-3 { grid-template-columns: 1fr; }
  .modal-caixa { min-width: 0; resize: none; }
}

/* ---------- modal de aviso de prazos ao abrir o sistema (entrega 26) ---------- */
.modal-caixa-aviso-prazos { max-width: 520px; min-width: 300px; resize: none; min-height: 0; }
#aviso-prazos-lista .movimentacao-item { padding: 6px 10px; font-size: 12px; }
@media (max-width: 640px) { .modal-caixa-aviso-prazos { min-width: 0; } }

/* ---------- login ---------- */
.tela-login { display: flex; justify-content: center; align-items: center; padding: 60px 16px; }
.cartao-login {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 34px 32px;
  width: 100%; max-width: 380px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(35,46,66,0.12);
}
.login-logo { height: 60px; margin-bottom: 14px; border-radius: 4px; }
.cartao-login h2 { color: var(--navy-deep); font-size: 18px; margin: 0 0 4px; }
.login-subtitulo { color: var(--text-muted); font-size: 12px; margin: 0 0 18px; }
.cartao-login form { text-align: left; }

.titulo-secao { color: var(--navy-deep); font-size: 18px; margin: 0 0 4px; }
.subtitulo-secao { color: var(--text-muted); font-size: 13px; margin: 0 0 14px; }

/* ---------- selo de contagem no menu (Prazos e Compromissos) ---------- */
.selo-contagem {
  display: inline-block;
  min-width: 17px;
  padding: 1px 5px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
}

/* ---------- movimentacao processual (dentro do painel lateral do processo) ---------- */
.movimentacao-secao {
  padding: 14px 16px 4px;
  border-top: 1px solid var(--row-alt);
  margin-top: 6px;
  /* Seção nova (entrega 24), colocada como "irmã" do painel-corpo dentro do
     mesmo painel lateral com altura limitada (62vh, ver .painel-lateral).
     Sem flex/overflow próprios, o navegador reservava a altura total do
     conteúdo aqui (título + cada card de movimentação), "roubando" o
     espaço do painel-corpo e, com clientes com várias movimentações,
     ultrapassando a altura do painel inteiro - o excesso ficava cortado
     de forma invisível (o painel-lateral usa overflow:hidden), sem barra
     de rolagem alguma para chegar até lá, podendo até esconder o botão
     "Alterar Dados" do rodapé. Corrigido dando um teto de altura próprio
     e rolagem própria a esta seção, independente do painel-corpo. */
  flex: 0 1 auto;
  max-height: 38vh;
  overflow-y: auto;
}
.movimentacao-secao-titulo {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.02em;
  margin-bottom: 8px;
  position: sticky;
  top: 0;
  background: var(--card);
  padding-top: 2px;
}
.movimentacao-lista { display: flex; flex-direction: column; gap: 8px; }
.movimentacao-item {
  border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; background: var(--card);
}
.movimentacao-item-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.movimentacao-tipo { font-size: 10px; font-weight: 700; color: var(--gold-dark); text-transform: uppercase; }
.movimentacao-titulo { font-size: 13px; font-weight: 600; color: var(--text-dark); margin: 2px 0; }
.movimentacao-datas { font-size: 11px; color: var(--text-muted); }
.movimentacao-descricao { font-size: 12px; color: var(--text-dark); white-space: pre-line; margin-top: 4px; }
.movimentacao-sugestao {
  font-size: 11px; color: #7a5a10; background: #fdf4de; border: 1px solid #ecd9a0;
  border-radius: 4px; padding: 6px 8px; margin-top: 6px;
}
.movimentacao-acoes { display: flex; gap: 6px; flex-shrink: 0; }
.movimentacao-acoes button {
  background: transparent; border: none; cursor: pointer; font-size: 13px; padding: 2px 4px; border-radius: 4px;
}
.movimentacao-acoes button:hover { background: var(--row-alt); }
.movimentacao-vazio { font-size: 12px; color: var(--text-muted); font-style: italic; padding: 4px 0 10px; }
.vincular-processo-area { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.vincular-processo-area .campo-busca-vincular {
  width: 100%; padding: 7px 9px; font-size: 12px; border: 1px solid var(--border);
  border-radius: 4px; background: var(--card); color: var(--text-dark);
}
.vincular-processo-area .mensagem { margin-top: 6px; font-size: 12px; padding: 6px 8px; }

/* ---------- visualizar publicação importada (entrega 38) ---------- */
.movimentacao-selo-vinculado {
  font-size: 11px; font-weight: 700; color: #1e6b3a; margin-bottom: 2px;
}
.movimentacao-selo-lida { font-size: 11px; font-weight: 700; color: #1e6b3a; margin-top: 4px; }
.movimentacao-prazo-confirmado {
  font-size: 11px; color: #1e6b3a; background: #e9f5ec; border: 1px solid #c3ddb6;
  border-radius: 4px; padding: 6px 8px; margin-top: 6px;
}
.ver-pub-texto {
  white-space: pre-line; font-size: 12px; max-height: 260px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 6px; padding: 10px; background: var(--card);
}

/* selo de urgencia (usado na lista de movimentacoes e na area de trabalho de prazos) */
.selo-urgencia {
  display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700;
  white-space: nowrap; color: #fff;
}
.selo-urgencia-vencido { background: var(--danger); }
.selo-urgencia-hoje { background: #b8791f; }
.selo-urgencia-proximo { background: #a3803f; }
.selo-urgencia-futuro { background: var(--status-andamento); }
.selo-urgencia-cumprido { background: var(--status-encerrado); }
.selo-urgencia-sem_data { background: var(--text-muted); }

.botao-cumprido {
  background: transparent; border: 1px solid var(--border); border-radius: 5px; cursor: pointer;
  font-size: 12px; padding: 3px 8px; color: var(--text-muted);
}
.botao-cumprido:hover { background: var(--row-alt); }
.botao-cumprido.marcado { background: #e7f1e2; color: #35662c; border-color: #c3ddb6; font-weight: 700; }

/* ---------- area de trabalho: Prazos e Compromissos ---------- */
.filtros-prazos { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.filtro-prazo {
  background: var(--card); border: 1px solid var(--border); border-radius: 999px; cursor: pointer;
  font-size: 12px; padding: 6px 14px; color: var(--text-dark);
}
.filtro-prazo:hover { background: var(--row-alt); }
.filtro-prazo.ativo { background: var(--navy-deep); color: var(--gold-light); border-color: var(--navy-deep); }
.linha-prazo-vencido td { background: #fbeeee; }
.linha-prazo-hoje td { background: #fdf3e3; }
.linha-prazo-cumprido td { color: var(--text-muted); text-decoration: line-through; }
.link-processo { color: var(--navy-deep); font-weight: 600; text-decoration: none; }
.link-processo:hover { text-decoration: underline; }

/* ---------- tela Início: resumo + Kanban + agenda (entrega 45) ---------- */
.inicio-resumo { display: flex; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.resumo-card {
  flex: 1 1 180px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.resumo-numero { font-size: 30px; font-weight: 700; color: var(--navy-deep); line-height: 1; }
.resumo-rotulo { font-size: 12px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
.resumo-card-andamento .resumo-numero { color: var(--status-andamento); }
.resumo-card-encerrado .resumo-numero { color: var(--status-encerrado); }

.inicio-layout { display: flex; gap: 18px; align-items: flex-start; }
.inicio-kanban { flex: 2 1 0%; min-width: 0; }
.inicio-agenda { flex: 1 1 320px; min-width: 280px; max-width: 420px; }
.inicio-secao-titulo { color: var(--navy-deep); font-size: 16px; margin: 0 0 6px; }
.inicio-secao-titulo-espacada { margin-top: 20px; }

.kanban-colunas { display: flex; gap: 14px; }
.kanban-coluna {
  flex: 1 1 0%;
  min-width: 0;
  background: var(--row-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  max-height: 560px;
}
.kanban-coluna-cabecalho {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy-deep);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.kanban-coluna-cabecalho-andamento { color: var(--status-andamento); }
.kanban-coluna-cabecalho-encerrado { color: var(--status-encerrado); }
.kanban-selo { background: var(--navy-deep); }
.kanban-coluna-cabecalho-andamento .kanban-selo { background: var(--status-andamento); }
.kanban-coluna-cabecalho-encerrado .kanban-selo { background: var(--status-encerrado); }
.kanban-coluna-corpo {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 120px;
  transition: background-color 0.12s ease;
}
.kanban-coluna-corpo-sobre { background: #e4dfc9; }
.kanban-cartao {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 10px 12px;
  cursor: grab;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.kanban-cartao:hover { border-color: var(--gold-dark); }
.kanban-cartao.arrastando { opacity: 0.4; }
.kanban-cartao-pasta { font-size: 11px; font-weight: 700; color: var(--gold-dark); text-transform: uppercase; }
.kanban-cartao-nome { font-size: 13px; font-weight: 600; color: var(--text-dark); margin: 3px 0 2px; }
.kanban-cartao-processo { font-size: 11px; color: var(--text-muted); overflow-wrap: anywhere; }

.kanban-agenda-item { cursor: default; }

@media (max-width: 900px) {
  .inicio-layout { flex-direction: column; }
  .inicio-agenda { max-width: 100%; }
  .kanban-coluna { max-height: 420px; }
}
@media (max-width: 640px) {
  .kanban-colunas { flex-direction: column; }
  .kanban-coluna { max-height: 320px; }
}