/* Central de Mídia: mesma direção visual do app de leads (registro carimbado,
   tinta verde, selo dourado, papel quente). Herda os tokens de app.css, e por
   isso este arquivo é curto de propósito: cor nova aqui seria uma segunda
   identidade dentro do mesmo produto. */

/* EMBUTIDA NO PAINEL desde 2026-08-16. Esta folha nasceu para uma página
   inteira (/leads/midia), com topo verde, botão de voltar e nome da agência no
   canto. Nada disso existe mais: o topo, o menu e a identidade são do painel, e
   a Central é uma tela dele. O que sobrou aqui é só o miolo. */

/* CLASSE NOVA SÓ QUANDO NÃO EXISTE EQUIVALENTE. A moldura dos painéis é a
   .card do app.css; a fita de contagem é a .chip-row; o filtro é .chip; a
   tabela da trilha é .tab dentro de .tab-rolagem, e é de lá que ela herda de
   graça a virada para ficha empilhada abaixo de 760px. O que mora aqui é o
   que não tem par no app: cabeçalho de seção, selo de situação, grades de
   mídia e a tipografia do registro.

   TIPOGRAFIA EM REM (px/16): px fixo ignorava a preferência de tamanho de
   fonte do aparelho. Espaçamento segue em px, que é medida de caixa.
   BREAKPOINTS ALINHADOS AO APP: 599, 760 e 1000. Um corte próprio faria a
   Central dobrar em largura diferente das telas vizinhas do mesmo painel. */

/* --------------------------------------------------------------- Corpo */
.mid-embutido {
  display: block;
  /* Tons locais derivados da paleta do app (dourado e erro), nomeados aqui
     para o hex cru não se repetir pelo arquivo. */
  --mid-papel-alerta: #fff7e8;   /* papel quente sob a caixa de pendência */
  --mid-tinta-erro: #7a2a20;     /* var(--erro) escurecido para texto corrido */
}
/* `hidden` PERDE para qualquer display de autor (.mid-campo e .mid-inline são
   flex): sem esta regra, a caixa de reprovação e o campo do dia do mês
   nasceriam sempre visíveis. Mesma lição do véu da gaveta no app.css. */
.mid-embutido [hidden] { display: none !important; }
/* Sem max-width próprio: quem decide a largura da coluna é o .conteudo do
   painel. Dois limites concorrentes dariam uma tela mais estreita que as
   vizinhas, sem motivo visível. */
.mid-main { margin: 0; padding: 4px 0 8px; }
/* O <main> recebe foco por programa quando a aba muda, para o leitor de tela
   começar a ler o conteúdo novo. Ele é uma REGIÃO, e não um controle: o anel
   dourado do :focus-visible desenharia uma moldura em volta da página inteira.
   O anúncio para quem usa leitor continua, porque o foco de fato se moveu. */
.mid-main:focus { outline: none; }
.mid-carregando { color: var(--suave); font-size: .875rem; padding: 24px 0; }

.mid-nota { font-size: .8125rem; color: var(--tinta2); margin: 0 0 12px; line-height: 1.5; }
.mid-nota--recuo { margin: 0 0 10px; }
/* Nota que vive DENTRO de uma fileira de campos: sem margem, alinhada à base. */
.mid-nota--linha { margin: 0; flex: 1 1 220px; align-self: center; }

/* ------------------------------------------------------------ Cabeçalho
   As seções abriam com um <h2> solto: o título dizia o assunto e nada dizia o
   tamanho do assunto. O cabeçalho tem sempre a mesma ordem: título, ação da
   seção, contagem lida do próprio dado, e a nota que explica a regra. Mesma
   ordem nas dez, porque cabeçalho diferente por tela é o que faz um painel
   parecer dez produtos. */
/* Dieta de 31/08/2026, a mesma do .fer-cabeca: título menor, menos respiro
   vertical, nota em corpo de legenda. Cabeçalho apresenta e sai da frente. */
.mid-cabeca {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  margin: 0 0 10px; padding-bottom: 8px; border-bottom: 2px solid var(--linha);
}
.mid-cabeca-t {
  font-family: var(--f-display); font-size: 1.0625rem; font-weight: 700; color: var(--verde);
  margin: 0; flex: 1 1 auto; min-width: 0; letter-spacing: .1px; line-height: 1.25;
}
.mid-cabeca-a { flex: 0 0 auto; display: flex; gap: 8px; flex-wrap: wrap; }
/* A fita de contagem e a nota tomam a linha inteira: ao lado do título elas
   espremiam o título em telas médias. */
.mid-cabeca .mid-selos { flex: 1 1 100%; margin: 0; gap: 6px; }
.mid-cabeca .mid-nota { flex: 1 1 100%; margin: 0; font-size: 0.78rem; line-height: 1.45; max-width: 96ch; }

