/* admin.css: revisao pagina a pagina da gestao (05/09/2026). Cada agente APENDA seu bloco com cat >>; ninguem reescreve o arquivo. */

/* ============================================================
   CONTRATO DE "PAGINA SEM ROLAGEM" DA GESTAO (05/09/2026)
   Quem quiser a tela enquadrada no viewport usa estas classes; o resto
   continua rolando como pagina comum. Fundo branco/creme sempre: a gestao
   nao tem tema escuro (regra do dono).
   .adm-pagina-fixa   envolve o conteudo da pagina; ocupa a altura util
                      (viewport menos topbar e rodape) e NAO rola por fora
   .adm-rolavel       o unico filho que rola por dentro (lista, tabela, log)
   .adm-linha-topo    faixa fina de KPIs/filtros que nao cresce
   .adm-colunas-2/-3  duas ou tres colunas iguais na largura, empilham < 1024px
   ============================================================ */
.tema-admin { color-scheme: light; }
.adm-pagina-fixa { display: flex; flex-direction: column; gap: 14px; min-height: 0; height: calc(100dvh - 118px); }
@media (max-width: 1023px) { .adm-pagina-fixa { height: auto; } }
.adm-pagina-fixa > .adm-rolavel { flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; }
.adm-pagina-fixa > .adm-linha-topo { flex: 0 0 auto; }
.adm-pagina-fixa .tabela-caixa.adm-rolavel { max-height: none; }
.adm-pagina-fixa .tabela thead th { position: sticky; top: 0; z-index: 2; }
.adm-colunas-2, .adm-colunas-3 { display: grid; gap: 14px 18px; grid-template-columns: 1fr; min-height: 0; }
@media (min-width: 1024px) { .adm-colunas-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.adm-colunas-2 > *, .adm-colunas-3 > * { min-width: 0; min-height: 0; }
/* Cartao que vira coluna rolavel dentro de uma pagina fixa. */
.adm-cartao-rolavel { display: flex; flex-direction: column; min-height: 0; }
.adm-cartao-rolavel > .adm-rolavel { flex: 1 1 auto; min-height: 0; overflow: auto; }
/* Dentro da pagina fixa o respiro dos blocos e menor: o que sobra vira lista. */
.adm-pagina-fixa .bloco-secao { margin-bottom: 0; }
.adm-pagina-fixa .kpis { margin-bottom: 0; }
.adm-pagina-fixa .filtro-barra { margin-bottom: 0; }
.adm-pagina-fixa .pagina-cab-linha { margin-bottom: 0; }

/* Botões de PDF das telas de relatório (05/09/2026). */
.adm-pdf-botoes { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.adm-filtros .adm-pdf-botoes { margin-left: auto; }
.kpis .adm-pdf-botoes { align-self: center; }

/* ============================================================
   CASCA DA GESTAO COMPACTA (05/09/2026): a gestao rolava em toda tela de
   1366x768 porque cada peca tinha o respiro do site publico (topbar de 66px,
   KPI de 74px, campo de 48px, bloco com 40px de vao). Aqui tudo encolhe um
   passo, sem mexer em cor nem em fonte: e a tela que cabe, nao a letra.
   ============================================================ */
.tema-admin .adm-topbar { padding: 8px 18px; gap: 12px; }
.tema-admin .adm-topbar-titulo { font-size: 1.05rem; }
.tema-admin .adm-migalha { font-size: 11px; }
.tema-admin .adm-conteudo { padding: 16px 20px 20px; }   /* o teto de 1240px saiu no A1 (10/09/2026): a única declaração de largura é a fluida, adiante */
.tema-admin .adm-topbar-conta { padding-left: 10px; }
/* Barra lateral: 12 itens e 4 grupos precisam caber em 768px de altura. */
.tema-admin .adm-sidebar { padding: 14px 12px 12px; }
.tema-admin .adm-sidebar .app-sidebar-topo { margin-bottom: 2px; }
.tema-admin .adm-sidebar-logo .logo-completa { height: 34px; }
.tema-admin .adm-selo { margin-bottom: 10px; font-size: 9.5px; }
.tema-admin .adm-sidebar-nav { gap: 8px; }
.tema-admin .adm-grupo { gap: 0; }
.tema-admin .adm-grupo-titulo { padding: 0 10px 3px; font-size: 9.5px; }
.tema-admin .adm-grupo a { padding: 6px 10px; font-size: 13.5px; gap: 9px; border-radius: 8px; }
.tema-admin .adm-grupo .ic { width: 16px; height: 16px; }
.tema-admin .adm-sidebar-rodape { padding-top: 8px; }
.tema-admin .adm-sidebar-rodape button { padding: 5px 12px; font-size: 12px; }
@media (min-width: 1024px) and (max-height: 800px) {
  .tema-admin .adm-grupo a { padding: 5px 10px; font-size: 13px; }
  .tema-admin .adm-sidebar-nav { gap: 6px; }
}
/* KPIs numa faixa baixa. */
.tema-admin .kpis { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 8px; margin-bottom: 14px; }
.tema-admin .kpi { padding: 7px 12px; gap: 9px; border-radius: 9px; }
.tema-admin .kpi .ic { width: 16px; height: 16px; }
.tema-admin .kpi strong { font-size: 1.05rem; }
.tema-admin .kpi span { font-size: 11.5px; line-height: 1.25; }
/* Blocos, cabecalhos e cartoes. */
.tema-admin .bloco-secao { margin-bottom: 16px; }
.tema-admin .bloco-secao-cab { margin-bottom: 8px; }
.tema-admin .bloco-secao-cab h2 { font-size: 1.05rem; }
.tema-admin .bloco-topo { margin-bottom: 12px; }
.tema-admin .form-cartao { padding: 16px 18px; }
.tema-admin .form-secao-titulo { margin: 14px 0 10px; padding-bottom: 5px; font-size: 11.5px; }
.tema-admin .form-secao-titulo:first-child { margin-top: 0; }
.tema-admin .campo { margin-bottom: 10px; }
.tema-admin .campo label { font-size: 11.5px; margin-bottom: 4px; }
.tema-admin .campo input, .tema-admin .campo select { padding: 8px 11px; font-size: 14px; min-height: 38px; }
/* 18/09/2026: os 14px saem do telefone. O app.css ja punha 16px nos campos do
   .campo abaixo de 640px, mas esta regra tem o MESMO peso e e declarada depois
   (admin.css carrega em seguida), entao vencia e o iOS voltava a dar zoom ao
   focar a area de texto. Em vez de empilhar mais uma regra, a fonte menor passa
   a valer so onde ela foi pensada: da largura de tablet para cima. */
.tema-admin .campo textarea { min-height: 88px; padding: 8px 11px; }
@media (min-width: 641px) {
  .tema-admin .campo textarea { font-size: 14px; }
}
.tema-admin .campo .campo-dica { font-size: 11.5px; margin-top: 3px; }
.tema-admin .campo-rotulo, .tema-admin .filtro-rotulo { min-height: 34px; }
.tema-admin .ajuda-caixa { margin: -9px 0 -9px -9px; }
.tema-admin .ajuda-btn { width: 34px; height: 34px; flex-basis: 34px; }
.tema-admin .form-acoes { margin-top: 4px; gap: 8px; }
.tema-admin .btn { padding: 9px 18px; font-size: 14px; }
.tema-admin .btn-compacto { padding: 7px 14px; font-size: 13px; }
.tema-admin .filtro-barra { padding: 10px 12px; gap: 8px 12px; margin-bottom: 12px; }
.tema-admin .filtro-campo input, .tema-admin .filtro-campo select { min-height: 38px; padding: 6px 10px; font-size: 14px; }
.tema-admin .filtro-acoes .btn { min-height: 38px; }
.tema-admin .flash { padding: 9px 14px; margin-bottom: 12px; font-size: 13.5px; }
.tema-admin .texto-apoio { font-size: 13px; }
.tema-admin .acoes-rapidas { gap: 8px; margin-bottom: 12px; }
.tema-admin .acoes-rapidas a { padding: 6px 14px; font-size: 12.5px; }
.tema-admin .implantacao-lista li { padding: 4px 0; font-size: 13.5px; }
.tema-admin .aviso-abertura-lista { gap: 3px; }
.tema-admin .vazio { padding: 22px 16px; }
.tema-admin .vazio .ic { width: 24px; height: 24px; margin-bottom: 4px; }
/* Tabelas densas com cabecalho fixo dentro da caixa rolavel. */
.tema-admin .tabela th { padding: 8px 10px; font-size: 11px; }
.tema-admin .tabela td { padding: 7px 10px; }
.tema-admin table.tabela { font-size: 13px; }
.tema-admin .btn-icone { width: 32px; height: 32px; }
.tema-admin .tabela-caixa .tabela thead th { position: sticky; top: 0; z-index: 2; }
/* Rodape em uma linha. */
.tema-admin .adm-rodape { padding: 8px 18px calc(8px + env(safe-area-inset-bottom)); }
.tema-admin .adm-rodape-inner { font-size: 11.5px; gap: 6px 14px; }
/* Graficos: cartao mais justo. */
.tema-admin .grafico-cartao { padding: 12px 14px; }
.tema-admin .graficos-grade { gap: 12px; }
/* Contrato de pagina fixa: altura util com a casca compacta (topbar 52 + rodape 38). */
.tema-admin .adm-pagina-fixa { height: calc(100dvh - 130px); }
/* No telefone e no tablet a casca continua confortavel para o dedo. */
@media (max-width: 1023px) {
  .tema-admin .campo input, .tema-admin .campo select { min-height: 48px; font-size: 16px; }
  .tema-admin .btn, .tema-admin .btn-compacto { min-height: 48px; }
  .tema-admin .adm-grupo a { padding: 9px 12px; font-size: 14.5px; }
  .tema-admin .adm-conteudo { padding: 14px 14px 24px; }
}

/* ---------- paginas reorganizadas (05/09/2026) ---------- */
/* Comunicados: formulario e historico lado a lado. */
.adm-com-colunas { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
/* O BOTAO DE ENVIAR NAO PODE FICAR CORTADO AO MEIO (08/09/2026). O cartao do
   comunicado rola por dentro e o formulario passa cerca de 40px da area util
   em 1366x768: quem chegava a tela via a acao principal cortada pela borda,
   e o aviso de que o envio nao tem desfazer sumia junto. Grudadas no rodape do
   cartao, as duas ficam sempre visiveis, e o texto do e-mail e que rola por
   baixo. Mesmo padrao ja usado em /admin/configuracoes. */
@media (min-width: 1024px) {
  .adm-com-colunas .form-cartao.adm-rolavel { padding-bottom: 0; }
  /* Sem sangria negativa: aqui o rodape e filho do <form>, e nao do cartao, e
     a margem de -18px o fazia passar 18px do proprio pai (medido pelo auditor
     em quatro larguras). O divisor para na largura do formulario, que e o
     certo. */
  .adm-com-colunas .form-acoes {
    position: sticky;
    bottom: 0;
    background: var(--mg-branco);
    margin: 6px 0 0;
    padding: 10px 0 14px;
    border-top: 1px solid var(--mg-creme);
    z-index: 3;
  }
}
@media (max-width: 1023px) { .adm-com-colunas { grid-template-columns: 1fr; } }
.adm-com .form-cartao { max-width: none; }
.adm-com .campo textarea { min-height: 120px; }
/* Equipe: tabela a esquerda, os dois formularios a direita em coluna rolavel. */
/* 1,45fr para a tabela: com 1,2fr a coluna "Ultimo acesso" ficava cortada pela
   borda (o horario saia pela metade) enquanto os formularios ao lado tinham
   folga de sobra. Os campos do formulario nao precisam de 470px. */
.adm-eq-colunas { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
@media (max-width: 1023px) { .adm-eq-colunas { grid-template-columns: 1fr; } }
.adm-eq-tabela { align-self: start; }
.adm-eq-forms { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: auto; }
.adm-eq-forms .form-cartao { max-width: none; }
.adm-eq-forms .campo-linha { grid-template-columns: 1fr 1fr; }
/* Auditoria: KPIs e filtros numa faixa, tabela rolando por dentro. */
.adm-aud-topo { display: flex; flex-direction: column; gap: 8px; }
.adm-aud-topo .kpis { margin-bottom: 0; }
.adm-aud-topo .filtro-barra { margin-bottom: 0; }
/* Relatorios: abas e corpo rolavel. */
.adm-rel-abas { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--mg-borda); margin: 0 0 4px; }
.adm-rel-abas a { text-decoration: none; padding: 8px 14px; font-size: 13.5px; font-weight: 600; color: var(--mg-tinta-2); border-bottom: 2px solid transparent; margin-bottom: -1px; min-height: 40px; display: inline-flex; align-items: center; }
.adm-rel-abas a:hover { color: var(--mg-verde-800); }
.adm-rel-abas a.ativo { color: var(--mg-verde-900); border-bottom-color: var(--mg-verde-800); }
.adm-rel .adm-filtros { margin-bottom: 8px; }
.adm-rel-corpo { padding-right: 4px; }
.adm-rel-corpo .kpis, .adm-rel-corpo .graficos-grade, .adm-rel-corpo .bloco-secao { margin-bottom: 12px; }
/* Configuracoes: formulario em grade de duas colunas a esquerda, cartoes a direita. */
.adm-conf-colunas { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
@media (max-width: 1023px) { .adm-conf-colunas { grid-template-columns: 1fr; } }
.adm-conf .form-cartao { max-width: none; }
.adm-conf-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 700px) { .adm-conf-grade { grid-template-columns: 1fr; } }
.adm-conf-grade > .campo { min-width: 0; }
.adm-conf-grade > .campo:has(textarea) { grid-column: 1 / -1; }
/* Barra de salvar grudada no pe do cartao que rola por dentro. Ela parava
   17px acima da borda, e por essa fresta apareciam os rotulos dos campos
   seguintes ("WhatsApp de contato:", "Instagram:") por baixo do botao, como
   se a tela estivesse quebrada (visto em 1366x768 em 06/09/2026). As margens
   negativas fazem a barra cobrir o padding do cartao ate a borda.
   So a partir de 1024px: no telefone a barra volta a ser um bloco comum, e
   por isso a regra inteira mora dentro da media query, em vez de ser desfeita
   depois (desfazer por regra posterior foi o que ja religou margem negativa
   no celular em outro formulario desta mesma gestao). */
@media (min-width: 1024px) {
  /* Margem negativa NAO resolve: elemento grudado fica preso ao content box do
     bloco que o contem, entao ele para 16px antes da borda por causa do padding
     de baixo do cartao, e por essa fresta apareciam os rotulos dos campos
     seguintes. Quem perde o padding de baixo e o cartao, e a barra ocupa o lugar
     dele: e a mesma solucao ja usada no formulario longo (.adm-form-fixo). */
  .adm-conf .form-cartao.adm-rolavel { padding-bottom: 0; }
  .adm-conf-acoes { position: sticky; bottom: 0; background: var(--mg-branco); margin: 4px -18px 0; padding: 8px 18px 16px; border-top: 1px solid var(--mg-creme); z-index: 3; }
}
.adm-conf-lado { display: flex; flex-direction: column; gap: 12px; }
.adm-conf-passos { display: grid; gap: 10px; grid-template-columns: 1fr; }
.adm-conf-passos .form-cartao { max-width: none; padding: 12px 14px; }
.tema-admin .aviso-abertura { padding: 10px 14px; }
.tema-admin .aviso-abertura-titulo { margin-bottom: 4px; }
.tema-admin details.aviso-abertura:not([open]) .aviso-abertura-titulo { margin-bottom: 0; }

/* ---------- contrato: ajustes da segunda rodada (05/09/2026) ---------- */
/* 12px a mais: topbar 56 + padding 16/20 + rodape 44 + bordas. */
.tema-admin .adm-pagina-fixa { height: calc(100dvh - 142px); }
/* Faixas fixas nunca encolhem: quem cede espaco e so o filho rolavel. */
.adm-pagina-fixa > :not(.adm-rolavel) { flex: 0 0 auto; }
.adm-pagina-fixa > .flash { margin-bottom: 0; }
.adm-pagina-fixa > .voltar-linha { margin-bottom: 0; }
.adm-pagina-fixa > .adm-filtros { margin-bottom: 0; }
.adm-pagina-fixa > .adm-lote { margin-bottom: 0; }
.adm-pagina-fixa > .detalhes-cartao { margin-bottom: 0; }
.adm-pagina-fixa > .grade-topo { margin-top: 0; }
.adm-pagina-fixa .vazio { margin: 0; }
/* Grade de duas colunas que ocupa o resto da altura (tabela + formulario ao lado). */
.adm-grade-fixa { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); }
.adm-grade-fixa > * { min-height: 0; overflow: auto; }
.adm-grade-fixa .tabela-caixa.adm-rolavel { max-height: 100%; }
@media (max-width: 1023px) { .adm-grade-fixa { grid-template-rows: none; } .adm-grade-fixa > * { overflow: visible; } }
/* Formulario longo: o cartao rola por dentro e os botoes ficam sempre a vista. */
.adm-form-fixo > form.adm-rolavel { max-width: none; }
.adm-form-fixo > form.adm-rolavel .form-acoes-largura { position: sticky; bottom: -1px; margin: 12px -22px -22px; padding: 12px 22px 16px; background: var(--mg-branco); border-top: 1px solid var(--mg-creme); z-index: 3; }
@media (max-width: 1023px) { .adm-form-fixo > form.adm-rolavel .form-acoes-largura { position: static; margin: 12px 0 0; padding: 0; border-top: 0; } }
.tema-admin .form-duas-colunas .form-coluna .form-secao-titulo:first-child { margin-top: 0; }
/* Comunicados: aviso de bloqueio numa linha, nao num KPI. */
.adm-com-bloqueio { margin: 0; padding: 8px 14px; font-size: 13px; }
/* WhatsApp e CRM: KPIs e abas fixos, aba rolando por dentro. */
.adm-wa > .kpis, .adm-crm > .crm-abas { margin-bottom: 0; }
.adm-wa-corpo > .grade-cartoes-2, .adm-crm-corpo > .grade-2-colunas { margin-top: 0; }
.adm-wa-corpo, .adm-crm-corpo { padding-right: 4px; }
.adm-crm-corpo .kpis { margin-bottom: 12px; }
/* Transmissao: o bloco inteiro rola por dentro, com o palco no topo. */
.adm-tx > .adm-transmissao { padding-right: 4px; }
/* Painel: aviso recolhido em uma linha, KPIs em uma faixa, corpo rolando. */
.adm-painel > .acoes-rapidas { margin-bottom: 0; }
.adm-painel > .live-chamada { margin: 0; }
/* auto-FILL, nao auto-fit: com auto-fit as colunas vazias colapsam e a segunda
   linha de indicadores nasce com largura diferente da primeira, o que deixa a
   faixa visivelmente torta quando sao 7 indicadores em 1366px. */
.adm-painel > .kpis { grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); }
.adm-painel > .kpis .kpi span { font-size: 11px; }
.adm-painel-aviso > summary { cursor: pointer; list-style: none; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.adm-painel-aviso > summary::-webkit-details-marker { display: none; }
.adm-painel-aviso > summary::before { content: "\25B8"; display: inline-block; color: var(--mg-verde-800); transition: transform var(--transicao); }
.adm-painel-aviso[open] > summary::before { transform: rotate(90deg); }
.adm-painel-aviso[open] > summary { margin-bottom: 6px; }
.adm-painel-aviso-resumo { font-weight: 400; color: var(--mg-tinta-2); font-size: 12.5px; }
.adm-painel .grafico-cartao svg { max-height: 190px; }
/* Grade fixa vence a regra generica de faixa (mesma especificidade, depois no arquivo). */
.adm-pagina-fixa > .adm-grade-fixa { flex: 1 1 auto; }
/* Barra de botoes fixa sem fresta: o cartao perde o padding de baixo e a barra
   ocupa o lugar dele. SO no desktop: esta regra vinha DEPOIS da media query de
   1023px que desfaz a barra grudada, entao no telefone as margens negativas de
   22px voltavam e o bloco de botoes passava 3px da borda do cartao em
   /admin/podcast/novo e /admin/evento/novo (medido em 06/09/2026, das 320px as
   430px). E a mesma armadilha que ja custou a barra inferior do app: regra de
   desenho apendada depois da media query religa o que a media query desligou. */
@media (min-width: 1024px) {
  .adm-form-fixo > form.adm-rolavel { padding-bottom: 0; }
  .adm-form-fixo > form.adm-rolavel .form-acoes-largura { bottom: 0; margin: 12px -22px 0; padding: 12px 22px 18px; }
}
/* A grade fixa estica os filhos ate a linha (grade-topo alinha ao inicio e deixava a tabela vazar 80px). */
.adm-pagina-fixa > .adm-grade-fixa { align-items: stretch; }
.adm-grade-fixa > * { max-height: 100%; }
/* Telefone e tablet em pe: a pagina fixa volta a crescer com o conteudo (a regra
   compacta acima vencia a media query do contrato e a lista colapsava a 0px,
   com os botoes escondidos atras do rodape; achado da auditoria de 05/09). */
@media (max-width: 1023px) {
  .tema-admin .adm-pagina-fixa { height: auto; }
  .adm-pagina-fixa > .adm-rolavel, .adm-cartao-rolavel > .adm-rolavel, .adm-eq-forms { overflow: visible; }
  .adm-grade-fixa > * { max-height: none; }
}
/* Resumos recolhiveis do painel: alvo de toque de 44px. */
.adm-painel-aviso > summary, .adm-painel-passos > summary { min-height: 48px; align-items: center; }
/* Modo cartao (ate 900px): o cabecalho da tabela fica escondido, e um th sticky
   escapava do recorte e vazava 70px para fora da tela (auditoria a 320px). */
@media (max-width: 900px) {
  .tema-admin .tabela-caixa .tabela-cartoes thead th, .adm-pagina-fixa .tabela-cartoes thead th { position: static; }
}
/* Faixas de abas dentro da pagina fixa no telefone: a faixa rola por dentro
   (ate 640px, .filtros sangra 6px para cada lado e o flex a deixava vazar) e
   as abas do WhatsApp quebram linha em vez de estourar a largura. */
@media (max-width: 1023px) {
  /* Sem o `>`: a faixa de filtros deixou de ser filha DIRETA da pagina fixa
     quando o corpo da tela de inscricoes virou uma regiao propria que rola por
     dentro (06/09/2026), e a regra parou de valer justamente ali. A faixa
     voltou a empurrar a pagina 22px a 375px, com "Canceladas (0)" para fora
     da tela. Seletor de descendencia cobre os dois arranjos. */
  .adm-pagina-fixa .filtros { margin-left: 0; margin-right: 0; max-width: 100%; }
  .adm-wa .adm-filtros .filtros-inline { flex-wrap: wrap; overflow: visible; }
}
/* Texto inquebravel (URL do webhook, IPv6, JSON da auditoria) vazava a largura
   da pagina no telefone sem nenhum elemento passar da borda: era o proprio
   texto. Quebra em qualquer ponto so quando nao ha espaco. */
.tema-admin .adm-conteudo p, .tema-admin .adm-conteudo td, .tema-admin .adm-conteudo li, .tema-admin .adm-conteudo code, .tema-admin .adm-conteudo .celula-detalhe { overflow-wrap: anywhere; }
/* Presença e certificados na tela de inscrições (05/09/2026). */
.adm-presenca { max-width: none; display: grid; gap: 10px; }
.adm-presenca-linha { display: flex; justify-content: space-between; align-items: center; gap: 12px 18px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--mg-creme); }
.adm-presenca-linha:last-child { border-bottom: 0; padding-bottom: 0; }
.adm-presenca-linha > div { min-width: 0; flex: 1 1 320px; font-size: 13.5px; }
.adm-presenca-linha small { color: var(--mg-tinta-2); }
.adm-codigo-presenca { font-size: 1.15rem; letter-spacing: .18em; font-weight: 700; color: var(--mg-verde-900); background: var(--mg-creme); padding: 2px 10px; border-radius: 6px; }
.adm-presenca-form { display: inline-block; }
.adm-presenca-form + small { display: block; margin-top: 4px; }
.adm-cert .kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
/* KPI com data: o valor nao quebra e o rotulo nao parte letra a letra quando a faixa aperta. */
.tema-admin .kpi strong { white-space: nowrap; }
.tema-admin .kpi span { overflow-wrap: normal; hyphens: manual; }
.tema-admin .kpis { grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); }
/* Inscrições: presença e certificados numa faixa compacta; a lista rola por dentro. */
/* Inscricoes: o corpo (transmissao, presenca, filtros e lista) rola por dentro,
   e so os indicadores e o "voltar" ficam parados. Ver o comentario da tela. */
