/* Eagle Pharma — Calculadora de Peptídeos.
 *
 * Porte da tela que vivia dentro do pacote da loja (vista `#guia`). O dono escolheu-a como a única
 * calculadora de peptídeos, e escolheu também que ela vestisse os TOKENS DO SISTEMA em vez de
 * copiar os pixels do original — decisão de 01/09/2026, por pergunta estruturada.
 *
 * O que isso muda, dito para ninguém se surpreender: o original usava raios de 16/11/10/9px e uma
 * escala de tipo com meios pixels (12,5 / 11,5 / 10,5). Aqui os raios vêm de `--raio` e a escala
 * anda em números inteiros, como na irmã de injetáveis. A tela fica parecida, não idêntica — e
 * passa a envelhecer junto com o resto do site em vez de ser o décimo quarto dialeto.
 *
 * ── O CONTRATO DE CLASSES ─────────────────────────────────────────────────────────────────────
 *
 * Os nomes abaixo são os que `scripts/conhecimento/calculadora-peptideos.js` cria. Três agentes
 * desenharam esta tela em paralelo e cada um inventou os seus: a revisão adversarial achou 28
 * desencontros entre módulo, folha e gerador. Por isso há um lado só a mandar — o módulo — e este
 * arquivo segue-o:
 *
 *     .cpep-chip / .cpep-chip.on          escolha de peptídeo, mg, ml e frequência
 *     .cpep-dev / .cpep-dev.on            cartão de dispositivo, com .cpep-dev-sub dentro
 *     .cpep-tick                          as seis marcas da régua da seringa
 *     .cpep-aviso.erro / .atencao         os três avisos
 *     .cpep-selo-faixa.abaixo|.na|.acima  o veredito da posição da dose
 *     .excede                             no número grande, quando a dose não cabe
 *     .caneta                             no corpo da seringa, quando o dispositivo é caneta
 *
 * A geometria (largura do preenchimento, posição do marcador e das marcas) é escrita pelo JS em
 * porcentagem: essa não cabe numa folha estática.
 */

.cpep {
  display: grid;
  gap: 16px;
  max-width: var(--largura, 980px);
  margin: 0 auto;
}