/* ----------------------------------------------------------- Cartões */
/* Cartões: o "1fr" precisa de minmax, senão conteúdo largo não encolhe e a
   coluna estoura a grade em vez de quebrar. */
.mid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.mid-card {
  background: var(--branco); border: 1px solid var(--linha); border-radius: 12px;
  padding: 14px 15px; min-width: 0;
}
.mid-card h3 {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .6px;
  color: var(--suave); font-weight: 700; margin: 0 0 8px;
}
/* O mono de 26px é a caixa do NÚMERO: ele existe para alinhar dígito com
   dígito, como lançamento contábil. Valor que é texto ("Interno (SeuSaúde)")
   nessa mesma caixa quebra em duas linhas e finge ser número. Por isso a
   variante de texto usa a fonte de display, menor. */
.mid-card .valor {
  font-family: var(--f-mono); font-size: 1.625rem; font-weight: 600; color: var(--verde);
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.mid-card .valor--texto {
  font-family: var(--f-display); font-size: 1.1875rem; font-weight: 700;
  line-height: 1.25; letter-spacing: .1px; overflow-wrap: anywhere;
}
.mid-card .detalhe { font-size: .8125rem; color: var(--tinta2); margin-top: 6px; line-height: 1.45; }

/* Variação contra o período anterior (Desempenho): alta boa em verde, queda
   em vermelho, "estável" e "sem base" na tinta suave. */
.mid-var { font-family: var(--f-mono); font-weight: 700; font-size: .75rem; white-space: nowrap; }
.mid-var--alta { color: var(--ok); }
.mid-var--baixa { color: var(--erro); }
.mid-var--neutra { color: var(--suave); }

/* Sub-bloco dentro de uma seção (as quebras por situação e por canal). O
   rótulo usa o mesmo mono maiúsculo do .sec-tit do app: é a mesma função. */
.mid-bloco { margin: 18px 0 0; }
.mid-bloco h3 {
  font-family: var(--f-mono); font-size: var(--t-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--tinta2); margin: 0 0 8px;
}
.mid-bloco .mid-selos { margin: 0; }

/* --------------------------------------------------------------- Selos
   Um selo é uma pílula com NÚMERO e RÓTULO. O número vem no mono tabular
   porque a fita inteira é uma coluna de lançamentos: com a fonte de texto os
   dígitos dançam de largura e a fita perde o alinhamento. */
.mid-selo {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-size: var(--t-micro); font-weight: 700; padding: 4px 10px; border-radius: 999px; letter-spacing: .3px;
}
.mid-selo b { font-family: var(--f-mono); font-size: .78125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.mid-selo--ok { background: rgba(29,92,71,.12); color: var(--ok); }
.mid-selo--espera { background: rgba(138,107,58,.14); color: var(--alerta); }
.mid-selo--erro { background: rgba(161,48,36,.12); color: var(--erro); }
.mid-selo--neutro { background: rgba(12,42,33,.06); color: var(--tinta2); }

/* --------------------------------------------------------- Pendências
   A caixa dourada é a de PENDÊNCIA: ela pede providência. Notícia boa
   ("corrente íntegra") saía nela e a tela dizia "está tudo certo" com cara de
   alerta; problema grave saía nela e ficava com o mesmo peso de um aviso de
   rotina. Agora o tom acompanha o fato. */
.mid-pendencia {
  background: var(--mid-papel-alerta); border-left: 4px solid var(--dourado-d); border-radius: 8px;
  padding: 12px 14px; font-size: .875rem; color: var(--dourado-tinta); line-height: 1.55; margin: 0 0 14px;
}
.mid-pendencia strong { color: var(--verde); }
.mid-pendencia--ok { background: rgba(29,92,71,.07); border-left-color: var(--selo); color: var(--tinta2); }
.mid-pendencia--erro { background: rgba(161,48,36,.06); border-left-color: var(--erro); color: var(--mid-tinta-erro); }
.mid-pendencia--erro strong { color: var(--erro); }

/* ------------------------------------------------------------ Controles
   O que a pessoa PREENCHE fica emoldurado (.card do app.css). Solto sobre o
   papel, o formulário de envio parecia rascunho ao lado dos blocos das outras
   telas do painel. */
.mid-painel { padding: 14px 15px; margin-bottom: 16px; }
.mid-painel h3 { font-family: var(--f-display); font-size: .9375rem; color: var(--verde); margin: 0 0 10px; }
.mid-painel .mid-linha { margin: 0; }

.mid-linha { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 0 0 14px; }
.mid-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1 1 200px; }
/* Um seletor sozinho na linha esticava até a largura inteira da coluna: em
   1366px o campo "Cliente" tinha mil pixels para escrever um nome. */
.mid-campo--cliente { flex: 1 1 210px; max-width: 340px; }
.mid-campo--largo { flex: 2 1 300px; }
/* Campo de linha inteira: legenda, grade de mídia e os blocos do formulário
   de publicação, que não fazem sentido espremidos ao lado de outro campo. */
.mid-campo--cheio { flex: 1 1 100%; }
.mid-campo label, .mid-campo-r { font-size: .75rem; font-weight: 700; color: var(--tinta2); letter-spacing: .2px; }
/* 16px nos campos: abaixo disso o iOS dá zoom na página inteira ao focar. */
.mid-campo input, .mid-campo select, .mid-campo textarea {
  font-family: inherit; font-size: 1rem; color: var(--tinta);
  background: var(--branco); border: 1px solid var(--linha); border-radius: 9px;
  padding: 9px 11px; width: 100%; min-width: 0;
}
.mid-campo textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.mid-campo input:focus, .mid-campo select:focus, .mid-campo textarea:focus {
  outline: 2px solid var(--dourado); outline-offset: 1px; border-color: var(--selo);
}
.mid-campo input[disabled], .mid-campo textarea[disabled] { opacity: .5; background: rgba(12,42,33,.04); }
/* O seletor NATIVO de arquivo saiu das duas telas que o usavam (Biblioteca e
   agendamento). Dava para pintar o botão dele, mas não para traduzir: ele
   escreve "Choose File / No file chosen" na língua do NAVEGADOR, e num
   computador em inglês era a única frase em inglês do sistema inteiro. Agora
   o campo fica escondido atrás de um botão nosso (.mid-arq-linha). */
.mid-campo .chip-row { margin: 0; padding-top: 2px; }

/* Contador da legenda (0/2200): mono, encostado na borda direita do campo. */
.mid-contador {
  align-self: flex-end; font-family: var(--f-mono); font-size: var(--t-micro);
  color: var(--suave); font-variant-numeric: tabular-nums;
}
.mid-contador--cheio { color: var(--erro); font-weight: 700; }

/* Caixa de marcação (exigência de aprovação, Reels no feed). */
.mid-check {
  display: flex; align-items: center; gap: 9px; font-size: .9375rem;
  font-weight: 600; color: var(--tinta); cursor: pointer;
}
/* Tamanho, alinhamento e cor da caixa vem da regra global do app.css: eram
   tres tamanhos diferentes no mesmo aplicativo. Aqui fica so o que e daqui. */
/* A fileira inteira e o alvo: com 19px de altura o dedo erra a caixa e o
   rotulo ao lado nao ajudava, porque a linha nao tinha altura propria. */
.mid-check { min-height: 44px; }

/* Fileira dos botões de conclusão do formulário. */
.mid-form-acoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; flex: 1 1 100%; }

