/* GERADO por scripts/sync-assets.mjs a partir de assets/human-ui/tema.css, assets/human-ui/moldura.css, assets/human-ui/barras.css, assets/human-ui/cabecalho.css, assets/human-ui/blocos.css, assets/human-ui/rodape.css, assets/human-ui/contato.css, assets/human-ui/capa.css, assets/human-ui/telas.css, assets/human-ui/acabamento.css: edite as partes. */
/* Layout compartilhado. Aparência e temas dos apps Bootstrap vêm do Bootstrap local.
   Os aliases mm-* mantêm os layouts existentes; os fallbacks atendem o Radar (Tailwind). */
/* A COR DO QUE SE CLICA (link, botão outline, `text-*` e `link-*`) passa AA em toda superfície da casa, nos dois temas —
   o `check-contraste-ui` mede cada par. O Bootstrap 5.3 pinta essas cores com o tom cheio do tema, que só passa no fundo
   branco: em claro, o azul (#0d6efd) dá 4,27:1 no `bg-body-tertiary` do cabeçalho do card e 3,80 no `bg-body-secondary`;
   o cinza do botão de apoio, 3,51 no vermelho suave do alerta; o vermelho, 3,39 nele; o amarelo e o ciano do `text-*`,
   1,6 e 1,9 no branco. E ele não adapta ao escuro: o vermelho dá 3,41 no #212529 (medido na galeria, 26/09/2026). Em claro,
   o tom de hover do próprio Bootstrap (20% mais escuro); no escuro, a cor de ênfase do tema, a que ele usa para texto. */
:root:not([data-bs-theme="dark"]), [data-bs-theme="light"] {
  --mm-link: #0a58ca; --mm-link-rgb: 10, 88, 202; --mm-link-hover: #084298; --mm-link-hover-rgb: 8, 66, 152;
  --mm-acao-primary: #0a58ca; --mm-acao-primary-rgb: 10, 88, 202;
  --mm-acao-secondary: #565e64; --mm-acao-secondary-rgb: 86, 94, 100;
  --mm-acao-success: #146c43; --mm-acao-success-rgb: 20, 108, 67;
  --mm-acao-danger: #b02a37; --mm-acao-danger-rgb: 176, 42, 55;
  --mm-acao-warning: #7a5c03; --mm-acao-warning-rgb: 122, 92, 3;
  --mm-acao-info: #0a6b80; --mm-acao-info-rgb: 10, 107, 128;
  --mm-acao-sobre: #fff;
}
[data-bs-theme="dark"] {
  --mm-link: #6ea8fe; --mm-link-rgb: 110, 168, 254; --mm-link-hover: #9ec5fe; --mm-link-hover-rgb: 158, 197, 254;
  --mm-acao-primary: #6ea8fe; --mm-acao-primary-rgb: 110, 168, 254;
  --mm-acao-secondary: #a7acb1; --mm-acao-secondary-rgb: 167, 172, 177;
  --mm-acao-success: #75b798; --mm-acao-success-rgb: 117, 183, 152;
  --mm-acao-danger: #ea868f; --mm-acao-danger-rgb: 234, 134, 143;
  --mm-acao-warning: #ffda6a; --mm-acao-warning-rgb: 255, 218, 106;
  --mm-acao-info: #6edff6; --mm-acao-info-rgb: 110, 223, 246;
  --mm-acao-sobre: #000;
}
:root, [data-bs-theme] {
  --bs-link-color: var(--mm-link); --bs-link-color-rgb: var(--mm-link-rgb);
  --bs-link-hover-color: var(--mm-link-hover); --bs-link-hover-color-rgb: var(--mm-link-hover-rgb);
}
.btn-outline-primary { --mm-acao: var(--mm-acao-primary); }
.btn-outline-secondary { --mm-acao: var(--mm-acao-secondary); }
.btn-outline-success { --mm-acao: var(--mm-acao-success); }
.btn-outline-danger { --mm-acao: var(--mm-acao-danger); }
.btn-outline-warning { --mm-acao: var(--mm-acao-warning); }
.btn-outline-info { --mm-acao: var(--mm-acao-info); }
.btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-info {
  --bs-btn-color: var(--mm-acao);
  --bs-btn-border-color: var(--mm-acao);
  --bs-btn-hover-color: var(--mm-acao-sobre);
  --bs-btn-hover-bg: var(--mm-acao);
  --bs-btn-hover-border-color: var(--mm-acao);
  --bs-btn-active-color: var(--mm-acao-sobre);
  --bs-btn-active-bg: var(--mm-acao);
  --bs-btn-active-border-color: var(--mm-acao);
  --bs-btn-disabled-color: var(--mm-acao);
  --bs-btn-disabled-border-color: var(--mm-acao);
}
/* O `text-*` e o `link-*` leem o `--bs-<cor>-rgb`: trocado só no elemento que os usa, o `bg-*` e o botão cheio continuam os do
   Bootstrap. */
.text-primary, .link-primary { --bs-primary-rgb: var(--mm-acao-primary-rgb); }
.text-secondary, .link-secondary { --bs-secondary-rgb: var(--mm-acao-secondary-rgb); }
.text-success, .link-success { --bs-success-rgb: var(--mm-acao-success-rgb); }
.text-danger, .link-danger { --bs-danger-rgb: var(--mm-acao-danger-rgb); }
.text-warning, .link-warning { --bs-warning-rgb: var(--mm-acao-warning-rgb); }
.text-info, .link-info { --bs-info-rgb: var(--mm-acao-info-rgb); }
/* O título de grupo do menu suspenso é #6c757d nos dois temas: 3,29:1 no escuro. */
.dropdown-menu { --bs-dropdown-header-color: var(--bs-secondary-color); }
/* O `.btn` sem variante não tem anel de foco: o `:focus-visible` do Bootstrap zera o contorno e monta a sombra de
   `--bs-btn-focus-shadow-rgb`, que só as variantes definem (WCAG 2.4.7; o botão de grupo das `Facetas`). O `:where`
   tem especificidade zero: a variante, quando há, continua mandando. */
