/* ═══════════════════════════════════════════════════════════
   LEITURA MÓVEL — uma folha só para toda a plataforma (Telmo, 03/08:
   «no telemóvel ter leitura, além do menu, também dentro das páginas»).
   O limiar é o do ambiente mobile da Convenção UI: ≤920px.

   Chega às páginas por DOIS caminhos, sempre a mesma folha:
   1. linkada no index.html do shell (cobre as pages/ parciais);
   2. injetada pelo shell em cada iframe same-origin (sysLeituraEmbed,
      assets/modules.js) — cobre TODOS os módulos embebidos, mesmo os
      que não a linkam; o link direto nos módulos serve quem os abre
      fora do shell.

   Secção A: genéricos de ELEMENTO — não conhecem classes de módulo
   nenhum, por isso valem em qualquer documento. A regra de leitura é
   uma só: nada se corta; o que não cabe ROLA no próprio elemento (a
   página nunca ganha scroll horizontal inteiro por causa de uma tabela).
   Secção B: classes do design system do shell — só fazem efeito no
   documento do shell e nas pages/ parciais; nos módulos não existem.
   ═══════════════════════════════════════════════════════════ */

/* ─── A. genéricos (qualquer documento) ─── */
@media (max-width:920px){
  html{ -webkit-text-size-adjust:100%; text-size-adjust:100% }

  /* média nunca transborda o ecrã */
  img{ max-width:100%; height:auto }
  video,canvas{ max-width:100% }

  /* uma tabela larga vira caixa rolável — lê-se a arrastar, em vez de
     espremer as colunas até à ilegibilidade ou cortar à direita.
     `display:block` mantém o layout de tabela por dentro (caixa anónima).
     Quem precisar de uma tabela intacta marca-a com .leitura-intacta. */
  table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100% }
  table.leitura-intacta{ display:table; overflow:visible }

  pre{ overflow-x:auto; max-width:100% }

  /* campos com largura fixa desenhada para desktop não empurram a página */
  input,select,textarea{ max-width:100% }

  /* A RAIZ do «faz zoom quando carrego num input» (João, 04/08): o Safari do
     iPhone amplia a página inteira ao focar qualquer campo com letra <16px —
     e o design system usa 12–13px nos campos. A regra vale para TODOS os
     documentos (shell + módulos injetados) e é !important de propósito: os
     campos declaram tamanhos por classe (.field input, .chat-search input, …)
     que ganhariam sempre a um seletor de elemento, e listar as classes todas
     era garantir que a próxima esquecia-se. NUNCA resolver isto com
     maximum-scale/user-scalable no viewport — proibir o zoom é anti-acessível;
     dar 16px aos campos tira ao Safari o motivo para o fazer. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),
  select,textarea,[contenteditable="true"]{ font-size:16px !important }
}

/* ─── B. design system do shell (pages/ parciais) ─── */
@media (max-width:920px){
  /* módulo LARGO embebido: o shell marca o wrap com .embed-pan (sysPanEmbed,
     assets/modules.js) quando o documento transborda o iframe — o iframe
     compõe a 920px de largura virtual e ANDA-SE PARA O LADO no wrap, com o
     dedo (Telmo 04/08). Módulo que cabe nunca leva a classe. */
  .page-iframe-wrap.embed-pan{ overflow-x:auto; -webkit-overflow-scrolling:touch }
  .page-iframe-wrap.embed-pan .page-iframe{ width:920px; min-width:920px }

  .page-title{ font-size:22px }

  /* separadores roláveis na horizontal, como as salas dos módulos
     (REGRAS §6: barra transborda, scrollbar escondida) */
  .tabs{ overflow-x:auto; scrollbar-width:none }
  .tabs::-webkit-scrollbar{ display:none }
  .tab{ white-space:nowrap; flex-shrink:0 }

  /* grids de colunas fixas empilham para uma coluna de leitura */
  .proc-filters{ grid-template-columns:repeat(3,1fr) }   /* pesquisa numa linha, os 3 filtros por baixo */
  .proc-filters > input{ grid-column:1 / -1 }
  .aprov-campos{ grid-template-columns:1fr }
  .field.row-2{ grid-template-columns:1fr }
  .extv-kan{ grid-template-columns:1fr }
  .hd-media{ grid-template-columns:1fr }
  .cal-ev-body{ grid-template-columns:1fr }
  .dept-section.card-half{ flex-basis:100%; max-width:100% }
}

