/* ============================================================================
   23-ux-atendimento.css — CAMADA DE CORRECAO UX/UI · TELAS DE ATENDIMENTO
   Data: 2026-08-10
   Escopo: #view-operator · #view-reception · #view-tv · #view-totem

   O QUE E ESTA CAMADA
   Correcoes visuais apuradas na auditoria de CSS/markup das quatro telas de
   atendimento. E a ULTIMA folha da cascata (carrega depois de aurora-*,
   22-glass-uniform, 00-mobile-foundation e autocomplete), entao vence por
   ORDEM sempre que a especificidade empata — e por isso quase nada aqui
   precisa de !important.

   REVERSAO
   Esta camada e 100% aditiva e escopada por view: remover a linha
   <link rel="stylesheet" href="css/23-ux-atendimento.css"> do index.html
   devolve o sistema exatamente ao estado anterior. As secoes abaixo sao
   numeradas pelo item da auditoria para permitir reversao item a item.

   REGRA DE OURO
   Nenhum token global e redefinido em :root. Os tokens novos (--ctl-h,
   --pad-card, --op-queue-max) vivem escopados na propria view.

   ATENCAO: media query NAO adiciona especificidade. Toda regra desta camada
   que sobrescreve uma propriedade que o sistema ajusta em @media precisa
   RE-DECLARAR aquele breakpoint aqui — senao a regra sem media desta folha
   (mais nova) vence a regra com media da folha antiga. Marcado com [MQ].

   INDICE
     01 · Operador  — cartao da fila + limite de rolagem   (item 1)
     02 · Operador  — altura unica dos controles do topbar (item 3)
     03 · Operador  — cores das filas nos tokens do kit    (item 5)
     04 · Recepcao  — estado readonly/disabled visivel     (item 6)
     05 · Recepcao  — botao da busca alinhado ao campo     (item 10)
     06 · Recepcao  — padding horizontal unico da coluna   (item 11)
     07 · TV        — botao de audio estavel e preenchido  (item 12)
     08 · TV        — tipografia do painel lateral (clamp) (item 13)
     09 · TV        — chip de tipo no historico            (item 14)
     10 · TV        — badge de tipo solido (contraste)     (item 15)
     11 · TV        — coluna lateral fluida            [MQ](item 16)
     12 · TV        — botoes reais do topbar               (item 17)
     13 · Totem     — botoes de departamento preenchidos   (item 18)
     14 · Totem     — alvos de toque >= 48px               (item 19)
     15 · Totem     — altura pelo token de viewport    [MQ](item 20)
     16 · Operador  — faixas da barra de espera        [O3](item 21)
     17 · Recepcao  — reset das abas <button>          [O2](item 1)

   [O3] = ONDA 3 (2026-08-11): a barra do KPI de espera passou a MEDIR.
   Mudou fora desta folha:
     views/operator.html:56      id na barra, sem a classe `warn`, --w:0%
     js/app/operator.js:14-17    limiares nomeados _waitOkMin/_waitLateMin
     js/app/operator.js:180-181  os chips da fila leem esses limiares
     js/app/operator.js:469-484  alimenta a barra a partir de `oldest`
   O paliativo `display:none` que existia aqui foi APAGADO — virou regra
   morta assim que a barra ganhou dado real.

   [O4] = ONDA 4 (2026-08-11): a espera passou a envelhecer com o relogio.
   Mudou fora desta folha, so em js/app/operator.js:
     :20        estado _waitTickTimer
     :168-203   _updateWaitKpi (recalculo isolado) e _startWaitTicker
     :516-518   o render da fila passa a delegar ao mesmo helper
     :380-381   ticker ligado junto do _refreshTimer que ja existia
   Nada mudou nesta camada alem da nota de cadencia em §16.

   [O2] = ONDA 2 (2026-08-11): o JS foi liberado e as pendencias de teclado e
   de classe morta foram fechadas na origem. Mudou fora desta folha:
     views/reception.html:78-81  div.rec-tab -> button.rec-tab (§17)
     js/app/operator.js:178-180  role/tabindex/onkeydown na fila (§01)
     js/app/operator.js:531      style inline -> class .op-queue-grid (§01)
     js/app/operator.js          _applyQueueColumnScrollLimits removida (§01)
     js/app/tv.js:308            preserva a classe tv-audio-btn (§07)
     js/app/totem.js:22          btn-primary -> primary, classe do kit (§13)
   As secoes §01, §07, §13, §16 e §17 foram revistas em funcao disso — cada
   uma anota o que virou redundante e o que continua necessario.

   REVISAO 2026-08-10 (pos-validacao em 1568px)
   Duas regressoes da primeira versao desta camada foram corrigidas NA PROPRIA
   secao que as causou, para nao deixar regra contraditoria no arquivo:
     §05 Recepcao — `align-self:stretch` esticava o "Consultar" ate a caixa
                    (60px contra 42px do input). Trocado por altura explicita.
     §07 TV       — botao de audio grande demais (168x46) quebrava para a
                    linha de baixo e empurrava o titulo.
   Licao comum as duas: `stretch` alinha ao CONTEINER, nao ao controle irmao —
   para emparelhar dois controles, casa-se a ALTURA, nao o esticamento.

   REVISAO 2 2026-08-10 (2a validacao)
     §07/§08 TV — a tentativa de salvar a linha unica (nowrap + h3 encolhivel)
                  fez o titulo passar POR BAIXO do botao. A conta completa
                  (documentada em §07) mostra que a linha unica nao cabe em
                  NENHUMA faixa com titulo legivel. O cabecalho da lateral
                  passou a ser deliberadamente EMPILHADO, e o titulo voltou a
                  crescer. Nenhuma outra secao foi tocada.
   ============================================================================ */


