/* componentes.css - componentes das telas do TemJus (PUB-SEMPRAZO-134, 29/09/2026).
   Origem: PUB-DESIGN-132, mockups/base.css (seção 2.4 da proposta), sobre os tokens da paleta A
   (tokens.css) e depois da casca (base.css). As primeiras telas a usar são as telas sem prazo
   (sessão S2 do plano da 132); as outras passam a estas classes na sessão de cada uma.

   Regra desta folha: só classes novas, cada uma com 0 usos em templates, folhas e JS de /opt,
   medidos antes de nomear (colisao_classes.py da PUB-CASCA-133). Nenhuma regra para elemento
   solto (table, button, input...) nem para classe que as telas de hoje já usam (.btn, .card,
   .form-group, .table-container, .badge...): uma tela só muda quando o template dela passa a
   usar estas classes. Os nomes curtos da proposta que já existem em templates de hoje (.botao,
   .tabela, .vazio, .estado-vazio, .chips, .par, .pares, .painel, .cartoes, .titulo) ganharam aqui
   um nome próprio, e cada variante de botão é completa sozinha, como os selos da casca.

   Densidade: tudo mede em tokens (--controle-alt, --linha-tabela, --texto-base, --esp-5...), que
   [data-density="compacta"] de tokens.css já reduz. Foco: vale o anel global de base.css;
   nenhuma regra desta folha tira o outline. Ícones: só do sprite /static/img/icones.svg. */

/* ---------- Tela com cabeçalho próprio ---------- */
/* base.html põe .com-cabecalho-tela no <main> só quando a tela preenche {% block tela_titulo %}.
   min-width: 0 deixa a tabela larga rolar dentro da própria caixa no celular, em vez de empurrar
   a página para o lado. O h1 da casca continua no HTML, com o mesmo page_title (leitor de tela e
   tests/test_casca_133.py), e sai só da vista: o título visível passa a ser o h1 de 24 px do
   cabeçalho da tela, sem o mesmo nome escrito duas vezes, uma embaixo da outra. */
.com-cabecalho-tela { min-width: 0; }
.com-cabecalho-tela .topbar h1 {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Cabeçalho da tela: título, subtítulo, uma ação principal, ações em texto ---------- */
.tela-cabecalho {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--esp-3) var(--esp-4);
  margin: 0 0 var(--esp-5);
}
.tela-cabecalho-texto { flex: 1 1 320px; min-width: 0; }
.tela-titulo {
  margin: 0; font-size: var(--texto-2xl); font-weight: var(--peso-forte);
  line-height: var(--entrelinha-apertada); color: var(--cor-texto);
}
.tela-subtitulo { margin: var(--esp-1) 0 0; max-width: var(--largura-leitura); color: var(--cor-texto-2); }
.tela-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); margin-left: auto; }

/* ---------- Botões: uma ação principal por tela; o resto secundário ou em texto ---------- */
.botao-primario, .botao-secundario, .botao-texto, .botao-perigo {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
  min-height: var(--controle-alt); padding: 0 var(--esp-4); margin: 0;
  font: inherit; font-size: var(--texto-base); font-weight: var(--peso-forte); line-height: 1.2;
  border: 1px solid transparent; border-radius: var(--raio-md);
  text-decoration: none; white-space: nowrap; cursor: pointer; vertical-align: middle;
}
.botao-primario { background: var(--cor-acao); color: var(--cor-acao-texto); }
.botao-primario:hover { background: var(--cor-acao-hover); color: var(--cor-acao-texto); }
.botao-secundario { background: var(--cor-superficie); color: var(--cor-texto); border-color: var(--cor-borda-forte); }
.botao-secundario:hover { background: var(--cor-superficie-2); color: var(--cor-texto); }
.botao-texto {
  padding: 0 var(--esp-2); background: transparent; color: var(--cor-acao); font-weight: var(--peso-normal);
  text-decoration: underline; text-underline-offset: 2px;
}
.botao-texto:hover { background: var(--cor-acao-fundo); color: var(--cor-acao-hover); }
.botao-perigo { background: var(--cor-superficie); color: var(--cor-urgente); border-color: var(--cor-urgente); }
.botao-perigo:hover { background: var(--cor-urgente-fundo); color: var(--cor-urgente); }
.botao-pequeno { min-height: var(--controle-alt-sm); padding: 0 var(--esp-3); font-size: var(--texto-sm); }
.botao-primario[disabled], .botao-secundario[disabled], .botao-texto[disabled], .botao-perigo[disabled],
.botao-primario[aria-disabled="true"], .botao-secundario[aria-disabled="true"],
.botao-texto[aria-disabled="true"], .botao-perigo[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.botoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }

/* ---------- Tabela: cabeçalho, linhas de 44 px (36 na compacta), rolagem horizontal ---------- */
/* <div class="tabela-rolagem" role="region" aria-label="..." tabindex="0"><table class="tabela-dados">
   A caixa rola para o lado quando a tabela não cabe (celular); tabindex deixa rolar pelo teclado. */
.tabela-rolagem {
  max-width: 100%; overflow-x: auto; margin: 0 0 var(--esp-4);
  background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-lg);
}
.tabela-dados { width: 100%; border-collapse: collapse; }
.tabela-dados th {
  height: 40px; padding: var(--esp-2) var(--esp-3); text-align: left; white-space: nowrap; vertical-align: middle;
  background: var(--cor-superficie-2); color: var(--cor-texto-2);
  font-size: var(--texto-sm); font-weight: var(--peso-forte); border-bottom: 1px solid var(--cor-borda);
}
.tabela-dados td {
  height: var(--linha-tabela); padding: var(--esp-2) var(--esp-3); vertical-align: middle;
  color: var(--cor-texto); font-size: var(--texto-base); border-bottom: 1px solid var(--cor-borda);
}
.tabela-dados tbody tr:last-child td { border-bottom: 0; }
.tabela-dados tbody tr:hover { background: transparent; }
.tabela-dados tbody tr:hover td { background: var(--cor-fundo); }
.tabela-dados .celula-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabela-dados .celula-acoes { text-align: right; white-space: nowrap; }
.tabela-dados .celula-acoes > * + * { margin-left: var(--esp-1); }
.tabela-dados tr.linha-clicavel { cursor: pointer; }
.form-em-linha { display: inline; }
.tabela-dados td.tabela-vazia { height: auto; padding: var(--esp-6) var(--esp-4); text-align: center; color: var(--cor-texto-2); }
/* Largura mínima de leitura por coluna, só na tela estreita (PUB-RETOQUES-142, lista de Tarefas e amostra da
   Manutenção): no celular o título quebrava no meio da palavra e o dono e a etiqueta viravam uma palavra por linha. Com
   elas a tabela passa da caixa e a .tabela-rolagem rola para o lado, com a página na largura da janela. Acima de 768 px
   nada muda (no notebook, um mínimo no título escondia as datas atrás da rolagem: ver o relatório da sessão). */
@media (max-width: 768px) {
  .tabela-dados .celula-leitura { min-width: 15rem; }
  .tabela-dados .celula-pessoa { min-width: 10rem; }
  .tabela-dados .celula-datas { min-width: 14rem; }
}

/* ---------- Abas de verdade (links ou botões com aria-current / aria-selected) ---------- */
/* A linha de base é sombra interna (e não borda com margem negativa nos links): com overflow-x a
   margem negativa criava uma barra de rolagem vertical de 1 px. O sublinhado da aba cobre a sombra. */
