/* Camada ADAPTÁVEL partilhada (07/11/2026, revisão de todas as telas): a mesma regra em todas as páginas da plataforma
   (agência, cliente, acesso, links e apps), carregada DEPOIS do CSS de cada casca. Só tokens (Guardião LV-R5).
   Tamanhos de ecrã (Material 3, window size classes): telemóvel < 600 px · tablet 600–1023 px · computador ≥ 1024 px.
   - Telemóvel: corpo 16 px, controlos de 44 px, cabeçalho de 56 px com ícones de 24 px, barra de navegação em baixo.
   - Tablet e computador: navegação EM CIMA, o mesmo padrão na agência e no cliente (pedido do dono, 07/11/2026): logótipo,
     destinos com ícone e texto e, na agência, «Mais ▾» com todas as outras apps. No tablet a barra passa a 2 linhas.
   - Tema: Auto → Claro → Escuro (publico/tema.js; tokens escuros com :root[data-tema="escuro"]). */

/* ---------- telemóvel: a escala de toque (os tokens mudam; os componentes seguem sozinhos) ---------- */
@media (max-width: 599px) {
  :root {
    --t-corpo: var(--t-corpo-movel);
    --t-pequeno: var(--t-pequeno-movel);
    --t-lead: var(--t-lead-movel);
    --t-h3: var(--t-lead-movel);
    --altura-topo: var(--altura-topo-movel);
    --controlo: var(--controlo-toque);
    --controlo-pequeno: var(--controlo-toque);
  }
  .num { font-size: var(--t-h2); }
  /* ligações soltas (fora de uma frase) e o «Mostrar» da palavra-passe: alvo de 44 px */
  .ligacao, button.ligacao, .ligacao-forte, .h2-ligacao, .rodape a, .app-rodape a { min-height: var(--controlo-toque); display: inline-flex; align-items: center; }
  .ligacao-forte { display: flex; }
  .tabela-deslizar a, .tabela-rolar a { min-height: var(--controlo-toque); display: inline-flex; align-items: center; }
  .marca { min-height: var(--controlo-toque); }
  .senha-ver { min-height: var(--controlo-toque); min-width: var(--controlo-toque); }
  .btn, .botao { min-width: var(--controlo-toque); }
  .btn-bloco { white-space: normal; text-align: center; }
  .rodape a, .app-rodape a { min-width: var(--controlo-toque); justify-content: center; }
  .caixa-opcao { min-height: var(--controlo-toque); }
  .ligacao { min-width: var(--controlo-toque); }
  .peca-lig, .tabela-cartoes a { min-height: var(--controlo-toque); }
  .tabela-cartoes a { display: inline-flex; align-items: center; }
  /* caixa com o rótulo à volta (ex.: «Obrigatório» na Fábrica): o rótulo inteiro é o alvo de 44 px */
  label:not(.pil-sel):has(> input[type="checkbox"]), label:not(.pil-sel):has(> input[type="radio"]) { display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--controlo-toque); }
}

