/* ============================================================================
   23-ux-reg.css — CAMADA DE CORRECAO UX/UI
   Modulos: Regulacao (#view-regulacao) · Controle e Fila de Retornos
            (#retornos-host) · Fila Pacientes Estadual (#view-fila-estadual)

   Data: 2026-08-10 (onda 1, so-CSS) · 2026-08-11 (onda 2, com JS liberado)
   Origem: auditoria de CSS/markup dos 3 paineis (fase 1). Cada secao abaixo
   referencia o NUMERO DO ITEM da auditoria, para reverter item a item.

   ONDA 2: com o JS liberado, os itens 5, 10, 11, 12, 14, 15, 16 e 20 foram
   corrigidos NO MARKUP (public/retornos.js e public/fila-estadual.js). Por
   isso duas "pontes" desta camada foram REMOVIDAS — o seletor por atributo
   [style*="text-align:left"] (item 11) e o combinador
   `> div:not(.au-form) > .au-fld` (item 15) — e entraram no lugar as regras
   das classes novas que o markup passou a emitir: .grid-2 (item 10),
   .au-modal-lg (item 14) e .au-block (item 15).

   COMO REMOVER: esta camada e 100% aditiva e nao tem dependentes. Basta apagar
   a linha <link rel="stylesheet" href="css/23-ux-reg.css"> do public/index.html
   (linha 82) e o sistema volta exatamente ao estado anterior.

   POR QUE ELA EXISTE / POSICAO NA CASCATA: e a ULTIMA folha carregada (depois
   de aurora-*, 22-glass-uniform, 00-mobile-foundation e autocomplete). E isso
   que permite corrigir, sem editar os arquivos originais, os refinos que hoje
   morrem por ordem de carga — os css/16/20-reg-refine-{a,b,c}.css carregam nas
   linhas 33-35 e sao anulados pelo aurora-reg.css da linha 50 (item 17).

   REGRAS DESTA CAMADA
   - TUDO escopado em #view-regulacao / #retornos-host / #view-fila-estadual.
     Nenhuma regra `.aur .algo` solta: o kit (aurora-core.css) e global e serve
     telas fora desta onda. Correcoes que so fazem sentido no kit ficaram de
     fora e estao listadas no relatorio como "candidatas a promover ao kit".
   - Vence por ESPECIFICIDADE + ordem de carga. `!important` so aparece onde
     precisa neutralizar um `!important` preexistente, sempre comentado.
   - Sem cor nova: tokens do kit Aurora (--brand/--brand2/--ink/--ink-soft/
     --line/--fld-bd/--glass/--glass-brd) e do 01-tokens.css (--btn-height).
   ============================================================================ */


/* ============================================================================
   VARIAVEIS LOCAIS DESTA CAMADA
   Superficie SOLIDA para o cabecalho fixo de tabela (secao 2). Nao pode ser
   var(--glass) nem}

body.theme-dark #retornos-host,
body.theme-dark #view-fila-estadual{ --ux-thead-bg:#333b28; }


/* ============================================================================
   ITEM 1 — Conteudo do cartao desalinhado do proprio titulo
   .q-head tem padding lateral de 18px e .q-list de 8px (aurora-core.css:205 e
   :213): degrau visivel de 10px entre o titulo do cartao e o conteudo abaixo
   ("Retornos por especialidade", "Transferencias de chamados", "Atendimentos
   por operador"). A Fila Estadual ja remendava isso inline; aqui a correcao
   passa a valer para os tres modulos.
   ============================================================================ */
#retornos-host .q-list,
#view-fila-estadual .q-list,
#view-regulacao .q-list{
  padding:4px 18px 14px;
}


/* ============================================================================
   ITEM 2 — Cabecalho de tabela sem sticky e tabela sem altura maxima
   aurora-core.css:321-331 nao fixa o <th> e o wrapper so rola na horizontal.
   A Fila Estadual pagina de 100 em 100 linhas e o Retornos rola a fila
   inteira: em ambos o cabecalho sai da tela na primeira rolagem.
   ============================================================================ */
