/* Proporções da tela Gerar ficha (item 7, 14/09/2026).
   Especificação: docs/superpowers/specs/2026-09-12-proporcoes-telas-design.md (decisão 6, etapa 1).
   Plano: docs/superpowers/plans/2026-09-14-proporcoes-gerar-ficha.md.
   Aceitação: testes-preservacao/claude-proporcoes-gerar-ficha.test.cjs.
   Antes, em 1366x768 no ensaio: lista do passo 2 em 588 px (76,6%) e a área inteira rolando.
   Duas partes: as proporções (os dois primeiros blocos) e os passos em pílula (o último), pedidos pelo Yan em 14/09.
   Só vale no #main cuja filha direta é a faixa de passos com a barra, o que só existe em Gerar ficha. O escopo tem dois
   ids de propósito: as regras de geracao-ajustes.css começam com #main:has(#ger-pac-lista) e só perdem para um escopo
   de mesmo peso carregado depois. Esta é a última folha de estilo do documento. Só CSS: marcação e JS não mudam. */
@media screen and (min-width:701px){
  /* Voltar e cabeçalho da área dividem a primeira linha; a faixa de passos vem logo abaixo; o conteúdo fica com o resto.
     O espaço de cima sai do padding do #main e vira margem da primeira linha: a faixa presa encosta no topo da área
     quando ela rola (passos 1, 3 e 4) e não sobra fresta por onde o conteúdo apareça. */
  #main:has(> .ger-topo #ger-barra){
    display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto;align-content:start;
    column-gap:12px;padding-top:0!important;
    /* O site limita o conteúdo a 1800 px centralizados (.main-col > .main > *, com margin-inline:auto). Num grid essa
       margem automática encolhe a caixa até o tamanho do texto, então a centralização passa para o padding da área,
       que parte dos mesmos 28 px de repaginacao.css. */
    padding-inline:max(28px,calc((100% - 1800px) / 2))!important;
  }
  /* Os filhos conhecidos recebem margin com os lados zerados: .main-col > .main > * põe margin-inline:auto, e num grid
     essa margem automática encolhe a caixa até o tamanho do texto e a centraliza. */
  #main:has(> .ger-topo #ger-barra) > *{grid-column:1 / -1}
  #main:has(> .ger-topo #ger-barra) > .rv-return-bar{grid-column:1;grid-row:1;margin:10px 0 0;min-height:0;align-self:center}
  #main:has(> .ger-topo #ger-barra) > .page-head{grid-column:2;grid-row:1;margin:10px 0 0!important;padding-bottom:0;align-self:center;align-items:center}
  #main:has(> .ger-topo #ger-barra) > .page-head > div:first-child{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:10px}
  #main:has(> .ger-topo #ger-barra) > .page-head .page-sub{margin-top:0}
  /* A sombra de 30 px de geracao-ajustes.css cobria o que ficava acima da faixa presa; com a faixa a 6 px do cabeçalho,
     ela cobria o título. */
  #main:has(> .ger-topo #ger-barra) > .ger-topo{grid-row:2;margin:6px 0 0;padding:3px 0;box-shadow:none}
  #main:has(> .ger-topo #ger-barra) > .ger-topo .ger-passos{margin-bottom:3px}
  #main:has(> .ger-topo #ger-barra) > .ger-topo #ger-barra{padding-block:0}
  #main:has(> .ger-topo #ger-barra) > .ger-layout{grid-row:3;margin:6px 0 0}
  /* Nenhuma caixa com altura cravada: a prévia da folha (passo 3) e a lista do lote pronto (passo 4) crescem, e quem rola
     nesses passos é só a área. */
  #main:has(> .ger-topo #ger-barra) .doc-zoom-view{max-height:none}
  #main:has(> .ger-topo #ger-barra) .ger-feito .gf-lista{max-height:none;overflow:visible}

  /* Passo 2: a lista ocupa o resto da altura e é a única que rola, com o cabeçalho da tabela preso nela. A área fica sem
     overflow:hidden de propósito: com tudo cabendo ela não rola, e se um dia algo não couber ela rola em vez de cortar. */
  /* Piso da linha do conteúdo (decisão 9, 15/09): em janela baixa a lista guarda o cabeçalho e 3 linhas, e quem rola o que
     falta é a área. Sem piso a lista cedia toda a falta de altura (2 px com zoom de 150%). Toque: 6 da margem da linha,
     209 do resto dela (título e botões do cartão quebrando em duas linhas a 701 px, busca e resumo fechado), 51 do
     cabeçalho da tabela e 3 linhas de 57, mais 1. */
  #main:has(> .ger-layout.passo-2 #ger-pac-lista){grid-template-rows:auto auto minmax(438px,1fr)}
  /* Sem min-height:0 na coluna: as caixas de dentro já descem até a lista, e nos passos 1, 3 e 4 ele prenderia a linha
     do grid na altura da tela e a folha vazaria por baixo da caixa. */
  #main:has(> .ger-layout.passo-2 #ger-pac-lista) > .ger-layout{display:flex;flex-direction:column;gap:6px}
  #main:has(> .ger-layout.passo-2 #ger-pac-lista) #ger-controls{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
  #main:has(> .ger-layout.passo-2 #ger-pac-lista) #ger-etapa-2.on{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
  #main:has(> .ger-layout.passo-2 #ger-pac-lista) #ger-etapa-2 > .card{
    flex:1 1 auto;min-height:0;margin:0;padding-block:8px;
    display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto minmax(0,1fr);
    column-gap:10px;row-gap:6px;align-items:center;
  }
  /* !important porque as linhas de busca e de botões trazem margin-bottom no atributo style do original.js. */
  #main:has(> .ger-layout.passo-2 #ger-pac-lista) #ger-etapa-2 > .card > *{margin:0!important}
  #main:has(> .ger-layout.passo-2 #ger-pac-lista) #ger-etapa-2 > .card > .card-title{grid-column:1;grid-row:1;padding-bottom:0;border-bottom:0}
  #main:has(> .ger-layout.passo-2 #ger-pac-lista) #ger-etapa-2 > .card > div:has(> .btn){grid-column:2;grid-row:1}
  #main:has(> .ger-layout.passo-2 #ger-pac-lista) #ger-etapa-2 > .card > div:has(> #ger-pac-search){grid-column:1 / -1;grid-row:2}
  #main:has(> .ger-layout.passo-2 #ger-pac-lista) #ger-pac-lista{grid-column:1 / -1;grid-row:3;align-self:stretch;min-height:0;overflow:auto!important}
  #main:has(> .ger-layout.passo-2 #ger-pac-lista) #ger-pac-lista table.gerpac thead th{top:0}
  /* Resumo do lote aberto: até metade da altura, com rolagem própria. Sem este teto a lista encolhia a 2 px. */
  #main:has(> .ger-layout.passo-2 #ger-pac-lista) #ger-previa{min-height:0;max-height:50%;overflow:auto}
}
@media screen and (min-width:1024px){
  /* Mouse: controles fluidos. Abaixo de 1024 px continuam valendo os 44 px de toque do index.html. */
  #main:has(> .ger-topo #ger-barra) :is(.rv-return-button,.page-head button,.ger-passo,#ger-barra .btn,#ger-pac-search,#ger-etapa-2 .card .btn){min-height:clamp(32px,4vh,44px);padding-block:0}
  /* Título, busca e botões dos pacientes numa linha só. */
  #main:has(> .ger-layout.passo-2 #ger-pac-lista) #ger-etapa-2 > .card{grid-template-columns:auto minmax(160px,1fr) auto;grid-template-rows:auto minmax(0,1fr)}
  #main:has(> .ger-layout.passo-2 #ger-pac-lista) #ger-etapa-2 > .card > div:has(> #ger-pac-search){grid-column:2;grid-row:1}
  #main:has(> .ger-layout.passo-2 #ger-pac-lista) #ger-etapa-2 > .card > div:has(> .btn){grid-column:3;grid-row:1}
  #main:has(> .ger-layout.passo-2 #ger-pac-lista) #ger-pac-lista{grid-row:2}
  /* Piso no mouse. Só age em janela baixa (abaixo de uns 680 px de altura, ou 750 com a faixa de unidades), onde os
     controles já estão no mínimo de 32 px. A conta: 6 da margem, 110 do resto da linha, 51 do cabeçalho e 3 linhas de até 53,3
     (nomes quebrando em 1024 px), mais 1. */
  #main:has(> .ger-layout.passo-2 #ger-pac-lista){grid-template-rows:auto auto minmax(328px,1fr)}
}