/* ---------- cabeçalho: logótipo e ícones na mesma escala (telemóvel e tablet: botões só com ícone, 44 × 44) ---------- */
@media (max-width: 1023px) {
  .topo .topo-in { min-height: var(--altura-topo); gap: var(--e-2); }
  .topo .marca .logo { height: var(--icone-toque); }
  .topo .topo-contexto { font-size: var(--t-pequeno); }
  /* botões só com ícone: 44 × 44, ícone de 24, sem caixa (fantasma) */
  .topo .btn-icone { min-width: var(--controlo-toque); min-height: var(--controlo-toque); padding: 0; background: transparent; color: var(--texto); border-radius: var(--raio-pilula); }
  .topo .btn-icone:hover { background: var(--fundo-3); }
  .topo .btn-icone .i { width: var(--icone-toque); height: var(--icone-toque); }
  .topo .btn-icone > span:not(.contador) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- barra de navegação: em baixo no telemóvel, rail no tablet, escondida no computador ---------- */
:is(.barra-nav, .nav-fundo) { display: none; }
:is(.barra-nav, .nav-fundo) a, :is(.barra-nav, .nav-fundo) button { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: var(--controlo-toque); min-width: var(--controlo-toque); padding: var(--e-1) 0; border: 0; background: transparent; color: var(--texto-2); text-decoration: none; font: inherit; font-size: var(--t-mini); font-weight: 500; border-radius: var(--raio-3); position: relative; cursor: pointer; }
:is(.barra-nav, .nav-fundo) .i-nav { width: var(--icone-toque); height: var(--icone-toque); }
:is(.barra-nav, .nav-fundo) a[aria-current="page"], :is(.barra-nav, .nav-fundo) [aria-current="true"] { color: var(--acento); font-weight: 600; }
:is(.barra-nav, .nav-fundo) a[aria-current="page"] .i-nav, :is(.barra-nav, .nav-fundo) [aria-current="true"] .i-nav { background: var(--acento-suave); border-radius: var(--raio-pilula); box-shadow: 0 0 0 var(--e-1) var(--acento-suave); }
:is(.barra-nav, .nav-fundo) .contador { position: absolute; top: 0; left: calc(50% + var(--e-1)); }
@media (max-width: 599px) {
  :is(.barra-nav, .nav-fundo) { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; min-height: var(--altura-barra-fundo); padding: var(--e-1) var(--e-1) calc(var(--e-1) + env(safe-area-inset-bottom)); background: var(--vidro); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 -1px 0 var(--fundo-3); }
}

/* ---------- barra de cima (agência e cliente): destinos com ícone e texto; «Mais ▾» na agência ---------- */
.topo-app .nav-principal ul { align-items: center; }
.topo-app .nav-principal a, .topo-app .nav-mais { display: inline-flex; align-items: center; gap: var(--e-1); min-height: var(--controlo); padding: 0 var(--e-3); border: 0; border-radius: var(--raio-2); background: transparent; color: var(--texto-2); font: inherit; font-size: var(--t-pequeno); text-decoration: none; white-space: nowrap; cursor: pointer; position: relative; }
.topo-app .nav-principal a .i-nav { margin-right: 0; }
.topo-app .nav-principal .contador { margin-left: 0; }
.topo-app .nav-mais:hover, .topo-app .nav-principal a:hover { color: var(--texto); background: var(--fundo-3); }
.topo-app .nav-principal a[aria-current="page"] { color: var(--texto); font-weight: 600; background: var(--selecao); }
.topo-app .nav-mais[aria-expanded="true"], .topo-app .nav-mais[aria-current="true"] { color: var(--texto); font-weight: 600; background: var(--selecao); }
.topo-app .nav-seta { width: var(--icone); height: var(--icone); transition: transform var(--duracao); }
.topo-app .nav-mais[aria-expanded="true"] .nav-seta { transform: rotate(180deg); }
/* tema: um só ícone à vista (Auto, Claro ou Escuro) */
.tema-botao .tema-i { display: none; }
.tema-botao[data-modo="auto"] .tema-contraste, .tema-botao[data-modo="claro"] .tema-sol, .tema-botao[data-modo="escuro"] .tema-lua { display: block; }
/* computador estreito (1024–1279 px): as ações ficam só com o ícone, para os destinos caberem numa linha */
@media (max-width: 1279px) {
  .topo-largo .topo-contexto { display: none; }
  .topo-app .topo-acoes .btn-icone > span:not(.contador) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* tablet (600–1023 px): a barra de cima em 2 linhas — logótipo e ações; por baixo, os destinos (como a barra de separadores
   do iPadOS 18, em cima) — com alvos de 44 px */
@media (min-width: 600px) and (max-width: 1023px) {
  .topo-app .topo-in { flex-wrap: wrap; row-gap: 0; }
  .topo-app .nav-principal { display: block; order: 3; flex: 1 0 100%; margin-left: 0; } /* componentes.css esconde .topo-nav < 900 px */
  .topo-app .nav-principal ul { justify-content: space-between; overflow-x: auto; scrollbar-width: none; }
  .topo-app .nav-principal a, .topo-app .nav-mais { min-height: var(--controlo-toque); padding: 0 var(--e-2); }
  .topo-app .topo-acoes, .topo-app .topo-nav ~ .topo-acoes { margin-left: auto; } /* os destinos estão na 2.ª linha */
}
/* telemóvel: os destinos vão para a barra de baixo */
@media (max-width: 599px) {
  .topo-app .nav-principal { display: none; }
  .topo-app .topo-acoes, .topo-app .topo-nav ~ .topo-acoes { margin-left: auto; gap: 0; }
}

/* ---------- «Mais»: a lista completa (todas as apps, todos os clientes), sempre por cima do conteúdo, com scrim ---------- */
.lado-cab, .lado-scrim { display: none; }
.lado ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.lado a { display: flex; align-items: center; gap: var(--e-2); min-width: 0; min-height: var(--controlo); padding: 0 var(--e-2); border-radius: var(--raio-2); color: var(--texto); text-decoration: none; font-size: var(--t-pequeno); }
.lado a:hover { background: var(--fundo-3); }
.lado a[aria-current="page"] { background: var(--selecao); font-weight: 600; }
.lado a .contador { margin-left: auto; }
.lado .lado-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lado .rotulo { display: block; padding: var(--e-3) var(--e-2) var(--e-1); }
.lado .cli { width: var(--icone-nav); height: var(--icone-nav); border-radius: var(--raio-1); display: grid; place-items: center; font-size: var(--t-mini); font-weight: 700; flex: none; }
/* tablet e computador: painel por baixo do «Mais ▾» (alinhado pelo agencia.js), em colunas; o que já está na barra não se repete */
@media (min-width: 600px) {
  .lado { display: none; position: fixed; top: calc(var(--altura-topo) + var(--e-1)); left: var(--e-4); z-index: 80; width: min(760px, calc(100vw - var(--e-4) * 2)); max-height: calc(100dvh - var(--altura-topo) - var(--e-5)); overflow-y: auto; overscroll-behavior: contain; padding: var(--e-2) var(--e-3) var(--e-3); border-radius: var(--raio-3); background: var(--cartao-elevado); box-shadow: var(--sombra-2); }
  .lado.aberto { display: block; }
  .lado .no-topo { display: none; }
  .lado-grupos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 var(--e-4); }
  .lado-clientes { grid-column: 1 / -1; }
  .lado-clientes ul { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); column-gap: var(--e-4); }
  .lado-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 49; background: color-mix(in srgb, var(--cinza-900) 30%, transparent); }
}
@media (min-width: 600px) and (max-width: 1023px) { .lado a { min-height: var(--controlo-toque); } .lado { top: calc(var(--altura-topo) + var(--controlo-toque) + var(--e-1)); max-height: calc(100dvh - var(--altura-topo) - var(--controlo-toque) - var(--e-5)); } }
/* telemóvel: gaveta modal a partir da esquerda */
@media (max-width: 599px) {
  .lado, .app-agencia .lado { position: fixed; top: 0; bottom: 0; left: 0; z-index: 80; display: block; width: min(320px, calc(100vw - var(--e-7) * 2)); height: auto; padding: var(--e-2) var(--e-3) calc(var(--e-5) + env(safe-area-inset-bottom)); background: var(--fundo); box-shadow: var(--sombra-2); overflow-y: auto; overscroll-behavior: contain; transform: translateX(-105%); visibility: hidden; transition: transform var(--duracao), visibility 0s linear var(--duracao); }
  .lado.aberto { transform: none; visibility: visible; transition: transform var(--duracao); }
  .lado-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); min-height: var(--altura-topo); margin-bottom: var(--e-2); }
  .lado-cab b { font-size: var(--t-lead); }
  .lado-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 79; background: color-mix(in srgb, var(--cinza-900) 45%, transparent); }
  body.menu-aberto { overflow: hidden; }
}