/* ============================================================================
   01 · OPERADOR — cartao da fila + limite de rolagem            [auditoria 1]

   PROBLEMA: aurora-operator.css:111-118 estiliza .op-queue-ticket e
   operator.js:104 procura .op-queue-ticket, mas o render emite .q-row3
   (operator.js:214). A classe nao existe no DOM: as senhas da fila ficam sem
   superficie e sem hover, e .op-queue-column-body.has-scroll
   (aurora-operator.css:110) nunca e aplicado -> as colunas crescem sem limite
   e desalinham as tres filas.

   CORRECAO SEM JS: estilizar a classe que o JS realmente emite (.q-row3) e
   impor o teto de altura direto no CSS. O estilo inline de operator.js:574
   define padding/display/gap/min-height, mas NAO define max-height nem
   overflow — por isso estas duas propriedades passam sem !important.
   ============================================================================ */

#view-operator{ --op-queue-max: clamp(198px, 34vh, 460px); }

#view-operator .q-row3{
  background: rgba(255,255,255,.55);
  border: 1px solid var(--glass-brd);
  box-shadow: 0 1px 2px rgba(46,59,23,.05);
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
body.theme-dark #view-operator .q-row3{ background: rgba(255,255,255,.06); }

/* o :hover de aurora-operator.css:143 (so background) continua valendo;
   aqui somam-se a borda e a elevacao que se perderam com a classe morta */
#view-operator .q-row3:hover{
  border-color: var(--brand2);
  box-shadow: 0 8px 20px -10px rgba(78,98,44,.5);
  transform: translateY(-1px);
}
#view-operator .q-row3:active{ transform: translateY(0); box-shadow: none; }

/* teto de altura: na onda 2 a funcao _applyQueueColumnScrollLimits foi
   REMOVIDA de operator.js (consultava .op-queue-ticket, que nunca existiu).
   Este par de linhas e agora a unica fonte da rolagem das colunas. */
#view-operator .op-queue-column-body{
  max-height: var(--op-queue-max);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* [ONDA 2 · item 2] operator.js passou a emitir role="button" tabindex="0" na
   linha da fila. A regra de foco que estava reservada deixa de ser morta.
   outline-offset negativo para o anel acompanhar o raio do cartao. */
#view-operator .q-row3:focus-visible{
  outline: 2px solid var(--brand2);
  outline-offset: -2px;
  border-radius: 14px;
}

/* [ONDA 2 · item 6] a grade das tres filas saiu do style inline de
   operator.js:560 e virou classe — as media queries voltam a valer.
   repeat(3,minmax(0,1fr)) no lugar de `1fr 1fr 1fr`: o minmax(0,…) impede que
   um nome de paciente comprido estoure a coluna (1fr sozinho tem min-content
   como piso). RESSALVA: media query mede o VIEWPORT, entao no operador
   embutido no shell da unidade (coluna estreita, viewport largo) as tres
   colunas continuam apertadas — isso so cai bem com container query, que
   seria mudanca de arquitetura e ficou fora desta onda. */
#view-operator .op-queue-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}
@media (max-width: 920px){
  #view-operator .op-queue-grid{ grid-template-columns: 1fr; }
}


/* ============================================================================
   02 · OPERADOR — altura unica dos controles do topbar          [auditoria 3]

   PROBLEMA: quatro alturas na mesma linha —
     .guiche-chip   height:38px            (aurora-operator.css:21)
     .icon-btn      38x38                  (aurora-core.css:99)
     .session-timer padding:8px 12px ~36px (aurora-operator.css:40)
     .btn           padding:9px 14px ~40px (aurora-core.css:85)
     .btn.primary   border:none     ~38px  (aurora-core.css:92)
   O token --btn-height:36px (01-tokens.css:90) existe e o kit .aur o ignora.

   CORRECAO: um token de altura escopado na view + height fixo com
   padding-block:0. O kit ja usa inline-flex/align-items:center nos botoes,
   entao a altura fixa nao corta o conteudo. Escopado em .actions para nao
   encolher o botao gigante "Chamar proxima" (.hero-btn), que e proposital.
   ============================================================================ */

#view-operator{ --ctl-h: 38px; }

#view-operator .actions .btn,
#view-operator .actions .icon-btn,
#view-operator .guiche-chip,
#view-operator .session-timer{
  height: var(--ctl-h);
  min-height: var(--ctl-h);
  padding-block: 0;
  box-sizing: border-box;
}

/* o botao "Fixar" mora DENTRO do chip de 38px: fica um degrau abaixo */
#view-operator .op-desk-fix{ height: 26px; padding-block: 0; }


/* ============================================================================
   03 · OPERADOR — cores das filas nos tokens do kit             [auditoria 5]

   PROBLEMA: aurora-operator.css:132-136 e :148-151 cravam #e8863a, #3f9d6a,
   #e8a017/#c4881a e #ad631e. O kit ja define --p1/--p2/--p3/--ok/--warn
   (aurora-core.css:22-23) COM inversao no tema escuro (:39-40), que as cores
   fixas nao recebem.

   !important necessario apenas nas faixas do topo: a regra original usa o
   shorthand `border-top: 3px solid X !important`.
   ============================================================================ */

