/* ============================================================================
   LINHA · MODELO DE PAINEL (regra global)
   Todo painel refeito segue este esqueleto, sem CSS próprio de layout:

   <div id="view-x" class="view-section">
     <div class="l-painel">
       <aside class="l-secoes">                      faixa de abas no topo (fixa ao rolar)
         <div class="l-secoes-titulo"><h1>Nome</h1><span>contexto</span></div>
         <div class="l-secoes-grupo"><p>Grupo</p>     o rótulo do grupo vira só um divisor
           <button class="l-secao active" ...><i data-lucide="..."></i>Seção</button>
         </div>
       </aside>
       <main class="l-conteudo">
         <header class="l-cab">                       título da seção + 1 ação
           <div><h2>Seção</h2><p>apoio</p></div>
           <div class="l-cab-acoes"><button class="btn primary">Ação</button></div>
         </header>
         <div class="l-barra">filtros</div>          busca e filtros numa linha
         <p class="l-resumo">5 contas · 4 ativas</p>  números em linha, sem cartões
         <div class="l-bloco">...</div>               superfície (tabela, lista, formulário)
       </main>
     </div>
   </div>

   Seções ficam numa faixa horizontal: o conteúdo usa a largura toda (30/09,
   "o menu com as abas do painel está ocupando muito espaço").
   Painel sem seções usa só .l-conteudo.
   ============================================================================ */

.l-painel{ display:flex; flex-direction:column; min-height:100dvh }

/* ---------------------------------------------------------------- seções: cabeçalho com abas */
/* Linha 1: nome do painel à esquerda; extras pequenos à direita (Ver como, conta, relógio).
   Linha 2: as seções, abas de texto com sublinhado na ativa, encostadas na borda de baixo. */
.l-secoes{
  position:sticky; top:0; z-index:6;
  display:flex; flex-wrap:wrap; align-items:center; column-gap:var(--l-e6); row-gap:var(--l-e2);
  padding:var(--l-e5) var(--l-e10) 0; background:var(--l-sup); border-bottom:1px solid var(--l-borda);
}
.l-secoes::after{ content:""; order:-1; flex-basis:100%; height:0 }          /* quebra entre as duas linhas */
.l-secoes-titulo{ order:-3; display:flex; align-items:baseline; gap:var(--l-e3); margin-right:auto; min-width:0 }
.l-secoes-titulo h1{ font-size:18px; font-weight:600; letter-spacing:-.015em; line-height:1.2; white-space:nowrap }
.l-secoes-titulo span{ font-size:var(--l-t-peq); color:var(--l-texto-3); white-space:nowrap }
.l-secoes-grupo{ display:flex; align-items:stretch; gap:var(--l-e5) }
.l-secoes-grupo > p{ display:none }
.l-secao{
  position:relative; display:inline-flex; align-items:center; height:40px; padding:0;
  border:0; background:none; white-space:nowrap;
  font-size:var(--l-t-corpo); font-weight:500; color:var(--l-texto-2);
  transition:color var(--l-rapido);
}
.l-secao i[data-lucide], .l-secao svg{ display:none }
.l-secao::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; border-radius:2px 2px 0 0; background:transparent; transition:background var(--l-rapido) }
.l-secao:hover{ color:var(--l-texto) }
.l-secao:hover::after{ background:var(--l-borda-forte) }
.l-secao.active, .l-secao.is-active{ color:var(--l-texto); font-weight:600 }
.l-secao.active::after, .l-secao.is-active::after{ background:var(--l-marca) }
/* grupo auxiliar (ex.: "Ver como"): sai da linha das seções e vai, pequeno, para o alto à direita */
.l-secoes-grupo.com-rotulo{ order:-2; align-items:center; gap:var(--l-e3) }
.l-secoes-grupo.com-rotulo > p{ display:block; font-size:var(--l-t-mini); color:var(--l-texto-3) }
.l-secoes-grupo.com-rotulo .l-secao{ height:auto; font-size:var(--l-t-peq); color:var(--l-texto-2) }
.l-secoes-grupo.com-rotulo .l-secao::after{ display:none }
.l-secoes-grupo.com-rotulo .l-secao:hover{ color:var(--l-marca-tinta); text-decoration:underline; text-underline-offset:3px }
.l-secoes-grupo.com-rotulo .l-secao:is(.active, .is-active){ color:var(--l-marca-tinta); font-weight:600 }
/* extras da linha de cima */
.l-secoes-extra{ order:-2 }