:where(.btn) { --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); }
:root, [data-bs-theme] {
  /* Acessibilidade: os contornos nativos sutis ficam abaixo de 3:1. Usamos as cores
     de texto do próprio tema para separar campos, painéis e estados nos dois modos. */
  --bs-border-color: var(--bs-secondary-color);
  --bs-success-border-subtle: var(--bs-success-text-emphasis);
  --bs-warning-border-subtle: var(--bs-warning-text-emphasis);
  --bs-danger-border-subtle: var(--bs-danger-text-emphasis);
  --bs-info-border-subtle: var(--bs-info-text-emphasis);
  --bs-secondary-border-subtle: var(--bs-secondary-text-emphasis);
  --mm-space-1: .5rem; --mm-space-2: 1rem; --mm-space-3: 1.5rem; --mm-space-4: 2.5rem;
  --mm-radius: var(--bs-border-radius, .25rem); --mm-gutter: clamp(1rem, 3vw, 2rem);
  --mm-control: 2.75rem; --mm-control-sm: 2.75rem;
  --mm-bg: var(--bs-body-bg, #f3f5f8); --mm-surface: var(--bs-body-bg, #fff); --mm-surface-2: var(--bs-tertiary-bg, #e9edf2);
  --mm-surface-3: var(--bs-secondary-bg, #e9ecef);
  --mm-border: var(--bs-border-color, #748196); --mm-border-strong: var(--bs-secondary-color, #64748b);
  --mm-text: var(--bs-body-color, #172029); --mm-muted: var(--bs-secondary-color, #55616d);
  --mm-accent: var(--bs-primary, #1f5ae8); --mm-accent-hover: #0b5ed7;
  --mm-accent-text: var(--bs-primary-text-emphasis, #1d4ed8); --mm-accent-text-rgb: var(--bs-link-color-rgb, 29, 78, 216);
  --mm-on-accent: #fff; --mm-accent-soft: var(--bs-primary-bg-subtle, #e6eefc);
  --mm-ok: var(--bs-success-text-emphasis, #14663a); --mm-ok-bg: var(--bs-success-bg-subtle, #e3f4e9); --mm-ok-border: var(--bs-success-border-subtle, #478461);
  --mm-warn: var(--bs-warning-text-emphasis, #8a5a00); --mm-warn-bg: var(--bs-warning-bg-subtle, #fff2cf); --mm-warn-border: var(--bs-warning-border-subtle, #9e7520);
  --mm-bad: var(--bs-danger-text-emphasis, #b42318); --mm-bad-bg: var(--bs-danger-bg-subtle, #fde7e5); --mm-bad-border: var(--bs-danger-border-subtle, #b9655c);
  --mm-info: var(--bs-info-text-emphasis, #1d4ed8); --mm-info-bg: var(--bs-info-bg-subtle, #e6eefc); --mm-info-border: var(--bs-info-border-subtle, #5679be);
  --mm-neutral: var(--bs-secondary-text-emphasis, #4b5563); --mm-neutral-bg: var(--bs-secondary-bg-subtle, #eef0f3); --mm-neutral-border: var(--bs-secondary-border-subtle, #748196);
  --mm-danger-fill: var(--bs-danger, #b42318); --mm-danger-hover: #b02a37;
  --mm-shadow-pop: var(--bs-box-shadow, 0 8px 24px rgb(15 23 42 / .12));
  --mm-font-mono: var(--bs-font-monospace, monospace);
}
/* Tema do consumidor Tailwind; não redefine o tema Bootstrap. */
[data-theme="dark"] {
  --mm-bg: #111821; --mm-surface: #1b2532; --mm-surface-2: #223449; --mm-border: #8293aa; --mm-border-strong: #9aabc1;
  --mm-text: #e6ebf0; --mm-muted: #a4b0bc;
  --mm-accent: #2f6fed; --mm-accent-hover: #245bcc; --mm-accent-text: #8fb4ff; --mm-accent-text-rgb: 143, 180, 255;
  --mm-on-accent: #fff; --mm-accent-soft: #15243d;
  --mm-ok: #57d38f; --mm-ok-bg: #112a1d; --mm-ok-border: #448969;
  --mm-warn: #f2c14e; --mm-warn-bg: #33270a; --mm-warn-border: #a58437;
  --mm-bad: #ff8a80; --mm-bad-bg: #3a1616; --mm-bad-border: #b66967;
  --mm-info: #8fb4ff; --mm-info-bg: #15243d; --mm-info-border: #6387b8;
  --mm-neutral: #b6c0cb; --mm-neutral-bg: #1f262f; --mm-neutral-border: #8293aa;
  --mm-shadow-pop: 0 8px 24px rgb(0 0 0 / .5);
}


[hidden] { display: none !important; }
/* A marca de língua da barra do app na tela da conta (`packages/contas/src/tela.js`): só o `lang`, sem caixa — o
   cabeçalho dentro dela continua grudando no topo da página. */
.mm-lingua-da-barra { display: contents; }
.mm-human { min-height: 100vh; display: flex; flex-direction: column; }
.mm-human main { flex: 1 0 auto; }
.mm-human main, .mm-human section, .mm-human .tab-content { min-width: 0; }
.mm-human pre, .mm-human .mm-codigo { background: var(--mm-surface-2); border: 1px solid var(--mm-border); border-radius: var(--mm-radius); padding: .75rem 1rem; font-size: .875rem; overflow: auto; max-width: 100%; min-width: 0; }
.mm-human pre code { white-space: pre; overflow-wrap: normal; word-break: normal; }
.mm-mono { font-family: var(--mm-font-mono); }
.mm-num, .mm-facts dd, .mm-kpi dd { font-variant-numeric: tabular-nums; }
.mm-skeleton { min-height: 1em; background: var(--mm-surface-2); color: transparent !important; }

.mm-hero { display: grid; gap: 1.5rem; align-items: start; padding-block: var(--mm-space-4) var(--mm-space-3); }
.mm-hero h1 { margin: 0 0 .75rem; font-size: clamp(1.75rem, 2.2vw + .6rem, 2.375rem); line-height: 1.15; font-weight: 700; }
.mm-lead { margin: 0 0 1.25rem; font-size: 1.0625rem; color: var(--mm-muted); }
.mm-kicker { display: block; margin-bottom: .5rem; font-size: .8125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mm-accent-text); }
.mm-hero-aside { min-width: 0; }
.mm-intro { padding-block: var(--mm-space-4) var(--mm-space-3); }
.mm-intro h1 { font-size: clamp(1.75rem, 2.5vw, 2.5rem); line-height: 1.15; font-weight: 700; }
.mm-task { margin-block: var(--mm-space-2); }

/* Abertura compacta: coluna extra só com texto visível ou ajuda aberta. Trabalho no centro. */
.mm-opening { display: grid; gap: .65rem 2rem; align-items: start; padding-block: 1rem 1.1rem; }
.mm-opening h1 { margin: 0 0 .35rem; font-size: clamp(1.5rem, 1.8vw + .4rem, 1.875rem); line-height: 1.2; font-weight: 700; }
.mm-opening .mm-lead { margin: 0; font-size: 1rem; }
.mm-guide { min-width: 0; }
.mm-guide > .mm-panel-title { margin: 0; font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; color: var(--mm-accent-text); }
.mm-guide > p { margin: .35rem 0 0; font-size: .9375rem; color: var(--mm-muted); }
.mm-guide summary { cursor: pointer; min-height: var(--mm-control); padding-block: .25rem; font-weight: 600; }
.mm-guide details > .mm-panel { margin-top: .5rem; }
.mm-opening:not(:has(.mm-guide > p)):not(:has(details[open])) .mm-guide { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem 1.25rem; }
.mm-panel.mm-workbench { min-width: 0; margin-bottom: 1.25rem; }
.mm-workbench > .mm-panel-head { background: var(--mm-surface); }
.mm-searchbar { padding: 1rem 1.25rem; border-bottom: 1px solid var(--mm-border); }
.mm-searchbar > :last-child { margin-bottom: 0; }
.mm-searchbar .mm-chips { margin-top: .75rem; }
.mm-guide .mm-facts { grid-template-columns: minmax(0, 1fr); }

/* A BARRA ÚNICA (`@mm/seo/chrome`): o cabeçalho, o menu e o rodapé globais têm o MESMO desenho em todo
   app — Bootstrap, Tailwind (Radar), a Grade e o Samehand (dono, 23/09/2026: "uma barra pra tudo, mesmo
   padrão, só que com propriedades pra cada projeto"). Por isso o chrome não herda a paleta nem os
   componentes do app: tem a sua (`--mmc-*`, abaixo), as suas classes (`mm-*`) e os seus ícones (SVG
   embutido). Entra no `human-ui.css` dos apps da casa e no `chrome.css` de quem fica fora do sistema de
   layout. Os controles estão em `cabecalho.css`; o rodapé, em `rodape.css`. */

/* A paleta do chrome: a do Bootstrap 5.3 da casa, fixa. O app troca só a arte (`--mmc-arte-*`). */
.mm-chrome, .mm-footer, .mm-pular {
  --mmc-fundo: #fff;
  --mmc-fundo-2: #f1f3f5;
  --mmc-borda: #dee2e6;
  --mmc-texto: #212529;
  --mmc-suave: #5c636a;
  --mmc-link: #0a58ca;
  --mmc-acento: #0d6efd;
  --mmc-foco: #0d6efd;
  --mmc-cracha: #0d6efd;
  --mmc-cracha-texto: #fff;
  --mmc-aviso: #664d03;
  --mmc-aviso-fundo: #fff3cd;
  --mmc-aviso-borda: #d9b44a;
  --mmc-sombra: 0 .5rem 1.5rem rgba(0, 0, 0, .15);
  --mmc-sombra-barra: 0 1px 3px rgba(2, 6, 23, .05);
  --mmc-raio: .375rem;
  --mmc-controle: 2.25rem;
  --mmc-arte-cabecalho: url("/chrome-cabecalho.svg");
  --mmc-arte-rodape: url("/chrome-rodape.svg");
  color-scheme: light;
}
:root[data-bs-theme="dark"] .mm-chrome, :root[data-bs-theme="dark"] .mm-footer, :root[data-bs-theme="dark"] .mm-pular,
:root[data-theme="dark"] .mm-chrome, :root[data-theme="dark"] .mm-footer, :root[data-theme="dark"] .mm-pular {
  --mmc-fundo: #212529;
  --mmc-fundo-2: #2b3035;
  --mmc-borda: #495057;
  --mmc-texto: #dee2e6;
  --mmc-suave: #adb5bd;
  --mmc-link: #6ea8fe;
  --mmc-foco: #6ea8fe;
  --mmc-cracha: #6ea8fe;
  --mmc-cracha-texto: #03172f;
  --mmc-aviso: #ffda6a;
  --mmc-aviso-fundo: #332701;
  --mmc-aviso-borda: #997404;
  --mmc-sombra: 0 .5rem 1.5rem rgba(0, 0, 0, .5);
  --mmc-sombra-barra: 0 1px 3px rgba(0, 0, 0, .4);
  color-scheme: dark;
}
/* Sem o atributo de tema (o boot da página não rodou): o tema do sistema. */
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme]):not([data-theme]) .mm-chrome,
  :root:not([data-bs-theme]):not([data-theme]) .mm-footer,
  :root:not([data-bs-theme]):not([data-theme]) .mm-pular {
    --mmc-fundo: #212529;
    --mmc-fundo-2: #2b3035;
    --mmc-borda: #495057;
    --mmc-texto: #dee2e6;
    --mmc-suave: #adb5bd;
    --mmc-link: #6ea8fe;
    --mmc-foco: #6ea8fe;
    --mmc-cracha: #6ea8fe;
    --mmc-cracha-texto: #03172f;
    --mmc-aviso: #ffda6a;
    --mmc-aviso-fundo: #332701;
    --mmc-aviso-borda: #997404;
    --mmc-sombra: 0 .5rem 1.5rem rgba(0, 0, 0, .5);
    --mmc-sombra-barra: 0 1px 3px rgba(0, 0, 0, .4);
    color-scheme: dark;
  }
}

/* O contêiner de página, o mesmo do conteúdo: o chrome alinha com o que vem embaixo dele. */
.mm-workspace { width: 100%; max-width: none; margin-inline: auto; padding-inline: var(--mm-gutter, clamp(1rem, 3vw, 2rem)); min-width: 0; box-sizing: border-box; }

/* O cabeçalho gruda no topo: o que ganha o foco (o Tab de volta, o foco posto por script) ou é alvo de âncora para
   abaixo dele, não embaixo (WCAG 2.4.11). A altura é a que o `chrome.js` mede (`--mm-altura-cabecalho`); o Chrome 52 da
   TV não conhece a propriedade e só a ignora. */
html { scroll-padding-top: calc(var(--mm-altura-cabecalho, 0px) + .5rem); }

/* O CABEÇALHO: duas barras, a de cima (marca, módulos, ações e controles da casa) e a do menu. */
.mm-chrome {
  position: sticky;
  top: 0;
  z-index: 1020;
  background-color: var(--mmc-fundo);
  background-image: var(--mmc-arte-cabecalho);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--mmc-borda);
  box-shadow: var(--mmc-sombra-barra);
  color: var(--mmc-texto);
  font-size: 1rem;
  line-height: 1.5;
  text-align: start;
}
.mm-chrome *, .mm-chrome *::before, .mm-chrome *::after { box-sizing: border-box; }
.mm-topbar > .mm-workspace { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem 1rem; min-height: 3.25rem; padding-block: .375rem; }
.mm-menubar { border-top: 1px solid var(--mmc-borda); }
.mm-menubar > .mm-workspace { display: flex; align-items: stretch; min-height: 2.75rem; }

/* A marca: o logo do app (`/icon.svg`) e o nome, igual em todo app. */
.mm-chrome .mm-brand, .mm-chrome .mm-brand:hover, .mm-chrome .mm-brand:focus {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--mmc-texto);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.mm-chrome .mm-brand:active { color: var(--mmc-link); }
.mm-brand > img, .mm-brand > .mm-ico { flex: none; width: 1.75rem; height: 1.75rem; border-radius: .4rem; }
.mm-brand > .mm-ico { color: var(--mmc-acento); }
.mm-brand-frase { margin: 0; min-width: 0; color: var(--mmc-suave); font-size: .875rem; }

/* O MENU: links de seção, a mesma régua em todo app; a seção atual sublinhada. Os itens moram num bloco deles
   (`mm-topnav-itens`) e a oferta fica ao lado, fora dele: no celular só o bloco rola, e nada passa por baixo da oferta. */
.mm-topnav { display: flex; flex-wrap: wrap; align-items: stretch; min-width: 0; margin: 0 0 0 -.75rem; padding: 0; }
.mm-topnav-itens { display: flex; flex-wrap: wrap; align-items: stretch; min-width: 0; }
.mm-chrome .mm-menu-item {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 2.75rem;
  padding: 0 .75rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--mmc-link);
  font: inherit;
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.mm-chrome .mm-menu-item:hover { color: var(--mmc-texto); background: var(--mmc-fundo-2); text-decoration: none; }
.mm-chrome .mm-menu-item:focus-visible { outline: 2px solid var(--mmc-foco); outline-offset: -2px; }
.mm-chrome .mm-menu-item:active { color: var(--mmc-texto); background: var(--mmc-borda); }
.mm-chrome .mm-menu-item.active, .mm-chrome .mm-menu-item[aria-current="page"] { color: var(--mmc-texto); font-weight: 600; border-bottom-color: currentColor; }
/* No celular a régua vira faixa: os itens rolam e a oferta fica na ponta, à vista (a sombra marca a divisa). Era a
   oferta grudada POR CIMA do rolo, e o item que o Tab levava à ponta ficava embaixo dela (WCAG 2.4.11). */
@media (max-width: 575.98px) {
  .mm-topnav { flex-wrap: nowrap; }
  .mm-topnav-itens { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .mm-topnav-itens::-webkit-scrollbar { display: none; }
  .mm-chrome .mm-menu-item { flex-shrink: 0; }
  .mm-chrome .mm-menu-item.mm-oferta { background: var(--mmc-fundo); box-shadow: -10px 0 8px -6px rgba(0, 0, 0, .18); }
}
/* OS CONTROLES DA BARRA ÚNICA (`@mm/seo/chrome` + `assets/chrome.js`), iguais em todo app. A moldura e a
   paleta (`--mmc-*`) estão em `barras.css`. Três famílias, sempre no mesmo lugar:
     .mm-assunto  os MÓDULOS do app, num grupo ao lado da marca (Projects; Device Stats | Routine Monitor)
     .mm-acao     as AÇÕES do app e os módulos da casa com moldura (empresas, crédito, aviso de convidado)
     .mm-ctl      os controles da CASA, sem moldura, em todo app: contato, conta, idioma e tema */

/* Pular para o conteúdo: escondido até receber o foco. */
.mm-pular:not(:focus):not(:focus-within) {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
  margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important; border: 0 !important;
}
.mm-pular:focus { position: fixed; z-index: 1100; top: .5rem; left: .5rem; padding: .5rem .75rem; background: var(--mmc-fundo); color: var(--mmc-texto); border: 2px solid var(--mmc-foco); border-radius: var(--mmc-raio); }

/* O ícone da casa: SVG embutido, do tamanho da letra. */
.mm-ico { display: inline-block; flex: none; width: 1em; height: 1em; fill: currentColor; vertical-align: -.125em; }

.mm-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .375rem; margin-inline-start: auto; }

/* O botão da barra — um só desenho para os três. */
.mm-chrome .mm-assunto,
.mm-chrome .mm-acao,
.mm-chrome .mm-ctl,
.mm-chrome .mm-tools .mm-conta-botao {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  height: var(--mmc-controle);
  min-width: var(--mmc-controle);
  margin: 0;
  padding: 0 .65rem;
  border: 1px solid transparent;
  border-radius: var(--mmc-raio);
  background: transparent;
  color: var(--mmc-texto);
  font: inherit;
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.mm-chrome .mm-acao, .mm-chrome .mm-assunto { border-color: var(--mmc-borda); }
.mm-chrome .mm-assunto:hover, .mm-chrome .mm-acao:hover, .mm-chrome .mm-ctl:hover,
.mm-chrome .mm-tools .mm-conta-botao:hover, .mm-chrome .mm-tools .mm-conta-botao[aria-expanded="true"],
.mm-chrome .mm-idioma[open] > .mm-ctl {
  background: var(--mmc-fundo-2);
  color: var(--mmc-texto);
  text-decoration: none;
}
.mm-chrome .mm-assunto:focus-visible, .mm-chrome .mm-acao:focus-visible, .mm-chrome .mm-ctl:focus-visible,
.mm-chrome .mm-tools .mm-conta-botao:focus-visible {
  outline: 2px solid var(--mmc-foco);
  outline-offset: 2px;
  box-shadow: none;
}
/* Apertado: o fundo desce um tom (a borda da barra), para o dedo ver que pegou. Parado: sem resposta e sem mãozinha. */
.mm-chrome .mm-assunto:active, .mm-chrome .mm-acao:active, .mm-chrome .mm-ctl:active,
.mm-chrome .mm-tools .mm-conta-botao:active {
  background: var(--mmc-borda);
  color: var(--mmc-texto);
}
.mm-chrome .mm-assunto:disabled, .mm-chrome .mm-acao:disabled, .mm-chrome .mm-ctl:disabled,
.mm-chrome .mm-assunto[aria-disabled="true"], .mm-chrome .mm-acao[aria-disabled="true"], .mm-chrome .mm-ctl[aria-disabled="true"] {
  background: transparent;
  color: var(--mmc-suave);
  cursor: not-allowed;
}
/* A conta é o componente global (`conta-produto-menu.js`): o botão dele entra na mesma régua, sem a
   seta do Bootstrap — em todo app ele abre a conta. */
.mm-chrome .mm-tools .mm-conta-botao::after { display: none; }
.mm-chrome .mm-tools .mm-conta { gap: .375rem; }

/* O GRUPO: os módulos lado a lado, emendados, como abas; o aberto fica cheio. */
.mm-grupo { display: inline-flex; align-items: stretch; }
.mm-grupo > .mm-assunto, .mm-grupo > .mm-acao { border-radius: 0; }
.mm-grupo > :first-child { border-start-start-radius: var(--mmc-raio); border-end-start-radius: var(--mmc-raio); }
.mm-grupo > :last-child { border-start-end-radius: var(--mmc-raio); border-end-end-radius: var(--mmc-raio); }
.mm-grupo > * + * { margin-inline-start: -1px !important; }
.mm-chrome .mm-assunto.active, .mm-chrome .mm-assunto[aria-current="page"], .mm-chrome .mm-assunto[aria-selected="true"],
.mm-chrome .mm-grupo > .mm-acao.active, .mm-chrome .mm-grupo > .mm-acao[aria-current="page"] {
  z-index: 1;
  border-color: var(--mmc-texto);
  background: var(--mmc-texto);
  color: var(--mmc-fundo);
}
.mm-assuntos { margin-inline-end: auto; }

/* O CRACHÁ de um módulo ou ação: a contagem que o app manda (`MMChrome.contador`). */
.mm-cracha { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .35rem; border-radius: 1rem; background: var(--mmc-cracha); color: var(--mmc-cracha-texto); font-size: .75rem; font-weight: 700; line-height: 1; }
.mm-cracha[hidden] { display: none !important; }

/* Os AVISOS da casa: convidado com coisa no navegador e crédito baixo, em âmbar com texto. */
.mm-chrome .mm-aviso, .mm-chrome .mm-credito.mm-credito-baixo { border-color: var(--mmc-aviso-borda); background: var(--mmc-aviso-fundo); color: var(--mmc-aviso); }
.mm-chrome .mm-aviso:hover, .mm-chrome .mm-credito.mm-credito-baixo:hover { background: var(--mmc-aviso-fundo); color: var(--mmc-aviso); filter: brightness(1.06); }
.mm-chrome .mm-aviso:active, .mm-chrome .mm-credito.mm-credito-baixo:active { background: var(--mmc-aviso-fundo); color: var(--mmc-aviso); filter: brightness(.94); }

/* O TEMA: o ícone é o do tema em vigor; o rótulo acessível diz o que o clique faz. */
.mm-chrome .mm-tema .mm-ico { width: 1.15rem; height: 1.15rem; }
:root[data-bs-theme="dark"] .mm-tema-sol,
:root[data-theme="dark"] .mm-tema-sol,
:root:not([data-bs-theme="dark"]):not([data-theme="dark"]) .mm-tema-lua { display: none !important; }

/* O IDIOMA: o código da língua da tela e a lista das línguas do app, sem depender do JS do Bootstrap. */
.mm-idioma { position: relative; display: inline-flex; }
.mm-idioma > summary { list-style: none; }
.mm-idioma > summary::-webkit-details-marker { display: none; }
.mm-idioma > summary::marker { content: ""; }
.mm-idioma-atual { font-size: .8125rem; font-weight: 600; letter-spacing: .03em; }
.mm-idioma-lista {
  position: absolute;
  z-index: 1050;
  top: 100%;
  right: 0;
  min-width: 11rem;
  margin: .25rem 0 0;
  padding: .25rem;
  list-style: none;
  background: var(--mmc-fundo);
  border: 1px solid var(--mmc-borda);
  border-radius: var(--mmc-raio);
  box-shadow: var(--mmc-sombra);
}
.mm-idioma-lista > li { display: block; margin: 0; }
.mm-chrome .mm-idioma-lista a, .mm-chrome .mm-idioma-lista button {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .45rem .6rem;
  border: 0;
  border-radius: .25rem;
  background: none;
  color: var(--mmc-texto);
  font: inherit;
  font-size: .9375rem;
  line-height: 1.3;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
.mm-chrome .mm-idioma-lista a:hover, .mm-chrome .mm-idioma-lista button:hover { background: var(--mmc-fundo-2); }
.mm-chrome .mm-idioma-lista a:focus-visible, .mm-chrome .mm-idioma-lista button:focus-visible { outline: 2px solid var(--mmc-foco); outline-offset: -2px; }
.mm-chrome .mm-idioma-lista a:active, .mm-chrome .mm-idioma-lista button:active { background: var(--mmc-borda); }
.mm-idioma-lista .mm-ico { visibility: hidden; color: var(--mmc-link); }
.mm-idioma-lista [aria-current="true"] { font-weight: 600; }
.mm-idioma-lista [aria-current="true"] .mm-ico { visibility: visible; }
.mm-idioma-lista abbr { margin-inline-start: auto; color: var(--mmc-suave); font-size: .75rem; font-weight: 600; text-decoration: none; }
/* A bandeira da língua, no botão e em cada opção: retângulo 4:3 com contorno leve (branco some no claro). */
.mm-bandeira { flex: none; width: 20px; height: 15px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px var(--mmc-borda); }
.mm-idioma > summary .mm-bandeira { margin-inline-end: .35rem; }

/* O espaço de um módulo que o app desenha no navegador (a organização do CommsHarbor): vazio, some. */
.mm-slot { display: inline-flex; align-items: center; gap: .375rem; min-width: 0; }
.mm-slot:empty { display: none; }

/* No celular: os módulos ganham a linha deles, com rótulo (navegação não vira adivinhação de ícone); as
   ações e os controles ficam só com o ícone e o nome acessível. */
@media (max-width: 575.98px) {
  .mm-topbar > .mm-workspace { min-height: 3rem; }
  .mm-brand-frase { display: none; }
  .mm-assuntos { order: 1; flex: 1 0 100%; margin: 0; }
  .mm-chrome .mm-assuntos > .mm-assunto { flex: 1 1 0; padding-inline: .5rem; }
  /* Só à vista: o texto continua sendo o nome acessível do botão. Com `display: none` a ação sem `titulo` ficava sem
     nome nenhum e as outras, só com o do `title` (WCAG 4.1.2). */
  .mm-tools .mm-rotulo { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .mm-chrome .mm-acao, .mm-chrome .mm-ctl { padding-inline: .55rem; }
}
@media (max-width: 379.98px) {
  .mm-assuntos .mm-ico { display: none; }
}
/* No dedo, o controle da barra e a língua da lista têm 44 px de altura (WCAG 2.5.5; AGENTS-UI § Acabamento). A largura
   mínima fica nos 36 px: com 44, a marca e os quatro controles da casa não cabiam juntos a 390 px e o cabeçalho ganhava
   uma linha a mais (medido no PageAudit, 26/09/2026). */
@media (pointer: coarse) {
  .mm-chrome { --mmc-controle: 2.75rem; }
  .mm-chrome .mm-assunto, .mm-chrome .mm-acao, .mm-chrome .mm-ctl, .mm-chrome .mm-tools .mm-conta-botao { min-width: 2.25rem; }
  .mm-chrome .mm-brand { min-height: 44px; }
  .mm-chrome .mm-idioma-lista a, .mm-chrome .mm-idioma-lista button { padding-top: .78rem; padding-bottom: .78rem; }
}
/* A lista das línguas entra descendo um pouco, em vez de surgir de estalo (sem movimento para quem pediu menos). */
@media (prefers-reduced-motion: no-preference) {
  @keyframes mm-lista-entra {
    from { opacity: 0; transform: translateY(-.25rem); }
    to { opacity: 1; transform: none; }
  }
  .mm-idioma[open] > .mm-idioma-lista { animation: mm-lista-entra .15s ease-out; }
}
/* ── Painéis, seções e grades ── */
.mm-panel { background: var(--mm-surface); border: 1px solid var(--mm-border); border-radius: var(--mm-radius); padding: var(--mm-panel-pad, 1.25rem); min-width: 0; }
.mm-panel > :last-child { margin-bottom: 0; }
.mm-panel-tint { background: var(--mm-surface-2); }
.mm-panel-flush { padding: 0; }

/* Abas e sub-abas: a aba ativa abre a borda para o conteúdo, sem molduras duplicadas. */
.mm-panel > .nav-tabs, .mm-panel-body > .nav-tabs { margin-bottom: 0; border-bottom-color: var(--mm-border); }
.mm-panel > .nav-tabs .nav-link, .mm-panel-body > .nav-tabs .nav-link { border-color: transparent; }
.mm-panel > .nav-tabs .nav-link:hover:not(.active), .mm-panel-body > .nav-tabs .nav-link:hover:not(.active) { border-color: transparent transparent var(--mm-border); }
.mm-panel > .nav-tabs .nav-link.active, .mm-panel-body > .nav-tabs .nav-link.active {
  background: var(--mm-surface);
  border-color: var(--mm-border) var(--mm-border) var(--mm-surface);
}
/* O corpo da aba herda a superfície do painel, senão o cartão fica com o miolo de outra cor. */
.mm-panel > .tab-content { background: var(--mm-surface); border-radius: 0 0 var(--mm-radius) var(--mm-radius); }

/* Cabeçalho e corpo dentro da aba mantêm o respiro mesmo sem serem filhos diretos do painel. */
.mm-panel > .tab-content .mm-panel-head,
.mm-panel > .tab-content .mm-panel-body { padding: var(--mm-space-2) 1.25rem; }
.mm-panel > .tab-content .mm-panel-head { border-bottom: 1px solid var(--mm-border); margin-bottom: 0; }
/* Aba sem cabeçalho próprio (texto corrido, formulário) também precisa de margem interna. */
.mm-panel > .tab-content > .tab-pane.mm-pane-pad { padding: var(--mm-space-2) 1.25rem var(--mm-space-3); }

/* A segunda camada fecha a moldura nas laterais e no fundo do conteúdo. */
.mm-panel-body > .nav-tabs + .tab-content {
  border: 1px solid var(--mm-border);
  border-top: 0;
  border-radius: 0 0 var(--mm-radius) var(--mm-radius);
  padding: var(--mm-space-2) 1.25rem;
}

/* Painel não encosta na barra de menu: sem este respiro a moldura lê como parte do cabeçalho. */
.mm-panel.mm-section { margin-top: var(--mm-space-2); }

/* Cartões: cabeçalho e rodapé suaves, corpo neutro, como no EditalMD. */
.card > .card-header, .card > .card-footer { background: var(--mm-surface-2); }
.card > .card-header { font-weight: 600; }

/* Linha de cartões: sem marcador e sem recuo de lista, que é o que fazia o cartão nascer torto. */
.mm-need-cards { list-style: none; padding-left: 0; margin-bottom: 0; }
.mm-need-cards > .card { height: 100%; }
.mm-panel-flush > .mm-panel-head, .mm-panel-flush > .mm-panel-body { padding: 1rem 1.25rem; }
.mm-panel-flush > .mm-panel-head { border-bottom: 1px solid var(--mm-border); margin-bottom: 0; }
.mm-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1rem; }
.mm-panel-title { margin: 0; font-size: 1.0625rem; font-weight: 700; }
.mm-panel-flush .list-group-flush .list-group-item, .mm-panel-flush .mm-rows > * { padding: 1rem 1.25rem; }
.mm-rows { list-style: none; margin: 0; padding: 0; }
.mm-rows > * + * { border-top: 1px solid var(--mm-border); }
/* Linha de lista com valor à direita (página de números): nome à esquerda, número alinhado e
   tabular, para a coluna ficar legível de cima a baixo. */
.mm-rows > li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-block: .4rem; }
.mm-rows > li > b { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Ausência não grita: "não medido" no lugar de um número herda o corpo grande do KPI, e em quatro
   cartões seguidos parecia estado de erro. Fica com o peso de nota. */
.mm-kpi-value.mm-kpi-note { font-weight: 500; }
.mm-section { padding-block: var(--mm-space-3); }
.mm-bloco { padding-block: var(--mm-space-3); border-top: 1px solid var(--mm-border); }
.mm-section-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .5rem 1.5rem; margin-bottom: 1.25rem; }
.mm-section-head h2, .mm-bloco > h2 { margin: 0; font-size: 1.375rem; font-weight: 700; }
.mm-section-head p { grid-column: 1 / -1; margin: 0; color: var(--mm-muted); }
.mm-bloco > h2 + p { color: var(--mm-muted); margin: .35rem 0 1.25rem; }
.mm-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.mm-grid-2, .mm-grid-3, .mm-split, .mm-split-even, .mm-split-aside { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.mm-split, .mm-split-even, .mm-split-aside { gap: 1.5rem; }
.mm-sticky { position: sticky; top: 6.25rem; }
.mm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.mm-actions-end { justify-content: flex-end; }
.mm-kpis { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); margin: 0; }
.mm-kpi { min-width: 0; padding: .875rem 1rem; border: 1px solid var(--mm-border); border-radius: var(--mm-radius); background: var(--mm-surface); }
.mm-kpi-label, .mm-kpi dt { margin-bottom: .25rem; font-size: .8125rem; font-weight: 500; color: var(--mm-muted); }
.mm-kpi-value, .mm-kpi dd { margin: 0; font-size: 1.625rem; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mm-kpi-note, .mm-kpi small { display: block; margin-top: .3rem; font-size: .8125rem; color: var(--mm-muted); }
.mm-kpi-ok .mm-kpi-value, .mm-kpi-ok dd { color: var(--mm-ok); }
.mm-kpi-warn .mm-kpi-value, .mm-kpi-warn dd { color: var(--mm-warn); }
.mm-kpi-bad .mm-kpi-value, .mm-kpi-bad dd { color: var(--mm-bad); }
.mm-kpi-accent .mm-kpi-value, .mm-kpi-accent dd { color: var(--mm-accent-text); }
.mm-facts { display: grid; gap: .75rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); margin: 0; }
.mm-facts dt { font-size: .8125rem; font-weight: 500; color: var(--mm-muted); }
.mm-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.mm-status { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; padding: .15rem .55rem; border: 1px solid var(--mm-neutral-border); border-radius: var(--mm-radius); background: var(--mm-neutral-bg); color: var(--mm-neutral); font-size: .8125rem; font-weight: 600; line-height: 1.4; }
.mm-status-ok { color: var(--mm-ok); background: var(--mm-ok-bg); border-color: var(--mm-ok-border); }
.mm-status-warn { color: var(--mm-warn); background: var(--mm-warn-bg); border-color: var(--mm-warn-border); }
.mm-status-bad { color: var(--mm-bad); background: var(--mm-bad-bg); border-color: var(--mm-bad-border); }
.mm-status-info { color: var(--mm-info); background: var(--mm-info-bg); border-color: var(--mm-info-border); }
/* O cartão de caminho, no vocabulário da capa (24/09/2026, dono: "os cards ficou básico demais"): o ícone
   num ladrilho tingido, o título maior e o cartão inteiro reagindo ao ponteiro e ao foco. */
.mm-need { display: flex; flex-direction: column; gap: .5rem; padding: 1.35rem 1.4rem; border: 1px solid var(--mm-border); border-radius: var(--bs-border-radius-lg); background: var(--mm-surface); color: var(--mm-text); text-decoration: none; }
.mm-need > .bi, .mm-need > svg { display: inline-grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; margin-bottom: .35rem; padding: .6rem; border-radius: var(--bs-border-radius-lg); background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); font-size: 1.35rem; }
.mm-need h3 { margin: 0; font-size: 1.125rem; font-weight: 700; }
.mm-need p { margin: 0; font-size: .9375rem; color: var(--mm-muted); }
.mm-need-cta { margin-top: auto; padding-top: .5rem; font-weight: 600; color: var(--mm-accent-text); }
/* `:hover` e `:focus-visible` separados: o Chrome 52 da TV box descarta a regra que lista um seletor que ele não conhece. */
a.mm-need:hover, button.mm-need:hover { border-color: var(--mm-accent-text); background: var(--bs-tertiary-bg); color: var(--mm-text); }
a.mm-need:focus-visible, button.mm-need:focus-visible { border-color: var(--mm-accent-text); background: var(--bs-tertiary-bg); color: var(--mm-text); }
a.mm-need:active, button.mm-need:active { border-color: var(--mm-accent-text); background: var(--bs-secondary-bg); color: var(--mm-text); }
@media (prefers-reduced-motion: no-preference) { .mm-need { transition: border-color .15s ease, background-color .15s ease; } }
.mm-need-row { display: grid; gap: .85rem 1.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); list-style: none; margin: 0; padding: 0; }
.mm-need-row h3 { margin: 0 0 .2rem; font-size: 1rem; } .mm-need-row p { margin: 0; font-size: .875rem; color: var(--mm-muted); } .mm-need-row .bi, .mm-need-row svg { color: var(--mm-accent-text); margin-right: .3rem; width: 1.1rem; height: 1.1rem; }
.mm-foto-credito { margin: .35rem 0 0; font-size: .75rem; color: var(--mm-muted); }
/* Cada passo é uma CAIXA — borda e fundo suave do Bootstrap —, não texto solto no fundo da página
   (dono, 23/09/2026: "textos sem visual bem definido, sem linha e/ou fundos… visualmente confuso"). */
.mm-steps { counter-reset: passo; list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.mm-steps > li { counter-increment: passo; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .25rem .75rem; align-items: start; align-content: start; padding: .875rem 1rem; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); background: var(--bs-tertiary-bg); }
.mm-steps > li::before { grid-column: 1; grid-row: 1 / span 2; content: counter(passo); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--mm-accent-soft); color: var(--mm-accent-text); font-weight: 700; }
.mm-steps > li > * { grid-column: 2; }
.mm-steps strong { display: block; margin-bottom: .2rem; }
.mm-steps p { margin: 0; color: var(--mm-muted); }
.mm-chips { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.mm-chip:not(.btn) { display: inline-flex; align-items: center; gap: .35rem; min-height: var(--mm-control); padding: .2rem .65rem; border: 1px solid var(--mm-border-strong); border-radius: var(--mm-radius); background: var(--mm-surface); color: var(--mm-text); font: inherit; font-size: .875rem; font-weight: 500; text-decoration: none; cursor: pointer; }
.mm-chip:not(.btn):hover { border-color: var(--mm-accent-text); color: var(--mm-accent-text); }
/* Separados do `:hover`: o Chrome 52 da TV box descarta a regra que lista um seletor que ele não conhece. */
.mm-chip:not(.btn):focus-visible { border-color: var(--mm-accent-text); color: var(--mm-accent-text); outline: 2px solid var(--mm-accent-text); outline-offset: 2px; }
.mm-chip:not(.btn):active { border-color: var(--mm-accent-text); background: var(--mm-surface-2); color: var(--mm-accent-text); }
.mm-hero-main { min-width: 0; }
.mm-hero:has(> .mm-hero-aside > [hidden]:only-child), .mm-hero:has(> .mm-hero-aside:empty) { grid-template-columns: minmax(0, 1fr); }
.mm-panels { display: grid; gap: 1rem; align-items: start; }
.mm-panels > * { margin: 0 !important; padding: 1.25rem !important; border: 1px solid var(--mm-border) !important; border-radius: var(--mm-radius); background: var(--mm-surface); min-width: 0; }
.mm-example { margin: 0; padding: 1rem 1.25rem; border: 1px solid var(--mm-border); border-left: 3px solid var(--mm-accent); border-radius: var(--mm-radius); background: var(--mm-surface); max-width: none; }
.mm-example > :last-child { margin-bottom: 0; }
.mm-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
.mm-nav a { font-weight: 600; text-underline-offset: .2em; }
.mm-faq-item { padding: .15rem 0; border-bottom: 1px solid var(--mm-border); }
.mm-faq-item summary { display: flex; gap: .75rem; align-items: baseline; padding: .7rem 0; cursor: pointer; list-style: none; font-weight: 600; }
.mm-faq-item summary::-webkit-details-marker { display: none; }
.mm-faq-item summary::before { content: "+"; flex: 0 0 1rem; color: var(--mm-accent-text); font-weight: 700; }
.mm-faq-item[open] summary::before { content: "–"; }
.mm-faq-item p { margin: 0 0 .85rem 1.75rem; color: var(--mm-muted); }
.mm-precos table { margin: 0; }
.mm-precos td { padding-block: .75rem; vertical-align: middle; }
.mm-precos td:last-child { white-space: normal; min-width: 7rem; text-align: right; }
.mm-discovery { padding: 0; font-size: inherit; }
/* O bloco de comando para ler e copiar (`pre.app-pre`): o "Comece por aqui" do modal API (`@mm/ui/agent-hub`, que a
   Grade, o Mural e o HookPulse abrem pelo rodapé) e os comandos do PageAudit, numa caixa rolável. Morava na casca do
   HookPulse e na do PageAudit (25/09/2026); a Grade e o Mural abriam o mesmo modal sem ele. */
pre.app-pre { max-height: 280px; overflow: auto; font-size: .8125rem; background: var(--mm-surface-2); border: 1px solid var(--mm-border); border-radius: var(--mm-radius); padding: .75rem; margin: 0; }
/* PAINEL DE TRABALHO (AGENTS-UI § Painel de trabalho): a fita de uma área são abas SUBLINHADAS
   (`nav-underline`), sem caixa na aba ativa e sem moldura em cima nem dos lados — a fita é só a linha
   de baixo, que o sublinhado da aba ativa cobre. O CONTEÚDO fecha a caixa, nas laterais e no fundo,
   com essa linha como topo; o recuo da fita é o mesmo do conteúdo. Estado e ações na ponta
   (`.mm-faixa-fim`); quando não cabe numa linha, a ponta sobe e as abas seguem coladas no conteúdo
   (`wrap-reverse`), uma linha colada na outra: o `gap` do `nav-underline` fica só entre as abas da mesma linha (com
   ele também entre as linhas, a fita de seis abas do PageAudit no celular tinha 294px em vez de 214px, 25/09/2026).
   É a regra do `.hp-faixa` do HookPulse, agora na SDK. */
.mm-faixa { flex-wrap: wrap-reverse; row-gap: 0; padding-inline: 1.25rem; border-bottom: 1px solid var(--mm-border); }
.mm-faixa .nav-link { margin-bottom: -1px; }
.mm-faixa > .mm-faixa-fim { display: flex; align-items: center; gap: .5rem; }
.mm-faixa + .tab-content { padding: 0 1.25rem 1.5rem; border: 1px solid var(--mm-border); border-top: 0; border-radius: 0 0 var(--mm-radius) var(--mm-radius); }
/* Enquanto o assistente inicial da área (`.mm-inicio`) está na tela, o botão dele é o único primário:
   os botões da ponta da fita saem e voltam sozinhos com o primeiro item. */
.mm-area:has(.mm-inicio:not([hidden])) .mm-faixa-fim .btn { display: none; }
/* Os passos do assistente lado a lado onde cabem, um embaixo do outro no celular. */
.mm-inicio .mm-steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

/* O RODAPÉ ÚNICO (`@mm/seo/chrome`): o mesmo desenho em todo app — a marca e a frase do app numa faixa,
   as colunas Produto, Integrações e agentes e Legal, e a linha do crédito da foto e do apoio; a linha de
   estado (`statusline.js`) entra no fim. Paleta e arte do chrome (`--mmc-*`, `barras.css`): o app troca
   só a arte (`--mmc-arte-rodape`). */
.mm-footer {
  position: relative;
  margin-top: var(--mm-space-2, 1rem);
  border-top: 1px solid var(--mmc-borda);
  background-color: var(--mmc-fundo-2);
  background-image: var(--mmc-arte-rodape);
  background-position: center bottom;
  background-size: 100% 5rem;
  background-repeat: no-repeat;
  color: var(--mmc-suave);
  font-size: .8125rem;
  line-height: 1.5;
  text-align: start;
}
.mm-footer *, .mm-footer *::before, .mm-footer *::after { box-sizing: border-box; }
.mm-footer > .mm-workspace { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .75rem 1.5rem; padding-block: 1rem .85rem; }

/* A marca e a frase do app. */
.mm-footer-brand { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .75rem; margin: 0; }
.mm-footer .mm-footer-name, .mm-footer .mm-footer-name:hover {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
  color: var(--mmc-texto);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
}
.mm-footer .mm-footer-name:hover { color: var(--mmc-link); }
.mm-footer .mm-footer-name:active { color: var(--mmc-link); text-decoration: underline; }
/* A letra de 12 px dava um alvo de 18 px; o mínimo é 24 (WCAG 2.5.8). */
.mm-footer .mm-footer-name { min-height: 1.5rem; }
.mm-footer-name > img { width: 1rem; height: 1rem; border-radius: .2rem; }
.mm-footer-brand > p { margin: 0; flex: 1 1 16rem; }
.mm-footer-brand > details { flex-basis: 100%; font-size: .75rem; }
.mm-footer-brand a:not(.mm-selo):not(.mm-footer-name), .mm-footer-meta a, .mm-footer-stats a { color: var(--mmc-texto); text-decoration: underline; text-underline-offset: .15em; }
/* O respiro põe o resumo (letra de 12 px) nos 24 px de alvo: dois resumos em sequência — os `details` aninhados que o
   app escreve no `rodape.detalhes` — ficavam a −6 px um do outro (WCAG 2.5.8). */
.mm-footer details summary { cursor: pointer; padding-block: .25rem; }

/* As colunas. */
.mm-footer-line { flex: 1 1 12.5rem; display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; min-width: 0; margin: 0; padding: 0; }
.mm-footer-line > h2 { margin: 0; color: var(--mmc-suave); font-size: .75rem; font-weight: 700; letter-spacing: .05em; line-height: 1.3; text-transform: uppercase; }
.mm-footer-badges { display: flex; flex-flow: row wrap; align-items: center; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.mm-footer-badges > li { display: flex; max-width: 100%; margin: 0; }

/* O selo: cada link do rodapé, o mesmo em todo app. */
.mm-footer .mm-selo {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  max-width: 100%;
  min-height: 1.5rem;
  margin: 0;
  padding: .05rem .45rem;
  border: 1px solid var(--mmc-borda);
  border-radius: var(--mmc-raio);
  background: var(--mmc-fundo);
  color: var(--mmc-texto);
  font: inherit;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: start;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.mm-footer .mm-selo:hover { border-color: var(--mmc-link); color: var(--mmc-link); text-decoration: none; }
.mm-footer .mm-selo:focus-visible { outline: 2px solid var(--mmc-foco); outline-offset: 2px; }
.mm-footer .mm-selo:active { border-color: var(--mmc-link); background: var(--mmc-fundo-2); color: var(--mmc-link); }
/* No dedo, cada selo tem 44 px e um vão maior entre eles (WCAG 2.5.5; AGENTS-UI § Acabamento). */
@media (pointer: coarse) {
  .mm-footer .mm-selo { min-height: 44px; padding-inline: .65rem; font-size: .8125rem; }
  .mm-footer-badges { gap: .5rem; }
}
.mm-footer .mm-selo .mm-ico { color: var(--mmc-suave); font-size: .8rem; }
.mm-footer .mm-selo:hover .mm-ico { color: inherit; }

/* O crédito da foto e o apoio; depois, a linha de estado. */
.mm-footer-meta { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem .75rem; margin-top: .15rem; padding-top: .4rem; border-top: 1px solid var(--mmc-borda); }
.mm-footer-meta:empty { display: none; }
.mm-footer .mm-foto-credito { margin: 0; }
.mm-footer-stats {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem .75rem;
  margin: .15rem 0 0;
  padding-top: .4rem;
  border-top: 1px solid var(--mmc-borda);
  color: var(--mmc-suave);
  font-size: .75rem;
}
/* O CONTATO GLOBAL (`assets/contato.js`): o diálogo nativo, o mesmo em todo app. Os controles dentro dele
   são os do Bootstrap onde ele existe; sem Bootstrap (Radar, Samehand) o `:where()` dá o mínimo, com
   especificidade zero para nunca brigar com o `.form-control`/`.btn` de quem tem. Sem `min()` nem
   `rgb(… / …)`: a Grade roda em TV box (Chrome 52). */
.mm-contato { width: 40rem; max-width: calc(100vw - 2rem); max-height: calc(100vh - 2rem); overflow-y: auto; padding: 0; border: 1px solid var(--mm-border); border-radius: var(--mm-radius); background: var(--mm-surface); color: var(--mm-text); box-shadow: var(--mm-shadow-pop); }
.mm-contato::backdrop { background: rgba(0, 0, 0, .5); }
/* Uma coluna que cabe na caixa (`minmax(0, 1fr)`) e o título que quebra a palavra: com a letra em 200% no celular, o
   campo de 20 caracteres alargava a coluna, e o × e o Cancelar saíam da janela (26/09/2026). */
.mm-contato-caixa { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1.25rem; }
.mm-contato-cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.mm-contato-cabeca > :first-child { min-width: 0; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.mm-contato-titulo { margin: 0; font-size: 1.25rem; font-weight: 700; }
.mm-contato-sub, .mm-contato-nota { margin: .25rem 0 0; color: var(--mm-muted); }
.mm-contato-nota { font-size: .875rem; }
.mm-contato-x { flex: none; width: 2.25rem; height: 2.25rem; min-height: 0; padding: 0; border: 0; border-radius: var(--mm-radius); background: transparent; color: var(--mm-muted); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.mm-contato-x:hover { background: var(--mm-surface-2); color: var(--mm-text); }
/* Separado do `:hover`: o Chrome 52 da TV box descarta a regra inteira por causa do `:focus-visible`. */
.mm-contato-x:focus-visible { background: var(--mm-surface-2); color: var(--mm-text); }
.mm-contato-x:active { background: var(--mm-border); color: var(--mm-text); }
/* No dedo, o × tem 44 px (WCAG 2.5.5; AGENTS-UI § Acabamento). */
@media (pointer: coarse) { .mm-contato-x { width: auto; height: auto; min-width: 44px; min-height: 44px; } }
/* A janela entra crescendo um pouco sobre o fundo que escurece, para a pessoa ver que a tela mudou de camada — sem
   movimento para quem pediu menos (a TV box não conhece a consulta e fica sem). */
@media (prefers-reduced-motion: no-preference) {
  @keyframes mm-janela-entra {
    from { opacity: 0; transform: translateY(.5rem) scale(.98); }
    to { opacity: 1; transform: none; }
  }
  @keyframes mm-fundo-entra {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .mm-contato[open] { animation: mm-janela-entra .2s ease-out; }
  .mm-contato[open]::backdrop { animation: mm-fundo-entra .2s ease-out; }
}
.mm-contato-form { display: grid; gap: .85rem; }
.mm-contato-campos { display: grid; gap: .85rem; grid-template-columns: 1fr; }
@media (min-width: 36rem) { .mm-contato-campos { grid-template-columns: 1fr 1fr; } }
.mm-contato-inteiro { grid-column: 1 / -1; }
.mm-contato-isca { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.mm-contato-aviso { margin: 0; }
.mm-contato-acoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.mm-contato-ok { display: grid; gap: .75rem; justify-items: start; }
.mm-contato-ok[hidden], .mm-contato-form[hidden], .mm-contato-aviso[hidden] { display: none; }
:where(.mm-contato) label { display: block; margin-bottom: .35rem; font-weight: 600; }
:where(.mm-contato) :where(input, textarea) { box-sizing: border-box; width: 100%; min-width: 0; padding: .5rem .75rem; border: 1px solid var(--mm-border); border-radius: var(--mm-radius); background: var(--mm-surface); color: var(--mm-text); font: inherit; }
:where(.mm-contato) :where(button) { min-height: 2.5rem; padding: .45rem 1rem; border: 1px solid var(--mm-border); border-radius: var(--mm-radius); background: var(--mm-surface); color: var(--mm-text); font: inherit; font-weight: 600; cursor: pointer; }
:where(.mm-contato) :where(button[type="submit"]) { border-color: var(--mm-accent); background: var(--mm-accent); color: var(--mm-on-accent); }
:where(.mm-contato) :where([role="alert"]) { padding: .5rem .75rem; border: 1px solid currentColor; border-radius: var(--mm-radius); color: var(--mm-bad, #b42318); }
/* A CAPA E A APRESENTAÇÃO (`@mm/ui/capa`), a mesma em todo app: foto de acervo sob um véu escuro, letra
   grande e as seções da apresentação. Composição só; cores, bordas e superfícies são as do Bootstrap.
   A capa roda também na TV box da Grade (WebView Chrome 52, AGENTS-UI regra 17): cada regra traz ANTES a
   forma que ele entende — `rgba()`, `top/right/bottom/left`, tamanho fixo antes do `clamp()`, margem no
   lugar do `gap` de flex — e o motor novo fica com a última. Não "limpe" as duplas. */
/* A borda da PÁGINA, lida antes de a capa e o destaque virarem escuros (`data-bs-theme="dark"` neles):
   no tema escuro é ela que separa um bloco escuro do fundo. */
body { --mm-borda-pagina: var(--bs-border-color); }
.mm-apresentacao { display: grid; gap: 1.5rem; }
/* A borda das seções é a da casa (3:1), não a translúcida do card do Bootstrap; o destaque tem a dele. */
.mm-apresentacao > .card:not(.mm-apr-destaque) { --bs-card-border-color: var(--bs-border-color); }
.mm-capa .mm-kicker::before, .mm-apresentacao .mm-kicker::before { content: ""; display: inline-block; width: 2rem; height: 1px; margin-right: .75rem; vertical-align: middle; background: currentColor; }
/* `flex-shrink: 0`: numa coluna flex que rola (o painel da Grade), `overflow: hidden` zera o mínimo e a capa encolhia a 2 px. */
.mm-capa { position: relative; isolation: isolate; display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden; margin-top: 1rem; margin-bottom: 1.5rem; margin-block: 1rem 1.5rem; border: 1px solid var(--mm-borda-pagina, var(--bs-border-color)); border-radius: var(--bs-border-radius-lg); color: var(--bs-body-color); background: #111; }
.mm-apresentacao > .mm-capa { margin-top: 0; margin-bottom: 0; margin-block: 0; }
.mm-capa-foto { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
/* O véu: o texto passa o contraste em qualquer ponto da foto, e o lado do texto é o mais escuro. */
.mm-capa::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, .62) 60%, rgba(0, 0, 0, .5)); }
.mm-capa-corpo { flex: 1; display: grid; align-items: center; gap: 2rem; padding: 3rem 2rem; padding: clamp(2rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3.5rem); }
.mm-capa-principal, .mm-capa-lado { min-width: 0; }
.mm-capa .mm-kicker { color: var(--bs-emphasis-color); }
.mm-capa-nome { margin: 0; font-size: 4rem; font-size: clamp(3rem, 1.6rem + 5.5vw, 6rem); line-height: 1; font-weight: 600; color: var(--bs-emphasis-color); }
.mm-capa-titulo { margin: 0; font-size: 2.25rem; font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem); line-height: 1.15; font-weight: 600; color: var(--bs-emphasis-color); text-wrap: balance; }
.mm-capa-nome + .mm-capa-titulo { margin-top: 1.25rem; font-size: 1.75rem; font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem); line-height: 1.2; font-weight: 500; }
.mm-capa-texto { margin: 1.25rem 0 0; font-size: 1.125rem; }
.mm-capa-acoes { display: flex; flex-wrap: wrap; margin: 2rem 0 -.75rem; }
.mm-capa-acoes > * { margin: 0 .75rem .75rem 0; }
.mm-capa-sinais { display: flex; display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; margin: 0; border-top: 1px solid var(--bs-border-color); background: rgba(0, 0, 0, .45); }
.mm-capa-sinais > div { flex: 1 1 0; padding: 1rem 1.5rem; padding: 1rem clamp(1rem, 3vw, 2rem); }
.mm-capa-sinais > div + div { border-left: 1px solid var(--bs-border-color); }
.mm-capa-sinais dt { color: var(--bs-emphasis-color); font-weight: 600; }
.mm-capa-sinais dd { margin: .2rem 0 0; font-size: .875rem; }
.mm-capa-credito { margin: 0; padding: .5rem 1.5rem; padding: .5rem clamp(1rem, 3vw, 2rem); background: rgba(0, 0, 0, .7); font-size: .8125rem; }
.mm-capa-credito a { color: inherit; }
/* O guia da casa (`mm-guide`) na coluna da capa: um painel com contorno próprio sobre a foto. */
.mm-capa-lado > .mm-guide { padding: 1rem 1.25rem; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); background: rgba(0, 0, 0, .6); }
/* A capa da home que é ferramenta: mais baixa, para a busca continuar na primeira tela. */
.mm-capa-compacta .mm-capa-corpo { padding-top: 2rem; padding-bottom: 2rem; padding-block: clamp(1.5rem, 4vw, 3rem); }
.mm-capa-compacta .mm-capa-titulo { font-size: 2rem; font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.5rem); }
.mm-capa-compacta .mm-capa-texto { font-size: 1.0625rem; }
.mm-capa-compacta .mm-capa-acoes { margin-top: 1.5rem; }
/* As seções depois da capa. */
.mm-apresentacao h2 { margin: 0 0 1rem; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); line-height: 1.15; font-weight: 600; text-wrap: balance; }
.mm-apresentacao h3 { margin: 0 0 .25rem; font-size: 1.0625rem; font-weight: 600; }
.mm-apr-texto { margin: 0; font-size: 1.0625rem; color: var(--bs-secondary-color); }
.mm-apr-pilares p, .mm-apr-evento p, .mm-apr-principios p { margin: 0; font-size: .9375rem; color: var(--bs-secondary-color); }
.mm-apr-metodo, .mm-apr-destaque-corpo { display: grid; gap: clamp(1.5rem, 4vw, 3rem); padding: clamp(1.25rem, 4vw, 3rem); }
.mm-apr-metodo { align-items: center; }
.mm-apr-destaque-corpo { align-items: end; }
.mm-apr-foto { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.mm-apr-figura { margin: 0; }
.mm-apr-credito { margin: .5rem 0 0; font-size: .8125rem; color: var(--bs-secondary-color); }
.mm-apr-credito a { color: inherit; }
.mm-apr-pilares { margin-top: 1.75rem; border-top: var(--bs-border-width) solid var(--bs-border-color); }
.mm-apr-pilares > .list-group-item { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1rem; padding: 1.1rem 0; background: transparent; }
.mm-apr-pilares > .list-group-item:last-child { border-bottom-width: var(--bs-border-width); }
.mm-apr-icone { display: inline-grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: var(--bs-border-radius); background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); font-size: 1.2rem; }
.mm-apr-destaque { --bs-card-border-color: var(--mm-borda-pagina, var(--bs-border-color)); }
.mm-apr-previa-corpo { display: grid; }
.mm-apr-contexto { padding: 1.25rem; border-bottom: var(--bs-border-width) solid var(--bs-border-color); }
.mm-apr-contexto > p { margin: 0 0 .75rem; font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--bs-secondary-color); }
.mm-apr-legenda { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0; padding: 0; list-style: none; font-size: .9375rem; }
.mm-apr-legenda li { display: flex; align-items: center; gap: .5rem; }
.mm-apr-ponto { flex: none; width: .625rem; height: .625rem; border-radius: 50%; background: var(--mm-apr-cor, var(--bs-secondary-color)); }
.mm-apr-cor-blue { --mm-apr-cor: var(--bs-blue); }
.mm-apr-cor-indigo { --mm-apr-cor: var(--bs-indigo); }
.mm-apr-cor-purple { --mm-apr-cor: var(--bs-purple); }
.mm-apr-cor-pink { --mm-apr-cor: var(--bs-pink); }
.mm-apr-cor-red { --mm-apr-cor: var(--bs-red); }
.mm-apr-cor-orange { --mm-apr-cor: var(--bs-orange); }
.mm-apr-cor-yellow { --mm-apr-cor: var(--bs-yellow); }
.mm-apr-cor-green { --mm-apr-cor: var(--bs-green); }
.mm-apr-cor-teal { --mm-apr-cor: var(--bs-teal); }
.mm-apr-cor-cyan { --mm-apr-cor: var(--bs-cyan); }
/* A linha do tempo do exemplo: um traço de ponto a ponto, e a divisória só na coluna do texto. */
.mm-apr-linha { display: grid; row-gap: 1rem; margin: 0; padding: 1.25rem 1.5rem; list-style: none; }
.mm-apr-linha > li { position: relative; display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: 1rem; }
.mm-apr-linha > li:not(:last-child)::before { content: ""; position: absolute; top: 1.35rem; bottom: -1.05rem; left: calc(.5rem - .5px); width: 1px; background: var(--bs-border-color); }
.mm-apr-linha .mm-apr-ponto { width: 1rem; height: 1rem; margin-top: .2rem; }
.mm-apr-evento { min-width: 0; padding-bottom: 1rem; border-bottom: var(--bs-border-width) solid var(--bs-border-color); }
.mm-apr-linha > li:last-child .mm-apr-evento { padding-bottom: 0; border-bottom: 0; }
.mm-apr-evento > p:first-child { font-size: .8125rem; }
.mm-apr-fatos { min-width: 0; padding: 1.25rem 1.5rem; }
.mm-apr-fatos > p { margin: 0 0 1rem; }
.mm-apr-fatos > .mm-facts { margin: 0 0 1rem; }
.mm-apr-cabeca { padding: clamp(1.25rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3rem) 1.5rem; }
.mm-apr-cabeca h2 { margin-bottom: 0; }
.mm-apr-cabeca .mm-apr-texto { margin-top: .75rem; }
/* Os princípios em grade; o vão de 1px, no tom da borda, é a divisória entre eles. */
.mm-apr-principios { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--bs-border-color); }
.mm-apr-principios > li { padding: clamp(1.25rem, 3vw, 2rem); background: var(--bs-card-bg); }
.mm-apr-principios .bi { font-size: 1.5rem; color: var(--bs-primary-text-emphasis); }
.mm-apr-principios h3 { margin: 1rem 0 .4rem; }
.mm-apr-chamada { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; padding: clamp(1.25rem, 4vw, 3rem); }
.mm-apr-chamada > div { flex: 1 1 32rem; min-width: 0; }
@media (max-width: 575.98px) {
  .mm-capa-sinais dd { display: none; }
  .mm-capa-acoes > .btn, .mm-apr-chamada > .btn { flex: 1 1 100%; }
}
@media (min-width: 576px) {
  .mm-apr-principios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .mm-capa:not(.mm-capa-compacta) { min-height: min(80svh, 46rem); }
  .mm-apr-com-legenda { grid-template-columns: 10rem minmax(0, 1fr); }
  .mm-apr-com-legenda > .mm-apr-contexto { border-bottom: 0; border-right: var(--bs-border-width) solid var(--bs-border-color); }
  .mm-apr-com-legenda .mm-apr-legenda { flex-direction: column; }
}
@media (min-width: 992px) {
  .mm-capa-corpo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .mm-capa-principal { grid-column: 1; }
  .mm-apr-metodo:not(.mm-apr-sem-foto) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mm-apr-destaque-corpo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .mm-apr-principios { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}
.mm-reference-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-bottom: 1px solid var(--mm-border); padding-block: 1rem; }
.mm-reference .mm-bloco { padding-block: 2rem; }
.mm-reference pre { padding: 1rem; border: 1px solid var(--mm-border); background: var(--mm-surface); border-radius: var(--mm-radius); overflow: auto; font-size: .875rem; }
/* Apenas composição: campos e botões das referências também são Bootstrap. */
.mm-form p { display: grid; gap: .35rem; margin: 0 0 1.1rem; }
.mm-form label { font-weight: 600; }
.mm-form select[multiple] { min-height: 7rem; }
.mm-form textarea { min-height: 8rem; resize: vertical; }
.mm-reference footer { padding-block: 1.5rem; border-top: 1px solid var(--mm-border); }

@media (min-width: 768px) {
  .mm-grid-2, .mm-grid-3, .mm-split-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .mm-opening:has(.mm-guide > p), .mm-opening:has(details[open]) { grid-template-columns: minmax(0, 3fr) minmax(18rem, 2fr); }
  .mm-opening:has(.mm-guide > p) .mm-guide, .mm-opening:has(details[open]) .mm-guide { padding-inline-start: 1.25rem; border-inline-start: 1px solid var(--mm-border); }
  .mm-hero { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 2.5rem; }
  .mm-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mm-split { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .mm-split-aside { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
  .mm-opening { padding-block: 1rem; gap: .75rem; }
  .mm-hero, .mm-intro { padding-top: 1.5rem; }
  .mm-panel { --mm-panel-pad: 1rem; }
  .mm-panel-flush > .mm-panel-head, .mm-panel-flush > .mm-panel-body, .mm-panel-flush .list-group-flush .list-group-item, .mm-panel-flush .mm-rows > * { padding-inline: 1rem; }
  .mm-kpi-value, .mm-kpi dd { font-size: 1.375rem; }
  .mm-opening:has(.mm-guide > p) .mm-guide, .mm-opening:has(details[open]) .mm-guide { padding-inline-start: 0; border-inline-start: 0; border-top: 1px solid var(--mm-border); }
  .mm-task { margin-block: 1rem; }
  .mm-human .mm-precos td:last-child { min-width: 5.5rem; }
}
/* O ACABAMENTO DE TODA TELA (AGENTS-UI § Acabamento): o que o Bootstrap não faz sozinho e vale para todo controle da
   casa — o alvo que o dedo acerta, a tela que aguenta o texto ampliado e o movimento que mostra o que mudou. A cor do
   que se clica está no `tema.css`; a barra, o rodapé e o diálogo da casa têm estas regras nas partes deles
   (`cabecalho.css`, `rodape.css`, `contato.css`), que também vão à Grade pelo `chrome.css`. */

/* TEXTO AMPLIADO (WCAG 1.4.4 e 1.4.10), medido com a letra em 200% num celular de 390 px (26/09/2026): o campo que
   cresce numa linha flex (`flex-grow-1`) não encolhia abaixo dos 20 caracteres do `size` padrão e empurrava a tela
   para o lado; o título de uma palavra comprida passava da caixa. */
.form-control, .form-select { min-width: 0; }
/* A palavra que não cabe na linha (o e-mail na pergunta "Revogar o convite de dora@…?", o título de uma palavra só)
   quebra em vez de passar da caixa; a que cabe não muda, e a tabela e o `pre` seguem as regras deles. */
body { overflow-wrap: break-word; }
.toast-body > .flex-grow-1 { min-width: 0; overflow-wrap: break-word; }
/* O título do modal do Bootstrap (o paywall: um bloco com o título e a linha de apoio) encolhe antes de empurrar o ×
   para fora da caixa, que esconde o excesso. */
.modal-header > :first-child, .modal-title { min-width: 0; }
/* O texto ao lado do ícone num item de lista (as notas da `Confirmacao`, os recursos do plano): um e-mail ou endereço
   comprido quebra em vez de empurrar a lista para fora da caixa. */
.list-unstyled > li.d-flex > span:last-child { min-width: 0; overflow-wrap: anywhere; }
/* O texto só para o leitor de tela (`visually-hidden`, que é `position: absolute`) na ponta de uma tabela larga escapava
   da rolagem dela e dava rolagem de lado à página inteira (390 → 409 px na `Tabela` da galeria): a caixa que rola passa
   a conter o que está dentro dela. */
.table-responsive { position: relative; }
/* E na raiz da causa: o texto só para o leitor de tela fica no canto da caixa que o contém, e não onde o texto dele
   estaria — na ponta de um crachá ("1.000 endereços" no acervo) ele caía fora da tela e a página rolava de lado. */
.visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within) { top: 0; left: 0; }
/* Nenhum campo mais largo que a caixa dele (o campo sem classe, de 20 caracteres, passava da capa com a letra em 200%). */
input, select, textarea { max-width: 100%; }
/* O rótulo é `inline-block` no Bootstrap, e a largura dele não desce abaixo da palavra mais comprida: com a letra em
   200%, o "independentemente" do aceite da recuperação de conta levava o rótulo do checkbox para fora da tela. Assim a
   palavra que não cabe quebra; a que cabe fica como está. */
label { overflow-wrap: anywhere; }

/* ALVO DE TOQUE: no dedo (`pointer: coarse`), todo controle tem 44 px de altura (WCAG 2.5.5; os 24 px da 2.5.8 valem
   sempre, e o mouse fica com os tamanhos do Bootstrap). O piso é em px, a medida do dedo: em rem, com a letra em 200%
   o × do modal ia a 88 px e empurrava o título. Cresce pelo respiro das variáveis do próprio Bootstrap, nunca
   por altura fixa: o texto continua centrado e a linha que quebra continua cabendo. As contas: linha de 24 px (16 px ×
   1,5) + 2 × 9 px + 2 px de borda; no `-sm`, 21 px + 2 × 10,5 px + 2 px. A TV box (Chrome 52) não é `coarse`. */
@media (pointer: coarse) {
  .btn { --bs-btn-padding-y: .5625rem; min-width: 44px; }
  .btn-sm, .btn-group-sm > .btn { --bs-btn-padding-y: .65625rem; }
  .btn-lg, .btn-group-lg > .btn { --bs-btn-padding-y: .5rem; }
  .form-control:not([type="file"]), .form-select, .input-group-text { padding-top: .5625rem; padding-bottom: .5625rem; }
  .form-control-sm:not([type="file"]), .form-select-sm, .input-group-sm > .input-group-text,
  .input-group-sm > .form-control, .input-group-sm > .form-select, .input-group-sm > .btn {
    padding-top: .65625rem;
    padding-bottom: .65625rem;
  }
  .form-control-lg:not([type="file"]), .form-select-lg, .input-group-lg > .input-group-text {
    padding-top: .5rem;
    padding-bottom: .5rem;
  }
  /* O campo de arquivo (o comprovante do Pix) cresce junto com o botão de escolher, que o Bootstrap cola nas bordas dele. */
  .form-control[type="file"] { padding-top: .5625rem; padding-bottom: .5625rem; }
  .form-control[type="file"]::file-selector-button {
    padding-top: .5625rem;
    padding-bottom: .5625rem;
    margin-top: -.5625rem;
    margin-bottom: -.5625rem;
  }
  .form-check { padding-top: .625rem; padding-bottom: .625rem; margin-bottom: 0; }
  .nav { --bs-nav-link-padding-y: .625rem; }
  .pagination { --bs-pagination-padding-y: .5625rem; }
  .pagination-sm { --bs-pagination-padding-y: .65625rem; }
  .pagination-lg { --bs-pagination-padding-y: .75rem; }
  .dropdown-menu { --bs-dropdown-item-padding-y: .625rem; }
  .list-group-item-action { --bs-list-group-item-padding-y: .625rem; }
  /* Pelo tamanho mínimo, e não pelo respiro: o `p-2`/`py-1` do Bootstrap que o componente traz (o × da aba, a sub-aba
     do grupo) é `!important`, e a caixa cresce igual; o × continua do tamanho da letra, no meio dela. */
  .btn-close { box-sizing: border-box; min-width: 44px; min-height: 44px; }
  .nav-link { min-height: 44px; }
  /* O botão que já é flex (ícone e texto centrados) cresce pela altura mínima, o `border-0`/`py-*` que ele traga não o
     encolhe (o grupo das `Facetas`); a pílula de uma linha (o filtro ativo, `rounded-pill py-0`), pela entrelinha. */
  .btn.d-flex, .btn.d-inline-flex { min-height: 44px; }
  .btn.rounded-pill.py-0 { line-height: 42px; }
}

/* MOVIMENTO: o que abre por cima (menu suspenso, aviso) e a vista que troca entram em 150–200 ms, para a pessoa ver de
   onde veio a mudança — só para quem não pediu menos movimento; a TV box não conhece a consulta e fica sem. O diálogo
   e o menu de idioma da casa entram pelas partes deles. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes mm-aparece {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes mm-surge {
    from { opacity: 0; transform: translateY(.5rem); }
    to { opacity: 1; transform: none; }
  }
  /* Só a opacidade: o Popper do Bootstrap posiciona o menu por `transform`, que a animação atropelaria. */
  .dropdown-menu.show { animation: mm-aparece .15s ease-out; }
  .toast.show { animation: mm-surge .2s ease-out; }
  /* A aba que a pessoa trouxe para a frente (a `Area` marca `mm-entra` só na troca, nunca no primeiro desenho). */
  .tab-content > .mm-entra { animation: mm-aparece .15s ease-out; }
}