#view-operator .op-qcol-normal{        border-top-color: var(--brand2) !important; }
#view-operator .op-qcol-preferential{  border-top-color: var(--p1) !important; }
#view-operator .op-qcol-appointment{   border-top-color: var(--ok) !important; }

#view-operator .op-qcol-preferential .op-qhead-ico{
  background: linear-gradient(135deg, var(--p1), var(--p2));
}
#view-operator .op-qcol-appointment .op-qhead-ico{
  background: linear-gradient(135deg, var(--p3), var(--ok));
}

#view-operator .tag-pref{
  color: var(--warn);
  background: rgba(232,134,58,.14);
}


/* ============================================================================
   04 · RECEPCAO — estado readonly/disabled visivel              [auditoria 6]

   PROBLEMA: a ficha nasce inteira travada (reception.html:95-103, alternada
   por reception2.js:274) e o kit .aur so tem estado desabilitado para BOTAO
   (aurora-core.css:370-381). Nao ha regra para input[readonly] nem
   select:disabled -> clicar em "Editar" nao muda NADA na tela.

   As excecoes :not() preservam a marcacao propria dos campos que sao
   readonly por natureza: preenchidos pelo CEP (.rc-fbox-auto, tracejado em
   20-panel-console.css:623) e vindos do CADSUS (.rc-from-cadsus,
   aurora-shell.css:645).
   ============================================================================ */

#view-reception .au-fld input[readonly]:not(.rc-fbox-auto):not(.rc-from-cadsus),
#view-reception .au-fld textarea[readonly]:not(.rc-fbox-auto):not(.rc-from-cadsus),
#view-reception .au-fld input:disabled:not(.rc-fbox-auto):not(.rc-from-cadsus),
#view-reception .au-fld select:disabled,
.rc-modal .au-fld input[readonly]:not(.rc-fbox-auto):not(.rc-from-cadsus),
.rc-modal .au-fld select:disabled{
  background: rgba(57,72,32,.06);
  border-color: var(--line);
  color: var(--ink-soft);
  cursor: default;
  box-shadow: none;
}
body.theme-dark #view-reception .au-fld input[readonly]:not(.rc-fbox-auto):not(.rc-from-cadsus),
body.theme-dark #view-reception .au-fld select:disabled,
body.theme-dark .rc-modal .au-fld input[readonly]:not(.rc-fbox-auto):not(.rc-from-cadsus),
body.theme-dark .rc-modal .au-fld select:disabled{
  background: rgba(255,255,255,.03);
}

/* campo travado nao deve fingir foco de edicao */
#view-reception .au-fld input[readonly]:focus,
#view-reception .au-fld textarea[readonly]:focus{
  border-color: var(--line);
  box-shadow: 0 0 0 3px rgba(92,111,58,.10);
}


/* ============================================================================
   05 · RECEPCAO — botao da busca alinhado ao campo             [auditoria 10]

   PROBLEMA: na barra de comando, o input tem font 16px + padding 8px 0
   (42px medido, aurora-shell.css:494-497) dentro de .rc-search com padding 6px
   (:485), e o .rc-search-go e um .aur .btn de ~38px sem align-self -> folga
   assimetrica no controle mais usado da recepcao.

   REVISAO 2026-08-10: a 1a versao usava `align-self:stretch`. Isso alinha ao
   CONTEINER, nao ao input: o botao virou o item mais alto da linha flex (60px
   medidos), passou a ditar a altura da propria caixa (73px) e encostou nas
   bordas. Aqui a altura e casada com a do input EXPLICITAMENTE e o botao fica
   centrado — a caixa volta a 42+6+6 = 54px, simetrica.
   ============================================================================ */

#view-reception .rc-hero .rc-search > .rc-search-go{
  align-self: center;   /* nunca stretch: emparelha com o input, nao com a caixa */
  flex: 0 0 auto;
  height: 42px;         /* = altura medida do input da busca */
  min-height: 42px;
  padding: 0 18px;
  font-size: 14px;
  line-height: 1;
}
/* trava o icone: num item que nao estica mais, o svg nao deve estica tambem */
#view-reception .rc-search > .rc-search-go > svg{ flex: none; width: 15px; height: 15px; }

/* [MQ] 00-mobile-foundation.css:262-263 pede alvo de 44px no celular; a altura
   fixa acima (1-3-0) venceria aquela regra (0-2-0) e encolheria o alvo */
@media (max-width: 640px){
  #view-reception .rc-hero .rc-search > .rc-search-go{ height: 44px; min-height: 44px; }
}


/* ============================================================================
   06 · RECEPCAO — padding horizontal unico da coluna           [auditoria 11]

   PROBLEMA: cinco recuos diferentes empilhados na mesma coluna —
   .rc-hero 16px (aurora-shell.css:478), .rc-pacts 20px (:529),
   #rec-patient-banner 22px (:522), .rec-page-header 24px (:452),
   .rc-tabpane 28px (:538). As bordas internas nao se alinham na vertical.

   So o eixo horizontal e unificado; os recuos verticais de cada bloco
   permanecem como estao (ritmo vertical proposital).
   ============================================================================ */

#view-reception{ --pad-card: 22px; }

