/* ===========================================================================
   Guias Médicos — folha de estilo da área clínica.
   A cor carrega informação: o código de receituário (simples/branca/azul/
   amarela/especial) é o mesmo do bloco de receita em papel.
   =========================================================================== */

@import url('/css/ds.css');
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Poppins:wght@400;500;600;700&display=swap');

/* Esta folha não define valor cru: tudo vem de ds.css. Os nomes locais são
   apelidos dos tokens do sistema — mantidos porque o resto do arquivo já os
   usa, e trocá-los de uma vez quebraria mais do que resolveria. */
:root {
  --navy: var(--gb-navy);
  --navy-2: var(--gb-navy-2);
  --teal: var(--gb-teal);
  --teal-deep: var(--gb-teal-deep);
  --teal-soft: var(--gb-teal-soft);
  --mint: var(--gb-mint);
  --mint-soft: var(--gb-mint-soft);
  --lime: var(--gb-lime);

  --papel: var(--gb-superficie);
  --papel-alto: var(--gb-superficie);
  --mesa: var(--gb-fundo);
  --tinta: var(--gb-tinta);
  --tinta-2: var(--gb-tinta-2);
  --tinta-3: var(--gb-tinta-3);
  --regra: var(--gb-linha);
  --regra-forte: var(--gb-linha-2);

  --azul: var(--gb-teal);
  --azul-claro: var(--gb-mint-soft);
  --sobre-azul: #FFFFFF;

  --rx-simples: var(--gb-rx-simples);
  --rx-branca: var(--gb-rx-branca);
  --rx-azul: var(--gb-rx-azul);
  --rx-amarela: var(--gb-rx-amarela);
  --rx-especial: var(--gb-rx-especial);

  --ok: var(--gb-ok);
  --alerta: var(--gb-alerta);
  --grave: var(--gb-grave);

  --t-xs: var(--gb-t-xs);
  --t-sm: var(--gb-t-sm);
  --t-base: var(--gb-t-base);
  --t-md: var(--gb-t-md);
  --t-lg: var(--gb-t-lg);
  --t-xl: var(--gb-t-xl);

  --gap: var(--gb-e-4);
  --largura: var(--gb-largura);
  --raio: var(--gb-raio);
  --raio-sm: var(--gb-raio-sm);
  --sombra: var(--gb-sombra);
  --sombra-sm: var(--gb-sombra-sm);
  --autofill: var(--gb-mint-soft);
  --entrar-forma: #FFFFFF;

  --sans: var(--gb-fonte-texto);
  --display: var(--gb-fonte-titulo);
  --mono: var(--gb-fonte-mono);
}

/* No escuro só o que o sistema já virou: a superfície elevada e o autofill. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --papel-alto: var(--gb-superficie-2);
    --autofill: var(--gb-superficie-2);
  }
}
:root[data-tema="escuro"] {
  --papel-alto: var(--gb-superficie-2);
  --autofill: var(--gb-superficie-2);
}

* { box-sizing: border-box; }

/* Precisa de !important: .gm-btn define display e anularia o hidden do HTML. */
.gm [hidden] { display: none !important; }