/* ── cartões ───────────────────────────────────────────────────────────────────────────────── */
.cpep-cartao {
  background: var(--superficie, #fff);
  border: 1px solid var(--linha, #e4e8eb);
  border-radius: var(--raio, 14px);
  padding: 20px;
  box-shadow: var(--sombra-leve, 0 1px 2px rgba(16, 24, 40, .05));
}
.cpep-cartao > h2 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 800;
  color: var(--tinta, #14171a);
}

/* ── campos ────────────────────────────────────────────────────────────────────────────────── */
.cpep-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.cpep-campo label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--tinta, #14171a);
}
.cpep-campo input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  font-size: 16px;               /* 16px evita o zoom automático do iOS ao focar */
  color: var(--tinta, #14171a);
  background: var(--superficie, #fff);
  border: 1px solid var(--linha, #e4e8eb);
  border-radius: var(--raio, 14px);
}
/* ── G027 · 04/09/2026 · O FOCO VÁLIDO USAVA A MESMA COR DO ERRO ─────────────────────────────
   O anel de foco (`:focus-visible`) e o estado de erro pintavam o MESMO vermelho — quem navega
   por teclado não tinha como distinguir «este campo está selecionado» de «este campo está
   errado» só pela cor. `--azul` já é o token que `scripts/conhecimento/entidades.css` usa para
   este mesmo problema (`.ent-origem:focus-visible`); aqui reaproveita-se o mesmo token em vez de
   inventar uma cor nova. Não é `--ep-foco`: esse token, no tema claro (o desta página), RESOLVE
   para o mesmo vermelho do erro — é o gap que a auditoria de acessibilidade já registrou em
   `assets/eagle-ds.css`, fora do alcance desta frente (D14, pipeline externo). #1d4ed8 sobre
   branco mede 6,4:1 — acima do piso de 3:1 para indicadores de foco. */
.cpep-campo input:focus-visible {
  outline: 2px solid var(--azul, #1d4ed8);
  outline-offset: 1px;
}

/* ── pílulas de escolha ────────────────────────────────────────────────────────────────────── */
.cpep-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.cpep-chip {
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--tinta, #14171a);
  background: var(--superficie, #fff);
  border: 1px solid var(--linha, #e4e8eb);
  border-radius: 999px;
  cursor: pointer;
}
.cpep-chip:hover { border-color: var(--vermelho, #c8102e); }
.cpep-chip:focus-visible { outline: 2px solid var(--azul, #1d4ed8); outline-offset: 2px; } /* G027 */
.cpep-chip.on {
  color: var(--vermelho, #c8102e);
  background: var(--vermelho-fraco, #fdf2f4);
  border-color: var(--vermelho, #c8102e);
}
.cpep-nota {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--mudo, #5b636b);
}

/* ── dispositivos ──────────────────────────────────────────────────────────────────────────── */
.cpep-devs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.cpep-dev {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 78px;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--tinta, #14171a);
  background: var(--superficie, #fff);
  border: 1px solid var(--linha, #e4e8eb);
  border-radius: var(--raio, 14px);
  cursor: pointer;
}
.cpep-dev.on { border-color: var(--vermelho, #c8102e); background: var(--vermelho-fraco, #fdf2f4); }
.cpep-dev:focus-visible { outline: 2px solid var(--azul, #1d4ed8); outline-offset: 2px; } /* G027 */
.cpep-dev-sub { font-size: 12px; font-weight: 600; color: var(--mudo, #5b636b); }

/* ── a seringa ─────────────────────────────────────────────────────────────────────────────── */
.cpep-seringa { margin-top: 18px; }
.cpep-puxe {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--tinta, #14171a);
}
/* Quando a dose não cabe, o número grande fica vermelho — é o primeiro sinal, antes do aviso. */
.cpep-puxe.excede { color: var(--vermelho, #c8102e); }
.cpep-caneta-selo {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--superficie, #fff);
  background: var(--tinta, #14171a);
  border-radius: 999px;
  vertical-align: middle;
}
/* ── G830 · 04/09/2026 · O CORPO É O ANCESTRAL POSICIONADO DO MARCADOR ───────────────────────
   A coluna flexível da grelha em `.cpep-desenho` (abaixo) é quem dá ao corpo a largura de
   verdade — sem `grid-column`/`grid-row` aqui ele volta a cair na coluna 1 e a colapsar ao
   conteúdo, como no defeito original.
   `overflow: hidden` SAIU: era a única razão para o rótulo do marcador (`.cpep-marca-rot`) ter
   de morar FORA do corpo — e um item de grelha posicionado como `absolute`, mesmo com
   `grid-column`/`grid-row` explícitos, resolve `left: N%` contra o CONTAINING BLOCK de sempre
   (o ancestral posicionado mais próximo), não contra a célula da grelha — medido no Chromium: um
   rótulo em `left: 10%` fora do corpo caiu a 144px da BORDA DA JANELA (10% de 1440px), não a 10%
   do corpo. Com o rótulo de volta como FILHO do corpo — que já é `position: relative` — o mesmo
   `left: N%` resolve contra a largura do corpo, exatamente como `.cpep-liquido` e `.cpep-marca`
   já faziam. O corte que `overflow: hidden` fazia (o líquido reto dentro de bordas arredondadas)
   passou para o RAIO do próprio líquido, abaixo. */
.cpep-corpo {
  position: relative;
  grid-column: 3;
  grid-row: 1;
  height: 30px;
  background: var(--superficie-suave, #f7f8fa);
  border: 1px solid var(--linha, #e4e8eb);
  border-radius: 8px;
}
/* A caneta é redonda nas pontas; a seringa não. É a única pista visual de que o dispositivo mudou
   além do cartão aceso, e o original fazia-a. */
.cpep-corpo.caneta { border-radius: 999px; }
.cpep-tick {
  position: absolute;
  transform: translateX(-50%);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--mudo, #5b636b);
}

/* ── os três números ───────────────────────────────────────────────────────────────────────── */

/* ── posição da dose na faixa ──────────────────────────────────────────────────────────────── */
.cpep-posicao { margin-top: 18px; }
.cpep-selo-faixa {
  display: inline-block;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--superficie, #fff);
  border-radius: 999px;
}
/* Os três estados usam as cores SEMÂNTICAS do sistema, não literais: âmbar para abaixo, verde para
   dentro, vermelho para acima. Assim seguem qualquer ajuste de acessibilidade feito no sistema. */
.cpep-selo-faixa.abaixo { background: var(--ambar, #b45309); }
.cpep-selo-faixa.na { background: var(--verde, #0a7d3b); }
.cpep-selo-faixa.acima { background: var(--vermelho, #c8102e); }
/* G830 · 04/09/2026 · a agulha era vertical, absoluta e sem ancoragem — sem um ancestral com
   `position: relative`, `top`/`transform` a colocavam num ponto qualquer da página, longe da
   ponta da seringa. Deitada e em fluxo normal da grelha, ela nasce encostada ao cone (sem `gap`
   entre colunas, a borda direita do cone é a esquerda da agulha) e nunca se solta dele. */
.cpep-agulha {
  grid-column: 5;
  grid-row: 1;
  width: 20px;
  height: 3px;
  background: var(--mudo, #5b636b);
  border-radius: 0 2px 2px 0;
}

/* ── avisos ────────────────────────────────────────────────────────────────────────────────── */
.cpep-avisos { display: grid; gap: 8px; margin-top: 16px; }
.cpep-aviso {
  margin: 0;
  padding: 10px 12px;
  font-size: 13.5px;
  line-height: 1.45;
  border: 1px solid;
  border-radius: var(--raio, 14px);
}
.cpep-aviso.erro {
  color: var(--vermelho-escuro, #9e0b1f);
  background: var(--vermelho-fraco, #fdf2f4);
  border-color: var(--vermelho, #c8102e);
}
.cpep-aviso.atencao {
  color: var(--ambar, #b45309);
  background: var(--ambar-fraco, #fffbeb);
  border-color: var(--ambar, #b45309);
}

@media (max-width: 620px) {
  .cpep-cartao { padding: 16px; }
  .cpep-puxe { font-size: 28px; }
}

/* ── A RECONCILIAÇÃO, e por que ela está aqui e não espalhada ─────────────────────────────────
 *
 * Esta folha nasceu escrita para uma marcação e o gerador escreveu outra — o terceiro dos 28
 * desencontros que a revisão adversarial apanhou entre os três rascunhos. Em vez de negociar,
 * escolheu-se UM lado: a marcação que o gerador imprime é o vocabulário, porque é ela que vira DOM.
 *
 * As regras abaixo cobrem esse vocabulário. Continuam a usar tokens do sistema, por decisão do
 * dono a 01/09 — a tela fica parecida com a do `#guia`, não idêntica, e envelhece com o site.
 */

/* estrutura da página */
.cpep-titulo { margin: 0 0 6px; font-size: 26px; font-weight: 800; color: var(--tinta, #14171a); }
.cpep-titulo-secao { margin: 0 0 10px; font-size: 17px; font-weight: 800; color: var(--tinta, #14171a); }
.cpep-risco { display: inline-block; width: 34px; height: 3px; margin-right: 8px; vertical-align: middle;
  background: var(--vermelho, #c8102e); border-radius: 2px; }
.cpep-duas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.cpep-bloco, .cpep-entrada, .cpep-resultado { display: grid; gap: 14px; }
.cpep-secao { display: grid; gap: 2px; }
.cpep-rotulo { font-size: 13px; font-weight: 700; color: var(--tinta, #14171a); }

/* o número grande */
.cpep-puxe-rot { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mudo, #5b636b); }
.cpep-puxe-num { font-size: 34px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--tinta, #14171a); }
.cpep-puxe-num.excede { color: var(--vermelho, #c8102e); }
/* G411 · 03/09/2026 · a lacuna entre o número e a unidade era esta margem, e margem não entra no
   nome acessível: o leitor de tela ouvia `10,0unidades`. O gerador passou a imprimir um espaço de
   verdade entre os dois `span`, e a margem saiu para a lacuna vista ser a mesma que se ouve. */
.cpep-puxe-un { font-size: 16px; font-weight: 700; color: var(--mudo, #5b636b); }
.cpep-dev-frase { margin: 2px 0 0; font-size: 13px; color: var(--mudo, #5b636b); }
.cpep-selo { display: inline-block; margin-left: 8px; padding: 2px 8px; font-size: 11px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--superficie, #fff);
  background: var(--tinta, #14171a); border-radius: 999px; vertical-align: middle; }

/* o desenho da seringa, por partes — é o que distingue esta calculadora da que foi aposentada */
/* ── G830 · 04/09/2026 · O CORPO COLAPSAVA A 25×30PX E A RÉGUA NÃO ALINHAVA A ELE ─────────────
   Media-se `.cpep-corpo` em 25×30px dentro de um cartão de 582px: como item de uma linha flex
   SEM `flex`, e com todo o conteúdo em posição absoluta (nada em fluxo normal para lhe dar
   largura), ele encolhia ao mínimo. `.cpep-regua`, por sua vez, era irmã do corpo FORA da linha
   e usava a largura do CARTÃO inteiro — as marcas de 0/20/40/60/80/100% não tinham relação
   nenhuma com onde o líquido de fato terminava.
   Uma GRELHA resolve as duas coisas de uma vez, sem margens fixas a recalcular por largura de
   tela (o desenho original usava `margin: 6px 66px 0 38px` — números que só acertam numa
   largura). O corpo ocupa a única coluna flexível (`1fr`, entre o êmbolo/haste e o cone/agulha);
   a régua vive na MESMA coluna, na linha de baixo — a mesma largura, sempre, medida em 1440px e
   em 500px. */
.cpep-desenho { display: grid; grid-template-columns: auto auto 1fr auto auto; align-items: center; margin-top: 12px; }
.cpep-embolo { grid-column: 1; grid-row: 1; width: 34px; height: 8px; background: var(--linha, #e4e8eb); border-radius: 4px; }
.cpep-haste { grid-column: 2; grid-row: 1; width: 9px; height: 26px; background: var(--mudo, #5b636b); border-radius: 3px; }
/* ── G246 · 02/09/2026 · A REGRA QUE APAGOU A CALCULADORA INTEIRA ────────────────────────────
   Aqui viviam `.cpep-casca` e `.cpep-casca.caneta`, com `height: 30px` e `overflow: hidden`, a
   descrever o CORPO DA SERINGA. Só que a RAIZ da página também se chamava `cpep-casca` — dois
   agentes desenharam esta tela em paralelo e cada um usou o nome para uma coisa diferente.
   O resultado, medido pela auditoria em produção: a ferramenta inteira recortada a uma faixa de
   30 px. Os 37 controles continuavam no DOM, e nenhum intersectava a região visível. Não era um
   erro de aparência — a ferramenta parecia VAZIA.
   O corpo da seringa já tinha a sua regra em `.cpep-corpo` (acima), que é a classe que o gerador
   realmente imprime. Estas duas linhas eram vocabulário morto — morto e a matar. A raiz passou a
   ter classe própria (`cpep-raiz`) para que nunca mais haja um nome a servir dois donos. */
/* G830 · 04/09/2026 · o raio à esquerda substitui o `overflow: hidden` que saiu de `.cpep-corpo`:
   o líquido é um retângulo reto por natureza (a largura é a única coisa que muda), e sem o corte
   do pai ele passava reto por cima do canto arredondado do corpo. Arredondar o PRÓPRIO líquido à
   esquerda (onde ele sempre começa, `inset: 0 auto 0 0`) resolve sem precisar cortar nada — e o
   corte era o único motivo para o rótulo do marcador ter de morar fora do corpo (ver abaixo). */
.cpep-liquido { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 8px 0 0 8px;
  background: var(--vermelho-fraco, #fdf2f4); border-right: 2px solid var(--vermelho, #c8102e); }
/* a caneta é redonda nas DUAS pontas (`.cpep-corpo.caneta`, acima) — o líquido acompanha a
   ponta esquerda, que é a única que ele toca (a direita é a borda reta do preenchimento). */
.cpep-corpo.caneta .cpep-liquido { border-radius: 999px 0 0 999px; }
.cpep-cone { grid-column: 4; grid-row: 1; width: 0; height: 0; border-top: 9px solid transparent; border-bottom: 9px solid transparent;
  border-left: 14px solid var(--linha, #e4e8eb); }
.cpep-regua { grid-column: 3; grid-row: 2; position: relative; height: 18px; margin-top: 4px; }
/* a LINHA do marcador: filha do corpo, contida na sua altura — a régua de posição é o próprio
   `.cpep-corpo`, e ficar dentro dele evita que a borda arredondada a corte ao meio. */
.cpep-marca { position: absolute; top: 2px; bottom: 2px; width: 2px;
  transform: translateX(-50%); background: var(--tinta, #14171a); border-radius: 1px; }
/* ── G830 · 04/09/2026 · O RÓTULO PRECISA DO CORPO COMO ANCESTRAL POSICIONADO ────────────────
   Duas tentativas erradas antes desta. (1) `.cpep-marca-rot` só trazia tipografia — quem
   posicionava por `left` era `.cpep-marca`, o span VAZIO ao lado; o módulo escrevia texto e
   `left` num elemento e a folha desenhava a geometria no outro. (2) a correção seguinte moveu o
   rótulo para FORA do corpo, irmão dele na mesma célula da grelha, para escapar do
   `overflow: hidden` que o corpo tinha então — mas um item de grelha `position: absolute`, mesmo
   com `grid-column`/`grid-row` explícitos, resolve `left: N%` contra o CONTAINING BLOCK de
   sempre (o ancestral posicionado mais próximo), e não contra a célula. Sem nenhum ancestral
   `position: relative` de verdade, o `left: 10%` do módulo resolvia contra a JANELA inteira —
   medido: um rótulo a 144px da borda da tela em vez de 10% do corpo.
   Com o `overflow: hidden` fora de `.cpep-corpo` (a folga foi para o raio do líquido, acima), o
   rótulo volta a ser FILHO do corpo — que já é `position: relative` — e `left: N%` resolve
   contra a largura do corpo, como `.cpep-liquido` e `.cpep-marca` sempre fizeram. */
.cpep-marca-rot {
  position: absolute;
  top: -22px;
  transform: translateX(-50%);
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--superficie, #fff);
  background: var(--tinta, #14171a);
  border-radius: 999px;
}

/* os cartões de resultado */
.cpep-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 16px; }
.cpep-cartao-rot { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mudo, #5b636b); }
.cpep-cartao-val { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--tinta, #14171a); }
/* G250 · o par rótulo→valor é um `dl`: `dd` traz margem própria do navegador, e sem a zerar o
   valor sairia recuado à esquerda. A grelha com `gap` é a separação VISÍVEL do mesmo par que o
   `dl` separa para o leitor de tela — as duas metades da mesma correção. */
.cpep-par { display: grid; gap: 4px; margin: 0; }
.cpep-par dd { margin: 0; }

/* duração e recompra */
.cpep-dura { margin-top: 16px; }
.cpep-dura-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cpep-dura-val { margin: 8px 0 0; font-size: 18px; font-weight: 800; color: var(--tinta, #14171a); }
.cpep-recompra { margin-left: 8px; font-size: 13px; font-weight: 600; color: var(--mudo, #5b636b); }

/* posição da dose */
.cpep-posicao-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cpep-faixa { position: relative; height: 10px; margin-top: 10px; border-radius: 999px;
  background: linear-gradient(90deg, var(--ambar, #b45309), var(--verde, #0a7d3b) 50%, var(--vermelho, #c8102e)); }
.cpep-faixa-marca { position: absolute; top: -4px; width: 3px; height: 18px; transform: translateX(-50%);
  background: var(--tinta, #14171a); border-radius: 2px; }
.cpep-faixa-pes { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px;
  font-variant-numeric: tabular-nums; color: var(--mudo, #5b636b); }

/* capacidade livre, boas práticas e a ferramenta irmã */
.cpep-dev-livre { margin-top: 10px; }
.cpep-praticas { margin-top: 20px; }
.cpep-praticas-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.cpep-pratica { display: flex; gap: 12px; padding: 16px; background: var(--superficie, #fff);
  border: 1px solid var(--linha, #e4e8eb); border-radius: var(--raio, 14px); }
.cpep-pratica h3 { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--tinta, #14171a); }
.cpep-pratica p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--mudo, #5b636b); }
.cpep-icone { flex: none; width: 40px; height: 40px; border-radius: var(--raio, 14px);
  background: var(--superficie-suave, #f7f8fa); border: 1px solid var(--linha, #e4e8eb); }
.cpep-irma { display: inline-block; margin-top: 16px; font-size: 14px; font-weight: 700;
  color: var(--vermelho, #c8102e); }
/* «Restrito ao uso em pesquisa» — o aviso legal que acompanha a ferramenta. */
/* «Esta calculadora não sugere doses». Fica ACIMA do RUO e mais legível do que ele: 14px, tinta
   de texto normal, e não a tinta muda das notas de rodapé. O tamanho mínimo do site é 16px para
   campos; este é texto de leitura curta ao lado dos campos, e 14px é o piso do corpo secundário.
   Escrever este aviso com a cor e o corpo de nota de rodapé seria pô-lo na página sem o pôr à
   frente de ninguém. */
.cpep-nao-sugere { margin-top: 18px; font-size: 14px; line-height: 1.55; color: var(--tinta, #1e242a); }
.cpep-ruo { margin-top: 14px; font-size: 12.5px; line-height: 1.5; color: var(--mudo, #5b636b); }

/* ── 01/09/2026 · unidade da dose, erro de entrada e conferência ─────────────────────────────
   Três peças que a ferramenta aposentada tinha e a legada não: o dono pediu-as de volta.
   A unidade fica colada ao campo da dose — é parte do número, não uma opção à parte. O erro usa
   a tinta de erro e só existe quando existe erro. A conferência é discreta enquanto passa e
   grita quando falha: um selo verde permanente vira decoração, e ninguém lê decoração. */
.cpep-dose-linha { display: flex; gap: 10px; align-items: flex-end; }
.cpep-dose-linha > .cpep-campo:first-child { flex: 1 1 auto; }
.cpep-dose-unid { flex: 0 0 auto; }
.cpep-dose-unid select {
  min-height: 44px; border: 1px solid var(--linha, #d8dfe3); border-radius: 10px;
  padding: 0 10px; background: #fff; color: var(--tinta, #1e242a); font: inherit; font-size: 16px;
}
.cpep-dose-unid select:focus-visible { outline: 2px solid var(--azul, #1d4ed8); outline-offset: 1px; } /* G027 */
.cpep-erro {
  margin: 10px 0 0; border-left: 3px solid var(--erro, #c8102e); padding: 8px 0 8px 10px;
  color: var(--erro, #c8102e); font-size: 14px; line-height: 1.5;
}
.cpep-confere { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; }
.cpep-confere.ok { color: var(--mudo, #5b636b); }
.cpep-confere.erro { color: var(--erro, #c8102e); font-weight: 700; }