#view-reception .rec-page-header,
#view-reception #rec-patient-banner,
#view-reception .rc-hero,
#view-reception .rc-pacts,
#view-reception .rc-tabs,
#view-reception .rc-tabpane,
#view-reception .rc-newhead{
  padding-inline: var(--pad-card);
}

@media (max-width: 640px){
  #view-reception{ --pad-card: 16px; }
}


/* ============================================================================
   07 · TV — botao de audio estavel e preenchido                [auditoria 12]

   PROBLEMA (duplo):
   a) tv.js:308 reescreve className como 'btn btn-success' | 'btn btn-secondary'
      e DESCARTA a classe tv-audio-btn (que o caminho de tv.js:84 preserva).
      O botao perde min-width:108px (08:487) e a pilula de 20:1786-1794 —
      muda de largura e de forma a cada toque, dentro do cabecalho lateral.
   b) .aur .btn{background:transparent} (aurora-core.css:84, 0-2-0) vence
      .btn-success / .btn-secondary (05-buttons.css:34,32, 0-1-0): o botao
      nunca fica verde nem cinza.

   CORRECAO SEM JS: mirar o ID (#tv-audio-btn), que o JS nunca remove.
   ID+ID = 2-0-0, acima de qualquer combinacao de classes do kit. Todos os
   estados tem a MESMA caixa -> alternar audio nao mexe mais no layout.

   REVISAO 1 (2026-08-10): a 1a versao dimensionou o botao como se fosse
   conteudo de mural (168x46px). Ele nao e: e controle secundario, operado de
   perto. .tv-side-head tambem carrega .au-sec-head, que traz flex-wrap:wrap
   (aurora-core.css:360) — com 168px o par titulo+botao estourava a largura
   util do painel, o botao caia para a linha de baixo e o titulo subia.

   REVISAO 2 (2026-08-10) — CABECALHO EM DOIS BLOCOS, POR DECISAO:
   a rev.1 tentou salvar a linha unica com nowrap + h3 encolhivel. Pior ainda:
   sem quebra e sem reticencias, o titulo passava POR BAIXO do botao.

   Refiz a conta com as medidas reais (h3 scrollWidth 178px @16px, gap 8px,
   botao 118px, linha de 276px em 1568px => faltavam 28px). Projetando a
   largura util do painel em toda a faixa de §11, a fonte MAXIMA que o titulo
   poderia ter para a linha unica caber e:

       viewport   linha util   botao 118px   botao 90px
        1000px      244px        10.1px        12.9px
        1200px      274px        13.2px        15.9px
        1568px      276px        13.3px        16.0px
        1920px      344px        20.0px        22.7px

   O rotulo original ja era 16.3px (08:483). Ou seja: na faixa 980-1200px
   — onde o painel bate no piso de 280px de §11 — a linha unica so cabe
   encolhendo o titulo para ~10-13px, ilegivel a distancia e pior que o
   ponto de partida. Mesmo com o botao a 90px, a linha unica so sustenta
   18px de titulo a partir de 1672px de viewport. Nao existe faixa segura.

   DECISAO: empilhar de proposito, em TODAS as larguras. Um cabecalho em dois
   blocos (titulo em cima, botao embaixo alinhado a ESQUERDA e com largura
   automatica) le como bloco intencional — diferente do que o coordenador viu
   antes, que era o wrap acidental do .au-sec-head jogando o botao para a
   direita com o `justify-content:space-between` do kit. Em troca, o titulo
   fica livre para ocupar o tamanho legivel que o item 13 pedia: empilhado
   ele cabe ate 22.4px na pior largura e ate 45px em 4K.

   Rede de seguranca: overflow hidden + ellipsis no titulo. Se algum dia
   faltar espaco, degrada para reticencias — nunca para texto sob botao.

   ONDA 2 (item 4): tv.js:308 parou de descartar a classe `tv-audio-btn`.
   Conferi o que disso tornou este bloco redundante — so em parte, entao ele
   FICA, agora com papel menor e bem delimitado:
     · virou redundante o estado LIGADO: com a classe de volta,
       20-panel-console.css:1791 (`#view-tv .tv-audio-btn.btn-success`, 1-2-0)
       ja vence o `.aur .btn{background:transparent}` (0-2-0) e pinta o verde;
     · NAO virou redundante o estado DESLIGADO: nao existe regra para
       `.tv-audio-btn.btn-secondary` em folha nenhuma, entao sem este bloco o
       botao voltaria a ficar transparente quando o audio esta OFF;
     · NAO virou redundante a caixa estavel: 08:487 da min-width:108px, mas o
       rotulo "Áudio OFF" mede mais que isso — o botao voltaria a mudar de
       largura ao alternar. Os 118px daqui e que seguram os dois estados;
     · NAO virou redundante a altura de 38px, que casa com o cabecalho
       empilhado desta secao.
   ============================================================================ */

/* estrutura: cabecalho da lateral em DOIS BLOCOS (ver conta acima) */
#view-tv .tv-side-head{
  display: flex;
  flex-direction: column;
  align-items: flex-start;      /* botao alinhado a esquerda, sob o titulo */
  justify-content: flex-start;  /* neutraliza o space-between de 08:476 */
  flex-wrap: nowrap;
  gap: 8px;
  margin-bottom: 12px;
}
#view-tv .tv-side-head h3{
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;      /* degrada para reticencias, nunca para sobreposicao */
}
#view-tv .tv-side-head .au-toolbar{
  align-self: flex-start;
  width: auto;
  flex-wrap: nowrap;
}

