/* =====================================================================
   4.9.26 (lote 33) — Padrão «app» do PAINEL (equipe). Carregado só pelo layout do painel,
   depois de painel.css. O portal do cidadão NÃO carrega este arquivo (fica como está).
   Regras:
     1. Botões: um formato só — retângulo com cantos arredondados (sai a «pílula»).
     2. Grupos de botões de navegação (abas, manuais, atalhos): grade de botões iguais.
     3. Listas: bloco de busca padrão (busca | exibindo + por página | filtros 2 por linha).
     4. Celular (até 720px): topo compacto com o menu (☰) no canto superior direito.
     5. Texto descritivo: justificado com hifenização (só parágrafos, nunca rótulos/botões).
   ===================================================================== */

/* ---------- 1. Botões e "pílulas" viram retângulo arredondado (todas as larguras) ---------- */
body.painel { --raio-botao: 10px; }
body.painel .btn { border-radius: var(--raio-botao); }
body.painel .abas a,
body.painel .manual-abas a { border-radius: var(--raio-botao); }

/* ---------- 5. Texto descritivo justificado (parágrafos de abertura e de ajuda) ---------- */
/* Só parágrafos longos (painel.js marca .texto-just quando o texto tem 140+ caracteres):
   texto curto justificado abre buracos entre as palavras, principalmente no celular. */
body.painel p.texto-just { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }

/* ---------- 3. Bloco padrão das listas ---------- */
/* Busca ocupa a linha; «Exibindo» e «Por página» dividem a linha de baixo. */
body.painel .lista-controles { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 12px; }
body.painel .lista-controles .lista-busca input { min-width: 0; }
body.painel .lista-controles .lista-por { white-space: nowrap; }
body.painel .lista-controles .lista-por select { width: 92px; min-width: 0; }
body.painel .lista-controles .lista-busca { grid-column: 1 / -1; grid-row: 1; margin: 0; max-width: none; display: flex; }
body.painel .lista-controles .lista-exibindo { grid-row: 2; }
body.painel .lista-controles .lista-por { grid-row: 2; justify-self: end; }
body.painel .lista-controles .lista-busca .btn { flex: 0 0 auto; }

/* Filtros: grade (2 por linha no celular, até 4 no computador); botões do filtro na última célula */
body.painel .filtros-linha,
body.painel .filtros-painel { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px 12px; align-items: end; }
/* campos dos filtros e da lista com a mesma altura e borda dos formulários */
body.painel .filtros-linha label { font-size: var(--texto-sm); font-weight: 600; }
/* campo de busca solto no filtro (ex.: Dúvidas) ocupa a linha; o botão fica embaixo, na largura toda */
body.painel .filtros-linha > input[type=search], body.painel .filtros-linha > input[type=text] { grid-column: 1 / -1; }
body.painel .filtros-linha select, body.painel .filtros-linha input:not([type=hidden]):not([type=checkbox]),
body.painel .lista-controles select, body.painel .lista-controles input[type=search] {
  min-height: 42px; padding: 8px 12px; border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-sm); background: #fff; font-size: var(--texto-sm); font-weight: 400; }
body.painel .filtros-linha .btn, body.painel .filtros-painel .btn { min-height: 42px; }
body.painel .lista-exibindo { font-size: 12.5px; line-height: 1.3; white-space: nowrap; }
body.painel .lista-controles .lista-por { font-size: 12.5px; gap: 6px; }
body.painel .lista-controles .lista-por select { width: 76px; min-height: 38px; padding: 6px 8px; }
/* botão do filtro: ocupa a linha inteira (fica alinhado com os campos, sem «meio botão» solto) */
body.painel .filtros-linha > .btn:last-of-type, body.painel .filtros-painel > .btn:last-of-type { grid-column: 1 / -1; }
/* Filtro automático (decisão de 17/10): filtro só com seletores filtra ao escolher; o painel.js marca
   o formulário com .filtro-auto e só então o botão some. Sem JavaScript, o botão continua. */
