/* ==========================================================================
   PADRÕES DE INTERFACE — Melhorias UX, Etapa 1 (aprovadas em 30/09/2026)
   Carregado DEPOIS do CSS principal. Regras que sobrescrevem estilos injetados
   pelo próprio JS (rt-*, cfg-*, rtb-*) usam ":root" para ganhar especificidade;
   utilitários do Tailwind são sobrescritos sem prefixo (para não anular as
   variantes hover:/focus:).
   Referência das regras: DESIGN.md (seção "Regras de padrão").
   Classes Tailwind "órfãs" (sem regra no CSS compilado) NÃO são recriadas aqui,
   exceto .w-80, .h-px e .bg-primary-200 (exigidas por LAYOUT-001 e UI-004).
   ========================================================================== */

:root {
  --ui-primary-50: #f0f4ff; --ui-primary-100: #e0e9ff; --ui-primary-200: #c4d3fb; --ui-primary-300: #9fb5f1;
  --ui-primary-400: #7592e5; --ui-primary-500: #4f72d9; --ui-primary-600: #3d5cbf; --ui-primary-700: #2d4599;
  --ui-borda-card: #e3e8ef;
  --ui-texto-3: #74839a;
  --ui-raio-controle: 6px; --ui-raio-container: 10px;
  --ui-esp-1: 4px; --ui-esp-2: 8px; --ui-esp-3: 12px; --ui-esp-4: 16px; --ui-esp-6: 24px; --ui-esp-8: 32px;
  /* TYPE-003 — seis tamanhos de letra */
  --ui-fs-1: 11.5px; --ui-fs-2: 12.5px; --ui-fs-3: 14px; --ui-fs-4: 16px; --ui-fs-5: 20px; --ui-fs-6: 24px;
  --ui-fs-min: 11.5px; --ui-fs-grafico-min: 11px;
}

/* ---- LAYOUT-001 · painel lateral da consulta com largura fixa (20rem) ---- */
.w-80 { width: 20rem; }

/* ---- UI-004 · seções bem separadas -------------------------------------- */
.card { border-radius: var(--ui-raio-container); border-color: var(--ui-borda-card); box-shadow: none; }
/* linha fina ao lado do título do grupo (classes já usadas pelo GrupoPai) */
.h-px { height: 1px; }
.bg-primary-200 { background-color: var(--ui-primary-200); }

/* ---- LAYOUT-003 · ritmo de espaçamento (escala 4·8·12·16·24·32) --------- */
.grupo-pai-h { margin-top: var(--ui-esp-6); margin-bottom: var(--ui-esp-2); }
.consulta-com-indice > div:first-child .grupo-pai-h,
.consulta-com-indice > .indice-consulta + div .grupo-pai-h { margin-top: 0; }

/* ---- TYPE-002 · texto secundário legível -------------------------------- */
.text-slate-400 { color: var(--ui-texto-3); }

/* ---- TYPE-003 · seis tamanhos de letra: 11,5 · 12,5 · 14 · 16 · 20 · 24 -- */
.text-\[10px\], .text-\[11px\] { font-size: var(--ui-fs-1); }
.text-xs { font-size: var(--ui-fs-2); }
.label { font-size: var(--ui-fs-2); }
.text-lg { font-size: var(--ui-fs-5); line-height: 1.75rem; }
.text-4xl { font-size: var(--ui-fs-6); line-height: 2rem; }
.modalbase-title, .janela-titulo { font-size: var(--ui-fs-5); line-height: 1.75rem; }
/* barra de formatação (rich-editor-core.js é gerado em tools/rich-editor; ajuste feito aqui) */
:root .rtb-chars-title { font-size: var(--ui-fs-1); }
:root .rtb-aa, :root .rtb-item { font-size: var(--ui-fs-2); }
:root .rtb-char { font-size: var(--ui-fs-4); }