#retornos-host .au-table-wrap,
#view-fila-estadual .au-table-wrap{
  overflow:auto;
  max-height:min(68vh,720px);
  scrollbar-width:thin;
  overscroll-behavior:contain;      /* nao "vaza" a rolagem para a pagina */
}

#retornos-host .au-table thead th,
#view-fila-estadual .au-table thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:var(--ux-thead-bg);    /* solido de proposito — ver nota acima */
  /* o border-bottom do kit some em alguns navegadores quando o elemento e
     sticky; o inset garante o fio em qualquer caso */
  box-shadow:inset 0 -1px 0 var(--line);
}


/* ============================================================================
   ITEM 3 — Tabela colada na borda do cartao de vidro
   .au-table-wrap.glass tem raio 20px e nenhum padding; th/td so tem 12px
   laterais (aurora-core.css:322-326). A primeira coluna encosta na borda
   arredondada e o hover da linha sangra ate o canto.
   ============================================================================ */
#retornos-host .au-table th:first-child,
#retornos-host .au-table td:first-child,
#view-fila-estadual .au-table th:first-child,
#view-fila-estadual .au-table td:first-child{
  padding-left:20px;
}

#retornos-host .au-table th:last-child,
#retornos-host .au-table td:last-child,
#view-fila-estadual .au-table th:last-child,
#view-fila-estadual .au-table td:last-child{
  padding-right:20px;
}

#retornos-host .au-table-wrap,
#view-fila-estadual .au-table-wrap{
  padding-bottom:4px;               /* ultima linha nao encosta na borda */
}


/* ============================================================================
   ITEM 4 — Faixa de filtros da Regulacao: cartao dentro de cartao + topo zerado
   Markup: js/reg/11-design.js:281-286 -> .reg-filters-wrap > .reg-filter-band
   O wrap ja recebe vidro com !important (22-glass-uniform.css:160) e a banda
   recebe OUTRO vidro (aurora-reg.css:100-104), com raio 20 recortado pelo
   overflow:hidden do wrap (16/07.css:301). Alem disso a banda herda
   padding:0 16px 16px (16/07.css:307) — padding-top ZERO — e o rotulo
   "PACIENTE / CPF / PROTOCOLO" encosta na borda de cima.
   Correcao: a banda volta a ser CONTEUDO do wrap (uma superficie so).
   ============================================================================ */
#view-regulacao .reg-filter-band.filters{
  background:transparent;
  border:none;
  box-shadow:none;
  border-radius:0;
  padding:14px 16px 16px;
}

/* 4b — espacamento duplo entre rotulo e campo dentro da banda.
   O markup embrulha cada filtro em .au-fld (flex column, gap:5px do kit) e o
   rotulo ainda carrega margin-bottom:5px de 16/07.css:311 -> 10px no total,
   o dobro do resto do sistema. */
#view-regulacao .reg-filter-band .reg-filt-lbl{
  margin-bottom:0;
}


/* ============================================================================
   ITEM 6 — ANTIDOTO para aurora-panels.css:1036-1040
   Aquele bloco foi escrito para o markup ANTIGO (.ds-*), que os renderers nao
   emitem mais, mas dois dos seus seletores sao genericos demais:

       #view-fila-estadual input,
       #view-fila-estadual textarea,
       #view-fila-estadual .ds-input{ background:transparent !important; ... }

   Eles casam TODO input/textarea do painel reescrito e apagam a superficie de
   campo do kit (aurora-core.css:342) — o textarea "Justificativa" do modal de
   regulacao fica so com a borda, sem fundo.
   Como nao posso editar aurora-panels.css, restauro aqui com especificidade
   maior (1,2,0 > 1,0,1) e !important — unica forma de vencer um !important.
   IMPORTANTE: so os campos .au-fld. O input de dentro de .field.search TEM de
   continuar transparente (a caixa e o proprio label, aurora-core.css:141-145).
   ============================================================================ */