body.gm {
  margin: 0;
  background: var(--mesa);
  color: var(--tinta);
  font: 400 var(--t-base)/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

.gm a { color: var(--azul); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.gm .est-card { color: var(--est-ink); }
.gm .gm-lista a { color: var(--tinta); }
/* Tudo que mora na lateral navy escapa da cor de link do conteúdo. */
.gm .gm-lateral a { color: inherit; }
.gm a:hover { text-decoration-thickness: 2px; }
.gm :focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 2px; }
.gm img { max-width: 100%; height: auto; }
.gm h1, .gm h2, .gm h3, .gm h4 {
  font-family: var(--display); line-height: 1.15; margin: 0;
  font-weight: 700; letter-spacing: -0.025em;
}

/* --- App shell: lateral fixa + corpo -------------------------------------
   Oito destinos com nome. Ícone sozinho obriga o médico a adivinhar, e ele
   está com o paciente na frente.                                          */
/* `.gm a` vence `.gm-pular` por especificidade e pintava o link de teal
   sobre fundo teal — invisível justamente para quem navega por teclado. */
.gm .gm-pular {
  position: absolute; left: 0.5rem; top: -3rem; z-index: 60;
  background: var(--navy); color: #fff; padding: 0.6rem 1rem; border-radius: 0 0 10px 10px;
  text-decoration: none; font-weight: 600; transition: top .15s;
}
.gm .gm-pular:focus { top: 0; outline: 2px solid var(--mint); outline-offset: -4px; }


.gm-app { display: flex; min-height: 100dvh; background: var(--mesa); }
/* Escondido por clip, não por display:none — assim continua focável e o
   menu abre pelo teclado (Espaço no checkbox, Enter no rótulo). */
.gm-menu-estado {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.gm-menu-estado:focus-visible + .gm-lateral,
.gm-menu-botao:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.gm-lateral {
  flex: 0 0 14.5rem; width: 14.5rem;
  position: sticky; top: 0; align-self: flex-start;
  height: 100dvh; display: flex; flex-direction: column;
  padding: 1.1rem 0.8rem 0.8rem;
  background: var(--navy); color: #fff;
  border-right: 1px solid rgba(255, 255, 255, .07);
}
.gm .gm-marca {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--display); font-weight: 800; font-size: 1.02rem;
  letter-spacing: -0.02em; color: #fff; text-decoration: none;
  padding: 0.25rem 0.5rem 1.4rem;
}
.gm .gm-marca::before {
  content: ''; width: 1.7rem; height: 1.7rem; flex: 0 0 1.7rem; border-radius: 9px;
  background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M10 14l6-5 6 5-6 5z' fill='%23fff'/%3E%3Cpath d='M16 19l6-5v4l-6 5z' fill='%23A8D5C2'/%3E%3C/svg%3E") center/86% no-repeat;
}
.gm .gm-marca span { color: rgba(255, 255, 255, .72); font-weight: 500; }

.gm-nav { display: flex; flex-direction: column; gap: 0.2rem; overflow-y: auto; }
.gm .gm-nav-item {
  display: flex; align-items: center; gap: 0.78rem;
  padding: 0.68rem 0.8rem; border-radius: 11px;
  color: rgba(255, 255, 255, .88); text-decoration: none;
  font-size: 0.9rem; font-weight: 500; line-height: 1.25;
  transition: background .16s, color .16s;
}
.gm-nav-item .bi { flex: 0 0 1.15rem; font-size: 1.05rem; line-height: 1; opacity: .78; }
.gm .gm-nav-item:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.gm-nav-item:hover .bi { opacity: 1; }
.gm .gm-nav-item.on { background: var(--teal); color: #fff; font-weight: 600; }
.gm-nav-item.on .bi { opacity: 1; }

.gm-lateral-pe { margin-top: auto; padding-top: 0.9rem; }
.gm-tema-troca {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  background: rgba(255, 255, 255, .1); border-radius: 999px; padding: 3px; margin-bottom: 0.8rem;
}
.gm-tema-troca button {
  border: 0; background: none; cursor: pointer; border-radius: 999px;
  padding: 0.45rem 0.2rem; font: 600 var(--t-xs)/1 var(--sans);
  color: rgba(255, 255, 255, .72); transition: background .16s, color .16s;
}
.gm-tema-troca button:hover { color: #fff; }
.gm-tema-troca button.on { background: var(--teal); color: #fff; }

.gm-conta {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 0.55rem; border-radius: 12px; background: rgba(255, 255, 255, .07);
}
.gm-conta-inicial {
  display: grid; place-items: center; flex: 0 0 2rem; width: 2rem; height: 2rem;
  border-radius: 50%; background: var(--teal); color: #fff;
  font-family: var(--display); font-weight: 700; font-size: var(--t-sm);
}
.gm-conta-dados { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.gm-conta-dados b {
  font-size: 0.83rem; font-weight: 600; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gm-conta-dados small { font-size: var(--t-xs); color: rgba(255, 255, 255, .55); }
.gm .gm-conta-sair {
  margin-left: auto; flex: 0 0 auto; display: grid; place-items: center;
  width: 1.9rem; height: 1.9rem; border-radius: 999px;
  color: rgba(255, 255, 255, .6); text-decoration: none; font-size: 1rem;
  transition: background .16s, color .16s;
}
.gm .gm-conta-sair:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.gm-corpo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.gm-veu { display: none; }
.gm-menu-botao { display: none; }

/* --- Topo: só a busca ----------------------------------------------------
   O médico tem o paciente na frente. Achar em 3 segundos é a função nº 1,
   então a barra de cima não carrega mais nada.                            */
.gm-topo {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.6rem 1.5rem;
  background: color-mix(in srgb, var(--mesa) 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--regra);
}
.gm-busca { position: relative; flex: 1 1 auto; max-width: 34rem; min-width: 0; }
.gm-busca-pagina { max-width: 34rem; margin: 0 0 1.75rem; }
.gm-busca .bi {
  position: absolute; left: 0.95rem; top: 50%; transform: translateY(-50%);
  color: var(--tinta-3); pointer-events: none; font-size: 0.95rem; line-height: 1;
}
.gm-busca input {
  width: 100%; padding: 0.68rem 1rem 0.68rem 2.5rem;
  font: 500 var(--t-sm)/1.4 var(--sans);
  color: var(--tinta); background: var(--papel-alto);
  border: 1px solid var(--regra-forte); border-radius: 999px;
  transition: border-color .18s, box-shadow .18s;
}
.gm-busca input::placeholder { color: var(--tinta-3); font-weight: 400; }
.gm-busca input:focus {
  outline: 0; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(47, 107, 90, .16);
}

/* --- Celular: a lateral vira gaveta -------------------------------------- */
@media (max-width: 56rem) {
  .gm-lateral {
    position: fixed; z-index: 50; top: 0; left: 0;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: 0 0 60px rgba(0, 0, 0, .5);
  }
  .gm-menu-estado:checked ~ .gm-lateral { transform: none; }
  .gm-menu-estado:checked ~ .gm-veu {
    display: block; position: fixed; inset: 0; z-index: 45;
    background: rgba(0, 21, 37, .55);
  }
  .gm-menu-botao {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 2.5rem; height: 2.5rem; border-radius: 999px;
    color: var(--tinta-2); cursor: pointer; font-size: 1.25rem;
  }
  .gm-menu-botao:hover { background: var(--azul-claro); color: var(--teal); }
  .gm-topo { padding: 0.7rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gm-lateral { transition: none; }
}


/* --- Barra inferior do celular -------------------------------------------
   Como num aplicativo: os destinos de atendimento sempre ao alcance do polegar,
   e "Menu" abrindo a gaveta com o resto. No desktop some — lá a lateral está
   fixa na tela e não há o que repetir.                                     */
.gm-barra { display: none; }

@media (max-width: 56rem) {
  .gm-barra {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.15rem;
    padding: 0.3rem 0.3rem calc(0.3rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--papel-alto) 94%, transparent);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--regra);
  }
  /* `.gm a` tem especificidade 0,1,1: sem o `.gm ` na frente o link venceria. */
  .gm .gm-barra-item {
    display: grid; justify-items: center; align-content: center; gap: 0.2rem;
    padding: 0.45rem 0.15rem; border-radius: var(--raio-sm);
    color: var(--tinta-2); text-decoration: none; cursor: pointer;
    font-size: var(--t-xs); font-weight: 600; line-height: 1;
  }
  .gm .gm-barra-item i { font-size: 1.25rem; line-height: 1; }
  .gm .gm-barra-item.on { color: var(--teal); background: var(--azul-claro); }
  .gm .gm-barra-item:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
  /* O conteúdo não pode terminar embaixo da barra. */
  .gm-pagina { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
}

/* --- Estrutura de página -------------------------------------------------- */
.gm-pagina { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 1.5rem 1.5rem 4rem; }
.gm-migalha {
  font-size: var(--t-sm); color: var(--tinta-3);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
  margin-bottom: 1rem;
}
.gm-migalha a { color: var(--tinta-2); text-decoration: none; }
.gm-migalha a:hover { color: var(--azul); text-decoration: underline; }
.gm-migalha .sep { color: var(--regra-forte); }

.gm-cabeca { margin-bottom: 1.25rem; }
.gm-titulo { font-size: var(--t-xl); max-width: 34ch; text-wrap: balance; }
.gm-sub { color: var(--tinta-2); margin: 0.5rem 0 0; max-width: 65ch; }

/* --- Folha: o cartão da casa --------------------------------------------- */
.gm-folha {
  background: var(--papel-alto);
  border: 1px solid var(--regra);
  border-radius: var(--raio);
  padding: 1.6rem;
  box-shadow: var(--sombra-sm);
}
.gm-folha + .gm-folha { margin-top: var(--gap); }

/* --- Estante do início ---------------------------------------------------
   Mesmo cartão da tela /guias (.est-card): cor e ícone vêm do cadastro de cada
   guia. As variáveis --est-* moram aqui porque o início não tem o invólucro
   .est da estante. */
.gm-estante {
  --est-card: var(--gm-card);
  --est-bd: var(--gm-border);
  --est-ink: #0f172a;
  --est-mut: #64748b;
  display: grid; margin-top: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
}

/* --- Lista de seções / doenças ------------------------------------------- */
.gm-lista { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.gm-lista li + li { border-top: 1px solid var(--regra); }
.gm-lista a {
  --cor: var(--teal);
  display: block; padding: 0.9rem 1rem; text-decoration: none; color: inherit;
  border-radius: var(--raio-sm);
  border-left: 3px solid transparent;
  transition: border-color .16s ease, background .16s ease, padding-left .16s ease;
}
.gm-lista a:hover, .gm-lista a:focus-visible {
  background: var(--azul-claro); border-left-color: var(--cor); padding-left: 1.15rem;
}
.gm-lista .nome { font-weight: 600; color: var(--tinta); }
.gm-lista a:hover .nome, .gm-lista a:focus-visible .nome { color: var(--cor); }
.gm-lista .resumo {
  display: block; font-size: var(--t-sm); color: var(--tinta-2);
  margin-top: 0.2rem; max-width: 72ch;
}
.gm-grupo { margin-top: 2.25rem; }
.gm-grupo > h2 {
  display: flex; align-items: center; gap: var(--gb-e-2);
  font-family: var(--display); font-size: var(--t-md); font-weight: 700; color: var(--tinta);
  padding-bottom: var(--gb-e-2); margin-bottom: var(--gb-e-3);
  border-bottom: 1px solid var(--regra);
}
/* Quantos itens o grupo tem — resposta a uma pergunta real de quem procura. */
.gm-grupo-conta {
  font-size: var(--t-xs); font-weight: 600; color: var(--tinta-3);
  background: var(--mesa); border-radius: 999px; padding: 0.1rem 0.5rem;
}

@media (max-width: 40rem) {
  .gm-estante { grid-template-columns: 1fr; gap: 0.75rem; }
  .gm-folha { padding: 1.15rem; border-radius: var(--raio-sm); }
  .gm-pagina { padding: 1.25rem 1rem 4rem; }
  .gm-titulo { font-size: var(--t-lg); }
}

/* --- Página da doença ----------------------------------------------------- */
.gm-doenca-topo { padding-bottom: 1rem; }

/* Guias de prescrição: cabeçalho igual ao da origem — título em caixa alta e
   o resumo como rótulo pequeno logo abaixo. */
.gm-doenca-topo--rx .gm-titulo {
  font-size: clamp(1.25rem, 2.2vw, 1.65rem); font-weight: 800;
  letter-spacing: -.02em; color: var(--gm-ink); margin: 0;
  line-height: 1.2; text-transform: uppercase;
}
.gm-doenca-topo--rx .gm-sub {
  font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gm-muted); margin: 10px 0 18px;
}
.gm-secao { margin-top: 2.25rem; }
.gm-secao > h2 {
  font-size: var(--t-md); margin-bottom: 0.75rem;
  padding-bottom: 0.35rem; border-bottom: 1px solid var(--regra-forte);
}
.gm-prosa { max-width: 72ch; }
.gm-prosa :first-child { margin-top: 0; }
.gm-prosa :last-child { margin-bottom: 0; }
.gm-prosa ul, .gm-prosa ol { padding-left: 1.3rem; }
.gm-prosa table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.gm-prosa td, .gm-prosa th { border: 1px solid var(--regra); padding: 0.4rem 0.5rem; text-align: left; }
.gm-rolagem { overflow-x: auto; }

/* --- Bloco de prescrição: o coração da página ----------------------------- */
.gm-rx { margin-top: 1rem; border: 1px solid var(--regra-forte); background: var(--papel-alto); }
/* Fonte do texto do editor, fora da tela. Sai do fluxo por clip e não por
   display:none: elemento não renderizado perde as quebras de linha, e é
   delas que o editor monta a prescrição. */
.gm-rx-fonte {
  position: absolute; width: 1px; height: 1px; margin: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  border: 0; pointer-events: none;
}
.gm-rx-cabeca {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  padding: 0.6rem 1rem; border-bottom: 1px solid var(--regra);
  background: var(--papel);
}
.gm-rx-cabeca h3 { font-size: var(--t-sm); font-weight: 600; margin: 0; }
.gm-rx-item {
  --cor: var(--rx-simples);
  padding: 1rem 1rem 1rem 1.15rem;
  border-left: 4px solid var(--cor);
}
.gm-rx-item + .gm-rx-item { border-top: 1px solid var(--regra); }
.gm-rx-nome { font-weight: 600; }
.gm-rx-apres { color: var(--tinta-2); font-weight: 400; font-size: var(--t-sm); }
.gm-rx-pos {
  margin: 0.5rem 0 0; font-family: var(--mono); font-size: var(--t-sm); line-height: 1.65;
  color: var(--tinta);
}
/* Protocolo em prosa: fonte de leitura, medida confortável, tabela de verdade. */
.gm-rx-pos-prosa {
  font-family: var(--sans); font-size: var(--t-base); line-height: 1.65;
  max-width: 74ch;
}
.gm-rx-pos-prosa p { margin: 0 0 0.7rem; }
.gm-rx-pos-prosa table { font-size: var(--t-sm); margin: 0.6rem 0; }
.gm-rx-pos-prosa th {
  background: var(--mesa); font-weight: 600; font-family: var(--display);
}
.gm-rx-pos p { margin: 0 0 0.4rem; }
.gm-rx-pos p:last-child { margin-bottom: 0; }
.gm-rx-pos ul, .gm-rx-pos ol { margin: 0.3rem 0; padding-left: 1.2rem; }
.gm-rx-pos table { width: 100%; border-collapse: collapse; font-size: var(--t-xs); }
.gm-rx-pos th, .gm-rx-pos td { border: 1px solid var(--regra); padding: 0.3rem 0.4rem; text-align: left; }
.gm-rx-pos h1, .gm-rx-pos h2, .gm-rx-pos h3, .gm-rx-pos h4 {
  font-family: var(--sans); font-size: var(--t-sm); margin: 0.5rem 0 0.3rem;
}
/* Depois do cálculo o texto vira linha simples, do jeito que vai ser colado. */
.gm-rx-pos.calculado { white-space: pre-wrap; }

/* Tabela larga rola sozinha no celular. */
.gm-tbl-scroll { overflow-x: auto; margin: 0.4rem 0; }
.gm-rx-meta {
  margin-top: 0.6rem; display: flex; flex-wrap: wrap; gap: 0.35rem 1rem;
  font-size: var(--t-xs); color: var(--tinta-2); font-family: var(--mono);
}
.gm-rx-tipo {
  font-size: var(--t-xs); font-family: var(--sans); color: var(--cor);
  border: 1px solid currentColor; border-radius: 2px; padding: 0.05rem 0.35rem;
}
.rx-simples   { --cor: var(--rx-simples); }
.rx-branca    { --cor: var(--rx-branca); }
.rx-azul      { --cor: var(--rx-azul); }
.rx-amarela   { --cor: var(--rx-amarela); }
.rx-especial_c{ --cor: var(--rx-especial); }

.gm-tag-esquema {
  font-size: var(--t-xs); color: var(--tinta-2);
  border: 1px solid var(--regra-forte); border-radius: 2px; padding: 0.05rem 0.4rem;
}

/* --- Botões: a pílula da casa -------------------------------------------- */
.gm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  padding: 0.62rem 1.25rem; border-radius: 999px; cursor: pointer;
  font-family: var(--display); font-weight: 700; font-size: var(--t-sm); line-height: 1;
  border: 2px solid transparent; background: var(--teal); color: #fff;
  box-shadow: 0 10px 24px -12px var(--teal);
  transition: filter .18s, box-shadow .25s, transform .12s;
}
.gm-btn:hover { filter: brightness(1.07); box-shadow: 0 16px 32px -12px var(--teal); }
.gm-btn:active { transform: translateY(1px) scale(.99); }
/* Especificidade maior que '.gm a': sem isso um <a class="gm-btn"> herda a
   cor de link. */
.gm .gm-btn { color: #fff; text-decoration: none; }
.gm .gm-btn-secundario { color: var(--teal); }
.gm-btn-secundario {
  background: none; color: var(--teal); border-color: var(--regra-forte); box-shadow: none;
}
.gm-btn-secundario:hover {
  background: var(--mint-soft); border-color: var(--teal); filter: none; box-shadow: none;
}
/* No escuro o teal sobre a superfície navy fica em 2,6:1; o texto do botão
   secundário passa a menta, que lê bem ali. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .gm .gm-btn-secundario { color: var(--mint); }
}
:root[data-tema="escuro"] .gm .gm-btn-secundario { color: var(--mint); }
/* Precisa de `.gm ` para vencer `.gm .gm-btn { color:#fff }` — senão um
   <a class="gm-btn gm-btn-texto"> fica branco sobre cartão branco. */
.gm .gm-btn-texto {
  background: none; border-color: transparent; color: var(--teal);
  box-shadow: none; padding: 0.4rem 0.6rem;
}
.gm-btn-texto:hover { background: var(--mint-soft); filter: none; box-shadow: none; }
.gm-btn[data-copiado="1"] {
  background: var(--teal-deep); border-color: var(--teal-deep); color: #fff;
}
.gm-rx-cabeca .gm-btn { margin-left: auto; }

/* Calculadora que roda em site oficial de terceiro (FRAX e afins).
   Não dá para embutir: o site responde x-frame-options: SAMEORIGIN, então
   um iframe viria em branco. O honesto é dizer isso e abrir fora. */
.gm-externa {
  padding: var(--gb-e-5);
  background: var(--papel-alto); border: 1px solid var(--regra);
  border-radius: var(--raio); box-shadow: var(--sombra-sm);
}
.gm-externa p { margin: 0 0 var(--gb-e-4); font-size: var(--t-sm); color: var(--tinta-2); max-width: 70ch; }
.gm .gm-externa .gm-btn {
  background: var(--navy); color: #fff; box-shadow: none;
}
.gm .gm-externa .gm-btn:hover { filter: brightness(1.25); }

/* ==========================================================================
   Calculadora — reprodução da tela do Médicos do Futuro.

   ÚNICA tela da plataforma fora da identidade da casa: usa a paleta azul da
   origem, por decisão do cliente. Tudo aqui é prefixado `gm-cx-` e vive sob
   `.gm-cx`, então não encosta em nenhuma outra tela.
   ========================================================================== */
.gm-cx {
  --gm-blue:        #2d6df6;
  --gm-blue-strong: #1f5ae0;
  --gm-coral:       #f0563a;
  --gm-coral-ink:   #cf3714;   /* o coral puro dá 3,2:1 sobre a página */
  --gm-amber:       #f59e0b;
  --gm-card:        #ffffff;
  --gm-card-2:      #fbfbfe;
  --gm-border:      #e7ebf3;
  --gm-ink:         #1b2430;
  --gm-muted:       #5f6a7c;   /* #6b7688 da origem dava 4,2:1 sobre #f4f5fb */

  max-width: 820px; margin: 0 auto;
  font-family: var(--sans);
  color: var(--gm-ink);
}
.gm-cx, .gm-cx * { box-sizing: border-box; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .gm-cx {
    --gm-card: #172231; --gm-card-2: #131d2a; --gm-border: #263341;
    --gm-ink: #e8eef6; --gm-muted: #94a2b3; --gm-coral-ink: #ff8f78;
  }
}
:root[data-tema="escuro"] .gm-cx {
  --gm-card: #172231; --gm-card-2: #131d2a; --gm-border: #263341;
  --gm-ink: #e8eef6; --gm-muted: #94a2b3; --gm-coral-ink: #ff8f78;
}

/* severidade — uma variável só, usada pelo cartão, pelas faixas e pelo copiar.
   `--sev` pinta ponto, borda e fundo; texto usa `--sev-ink`, que puxa a cor
   para a tinta do tema e por isso passa de 4,5:1 no claro e no escuro. */
.gm-cx [class*="sev-"] { --sev-ink: color-mix(in srgb, var(--sev) 65%, var(--gm-ink)); }
.gm-cx .sev-success   { --sev: #16a34a; }
.gm-cx .sev-warning   { --sev: #d97706; }
.gm-cx .sev-danger    { --sev: #dc2626; }
.gm-cx .sev-info      { --sev: #0891b2; }
.gm-cx .sev-primary   { --sev: var(--gm-blue); }
.gm-cx .sev-secondary { --sev: #64748b; }

/* --- topo ----------------------------------------------------------------- */
.gm-cx-crumb { font-size: .85rem; color: var(--gm-muted); margin-bottom: 18px; }
.gm .gm-cx-crumb a { color: var(--gm-muted); text-decoration: none; }
.gm .gm-cx-crumb a:hover { color: var(--gm-blue); }

.gm-cx-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 26px;
}
.gm-cx-eyebrow {
  font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  /* o azul cru dá 4,2:1 sobre o fundo da página; puxar para a tinta do tema
     resolve nos dois temas sem mudar a cor percebida. */
  color: color-mix(in srgb, var(--gm-blue) 85%, var(--gm-ink));
  margin-bottom: 8px;
}
.gm-cx-title {
  font-family: var(--sans);
  font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 800;
  letter-spacing: -.025em; line-height: 1.08; margin: 0; color: var(--gm-ink);
}
.gm-cx-sub {
  font-size: 1.08rem; line-height: 1.55; color: var(--gm-muted);
  margin: 12px 0 0; max-width: 58ch;
}
.gm .gm-cx-clear {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  padding: 9px 16px; border-radius: 11px; text-decoration: none;
  border: 1px solid var(--gm-border); background: var(--gm-card);
  font-size: .9rem; font-weight: 600; color: var(--gm-ink);
}
.gm .gm-cx-clear:hover { border-color: var(--gm-blue); color: var(--gm-blue); }

/* --- ferramenta externa --------------------------------------------------- */
.gm-cx-ext {
  padding: 18px 20px; margin-bottom: 22px; border-radius: 16px;
  border: 1px solid var(--gm-border); background: var(--gm-card-2);
}
.gm-cx-ext p { font-size: 1rem; color: var(--gm-ink); margin: 0 0 12px; }

/* --- grade e campos ------------------------------------------------------- */
.gm-cx-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px;
}
.gm-cx-field {
  padding: 16px 18px; border-radius: 16px;
  border: 1px solid var(--gm-border); background: var(--gm-card);
}
.gm-cx-field.is-wide { grid-column: 1 / -1; }
.gm-cx-flabel {
  display: block; font-size: 1rem; font-weight: 600; color: var(--gm-ink);
  line-height: 1.35; margin-bottom: 12px;
}
.gm-cx-flabel .u { font-size: .88rem; font-weight: 500; color: var(--gm-muted); }
.gm-cx-flabel .req { color: var(--gm-coral-ink); }
.gm-cx-help {
  display: block; font-size: .84rem; color: var(--gm-muted);
  margin-top: 10px; line-height: 1.45;
}

.gm-cx-input, .gm-cx-sel {
  width: 100%; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--gm-border); background: var(--gm-card-2);
  font: 400 1.05rem/1.4 var(--sans); color: var(--gm-ink);
}
.gm-cx-input:focus, .gm-cx-sel:focus {
  outline: 0; border-color: var(--gm-blue); box-shadow: 0 0 0 3px rgba(45, 109, 246, .14);
}
/* busca de medicamento (dose pediátrica): lista sob o campo */
.gm-cx-med-lista {
  margin-top: 8px; border: 1px solid var(--gm-border); border-radius: 12px;
  background: var(--gm-card); overflow: hidden;
  max-height: 17rem; overflow-y: auto;
}
.gm-cx-med-op {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  padding: 11px 14px; font: 400 .98rem/1.35 var(--sans); color: var(--gm-ink);
  cursor: pointer;
}
.gm-cx-med-op + .gm-cx-med-op { border-top: 1px solid var(--gm-border); }
.gm-cx-med-op:hover, .gm-cx-med-op:focus-visible {
  background: color-mix(in srgb, var(--gm-blue) 10%, var(--gm-card));
  outline: 0; box-shadow: inset 3px 0 0 var(--gm-blue);
}

.gm-cx-sel {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236b7688' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}

/* segmentado: rádio de verdade por baixo, pílula por cima */
.gm-cx-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gm-cx-seg.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gm-cx-seg label { position: relative; display: block; margin: 0; }
.gm-cx-seg input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.gm-cx-seg span {
  display: block; text-align: center; padding: 11px 10px; border-radius: 11px;
  border: 1px solid var(--gm-border); background: var(--gm-card-2);
  font-size: .98rem; font-weight: 600; color: var(--gm-ink);
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}
.gm-cx-seg label:hover span { border-color: var(--gm-blue); color: var(--gm-blue); }
.gm-cx-seg input:checked + span {
  background: var(--gm-blue); border-color: var(--gm-blue); color: #fff;
  box-shadow: 0 4px 12px rgba(45, 109, 246, .28);
}
.gm-cx-seg input:focus-visible + span { box-shadow: 0 0 0 3px rgba(45, 109, 246, .3); }

/* --- ações e aviso de cálculo automático ---------------------------------- */
.gm-cx-actions { margin-top: 20px; }
.gm-cx-btn {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 14px 28px; border-radius: 13px; border: 0;
  background: var(--gm-ink); color: var(--gm-card);
  font: 700 1.02rem/1 var(--sans); text-decoration: none;
  transition: opacity .12s;
}
.gm .gm-cx-btn { color: var(--gm-card); }
.gm-cx-btn:hover { opacity: .88; }
.gm-cx-btn .bi { font-size: 1.05rem; }
.gm-cx-live {
  display: flex; align-items: center; gap: 8px; margin: 18px 2px 0;
  font-size: .88rem; font-weight: 600; color: var(--gm-muted);
}
.gm-cx-live .bi { color: var(--gm-blue); font-size: .95rem; }

/* --- resultado ------------------------------------------------------------ */
#gm-cx-out.is-calculando { opacity: .55; transition: opacity .12s ease; }

.gm-cx-result {
  display: flex; align-items: flex-start; gap: 18px;
  margin-top: 26px; padding: 24px 26px; border-radius: 20px;
  background: color-mix(in srgb, var(--sev) 9%, var(--gm-card));
  border: 1.5px solid color-mix(in srgb, var(--sev) 40%, var(--gm-border));
}
.gm-cx-result__icon {
  display: grid; place-items: center; flex: 0 0 46px; width: 46px; height: 46px;
  border-radius: 13px; background: var(--gm-card);
  border: 1px solid color-mix(in srgb, var(--sev) 35%, var(--gm-border));
  color: var(--sev); font-size: 1.4rem;
}
.gm-cx-result__body { flex: 1 1 auto; min-width: 0; }
.gm-cx-result__eyebrow {
  font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sev-ink); margin-bottom: 6px;
}
.gm-cx-result__value {
  font-size: clamp(1.7rem, 3.5vw, 2.4rem); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.1; color: var(--gm-ink);
}
.gm-cx-result__tag {
  display: inline-block; margin-top: 10px;
  font-size: .95rem; font-weight: 700; color: var(--sev-ink);
}
.gm-cx-result__conduta { margin-top: 14px; font-size: 1.02rem; line-height: 1.6; color: var(--gm-ink); }
.gm-cx-result__conduta table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.gm-cx-result__conduta th, .gm-cx-result__conduta td {
  border: 1px solid var(--gm-border); padding: 6px 8px; text-align: left;
}
.gm-cx-result__fonte { margin-top: 14px; font-size: .84rem; color: var(--gm-muted); }
.gm-cx-copy {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; cursor: pointer;
  padding: 9px 14px; border-radius: 11px; background: var(--gm-card);
  border: 1px solid color-mix(in srgb, var(--sev) 35%, var(--gm-border));
  font: 600 .88rem/1 var(--sans); color: var(--gm-ink);
}
.gm-cx-copy:hover { border-color: var(--sev); color: var(--sev-ink); }

.gm-cx-erro {
  display: flex; align-items: center; gap: 11px;
  margin-top: 26px; padding: 18px 20px; border-radius: 16px;
  color: color-mix(in srgb, #dc2626 65%, var(--gm-ink));
  background: color-mix(in srgb, #dc2626 8%, var(--gm-card));
  border: 1px solid color-mix(in srgb, #dc2626 30%, var(--gm-border));
  font-size: 1rem; font-weight: 600;
}

.gm-cx-empty {
  margin-top: 26px; padding: 34px 24px; border-radius: 20px; text-align: center;
  border: 1.5px dashed var(--gm-border); color: var(--gm-muted); font-size: 1rem;
}
.gm-cx-empty .bi {
  display: block; font-size: 1.8rem; margin-bottom: 10px;
  color: color-mix(in srgb, var(--gm-blue) 55%, var(--gm-muted));
}

/* --- faixas de interpretação ---------------------------------------------- */
.gm-cx-bands { margin-top: 22px; }
.gm-cx-bands__label {
  font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gm-muted); margin: 0 2px 12px;
}
.gm-cx-band {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 16px; margin-bottom: 8px; border-radius: 13px;
  border: 1px solid var(--gm-border); background: var(--gm-card);
}
.gm-cx-band.is-active {
  border-color: color-mix(in srgb, var(--sev) 45%, transparent);
  background: color-mix(in srgb, var(--sev) 9%, var(--gm-card));
}
.gm-cx-band__dot {
  flex: 0 0 12px; width: 12px; height: 12px; border-radius: 50%; background: var(--sev);
}
.gm-cx-band__range { font-size: 1rem; font-weight: 800; color: var(--gm-ink); min-width: 44px; }
.gm-cx-band__name { flex: 1 1 auto; font-size: .96rem; color: var(--gm-muted); }
.gm-cx-band__you {
  font-size: .68rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--sev-ink);
}

/* --- nota final ----------------------------------------------------------- */
.gm-cx-note {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 30px 2px 0; padding-top: 18px; border-top: 1px solid var(--gm-border);
  font-size: .88rem; line-height: 1.5; color: var(--gm-muted);
}
.gm-cx-note .bi { color: var(--gm-amber); font-size: 1rem; margin-top: 2px; }

/* No celular: uma coluna de campos, e o segmentado de 3 empilha — na NIHSS
   as opções são frases inteiras, que lado a lado não cabem na tela. */
@media (max-width: 34rem) {
  .gm-cx-grid { grid-template-columns: 1fr; }
  .gm-cx-seg.n3 { grid-template-columns: 1fr; }
  .gm-cx-seg span { text-align: left; }
  .gm-cx-head { flex-wrap: wrap; }
  .gm-cx-result { flex-wrap: wrap; }
  .gm-cx-copy { margin-left: 64px; }
}

/* --- Linhas: lista em cartão --------------------------------------------
   Uma linha por item, com ícone à esquerda e a data à direita. Serve para
   fluxogramas, calculadoras e procedimentos — listas onde cada item é uma
   ferramenta, não um trecho de texto.                                     */
.gm-linhas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gb-e-2); }
.gm-linhas > li { margin: 0; }
.gm .gm-linhas a {
  --cor: var(--teal);
  display: grid; align-items: center; gap: 0 var(--gb-e-4);
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  padding: var(--gb-e-3) var(--gb-e-4);
  background: var(--papel-alto); color: var(--tinta); text-decoration: none;
  border: 1px solid var(--regra); border-radius: var(--raio);
  transition: border-color var(--gb-transicao), box-shadow var(--gb-transicao),
              transform var(--gb-transicao);
}
.gm .gm-linhas a:hover, .gm .gm-linhas a:focus-visible {
  border-color: var(--cor);
  box-shadow: 0 12px 26px -20px rgba(0, 21, 37, .6);
  transform: translateY(-1px);
}
.gm-linha-icone {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: var(--gb-raio-sm);
  background: color-mix(in srgb, var(--cor) 12%, transparent);
  color: var(--cor); font-size: 1.1rem;
}
.gm-linha-texto { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.gm-linha-nome {
  font-family: var(--display); font-weight: 700; font-size: var(--t-base);
  color: var(--tinta); transition: color var(--gb-transicao);
}
.gm .gm-linhas a:hover .gm-linha-nome { color: var(--cor); }
.gm-linha-resumo {
  font-size: var(--t-sm); color: var(--tinta-2); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gm-linha-meta {
  /* Rótulo discreto, mas ainda legível: em --tinta-3 ficava em 3,1:1. */
  font-size: var(--t-xs); color: var(--tinta-2); white-space: nowrap;
}
.gm-linha-seta {
  display: grid; place-items: center;
  width: 1.9rem; height: 1.9rem; border-radius: 999px;
  border: 1px solid var(--regra); color: var(--tinta-3); font-size: 0.8rem;
  transition: background var(--gb-transicao), color var(--gb-transicao),
              border-color var(--gb-transicao);
}
.gm .gm-linhas a:hover .gm-linha-seta {
  background: var(--cor); border-color: var(--cor); color: #fff;
}

/* A cor do ladrilho segue o receituário quando a linha é de medicamento:
   mesmo código da página do remédio, aprendido uma vez e válido em toda parte. */
.gm .gm-linhas a[data-rx="simples"]    { --cor: var(--rx-simples); }
.gm .gm-linhas a[data-rx="branca"]     { --cor: var(--rx-branca); }
.gm .gm-linhas a[data-rx="azul"]       { --cor: var(--rx-azul); }
.gm .gm-linhas a[data-rx="amarela"]    { --cor: var(--rx-amarela); }
.gm .gm-linhas a[data-rx="especial_c"] { --cor: var(--rx-especial); }

.gm-linha-meta { display: flex; align-items: center; gap: var(--gb-e-2); }
.gm-selo-sus {
  font-weight: 700; color: var(--ok);
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  border-radius: 999px; padding: 0.1rem 0.45rem;
}

/* Busca da lista */
.gm-filtros { display: flex; gap: var(--gb-e-2); margin-bottom: var(--gb-e-4); }
.gm-filtro-busca { position: relative; flex: 1 1 auto; max-width: 28rem; }
.gm-filtro-busca .bi {
  position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%);
  color: var(--tinta-3); font-size: 0.9rem; pointer-events: none;
}
.gm-filtro-busca input {
  width: 100%; padding: 0.62rem 0.9rem 0.62rem 2.4rem;
  font: 400 var(--t-sm)/1.4 var(--sans); color: var(--tinta);
  background: var(--papel-alto); border: 1px solid var(--regra-forte);
  border-radius: 999px; transition: border-color var(--gb-transicao), box-shadow var(--gb-transicao);
}
.gm-filtro-busca input:focus {
  outline: 0; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(47, 107, 90, .16);
}

/* No celular a data sai: o nome e o resumo é que decidem. */
@media (max-width: 44rem) {
  .gm .gm-linhas a { grid-template-columns: auto minmax(0, 1fr) auto; }
  .gm-linha-meta { display: none; }
}

/* "Também conhecida por" — meio mundo procura pelo nome popular. */
.gm-sinonimos {
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
  margin: var(--gb-e-2) 0 0; font-size: var(--t-sm); color: var(--tinta-3);
}
.gm-secao > h2 { display: flex; align-items: center; gap: var(--gb-e-3); flex-wrap: wrap; }
.gm-secao > h2 .gm-btn { margin-left: auto; }

/* Atalhos do Início em duas colunas. */
.gm-atalhos {
  display: grid; gap: var(--gb-e-4);
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}
.gm-ver-todos {
  margin-left: auto; font-family: var(--sans); font-size: var(--t-sm);
  font-weight: 500; color: var(--teal); text-decoration: none;
}
.gm-ver-todos:hover { text-decoration: underline; }

/* Faixa de números do Início — o tamanho do acervo, em uma linha. */
.gm-numeros {
  list-style: none; margin: 0 0 var(--gb-e-4); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--gb-e-2);
}
.gm-numeros li {
  padding: 0.4rem 0.9rem; border-radius: 999px;
  background: var(--papel-alto); border: 1px solid var(--regra);
  font-size: var(--t-sm); color: var(--tinta-2);
}
.gm-numeros b { font-family: var(--display); font-weight: 700; color: var(--teal); }

/* --- Formulários dos materiais impressos --------------------------------
   Classes que as views já usavam e que não tinham regra nenhuma: os campos
   empilhavam em vez de ficar em linha. */
.gm-form { display: grid; gap: var(--gb-e-3); }
.gm-form-linha {
  display: grid; gap: var(--gb-e-3);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.gm-fieldset {
  padding: var(--gb-e-4); border: 1px solid var(--regra);
  border-radius: var(--raio); background: var(--papel-alto);
}
.gm-painel-cabeca {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gb-e-3); flex-wrap: wrap; margin-bottom: var(--gb-e-3);
}
.gm-painel-acoes { display: flex; align-items: center; gap: var(--gb-e-2); flex-wrap: wrap; }
.gm-painel-aviso {
  padding: var(--gb-e-2) var(--gb-e-3); margin: 0 0 var(--gb-e-3);
  border-radius: var(--raio-sm); border: 1px solid var(--regra);
  background: var(--azul-claro); font-size: var(--t-sm); color: var(--tinta);
}
.gm-resultado-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gb-e-3); flex-wrap: wrap; margin-bottom: var(--gb-e-2);
}
.gm-rx-achada-topo { display: flex; flex-direction: column; gap: 0.1rem; }
.gm-mono { font-family: var(--mono); }

/* Sugestão de CID: precisa flutuar sobre o formulário, não empurrá-lo. */
.gm-campo-busca { position: relative; }
.gm-sugestoes {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
  max-height: 16rem; overflow-y: auto; margin-top: 0.25rem;
  background: var(--papel-alto); border: 1px solid var(--regra-forte);
  border-radius: var(--raio-sm); box-shadow: var(--sombra);
}
.gm-sugestoes:empty { display: none; }
.gm-sugestoes button {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 0.55rem 0.8rem; border: 0; background: none;
  font: 400 var(--t-sm)/1.4 var(--sans); color: var(--tinta);
}
.gm-sugestoes button:hover, .gm-sugestoes button:focus-visible {
  background: var(--azul-claro); color: var(--teal);
}

/* --- Prescrições encontradas na busca -----------------------------------
   Quem procura um remédio quer a posologia pronta para copiar, não só a
   ficha do fármaco. */
.gm-rx-achadas { display: grid; gap: var(--gb-e-3); }
.gm-rx-achada {
  padding: var(--gb-e-4); background: var(--papel-alto);
  border: 1px solid var(--regra); border-left: 4px solid var(--teal);
  border-radius: var(--raio);
}
.gm-rx-achada-nome {
  margin: 0; font-family: var(--display); font-weight: 700; font-size: var(--t-base); color: var(--tinta);
}
.gm-rx-achada-nome span { font-weight: 500; color: var(--tinta-2); }
.gm-rx-achada-onde { margin: 0.2rem 0 0; font-size: var(--t-sm); color: var(--tinta-3); }
.gm-rx-achada-texto {
  margin: var(--gb-e-3) 0 0; padding: var(--gb-e-3);
  border-radius: var(--raio-sm); background: var(--mesa);
  font-family: var(--mono); font-size: var(--t-sm); line-height: 1.6;
  white-space: pre-wrap; word-break: break-word; color: var(--tinta);
}
.gm-rx-achada-acoes { display: flex; gap: var(--gb-e-2); margin-top: var(--gb-e-3); }

.gm-vazio-busca {
  display: flex; flex-direction: column; align-items: center; gap: var(--gb-e-2);
  padding: var(--gb-e-7) var(--gb-e-4); text-align: center;
}
.gm-vazio-busca .bi { font-size: 2rem; color: var(--tinta-3); }
.gm-vazio-busca p { margin: 0; }

/* --- Barra de lista: busca + ordenação ---------------------------------- */
.gm-barra-lista {
  display: flex; align-items: center; gap: var(--gb-e-3);
  flex-wrap: wrap; margin-bottom: var(--gb-e-3);
}
.gm-ordena {
  display: flex; gap: 2px; margin-left: auto;
  padding: 3px; border-radius: 999px; background: var(--mesa); border: 1px solid var(--regra);
}
.gm .gm-ordena a {
  padding: 0.35rem 0.8rem; border-radius: 999px; text-decoration: none;
  font-family: var(--display); font-size: var(--t-xs); font-weight: 600; color: var(--tinta-2);
  transition: background var(--gb-transicao), color var(--gb-transicao);
}
.gm .gm-ordena a:hover { color: var(--tinta); text-decoration: none; }
.gm .gm-ordena a.on { background: var(--teal); color: #fff; }
.gm-conta-resultado {
  margin: 0 0 var(--gb-e-3); font-size: var(--t-sm); color: var(--tinta-3);
}

.gm-dot {
  display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%;
  background: var(--cor, var(--teal)); margin-right: 0.45rem; vertical-align: middle;
}

/* Grupos recolhíveis por subárea, com deep-link. */
.gm-grupo-acordeao {
  margin-bottom: var(--gb-e-3); border: 1px solid var(--regra);
  border-radius: var(--raio); background: var(--papel-alto); overflow: hidden;
}
.gm-grupo-acordeao > summary {
  display: flex; align-items: center; gap: var(--gb-e-2); flex-wrap: wrap;
  padding: var(--gb-e-3) var(--gb-e-4); cursor: pointer; list-style: none;
}
.gm-grupo-acordeao > summary::-webkit-details-marker { display: none; }
.gm-grupo-acordeao > summary::before {
  content: '\F285'; font-family: 'bootstrap-icons'; font-size: 0.75rem;
  color: var(--tinta-3); transition: transform var(--gb-transicao);
}
.gm-grupo-acordeao[open] > summary::before { transform: rotate(90deg); }
.gm-grupo-acordeao > summary:hover { background: var(--mesa); }
.gm-grupo-nome { font-family: var(--display); font-weight: 700; font-size: var(--t-base); color: var(--tinta); }
.gm-grupo-desc { font-size: var(--t-sm); color: var(--tinta-3); }
.gm-grupo-acordeao > summary .gm-grupo-conta { margin-left: auto; }
.gm-grupo-acordeao .gm-linhas { padding: 0 var(--gb-e-3) var(--gb-e-3); }

.gm-pill-top {
  margin-left: 0.4rem; padding: 0.05rem 0.45rem; border-radius: 999px;
  background: var(--teal); color: #fff;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .03em;
}

.gm-chips { display: flex; flex-wrap: wrap; gap: var(--gb-e-2); }
.gm .gm-chip {
  padding: 0.35rem 0.85rem; border-radius: 999px; text-decoration: none;
  background: var(--papel-alto); border: 1px solid var(--regra);
  font-size: var(--t-sm); font-weight: 500; color: var(--tinta-2);
  transition: border-color var(--gb-transicao), color var(--gb-transicao);
}
.gm .gm-chip:hover { border-color: var(--teal); color: var(--teal); }

@media (max-width: 44rem) {
  .gm-ordena { margin-left: 0; width: 100%; }
  .gm .gm-ordena a { flex: 1 1 0; text-align: center; }
}

.gm-soap-kicker {
  font-family: var(--display); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--teal);
  margin: 0 0 var(--gb-e-1);
}

/* --- SOAP: formulário guiado + nota ao vivo -----------------------------
   Duas colunas: à esquerda o formulário por etapa, à direita a nota do
   prontuário montando-se enquanto se digita. A nota é o produto da tela.  */
.gm-soap {
  display: grid; gap: var(--gb-e-4);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
}
.gm-soap-form {
  padding: var(--gb-e-5); background: var(--papel-alto);
  border: 1px solid var(--regra); border-radius: var(--raio);
  box-shadow: var(--sombra-sm);
}

/* Stepper S / O / A / P */
.gm-soap-passos {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gb-e-2);
  margin-bottom: var(--gb-e-5);
}
.gm-soap-passos button {
  display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
  padding: var(--gb-e-2); border-radius: var(--raio-sm); cursor: pointer;
  border: 1px solid var(--regra); background: var(--mesa); color: var(--tinta-2);
  font-family: var(--display); font-weight: 800; font-size: var(--t-md);
  transition: background var(--gb-transicao), color var(--gb-transicao), border-color var(--gb-transicao);
}
.gm-soap-passos button small {
  font-family: var(--sans); font-weight: 500; font-size: var(--t-xs); letter-spacing: 0;
}
.gm-soap-passos button:hover { border-color: var(--teal); color: var(--teal); }
.gm-soap-passos button.on { background: var(--teal); border-color: var(--teal); color: #fff; }

.gm-soap-etapa { padding: 0; box-shadow: none; background: none; }
.gm-soap-etapa > legend {
  font-family: var(--display); font-weight: 700; font-size: var(--t-md);
  color: var(--tinta); margin-bottom: var(--gb-e-3);
}
.gm-soap-sub {
  margin: var(--gb-e-5) 0 var(--gb-e-3); padding-top: var(--gb-e-3);
  border-top: 1px solid var(--regra);
  font-family: var(--display); font-weight: 700; font-size: var(--t-sm); color: var(--tinta);
}
.gm-soap-grade {
  display: grid; gap: var(--gb-e-3);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.gm-soap-vitais {
  display: grid; gap: var(--gb-e-3); grid-template-columns: repeat(4, 1fr);
}
.gm-soap-dica {
  display: flex; align-items: flex-start; gap: 0.45rem;
  margin: 0 0 var(--gb-e-3); padding: var(--gb-e-2) var(--gb-e-3);
  border-radius: var(--raio-sm); background: var(--azul-claro);
  font-size: var(--t-sm); color: var(--tinta-2);
}
.gm-soap-nav {
  display: flex; justify-content: space-between; gap: var(--gb-e-3);
  margin-top: var(--gb-e-5); padding-top: var(--gb-e-4); border-top: 1px solid var(--regra);
}

/* Nota do prontuário */
.gm-soap-nota {
  position: sticky; top: 4.5rem;
  padding: var(--gb-e-4); background: var(--papel-alto);
  border: 1px solid var(--regra-forte); border-radius: var(--raio);
  box-shadow: var(--sombra-sm);
}
.gm-soap-nota-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gb-e-2); margin-bottom: var(--gb-e-3);
}
.gm-soap-nota-titulo {
  margin: 0; font-family: var(--display); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3);
}
.gm-soap-saida {
  margin: 0; padding: var(--gb-e-3); max-height: 30rem; overflow: auto;
  border: 1px dashed var(--regra-forte); border-radius: var(--raio-sm);
  background: var(--mesa); color: var(--tinta);
  font-family: var(--mono); font-size: var(--t-sm); line-height: 1.65;
  white-space: pre-wrap; word-break: break-word;
}
.gm-soap-acoes { display: flex; gap: var(--gb-e-2); margin-top: var(--gb-e-3); }
.gm-soap-acoes .gm-btn { flex: 1 1 0; }

@media (max-width: 64rem) {
  .gm-soap { grid-template-columns: 1fr; }
  .gm-soap-nota { position: static; }
}
@media (max-width: 40rem) {
  .gm-soap-vitais { grid-template-columns: repeat(2, 1fr); }
  .gm-soap-form { padding: var(--gb-e-4); }
}

/* --- Procedimento: conteúdo + sumário -----------------------------------
   Página longa de consulta durante o ato. O sumário fixo diz onde está o
   material e onde estão as complicações sem ter de rolar caçando.       */
.gm-proc {
  display: grid; gap: var(--gb-e-5);
  grid-template-columns: minmax(0, 1fr) 14rem;
  align-items: start;
}
.gm-proc-corpo { min-width: 0; }
.gm-proc-bloco {
  margin: 0 0 var(--gb-e-3); padding: var(--gb-e-5);
  background: var(--papel-alto); border: 1px solid var(--regra);
  border-radius: var(--raio); box-shadow: var(--sombra-sm);
}
.gm-proc-bloco > h2 {
  display: flex; align-items: center; gap: var(--gb-e-2);
  font-family: var(--display); font-size: var(--t-md); font-weight: 700;
  color: var(--tinta); margin: 0 0 var(--gb-e-3);
  padding-bottom: var(--gb-e-2); border-bottom: 1px solid var(--regra);
}
.gm-proc-icone {
  display: grid; place-items: center; flex: 0 0 1.9rem;
  width: 1.9rem; height: 1.9rem; border-radius: 9px;
  background: color-mix(in srgb, var(--tom, var(--teal)) 13%, transparent);
  color: var(--tom, var(--teal)); font-size: 0.95rem;
}
.gm-proc-bloco.tom-ok       { --tom: var(--ok); }
.gm-proc-bloco.tom-grave    { --tom: var(--grave); }
.gm-proc-bloco.tom-alerta   { --tom: var(--alerta); }
.gm-proc-bloco.tom-neutro   { --tom: var(--tinta-2); }
/* O passo a passo é o que se lê durante o procedimento. */
.gm-proc-bloco.tom-destaque { --tom: var(--teal); border-color: var(--teal); }

.gm-proc-sumario {
  position: sticky; top: 5rem;
  padding: var(--gb-e-4); border: 1px solid var(--regra);
  border-radius: var(--raio); background: var(--papel-alto);
}
.gm-proc-sumario-titulo {
  margin: 0 0 var(--gb-e-2);
  font-family: var(--display); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3);
}
.gm-proc-sumario nav { display: flex; flex-direction: column; gap: 1px; }
.gm .gm-proc-sumario a {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 0.55rem; border-radius: var(--raio-sm);
  font-size: var(--t-sm); color: var(--tinta-2); text-decoration: none;
  transition: background var(--gb-transicao), color var(--gb-transicao);
}
.gm .gm-proc-sumario a:hover { background: var(--azul-claro); color: var(--teal); }
.gm-proc-sumario .bi { font-size: 0.85rem; opacity: .7; }

@media (max-width: 60rem) {
  .gm-proc { grid-template-columns: 1fr; }
  .gm-proc-sumario { position: static; order: -1; }
  .gm-proc-sumario nav { flex-direction: row; flex-wrap: wrap; gap: var(--gb-e-2); }
  .gm .gm-proc-sumario a { background: var(--mesa); }
}

/* --- Página de medicamento ----------------------------------------------
   O herói é a faixa do receituário: antes da dose, o médico precisa saber em
   qual bloco pode escrever. A cor é a do bloco de papel, não decoração.   */
.gm-med-topo { margin-bottom: 1.1rem; }
.gm-med-linha {
  display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem;
  margin: 0.4rem 0 0; font-size: var(--t-sm); color: var(--tinta-2);
}
.gm-med-comerciais { color: var(--tinta-3); }
.gm-med-comerciais::before { content: '®  '; }

.gm-rx-faixa {
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid var(--regra); border-radius: var(--raio);
  background: var(--papel-alto); overflow: hidden; margin-bottom: 1.1rem;
}
.gm-rx-faixa-cor { flex: 0 0 0.55rem; background: var(--cor-rx, var(--rx-simples)); }
.gm-rx-faixa-texto {
  display: flex; flex-direction: column; gap: 0.15rem; padding: 0.85rem 1.1rem;
}
.gm-rx-faixa-texto b {
  font-family: var(--display); font-weight: 700; font-size: var(--t-md);
  color: var(--cor-rx, var(--tinta));
}
.gm-rx-faixa-texto small { font-size: var(--t-sm); color: var(--tinta-2); }
.gm-rx-faixa[data-rx="simples"]    { --cor-rx: var(--rx-simples); }
.gm-rx-faixa[data-rx="branca"]     { --cor-rx: var(--rx-branca); }
.gm-rx-faixa[data-rx="azul"]       { --cor-rx: var(--rx-azul); }
.gm-rx-faixa[data-rx="amarela"]    { --cor-rx: var(--rx-amarela); }
.gm-rx-faixa[data-rx="especial_c"] { --cor-rx: var(--rx-especial); }

.gm-bandeiras {
  list-style: none; margin: 0 0 1.75rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.45rem;
}
.gm-bandeiras li {
  display: inline-flex; align-items: center; gap: 0.42rem;
  padding: 0.35rem 0.75rem; border-radius: 999px;
  font-size: var(--t-sm); font-weight: 500;
  color: var(--tinta-2); background: var(--mesa); border: 1px solid var(--regra);
}
.gm-bandeiras .bi { font-size: 0.9rem; opacity: .75; }
/* Ajuste de dose é aviso, não informação neutra. */
.gm-bandeiras li.alerta {
  color: color-mix(in srgb, var(--alerta) 78%, var(--tinta));
  background: color-mix(in srgb, var(--alerta) 11%, transparent);
  border-color: color-mix(in srgb, var(--alerta) 28%, transparent);
}

.gm-doses {
  display: grid; grid-template-columns: auto 1fr; gap: 0.55rem 1.5rem;
  margin: 0; padding: 1.1rem 1.25rem;
  background: var(--papel-alto); border: 1px solid var(--regra); border-radius: var(--raio);
}
.gm-doses dt { font-size: var(--t-sm); font-weight: 600; color: var(--tinta-2); }
.gm-doses dd { margin: 0; font-family: var(--mono); font-size: var(--t-sm); color: var(--tinta); }

.gm-prosa-grave {
  padding: 0.9rem 1.1rem; border-radius: var(--raio-sm);
  border-left: 3px solid var(--grave);
  background: color-mix(in srgb, var(--grave) 7%, transparent);
}

@media (max-width: 34rem) {
  .gm-doses { grid-template-columns: 1fr; gap: 0.15rem 0; }
  .gm-doses dd { margin-bottom: 0.6rem; }
}

/* O conteúdo da aba mora num cartão, como o da prescrição: as duas abas
   têm o mesmo peso visual e a prosa não fica solta no fundo da página. */
.gm-painel > .gm-secao {
  margin-top: 0; padding: var(--gb-e-5);
  background: var(--papel-alto); border: 1px solid var(--regra);
  border-radius: var(--raio); box-shadow: var(--sombra-sm);
}
.gm-painel > .gm-secao + .gm-secao { margin-top: var(--gb-e-3); }
.gm-painel > .gm-secao > h2 {
  font-family: var(--display); font-size: var(--t-md); font-weight: 700;
  color: var(--tinta); margin: 0 0 var(--gb-e-3);
  padding-bottom: var(--gb-e-2); border-bottom: 1px solid var(--regra);
}
/* Medida de leitura: linha longa demais cansa em texto clínico corrido. */
.gm-painel > .gm-secao .gm-prosa { max-width: 74ch; }

@media (max-width: 40rem) {
  .gm-painel > .gm-secao { padding: var(--gb-e-4); }
}

/* --- Abas: Prescrição | Critérios --------------------------------------- */
.gm-abas {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px;
  padding: 5px; background: var(--gm-card-2);
  border: 1px solid var(--gm-border); border-radius: 14px;
}
.gm-abas button {
  flex: 1 1 auto; min-width: 140px;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 12px 16px; border: 0; border-radius: 11px; cursor: pointer;
  font-family: var(--display); font-weight: 700; font-size: .88rem; line-height: 1;
  /* o fundo agora é --gm-card-2: o texto precisa vir da mesma família de
     tokens, senão no escuro cai para 2,9:1. O muted cru dá 4,45:1 no claro;
     puxar um pouco para a tinta fecha os dois temas acima de 4,5:1. */
  color: color-mix(in srgb, var(--gm-muted) 85%, var(--gm-ink)); background: none;
  transition: background .16s, color .16s;
}
.gm-abas button .bi { font-size: 1rem; opacity: .75; }
.gm-abas button:hover { color: var(--tinta); background: var(--papel-alto); }
.gm-abas button.on {
  background: var(--teal); color: #fff; box-shadow: 0 8px 18px -10px var(--teal);
}
.gm-abas button.on .bi { opacity: 1; }
.gm-abas button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

@media (max-width: 34rem) {
  .gm-abas button { font-size: .82rem; padding: 10px 10px; }
  .gm-abas button .bi { display: none; }
}

/* --- Editor da prescrição -----------------------------------------------
   A régua de ferramentas some no papel; o que importa aqui é o texto que vai
   para o prontuário, então ele é o elemento mais alto da hierarquia.      */
.gm-editor { margin-top: 1.25rem; }
.gm-editor-rotulo {
  font-family: var(--display); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3);
  margin: 0 0 0.6rem;
}
.gm-editor-caixa {
  border: 1px solid var(--regra-forte); border-radius: var(--raio);
  overflow: hidden; background: var(--papel-alto);
}
.gm-editor-caixa .tox-tinymce { border: 0; border-radius: 0; }
.gm-editor-caixa .tox .tox-toolbar__primary { background: var(--mesa); border-bottom: 1px solid var(--regra); }
.gm-editor-caixa .tox .tox-tbtn { color: var(--tinta-2); border-radius: 8px; }
.gm-editor-caixa .tox .tox-tbtn:hover { background: var(--azul-claro); color: var(--teal); }
.gm-editor-caixa .tox .tox-tbtn--enabled { background: var(--mint-soft); color: var(--teal); }
/* fallback sem TinyMCE */
.gm-editor-caixa textarea {
  display: none; width: 100%; min-height: 20rem; padding: 1rem; border: 0; resize: vertical;
  font: 400 0.95rem/1.65 var(--mono); color: var(--tinta); background: var(--papel-alto);
}
.gm-editor-caixa textarea:focus { outline: 2px solid var(--teal); outline-offset: -2px; }

.gm-editor-acoes {
  display: flex; gap: 0.65rem; margin-top: 1rem;
}
.gm-editor-acoes .gm-btn { flex: 1 1 0; }
.gm-editor-acoes .bi { font-size: 1rem; }
.gm-editor-vias {
  display: flex; align-items: center; gap: 0.5rem;
  margin-top: 0.8rem; font-size: var(--t-sm); color: var(--tinta-2);
}
.gm-editor-vias input { width: 1.05rem; height: 1.05rem; accent-color: var(--teal); }

@media (max-width: 34rem) {
  .gm-editor-acoes { flex-direction: column; }
}

/* --- Aviso ----------------------------------------------------------------
   A caixa acompanha a coluna; quem fica na medida de leitura é o texto
   dentro dela. Antes a caixa encolhia e quebrava o ritmo da página.      */
.gm-aviso {
  margin-top: var(--gb-e-6); padding: var(--gb-e-3) var(--gb-e-4);
  border: 1px solid var(--regra);
  border-left: 3px solid var(--alerta);
  border-radius: var(--raio-sm);
  background: var(--papel-alto);
  font-size: var(--t-sm); color: var(--tinta-2);
}
.gm-aviso > * { max-width: 78ch; }

/* --- Figuras -------------------------------------------------------------- */
.gm-figura { margin: 1rem 0 0; }
.gm-figura img { border: 1px solid var(--regra); display: block; }
.gm-figura figcaption { font-size: var(--t-sm); color: var(--tinta-2); margin-top: 0.4rem; }

/* --- Entrar ---------------------------------------------------------------
   Duas colunas: à esquerda o que a plataforma é, com números reais do acervo;
   à direita só o formulário. No celular a vitrine sai de cena — quem está
   entrando pelo telefone quer o campo, não o argumento.                   */
.gm-entrar-corpo { margin: 0; }
.gm-entrar {
  min-height: 100dvh;
  display: grid; grid-template-columns: 1.05fr 1fr;
  background: var(--papel-alto);
}

/* coluna da esquerda */
.gm-entrar-vitrine {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 2.5rem 3rem; color: #fff; background: var(--navy);
}
.gm-entrar-vitrine::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(40rem 30rem at 78% 12%, rgba(47, 107, 90, .42), transparent 66%),
    linear-gradient(160deg, #032033 0%, #001525 58%);
}
/* Sem malha quadriculada: o fundo é só profundidade, para a prateleira ser
   a única coisa que puxa o olho. */
.gm-entrar-vitrine::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; z-index: -1;
  background: linear-gradient(to top, rgba(0, 0, 0, .35), transparent);
}
.gm-entrar-vitrine .gm .gm-marca { padding: 0; }

