/*
 * Guia de uso (guia.html). Usa os tokens do estilo.css (as mesmas cores do sistema).
 *
 * As "telas" do guia são desenhos do sistema em HTML, não fotos: ficam nítidas em qualquer
 * tela, saem no idioma de quem lê e não mostram dado de cliente nenhum. Os marcadores
 * numerados (.pino) ficam presos no elemento que explicam; a legenda abaixo diz o que é cada um.
 */

.guia { padding: 3rem 0 5rem; }
.guia__grade { display: grid; gap: 2.5rem; }
@media (min-width: 64rem) {
  .guia__grade { grid-template-columns: 15.5rem minmax(0, 1fr); gap: 3.5rem; align-items: start; }
}

/* ------------------------------------------------------------------ abertura */
.guia__abertura { max-width: 46rem; margin-bottom: 2.5rem; }
.guia__abertura p { color: rgb(var(--c-texto-3)); font-size: 1.0625rem; margin: 1rem 0 0; }
.guia__aviso {
  margin: 0 0 2rem; padding: 0.8rem 1rem; border: 1px solid rgb(var(--c-borda-forte)); border-radius: var(--raio-pequeno);
  background: rgb(var(--c-superficie)); color: rgb(var(--c-texto-2)); font-size: 0.875rem;
}
.guia__comoler { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; margin-top: 1.5rem; font-size: 0.8125rem; color: rgb(var(--c-texto-3)); }
.guia__comoler > span { display: inline-flex; align-items: center; gap: 0.5rem; }
.guia__comoler .pino { position: static; }

/* ------------------------------------------------------------------ índice */
.indice { position: relative; }
@media (min-width: 64rem) {
  .indice { position: sticky; top: 5.25rem; max-height: calc(100vh - 6.5rem); overflow-y: auto; padding-right: 0.5rem; }
}
.indice__busca {
  width: 100%; height: 2.4rem; padding: 0 0.8rem; margin-bottom: 1rem;
  border: 1px solid rgb(var(--c-borda)); border-radius: var(--raio-pequeno);
  background: rgb(var(--c-campo)); color: rgb(var(--c-texto)); font: inherit; font-size: 0.875rem;
}
.indice__busca::placeholder { color: rgb(var(--c-texto-5)); }
.indice__resultado { margin: -0.5rem 0 0.8rem; font-family: var(--fonte-mono); font-size: 0.6875rem; color: rgb(var(--c-texto-4)); }
.indice__grupo { margin: 1.1rem 0 0.35rem; font-family: var(--fonte-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(var(--c-texto-5)); }
.indice__grupo:first-of-type { margin-top: 0; }
.indice a {
  display: block; padding: 0.3rem 0.65rem; border-radius: 0.375rem; border-left: 2px solid transparent;
  color: rgb(var(--c-texto-3)); font-size: 0.875rem; text-decoration: none; line-height: 1.35;
}
.indice a:hover { color: rgb(var(--c-texto)); background: rgb(var(--c-superficie)); }
.indice a[aria-current="true"] { color: rgb(var(--c-texto)); background: rgb(var(--c-superficie)); border-left-color: rgb(var(--c-destaque)); }
.indice__celular { display: block; }
.indice__celular > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1rem; border: 1px solid rgb(var(--c-borda)); border-radius: var(--raio-pequeno);
  background: rgb(var(--c-superficie)); font-weight: 600; font-size: 0.9375rem;
}
.indice__celular > summary::-webkit-details-marker { display: none; }
.indice__celular > summary::after { content: "+"; font-family: var(--fonte-mono); color: rgb(var(--c-texto-4)); }
.indice__celular[open] > summary::after { content: "−"; }
.indice__celular[open] > summary { margin-bottom: 1rem; }
@media (min-width: 64rem) {
  .indice__celular > summary { display: none; }
}