/* ---------------------------------------------------------------- conteúdo */
.l-conteudo{ min-width:0; width:100%; padding:var(--l-e6) var(--l-e10) var(--l-e12); display:flex; flex-direction:column; gap:var(--l-e5) }
.l-conteudo > .hidden{ display:none !important }
/* cada seção do painel é um bloco vertical com o mesmo ritmo */
.l-conteudo > [id^="adm-tab-"], .l-pane{ display:flex; flex-direction:column; gap:var(--l-e5); min-width:0 }

.l-cab{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--l-e4); flex-wrap:wrap; min-height:48px }
.l-cab h2{ font-size:24px; font-weight:600; letter-spacing:-.02em; line-height:1.2 }
.l-cab p{ margin-top:4px; font-size:var(--l-t-corpo); color:var(--l-texto-2) }
.l-cab-acoes{ display:flex; align-items:center; gap:var(--l-e2) }

/* barra de filtros: uma linha, busca primeiro */
.l-barra{ display:flex; align-items:flex-end; gap:var(--l-e3); flex-wrap:wrap }
.l-barra .field.search{ flex:1 1 280px; max-width:420px }
.l-barra .au-fld{ min-width:160px }
.l-barra .au-fld > label, .l-barra .field > .lbl{ font-size:var(--l-t-mini) }

/* resumo em linha: números sem cartão */
.l-resumo{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px var(--l-e6); font-size:var(--l-t-corpo); color:var(--l-texto-2) }
.l-resumo b{ font-size:var(--l-t-titulo); font-weight:600; color:var(--l-texto); margin-right:4px; font-variant-numeric:tabular-nums }

/* bloco: a única superfície do painel */
.l-bloco{ background:var(--l-sup); border:1px solid var(--l-borda); border-radius:var(--l-raio-3); overflow:hidden; min-width:0 }
.l-bloco-cab{ display:flex; align-items:center; justify-content:space-between; gap:var(--l-e3); padding:var(--l-e4) var(--l-e5); border-bottom:1px solid var(--l-fio) }
.l-bloco-cab h3{ font-size:var(--l-t-med); font-weight:600 }
.l-bloco-corpo{ padding:var(--l-e5) }
.l-bloco > .au-table, .l-bloco > .au-table-wrap, .l-bloco > table{ border:0; border-radius:0 }
.l-bloco .au-table-wrap{ border:0; border-radius:0 }

/* segmentado (duas ou três visões da mesma coisa) */
.l-seg{ display:inline-flex; padding:3px; gap:2px; border-radius:var(--l-raio-2); background:var(--l-sup-3) }
.l-seg button{ height:28px; padding:0 12px; border:0; border-radius:6px; background:none; font-size:var(--l-t-peq); font-weight:500; color:var(--l-texto-2) }
.l-seg button.on, .l-seg button.active, .l-seg button[aria-pressed="true"]{ background:var(--l-sup); color:var(--l-texto); box-shadow:0 1px 2px rgba(20,26,12,.08) }