#view-fila-estadual .au-fld input,
#view-fila-estadual .au-fld select,
#view-fila-estadual .au-fld textarea{
  background:rgba(255,255,255,.45) !important;   /* antidoto: aurora-panels.css:1036 */
}

body.theme-dark #view-fila-estadual .au-fld input,
body.theme-dark #view-fila-estadual .au-fld select,
body.theme-dark #view-fila-estadual .au-fld textarea{
  background:rgba(255,255,255,.06) !important;   /* antidoto: aurora-panels.css:1036 */
}


/* ============================================================================
   ITEM 7 — KPI orfao no Painel da Regulacao (5 cartoes numa grade de 4)
   js/reg/11-design.js:368 emite class="kpis reg-kpi-grid" com CINCO .kpi, mas
   16/07.css:321 forca repeat(4,1fr) e vence o auto-fit do kit
   (aurora-core.css:128) -> o 5o cartao ("SLA") fica sozinho na 2a linha com
   1/4 da largura e tres celulas vazias ao lado.
   ============================================================================ */
#view-regulacao .reg-kpi-grid{
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}

/* 16/07.css:322 tem @media (max-width:900px){ ... 1fr 1fr } com a mesma
   especificidade; como esta folha carrega depois, o auto-fit ja vence em
   qualquer largura — o minmax(190px) resolve o empilhamento sozinho. */


/* ============================================================================
   ITEM 9 — Barra de filtros com tres alturas e dois gaps na mesma linha
   No Retornos (retornos.js:970-990) convivem na mesma .filters: o campo de
   busca (~40px), sete .chip (36px) e o seletor de especialidade dentro de um
   .field com rotulo (bloco de ~53px). Como .filters e align-items:flex-end
   (aurora-core.css:130), o rotulo "ESPECIALIDADE" flutua sozinho acima da
   linha. Pior: os cinco chips de status vivem dentro de <div class="chips">
   (gap 6px) e os tres seguintes sao irmaos diretos da .filters (gap 14px) —
   chips identicos com espacamento diferente lado a lado.
   Correcao: um unico gap, todos os controles em 36px e o .field vira uma
   linha (rotulo + controle) em vez de uma coluna.
   Aplicado tambem na Fila Estadual, que tem a mesma barra.
   ============================================================================ */
#retornos-host .filters,
#view-fila-estadual .filters{
  gap:8px;
  row-gap:8px;
}

#retornos-host .filters .chips,
#view-fila-estadual .filters .chips{
  gap:8px;
  flex-wrap:wrap;                   /* nowrap estourava a linha em tela estreita */
}

#retornos-host .filters .chip,
#view-fila-estadual .filters .chip{
  min-height:36px;
  padding:0 13px;
  display:inline-flex;
  align-items:center;
  gap:4px;                          /* alinha o icone inline ao texto do chip */
}

#retornos-host .filters .field.search,
#view-fila-estadual .filters .field.search{
  height:36px;
  padding:0 13px;                   /* era 10px 13px -> ~40px de altura */
}

#retornos-host .filters .field.search input,
#view-fila-estadual .filters .field.search input{
  font-size:13.5px;                 /* 14.5px destoava dos 12px dos chips */
}

/* rotulo ao lado do controle: acaba com o rotulo flutuando sozinho e poe o
   bloco inteiro na mesma altura dos chips */
#retornos-host .filters .field:not(.search),
#view-fila-estadual .filters .field:not(.search){
  flex-direction:row;
  align-items:center;
  gap:8px;
  height:36px;
}

#retornos-host .filters .field:not(.search) > .lbl,
#view-fila-estadual .filters .field:not(.search) > .lbl{
  flex:none;
  white-space:nowrap;
}

#retornos-host .filters .field select,
#retornos-host .filters .field input:not([type=checkbox]):not([type=radio]),
#view-fila-estadual .filters .field select,
#view-fila-estadual .filters .field input:not([type=checkbox]):not([type=radio]){
  min-height:36px;
  padding:0 12px;
}