/* Faixa "Enviando o arquivo:": o upload de vídeo demora e o silêncio fazia o
   operador clicar de novo e subir o arquivo duas vezes. */
.mid-envio { display: inline-flex; align-items: center; gap: 9px; font-size: .8125rem; color: var(--tinta2); }
.mid-girar {
  width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid var(--linha); border-top-color: var(--dourado-d);
  animation: mid-girar .8s linear infinite;
}
@keyframes mid-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mid-girar { animation: none; } }

.mid-btn {
  font-family: inherit; font-size: .875rem; font-weight: 700; cursor: pointer;
  border-radius: 999px; padding: 10px 18px; border: 1px solid var(--verde);
  background: var(--verde); color: var(--creme); white-space: nowrap;
}
.mid-btn:hover { background: var(--verde2); }
.mid-btn[disabled] { opacity: .5; cursor: not-allowed; }
.mid-btn--claro { background: transparent; color: var(--verde); }
.mid-btn--claro:hover { background: rgba(12,42,33,.06); }
.mid-btn--perigo { background: transparent; color: var(--erro); border-color: var(--erro); }
.mid-btn--perigo:hover { background: rgba(161,48,36,.08); }
/* Ação de apoio (cabeçalho e rodapé de cartão) não pode ter o mesmo peso do
   botão principal da seção. */
.mid-btn--peq { padding: 7px 13px; font-size: .8125rem; }

/* Rodapé de ação da Situação: o botão que desliga a publicação inteira anda
   junto da frase que diz o que ele desliga. */
.mid-rodape-acao {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--linha-s);
}
.mid-rodape-acao .mid-nota { margin: 0; flex: 1 1 240px; }

/* -------------------------------------------------------- Biblioteca */
/* minmax de 140px: no celular de 360px isso dá exatamente duas colunas, sem
   precisar de um corte de largura só para a grade. */