.abas-tela {
  display: flex; gap: var(--esp-1); margin: 0 0 var(--esp-4);
  box-shadow: inset 0 -1px 0 var(--cor-borda); overflow-x: auto; overflow-y: hidden;
}
.abas-tela a, .abas-tela button {
  display: inline-flex; align-items: center; gap: var(--esp-2); min-height: var(--controle-alt);
  padding: var(--esp-2) var(--esp-3); margin: 0; border: 0; border-bottom: 2px solid transparent;
  background: transparent; color: var(--cor-texto-2); font: inherit; font-size: var(--texto-base);
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.abas-tela a:hover, .abas-tela button:hover { color: var(--cor-texto); }
.abas-tela [aria-current="page"], .abas-tela [aria-selected="true"] {
  color: var(--cor-acao); border-bottom-color: var(--cor-acao); font-weight: var(--peso-forte);
}

/* ---------- Chips de filtro ---------- */
.chips-filtro { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); margin: 0 0 var(--esp-4); }
.chip-filtro {
  display: inline-flex; align-items: center; gap: var(--esp-1); min-height: var(--controle-alt-sm);
  padding: 0 var(--esp-3); border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-pill);
  background: var(--cor-superficie); color: var(--cor-texto); font: inherit; font-size: var(--texto-sm);
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.chip-filtro:hover { background: var(--cor-superficie-2); color: var(--cor-texto); }
.chip-filtro[aria-pressed="true"], .chip-filtro[aria-current="page"] {
  background: var(--cor-acao-fundo); border-color: var(--cor-acao); color: var(--cor-acao); font-weight: var(--peso-forte);
}

/* ---------- Caixas de contagem ---------- */
.caixas-contagem { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--esp-3); margin: 0 0 var(--esp-5); }
.caixa-contagem {
  display: flex; flex-direction: column; gap: var(--esp-1); min-width: 0; padding: var(--esp-3) var(--esp-4);
  background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-lg);
  color: var(--cor-texto); font-size: var(--texto-sm); text-decoration: none;
}
a.caixa-contagem:hover { border-color: var(--cor-borda-forte); color: var(--cor-texto); }
.caixa-rotulo { display: flex; align-items: center; gap: var(--esp-2); color: var(--cor-texto-2); font-size: var(--texto-sm); }
.caixa-numero {
  font-size: var(--texto-3xl); font-weight: var(--peso-numero); line-height: var(--entrelinha-apertada);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}

/* ---------- Bloco: a caixa de uma seção, nunca uma dentro da outra ---------- */
.bloco-tela {
  margin: 0 0 var(--esp-4); padding: var(--esp-4) var(--esp-5); min-width: 0;
  background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-lg);
}
.bloco-tela .bloco-tela { margin: 0 0 var(--esp-4); padding: 0; border: 0; border-radius: 0; }
.bloco-tela .tabela-rolagem { border-radius: var(--raio-md); }
.bloco-titulo {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); margin: 0 0 var(--esp-3);
  font-size: var(--texto-lg); font-weight: var(--peso-forte); line-height: var(--entrelinha-apertada); color: var(--cor-texto);
}
.bloco-titulo .texto-apoio { margin-left: auto; font-weight: var(--peso-normal); }
.bloco-cabecalho {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2) var(--esp-4);
  margin: 0 0 var(--esp-3);
}
.bloco-cabecalho > .bloco-titulo { margin: 0; }
/* Bloco inteiro clicável: resultado que é um link para a ficha, cartão que abre o detalhe. */
.bloco-clicavel { display: block; cursor: pointer; color: var(--cor-texto); text-decoration: none; }
.bloco-clicavel:hover { border-color: var(--cor-acao); color: var(--cor-texto); }
/* Espaço entre os filhos de um bloco (o reset de style.css zera a margem de parágrafo e lista). */
.pilha-vertical > * + * { margin-top: var(--esp-3); }