/* o botao "Limpar filtros" e um .btn no meio de chips de 36px */
#retornos-host .filters .btn,
#view-fila-estadual .filters .btn{
  min-height:36px;
  padding:0 14px;
}


/* ============================================================================
   ITEM 10 (ONDA 2) — 2a faixa do Painel de Retornos nao empilhava no celular
   O markup trazia grid-template-areas:'queue trend' em style INLINE, e inline
   vence qualquer @media de folha: abaixo de 900px a faixa continuava em duas
   colunas, espremendo o aside. O JS passou a emitir class="grid grid-2"
   (retornos.js) e as areas moram aqui, onde o media query alcanca.
   ============================================================================ */
#retornos-host .grid.grid-2{
  grid-template-areas:'queue trend';
}

@media (max-width:900px){
  #retornos-host .grid.grid-2{
    grid-template-columns:1fr;
    grid-template-areas:'queue' 'trend';
  }
}


/* ============================================================================
   ITEM 11 — .au-empty (estado vazio) usado como dropzone e como callout
   fila-estadual.js:485 usa .au-empty como zona de upload CLICAVEL e :641/:656/
   :662 usam como aviso dentro do modal. O componente tem padding:30px 22px e
   borda tracejada (aurora-core.css:296-300): no modal vira uma caixa enorme, e
   a borda tracejada — que no sistema significa "nao ha nada aqui" — passa a
   marcar conteudo ativo.
   Sem tocar no JS: o dropzone ganha estados (hoje nao tem hover nem foco) e os
   callouts do modal ganham densidade de callout.
   ============================================================================ */
#view-fila-estadual .au-empty[onclick]{
  cursor:pointer;
  transition:border-color .16s ease, background .16s ease, transform .16s ease;
}

#view-fila-estadual .au-empty[onclick]:hover{
  border-color:var(--brand2);
  background:rgba(92,111,58,.08);
  transform:translateY(-1px);
}

#view-fila-estadual .au-empty[onclick]:focus-visible{
  outline:2px solid var(--brand2);
  outline-offset:2px;
}

/* ONDA 2 — a ponte saiu daqui. Os tres callouts do modal deixaram de ser
   .au-empty com [style*="text-align:left"] e passaram a .t-note no proprio
   markup (fila-estadual.js:641/656/662), que e o componente de aviso do kit.
   Sobra so o ajuste do titulo: .t-note nao estiliza <strong> (o .au-empty
   estilizava), entao sem isto o titulo colava na pilula de tentativas. */
#view-fila-estadual .au-modal .t-note strong{
  display:block;
  color:var(--ink);
  font-size:13px;
  font-weight:700;
  margin-bottom:5px;
}


/* ============================================================================
   ITEM 13 — .au-sec-head (cabecalho de secao) usado como rodape e paginacao
   .au-sec-head e so flex+space-between (aurora-core.css:360). Em
   fila-estadual.js:709 ele e o RODAPE do modal e cola no textarea acima (so os
   12px de gap do .au-sec); em :419 e a barra de paginacao da fila, solta
   embaixo da tabela sem nenhuma separacao.
   ============================================================================ */
#view-fila-estadual .au-modal > .au-sec-head:last-child{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--line);
}

#view-fila-estadual #fe-fila-rows > .au-sec-head{
  padding-top:12px;
  border-top:1px solid var(--line);
}


/* ============================================================================
   ITEM 14 (ONDA 2) — Larguras de modal padronizadas
   O painel tinha SEIS larguras inline (420 / 520 / 520 / 540 / 720 / 880px)
   contra os 560px do kit, e o detalhe abria com uma caixa de 420px
   ("Carregando…") que pulava para 880px quando o fetch respondia.
   Agora sao dois degraus, ambos no markup por CLASSE (retornos.js):
     - formulario curto  -> .au-modal, 560px do kit (Finalizar, Improcedente,
                            Devolver ao cadastrante, Transferir);
     - leitura/edicao    -> .au-modal.au-modal-lg, 880px (Detalhe, o proprio
                            estado "Carregando…" do detalhe e Editar dados).
   Como o estado de carregamento usa a mesma classe do conteudo, o salto acabou.
   ============================================================================ */