/* ---------- KPIs: grelha compacta (2 × 2 no telemóvel) e estado vazio útil ---------- */
.kpis .cartao { display: grid; align-content: start; gap: var(--e-1); }
.kpis .cartao > * + * { margin-top: 0; }
.ativ-numeros.kpis { margin-bottom: var(--e-5); }
.kpis-vazio { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); }
.kpis-vazio .cresce { flex: 1 1 220px; min-width: 0; }
.kpis-vazio .cresce b { display: block; }
@media (min-width: 600px) { .kpis.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kpis.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .g4, .kpis.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); }
  .kpis.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-2); }
  .kpis .cartao { padding: var(--e-3); }
  .kpis .cartao .pequeno, .kpis .cartao .mudo { font-size: var(--t-mini); }
}

/* ---------- tabelas: no telemóvel passam a lista de cartões (uma linha = um cartão), feita por adaptavel.js ---------- */
.tabela-cartoes { display: none; list-style: none; margin: 0; padding: 0; }
@media (max-width: 599px) {
  .tem-cartoes { display: none; }
  .tabela-cartoes { display: grid; gap: var(--e-2); }
  .tabela-cartoes > li { background: var(--cartao); border-radius: var(--raio-3); padding: var(--e-3); display: grid; gap: var(--e-2); min-width: 0; }
  .tc-titulo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2); font-weight: 600; min-width: 0; }
  .tc-titulo .ajuda { font-weight: 400; }
  .tabela-cartoes dl { margin: 0; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--e-1) var(--e-3); }
  .tabela-cartoes dl > div:first-child { grid-column: 1 / -1; }
  .tabela-cartoes dt { color: var(--texto-2); font-size: var(--t-pequeno); }
  .tabela-cartoes dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
  .tc-acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); }
}

/* ---------- lista de cartões própria (sem tabela em nenhum tamanho): pessoas e apps de cada cliente ---------- */
.lista-cartoes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.lista-cartoes > li { background: var(--cartao); border-radius: var(--raio-3); padding: var(--e-4); display: grid; gap: var(--e-3); align-content: start; min-width: 0; }
.lista-cartoes h3 { font-size: var(--t-h3); }
:is(.lista-cartoes, .pessoas-cli) .add-pessoa { display: flex; gap: var(--e-2); }
:is(.lista-cartoes, .pessoas-cli) .add-pessoa input { flex: 1; min-width: 0; min-height: var(--controlo); border: 0; border-radius: var(--raio-2); background: var(--campo); padding: 0 var(--e-3); }
:is(.lista-cartoes, .pessoas-cli) .liberar { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: var(--e-2); }
:is(.lista-cartoes, .pessoas-cli) .liberar legend { padding: 0; margin-bottom: var(--e-1); font-size: var(--t-pequeno); color: var(--texto-2); }
:is(.lista-cartoes, .pessoas-cli) .liberar label { display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--controlo); padding: 0 var(--e-3); border-radius: var(--raio-pilula); background: var(--fundo-3); font-size: var(--t-pequeno); cursor: pointer; }
:is(.lista-cartoes, .pessoas-cli) .liberar label:has(input:checked) { background: var(--acento-suave); color: var(--texto); font-weight: 600; }
:is(.lista-cartoes, .pessoas-cli) .liberar input { accent-color: var(--acento); margin: 0; }
:is(.lista-cartoes, .pessoas-cli) .liberar label:has(input:focus-visible) { outline: 2px solid var(--foco); outline-offset: 2px; }

/* ---------- ecrãs de acesso: as ligações secundárias centradas como o resto ---------- */
.acesso-centro { justify-content: center; text-align: center; }
/* a mensagem de estado vazia das apps não ocupa espaço (continua no DOM para ser anunciada) */
.lv-painel > [data-lv-estado]:empty, .lv-painel [data-lv-estado]:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; min-height: 0; }

#est-gal-vazia .btn { margin-left: var(--e-2); }

/* ---------- campo de ficheiro com botão próprio (adaptavel.js) ---------- */
.ficheiro-btn { justify-self: start; cursor: pointer; }
.ficheiro-campo:focus-visible + .ficheiro-btn { outline: 2px solid var(--foco); outline-offset: 2px; }
.ficheiro-nome { display: block; margin-top: var(--e-1); }
*:has(> .ficheiro-campo) { position: relative; }

/* ---------- caixas e opções: sempre na cor do sistema; grupos sem a borda nativa ---------- */
input[type="checkbox"], input[type="radio"] { accent-color: var(--acento); }
[data-painel="fabrica"] fieldset { border: 0; margin: 0; padding: var(--e-3); background: var(--fundo-2); border-radius: var(--raio-3); min-width: 0; }
[data-painel="fabrica"] .campo { max-width: var(--largura-texto); }

/* ---------- app embebida (Tilinta, Álbum): barra de título da casca com o nome da app ---------- */
.app-barra { display: flex; align-items: center; gap: var(--e-2); min-height: var(--controlo-toque); padding-block: 0; }
.app-barra h1 { font-size: var(--t-h3); margin: 0; }
.app-barra .btn { min-width: var(--controlo-toque); padding: 0 var(--e-2); }
.app-barra + .quadro-cliente { height: calc(100dvh - var(--altura-topo) - var(--controlo-toque)); }
.quadro-agencia.quadro-com-cab { height: calc(100dvh - var(--altura-topo) - var(--e-7) * 4); min-height: var(--texto-max-altura); }
@media (max-width: 599px) {
  .app-barra + .quadro-cliente { height: calc(100dvh - var(--altura-topo) - var(--controlo-toque) - var(--altura-barra-fundo) - env(safe-area-inset-bottom)); }
  /* Aprovar é um dos 5 destinos: a barra de baixo fica sempre (Apple HIG: só se esconde em ecrãs modais) */
  .modo-tarefa .nav-fundo { display: grid; }
  .modo-tarefa main { padding-bottom: calc(var(--altura-barra-fundo) + var(--e-5) + env(safe-area-inset-bottom)); }
  .modo-tarefa .aviso-toast { top: auto; bottom: calc(var(--altura-barra-fundo) + var(--e-3) + env(safe-area-inset-bottom)); }
}