body.painel form.filtro-auto > button[type=submit]:not([name]) { display: none; }
body.painel .filtros-linha label,
body.painel .filtros-painel .field { min-width: 0; margin: 0; }
body.painel .filtros-linha select, body.painel .filtros-linha input:not([type=hidden]),
body.painel .filtros-painel select, body.painel .filtros-painel input:not([type=hidden]) { width: 100%; }

/* ---------- 2. Grade de botões de navegação ---------- */
@media (max-width: 720px) {
  body.painel .abas,
  body.painel .manual-abas,
  body.painel .barra-acoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body.painel .abas a,
  body.painel .manual-abas a,
  body.painel .barra-acoes > .btn,
  body.painel .barra-acoes > a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px;
    padding: 8px 10px; text-align: center; line-height: 1.2; white-space: normal; }
  /* grupo de 3 (ou 6, 9…) botões: 3 por linha */
  body.painel .abas:has(> a:nth-child(3):last-child),
  body.painel .barra-acoes:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.painel .abas-rolagem { overflow-x: visible; }
  body.painel .abas-rolagem a { white-space: normal; }
  /* texto de apoio dentro da barra de ações ocupa a linha inteira */
  body.painel .barra-acoes > span, body.painel .barra-acoes > p { grid-column: 1 / -1; }
}