.gm-vitrine-meio { margin: auto 0; padding: 2.5rem 0; }
.gm-vitrine-titulo {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.9rem, 3.1vw, 2.8rem); line-height: 1.08; letter-spacing: -0.03em;
  color: #fff; margin-bottom: 1.1rem;
}
.gm-vitrine-texto {
  color: rgba(255, 255, 255, .74); max-width: 42ch; font-size: 1.0625rem;
  margin-bottom: 2.2rem;
}
/* --- A prateleira -------------------------------------------------------
   Lombadas de alturas diferentes, como livro em estante de verdade. É o
   mesmo device dos cards da estante, então login e produto falam igual.  */
.gm-prateleira {
  list-style: none; margin: 0 0 1.8rem; padding: 0 0 0.9rem;
  display: flex; align-items: flex-end; gap: 0.42rem;
  height: 13.5rem; border-bottom: 2px solid rgba(255, 255, 255, .14);
}
.gm-prateleira li {
  flex: 1 1 0; min-width: 0; height: var(--h, 90%);
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(to right,
    color-mix(in srgb, var(--cor) 72%, #000) 0 14%,
    var(--cor) 14% 86%,
    color-mix(in srgb, var(--cor) 62%, #000) 86% 100%);
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .8);
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 0.85rem;
  transition: height .28s cubic-bezier(.2, .8, .2, 1);
}
.gm-prateleira:hover li { height: 74%; }
.gm-prateleira li:hover { height: 100%; }
.gm-prateleira span {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--display); font-weight: 700; font-size: 0.72rem;
  letter-spacing: .04em; color: rgba(255, 255, 255, .94);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: 100%;
}
@media (prefers-reduced-motion: reduce) {
  .gm-prateleira li, .gm-prateleira:hover li { transition: none; }
  .gm-prateleira:hover li { height: var(--h, 90%); }
}

.gm-vitrine-numeros {
  font-size: var(--t-sm); color: rgba(255, 255, 255, .55); margin: 0 0 0.5rem;
}
.gm-vitrine-numeros b {
  font-family: var(--display); font-weight: 700; color: var(--mint);
}

.gm-vitrine-pe {
  font-size: var(--t-sm); color: rgba(255, 255, 255, .5); margin: 0;
}

/* coluna da direita */
/* A coluna do formulário é sempre clara, nos dois temas — é ela que separa a
   vitrine navy. Redefinir os tokens aqui dentro deixa tudo que mora nela
   (campos, rótulos, foco, autofill) coerente sem exceção espalhada. */
.gm-entrar-forma {
  display: grid; place-items: center; padding: 2.5rem 2rem;
  background: #fff;
  --papel: #FFFFFF;
  --papel-alto: #FFFFFF;
  --tinta: #0F1B17;
  --tinta-2: #5A6B64;
  --tinta-3: #8A9891;
  --regra: #DCE6E0;
  --regra-forte: #C2D2C9;
  --azul: #2F6B5A;
  --azul-claro: #EAF3EE;
  --autofill: #EAF3EE;
  color: var(--tinta);
}
.gm-entrar-caixa { width: 100%; max-width: 25rem; }
.gm-entrar-caixa h1 {
  font-size: clamp(1.6rem, 2.4vw, 2rem); color: var(--tinta); letter-spacing: -0.03em;
}
.gm-entrar-caixa .gm-sub { font-size: var(--t-sm); margin: 0.45rem 0 1.9rem; }

.gm-campo { display: block; margin-bottom: 1.1rem; }
.gm-campo span {
  display: block; font-size: var(--t-sm); font-weight: 600;
  color: var(--tinta-2); margin-bottom: 0.4rem;
}
.gm-campo input, .gm-campo select, .gm-campo textarea {
  width: 100%; padding: 0.8rem 0.95rem; color: var(--tinta);
  font: 400 var(--t-base)/1.4 var(--sans);
  background: var(--papel-alto); border: 1px solid var(--regra-forte);
  border-radius: var(--raio-sm);
  transition: border-color .18s, box-shadow .18s;
}
.gm-campo input:focus, .gm-campo select:focus, .gm-campo textarea:focus {
  outline: 0; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(47, 107, 90, .16);
}
.gm-erro {
  margin-bottom: 1.2rem; padding: 0.8rem 0.95rem; font-size: var(--t-sm);
  border: 1px solid #F3C7C2; border-radius: var(--raio-sm);
  background: #FFF7F6; color: #8A2318;
}
.gm-entrar .gm-btn {
  width: 100%; padding: 0.92rem; font-size: var(--t-base); margin-top: 0.4rem;
}
.gm-entrar-ajuda {
  margin: 1.5rem 0 0; text-align: center; font-size: var(--t-sm); color: var(--tinta-2);
}
.gm-entrar-ajuda a { color: var(--teal); font-weight: 600; }

/* Ver a senha */
.gm-campo-senha { position: relative; }
.gm-campo-senha input { padding-right: 3.1rem; }
.gm-ver-senha {
  position: absolute; right: 0.35rem; bottom: 0.32rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; padding: 0;
  border: 0; border-radius: 999px; background: none;
  color: var(--tinta-3); cursor: pointer; transition: color .18s, background .18s;
}
.gm-ver-senha:hover { color: var(--teal); background: var(--azul-claro); }
.gm-ver-senha:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* O autofill do Chrome pinta o campo de azul-claro. Devolve à paleta. */
.gm-campo input:-webkit-autofill,
.gm-campo input:-webkit-autofill:hover,
.gm-campo input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--tinta);
  -webkit-box-shadow: 0 0 0 100px var(--autofill) inset;
  caret-color: var(--tinta);
  border-color: var(--regra-forte);
}

