/* ============================================================================
   FUNDAÇÃO MOBILE — contrato único de tela pequena para TODO o portal.

   Por que este arquivo existe
   ---------------------------
   O portal tem 186 blocos @media em 27 breakpoints diferentes, todos desktop-first,
   e SEIS views sem nenhuma regra de celular (auditoria, retornos, fila-estadual,
   almoxarifado, faturamento-sus, faturamento-bpa). Elas renderizam por JS dentro do
   kit `.aur`, cujo responsivo inteiro eram 4 regras. O resultado é que cada painel
   novo precisava resolver mobile por conta — e a maioria não resolveu.

   Aqui mora o comportamento de tela pequena dos COMPONENTES COMPARTILHADOS. Quem usa
   o kit herda sem ser tocado; é isso que conserta as seis views de uma vez.

   Duas escolhas que valem registro
   --------------------------------
   1. NADA de @layer. Regra sem camada vence regra em camada, e todo o CSS existente
      é sem camada — a fundação nasceria perdendo de tudo. Vai como CSS normal,
      carregado por ÚLTIMO no index.html, com especificidade casada (.aur .x = 0,2,0).
   2. Dois breakpoints só: 980px (celular/tablet) e 640px (celular). São os dois mais
      usados no projeto. Os outros 25 valores continuam onde estão e vão sendo
      absorvidos quando cada painel for tocado — migrar 186 blocos de uma vez é risco
      sem retorno.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. ESCALA — alvo de toque e respiro.
   44px é o mínimo confortável para o polegar; 36px é o secundário (usado onde o
   controle é acessório e está separado por respiro).
   --------------------------------------------------------------------------- */
:root{
  --tap:44px;        /* alvo principal */
  --tap-sm:36px;     /* alvo secundário */
  --gap-s:8px;
  --gap-m:12px;
  --gap-l:16px;
  --radius-m:13px;
  /* respiro lateral do contêiner de painel. Estava sendo usado só como fallback
     dentro do var() da sangria de tabela — ou seja, não existia. */
  --gutter-sm:12px;
}

/* ---------------------------------------------------------------------------
   2. .au-toolbar — O MAIOR BURACO DO PORTAL.
   É o que os 36 módulos JS usam para as ações de topo e de linha, e não tinha
   NENHUMA regra de celular. Em ≤400px os botões quebravam em coluna irregular com
   alvos de 30px. Agora: alvo garantido e, no celular, os botões dividem a linha em
   vez de ficarem pendurados.
   --------------------------------------------------------------------------- */
/* Auditoria do componente: das 359 ocorrências em 47 arquivos JS, **81 carregam
   `style=` inline**, ~30 delas com `justify-content:flex-end` — estilo inline vence
   folha sem !important. Mas só UMA tem `display:` inline.
   Daí a saída: no celular o eixo troca de flex para GRID. `justify-content`,
   `align-items` e `flex-wrap` inline ficam inertes sobre trilhas `1fr` — os 81
   inline morrem por construção, sem um único !important e sem editar 47 arquivos. */
@media (max-width:640px){
  /* `td.au-toolbar` FICA DE FORA. A troca para grade pressupõe um contêiner de
     bloco; numa célula de tabela ela vira largura mínima de 3x132px só para a
     coluna de ações — a tabela de estoque da Farmácia ia a ~900px entre 421 e
     640px, e abaixo disso os botões empilhavam e triplicavam a altura da linha. */
  .aur .au-toolbar:not(td):not(th){
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(var(--au-tb-min,132px),1fr));
    gap:var(--gap-s); align-items:stretch; width:100%;
  }
  .aur td.au-toolbar, .aur th.au-toolbar{
    display:table-cell; white-space:nowrap;
  }
  .aur td.au-toolbar > .btn, .aur td.au-toolbar > button{ min-height:var(--tap-sm) }
  .aur .au-toolbar > .btn,
  .aur .au-toolbar > button{ width:100%; min-height:var(--tap); justify-content:center }
  .aur .au-toolbar > .icon-btn{
    min-width:var(--tap); min-height:var(--tap); width:auto; height:auto;
  }
  /* válvula: tira de chips/anexos continua em linha rolável, não vira grade */
  .aur .au-toolbar.au-tb-inline{
    display:flex; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .aur .au-toolbar.au-tb-inline::-webkit-scrollbar{ display:none }
  .aur .au-toolbar.au-tb-inline > *{ flex:0 0 auto }
  /* A válvula estava quebrada para BOTÃO: o `width:100%` que a grade dá a
     `.au-toolbar > .btn` (0,3,0) sobrevive ao `flex:0 0 auto` — cada botão ocupava
     a largura inteira, um por "tela" de rolagem. Numa tira em linha, botão tem
     largura de conteúdo. */
  .aur .au-toolbar.au-tb-inline > :is(.btn, button){ width:auto }
  /* barra com 5+ ações vira uma por linha: 6 botõezinhos lado a lado não se lê */
  .aur .au-toolbar:has(> :nth-child(5)){ --au-tb-min:100% }
  /* cabeçalho de seção deixa de tentar caber numa linha só */
  .aur .au-sec-head{ align-items:flex-start; row-gap:var(--gap-s) }
  .aur .au-sec-head h2, .aur .au-sec-head h3{ font-size:15px }
}
@media (max-width:420px){ .aur .au-toolbar{ --au-tb-min:100% } }