/* ---------- quadro das fases do cliente: 6 colunas cabem no computador; lista agrupada no telemóvel ---------- */
.fluxo { grid-auto-columns: minmax(150px, 1fr); }
@media (max-width: 599px) {
  .fluxo { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); overflow: visible; }
  .fluxo .coluna { min-height: 0; }
  .fluxo .coluna:has(.coluna-vazia) .pecas { display: none; }
  .fluxo .pecas { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* Piloto: as duas ações do cabeçalho juntas à direita (não espalhadas) */
.pil-cab .pil-pedir-btn + .pil-pedir-btn { margin-left: 0; }

/* ---------- Piloto no telemóvel: o primeiro post à vista (o resto do cabeçalho mais compacto) ---------- */
@media (max-width: 599px) {
  .cab-cliente > div:not(.cab-acoes) .mudo, .cab-cliente .cab-acoes { display: none; }
  .cab-cliente + .abas { margin-top: var(--e-3); }
  .pil-faixa, .pil-conta { font-size: var(--t-pequeno); }
  /* No telemóvel a tarefa é ver e decidir posts: «Importar mês», «Pedir imagens» (o Estúdio está na barra de baixo) e
     «Avisar o cliente por e-mail» ficam no computador, para o primeiro post aparecer no primeiro ecrã. */
  .pil-pedir-btn, .pil-equipa { display: none; }
  .pil-filtros { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .pil-filtros > * { flex: none; }
  .pil-faixa { padding: var(--e-2) var(--e-3); }
  /* Piloto (todos os clientes): o cliente e o estado do Instagram numa só linha */
  .pil-cab { flex-wrap: nowrap; align-items: center; }
  .pil-cab .pil-cliente { flex: 0 0 45%; }
  .pil-cab .pil-conta { flex: 1 1 auto; min-width: 0; }
  /* Calendário: a grelha logo a seguir à barra Mês/Semana; as melhores horas e os horários fixos vão para depois */
  #pil-p-calendario { display: flex; flex-direction: column; }
  #pil-p-calendario > .cal-corpo { order: 1; }
  #pil-p-calendario > .cal-horas { order: 2; }
  /* Biblioteca: os filtros numa linha que desliza (como em «Para aprovar») */
  .bib-filtros { display: flex; flex-wrap: nowrap; align-items: end; gap: var(--e-2); overflow-x: auto; scrollbar-width: none; }
  .bib-filtros > * { flex: none; min-width: 9rem; }
  /* arrastar uma pasta não existe no telemóvel */
  .lv-zona { display: none; }
}

/* ==========================================================================================================================
   TELAS v2 (07/11/2026, pedido do dono «faz em tudo»; modelo: o «Hoje» v2). docs/COMO-SE-FAZ.md, «Essencial num ecrã».
   1) Ecrã (body.ecra, ≥ 1024 px): o conteúdo tem a altura da janela; o cabeçalho da página em cima e .ecra-corpo com o resto;
      uma lista longa desliza SÓ dentro do seu painel (.painel-rolar), nunca a página.
   2) Cabeçalho único: título, uma linha de contexto, até 2 ações à direita.
   3) 2.º nível: .nivel2 (linha recolhida com o número e «ver») e o painel de detalhe (dialog.peek, adaptavel.js).
   ========================================================================================================================== */
.painel { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: var(--e-3); border-radius: var(--raio-3); background: var(--cartao-elevado); }
.painel-cinza { background: var(--cartao); }
.painel > h2, .painel > .painel-tit { display: flex; align-items: center; gap: var(--e-2); margin: 0 0 var(--e-2); font-size: var(--t-h3); }
.painel .ver { margin-left: auto; font-size: var(--t-pequeno); font-weight: 400; }
.painel-rolar { flex: 1 1 auto; min-height: 0; overflow: auto; }
.painel-rolar:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.vazio-painel { display: grid; justify-items: center; gap: var(--e-2); padding: var(--e-5) var(--e-3); text-align: center; }
.vazio-painel p { margin: 0; }
@media (min-width: 1024px) {
  /* agência */
  .ecra .app-agencia { height: calc(100dvh - var(--altura-topo)); min-height: 0; }
  .ecra .palco { height: 100%; min-height: 0; overflow: hidden; padding: var(--e-3) var(--e-4) var(--e-4); display: flex; flex-direction: column; gap: var(--e-3); }
  /* cliente */
  /* a página é uma coluna da altura da janela (com a faixa de «Ver como o cliente», se houver) e o main fica com o resto */
  body.app-cliente.ecra { display: flex; flex-direction: column; height: 100dvh; min-height: 0; }
  body.app-cliente.ecra > * { flex: none; }
  body.app-cliente.ecra > main { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: var(--e-3); padding-block: var(--e-3) var(--e-4); }
  .ecra :is(.palco, main) > * { flex: none; margin-top: 0; margin-bottom: 0; }
  .ecra :is(.palco, main) > :is(.ecra-corpo, .hoje) { flex: 1 1 auto; min-height: 0; }
  .ecra .painel { overflow: hidden; }
  .ecra .ecra-corpo > .painel-rolar, .ecra .ecra-rolar { height: 100%; min-height: 0; overflow: auto; }
  /* cabeçalho único, compacto */
  .ecra .titulo-pag { align-items: center; }
  .ecra .titulo-pag h1 { font-size: var(--t-h2); }
  .ecra .titulo-pag p { margin-top: 0; font-size: var(--t-pequeno); }
  .ecra .vista-cab-cliente .logo-produto { width: var(--logo-produto); height: var(--logo-produto); }
}
.cab-pag-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); margin-left: auto; }