/* Abaixo de 60rem a vitrine sai: no telefone o que importa é o campo. */
@media (max-width: 60rem) {
  .gm-entrar { grid-template-columns: 1fr; }
  .gm-entrar-vitrine { display: none; }
  .gm-entrar-forma { background: var(--navy); padding: 1.5rem; }
  .gm-entrar-caixa {
    background: var(--papel-alto); color: var(--tinta);
    border-radius: var(--raio); padding: 2rem 1.5rem;
    box-shadow: 0 32px 70px -30px rgba(0, 0, 0, .65);
  }
  .gm-entrar-caixa::before {
    content: ''; display: block; width: 2.6rem; height: 2.6rem; margin-bottom: 1.1rem;
    border-radius: 11px;
    background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M10 14l6-5 6 5-6 5z' fill='%23fff'/%3E%3Cpath d='M16 19l6-5v4l-6 5z' fill='%23A8D5C2'/%3E%3C/svg%3E") center/86% no-repeat;
  }
}

/* Recado neutro, regra da senha e o caminho de volta — usados pelas telas de
   recuperar e criar senha, que dividem a casca com a de entrar. */
.gm-ok {
  margin-bottom: 1.2rem; padding: 0.8rem 0.95rem; font-size: var(--t-sm);
  border: 1px solid #BEDFCE; border-radius: var(--raio-sm);
  background: #F1F9F4; color: #1C5B3A;
}
.gm-entrar-esqueci { margin: -0.5rem 0 1.15rem; text-align: right; font-size: var(--t-sm); }
.gm-entrar-esqueci a { color: var(--teal); font-weight: 600; }
.gm-regra-senha { margin: -0.75rem 0 1.15rem; font-size: var(--t-sm); color: var(--tinta-2); }
.gm-recado {
  margin-top: 1.6rem; padding: 1.1rem 1.2rem;
  border: 1px solid var(--regra); border-left: 3px solid var(--teal);
  border-radius: var(--raio-sm); background: var(--azul-claro);
}
.gm-recado p { margin: 0 0 0.6rem; font-size: var(--t-sm); color: var(--tinta-2); }
.gm-recado p:last-child { margin-bottom: 0; }
.gm-recado-alvo { font-size: var(--t-base) !important; color: var(--tinta) !important; }
.gm-recado a { color: var(--teal); font-weight: 600; }