#view-tv #tv-audio-btn{
  flex: 0 0 auto;
  width: auto;
  /* largura minima do rotulo mais longo ("Audio OFF"): o botao nao muda de
     tamanho ao alternar. Em linha propria isso nao disputa espaco com nada */
  min-width: 118px;
  height: 38px;
  min-height: 38px;
  padding: 0 14px;
  white-space: nowrap;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12.5px;
  line-height: 1;
  color: #fff;
  background: linear-gradient(110deg, #273114, #394820 60%, #4c5d2f);
  box-shadow: 0 4px 12px rgba(39,49,20,.22);
}
#view-tv #tv-audio-btn > svg{ flex: none; }

/* [MQ] 00-mobile-foundation.css:262-263 pede alvo de 44px no celular; a altura
   fixa acima (2-0-0) venceria aquela regra e encolheria o alvo */
@media (max-width: 640px){
  #view-tv #tv-audio-btn{ height: 44px; min-height: 44px; }
}
/* verde = audio ligado (classe posta por tv.js:84 e :308) */
#view-tv #tv-audio-btn.btn-success{
  background: #16a34a;
  box-shadow: 0 6px 16px rgba(22,163,74,.36);
}
/* cinza = audio desligado (classe posta por tv.js:308) */
#view-tv #tv-audio-btn.btn-secondary{
  background: #5b6250;
  box-shadow: 0 6px 16px rgba(39,49,20,.18);
}
#view-tv #tv-audio-btn:hover{ filter: brightness(1.06); }


/* ============================================================================
   08 · TV — tipografia do painel lateral em clamp              [auditoria 13]

   PROBLEMA: o palco usa clamp/vw (08:423,447,458) mas a lateral e toda fixa —
   .code 1.02rem (08:511), .meta .82rem = 13px (08:518), h3 1.02rem (08:483),
   chip do relogio .78rem (08:346). A TV e lida a 3-5 m: "Ultimas Chamadas"
   fica ilegivel.

   REVISAO 2 (2026-08-10): com o cabecalho empilhado (§07) o titulo deixou de
   disputar a linha com o botao e voltou a poder crescer. Conferido contra a
   largura util do painel em toda a faixa de §11 — empilhado, o titulo cabe
   ate 22.4px na pior largura (viewport 1000px, painel no piso de 280px) e ate
   45px em 4K. O clamp abaixo entrega 16.8px de piso, 18.0px em 1568px, 22.1px
   em 1920px e 24px de teto: sempre com folga, a ellipsis de §07 nunca dispara.
   ============================================================================ */

#view-tv .tv-side-head h3{       font-size: clamp(1.05rem, 1.15vw, 1.5rem); }
#view-tv .tv-history-item .code{ font-size: clamp(1.15rem, 1.5vw, 2.05rem); line-height: 1.15; }
#view-tv .tv-history-item .meta{ font-size: clamp(.95rem, 1vw, 1.3rem); line-height: 1.35; margin-top: 4px; }
#view-tv .tv-history-item.tv-history-empty{ font-size: clamp(.95rem, 1vw, 1.3rem); }
#view-tv .tv-history-list{ gap: 8px; }

/* relogio do cabecalho na mesma escala fluida */
#view-tv .tv-clock-chip span{   font-size: clamp(.82rem, .85vw, 1.05rem); }
#view-tv .tv-clock-chip strong{ font-size: clamp(1.35rem, 1.6vw, 2.1rem); }


/* ============================================================================
   09 · TV — chip de tipo no historico                          [auditoria 14]

   PROBLEMA: dois donos brigando pelo mesmo chip.
     15-padronizacao-master.css:34-38 -> position:absolute; top:9px; right:11px;
                                         font .6rem; color:#fff; fundo solido
     20-panel-console.css:1819-1831    -> display:inline-block; margin-top:8px;
                                         font .72rem; color:#394820; fundo palido
   Como 20 carrega depois (index.html:25 vs :46), sobra um hibrido: chip
   absoluto (de 15) empurrado 8px para baixo por um margin-top que so faz
   sentido em fluxo (de 20), palido, sobre o .code — que nao reserva
   padding-right (tv.js:292 emite o chip como ultimo filho).

   DECISAO: fica absoluto no canto (compacto), sem o margin-top parasita, com
   o cartao reservando a faixa. Contraste solido para leitura a distancia.
   ============================================================================ */

#view-tv .tv-history-item{
  position: relative;
  padding: 12px 14px;
  padding-right: 108px;
}
#view-tv .tv-hist-type{
  position: absolute;
  top: 10px;
  right: 12px;
  margin: 0;
  padding: 4px 12px;
  font-size: clamp(.72rem, .78vw, .95rem);
  font-weight: 800;
  letter-spacing: .04em;
  border: none;
  color: #fff;
}
#view-tv .tv-hist-type.is-pref{   background: #b45309; color: #fff; }
#view-tv .tv-hist-type.is-appt{   background: #1d4ed8; color: #fff; }
#view-tv .tv-hist-type.is-normal{ background: #394820; color: #fff; }

/* os overrides escuros de 20:1929-1938 tem body.theme-dark (1-3-0) e venceriam
   as regras acima (1-2-0): re-declarados aqui na mesma especificidade */
body.theme-dark #view-tv .tv-hist-type.is-pref{   background: #a8620f; color: #fff; border: none; }
body.theme-dark #view-tv .tv-hist-type.is-appt{   background: #2f5fc4; color: #fff; border: none; }
body.theme-dark #view-tv .tv-hist-type.is-normal{ background: #5c6f3a; color: #fff; border: none; }