.mid-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: 12px; }
.mid-item {
  background: var(--branco); border: 1px solid var(--linha); border-radius: 10px;
  overflow: hidden; min-width: 0; display: flex; flex-direction: column;
}
/* A moldura da prévia é a caixa, e não a imagem: o endereço assinado vence em
   minutos, e quando ele vence o <img> deixa de carregar e o texto alternativo
   toma o lugar dela. Com a proporção presa só na imagem, esse texto empurrava
   o cartão e desalinhava a grade inteira. */
.mid-item-vis { display: block; width: 100%; aspect-ratio: 1/1; overflow: hidden; background: var(--creme); }
.mid-item-vis img, .mid-item-vis video {
  display: block; width: 100%; height: 100%; object-fit: cover;
  font-size: var(--t-micro); color: var(--suave);
}
.mid-item .meta { padding: 7px 9px; font-size: var(--t-micro); color: var(--suave); font-family: var(--f-mono); line-height: 1.5; }
.mid-item-id { color: var(--tinta2); font-weight: 700; }
/* A descrição de acessibilidade é texto, não medida: fonte de texto, duas
   linhas no máximo, e o resto no title do próprio cartão. */
.mid-item-alt {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 5px; font-family: inherit; font-size: .75rem; color: var(--tinta2); line-height: 1.35;
}
.mid-item-alt--falta { color: var(--alerta); font-style: italic; }
/* O AVISO DE FALTA NAO E TEXTO DO USUARIO, entao nao entra no corte de duas
   linhas (04/09/2026). O portao pegou em 834x1112: "Sem descricao para
   acessibilidade" saia com 17px escondidos na vertical, ou seja, o aviso de
   que falta descricao estava ele proprio pela metade. Cortar a descricao que
   alguem escreveu e uma decisao de espaco; cortar a frase do sistema que pede
   para escrever uma e engolir o pedido. */
.mid-item-alt--falta { display: block; -webkit-line-clamp: none; overflow: visible; }
/* O Apagar mora no rodapé do cartão, longe da prévia clicável. */
.mid-item-acao { display: flex; justify-content: flex-end; padding: 0 9px 9px; margin-top: auto; }

/* Zona de arrastar-e-soltar: o tracejado só aparece com o arquivo em cima,
   para a grade não viver dentro de uma moldura que não faz nada. */
.mid-zona { border: 2px dashed transparent; border-radius: 12px; }
.mid-zona--sobre { border-color: var(--dourado-d); background: rgba(201,169,110,.08); }

/* ----------------------------------------------- Grade de escolha de mídia
   (Publicar e Recorrências.) Azulejo menor que o da biblioteca porque aqui a
   pergunta é "qual destas", não "o que há no acervo". A ordem numérica só
   aparece no carrossel, onde a ordem da escolha é a ordem da publicação. */