/* --- Vazio ---------------------------------------------------------------- */
.gm-vazio { padding: 2.5rem 0; color: var(--tinta-2); max-width: 60ch; }

/* --- Template migrado: shell dos Guias Médicos ---------------------------- */
.gm {
  --gm-blue: #2d6df6;
  --gm-blue-strong: #1f5ae0;
  --gm-bg: #f4f5fb;
  --gm-card: #ffffff;
  --gm-card-2: #fbfbfe;
  --gm-border: #e7ebf3;
  --gm-ink: #1b2430;
  --gm-muted: #6b7688;
  --gm-chip-bg: #ffffff;
  --gm-chip-ink: #495468;
  --gm-shadow: 0 10px 30px rgba(17, 38, 84, .06);
  --gm-shadow-hover: 0 16px 40px rgba(17, 38, 84, .12);
  --gm-radius: 18px;
  --gm-radius-sm: 14px;
}

body.gm { background: var(--gm-bg); }

.gm .gm-topo {
  min-height: 5.8rem;
  justify-content: space-between;
  background: var(--gm-bg);
  border-bottom-color: var(--gm-border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.gm .gm-topo-marca {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--gm-ink); text-decoration: none;
  font-family: var(--sans); font-size: .95rem; font-weight: 800;
}
.gm-topo-simbolo {
  width: 2rem; height: 2rem; border-radius: 10px;
  background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M10 14l6-5 6 5-6 5z' fill='%23fff'/%3E%3Cpath d='M16 19l6-5v4l-6 5z' fill='%23A8D5C2'/%3E%3C/svg%3E") center/86% no-repeat;
}
.gm-topo-tema {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border: 0; border-radius: 10px;
  background: var(--gm-card); color: var(--gm-ink);
  box-shadow: 0 2px 10px rgba(16, 24, 40, .04);
  cursor: pointer;
}
.gm-topo-tema:hover { color: var(--gm-blue); background: var(--gm-card-2); }
.gm-pagina { max-width: 1120px; padding-top: 1.5rem; border-radius: 22px; }
/* O fundo branco saiu do cartão da página e passou para a coluna do conteúdo. */
.gm-corpo { background: var(--gm-card); }

.gm .gm-crumb {
  margin: 0 4px 1.35rem;
  color: var(--gm-muted);
  font-size: .82rem;
  font-weight: 500;
}
.gm .gm-crumb a { color: var(--gm-muted); text-decoration: none; }
.gm .gm-crumb a:hover { color: var(--gm-blue-strong); }

.gm-header-card {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--gm-card); border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius); padding: 20px 24px;
  box-shadow: var(--gm-shadow); margin-bottom: 22px;
}
.gm-header-dot {
  width: 12px; height: 12px; border-radius: 50%; margin-top: 8px; flex: 0 0 auto;
  background: var(--gm-blue); box-shadow: 0 0 0 4px rgba(45, 109, 246, .15);
}
.gm-header-title {
  font-family: var(--sans);
  font-size: 1.4rem; font-weight: 800; margin: 0 0 3px;
  letter-spacing: 0; color: var(--gm-ink);
}
.gm-header-sub, .gm-header-sub p {
  color: var(--gm-muted); margin: 0; font-size: .95rem; line-height: 1.45;
}