/* ============================================================================
   10 · TV — badge de tipo solido                               [auditoria 15]

   PROBLEMA: 15-padronizacao-master.css:27-32 desenhou uma pilula SOLIDA de
   texto branco; 20-panel-console.css:1747-1768 (carrega depois) troca por um
   tonal palido. Sobrou um hibrido — o clamp de fonte vem de 15, o resto de 20
   — e num mural lido a distancia o tonal palido perde contraste.

   DECISAO: volta ao solido (intencao de 15), com os matizes acessiveis de 20
   (texto branco sobre #b45309 / #1d4ed8 / #394820, contraste >= 4.9:1).
   ============================================================================ */

#view-tv .tv-type-badge{
  padding: 8px 26px;
  margin: 0 0 16px;
  border: 2px solid transparent;
  font-size: clamp(1rem, 2.2vw, 1.9rem);
  font-weight: 900;
  letter-spacing: .05em;
  color: #fff;
  box-shadow: 0 8px 20px rgba(39,49,20,.22);
}
#view-tv .tv-type-badge.is-pref{   background: #b45309; color: #fff; border-color: transparent; }
#view-tv .tv-type-badge.is-appt{   background: #1d4ed8; color: #fff; border-color: transparent; }
#view-tv .tv-type-badge.is-normal{ background: #394820; color: #fff; border-color: transparent; }

/* mesmo motivo da secao 09: 20:1891-1898 usa body.theme-dark (1-3-0) */
body.theme-dark #view-tv .tv-type-badge.is-pref{   background: #a8640d; color: #fff; border-color: transparent; }
body.theme-dark #view-tv .tv-type-badge.is-appt{   background: #3b6fd4; color: #fff; border-color: transparent; }
body.theme-dark #view-tv .tv-type-badge.is-normal{ background: #5c6f3a; color: #fff; border-color: transparent; }


/* ============================================================================
   11 · TV — coluna lateral fluida                          [MQ][auditoria 16]

   PROBLEMA: 08:382 fixa a lateral em 360px e 08:542 reduz para 320px em
   1200px. Numa TV 4K a lateral vira uma tira; em 1366 rouba 26% do palco.

   [MQ] As media queries de 08:540-544 e 08:546-560 sao de folha ANTERIOR:
   sem re-declara-las aqui, a regra sem media desta folha venceria as duas e
   a TV deixaria de empilhar em tela estreita.
   ============================================================================ */

#view-tv .tv-layout{
  grid-template-columns: minmax(0, 1fr) clamp(300px, 20vw, 520px);
}
@media (max-width: 1200px){
  #view-tv .tv-layout{ grid-template-columns: minmax(0, 1fr) clamp(280px, 26vw, 340px); }
}
@media (max-width: 980px){
  #view-tv .tv-layout{ grid-template-columns: 1fr; }
}


/* ============================================================================
   12 · TV — botoes reais do topbar                             [auditoria 17]

   PROBLEMA: tres regras desenham botoes que nao existem no DOM —
   .tv-btn-admin (08:367), .tv-btn-intranet (08:373) e .tv-btn-logout
   (20:1696-1703) — enquanto tv.html:13-14 usa `btn ghost` e `btn danger`.
   Hoje o "Sair" herda o gradiente ROSA de .aur .btn.danger
   (aurora-core.css:96), fora da identidade e com pouco contraste sobre a
   faixa verde-escura do cabecalho.

   CORRECAO SEM JS: aplicar a intencao daquelas regras nas classes que o
   markup realmente usa. (A poda das tres regras mortas fica para a fase de
   limpeza — nao da para fazer daqui sem editar 08 e 20.)
   ============================================================================ */

#view-tv .tv-topbar .btn.danger{
  background: #dc2626;
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(220,38,38,.42);
}
#view-tv .tv-topbar .btn.danger:hover{ background: #b91c1c; }

#view-tv .tv-topbar .btn.ghost{
  background: rgba(232,237,225,.94);
  border: 1px solid rgba(224,231,212,.82);
  color: #3b4326;
  font-weight: 700;
}
#view-tv .tv-topbar .btn.ghost:hover{ background: #fff; }

/* controles do cabecalho na mesma caixa do botao de audio (secao 07) */
#view-tv .tv-topbar .btn{ min-height: 46px; padding-block: 0; }


/* ============================================================================
   13 · TOTEM — botoes de departamento preenchidos              [auditoria 18]

   PROBLEMA: totem.js:22 emite `btn btn-primary totem-dept-btn`. A classe
   .aur .btn{background:transparent} (aurora-core.css:84, 0-2-0) vence
   .btn-primary{background:var(--primary)} (05-buttons.css:22, 0-1-0), e
   08:961-972 so da tamanho/sombra/border-color. Resultado: o alvo PRINCIPAL
   do totem e um retangulo vazado, sem afordancia de toque.

   ONDA 2 (item 5): totem.js:22 passou a emitir `btn primary totem-dept-btn`,
   a classe do kit. Com isso `.aur .btn.primary` (aurora-core.css:92) fornece
   `color:#fff` e `border:none` — as duas declaracoes foram REMOVIDAS daqui
   por redundancia.

   O `background` FICA. `.btn.primary` pinta com var(--brand), e --brand
   INVERTE no tema escuro (aurora-core.css:35) para #8fb057: o kit deixaria
   texto branco sobre verde claro no alvo principal do totem. O gradiente
   abaixo e em hex literal justamente para nao inverter. `:active` e
   `:focus-visible` tambem ficam — o kit nao os oferece.
   ============================================================================ */