/* ---------- Formulário: rótulo em cima, ajuda e erro junto do campo ---------- */
.campo-form { display: flex; flex-direction: column; gap: var(--esp-1); min-width: 0; margin: 0 0 var(--esp-4); }
.campo-form > label, .campo-rotulo { font-size: var(--texto-sm); font-weight: var(--peso-forte); color: var(--cor-texto); }
.campo-form input, .campo-form select, .campo-form textarea {
  width: 100%; min-height: var(--controle-alt); padding: 0 var(--esp-3); margin: 0;
  font: inherit; font-size: var(--texto-base); color: var(--cor-texto); background: var(--cor-superficie);
  border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-md);
}
.campo-form textarea { min-height: calc(var(--controle-alt) * 3); padding: var(--esp-2) var(--esp-3); line-height: var(--entrelinha-base); resize: vertical; }
.campo-form input[type="file"] { padding: var(--esp-1) var(--esp-2); }
.campo-form .texto-mono { font-family: var(--fonte-mono); font-size: var(--texto-sm); }
.campo-form input::placeholder, .campo-form textarea::placeholder { color: var(--cor-texto-3); }
.campo-form input:focus-visible, .campo-form select:focus-visible, .campo-form textarea:focus-visible { border-color: var(--cor-foco); }
.campo-form input[readonly], .campo-form input[disabled], .campo-form select[disabled], .campo-form textarea[readonly] {
  background: var(--cor-superficie-2); color: var(--cor-texto-2);
}
.campo-ajuda { font-size: var(--texto-sm); color: var(--cor-texto-2); }
.campo-erro { font-size: var(--texto-sm); font-weight: var(--peso-forte); color: var(--cor-urgente); }
.campo-check { display: flex; align-items: center; gap: var(--esp-2); min-height: var(--controle-alt-sm); margin: 0 0 var(--esp-3); color: var(--cor-texto); }
.campo-check input { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: var(--cor-acao); }
.campos-linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 var(--esp-3); }
.formulario-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); margin: var(--esp-2) 0 0; }

/* ---------- Estado vazio: o que existe, por que está vazio, o próximo passo ---------- */
.tela-vazia {
  display: flex; flex-direction: column; align-items: center; gap: var(--esp-2);
  padding: var(--esp-6) var(--esp-4); text-align: center; color: var(--cor-texto-2);
}
.tela-vazia > svg { width: 32px; height: 32px; color: var(--cor-texto-3); }
.tela-vazia strong { color: var(--cor-texto); font-size: var(--texto-lg); font-weight: var(--peso-forte); }
.tela-vazia p { max-width: 48ch; margin: 0; }

/* ---------- Pares rótulo e valor ---------- */
.lista-pares { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: var(--esp-2) var(--esp-4); margin: 0; }
.lista-pares dt { color: var(--cor-texto-2); font-size: var(--texto-sm); padding-top: 2px; }
.lista-pares dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ---------- Cartões do índice (Administração) ---------- */
.cartoes-grupo { margin: 0 0 var(--esp-5); }
.cartoes-grupo-titulo {
  display: flex; align-items: center; gap: var(--esp-2); margin: 0 0 var(--esp-3);
  font-size: var(--texto-lg); font-weight: var(--peso-forte); line-height: var(--entrelinha-apertada); color: var(--cor-texto);
}
.cartoes-grupo-titulo > svg { color: var(--cor-texto-2); }
.cartoes-indice {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--esp-3);
  margin: 0; padding: 0; list-style: none;
}
.cartao {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--esp-1) var(--esp-3);
  height: 100%; padding: var(--esp-3) var(--esp-4);
  background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-lg);
  color: var(--cor-texto); text-decoration: none; transition: border-color var(--transicao); align-content: start;
}
.cartao:hover { border-color: var(--cor-acao); color: var(--cor-texto); }
.cartao-icone { grid-row: span 2; width: 22px; height: 22px; margin-top: 1px; color: var(--cor-acao); }
.cartao-titulo { font-weight: var(--peso-forte); color: var(--cor-acao); }
.cartao-descricao { font-size: var(--texto-sm); color: var(--cor-texto-2); }