#retornos-host .au-modal.au-modal-lg{
  width:min(880px,100%);
}


/* ============================================================================
   ITEM 15 — Divisorias inconsistentes no modal de detalhe do Retorno
   Os blocos de topo do modal (Observacoes, Finalizacao, Improcedencia,
   Transferencias, Acessos, Historico) abrem com
   `border-top:1px solid var(--line); padding-top:16px` repetido inline seis
   vezes — MENOS "Condicao do retorno" e "Anexos" (retornos.js:1127), que ficam
   sem divisoria e colam no bloco anterior.
   ONDA 2 — o combinador fragil (`> div:not(.au-form) > .au-fld`, que existia so
   para nao pegar os campos dos outros modais) SAIU: o markup agora marca os
   blocos com a classe .au-block (retornos.js), e o fio inline repetido 6x foi
   removido de la. "Anexos" e "Condicao do retorno", que nao tinham divisoria,
   entraram na classe e o ritmo do modal ficou uniforme.
   ============================================================================ */
#retornos-host .au-block{
  border-top:1px solid var(--line);
  padding-top:16px;
}


/* ============================================================================
   ITEM 17 — Refino da Regulacao anulado pela ordem de carga
   css/16/20-reg-refine-a.css:22-25 pede .reg-prio-stat{padding:7px 0} + fio
   divisorio, mas aurora-reg.css:147 (linha 50 do index, depois) repoe
   padding:9px 0. Sobrevive so o :first-child{padding-top:2px} do refino -> a
   primeira linha de "Fila por prioridade" fica 7px mais alta que as demais.
   Aqui o valor final e reposto e o #eef2e6 cru vira token.
   ============================================================================ */
#view-regulacao .reg-prio-stat{
  padding:7px 0;
  border-bottom:1px solid var(--line);
}

#view-regulacao .reg-prio-stat:first-child{
  padding-top:2px;
}

#view-regulacao .reg-prio-stat:last-child{
  border-bottom:0;
  padding-bottom:2px;
}


/* ============================================================================
   ITEM 18 — Regra de refino apontando para classe que nao existe mais
   css/16/20-reg-refine-a.css:32-35 reduz .reg-kpi-val abaixo de 560px, mas o
   markup migrou para o kit e hoje emite .k-val (js/reg/11-design.js:369-392).
   A regra e morta: em telas estreitas o numero nao reduz.
   ============================================================================ */
@media (max-width:560px){
  #view-regulacao .kpi .k-val{
    font-size:22px;
  }
}


/* ============================================================================
   ITEM 19 — Quatro alturas de botao no mesmo modulo
   .reg-hbtn 38px (16/07.css:291) · .btn do kit ~36px (aurora-core.css:84) ·
   .reg-detail-actions .btn 32px (20-reg-refine-a.css:74) · .reg-card-act ~26px
   (aurora-reg.css:36). Padroniza em dois tamanhos reusando os tokens globais
   --btn-height (36px) e --btn-height-sm (28px) do css/01-tokens.css.
   Escopo deliberadamente estreito (familias nomeadas, nao `.btn` inteiro) para
   nao colidir com o 23-ux-kanban.css, que trabalha no mesmo #view-regulacao.
   ============================================================================ */
#view-regulacao .reg-hbtn{
  height:var(--btn-height);
}

#view-regulacao .reg-hbtn.reg-hbtn-pri{
  width:var(--btn-height);
}

#view-regulacao .reg-detail-actions .btn{
  min-height:var(--btn-height);
}

#view-regulacao .reg-card-act{
  min-height:var(--btn-height-sm);
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}