/* 2.º nível recolhido numa linha: <details class="nivel2"><summary>Título <span class="n">3</span> <span class="ver">ver</span></summary>…</details> */
.nivel2 { border-radius: var(--raio-2); background: var(--cartao); min-width: 0; }
.nivel2 > summary { display: flex; align-items: center; gap: var(--e-2); min-height: var(--controlo-toque); padding: 0 var(--e-3); cursor: pointer; list-style: none; font-size: var(--t-pequeno); font-weight: 500; }
.nivel2 > summary::-webkit-details-marker { display: none; }
.nivel2 > summary::after { content: ""; width: var(--e-2); height: var(--e-2); margin-left: auto; border-right: 2px solid var(--texto-2); border-bottom: 2px solid var(--texto-2); transform: rotate(45deg); transition: transform var(--duracao); flex: none; }
.nivel2[open] > summary::after { transform: rotate(-135deg); }
.nivel2 > summary .ver { color: var(--link); font-weight: 400; }
.nivel2 > summary:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.nivel2 > :not(summary) { padding: 0 var(--e-3) var(--e-3); }

/* linha de resumo com «ver» (abre o painel de detalhe) */
.linha-resumo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); min-height: var(--controlo-toque); padding: var(--e-1) var(--e-3); border-radius: var(--raio-2); background: var(--cartao); font-size: var(--t-pequeno); }
.linha-resumo .cresce { flex: 1 1 240px; min-width: 0; }
.linha-resumo .acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0; }