/* ---------------------------------------------------------------------------
   3. TABELAS.
   O padrão certo já existe e funciona: .au-table-wrap{overflow-x:auto}
   (aurora-core.css:331), emitido por 36 módulos. O que faltava era (a) rolagem
   suave no toque e (b) impedir que a tabela empurre a página quando alguém
   esquece o wrapper.
   --------------------------------------------------------------------------- */
/* CORREÇÃO IMPORTANTE sobre o diagnóstico inicial: eu ia envolver 5 tabelas com
   `min-width` fixo, supondo que estivessem sem wrapper. A auditoria mostrou o
   contrário — QUATRO delas são CSS morto (`.reg-table`, `.master-connections-table`,
   `.reg-task-report-table`, `.rh-report-table`: nenhum HTML ou JS emite essas
   classes) e a única viva (`#report-table`) JÁ tem wrapper em views/admin.html:932.
   O padrão certo está 100% aplicado onde há markup vivo.

   O problema real é o INVERSO: `.au-table{width:100%}` dentro de
   `.au-table-wrap{overflow-x:auto}` NUNCA dispara rolagem — a tabela encolhe até as
   colunas ficarem ilegíveis, e o wrapper vira decoração. Por isso aqui se FORÇA uma
   largura mínima: é ela que faz o wrapper existir para valer. */
.aur .au-table-wrap{                    /* aditivo, vale em qualquer largura */
  min-width:0; max-width:100%;
  overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
}
@media (max-width:980px){
  /* O piso só vale DENTRO do wrapper, onde ele vira rolagem. Solto, somado aos três
     `overflow-x:hidden` globais, o piso CORTA a tabela — pior que o problema que ele
     veio resolver. Varri as 85 tabelas do portal: hoje todas as visíveis têm wrapper,
     então isto é rede para a próxima que alguém escrever sem. */
  .aur .au-table-wrap .au-table{ min-width:var(--au-table-min,640px) }
  /* sem wrapper, a própria tabela vira a área de rolagem */
  .aur .au-table:not(.au-table-wrap .au-table){
    display:block; overflow-x:auto; max-width:100%;
    -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
  }
  .aur .au-table th, .aur .au-table td{ padding:9px 10px }
  .aur .au-table{ font-size:12.5px }
  /* a tabela sangra até a borda da tela em vez de rolar dentro de uma caixa
     estreita — mesmo padrão que o quadro do Kanban já usa */
  .aur .au-table-wrap{
    margin-inline:calc(var(--gutter-sm,12px) * -1); padding-inline:var(--gutter-sm,12px);
  }
}

/* ---------------------------------------------------------------------------
   3b. TABELA EM CARTÃO — o gesto `.au-t-cards`.
   Rolagem horizontal é o padrão-base e continua sendo. Cartão é para o subconjunto
   que passa em TRÊS condições: a linha é uma ENTIDADE sobre a qual se age (paciente,
   senha, requisição), tem no máximo ~5 colunas relevantes, e a primeira coluna é um
   nome ou identificador. Tabela numérica de comparação NÃO entra: cartão destrói a
   leitura por coluna, que é o motivo de aquilo ser tabela.

   Sem `data-label` de propósito — valores formatados (uma data, um R$, uma pílula de
   status) se identificam sozinhos, e exigir rótulo obrigaria a editar o emissor de
   cada <td> em 36 módulos. O vocabulário visual é o do cartão do Kanban, já aprovado.
   --------------------------------------------------------------------------- */