.adm-insc-corpo { display: flex; flex-direction: column; gap: 14px; padding-right: 4px; }
.adm-insc-corpo > * { margin-bottom: 0; }
@media (max-width: 1023px) { .adm-insc-corpo { padding-right: 0; } }
.adm-insc .adm-presenca { gap: 4px; padding: 8px 14px; }
.adm-insc .adm-presenca-linha { padding: 5px 0; }
.adm-insc .bloco-secao { margin-bottom: 0; }
.adm-insc .texto-apoio { margin: 0; }
.adm-insc .adm-filtros { margin-bottom: 0; }
/* Faixa do topo: indicadores de um lado, acoes do outro. As acoes formam UM
   grupo, entao nao viram colunas do grid de KPI nem faixas soltas embaixo. */
/* Nome do evento na linha de volta: e o unico lugar da tela que diz qual
   evento esta aberto, agora que o titulo da barra e so "Inscricoes". */
.voltar-linha-alvo { color: var(--mg-verde-900); font-weight: 700; }
.voltar-linha-alvo::before { content: "\2022"; color: var(--mg-tinta-2); font-weight: 400; margin: 0 8px 0 4px; }
/* O indicador de situacao da transmissao carrega FRASE, nao numero: sem
   quebra ele passava ate 119px do cartao. */
/* O <strong> do indicador carrega ora um NUMERO ("11"), ora uma FRASE ("A sala
   abre 30/09/2026 18h15"). O `white-space: nowrap` que protege o numero de
   quebrar no meio fazia a frase nao quebrar em lugar nenhum: o cartao ficava
   62px mais largo que a coluna e empurrava a pagina 43px a 320px. Quem carrega
   frase quebra, e para isso tambem precisa poder encolher (`flex: 0 1 auto`,
   porque a regra generica poe `0 0 auto`). */
.tema-admin .kpi-situacao strong { font-size: 1.05rem; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; flex: 0 1 auto; min-width: 0; }
/* Item de grade nasce com minimo igual ao conteudo: sem isto o cartao nunca
   encolhe abaixo do que tem dentro, e o excedente vira rolagem da PAGINA. */
.kpis > * { min-width: 0; }
.adm-insc-topo { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 16px; }
.adm-insc-topo > .kpis { flex: 1 1 460px; margin-bottom: 0; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.adm-acoes-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.adm-acoes-topo .adm-pdf-botoes { gap: 8px; }
@media (max-width: 767px) {
  .adm-acoes-topo { width: 100%; margin-left: 0; }
  .adm-acoes-topo > *, .adm-acoes-topo .adm-pdf-botoes { flex: 1 1 auto; }
  .adm-acoes-topo .btn { width: 100%; justify-content: center; }
}

/* No telefone estreito o par de colunas nao cabe: dois cartoes de 167px nao
   sustentam "05/09/2026" mais "On-line" do lado, e o texto vazava 22px para
   fora da tela (medido em 375px na tela de inscricoes). Uma coluna resolve sem
   truncar nada.
   FICA NO FIM DO ARQUIVO de proposito: media query nao soma especificidade, e
   `.adm-insc-topo > .kpis` (0,2,0), declarada mais acima, empatava e vencia por
   vir depois. A primeira versao desta regra ficou sem efeito exatamente assim. */
@media (max-width: 480px) {
  .tema-admin .kpis, .adm-insc-topo > .kpis, .adm-painel > .kpis { grid-template-columns: 1fr; }
}

/* ============================================================================
   RODADA 1.25 (07/09/2026): organizacao, profissionalismo e padrao editorial.

   Este bloco fica no FIM do arquivo de proposito, e as media queries dele vem
   depois das regras de desenho dele. Media query NAO soma especificidade: regra
   de desenho escrita DEPOIS de uma media query religa no desktop o que ela
   desligou no celular. Ja custou a barra inferior do aplicativo, a margem
   negativa da barra de botoes e o grid de indicadores em 375px.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   FRENTE 1: padrao editorial. Todo rotulo comeca com maiuscula.

   Onde o texto comeca com LETRA, quem resolve e o CSS: uma regra na raiz do
   rotulo pega inclusive o que plural() escreve em runtime, sem cacar string.
   Onde ele comeca com NUMERO ("113 registros"), ::first-letter nao tem o que
   fazer (digito nao tem caixa alta) e quem levanta a letra e frasePt(), no PHP.

   ::first-letter so vale em container de BLOCO. `.kpi span` ja e item de flex
   (item de flex e blocado), mas `display:block` fica explicito: a regra nao
   pode depender de o pai continuar sendo flex amanha.
   --------------------------------------------------------------------------- */
.tema-admin .kpi span,
.tema-admin .kpi-chip span,
.tema-admin .vazio p,
.tema-admin .vazio-texto,
.tema-admin .filtro-resumo,
.tema-admin .cartao-meta > span { display: block; }
.tema-admin .kpi span::first-letter,
.tema-admin .kpi-chip span::first-letter,
.tema-admin .vazio p::first-letter,
.tema-admin .vazio-texto::first-letter,
.tema-admin .filtro-resumo::first-letter,
.tema-admin .cartao-meta > span::first-letter { text-transform: uppercase; }

/* ---------------------------------------------------------------------------
   FRENTE 2: faixa compacta de indicadores (chip, nao cartao).

   O painel gastava 74px de altura por indicador, em cartao branco com sombra e
   borda de 3px: seis deles ocupavam uma linha e meia, com o sexto orfao. As
   listas, do outro lado, nao tinham indicador nenhum. Uma faixa de altura fixa
   resolve os dois: da o numero onde nao havia e devolve a altura que os cartoes
   gastavam. Altura fixa e proposital: e o que impede a faixa de crescer e
   empurrar a lista para baixo da dobra quando entra um rotulo mais longo.
   --------------------------------------------------------------------------- */
.faixa-kpi {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
  margin: 0 0 12px;
}
/* 13/09/2026 (board 8, "kpi-chip com ícone e numeração na mesma linha que o
   texto"): a faixa era inline-flex com ícone, número e rótulo lado a lado numa
   linha só, o que embolava o número com o texto. Agora é uma grade de duas
   colunas: o ícone à esquerda ocupando as duas linhas, o número em cima e o
   rótulo embaixo. Vale para TODOS os módulos porque a faixa vem de um helper
   único (faixaIndicadores em includes/ui.php). */
.kpi-chip {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 9px;
  row-gap: 1px;
  min-height: 44px;
  min-width: 0;
  padding: 6px 13px;
  background: var(--mg-branco);
  border: 1px solid var(--mg-borda);
  border-left: 3px solid var(--mg-sage);
  border-radius: var(--r-sm);
  color: var(--mg-tinta-2);
  text-decoration: none;
  transition: border-color var(--transicao), background var(--transicao);
}
a.kpi-chip:hover { border-color: var(--mg-verde-500); background: var(--mg-creme); }
a.kpi-chip:focus-visible { outline: 2px solid var(--mg-verde-800); outline-offset: 1px; }
.kpi-chip .ic { width: 18px; height: 18px; flex: 0 0 auto; color: var(--mg-verde-800); grid-row: 1 / span 2; align-self: center; }
.kpi-chip strong {
  grid-column: 2;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--mg-verde-900);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.kpi-chip span {
  grid-column: 2;
  font-size: 11.5px;
  line-height: 1.15;
  min-width: 0;
  overflow-wrap: anywhere;
}
.kpi-chip-alerta { border-left-color: #C9A227; background: var(--mg-aviso-bg); }
.kpi-chip-ok { border-left-color: var(--mg-verde-700); }
.kpi-chip-erro { border-left-color: var(--mg-erro); background: var(--mg-erro-bg); }
/* A faixa e faixa: dentro da pagina fixa ela nunca cede altura para a lista. */
.adm-pagina-fixa > .faixa-kpi { flex: 0 0 auto; }

/* UMA LINHA SO, no computador (08/09/2026). Com seis indicadores e rotulos
   longos ("Acessos a conteudo em 7 dias") a soma das larguras naturais passava
   de 1.170px numa faixa de 1.094, a faixa quebrava e o sexto ficava ORFAO numa
   segunda linha: exatamente o defeito que a rodada 1.25 corrigiu quando eram
   cartoes, e que voltou por outro caminho quando o acervo deixou de estar
   vazio. Com `flex: 1 1 0` os chips dividem a largura por igual e o rotulo
   quebra em duas linhas DENTRO do chip, sem corte e sem orfao. A altura da
   faixa cai de 110px para cerca de 52px, e esses 58px voltam para os blocos do
   painel, que estavam cortando conteudo. */
@media (min-width: 1200px) {
  .faixa-kpi { flex-wrap: nowrap; }
  .faixa-kpi > .kpi-chip { flex: 1 1 0; }
  .kpi-chip { padding: 4px 11px; }
  .kpi-chip span { line-height: 1.15; }
  /* Os quatro blocos do painel dividem uma area de cerca de 466px em 1366x768.
     Cada linha de lista que encolhe 2px devolve 8px por bloco, e sao esses
     pixels que decidem se o ultimo item aparece inteiro ou pela metade. Nada
     aqui muda tamanho de fonte nem alvo de clique: so o respiro vertical. */
  .adm-painel .adm-passos li { padding: 5px 2px; }
  .adm-painel .adm-atividade li { padding: 5px 2px; }
  .adm-painel .adm-arm-linha { padding: 3px 0; }
  .adm-painel-aviso { padding-top: 8px; padding-bottom: 8px; }
  .adm-painel .adm-bloco-cab { margin-bottom: 6px; }
  .adm-painel > .faixa-kpi { margin-bottom: 8px; }
}

/* ---------------------------------------------------------------------------
   FRENTE 2: estado vazio que OCUPA a area util.

   Medido em 07/09/2026 em 1366x768 com a base vazia: /admin/podcasts,
   /admin/videoaulas e /admin/materiais deixavam 353px mortos (53% da altura
   util), /admin/eventos 478px (72%) e /admin/certificados 344px (52%). A caixa
   de estado vazio tinha 90px e ficava encostada no topo. Aqui ela cresce ate o
   fim da area util, centra o conteudo e traz DENTRO dela a acao principal.

   `flex: 1 1 auto` precisa vir depois de `.adm-pagina-fixa > :not(.adm-rolavel)`
   (0,2,0), que fixa `flex: 0 0 auto` para tudo o que nao rola. Mesma
   especificidade, e este arquivo vem depois: por isso a regra funciona.
   --------------------------------------------------------------------------- */
.adm-pagina-fixa > .vazio-grande { flex: 1 1 auto; }
.vazio-grande {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  padding: 24px 20px;
  margin: 0;
  text-align: center;
}
.vazio-miolo { max-width: 46ch; margin: 0 auto; }
.vazio-icone { display: block; margin-bottom: 10px; }
.vazio-grande .vazio-icone .ic { width: 40px; height: 40px; color: var(--mg-sage); margin: 0; }
.tema-admin .vazio-titulo {
  font-family: var(--ff-titulo);
  font-size: 1.28rem;
  line-height: 1.2;
  color: var(--mg-verde-900);
  margin: 0 0 8px;
}
.tema-admin .vazio-texto { font-size: 14px; line-height: 1.55; margin: 0 0 16px; }
.vazio-acoes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.vazio-dicas {
  list-style: none;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--mg-borda);
  text-align: left;
  display: grid;
  gap: 6px;
}
.vazio-dicas li {
  position: relative;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--mg-tinta-2);
}
.vazio-dicas li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mg-sage);
}

/* ---------------------------------------------------------------------------
   FRENTE 2.1: o painel vira uma dashboard que vale com a base vazia.

   Faixa de indicadores em cima; abaixo, duas colunas que ocupam o resto da
   altura. Cada bloco tem estado vazio DESENHADO: o grafico nao some mais
   quando nao ha acesso, ele mostra a grade sem barra e explica o que vai
   aparecer ali. Grafico que some deixa buraco; grafico vazio ensina.
   --------------------------------------------------------------------------- */
.adm-painel-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 14px;
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
}
.adm-painel-grade > * { min-width: 0; min-height: 0; }
.adm-painel-col { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.adm-bloco {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--mg-branco);
  border: 1px solid var(--mg-borda);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-sm);
  padding: 13px 15px;
}
.adm-bloco-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  margin-bottom: 9px;
}
.tema-admin .adm-bloco-cab h2 {
  font-size: 1rem;
  margin: 0;
  display: flex;
  align-items: center;
  min-width: 0;
}
.adm-bloco-cab a { font-size: 12px; font-weight: 700; text-decoration: none; }
.adm-bloco-cab a:hover { text-decoration: underline; }
.adm-bloco-corpo { flex: 1 1 auto; min-height: 0; overflow: auto; }
.adm-bloco-cresce { flex: 1 1 auto; }

/* "Comece por aqui": passo acionavel, nao lista de verificacao decorativa. */
.adm-passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.adm-passos li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 2px;
  border-bottom: 1px solid var(--mg-creme);
  font-size: 13.5px;
  line-height: 1.35;
}
.adm-passos li:last-child { border-bottom: 0; }
.adm-passos li > .ic { width: 18px; height: 18px; flex: 0 0 auto; color: var(--mg-verde-500); }
.adm-passos li.feito { color: var(--mg-tinta-2); }
.adm-passos li.feito > .ic { color: var(--mg-verde-700); }
.adm-passos li.feito .adm-passo-texto { text-decoration: line-through; text-decoration-color: var(--mg-sage); }
.adm-passo-texto { flex: 1 1 auto; min-width: 0; }
.adm-passos li a {
  flex: 0 0 auto;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border: 1px solid var(--mg-borda);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.adm-passos li a:hover { border-color: var(--mg-verde-800); background: var(--mg-creme); }
.adm-passos-progresso {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: var(--mg-tinta-2);
  margin: 0 0 9px;
}
.adm-passos-barra {
  flex: 1 1 auto;
  height: 6px;
  border-radius: 3px;
  background: var(--mg-creme);
  overflow: hidden;
}
.adm-passos-barra > span { display: block; height: 100%; background: var(--mg-verde-700); }

/* Atividade recente: uma linha por fato, com a hora a direita. */
.adm-atividade { list-style: none; margin: 0; padding: 0; }
.adm-atividade li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 2px;
  border-bottom: 1px solid var(--mg-creme);
  font-size: 13px;
  line-height: 1.4;
}
.adm-atividade li:last-child { border-bottom: 0; }
.adm-atividade .ic { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; color: var(--mg-verde-500); }
.adm-atividade-texto { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.adm-atividade-quando { flex: 0 0 auto; font-size: 11.5px; color: var(--mg-tinta-2); white-space: nowrap; }

/* Grafico com estado vazio DESENHADO: a grade fica, as barras e que faltam. */
.adm-gr-vazio { position: relative; }
.adm-gr-vazio-grade {
  display: block;
  width: 100%;
  /* 92px e nao 118: a grade vazia e um lembrete do que vai aparecer ali, nao um
     grafico. Os 26px devolvidos sao o que faltava para a nota abaixo dela caber
     inteira em 1366x768 com o aviso de abertura no topo. */
  height: 92px;
  border-left: 1px solid var(--mg-borda);
  border-bottom: 1px solid var(--mg-borda);
  background-image: repeating-linear-gradient(to top, var(--mg-creme) 0 1px, transparent 1px 29px);
}
.adm-gr-vazio-nota {
  margin: 9px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--mg-tinta-2);
}

/* Consumo de armazenamento (Frente 8.2). */
.adm-arm-barra {
  height: 10px;
  border-radius: 5px;
  background: var(--mg-creme);
  border: 1px solid var(--mg-borda);
  overflow: hidden;
  margin: 4px 0 8px;
}
.adm-arm-barra > span { display: block; height: 100%; background: var(--mg-verde-700); }
.adm-arm-alerta .adm-arm-barra > span { background: #C9A227; }
.adm-arm-critico .adm-arm-barra > span { background: var(--mg-erro); }
.adm-arm-linha {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  color: var(--mg-tinta-2);
  padding: 4px 0;
  border-bottom: 1px solid var(--mg-creme);
}
.adm-arm-linha:last-child { border-bottom: 0; }
.adm-arm-linha strong { color: var(--mg-verde-900); font-variant-numeric: tabular-nums; }
.adm-arm-resumo { font-size: 13px; margin: 0 0 2px; }
.adm-arm-quando { color: var(--mg-tinta-2); font-size: 11.5px; white-space: nowrap; }
.adm-arm-resumo strong { font-size: 1.1rem; color: var(--mg-verde-900); }

/* ---------------------------------------------------------------------------
   FRENTE 3.1: respiro entre o rotulo e o controle, e entre o rotulo e a ajuda.

   O balao de ajuda tinha `margin-left: -9px` para encostar o alvo de 34px no
   texto. Como o glifo de 18px fica centrado no alvo, sobravam 8px de folga
   dentro do botao, e a margem negativa de 9px comia todos: o "?" nascia
   colado no dois-pontos ("BUSCAR:(?)"). Zerando a margem da esquerda o alvo
   continua com 34px e a folga optica volta a existir, sem alvo menor.
   --------------------------------------------------------------------------- */
.tema-admin .campo-rotulo, .tema-admin .filtro-rotulo { align-items: center; gap: 2px; }
.tema-admin .campo-rotulo .ajuda-caixa, .tema-admin .filtro-rotulo .ajuda-caixa { margin: -9px 0 -9px 0; }
.tema-admin .filtro-campo { gap: 7px; }
.tema-admin .filtro-campo label { line-height: 1.2; }
.tema-admin .campo label { margin-bottom: 6px; }
/* O rotulo com ajuda dentro do formulario segue a mesma folga do filtro. */
.tema-admin .campo .campo-rotulo { margin-bottom: 6px; }
.tema-admin .campo .campo-rotulo + input,
.tema-admin .campo .campo-rotulo + select,
.tema-admin .campo .campo-rotulo + textarea { margin-top: 0; }

/* ---------------------------------------------------------------------------
   FRENTE 3.2: formulario de duas colunas que termina junto.

   Em /admin/evento/novo a coluna da direita era mais alta que a area util e o
   corte caia DENTRO de um controle: o select "Onde a transmissao acontece"
   aparecia pela metade e a caixa "Gravar a transmissao em nuvem" ficava partida
   ao meio. A coluna da esquerda, ao contrario, acabava no banner e deixava
   vazio embaixo.

   A correcao nao e "diminuir o formulario": e o corte cair ENTRE blocos. Cada
   coluna vira uma pilha de secoes que nunca se parte por dentro
   (`break-inside: avoid`), e o que rola e a coluna, nao a pagina.
   --------------------------------------------------------------------------- */
.tema-admin .form-duas-colunas { align-items: start; }
.tema-admin .form-duas-colunas .form-coluna { display: flex; flex-direction: column; }
.adm-form-bloco {
  display: flow-root;
  break-inside: avoid;
  padding: 0 0 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--mg-creme);
}
.adm-form-bloco:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
/* Um campo nunca e cortado ao meio pela borda da area rolavel. */
.tema-admin .adm-rolavel .campo,
.tema-admin .adm-rolavel .campo-check { break-inside: avoid; }

/* ---------------------------------------------------------------------------
   FRENTE 4: cadastro em modal (popup) sobre a lista.

   A rota de pagina cheia continua existindo e funcionando por acesso direto:
   modal e a porta, nao a unica porta. Aqui so o desenho da janela; a mecanica
   (abrir, prender o foco, enviar por fetch, inserir a linha) vive no
   plataforma.js.
   --------------------------------------------------------------------------- */
.adm-modal-fundo {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 16px;
  background: rgba(27, 52, 43, .55);
  overflow: auto;
}
.adm-modal-fundo[hidden] { display: none; }
.adm-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 680px;
  max-height: calc(100dvh - 44px);
  background: var(--mg-branco);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-lg);
  overflow: hidden;
}
.adm-modal-cab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--mg-borda);
  background: var(--mg-creme);
}
.tema-admin .adm-modal-cab h2 { margin: 0; font-size: 1.1rem; flex: 1 1 auto; min-width: 0; }
.adm-modal-fechar {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--mg-borda);
  border-radius: var(--r-sm);
  background: var(--mg-branco);
  color: var(--mg-tinta-2);
  cursor: pointer;
}
.adm-modal-fechar:hover { border-color: var(--mg-verde-800); color: var(--mg-verde-900); }
.adm-modal-fechar:focus-visible { outline: 2px solid var(--mg-verde-800); outline-offset: 1px; }
.adm-modal-fechar .ic { width: 20px; height: 20px; }
.adm-modal-corpo { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 16px; }
/* Dentro do modal o cartao do formulario nao repete moldura nem sombra. */
.adm-modal-corpo .form-cartao {
  max-width: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  background: transparent;
}
.adm-modal-corpo .form-secao-titulo:first-child { margin-top: 0; }
/* Alvo de toque de 48px DENTRO do modal, em qualquer largura: o formulario
   virou janela, e janela se opera com o dedo tambem no computador. */
.adm-modal-corpo .btn,
.adm-modal-corpo .campo input,
.adm-modal-corpo .campo select,
.adm-modal-corpo input[type="file"] { min-height: 48px; }
.adm-modal-corpo .campo input,
.adm-modal-corpo .campo select { font-size: 15px; }
.adm-modal-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--mg-borda);
  background: var(--mg-branco);
}
.adm-modal-acoes .btn { min-height: 48px; }
.adm-modal-carregando {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 26px 4px;
  color: var(--mg-tinta-2);
  font-size: 13.5px;
}
.adm-modal-erro { margin: 0 0 12px; }
body.adm-modal-aberto { overflow: hidden; }

/* ---------------------------------------------------------------------------
   FRENTE 5.3: barra recolhida mostra o nome ao passar o mouse, e continua
   legivel por leitor de tela.

   O CSS antigo escondia o rotulo com `display: none`, que tira o nome do item
   da arvore de acessibilidade junto com o desenho: a barra recolhida virava
   uma coluna de sete links sem nome. Aqui o rotulo passa a ser texto so de
   leitor (recorte de 1px, a mesma tecnica de `.so-leitor`) e o balao com o
   nome nasce do atributo `data-dica`.
   --------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .sidebar-recolhida .app-sidebar-nav a span,
  .sidebar-recolhida .adm-grupo a span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    display: block;
  }
  .sidebar-recolhida .adm-grupo a,
  .sidebar-recolhida .app-sidebar-nav a { position: relative; }
  .sidebar-recolhida .adm-grupo a[data-dica]::after,
  .sidebar-recolhida .app-sidebar-nav a[data-dica]::after {
    content: attr(data-dica);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 60;
    padding: 6px 10px;
    border-radius: var(--r-sm);
    background: var(--mg-verde-950);
    color: var(--mg-creme);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transicao);
  }
  .sidebar-recolhida .adm-grupo a[data-dica]:hover::after,
  .sidebar-recolhida .adm-grupo a[data-dica]:focus-visible::after,
  .sidebar-recolhida .app-sidebar-nav a[data-dica]:hover::after,
  .sidebar-recolhida .app-sidebar-nav a[data-dica]:focus-visible::after { opacity: 1; }
  /* O grupo continua escondido, mas o balao carrega o nome do item, entao a
     coluna de icones nunca fica sem legenda ao alcance do mouse. */
  .sidebar-recolhida .adm-sidebar-nav { overflow: visible; }
  .sidebar-recolhida .adm-grupo { overflow: visible; }
}

/* ---------------------------------------------------------------------------
   FRENTE 6.3: ordenacao por arrastar na tela de categorias, e a lista limpa.

   A ordem era um numero digitado a mao (10, 20, 30) num campo aberto em cada
   uma das 14 linhas, ao lado de outro campo de texto e de um botao de salvar:
   catorze formularios abertos ao mesmo tempo, o que fazia a tela parecer um
   painel de depuracao. Agora a linha e so leitura, a edicao abre ao clicar no
   nome, e a ordem se muda arrastando pela alca.
   --------------------------------------------------------------------------- */