/* ---------- 4. Celular: topo compacto, cara de app ---------- */
@media (max-width: 720px) {
  body.painel .painel-topo { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 10px; padding: 10px 14px; position: sticky; top: 0; z-index: 50; }
  body.painel .painel-marca { gap: 10px; min-width: 0; }
  body.painel .painel-marca img { width: auto; height: 35px; } /* 4.11.0: largura pela proporção do brasão */
  body.painel .painel-marca strong { font-size: 15px; }
  body.painel .painel-marca small { font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; }
  body.painel .painel-menu-toggle { grid-column: 2; grid-row: 1; width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center;
    font-size: 0; border-radius: var(--raio-botao); }          /* só o ícone ☰; o nome «Menu» continua para leitor de tela */
  body.painel .painel-menu-toggle::before { font-size: 22px; }
  body.painel .painel-usuario { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 8px; margin: 0; }
  body.painel .painel-sessao { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12.5px; }
  body.painel .painel-sessao .sessao-meta { font-size: 11px; margin-left: auto; }
  body.painel .painel-usuario form { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  body.painel .painel-usuario form .btn { min-height: 38px; padding: 6px 8px; font-size: 13px; }

  /* conteúdo: respiro igual em todas as telas */
  body.painel .painel-conteudo { padding: 16px 14px 48px; }
  body.painel .painel-titulo { margin-bottom: 16px; }
  body.painel .painel-titulo h1 { font-size: 21px; line-height: 1.25; display: flex; align-items: flex-start; gap: 8px; }
  body.painel .painel-titulo h1 svg { flex: 0 0 auto; margin-top: 2px; }
  body.painel .painel-titulo > p { font-size: 14px; line-height: 1.5; }
  body.painel .card { padding: 16px; border-radius: 14px; }

  /* formulários: campos curtos lado a lado quando a tela marca .form-2col; resto na largura toda */
  body.painel .form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
  body.painel .form-2col > .field-largo { grid-column: 1 / -1; }

  /* ações de formulário: botões lado a lado, mesma largura */
  body.painel .actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
  body.painel .actions > .btn, body.painel .actions > form > .btn { width: 100%; justify-content: center; }

  /* cartões automáticos (painel.js): célula sem rótulo (ações) alinha à esquerda, sem o espaço do rótulo */
  body.painel .cartoes-auto td[data-label=""] { justify-content: flex-start; }
  body.painel .cartoes-auto td[data-label=""]::before { content: none; }
  body.painel .cartoes-auto td .btn { min-height: 38px; }
  body.painel .cartoes-auto td.cartao-titulo { display: block; text-align: left; }
  /* rótulo longo (título de coluna grande) quebra linha em vez de empurrar o valor para fora do cartão */
  body.painel .tabela-cartoes td::before { flex: 0 1 auto; max-width: 55%; white-space: normal; }
  /* cartões em grade: conteúdo longo (e-mail, endereço) quebra dentro do cartão */
  body.painel .grid > .card { min-width: 0; overflow-wrap: anywhere; }

  /* nada pode passar da largura da tela */
  body.painel .painel-conteudo { overflow-x: clip; }
}

/* ---------- 6. Cadastro padrão (formulário em cima, lista embaixo) ---------- */
body.painel .cadastro-form-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
body.painel .cadastro-form-topo h2 { margin: 0; }
body.painel .form-cadastro-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; margin-top: 12px; }
body.painel .form-cadastro-campos .campo-linha { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; }
body.painel .form-cadastro-campos .campo-linha.largo { grid-column: 1 / -1; }
body.painel .form-cadastro-campos .campo-rotulo { font-size: var(--texto-sm); font-weight: 700; }
body.painel .form-cadastro-campos input, body.painel .form-cadastro-campos select { width: 100%; min-height: 42px; padding: 8px 12px; border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-sm); background: #fff; font-size: var(--texto-sm); }
body.painel .form-cadastro-acoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-top: 14px; max-width: 560px; }
body.painel .form-cadastro-acoes .btn { width: 100%; justify-content: center; }
body.painel tr.linha-atual td { background: var(--cor-primaria-clara); }
body.painel .form-cadastro-campos { align-items: end; }
@media (min-width: 721px) {
  body.painel .form-cadastro-campos { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
  body.painel .form-cadastro-campos .campo-linha.largo { grid-column: span 2; }
  body.painel .form-cadastro-acoes { grid-template-columns: repeat(auto-fit, minmax(140px, 180px)); }
}

/* Lista do cadastro no celular: cartão compacto — nome + situação na 1ª linha, detalhes pequenos, «Editar» à direita */
@media (max-width: 720px) {
  body.painel .tabela-cadastro tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px; align-items: center; padding: 10px 12px; }
  body.painel .tabela-cadastro td { padding: 0 !important; }
  body.painel .tabela-cadastro td.c-nome { grid-column: 1; grid-row: 1; font-size: 15.5px; border: 0 !important; margin: 0; padding: 0 !important; font-weight: 700; }
  body.painel .tabela-cadastro td.c-sit { grid-column: 2; grid-row: 1; justify-content: flex-end; }
  body.painel .tabela-cadastro td.c-sit::before { content: none; }
  body.painel .tabela-cadastro td.c-extra { grid-column: 1; display: block; font-size: 12.5px; line-height: 1.35; color: var(--cor-texto-suave); text-align: left; }
  body.painel .tabela-cadastro td.c-extra::before { font-size: 12px; margin-right: 6px; }
  body.painel .tabela-cadastro td.c-extra::after { content: none; }
  body.painel .tabela-cadastro td.c-acao { grid-column: 2; grid-row: 2 / span 3; justify-content: flex-end; align-self: end; }
}

/* ---------- 7. Formulários compactos no celular ---------- */
@media (max-width: 720px) {
  body.painel .field { margin-bottom: 12px; gap: 4px; }
  body.painel .field input, body.painel .field select { min-height: 42px; padding: 8px 12px; }
  /* campos curtos que a tela já agrupa (.form-grid) ficam 2 por linha */
  body.painel .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
  body.painel .form-grid > .field { min-width: 0; }
  body.painel .form-grid { align-items: end; } /* rótulo em 2 linhas não desalinha o campo ao lado */
  body.painel .form-grid input[type=date] { font-size: 13px; padding-left: 8px; padding-right: 6px; }
  /* Trocar senha: as 3 ferramentas na mesma linha */
  body.painel .senha-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  body.painel .senha-actions .senha-action { min-height: 42px; padding: 6px 4px; border-radius: var(--raio-botao); font-size: 12.5px; line-height: 1.2; white-space: normal; }
  /* bloco do acervo: compacto */
  body.painel .bloco-acervo { padding: 12px; }
  body.painel .bloco-acervo legend { font-size: 14px; }
}