.mid-escolha { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 110px), 1fr)); gap: 8px; flex: 1 1 100%; }
.mid-esc {
  position: relative; border: 2px solid var(--linha); border-radius: 10px; overflow: hidden;
  padding: 0; background: var(--branco); cursor: pointer; min-width: 0; text-align: left;
}
.mid-esc-vis { display: block; aspect-ratio: 1/1; background: var(--creme); overflow: hidden; }
.mid-esc-vis img, .mid-esc-vis video { display: block; width: 100%; height: 100%; object-fit: cover; }
.mid-esc-meta {
  display: block; padding: 4px 6px; font-family: var(--f-mono); font-size: var(--t-micro);
  color: var(--tinta2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mid-esc:hover { border-color: var(--fio-forte); }
.mid-esc--sel { border-color: var(--dourado-d); box-shadow: 0 0 0 2px rgba(201,169,110,.35); }
.mid-esc-ordem {
  position: absolute; top: 6px; right: 6px; min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 999px; background: var(--dourado); color: var(--verde);
  font-family: var(--f-mono); font-weight: 700; font-size: .75rem;
  display: flex; align-items: center; justify-content: center;
}
.mid-form-acoes--midia { margin-top: 8px; }

/* ------------------------------------------------------------- Listas */
.mid-lista { display: flex; flex-direction: column; gap: 10px; }
.mid-reg {
  background: var(--branco); border: 1px solid var(--linha); border-radius: 11px;
  padding: 12px 14px; min-width: 0;
}
.mid-reg-topo { display: flex; gap: 8px 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; }
.mid-reg-topo b { font-size: .875rem; color: var(--verde); }
.mid-reg-topo time, .mid-reg-topo .quem { font-family: var(--f-mono); font-size: var(--t-micro); color: var(--suave); }
/* A data mudava de significado sem avisar: o mesmo canto mostrava ora o
   agendamento, ora a criação. Agora cada data vem com o rótulo dela. */
.mid-reg-datas {
  display: flex; flex-wrap: wrap; gap: 3px 16px; margin: 0 0 8px;
  font-family: var(--f-mono); font-size: var(--t-micro); color: var(--tinta2); font-variant-numeric: tabular-nums;
}
.mid-reg-datas i { font-style: normal; color: var(--suave); }
.mid-reg-tit {
  font-family: var(--f-display); font-size: .9375rem; font-weight: 700; color: var(--verde);
  margin: 2px 0 7px; line-height: 1.3; overflow-wrap: anywhere;
}
.mid-reg p { font-size: .875rem; color: var(--tinta); line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.mid-reg .mid-nota { white-space: normal; }
.mid-reg .hashtags { font-size: .8125rem; color: var(--selo); margin-top: 8px; word-break: break-word; }
.mid-reg .hashtags i, .mid-erro-linha i { font-style: normal; font-weight: 700; }
.mid-erro-linha {
  font-size: .8125rem; color: var(--erro); margin-top: 8px; line-height: 1.5;
  word-break: break-word; white-space: normal;
}
.mid-reg .acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
/* Campo inline de reprovação e de resposta a comentário: abre dentro do
   cartão, ao lado do botão que o confirma. 16px pelo zoom do iOS. */
.mid-inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; margin-top: 10px; }
.mid-inline textarea, .mid-inline input {
  flex: 1 1 220px; min-width: 0; font-family: inherit; font-size: 1rem; color: var(--tinta);
  background: var(--branco); border: 1px solid var(--linha); border-radius: 9px; padding: 9px 11px;
}
.mid-inline textarea { min-height: 64px; resize: vertical; line-height: 1.5; }
.mid-inline textarea:focus, .mid-inline input:focus {
  outline: 2px solid var(--dourado); outline-offset: 1px; border-color: var(--selo);
}
/* Linha de números do cartão de desempenho: rótulo suave, dígito tabular. */
.mid-numeros {
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px;
  font-family: var(--f-mono); font-size: var(--t-micro); color: var(--tinta2); font-variant-numeric: tabular-nums;
}
.mid-numeros i { font-style: normal; color: var(--suave); }
.mid-met .tab-rolagem { margin-top: 8px; }
.mid-vazio {
  color: var(--tinta2); font-size: .875rem; padding: 26px 16px; text-align: center;
  background: rgba(255,253,250,.55); border: 1px dashed var(--linha); border-radius: 12px;
}

/* --------------------------------------------------------------- Trilha
   Quatro campos curtos e leitura de conferência: isto é tabela, e a tabela do
   app já sabe virar ficha empilhada no celular (o data-r de cada célula vira
   o rótulo). Cada linha abre com uma FRASE em português; o detalhe são pares
   "rótulo: valor", nunca JSON. */
.mid-trilha { font-size: .85rem; }
.mid-trilha td { vertical-align: top; }
.mid-trilha .mid-cel { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mid-trilha td.mid-detalhe .mid-cel { flex-direction: row; flex-wrap: wrap; gap: 2px 14px; }
.mid-trilha th:nth-child(1) { width: 34%; }
.mid-trilha th:nth-child(2) { width: 14%; }
.mid-trilha th:nth-child(3) { width: 14%; }
.mid-chave { font-family: var(--f-mono); font-size: var(--t-micro); color: var(--suave); letter-spacing: .02em; word-break: break-all; }
.mid-par { font-size: .75rem; color: var(--tinta2); overflow-wrap: anywhere; }
.mid-par i {
  font-style: normal; font-family: var(--f-mono); font-size: var(--t-micro); text-transform: uppercase;
  letter-spacing: .04em; color: var(--suave); margin-right: 3px;
}
.mid-suave { color: var(--suave); }

/* --------------------------------------------------------------- Abas
   Eram uma barra FIXA no rodapé, porque a Central era página inteira. Dentro
   do painel isso brigaria com a navegação do app: viraria uma segunda barra
   competindo pelo mesmo canto da tela. Agora é uma fita de abas no topo do
   conteúdo, e as mesmas seções também estão na barra lateral, que é o caminho
   principal. As abas ficam por serem o atalho de quem já está na tela. */
.mid-abas {
  display: flex; gap: 4px; flex-wrap: nowrap;
  /* Rola DENTRO da própria caixa: em 320px dez abas não cabem, e a página
     nunca pode rolar de lado. */
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-bottom: 1.4px solid var(--linha);
  margin: 0 0 14px; padding: 0 0 9px;
  scrollbar-width: thin;
  /* Gruda embaixo do topo fixo, nas duas larguras: numa lista de 200 registros
     as abas ficavam a uma tela inteira de distância e trocar de seção exigia
     rolar de volta até o começo. */
  position: sticky; top: calc(var(--topo-h) + env(safe-area-inset-top, 0px)); z-index: 20;
  background: var(--bg);
  /* A fita mora DENTRO da coluna, que tem recuo lateral: sem isto o conteúdo
     rolando aparecia na fresta ao lado dela. A sombra pinta a fresta com a cor
     do papel e não entra na conta da largura, então não cria rolagem lateral. */
  box-shadow: -48px 0 0 var(--bg), 48px 0 0 var(--bg);
}
/* Pílulas, no PADRÃO de abas do sistema (mesmo desenho do painel e da
   Configuração). Antes era aba de texto sublinhado; agora a seção ativa é uma
   pílula verde, coerente com o resto. A fita segue rolando na horizontal. */
.mid-abas button {
  border: 1px solid var(--linha); background: var(--branco); cursor: pointer;
  font-size: .8125rem; font-weight: 600; color: var(--tinta);
  padding: 8px 14px; min-height: 44px; white-space: nowrap; flex: 0 0 auto;
  border-radius: 999px;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.mid-abas button:hover { border-color: var(--selo); }
.mid-abas button.ativa { background: var(--selo); border-color: var(--selo); color: #fff; }

/* Celular: dois cartões por linha. Um por linha empurrava a fita de situação
   para a terceira rolagem, e o painel de abertura deixava de caber na tela. */
@media (max-width: 599px) {
  .mid-abas button { font-size: .75rem; padding: 9px 9px; }
  .mid-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .mid-card { padding: 12px; }
  .mid-card .valor { font-size: 1.4375rem; }
  /* Cartão de texto (o do plano) em meia coluna quebra em quatro linhas. */
  .mid-cards > .mid-card--largo { grid-column: 1 / -1; }
  /* Botão de linha inteira: meio botão colado no campo ao lado é alvo pequeno
     e ainda faz a fileira parecer cortada. */
  .mid-linha > .mid-btn { width: 100%; }
  .mid-form-acoes .mid-btn { flex: 1 1 auto; }
  /* Grades mais miúdas no celular: duas colunas já em 320px. */
  .mid-grade { grid-template-columns: repeat(auto-fill, minmax(min(100%, 132px), 1fr)); gap: 10px; }
  .mid-escolha { grid-template-columns: repeat(auto-fill, minmax(min(100%, 96px), 1fr)); }
}

/* Ficha empilhada da trilha. O app.css já vira a linha em cartão abaixo de
   760px; aqui só se acerta o que é próprio destas células. */
@media (max-width: 759px) {
  .mid-trilha td > .mid-cel { align-items: flex-end; text-align: right; }
  /* O detalhe tem vários pares: em coluna à direita eles viram uma escada.
     Rótulo em cima, pares embaixo, tudo alinhado à esquerda. */
  .mid-trilha td.mid-detalhe { flex-direction: column; align-items: stretch; gap: 5px; }
  .mid-trilha td.mid-detalhe > .mid-cel { flex-direction: column; align-items: flex-start; text-align: left; gap: 3px; }
  .mid-item-alt { -webkit-line-clamp: 3; }

  /* --------------------------------------------- Ficha da trilha, compacta
     Cada registro virava quatro fileiras empilhadas e media ~256px: 25 deles
     davam 7.134px de rolagem para uma lista de conferencia. Duas mudancas,
     nenhuma delas tira informacao da tela:

     1. "Quem" e "Quando" dividem a MESMA fileira. Sao dois campos curtos e
        sempre lidos juntos ("Jayme, ontem as 14h"), e separados custavam uma
        fileira inteira cada.
     2. A chave crua da acao (`post.reagendado`) sai no celular. Ela repete,
        em linguagem de banco, a frase que esta escrita logo acima em
        portugues. No desktop ela cabe sem custo e serve de conferencia; no
        celular e uma terceira linha para dizer o que a primeira ja disse. */
  .mid-trilha tr { display: flex; flex-wrap: wrap; }
  .mid-trilha td { flex: 1 1 100%; }
  .mid-trilha td[data-r="Quem"] { flex: 1 1 55%; }
  .mid-trilha td[data-r="Quando"] { flex: 1 1 40%; border-bottom: 1px solid var(--linha-s); }
  .mid-trilha td[data-r="Quem"] + td[data-r="Quando"] { padding-left: 10px; }
  .mid-chave--acao { display: none; }
}

@media (min-width: 760px) {
  .mid-abas button { min-height: 0; padding: 11px 16px; }
}

/* ------------------------------------------------- Formulário em 2 colunas
   Usado no agendamento e na recorrência. Numa coluna só, em 1120px, a legenda
   virava uma caixa de mil pixels e o campo de data ocupava a tela inteira
   para caber "dd/mm/aaaa --:--": muita rolagem para uma decisão que cabe numa
   tela. Abaixo de 900px volta a ser uma coluna, que é o certo no celular. */
.mid-form2 { flex: 1 1 100%; display: grid; grid-template-columns: 1fr; gap: 0 26px; align-items: start; }
.mid-form-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* Dentro da coluna o campo não cresce: quem manda na largura é a coluna. */
.mid-form-col > .mid-campo { flex: 0 0 auto; max-width: none; }
/* Data e hora não precisa da largura inteira da coluna. */
.mid-campo--data > input { max-width: 300px; }
.mid-form-acoes--rodape {
  flex: 1 1 100%; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linha-s);
}
/* Faixa de largura inteira embaixo das duas colunas (04/09/2026): hoje so a
   galeria da biblioteca no Agendar publicacao. Ver o comentario de
   `duasColunas` em midia.js para a medicao que motivou. */
.mid-form-faixa { flex: 1 1 100%; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linha-s); }
.mid-form-faixa > .mid-campo { max-width: none; }
@media (min-width: 900px) {
  .mid-form2 { grid-template-columns: 1fr 1fr; }
  /* A esquerda responde "onde e o quê"; um fio separa das respostas da
     direita, para as duas colunas não parecerem uma lista de doze campos. */
  .mid-form2 > .mid-form-col:first-child { padding-right: 26px; border-right: 1px solid var(--linha-s); }
}

/* --------------------------------------------------- Biblioteca no desktop
   A grade nascia com peças de 140px, medida pensada para o celular. Em
   1120px isso vira sete colunas de miniatura, e escolher a arte certa passa
   a exigir aproximar a tela. A partir de 1000px a peça cresce e a grade cai
   para quatro ou cinco colunas, que é onde a imagem volta a ser legível. */
@media (min-width: 1000px) {
  .mid-grade { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 16px; }
  .mid-escolha { grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr)); gap: 12px; }
  /* Na faixa de largura inteira cabe mais peca por linha sem encolher nenhuma:
     antes eram quatro colunas dentro de meia largura. */
  .mid-form-faixa .mid-escolha { grid-template-columns: repeat(auto-fill, minmax(min(100%, 148px), 1fr)); }
  /* A zona de soltar arquivo ganha respiro para não ficar colada na grade. */
  .mid-zona { padding-top: 4px; }
}
@media (min-width: 1500px) {
  .mid-grade { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
}

/* Alvo de toque: o botao pequeno da Central media 33px de altura no celular.
   Cresce a caixa de clique, nao o desenho. */
@media (max-width:759px){
  .mid-btn--peq{min-height:44px}
}

/* ------------------------------------------------- Barra de filtro da midia
   Reusa a .barra-fer do app.css. Aqui so se acerta o que e proprio da Central:
   o campo de cliente, que la e um .mid-campo e precisa se comportar como
   celula da barra, e a fileira de chips, que nao pode herdar a margem
   inferior que usa quando esta solta num formulario. */
.barra-fer--midia > .mid-campo { flex: 0 1 240px; min-width: 0; gap: 3px; }
.barra-fer--midia .mid-campo label,
.barra-fer--midia .barra-fer-r {
  font-family: var(--f-mono); font-size: .58rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--suave);
}
.barra-fer--midia .barra-fer-c { flex: 1 1 auto; }
.barra-fer--midia .chip-row { margin: 0; }

/* Escolha de arquivo com botao PROPRIO. O seletor nativo escreve "Choose
   File / No file chosen" na lingua do navegador, e nao ha atributo que
   traduza: numa maquina em ingles era a unica frase em ingles do sistema. */
.mid-arq-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.mid-arq-nome { font-size: .8125rem; color: var(--suave); min-width: 0; overflow-wrap: anywhere; }
.mid-arq-nome.tem { color: var(--tinta); font-weight: 600; }

/* Fila de trabalho da acessibilidade: o filtro fica colado na grade que ele
   corta, e não junto do formulário de envio, que trata de outra coisa. */
.mid-check--filtro { margin: 4px 0 10px; }

/* Duas ações por item ("Descrever" e "Apagar"). Elas quebram para a linha de
   baixo em cartão estreito em vez de espremer o rótulo: "Editar descrição"
   cortado no meio deixa de dizer o que o botão faz. */
.mid-item-acao { flex-wrap: wrap; gap: 6px; }

/* --------------------------- Paginacao da galeria de midias (20/08/2026)
   A faixa das escolhidas fora da pagina vem ANTES da grade e com um fio
   embaixo: ela responde "o que eu ja marquei?" sem obrigar a voltar pagina. */
.mid-escolha--fixadas{padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--linha)}
.mid-pag{display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid var(--linha)}
.mid-pag .mid-nota{margin:0;flex:1 1 auto;text-align:center}
.mid-pag .mid-btn[disabled]{opacity:.45;cursor:default}