.adm-cat-lista { list-style: none; margin: 0; padding: 0; }
.adm-cat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-bottom-color: var(--mg-creme);
  background: var(--mg-branco);
}
.adm-cat-item:last-child { border-bottom-color: transparent; }
.adm-cat-item.arrastando { opacity: .45; }
.adm-cat-item.alvo { border-color: var(--mg-verde-500); background: var(--mg-creme); }
.adm-cat-alca {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--mg-sage);
  cursor: grab;
  border-radius: var(--r-sm);
}
.adm-cat-alca:hover { color: var(--mg-verde-800); background: var(--mg-creme); }
.adm-cat-alca:focus-visible { outline: 2px solid var(--mg-verde-800); outline-offset: -2px; }
.adm-cat-alca .ic { width: 18px; height: 18px; }
.adm-cat-nome {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--mg-verde-900);
  font-weight: 700;
  cursor: text;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  overflow-wrap: anywhere;
}
.adm-cat-nome:hover { background: var(--mg-creme); }
.adm-cat-nome:focus-visible { outline: 2px solid var(--mg-verde-800); outline-offset: -2px; }
.adm-cat-conta {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--mg-tinta-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.adm-cat-acoes { flex: 0 0 auto; display: flex; gap: 2px; }
/* Cada acao vem dentro do seu proprio <form> (o token de CSRF viaja com ela).
   Como bloco, o form media 28,3px de altura para conter um botao de 26: a
   sobra e a caixa de linha do botao, que e inline. Como flex ele tem a altura
   do botao. Sao 2,3px por linha, e em catorze linhas da coluna mais alta da
   tela de categorias isso somava 32px, parte do que fazia o ultimo podcast
   ficar cortado em 1366 por 768. */
.adm-cat-acoes form { display: flex; }
.adm-cat-edicao { display: flex; flex: 1 1 auto; gap: 8px; align-items: center; min-width: 0; }
.adm-cat-grupo { margin-bottom: 14px; }
.adm-cat-grupo-titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mg-tinta-2);
  padding: 0 10px 5px;
  border-bottom: 1px solid var(--mg-borda);
  margin: 0 0 3px;
}
.adm-cat-vazio { font-size: 13px; color: var(--mg-tinta-2); padding: 10px; margin: 0; }

/* ---------------------------------------------------------------------------
   FRENTE 7: titulo longo nunca e cortado, e URL nao empurra a pagina.
   --------------------------------------------------------------------------- */
.tema-admin .adm-conteudo .td-titulo strong,
.tema-admin .adm-conteudo .adm-bloco a,
.tema-admin .vazio-titulo,
.tema-admin .adm-modal-cab h2 { overflow-wrap: anywhere; }
/* A area de texto cresce com o conteudo em vez de rolar por dentro. */
.tema-admin .campo textarea[data-cresce] { overflow-y: hidden; resize: none; }

/* ---------------------------------------------------------------------------
   Faixa de acoes do topo das listas: acao principal a direita, sem cartao.
   --------------------------------------------------------------------------- */
.tema-admin .pagina-cab-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
}
.tema-admin .pagina-cab-linha .texto-apoio-inline { margin: 0; min-width: 0; }

/* ---------------------------------------------------------------------------
   MEDIA QUERIES DESTE BLOCO. Vem por ULTIMO, depois de todas as regras de
   desenho acima, para nao serem religadas por elas.
   --------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .adm-painel-grade { grid-template-columns: 1fr; }
  .adm-bloco-corpo { overflow: visible; }
  .adm-painel-col { min-height: 0; }
  .vazio-grande { min-height: 200px; padding: 22px 14px; }
  /* A janela vira folha que sobe do pe da tela em TODO tamanho de toque
     (revisao de 11/09/2026: em 834x1194 ela ocupava 98% com 12px de margem e
     cantos nos quatro lados, no meio do caminho entre janela e folha). */
  .adm-modal { max-width: none; max-height: 92dvh; border-radius: var(--r-md) var(--r-md) 0 0; }
  .adm-modal-fundo { padding: 0; align-items: flex-end; }
  .tema-admin .campo-rotulo, .tema-admin .filtro-rotulo { min-height: 44px; }
}
@media (max-width: 600px) {
  .faixa-kpi { gap: 6px; }
  /* A ALCA E O NOME NA MESMA LINHA (09/09/2026).
     Antes o nome tomava a linha inteira (`flex: 1 1 100%`) e sobrava uma
     terceira linha so para a contagem e os dois botoes: tres linhas por
     categoria, 140px cada, e as 36 categorias davam 6,7 telas de rolagem no
     telefone. Com a alca e o nome juntos em cima, e a contagem com os botoes
     embaixo, o item fecha em cerca de 92px e a mesma lista cai para 4,4 telas.
     O nome continua sendo o alvo grande de toque: ele ocupa o que sobra da
     linha, e a alca tem largura fixa. */
  .adm-cat-item { flex-wrap: wrap; row-gap: 2px; }
  .adm-cat-alca { order: 1; flex: 0 0 auto; }
  /* O nome vive dentro de .adm-cat-miolo desde 10/09 (selo "Inativo" e
     edicao em linha): e o MIOLO que precisa da ordem 2 e de ocupar o resto
     da primeira linha, senao ele passa a frente da alca (order 0). */
  .tema-admin .adm-cat-miolo { order: 2; flex: 1 1 calc(100% - 56px); min-width: 0; }
  .adm-cat-nome { flex: 1 1 0; min-width: 0; text-align: left; }
  .tema-admin .adm-cat-conta { order: 3; }
  .tema-admin .adm-cat-acoes { order: 4; margin-left: auto; }
  .adm-cat-conta { order: 3; }
  .adm-cat-acoes { order: 4; margin-left: auto; }
  /* A janela vira folha que sobe do pe da tela: e o gesto do telefone. */
  .adm-modal { border-radius: var(--r-md) var(--r-md) 0 0; max-height: 92dvh; }
  .adm-modal-fundo { padding: 0; }
}

/* ---------------------------------------------------------------------------
   Correcao medida na varredura de 07/09/2026: os links do cabecalho dos blocos
   novos do painel ("Abrir configuracoes", "Ver a trilha completa",
   "Relatorios") nasciam com 20px de altura e reprovavam o eixo de alvo minimo
   em 320px e 360px, que esta em 48px e em nivel FALHA desde 06/09.

   O alvo cresce, o DESENHO nao: `inline-flex` com `min-height` estica a caixa
   sem mexer no tamanho da letra. E fica no telefone e no tablet, onde o dedo e
   quem clica; no computador o link continua alinhado pela base do titulo.

   Media query no FIM do arquivo, depois de toda regra de desenho deste bloco:
   media query nao soma especificidade, e uma regra escrita depois dela religa
   no desktop o que ela desligou no celular.
   --------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .adm-bloco-cab { align-items: center; }
  .adm-bloco-cab a {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 2px;
  }
  /* A linha da atividade recente e um link inteiro no telefone: o texto tinha
     16px de altura e o dedo precisava acertar uma tira. A linha cresce para
     48px, que e o alvo minimo da casa, e o alinhamento vertical volta ao topo
     para a hora nao descolar do texto quando ele quebra em duas linhas. */
  .adm-atividade li { align-items: center; }
  .adm-atividade-texto a {
    display: flex;
    align-items: center;
    min-height: 48px;
  }
}

/* ---------------------------------------------------------------------------
   Cabecalho de tabela grudado SO onde ha altura para ele.

   Medido em 07/09/2026, com a base cheia, na tela de inscricoes a 1024x620: o
   `thead th` grudado (z-index 2) cobria os botoes das primeiras linhas, e o
   clique ia para o cabecalho. Foram 28 acusacoes de "clique-roubado" na mesma
   tela, todas em 1024x620 e nenhuma em 1366x768.

   A causa nao e o z-index: e a ALTURA. Naquela tela o corpo rola por dentro de
   uma regiao curta, e um cabecalho grudado de 30px sobre uma area de rolagem de
   pouco mais de 200px come a parte de cima dela. Numa janela baixa o cabecalho
   grudado custa mais do que entrega, entao ele deixa de grudar e rola junto.

   O corte e a ALTURA da janela, e nao a largura: e a altura que falta.
   --------------------------------------------------------------------------- */
@media (max-height: 700px) {
  .tema-admin .tabela-caixa .tabela thead th,
  .adm-pagina-fixa .tabela thead th { position: static; }
}

/* Campo que so tem acao: o botao alinha pela base da linha sem precisar de um
   rotulo vazio para ocupar a altura. O `<label>&nbsp;</label>` que fazia isso
   era rotulo ligado a nenhum campo, anunciado em branco pelo leitor de tela. */
.campo-so-acao { display: flex; align-items: flex-end; }
.campo-so-acao .btn { width: 100%; justify-content: center; }
@media (max-width: 700px) { .campo-so-acao { align-items: stretch; } }

/* ---------------------------------------------------------------------------
   O painel tem de CABER, e nao so parecer que cabe.

   Medido em 07/09/2026 em 1366x768: a tela nova desenhava certo e mesmo assim a
   pagina rolava 547px. A causa nao estava nos blocos, que ja tinham
   `min-height: 0` e corpo com rolagem propria: estava na GRADE. Uma trilha de
   grade sem altura declarada e dimensionada pelo CONTEUDO, entao ela crescia
   alem do espaco que o flex tinha dado a ela e empurrava a pagina.

   `grid-template-rows: minmax(0, 1fr)` fecha a trilha na altura disponivel; a
   partir dai quem cede e o corpo de cada bloco, que e quem sabe rolar.
   --------------------------------------------------------------------------- */
.adm-painel-grade { grid-template-rows: minmax(0, 1fr); }
.adm-painel-col { overflow: hidden; }
.adm-bloco { overflow: hidden; }
@media (max-width: 1023px) {
  /* No telefone a pagina volta a rolar: e la que rolar e o certo. */
  .adm-painel-grade { grid-template-rows: none; }
  .adm-painel-col, .adm-bloco { overflow: visible; }
}

/* A grade do painel PRECISA ceder e crescer com o que sobra.
   `.adm-painel-grade { flex: 1 1 auto }` (0,1,0) perdia para
   `.adm-pagina-fixa > :not(.adm-rolavel) { flex: 0 0 auto }` (0,2,0), declarada
   antes neste mesmo arquivo: `:not()` carrega a especificidade do argumento, e
   nao zero. Com `flex: 0 0 auto` a grade nascia com a altura do CONTEUDO (977px
   numa area util de 626px) e a pagina rolava 547px, com a tela desenhando
   certo. Especificidade empatada perde; a regra precisa do MESMO peso e vir
   depois, que e o caso aqui. */
.adm-pagina-fixa > .adm-painel-grade { flex: 1 1 auto; min-height: 0; }

/* ---------------------------------------------------------------------------
   Sombra que aparece SO quando o bloco tem mais conteudo abaixo.

   Dentro da pagina fixa o corpo de cada bloco rola por dentro, e a linha que
   fica pela metade na borda inferior lia como tela quebrada, e nao como "tem
   mais coisa". A tecnica e a classica de duas camadas com
   `background-attachment: local` e `scroll`: a camada branca cobre a sombra
   quando a rolagem esta no fim, entao o aviso some sozinho quando nao ha mais
   nada para ver. Nao usa JavaScript e nao esconde texto.
   --------------------------------------------------------------------------- */
.adm-bloco-corpo {
  background:
    linear-gradient(var(--mg-branco) 30%, rgba(255, 255, 255, 0)) top / 100% 14px no-repeat local,
    linear-gradient(rgba(255, 255, 255, 0), var(--mg-branco) 70%) bottom / 100% 14px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(34, 48, 42, .14), rgba(34, 48, 42, 0)) top / 100% 7px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(34, 48, 42, .14), rgba(34, 48, 42, 0)) bottom / 100% 7px no-repeat scroll;
}

/* ---------------------------------------------------------------------------
   FRENTE 3.2, segunda metade: onde o corte cai.

   `break-inside: avoid` foi a primeira tentativa e NAO serve aqui: ele so vale
   em contexto de fragmentacao (impressao e multicoluna), e nao numa caixa que
   rola. Fica no `.adm-form-bloco` porque o mesmo bloco tambem e impresso, mas
   quem resolve a rolagem e outra coisa.

   O que resolve: o formulario longo passa a PARAR em limite de bloco quando a
   pessoa rola (`scroll-snap-type: y proximity`, que so puxa quando ja esta
   perto e por isso nao briga com o gesto), e a sombra de rolagem avisa que ha
   mais coisa abaixo, em vez de a linha cortada na borda parecer tela quebrada.

   O que NAO se promete: um formulario de vinte campos nao cabe em 626px de
   altura util sem virar tela de tres colunas ou de letra miuda. Ele rola, e
   rolar aqui e o certo. O que mudou e o corte deixar de ser mudo.
   --------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .adm-form-fixo > form.adm-rolavel {
    scroll-snap-type: y proximity;
    scroll-padding-top: 8px;
    background:
      linear-gradient(var(--mg-branco) 30%, rgba(255, 255, 255, 0)) top / 100% 16px no-repeat local,
      linear-gradient(rgba(255, 255, 255, 0), var(--mg-branco) 70%) bottom / 100% 16px no-repeat local,
      radial-gradient(farthest-side at 50% 0, rgba(34, 48, 42, .13), rgba(34, 48, 42, 0)) top / 100% 8px no-repeat scroll,
      radial-gradient(farthest-side at 50% 100%, rgba(34, 48, 42, .13), rgba(34, 48, 42, 0)) bottom / 100% 8px no-repeat scroll;
  }
  .adm-form-bloco { scroll-snap-align: start; }
}

/* Lista do que a conta pode fazer, em "Meu perfil". Nao herda a lista dos
   primeiros passos: la o item concluido vem RISCADO, e riscar uma permissao
   que a conta tem diz o contrario do que a linha diz. */
.adm-permissoes { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.adm-permissoes li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 2px;
  border-bottom: 1px solid var(--mg-creme);
  font-size: 13.5px;
  line-height: 1.4;
}
.adm-permissoes li:last-child { border-bottom: 0; }
.adm-permissoes .ic { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 2px; }
.adm-permissoes .pode .ic { color: var(--mg-verde-700); }
.adm-permissoes .nao-pode { color: var(--mg-tinta-2); }
.adm-permissoes .nao-pode .ic { color: var(--mg-sage); }

/* ---------------------------------------------------------------------------
   FICHA EM TRES COLUNAS, e as marcacoes numa lista compacta.

   Pedido do dono em 07/09/2026, depois de olhar a tela: "/admin/evento/novo
   continua desproporcional nas telas e com rolagem, nao quero rolagem nesse
   formulario". Em duas colunas a ficha media 977px numa area util de 626px, e
   nenhum ajuste de espacamento cobre 351px de diferenca.

   Tres colunas a partir de 1200px: mesmo conteudo, dois tercos da altura.
   Abaixo disso volta a duas e depois a uma, e ai ela rola: no telefone rolar e
   o certo.

   As caixas de marcacao viram lista de 34px por linha, com o rotulo NA MESMA
   linha da caixa e a explicacao atras da interrogacao. As tres de "Publicacao"
   gastavam 150px de altura, em blocos de 48px com o rotulo quebrando embaixo,
   para dizer tres coisas de uma palavra.
   --------------------------------------------------------------------------- */
.form-tres-colunas { display: grid; grid-template-columns: 1fr; gap: 0 22px; align-items: start; }
.form-tres-colunas > .form-coluna { min-width: 0; }
.form-tres-colunas > .form-acoes-largura { grid-column: 1 / -1; }
@media (min-width: 1024px) {
  .form-tres-colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .form-tres-colunas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; }
}

/* Lista de marcacoes: uma linha, um estado. */
.adm-marcadores { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 1px; }
.adm-marcadores li {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  min-width: 0;
}
/* `width`, `height` e `min-height` proprios NAO sao enfeite: as regras de campo
   de formulario valem para `input` inteiro, e ate 08/09/2026 nenhuma lista de
   marcacao vivia dentro de um `.campo`. Quando a primeira viveu (os objetivos
   clinicos da lamina), a caixa de marcacao herdou tudo:
     - `width: 100%` de `.campo input`: ela esticou para os 246px da coluna,
       sobrou zero para a etiqueta e cada nome virou uma letra por linha. O item
       passou de 34px para 462px e o formulario ganhou 1.144px de rolagem.
     - `min-height: 38px` do piso de altura dos campos: a caixa ficou com 13 por
       38, ou seja, o quadradinho desenhado no rodape de uma faixa vazia de
       38px, desalinhado da etiqueta ao lado.
   O `min-height: 0` e o que desfaz o segundo. */
.adm-marcadores input[type="checkbox"] { flex: 0 0 auto; width: 22px; height: 22px; min-height: 0; margin: 0; padding: 0; accent-color: var(--mg-verde-800); }
.adm-marcadores label {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mg-tinta);
  line-height: 1.25;
  cursor: pointer;
}
.adm-marcadores .ajuda-caixa { margin: -7px 0; }
/* Lista de marcacao em COLUNAS, para conjunto grande (os dez objetivos clinicos
   da lamina). Empilhados eles somam 340px e poem rolagem num formulario que
   acabou de deixar de ter; em colunas fecham quatro linhas. O minimo de 200px
   e o que a etiqueta mais longa ("Performance e composicao corporal") pede para
   caber em duas linhas curtas em vez de quatro. */
.adm-marcadores-grade { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1px 18px; }
/* Dentro de um formulario de DUAS colunas a lista tem metade da largura, cerca
   de 500px: com o minimo de 200px sobravam duas colunas e os dez objetivos
   viravam cinco linhas de 299px.

   O numero de colunas do `auto-fill` e floor((largura + vao) / (minimo + vao)),
   e nao "largura dividida pelo minimo": com 160px isso dava floor(512/172) = 2,
   ou seja, o mesmo resultado de antes. 150px da floor(512/162) = 3, que e o que
   se queria: tres colunas e quatro linhas. */
.form-duas-colunas .adm-marcadores-grade { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1px 12px; }
/* Sem a margem de baixo da lista: dentro de um `.campo` ela some por cima da
   margem que o proprio campo ja tem, e os 10px viravam respiro em dobro. Com o
   respiro do item em 3px, a ficha de material com capa e arquivo enviados fecha
   exatamente dentro dos 585px uteis de 1366 por 768. */
.adm-marcadores-grade { margin-bottom: 0; }
.adm-marcadores-grade li { align-items: flex-start; padding: 3px 0; }
.adm-marcadores-grade input[type="checkbox"] { margin-top: 3px; }
.adm-marcadores-grade label { line-height: 1.3; overflow-wrap: break-word; }
/* A ficha do evento aperta o respiro entre campos: e o que sobra depois das
   tres colunas, e o que faz a ultima secao caber sem rolagem. */
.tema-admin .adm-ficha-evento .campo { margin-bottom: 8px; }
.tema-admin .adm-ficha-evento .form-secao-titulo { margin: 10px 0 8px; }
.tema-admin .adm-ficha-evento .adm-form-bloco { padding-bottom: 8px; margin-bottom: 8px; }
.tema-admin .adm-ficha-evento .campo textarea { min-height: 72px; }
@media (max-width: 1023px) {
  /* No telefone o dedo manda: a caixa e o rotulo voltam ao alvo de 48px. */
  .adm-marcadores li { min-height: 48px; }
  .tema-admin .adm-ficha-evento .campo { margin-bottom: 10px; }
}

/* Aperto medido da ficha do evento (07/09/2026, segunda passada).
   Depois das tres colunas sobravam 22px: a coluna do anuncio fechava 605px numa
   caixa de 583. O corte veio de tres lugares, e nenhum deles muda o tamanho da
   letra: a area de texto da descricao (120 -> 88, que continua mostrando quatro
   linhas), a altura dos campos (38 -> 36) e o vao entre eles (8 -> 6).
   Medido depois: 549px de coluna numa caixa de 583, com 34px de folga. */
.tema-admin .adm-ficha-evento .campo { margin-bottom: 6px; }
.tema-admin .adm-ficha-evento .campo input,
.tema-admin .adm-ficha-evento .campo select { min-height: 36px; padding: 6px 11px; }
.tema-admin .adm-ficha-evento .campo textarea { min-height: 88px; }
.tema-admin .adm-ficha-evento .campo-rotulo { min-height: 30px; }
@media (max-width: 1023px) {
  /* No telefone o alvo volta a 48px: la quem clica e o dedo. */
  .tema-admin .adm-ficha-evento .campo input,
  .tema-admin .adm-ficha-evento .campo select { min-height: 48px; font-size: 16px; }
  .tema-admin .adm-ficha-evento .campo { margin-bottom: 10px; }
  .tema-admin .adm-ficha-evento .campo-rotulo { min-height: 44px; }
}

/* A ficha do evento e um cartao com CORPO que rola e RODAPE que nao rola.
   Antes a barra de botoes vivia dentro da area rolavel e, mesmo grudada no pe,
   ocupava 96px da altura de conteudo: eram esses 96px que empurravam o ultimo
   campo para fora da borda. Fora dela, o corpo ganha os 96px de volta. */
.adm-form-fixo > form.adm-ficha-evento {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding-bottom: 0;
}
.adm-ficha-evento > .adm-ficha-corpo { flex: 1 1 auto; min-height: 0; overflow: auto; }
.adm-ficha-evento > .adm-ficha-acoes {
  flex: 0 0 auto;
  margin: 0 -18px;
  padding: 10px 18px 12px;
  border-top: 1px solid var(--mg-creme);
  background: var(--mg-branco);
}
.tema-admin .adm-ficha-evento > .adm-ficha-acoes .btn { min-height: 40px; }
/* O par da transmissao divide a linha: os dois campos so aparecem juntos no
   formato on-line com link de fora, e ai eles somavam 156px numa coluna que ja
   era a mais alta. Lado a lado, somam 78px. */
.adm-transmissao-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
.adm-transmissao-par > .campo { min-width: 0; }
.adm-transmissao-par > .campo[hidden] { display: none; }
@media (max-width: 1199px) {
  .adm-transmissao-par { grid-template-columns: 1fr; }
}
@media (max-width: 1023px) {
  .adm-form-fixo > form.adm-ficha-evento { overflow: visible; display: block; padding-bottom: 22px; }
  .adm-ficha-evento > .adm-ficha-corpo { overflow: visible; }
  .adm-ficha-evento > .adm-ficha-acoes { margin: 12px 0 0; padding: 12px 0 0; }
  .tema-admin .adm-ficha-evento > .adm-ficha-acoes .btn { min-height: 48px; }
}

/* ---------------------------------------------------------------------------
   Os quatro grupos de categoria lado a lado.

   Relato do dono em 07/09/2026: "/admin/categorias com rolagem tambem, nao
   devemos ter rolagens assim, em nenhuma pagina". Em coluna unica as 24
   categorias somavam 1.056px de lista numa area util de 626: nao havia aperto
   de espacamento que resolvesse.

   Duas colunas e a linha mais baixa: o grupo mais alto (videoaulas, 9 itens)
   fecha 366px, o segundo par fecha 214px, e a tela inteira cabe com folga. A
   linha de categoria vai de 48px para 38px, o que continua acima do alvo de
   toque no COMPUTADOR (onde quem clica e o ponteiro); no telefone ela volta a
   48px e a lista volta a uma coluna, porque la rolar e o certo.
   --------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  /* COLUNA DE TEXTO, e nao grade: numa grade de duas colunas os quatro grupos
     formam DUAS LINHAS, e a altura de cada linha e a do grupo mais alto dela.
     Com 9, 5, 5 e 5 itens isso da 380 + 223 = 603px numa caixa de 500, e nao ha
     aperto de espacamento que cubra 103px.
     Em coluna de texto (`columns`) os grupos FLUEM e o navegador equilibra as
     colunas sozinho: com tres, a mais alta fecha 446px. `break-inside: avoid`
     garante que um grupo nunca se parta no meio da lista. */
  .adm-cat-grupos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 20px;
    align-content: start;
  }
  .adm-cat-grupo { min-width: 0; margin-bottom: 0; }
  .adm-cat-item { padding: 3px 10px; min-height: 32px; }
  .adm-cat-alca { width: 30px; height: 30px; }
  .adm-cat-nome { padding: 4px 8px; }
  .tema-admin .adm-cat-grupos .btn-icone { width: 30px; height: 30px; }
}
/* COLUNA DE TEXTO (`columns`) foi a primeira tentativa e NAO serve aqui: dentro
   de uma caixa de altura fixa que rola, o multicoluna pagina para o LADO em vez
   de crescer para baixo, e a tela ganhou 259px de rolagem horizontal com o
   grupo "Eventos" numa quarta coluna fora da tela (medido em 07/09/2026).

   O que serve e uma grade com colocacao explicita. Sao QUATRO tipos de conteudo,
   fixos no enum de `categorias.tipo`, e o primeiro (videoaulas) e o maior: ele
   ocupa a coluna 1 inteira, e os outros tres se distribuem em duas colunas. A
   altura da grade passa a ser a das linhas curtas, e nao a do grupo maior. */
