/* 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/telas.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). */
/* Bootstrap 5.3 não adapta o botão outline ao modo escuro: #0d6efd sobre #212529 dá 3,5:1 e o axe exige 4,5:1.
   No escuro o outline veste a cor de ênfase do tema (a mesma que o Bootstrap usa para texto). */
[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color: var(--bs-primary-text-emphasis);
  --bs-btn-border-color: var(--bs-primary-text-emphasis);
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: var(--bs-primary-text-emphasis);
  --bs-btn-hover-border-color: var(--bs-primary-text-emphasis);
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: var(--bs-primary-text-emphasis);
  --bs-btn-active-border-color: var(--bs-primary-text-emphasis);
  --bs-btn-disabled-color: var(--bs-primary-text-emphasis);
  --bs-btn-disabled-border-color: var(--bs-primary-text-emphasis);
}
[data-bs-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: var(--bs-secondary-text-emphasis);
  --bs-btn-border-color: var(--bs-secondary-text-emphasis);
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: var(--bs-secondary-text-emphasis);
  --bs-btn-hover-border-color: var(--bs-secondary-text-emphasis);
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: var(--bs-secondary-text-emphasis);
  --bs-btn-active-border-color: var(--bs-secondary-text-emphasis);
  --bs-btn-disabled-color: var(--bs-secondary-text-emphasis);
  --bs-btn-disabled-border-color: var(--bs-secondary-text-emphasis);
}
: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-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; }
.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: 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-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. */
.mm-topnav { display: flex; flex-wrap: wrap; align-items: stretch; min-width: 0; margin: 0 0 0 -.75rem; padding: 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, .mm-chrome .mm-menu-item[aria-current="page"] { color: var(--mmc-texto); font-weight: 600; border-bottom-color: currentColor; }
@media (max-width: 575.98px) {
  .mm-topnav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .mm-topnav::-webkit-scrollbar { display: none; }
  .mm-chrome .mm-menu-item { flex-shrink: 0; }
  .mm-chrome .mm-menu-item.mm-oferta { position: sticky; right: 0; 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;
}
/* 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); }

/* 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-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; }
  .mm-tools .mm-rotulo { display: none; }
  .mm-chrome .mm-acao, .mm-chrome .mm-ctl { padding-inline: .55rem; }
}
@media (max-width: 379.98px) {
  .mm-assuntos .mm-ico { display: none; }
}
/* ── 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); }
.mm-need { display: flex; flex-direction: column; gap: .4rem; padding: 1rem 1.1rem; border: 1px solid var(--mm-border); border-radius: var(--mm-radius); background: var(--mm-surface); color: var(--mm-text); text-decoration: none; }
.mm-need > .bi, .mm-need > svg { font-size: 1.5rem; width: 1.5rem; height: 1.5rem; color: var(--mm-accent-text); }
.mm-need h3 { margin: 0; font-size: 1.0625rem; font-weight: 700; }
.mm-need p { margin: 0; font-size: .9375rem; color: var(--mm-muted); }
.mm-need-cta { margin-top: auto; padding-top: .25rem; font-weight: 600; color: var(--mm-accent-text); }
a.mm-need:hover, button.mm-need:hover { border-color: var(--mm-accent-text); color: var(--mm-text); }
.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); }
.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; }
/* 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`). É a regra do `.hp-faixa` do HookPulse, agora na SDK. */
.mm-faixa { flex-wrap: wrap-reverse; 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-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; }
.mm-footer details summary { cursor: pointer; }

/* 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: .6875rem; 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 .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); 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); }
.mm-contato-caixa { display: grid; gap: 1rem; padding: 1.25rem; }
.mm-contato-cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.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, .mm-contato-x:focus-visible { background: var(--mm-surface-2); color: var(--mm-text); }
.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%; 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); }
.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; }
}