@media (max-width:560px){
  .aur .au-table.au-t-cards{ min-width:0; display:block }
  .aur .au-table.au-t-cards thead{ display:none }
  .aur .au-table.au-t-cards tbody{ display:block }
  .aur .au-table.au-t-cards tbody tr{
    display:grid; grid-template-columns:1fr; gap:5px;
    padding:12px 14px; margin-bottom:10px;
    border:1px solid var(--line); border-radius:14px;
    background:rgba(255,255,255,.30);
  }
  body.theme-dark .aur .au-table.au-t-cards tbody tr{ background:rgba(255,255,255,.04) }
  .aur .au-table.au-t-cards tbody tr:hover{ background:rgba(255,255,255,.36) }
  .aur .au-table.au-t-cards td{ display:block; padding:0; border:0 }
  .aur .au-table.au-t-cards td:first-child{ font-size:14px; font-weight:650 }
  .aur .au-table.au-t-cards td:not(:first-child){ font-size:12.5px; color:var(--ink-soft) }
  /* a célula de ações volta a obedecer o contrato de toolbar */
  .aur .au-table.au-t-cards td:has(.au-toolbar){ margin-top:6px }
  /* o wrapper para de rolar: não há mais o que rolar */
  .aur .au-table-wrap:has(> .au-t-cards){ overflow-x:visible; margin-inline:0; padding-inline:0 }
}

/* ---------------------------------------------------------------------------
   4. FILTROS.
   `.field.search{min-width:230px}` (aurora-core.css:333) somado a `flex-wrap`
   estoura em 363px: o campo empurra a linha e os selects encolhem até virar tarja.
   No celular cada campo ocupa a linha.
   --------------------------------------------------------------------------- */
@media (max-width:980px){
  .aur .filters{ padding:var(--gap-m); gap:var(--gap-s) }
  .aur .field.search{ min-width:0; flex:1 1 100%; min-height:var(--tap) }
}
@media (max-width:640px){
  .aur .filters{ flex-direction:column; align-items:stretch }
  .aur .field{ width:100%; min-width:0 }
  .aur .field select, .aur .field input{ width:100%; min-height:var(--tap) }
}

/* ---------------------------------------------------------------------------
   5. KPIs — havia TRÊS escadas para o mesmo conceito
   (aurora-core.css:305/309/316, 15-padronizacao-master.css:141/142, 16/06.css:148),
   e a do master nunca chegava a 1 coluna. Uma escada só: 2 colunas no celular,
   1 coluna no aparelho estreito.
   --------------------------------------------------------------------------- */
@media (max-width:640px){
  .aur .kpis, .dash-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:420px){
  .aur .kpis, .dash-kpis{ grid-template-columns:1fr }
}

/* ---------------------------------------------------------------------------
   6. ABAS — já rolam na horizontal desde o kit (aurora-core.css:110). Faltava
   alvo de toque e o encaixe não cortar a aba ativa pela metade.
   --------------------------------------------------------------------------- */
@media (max-width:980px){
  .aur .tabs{ scroll-padding-inline:6px; max-width:100%; flex-wrap:nowrap }
  /* SEM ISTO as abas se sobrepõem: num contêiner flex rolável elas encolhem por
     padrão (flex-shrink:1), ficam mais estreitas que o próprio texto — que tem
     white-space:nowrap — e as legendas vazam uma por cima da outra. */
  .aur .tabs > *{ flex:0 0 auto }
  .aur .tab{
    min-height:var(--tap-sm); padding:0 14px;
    display:inline-flex; align-items:center; justify-content:center;
  }
}

/* ---------------------------------------------------------------------------
   7. FORMULÁRIO — o kit já colapsa em 720px; aqui só garante alvo nos campos.
   --------------------------------------------------------------------------- */
@media (max-width:980px){
  .aur .au-fld input, .aur .au-fld select{ min-height:var(--tap) }
}
/* ANTI-ZOOM DO iOS — achado da auditoria, e nenhuma folha tratava.
   O kit usa font-size:13px nos campos (aurora-core.css:343 e :147). Abaixo de 16px
   o Safari do iPhone AMPLIA a página ao focar o campo: o painel "pula" e a pessoa
   perde o enquadramento a cada toque. Vale para os 26 painéis de uma vez.

   A lista era por componente (.au-fld/.field/.filters) e deixava de fora TODO campo
   solto do kit — o guichê do Atendimento, os campos dos modais que não usam
   .modal-box. Agora é por elemento: qualquer campo sob .aur. */