/* SAO CINCO GRUPOS desde 08/09/2026, e nao quatro: os objetivos clinicos das
   laminas entraram na mesma tela. A colocacao muda porque a conta muda. As
   alturas, medidas com o acervo real (36 categorias, item de 36px mais o titulo
   do grupo): objetivo 10 itens = 424px, videoaula 9 = 384, material 7 = 304,
   podcast 5 = 224, evento 5 = 224, somando 1.560px.

   A melhor divisao em tres colunas fecha a coluna mais alta em 618px, e nenhuma
   outra combinacao fica abaixo disso: {videoaula, podcast} = 618,
   {objetivo} = 424, {material, evento} = 538. E por isso que videoaula e
   podcast dividem a coluna 1, o objetivo ocupa a coluna 2 inteira e material e
   evento dividem a coluna 3. */
@media (min-width: 1200px) {
  .adm-cat-grupos { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; }
  .adm-cat-grupo:nth-child(1) { grid-column: 1; grid-row: 1; }  /* videoaulas */
  .adm-cat-grupo:nth-child(2) { grid-column: 3; grid-row: 1; }  /* materiais */
  .adm-cat-grupo:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }  /* objetivos */
  .adm-cat-grupo:nth-child(4) { grid-column: 1; grid-row: 2; }  /* podcast */
  .adm-cat-grupo:nth-child(5) { grid-column: 3; grid-row: 2; }  /* eventos */
}

/* Em tres colunas a linha da categoria precisa de espaco para o NOME: o resto
   encolhe. A contagem vira so o numero (a frase inteira segue no leitor de tela
   e no balao do ponteiro) e os dois botoes caem para 28px, o que devolve cerca
   de 90px por linha e faz "Endocrinologia e metabologia" caber numa linha so.
   Isso vale do computador para cima; no telefone tudo volta ao tamanho do dedo. */
@media (min-width: 1024px) {
  .adm-cat-conta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: var(--mg-creme);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--mg-tinta-2);
  }
  .adm-cat-nome { font-size: 13.5px; }
  .tema-admin .adm-cat-grupos .btn-icone { width: 28px; height: 28px; }
  .adm-cat-item { gap: 6px; }
  .adm-cat-acoes { gap: 0; }
}

/* O nome da categoria tem de caber em UMA linha na coluna de 344px: cada nome
   que quebra em duas custa 11px, e quatro deles somam os 44px que faziam o
   ultimo item da segunda coluna ficar cortado. O espaco vem de encolher tudo o
   que nao e o nome: a alca, o contador e os dois botoes. Medido em 07/09/2026:
   "Guias rapidos de consultorio" e o nome mais largo do acervo hoje. */
@media (min-width: 1200px) {
  /* 30px desde 08/09/2026, quando entrou o quinto grupo (objetivos clinicos).
     A altura da area de grupos NAO e a do grupo mais alto: e a soma das duas
     linhas da grade, porque a coluna do meio atravessa as duas. Com 34px por
     item essa soma dava 334 (videoaulas) + 10 + 197 (podcast) = 541, contra
     500px uteis, e o ultimo podcast ficava cortado. Com 30px a soma cai para
     cerca de 484 e a tela inteira cabe.

     Alargar a coluna do meio, que era a saida obvia, PIORA: as colunas 1 e 3
     encolhem, oito nomes passam a quebrar em duas linhas e a soma sobe para
     663px. Medido nos dois casos em 08/09/2026. */
  .adm-cat-item { gap: 4px; padding: 1px 8px; min-height: 30px; }
  .adm-cat-nome { font-size: 13px; padding: 2px 6px; }
  .adm-cat-acoes { align-items: center; }
  .adm-cat-alca { width: 26px; height: 26px; }
  .adm-cat-alca .ic { width: 16px; height: 16px; }
  .adm-cat-conta { min-width: 22px; height: 20px; padding: 0 5px; font-size: 11px; }
  .tema-admin .adm-cat-grupos .btn-icone { width: 26px; height: 26px; }
  .tema-admin .adm-cat-grupos .btn-icone .ic { width: 15px; height: 15px; }
  .adm-cat-grupo-titulo { padding: 0 8px 4px; }
}

/* Contato e ficha na linha da lista: tres botoes que existem em TODA linha,
   sempre nas mesmas posicoes, separados por um fio das acoes que mudam de
   estado (aprovar, bloquear, excluir). Quem opera nao procura onde esta o
   botao de falar com a pessoa. */
.adm-contato-acoes {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding-right: 8px;
  margin-right: 6px;
  border-right: 1px solid var(--mg-borda);
}
/* Lugar guardado para o WhatsApp de quem nao tem telefone: sem ele, os botoes
   seguintes dancam de posicao de uma linha para a outra. Fora do alcance do
   teclado e do leitor, porque nao ha o que fazer com ele. */
.btn-icone-vazio { opacity: .28; cursor: default; pointer-events: none; }
@media (max-width: 900px) {
  /* No modo cartao a linha vira bloco: o fio vertical vira um respiro. */
  .adm-contato-acoes { border-right: 0; padding-right: 0; margin-right: 0; gap: 4px; }
}

/* Configuracoes em abas: a de textos usa a largura inteira e poe os 17 campos
   em tres colunas. Antes o formulario dividia a largura com os cartoes de
   ferramenta e fechava 1.243px de conteudo numa caixa de 523, com oito campos
   abaixo da borda. */
.adm-conf-textos { display: flex; flex-direction: column; min-height: 0; }
.adm-conf-textos > .bloco-secao { margin-bottom: 0; display: flex; flex-direction: column; min-height: 0; }
.adm-conf .adm-conf-textos .form-cartao { max-width: none; }
@media (min-width: 1024px) { .adm-conf-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1300px) { .adm-conf-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; } }
/* As tres areas de texto NAO ocupam mais a linha inteira.
   Medido em 07/09/2026: esticadas, elas custavam 124px de altura CADA numa
   linha inteira da grade, 372px dos 947px de conteudo, e sozinhas explicavam o
   corte. Numa coluna so, elas dividem a linha com dois campos comuns e a altura
   da linha passa a ser a maior das tres, e nao a soma.
   `grid-column: auto` desliga a regra herdada de `.adm-conf-grade > .campo:has(textarea)`
   declarada antes neste arquivo; a especificidade e a mesma e esta vem depois. */
.tema-admin .adm-conf-grade > .campo:has(textarea) { grid-column: auto; }
.tema-admin .adm-conf .campo textarea { min-height: 60px; }
.tema-admin .adm-conf .campo { margin-bottom: 6px; }
.tema-admin .adm-conf .adm-conf-grade { gap: 0 16px; }

/* A aba do procedimento de pareamento: coluna de leitura, nao painel. */
.adm-wa-guia { max-width: 900px; }
.adm-wa-guia ol { margin: 0; padding-left: 22px; }
.adm-wa-guia li { margin-bottom: 8px; line-height: 1.5; font-size: 14px; }

/* Os fatos do canal de WhatsApp em duas colunas de texto: treze linhas densas
   em coluna unica somavam 700px, com quase toda linha quebrando em duas ou
   tres. `break-inside: avoid` impede que um fato se parta entre as colunas. */
@media (min-width: 1024px) {
  .adm-wa-fatos { columns: 2; column-gap: 26px; }
}
.adm-wa-fatos p { break-inside: avoid; margin: 0 0 9px; font-size: 13.5px; line-height: 1.45; }

/* Situacao do WhatsApp: o cartao de estado ocupa a largura inteira e os fatos
   passam a TRES colunas; os dois formularios ficam lado a lado embaixo. Em duas
   colunas, o cartao ficava com metade da largura e cada fato quebrava em tres
   linhas: 600px de conteudo numa caixa de 515. */