/* tabela padrão do modelo: linha alta, pessoa com avatar, ação discreta */
.l-tab{ width:100%; border-collapse:collapse; font-size:var(--l-t-corpo) }
.l-tab th{ text-align:left; padding:10px var(--l-e5); font-size:var(--l-t-peq); font-weight:500; color:var(--l-texto-3); border-bottom:1px solid var(--l-borda); background:var(--l-sup-2); white-space:nowrap }
.l-tab td{ padding:12px var(--l-e5); border-bottom:1px solid var(--l-fio); vertical-align:middle }
.l-tab tbody tr:last-child td{ border-bottom:0 }
.l-tab tbody tr:hover{ background:var(--l-sup-2) }
.l-tab .l-num{ font-variant-numeric:tabular-nums; color:var(--l-texto-2); white-space:nowrap }
.l-tab .l-acao{ text-align:right; white-space:nowrap }
.l-pessoa{ display:flex; align-items:center; gap:var(--l-e3); min-width:0 }
.l-pessoa > span{ display:flex; flex-direction:column; min-width:0 }
.l-pessoa b{ font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.l-pessoa small{ font-size:var(--l-t-mini); color:var(--l-texto-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.l-link{ border:0; background:none; padding:0; color:var(--l-marca-tinta); font-size:var(--l-t-peq); font-weight:500 }
.l-link:hover{ text-decoration:underline; text-underline-offset:3px }
.l-etq{ display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:var(--l-raio-1); background:var(--l-sup-3); color:var(--l-texto-2); font-size:var(--l-t-mini); font-weight:500; white-space:nowrap }

/* ---------------------------------------------------------------- telas pequenas */
@media (max-width:1100px){
  .l-secoes{ padding:var(--l-e3) var(--l-e4) 0 }
  .l-secoes-grupo{ overflow-x:auto; scrollbar-width:none }
  .l-conteudo{ padding:var(--l-e5) var(--l-e4) var(--l-e10) }
}

/* ---------------------------------------------------------------- refino (30/09, "achei meio feio") */
/* conteúdo usa a largura toda (a faixa de seções não ocupa coluna) */
.l-conteudo{ max-width:none }

/* ações dentro de tabela: texto discreto, nunca caixa cheia (vale para toda tabela do portal) */
:is(.l-tab, .au-table, table.table) td .btn{
  height:28px; padding:0 8px; border:0; background:none; box-shadow:none;
  color:var(--l-texto-2); font-size:var(--l-t-peq); font-weight:500;
}
:is(.l-tab, .au-table, table.table) td .btn:hover{ background:var(--l-sup-3); color:var(--l-texto) }
:is(.l-tab, .au-table, table.table) td :is(.btn-danger, .btn.danger){ color:var(--l-erro); background:none; filter:none }
:is(.l-tab, .au-table, table.table) td :is(.btn-danger, .btn.danger):hover{ background:var(--l-erro-fundo); color:var(--l-erro) }
:is(.l-tab, .au-table, table.table) td:last-child{ text-align:right; white-space:nowrap }
:is(.l-tab, .au-table, table.table) td:last-child .btn + .btn{ margin-left:2px }

/* ---------------------------------------------------------------- lista (itens de fila, histórico, manifestações...) */
.l-lista{ list-style:none; margin:0; padding:0 }
.l-item{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:var(--l-e4); padding:14px var(--l-e5); border-bottom:1px solid var(--l-fio) }
.l-item:last-child{ border-bottom:0 }
.l-item:hover{ background:var(--l-sup-2) }
.l-item-texto{ grid-template-columns:minmax(0,1fr) auto; align-items:start }
.l-item-marca{ min-width:64px }
.l-codigo{ font-size:var(--l-t-titulo); font-weight:600; letter-spacing:.02em; font-variant-numeric:tabular-nums; color:var(--l-texto) }
.l-item-corpo{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.l-item-corpo b{ font-weight:500 }
.l-item-corpo p{ color:var(--l-texto-2); font-size:var(--l-t-corpo); margin:2px 0 }
.l-item-corpo small{ font-size:var(--l-t-peq); color:var(--l-texto-3) }
.l-item-lado{ display:flex; align-items:center; gap:var(--l-e3); white-space:nowrap }
.l-item-lado select{ width:auto; min-height:30px; padding-top:4px; padding-bottom:4px; font-size:var(--l-t-peq) }
.l-seg .chip{ border:0; height:28px; border-radius:6px; background:none }

/* ---------------------------------------------------------------- peças comuns (30/09, Regulação) */
/* grade de gráficos: dois por linha, o largo ocupa a linha toda */
.l-graficos{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--l-e5); align-items:start }
.l-largo{ grid-column:1 / -1 }
@media (max-width:1100px){ .l-graficos{ grid-template-columns:1fr } }
/* número do resumo que pede atenção */
.l-alerta, .l-alerta b{ color:var(--l-erro) }
/* texto de apoio: miúdo e discreto */
.l-mini{ display:inline-block; font-size:var(--l-t-mini); color:var(--l-texto-3); font-weight:400 }
.l-nota{ font-size:var(--l-t-peq); color:var(--l-texto-3) }
/* linha inteira clicável (tabela ou lista) */
tr[onclick], .l-item[role="button"]{ cursor:pointer }
/* cartão: superfície com respiro, para grupos dentro de modal ou detalhe */
.l-cartao{ display:flex; flex-direction:column; gap:var(--l-e2); padding:var(--l-e4) var(--l-e5); background:var(--l-sup); border:1px solid var(--l-borda); border-radius:var(--l-raio-3); min-width:0 }
/* texto livre digitado pela pessoa: respeita as quebras de linha */
.l-pre{ white-space:pre-wrap; overflow-wrap:anywhere }
/* área com rolagem própria (lista longa dentro de modal) */
.l-rola{ max-height:60vh; overflow:auto }
/* sugestões de autocompletar presas ao campo */
.au-fld:has(> .l-sugestoes){ position:relative }
.l-sugestoes{ position:absolute; left:0; right:0; top:100%; z-index:50; max-height:240px; overflow:auto; margin-top:4px; background:var(--l-sup); border:1px solid var(--l-borda); border-radius:var(--l-raio-2); box-shadow:var(--l-sombra-flutua) }

/* ---------------------------------------------------------------- refino geral (30/09, "dá para melhorar o layout no geral") */
/* com a faixa de abas, o nome da seção já está na aba: o cabeçalho da seção vira uma linha fina
   (o que a seção faz, à esquerda; a ação, à direita). Painel sem abas mantém o título grande. */
.l-painel:has(> .l-secoes) .l-cab{ align-items:center; min-height:36px }
.l-painel:has(> .l-secoes) .l-cab h2{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.l-painel:has(> .l-secoes) .l-cab p{ margin:0; font-size:var(--l-t-corpo); color:var(--l-texto-2) }

/* barra de filtros numa altura só: rótulo ao lado do campo, tudo centrado */
.l-barra{ align-items:center; gap:var(--l-e2) var(--l-e3) }
.l-barra .au-fld{ flex-direction:row; align-items:center; gap:var(--l-e2); min-width:0 }
.l-barra .au-fld > label, .l-barra .field > .lbl{ margin:0; font-size:var(--l-t-peq); font-weight:400; color:var(--l-texto-3); white-space:nowrap }
.l-barra .au-fld :is(select, input){ width:auto; min-width:140px }
.l-barra .field.search{ flex:1 1 260px; max-width:380px }
.l-fim{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:var(--l-e2) }

/* liga/desliga em pílula, área de enviar arquivo e lista de dados (rótulo sobre valor) */
.l-liga{ height:30px; padding:0 12px; border:1px solid var(--l-borda); border-radius:var(--l-raio-pilula); background:var(--l-sup); font-size:var(--l-t-peq); color:var(--l-texto-2) }
.l-liga:hover{ border-color:var(--l-borda-forte); color:var(--l-texto) }
.l-liga.on{ background:var(--l-marca-suave); border-color:transparent; color:var(--l-marca-tinta); font-weight:500 }
.l-solta{ display:flex; flex-direction:column; gap:4px; align-items:center; justify-content:center; min-height:64px; border:1px dashed var(--l-borda-forte); border-radius:var(--l-raio-2); color:var(--l-texto-2); font-size:var(--l-t-peq); cursor:pointer; text-transform:none; letter-spacing:0; font-weight:400 }
.l-solta:hover{ border-color:var(--l-marca); color:var(--l-marca-tinta); background:var(--l-marca-suave) }
.l-dados{ display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:var(--l-e3) var(--l-e5); margin:0 }
.l-dados dt{ font-size:var(--l-t-mini); color:var(--l-texto-3) }
.l-dados dd{ margin:2px 0 0; font-weight:500 }
.au-fld > .l-seg{ align-self:flex-start; width:auto; max-width:100% }

/* módulo com tela própria embutido (SAMU, Zoonoses, SCNES): o iframe ocupa a largura toda */
.mod-shell .modulo-frame{ display:block; width:100%; border:0; background:transparent }