/* ---------- Lista de linhas (um item por linha, ações à direita) ---------- */
.linhas-itens { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.linha-item {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-4);
  padding: var(--esp-3) 0; border-top: 1px solid var(--cor-borda);
}
.linha-item:first-child { border-top: 0; padding-top: 0; }
.linha-item-texto { flex: 1 1 280px; min-width: 0; }
.linha-item-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }

/* ---------- Subtítulo dentro do bloco, divisor, grade simples ---------- */
.bloco-subtitulo { margin: 0 0 var(--esp-2); font-size: var(--texto-base); font-weight: var(--peso-forte); color: var(--cor-texto); }
.bloco-divisor { height: 0; margin: var(--esp-5) 0; border: 0; border-top: 1px solid var(--cor-borda); }
.grade-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--esp-3); }
.checks-linha { display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-4); }
.checks-linha .campo-check { margin: 0; }
.campo-check-inativo { color: var(--cor-texto-2); }

/* ---------- Caixas de contagem: cor que só reforça o rótulo ---------- */
.caixa-ok .caixa-numero { color: var(--cor-ok); }
.caixa-atencao .caixa-numero { color: var(--cor-atencao); }
.caixa-urgente .caixa-numero { color: var(--cor-urgente); }

/* ---------- Recolhido (details) ---------- */
.detalhes-recolhidos { margin: 0 0 var(--esp-4); }
.detalhes-recolhidos > summary {
  display: inline-flex; align-items: center; gap: var(--esp-1); min-height: var(--controle-alt-sm);
  color: var(--cor-acao); font-weight: var(--peso-forte); cursor: pointer;
}
.detalhes-recolhidos > summary:hover { color: var(--cor-acao-hover); }
.detalhes-recolhidos[open] > summary { margin-bottom: var(--esp-3); }

/* ---------- Zona de envio de arquivo (clique ou arraste) ---------- */
.zona-arquivo {
  display: flex; flex-direction: column; align-items: center; gap: var(--esp-1);
  padding: var(--esp-6) var(--esp-4); text-align: center; cursor: pointer;
  background: var(--cor-superficie); color: var(--cor-texto);
  border: 2px dashed var(--cor-borda-forte); border-radius: var(--raio-lg); transition: border-color var(--transicao);
}
.zona-arquivo > svg { width: 32px; height: 32px; color: var(--cor-texto-2); }
.zona-arquivo:hover, .zona-arquivo-ativa { border-color: var(--cor-acao); }

/* ---------- Janela sobre a tela (modal) ---------- */
/* Quem abre e fecha a janela é .modal-overlay, pela classe active (openModal()/closeModal() do
   app.js); .janela-modal-caixa desenha só a caixa. .janela-modal (sem display, aberta pelo JS da tela
   com style.display) não tem mais uso desde a PUB-CONFIG-153, quando a última, a de Configurações,
   passou a .modal-overlay; a regra fica para quem precisar e tests/test_semprazo_134.py lê o véu. */
.janela-modal {
  position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center;
  padding: var(--esp-4); background: rgba(20, 18, 14, 0.5);
}
.janela-modal-caixa {
  width: 600px; max-width: 100%; max-height: 85vh; overflow-y: auto; padding: var(--esp-5);
  background: var(--cor-superficie); color: var(--cor-texto); border-radius: var(--raio-lg); box-shadow: var(--sombra-2);
}
.janela-modal-caixa > h2, .janela-modal-caixa > h3 { margin: 0 0 var(--esp-4); font-size: var(--texto-xl); font-weight: var(--peso-forte); line-height: var(--entrelinha-apertada); }