@media (min-width: 1024px) {
  /* Tres colunas de pagina: o cartao de estado ocupa DUAS (e os fatos cabem em
     duas colunas de texto la dentro) e os dois formularios ficam empilhados na
     terceira. Foi a unica distribuicao que fechou: com o cartao ocupando a
     largura inteira, os formularios caiam para uma linha propria embaixo e a
     soma das duas alturas (339 + 263) estourava a caixa de 515 em 99px. Lado a
     lado, a altura passa a ser a MAIOR das duas colunas, e nao a soma. */
  .adm-wa-corpo > .grade-cartoes-2 {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: start;
  }
  .adm-wa-corpo > .grade-cartoes-2 > div:last-child { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
  .adm-wa-corpo > .grade-cartoes-2 > div:last-child > * { min-width: 0; margin-top: 0; }
}

/* Aperto final da aba Situacao: 153px separavam a tela de caber, e eles estavam
   espalhados em respiro (margem entre fatos, recheio dos cartoes e vao entre
   campos). Nada aqui muda tamanho de letra. */
@media (min-width: 1024px) {
  .adm-wa-fatos p { margin: 0 0 7px; }
  .adm-wa-corpo > .grade-cartoes-2 .form-cartao { padding: 12px 14px; }
  .adm-wa-corpo > .grade-cartoes-2 .form-secao-titulo { margin: 0 0 8px; }
  .adm-wa-corpo > .grade-cartoes-2 .campo { margin-bottom: 8px; }
  .adm-wa-corpo > .grade-cartoes-2 .form-acoes { margin-top: 2px; }
  .adm-wa-corpo > .grade-cartoes-2 { gap: 12px; }
}

/* A coluna das ferramentas nao rola por dentro: ela e quem da a altura da tela,
   e uma coluna de referencia que rola escondendo o endereco da plataforma nao
   ajuda ninguem. Os cartoes ficam mais justos para caber. */
.adm-conf-lado { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tema-admin .adm-conf-lado .form-cartao { padding: 12px 14px; }
.tema-admin .adm-conf-lado .form-secao-titulo { margin: 0 0 6px; }
.tema-admin .adm-conf-lado .bloco-secao { margin-bottom: 0; }
.tema-admin .adm-conf-lado .campo-dica { margin: 0 0 8px; }
.tema-admin .adm-conf-lado .tabela td { padding: 4px 10px; font-size: 12.5px; }
.adm-conf-textos { display: flex; flex-direction: column; min-height: 0; }

/* Ultimos 106px da coluna de ferramentas: recheio dos cartoes, cabecalhos de
   secao e as cinco linhas da tabela de enderecos. Medido depois: cabe. */
@media (min-width: 1024px) {
  .tema-admin .adm-conf-lado .form-cartao { padding: 10px 12px; }
  .tema-admin .adm-conf-lado .bloco-secao-cab { margin-bottom: 5px; }
  .tema-admin .adm-conf-lado .bloco-secao-cab h2 { font-size: .95rem; }
  .tema-admin .adm-conf-lado .tabela td { padding: 3px 9px; font-size: 12px; }
  .tema-admin .adm-conf-lado .campo-dica { font-size: 12px; margin: 0 0 6px; }
  .tema-admin .adm-conf-lado .btn { padding: 6px 12px; font-size: 12.5px; }
  .adm-conf-passos { gap: 8px; }
  .tema-admin .adm-conf-lado .form-acoes { margin-top: 2px; gap: 6px; }
}

/* Os ultimos 42px: o titulo "Primeiros passos do acervo" e o das ferramentas
   diziam a mesma coisa que o cartao logo abaixo ja dizia. O de cima sai, e o
   respiro entre os dois blocos encolhe. */
@media (min-width: 1024px) {
  .adm-conf-lado > .bloco-secao:first-child > .bloco-secao-cab { display: none; }
  .adm-conf-lado { gap: 8px; }
  .tema-admin .adm-conf-lado .tabela td { padding: 2px 9px; }
}
/* Seis pixels: o respiro do ultimo cartao da coluna. */
@media (min-width: 1024px) { .adm-conf-lado > .bloco-secao:last-child .tabela-caixa { margin-bottom: 0; } .adm-conf-lado > .bloco-secao { margin-bottom: 0; } }

/* A tabela de enderecos vive numa coluna estreita: o endereco quebra em vez de
   ser cortado pela borda. Endereco cortado pela metade nao serve para copiar
   nem para conferir, que sao as duas coisas para as quais ele esta ali. */
.adm-conf-lado .tabela td { overflow-wrap: anywhere; word-break: normal; white-space: normal; }
.adm-conf-lado .tabela td:first-child { white-space: nowrap; color: var(--mg-tinta-2); }

/* A ficha do evento e o filho que CEDE altura dentro da pagina fixa.
   Ela deixou de ser `.adm-rolavel` quando o corpo rolavel virou um filho dela,
   e com isso passou a casar com `.adm-pagina-fixa > :not(.adm-rolavel)`
   (0,2,0), que fixa `flex: 0 0 auto`: a ficha nascia com a altura do conteudo e,
   numa janela de 720px, os botoes de salvar caiam POR BAIXO do rodape da
   gestao. Foram duas acusacoes de "clique-roubado" em 1280x720, e nenhuma em
   1366x768, que e a altura em que a conta ainda fechava. */
.adm-pagina-fixa > form.adm-ficha-evento { flex: 1 1 auto; min-height: 0; }

/* Etiqueta de estado com frase inteira: "Instancia ainda nao criada na
   Evolution" nao e um rotulo de uma palavra, e a reticencia da `.badge` cortava
   justamente a informacao. Quando a etiqueta carrega FRASE, ela quebra. */
.adm-wa-fatos .badge { white-space: normal; overflow: visible; text-overflow: clip; }

/* Tabela de enderecos das Configuracoes: a URL quebra dentro da celula em vez
   de empurrar a tabela para o lado. Sao enderecos para LER e copiar, e o que
   sai da borda nao se copia. */
.adm-enderecos table.tabela { min-width: 0; }
.adm-enderecos td { overflow-wrap: anywhere; word-break: normal; }
.adm-enderecos td:first-child { white-space: normal; }

/* ==========================================================================
   REVISAO DE 09/09/2026: a gestao no CELULAR
   ==========================================================================
   O contrato `.adm-pagina-fixa` resolveu o computador (as 23 telas fecham sem
   rolagem em 1366x768) e nunca tinha sido medido no telefone, porque abaixo de
   1024px toda regra de altura do contrato cai para `height:auto` de proposito.
   Medido em 09/09/2026 num visor de 390x844:

     /admin/auditoria .................. 39,8 telas de rolagem
     /admin/materiais .................. 14,3
     /admin/evento/<id>/inscricoes ......  7,9
     /admin/prescritores ...............  7,1
     /admin/categorias .................  6,7
     /admin/videoaulas .................  5,3

   Duas causas somadas: (1) o ENFEITE antes do primeiro dado, que chegava a
   780px, ou seja duas telas cheias de indicadores, texto de apoio e filtros
   empilhados; (2) a lista inteira em modo cartao, sem paginacao, com 129
   registros de auditoria a 270px cada.
   Este bloco ataca a causa (1). A (2) e paginacao, e mora no PHP.
   -------------------------------------------------------------------------- */

/* --- Filtro dobrado (o botao so existe no telefone) --- */
.filtro-dobra { display: none; }

@media (max-width: 899px) {
  .filtro-dobra {
    display: flex; align-items: center; gap: 8px;
    width: 100%; flex: 0 0 auto;
    min-height: 48px; padding: 10px 14px; margin: 0 0 12px;
    background: var(--mg-branco); border: 1px solid var(--mg-borda);
    border-radius: var(--r-md); box-shadow: var(--sombra-sm);
    font-size: 14px; color: var(--mg-tinta-2); cursor: pointer;
  }
  .filtro-dobra .ic { width: 18px; height: 18px; flex: 0 0 auto; color: var(--mg-verde-800); }
  .filtro-dobra span { flex: 0 0 auto; }
  .filtro-dobra strong {
    min-width: 0; color: var(--mg-verde-800); font-weight: 700;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* A seta gira para indicar aberto e fechado, sem depender de script. */
  .filtro-dobra::after {
    content: ''; margin-left: auto; flex: 0 0 auto;
    width: 9px; height: 9px;
    border-right: 2px solid var(--mg-tinta-2); border-bottom: 2px solid var(--mg-tinta-2);
    transform: rotate(45deg) translate(-2px, -2px);
  }
  .filtro-gatilho:checked ~ .filtro-dobra::after { transform: rotate(225deg) translate(-3px, -3px); }
  .filtro-gatilho:checked ~ .filtro-dobra { background: var(--mg-creme); border-color: var(--mg-sage-suave); }
  .filtro-gatilho:focus-visible ~ .filtro-dobra { outline: 2px solid var(--mg-verde-700); outline-offset: 2px; }

  .filtro-gatilho ~ .filtro-barra { display: none; }
  .filtro-gatilho:checked ~ .filtro-barra { display: flex; }
  /* Aberta no telefone ela e uma continuacao do botao, e nao um segundo cartao
     solto: encosta no botao e perde a borda de cima. */
  .filtro-gatilho:checked ~ .filtro-dobra { border-radius: var(--r-md) var(--r-md) 0 0; margin-bottom: 0; }
  .filtro-gatilho:checked ~ .filtro-barra { border-top: 0; border-radius: 0 0 var(--r-md) var(--r-md); }
}

/* --- Indicadores em duas colunas no telefone ---
   Quatro chips empilhados gastavam 4x48px mais os vaos, 216px, antes de
   qualquer dado. Em duas colunas isso cai para 104px e o numero continua
   legivel, porque o que encolhe e o vao, nao a fonte. */
@media (max-width: 899px) {
  .faixa-kpi, .kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .faixa-kpi > .kpi-chip, .kpis > .kpi { min-width: 0; margin: 0; }
  /* O valor do chip nasce `white-space: nowrap`, o que e certo para um numero e
     ERRADO para uma data: em /admin/perfil o "05/09/2026 01h37" tem 154px e a
     coluna da grade tem 144px, entao ele empurrava a pagina 33px para o lado num
     visor de 360. Numero nao tem onde quebrar e continua numa linha so; o que
     tem espaco, quebra no espaco. */
  .faixa-kpi > .kpi-chip strong, .kpis > .kpi strong {
    /* `flex: 0 1 auto` e a metade que faltava: com `0 0 auto` (o padrao da
       regra base) o valor NAO ENCOLHE, entao deixar quebrar nao adianta nada,
       ele continua ocupando a largura de conteudo maximo e empurrando a pagina.
       Foi por isso que a primeira tentativa deste conserto nao tirou um pixel
       dos 33 que sobravam. */
    flex: 0 1 auto;
    /* Revisao de 11/09/2026: `anywhere` quebrava "23" em "2 / 3" e
       "Administrador" em tres pedacos. Quebra so no espaco (a data de
       /admin/perfil continua cabendo em duas linhas); numero fica inteiro. */
    white-space: normal; overflow-wrap: normal; word-break: normal; min-width: 0;
  }
  .faixa-kpi > .kpi-chip span, .kpis > .kpi span { overflow-wrap: break-word; }
}
@media (max-width: 419px) {
  /* Rotulo longo em coluna estreita: o chip cresce em altura em vez de cortar. */
  .kpi-chip span, .kpi span { font-size: 11.5px; line-height: 1.25; }
}

/* --- Piso de tamanho de letra (09/09/2026) ---
   A varredura achou 1.062 trechos abaixo de 12px, e os menores eram estruturais:
   o titulo de grupo da barra lateral a 9,5px, a migalha a 10px e o selo da area
   a 9,5px. Abaixo de 11px letra versalete com espacamento nao se le em tela de
   telefone; abaixo de 10px nao se le em tela nenhuma. O piso vale para TODO
   tamanho de tela, porque o problema nunca foi o visor. */
.tema-admin .adm-grupo-titulo { font-size: 11px; }
.tema-admin .adm-migalha { font-size: 11px; }
.tema-admin .adm-selo { font-size: 11px; }
.tema-admin .adm-conta-nivel { font-size: 11px; }
/* O piso repete o `.tema-admin` de proposito: as regras originais moram em
   `.tema-admin .adm-migalha` (0,2,0), e um seletor de uma classe so (0,1,0)
   perde a disputa por especificidade mesmo vindo depois no arquivo. Foi
   exatamente isso que fez a primeira tentativa deste piso nao mudar um pixel:
   o numero na varredura continuou 1.062. */

/* --- Paginacao (09/09/2026) ---
   Fica FORA da caixa rolavel, colada no rodape da lista: dentro dela, no
   computador, a navegacao rolaria junto com as linhas e sumiria da vista
   justamente quando a pessoa chega ao fim da pagina, que e quando ela precisa. */
.paginacao {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px 16px;
  flex: 0 0 auto;
  margin: 12px 0 0; padding: 10px 4px 0;
  border-top: 1px solid var(--mg-borda);
}
.paginacao-conta { font-size: 13px; color: var(--mg-tinta-2); font-variant-numeric: tabular-nums; }
.paginacao-botoes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.paginacao-num, .paginacao-passo {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 10px;
  border: 1px solid var(--mg-borda); border-radius: var(--r-sm);
  background: var(--mg-branco); color: var(--mg-tinta-2);
  font-size: 14px; font-variant-numeric: tabular-nums; text-decoration: none;
  transition: border-color var(--transicao), background var(--transicao);
}
a.paginacao-num:hover, a.paginacao-passo:hover { border-color: var(--mg-verde-500); background: var(--mg-creme); }
a.paginacao-num:focus-visible, a.paginacao-passo:focus-visible { outline: 2px solid var(--mg-verde-800); outline-offset: 1px; }
.paginacao-num.atual {
  background: var(--mg-verde-800); border-color: var(--mg-verde-800);
  color: var(--mg-creme); font-weight: 700;
}
.paginacao-passo .ic { width: 18px; height: 18px; }
/* So existe o simbolo `seta`, virado para a direita: o passo para tras e o
   mesmo desenho girado. Girar e mais honesto que desenhar um segundo icone
   quase igual e deixar os dois divergirem na proxima troca de traco. */
.paginacao-antes .ic { transform: rotate(180deg); }
.paginacao-passo.desativado { opacity: .38; cursor: default; }
.paginacao-salto { padding: 0 2px; color: var(--mg-tinta-3, var(--mg-tinta-2)); }

@media (max-width: 899px) {
  /* No telefone o que importa e o passo, nao o numero exato: a conta sobe para
     a linha de cima e os botoes ficam largos o bastante para o polegar. */
  .paginacao { justify-content: center; padding-top: 12px; }
  .paginacao-conta { flex: 1 0 100%; text-align: center; }
}

html[data-tema="escuro"] .paginacao-num,
html[data-tema="escuro"] .paginacao-passo { background: #1C2A24; border-color: var(--mg-borda); }

/* --- Cartao COMPACTO no telefone (09/09/2026) ---
   O modo cartao punha cada coluna numa linha propria: com sete colunas, um
   material virava um cartao de 340px e vinte materiais davam 6.800px, quase dez
   telas. Mas nem toda coluna e um paragrafo: "Lamina de linha", "2,8 MB",
   "Publicado" e "2 downloads" sao FATOS CURTOS, e fato curto cabe na mesma
   linha do fato curto seguinte.

   A marcacao `td-meta` (includes/admin_linhas.php) diz quais sao. Em modo
   cartao elas viram caixas em linha, fluem e quebram sozinhas; o titulo e as
   acoes continuam em bloco, porque sao o que se le e o que se toca. O cartao
   cai de sete faixas para tres, sem esconder nenhum dado. */
@media (max-width: 759px) {
  .tabela-cartoes td.td-meta {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    width: auto;
    padding: 3px 0;
    margin: 0 9px 0 0;
    border-bottom: 0;
    text-align: left;
    justify-content: flex-start;
    font-size: 13.5px;
  }
  /* O ROTULO SAI, o ponto entra. "CATEGORIA Laminas de linha" e "TAMANHO 2,8
     MB" somavam 416px numa faixa de 358px e quebravam uma por linha, ou seja, o
     cartao continuava com uma faixa por coluna. Sem o rotulo, os quatro fatos
     cabem em duas linhas: o valor ja diz o que e ("Laminas de linha",
     "Publicado"). Onde o valor NAO diz (um "2" solto), a celula e `td-meta-num`
     e o rotulo volta DEPOIS do numero, em minuscula: "2 downloads". */
  .tabela-cartoes td.td-meta[data-rotulo]::before { content: ''; margin: 0; }
  /* SEM ponto separador, so espaco (09/09/2026).
     A primeira versao punha um `\B7` antes de cada fato a partir do segundo, e
     ficava bom enquanto os fatos cabiam na mesma linha. Quando um deles passava
     para a linha de baixo, o ponto ia junto e a linha comecava com um "  Nunca"
     orfao, que parece defeito porque e. CSS nao tem como saber onde a linha
     quebrou, entao o separador certo aqui e o espaco, que quebra sem deixar
     sujeira. */
  .tabela-cartoes td.td-meta { margin-right: 18px; }
  /* Terceira forma: o rotulo FICA, mas em linha e em caixa normal. Serve para
     data e para "Nunca", que sozinhos nao dizem de que campo sao. Sem isto o
     cartao do prescritor terminava com um "Nunca" solto, que e pior do que a
     faixa que ele veio substituir. */
  .tabela-cartoes td.td-meta-rot[data-rotulo]::before {
    content: attr(data-rotulo) ': ';
    text-transform: none; letter-spacing: 0;
    font-size: 13.5px; color: var(--mg-tinta-2); margin: 0;
  }
  .tabela-cartoes td.td-meta-num::after {
    content: ' ' attr(data-rotulo);
    text-transform: lowercase; font-size: 13px; color: var(--mg-tinta-2);
  }
  /* Uma unica borda embaixo do bloco de fatos, e nao uma por fato: a divisao
     que interessa e entre o titulo, os fatos e as acoes. */
  .tabela-cartoes td.td-meta + td:not(.td-meta) { border-top: 1px solid var(--mg-creme); margin-top: 4px; padding-top: 8px; }
  /* Quebra de linha dentro do fato curto (o "5 paginas" embaixo de "2,8 MB")
     desalinha a fila: no cartao ela vira continuacao na mesma linha. */
  .tabela-cartoes td.td-meta br { display: none; }
  .tabela-cartoes td.td-meta small { font-size: 12.5px; color: var(--mg-tinta-2); }
  .tabela-cartoes td.td-meta small::before { content: ', '; }
}

/* --- Barra de acoes da listagem, no telefone (09/09/2026) ---
   Em /admin/prescritores os tres botoes de exportacao (PDF, Imprimir, CSV) sao
   empurrados para a direita por `margin-left: auto`, o que no computador alinha
   bonito e no telefone produz uma escada: "Buscar" numa linha, "Baixar PDF" e
   "Imprimir" na seguinte, "Exportar CSV" sozinho na terceira, cada uma
   comecando num ponto diferente. Sao 200px de botao desalinhado antes do
   primeiro prescritor.
   No telefone eles voltam a comecar na margem esquerda e dividem a largura: sem
   escada, e o alvo de toque cresce em vez de encolher. */
@media (max-width: 759px) {
  /* O grupo do PDF ja e um `<div class="adm-pdf-botoes">` com dois botoes
     dentro, entao dividir os FILHOS DIRETOS da barra em 46% dava um bloco alto
     com PDF e Imprimir empilhados de um lado e o CSV esticado do outro. O que
     divide a largura sao os BOTOES, venham eles de um grupo ou soltos: a barra
     e o grupo viram a mesma grade. */
  .adm-filtros-acoes { margin-left: 0; width: 100%; gap: 8px; align-items: stretch; }
  .adm-filtros-acoes, .adm-filtros-acoes .adm-pdf-botoes {
    display: flex; flex-wrap: wrap; gap: 8px;
  }
  .adm-filtros-acoes .adm-pdf-botoes { flex: 1 1 100%; }
  .adm-filtros-acoes .btn { flex: 1 1 46%; width: auto; justify-content: center; }
  /* A busca ocupa a linha inteira: campo de 170px com um botao ao lado nao cabe. */
  .adm-linha-topo > form { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
  .adm-linha-topo > form input[type="search"] { flex: 1 1 100%; min-width: 0; }
  .adm-linha-topo > form .btn { flex: 1 1 auto; justify-content: center; }
}

/* --- Migalha no telefone: some o topo, fica onde a pessoa esta (09/09/2026) ---
   A migalha e uma linha so com reticencia no fim, e num visor de 390px a
   reticencia cortava o ultimo nivel, que e o unico que a pessoa nao sabe de cor.
   No telefone os niveis de cima saem e fica o atual, que e o que informa. O
   caminho de volta continua existindo pelo menu e pela seta do cabecalho. */
/* O corte e em 900px, e nao em 759px, por causa do ALVO DE TOQUE.
   O nivel "Gestao" e um link de 46x14px. No computador isso e um alvo de mouse
   e esta certo; num tablet de 768px vira um alvo de dedo de 14px de altura, e
   reprova o piso de 48px do portao. Aumentar o link para 48px inflaria a faixa
   do cabecalho em toda tela; entao, onde se toca, o nivel simplesmente sai. O
   caminho de volta ao painel nao se perde: e o mesmo menu do botao de tres
   riscos, que naquela largura ja e a navegacao principal. */
@media (max-width: 900px) {
  /* Desde 10/09/2026 a migalha para no GRUPO e o titulo e so o h1; no
     telefone ela some inteira (revisao de 11/09: a regra antiga escondia os
     niveis "que nao eram o atual" e o atual nao existe mais). */
  .tema-admin .adm-migalha { display: none; }
}

/* --- PISO DE LEGIBILIDADE: nada abaixo de 11px (09/09/2026) ---
   A varredura de 09/09/2026 achou dois pontos abaixo do piso, e os dois eram
   informacao de verdade, nao enfeite:

   - o `<small>` da celula da tabela, com 10,8px, que e onde moram o e-mail e o
     telefone do prescritor. O tamanho nao estava escrito em lugar nenhum: e o
     0,8 que o navegador aplica ao `small`, sobre uma celula que ja tinha sido
     reduzida para 13,5px. Tamanho herdado nao aparece em busca por "font-size",
     e foi por isso que passou tres rodadas sem ninguem ver;
   - o cabecalho `th` da tabela e o titulo de grupo do painel, a 10,5px.

   11px e o piso da casa para VERSALETE com espacamento, que e o pior caso de
   leitura em tela. Texto corrido continua com o tamanho que ja tinha. */
.tema-admin .tabela td small,
.tema-admin .tabela th,
.tema-admin .adm-bloco-cab,
.tema-admin .adm-cat-grupo-titulo,
.tabela-cartoes td[data-rotulo]::before { font-size: 11px; }

/* --- Configuracoes: a coluna de textos preenche a altura (09/09/2026) ---
   Medido em 1366x768 com a base real: a aba "Textos do site" tem tres campos e,
   em tres colunas, eles fecham numa linha so. O cartao terminava a 360px do topo
   e sobravam 194px de nada embaixo, 29% da area util. Tela de trabalho com um
   terco vazio parece inacabada, e o dono cobra isso tela a tela.

   A saida NAO e esticar o cartao com padding: e dar o espaco a quem usa. Os dois
   campos de area sao o titulo e o paragrafo da pagina inicial, mais o recado aos
   prescritores, e quem escreve isso quer ver o texto inteiro. Eles crescem e
   dividem a sobra; nada muda para os campos de uma linha.

   A regra vale so onde ha altura sobrando (>=1024px): abaixo disso o contrato
   `.adm-pagina-fixa` ja cai para `height:auto` e esticar viraria rolagem. */
@media (min-width: 1024px) {
  .tema-admin .adm-conf-textos .form-cartao { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
  .tema-admin .adm-conf-textos .adm-conf-grade { flex: 1 1 auto; min-height: 0; align-content: start; }
  .tema-admin .adm-conf-textos .adm-conf-grade > .campo:has(textarea) {
    display: flex; flex-direction: column; min-height: 0;
  }
  .tema-admin .adm-conf-textos .adm-conf-grade > .campo:has(textarea) textarea {
    /* Altura FIXA e generosa, e nao `flex: 1`: com `align-content: start` a
       linha da grade se ajusta ao conteudo, entao esticar o textarea dentro de
       um `.campo` que nao foi esticado nao muda um pixel. 150px sao cerca de
       sete linhas de texto, que e o tamanho do paragrafo da pagina inicial e do
       recado aos prescritores. O contorno de arrastar continua ligado para quem
       quiser mais. */
    min-height: 150px; resize: vertical;
  }
}
@media (max-width: 1023px) {
  /* O par obrigatorio de toda regra de altura deste contrato: no telefone a
     altura volta a ser a do conteudo, senao a coluna colapsa a zero. */
  .tema-admin .adm-conf-textos .form-cartao,
  .tema-admin .adm-conf-textos .adm-conf-grade { flex: 0 0 auto; height: auto; }
  .tema-admin .adm-conf-textos .adm-conf-grade > .campo:has(textarea) textarea { flex: 0 0 auto; }
}

/* ===========================================================================
   RODADA DE 10/09/2026 (v1.28.0): melhorias da análise do cliente, Frente A.
   Bloco apensado: nada acima foi reescrito.
   =========================================================================== */

/* A1: a área de conteúdo tinha teto de 1240px. No monitor de 27" (2560px) a
   gestão virava uma coluna no meio da tela com 500px de nada de cada lado.
   O teto sai; o respiro lateral cresce com a largura para a leitura não
   encostar na borda. O `.sidebar-recolhida` do app.css também fixava 1320px. */
.tema-admin .adm-conteudo,
.sidebar-recolhida .adm-conteudo { max-width: none; padding: 16px clamp(20px, 1.6vw, 44px) 20px; }
@media (max-width: 1023px) { .tema-admin .adm-conteudo { padding: 14px 14px 24px; } }

/* A4: o rodapé fixo saiu (adminRodapeHtml devolve vazio). A altura útil da
   página fixa era "viewport menos topbar menos rodapé"; agora é só menos a
   topbar (52px) e o respiro do conteúdo (16 + 20). */
/* SÓ de 1024px para cima: regra de altura sem o par `height: auto` do
   telefone e a armadilha escrita na linha 272 (a casca compacta vencia a
   media query e a página do telefone ganhava altura fixa: em Configurações a
   coluna ficava com 309px, o formulário de 845px vazava e a tabela de
   endereços cobria o botão de salvar; medido pelo auditor em 10/09/2026). */
@media (min-width: 1024px) { .tema-admin .adm-pagina-fixa { height: calc(100dvh - 94px); } }
.adm-rodape { display: none; }
.tema-admin .adm-conteudo { padding-bottom: 20px; }

/* A4: versão e estado da abertura no cabeçalho, como dois chips discretos. */
.adm-topbar-estado { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.adm-topbar-versao {
  font-family: var(--ff-texto); font-size: 11px; letter-spacing: .06em; font-weight: 600;
  color: var(--mg-tinta-2); border: 1px solid var(--mg-borda); border-radius: 999px; padding: 3px 9px; line-height: 1.2;
}
.adm-topbar-situacao {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; line-height: 1.2;
  color: #2A5433; background: var(--mg-ok-bg); border: 1px solid #BDD6B4; border-radius: 999px; padding: 3px 10px 3px 8px;
  min-height: 24px;
}
.adm-topbar-situacao.pre { color: #6E6220; background: var(--mg-aviso-bg); border-color: #DED9A8; }
.adm-topbar-situacao:hover { text-decoration: underline; }
.adm-topbar-situacao .adm-rodape-ponto { width: 7px; height: 7px; flex-basis: 7px; }
@media (max-width: 760px) {
  .adm-topbar-versao { display: none; }
}
@media (max-width: 480px) {
  .adm-topbar-estado { display: none; }
}

/* A4: "Suporte" vive no rodapé da barra lateral, na MESMA linha do nome e
   de Sair (só o ícone, com o nome no balão): a barra com 17 itens precisa
   caber em 768px de altura, e uma linha a mais no rodapé a fazia estourar e
   recolher sozinha. */
.adm-sidebar-suporte {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none;
  color: var(--mg-sage-suave); font-size: 12px; width: 30px; height: 30px; padding: 0; border-radius: 999px;
  border: 1px solid rgba(165, 185, 156, .4); flex: 0 0 auto; position: relative;
}
.adm-sidebar-suporte span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.adm-sidebar-suporte:hover { background: rgba(165, 185, 156, .14); color: #fff; }
.adm-sidebar-suporte .ic { width: 15px; height: 15px; }
.tema-admin .adm-sidebar-rodape { gap: 6px; }
.tema-admin .adm-admin-nome { flex: 1 1 auto; min-width: 0; }
@media (min-width: 1024px) {
  .tema-admin.sidebar-recolhida .adm-sidebar-rodape { flex-direction: column; gap: 6px; }
  .tema-admin.sidebar-recolhida .adm-sidebar-suporte { width: 34px; height: 30px; }
}

/* A5: com a barra recolhida o ícone media 16px (a casca compacta encolhia o
   ícone do menu e a regra valia também recolhido). Recolhido, o ícone É o
   item: 22px de desenho num alvo de 40px (34px em tela de até 800px de
   altura, para os 17 itens caberem sem rolar a página). */
@media (min-width: 1024px) {
  .tema-admin.sidebar-recolhida .adm-grupo .ic { width: 22px; height: 22px; }
  .tema-admin.sidebar-recolhida .adm-grupo a { min-height: 40px; padding-top: 6px; padding-bottom: 6px; }
  .tema-admin.sidebar-recolhida .adm-sidebar-nav { gap: 8px; }
  .tema-admin.sidebar-recolhida .adm-grupo { gap: 1px; }
}
@media (min-width: 1024px) and (max-height: 800px) {
  .tema-admin.sidebar-recolhida .adm-grupo .ic { width: 20px; height: 20px; }
  .tema-admin.sidebar-recolhida .adm-grupo a { min-height: 36px; padding-top: 4px; padding-bottom: 4px; }
  .tema-admin.sidebar-recolhida .adm-sidebar-nav { gap: 4px; }
  /* Revisao de 11/09/2026: recolhida, a barra passava 60px de 768 (o Sair
     terminava em 814). Selo e nome nao cabem recolhidos; suporte e Sair
     ficam lado a lado. */
  .tema-admin.sidebar-recolhida .adm-selo { display: none; }
  .tema-admin.sidebar-recolhida .adm-admin-nome { display: none; }
  .tema-admin.sidebar-recolhida .adm-sidebar-rodape { flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 4px; }
  .tema-admin.sidebar-recolhida .adm-sidebar-rodape form { width: auto; flex: 0 0 auto; }
  /* 18 itens (Comunidade entrou em 11/09) em 768px de altura: 32px por item
     e a barra rola por dentro se ainda faltar, em vez de cortar o Sair. */
  .tema-admin.sidebar-recolhida .adm-grupo a { min-height: 32px; padding-top: 3px; padding-bottom: 3px; }
  .tema-admin.sidebar-recolhida .app-sidebar-topo { padding-top: 6px; padding-bottom: 6px; }
  .tema-admin.sidebar-recolhida .adm-sidebar { overflow-y: auto; scrollbar-width: thin; }
  .tema-admin .adm-grupo a { padding-top: 4px; padding-bottom: 4px; }
  .tema-admin .adm-sidebar-nav { gap: 5px; }
  .tema-admin .adm-selo { margin-bottom: 6px; }
}

/* A12: a migalha para no grupo; no telefone ela some inteira (o h1 basta). */
@media (max-width: 900px) {
  .tema-admin .adm-migalha { display: none; }
}

/* A7: 6px entre o "?" e o dois-pontos (ou o ponto final) do texto ao lado. A
   margem negativa de -9px encostava o glifo na pontuação. */
.tema-admin .ajuda-caixa { margin: -9px 0 -9px -2px; }
.tema-admin .adm-bloco-cab h2 .ajuda-caixa,
.tema-admin .form-secao-titulo .ajuda-caixa,
.tema-admin .adm-titulo-secao .ajuda-caixa,
.tema-admin .bloco-secao-cab h2 .ajuda-caixa { margin-left: -2px; }
/* A7: o balão passa a ser posicionado por JS em `position: fixed` (ver
   plataforma.js, "balão fora do recorte"), porque dentro do modal e da caixa
   rolável ele era recortado. A seta acompanha o botão pela variável. */
.tema-admin .ajuda-bolha.ajuda-fixa { position: fixed; margin: 0; bottom: auto; right: auto; transform: none !important; max-width: min(21rem, calc(100vw - 24px)); }
.tema-admin .ajuda-bolha.ajuda-fixa::after { left: var(--seta-x, 50%); right: auto; margin-left: -6px; }
.tema-admin .ajuda-bolha.ajuda-fixa.ajuda-fixa-abaixo::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--mg-verde-950); }
.tema-admin .ajuda-bolha.ajuda-fixa:not(.ajuda-fixa-abaixo)::after { top: 100%; bottom: auto; border-bottom-color: transparent; border-top-color: var(--mg-verde-950); }

/* A2: `[hidden]` do navegador perde para `.form-acoes { display: flex }`
   (app.css). A barra original do formulário era "escondida" pelo JS do modal
   e continuava desenhada: dois "Cadastrar" e dois "Cancelar" em todo modal. */
.form-acoes[hidden], .form-acoes-largura[hidden], .adm-modal-corpo .form-acoes.adm-acoes-movidas { display: none !important; }

/* A16: o aviso de sucesso (flash) ganha botão de fechar e some sozinho em 6s
   (plataforma.js). O de erro fica até ser fechado. */
.tema-admin .flash { position: relative; padding-right: 44px; transition: opacity .35s ease, transform .35s ease; }
.tema-admin .flash.flash-saindo { opacity: 0; transform: translateY(-4px); }
.tema-admin .flash-fechar {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border: 0; background: none; color: inherit; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; opacity: .7;
}
.tema-admin .flash-fechar:hover { opacity: 1; background: rgba(0, 0, 0, .06); }
.tema-admin .flash-fechar .ic { width: 16px; height: 16px; }
.tema-admin details.flash { padding-right: 14px; }

/* A8: "1 Pendência" deixa de ser texto cinza de 12,5px ao lado do título e
   vira um chip de alerta, com o número em negrito e o convite "Ver o que falta". */
.adm-painel-aviso-resumo {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 700; color: #6E6220; letter-spacing: .02em;
  background: #FFFFFF; border: 1px solid #DED9A8; border-radius: 999px; padding: 3px 11px 3px 8px; line-height: 1.2;
}
.adm-painel-aviso-resumo .ic { width: 15px; height: 15px; color: #6E6220; }
.adm-painel-aviso-resumo strong { font-size: 14px; }
.adm-painel-aviso-abrir { font-size: 12.5px; font-weight: 700; color: var(--mg-verde-800); text-decoration: underline; text-underline-offset: 2px; margin-left: auto; }
.adm-painel-aviso[open] .adm-painel-aviso-abrir { display: none; }
.adm-painel-aviso > summary:hover .adm-painel-aviso-abrir { color: var(--mg-verde-900); }

/* A10: atividade recente em duas partes: o FATO em negrito e o quem/o quê em
   texto normal; a hora vira relativa ("há 2 h") e leva a data exata no title. */
.adm-atividade li { align-items: center; padding: 8px 4px; gap: 11px; }
.adm-atividade .ic { margin-top: 0; width: 18px; height: 18px; }
.adm-atividade-texto a { text-decoration: none; color: inherit; display: block; }
.adm-atividade-texto a:hover .adm-atividade-quem { text-decoration: underline; }
.adm-atividade-texto strong { display: block; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--mg-verde-800); font-weight: 700; line-height: 1.3; }
.adm-atividade-quem { display: block; color: var(--mg-tinta); font-size: 13.5px; line-height: 1.35; overflow-wrap: anywhere; }
.adm-atividade-quando { font-variant-numeric: tabular-nums; min-width: 64px; text-align: right; }
@media (max-width: 480px) {
  /* A hora fica na MESMA linha do fato, à direita, e não numa terceira linha:
     com a terceira linha cada item media 100px e a atividade sozinha dava
     638px em 390px (medido). */
  .adm-atividade li { padding: 6px 2px; gap: 9px; }
  .adm-atividade-quando { min-width: 0; font-size: 11px; }
  .adm-atividade-texto strong { font-size: 11px; }
  .adm-atividade-quem { font-size: 13px; }
}

/* A11: quatro blocos de MESMA altura. As duas colunas viram duas grades de
   duas linhas iguais; a linha da grade externa fecha na altura disponível e
   cada corpo rola por dentro. Diferença de altura entre os quatro: 0. */
@media (min-width: 1024px) {
  .adm-painel-grade { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .adm-painel-col { display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
  .adm-painel-col > .adm-bloco:only-child { grid-row: 1 / -1; }
  .adm-painel-col > .adm-bloco { min-height: 0; }
  .adm-bloco-cresce { flex: initial; }
}
.adm-passo-feito { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mg-verde-700); }
/* A11: no monitor grande os gráficos crescem com o bloco em vez de deixar o
   fundo vazio: barras e rosca lado a lado a partir de 1600px de largura. */
@media (min-width: 1600px) {
  .adm-painel .grafico-cartao svg { max-height: 260px; }
  .adm-painel .adm-bloco-corpo .grafico-rolagem + .grafico-donut { margin-top: 14px; }
  .adm-painel .grafico-donut svg { width: 160px; height: 160px; }
}
@media (min-width: 1024px) and (min-height: 1000px) {
  .adm-atividade li { padding: 10px 4px; }
  .adm-passos li { padding: 9px 2px; }
  .adm-arm-linha { padding: 6px 0; }
}

/* A13: o modal de cadastro media 680px e apertava um formulário de duas
   colunas em 301px cada: "Destaque" virava três linhas de letras, o botão da
   capa saía pela direita e "Nenhum arquivo escolhido" ficava "Nenhu...colhido".
   Agora 980px (ou a largura que houver), corpo com respiro de 18px e as
   colunas com 32px de vão. Em <=1023px continua a folha de baixo. */
@media (min-width: 1024px) {
  .adm-modal { max-width: 980px; max-height: calc(100dvh - 36px); }
  .adm-modal-fundo { padding: 18px 20px; }
  .adm-modal-corpo { padding: 18px 22px 8px; }
  .adm-modal-corpo .form-duas-colunas { gap: 0 32px; }
  .adm-modal-cab { padding: 14px 22px; }
  .adm-modal-acoes { padding-left: 22px; padding-right: 22px; }
}
@media (min-width: 1440px) {
  .adm-modal { max-width: 1080px; }
}
/* Dentro do modal cada campo respira 12px, os títulos de seção 16px. */
.adm-modal-corpo .campo { margin-bottom: 12px; }
.adm-modal-corpo .form-secao-titulo { margin: 16px 0 10px; }
.adm-modal-corpo .adm-form-bloco { padding-bottom: 10px; margin-bottom: 10px; }
/* Marcações nunca quebram palavra: a caixa e o rótulo ficam na mesma linha e
   o rótulo pode ir para a linha de baixo INTEIRO, não letra a letra. */
.adm-modal-corpo .campo-check-alinhado label,
.tema-admin .campo-check-alinhado label { overflow-wrap: normal; word-break: normal; hyphens: manual; }
.adm-modal-corpo .campo-linha-3 { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .9fr); }
/* Campo de arquivo: botão e nome do arquivo numa linha só, o nome com
   reticência no FIM (não no meio) quando não couber. */
.adm-modal-corpo .campo-arquivo,
.tema-admin .campo-arquivo { flex-wrap: nowrap; gap: 10px; min-width: 0; }
.tema-admin .campo-arquivo .arquivo-botao { white-space: nowrap; }
.tema-admin .arquivo-escolhido { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: normal; }
/* O campo da capa vai sozinho numa linha quando divide a linha com a duração
   e a coluna é estreita: 205px não cabem "Escolher arquivo" e o nome. */
@media (max-width: 1279px) {
  .adm-modal-corpo .campo-linha > .campo:has(input[type="file"]) { grid-column: 1 / -1; }
}
/* Prévia da capa dentro do formulário: maior (A22). */
.tema-admin .miniatura-atual { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.tema-admin .miniatura-atual img { width: 160px; max-width: 160px; height: auto; max-height: 226px; border-radius: var(--r-sm); border: 1px solid var(--mg-borda); background: var(--mg-creme); }
.tema-admin .miniatura-atual span { font-size: 13px; }
.tema-admin .miniatura-atual.arquivo-atual img { width: auto; }
@media (max-width: 600px) { .tema-admin .miniatura-atual img { width: 120px; } }

/* A23: a barra fixa de "Salvar alterações" tinha margem negativa de 22px num
   cartão cujo respiro é de 18px (casca compacta): sobrava 4px para fora de
   cada lado, o que criava rolagem HORIZONTAL no formulário e fazia a barra
   parecer deslocada, sobre um branco que não era o do cartão. A margem agora
   é a do cartão, e a barra ganha o mesmo fundo com uma linha fina em cima. */
.adm-form-fixo > form.adm-rolavel .form-acoes-largura { margin: 12px -18px 0; padding: 12px 18px 14px; border-top: 1px solid var(--mg-borda); }
@media (min-width: 1024px) {
  .adm-form-fixo > form.adm-rolavel { overflow-x: hidden; }
}
@media (max-width: 1023px) { .adm-form-fixo > form.adm-rolavel .form-acoes-largura { margin: 12px 0 0; padding: 0; border-top: 0; } }

/* A3: dentro do modal, `.adm-modal-corpo .campo input { min-height: 48px }`
   valia para a CAIXA DE MARCAÇÃO também: o quadradinho de 24px ficava dentro
   de um elemento de 24x48, e o halo de hover e de foco desenhava os 48px,
   desalinhado do quadrado e do rótulo. Alvo de toque continua sendo a linha
   inteira (.campo-check), não a caixa. */
.adm-modal-corpo .campo input[type="checkbox"],
.adm-modal-corpo .campo input[type="radio"],
.tema-admin .campo input[type="checkbox"],
.tema-admin .campo input[type="radio"] { min-height: 0; height: 22px; width: 22px; padding: 0; margin-top: 0; }
.tema-admin .campo-check { min-height: 44px; align-items: center; }
.tema-admin .campo-check label { cursor: pointer; }
/* A20: o anel de foco de campo de texto (`box-shadow` em `:focus`) ficava
   preso na caixa de marcação DEPOIS do clique do mouse, e lia como hover que
   não sai. Em caixa de marcação o anel só aparece pelo teclado. */
.tema-admin .campo input[type="checkbox"]:focus:not(:focus-visible),
.tema-admin .adm-marcadores input[type="checkbox"]:focus:not(:focus-visible),
.tema-admin .adm-lote input[type="checkbox"]:focus:not(:focus-visible),
.tema-admin .cel-selecao input[type="checkbox"]:focus:not(:focus-visible) { box-shadow: none; outline: none; }
.tema-admin .adm-marcadores li:hover { background: var(--mg-creme); border-radius: 6px; }
.tema-admin .adm-marcadores li { padding-left: 6px; padding-right: 6px; }

/* A17: tabela de videoaulas com sete colunas e capa ao lado do título. */
.tema-admin .td-com-capa { display: flex; align-items: center; gap: 12px; min-width: 260px; }
.tema-admin .td-capa { flex: 0 0 auto; width: 72px; height: 40px; border-radius: 6px; overflow: hidden; background: var(--mg-creme); border: 1px solid var(--mg-borda); }
.tema-admin .td-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tema-admin .td-titulo-textos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tema-admin .td-titulo-textos strong { font-size: 13.5px; line-height: 1.3; }
.tema-admin .td-titulo-textos small { color: var(--mg-tinta-2); font-size: 12px; }
.tema-admin .td-titulo-textos .badge { align-self: flex-start; margin-top: 2px; }
.tema-admin .td-sep { color: var(--mg-sage); padding: 0 1px; }
.tema-admin .td-linha-1 { white-space: nowrap; }
.tema-admin .td-linha-1 small { color: var(--mg-tinta-2); }
.tema-admin .td-consumo { min-width: 150px; }
.tema-admin .td-consumo-num { display: block; white-space: nowrap; }
.tema-admin .td-consumo-num strong { font-size: 15px; color: var(--mg-verde-900); }
.tema-admin .td-consumo small { display: block; color: var(--mg-tinta-2); font-size: 11.5px; line-height: 1.3; }
.tema-admin .tabela td[data-rotulo="Vídeo"] { min-width: 170px; }
.tema-admin .tabela td[data-rotulo="Vídeo"] small { font-size: 11.5px; }
/* Modo cartão (<=900px, o MESMO corte do app.css:1066): entre 760 e 900px a
   capa explodia para a largura do cartão (756x1383 em 834x1194), porque a
   regra parava em 759px enquanto o cartão começa em 900. */
@media (max-width: 900px) {
  /* No cartão o rótulo ("Videoaula") não é impresso: a capa e o título já
     dizem o que a linha é. A capa vai à esquerda do título, como no desktop. */
  .tema-admin .tabela-cartoes td.td-com-capa { display: flex; align-items: flex-start; min-width: 0; gap: 12px; }
  .tema-admin .tabela-cartoes td.td-com-capa::before { display: none; }
  .tema-admin .td-capa { width: 84px; height: 47px; }
}

/* A46 (e a coluna Categoria da tabela de videoaulas): `overflow-wrap:
   anywhere` em toda célula partia palavra no meio ("Endocrinolog / ia") e
   deixava letra isolada na auditoria. Em célula de tabela a quebra é por
   PALAVRA; o `anywhere` fica só onde há endereço, hash ou código sem espaço. */
.tema-admin .adm-conteudo td { overflow-wrap: break-word; }
.tema-admin .adm-conteudo td code,
.tema-admin .adm-conteudo td .celula-detalhe,
.tema-admin .adm-conteudo td a[href^="http"] { overflow-wrap: anywhere; }
.tema-admin .tabela td[data-rotulo="Categoria"] { min-width: 150px; }

/* A24, A25: categorias legíveis e os cinco grupos com o mesmo desenho.
   A tela tinha sido apertada para caber sem rolar em 1366x768 (item de 30px,
   nome de 13px, botão de 26px), e o cliente leu isso como "cada opção muito
   pequena". A área de grupos já rola por dentro: o item volta a 40px, o nome
   a 14px e os botões a 32px, e cada grupo vira um cartão de mesma largura,
   com altura igualada por linha da grade (align-items: stretch). */
.tema-admin .adm-cat-grupo {
  background: var(--mg-branco); border: 1px solid var(--mg-borda); border-radius: var(--r-md);
  box-shadow: var(--sombra-sm); padding: 0 0 6px; min-width: 0; display: flex; flex-direction: column;
}
.tema-admin .adm-cat-grupo-titulo {
  margin: 0 0 4px; padding: 10px 14px; background: var(--mg-creme); border-bottom: 1px solid var(--mg-borda);
  border-radius: var(--r-md) var(--r-md) 0 0; font-size: 11px; color: var(--mg-verde-900);
}
.tema-admin .adm-cat-grupo-titulo span:last-child { font-weight: 600; color: var(--mg-tinta-2); text-transform: none; letter-spacing: 0; font-size: 12px; }
.tema-admin .adm-cat-vazio { padding: 12px 14px; }
.tema-admin .adm-cat-grupos { align-items: stretch; gap: 14px 16px; }
.tema-admin .adm-cat-item { gap: 8px; padding: 3px 10px; min-height: 40px; }
.tema-admin .adm-cat-alca { width: 32px; height: 32px; }
.tema-admin .adm-cat-alca .ic { width: 18px; height: 18px; }
.tema-admin .adm-cat-nome { font-size: 14px; padding: 5px 8px; overflow-wrap: normal; line-height: 1.3; }
.tema-admin .adm-cat-miolo { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.tema-admin .adm-cat-miolo .badge { flex: 0 0 auto; max-width: none; overflow: visible; text-overflow: clip; white-space: nowrap; margin-left: 8px; }
.tema-admin .adm-cat-miolo .adm-cat-edicao { flex: 1 1 100%; }
.tema-admin .adm-cat-conta { min-width: 26px; height: 22px; padding: 0 7px; font-size: 11.5px; }
.tema-admin .adm-cat-grupos .btn-icone { width: 32px; height: 32px; }
.tema-admin .adm-cat-grupos .btn-icone .ic { width: 16px; height: 16px; }
.tema-admin .adm-cat-acoes { gap: 2px; }
@media (min-width: 1600px) {
  .tema-admin .adm-cat-item { min-height: 44px; }
  .tema-admin .adm-cat-nome { font-size: 14.5px; }
}

/* A27: `.tabela-cartoes td:empty { display: none }` (app.css) valia em TODA
   largura, e não só no modo cartão: no computador a célula vazia (registro
   não informado) sumia e as colunas seguintes andavam uma casa para a
   esquerda; a linha terminava antes da borda direita, e o hover ia até onde a
   linha ia. A célula vazia volta a existir no desktop, com um traço curto. */
@media (min-width: 760px) {
  .tema-admin .tabela-cartoes td:empty { display: table-cell; }
}
.tema-admin .tabela td:empty::after { content: "-"; color: var(--mg-sage); }
.tema-admin .tabela tbody tr:hover td { background: var(--mg-creme); }
.tema-admin .tabela tbody tr:hover td.acoes { background: var(--mg-creme); }

/* A33: vistas de Eventos (todos / transmissões ao vivo), no desenho das abas
   de Relatórios. */
.adm-ev-vistas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; border-bottom: 1px solid var(--mg-borda); margin: 0 0 4px; }
.adm-ev-vistas a { text-decoration: none; padding: 8px 14px; font-size: 13.5px; font-weight: 600; color: var(--mg-tinta-2); border-bottom: 2px solid transparent; margin-bottom: -1px; min-height: 40px; display: inline-flex; align-items: center; gap: 7px; }
.adm-ev-vistas a .ic { width: 16px; height: 16px; }
.adm-ev-vistas a:hover { color: var(--mg-verde-800); }
.adm-ev-vistas a.ativo { color: var(--mg-verde-900); border-bottom-color: var(--mg-verde-800); }
.adm-pagina-fixa > .adm-ev-vistas { flex: 0 0 auto; }

/* A33: o cabeçalho da sala (três links e o título do evento na mesma linha)
   quebrava de qualquer jeito abaixo de 900px. Os links ficam numa linha e o
   título do evento vai para a linha de baixo, inteiro. */
.adm-tx > .voltar-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.adm-tx > .voltar-linha .voltar-linha-alvo { flex: 1 1 100%; margin-top: 2px; font-size: 15px; }
.adm-tx > .voltar-linha .voltar-linha-alvo::before { content: none; }

/* A37, A38: situação do canal de WhatsApp em quatro cartões de leitura
   rápida (um dado grande, uma lista curta), no lugar dos treze parágrafos. */
.adm-wa-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-bottom: 14px; }
.adm-wa-cartao { background: var(--mg-branco); border: 1px solid var(--mg-borda); border-left: 3px solid var(--mg-sage); border-radius: var(--r-md); box-shadow: var(--sombra-sm); padding: 12px 14px 10px; min-width: 0; }
.adm-wa-cartao.adm-wa-ok { border-left-color: var(--mg-verde-700); }
.adm-wa-cartao.adm-wa-atencao { border-left-color: #DED9A8; }
.adm-wa-cartao-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.adm-wa-cartao-cab .ic { width: 17px; height: 17px; color: var(--mg-verde-800); flex: 0 0 auto; }
.tema-admin .adm-wa-cartao-cab h2 { font-size: .95rem; margin: 0; display: flex; align-items: center; min-width: 0; }
.adm-wa-valor { margin: 0 0 6px; font-size: 1.45rem; font-weight: 700; color: var(--mg-verde-900); line-height: 1.15; }
.adm-wa-valor small { font-size: 12.5px; font-weight: 600; color: var(--mg-tinta-2); }
.adm-wa-lista { list-style: none; margin: 0; padding: 0; }
.adm-wa-lista li { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 5px 0; border-top: 1px solid var(--mg-creme); font-size: 13px; }
.adm-wa-lista li span { color: var(--mg-tinta-2); flex: 0 1 auto; }
.adm-wa-lista li strong { text-align: right; min-width: 0; overflow-wrap: anywhere; font-weight: 600; color: var(--mg-tinta); }
.adm-wa-diagnostico { margin-bottom: 14px; }
.adm-wa-diagnostico > summary { cursor: pointer; font-weight: 700; color: var(--mg-tinta-2); font-size: 13px; }
.adm-wa-diagnostico[open] > summary { margin-bottom: 10px; }
.adm-wa-diagnostico .adm-wa-fatos p { font-size: 12.5px; }

/* A41: os campos de cada aba de Configurações saíam em duas ou três colunas,
   com área de texto de 60px: "lado a lado e compactados". Campo de texto de
   site quer largura: uma coluna, área de texto de 110px e 12px entre campos. */
.tema-admin .adm-conf .adm-conf-grade { grid-template-columns: minmax(0, 1fr); gap: 0; }
.tema-admin .adm-conf .campo { margin-bottom: 12px; }
.tema-admin .adm-conf .campo textarea { min-height: 110px; }
.tema-admin .adm-conf .campo input { max-width: 720px; }
@media (min-width: 1500px) {
  .adm-conf-colunas { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}
/* A42: endereços com botão de copiar. */
.adm-endereco { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.adm-endereco a { overflow-wrap: anywhere; }
.tema-admin .btn-icone-mini { width: 28px; height: 28px; flex: 0 0 auto; }
.tema-admin .btn-icone-mini .ic { width: 14px; height: 14px; }
/* O `.so-leitor` (texto só de leitor de tela) da contagem é absoluto; com a
   lista de categorias rolando por dentro, os que ficam abaixo do corte
   escapavam do recorte e esticavam a PÁGINA em 200px (ver a armadilha
   "absoluto escapa do recorte da caixa rolável"). A caixa vira o referencial. */
.tema-admin .adm-cat-grupos { position: relative; }
.adm-wa-lista li { flex-wrap: wrap; }
.adm-wa-lista li span { flex: 0 0 auto; white-space: nowrap; }
.adm-wa-lista li strong { flex: 1 1 auto; }
/* A41, segunda parte: a regra de 09/09 dava ao textarea 150px dentro de um
   `.campo` cuja linha da grade media 64px (align-content: start): o texto
   saía por cima do campo seguinte ("Links da página" desenhado sobre "Frase
   da página"). Em coluna única a linha da grade é a altura do campo, e o
   campo é a altura do textarea: nada mais precisa de altura fixa. */
@media (min-width: 1024px) {
  .tema-admin .adm-conf-textos .adm-conf-grade { align-content: start; grid-auto-rows: auto; }
  .tema-admin .adm-conf-textos .adm-conf-grade > .campo:has(textarea) { display: block; min-height: 0; }
  .tema-admin .adm-conf-textos .adm-conf-grade > .campo:has(textarea) textarea { min-height: 110px; height: auto; resize: vertical; }
}
/* A41, terceira parte: a grade era item de flex com altura DEFINIDA (`flex:
   1 1 auto; min-height: 0`) e os campos tinham `min-height: 0`. Em grade com
   altura definida e sem espaço livre, a trilha `auto` fica no tamanho MÍNIMO
   do item, e com `min-height: 0` esse mínimo ignora o conteúdo: o campo ficava
   com 64px e o textarea de 110px vazava por cima do campo seguinte (medido:
   scrollHeight 158 num offsetHeight 64). A grade volta a ter a altura do
   conteúdo e quem rola é o cartão do formulário, que já é `.adm-rolavel`. */
@media (min-width: 1024px) {
  .tema-admin .adm-conf-textos .adm-conf-grade { flex: 0 0 auto; min-height: auto; height: auto; }
  .tema-admin .adm-conf-textos .adm-conf-grade > .campo,
  .tema-admin .adm-conf-textos .adm-conf-grade > .campo:has(textarea) { min-height: auto; }
}
/* A43: a coluna do evento tem largura mínima para título e endereço, e a data
   não quebra em duas linhas. */
.tema-admin .tabela td[data-rotulo="Evento"] { min-width: 250px; }
.tema-admin .tabela td[data-rotulo="Evento"] small { overflow-wrap: anywhere; }
.tema-admin .tabela td.td-data { white-space: nowrap; }
/* A18: na página cheia de duas colunas o campo da capa dividia a linha com a
   duração e o nome do arquivo saía cortado ("Nenhum arqu..."). Abaixo de
   1440px o campo de arquivo toma a linha inteira, como no modal. */
@media (max-width: 1439px) {
  .tema-admin .form-duas-colunas .campo-linha > .campo:has(input[type="file"]) { grid-column: 1 / -1; }
}
/* A13: no modal de duas colunas (980px) a capa e a duração dividem a linha e
   sobram ~200px para "Escolher arquivo" + o nome: o campo de arquivo toma a
   linha inteira em qualquer largura de modal. */
.adm-modal-corpo .campo-linha > .campo:has(input[type="file"]) { grid-column: 1 / -1; }

/* Alvos de toque nas larguras de dedo (auditor de 10/09/2026): o nome da
   categoria (28px), o botão de copiar (28px), o chip de estado do cabeçalho
   (24px) e os `summary` dos blocos técnicos sobem para 44px abaixo de 1024px. */
@media (max-width: 1023px) {
  .tema-admin .adm-cat-nome { min-height: 44px; }
  .tema-admin .btn-icone-mini { width: 44px; height: 44px; }
  .adm-topbar-situacao { min-height: 40px; padding: 6px 12px 6px 10px; }
  .adm-wa-diagnostico > summary { min-height: 44px; display: flex; align-items: center; }
}
/* Modo cartão (<=759px): a linha "Vídeo hospedado 153,8 MB" e o selo da
   mídia não podem ser `nowrap` num cartão de 320px (vazavam 58px do td). */
@media (max-width: 759px) {
  .tema-admin .td-linha-1 { white-space: normal; }
  .tema-admin .tabela td[data-rotulo="Vídeo"],
  .tema-admin .tabela td[data-rotulo="Categoria"],
  .tema-admin .tabela td[data-rotulo="Evento"],
  .tema-admin .td-consumo,
  .tema-admin .td-com-capa { min-width: 0; }
  .tema-admin .td-consumo-num { white-space: normal; }
}
/* Auditoria: um IPv6 tem 39 caracteres sem espaço e, com `break-word`, não
   quebra: passava 10px do cartão em 320px. Endereço de rede é o caso em que
   `anywhere` é o certo (e só ele: a regra A46 tirou o `anywhere` do resto). */
.tema-admin .adm-conteudo td.td-ip { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
/* Sala da gestão: `.live-espera` (absoluto, `inset: 0` no palco) e o `.lv-sr`
   do chat escapavam do recorte da caixa rolável e esticavam a página em 40px
   em 1366x768 (a mesma armadilha do `.so-leitor` das categorias). A caixa que
   rola vira o referencial dos absolutos que vivem dentro dela. */
.adm-tx > .adm-transmissao { position: relative; }

/* Painel no telefone: com a grade 2x2 do computador, os dez itens da
   atividade e os passos já feitos davam 3,1 telas de rolagem em 390px. No
   telefone voltam os seis itens, só os passos pendentes e as três partes do
   armazenamento; a trilha completa e os relatórios estão a um toque. */
@media (max-width: 1023px) {
  .adm-atividade li:nth-child(n+7) { display: none; }
  .adm-passos li.feito { display: none; }
  .adm-arm-linha:nth-of-type(n+4) { display: none; }
}


/* ============================================================================
   Revisão de 11/09/2026 (corretor da gestão): alvos de toque, balão no Escape,
   tabela de videoaulas em 1366, gráfico no telefone, painel com rolagem
   visível, capitalização da hora relativa.
   ============================================================================ */

/* LIST-2: o app.js fecha o balão no Escape e devolve o foco ao botão; o
   :focus-visible do teclado reabria. plataforma.js marca `ajuda-silencio` no
   botão até o próximo gesto real, e aqui a regra do foco fica muda. */
.tema-admin .ajuda-btn.ajuda-silencio:focus-visible + .ajuda-bolha { display: none; }

/* TXT-7: "há 2 h" e "ontem" isolados dentro da atividade recente. */
.tema-admin .adm-atividade-quando::first-letter { text-transform: uppercase; }

/* GEST-3: em 1366x768 com a barra lateral aberta a tabela de videoaulas media
   1112px numa caixa de 1068 e rolava 44px de lado, escondendo o terceiro
   botão de ação. Os mínimos por coluna encolhem um passo até 1440px. */
@media (max-width: 1440px) {
  .tema-admin .td-com-capa { min-width: 220px; }
  .tema-admin .tabela td[data-rotulo="Categoria"] { min-width: 120px; }
  .tema-admin .tabela td[data-rotulo="Vídeo"] { min-width: 150px; }
  .tema-admin .td-consumo { min-width: 130px; }
}

/* GEST-4: em 768px de altura os quatro blocos do painel têm a mesma altura e
   rolam por dentro, mas nada dizia que havia mais conteúdo (a rosca aparecia
   cortada pela base). Barra de rolagem fina sempre desenhada e um degradê no
   pé do bloco enquanto houver o que rolar (plataforma.js marca `tem-rolagem`
   e tira no fim). */
.tema-admin .adm-bloco { position: relative; }
.tema-admin .adm-bloco-corpo { scrollbar-width: thin; scrollbar-color: var(--mg-sage) transparent; }
.tema-admin .adm-bloco.tem-rolagem::after {
  content: ''; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 30px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--mg-branco));
  border-radius: 0 0 var(--r-md) var(--r-md);
}
.tema-admin .adm-bloco.tem-rolagem.rolou-fim::after { display: none; }

/* MOB-3: o gráfico de barras nasce num viewBox de 720px e no telefone
   encolhia até texto de 5px. Dentro de .grafico-rolagem ele mantém os 720px
   e ROLA de lado, como a tabela. */
@media (max-width: 600px) {
  .tema-admin .grafico-rolagem svg { min-width: 720px; }
}

/* GMOB-7 / MOB-10: o modo cartão da tabela vale até 900px, mas o alvo de
   toque dos links de célula parava em 768px; entre 769 e 900 (tablet) o link
   era linha de texto de 21px. */
@media (max-width: 900px) {
  .tema-admin .tabela td a { display: inline-flex; align-items: center; min-height: 44px; }
  .tema-admin .tabela td .btn-icone, .tema-admin .tabela td .btn { display: inline-flex; }
}

/* Alvos de toque de 44px onde o toque é o ponteiro (telefone e tablet):
   GMOB-3/MOB-5 (botão de ajuda 34px), GMOB-5/MOB-6 (alça e botões das
   categorias 32px com 2px entre desativar e excluir), GMOB-6 (rótulo das
   marcações), GMOB-8/MOB-10 (abas, chips, "Ver site", tela cheia da sala),
   GMOB-10 (o rótulo do campo é que precisa dos 44px, não só o invólucro). */
@media (any-pointer: coarse) {
  .tema-admin .ajuda-btn { width: 44px; height: 44px; flex-basis: 44px; }
  .tema-admin .ajuda-caixa { margin: -12px 0 -12px -6px; }
  .tema-admin .adm-marcadores .ajuda-caixa { margin: -10px 0; }
  .tema-admin .adm-cat-alca, .tema-admin .adm-cat-grupos .btn-icone { width: 44px; height: 44px; }
  .tema-admin .adm-cat-alca .ic, .tema-admin .adm-cat-grupos .btn-icone .ic { width: 20px; height: 20px; }
  .tema-admin .adm-cat-acoes { gap: 8px; }
  .tema-admin .adm-cat-item { min-height: 48px; }
  .tema-admin .adm-marcadores label { display: flex; align-items: center; min-height: 44px; }
  .tema-admin .adm-marcadores-grade label { align-items: center; }
  /* 18/09/2026: 44 nao passa no piso de 48px desta casa, e esta regra tem peso
     maior que a do app.css, entao era ela que valia na tela. Achado quando a
     cobertura logada do portao entrou e /admin passou a ser medido. */
  .tema-admin .adm-topbar-site, .tema-admin .adm-topbar-situacao { min-height: 48px; min-width: 48px; }
  .tema-admin .adm-rel-abas a, .tema-admin [role="tab"] { min-height: 44px; display: inline-flex; align-items: center; }
  .tema-admin a.kpi-chip, .tema-admin .kpi-chip { min-height: 44px; }
  .tema-admin .btn-icone.lv-bt-cheia { width: 44px; height: 44px; }
  .tema-admin .adm-painel-aviso .btn, .tema-admin .adm-painel-aviso a.btn-compacto { min-height: 44px; display: inline-flex; align-items: center; }
  .tema-admin .campo-rotulo label, .tema-admin .filtro-rotulo label { display: inline-flex; align-items: center; min-height: 44px; }
}

/* MARC-2: o cabeçalho da gestão mostra o ícone de pessoa, não a inicial. */
.tema-admin .adm-conta-icone { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: var(--mg-creme); color: var(--mg-verde-800); display: inline-flex; align-items: center; justify-content: center; }
.tema-admin .adm-conta-icone .ic { width: 18px; height: 18px; }
/* MOB-8: registros anteriores da linha do tempo, fechados até o clique. */
.crm-linha-mais { margin-top: 10px; }
.crm-linha-mais > summary { list-style: none; display: inline-flex; cursor: pointer; }
.crm-linha-mais > summary::-webkit-details-marker { display: none; }
.crm-linha-mais[open] > summary { margin-bottom: 10px; }
/* GEST-12: subtítulo por assunto dentro da aba de Configurações. */
.tema-admin .adm-conf-assunto { grid-column: 1 / -1; margin: 6px 0 2px; font-size: 12px; }
.tema-admin .adm-conf-assunto:first-child { margin-top: 0; }

/* GEST-6: na página de edição do material (três colunas) a coluna de 150px
   partia "antienvelhecimento"; 175px é o que a palavra pede em 13,5px. */
.tema-admin .adm-form-fixo .adm-marcadores-grade { grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); }

/* GMOB-4 (de novo): a regra `.tema-admin .adm-cat-miolo { flex: 1 1 auto }` do
   bloco A24/A25 vem DEPOIS do bloco de 600px e vencia a ordem do telefone.
   Aqui, no fim da folha, a primeira linha é alça + nome e a segunda, contagem
   e botões, em TODO item, como o README promete. */
@media (max-width: 600px) {
  .tema-admin .adm-cat-miolo { order: 2; flex: 1 1 calc(100% - 56px); }
  .tema-admin .adm-cat-conta { order: 3; margin-left: 0; }
  .tema-admin .adm-cat-acoes { order: 4; margin-left: auto; }
}

/* Fila de e-mail no painel: chip de uma linha, só quando há atraso ou falha. */
.tema-admin .adm-fila-aviso { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.tema-admin .adm-fila-aviso .ic { width: 18px; height: 18px; flex: 0 0 auto; }

/* ============================================================================
   Verificação 02 do cliente, 11/09/2026.
   ============================================================================ */
/* 1. Chips de KPI: ícone e número em cima, rótulo em linha própria embaixo, em
   todos os módulos (faixaIndicadores e os .kpi antigos de CRM, relatórios e
   certificados). O rótulo na mesma linha do número era o que o cliente leu
   como "ícone e numeração na mesma linha que o texto". */
.tema-admin .kpi-chip { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 7px 13px; }
.tema-admin .kpi-chip .ic { width: 18px; height: 18px; }
.tema-admin .kpi-chip strong { font-size: 1.2rem; line-height: 1.1; }
.tema-admin .kpi-chip span { flex: 0 0 100%; font-size: 11.5px; line-height: 1.2; }
.tema-admin .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 14px; }
.tema-admin .kpi { flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 8px 13px; border-radius: var(--r-sm); box-shadow: none; }
.tema-admin .kpi .ic { width: 18px; height: 18px; }
.tema-admin .kpi strong { font-size: 1.2rem; line-height: 1.1; }
.tema-admin .kpi span { flex: 0 0 100%; font-size: 11.5px; line-height: 1.2; }
@media (min-width: 1024px) {
  .tema-admin .faixa-kpi { flex-wrap: nowrap; }
  .tema-admin .faixa-kpi > .kpi-chip { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 1023px) {
  .tema-admin .faixa-kpi, .tema-admin .kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}
/* 3. Hover sem salto: transição em linhas e cartões. */
.tema-admin .tabela tbody tr td, .tema-admin .cartao, .tema-admin .adm-cat-item, .tema-admin .adm-bloco { transition: background var(--transicao), border-color var(--transicao), box-shadow var(--transicao); }
/* 4. Endereços da plataforma: duas colunas no computador, uma linha por
   endereço no telefone, botão de copiar sempre ao lado sem estourar. */
.tema-admin .adm-enderecos table, .tema-admin .adm-enderecos tbody, .tema-admin .adm-enderecos tr, .tema-admin .adm-enderecos td { display: block; width: 100%; }
.tema-admin .adm-enderecos tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
.tema-admin .adm-enderecos tr { border: 1px solid var(--mg-borda); border-radius: var(--r-sm); padding: 8px 12px; background: var(--mg-branco); min-width: 0; }
.tema-admin .adm-enderecos td { border: 0; padding: 0; }
.tema-admin .adm-enderecos td:first-child { font-weight: 600; color: var(--mg-tinta); margin-bottom: 2px; }
.tema-admin .adm-enderecos td.adm-endereco { display: flex; align-items: center; gap: 6px; }
.tema-admin .adm-enderecos td.adm-endereco a { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.tema-admin .adm-enderecos td.adm-endereco .btn-icone { flex: 0 0 auto; }
@media (max-width: 760px) { .tema-admin .adm-enderecos tbody { grid-template-columns: 1fr; } }
/* 6. Relatórios: botões numa linha à direita do cabeçalho; no telefone,
   empilhados na largura toda. */
.tema-admin .adm-rel-acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; }
.tema-admin .adm-rel-acoes .adm-filtros-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
@media (max-width: 600px) {
  .tema-admin .adm-rel-acoes, .tema-admin .adm-rel-acoes .adm-filtros-acoes, .tema-admin .adm-rel-acoes .pdf-botoes { flex-direction: column; align-items: stretch; width: 100%; }
  .tema-admin .adm-rel-acoes .btn { width: 100%; justify-content: center; }
}
/* 7. Logomarca da barra lateral: nunca distorce nem passa da coluna. */
.tema-admin .adm-sidebar-logo img { max-width: 100%; height: auto; }

/* Verificação 02 do cliente (11/09/2026), itens 5 e 6: barra recolhida rolava
   de lado (scrollWidth 215 num aside de 76px) por causa do balão de nome, que
   é absoluto e vaza para a direita, e do botão Sair mais largo que a coluna.
   O aside passa a cortar no eixo X e o balão vira fixed, que escapa do corte. */
@media (min-width: 1024px) {
  .tema-admin.sidebar-recolhida .adm-sidebar { overflow-x: hidden; }
  .tema-admin.sidebar-recolhida .adm-sidebar-rodape form,
  .tema-admin.sidebar-recolhida .adm-sidebar-rodape button,
  .tema-admin.sidebar-recolhida .adm-sidebar-rodape a { max-width: 100%; min-width: 0; box-sizing: border-box; }
  .sidebar-recolhida .adm-grupo a[data-dica]::after { position: fixed; left: 84px; top: auto; transform: translateY(-50%); margin-top: 18px; }
}
/* Hover da tabela: fundo contínuo em toda célula e filho, com transição. */
.tema-admin .tabela tbody td { transition: background-color .16s ease; }
.tema-admin .tabela tbody tr:hover td.td-titulo,
.tema-admin .tabela tbody tr:hover td .td-capa,
.tema-admin .tabela tbody tr:hover td .td-titulo-textos { background: var(--mg-creme); }

/* Revisão de 12/09/2026: formulários com altura natural e ações próximas. */
.tema-admin .form-cartao, .tema-admin .grafico-cartao, .tema-admin .tabela-caixa {
  box-shadow: none; border-radius: 10px;
}
.tema-admin .adm-form-fixo .campo > label:not(.check-linha) {
  min-height: 30px; display: flex; align-items: center;
}
.tema-admin .adm-ficha-corpo { align-content: start; }
@media (min-width: 1024px) {
  .tema-admin .adm-pagina-fixa > form.adm-ficha-evento,
  .tema-admin .adm-form-fixo > form.adm-rolavel { flex: 0 1 auto; min-height: 0; }
  .tema-admin .adm-ficha-evento > .adm-ficha-corpo { flex: 0 1 auto; padding-bottom: 12px; }
  .tema-admin .adm-ficha-evento > .adm-ficha-acoes { border-top-color: var(--mg-borda); }
}
@media (max-width: 1023px) {
  .tema-admin .adm-form-fixo .campo > label:not(.check-linha) { min-height: 44px; }
  .tema-admin .adm-presc .filtros-inline {
    display: flex; flex-wrap: wrap; overflow: visible; gap: 6px;
  }
  .tema-admin .adm-presc .filtros-inline a { flex: 1 0 auto; justify-content: center; min-height: 44px; }
  .tema-admin .adm-conteudo { padding: 14px 14px 24px; }
  .tema-admin .adm-ficha-evento > .adm-ficha-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
  .tema-admin .adm-ficha-evento > .adm-ficha-acoes .btn { flex: 1 1 auto; justify-content: center; }
}

/* Campos condicionais respeitam o estado definido pelo formulário. */
.tema-admin .adm-ficha-evento [hidden] { display: none !important; }
.tema-admin .campo .campo-rotulo > label { margin-bottom: 0; }
.tema-admin .adm-cat-nome { overflow-wrap: anywhere; }
@media (any-pointer: coarse) {
  .tema-admin .adm-form-fixo .campo > label:not(.check-linha) { min-height: 44px; }
  .tema-admin .btn:not([hidden]), .tema-admin .adm-cat-nome { min-height: 44px; }
}
@media (min-width: 1024px) and (any-pointer: coarse) {
  .tema-admin .adm-pagina-fixa { height: calc(100dvh - 97px); }
}

/* Administração: revisão editorial e de densidade, 12/09/2026. */
.tema-admin .adm-topbar-titulo { font-size: 1.125rem; line-height: 1.25; }
.tema-admin .adm-pagina-fixa { gap: 12px; }
.tema-admin .btn, .tema-admin .filtros a, .tema-admin .adm-ev-vistas a { border-radius: 8px; }
.tema-admin .filtro-barra, .tema-admin .filtro-dobra { box-shadow: none; border-radius: 10px; }
.tema-admin .campo label, .tema-admin .filtro-campo label { letter-spacing: .02em; }
.tema-admin .pagina-cab-linha { gap: 10px 16px; margin-bottom: 0; }
.tema-admin .pagina-cab-linha p { font-size: 13.5px; line-height: 1.45; }
.tema-admin .tabela th { text-transform: none; font-size: 12px; letter-spacing: 0; }
.tema-admin .tabela td { vertical-align: middle; }
.tema-admin .vazio-grande { min-height: 0; padding: 24px; align-items: flex-start; text-align: left; }
/* 12/09/2026: com a base indo vazia ao cliente, o cartão compacto deixava 26 a 34% de
 * área morta abaixo dele em 1366x768 (podcasts, eventos, certificados). Ele ocupa a
 * altura que sobra, alinhado ao topo (o texto continua à esquerda); no telefone a
 * página tem altura automática e nada muda. */
.tema-admin .adm-pagina-fixa > .vazio-grande { flex: 1 1 auto; min-height: 0; overflow: auto; }
.tema-admin .vazio-miolo { width: 100%; max-width: 72ch; margin: 0; }
.tema-admin .vazio-acoes { justify-content: flex-start; }
.tema-admin .vazio-ajuda { margin-top: 14px; }
.tema-admin .vazio-ajuda summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; color: var(--mg-verde-800); }
.tema-admin .vazio-ajuda summary::after { content: '+'; margin-left: 10px; }
.tema-admin .vazio-ajuda[open] summary::after { content: '−'; }
.tema-admin .vazio-ajuda .vazio-dicas { margin-top: 8px; }
.tema-admin .adm-rel-abas { gap: 4px; }
.tema-admin .adm-rel-abas a { padding-inline: 12px; }

/* Registro curto, detalhes completos ao abrir. O histórico não é truncado. */
.aud-cabecalho { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 20px; }
.aud-cabecalho > p { margin: 0; color: var(--mg-tinta-2); font-size: 14px; }
.aud-contagens { display: flex; gap: 8px 20px; flex-wrap: wrap; font-size: 13px; color: var(--mg-tinta-2); }
.aud-contagens strong { color: var(--mg-verde-900); font-variant-numeric: tabular-nums; }
.aud-lista { list-style: none; padding: 0; margin: 0; background: var(--mg-branco); border: 1px solid var(--mg-borda); border-radius: 10px; }
.aud-registro { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px 20px; padding: 12px 16px; border-bottom: 1px solid var(--mg-borda); }
.aud-registro:last-child { border-bottom: 0; }
.aud-data { font-size: 12px; line-height: 1.5; color: var(--mg-tinta-2); font-variant-numeric: tabular-nums; padding-top: 2px; }
.tema-admin .aud-conteudo h2 { margin: 0 0 4px; font: 600 14px/1.4 var(--ff-texto); color: var(--mg-verde-900); }
.aud-contexto { display: flex; flex-wrap: wrap; gap: 3px 16px; margin: 0; font-size: 12.5px; color: var(--mg-tinta-2); }
.aud-contexto > span { overflow-wrap: anywhere; }
.aud-detalhes { margin-top: 4px; }
.aud-detalhes > summary { width: fit-content; min-height: 32px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--mg-verde-800); font-weight: 600; cursor: pointer; list-style: none; }
.aud-detalhes > summary::-webkit-details-marker { display: none; }
.aud-detalhes > summary::after { content: '+'; font-size: 16px; }
.aud-detalhes[open] > summary::after { content: '−'; }
.aud-detalhes dl { margin: 4px 0 2px; padding: 12px; border: 1px solid var(--mg-borda); background: var(--mg-base); border-radius: 8px; }
.aud-detalhes dl > div { display: grid; grid-template-columns: minmax(110px, .3fr) minmax(0, 1fr); gap: 4px 16px; padding-block: 5px; font-size: 13px; }
.aud-detalhes dt { font-weight: 600; color: var(--mg-verde-900); }
.aud-detalhes dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.adm-aud .paginacao { margin-top: 0; }
.aud-detalhes summary:focus-visible, .vazio-ajuda summary:focus-visible { outline: 2px solid var(--mg-verde-800); outline-offset: 2px; border-radius: 4px; }
@media (any-pointer: coarse) { .aud-detalhes > summary { min-height: 44px; } }
@media (max-width: 1023px) {
  .tema-admin .adm-conteudo { padding: 12px 14px 20px; }
  .tema-admin .adm-pagina-fixa { height: auto; gap: 12px; }
  .tema-admin .campo-rotulo, .tema-admin .filtro-rotulo { margin-bottom: 4px; }
  .tema-admin .vazio-grande { padding: 20px 16px; }
  .tema-admin .adm-rel-abas a { flex: 1 1 auto; justify-content: center; }
  .aud-cabecalho { gap: 8px; }
  .aud-cabecalho > p { font-size: 13px; }
  .aud-contagens { font-size: 12px; gap: 6px 16px; }
  .aud-registro { grid-template-columns: 1fr; gap: 3px; padding: 10px 14px; }
  .aud-data { padding: 0; font-size: 11.5px; }
  .aud-detalhes > summary { min-height: 44px; }
}
@media (max-width: 900px) {
  .tema-admin .tabela-cartoes tbody tr { padding: 6px 12px 10px; box-shadow: none; border-radius: 10px; }
  .tema-admin .tabela-cartoes td { padding-top: 6px; padding-bottom: 6px; }
  .tema-admin .tabela-cartoes td.td-meta { margin-right: 12px; }
  .tema-admin .tabela-cartoes td.acoes { padding-top: 8px; }
  .tema-admin .tabela-cartoes td[data-rotulo="Aviso"] { display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; width: auto; margin-right: 12px; }
  .tema-admin .tabela-cartoes td[data-rotulo="Downloads"], .tema-admin .tabela-cartoes td[data-rotulo="Reproduções"] { display: inline-flex; width: auto; border-top: 0; }
}
@media (min-width: 640px) and (max-width: 900px) {
  .tema-admin .tabela-cartoes tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
  .tema-admin .tabela-cartoes tbody tr { min-width: 0; margin-bottom: 0; }
  .tema-admin .tabela-cartoes tbody tr:has(td[colspan]) { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .aud-detalhes dl > div { grid-template-columns: 1fr; gap: 2px; padding-block: 6px; }
  .tema-admin .adm-conf-textos textarea { min-height: 100px; }
}

/* Área de toque do cadastro manual no CRM. */
.tema-admin .detalhes-cartao > summary { min-height: 44px; align-content: center; }

/* ============================================================================
   Board 8 (14/09/2026): sidebar, hover de tabela e relatórios no telefone.
   Cada agente APENDA seu bloco; este vai no fim para vencer por ordem.
   ============================================================================ */
/* SIDEBAR: a logomarca renderiza dentro da coluna e sem distorção em qualquer
   tamanho, e a barra NUNCA rola de lado. O overflow-y:auto (barra recolhida em
   telas baixas) forçava o overflow-x a "auto"; aqui ele é cortado de vez. O
   balão de dica da barra recolhida é position:fixed, então cortar o eixo X não
   o esconde. */
.tema-admin .adm-sidebar { overflow-x: hidden; }
.tema-admin .adm-sidebar-logo { display: flex; align-items: center; min-width: 0; }
.tema-admin .adm-sidebar-logo img { max-width: 100%; height: auto; object-fit: contain; }

/* TABELA (videoaulas e demais listas): o realce de hover cobre a linha inteira
   com a MESMA transição em todas as células e nos filhos do título, para não
   sobrar um degrau de cor entre a coluna da videoaula e a de categoria durante
   a transição (a capa e os textos do título antes trocavam de cor sem transição
   e destoavam do resto da linha por uma fração de segundo). */
.tema-admin .tabela tbody tr td .td-capa,
.tema-admin .tabela tbody tr td .td-titulo-textos { transition: background var(--transicao); }
.tema-admin .tabela tbody tr:hover td,
.tema-admin .tabela tbody tr:hover td .td-capa,
.tema-admin .tabela tbody tr:hover td .td-titulo-textos { background: var(--mg-creme); }

/* MATERIAIS e cartões: transição de cor suave no hover, sem salto abrupto. */
.tema-admin .tabela-cartoes tbody tr,
.tema-admin .cartao,
.tema-admin .adm-cat-item { transition: background var(--transicao), border-color var(--transicao), box-shadow var(--transicao); }

/* RELATÓRIOS: PDF, impressão e o balão de ajuda ficam juntos numa linha; no
   telefone os quatro períodos quebram em vez de rolar de lado (são só quatro) e
   os dois botões de PDF dividem a linha com o "?", sem órfão solto. */
.tema-admin .adm-rel-pdf-linha { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
@media (max-width: 640px) {
  .tema-admin .adm-rel .filtros-inline { flex-wrap: wrap; overflow-x: visible; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  .tema-admin .adm-rel .filtros-inline a { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 600px) {
  .tema-admin .adm-rel-pdf-linha .adm-pdf-botoes { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 8px; }
  .tema-admin .adm-rel-pdf-linha .adm-pdf-botoes .btn { flex: 1 1 46%; width: auto; justify-content: center; }
  .tema-admin .adm-rel-pdf-linha .ajuda-caixa { flex: 0 0 auto; align-self: center; }
}

/* ---------------------------------------------------------------------------
   INDICADORES NO CABECALHO (18/09/2026, pedido do socio)

   Medido antes em 1440x900, em /admin: a `.faixa-kpi` ocupava 1142x67px do
   CORPO da pagina, logo abaixo de um cabecalho que tinha espaco vazio a
   direita do titulo. O pedido foi explicito ("isso no desktop", "organizar
   tudo em uma linha so"), entao a faixa sobe para dentro da `.adm-topbar` e
   perde a casca de cartao: no cabecalho ela e uma linha de fatos, nao seis
   cartoes. Os 67px voltam para os blocos do painel, que estavam cortando
   conteudo por falta de altura.

   Quem move a faixa e o PHP (adminShellStart imprime o marcador, ui.php
   captura, adminShellEnd troca): aqui so mora o desenho.
   --------------------------------------------------------------------------- */
.tema-admin .adm-topbar > .faixa-kpi {
  /* `display` explicito: a regra de telefone da linha 2567 poe a faixa em
     GRADE de duas colunas, e sem esta declaracao a faixa do cabecalho virava
     tres fileiras de 40px (medido: cabecalho de 188px em 390x844). */
  display: flex;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  gap: 0;
  flex-wrap: nowrap;
  /* Em tela estreita a linha desliza em vez de quebrar: o cabecalho e
     grudento, e uma faixa que quebra em tres linhas viraria uma tarja
     permanente cobrindo a pagina inteira no telefone. */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.tema-admin .adm-topbar > .faixa-kpi::-webkit-scrollbar { display: none; }
.tema-admin .adm-topbar > .faixa-kpi > .kpi-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  min-height: 0;
  min-width: 0;
  padding: 3px 12px;
  background: none;
  border: 0;
  border-left: 1px solid var(--mg-borda);
  border-radius: 0;
  white-space: nowrap;
}
.tema-admin .adm-topbar > .faixa-kpi > .kpi-chip:first-child { border-left: 0; padding-left: 4px; }
.tema-admin .adm-topbar > .faixa-kpi > .kpi-chip .ic {
  width: 15px; height: 15px; grid-row: auto; align-self: center; flex: 0 0 auto;
}
.tema-admin .adm-topbar > .faixa-kpi > .kpi-chip strong { font-size: .95rem; }
.tema-admin .adm-topbar > .faixa-kpi > .kpi-chip span {
  font-size: 11.5px;
  color: var(--mg-tinta-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: normal;
}
/* Estado continua legivel sem a casca: o tom vai para o numero e para um ponto
   antes do rotulo, nunca so para a borda que deixou de existir. */
/* #6E6220 e o ambar de texto que a casa ja usa em .flash-aviso e na situacao
   do cabecalho: sem a casca do chip, o tom vai para o numero e para o desenho,
   e nao inventa um hex novo fora da paleta declarada. */
.tema-admin .adm-topbar > .faixa-kpi > .kpi-chip-alerta strong { color: #6E6220; }
.tema-admin .adm-topbar > .faixa-kpi > .kpi-chip-alerta .ic { color: #6E6220; }
.tema-admin .adm-topbar > .faixa-kpi > .kpi-chip-erro strong,
.tema-admin .adm-topbar > .faixa-kpi > .kpi-chip-erro .ic { color: var(--mg-erro); }
/* Quem cede largura e a FAIXA, nunca o titulo nem a conta (medido em
   1366x768 e 1280x800 com `flex: 0 1 auto` no titulo: o titulo da pagina ficou
   com 32px de largura, praticamente invisivel, e a identificacao da conta
   quebrou em tres linhas, levando o cabecalho de 63px para 96px). A faixa tem
   rolagem horizontal propria: e ela que pode encolher sem perder nada. */
@media (min-width: 1024px) {
  .tema-admin .adm-topbar .adm-topbar-info { flex: 0 0 auto; max-width: 34ch; }
  .tema-admin .adm-topbar > .faixa-kpi { flex: 1 1 0; }
  .tema-admin .adm-topbar .adm-topbar-estado,
  .tema-admin .adm-topbar .adm-topbar-site,
  .tema-admin .adm-topbar .adm-topbar-conta { flex: 0 0 auto; }
}
/* Abaixo de 1024px o cabecalho ja carrega hamburguer, titulo, "Ver site" e
   conta: a faixa desce para a linha de baixo do PROPRIO cabecalho, em vez de
   espremer os quatro. */
@media (max-width: 1023px) {
  .tema-admin .adm-topbar { flex-wrap: wrap; row-gap: 4px; }
  .tema-admin .adm-topbar > .faixa-kpi {
    display: flex;
    flex: 1 0 100%;
    order: 9;
    padding-top: 3px;
    border-top: 1px solid var(--mg-borda);
  }
  /* O cabecalho e grudento: a faixa fica em UMA linha que desliza, e nao em
     tres fileiras. Medido em 390x844: cabecalho de 188px antes desta regra,
     que e um quinto da tela ocupado para sempre. */
  .tema-admin .adm-topbar > .faixa-kpi > .kpi-chip { padding: 1px 9px; }
  .tema-admin .adm-topbar > .faixa-kpi > .kpi-chip .ic { width: 14px; height: 14px; }
  .tema-admin .adm-topbar > .faixa-kpi > .kpi-chip strong { font-size: .85rem; }
  .tema-admin .adm-topbar > .faixa-kpi > .kpi-chip span { font-size: 11px; }
}

/* ---------------------------------------------------------------------------
   O "?" MAIS PERTO DO TITULO (18/09/2026, pedido do socio: "aproximar a
   interrogacao dos titulos", com o exemplo "antes de abrir os prescritores: ?").

   Medido em 1440x900, distancia entre o fim da tinta do titulo e a borda do
   glifo: 6px nos <h2> e 14px no <summary> do aviso de abertura. Os 8px a mais
   do <summary> sao do proprio item de texto anonimo do flex, que termina depois
   da tinta; por isso ele leva um ajuste PROPRIO, e nao um valor medio que
   deixaria os <h2> colados.

   O que NAO muda: o botao continua com 34px de alvo (44px no ponteiro grosso).
   A aproximacao vem da margem negativa da caixa, que faz o preenchimento do
   botao cavalgar o fim do titulo. Titulo nao e alvo de clique, entao o
   cavalgamento nao rouba acao de ninguem.
   --------------------------------------------------------------------------- */
.tema-admin .ajuda-caixa { margin-left: -6px; }
.tema-admin .aviso-abertura-titulo .ajuda-caixa { margin-left: -14px; }
/* Estes quatro tinham regra PROPRIA de -2px (linhas 2058 a 2061), mais
   especifica que `.tema-admin .ajuda-caixa`: sem repeti-los aqui, o "?" dos
   cabecalhos de bloco continuaria a 6px enquanto o do <summary> ia a 2px, e a
   correcao ficaria escrita no codigo com o defeito vivo na tela. */
.tema-admin .adm-bloco-cab h2 .ajuda-caixa,
.tema-admin .form-secao-titulo .ajuda-caixa,
.tema-admin .adm-titulo-secao .ajuda-caixa,
.tema-admin .bloco-secao-cab h2 .ajuda-caixa { margin-left: -6px; }
/* Rotulo de campo e de filtro seguem sem cavalgar: ali o "?" vem depois de um
   rotulo que ja tem dois-pontos e espaco proprio no desenho do formulario. */
.tema-admin .campo-rotulo .ajuda-caixa,
.tema-admin .filtro-rotulo .ajuda-caixa { margin-left: 0; }
@media (pointer: coarse) {
  .tema-admin .ajuda-caixa { margin-left: -11px; }
  .tema-admin .aviso-abertura-titulo .ajuda-caixa { margin-left: -19px; }
  .tema-admin .campo-rotulo .ajuda-caixa,
  .tema-admin .filtro-rotulo .ajuda-caixa { margin-left: 0; }
}

/* ---------------------------------------------------------------------------
   A BARRA DE ROLAGEM DEIXA DE PINTAR POR CIMA DO TEXTO (18/09/2026).

   Relato do socio: "nos blocos (comece por aqui, consumo em 14 dias, etc.) a
   barra de rolagem e exibida sobrepondo o texto na lateral direita". Medido:
   `.adm-bloco-corpo` tem `overflow:auto` e `padding-right: 0`, entao a barra
   nasce encostada na ultima letra de cada linha. Com `scrollbar-gutter: stable`
   a calha e reservada SEMPRE, inclusive quando o bloco nao rola, e assim a
   largura do texto nao muda quando o conteudo cresce (era o segundo defeito:
   a lista "pulava" 11px ao passar a rolar).
   --------------------------------------------------------------------------- */
.adm-bloco-corpo { scrollbar-gutter: stable; padding-right: 4px; }
/* Sem rolagem e sem calha quando o bloco nao precisa dela: abaixo de 1024px o
   contrato de pagina fixa ja cai para altura automatica. */
@media (max-width: 1023px) {
  .adm-bloco-corpo { scrollbar-gutter: auto; padding-right: 0; }
}

/* ---------------------------------------------------------------------------
   PAINEL SEM ROLAGEM DENTRO DOS BLOCOS (18/09/2026)

   Medido em 1366x768 depois de a faixa de indicadores subir para o cabecalho:
   "Comece por aqui" pedia 38px a mais, "Atividade recente" 34px e
   "Armazenamento" 156px. Os tres eram rolagem interna, que e a que o socio
   apontou ("a barra de rolagem e exibida sobrepondo o texto").

   1. O bloco que NAO cresce tambem nao encolhe. Armazenamento nao tem
      `adm-bloco-cresce`, entao herdava `flex-shrink: 1` e era espremido pelo
      bloco vizinho ate o proprio conteudo nao caber. Ele tem altura natural
      pequena e fixa: quem cede espaco e o bloco do grafico, que cresce.
   2. Os passos JA CUMPRIDOS saem da lista abaixo de 1500px. Eles entraram em
      10/09 para o bloco nao ficar oco no monitor de 27", e continuam la; no
      notebook eram eles que empurravam a lista para a rolagem. Quantos foram
      cumpridos continua dito pela barra de progresso logo acima, inclusive
      para o leitor de tela.
   --------------------------------------------------------------------------- */
.adm-painel-col > .adm-bloco:not(.adm-bloco-cresce) { flex: 0 0 auto; }
.adm-painel .adm-passos li.feito { display: none; }
@media (min-width: 1500px) {
  .adm-painel .adm-passos li.feito { display: flex; }
}

/* A coluna do painel volta a ser FLEX (18/09/2026).

   A regra A11 (linha 2125) fazia de cada coluna uma grade de duas linhas
   IGUAIS, e escreveu isso com todas as letras: "cada corpo rola por dentro".
   Com linhas iguais, o bloco de Armazenamento recebia 164px para um conteudo
   de 320px em 1366x768, e nenhum ajuste de `flex` no filho tinha efeito: em
   grade quem manda e a linha. Como o pedido de 18/09 e o oposto (blocos sem
   rolagem), a coluna volta a flex: cada bloco parte da altura NATURAL e os
   que crescem dividem o que sobra. A simetria perfeita dos quatro blocos era
   o preco; rolagem que ninguem procura era o preco da simetria. */
@media (min-width: 1024px) {
  .adm-painel-col { display: flex; flex-direction: column; grid-template-rows: none; }
  .adm-painel-col > .adm-bloco { min-height: 0; }
  .adm-painel-col > .adm-bloco.adm-bloco-cresce { flex: 1 1 auto; }
  .adm-painel-col > .adm-bloco:not(.adm-bloco-cresce) { flex: 0 0 auto; }
}

/* Subcategorias na tela de Categorias (18/09/2026): a filha entra recuada sob
   a mae, com um filete que liga as duas, e sem a moldura propria de item de
   primeiro nivel. O recuo e de 18px: o suficiente para o olho ver o nivel e
   pouco o bastante para o nome nao quebrar em duas linhas nas tres colunas. */
.adm-cat-filhas { margin: 2px 0 0; padding: 0 0 0 18px; list-style: none; border-left: 2px solid var(--mg-borda); }
.adm-cat-item-filha { font-size: 13px; }
.adm-cat-item-filha .adm-cat-nome { font-weight: 500; }
.adm-cat-item-filha .adm-cat-alca .ic { width: 13px; height: 13px; }

/* ---------------------------------------------------------------------------
   DOCUMENTO DENTRO DA JANELA (18/09/2026)

   Pedido do socio: o aviso de privacidade deixa de abrir outra pagina e passa
   a abrir em janela, "nos modelos de contrato SeuSaude / Admin". O desenho e o
   de documento: folha branca, coluna de leitura de 74ch, titulo de secao
   com filete, paragrafo espacado, e a data de atualizacao no topo como
   cabecalho de instrumento. Vale para qualquer texto legal que abra assim, e
   nao so para este: por isso a classe e `doc-janela`, e nao `privacidade-*`.
   --------------------------------------------------------------------------- */
.doc-janela { display: block; padding: 0; background: none; }
.doc-janela-inner { max-width: 74ch; margin: 0 auto; padding: 2px 0 4px; }
.doc-janela .etiqueta { display: inline-block; margin-bottom: 6px; }
.doc-janela h1 { font-size: 1.35rem; line-height: 1.25; margin: 0 0 4px; color: var(--mg-verde-900); }
.doc-janela .bloco-secao { margin: 0 0 18px; padding: 0; background: none; border: 0; box-shadow: none; }
.doc-janela .bloco-secao-cab { margin: 0 0 6px; padding: 0 0 4px; border-bottom: 1px solid var(--mg-borda); }
.doc-janela .bloco-secao-cab h2 { font-size: 1rem; margin: 0; color: var(--mg-verde-900); }
.doc-janela p { margin: 0 0 9px; font-size: 14px; line-height: 1.62; }
.doc-janela ul, .doc-janela ol { margin: 0 0 9px; padding-left: 20px; display: grid; gap: 4px; }
.doc-janela li { font-size: 14px; line-height: 1.55; }
.doc-janela table { width: 100%; border-collapse: collapse; margin: 0 0 9px; font-size: 13px; }
.doc-janela th, .doc-janela td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--mg-borda); vertical-align: top; }
.doc-janela th { color: var(--mg-verde-900); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }

/* ---------------------------------------------------------------------------
   CONFIGURACOES: UMA ROLAGEM SO, E O ENDERECO EM DUAS LINHAS (18/09/2026)
   --------------------------------------------------------------------------- */
/* A tela saiu do contrato de pagina fixa (ver o comentario no PHP). O que ela
   herdava dele e que ainda vale: o respiro menor entre blocos. */
.adm-conf-fluida { display: flex; flex-direction: column; gap: 14px; }
.adm-conf-fluida .bloco-secao { margin-bottom: 0; }
@media (min-width: 1024px) {
  /* A barra de salvar gruda no PE DA JANELA, e nao no pe de um cartao rolavel
     que deixou de existir. O respiro de baixo evita que ela encoste no fim da
     pagina sem separacao. */
  .adm-conf-fluida .adm-conf-acoes {
    position: sticky;
    bottom: 0;
    background: var(--mg-branco);
    margin: 4px -18px 0;
    padding: 10px 18px 14px;
    border-top: 1px solid var(--mg-creme);
    z-index: 3;
  }
  .adm-conf-fluida .form-cartao { padding-bottom: 0; }
  /* As duas colunas comecam no topo: sem o rolador, `stretch` esticaria a
     coluna curta ate a altura da longa e deixaria metade dela em branco. */
  .adm-conf-fluida .adm-conf-colunas { align-items: start; }
}

/* ENDERECO DA PLATAFORMA: o botao de copiar deixa de ocupar uma terceira linha.

   Medido em 1440x900: cada linha de endereco tinha 78px de altura, com a URL
   quebrando em duas linhas e o botao de copiar CAINDO para a linha de baixo
   (`flex-wrap: wrap` com o link ocupando a largura inteira). Sem a quebra, o
   botao senta ao lado do texto e a linha fecha em 44px. */
.adm-endereco { flex-wrap: nowrap; align-items: flex-start; gap: 8px; }
.adm-endereco a { flex: 1 1 auto; min-width: 0; }
.adm-endereco .btn-icone-mini { align-self: flex-start; margin-top: 1px; }

/* ---------------------------------------------------------------------------
   AUDITORIA: UM REGISTRO, UMA LINHA (18/09/2026)

   Medido antes em 1440x900: cada registro ocupava 3 linhas de texto no miolo
   (acao, responsavel e alvo, "Ver detalhes") e a pagina rolava 570px com 12
   registros. A linha inteira virou o botao de abrir: data, acao, responsavel e
   alvo lado a lado; o detalhe abre embaixo, na largura toda.
   --------------------------------------------------------------------------- */
.aud-registro { display: block; padding: 0; }
.aud-registro > .aud-detalhes { margin: 0; }
.aud-linha {
  display: grid;
  grid-template-columns: 146px minmax(0, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 16px;
  min-height: 44px;
  padding: 8px 16px;
  cursor: pointer;
  list-style: none;
}
.aud-linha::-webkit-details-marker { display: none; }
.aud-linha:hover { background: var(--mg-creme); }
.aud-registro .aud-data { padding: 0; font-size: 12px; white-space: nowrap; }
/* 21/09/2026 (cartão 419, "palavras divididas em duas linhas, deixando letras
   isoladas"): a ação e o contexto são FRASE, então quebram por palavra, a regra
   A46 da linha 2255. `anywhere` zera a largura mínima do texto e deixa a
   coluna encolher abaixo da maior palavra. Endereço, IPv6 e JSON continuam com
   `anywhere` no detalhe aberto (.aud-detalhes dd), que é onde eles moram. */
.aud-registro .aud-fato { font: 600 13.5px/1.35 var(--ff-texto); color: var(--mg-verde-900); overflow-wrap: break-word; }
.aud-registro .aud-contexto > span { overflow-wrap: break-word; }
.aud-registro .aud-contexto { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12.5px; color: var(--mg-tinta-2); min-width: 0; }
.aud-ver { font-size: 12.5px; font-weight: 600; color: var(--mg-verde-800); white-space: nowrap; }
.aud-ver::after { content: ' +'; }
.aud-detalhes[open] .aud-ver::after { content: ' \2212'; }
.aud-registro .aud-detalhes > dl { margin: 0 16px 12px; }
/* No telefone a linha quebra em duas: data e acao em cima, responsavel e o
   "Ver detalhes" embaixo. Continua sendo UM alvo de toque. */
@media (max-width: 900px) {
  /* FLEX, e nao grade: com quatro itens e colocacao explicita por linha e
     coluna a grade empilhou os quatro na MESMA celula (medido: itens de 109px e
     146px sobrepostos, registro de 166px). Em flex que quebra linha, cada peca
     ocupa o que precisa e a linha fecha em tres alturas de texto. */
  .aud-linha { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 9px 14px; }
  .aud-registro .aud-data { order: 1; flex: 1 1 auto; }
  .aud-ver { order: 2; flex: 0 0 auto; margin-left: auto; }
  .aud-registro .aud-fato { order: 3; flex: 1 1 100%; }
  .aud-registro .aud-contexto { order: 4; flex: 1 1 100%; }
}

/* 18/09/2026: piso de 16px na fonte dos campos da gestao em largura de
   telefone. Abaixo de 16px o Safari do iPhone da zoom ao focar e a tela sai do
   lugar, e o dono passa a rolar para achar onde estava. Apareceu quando a
   cobertura logada do portao entrou e /admin passou a ser medido: prescritores
   com 14px, o texto do comunicado com 14px e tres areas de texto das
   configuracoes com 14px. Sem !important: a regra e da BASE do campo, e quem
   precisar de fonte menor no telefone diz isso com peso proprio e o motivo ao
   lado. */
@media (max-width: 768px) {
  .tema-admin input[type="text"], .tema-admin input[type="search"],
  .tema-admin input[type="email"], .tema-admin input[type="tel"],
  .tema-admin input[type="number"], .tema-admin input[type="password"],
  .tema-admin input[type="url"], .tema-admin input[type="date"],
  .tema-admin input[type="datetime-local"], .tema-admin input:not([type]),
  .tema-admin textarea, .tema-admin select { font-size: 16px; }
}

/* ---------------------------------------------------------------------------
   VERSAO NA LINHA DA CONTA (21/09/2026, cartao 419, Geral item 3)

   A versao voltou ao cabecalho dentro de `.adm-conta-nivel` ("Master ·
   v1.32.2"), e nao no chip `.adm-topbar-versao` (linha 1988), que continua sem
   uso: medido, o chip tirava 66px da faixa de indicadores e fazia o cabecalho
   quebrar para 79px em 1024 e 1200px. Aqui ela so desfaz a caixa alta e o
   espacamento do nivel, que num numero de versao atrapalham a leitura.
   --------------------------------------------------------------------------- */
.tema-admin .adm-conta-versao { text-transform: none; letter-spacing: .02em; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------------------------------------------------------------------------
   PADRAO DA CASA NO CABECALHO DA GESTAO (21/09/2026, Quadro 8, pergunta 37).

   Decisao do dono nos conflitos QA contra socio (cartoes 419, 471 e 521): vale
   o padrao da casa. (1) O rotulo do indicador sai INTEIRO: quebra em ate duas
   linhas, nunca cortado com reticencia. Medido antes: os 6 rotulos da faixa
   saiam cortados em 1440x900, 1024x768 e 390x844 ("prescritores com acesso"
   virava "prescrit..."). (2) O "?" fica a 2px do texto tambem no TOQUE: a
   regra de toque generica (.tema-admin .ajuda-caixa, peso 0,2,0) perdia para a
   dos cabecalhos de bloco (0,3,1), e no telefone o "?" dos blocos ficava a 7px.
   (3) Blocos do painel seguem com altura livre, sem rolagem interna (nada a
   mudar aqui).
   --------------------------------------------------------------------------- */
.tema-admin .adm-topbar > .faixa-kpi > .kpi-chip {
  align-items: center;
  white-space: normal;
  /* Largura natural: o chip nao encolhe abaixo do rotulo em duas linhas. Com
     `flex: 1 1 0` a faixa de 354px (390x844) dava 55px por chip e a palavra
     "prescritores" (63px) nao cabia. Quando os seis nao cabem, a FAIXA desliza
     de lado (ela ja tem overflow-x proprio), nunca a pagina. */
  flex: 0 0 auto;
}
/* Com mouse a faixa mostra uma barra fina: sem ela, o chip que ficou alem da
   borda so seria alcancado por quem usa trackpad ou shift+roda. No toque segue
   escondida (o gesto de deslizar e o natural). */
@media (pointer: fine) {
  .tema-admin .adm-topbar > .faixa-kpi { scrollbar-width: thin; }
  .tema-admin .adm-topbar > .faixa-kpi::-webkit-scrollbar { display: block; height: 6px; }
}
.tema-admin .adm-topbar > .faixa-kpi > .kpi-chip span {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: normal;
  line-height: 1.15;
  /* 14ch: "prescritores com acesso" quebra em duas linhas e os seis cabem na
     faixa de 1366 a 1440 sem cortar nada (18ch deixava so 3 visiveis). */
  max-width: 14ch;
}
@media (pointer: coarse) {
  .tema-admin .adm-bloco-cab h2 .ajuda-caixa,
  .tema-admin .form-secao-titulo .ajuda-caixa,
  .tema-admin .adm-titulo-secao .ajuda-caixa,
  .tema-admin .bloco-secao-cab h2 .ajuda-caixa { margin-left: -11px; }
}

/* ---------------------------------------------------------------------------
   REVISAO DA GESTAO (24/09/2026)

   (1) Pagina fixa sem 1 a 5px de rolagem em 1366x768. A altura da
   `.adm-pagina-fixa` era um orcamento escrito a mao, `100dvh - 94px`, que
   supunha cabecalho de 58px. O cabecalho mede 58,6px sem indicadores e 62,7px
   com eles (os rotulos em duas linhas da pergunta 37, 21/09), entao 25 das 26
   telas de contrato fixo rolavam 1px e o Painel e Categorias rolavam 5px.
   Agora quem da a altura e a propria coluna: `.adm-principal` tem a altura da
   janela, o `<main>` fica com o que sobra depois do cabecalho e a pagina fixa
   cresce ate o fim dele. Um aviso (flash) acima dela passa a ceder altura da
   lista em vez de empurrar a pagina. So vale onde existe pagina fixa (`:has`):
   Configuracoes e as fichas longas continuam rolando a pagina.
   --------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .tema-admin .adm-principal:has(> .adm-conteudo > .adm-pagina-fixa) { height: 100dvh; }
  .tema-admin .adm-principal:has(> .adm-conteudo > .adm-pagina-fixa) > .adm-conteudo {
    flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  }
  .tema-admin .adm-conteudo > .adm-pagina-fixa { height: auto; flex: 1 1 0; min-height: 0; }
  .tema-admin .adm-conteudo > .flash { flex: 0 0 auto; }
}

/* (2) Alvo de toque dos indicadores que sao LINK. Medido antes em 320, 390 e
   768 com toque: 40px de altura no Painel e 27px em Comunidade (o chip
   "prescritores com acesso" leva a Prescritores). O indicador que so mostra
   numero (div) nao e alvo e fica como esta. */
@media (pointer: coarse) {
  /* Peso 0,4,1: a regra do cabecalho (.adm-topbar > .faixa-kpi > .kpi-chip,
     0,4,0) zera o min-height e vencia a versao curta desta linha. */
  .tema-admin .faixa-kpi > a.kpi-chip,
  .tema-admin .adm-topbar > .faixa-kpi > a.kpi-chip { min-height: 44px; }
  /* "Baixar o QR de /links", em Configuracoes: link com 33px de altura. */
  .tema-admin .campo-dica > a[download] { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
}

/* (3) A faixa de indicadores do cabecalho corta o ultimo chip visivel na borda
   (decisao de 21/09: a faixa desliza de lado). Em 1366 o corte caia no "s" de
   "Materiais publicados" e a tela lia "Materiais publicado", como erro de
   texto. A borda direita esmaece enquanto ainda ha chip escondido e volta ao
   normal quando a faixa chega ao fim. Linha do tempo de rolagem: sem ela
   (navegador antigo) a faixa segue como estava; sem rolagem, a animacao nao
   tem linha do tempo e nao pinta mascara nenhuma. */
@supports (animation-timeline: scroll()) {
  .tema-admin .adm-topbar > .faixa-kpi {
    animation: adm-kpi-borda linear both;
    animation-timeline: scroll(self inline);
  }
  @keyframes adm-kpi-borda {
    from, 97% { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
    to { -webkit-mask-image: none; mask-image: none; }
  }
}

/* (4) Equipe: a tabela escondia a coluna de acoes. Medido antes: em 1024 a
   coluna tinha 527px para uma tabela de 640px, e o botao de desativar ficava
   atras do formulario ao lado (tambem em 1366, por 19px). O comentario de
   equipe.php ja dizia "so fica ao lado do formulario a partir de 1200px", mas
   a regra nunca foi escrita. Agora: o formulario tem largura fixa de 300 a
   360px, a data do ultimo acesso quebra em duas linhas, e abaixo de 1280px
   formulario e tabela empilham. */
.tema-admin .adm-eq-colunas { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); }
@media (max-width: 1279px) { .tema-admin .adm-eq-colunas { grid-template-columns: minmax(0, 1fr); } }
/* `table.tabela { min-width: 640px }` (app.css:1063, peso 0,1,1) vence
   `.tabela-estreita { min-width: 520px }` (0,1,0): a tabela estreita da Equipe
   nunca foi estreita. Aqui a largura minima e a do conteudo (574px medidos). */
.tema-admin .adm-eq-tabela table.tabela { min-width: 0; }
.tema-admin .adm-eq-tabela th:nth-child(4),
.tema-admin .adm-eq-tabela td:nth-child(4) { white-space: normal; min-width: 6.5em; }
/* No cartao (abaixo de 900px) o botao de desativar era um icone solto no pe
   do cartao, sem dizer o que faz. Ganha o texto; no computador segue icone
   com o nome no balao e no leitor de tela. */
.tema-admin .adm-eq-acao-rotulo { display: none; }
@media (max-width: 900px) {
  .tema-admin .adm-eq-tabela td.acoes .btn-icone { width: auto; padding: 0 16px; gap: 8px; }
  .tema-admin .adm-eq-acao-rotulo { display: inline; font-size: 14px; font-weight: 600; }
}

/* (5) WhatsApp: o motivo dos avisos segurados vinha colado ao rotulo, em
   negrito, com dois-pontos dentro do valor ("Segurados: chip pareado ha
   menos de 2 dias: so responde..."). O estado fica em negrito e o motivo
   desce em texto de apoio. */
.tema-admin .adm-wa-lista .adm-wa-motivo { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--mg-tinta-2); }

/* Botão de recolher a barra no toque (24/09/2026): `flex: 0 0 36px` vira ALTURA
 * na coluna da barra recolhida e o alvo ficava com 36px. Mesmo conserto do portal
 * (app.css, bloco de 24/09). */
@media (any-pointer: coarse) {
  .tema-admin .sidebar-recolher { width: 48px; height: 48px; flex-basis: 48px; }
}

/* Nome da conta na barra da gestão (24/09/2026, portão): "Supervisão SeuSaúde"
 * perdia 19 px em reticência até em 1920. O nome quebra linha em vez de cortar. */
.tema-admin .adm-admin-nome { white-space: normal; overflow-wrap: anywhere; line-height: 1.25; text-overflow: clip; }