/* 4.9.29 (lote 35) — Configuração das TVs: lugares em grade (como aparecem na TV) e |−| |+| da faixa */
.tv-lugares { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; }
.tv-lugar label { font-size: .85rem; font-weight: 600; }
.tv-lugar select { width: 100%; min-width: 0; }
.form-tv-config:has(input[name="layout"][value="6"]:checked) .tv-lugar-78,
.form-tv-config:has(input[name="layout"][value="8"]:checked) .tv-lugar-16,
.form-tv-config:has(input[name="layout"]:not([value="18"]):checked) .tv-lugar-18 { opacity: .45; } /* 4.9.33: lugares 17-18 só no 3×6 */
.tv-cfg-linha { align-items: end; }
.label-like { display: block; font-weight: 600; margin-bottom: 4px; }
.passo { display: flex; align-items: center; gap: 6px; }
.passo input { width: 4.5em; text-align: center; }
.passo .btn { min-width: 40px; font-size: 1.2rem; line-height: 1; }
.grupo-radio { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 8px; }
@media (max-width: 760px) { .tv-lugares { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 4.9.35: acesso rápido do Painel do Gestor e da TV (mesma barra nas telas do gestor) */
.gestor-atalhos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 16px; }
.gestor-atalhos-rotulo { font-weight: 700; font-size: .9rem; margin-right: 4px; }
/* 4.9.39: botão da tela atual mantém fundo verde e texto branco também com mouse, foco ou clique (o :hover do .btn.outline clareava o fundo) */
.gestor-atalhos a[aria-current="page"],
.gestor-atalhos a[aria-current="page"]:hover,
.gestor-atalhos a[aria-current="page"]:focus-visible,
.gestor-atalhos a[aria-current="page"]:active { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; }
/* 4.9.36: procedimento de atualização (Master) — comandos copiáveis */
.atualizacao-master h3 { margin: 18px 0 6px; font-size: 1.02rem; }
.atualizacao-master pre.cmd { margin: 6px 0 10px; padding: 10px 12px; background: #0f1d16; color: #e6f2ea; border-radius: 8px; overflow-x: auto; font-size: .82rem; line-height: 1.45; white-space: pre; }

/* 4.9.39 (lote 45): recolher/voltar o menu lateral — só no computador (>960px); no celular nada muda */
.menu-recolher { display: none; }
@media (min-width: 961px) {
  .menu-recolher { display: flex; gap: 6px; margin: 0 0 10px; }
  .painel-nav > .menu-recolher:last-child { margin: 10px 0 0; }
  .menu-rec-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 6px 8px; font: inherit; font-size: .85rem; font-weight: 700; line-height: 1.2; border-radius: 8px; border: 1px solid var(--cor-primaria); background: var(--cor-primaria); color: #fff; cursor: pointer; }
  .menu-rec-btn:not(:disabled):hover { background: var(--cor-primaria-escura); border-color: var(--cor-primaria-escura); }
  .menu-rec-btn:focus-visible { outline: 2px solid var(--cor-primaria-escura); outline-offset: 2px; }
  .menu-rec-btn:disabled { background: transparent; color: var(--cor-borda-forte); border-color: var(--cor-borda); cursor: default; }
  body.menu-recolhido .painel-corpo { grid-template-columns: 56px minmax(0, 1fr); }
  body.menu-recolhido .painel-nav { padding: 12px 6px; }
  body.menu-recolhido .painel-nav > :not(.menu-recolher) { display: none; }
  body.menu-recolhido .menu-recolher { flex-direction: column; }
  body.menu-recolhido .menu-rec-txt { display: none; }
}

/* 4.9.39 (lote 45): Registros — filtros e botões na mesma linha (sem botão esticado); quebra natural em telas menores */
body.painel .filtros-painel.filtros-registros { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
body.painel .filtros-painel.filtros-registros > .btn:last-of-type { grid-column: auto; }