/* Moldura das telas do site novo (item 9, 15/09/2026).
   Especificação: docs/superpowers/specs/2026-09-15-moldura-telas-design.md (decisões do Yan em 15/09).
   Aceitação: testes-preservacao/claude-moldura-telas.test.cjs.
   Antes, em 1366x768: topo de 141 px (faixa "CAD-SUF" 30, faixa da clínica 64, abas 47), e 208 com a faixa de unidades;
   barra de voltar e cabeçalho da tela em linhas separadas; menu com 1.085 px de conteúdo para 738 visíveis.
   Só a partir de 701 px (abaixo vale o desenho de celular do app) e só na tela, então a impressão não muda. Só CSS:
   marcação e JS não mudam. Carregada antes de proporcoes.css, que continua a última: as regras de Gerar ficha são mais
   específicas e fazem o mesmo desenho de cabeçalho. */
@media screen and (min-width:701px){
  /* 1. Sem a faixa "CAD-SUF". Ela aparece também na produção (release-bootstrap.js troca o texto nos dois ambientes) e só
     repete o nome que já está no menu. Saem junto os 30 px que shell.css reserva para ela no body, no #hub-gate e na
     altura do .app. */
  #cad-environment{display:none!important}
  body{padding-top:0!important}
  #hub-gate{top:0!important}
  .app{height:100dvh!important}

  /* 2. Topo em linha única. A faixa da clínica deixa de ser caixa (display:contents) e os dois grupos dela vão para as
     pontas da primeira linha do grid da coluna; as abas ficam no meio e rolam para o lado quando não cabem (a coluna do
     meio é minmax(0,1fr), que já não deixa as abas passarem dela). Fundo e borda, que eram da faixa da clínica, passam
     para o ::before da coluna, com as cores de repaginacao.css e, no escuro, de tema-contraste.css. */
  .main-col{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto minmax(0,1fr)}
  .main-col::before{content:'';grid-row:1;grid-column:1 / -1;background:#fff;border-bottom:1px solid var(--rv-line)}
  body[data-rv-theme=escuro] .main-col::before{background:var(--rv-ui-control);border-bottom-color:var(--rv-ui-border)}
  #rv-sector-head{display:contents!important}
  #rv-sector-head > div:first-child{grid-row:1;grid-column:1;min-width:0;overflow:hidden;padding:5px 10px 5px 16px;align-self:center;z-index:1}
  #rv-sector-head > div:first-child :is(span,strong){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  #rv-sector-head > div:last-child{grid-row:1;grid-column:3;padding:5px 16px 5px 10px;align-self:center;z-index:1}
  #abas-bar{grid-row:1;grid-column:2;z-index:1;min-height:0!important;padding:5px 4px!important;border:0!important;background:transparent!important;align-self:center;gap:4px!important;overflow-x:auto}
  /* Abas em pílula. O texto das inativas tinha 3,23:1 no claro (#74849e sobre #e9edf5) e 2,19:1 no escuro, onde a
     pílula continuava clara; agora usa as cores de interface do tema, com pelo menos 4,5:1 nos dois. */
  #abas-bar .aba{height:30px!important;padding:0 10px!important;margin:0!important;border-radius:8px!important;border:1px solid var(--rv-line)!important}
  body #abas-bar .aba:not(.on){background:var(--rv-ui-control)!important;color:var(--rv-ui-muted)!important}
  body[data-rv-theme=escuro] #abas-bar .aba:not(.on){background:var(--field-bg)!important}
  body #abas-bar .aba.on{background:var(--card)!important;border-color:var(--rv-ui-border)!important}
  body[data-rv-theme=escuro] #abas-bar .aba.on{color:var(--rv-ui-text)!important}

  /* 3. Unidades numa linha fina (decisão do Yan: linha própria, só com 2 unidades ou mais, que é quando renderUnisBar
     desenha a faixa). Rótulo e estado na mesma linha dos botões. */
  #unis-bar{grid-row:2;grid-column:1 / -1;padding:4px 16px!important;gap:6px!important;min-height:0!important;align-items:center!important}
  #unis-bar .rv-unit-context{flex-direction:row!important;align-items:baseline!important;gap:6px!important}
  #unis-bar :is(.rv-unit-chip,.rv-units-all){min-height:30px!important;padding-block:0!important}
  .main-col > #main{grid-row:3;grid-column:1 / -1}

  /* 4. Cabeçalho da tela numa linha: voltar, título com subtítulo e "Sobre esta área", como Gerar ficha já faz. Os
     outros filhos ocupam a largura toda. A margem lateral é a de hoje (28 px, e 23 px até 1150 px de largura, logo
     abaixo), e a centralização em 1800 px sai do margin-inline:auto de .main-col > .main > *, que num grid encolhe a
     caixa até o tamanho do texto. As linhas têm a altura do conteúdo (grid-auto-rows:max-content): numa área de altura
     definida, linha automática para no espaço livre e espremia a lista de Pacientes, que tem rolagem lateral própria e
     passava a rolar por dentro (532 px em vez dos 3.130 do conteúdo). Gerar ficha declara as próprias linhas. Voltar e
     cabeçalho se alinham pelo topo: em Resumo e Checklist o cabeçalho tem várias linhas, e centralizado o botão ficava
     29 px abaixo do título. O cabeçalho vai para a primeira linha pelo número dela, e não pela ordem: em Terapias um
     parágrafo de contexto vem entre a barra de voltar e o cabeçalho na marcação. */
  #main{display:grid!important;grid-template-columns:auto minmax(0,1fr);grid-auto-rows:max-content;align-content:start;column-gap:12px;padding-top:0!important;padding-inline:max(28px,calc((100% - 1800px) / 2))!important}
  #main > *{grid-column:1 / -1;margin-inline:0!important}
  #main > .rv-return-bar{grid-column:1;grid-row:1;margin:8px 0 0!important;min-height:0!important;align-self:start}
  #main > .rv-return-bar .rv-return-button{min-height:34px!important;padding-block:0!important}
  #main > .page-head{grid-column:2;grid-row:1;margin:8px 0 6px!important;padding-bottom:0!important;align-self:start;align-items:center!important}
  #main > .page-head > div:first-child{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:10px}
  #main > .page-head .page-sub{margin-top:0!important}
  /* As abas de Terapias são inline-flex, com a largura do próprio conteúdo; num grid, item vira bloco e estica. */
  #main > .ter-tabs{justify-self:start}
}
@media screen and (min-width:701px) and (max-width:1150px){
  #main{padding-inline:max(23px,calc((100% - 1800px) / 2))!important}
}

/* 5. Menu enxuto, só no mouse: a partir de 1024 px, como os controles fluidos de proporcoes.css; abaixo continuam os
   tamanhos de toque. Mesmos itens, mesma ordem e grupos abertos como hoje. Os seletores de "Voltar às áreas", "Início",
   dos itens de Operacional e dos títulos de grupo repetem o peso dos de lateral-ajustes.css, que vêm antes e usam
   !important. A conta vale com os três grupos abertos (quem está em Relatórios, Histórico ou Backup abre o terceiro):
   808 px de conteúdo com os espaços de antes, 758 com os de agora, em 768 de janela. */
@media screen and (min-width:1024px){
  .nav{padding:6px 13px!important}
  .nav .nav-brand-block{padding:6px 7px!important;margin-bottom:4px!important}
  .nav #nav-setor-sub{display:none!important}
  /* A busca do menu repete a lupa da linha do topo, que fica; o atalho ⌘K continua. */
  .nav .rv-nav-search{display:none!important}
  .nav .nav-btn{min-height:32px!important;padding-block:6px!important}
  body .nav #nb-hub.rv-nav-back{min-height:32px!important;margin:2px 0 6px!important;padding:6px 11px!important}
  body .nav #nb-inicio.rv-nav-home{min-height:32px!important;margin-bottom:4px!important;padding-block:6px!important}
  body .nav .rv-nav-operations :is(.nav-btn,.nav-ctx-notif){min-height:32px!important;padding:6px!important}
  body .nav .rv-nav-operations>div{gap:1px!important}
  body .nav .rv-nav-groups{row-gap:4px!important}
  body .nav .rv-nav-group summary{min-height:0!important;padding-block:4px!important}
  body .nav .rv-nav-group.rv-nav-operations{padding-block:2px!important}
  .nav .nav-rodape{padding-top:0!important}
  /* Cartão do usuário: nome e cargo. */
  .nav #nav-user-wrap{padding-top:0!important}
  .nav #online-agora{margin-bottom:0!important}
  .nav .nav-user{padding:6px 10px!important;margin-bottom:0!important}
  .nav :is(.nav-user-label,.nav-user-email){display:none!important}
  .nav .nav-user-cargo{margin-top:0!important}
  /* Atalhos numa linha. O texto é nó solto dentro de botão flex, e item de flex anônimo não corta com reticências; em
     bloco, corta. */
  .nav .cad-nav-extra{margin-top:4px!important;padding-top:2px!important}
  .nav .cad-nav-extra .nav-btn{display:block!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .nav .cad-nav-extra .nav-btn svg{display:inline-block;vertical-align:middle;margin-right:9px}
}