#view-totem .totem-dept-btn{
  background: linear-gradient(135deg, #394820 0%, #4c5d2f 55%, #64793f 100%);
  text-shadow: 0 1px 3px rgba(0,0,0,.22);
}
#view-totem .totem-dept-btn:hover{
  background: linear-gradient(135deg, #46592a 0%, #5b6f39 55%, #74894a 100%);
}
/* feedback de toque: o dedo nao tem hover */
#view-totem .totem-dept-btn:active{
  transform: translateY(1px) scale(.995);
  box-shadow: 0 6px 14px rgba(40,49,23,.22);
}
#view-totem .totem-dept-btn:focus-visible{
  outline: 3px solid #c4881a;
  outline-offset: 3px;
}


/* ============================================================================
   14 · TOTEM — alvos de toque >= 48px                          [auditoria 19]

   PROBLEMA: "Confirmar"/"Voltar" (totem.html:35-36), "Sair (Tecnico)" (:50) e
   a toolbar (:6-7) sao .aur .btn com padding 9px 14px e fonte 13px (~38-40px
   de altura) — abaixo do minimo de 48px para toque. O espacamento entre os
   botoes do formulario e de 10px (08:1023).

   :not(.totem-dept-btn) preserva os breakpoints do sistema para o botao de
   departamento (08:1105-1108 ja define min-height 82px em tela estreita);
   sem a exclusao, esta regra sem media venceria aquela com media.
   ============================================================================ */

#view-totem .btn:not(.totem-dept-btn){
  min-height: 56px;
  padding: 14px 26px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 14px;
}
#view-totem .totem-form-actions{ gap: 16px; }
#view-totem .btn:not(.totem-dept-btn):active{ transform: translateY(1px); }

/* o alvo de toque tambem precisa de foco visivel: o totem pode receber
   teclado numerico/leitor de tela em algumas unidades */
#view-totem .btn:focus-visible,
#view-totem input:focus-visible{
  outline: 3px solid #c4881a;
  outline-offset: 3px;
}


/* ============================================================================
   15 · TOTEM — altura pelo token de viewport               [MQ][auditoria 20]

   PROBLEMA: 08:867 usa calc(100vh - 96px), 08:1059 calc(100vh - 88px) e
   08:1085 calc(100vh - 76px). Os 96/88/76 sao somas manuais de
   --viewport-footer-space (56px) com o padding daquele breakpoint. O sistema
   ja resolve isso com --app-viewport-height (01-tokens.css:92-100), que traz
   o @supports (height:100dvh) — justamente o que evita o pulo da barra de
   endereco em tablet. Os tres valores magicos viram um so contrato.

   [MQ] Os tres breakpoints sao re-declarados aqui pelo mesmo motivo da
   secao 11. Padding/gap/radius de 08:1058-1061 e 08:1084-1089 nao sao
   tocados — so a altura.
   ============================================================================ */

#view-totem .totem-shell{
  min-height: calc(var(--app-viewport-height) - 40px); /* 40px = padding 20px da view */
}
@media (max-width: 920px){
  #view-totem .totem-shell{ min-height: calc(var(--app-viewport-height) - 32px); } /* padding 16px */
}
@media (max-width: 640px){
  #view-totem .totem-shell{ min-height: calc(var(--app-viewport-height) - 20px); } /* padding 10px */
}

/* ============================================================================
   16 · OPERADOR — faixas da barra de espera                     [auditoria 21]

   HISTORICO: esta secao ja foi duas coisas antes. Primeiro tokenizou o
   gradiente rosa da barra; depois a escondeu, quando descobri que `--w`
   estava cravado em 50% e nenhum JS a alimentava. Agora a barra MEDE, entao
   as duas versoes anteriores viraram regra morta e sairam. O `display:none`
   que servia de paliativo nao existe mais.

   ESCALA — teto de 15 minutos, e nao um numero inventado.
   Procurei parametro de SLA de espera no sistema antes de cravar: nao existe
   configuracao de tempo de fila (o `sla_hours` que aparece no backend e das
   tarefas da Regulacao, medido em HORAS e de outro dominio). O que existe e
   uma convencao ja em uso para exatamente esta grandeza, em operator.js: o
   chip de cada senha da fila e 'ok' abaixo de 10 min, 'warn' abaixo de 15 e
   'late' a partir de 15. Adotei esses mesmos limiares como escala da barra.

   A vantagem nao e so evitar numero novo: a barra e os chips passam a contar
   a MESMA historia. Quando a barra enche e fica vermelha, o chip da senha
   mais antiga logo abaixo esta vermelho tambem — o painel nunca se
   contradiz. Para nao correr o risco de divergirem, os dois lugares agora
   leem os mesmos `_waitOkMin` / `_waitLateMin` declarados no modulo.

   Acima de 15 min a barra fica cheia (clamp em 100%) e vermelha: passou do
   ponto em que a espera ja e ruim, e o numero exato continua no `.k-val`.

   FAIXAS, nos tokens que invertem no tema escuro (aurora-core.css:22,39-40):
     is-ok    < 10 min   --ok   dentro do esperado
     is-warn  10-14 min  --p1   atencao
     is-late  >= 15 min  --p0   critico

   ESTADO ZERO: com a fila vazia o JS nao poe classe nenhuma e mantem --w em
   0%. O trilho de 6px continua ocupando o mesmo espaco — o cartao nao muda
   de altura e nada desalinha — mas sem preenchimento e sem cor de estado,
   entao nao ha como confundir com "meio cheia". O markup tambem nasce em
   `--w:0%`, para nao existir barra fantasma antes do primeiro render.

   OS OUTROS DOIS KPIs SEGUEM SEM BARRA, pela mesma regra que tirou o 50%:
     · "Pacientes aguardando" e uma contagem sem teto. Nao ha capacidade,
       meta nem lotacao configurada em lugar nenhum do sistema — qualquer
       denominador seria invencao minha.
     · "Atendimentos do dia" nao tem sequer valor: o `.k-val` de
       views/operator.html:73 e um travessao fixo, sem id, e nenhum JS
       escreve nele. Barra sobre um cartao vazio seria pior ainda.
   A assimetria que sobra passa a ser informacao: barra existe onde ha meta.

   O icone deste cartao (.k-sla .k-ico, aurora-core.css:180) e um gradiente
   rosa fixo. Com a barra verde no estado normal, ele ficaria como o unico
   elemento em cor de alarme num cartao saudavel — entao volta ao gradiente
   neutro do kit. Quem carrega o estado agora e a barra.
   ============================================================================ */