/* Pauta do mês: os itens (dia, formato, título, gancho) em mini-calendário,
   linhas densas, no lugar de ficarem invisíveis dentro do resumo. */
.mid-pauta { list-style: none; margin: 8px 0 0; padding: 0; display: flex;
  flex-direction: column; gap: 1px; background: var(--linha-s);
  border: 1px solid var(--linha); border-radius: 9px; overflow: hidden; }
.mid-pauta-i { display: flex; align-items: baseline; gap: 10px;
  background: var(--branco); padding: 6px 10px; }
.mid-pauta-dia { flex: 0 0 auto; min-width: 44px; font-family: var(--f-mono);
  font-size: var(--t-micro); color: var(--tinta2); font-variant-numeric: tabular-nums; }
.mid-pauta-fmt { flex: 0 0 auto; min-width: 64px; font-family: var(--f-mono);
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .03em; color: var(--selo); }
.mid-pauta-tit { flex: 1 1 auto; min-width: 0; font-size: .9rem; line-height: 1.35; }
.mid-pauta-gan { font-style: normal; font-weight: 700; color: var(--dourado-tinta); }
@media (max-width: 559px) {
  .mid-pauta-i { flex-wrap: wrap; gap: 2px 10px; }
  .mid-pauta-tit { flex: 1 1 100%; }
}