.gm-search {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  background: var(--gm-card); border: 1.5px solid var(--gm-border);
  border-radius: 999px; padding: 10px 12px 10px 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  margin-bottom: 16px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.gm-search:focus-within {
  border-color: #14b8a6;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, .16);
}
.gm-search > i { color: #94a3b8; font-size: 1.05rem; flex: 0 0 auto; }
.gm-search input,
.gm-search input[type="search"] {
  border: 0 !important; outline: none !important;
  background: transparent !important; box-shadow: none !important;
  padding: 0 !important; width: 100%; min-width: 0;
  color: var(--gm-ink); font: 500 1rem/1.4 var(--sans);
}
.gm-search input::placeholder { color: #94a3b8; }

.gm .gm-calc-chips { margin-bottom: 22px; }
.gm .gm-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--gm-chip-bg); border: 1px solid var(--gm-border);
  color: var(--gm-chip-ink); font-size: .85rem; font-weight: 700;
  padding: 7px 15px; border-radius: 999px; text-decoration: none;
  transition: all .15s ease; white-space: nowrap;
}
.gm .gm-chip:hover { border-color: var(--gm-blue); color: var(--gm-blue-strong); text-decoration: none; }
.gm .gm-chip.is-active {
  background: var(--gm-blue); border-color: var(--gm-blue); color: #fff;
  box-shadow: 0 4px 12px rgba(45, 109, 246, .3);
}

.gm-calc-disclaimer {
  display: flex; gap: 12px; align-items: flex-start;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: var(--gm-radius-sm);
  padding: 14px 16px; margin-bottom: 20px;
  font-size: .88rem; color: var(--gm-ink); line-height: 1.45;
}
.gm-calc-disclaimer > i { color: #d97706; font-size: 1.25rem; flex: 0 0 auto; margin-top: 2px; }
.gm-calc-disclaimer strong { color: #92400e; }

.gm-section { margin-bottom: 26px; }
.gm-section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 4px 12px;
}
.gm-section-title {
  font-family: var(--sans); font-size: 1.02rem;
  font-weight: 800; color: var(--gm-ink); margin: 0;
}
.gm-section-count { color: var(--gm-muted); font-size: .85rem; font-weight: 700; }
.gm-rows { display: flex; flex-direction: column; gap: 12px; }
.gm-row {
  display: flex; align-items: center; gap: 16px;
  background: var(--gm-card); border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius-sm); padding: 16px 18px;
  text-decoration: none; color: inherit; box-shadow: var(--gm-shadow);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.gm-row:hover {
  transform: translateY(-2px);
  box-shadow: var(--gm-shadow-hover);
  border-color: var(--gm-blue);
  color: inherit;
  text-decoration: none;
}
.gm-row-icon {
  width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 1.2rem;
  background: color-mix(in srgb, var(--gm-row-color, var(--gm-blue)) 14%, transparent);
  color: var(--gm-row-color, var(--gm-blue));
}
.gm-row-body { flex: 1 1 auto; min-width: 0; }
.gm-row-title {
  display: block; font-size: .98rem; font-weight: 800;
  margin: 0 0 2px; color: var(--gm-ink);
}
.gm-row-desc {
  display: block; font-size: .86rem; color: var(--gm-muted);
  margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gm-row-arrow { flex: 0 0 auto; color: var(--gm-muted); font-size: 1.1rem; }
.gm-row:hover .gm-row-arrow { color: var(--gm-blue); }
.gm-badge-ext {
  display: inline-flex; align-items: center; vertical-align: middle;
  font-size: .68rem; font-weight: 800; color: var(--gm-muted);
  background: #eef2f7; border: 1px solid var(--gm-border);
  padding: 2px 8px; border-radius: 999px; margin-left: 6px;
}
.gm-empty {
  background: var(--gm-card); border: 1px dashed var(--gm-border);
  border-radius: var(--gm-radius); padding: 46px 20px;
  text-align: center; color: var(--gm-muted);
}

/* Estante portada do template antigo */
.est {
  --est-card: var(--gm-card);
  --est-bd: var(--gm-border);
  --est-ink: #0f172a;
  --est-mut: #64748b;
  max-width: 1120px;
  margin: 0 auto;
}
.est-chips { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.3rem; }
.est-chip {
  font-size: .82rem; font-weight: 700; padding: .4rem .85rem;
  border-radius: 999px; text-decoration: none;
  border: 1px solid var(--est-bd); background: var(--est-card); color: var(--est-mut);
  transition: .15s;
}
.est-chip:hover { color: var(--est-ink); border-color: #cbd5e1; text-decoration: none; }
.est-chip.is-active { background: var(--est-ink); color: #fff; border-color: var(--est-ink); }
.est-section { display: flex; align-items: center; gap: .6rem; margin: 0 0 .9rem; }
.est-section::before {
  content: ""; width: 4px; height: 18px; border-radius: 3px;
  background: var(--est-brand, #14b8a6);
}
.est-section h2 {
  font-family: var(--sans); font-size: 1.05rem;
  font-weight: 800; margin: 0; color: var(--est-ink);
}
.est-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 1rem; }
.est-card {
  position: relative; display: flex; flex-direction: column; gap: .65rem; overflow: hidden;
  background: var(--est-card); border: 1px solid var(--est-bd);
  border-radius: 18px; padding: 1.15rem;
  text-decoration: none; color: var(--est-ink);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.est-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--c, #14b8a6); opacity: .9;
}
.est-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--c, #14b8a6) 55%, var(--est-bd));
  box-shadow: 0 14px 30px rgba(15, 23, 42, .10);
  text-decoration: none;
}
.est-card__top { display: flex; align-items: center; justify-content: space-between; }
.est-card__icon {
  width: 48px; height: 48px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: var(--c, #14b8a6);
  background: color-mix(in srgb, var(--c, #14b8a6) 13%, #fff);
}
.est-card__name { font-size: 1.22rem; font-weight: 800; line-height: 1.2; letter-spacing: 0; }
.est-card__desc {
  font-size: .88rem; color: var(--est-mut); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.5em;
}
.est-card__arrow {
  width: 30px; height: 30px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c, #14b8a6);
  background: color-mix(in srgb, var(--c, #14b8a6) 10%, #fff);
  transition: transform .16s ease;
}
.est-card:hover .est-card__arrow { transform: translateX(3px); }
.est-empty {
  text-align: center; color: var(--est-mut); padding: 3rem 1rem;
  border: 1px dashed var(--est-bd); border-radius: 16px; background: var(--est-card);
}

:root[data-tema="escuro"] .gm {
  --gm-bg: #0f1620;
  --gm-card: #172231;
  --gm-card-2: #131d2a;
  --gm-border: #263341;
  --gm-ink: #e8eef6;
  --gm-muted: #94a2b3;
  --gm-chip-bg: #1c2836;
  --gm-chip-ink: #b9c4d2;
  --gm-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --gm-shadow-hover: 0 16px 44px rgba(0, 0, 0, .5);
}
:root[data-tema="escuro"] .est,
:root[data-tema="escuro"] .gm-estante { --est-card: #141c2b; --est-bd: #26324a; --est-ink: #e7edf6; --est-mut: #94a3b8; }
:root[data-tema="escuro"] .est-card__icon,
:root[data-tema="escuro"] .est-card__arrow {
  background: color-mix(in srgb, var(--c, #14b8a6) 26%, #0f172a);
}
:root[data-tema="escuro"] .gm-calc-disclaimer { background: #2a2013; border-color: #5b3a13; }
:root[data-tema="escuro"] .gm-calc-disclaimer strong { color: #f8c471; }

@media (max-width: 56rem) {
  .gm .gm-topo { min-height: auto; padding: .9rem 1rem; }
  .gm-topo-marca { margin-right: auto; }
}

@media (max-width: 40rem) {
  .gm-header-card { padding: 16px 18px; }
  .gm-header-title { font-size: 1.2rem; }
  .gm-row { gap: 12px; padding: 14px; }
  .gm-row-icon { width: 38px; height: 38px; font-size: 1.05rem; }
  .gm-row-desc { white-space: normal; }
  .est-grid { grid-template-columns: 1fr; }
  .est-card__name { font-size: 1.12rem; }
}

@media (max-width: 40rem) {
  :root { --t-xl: 1.65rem; }
  .gm-pagina { padding: 1.25rem 1rem 4rem; }
  .gm-folha { padding: 1.1rem; }
  .gm-topo-in { flex-wrap: wrap; gap: 0.5rem; }
  .gm-busca { order: 3; flex-basis: 100%; max-width: none; }
  .gm-rx-cabeca .gm-btn { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .gm *, .gm *::before { transition: none !important; animation: none !important; }
}

@media print {
  .gm-topo, .gm-btn, .gm-migalha { display: none !important; }
  body.gm { background: #fff; }
  .gm-folha, .gm-rx { border: none; }
}

/* --- Painel do paciente --------------------------------------------------- */
.gm-paciente { margin: 0 0 1rem; }
.gm-paciente fieldset {
  margin: 0; padding: 0.9rem 1rem 1rem;
  border: 1px solid var(--regra-forte); background: var(--papel);
}
.gm-paciente legend {
  padding: 0 0.4rem; margin-left: -0.4rem;
  font-size: var(--t-sm); font-weight: 600; color: var(--tinta);
}
.gm-paciente-ajuda { margin: 0 0 0.75rem; font-size: var(--t-sm); color: var(--tinta-2); max-width: 60ch; }
.gm-paciente-campos { display: flex; flex-wrap: wrap; align-items: end; gap: 0.75rem; }
.gm-paciente-campos label { display: block; }
.gm-paciente-campos span { display: block; font-size: var(--t-xs); color: var(--tinta-2); margin-bottom: 0.2rem; }
.gm-paciente-campos input {
  width: 7rem; padding: 0.4rem 0.55rem; color: var(--tinta);
  font: 500 var(--t-base)/1.3 var(--mono);
  background: var(--papel-alto); border: 1px solid var(--regra-forte); border-radius: var(--raio);
}

/* Item cuja dose já foi calculada: a barra do receituário ganha corpo. */
.gm-rx-item.tem-dose { border-left-width: 6px; background: var(--papel); }

.gm-rx-calc {
  margin: 0.35rem 0 0; font-size: var(--t-xs); font-family: var(--mono);
  color: var(--tinta-2);
}
.gm-rx-calc::before { content: '= '; }
.gm-rx-alerta {
  margin: 0.45rem 0 0; padding: 0.4rem 0.6rem;
  border-left: 3px solid var(--alerta); background: var(--papel);
  font-size: var(--t-sm); color: var(--tinta-2);
}
.gm-rx-obs { font-size: var(--t-sm); margin-top: 0.5rem; color: var(--tinta-2); }
.gm-rx-nome a { color: inherit; text-decoration: none; }
.gm-rx-nome a:hover { color: var(--azul); text-decoration: underline; }

@media (max-width: 40rem) {
  .gm-paciente-campos input { width: 100%; }
  .gm-paciente-campos label { flex: 1 1 8rem; }
}

/* `gm-ajuda` continua em uso pelo painel do paciente e pelos materiais; o
   resto do bloco de calculadora saiu junto com a tela antiga. */
.gm-ajuda { display: block; margin-top: 0.2rem; font-size: var(--t-xs); color: var(--tinta-2); }

/* --- Resultado (calculadora e fluxograma) --------------------------------- */
.gm-resultado {
  --tom: var(--regra-forte);
  margin-top: var(--gap); padding: 1.1rem 1.25rem;
  background: var(--papel); border: 1px solid var(--regra);
  border-left: 4px solid var(--tom);
}
.gm-resultado.tom-ok      { --tom: var(--ok); }
.gm-resultado.tom-atencao { --tom: var(--alerta); }
.gm-resultado.tom-grave   { --tom: var(--grave); }
.gm-resultado.tom-info    { --tom: var(--azul); }

.gm-resultado-valor {
  margin: 0; font-family: var(--mono); font-size: var(--t-md);
  font-weight: 500; color: var(--tinta);
}
.gm-resultado-nome { margin: 0 0 0.35rem; font-size: var(--t-lg); color: var(--tom); }
.gm-resultado-leitura { margin: 0.35rem 0 0; color: var(--tinta); font-weight: 500; }
.gm-resultado-conduta { margin-top: 0.8rem; font-size: var(--t-sm); }
.gm-resultado-fonte {
  margin: 0.9rem 0 0; padding-top: 0.6rem; border-top: 1px solid var(--regra);
  font-size: var(--t-xs); color: var(--tinta-3);
}
.gm-resultado-erro { margin: 0; color: var(--tinta); }
.gm-resultado table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.gm-resultado th, .gm-resultado td { border: 1px solid var(--regra); padding: 0.35rem 0.5rem; text-align: left; }

.gm-calculos {
  list-style: none; margin: 0.75rem 0 0; padding: 0.6rem 0.8rem;
  background: var(--papel-alto); border: 1px dashed var(--regra-forte);
  font-family: var(--mono); font-size: var(--t-sm);
}
.gm-calculos li + li { margin-top: 0.3rem; }

.gm-bloco { margin-top: 1.1rem; }
.gm-bloco h3 {
  font-size: var(--t-sm); margin: 0 0 0.35rem;
  padding-bottom: 0.25rem; border-bottom: 1px solid var(--regra);
}
.gm-bloco .gm-prosa { font-size: var(--t-sm); }

/* --- Fluxograma: painel, trilha, passo e resultado ------------------------
   Uma pergunta por tela. Passo e resultado ocupam o mesmo lugar e nunca
   aparecem juntos: sempre há exatamente uma coisa pedindo atenção.        */

/* Regra do sistema para TODO fieldset da área, não só os que eu converti.
   Sem `border`, não existe o entalhe onde o <legend> se encaixa, e ele volta
   a fluir como bloco normal. A moldura vem de box-shadow inset. */
.gm fieldset {
  border: 0; margin: 0; padding: var(--gb-e-4);
  background: var(--papel-alto);
  box-shadow: inset 0 0 0 1px var(--regra);
  border-radius: var(--raio);
}
.gm fieldset > legend {
  display: block; float: none; width: auto; padding: 0;
  margin: 0 0 var(--gb-e-2);
  font-family: var(--display); font-weight: 700; font-size: var(--t-sm);
  color: var(--tinta);
}

/* --- Grupo de campos ------------------------------------------------------
   Componente único para bloco de campos com rótulo. Nada de <fieldset> com
   <legend>: o legend se apoia EM CIMA da borda e vaza da caixa. Aqui é uma
   div com role="group" + aria-labelledby, mesma semântica, sem a surpresa. */
.gm-grupo-campos {
  padding: var(--gb-e-4);
  background: var(--papel-alto); border: 1px solid var(--regra);
  border-radius: var(--raio);
}
.gm-grupo-titulo {
  margin: 0 0 var(--gb-e-1);
  font-family: var(--display); font-weight: 700; font-size: var(--t-sm);
  color: var(--tinta);
}

/* Painel do paciente — fica no topo e não some: dá para digitar o peso
   depois de já ter chegado ao resultado, e as doses refazem sozinhas. */
.gm-paciente { margin-top: var(--gb-e-3); }
.gm-paciente-ajuda {
  display: flex; align-items: center; gap: 0.4rem; margin: 0;
  font-size: var(--t-sm); color: var(--tinta-3); max-width: 22rem;
}
/* O erro acompanha o campo, não a largura da caixa. */
.gm-paciente .gm-erro { flex: 1 0 100%; margin: var(--gb-e-3) 0 0; max-width: 32rem; }
/* Uma linha só: campos à esquerda, a dica à direita. O painel fica no topo
   durante todo o percurso, então precisa ocupar pouca altura. */
.gm-paciente .gm-grupo-campos {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--gb-e-4); flex-wrap: wrap;
}
.gm-paciente-campos {
  display: flex; flex-wrap: wrap; gap: var(--gb-e-3); align-items: flex-end;
}
.gm-paciente-campos label { flex: 0 1 10rem; }
.gm-paciente-campos span {
  letter-spacing: .06em; text-transform: uppercase;
}
.gm-paciente-campos label { display: flex; flex-direction: column; gap: 0.3rem; }
.gm-paciente-campos span {
  font-size: var(--t-xs); font-weight: 600; color: var(--tinta-2);
}
.gm-paciente-campos input {
  width: 100%; padding: 0.6rem 0.75rem;
  font: 500 var(--t-base)/1.3 var(--mono); color: var(--tinta);
  background: var(--papel-alto); border: 1px solid var(--regra-forte);
  border-radius: var(--raio-sm);
  transition: border-color var(--gb-transicao), box-shadow var(--gb-transicao);
}
.gm-paciente-campos input:focus {
  outline: 0; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(47, 107, 90, .16);
}

/* Cabeçalho e intro do fluxograma em cartão: o título deixa de flutuar no
   fundo e a página ganha um começo claro. */
.gm-fx-cabeca {
  padding: var(--gb-e-4) var(--gb-e-5);
  background: var(--papel-alto); border: 1px solid var(--regra);
  border-radius: var(--raio); box-shadow: var(--sombra-sm);
  margin-bottom: var(--gb-e-3);
}
.gm-fx-cabeca .gm-titulo { font-size: var(--t-lg); max-width: none; }
.gm-fx-cabeca .gm-sub { margin-top: 0.3rem; font-size: var(--t-sm); max-width: 90ch; }

.gm-fx-intro {
  padding: var(--gb-e-4) var(--gb-e-5);
  background: var(--papel-alto); border: 1px solid var(--regra);
  border-radius: var(--raio); margin-bottom: var(--gb-e-3);
  font-size: var(--t-sm);
}
.gm-fx-intro .gm-prosa { max-width: none; }

/* Barra do fluxo: onde estou, por onde passei, e como voltar. */
.gm-fx-barra {
  display: flex; align-items: center; gap: var(--gb-e-3);
  flex-wrap: wrap; margin: var(--gb-e-4) 0 var(--gb-e-3);
}
.gm-fx-passo {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.85rem; border-radius: 999px;
  background: var(--navy); color: #fff;
  font-family: var(--display); font-weight: 700; font-size: var(--t-xs);
}
.gm-fx-barra-acoes { margin-left: auto; display: flex; gap: var(--gb-e-2); }
.gm-btn-sm { padding: 0.42rem 0.85rem; font-size: var(--t-xs); }
.gm-btn:disabled { opacity: .45; cursor: not-allowed; }
.gm-btn:disabled:hover { filter: none; box-shadow: none; background: none; }

.gm-trilha { display: flex; flex-wrap: wrap; gap: var(--gb-e-2); margin: 0; }
.gm-trilha-item {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.25rem 0.7rem; border-radius: 999px;
  font-size: var(--t-xs); color: var(--tinta-2);
  background: var(--mesa); border: 1px solid var(--regra);
}
.gm-trilha-item strong { color: var(--tinta); font-weight: 600; }

/* --- Canvas: a árvore desenhada -------------------------------------------
   As ligações são linhas de 2px em ::before/::after sobre uma pilha vertical.
   Não há motor de grafo: o navegador posiciona, o CSS liga.               */
/* Rolagem interna SIM — é ela que deixa rever as perguntas anteriores e dá a
   sensação de percorrer um fluxo. O que não pode é prender: sem
   `overscroll-behavior: contain`, ao chegar no fim a rolagem passa para a
   página e ninguém fica preso na caixa. */
.gm-fx-canvas {
  position: relative; overflow: auto;
  height: clamp(26rem, 66vh, 46rem);
  border: 1px solid var(--regra); border-radius: var(--raio);
  background-color: var(--mesa);
  background-image: radial-gradient(var(--regra-forte) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
}
.gm-fx-canvas { cursor: grab; }
.gm-fx-canvas.arrastando { cursor: grabbing; }
.gm-fx-cena {
  min-height: 100%; display: flex; flex-direction: column; align-items: center;
  padding: var(--gb-e-6) var(--gb-e-5) var(--gb-e-7);
}

.gm-fx-liga { width: 2px; height: 1.5rem; background: var(--regra-forte); flex: 0 0 auto; }

.gm-fx-no {
  width: min(92%, 33rem); padding: var(--gb-e-4);
  background: var(--papel-alto); border: 1.5px solid var(--regra-forte);
  border-radius: var(--raio); box-shadow: var(--sombra-sm);
}
.gm-fx-no.feito { opacity: .78; }
.gm-fx-no.agora { border-color: var(--teal); box-shadow: 0 10px 28px -18px var(--teal); }
.gm-fx-k {
  margin: 0; font-family: var(--display); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3);
}
.gm-fx-agora {
  margin-left: 0.4rem; padding: 0.05rem 0.5rem; border-radius: 999px;
  background: var(--teal); color: #fff; letter-spacing: .04em;
}
.gm-fx-chip {
  display: inline-block; margin: var(--gb-e-2) 0 0;
  padding: 0.15rem 0.65rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--teal) 40%, transparent);
  background: color-mix(in srgb, var(--teal) 9%, transparent);
  font-family: var(--display); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--teal);
}
.gm-fx-q {
  margin: 0.35rem 0 0; font-family: var(--display); font-weight: 700;
  font-size: var(--t-md); line-height: 1.3; color: var(--tinta);
}
/* Critérios de apoio numa caixa própria: separa o que é pergunta do que é
   material de consulta. */
/* Critérios inteiros, sem corte: quem rola é o canvas. */
.gm-fx-apoio {
  margin-top: var(--gb-e-3); padding: var(--gb-e-3);
  border: 1px solid var(--regra); border-radius: var(--raio-sm);
  background: var(--mesa);
  font-size: var(--t-sm); color: var(--tinta-2);
}
.gm-fx-apoio :is(h1,h2,h3,h4,h5,h6) { font-size: var(--t-sm); color: var(--tinta); }
.gm-fx-escolha {
  margin: var(--gb-e-3) 0 0; padding-top: var(--gb-e-2);
  border-top: 1px solid var(--regra);
  font-size: var(--t-xs); font-style: italic; color: var(--tinta-3);
}
.gm-fx-resp {
  display: inline-flex; align-items: center; gap: 0.35rem;
  margin: var(--gb-e-2) 0 0; padding: 0.2rem 0.6rem; border-radius: 999px;
  font-size: var(--t-sm); font-weight: 600;
  background: color-mix(in srgb, var(--tom, var(--tinta-3)) 12%, transparent);
  color: var(--tom, var(--tinta-2));
}
.gm-fx-resp.tom-ok      { --tom: var(--ok); }
.gm-fx-resp.tom-atencao { --tom: var(--alerta); }
.gm-fx-resp.tom-grave   { --tom: var(--grave); }
.gm-fx-calc {
  margin: var(--gb-e-3) 0 0; padding: var(--gb-e-3); list-style: none;
  border: 1px dashed var(--regra-forte); border-radius: var(--raio-sm);
  background: var(--mesa); font-family: var(--mono); font-size: var(--t-sm); line-height: 1.7;
}

/* Ramificação: haste vertical + barra horizontal ligando as opções. */
.gm-fx-ramo {
  position: relative; display: flex; gap: 1.6rem; justify-content: center;
  flex-wrap: wrap; padding-top: 1.75rem; width: min(96%, 46rem);
}
.gm-fx-ramo::before {
  content: ''; position: absolute; top: 0; left: 50%; width: 2px; height: 0.9rem;
  background: var(--regra-forte); transform: translateX(-50%);
}
.gm-fx-ramo::after {
  content: ''; position: absolute; top: 0.9rem; left: 26%; right: 26%; height: 2px;
  background: var(--regra-forte);
}
.gm-fx-ramo.unico::after { display: none; }
.gm-fx-ramo:not(.unico) .gm-fx-opcao::before {
  content: ''; position: absolute; top: -0.85rem; left: 50%; width: 2px; height: 0.85rem;
  background: var(--regra-forte); transform: translateX(-50%);
}

.gm-fx-opcao {
  --tom: var(--regra-forte);
  position: relative; display: flex; align-items: center; gap: 0.6rem;
  min-width: 11rem; max-width: 16rem; text-align: left; cursor: pointer;
  padding: var(--gb-e-3) var(--gb-e-4);
  border: 2px solid var(--tom); border-radius: var(--raio);
  background: color-mix(in srgb, var(--tom) 7%, var(--papel-alto));
  color: var(--tinta);
  font-family: var(--display); font-weight: 700; font-size: var(--t-sm);
  transition: transform var(--gb-transicao), box-shadow var(--gb-transicao);
}
.gm-fx-opcao:hover, .gm-fx-opcao:focus-visible {
  transform: translateY(-2px); box-shadow: 0 10px 22px -14px rgba(0, 21, 37, .6);
}
.gm-fx-opcao.tom-ok      { --tom: var(--ok); }
.gm-fx-opcao.tom-atencao { --tom: var(--alerta); }
.gm-fx-opcao.tom-grave   { --tom: var(--grave); }
.gm-fx-letra {
  display: grid; place-items: center; flex: 0 0 1.6rem;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--tom); color: #fff; font-size: var(--t-xs);
}
.gm-fx-rot small {
  display: block; margin-top: 0.1rem;
  font-family: var(--sans); font-weight: 400; font-size: var(--t-xs); color: var(--tinta-2);
}

/* Nó de conduta dentro do canvas — o detalhe fica no painel abaixo. */
.gm-fx-resnode {
  width: min(92%, 29rem); padding: var(--gb-e-4);
  border-radius: var(--raio); color: #fff;
  background: var(--tom, var(--teal));
  box-shadow: 0 14px 32px -18px rgba(0, 21, 37, .8);
}
.gm-fx-resnode.tom-ok      { --tom: var(--teal); }
.gm-fx-resnode.tom-atencao { --tom: #8A6712; }
.gm-fx-resnode.tom-grave   { --tom: var(--grave); }
.gm-fx-resnode.tom-info    { --tom: var(--navy-2); }
.gm-fx-tag {
  margin: 0; font-family: var(--display); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; opacity: .85;
}
.gm-fx-resnode h3 { margin: 0.2rem 0 0.25rem; font-size: var(--t-lg); }
.gm-fx-resnode p { margin: 0; font-size: var(--t-sm); opacity: .95; }

/* Dentro do canvas, no canto — fora do fluxo do texto que vem depois. */
.gm-fx-zoom {
  position: absolute; left: 0.9rem; bottom: 0.9rem; z-index: 2;
  display: flex; gap: 3px;
}
.gm-fx-zoom button {
  width: 2.1rem; height: 2.1rem; display: grid; place-items: center;
  border: 1px solid var(--regra-forte); border-radius: var(--raio-sm);
  background: var(--papel-alto); color: var(--tinta-2);
  font-size: 1rem; font-weight: 700; cursor: pointer;
  transition: border-color var(--gb-transicao), color var(--gb-transicao);
}
.gm-fx-zoom button:hover { border-color: var(--teal); color: var(--teal); }

.gm-fx-dica {
  margin: var(--gb-e-2) 0 0; text-align: center;
  font-size: var(--t-xs); color: var(--tinta-3);
}

@media (prefers-reduced-motion: reduce) {
  .gm-fx-cena { transition: none; }
  .gm-fx-opcao:hover { transform: none; }
}

/* Resultado — troca a linguagem visual: sai o cartão, entra a tarja de
   severidade na borda esquerda. */
.gm-resultado:not([hidden]) {
  margin-top: var(--gb-e-4); padding: var(--gb-e-5);
  background: var(--papel-alto);
  border: 1px solid var(--regra); border-left: 5px solid var(--tom, var(--regra-forte));
  border-radius: var(--raio);
}
.gm-resultado.tom-ok      { --tom: var(--ok); }
.gm-resultado.tom-atencao { --tom: var(--alerta); }
.gm-resultado.tom-grave   { --tom: var(--grave); }
.gm-resultado.tom-info    { --tom: var(--teal); }
.gm-resultado-valor {
  margin: 0; font-family: var(--mono); font-size: var(--t-lg); color: var(--tinta);
}
.gm-resultado-leitura {
  margin: var(--gb-e-2) 0 0; font-family: var(--display); font-weight: 700;
  font-size: var(--t-md); color: var(--tom, var(--tinta));
}
.gm-resultado-conduta { margin-top: var(--gb-e-3); }
.gm-resultado-fonte {
  margin: var(--gb-e-3) 0 0; font-size: var(--t-xs); color: var(--tinta-3);
}
/* Caixa das doses: mono porque alinha número, tracejada porque foi
   calculada agora — não é texto fixo. */
.gm-resultado-calculos {
  margin-top: var(--gb-e-3); padding: var(--gb-e-3) var(--gb-e-4);
  border: 1px dashed var(--regra-forte); border-radius: var(--raio-sm);
  background: var(--mesa);
  font-family: var(--mono); font-size: var(--t-sm); line-height: 1.7;
  list-style: none;
}

@media (max-width: 40rem) {
  .gm-opcoes { flex-direction: column; }
  .gm-opcao { min-width: 0; max-width: none; width: 100%; }
  .gm-passo:not(:empty), .gm-resultado:not([hidden]) { padding: var(--gb-e-4); }
}

/* --- Tabela de faixas ----------------------------------------------------- */
.gm-tabela { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.gm-tabela th, .gm-tabela td {
  border-bottom: 1px solid var(--regra); padding: 0.45rem 0.6rem;
  text-align: left; vertical-align: top;
}
.gm-tabela th { width: 8rem; font-weight: 500; color: var(--tinta-2); white-space: nowrap; }
.gm-tabela tr { border-left: 3px solid transparent; }
.gm-tabela .faixa-success { border-left-color: var(--ok); }
.gm-tabela .faixa-warning { border-left-color: var(--alerta); }
.gm-tabela .faixa-danger  { border-left-color: var(--grave); }

@media (max-width: 40rem) {
  .gm-opcao { flex-basis: 100%; }
}

/* --- Terapia Intensiva: bólus e BIC --------------------------------------- */
.gm-ti-itens { display: grid; gap: 1px; background: var(--regra); border: 1px solid var(--regra); }
.gm-ti-item { padding: 1rem 1.15rem; background: var(--papel); }
.gm-ti-cabeca {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.gm-ti-cabeca h3 { font-size: var(--t-base); margin: 0; }
.gm-ti-faixa { font-family: var(--mono); font-size: var(--t-xs); color: var(--tinta-2); }
.gm-ti-apres, .gm-ti-diluicao {
  margin: 0.25rem 0 0; font-size: var(--t-sm); color: var(--tinta-2);
}
.gm-ti-diluicao { font-family: var(--mono); }

.gm-ti-resultado {
  margin-top: 0.75rem; padding: 0.65rem 0.85rem;
  background: var(--papel-alto); border-left: 3px solid var(--regra-forte);
}
.gm-ti-item.tem-valor .gm-ti-resultado { border-left-color: var(--azul); }
.gm-ti-rotulo {
  display: block; font-size: var(--t-xs); color: var(--tinta-3);
  letter-spacing: 0.03em;
}
.gm-ti-valor {
  display: block; margin-top: 0.15rem;
  font-family: var(--mono); font-size: var(--t-md); color: var(--tinta);
}
.gm-ti-item.tem-valor .gm-ti-valor { color: var(--azul); }
.gm-ti-detalhe {
  display: block; margin-top: 0.3rem;
  font-family: var(--mono); font-size: var(--t-xs); color: var(--tinta-2);
}
.gm-ti-dica, .gm-ti-obs {
  margin: 0.5rem 0 0; font-size: var(--t-sm); color: var(--tinta-2); max-width: 70ch;
}

/* --- Antibióticos por sistema --------------------------------------------- */
.gm-atb {
  margin-top: var(--gap); padding: 1.15rem 1.25rem;
  background: var(--papel); border: 1px solid var(--regra);
}
.gm-atb-cabeca {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.gm-atb-cabeca h2 { font-size: var(--t-md); margin: 0; max-width: 48ch; }
.gm-atb-meta {
  margin: 0.35rem 0 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1rem;
  font-size: var(--t-xs); color: var(--tinta-2);
}
.gm-atb-esquema { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--regra); }
.gm-atb-esquema:first-child { border-top: 0; padding-top: 0; }
.gm-atb-esquema h3 { font-size: var(--t-sm); margin: 0 0 0.5rem; font-weight: 600; }
.gm-atb-esquema h3 small { font-weight: 400; color: var(--tinta-2); }
.gm-atb-ordinal {
  display: inline-block; margin-right: 0.4rem; padding: 0.02rem 0.35rem;
  border: 1px solid var(--regra-forte); border-radius: 2px;
  font-size: var(--t-xs); font-weight: 400; color: var(--tinta-2);
}
.gm-atb-farmacos { list-style: none; margin: 0; padding: 0; }
.gm-atb-farmacos li {
  padding: 0.4rem 0 0.4rem 0.75rem; border-left: 2px solid var(--regra);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem;
}
.gm-atb-resumo { font-family: var(--mono); font-size: var(--t-sm); color: var(--tinta-2); }
.gm-atb-dose {
  font-family: var(--mono); font-size: var(--t-sm); font-weight: 500; color: var(--azul);
}
.gm-atb-dose em { font-style: normal; font-weight: 400; color: var(--tinta-2); }
.gm-atb-conta { font-family: var(--mono); font-size: var(--t-xs); color: var(--tinta-3); }
.gm-atb-pendente { font-size: var(--t-xs); color: var(--alerta); }
.gm-atb-nota { font-size: var(--t-xs); color: var(--tinta-2); }
.gm-atb-duracao, .gm-atb-obs {
  margin: 0.6rem 0 0; font-size: var(--t-sm); color: var(--tinta-2);
}
.gm-lista-simples { list-style: none; margin: 0.5rem 0 0; padding: 0; font-size: var(--t-sm); }
.gm-lista-simples li {
  padding: 0.35rem 0.5rem; border-left: 3px solid transparent;
  display: flex; flex-wrap: wrap; gap: 0.25rem 1rem;
}
.gm-lista-simples li + li { border-top: 1px solid var(--regra); }
.gm-faixa-ativa { border-left-color: var(--azul); background: var(--papel-alto); }

/* --- Variante: guias de prescrição ---------------------------------------- */
.gm-secao-rx { margin-top: 1.5rem; }
.gm-secao-rx .gm-rx { margin-top: 0; }
/* Guias de prescrição: a página já é o cartão, e o editor fica direto sob as
   abas — sem uma segunda caixa em volta. */
.gm-painel > .gm-secao-rx--editor {
  padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
}
.gm-secao-rx--editor .gm-editor { margin-top: 0; }

.gm-detalhes {
  margin-top: 2rem; border-top: 1px solid var(--regra-forte);
}
.gm-detalhes > summary {
  cursor: pointer; padding: 0.75rem 0; list-style: none;
  font-size: var(--t-sm); font-weight: 500; color: var(--tinta-2);
  display: flex; align-items: center; gap: 0.5rem;
}
.gm-detalhes > summary::-webkit-details-marker { display: none; }
.gm-detalhes > summary::before { content: '+'; font-family: var(--mono); color: var(--tinta-3); }
.gm-detalhes[open] > summary::before { content: '−'; }
.gm-detalhes > summary:hover { color: var(--tinta); }

/* --- Variante: dermatoses (imagem primeiro) -------------------------------- */
.gm-derma {
  display: grid; gap: 1.75rem; margin-top: 1rem;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  align-items: start;
}
.gm-derma-capa { margin: 0; }
.gm-derma-capa img {
  display: block; width: 100%; border: 1px solid var(--regra-forte); background: var(--papel-alto);
}
.gm-derma-capa figcaption {
  margin-top: 0.4rem; font-size: var(--t-sm); color: var(--tinta-2);
}
.gm-derma-texto .gm-titulo { margin-top: 0; }
.gm-derma-galeria {
  display: grid; gap: 1rem; margin-top: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}
.gm-derma-galeria figure { margin: 0; }
.gm-derma-galeria img { display: block; width: 100%; border: 1px solid var(--regra); }
.gm-derma-galeria figcaption { margin-top: 0.3rem; font-size: var(--t-xs); color: var(--tinta-2); }

/* --- Variante: SOAP -------------------------------------------------------- */
.gm-soap {
  display: grid; gap: 1.75rem; margin-top: 1.5rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  align-items: start;
}
.gm-soap-nota {
  padding: 1.15rem 1.25rem; background: var(--papel);
  border: 1px solid var(--regra-forte);
}
.gm-soap-nota .gm-rx-cabeca {
  padding: 0; border: 0; background: none; margin-bottom: 0.25rem;
}
.gm-soap-nota h2 { font-size: var(--t-md); margin: 0; }
.gm-soap-campo { display: block; margin-top: 1rem; }
.gm-soap-campo span {
  display: block; margin-bottom: 0.25rem;
  font-size: var(--t-sm); font-weight: 600; color: var(--tinta);
}
.gm-soap-campo textarea {
  width: 100%; padding: 0.55rem 0.65rem; resize: vertical;
  font: 400 var(--t-sm)/1.6 var(--mono);
  color: var(--tinta); background: var(--papel-alto);
  border: 1px solid var(--regra-forte); border-radius: var(--raio);
}
.gm-soap-apoio {
  position: sticky; top: 4rem;
  padding: 1.15rem 1.25rem; background: var(--papel-alto);
  border: 1px solid var(--regra); max-height: calc(100dvh - 6rem); overflow-y: auto;
}
.gm-soap-apoio h2 { font-size: var(--t-sm); margin: 0 0 0.75rem; color: var(--tinta-2); }
.gm-soap-apoio .gm-prosa { font-size: var(--t-sm); }
.gm-soap-apoio h3 { font-size: var(--t-sm); margin-top: 1.1rem; }

@media (max-width: 55rem) {
  .gm-derma, .gm-soap { grid-template-columns: 1fr; }
  .gm-derma-capa { max-width: 22rem; }
  .gm-soap-apoio { position: static; max-height: none; }
}

/* --- Materiais impressos: formulário + prévia do documento ---------------- */
.gm-material {
  display: grid; gap: 1.75rem; margin-top: 1.25rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  align-items: start;
}
.gm-material-form .gm-campo { margin-bottom: 1rem; display: block; }
.gm-material-form .gm-campo > span {
  display: block; margin-bottom: 0.2rem; font-size: var(--t-xs); color: var(--tinta-2);
}
.gm-material-form input, .gm-material-form textarea, .gm-material-form select {
  width: 100%; padding: 0.45rem 0.55rem; color: var(--tinta);
  font: 400 var(--t-sm)/1.5 var(--sans);
  background: var(--papel-alto); border: 1px solid var(--regra-forte); border-radius: var(--raio);
}
.gm-material-form textarea { resize: vertical; }
.gm-exames-grupo { margin-bottom: 1rem; }
.gm-exames-grupo h4 {
  font-size: var(--t-xs); color: var(--tinta-2); margin: 0 0 0.4rem;
  padding-bottom: 0.2rem; border-bottom: 1px solid var(--regra);
}
.gm-exames-grupo .gm-checks { gap: 0.4rem 1rem; }
.gm-exames-grupo .gm-check { font-size: var(--t-sm); }

/* A prévia é o papel: o que sai na impressora. */
.gm-doc {
  position: sticky; top: 4rem;
  padding: 2rem 1.75rem; background: #fff; color: #16202a;
  border: 1px solid var(--regra-forte);
  font-family: var(--sans); font-size: 0.9rem; line-height: 1.7;
}
.gm-doc-titulo {
  margin: 0 0 1.25rem; padding-bottom: 0.6rem;
  border-bottom: 2px solid #16202a;
  font-size: 1rem; letter-spacing: 0.02em; text-align: center;
}
.gm-doc-corpo p { margin: 0 0 0.8rem; text-align: justify; }
.gm-doc-corpo h3 {
  font-size: 0.85rem; margin: 1rem 0 0.3rem;
  padding-bottom: 0.15rem; border-bottom: 1px solid #d6dcd6;
}
.gm-doc-corpo [data-mostra] { white-space: pre-wrap; }
.gm-doc-exames { margin: 0.4rem 0 0; padding-left: 1.4rem; }
.gm-doc-exames li { margin-bottom: 0.2rem; }
.gm-doc-vazio { color: #8a959d; list-style: none; margin-left: -1.4rem; }
.gm-doc-nota { margin-top: 1rem; font-size: 0.85rem; }

.gm-doc-carimbo { margin-top: 2.5rem; }
.gm-doc-data { text-align: right; font-size: 0.85rem; margin-bottom: 2rem; }
.gm-doc-assinatura { text-align: center; display: flex; flex-direction: column; align-items: center; }
.gm-doc-linha {
  display: block; width: 16rem; max-width: 100%;
  border-top: 1px solid #16202a; margin-bottom: 0.35rem;
}
.gm-doc-assinatura strong { font-size: 0.9rem; }
.gm-doc-assinatura span { font-size: 0.8rem; }
.gm-doc-endereco { color: #55646e; }

@media (max-width: 62rem) {
  .gm-material { grid-template-columns: 1fr; }
  .gm-doc { position: static; }
}

@media print {
  .gm-topo, .gm-migalha, .gm-painel-cabeca, .gm-material-form, .gm-aviso { display: none !important; }
  .gm-material { display: block; }
  .gm-pagina { padding: 0; max-width: none; border: 0; border-radius: 0; background: none; }
  .gm-doc {
    position: static; border: 0; padding: 0;
    font-size: 11pt; color: #000; background: #fff;
  }
  .gm-doc-carimbo { margin-top: 4rem; }
}

/* --- Início: blocos de atalho --------------------------------------------- */
.gm-atalhos {
  display: grid; gap: 1.75rem; margin-top: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.gm-atalhos h2 {
  font-size: var(--t-sm); font-weight: 600; color: var(--tinta-2);
  padding-bottom: 0.4rem; border-bottom: 2px solid var(--regra-forte);
}
.gm-atalhos .gm-lista { margin-top: 0; }
.gm-atalhos p { margin: 0.75rem 0 0; }

/* --- Aviso de erro no conteúdo -------------------------------------------- */
.gm-feedback { margin-top: 2rem; }
.gm-feedback summary {
  cursor: pointer; list-style: none; padding: 0.5rem 0;
  font-size: var(--t-sm); color: var(--tinta-2);
  display: flex; align-items: center; gap: 0.5rem;
}
.gm-feedback summary::-webkit-details-marker { display: none; }
.gm-feedback summary::before { content: '?'; font-family: var(--mono); color: var(--tinta-3); }
.gm-feedback summary:hover { color: var(--tinta); }
.gm-feedback-form {
  padding: 1rem 1.15rem; background: var(--papel); border: 1px solid var(--regra);
  max-width: 46rem;
}
.gm-feedback-form .gm-campo span {
  display: block; margin-bottom: 0.3rem; font-size: var(--t-sm); color: var(--tinta-2);
}
.gm-feedback-form textarea {
  width: 100%; padding: 0.55rem 0.65rem; resize: vertical;
  font: 400 var(--t-sm)/1.5 var(--sans); color: var(--tinta);
  background: var(--papel-alto); border: 1px solid var(--regra-forte); border-radius: var(--raio);
}

/* ==========================================================================
   Início (dashboard) — reprodução do dashboard.html da origem.

   Valores resolvidos da cascata da origem (publico.css + guia-theme.css, onde
   o tema vence). Grade nos pontos do Bootstrap de lá: md 768px, xl 1200px.
   Classes com o mesmo nome da origem, para conferir lado a lado.
   ========================================================================== */
.gm-dashboard { max-width: 1120px; margin: 0 auto; padding-bottom: .5rem; line-height: 1.5; }
.gm .gm-dashboard a { text-decoration: none; }

/* --- saudação + busca --- */
.gm-dashboard-hero {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: center;
  padding: .25rem 0 1.1rem;
}
@media (min-width: 1200px) {
  .gm-dashboard-hero { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1.5rem; }
}
.gm .gm-dashboard-title {
  color: var(--gm-ink); font-size: clamp(1.65rem, 2.4vw, 2.15rem); font-weight: 800;
  letter-spacing: -.025em; margin: 0 0 .2rem; line-height: 1.15;
}
.gm-greet-name {
  background: linear-gradient(90deg, #2d6df6, #5b8dff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.gm-dashboard-subtitle { color: var(--gm-muted); font-size: 1rem; font-weight: 500; margin: 0; }

.gm-dashboard-search {
  position: relative; display: flex; align-items: center; gap: .65rem;
  background: #fff; border: 1px solid #e8ecf4; border-radius: 999px;
  box-shadow: 0 10px 28px rgba(17, 38, 84, .06);
  padding: .55rem .55rem .55rem 1.15rem;
}
/* o campo perde o contorno; quem mostra o foco é a pílula inteira */
.gm-dashboard-search:focus-within {
  border-color: #c9d6f5;
  box-shadow: 0 10px 28px rgba(17, 38, 84, .06), 0 0 0 3px rgba(45, 109, 246, .14);
}
.gm-dashboard-search > .bi { color: #9aa6bd; font-size: 1rem; }
.gm-dashboard-search input {
  flex: 1 1 auto; min-width: 0; border: 0; background: transparent; box-shadow: none;
  padding: .375rem 0; font: inherit; font-size: .95rem; line-height: 1.5; color: var(--gm-ink);
}
.gm .gm-dashboard-search input:focus,
.gm .gm-dashboard-search input:focus-visible { outline: none; }
.gm-dashboard-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.gm-dashboard-search-btn {
  flex: 0 0 auto; background: #6b7280; border: 0; color: #fff; border-radius: 999px;
  font: inherit; font-weight: 700; font-size: .9rem; line-height: 1.5;
  padding: .55rem 1.15rem; cursor: pointer;
}
.gm-dashboard-search-btn:hover { background: #4b5563; }

/* --- atalhos por cenário --- */
.gm-modules-group {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem;
  margin: .35rem 0 1.75rem;
}
@media (min-width: 768px)  { .gm-modules-group { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .gm-modules-group { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* --c = tom do cenário (traço, linha, hover); --t = "papel" que entra no hover */
.gm .gm-module-card {
  --c: #2f6bed; --t: #eaf1ff;
  position: relative; display: flex; flex-direction: row; align-items: flex-start; gap: .9rem;
  min-height: 104px; height: 100%;
  background: var(--gm-card); border: 1px solid var(--gm-border); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(20, 35, 60, .045);
  padding: 1.05rem 1.05rem 1rem; overflow: hidden; color: var(--gm-ink);
  transition: transform .18s ease, border-color .18s ease;
}
.gm-module-card > * { position: relative; z-index: 1; }
.gm-module-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(105deg, var(--t) 0%, transparent 58%);
  opacity: 0; transition: opacity .2s ease;
}
/* seta que surge no hover, desenhada com bordas */
.gm-module-card::after {
  content: ""; position: absolute; top: 1.15rem; right: 1.05rem; z-index: 1;
  width: 7px; height: 7px;
  border-top: 2px solid var(--c); border-right: 2px solid var(--c);
  transform: rotate(45deg) translateX(-3px);
  opacity: 0; transition: opacity .18s ease, transform .18s ease;
}
.gm .gm-module-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--c) 55%, var(--gm-border));
}
.gm-module-card:hover::before { opacity: 1; }
.gm-module-card:hover::after { opacity: 1; transform: rotate(45deg) translateX(0); }
.gm .gm-module-card:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; border-radius: 14px; }

.gm-module-card.gm-c-primary { --c: #2f6bed; --t: #eaf1ff; }
.gm-module-card.gm-c-success { --c: #1a9e6b; --t: #e6f7f0; }
.gm-module-card.gm-c-violet  { --c: #6d5cf0; --t: #efecfe; }
.gm-module-card.gm-c-warning { --c: #e2870c; --t: #fff2df; }
.gm-module-card.gm-c-info    { --c: #148aa8; --t: #e4f5fa; }
.gm-module-card.gm-c-danger  { --c: #e23b4e; --t: #ffe9ec; }

.gm-module-icon {
  width: 42px; height: 42px; min-width: 42px; flex: 0 0 42px;
  border-radius: 11px; font-size: 1.15rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--t); color: var(--c);
  border: 1px solid color-mix(in srgb, var(--c) 20%, transparent);
}
.gm-module-body {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: .28rem; padding-top: .05rem;
}
.gm-module-title {
  display: block; font-size: 1.02rem; font-weight: 650; color: var(--gm-ink);
  letter-spacing: -.015em; line-height: 1.22;
}
/* "linha do receituário" sob o título — cresce e ganha cor no hover */
.gm-module-title::after {
  content: ""; display: block; height: 2px; width: 20px; margin-top: 6px;
  border-radius: 2px; background: var(--gm-border);
  transition: width .22s ease, background .22s ease;
}
.gm-module-card:hover .gm-module-title::after { width: 38px; background: var(--c); }
.gm-module-desc {
  display: block; font-size: .875rem; color: var(--gm-muted);
  line-height: 1.45; font-weight: 450;
}

/* --- Seus Favoritos ---
   Cinzas #73809d e #8b96ae e o verde #2b9a63 da origem ficavam abaixo de 4,5:1;
   usam aqui o tom mais próximo que passa (#667390, #687390, #217a4a). */
.gm-fav-section { margin: .25rem 0 1.25rem; }
.gm-fav-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: .9rem;
}
.gm .gm-fav-title {
  margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--gm-ink);
  display: inline-flex; align-items: center; gap: .5rem; line-height: 1.2;
}
.gm-fav-title .bi { color: #e6a23c; font-size: 1rem; }
.gm .gm-fav-all {
  font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--gm-muted); display: inline-flex; align-items: center; gap: .25rem;
}
.gm .gm-fav-all:hover { color: var(--gm-blue); }
.gm-fav-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 1200px) {
  .gm-fav-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

.gm-resume-card {
  position: relative; display: flex; align-items: center; gap: 1rem; padding: 1.1rem;
  background: #fff; border: 1px solid #eef1f7; border-radius: 16px;
  box-shadow: 0 4px 18px rgba(17, 38, 84, .04); min-height: 108px;
}
.gm-resume-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; flex: 0 0 54px; border-radius: 16px;
  background: #eaf1ff; color: #2d6df6; font-size: 1.25rem;
}
.gm-resume-body { min-width: 0; width: 100%; }
.gm .gm-resume-title { display: block; color: #233255; font-weight: 800; margin-bottom: .25rem; }
/* o título é o link, e ele cobre o cartão inteiro */
.gm-resume-title::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.gm .gm-resume-title:focus-visible { outline: none; }
.gm-resume-title:focus-visible::after { outline: 2px solid #2d6df6; outline-offset: 2px; }
.gm-resume-subtitle { color: #667390; font-size: .92rem; margin-bottom: .8rem; }
.gm-resume-progress {
  display: flex; height: .42rem; overflow: hidden;
  background: #e8edf7; border-radius: .375rem;
}
.gm-resume-bar {
  display: block; height: 100%;
  background: linear-gradient(90deg, #2d6df6 0%, #4e8cff 100%);
  transition: width .6s ease;
}

.gm .gm-stat-strip {
  list-style: none; margin: 0; padding: .15rem 0;
  display: flex; flex-wrap: wrap; gap: .5rem; align-content: flex-start; height: 100%;
}
.gm-stat-chip {
  display: inline-flex; align-items: center; gap: .45rem; margin: 0;
  background: #fff; border: 1px solid #eef1f7; border-radius: 999px;
  color: #42506f; font-size: .78rem; font-weight: 700; padding: .45rem .75rem;
  box-shadow: 0 2px 8px rgba(17, 38, 84, .03);
}

/* --- Mais acessados + Ferramentas --- */
.gm-dashboard-paineis {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: .5rem;
}
@media (min-width: 1200px) {
  .gm-dashboard-paineis { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.gm-panel {
  background: #fff; border: 1px solid #eef1f7; border-radius: 16px;
  box-shadow: 0 4px 18px rgba(17, 38, 84, .04); padding: 1.4rem; height: 100%;
}
.gm .gm-panel-title { color: #1d2b4b; font-size: 1.15rem; font-weight: 800; margin: 0 0 .25rem; line-height: 1.2; }
.gm-panel-subtitle { color: #667390; font-size: .92rem; margin: 0 0 1rem; }
.gm-list-stack { display: grid; gap: .85rem; }
.gm .gm-list-row {
  display: flex; align-items: center; gap: .85rem;
  background: #fafbfe; border: 1px solid #eef1f7; border-radius: 18px;
  padding: .95rem 1rem; color: inherit;
  transition: transform .16s ease, box-shadow .16s ease;
}
.gm .gm-list-row:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(17, 38, 84, .07); }
.gm-list-row > * { min-width: 0; }
.gm-list-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 14px; font-size: 1.05rem;
}
.gm-list-body { min-width: 0; flex: 1 1 auto; }
.gm-list-body strong { display: block; color: #233255; font-weight: 700; margin-bottom: .12rem; }
.gm-list-body small { display: block; color: #667390; font-size: .875em; }
.gm-list-badge {
  display: inline-flex; align-items: center; border-radius: 999px; padding: .35rem .6rem;
  background: #ebfaf1; color: #217a4a; font-size: .76rem; font-weight: 800; white-space: nowrap;
}
.gm-accent-soft-success { background: #ebfaf1; color: #23a26d; }
.gm-accent-soft-info    { background: #eaf8ff; color: #1593c9; }
.gm-accent-soft-danger  { background: #ffecef; color: #f24d74; }
.gm-dashboard-footnote { text-align: center; color: #687390; font-size: .84rem; margin: 1rem 0 0; }

@media (max-width: 991.98px) {
  .gm-panel { padding: 1.1rem; }
  .gm-resume-card { min-height: auto; }
}
@media (max-width: 575.98px) {
  .gm .gm-dashboard-title, .gm-dashboard-subtitle { text-align: center; }
  .gm-dashboard-search { flex-wrap: nowrap; padding: .45rem .45rem .45rem .95rem; gap: .5rem; }
  .gm-dashboard-search input { font-size: .9rem; }
  .gm-dashboard-search-btn { padding: .5rem .95rem; font-size: .85rem; }
  .gm-resume-card { align-items: flex-start; flex-wrap: wrap; }
  .gm .gm-list-row { align-items: flex-start; }
  .gm-list-badge { white-space: normal; text-align: center; }
}

/* --- tema escuro --- */
:root[data-tema="escuro"] .gm-dashboard-search,
:root[data-tema="escuro"] .gm-resume-card,
:root[data-tema="escuro"] .gm-panel,
:root[data-tema="escuro"] .gm-stat-chip { background: var(--gm-card); border-color: var(--gm-border); }
:root[data-tema="escuro"] .gm .gm-list-row { background: var(--gm-card-2); border-color: var(--gm-border); }
:root[data-tema="escuro"] .gm .gm-resume-title,
:root[data-tema="escuro"] .gm .gm-panel-title,
:root[data-tema="escuro"] .gm-list-body strong,
:root[data-tema="escuro"] .gm-stat-chip { color: var(--gm-ink); }
:root[data-tema="escuro"] .gm-resume-subtitle,
:root[data-tema="escuro"] .gm-panel-subtitle,
:root[data-tema="escuro"] .gm-list-body small,
:root[data-tema="escuro"] .gm-dashboard-footnote { color: var(--gm-muted); }
:root[data-tema="escuro"] .gm-resume-progress { background: var(--gm-border); }
:root[data-tema="escuro"] .gm-resume-icon { background: #16233c; color: #5a90ff; }
:root[data-tema="escuro"] .gm-accent-soft-success,
:root[data-tema="escuro"] .gm-list-badge { background: #10251c; color: #35c48c; }
:root[data-tema="escuro"] .gm-accent-soft-info   { background: #10262e; color: #3fb4d1; }
:root[data-tema="escuro"] .gm-accent-soft-danger { background: #331921; color: #ff6b7c; }
:root[data-tema="escuro"] .gm-module-card.gm-c-primary { --c: #5a90ff; --t: #16233c; }
:root[data-tema="escuro"] .gm-module-card.gm-c-success { --c: #35c48c; --t: #10251c; }
:root[data-tema="escuro"] .gm-module-card.gm-c-violet  { --c: #9b8dff; --t: #211d3d; }
:root[data-tema="escuro"] .gm-module-card.gm-c-warning { --c: #f5a83a; --t: #2f2411; }
:root[data-tema="escuro"] .gm-module-card.gm-c-info    { --c: #3fb4d1; --t: #10262e; }
:root[data-tema="escuro"] .gm-module-card.gm-c-danger  { --c: #ff6b7c; --t: #331921; }

/* ==========================================================================
   Busca ao vivo — porta do busca_live.css da origem
   ========================================================================== */
.gm-busca-live { position: relative; }
.gm-busca-live__panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 12px); z-index: 60;
  background: #fff; border: 1px solid #e8edf4; border-radius: 18px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .12);
  max-height: min(440px, 58vh); overflow-y: auto; padding: 8px; text-align: left;
}
.gm-busca-live__empty { padding: 16px 18px; font-size: .9rem; color: #64748b; text-align: center; }
.gm .gm-busca-live__item {
  display: block; text-decoration: none; color: inherit;
  border-radius: 14px; padding: 14px 16px; margin: 0 0 4px; cursor: pointer;
  transition: background .12s ease;
}
.gm .gm-busca-live__item:last-child { margin-bottom: 0; }
.gm .gm-busca-live__item:hover { background: #f1f5f9; }
.gm .gm-busca-live__item.is-active { background: #ecfdf5; box-shadow: inset 0 0 0 1px rgba(20, 184, 166, .22); }
.gm-busca-live__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.gm-busca-live__main { flex: 1 1 auto; min-width: 0; }
.gm-busca-live__title {
  font-size: .95rem; font-weight: 800; color: #0f172a;
  letter-spacing: -.01em; line-height: 1.3; text-transform: uppercase;
}
.gm-busca-live__sub {
  margin-top: 6px; font-size: .8rem; color: #64748b; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gm-busca-live__badge {
  flex: 0 0 auto; max-width: 40%; margin-top: 2px;
  font-size: .68rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  color: #0f766e; background: #ccfbf1; border-radius: 999px; padding: .32rem .7rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gm-busca-live__meds {
  margin-top: 5px; display: flex; align-items: center; gap: 6px;
  font-size: .76rem; font-weight: 650; color: #0f766e;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gm-busca-live__meds .bi { font-size: .8rem; flex: 0 0 auto; opacity: .85; }
.gm-busca-live__meds > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-busca-live__title b, .gm-busca-live__meds b { font-weight: 900; color: #0d9488; }
.gm-busca-live__sub b { font-weight: 800; color: #334155; }

:root[data-tema="escuro"] .gm-busca-live__panel { background: #1e293b; border-color: #334155; }
:root[data-tema="escuro"] .gm-busca-live__title { color: #e2e8f0; }
:root[data-tema="escuro"] .gm-busca-live__sub,
:root[data-tema="escuro"] .gm-busca-live__empty { color: #94a3b8; }
:root[data-tema="escuro"] .gm .gm-busca-live__item:hover { background: #334155; }
:root[data-tema="escuro"] .gm .gm-busca-live__item.is-active { background: #134e4a; box-shadow: inset 0 0 0 1px rgba(45, 212, 191, .25); }
:root[data-tema="escuro"] .gm-busca-live__badge { background: #134e4a; color: #5eead4; }
:root[data-tema="escuro"] .gm-busca-live__meds { color: #5eead4; }
:root[data-tema="escuro"] .gm-busca-live__title b,
:root[data-tema="escuro"] .gm-busca-live__meds b { color: #2dd4bf; }
:root[data-tema="escuro"] .gm-busca-live__sub b { color: #cbd5e1; }

@media (max-width: 575px) {
  .gm .gm-busca-live__item { padding: 13px 14px; }
  .gm-busca-live__title { font-size: .9rem; }
  .gm-busca-live__badge { max-width: 36%; }
}