/* Transicao curta. Desde a onda 4 a barra tem DOIS gatilhos: o render da fila
   (a cada 12s, quando ha dado novo) e um ticker de relogio de 15s que apenas
   recalcula a espera a partir de `issued_at` — sem rede e sem redesenhar a
   fila. Os 0.3s cobrem os dois casos.
   NOTA PARA QUEM FOR MEDIR: durante esses 0.3s a largura lida por script
   ainda esta a caminho do valor final. Medir antes disso devolve numero
   menor (ou zero) e parece bug — espere a transicao terminar. */
#view-operator .kpis-op .k-bar i{ transition: width .3s ease, background .3s ease; }

#view-operator .kpis-op .k-sla.is-ok   .k-bar i{ background: var(--ok); }
#view-operator .kpis-op .k-sla.is-warn .k-bar i{ background: var(--p1); }
#view-operator .kpis-op .k-sla.is-late .k-bar i{ background: var(--p0); }

/* icone neutro: o alarme mora na barra, nao num gradiente fixo */
#view-operator .kpis-op .k-sla .k-ico{
  background: linear-gradient(135deg, var(--brand), #64793f);
}


/* ============================================================================
   17 · RECEPCAO — reset das abas que viraram <button>       [ONDA 2 · item 1]

   MUDANCA NO MARKUP: views/reception.html:78-81 trocou as quatro
   `<div class="rec-tab" onclick>` por `<button type="button" class="rec-tab">`,
   para as abas entrarem na ordem de tabulacao e responderem a Enter/Espaco.
   A classe foi mantida (o proprio HTML avisa na linha 77 que .rec-tab e
   global e nao pode ser renomeada), entao TODAS as regras de aparencia
   existentes continuam casando.

   ESTE BLOCO EXISTE SO PARA ZERAR O QUE O UA APLICA A <button> E NAO APLICAVA
   A <div>. Levantei o que ja estava coberto por CSS de autor em .rec-tab —
   background, border, padding, color, border-radius, font-size, font-weight,
   cursor e margin-bottom vem de 09-reception.css:66-87 (com !important),
   reception-skin.css:26-28 e 20-panel-console.css:631-643 — e o que sobrava
   sem dono e exatamente o que esta abaixo. Sao propriedades que um <div>
   HERDA do pai e que o <button> recebe declaradas pelo navegador:

     font-family   UA declara Arial/system-ui no botao; a div herdava a
                   Poppins de reception-skin.css:8  <- a regressao visivel
     font-style / line-height / letter-spacing / word-spacing / text-transform
                   idem: herdadas na div, declaradas pelo UA no botao
     text-align    UA usa center no botao; a div herdava start
     appearance    remove o desenho nativo de controle

   NAO mexo em `margin`: 09-reception.css:74 fixa `margin-bottom:-2px
   !important` (o truque que faz a aba montar sobre a borda das abas), e um
   shorthand `margin:0` aqui so criaria confusao. Tambem nao mexo em
   box-sizing: reception-skin.css:7 ja forca border-box em #view-reception *,
   entao div e button ja eram iguais nesse ponto.

   Conferi que so UMA regra de elemento `button` passa a alcancar as abas:
   `.aur button:focus-visible` (aurora-core.css:302) — que e justamente o
   ganho pretendido. As demais (00-mobile-foundation.css:69,71,86) exigem um
   ancestral .au-toolbar, e as abas vivem em .tabs.rc-tabs.
   ============================================================================ */

#view-reception button.rec-tab{
  font-family: inherit;
  font-style: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
  -webkit-appearance: none;
          appearance: none;
}

/* anel de foco acompanhando o formato da aba (canto superior arredondado de
   20-panel-console.css:632), no lugar do offset externo de aurora-core.css:302 */
#view-reception button.rec-tab:focus-visible{
  outline: 2px solid var(--brand2);
  outline-offset: -3px;
  border-radius: 10px 10px 0 0;
}


/* fim da camada 23-ux-atendimento.css */