/* ═══════════════════════════════════════════════════════════════════════════
   DOCUMENTOS E BIBLIOTECA NUM APARELHO DE MÃO

   Documentos e Biblioteca — duas das CINCO telas que ainda usam o esqueleto
   antigo `.tres-colunas` (as outras três são comunicacao/etiquetas,
   comunicacao/sugestoes_whatsapp e configuracoes/_casca). O cliente, vendo
   o aplicativo em 03/09: "eu tiraria também biblioteca e tiraria documentos,
   porque para o cara criar um documento aqui é difícil e para visualizar
   também é complicado — TANTO QUE ESTÁ ATÉ TRAVANDO".

   O travamento tem três causas PROVÁVEIS — provável, e não medido: elas saem da
   leitura do código da tela, e ninguém instrumentou a WebView antes e depois.
   Duas foram resolvidas em Ruby: a listagem sem paginação (que era montada em
   TODA tela do recurso) e, cada uma na sua tela, o editor rico do `edit` e o
   <iframe srcdoc> do `show`, que deixam de montar dentro da casca. A terceira é
   geometria, e é o que este arquivo endereça — no papel, porque nesta fatia
   nada foi aberto no navegador: teste de sistema não foi rodado aqui, e a
   prova de que a página passou a ser UMA rolagem só está escrita em
   test/system/documentos_no_aparelho_test.rb, esperando quem faz o merge.

   Entra DEPOIS de 04_layout.css e de 26_aparelho_de_mao.css: ele especializa o
   `.tres-colunas` no estreito, não o substitui — no computador aquela folha
   continua mandando, e nada aqui a alcança.

   E SÓ ALCANÇA QUEM PEDIU. Tudo aqui exige o modificador
   `.tres-colunas--empilha-no-estreito`, posto à mão nos dois `_paineis` desta
   fatia. Escrever direto em `.tres-colunas` mudaria também o estreito das
   outras três telas — nenhuma delas olhada nem testada aqui, e mexer no
   layout de tela que ninguém abriu é exatamente o defeito que esta fatia
   veio consertar em outra.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────────
   1. TRÊS ROLAGENS DENTRO DE UMA TELA DE 390 PONTOS  (defeito, não estilo)

   `.tres-colunas` é um grid com `min-height: calc(100vh - topo)` e cada coluna
   com `overflow-y: auto`. Abaixo de 760px ele vira UMA coluna — e é aí que a
   conta fica impossível: as três caixas passam a dividir a mesma altura de
   janela, cada uma com ~1/3 dela e barra de rolagem PRÓPRIA. A pessoa rola a
   página e nada anda; rola dentro da caixa e anda um terço de tela. Numa das
   caixas está o documento inteiro.

   No estreito o certo é o oposto do desktop: a página é UMA rolagem só, as
   caixas têm a altura do próprio conteúdo, e elas se empilham na ordem em que
   estão escritas. São DUAS, e não três: `.tres-colunas__coluna--listas`
   (pastas, prateleiras) já sai de cena abaixo de 1100px por 04_layout.css —
   no aparelho sobram a lista e o documento.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .tres-colunas--empilha-no-estreito {
    /* `min-height` de 100vh num grid de uma coluna só estica as linhas e
       inventa vão morto entre elas — a altura passa a ser a do conteúdo. */
    min-height: 0;
  }

  .tres-colunas--empilha-no-estreito .tres-colunas__coluna {
    /* A rolagem volta a ser a da página. `visible` (e não `auto`) é o que faz
       as três caixas somarem altura em vez de dividirem a janela.

       AQUI NÃO PRECISA DE `!important`: o `overflow-y: auto` que se está
       vencendo é de FOLHA (04_layout.css:233), e este seletor tem uma classe a
       mais. Quem precisa de `!important` é só o que disputa com `style=` — as
       duas regras logo abaixo. */
    overflow-y: visible;
    /* Sem a borda vertical, que no empilhado desenha um traço no lugar errado:
       aqui os vizinhos ficam em cima e embaixo, não ao lado. */
    border-right: 0;
    border-bottom: 1px solid var(--cor-borda);
  }
  .tres-colunas--empilha-no-estreito .tres-colunas__coluna:last-child { border-bottom: 0; }

  /* As colunas usam `height: 100%` com flex por dentro (o rodapé de "Novo
     documento" fica colado embaixo). Sem altura definida pelo grid, esse 100%
     vira zero — a caixa interna precisa medir pelo conteúdo.

     `!important` NÃO É ENFEITE AQUI, e é a diferença entre esta folha consertar
     a geometria e ser letra morta: a raiz das duas colunas de lista é
     `<div class="pilha pilha--2" style="height: 100%; display:flex; ...">` e o
     miolo é `<div class="cresce" style="overflow-y: auto;">` — os dois com
     estilo INLINE, escrito antes desta fatia. Regra de folha não vence atributo
     `style`; sem `!important` a rolagem própria da lista continuava lá, que é
     exatamente o defeito que este arquivo veio consertar. Tirar os `style=`
     inline das duas `_coluna_lista` seria mais limpo, mas mexe também no largo
     — e no largo aquela geometria está certa e ninguém reclamou dela. */
  .tres-colunas--empilha-no-estreito .tres-colunas__coluna > .pilha { height: auto !important; }
  .tres-colunas--empilha-no-estreito .cresce { overflow-y: visible !important; }
}

/* ──────────────────────────────────────────────────────────────────────────
   2. A PRÉVIA QUE DEIXOU DE SER UM IFRAME

   No aparelho o corpo do documento entra na própria página (ver
   documentos/show.html.erb). Ele é HTML de terceiro — vem do editor, do ETL do
   legado ou de um copiar-e-colar de site — então precisa de dois cuidados que
   o <iframe> dava de graça: não estourar a largura da tela e não herdar o
   tamanho de fonte de um documento de papel.
   ────────────────────────────────────────────────────────────────────────── */
.documento-previa {
  max-width: 100%;
  overflow-x: auto;
  overflow-wrap: anywhere;
  font-size: var(--texto-md);
  line-height: 1.6;
  color: var(--cor-texto);
}
.documento-previa img { max-width: 100%; height: auto; }
.documento-previa table { max-width: 100%; }
/* O corpo é HTML de terceiro e o `style` dele sobrevive à sanitização (o
   HtmlSeguro poda `position` e `z-index`, não largura): um `width: 100vw`
   colado de um site empurraria a tela inteira para o lado. O teto vale para
   qualquer DESCENDENTE — e não só para os filhos diretos, que era o que a
   regra dizia enquanto o comentário prometia outra coisa: o `100vw` costuma
   vir numa tabela lá dentro, não no primeiro <div>. É a última coisa que o
   <iframe> ainda dava de graça. */
.documento-previa * { max-width: 100% !important; }

/* O corpo dentro do formulário: mesma prévia, com a moldura que diz "isto aqui
   você está lendo, não editando". */
.documento-previa--somente-leitura {
  padding: var(--esp-3);
  border: 1px dashed var(--cor-borda);
  border-radius: var(--raio-2);
  background: var(--cor-fundo);
}