/* Cartões da Situação: cor por papel (como no painel do cliente), para os
   quatro KPIs lerem como um painel e não como quatro caixas iguais. */
.mid-cards--estado .mid-card { box-shadow: inset 0 3px 0 var(--selo); }
.mid-cards--estado .mid-card:nth-child(2) { box-shadow: inset 0 3px 0 #2f5a78; }
.mid-cards--estado .mid-card:nth-child(3) { box-shadow: inset 0 3px 0 var(--dourado); }
.mid-cards--estado .mid-card:nth-child(4) { box-shadow: inset 0 3px 0 #8a691f; }

/* Governança (verba + liga/desliga) num cartão só, destacado como zona de
   controle da conta. */
.mid-governanca { background: var(--branco); border: 1px solid var(--linha);
  border-radius: 12px; padding: 12px 14px; margin-top: 18px; }
.mid-governanca > h3 { margin: 0 0 10px; }
.mid-gov-kill { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linha-s); }

/* ------------------------------------------- Cartao de publicacao (30/08)
   Previa da midia + editor embutido (Editar na lista, pedido do dono). */
.mid-reg-corpo{display:flex;gap:12px;align-items:flex-start;min-width:0}
.mid-reg-corpo>p{min-width:0;flex:1}
.mid-thumb{flex:0 0 auto;width:72px;height:72px;border-radius:9px;overflow:hidden;border:1px solid var(--linha);background:var(--fundo2,#eef4ef);display:flex;align-items:center;justify-content:center;text-decoration:none}
.mid-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.mid-thumb-video{font-size:.72rem;font-weight:700;color:var(--tinta2);letter-spacing:.04em;text-transform:uppercase}
.mid-editor{margin-top:10px;padding:12px;border:1px dashed var(--linha);border-radius:11px;background:var(--fundo-2,#faf7ee)}
.mid-editor textarea{min-height:96px}
@media (max-width:759px){
  .mid-thumb{width:58px;height:58px}
}

/* ============================================================================
   ALVO DE TOQUE POR APONTADOR (04/09/2026).

   Medido com ponteiro grosso nos cinco tamanhos, declarando os controles como
   alvos de rota (o que o portao da casa nunca fez para estas telas):

   - `.mid-abas button` nasce com 44px, mas o bloco `min-width:760px` mais
     acima RESETA para `min-height:0`: em tablet (768x1024 e 1024x768, os dois
     com dedo) a fita de abas media 41px. E a mesma armadilha que o app.css ja
     tinha documentado: correcao presa a um @media de LARGURA quando quem
     decide e o APONTADOR. Vale para a Central de Midia e para o Financeiro,
     que reusa esta fita.
   - `.mid-btn` media 41px e `.mid-campo input/select` 43px em todos os
     tamanhos, incluindo o botao Agendar, que e a acao final da tela.

   46 e nao 44 por causa do subpixel, mesma folga do resto da casa.
   ========================================================================== */
@media (any-pointer: coarse){
  .mid-abas button { min-height: 46px; }
  .mid-btn { min-height: 46px; }
  .mid-campo input, .mid-campo select { min-height: 46px; }
}