/* ------------------------------------------------------------------ seções */
.capitulo { padding-top: 0.5rem; scroll-margin-top: 5rem; }
.capitulo + .capitulo { margin-top: 4.5rem; padding-top: 3rem; border-top: 1px solid rgb(var(--c-borda)); }
.capitulo__grupo { font-family: var(--fonte-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(var(--c-destaque)); }
.capitulo h2 { margin: 0.4rem 0 0; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; }
.capitulo__resumo { margin: 0.75rem 0 0; color: rgb(var(--c-texto-2)); font-size: 1.0313rem; max-width: 46rem; }
.capitulo__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 1.1rem; }
.g-etiqueta {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.65rem;
  border: 1px solid rgb(var(--c-borda)); border-radius: 999px; background: rgb(var(--c-superficie));
  font-size: 0.75rem; color: rgb(var(--c-texto-3));
}
.g-etiqueta b { font-family: var(--fonte-mono); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(var(--c-texto-5)); }
.capitulo h3 { margin: 2.25rem 0 0.75rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.capitulo p { color: rgb(var(--c-texto-2)); }
.capitulo__texto { margin: 1rem 0 0; color: rgb(var(--c-texto-2)); max-width: 46rem; }

/* passo a passo numerado */
.passos { list-style: none; margin: 0; padding: 0; counter-reset: passo; display: grid; gap: 0.75rem; max-width: 46rem; }
.passos li { counter-increment: passo; position: relative; padding-left: 2.6rem; color: rgb(var(--c-texto-2)); }
.passos li::before {
  content: counter(passo); position: absolute; left: 0; top: 0.05rem; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid rgb(var(--c-borda-forte)); background: rgb(var(--c-superficie));
  font-family: var(--fonte-mono); font-size: 0.75rem; color: rgb(var(--c-texto));
}
.passos b, .funcoes b, .caixa b, .legenda b { color: rgb(var(--c-texto)); font-weight: 600; }

/* lista de implantação com caixa de marcar (fica guardada neste navegador) */
.implantacao { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; max-width: 46rem; }
.implantacao label {
  display: grid; grid-template-columns: auto 1fr; gap: 0.85rem; align-items: start; cursor: pointer;
  padding: 0.85rem 1rem; border: 1px solid rgb(var(--c-borda)); border-radius: var(--raio-pequeno); background: rgb(var(--c-superficie));
}
.implantacao input { margin: 0.2rem 0 0; width: 1.05rem; height: 1.05rem; accent-color: rgb(var(--c-destaque)); }
.implantacao span { color: rgb(var(--c-texto-2)); font-size: 0.9375rem; }
.implantacao b { display: block; color: rgb(var(--c-texto)); font-weight: 600; }
.implantacao input:checked + span b { text-decoration: line-through; text-decoration-color: rgb(var(--c-texto-5)); color: rgb(var(--c-texto-4)); }

/* funções do módulo */
.funcoes { display: grid; gap: 1px; margin: 0; max-width: 46rem; border: 1px solid rgb(var(--c-borda)); border-radius: var(--raio-pequeno); overflow: hidden; background: rgb(var(--c-borda)); }
.funcoes > div { display: grid; gap: 0.25rem; padding: 0.85rem 1rem; background: rgb(var(--c-fundo-fraco)); }
@media (min-width: 40rem) { .funcoes > div { grid-template-columns: 12rem 1fr; gap: 1.25rem; } }
.funcoes dt { font-weight: 600; font-size: 0.9375rem; color: rgb(var(--c-texto)); }
.funcoes dd { margin: 0; color: rgb(var(--c-texto-3)); font-size: 0.9375rem; }

/* dica e atenção */
.caixa { display: grid; grid-template-columns: auto 1fr; gap: 0.8rem; margin: 1.5rem 0 0; padding: 0.9rem 1.1rem; max-width: 46rem; border-radius: var(--raio-pequeno); border: 1px solid rgb(var(--c-borda)); background: rgb(var(--c-superficie)); font-size: 0.9375rem; color: rgb(var(--c-texto-2)); }
.caixa__tipo { font-family: var(--fonte-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; padding-top: 0.15rem; }
.caixa--dica { border-color: rgb(var(--c-ok) / 0.35); }
.caixa--dica .caixa__tipo { color: rgb(var(--c-ok)); }
.caixa--atencao { border-color: rgb(var(--c-alerta) / 0.4); }
.caixa--atencao .caixa__tipo { color: rgb(var(--c-alerta)); }

/* ------------------------------------------------------------------ fluxo com setas */
.fluxo { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.fluxo li { display: flex; align-items: center; gap: 0.5rem; }
.fluxo__passo {
  display: grid; gap: 0.15rem; padding: 0.65rem 0.85rem; min-width: 8.5rem; max-width: 12rem;
  border: 1px solid rgb(var(--c-borda-forte)); border-radius: var(--raio-pequeno); background: rgb(var(--c-superficie));
}
.fluxo__passo small { font-family: var(--fonte-mono); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(var(--c-texto-5)); }
.fluxo__passo span { font-size: 0.875rem; font-weight: 600; color: rgb(var(--c-texto)); line-height: 1.25; }
.fluxo__passo em { font-style: normal; font-size: 0.75rem; color: rgb(var(--c-texto-4)); line-height: 1.35; }
.fluxo li:first-child .fluxo__passo { border-color: rgb(var(--c-destaque) / 0.55); }
.seta { flex: none; width: 1.6rem; height: 1rem; color: rgb(var(--c-destaque)); }
.fluxo li:last-child .seta { display: none; }

/* ------------------------------------------------------------------ a tela desenhada */
.figura { margin: 1.5rem 0 0; }
.figura figcaption { margin-top: 0.6rem; font-size: 0.8125rem; color: rgb(var(--c-texto-4)); }
.gtela {
  --t-fundo: 11 12 14;
  position: relative; border: 1px solid rgb(var(--c-borda-forte)); border-radius: var(--raio);
  background: rgb(var(--c-fundo-fraco)); font-size: 0.75rem; color: rgb(var(--c-texto-2));
  box-shadow: 0 1.5rem 3rem -1.5rem rgb(0 0 0 / 0.6);
}
.gtela__faixa { position: relative; border-radius: calc(var(--raio) - 1px) calc(var(--raio) - 1px) 0 0; display: grid; grid-template-columns: 9.5rem 1fr auto; align-items: center; height: 2rem; background: rgb(var(--t-fundo)); border-bottom: 2px solid rgb(var(--c-destaque)); }
.gtela__logo { display: flex; justify-content: center; align-items: baseline; gap: 0.2rem; font-weight: 700; letter-spacing: 0.04em; font-size: 0.6875rem; color: rgb(var(--c-texto)); border-right: 1px solid rgb(var(--c-borda)); height: 100%; align-items: center; }
.gtela__logo i { font-style: normal; font-weight: 500; font-size: 0.5625rem; letter-spacing: 0; color: rgb(var(--c-texto-3)); }
.gtela__logo::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 0.1rem; background: rgb(var(--c-destaque)); margin-right: 0.15rem; }
.gtela__empresa { position: relative; justify-self: center; padding: 0 1rem; text-align: center; font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(var(--c-texto-3)); }
.gtela__usuario { display: flex; align-items: center; gap: 0.4rem; padding: 0 0.75rem; height: 100%; border-left: 1px solid rgb(var(--c-borda)); font-size: 0.6875rem; }
.gtela__usuario::before { content: attr(data-iniciais); display: grid; place-items: center; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: rgb(var(--c-destaque) / 0.15); color: rgb(var(--c-destaque)); font-size: 0.5rem; font-weight: 700; }
.gtela__corpo { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); min-height: 12rem; }
.gtela--janela .gtela__corpo { grid-template-columns: minmax(0, 1fr); }
.gtela__menu { position: relative; border-bottom-left-radius: calc(var(--raio) - 1px); padding: 0.6rem 0.45rem; border-right: 1px solid rgb(var(--c-borda)); background: rgb(var(--c-fundo-fraco)); display: flex; flex-direction: column; gap: 0.1rem; }
.gtela__menu small { margin: 0.4rem 0.4rem 0.1rem; font-family: var(--fonte-mono); font-size: 0.5rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(var(--c-texto-5)); }
.gtela__menu span { position: relative; padding: 0.12rem 0.45rem; border-radius: 0.3rem; font-size: 0.6rem; color: rgb(var(--c-texto-3)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gtela__menu span.ativo { background: rgb(var(--c-superficie)); color: rgb(var(--c-texto)); box-shadow: inset 2px 0 0 rgb(var(--c-destaque)); }
.gtela__plano { position: relative; margin-top: auto; padding: 0.45rem; border: 1px solid rgb(var(--c-borda)); border-radius: 0.35rem; font-size: 0.6rem; color: rgb(var(--c-texto-3)); }
.gtela__plano b { display: block; color: rgb(var(--c-texto)); font-size: 0.65rem; }
.gtela__area { min-width: 0; padding: 0.85rem 1rem 1rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; align-content: start; }
@media (max-width: 40rem) {
  .gtela__corpo { grid-template-columns: minmax(0, 1fr); }
  .gtela__menu { display: none; }
  .gtela__faixa { grid-template-columns: auto 1fr; }
  .gtela__logo { padding: 0 0.6rem; }
  .gtela__usuario { display: none; }
}

/* peças da tela */
.m-ia { position: relative; display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.6rem; border: 1px solid rgb(var(--c-borda-forte)); border-radius: 0.4rem; background: rgb(var(--c-campo)); color: rgb(var(--c-texto-4)); }
.m-ia::before { content: "✦"; color: rgb(var(--c-destaque)); }
.m-ia kbd { margin-left: auto; padding: 0.05rem 0.3rem; border: 1px solid rgb(var(--c-borda-forte)); border-radius: 0.2rem; font-family: var(--fonte-mono); font-size: 0.55rem; color: rgb(var(--c-texto-4)); }
.m-cab { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.5rem; }
.m-cab small { display: block; font-family: var(--fonte-mono); font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(var(--c-texto-5)); }
.m-cab strong { display: block; font-size: 0.95rem; font-weight: 600; color: rgb(var(--c-texto)); letter-spacing: -0.01em; }
.m-botoes { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.m-botao { position: relative; display: inline-flex; align-items: center; padding: 0.28rem 0.6rem; border-radius: 0.35rem; border: 1px solid rgb(var(--c-borda-forte)); background: rgb(var(--c-superficie)); color: rgb(var(--c-texto)); font-size: 0.65rem; font-weight: 500; white-space: nowrap; }
.m-botao--primario { background: rgb(var(--c-destaque)); border-color: rgb(var(--c-destaque)); color: #fff; }
.m-kpis { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: 0.5rem; }
.m-kpi { position: relative; padding: 0.55rem 0.65rem; border: 1px solid rgb(var(--c-borda)); border-radius: 0.4rem; background: rgb(var(--c-superficie)); }
.m-kpi small { display: block; font-size: 0.58rem; color: rgb(var(--c-texto-4)); }
.m-kpi b { display: block; margin-top: 0.15rem; font-family: var(--fonte-mono); font-size: 0.95rem; font-weight: 500; color: rgb(var(--c-numero-1)); }
.m-kpi[data-cor="2"] b { color: rgb(var(--c-numero-2)); }
.m-kpi[data-cor="3"] b { color: rgb(var(--c-numero-3)); }
.m-kpi[data-cor="4"] b { color: rgb(var(--c-numero-4)); }
.m-abas { position: relative; display: flex; flex-wrap: wrap; gap: 0.15rem; border-bottom: 1px solid rgb(var(--c-borda)); }
.m-abas span { padding: 0.3rem 0.55rem; font-size: 0.65rem; color: rgb(var(--c-texto-4)); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.m-abas span.ativo { color: rgb(var(--c-texto)); border-bottom-color: rgb(var(--c-destaque)); }
.m-tabela { position: relative; border: 1px solid rgb(var(--c-borda)); border-radius: 0.4rem; }
.m-tabela .m-rolar { border-radius: inherit; }
.m-tabela table { width: 100%; border-collapse: collapse; }
.m-tabela th { padding: 0.35rem 0.55rem; text-align: left; font-family: var(--fonte-mono); font-size: 0.55rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--c-texto-5)); background: rgb(var(--c-superficie)); border-bottom: 1px solid rgb(var(--c-borda)); }
.m-tabela td { position: relative; padding: 0.4rem 0.55rem; font-size: 0.65rem; color: rgb(var(--c-texto-2)); border-top: 1px solid rgb(var(--c-linha));  }
.m-tabela td.num, .m-tabela td:has(.m-chip), .m-tabela td:has(.m-barra), .m-tabela td:has(.m-botao) { white-space: nowrap; }
.m-tabela tr:first-child td { border-top: 0; }
.m-tabela td.num { font-family: var(--fonte-mono); text-align: right; }
.m-rolar { overflow-x: auto; }
.m-chip { display: inline-block; padding: 0.05rem 0.4rem; border-radius: 999px; font-size: 0.58rem; font-weight: 500; background: rgb(var(--c-texto-5) / 0.18); color: rgb(var(--c-texto-3)); }
.m-chip--ok { background: rgb(var(--c-ok) / 0.15); color: rgb(var(--c-ok)); }
.m-chip--alerta { background: rgb(var(--c-alerta) / 0.15); color: rgb(var(--c-alerta)); }
.m-chip--perigo { background: rgb(var(--c-destaque) / 0.15); color: rgb(255 120 110); }
.m-chip--info { background: rgb(var(--c-info) / 0.15); color: rgb(var(--c-info)); }
.m-barra { display: inline-block; width: 4.5rem; height: 0.3rem; border-radius: 999px; background: rgb(var(--c-borda-forte)); vertical-align: middle; overflow: hidden; }
.m-barra i { display: block; height: 100%; background: rgb(var(--c-destaque)); }
.m-barra + span { margin-left: 0.35rem; font-family: var(--fonte-mono); font-size: 0.6rem; color: rgb(var(--c-texto-4)); }
.m-grade { display: grid; gap: 0.6rem; }
@media (min-width: 40rem) {
  .m-grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .m-grade--13 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}
.m-cartao { position: relative; padding: 0.6rem 0.7rem; border: 1px solid rgb(var(--c-borda)); border-radius: 0.4rem; background: rgb(var(--c-superficie)); display: grid; gap: 0.35rem; align-content: start; }
.m-cartao > b { font-size: 0.7rem; color: rgb(var(--c-texto)); font-weight: 600; }
.m-linha { flex-wrap: wrap; display: flex; justify-content: space-between; gap: 0.5rem; align-items: center; font-size: 0.65rem; color: rgb(var(--c-texto-3)); }
.m-linha span:last-child { color: rgb(var(--c-texto-2)); text-align: right; }
.m-form { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 0.6rem; padding: 0.75rem; border: 1px solid rgb(var(--c-borda-forte)); border-radius: 0.45rem; background: rgb(var(--c-superficie)); }
.m-form > strong { grid-column: 1 / -1; font-size: 0.8rem; color: rgb(var(--c-texto)); }
.m-campo { position: relative; display: grid; gap: 0.2rem; }
.m-campo--largo { grid-column: 1 / -1; }
.m-campo small { font-size: 0.58rem; color: rgb(var(--c-texto-4)); }
.m-campo span { min-height: 1.45rem; padding: 0.25rem 0.45rem; border: 1px solid rgb(var(--c-borda)); border-radius: 0.3rem; background: rgb(var(--c-campo)); font-size: 0.65rem; color: rgb(var(--c-texto-2)); }
.m-form .m-botoes { grid-column: 1 / -1; justify-content: flex-end; }
.m-gantt { position: relative; display: grid; gap: 0.3rem; padding: 0.6rem; border: 1px solid rgb(var(--c-borda)); border-radius: 0.4rem; background: rgb(var(--c-superficie)); }
.m-gantt__linha { display: grid; grid-template-columns: 7.5rem 1fr; align-items: center; gap: 0.5rem; font-size: 0.62rem; color: rgb(var(--c-texto-3)); }
.m-gantt__trilho { position: relative; height: 0.7rem; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgb(var(--c-linha)) calc(10% - 1px) 10%); }
.m-gantt__barra { position: absolute; top: 0.1rem; height: 0.5rem; border-radius: 0.2rem; background: rgb(var(--c-numero-2) / 0.35); overflow: hidden; }
.m-gantt__barra i { display: block; height: 100%; background: rgb(var(--c-numero-2)); }
.m-gantt__barra--critica { background: rgb(var(--c-destaque) / 0.35); }
.m-gantt__barra--critica i { background: rgb(var(--c-destaque)); }
.m-gantt__marco { position: absolute; top: 0.05rem; width: 0.55rem; height: 0.55rem; background: rgb(var(--c-numero-4)); transform: rotate(45deg); }
.m-gantt__hoje { position: absolute; top: 0; bottom: 0; width: 1px; background: rgb(var(--c-destaque)); }
.m-lista { position: relative; display: grid; gap: 0; border: 1px solid rgb(var(--c-borda)); border-radius: 0.4rem; }
.m-lista > div:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; }
.m-lista > div:last-of-type { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
.m-lista > div { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.45rem 0.6rem; font-size: 0.65rem; color: rgb(var(--c-texto-2)); border-top: 1px solid rgb(var(--c-linha)); background: rgb(var(--c-superficie)); }
.m-lista > div:first-child { border-top: 0; }
.m-lista em { font-style: normal; color: rgb(var(--c-texto-4)); }
.m-nota { font-size: 0.62rem; color: rgb(var(--c-texto-4)); }

/* celular (WhatsApp e portal) */
.m-celular { position: relative; width: 15rem; max-width: 100%; margin: 0 auto; padding: 0.55rem; border-radius: 1.9rem; background: #1a1b1f; border: 1px solid rgb(var(--c-borda-forte)); box-shadow: 0 1.5rem 3rem -1.5rem rgb(0 0 0 / 0.7); }
.m-celular__tela { border-radius: 1.45rem; overflow: hidden; background: #0b141a; min-height: 20rem; display: flex; flex-direction: column; }
.m-celular__topo { display: flex; align-items: center; gap: 0.5rem; padding: 1.2rem 0.75rem 0.55rem; background: #1f2c34; color: #e9edef; font-size: 0.72rem; font-weight: 600; }
.m-celular__topo::before { content: "P"; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: rgb(var(--c-destaque)); color: #fff; font-size: 0.65rem; }
.m-celular__conversa { flex: 1; display: flex; flex-direction: column; gap: 0.35rem; padding: 0.6rem 0.55rem 0.8rem; }
.m-msg { position: relative; max-width: 85%; padding: 0.35rem 0.5rem; border-radius: 0.5rem; font-size: 0.65rem; line-height: 1.4; color: #e9edef; white-space: pre-line; }
.m-msg--eu { align-self: flex-end; background: #005c4b; border-top-right-radius: 0.1rem; }
.m-msg--ia { align-self: flex-start; background: #1f2c34; border-top-left-radius: 0.1rem; }
.m-portal { background: rgb(var(--c-fundo-fraco)); min-height: 20rem; padding: 1.1rem 0.75rem 0.8rem; display: grid; gap: 0.5rem; align-content: start; font-size: 0.65rem; }
.m-portal > strong { font-size: 0.85rem; color: rgb(var(--c-texto)); }

/* marcador numerado (preso no elemento que explica) e a legenda */
.pino {
  margin: 0; padding: 0; font-style: normal;
  position: absolute; z-index: 2; top: -0.55rem; right: -0.55rem; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  display: grid; place-items: center; background: rgb(var(--c-destaque)); color: #fff;
  font-family: var(--fonte-mono); font-size: 0.625rem; font-weight: 600; line-height: 1;
  box-shadow: 0 0 0 3px rgb(var(--c-fundo-fraco)), 0 0.25rem 0.6rem rgb(0 0 0 / 0.5);
}
.pino--esq { right: auto; left: -0.55rem; }
/* dentro da moldura (a borda da tela corta o que passa dela) */
.pino--dentro { top: 50%; left: 0.2rem; right: auto; transform: translateY(-50%); }
/* ao lado do título, na mesma linha */
.pino.pino--linha { position: relative; top: -0.1rem; right: auto; display: inline-grid; margin-left: 0.45rem; vertical-align: middle; }
.legenda { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.55rem; max-width: 46rem; }
.legenda li { display: grid; grid-template-columns: 1.25rem 1fr; gap: 0.75rem; align-items: start; color: rgb(var(--c-texto-2)); font-size: 0.9375rem; }
.legenda .pino { position: static; margin-top: 0.15rem; box-shadow: none; }

/* perfis */
.perfis { display: grid; gap: 0.6rem; max-width: 46rem; }
@media (min-width: 40rem) { .perfis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.perfis > div { padding: 0.85rem 1rem; border: 1px solid rgb(var(--c-borda)); border-radius: var(--raio-pequeno); background: rgb(var(--c-superficie)); }
.perfis b { display: block; color: rgb(var(--c-texto)); font-weight: 600; }
.perfis span { color: rgb(var(--c-texto-3)); font-size: 0.875rem; }

.guia__fim { margin-top: 4.5rem; padding: 1.5rem; border: 1px solid rgb(var(--c-borda)); border-radius: var(--raio); background: rgb(var(--c-superficie)); }
.guia__fim h2 { margin: 0; font-size: 1.25rem; font-weight: 600; }
.guia__fim p { margin: 0.5rem 0 1rem; color: rgb(var(--c-texto-3)); }
.guia__semjs { padding: 2rem; border: 1px solid rgb(var(--c-borda)); border-radius: var(--raio); color: rgb(var(--c-texto-3)); }

/* impressão: o guia vira apostila */
@media print {
  .faixa, .rodape, .indice, .guia__busca { display: none !important; }
  body { background: #fff; color: #111; }
  .guia__grade { display: block; }
  .capitulo { break-inside: auto; }
  .figura, .caixa, .fluxo { break-inside: avoid; }
}

/* barra de rolagem discreta no índice */
.indice { scrollbar-width: thin; scrollbar-color: rgb(var(--c-borda-forte)) transparent; }

/* na conversa, o número fica do lado de fora do balão, sem cobrir o texto */
.m-msg > .pino { top: 0.15rem; right: -1.55rem; }
.m-msg > .pino.pino--esq { left: -1.55rem; right: auto; }