/* Passos em pílula (decisão do Yan em 14/09: opção B, com animação ao trocar de passo).
   A pílula é uma só, o ::before da trilha, e desliza até o passo atual; nada de sombra. O passo atual sai de uma
   variável que o :has() lê da classe .on que o gerPintarPassos já põe, então marcação e JS não mudam.
   Só a partir de 701 px: abaixo disso vale o desenho de celular do app. Movimento reduzido: a regra global do
   index.html já zera a duração das transições, inclusive nos pseudo-elementos. */
@media screen and (min-width:701px){
  /* Contraste medido: o ponto laranja tem 3:1 sobre a pílula (#D9650B, 3,6:1) e o ✓ tem 4,5:1 sobre a trilha (#A84E09,
     4,9:1). No escuro vale a cor da marca (#F58220, 6,9:1 sobre a pílula; ✓ #F9A15A, 8:1 sobre a trilha). */
  #main:has(> .ger-topo #ger-barra){--pp-laranja:#D9650B;--pp-check:#A84E09;--pp-trilho:#F4EFE7;--pp-hover:rgba(27,36,71,.05)}
  body[data-rv-theme=escuro] #main:has(> .ger-topo #ger-barra){--pp-laranja:#F58220;--pp-check:#F9A15A;--pp-trilho:var(--field-bg);--pp-hover:rgba(232,238,246,.06)}
  #main:has(> .ger-topo #ger-barra) .ger-passos{
    --pp-passo:0;position:relative;display:flex;gap:3px;padding:3px;
    background:var(--pp-trilho);border:1px solid var(--line);border-radius:12px;overflow:visible;
  }
  #main:has(> .ger-topo #ger-barra) .ger-passos:has(> #ger-passo-2.on){--pp-passo:1}
  #main:has(> .ger-topo #ger-barra) .ger-passos:has(> #ger-passo-3.on){--pp-passo:2}
  #main:has(> .ger-topo #ger-barra) .ger-passos:has(> #ger-passo-4.on){--pp-passo:3}
  /* A pílula tem a largura de um passo: quatro passos iguais e três vãos de 3 px dentro da trilha. */
  #main:has(> .ger-topo #ger-barra) .ger-passos::before{
    content:'';position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 15px) / 4);box-sizing:border-box;
    border:1px solid var(--line-strong);border-radius:9px;background:var(--card);opacity:0;
    transform:translateX(calc((100% + 3px) * var(--pp-passo)));
    transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .2s ease;
    /* mola curta: passa um pouco do lugar e volta. Navegador sem linear() fica com a curva de cima. */
    transition:transform .6s linear(0,.3 7%,.66 17%,.9 28%,1.025 40%,1.03 50%,1.01 64%,1),opacity .2s ease;
  }
  #main:has(> .ger-topo #ger-barra) .ger-passos:has(> .ger-passo.on)::before{opacity:1}
  #main:has(> .ger-topo #ger-barra) .ger-passo,
  #main:has(> .ger-topo #ger-barra) .ger-passo.on{
    flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;
    border:0;border-radius:9px;background:transparent;box-shadow:none;color:var(--ink-3);font-weight:600;
    transition:color .3s ease,background-color .2s ease;
  }
  #main:has(> .ger-topo #ger-barra) .ger-passo::before{content:none}
  #main:has(> .ger-topo #ger-barra) .ger-passo.on{color:var(--ink)}
  #main:has(> .ger-topo #ger-barra) .ger-passo.feito{color:var(--ink-2)}
  #main:has(> .ger-topo #ger-barra) .ger-passo .ck{color:var(--pp-check)}
  /* O ponto laranja fica no lugar do ✓ e cresce quando a pílula chega. */
  #main:has(> .ger-topo #ger-barra) .ger-passo .rot::before{
    content:'';position:absolute;left:-12px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;
    background:var(--pp-laranja);transform:scale(0);transition:transform .3s cubic-bezier(.34,1.56,.64,1);
  }
  #main:has(> .ger-topo #ger-barra) .ger-passo.on .rot::before{transform:scale(1);transition-delay:.22s}
  #main:has(> .ger-topo #ger-barra) .ger-passo:disabled{opacity:1;color:color-mix(in srgb,var(--ink-3) 55%,transparent);cursor:not-allowed}
  #main:has(> .ger-topo #ger-barra) .ger-passo:hover:not(:disabled):not(.on){background:var(--pp-hover);color:var(--ink)}
  #main:has(> .ger-topo #ger-barra) .ger-passo:focus-visible{outline:2px solid var(--pp-laranja);outline-offset:-2px}
}