/* O !important aqui é deliberado e é o único caminho. A regra perde por
   ESPECIFICIDADE, não por ordem: `#view-rh.aur .au-fld input{13px}` é (1,2,1) e
   `.aur .field.search input{14.5px}` — do próprio kit, valendo em TODO painel — é
   (0,3,1). Nenhum seletor razoável sem !important vence as duas. Mesma justificativa
   do bloco dos modais: é anti-zoom, não estética; sem ele o Safari amplia a página a
   cada toque em qualquer filtro do portal. */
@media (max-width:640px){
  .aur :is(input,select,textarea):not([type=checkbox]):not([type=radio]),
  .modal-overlay :is(input,select,textarea):not([type=checkbox]):not([type=radio]),
  .au-modal-ovl :is(input,select,textarea):not([type=checkbox]):not([type=radio]){
    font-size:16px !important;
  }
  .aur .au-fld textarea{ min-height:110px }
}

/* A barra de ação DENTRO de modal ficava de fora do contrato de toolbar:
   `.modal-overlay .modal-box .modal-actions{display:flex}` (0,3,0) vence
   `.aur .au-toolbar{display:grid}` (0,2,0). Aqui a especificidade é casada. */
@media (max-width:640px){
  .modal-overlay .modal-box .modal-actions,
  .modal-overlay .reg-modal-box .modal-actions,
  .modal-overlay .modal-box .au-toolbar,
  .modal-overlay .reg-modal-box .au-toolbar{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:var(--gap-s);
  }
  .modal-overlay .modal-actions > .btn,
  .modal-overlay .modal-actions > button{ width:100%; min-height:var(--tap); justify-content:center }
}

/* ALVO DE TOQUE DO BOTÃO UNIVERSAL.
   O alvo de 44px só existia dentro de .au-toolbar, e ficavam de fora justamente os
   botões que vivem em cartão — finalizar, transferir, rechamar. `.btn` é o botão de
   todo o kit, não só o de barra. */
@media (max-width:640px){
  .aur .btn{ min-height:var(--tap) }
  .aur .icon-btn{ min-width:var(--tap-sm); min-height:var(--tap-sm) }
}

/* ---------------------------------------------------------------------------
   8. MODAL → FOLHA DE TELA CHEIA.
   Havia três camadas brigando (12-modais.css:459, 10-capacitacao-intranet.css:1953
   com !important, e o kanban-v2 que precisou de 4 !important para vencer). Este é o
   contrato único; usa !important porque precisa vencer os !important já existentes.
   Vale para .modal-box e .reg-modal-box, que é o par que todos os painéis emitem.
   --------------------------------------------------------------------------- */
@media (max-width:640px){
  .modal-overlay{ padding:0 !important; align-items:flex-end !important }

  /* REDE DE SEGURANÇA — sem isto a regra acima vira armadilha.
     Ancorar o overlay no rodapé vale para TODOS; converter em folha vale só para as
     caixas listadas abaixo. Uma caixa fora da lista e sem teto de altura (o caso do
     `.rc-block` da Recepção, que bloqueia a emissão de senha) empurra o título e o
     botão de fechar para fora do topo da tela, SEM como rolar de volta. Qualquer
     filho direto do overlay ganha teto e rolagem própria. */
  .modal-overlay > *{
    max-height:100dvh; overflow-y:auto; overscroll-behavior:contain;
  }

  .modal-overlay .modal-box,
  .modal-overlay .reg-modal-box,
  .modal-overlay .rc-modal,
  .modal-overlay .rc-block,
  .modal-overlay .au-modal{
    width:100% !important; max-width:100% !important;
    height:100dvh !important; max-height:100dvh !important;
    margin:0 !important; border-radius:0 !important;
    padding:14px 14px calc(16px + env(safe-area-inset-bottom)) !important;
    display:flex; flex-direction:column; overflow:hidden;
  }
  /* a rolagem sai da caixa e vai para o corpo: sem isso o cabeçalho e o X
     sobem junto com o conteúdo e não há como fechar sem rolar de volta */
  .modal-overlay .modal-box > .modal-body,
  .modal-overlay .reg-modal-box > .reg-modal-body{
    flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  }
  .modal-overlay .modal-box > .modal-head,
  .modal-overlay .reg-modal-box > .reg-modal-head{ flex:0 0 auto }
  /* o RODAPÉ também não pode encolher. Cabeça e corpo estavam protegidos; a barra
     de confirmação ("Cancelar / Salvar e enviar") era o terceiro filho e, com
     flex-shrink padrão, num formulário longo ela era espremida. */
  .modal-overlay .modal-box > .au-toolbar,
  .modal-overlay .reg-modal-box > .au-toolbar,
  .modal-overlay .modal-box > .modal-actions,
  .modal-overlay .reg-modal-box > .modal-actions{ flex:0 0 auto }
}

