.of-sec{margin-bottom:16px}
.of-sec h3{margin:0 0 6px;font-size:13px;letter-spacing:.3px;color:var(--acc);text-transform:uppercase}
.of-cont{line-height:1.55}
.of-grid{border-collapse:collapse}
.of-grid th,.of-grid td{padding:4px 8px;border:1px solid rgba(var(--acc-rgb),.18);font-size:13px;text-align:center}
.of-grid th{color:var(--acc);font-weight:700;background:rgba(var(--acc-rgb),.06)}
.of-grid td.lado{font-weight:700;color:var(--acc)}
.of-grid input{width:76px;padding:6px;border:1px solid var(--line);border-radius:6px;
background:var(--card);color:var(--txt);text-align:center;font-size:13px}
/* desktop: seções de grade em 2 colunas (a tela grande rende) */
.of-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:2px 28px}
.of-extra{display:flex;gap:14px;flex-wrap:wrap;align-items:end;margin-top:6px}
.of-extra label{font-size:11.5px;color:var(--acc);display:block}
.of-extra input{width:110px;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--txt)}
.of-cola{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.of-ia{margin:6px 0 12px;padding:10px 12px;border:1px solid rgba(var(--acc-rgb),.25);border-radius:10px;
background:rgba(var(--acc-rgb),.05);font-size:13px;line-height:1.45}
.ia-fill{border-color:var(--acc)!important;background:rgba(var(--acc-rgb),.12)!important}
.ia-warn{border-color:var(--danger-fg)!important;background:rgba(var(--danger-rgb),.14)!important}
.of-ro table{border-collapse:collapse}
.of-ro th,.of-ro td{padding:4px 10px;border:1px solid rgba(var(--acc-rgb),.18);font-size:13px;text-align:center}
.of-ro th{color:var(--acc)}
.of-ro td.lado{font-weight:700;color:var(--acc)}
/* PAINÉIS no formato do e005_a legado (p:panel com cabeçalho + linhas por olho) */
.of-panel{border:1px solid rgba(var(--acc-rgb),.22);border-radius:10px;margin-bottom:12px;
background:var(--card);overflow:hidden}
.of-ph{background:rgba(var(--acc-rgb),.10);border-bottom:1px solid rgba(var(--acc-rgb),.22);
padding:7px 12px;font-size:12.5px;font-weight:700;letter-spacing:.3px;color:var(--acc)}
.of-pb{padding:9px 12px}
.of-linha{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:3px 0;font-size:13.5px}
.of-lado{font-weight:700;color:var(--acc);min-width:30px}
.of-x{opacity:.6}
.of-linha input{width:64px;padding:5px 6px;border:1px solid var(--line);border-radius:6px;
background:var(--card);color:var(--txt);text-align:center;font-size:13px}
.of-linha input.of-av{width:78px}
.of-lbl{font-size:12px;opacity:.75}
/* sub-abas na disposição do e005_a legado (pills menores que as do pane) */
.of-tabs{display:flex;gap:5px;flex-wrap:wrap;margin:2px 0 12px}
.of-t{min-height:30px;padding:4px 12px;border:1px solid rgba(var(--acc-rgb),.2);background:var(--card);
color:inherit;border-radius:999px;font-size:12.5px;cursor:pointer}
.of-t.on{background:var(--acc);color:var(--on-acc);font-weight:700;border-color:var(--acc)}
.fc-in{padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--txt)}
.fc-row{display:flex;gap:8px;margin:6px 0}

/* ==================== O QUE SAIU DAS STRINGS DO mod-oftalmo.ts ============
   Tudo abaixo estava escrito em `style="…"` no meio do HTML montado em JS. O
   peso de cada seletor não é enfeite: quando a regra da casca (ou do
   mod-form-base) já declara a mesma propriedade, uma classe solta EMPATA e a
   ordem dos <link> decide — que é justamente o que não se quer depender. */

/* ditado original: preserva as quebras da voz e vem esmaecido (é o bruto) */
/* o ditado usa o .ditado do core.css — a anamnese pedia o mesmo par. */

/* rótulo dos campos do exame (versão do painel e a maior, da data) */
.of-rot{font-size:11.5px;color:var(--acc)}
.of-rot.maior{font-size:12px}

/* painel de textos: rótulo mais colado e caixa mais baixa que a padrão */
.am-flabel.of-tight{margin:4px 0 2px}
.am-flabel.of-tight label{font-size:11.5px}
.am-box.of-min40{min-height:40px}
/* a linha do PAQ respira mais que as outras do painel */
.of-linha.of-paq{margin:6px 0}
/* campo de TEXTO na linha do painel: as outras entradas da .of-linha são
   numéricas e têm largura fixa (64px) — esta ocupa a linha inteira. */
.of-linha input.of-txt{width:100%;flex:1;text-align:left}

/* aba CID */
.of-cid-just{flex:2;min-width:220px}
.fc-row.of-cidadd{margin-top:10px;align-items:end}
.fc-in.of-cid-mcod{width:110px}
.am-chip.of-cidopt{display:block;width:100%;text-align:left;margin:3px 0}

/* barra de ações e topo da edição do oftalmo */
.am-toolbar.of-tb{margin:0 0 10px}
.am-edtop.of-top{margin-top:2px}
/* caixa do texto que a IA estrutura: bem mais alta que a .am-box padrão */
.am-box.of-iatexto{min-height:220px}