/* ---- UI-001 · botões com a mesma altura --------------------------------- */
/* padrão: 38 px (14 px de letra, 20 px de linha, 8 px em cima e embaixo, borda de 1 px) */
.btn-primary, .btn-secondary, .btn-danger { font-size: var(--ui-fs-3); line-height: 20px; padding-top: 8px; padding-bottom: 8px; }
.btn-primary, .btn-danger { border: 1px solid transparent; }
/* compacto: 30 px — só em painéis estreitos, nunca misturado com o padrão na mesma fileira */
.btn-primary.text-xs, .btn-secondary.text-xs, .btn-danger.text-xs { font-size: var(--ui-fs-2); line-height: 28px; padding-top: 0; padding-bottom: 0; }
/* confirmação de ação positiva (ex.: Abrir Prontuário) */
.btn-sucesso { background-color: #059669; }
.btn-sucesso:hover { background-color: #047857; }

/* ---- CONS-004 · cantos: 6 px (controles e itens) · 10 px (caixas) · pílula */
.btn-primary, .btn-secondary, .btn-danger, .input-field, .sidebar-item, .badge { border-radius: var(--ui-raio-controle); }
.rounded, .rounded-md { border-radius: var(--ui-raio-controle); }
.rounded-t-lg { border-top-left-radius: var(--ui-raio-controle); border-top-right-radius: var(--ui-raio-controle); }
button.rounded-lg, input.rounded-lg, select.rounded-lg, textarea.rounded-lg, span.rounded-lg, a.rounded-lg, label.rounded-lg { border-radius: var(--ui-raio-controle); }
div.rounded-lg, p.rounded-lg, img.rounded-lg, iframe.rounded-lg, div.rounded-xl, button.rounded-xl, div.rounded-2xl { border-radius: var(--ui-raio-container); }
.modalbase-card, .modalbase-option { border-radius: var(--ui-raio-container); }
.modalbase-close-btn { border-radius: var(--ui-raio-controle); }
:root .rtb-size-in:focus { border-radius: 6px 0 0 6px; }
:root .rtb-sw, :root .rtb-custom-color { border-radius: var(--ui-raio-controle); }

/* ---- COLOR-004 · borda sem cor definida usa o cinza da paleta (slate-200, não gray-200) */
*, ::before, ::after { border-color: #e2e8f0; }

/* ---- COLOR-001 · um único azul (barra de formatação) -------------------- */
:root .rtb-btn.rtb-on { background: var(--ui-primary-100); border-color: var(--ui-primary-200); color: var(--ui-primary-700); }
:root .rtb-open { border-color: var(--ui-primary-300) !important; background: var(--ui-primary-50) !important; }
:root .rtb-size-in:focus { background: var(--ui-primary-50); }
:root .rtb-item.rtb-cur { background: var(--ui-primary-50); color: var(--ui-primary-700); }
:root .rtb-sw.rtb-cur { outline-color: var(--ui-primary-600); }
:root .rt-editor .ProseMirror-selectednode { outline-color: var(--ui-primary-500); }

/* ---- UI-005 · barra de formatação discreta quando inativa --------------- */
:root .rtb.rtb-off { opacity: .5; transition: opacity .2s; }
:root .rtb.rtb-off:hover { opacity: 1; }

/* ---- NAV-001 · abas em 3 níveis ----------------------------------------- */
.abas-n1 > button, .abas-n2 > button, .abas-n3 > button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
/* nível 1 — sublinhado, sem preenchimento */
.abas-n1 > button.border-b-2 { border-radius: 0; background: transparent; padding-top: 8px; padding-bottom: 8px; }
.abas-n1 > button.border-primary-600 { font-weight: 600; }
/* nível 2 — botões agrupados */
.abas-n2 { gap: var(--ui-esp-1); padding-top: var(--ui-esp-2); padding-bottom: var(--ui-esp-2); align-items: center; }
.abas-n2 > button.border-b-2 { border-bottom-width: 0; border-radius: var(--ui-raio-controle); padding: 5px 12px; font-size: var(--ui-fs-3); }
.abas-n2 > button.border-b-2:hover:not(:disabled) { background: #f1f5f9; color: #334155; }
.abas-n2 > button.border-primary-600, .abas-n2 > button.border-primary-600:hover:not(:disabled) { background: var(--ui-primary-50); color: var(--ui-primary-700); font-weight: 600; }
/* nível 3 — etiquetas menores */
.abas-n3 { gap: 2px; padding-top: 6px; padding-bottom: 6px; align-items: center; }
.abas-n3 > button.border-b-2 { border-bottom-width: 0; border-radius: 999px; padding: 3px 11px; font-size: var(--ui-fs-2); background: transparent; }
.abas-n3 > button.border-b-2:hover:not(:disabled) { background: #f1f5f9; color: #334155; }
.abas-n3 > button.border-primary-600, .abas-n3 > button.border-primary-600:hover:not(:disabled) { color: #1e293b; font-weight: 600; background: #fff; box-shadow: inset 0 0 0 1px #cfd8e4; }

/* ---- CONS-003 · Configurações no mesmo padrão de 3 níveis --------------- */
:root .cfg-tabs { background: transparent; padding: 0; gap: var(--ui-esp-6); border-radius: 0; border-bottom: 1px solid #e2e8f0; margin-bottom: var(--ui-esp-4); }
:root .cfg-tab { flex: 0 0 auto; padding: 10px 2px; border-radius: 0; background: transparent; box-shadow: none; border-bottom: 2px solid transparent; margin-bottom: -1px; color: #64748b; }
:root .cfg-tab:hover { color: #334155; }
:root .cfg-tab.active { background: transparent; box-shadow: none; color: var(--ui-primary-700); border-bottom-color: var(--ui-primary-600); font-weight: 600; }
:root .cfg-subtabs { border-bottom: 0; gap: var(--ui-esp-1); margin-bottom: var(--ui-esp-6); }
:root .cfg-subtab { border-bottom: 0; margin-bottom: 0; border-radius: var(--ui-raio-controle); padding: 5px 12px; font-size: var(--ui-fs-3); color: #64748b; }
:root .cfg-subtab:hover { background: #f1f5f9; color: #334155; }
:root .cfg-subtab.active { background: var(--ui-primary-50); color: var(--ui-primary-700); font-weight: 600; }
:root .cfg-subsubtabs { margin: -16px 0 var(--ui-esp-6); padding: 0; background: transparent; border-radius: 0; gap: 2px; }
:root .cfg-subsubtab { border-radius: 999px; padding: 3px 11px; font-size: var(--ui-fs-2); }
:root .cfg-subsubtab.active { background: #fff; color: #1e293b; box-shadow: inset 0 0 0 1px #cfd8e4; font-weight: 600; }

/* ---- NAV-003 · barra única da consulta (tipo · sub-abas · estado · botões) */
.barra-consulta { min-height: 52px; }
.barra-consulta .abas-n2 { padding: 0 0 0 var(--ui-esp-3); border: 0; border-left: 1px solid #e2e8f0; background: transparent; flex: 1 1 auto; }

/* ---- NAV-002 · mapa da consulta ----------------------------------------- */
.consulta-com-indice { display: grid; grid-template-columns: minmax(0, 1fr) 176px; column-gap: var(--ui-esp-6); align-items: start; }
.consulta-com-indice > * { grid-column: 1; min-width: 0; }
.consulta-com-indice > .indice-consulta { grid-column: 2; grid-row: 1 / span 400; position: sticky; top: 0; padding-top: 4px; }
.indice-consulta-t { font-size: var(--ui-fs-1); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #94a3b8; margin: 0 0 var(--ui-esp-2); padding-left: 12px; }
.indice-consulta-i { display: block; width: 100%; text-align: left; background: transparent; border: 0; border-left: 2px solid #e2e8f0; border-radius: 0 6px 6px 0; padding: 4px 8px 4px 12px; font-size: var(--ui-fs-2); line-height: 1.4; color: #64748b; cursor: pointer; transition: color .12s, border-color .12s, background-color .12s; }
.indice-consulta-i:hover { color: #1e293b; background: #f1f5f9; }
.indice-consulta-i.ativo { color: var(--ui-primary-700); border-left-color: var(--ui-primary-500); font-weight: 600; }
.indice-consulta-emitir, .indice-consulta-emitir:hover { margin-top: var(--ui-esp-2); border-left-color: transparent; color: var(--ui-primary-600); font-weight: 600; }
.indice-consulta-emitir:hover { background: var(--ui-primary-50); }
.indice-consulta-i:focus-visible { outline: 2px solid var(--ui-primary-400); outline-offset: 1px; }

/* ---- UX-014 · Pontos Guia ---------------------------------------------- */
.pguia > * + * { margin-top: var(--ui-esp-3); }
.pguia-l { font-size: var(--ui-fs-1); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #64748b; margin: 0 0 4px; }
.pguia-v { font-size: var(--ui-fs-3); line-height: 1.45; color: #1e293b; }
.pguia-vazio { font-size: var(--ui-fs-2); font-style: italic; color: #94a3b8; margin: 0; }
.pguia-lista .pguia-v > * { position: relative; padding-left: 12px; margin: 0; }
.pguia-lista .pguia-v > * + * { margin-top: 4px; }
.pguia-lista .pguia-v > *::before { content: ""; position: absolute; left: 1px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: #94a3b8; }

/* ---- UX-015 · configuração da IA fora da consulta ----------------------- */
.aviso-ia { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 12px; border-radius: var(--ui-raio-controle); background: #f1f5f9; color: #475569; font-size: var(--ui-fs-2); }
.aviso-ia-btn { margin-left: auto; border: 1px solid var(--ui-primary-200); background: #fff; color: var(--ui-primary-600); border-radius: var(--ui-raio-controle); padding: 4px 12px; font-size: var(--ui-fs-2); font-weight: 600; cursor: pointer; }
.aviso-ia-btn:hover { background: var(--ui-primary-50); }

/* ---- UI-009 · botão "adicionar linha" padronizado, com ícone ------------ */
.btn-add { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border: 1px dashed var(--ui-primary-200); border-radius: var(--ui-raio-controle); background: transparent; color: var(--ui-primary-600); font-size: var(--ui-fs-2); font-weight: 500; cursor: pointer; white-space: nowrap; transition: background-color .15s, border-color .15s; }
.btn-add::before { content: ""; flex-shrink: 0; width: 14px; height: 14px; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat; }
.btn-add:hover { background: var(--ui-primary-50); border-color: var(--ui-primary-400); border-style: solid; }
.btn-add:disabled { opacity: .5; cursor: not-allowed; }

/* ---- UI-015 · dois formatos: contador e etiqueta ------------------------ */
.contador { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px; background: #f1f5f9; color: #475569; font-size: var(--ui-fs-1); font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: none; vertical-align: middle; }
.contador.ativo { background: var(--ui-primary-100); color: var(--ui-primary-700); }
.badge { font-size: var(--ui-fs-1); font-weight: 500; line-height: 16px; padding: 2px 8px; }

/* ---- UI-013 · todas as janelas no mesmo modelo (ModalBase) -------------- */
.janela-overlay { background: rgba(15, 23, 42, .45); }
.janela-card { background: #fff; border-radius: var(--ui-raio-container); box-shadow: 0 20px 40px -12px rgba(15, 23, 42, .25), 0 4px 12px -4px rgba(15, 23, 42, .1); overflow: hidden; }
.janela-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 24px; border-bottom: 1px solid #f1f5f9; flex-shrink: 0; }
.janela-head.centro { align-items: center; }
.janela-titulo { font-weight: 700; color: #1e293b; margin: 0; }
.janela-rodape { padding: 16px 24px; border-top: 1px solid #f1f5f9; display: flex; justify-content: flex-end; gap: 12px; flex-shrink: 0; }

/* ---- MICRO-004 · linhas que abrem algo têm cara de clicáveis ------------- */
.linha-clicavel > td { transition: background-color .12s; }
.linha-clicavel:hover > td { background: var(--ui-primary-50); }
.linha-seta { width: 40px; padding-right: 16px; color: #cbd5e1; }
.linha-seta svg { width: 16px; height: 16px; display: block; margin-left: auto; }
.linha-clicavel:hover .linha-seta { color: var(--ui-primary-500); }
.linha-clicavel-item { background: #f8fafc; transition: background-color .12s; }
.linha-clicavel-item > svg:last-child { color: #cbd5e1; transition: color .12s; }
.linha-clicavel-item:hover { background: var(--ui-primary-50); }
.linha-clicavel-item:hover > svg:last-child { color: var(--ui-primary-500); }

/* ---- UX-011 · avisos do sistema no estilo do sistema -------------------- */
#avisos-sistema { position: fixed; right: 24px; bottom: 56px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; max-width: min(440px, calc(100vw - 48px)); }
.aviso-sistema { display: flex; align-items: flex-start; gap: 12px; padding: 12px 12px 12px 16px; border-radius: var(--ui-raio-container); background: #0f172a; color: #e2e8f0; font-size: var(--ui-fs-3); line-height: 1.45; box-shadow: 0 10px 28px rgba(15, 23, 42, .3); border-left: 4px solid #64748b; }
.aviso-sistema span { flex: 1; min-width: 0; }
.aviso-erro { border-left-color: #ef4444; }
.aviso-atencao { border-left-color: #f59e0b; }
.aviso-sucesso { border-left-color: #10b981; }
.aviso-sistema-acao { flex-shrink: 0; border: 0; background: transparent; color: var(--ui-primary-300); font-size: var(--ui-fs-3); font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 2px; }
.aviso-sistema-acao:hover { color: #fff; }
.aviso-sistema-x { flex-shrink: 0; border: 0; background: transparent; color: #94a3b8; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }
.aviso-sistema-x:hover { color: #fff; }

/* ===== ETAPA 2 ===== */
/* ==========================================================================
   PADRÕES DE INTERFACE — Melhorias UX, Etapa 2 (aprovadas em 01/10/2026)
   Referência das regras: DESIGN.md (seção "Regras de padrão — Etapa 2").
   ========================================================================== */

/* ---- NAV-005 · barra lateral: aviso só quando há problema --------------- */
.selo-erro-banco { display: flex; align-items: center; gap: 6px; margin: 0 12px 12px; padding: 8px 12px; border-radius: var(--ui-raio-controle); background: rgb(239 68 68 / .2); color: #fecaca; font-size: var(--ui-fs-2); line-height: 1.3; }

/* ---- COLOR-005 · item ativo do menu lateral: filete antes do ícone ------- */
.sidebar-item.active { position: relative; font-weight: 600; }
.sidebar-item.active::before { content: ""; position: absolute; left: 4px; top: 9px; bottom: 9px; width: 3px; border-radius: 999px; background: #7592e5; }

/* ---- UX-006 · menu suspenso ancorado ao botão --------------------------- */
.menu-ancorado { position: fixed; z-index: 70; display: flex; flex-direction: column; gap: 2px; padding: 4px; background: #fff; border: 1px solid #e2e8f0; border-radius: var(--ui-raio-container); box-shadow: 0 12px 28px -8px rgb(15 23 42 / .25), 0 4px 10px -4px rgb(15 23 42 / .1); }
.menu-ancorado-i { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border: 0; border-radius: var(--ui-raio-controle); background: transparent; color: #334155; font-size: var(--ui-fs-3); line-height: 20px; font-weight: 500; text-align: left; cursor: pointer; }
.menu-ancorado-i svg { color: #64748b; }
.menu-ancorado-i:hover:not(:disabled), .menu-ancorado-i:focus-visible { background: var(--ui-primary-50); color: var(--ui-primary-700); }
.menu-ancorado-i:hover:not(:disabled) svg, .menu-ancorado-i:focus-visible svg { color: var(--ui-primary-600); }
.menu-ancorado-i.destaque { color: var(--ui-primary-700); font-weight: 600; }
.menu-ancorado-i.destaque svg { color: var(--ui-primary-600); }
.menu-ancorado-i.perigo, .menu-ancorado-i.perigo svg { color: #dc2626; }
.menu-ancorado-i.perigo:hover:not(:disabled), .menu-ancorado-i.perigo:focus-visible { background: #fef2f2; color: #b91c1c; }
.menu-ancorado-i.perigo:hover:not(:disabled) svg, .menu-ancorado-i.perigo:focus-visible svg { color: #b91c1c; }
.menu-ancorado-i:disabled { color: #94a3b8; cursor: not-allowed; }
.menu-ancorado-i:disabled svg { color: #cbd5e1; }
.menu-ancorado-div { height: 1px; background: #e2e8f0; margin: 4px 4px; }
/* botão que abre um menu: ícone · texto · seta */
.btn-menu { display: inline-flex; align-items: center; gap: 6px; }
.btn-menu .btn-menu-seta { margin-right: -2px; opacity: .8; }

/* barra da consulta (NAV-003) com Emitir · Salvar · Descartar · Concluir: o texto de estado encurta antes das sub-abas */
.barra-consulta-estado { min-width: 40px; overflow: hidden; text-overflow: ellipsis; flex: 0 4 auto; }

/* ---- UI-006 · botões de emissão com ícone exclusivo --------------------- */
.btn-emissao { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

/* ---- UI-012 · estado vazio único ---------------------------------------- */
.estado-vazio { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 24px; border: 1px dashed #cbd5e1; border-radius: var(--ui-raio-container); background: #fff; text-align: center; }
.estado-vazio-ic { color: #94a3b8; margin-bottom: 4px; }
.estado-vazio-f { margin: 0; font-size: var(--ui-fs-3); line-height: 1.45; font-weight: 500; color: #475569; }
.estado-vazio-d { margin: 0; font-size: var(--ui-fs-2); line-height: 1.45; color: var(--ui-texto-3); }
.estado-vazio-alerta { margin: 4px 0 0; display: inline-flex; align-items: center; gap: 4px; font-size: var(--ui-fs-2); color: #dc2626; }
.estado-vazio.em-tabela { border-style: dashed; }

/* ---- UI-003 · ícones de ação dos grupos: sempre visíveis, leves em repouso */
/* ":root" para vencer o estilo injetado pelo próprio JS (.grp-act-btn{color:#74839a}), carregado depois */
:root .grp-act-btn, :root .grp-act-olho { color: #94a3b8; opacity: 1; }
:root .grupo-pai:hover > .grupo-pai-h .grp-act-btn, :root .grupo-pai:hover > .grupo-pai-h .grp-act-olho,
:root .card:hover > .secao-h .grp-act-btn, :root .card:hover > .secao-h .grp-act-olho,
:root .grp-act-btn:hover, :root .grp-act-olho:hover, :root .grp-act-btn:focus-visible, :root .grp-act-olho:focus-visible { color: #475569; }
:root .grp-act-btn.alerta-on, :root .grp-act-btn.alerta-on:hover { color: #dc2626 !important; }
:root .grp-act-btn.alerta-on svg { stroke: #dc2626; fill: #dc2626; }

/* ---- MICRO-005 · legenda própria, após a pausa -------------------------- */
.legenda-app { position: fixed; z-index: 10000; top: -9999px; left: -9999px; max-width: 320px; padding: 4px 8px; border-radius: var(--ui-raio-controle); background: #0f172a; color: #e2e8f0; font-size: var(--ui-fs-2); font-weight: 500; line-height: 1.35; box-shadow: 0 6px 16px rgb(15 23 42 / .25); pointer-events: none; white-space: nowrap; visibility: hidden; }
.legenda-app.visivel { visibility: visible; }
.legenda-app kbd { font: 600 var(--ui-fs-1)/1 ui-monospace, Consolas, monospace; padding: 2px 4px; margin-left: 4px; border-radius: 4px; border: 1px solid #64748b; color: #e2e8f0; }

/* ---- NAV-007 · Preferências: atalhos de teclado (só leitura) ------------ */
.pref-linha { display: flex; align-items: flex-start; gap: 12px; margin-top: 12px; }
.pref-rotulo { margin: 0; font-size: var(--ui-fs-3); font-weight: 600; color: #1e293b; }
.pref-dica { margin: 4px 0 0; font-size: var(--ui-fs-2); line-height: 1.45; color: var(--ui-texto-3); }
.pref-switch { position: relative; flex-shrink: 0; width: 36px; height: 20px; margin-top: 1px; padding: 0; border: 0; border-radius: 999px; background: #cbd5e1; cursor: pointer; }
.pref-switch.ligado { background: var(--ui-primary-600); }
.pref-switch-bola { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgb(15 23 42 / .25); }
.pref-switch.ligado .pref-switch-bola { left: 18px; }
.com-transicoes .pref-switch, .com-transicoes .pref-switch-bola { transition: background-color .14s, left .14s; }
.atalhos-grupo + .atalhos-grupo { margin-top: 16px; }
.atalhos-grupo-t { margin: 0 0 8px; font-size: var(--ui-fs-1); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #64748b; }
.atalhos-tabela { width: 100%; border-collapse: collapse; table-layout: fixed; }
.atalhos-tabela td { padding: 4px 0; vertical-align: top; border-top: 1px solid #f1f5f9; font-size: var(--ui-fs-3); line-height: 1.45; }
.atalhos-tabela tr:first-child td { border-top: 0; }
.atalhos-k { width: 288px; padding-right: 16px !important; white-space: nowrap; color: #64748b; }
.atalhos-d { color: #334155; }
.atalhos-sep { color: var(--ui-texto-3); font-size: var(--ui-fs-2); text-transform: none; }
.atalho-teclas { display: inline-flex; align-items: center; gap: 2px; color: #94a3b8; }
.atalho-teclas kbd { display: inline-block; min-width: 22px; padding: 2px 6px; border: 1px solid #cbd5e1; border-bottom-width: 2px; border-radius: 4px; background: #f8fafc; color: #334155; font: 600 var(--ui-fs-1)/1.2 ui-monospace, Consolas, monospace; text-align: center; }

/* ---- CONS-001 · classes religadas com aprovação do proprietário (01/10/2026) ------------------
   1) estado aberto/selecionado (botão aberto da Conclusão, chip de substância): era texto branco sobre branco;
      botões da Conclusão com conteúdo e seletor Texto/Áudio ativo: borda azul-clara
   2) ponto âmbar de "evolução em andamento" na aba Consulta Atual
   3) botões e abas desabilitados com aparência de desabilitados */
.bg-primary-600 { background-color: var(--ui-primary-600); }
.border-primary-300 { border-color: var(--ui-primary-300); }
.w-2 { width: .5rem; }
.h-2 { height: .5rem; }
.bg-amber-400 { background-color: #fbbf24; }
.disabled\:opacity-30:disabled { opacity: .3; }
.opacity-50 { opacity: .5; }
.cursor-not-allowed { cursor: not-allowed; }

/* ---- MICRO-001 · contorno de foco ao usar o teclado --------------------- */
button:focus-visible, a:focus-visible, [role="button"]:focus-visible, [role="menuitem"]:focus-visible, [role="tab"]:focus-visible, [role="switch"]:focus-visible, summary:focus-visible,
[tabindex]:not([tabindex="-1"]):not([contenteditable]):not(input):not(textarea):not(select):focus-visible,
:root .cfg-tab:focus-visible, :root .cfg-subtab:focus-visible, :root .cfg-subsubtab:focus-visible, .indice-consulta-i:focus-visible {
  outline: 2px solid #7592e5; outline-offset: 2px;
}
.sidebar-item:focus-visible { outline-color: #9fb5f1; }
/* campos de texto mantêm o anel atual (sem contorno extra) */
.input-field:focus-visible, .rt-editor:focus-visible, .ProseMirror:focus-visible { outline: none; }

/* ---- MICRO-003 · transições curtas (interruptor em Preferências) -------- */
@keyframes ui-aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui-aparecer-menu { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.com-transicoes .janela-overlay, .com-transicoes .af-back, .com-transicoes .modalbase-overlay,
.com-transicoes .aviso-sistema, .com-transicoes .legenda-app.visivel,
.com-transicoes .conteudo-aba > *, .com-transicoes .abas-n2 + .flex-1 > *, .com-transicoes .abas-n3 + .flex-1 > *,
.com-transicoes .cfg-subtabs ~ *, .com-transicoes .cfg-subsubtabs ~ * { animation: ui-aparecer .14s ease-out; }
.com-transicoes .menu-ancorado { animation: ui-aparecer-menu .14s ease-out; }
/* teto de 0,16 s também para as transições que já existiam */
:root .rtb.rtb-off { transition: opacity .15s; }
/* desligado (ou "reduzir movimento" no sistema): corte seco em tudo, exceto indicadores de carregamento */
html:not(.com-transicoes) *, html:not(.com-transicoes) *::before, html:not(.com-transicoes) *::after { transition: none !important; animation: none !important; }
html:not(.com-transicoes) .animate-spin { animation: spin 1s linear infinite !important; }
html:not(.com-transicoes) .animate-pulse { animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite !important; }

/* ===== ETAPA 3 ===== */
/* ==========================================================================
   PADRÕES DE INTERFACE — Melhorias UX, Etapa 3 (4ª rodada, aprovada em 01/10/2026)
   Referência das regras: DESIGN.md (seção "Regras de padrão — Etapa 3").
   ========================================================================== */
:root {
  --alerta-verde-bg: #ecfdf5; --alerta-verde-tx: #047857; --alerta-verde-bd: #a7f3d0;
  --alerta-amarelo-bg: #fef9c3; --alerta-amarelo-tx: #713f12; --alerta-amarelo-bd: #facc15;
  --alerta-ambar-bg: #fde68a; --alerta-ambar-tx: #78350f; --alerta-ambar-bd: #f59e0b;
  --alerta-vermelho-bg: #fee2e2; --alerta-vermelho-tx: #991b1b; --alerta-vermelho-bd: #f87171;
  --alerta-critico-bg: #991b1b; --alerta-critico-tx: #ffffff; --alerta-critico-bd: #7f1d1d;
  --alerta-cinza-bg: #f1f5f9; --alerta-cinza-tx: #475569; --alerta-cinza-bd: #cbd5e1;
  --alerta-azul-bg: #f0f4ff; --alerta-azul-tx: #2d4599; --alerta-azul-bd: #c4d3fb;
}

/* ---- COLOR-003 · escala de alerta (selo = com ícone; célula = fundo da faixa; texto = só a cor) ---- */
.alerta-selo { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 8px; border: 1px solid transparent; border-radius: var(--ui-raio-controle); font-size: var(--ui-fs-1); font-weight: 500; line-height: 16px; white-space: nowrap; vertical-align: middle; }
.alerta-selo-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.alerta-selo.alerta-critico { font-weight: 700; }
button.alerta-selo-btn { cursor: pointer; font-family: inherit; text-align: left; }
button.alerta-selo-btn:hover { filter: brightness(.96); text-decoration: underline; text-underline-offset: 2px; }
.alerta-verde { background: var(--alerta-verde-bg); color: var(--alerta-verde-tx); border-color: var(--alerta-verde-bd); }
.alerta-amarelo { background: var(--alerta-amarelo-bg); color: var(--alerta-amarelo-tx); border-color: var(--alerta-amarelo-bd); }
.alerta-ambar { background: var(--alerta-ambar-bg); color: var(--alerta-ambar-tx); border-color: var(--alerta-ambar-bd); }
.alerta-vermelho { background: var(--alerta-vermelho-bg); color: var(--alerta-vermelho-tx); border-color: var(--alerta-vermelho-bd); }
.alerta-critico { background: var(--alerta-critico-bg); color: var(--alerta-critico-tx); border-color: var(--alerta-critico-bd); }
.alerta-cinza { background: var(--alerta-cinza-bg); color: var(--alerta-cinza-tx); border-color: var(--alerta-cinza-bd); }
.alerta-azul { background: var(--alerta-azul-bg); color: var(--alerta-azul-tx); border-color: var(--alerta-azul-bd); }
.alerta-neutro, .alerta-mais { background: #fff; color: #475569; border-color: #e2e8f0; }
/* célula de tabela: só o fundo e a cor da faixa (sem borda nem ícone); crítico em peso 700 */
td.alerta-cel, .alerta-cel { border-color: #f1f5f9; }
.alerta-cel.alerta-critico { font-weight: 700; }
.alerta-cel > span { color: inherit; }
/* texto: só a cor */
.alerta-txt.alerta-verde, .alerta-txt.alerta-amarelo, .alerta-txt.alerta-ambar, .alerta-txt.alerta-vermelho, .alerta-txt.alerta-cinza, .alerta-txt.alerta-azul { background: transparent; border-color: transparent; }
.alerta-txt.alerta-amarelo { color: #854d0e; }
.alerta-txt.alerta-ambar { color: #92400e; }
.alerta-txt.alerta-critico { padding: 0 4px; border-radius: var(--ui-raio-controle); }

/* ---- UX-013 · selos do paciente ----------------------------------------- */
.selos-paciente { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-width: 0; }
.selos-linha { margin-top: var(--ui-esp-2); }
.selos-linha .alerta-selo { max-width: 360px; }
.selos-lista .alerta-selo { max-width: 100%; white-space: normal; align-items: flex-start; }
.selos-lista .alerta-selo svg { margin-top: 1px; }
.selos-lista .alerta-selo-t { white-space: normal; overflow-wrap: anywhere; }

/* ---- LAYOUT-001-PG · painel Pontos Guia: 280 px, recolhível ------------- */
.w-80.painel-consulta { width: 280px; }
.painel-consulta-abas { display: flex; align-items: stretch; }
.painel-consulta-abas > button.border-b-2 { flex: 1 1 0; min-width: 0; }
.painel-recolher { flex: 0 0 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #64748b; cursor: pointer; }
.painel-recolher:hover { color: #1e293b; background: #f1f5f9; }
.painel-recolhido { width: 36px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; border-right: 1px solid #f1f5f9; background: #f8fafc; }
.painel-reabrir { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--ui-raio-controle); background: transparent; color: #64748b; cursor: pointer; }
.painel-reabrir:hover { background: #e2e8f0; color: #1e293b; }
.painel-recolhido .contador { min-width: 22px; border: 1px solid transparent; }
.pguia-alertas .pguia-l { margin-bottom: 6px; }

/* ---- COLOR-003.05 · avisos do sistema na escala (crítico = risco de perder dados) ---- */
.aviso-sistema { background: var(--alerta-cinza-bg); color: var(--alerta-cinza-tx); border: 1px solid var(--alerta-cinza-bd); border-left-width: 4px; box-shadow: 0 10px 28px rgba(15, 23, 42, .18); }
.aviso-sistema > svg { flex-shrink: 0; margin-top: 2px; }
.aviso-info { background: var(--alerta-cinza-bg); color: var(--alerta-cinza-tx); border-color: var(--alerta-cinza-bd); }
.aviso-sucesso { background: var(--alerta-verde-bg); color: var(--alerta-verde-tx); border-color: var(--alerta-verde-bd); }
.aviso-atencao { background: var(--alerta-amarelo-bg); color: var(--alerta-amarelo-tx); border-color: var(--alerta-amarelo-bd); }
.aviso-erro { background: var(--alerta-vermelho-bg); color: var(--alerta-vermelho-tx); border-color: var(--alerta-vermelho-bd); }
.aviso-critico { background: var(--alerta-critico-bg); color: #fff; border-color: var(--alerta-critico-bd); font-weight: 600; }
.aviso-sistema-x { color: inherit; opacity: .7; }
.aviso-sistema-x:hover { color: inherit; opacity: 1; }
.aviso-sistema-acao { color: var(--ui-primary-700); }
.aviso-sistema-acao:hover { color: var(--ui-primary-600); }
.aviso-critico .aviso-sistema-acao, .aviso-critico .aviso-sistema-acao:hover { color: #fff; }

/* ---- UI-014.03 C · indicador de carregamento único (8 traços, 8 passos, 1 s) ---- */
@keyframes ui-giro-raios { to { transform: rotate(360deg); } }
.ui-carregando { animation: ui-giro-raios 1s steps(8) infinite; transform-origin: 50% 50%; }
/* com as transições desligadas (Preferências) ele gira mais devagar, mas continua aparecendo */
html:not(.com-transicoes) svg.ui-carregando { animation: ui-giro-raios 2s steps(8) infinite !important; }
/* MICRO-002 ② — dentro do botão clicado */
.botao-ocupado { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
/* MICRO-002 ③ — linhas cinza no lugar do conteúdo que carrega */
@keyframes ui-pulso-linhas { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.carregando-linhas { display: flex; flex-direction: column; gap: 8px; padding: 24px; }
.carregando-linhas > span { display: block; height: 12px; border-radius: 4px; background: #e2e8f0; animation: ui-pulso-linhas 1.6s ease-in-out infinite; }
.carregando-linhas > span:nth-child(1) { width: 92%; }
.carregando-linhas > span:nth-child(2) { width: 78%; }
.carregando-linhas > span:nth-child(3) { width: 56%; }
html:not(.com-transicoes) .carregando-linhas > span { animation: ui-pulso-linhas 3.2s ease-in-out infinite !important; }

/* ---- UX-003 · estado de salvamento (bolinha + texto) -------------------- */
.estado-salvo { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--ui-fs-2); line-height: 1.3; color: #475569; white-space: nowrap; }
.estado-salvo-t { overflow: hidden; text-overflow: ellipsis; }
.estado-salvo-bola { flex-shrink: 0; width: 8px; height: 8px; border-radius: 999px; background: #94a3b8; }
.estado-salvo-salvo .estado-salvo-bola { background: #10b981; }
.estado-salvo-alterado .estado-salvo-bola { background: #f59e0b; }
.estado-salvo-salvando .estado-salvo-bola { background: #94a3b8; }
.barra-consulta .estado-salvo { flex: 0 4 auto; margin-left: auto; }

/* ---- TYPE-001 · rótulos de campo: cinza bem mais escuro (#334155), espaçamento .04 em ---- */
.label, :root .rotulo-campo { color: #334155; letter-spacing: .04em; }
.rotulo-com-ic { display: inline-flex; align-items: center; gap: 4px; }

/* ---- UX-016 · editor de texto rico: letra de 12 px, entrelinha 1,65 ---- */
:root .rt-editor { font-size: 12px; line-height: 1.65; }

/* ---- UX-008 · estados de campo (prontuário) ------------------------------ */
/* (2) vazio = amarelo, em todo tipo de campo */
.prontuario-campos .campo-vazio,
.prontuario-campos input.input-field:placeholder-shown:not([readonly]):not(:disabled):not([type="search"]):not([type="password"]):not([placeholder^="Buscar"]):not([placeholder^="Pesquisar"]):not(.campo-auto),
.prontuario-campos input.input-field[value=""]:not([type="checkbox"]):not([type="radio"]):not([readonly]):not(:disabled):not([type="search"]):not([type="password"]):not([placeholder^="Buscar"]):not([placeholder^="Pesquisar"]):not(.campo-auto),
.prontuario-campos textarea.input-field:placeholder-shown:not([readonly]):not(:disabled):not(.campo-auto),
.prontuario-campos select.input-field:not(:disabled):not(.campo-auto):has(> option:checked[value=""]),
.prontuario-campos .oe-trigger:has(.oe-placeholder) { background-color: #fefce8; }
/* (1) obrigatório vazio = vermelho-claro, borda vermelha e ícone ao lado do nome */
/* (prioridade 1 vence o amarelo do vazio, que tem seletores mais específicos) */
:root .prontuario-campos .campo-obrigatorio-vazio, :root .prontuario-campos .campo-obrigatorio-vazio:focus { background-color: #fef2f2 !important; border-color: #f87171 !important; }
:root .rt-wrapper.campo-obrigatorio-vazio .rt-editor { background: #fef2f2 !important; border-color: #f87171 !important; }
.campo-obrig-ic { display: inline-flex; color: #dc2626; margin-left: 4px; vertical-align: -1px; cursor: help; }
.campo-obrig-ic.ok { color: #94a3b8; }
/* campo com rótulo solto (label + campo lado a lado no mesmo bloco): o mesmo ícone, desenhado após o rótulo */
div:has(> .campo-obrig) > label.label::after { content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 4px; vertical-align: -1px; background-color: #dc2626;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat; }
div:has(> .campo-obrig:not(.campo-obrigatorio-vazio)) > label.label::after { background-color: #94a3b8; }
/* (3) preenchido pela IA = fundo branco, borda âmbar e selo "IA" */
.campo-ia, .campo-ia:focus { background-color: #fff; border-color: #fcd34d; }
:root .rt-hl .rt-editor { background: #fff !important; border-color: #fcd34d !important; }
/* (4) automático = cinza #f1f5f9, sem borda, cadeado ao lado do nome com a origem na legenda */
.campo-auto, .campo-auto:focus, input.input-field.campo-auto, select.input-field.campo-auto { background-color: #f1f5f9; border-color: transparent; color: #334155; }
.campo-auto-ic { display: inline-flex; color: var(--ui-texto-3); margin-left: 4px; vertical-align: -1px; cursor: help; }
/* (5) valor padrão ainda não alterado = texto cinza */
.prontuario-campos .campo-padrao { color: var(--ui-texto-3); }
/* dica (exemplo) em itálico */
.prontuario-campos ::placeholder { font-style: italic; }
:root .prontuario-campos .rt-editor p.is-editor-empty:first-child::before { font-style: italic; }

/* ---- UX-009 · janela dos obrigatórios vazios ----------------------------- */
.obrig-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.obrig-lista li { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #e2e8f0; border-radius: var(--ui-raio-controle); }
.obrig-nome { flex: 1; min-width: 0; font-size: var(--ui-fs-3); color: #1e293b; }
.obrig-ir { border: 0; background: transparent; color: var(--ui-primary-600); font-size: var(--ui-fs-2); font-weight: 600; cursor: pointer; padding: 0; }
.obrig-ir:hover { text-decoration: underline; }

/* ---- UI-008 · janela estreita (< 1.300 px): grades 3 → 2 colunas; mapa vira botão ---- */
.risco-par { display: contents; }
.indice-consulta-barra { position: sticky; top: 0; z-index: 6; display: flex; justify-content: flex-end; padding: 0 0 var(--ui-esp-2); background: #f8fafc; grid-column: 1 / -1; }
@media (max-width: 1299.98px) {
  .grade-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* posições fixas da grade de 3 (ex.: Estado Civil em 1–2 e Filhos na 3) não podem criar uma 3ª coluna implícita:
     quem ocupava 2+ colunas passa a ocupar a linha toda; quem tinha coluna fixa volta ao fluxo */
  .grade-3 > [style*="span 2"], .grade-3 > [style*="span 3"], .grade-3 > [style*="/ -1"], .grade-3 > .col-span-2, .grade-3 > .col-span-3 { grid-column: 1 / -1 !important; }
  .grade-3 > [style*="grid-column"]:not([style*="span"]):not([style*="/ -1"]) { grid-column: auto !important; }
  .grade-3 .label, .grade-3 .rotulo-campo, .grade-riscos .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .grade-riscos { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: none !important; row-gap: 12px !important; }
  .grade-riscos > .risco-par { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .grade-riscos > .risco-par > * { grid-column: auto !important; grid-row: auto !important; }
  .consulta-com-indice { grid-template-columns: minmax(0, 1fr); }
}

/* ---- UI-010 · tabelas no mesmo padrão ------------------------------------ */
table.tabela-padrao { border-collapse: collapse; }
.tabela-padrao th { font-size: var(--ui-fs-1) !important; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #64748b !important; padding: 8px 12px !important; line-height: 1.3; }
.tabela-padrao th:not(.bg-primary-50) { background-color: #f8fafc; }
.tabela-padrao th:not(.n), .tabela-padrao td:not(.n) { text-align: left !important; }
.tabela-padrao td { padding: 10px 12px !important; height: 40px; border-top: 1px solid #f1f5f9; }
.tabela-padrao > tbody > tr:first-child > td { border-top: 0; }
.tabela-padrao .n, .tabela-padrao td.n, .tabela-padrao th.n { text-align: right !important; font-variant-numeric: tabular-nums; }
.tabela-padrao td.linha-seta { padding-right: 16px !important; }

/* ---- NAV-004 · sub-aba sem conteúdo com o nome esmaecido (continua clicável) ---- */
.abas-n2 > button.aba-sem-conteudo:not(.border-primary-600), .abas-n3 > button.aba-sem-conteudo:not(.border-primary-600) { color: #a3afc0; }
.abas-n2 > button.aba-com-conteudo:not(.border-primary-600), .abas-n3 > button.aba-com-conteudo:not(.border-primary-600) { color: #334155; font-weight: 500; }

/* ---- UX-007 · escolher o relatório: busca + tipos e subtipos ------------- */
.relsel { display: flex; flex-direction: column; gap: 16px; }
.relsel-busca { position: relative; display: flex; align-items: center; }
.relsel-busca > svg { position: absolute; left: 12px; color: var(--ui-texto-3); pointer-events: none; }
.relsel-busca > input { padding-left: 36px; }
.relsel-colunas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; min-height: 220px; }
.relsel-tipos, .relsel-subs { display: flex; flex-direction: column; gap: 4px; }
.relsel-subs { padding-left: 16px; border-left: 1px solid #e2e8f0; }
.relsel-tipo, .relsel-sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: var(--ui-raio-controle); background: #fff; color: #334155; font-size: var(--ui-fs-3); font-weight: 500; text-align: left; cursor: pointer; }
.relsel-tipo:hover, .relsel-sub:hover { background: var(--ui-primary-50); border-color: var(--ui-primary-300); }
.relsel-tipo.ativo { background: var(--ui-primary-50); border-color: var(--ui-primary-500); color: var(--ui-primary-700); font-weight: 600; }
.relsel-sub.ultimo { border-color: var(--ui-primary-300); }
.relsel-ultimo { flex-shrink: 0; font-size: var(--ui-fs-1); font-weight: 600; color: var(--ui-primary-700); background: var(--ui-primary-100); border-radius: 999px; padding: 1px 8px; }
.relsel-dica { margin: 0; font-size: var(--ui-fs-2); color: var(--ui-texto-3); }
.relsel-resultados { display: flex; flex-direction: column; gap: 16px; }
.relsel-grupo { display: flex; flex-direction: column; gap: 4px; }
.relsel-grupo-t { margin: 0 0 4px; font-size: var(--ui-fs-1); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #64748b; }

/* ---- UI-002 · Fechar Prontuário com ícone de saída ----------------------- */
.btn-com-icone { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

/* ---- UI-011 · histórico de evoluções: linha do tempo compacta ------------ */
.evo-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) 120px; gap: 16px; align-items: start; padding: 16px; cursor: pointer; }
.evo-data { text-align: center; padding-top: 2px; }
.evo-data-dia { display: block; font-size: var(--ui-fs-5); line-height: 1.2; font-weight: 700; color: #1e293b; }
.evo-data-mes { display: block; font-size: var(--ui-fs-2); color: #64748b; }
.evo-corpo { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.evo-l1 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--ui-fs-3); }
.evo-l1 .evo-diag { font-weight: 600; color: #334155; min-width: 0; }
.evo-l2 { font-size: var(--ui-fs-3); color: #334155; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evo-l3, .evo-l4 { font-size: var(--ui-fs-2); color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evo-l4 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; white-space: normal; }
.evo-detalhes { margin-top: 8px; padding-top: 8px; border-top: 1px solid #f1f5f9; display: flex; flex-direction: column; gap: 4px; font-size: var(--ui-fs-2); color: #475569; }
.evo-detalhes b { color: #334155; font-weight: 600; }
.evo-acoes { display: flex; flex-direction: column; gap: 4px; }
.evo-acoes > button { width: 100%; justify-content: flex-start; gap: 6px; display: inline-flex; align-items: center; }
.evo-acoes > button:disabled { opacity: .45; cursor: not-allowed; }
.evo-acoes > .evo-excluir { color: #dc2626; border-color: #fecaca; }
.evo-acoes > .evo-excluir:hover:not(:disabled) { background: #fef2f2; }

/* ===== PSICOMETRIA · REALIZAÇÃO como escala estruturada (forma do PDF oficial) =====
   ITEM = bloco com cabeçalho · SUB-ITEM = linha de tabela · ALTERNATIVA = botão.
   Selecionado = preenchimento azul + texto branco em peso 600 + indicador com "Certo" (nunca só a cor).
   Círculo = escolha única; quadrado = múltipla escolha. Componentes: PsicoGrupoRealizacao e afins. */
.psi-itens { display: flex; flex-direction: column; gap: var(--ui-esp-4); }
.psi-item { border: 1px solid var(--ui-borda-card); border-radius: var(--ui-raio-container); background: #fff; overflow: hidden; }
.psi-item.sub { margin: var(--ui-esp-3) var(--ui-esp-4); }
.psi-item-cab { display: flex; align-items: flex-start; gap: var(--ui-esp-3); padding: var(--ui-esp-3) var(--ui-esp-4); background: var(--ui-primary-50); border-bottom: 1px solid var(--ui-primary-100); }
.psi-item-cab-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--ui-esp-1); }
.psi-item-tit { font-size: var(--ui-fs-2); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ui-primary-700); }
.psi-item-enun { font-size: var(--ui-fs-4); font-weight: 600; line-height: 1.4; color: #1e293b; white-space: pre-wrap; }
.psi-item-dica { font-size: var(--ui-fs-2); color: #475569; }
.psi-item-cab > .contador { flex-shrink: 0; margin-top: 1px; }
/* tabela do PDF: uma coluna por alternativa */
.psi-tabela-wrap { overflow-x: auto; }
table.psi-tabela { width: 100%; min-width: 560px; border-collapse: collapse; }
.psi-tabela th { padding: 8px 12px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; font-size: var(--ui-fs-1); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #64748b; text-align: left; white-space: nowrap; }
.psi-tabela th.psi-th-num { width: 48px; text-align: center; }
.psi-tabela th.psi-th-alt { width: 120px; text-align: center; border-left: 1px solid #e2e8f0; white-space: normal; }
.psi-tabela td { padding: 8px 12px; border-top: 1px solid #e2e8f0; vertical-align: middle; font-size: var(--ui-fs-3); line-height: 1.45; color: #1e293b; }
.psi-tabela tbody tr:first-child td { border-top: 0; }
.psi-tabela tbody tr:nth-child(even) td { background: #f8fafc; }
.psi-tabela td.psi-num, .psi-linha-num { text-align: center; font-weight: 600; color: #475569; font-variant-numeric: tabular-nums; }
.psi-tabela td.psi-cel { padding: 6px 8px; border-left: 1px solid #e2e8f0; text-align: center; }
/* sub-itens fora de tabela: uma linha cada (alternativas na linha, ou abaixo em grade) */
.psi-item-corpo > .psi-linha + .psi-linha, .psi-tabela-wrap + .psi-item-corpo > .psi-linha:first-child { border-top: 1px solid #e2e8f0; }
.psi-linha { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--ui-esp-3); row-gap: var(--ui-esp-2); align-items: center; padding: var(--ui-esp-3) var(--ui-esp-4); }
.psi-linha.sem-num { grid-template-columns: minmax(0, 1fr); }
.psi-linha.inline { grid-template-columns: 48px minmax(0, 1fr) auto; }
.psi-linha.inline.sem-num { grid-template-columns: minmax(0, 1fr) auto; }
.psi-linha:not(.inline) > .psi-linha-ctrl { grid-column: 1 / -1; }
.psi-linha:not(.inline):not(.sem-num) > .psi-linha-ctrl { grid-column: 2 / -1; }
.psi-linha-texto { font-size: var(--ui-fs-3); line-height: 1.45; color: #1e293b; white-space: pre-wrap; }
.psi-linha.info .psi-linha-texto { color: #475569; }
.psi-linha-obs, .psi-linha-pend { display: block; margin-top: var(--ui-esp-1); font-size: var(--ui-fs-2); color: #475569; }
.psi-linha-pend { color: #713f12; }
.psi-alts-inline { display: flex; gap: var(--ui-esp-2); }
.psi-alts-inline .psi-alt { width: 120px; }
.psi-alts-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--ui-esp-2); }
.psi-escala { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-esp-2); }
.psi-escala-pontos { display: flex; flex-wrap: wrap; gap: var(--ui-esp-1); }
.psi-escala-rot { font-size: var(--ui-fs-2); color: #475569; }
/* ALTERNATIVA = botão (38 px, área inteira clicável) */
.psi-alt { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-width: 88px; min-height: 38px; padding: 6px 12px; border: 1px solid #cbd5e1; border-radius: var(--ui-raio-controle); background: #fff; color: #334155; font-size: var(--ui-fs-3); font-weight: 500; line-height: 1.25; text-align: center; cursor: pointer; transition: background-color .12s, border-color .12s, color .12s; }
.psi-alt.compacto { width: auto; min-width: 40px; padding: 6px 10px; }
.psi-alt:hover:not(:disabled):not(.on) { background: var(--ui-primary-50); border-color: var(--ui-primary-300); color: var(--ui-primary-700); }
.psi-alt.on { background: var(--ui-primary-600); border-color: var(--ui-primary-700); color: #fff; font-weight: 600; }
.psi-alt.on:hover:not(:disabled) { background: var(--ui-primary-700); }
.psi-alt:disabled { opacity: .5; cursor: not-allowed; }
.psi-alt-ind { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: 1.5px solid #94a3b8; border-radius: 999px; background: #fff; color: var(--ui-primary-600); }
.psi-alt.multi .psi-alt-ind { border-radius: 4px; }
.psi-alt:hover:not(:disabled):not(.on) .psi-alt-ind { border-color: var(--ui-primary-400); }
.psi-alt.on .psi-alt-ind { border-color: #fff; }
.psi-alt.compacto.on { box-shadow: inset 0 -3px 0 rgba(255, 255, 255, .55); }
.psi-alt-t { min-width: 0; overflow-wrap: anywhere; }
/* BARRA INFERIOR: PROGRESSO · RESULTADO (só a classificação) · Salvar / Descartar / Concluir — fora da área que rola
   (nunca cobre conteúdo). Uma linha só; em largura que não comporta, quebra (os botões nunca se sobrepõem). */
.psi-banner { flex-shrink: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--ui-esp-6); row-gap: var(--ui-esp-2); padding: var(--ui-esp-2) var(--ui-esp-6); border-top: 1px solid #e2e8f0; background: #f8fafc; }
.psi-banner > .psi-banner-bloco { flex: 1 1 150px; }
.psi-banner-acoes { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: var(--ui-esp-2); }
.psi-resultado .alerta-selo, .psi-resultado-cl { font-size: var(--ui-fs-3); font-weight: 600; line-height: 20px; }
.psi-banner-bloco { min-width: 0; display: flex; flex-direction: column; gap: var(--ui-esp-1); }
.psi-banner-rot { font-size: var(--ui-fs-1); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #64748b; }
.psi-progresso { display: flex; align-items: center; gap: var(--ui-esp-2); }
.psi-progresso-barra { flex: 1; min-width: 60px; height: 8px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.psi-progresso-barra > span { display: block; height: 100%; border-radius: 999px; background: var(--ui-primary-500); transition: width .16s ease-out; }
.psi-progresso.completo .psi-progresso-barra > span { background: #10b981; }
.psi-progresso-t { font-size: var(--ui-fs-2); font-weight: 600; color: #334155; font-variant-numeric: tabular-nums; white-space: nowrap; }
.psi-resultado { display: flex; align-items: center; gap: var(--ui-esp-2); min-width: 0; min-height: 24px; font-size: var(--ui-fs-2); color: #334155; }
.psi-resultado-v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ui-fs-3); font-weight: 600; color: #1e293b; font-variant-numeric: tabular-nums; }
.psi-resultado-nome { font-size: var(--ui-fs-2); font-weight: 500; color: #475569; }
.psi-resultado-st { color: #475569; font-style: italic; }
.psi-resultado-st.erro { color: #b91c1c; font-style: normal; font-weight: 600; }
/* DATA DE APLICAÇÃO + Instruções de Realização + PDF oficial, na mesma linha (botões alinhados embaixo, §13) */
.psi-data-linha { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ui-esp-2); }
.psi-data-campo { width: 220px; max-width: 100%; margin-right: var(--ui-esp-2); }
.psi-btn-pdf { min-width: 88px; }
.psi-realizacao-conteudo { padding-bottom: var(--ui-esp-8) !important; }
.psi-alt.so-ind { min-width: 56px; }
.psi-alt.so-ind .psi-alt-ind { width: 20px; height: 20px; }
.psi-progresso { min-height: 24px; }
.psi-tabela td.psi-texto { min-width: 240px; }
/* Aba Psicometria: RESULTADO = descrição do resultado do motor, compacta (menor tamanho da escala, §9) e com quebra de linha */
.tabela-padrao td.psi-tab-descricao { font-size: var(--ui-fs-1); line-height: 1.4; color: #475569; white-space: normal; overflow-wrap: anywhere; min-width: 220px; }
/* Configurações › Psicometria › TEMPLATE – LAUDO DAS PSICOMETRIAS: lista dos placeholders do laudo */
.psi-laudo-ph { margin-top: var(--ui-esp-2); font-size: var(--ui-fs-2); color: #475569; }
.psi-laudo-ph > summary { width: fit-content; cursor: pointer; font-weight: 600; color: var(--ui-primary-700); }
.psi-laudo-ph ul { display: flex; flex-direction: column; gap: var(--ui-esp-1); margin: var(--ui-esp-1) 0 0; padding: 0; list-style: none; }
.psi-laudo-ph-item { display: flex; flex-wrap: wrap; column-gap: var(--ui-esp-2); }
.psi-laudo-ph-item code { font-family: ui-monospace, Consolas, monospace; font-size: var(--ui-fs-1); color: var(--ui-primary-700); }
.psi-laudo-ph-tit { margin-top: var(--ui-esp-3); font-size: var(--ui-fs-1); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #64748b; }
.psi-laudo-ph-nota { margin-top: var(--ui-esp-3); }

/* ---- Consulta Atual · ETAPA 02 (07/10/2026): mapa "Nesta tela" em todos os tipos de evolução e recolhível ---- */
/* Em Branco / Em Tempo: a mesma grade do mapa da Evolução Basal. Na grade as margens não se juntam: a 1ª seção
   continua encostada no topo e o espaço entre as seções continua 16 px, como antes */
.consulta-com-indice.space-y-4 > .indice-consulta + :not([hidden]) { margin-top: 0; }
.consulta-com-indice.space-y-4 > .card:first-child { margin-bottom: 0; }
/* "Emitir Documentos" com o ícone do botão "Emitir" (6 px entre ícone e texto, §5) */
.indice-consulta-i.indice-consulta-emitir { display: flex; align-items: center; gap: 6px; }
/* recolher/reabrir: mesmos botões do painel lateral da consulta (LAYOUT-001-PG), espelhados por estar à direita */
.indice-consulta-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-esp-1); margin: 0 0 var(--ui-esp-2); }
.indice-consulta-cab .indice-consulta-t { margin: 0; }
.indice-consulta-cab .painel-recolher { flex: 0 0 28px; height: 28px; border-bottom: 0; border-radius: var(--ui-raio-controle); }
.indice-consulta .painel-recolher svg, .indice-consulta .painel-reabrir svg { transform: scaleX(-1); }
.consulta-com-indice:has(> .indice-consulta.recolhido) { grid-template-columns: minmax(0, 1fr) 36px; column-gap: var(--ui-esp-3); }
.consulta-com-indice > .indice-consulta.recolhido { display: flex; justify-content: center; }