/* ---------------------------------------------------------------------------
   9. REDE DE SEGURANÇA PARA AS VIEWS SEM REGRA PRÓPRIA.
   As seis views-casca (auditoria, retornos, fila-estadual, almoxarifado,
   faturamento-sus, faturamento-bpa) renderizam por JS e não têm CSS mobile algum.
   Como tudo que elas emitem está sob `.aur`, o que está acima já as cobre. O que
   falta é o respiro do contêiner.
   --------------------------------------------------------------------------- */
@media (max-width:640px){
  .aur .glass, .aur .au-sec{ border-radius:var(--radius-m) }
  .aur .panel-container, .aur .au-pad{ padding:var(--gap-m) }
  /* #ubs-main-content é o contêiner de TODOS os painéis de unidade e mantinha
     20/22px fixos em qualquer largura — 44px dos 363 só em respiro lateral. */
  #ubs-main-content{ padding:var(--gap-m) }
  /* nada de texto minúsculo em rótulo de dado */
  .aur .st, .aur .chip{ font-size:12px }
}

/* ---------------------------------------------------------------------------
   10. ALERTA CLÍNICO — contraste é segurança, não estética.

   Achado da auditoria do painel clínico, e NÃO é um problema de celular: vale em
   qualquer largura, desde sempre.

   O bloco de alergias (`js/app/units/03.js:415-421`) anima o fundo até #d43766 e
   emite cada chip com `color` INLINE de var(--err) — que é #d43766. Ou seja, na
   metade do ciclo o nome da alergia fica com contraste ~1:1: **desaparece**. Só o
   ramo "Sem alergias registradas" era legível.
   Como a cor do chip é inline, só !important a vence — é o mesmo critério dos
   outros dois usos de !important neste arquivo: quando a alternativa é a pessoa
   não conseguir ler, o peso se justifica.

   Os alertas da farmácia (`units/06.js:538` e `:709`) usam texto var(--glass)
   sobre fundo var(--err): ~2,6:1, e no tema escuro viram oliva sobre vermelho.
   --------------------------------------------------------------------------- */
.alert-pulse, .alert-pulse *{ color:#fff !important }
.alert-pulse .st, .alert-pulse .chip{
  background:rgba(0,0,0,.22) !important; border-color:rgba(255,255,255,.45) !important;
}
/* a animação de alerta passa a respeitar quem pediu menos movimento — o kit já faz
   isso no .au-pulse; a .alert-pulse foi injetada por JS e ficou de fora */
@media (prefers-reduced-motion:reduce){
  .alert-pulse{ animation:none !important; background:#b3234a !important }
}

/* ---------------------------------------------------------------------------
   11. A GAVETA DA INTRANET SEGUE O ESTADO ÚNICO.

   Ao unificar o estado em `body.rail-open`, a classe `sidebar-open` ficou órfã — e
   era ELA que abria a lista de painéis da Intranet comum (10-capacitacao-intranet
   .css:1661/1674 deixa `.intranet-sidebar` com opacity:0 e pointer-events:none até
   receber `#view-intranet.sidebar-open`). Resultado: o botão "Painéis" ligava o
   estado novo e a lista continuava invisível e inclicável.
   `body.rail-open #view-intranet .intranet-sidebar` = (1,2,1), vence a original.
   --------------------------------------------------------------------------- */
@media (max-width:980px){
  body.rail-open #view-intranet .intranet-sidebar{
    opacity:1; transform:none; pointer-events:auto;
  }
  /* O botão flutuante ficava SOTERRADO pela barra inferior: ocupa 12–60px do
     rodapé, exatamente dentro dos 66px da barra, e 1879 níveis de z-index abaixo
     dela. Onde há barra, quem abre a gaveta é o "Painéis" — o FAB some. */
  body.app-shell-on .rail-fab{ display:none }
}

/* quem pediu menos movimento não ganha transição em nada desta camada */
@media (prefers-reduced-motion:reduce){
  .aur *{ scroll-behavior:auto }
}