/* painel de detalhe (adaptavel.js): à direita no computador e no tablet; no telemóvel ocupa o ecrã */
.peek-fonte:not(.em-peek) { display: none; }
dialog.peek { position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0; border: 0; border-radius: var(--raio-3) 0 0 var(--raio-3); width: min(560px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; background: var(--cartao-elevado); color: var(--texto); box-shadow: var(--sombra-2); overflow: hidden; }
dialog.peek.peek-largo { width: min(880px, 100vw); }
dialog.peek[open] { display: flex; flex-direction: column; }
dialog.peek::backdrop { background: color-mix(in srgb, var(--cinza-900) 30%, transparent); }
.peek-cab { flex: none; display: flex; align-items: center; gap: var(--e-2); min-height: var(--controlo-toque); padding: var(--e-2) var(--e-2) var(--e-2) var(--e-4); }
.peek-cab h2 { flex: 1; min-width: 0; margin: 0; font-size: var(--t-h3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peek-cab h2:focus { outline: none; }
.peek-fechar { min-width: var(--controlo-toque); min-height: var(--controlo-toque); }
.peek-corpo { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 var(--e-4) var(--e-5); }
.peek-corpo > .em-peek { display: grid; gap: var(--e-3); }
.peek-corpo .secao:first-child, .peek-corpo .em-peek > :first-child { margin-top: 0; }
.peek-img { width: 100%; height: auto; max-height: 50dvh; object-fit: contain; border-radius: var(--raio-2); background: var(--fundo-3); }
@media (max-width: 599px) { dialog.peek, dialog.peek.peek-largo { width: 100vw; border-radius: 0; } }
@media (prefers-reduced-motion: no-preference) { dialog.peek[open] { animation: peek-entrar var(--duracao) ease-out; } @keyframes peek-entrar { from { transform: translateX(var(--e-5)); opacity: 0; } } }

@media (prefers-reduced-motion: reduce) { .lado, .lado.aberto { transition: none; } }
@media (forced-colors: active) { :is(.barra-nav, .nav-fundo) a[aria-current="page"] { text-decoration: underline; } .lado-scrim:not([hidden]) { background: Canvas; opacity: .6; } }
/* ações de um formulário longo dentro do painel de detalhe: sempre à vista no fundo do painel */
.peek-corpo .barra-acoes { position: sticky; bottom: calc(var(--e-5) * -1); z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); margin-inline: calc(var(--e-4) * -1); padding: var(--e-3) var(--e-4) var(--e-5); background: var(--cartao-elevado); box-shadow: 0 -1px 0 var(--fundo-3); }
.peek-corpo .barra-acoes .acoes { margin: 0; }
.peek-corpo .nc-form { background: transparent; padding: 0; }
.peek-corpo .nc-form > h2:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Telas v2 · relatório do mês (agência e cliente): o mês e o PDF numa linha; 3 painéis lado a lado ---------- */
.rel { display: grid; gap: var(--e-3); min-width: 0; }
.rel-barra .campo { display: flex; align-items: center; gap: var(--e-2); }
.rel-barra .campo label { margin: 0; white-space: nowrap; }
.rel-grelha { display: grid; gap: var(--e-3); grid-template-columns: minmax(0, 1fr); }
.rel-grelha .painel-rolar.pilha { display: grid; align-content: start; gap: var(--e-4); }
.rel-grelha .secao-tit { margin-bottom: var(--e-2); }
.rel-linhas .linha-lista { background: var(--cartao-elevado); padding: var(--e-2) var(--e-3); }
@media (min-width: 900px) { .rel-grelha { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
@media (min-width: 1024px) {
  .ecra .rel { height: 100%; grid-template-rows: auto minmax(0, 1fr); }
  .ecra .rel-grelha { min-height: 0; align-items: stretch; }
  .ecra .rel-grelha > .painel { min-height: 0; }
}

/* ---------- Telas v2 · Piloto (app e página do cliente): a vista escolhida ocupa o resto do ecrã ---------- */
.pil-cab .pil-cliente { display: flex; align-items: center; gap: var(--e-2); margin: 0; }
.pil-cab .pil-cliente label { margin: 0; }
@media (min-width: 600px) { .pil-cab { align-items: center; } }
@media (min-width: 1024px) {
  .ecra .pil { display: flex; flex-direction: column; gap: var(--e-2); min-height: 0; }
  .ecra .ecra-corpo > .pil { height: 100%; }
  .ecra .pil > * { flex: none; margin: 0; }
  .ecra .pil > .pil-painel:not([hidden]) { flex: 1 1 auto; min-height: 0; overflow: auto; align-content: start; }
  .ecra .pil-faixa { padding: var(--e-1) var(--e-3); }
  .ecra .pil-tabs .pil-tab { min-height: var(--controlo); }
  /* Para aprovar: filtros e «Avisar o cliente» numa linha; os cartões deslizam dentro do painel */
  .ecra #pil-p-aprovar:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--e-2) var(--e-3); overflow: hidden; }
  .ecra #pil-p-aprovar > .pil-filtros { grid-column: 1; grid-row: 1; }
  .ecra #pil-p-aprovar > .pil-equipa { grid-column: 2; grid-row: 1; padding: 0; background: none; }
  .ecra #pil-p-aprovar > .pil-equipa .ajuda { display: none; }
  .ecra #pil-p-aprovar > :is(.pil-lista, .pil-vazio) { grid-column: 1 / -1; grid-row: 2; min-height: 0; overflow: auto; align-content: start; }
  .ecra #pil-p-aprovar > .pil-lote { grid-column: 1 / -1; grid-row: 3; }
  /* cartões compactos: a imagem mais baixa (a pré-visualização grande abre no painel lateral) */
  /* cartão compacto: miniatura à esquerda, data, legenda em 2 linhas e as 2 decisões; comentários dentro de «Mais ações» */
  .ecra .pil-lista { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: var(--e-2); }
  .ecra .pil-lista .pil-cartao { grid-template-columns: calc(var(--controlo-toque) * 2.5) minmax(0, 1fr); grid-template-rows: auto; align-items: start; }
  .ecra .pil-lista .pil-mini { aspect-ratio: 4 / 5; max-height: none; height: auto; margin: var(--e-2) 0 var(--e-2) var(--e-2); border-radius: var(--raio-2); }
  .ecra .pil-lista .pil-info { padding: var(--e-2) var(--e-3); gap: var(--e-1); }
  .ecra .pil-lista .pil-acoes [data-pil="comentarios"] { display: none; }
  .ecra .pil-lista .pil-mais { padding-top: 0; border-top: 0; }
  .ecra .pil-lista .pil-mais > summary { min-height: var(--controlo); }
  .ecra .pil-lista .pil-data .pil-fuso { display: none; }
  /* Calendário: a grelha do mês com a altura do ecrã */
  .ecra #pil-p-calendario:not([hidden]) { display: flex; flex-direction: column; gap: var(--e-2); overflow: hidden; }
  .ecra #pil-p-calendario > * { flex: none; }
  .ecra #pil-p-calendario > .cal-corpo { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  .ecra .cal-corpo > .cal-semdata { align-self: start; }
  .ecra .cal-corpo > .cal-vista { min-height: 0; overflow: auto; }
  .ecra .cal-corpo > .cal-semdata { position: static; max-height: 100%; overflow: auto; }
  .ecra .cal-vista:has(> .cal-mes) { display: flex; flex-direction: column; }
  .ecra .cal-vista > .cal-mes { flex: 1 1 auto; grid-auto-rows: minmax(0, 1fr); min-height: calc(var(--controlo-toque) * 6 + var(--e-1) * 5); }
  /* cada dia desliza por dentro quando tem mais posts do que cabem (nunca esconde posts); títulos com reticências */
  .ecra .cal-mes .cal-dia { min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .ecra .cal-mes .cal-ficha, .ecra .cal-mes a.cal-ficha { flex: none; max-width: 100%; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .ecra .cal-mes .cal-fichas { grid-template-columns: minmax(0, 1fr); }
  .ecra .cal-mes .cal-fichas > li { min-width: 0; }
  .ecra .cal-mes .cal-pedido .cal-ficha-leg { display: inline; }
  .ecra .cal-mes .cal-pedido .cal-ficha-txt { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Definições: 3 colunas; os horários fixos por baixo do kit */
  .ecra #pil-p-definicoes { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto 1fr; align-items: start; }
  .ecra #pil-p-definicoes > .def-sec:nth-of-type(1) { grid-column: 1; grid-row: 1 / span 2; }
  .ecra #pil-p-definicoes > .def-sec:nth-of-type(2) { grid-column: 2; grid-row: 1 / span 2; }
  .ecra #pil-p-definicoes > .def-sec:nth-of-type(3) { grid-column: 3; grid-row: 1; }
  .ecra #pil-p-definicoes > .def-sec:nth-of-type(4) { grid-column: 3; grid-row: 2; }
  .ecra #pil-p-definicoes > :not(.def-sec) { grid-column: 1 / -1; }
}
.def-falta { background: var(--fundo); }
/* pré-visualização do post: painel lateral à direita no computador e no tablet (no telemóvel, por cima, a ecrã inteiro) */
@media (min-width: 600px) {
  dialog.pil-prev { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(480px, 100vw); height: 100dvh; max-height: 100dvh; border-radius: var(--raio-3) 0 0 var(--raio-3); }
  dialog.pil-prev::backdrop { background: color-mix(in srgb, var(--cinza-900) 30%, transparent); }
}
/* o detalhe do post no calendário e «Importar mês»: o mesmo painel lateral à direita (por cima no telemóvel) */
@media (min-width: 600px) {
  dialog.cal-dlg { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(480px, 100vw); height: 100dvh; max-height: 100dvh; border-radius: var(--raio-3) 0 0 var(--raio-3); overflow: auto; }
  dialog.cal-dlg::backdrop { background: color-mix(in srgb, var(--cinza-900) 30%, transparent); }
}
@media (max-width: 599px) { dialog.cal-dlg { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; } }
@media (max-width: 599px) { dialog.pil-prev { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; } }

/* ---------- Telas v2 · Aprovar (cliente): os posts lado a lado no computador; a fila desliza dentro do painel ---------- */
.aprovar-feed .historico { margin-top: var(--e-3); }
.aprovar-feed .historico[hidden] { display: none; }
.historico > .pilha { padding-top: var(--e-1); }
@media (min-width: 1024px) {
  .ecra .aprovar-feed { max-width: none; width: 100%; height: 100%; display: flex; flex-direction: column; gap: var(--e-2); }
  .ecra .aprovar-feed > * { flex: none; margin: 0; }
  .ecra .aprovar-feed > .titulo-pag { margin: 0; }
  .ecra .aprovar-feed > #lista { flex: 1 1 auto; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-content: start; align-items: start; gap: var(--e-3); padding: var(--e-1); margin: 0; }
  .ecra .aprovar-feed > #lista:empty { display: none; }
  .ecra .aprovar-feed > #lista > * { margin: 0; }
  .ecra .aprovar-feed .ig-img { aspect-ratio: 4 / 5; max-height: 40vh; object-fit: contain; background: var(--fundo-3); }
  .ecra .aprovar-feed > #feito:not([hidden]) { flex: 1 1 auto; }
}

/* ---------- Telas v2 · Memória (app e página do cliente): as secções em grelha, cada cartão desliza por dentro ---------- */
.lv-nivel2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--e-3); align-items: start; }
.lv-nivel2 .nivel2 > .pilha { display: grid; gap: var(--e-2); }
@media (min-width: 1024px) {
  .ecra .lv-painel[data-painel="memoria"] { height: 100%; gap: var(--e-2); }
  .ecra .lv-painel[data-painel="memoria"] > * { flex: none; margin: 0; }
  .ecra .lv-painel[data-painel="memoria"] > .esp-sec { margin: 0 !important; }
  .ecra .lv-painel[data-painel="memoria"] > .lv-grelha { flex: 1 1 auto; min-height: 0; overflow: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(calc(var(--controlo-toque) * 4), 1fr); align-items: stretch; gap: var(--e-3); }
  .ecra .lv-painel[data-painel="memoria"] > .lv-grelha > .lv-sec { min-height: 0; overflow: auto; padding: var(--e-3); }
  .ecra .cli-aba-memoria { overflow: hidden; }
  .ecra .cli-aba-memoria #mem-tit, .ecra .cli-aba-memoria .lv-painel > .ajuda { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- Telas v2 · Estúdio (app e Criativos do cliente): o ecrã escolhido ocupa o resto; formulário e imagens lado a lado ---------- */
@media (min-width: 1024px) {
  .ecra .est { display: flex; flex-direction: column; gap: var(--e-2); min-height: 0; }
  .ecra .ecra-corpo > .est { height: 100%; }
  .ecra .est > * { flex: none; margin: 0; }
  .ecra .est > .est-ecra { flex: 1 1 auto; min-height: 0; overflow: auto; }
  .ecra .est-ecra > .est-criar { height: 100%; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  .ecra .est-criar > * { min-height: 0; overflow: auto; }
  .ecra .est-criar .est-form { position: static; max-height: none; }
  /* «Gerar» sempre à vista no fundo do formulário (o formulário desliza por dentro) */
  .ecra .est-form .est-gerar-barra { position: sticky; bottom: calc(var(--e-4) * -1); z-index: 1; margin: 0 calc(var(--e-4) * -1) calc(var(--e-4) * -1); padding: var(--e-3) var(--e-4) var(--e-4); background: var(--cartao); box-shadow: 0 -1px 0 var(--fundo-3); }
}
/* telemóvel e tablet: as mesmas peças, empilhadas, com o mesmo espaço entre elas */
@media (max-width: 1023px) { .ecra :is(.palco, main) > * + :not(.peek-fonte) { margin-top: var(--e-3); } .ecra .titulo-pag { margin-bottom: 0; } }

/* ---------- Telas v2 · apps em vista (Guardião, Marca, Memória, Fábrica…): a app ocupa o resto do ecrã ---------- */
.fab-grelha { display: grid; gap: var(--e-3); }
.fab-form .painel-rolar.pilha, .fab-grelha .painel-rolar.pilha { display: grid; align-content: start; gap: var(--e-3); }
.fab-acoes { margin: var(--e-2) 0 0; }
@media (min-width: 900px) { .fab-grelha { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; } }
@media (min-width: 1024px) {
  .ecra .lv-painel.ecra-corpo { overflow: auto; }
  .ecra .lv-painel.ecra-corpo > * { flex: none; margin: 0; }
  /* Guardião: os filtros em cima e a lista desliza por dentro */
  .ecra .lv-painel[data-painel="guardiao"] { overflow: hidden; gap: var(--e-2); }
  .ecra .lv-painel[data-painel="guardiao"] > .lv-lista { flex: 1 1 auto; min-height: 0; overflow: auto; align-content: start; }
  /* Fábrica: formulário | pré-visualização e apps feitas, cada um desliza por dentro */
  .ecra .lv-painel[data-painel="fabrica"] { overflow: hidden; gap: var(--e-2); }
  .ecra .lv-painel[data-painel="fabrica"] > .fab-grelha { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  .ecra .lv-painel[data-painel="fabrica"] > .fab-grelha > .painel { min-height: 0; }
  .ecra .lv-painel .lv-barra { margin: 0; }
}

/* ---------- Telas v2 · formulário «Novo cliente» (painel largo): campos alinhados, secções com espaço, prazo só na tácita ---------- */
.nc-form .grelha { align-items: start; }
.nc-form > fieldset + fieldset, .nc-form > p + fieldset { margin-top: var(--e-4); }
.nc-form legend { padding: 0; }
.nc-contacto { display: grid; gap: var(--e-2); }
.nc-contacto > legend { float: left; width: 100%; margin-bottom: var(--e-2); font-weight: 600; }
.nc-contacto > legend + * { clear: both; }
.nc-form fieldset:has(input[name="nc-modo"][value="obrigatoria"]:checked) .campo:has(#nc-prazo) { display: none; }.fab-grelha .esp-sec { margin: 0 0 var(--e-2) !important; }

/* ---------- Telas v2 · área do cliente: Início, Mensagens e Conta ---------- */
.inicio-grelha { display: grid; gap: var(--e-5); }
.inicio-a > .secao:first-child, .inicio-b > .secao:first-child { margin-top: 0; }
.conta-cartoes { margin-top: var(--e-3); }
@media (min-width: 900px) { .conta-cartoes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .ecra .inicio-grelha { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: var(--e-5); }
  .ecra .inicio-grelha > * { min-height: 0; overflow: auto; }
  .ecra .inicio-b > .secao:first-child { margin-top: 0; }
  .ecra .ecra-rolar { overflow: auto; }
  .ecra .msg-grelha { height: 100%; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  .ecra .msg-grelha > form { align-self: start; }
  .ecra .msg-lado { display: flex; flex-direction: column; min-height: 0; }
  .ecra .msg-lado > * { flex: none; }
  .ecra .msg-lado > .msg-pedidos { max-height: 35%; overflow: auto; }
  .ecra .msg-lado > .msg-conversa { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .ecra .msg-conversa > #conversa { flex: 1 1 auto; min-height: 0; overflow: auto; }
  .ecra .msg-conversa > * { flex: none; }
}
@media (max-width: 599px) { .nivel2 > summary .mudo { display: none; } }
.est-gerar-barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); }
.est-gerar-barra .pil-alerta { flex: 1 1 12rem; margin: 0; }
/* Estúdio · Galeria e Pedidos: o detalhe/ações de uma imagem no mesmo painel lateral à direita (por cima no telemóvel) */
@media (min-width: 600px) {
  dialog.est-dlg { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(560px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: var(--raio-3) 0 0 var(--raio-3); overflow: auto; }
  dialog.est-dlg::backdrop { background: color-mix(in srgb, var(--cinza-900) 30%, transparent); }
}
@media (max-width: 599px) { dialog.est-dlg { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; } }

/* ---------- Telas v2 · correções com um mês cheio de dados (revisão da fase 2) ---------- */
/* o que está posicionado (os .vh, por exemplo) fica dentro do ecrã: sem isto alongava o documento e a página voltava a deslizar */
@media (min-width: 1024px) { .ecra .palco, body.app-cliente.ecra > main { position: relative; } }
/* textos longos (caminhos, códigos) nunca alargam um cartão nem a página */
.lv-sec, .lv-sec .lv-meta, .lv-sec code { min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 1024px) {
  .ecra .pil-lista .pil-cartao { min-height: calc(var(--controlo-toque) * 2.5 * 1.25 + var(--e-4)); }
  .ecra .pil-lista .pil-mini { width: calc(var(--controlo-toque) * 2.5 - var(--e-2)); height: calc(var(--controlo-toque) * 2.5 * 1.25 - var(--e-2)); aspect-ratio: auto; }
}
/* Estúdio: cartão de imagem compacto (imagem, formato, data, favorita e «Ações»); o resto no painel lateral */
.est-img-curto { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); }
.est-img-det .est-img-acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); }
@media (min-width: 1024px) { .ecra .est-galeria, .ecra .est-galeria-larga { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } } /* pelo menos 2 filas de imagens a 1440 × 900 */
@media (min-width: 1024px) { .ecra .lv-grelha > .lv-sec > * { flex: none; } } /* Memória: o texto de cada secção nunca encolhe dentro do cartão; é o cartão que desliza (revisão da fase 2) */

/* ---------- Telas v2 · relatório (revisão da fase 3): nada desliza na horizontal; no telemóvel, primeiro o que correu bem e mal ---------- */
.rel-grelha .kpis-vazio { flex-direction: column; align-items: flex-start; }
.rel-grelha .kpis-vazio .cresce { flex: none; }
.rel-tabela-caixa { overflow-x: visible; }
.rel-tabela { width: 100%; table-layout: auto; }
.rel-tabela td, .rel-tabela th { white-space: normal; overflow-wrap: anywhere; }
.rel-tabela td:not(:first-child) { white-space: nowrap; }
.rel-tabela thead th { font-size: var(--t-mini); }
@media (min-width: 900px) { .rel-grelha { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 899px) { .rel-grelha > :nth-child(2) { order: -1; } }
@media (max-width: 599px) { .rel-tabela td, .rel-tabela th { padding-inline: var(--e-1); } }
/* área do cliente no telemóvel: as frases explicativas também a 16 px (o cliente lê-as; revisão da fase 3) */
@media (max-width: 599px) { .app-cliente main :is(p, li).pequeno, .app-cliente main p.mudo, .app-cliente main p.ajuda, .app-cliente main .pequeno.mudo, .app-cliente main .linha-lista .cresce span { font-size: var(--t-corpo); } }
.app-barra .quadro-estado { margin: 0 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); font-size: var(--t-pequeno); color: var(--texto-2); }
.app-barra .quadro-estado:empty { display: none; }
.rel-tabela thead th { overflow-wrap: normal; word-break: keep-all; }