/* ---------- Página solta (entrar, página não encontrada, erro): sem barra lateral ---------- */
.pagina-solta {
  display: grid; place-items: center; min-height: 100vh; margin: 0; padding: var(--esp-4);
  background: var(--cor-fundo); color: var(--cor-texto);
}
.pagina-solta-caixa {
  width: 400px; max-width: 100%; padding: var(--esp-6) var(--esp-5);
  background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-lg); box-shadow: var(--sombra-1);
}
.pagina-solta-marca {
  display: flex; align-items: center; gap: var(--esp-2); margin: 0 0 var(--esp-1);
  font-size: var(--texto-xl); font-weight: var(--peso-forte); line-height: var(--entrelinha-apertada); color: var(--cor-texto);
}
.pagina-solta-marca > span:first-child {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px;
  background: var(--cor-nav-marca); color: #ffffff; font-size: 14px; font-weight: 700; letter-spacing: .5px;
}
.pagina-solta-caixa .tela-titulo { margin: 0 0 var(--esp-2); }
.pagina-solta-caixa .formulario-acoes .botao-primario { width: 100%; }

/* ---------- Duas colunas (PUB-INICIO-135): a lista principal à esquerda, o apoio à direita ---------- */
.grade-duas-colunas { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 0 var(--esp-4); align-items: start; }
@media (max-width: 1100px) {
  .grade-duas-colunas { grid-template-columns: minmax(0, 1fr); }
}
/* O texto da etiqueta PRAZO A CONFIRMAR NO PROJUDI/ASTREA dentro do selo da casca (que não quebra
   linha): na coluna estreita e no celular ele quebra em duas linhas, inteiro, em vez de vazar do bloco. */
.etiqueta-literal { white-space: normal; }
/* Título que vem do dado (o da tarefa): uma palavra longa sem espaço quebra em vez de empurrar a página
   para o lado. */
.quebra-longa { overflow-wrap: anywhere; }

/* ---------- Tela longa com índice lateral (PUB-TAREFAS-136): os blocos à esquerda, as âncoras à direita ---------- */
/* <div class="tela-com-indice"><nav class="indice-tela">links</nav><div class="tela-com-indice-conteudo">blocos</div></div>
   O índice vem antes no HTML (a ordem de foco é a da tela estreita) e a grade o põe à direita na larga.
   Na tela estreita ele fica em cima dos blocos, em linha, e deixa de acompanhar a rolagem. */
.tela-com-indice { display: grid; grid-template-columns: minmax(0, 1fr) 14rem; gap: 0 var(--esp-5); align-items: start; }
.tela-com-indice-conteudo { grid-column: 1; grid-row: 1; min-width: 0; }
.tela-com-indice > .indice-tela { grid-column: 2; grid-row: 1; }
.indice-tela {
  position: sticky; top: var(--esp-4); display: flex; flex-direction: column; gap: var(--esp-1);
  padding: var(--esp-3) var(--esp-4); background: var(--cor-superficie);
  border: 1px solid var(--cor-borda); border-radius: var(--raio-lg); font-size: var(--texto-sm);
}
.indice-tela a { padding: var(--esp-1) 0; color: var(--cor-texto-2); text-decoration: none; }
.indice-tela a:where(:hover) { color: var(--cor-acao); text-decoration: underline; }
@media (max-width: 1100px) {
  .tela-com-indice { grid-template-columns: minmax(0, 1fr); }
  .tela-com-indice-conteudo, .tela-com-indice > .indice-tela { grid-column: auto; grid-row: auto; }
  .indice-tela { position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--esp-1) var(--esp-3); margin: 0 0 var(--esp-4); }
}

/* ---------- Menu "Mais ações": o que não é a ação principal, recolhido num <details> ---------- */
/* <details class="menu-mais"><summary class="botao-secundario">Mais ações</summary><div class="menu-mais-painel">
   Sem JS: abre e fecha pelo próprio <details>; cada ação continua sendo o formulário ou o link de antes. */