/* ============================================================================
   ITEM 20 — Hover desencontrado e hex cru fora da paleta
   (A parte de alinhamento a direita das colunas numericas depende do JS e
   ficou de fora — esta listada como pendencia no relatorio.)

   20a) Elevacao de hover: -1px em .reg-solic-card (refine-a:53),
   .reg-fila-row (refine-a:88) e .reg-inter-row[onclick] (refine-b:60), mas
   -2px em .reg-vaga-card (refine-b:11) e em .reg-solic-card.glass
   (aurora-reg.css:137) — quatro cartoes do mesmo modulo com duas elevacoes.
   Padroniza em -2px. O seletor com .glass repete a especificidade (1,3,0) do
   aurora-reg.css para vencer por ordem de carga.
   ============================================================================ */
#view-regulacao .reg-solic-card:hover,
#view-regulacao .reg-solic-card.glass:hover,
#view-regulacao .reg-vaga-card:hover,
#view-regulacao .reg-fila-row:hover,
#view-regulacao .reg-inter-row[onclick]:hover{
  transform:translateY(-2px);
}

/* 20b) Hex cru -> token. Os refinos fixaram cores claras na mao; no tema
   escuro elas nao acompanham (o token acompanha). Mesmo visual no tema claro. */

/* refine-a:43-46 — anel de foco da sub-aba (#819858) */
#view-regulacao .reg-subtab:focus-visible{
  outline:2px solid var(--brand2);
  outline-offset:2px;
}

/* refine-a:60-69 — barra de rolagem do detalhe (#c7d2b5 / #d3dcc2 / #b3c298) */
#view-regulacao .reg-detail-scroll{
  scrollbar-color:var(--fld-bd) transparent;
}
#view-regulacao .reg-detail-scroll::-webkit-scrollbar-thumb{
  background:var(--fld-bd);
}
#view-regulacao .reg-detail-scroll::-webkit-scrollbar-thumb:hover{
  background:var(--brand2);
}

/* refine-b:60-68 — linha clicavel de contrarreferencia (#d3dcc2 / #fbfcf9) */
#view-regulacao .reg-inter-row[onclick]:hover{
  border-color:var(--glass-brd);
  background:rgba(92,111,58,.06);
}

/* refine-b:71-79 — chevron da linha clicavel (#aab892 / #394820) */
#view-regulacao .reg-inter-row[onclick]::after{
  border-right-color:var(--ink-soft);
  border-bottom-color:var(--ink-soft);
}
#view-regulacao .reg-inter-row[onclick]:hover::after{
  border-right-color:var(--brand);
  border-bottom-color:var(--brand);
}

/* 16/07.css:189 — a sub-aba era o unico controle solido (#fff) num modulo
   inteiro de vidro; alinha com o fundo do .chip do kit */
#view-regulacao .reg-subtab{
  background:rgba(255,255,255,.35);
  border-color:var(--line);
  color:var(--ink-soft);
}
body.theme-dark #view-regulacao .reg-subtab{
  background:rgba(255,255,255,.05);
}

/* refine-c:23-28 + 16/07.css:191 — estado ativo/ligado da sub-aba
   (#ecf0e5 / #394820 / #d3dcc2) declarado duas vezes com hex cru */
#view-regulacao .reg-subtab.active,
#view-regulacao .reg-subtab.is-on{
  background:rgba(92,111,58,.14);
  color:var(--brand);
  border-color:var(--glass-brd);
}
#view-regulacao .reg-subtab.active .reg-subtab-n,
#view-regulacao .reg-subtab.is-on .reg-subtab-n{
  background:var(--brand);
  color:#fff;
}

/* refine-c:37-44 — banner de informacao da Agenda (#f2f5eb / #dee7cf / #4d5243)
   NOTA: e o unico ponto desta camada que toca a Agenda. Se o 23-ux-kanban.css
   mexer no mesmo elemento, este bloco e o primeiro a sair. */
#view-regulacao .reg-agenda-info{
  background:rgba(92,111,58,.10);
  border-color:var(--line);
  color:var(--ink-soft);
}
#view-regulacao .reg-agenda-info svg,
#view-regulacao .reg-agenda-info i{
  color:var(--brand);
}
#view-regulacao .reg-agenda-info strong{
  color:var(--ink);
}