/* ─── C. duas maneiras de LER uma tabela no telemóvel (07/10/2026) ───
   A regra de cima continua a de sempre (o que não cabe rola na própria caixa).
   Quem quiser outra marca a tabela:
   · .tabela-cartoes — tabela de LISTA: cada linha vira um cartão e cada célula
     diz o que é pelo `data-label` (o Agendador);
   · .coluna-fixa — MATRIZ larga (Módulos & Áreas, Taxonomia): rola na mesma,
     mas a 1.ª coluna fica presa — sem ela, a meio da matriz não se sabe de que
     linha é a célula. */
/* até 920 px (tablet / meia janela) e não só no telemóvel: a 730 px as 8 colunas do
   Agendador espremiam o nome numa palavra por linha e cortavam os botões */
@media (max-width:920px){
  table.tabela-cartoes{ display:block; overflow:visible }
  table.tabela-cartoes thead{ display:none }
  table.tabela-cartoes tbody, table.tabela-cartoes tr{ display:block }
  table.tabela-cartoes tr{ padding:10px 12px; border-bottom:1px solid var(--line) }
  /* a etiqueta à esquerda, os valores juntos à direita (dois selos não se espalham) */
  table.tabela-cartoes td{ display:flex; gap:6px; align-items:baseline; justify-content:flex-end; flex-wrap:wrap;
    padding:3px 0 !important; border:0 !important; text-align:right !important; white-space:normal }
  table.tabela-cartoes td:first-child{ display:block; text-align:left !important; padding-bottom:6px !important }
  table.tabela-cartoes td[data-label]::before{ content:attr(data-label); margin-right:auto; color:var(--text3);
    font-size:11px; font-family:var(--font-ui, system-ui, sans-serif); flex:none }
  /* campo sem valor não ocupa uma linha só com a etiqueta */
  table.tabela-cartoes td[data-label]:empty{ display:none }
  table.tabela-cartoes td:last-child:not([data-label]){ justify-content:flex-start; flex-wrap:wrap; gap:6px; padding-top:6px !important }
}
@media (max-width:920px){
  table.coluna-fixa th:first-child, table.coluna-fixa td:first-child{
    position:sticky; left:0; z-index:1; background:var(--bg1); box-shadow:1px 0 0 var(--line) }
  /* a célula presa tem de ser OPACA: a linha esbatida (módulo oculto) esbate o
     conteúdo, não o fundo — senão vê-se a coluna que desliza por trás */
  table.coluna-fixa tr.sd-row-oculto td:first-child{ opacity:1 }
  table.coluna-fixa tr.sd-row-oculto td:first-child > *{ opacity:.75 }
}

/* ─── D. cabeçalho da página no telemóvel (07/10/2026) ───
   `.page-title-block` é flex:1 ao lado das `.page-actions`: com dois botões, a
   descrição ficava numa coluna de uma palavra por linha (Utilizadores). No
   telemóvel o título ocupa a linha e os botões descem para baixo dele. */
@media (max-width:640px){
  .page-head{ gap:12px }
  .page-head > .page-title-block{ flex:1 1 100% }
  .proc-filters{ grid-template-columns:1fr }
}

/* ─── E. cabeçalho de um bloco (`.widget-head`) no telemóvel (07/10/2026) ───
   Era flex sem quebra: título + pesquisa com `min-width:200px` no próprio HTML
   passavam 40 px do ecrã (Módulos & Áreas). Quebra só quando não cabe. */
@media (max-width:640px){
  .widget-head{ flex-wrap:wrap }
  .widget-actions{ flex-wrap:wrap; max-width:100% }
  .widget-actions input{ min-width:0 !important; flex:1 1 160px; max-width:100% }
}