.menu-mais { position: relative; display: inline-block; }
.menu-mais > summary { list-style: none; }
.menu-mais > summary::-webkit-details-marker { display: none; }
.menu-mais-painel {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 50; min-width: 16rem;
  display: flex; flex-direction: column; align-items: stretch; gap: var(--esp-1); padding: var(--esp-2);
  background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-lg); box-shadow: var(--sombra-2);
}
.menu-mais-painel form { margin: 0; }
.menu-mais-painel .botao-texto, .menu-mais-painel .botao-perigo { width: 100%; justify-content: flex-start; }
@media (max-width: 768px) {
  .menu-mais-painel { right: auto; left: 0; }
}
/* Resumo de <details> com cara de botão (o marcador do navegador sai). */
.resumo-botao { list-style: none; }
.resumo-botao::-webkit-details-marker { display: none; }

/* ---------- Lista e painel de leitura (PUB-PUBLICACOES-137): a lista à esquerda, a publicação aberta à direita ---------- */
/* <div class="lista-e-painel"><div>lista</div><aside class="painel-leitura" id="painel-leitura">…</aside></div>
   O painel só existe na tela larga: na estreita ele some e a linha abre a publicação em página inteira (o link
   da linha é o do detalhe). A linha aberta leva aria-current="true" (o JS da tela troca), não uma classe. */
.lista-e-painel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-4); align-items: start; }
.painel-leitura { display: none; }
.lista-e-painel tr[aria-current="true"] td { background: var(--cor-acao-fundo); }
.lista-e-painel tr[aria-current="true"] td:first-child { box-shadow: inset 3px 0 0 var(--cor-acao); }
@media (min-width: 1100px) {
  .lista-e-painel { grid-template-columns: minmax(0, 2fr) minmax(20rem, 1fr); }
  .painel-leitura {
    display: block; position: sticky; top: var(--esp-4); max-height: calc(100vh - 2 * var(--esp-4)); overflow-y: auto;
    padding: var(--esp-4); background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-lg);
  }
}
/* Título com o botão "Fechar" ao lado (PUB-RETOQUES-142, cabeçalho do painel de leitura): o título quebra linha e o
   botão fica no alto, à direita. */
.titulo-com-fechar { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--esp-3); }
.titulo-com-fechar > :first-child { flex: 1 1 auto; min-width: 0; }
.titulo-com-fechar > :last-child { flex: 0 0 auto; }
/* O texto integral da publicação: a quebra de linha do diário fica, a linha não passa de 72 caracteres. */
.texto-publicacao {
  max-width: var(--largura-leitura); margin: 0; padding: var(--esp-3); white-space: pre-wrap; overflow-wrap: anywhere;
  line-height: var(--entrelinha-leitura); background: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: var(--raio-md);
}

/* ---------- Texto ---------- */
.lista-marcadores { margin: 0; padding-left: var(--esp-5); line-height: var(--entrelinha-leitura); }
.lista-marcadores > li + li { margin-top: var(--esp-1); }
.texto-livre { white-space: pre-wrap; overflow-wrap: anywhere; }
.lista-variaveis { margin-top: var(--esp-1); font-family: var(--fonte-mono); font-size: var(--texto-sm); line-height: 1.8; overflow-wrap: anywhere; }
.sem-quebra { white-space: nowrap; }
.espaco-cima { margin-top: var(--esp-4); }
.zona-arquivo p { margin: 0; }
.texto-apoio { color: var(--cor-texto-2); font-size: var(--texto-sm); }
.texto-mono { font-family: var(--fonte-mono); font-size: 0.93em; }
.leitura-longa { max-width: var(--largura-leitura); line-height: var(--entrelinha-leitura); }

/* ---------- Tela estreita ---------- */
@media (max-width: 768px) {
  .tela-cabecalho { margin-bottom: var(--esp-4); }
  .tela-titulo { font-size: var(--texto-xl); }
  .tela-acoes { margin-left: 0; }
  .bloco-tela { padding: var(--esp-3) var(--esp-4); }
  .lista-pares { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lista-pares dd { margin-bottom: var(--esp-2); }
}