/* A biblioteca de componentes (templates/componentes/*.html, catálogo em _todos.html; 05/10/2026, parte C0 do plano
   da sidebar). As macros escrevem as classes de sempre (.selo, .kpi, .btn, .msg, table.t, .estado, .card…), vestidas
   pelo style.css e pelo visual.css. Aqui fica SÓ o que ainda não existia, em dois grupos:
   1. classes e atributos que só as macros escrevem (nenhuma tela de hoje os usa, então nada muda nelas):
      .msg.atencao, .msg-fechar, .toast, dialog.modal, dialog.ui-confirma, .chip[aria-current], .abas [role=tab]
      (o .so-leitor e as cores do número do .kpi moram no style.css: valem também no layout de hoje);
   2. o que muda uma classe que já existe: só no visual novo, :where(:root[data-visual="novo"]) (peso zero).
   Cor sempre por token: var(--e-<papel>, <a cor de hoje>), como no resto da casa. */

/* ------------------------------------------------------------------ 1. o que só as macros escrevem */

/* a variante amarela do aviso: a mesma cor do .sst-aviso (#7a5214 sobre #fdf4e3: 6,9:1) */
.msg.atencao { background: var(--amarelo-f); color: var(--e-amarelo-t, #7a5214); border: 1px solid var(--e-amarelo-b, #f0dcb4); }
.msg-fechar { float: right; margin: -2px -4px 0 12px; padding: 0 4px; border: 0; background: none; color: inherit;
  font: inherit; font-size: 1.15rem; line-height: 1; cursor: pointer; border-radius: 4px; }
.msg-fechar:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }

/* chip que filtra (chips()): o ativo, com o mesmo verde do .chip.on do SST */
.chip[aria-current] { border-color: var(--verde); background: var(--verde-claro); color: var(--verde-esc); }

/* abas sem recarregar (abas_js()): o botão veste o mesmo que o link das abas de página (style.css:84-85) */
.abas [role="tab"] { padding: 9px 14px; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px;
  background: none; color: var(--suave); font: inherit; font-weight: 600; cursor: pointer; }
.abas [role="tab"][aria-selected="true"] { color: var(--verde-esc); border-color: var(--verde); }
/* a aba que começa um grupo novo (abas_js com `separador`): um respiro e um traço antes dela */
.abas [role="tab"].abas-sep { position: relative; margin-left: 14px; }
.abas [role="tab"].abas-sep::before { content: ""; position: absolute; left: -9px; top: 8px; bottom: 10px;
  border-left: 1px solid var(--linha); }

/* o toast do ui.js (o mesmo desenho do .lb-toast da Liberação) */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1100; max-width: min(560px, calc(100vw - 32px));
  background: var(--e-tinta-forte, var(--tinta)); color: #fff; padding: 10px 16px; border-radius: 8px; font-size: .92rem;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .2); }
.toast.erro { background: var(--e-vermelho-forte, var(--vermelho)); }
.toast[hidden] { display: none; }

/* a janela (modal()) e a confirmação do ui.js, sobre o <dialog> nativo */
dialog.modal, dialog.ui-confirma { border: 1px solid var(--linha); border-radius: 14px; padding: 18px 20px;
  background: var(--e-cartao, #fff); color: var(--tinta); width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 32px); overflow-y: auto; }
dialog.modal.estreita, dialog.ui-confirma { width: min(480px, calc(100vw - 32px)); }
dialog.modal.larga { width: min(980px, calc(100vw - 32px)); }
/* a variante presa à direita, da altura da tela (o painel do pedido médico, 06/10/2026): a página continua à vista
   do lado; o corpo rola e o pé (.modal-pe) fica sempre no fim. No celular, a tela inteira. */
dialog.modal.lateral[open] { display: flex; flex-direction: column; }
dialog.modal.lateral { margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(480px, 100vw);
  max-width: 100vw; border-radius: 14px 0 0 14px; border-right: 0; overflow: hidden; padding-bottom: 14px; }
dialog.modal.lateral > :not(.modal-topo):not(.modal-pe):not(.msg) { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
dialog.modal.lateral .modal-pe { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linha); }
@media (max-width: 560px) { dialog.modal.lateral { width: 100vw; border-radius: 0; border: 0; } }
@media (prefers-reduced-motion: no-preference) {
  dialog.modal.lateral[open] { animation: lateral-entra .18s ease-out; }
  @keyframes lateral-entra { from { transform: translateX(24px); opacity: .6; } }
}
dialog.modal::backdrop, dialog.ui-confirma::backdrop { background: rgba(15, 30, 22, .45); }
.modal-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.modal-topo h2 { margin: 0; }
.modal-topo form { margin: 0; }
.modal-pe { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 16px; }
.ui-confirma-texto { margin: 0 0 16px; }
.ui-confirma .acoes { justify-content: flex-end; }

@media (prefers-reduced-motion: no-preference) {
  .toast:not([hidden]) { animation: toast-entra .18s ease-out; }
  @keyframes toast-entra { from { opacity: 0; transform: translate(-50%, 8px); } }
}

/* ------------------------------------------------------------------ 2. o visual novo sobre classes que já existem */

/* o cartão de número que filtra: sem sublinhado, borda na passada e no filtro aplicado (era só o a.em-kpi) */
:where(:root[data-visual="novo"]) a.kpi { text-decoration: none; color: inherit; }
:where(:root[data-visual="novo"]) a.chip { text-decoration: none; }
:where(:root[data-visual="novo"]) a.kpi:hover { border-color: var(--verde); }
:where(:root[data-visual="novo"]) a.kpi.on { border-color: var(--verde); box-shadow: inset 0 0 0 1px var(--verde); }
/* paginação: a página atual da numerada, por fundo (sem borda que surge) */
:where(:root[data-visual="novo"]) .paginas a { min-width: var(--ctl-h-peq); text-align: center; border-radius: var(--v-raio-ctrl); padding: 4px 8px; }
:where(:root[data-visual="novo"]) .paginas a.on { background: var(--verde-claro); color: var(--verde-esc); font-weight: 650; }
/* acrílico: o toast e as janelas viram vidro como o resto do que flutua (temas.css, «o que flutua por cima») */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :where(:root[data-visual="novo"][data-acrilico="on"]) .toast {
    background: color-mix(in srgb, var(--e-tinta-forte, var(--tinta)) 88%, transparent);
    -webkit-backdrop-filter: blur(var(--acr-blur, 14px)); backdrop-filter: blur(var(--acr-blur, 14px)); }
}