/* GERADO por scripts/sync-assets.mjs a partir de assets/human-ui/material.css, assets/../packages/ui/src/abas/abas-material.css, assets/human-ui/material-componentes.css, assets/human-ui/material-paginas.css, assets/human-ui/material-cores.css: edite as partes. */
/* O ESTILO MATERIAL: todo app entra na lista MATERIAL de `scripts/assets-material.mjs`, o `Documento` marca o
   `<html>` com `data-mm-estilo="material"` e o `FolhasDaCasa` carrega esta folha depois do `human-ui.css`. Os
   componentes do método ficam em `material-componentes.css`, montado junto. Dono, 10/10/2026, sobre a nova Conta Google: "quero
   adotar aquele estilo/método em tudo, tudo mesmo" (método em docs/ui-metodo-conta-google.md). Material 3: fundo
   neutro claro, contêineres brancos de canto grande, botão em pílula, a cor da marca só na ação principal e no
   estado, letra Google Sans Flex. A folha configura os tokens da SDK (`--ui-*`, `--mm-*` e a paleta da barra) e a forma das
   peças; os componentes da galeria continuam os mesmos. Cores do EditalMD geradas pela material-color-utilities
   (Apache 2.0, esquema tonal da semente #1b3fa0), com a cor da marca como primária no tema claro. */
@font-face {
  font-family: "Google Sans Flex";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("/vendor/google-sans-flex-5.3.1/google-sans-flex-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Google Sans Flex";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("/vendor/google-sans-flex-5.3.1/google-sans-flex-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* A LETRA DA TV BOX (a Grade, Chrome 52, que não lê fonte variável; docs/ui-tv.md): instâncias estáticas da mesma
   fonte, em família própria, que só a paleta da Grade usa. Os outros apps não as baixam. */
@font-face { font-family: "Google Sans Flex TV"; font-style: normal; font-weight: 400; font-display: swap; src: url("/vendor/google-sans-flex-5.3.1/google-sans-flex-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Google Sans Flex TV"; font-style: normal; font-weight: 500; font-display: swap; src: url("/vendor/google-sans-flex-5.3.1/google-sans-flex-latin-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Google Sans Flex TV"; font-style: normal; font-weight: 400; font-display: swap; src: url("/vendor/google-sans-flex-5.3.1/google-sans-flex-latin-ext-400.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Google Sans Flex TV"; font-style: normal; font-weight: 500; font-display: swap; src: url("/vendor/google-sans-flex-5.3.1/google-sans-flex-latin-ext-500.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root[data-mm-estilo="material"][data-mm-paleta="iptv"] {
  --ui-font-sans-serif: "Google Sans Flex TV", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* A PALETA, por papel do Material 3. */
:root[data-mm-estilo="material"] {
  --mmm-fundo: #f0f3fa;
  --mmm-contem: #fff;
  --mmm-contem-alto: #e9e7ef;
  --mmm-tinta: #1a1b21;
  --mmm-suave: #45464f;
  /* A divisória e o contorno passam 3:1 sobre o contêiner e o fundo (regra 5 do AGENTS-UI). */
  --mmm-linha: #8f909a;
  --mmm-contorno: #767680;
  /* A divisória decorativa entre linhas de um grupo (outline-variant), que não identifica controle. */
  --mmm-divisoria: #c6c5d0;
  --mmm-primaria: #1b3fa0;
  --mmm-primaria-rgb: 27, 63, 160;
  --mmm-primaria-forte: #142f7a;
  --mmm-sobre-primaria: #fff;
  --mmm-recipiente: #dce1ff;
  --mmm-sobre-recipiente: #344479;
  --mmm-tonal: #dee1f9;
  --mmm-sobre-tonal: #414659;
  --mmm-raio: 1.75rem;
  --mmm-raio-medio: 1rem;
  --mmm-raio-campo: .5rem;
  --mmm-coluna: 45rem;
  --ui-font-sans-serif: "Google Sans Flex", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ui-body-font-family: var(--ui-font-sans-serif);
  --ui-body-color: #1a1b21; --ui-body-color-rgb: 26, 27, 33;
  --ui-body-bg: #f0f3fa; --ui-body-bg-rgb: 240, 243, 250;
  --ui-emphasis-color: #1a1b21; --ui-emphasis-color-rgb: 26, 27, 33;
  --ui-secondary-color: #45464f; --ui-secondary-color-rgb: 69, 70, 79;
  --ui-tertiary-color: #45464f; --ui-tertiary-color-rgb: 69, 70, 79;
  --ui-secondary-bg: #e9e7ef; --ui-secondary-bg-rgb: 233, 231, 239;
  --ui-tertiary-bg: #fff; --ui-tertiary-bg-rgb: 255, 255, 255;
  --ui-primary: #1b3fa0; --ui-primary-rgb: 27, 63, 160;
  --ui-primary-text-emphasis: #1b3fa0;
  --ui-primary-bg-subtle: #dce1ff;
  --ui-primary-border-subtle: #767680;
  --ui-border-color: #767680;
  --ui-border-color-translucent: rgba(26, 27, 33, .12);
  --ui-border-radius: .75rem; --ui-border-radius-sm: .5rem; --ui-border-radius-lg: 1rem;
  --ui-border-radius-xl: 1.75rem; --ui-border-radius-xxl: 1.75rem;
  --ui-box-shadow: none; --ui-box-shadow-sm: none; --ui-box-shadow-lg: 0 1px 3px rgba(26, 27, 33, .15);
  --ui-focus-ring-color: rgba(27, 63, 160, .35);
  --mm-link: #1b3fa0; --mm-link-rgb: 27, 63, 160;
  --mm-link-hover: #142f7a; --mm-link-hover-rgb: 20, 47, 122;
  --mm-acao-primary: #1b3fa0; --mm-acao-primary-rgb: 27, 63, 160;
  --mm-acao-secondary: #45464f; --mm-acao-secondary-rgb: 69, 70, 79;
  --mm-acao-sobre: #fff;
  --mm-accent-hover: #142f7a;
}
:root[data-mm-estilo="material"][data-mm-theme="dark"] {
  --mmm-fundo: #121318;
  --mmm-contem: #1e1f25;
  --mmm-contem-alto: #292a2f;
  --mmm-tinta: #e3e1e9;
  --mmm-suave: #c6c6d0;
  --mmm-linha: #6b6c75;
  --mmm-contorno: #8f909a;
  --mmm-divisoria: #46464f;
  --mmm-primaria: #b6c4ff;
  --mmm-primaria-rgb: 182, 196, 255;
  --mmm-primaria-forte: #d0d8ff;
  --mmm-sobre-primaria: #1d2d61;
  --mmm-recipiente: #344479;
  --mmm-sobre-recipiente: #dce1ff;
  --mmm-tonal: #414659;
  --mmm-sobre-tonal: #dee1f9;
  --ui-body-color: #e3e1e9; --ui-body-color-rgb: 227, 225, 233;
  --ui-body-bg: #121318; --ui-body-bg-rgb: 18, 19, 24;
  --ui-emphasis-color: #e3e1e9; --ui-emphasis-color-rgb: 227, 225, 233;
  --ui-secondary-color: #c6c6d0; --ui-secondary-color-rgb: 198, 198, 208;
  --ui-tertiary-color: #c6c6d0; --ui-tertiary-color-rgb: 198, 198, 208;
  --ui-secondary-bg: #292a2f; --ui-secondary-bg-rgb: 41, 42, 47;
  --ui-tertiary-bg: #1e1f25; --ui-tertiary-bg-rgb: 30, 31, 37;
  --ui-primary: #b6c4ff; --ui-primary-rgb: 182, 196, 255;
  --ui-primary-text-emphasis: #b6c4ff;
  /* O fundo suave do escuro fica perto do fundo, para o texto de sinal (verde, vermelho) passar 4,5:1 nele. */
  --ui-primary-bg-subtle: #232c4a;
  --ui-primary-border-subtle: #8f909a;
  --ui-border-color: #8f909a;
  --ui-border-color-translucent: rgba(227, 225, 233, .14);
  --ui-focus-ring-color: rgba(182, 196, 255, .45);
  --mm-link: #b6c4ff; --mm-link-rgb: 182, 196, 255;
  --mm-link-hover: #d0d8ff; --mm-link-hover-rgb: 208, 216, 255;
  --mm-acao-primary: #b6c4ff; --mm-acao-primary-rgb: 182, 196, 255;
  --mm-acao-secondary: #c6c6d0; --mm-acao-secondary-rgb: 198, 198, 208;
  --mm-acao-sobre: #1d2d61;
  --mm-accent-hover: #d0d8ff;
  --mm-on-accent: #1d2d61;
  /* O texto escuro sobre o preenchimento vale também para o perigo: o vermelho claro do Material 3 no escuro. */
  --mm-danger-fill: #ffb4ab;
  --mm-danger-hover: #ffdad6;
}

/* A BARRA E O RODAPÉ: o mesmo componente, no fundo da página, sem arte, com itens em pílula. */
:root[data-mm-estilo="material"] .mm-chrome, :root[data-mm-estilo="material"] .mm-footer,
:root[data-mm-estilo="material"] .mm-pular {
  --mmc-fundo: var(--mmm-fundo); --mmc-fundo-2: var(--mmm-contem-alto); --mmc-borda: transparent;
  --mmc-texto: var(--mmm-tinta); --mmc-suave: var(--mmm-suave); --mmc-link: var(--mmm-primaria);
  --mmc-acento: var(--mmm-primaria); --mmc-foco: var(--mmm-primaria);
  --mmc-cracha: var(--mmm-primaria); --mmc-cracha-texto: var(--mmm-sobre-primaria);
  --mmc-sombra-barra: none; --mmc-raio: 999px;
  --mmc-arte-cabecalho: none; --mmc-arte-rodape: none;
}
:root[data-mm-estilo="material"] .mm-chrome .mm-menu-item {
  margin: .25rem .125rem; padding-left: 1rem; padding-right: 1rem; border: 0; border-radius: 999px; color: var(--mmm-suave);
  font-weight: 500;
}
:root[data-mm-estilo="material"] .mm-chrome .mm-menu-item.active,
:root[data-mm-estilo="material"] .mm-chrome .mm-menu-item[aria-current="page"] {
  color: var(--mmm-sobre-tonal); background: var(--mmm-tonal); font-weight: 600; border-bottom-color: transparent;
}
:root[data-mm-estilo="material"] .mm-chrome .mm-brand > span { font-size: 1.375rem; font-weight: 500; letter-spacing: 0; }

/* A LETRA E A ESCALA do Material 3: título leve e grande, corpo 16/24. */
:root[data-mm-estilo="material"] body { background: var(--mmm-fundo); font-size: 1rem; line-height: 1.5; }
:root[data-mm-estilo="material"] main h1, :root[data-mm-estilo="material"] main .h1 { font-size: 2rem; line-height: 2.5rem; font-weight: 400; }
:root[data-mm-estilo="material"] main h2, :root[data-mm-estilo="material"] main .h2 { font-size: 1.5rem; line-height: 2rem; font-weight: 400; }
:root[data-mm-estilo="material"] main h3, :root[data-mm-estilo="material"] main .h3 { font-size: 1.375rem; line-height: 1.75rem; font-weight: 400; }
:root[data-mm-estilo="material"] main h4, :root[data-mm-estilo="material"] main .h4,
:root[data-mm-estilo="material"] main h5, :root[data-mm-estilo="material"] main .h5 { font-size: 1rem; line-height: 1.5rem; font-weight: 500; }
:root[data-mm-estilo="material"] a { text-decoration: none; }
:root[data-mm-estilo="material"] a:hover, :root[data-mm-estilo="material"] a:active { text-decoration: underline; }
:root[data-mm-estilo="material"] :focus-visible { outline: 2px solid var(--mmm-primaria); outline-offset: 2px; }

/* OS CONTÊINERES: branco sobre o fundo, sem borda nem sombra, canto grande; a arte de fundo sai. */
:root[data-mm-estilo="material"] .card {
  --ui-card-bg: var(--mmm-contem); --ui-card-border-width: 0; --ui-card-border-radius: var(--mmm-raio);
  --ui-card-inner-border-radius: var(--mmm-raio); background-image: none;
}
/* O contêiner dentro de outro tem o canto médio, e o de dentro dele também: com o canto interno grande, a faixa de cima
   (a imagem ou o ícone do Catalogo) e o título ficavam mais redondos que o cartão (dono, 11/10/2026: "essas bordas"). */
:root[data-mm-estilo="material"] .card .card {
  --ui-card-border-radius: var(--mmm-raio-medio); --ui-card-inner-border-radius: var(--mmm-raio-medio);
  background: var(--mmm-fundo);
}
/* O painel da casa (a página de leitura, a área de trabalho) é contêiner: branco, sem borda; o grupo de linhas dentro
   dele fica no tom do fundo, para separar sem caixa a mais. */
:root[data-mm-estilo="material"] .mm-panel {
  border: 0; border-radius: var(--mmm-raio); background: var(--mmm-contem); box-shadow: none;
}
:root[data-mm-estilo="material"] .mm-panel .mm-linhas { background: var(--mmm-fundo); }
/* O fundo suave com borda (`border rounded bg-body-tertiary`, a nota do preço e afins) vira contêiner: sem borda. */
:root[data-mm-estilo="material"] main .border.rounded.bg-body-tertiary {
  border-color: transparent !important; border-radius: var(--mmm-raio) !important; padding: 1.5rem !important;
}
:root[data-mm-estilo="material"] .bg-body-tertiary { background-color: var(--mmm-contem) !important; }

/* OS BOTÕES: pílula, a cor cheia só na ação principal; o contorno é neutro. O canto é metade da altura de uma linha,
   não 999px: com a letra grande, o botão que quebra em três linhas virava um círculo (11/10/2026). */
:root[data-mm-estilo="material"] .btn {
  --ui-btn-border-radius: 1.25rem; --ui-btn-font-weight: 500; --ui-btn-padding-x: 1.5rem; --ui-btn-padding-y: .625rem;
  min-height: 2.5rem;
}
:root[data-mm-estilo="material"] .btn-sm {
  --ui-btn-border-radius: 1rem; --ui-btn-padding-x: 1rem; --ui-btn-padding-y: .375rem; min-height: 2rem;
}
:root[data-mm-estilo="material"] .btn-lg {
  --ui-btn-border-radius: 1.5rem; --ui-btn-padding-x: 1.75rem; --ui-btn-padding-y: .75rem; min-height: 3rem;
}
:root[data-mm-estilo="material"] .btn-primary {
  --ui-btn-bg: var(--mmm-primaria); --ui-btn-border-color: var(--mmm-primaria); --ui-btn-color: var(--mmm-sobre-primaria);
  --ui-btn-hover-bg: var(--mmm-primaria-forte); --ui-btn-hover-border-color: var(--mmm-primaria-forte);
  --ui-btn-hover-color: var(--mmm-sobre-primaria); --ui-btn-active-bg: var(--mmm-primaria-forte);
  --ui-btn-active-border-color: var(--mmm-primaria-forte); --ui-btn-active-color: var(--mmm-sobre-primaria);
}
:root[data-mm-estilo="material"] .btn-outline-primary, :root[data-mm-estilo="material"] .btn-outline-secondary {
  --ui-btn-color: var(--mmm-primaria); --ui-btn-border-color: var(--mmm-contorno); --ui-btn-bg: transparent;
  --ui-btn-hover-color: var(--mmm-primaria); --ui-btn-hover-bg: rgba(var(--mmm-primaria-rgb), .08);
  --ui-btn-hover-border-color: var(--mmm-contorno); --ui-btn-active-color: var(--mmm-primaria);
  --ui-btn-active-bg: rgba(var(--mmm-primaria-rgb), .12); --ui-btn-active-border-color: var(--mmm-contorno);
}
:root[data-mm-estilo="material"] .badge { border-radius: 999px; font-weight: 500; }
/* O texto sobre a cor da marca (`text-bg-primary`: o selo "Mais escolhido", a oferta do selo da conta) é o par dela no
   tema, como no botão cheio: o branco do Bootstrap some na primária clara do tema escuro (dono, 11/10/2026). */
:root[data-mm-estilo="material"] .text-bg-primary { color: var(--mmm-sobre-primaria) !important; }

/* OS CAMPOS: contorno fino e canto pequeno; a busca principal é uma pílula no tom alto. */
:root[data-mm-estilo="material"] .form-control, :root[data-mm-estilo="material"] .form-select {
  border-color: var(--mmm-contorno); border-radius: var(--mmm-raio-campo); background-color: var(--mmm-contem);
}
:root[data-mm-estilo="material"] .form-control:focus, :root[data-mm-estilo="material"] .form-select:focus {
  border-color: var(--mmm-primaria); box-shadow: 0 0 0 1px var(--mmm-primaria);
}
:root[data-mm-estilo="material"] .mm-busca-pilula {
  min-height: 3.5rem; padding-left: 1.5rem; padding-right: 1.5rem; border: 0; border-radius: 999px;
  background-color: var(--mmm-contem-alto);
}
:root[data-mm-estilo="material"] .form-select.mm-busca-pilula { padding-right: 3rem; background-position: right 1.25rem center; }
:root[data-mm-estilo="material"] .form-check-input:checked { background-color: var(--mmm-primaria); border-color: var(--mmm-primaria); }

/* O RODAPÉ: links em texto simples, sem selo em volta, como o pé das páginas do Google. */
:root[data-mm-estilo="material"] .mm-footer .mm-selo {
  border-color: transparent; background: transparent; padding-left: .25rem; padding-right: .25rem; color: var(--mmm-suave);
}
:root[data-mm-estilo="material"] .mm-footer .mm-selo:hover,
:root[data-mm-estilo="material"] .mm-footer .mm-selo:active { color: var(--mmm-tinta); }

/* A CAPA: sem caixa e sem arte, centrada numa coluna estreita, com a busca embaixo do título. O fundo só sai da capa
   que segue o tema da página: a capa escura (`data-mm-theme="dark"`) tem texto claro e precisa do fundo dela. */
:root[data-mm-estilo="material"] .mm-capa { border: 0; margin-top: 1.5rem; }
:root[data-mm-estilo="material"] .mm-capa.mm-capa-tema-pagina { background: transparent; }
:root[data-mm-estilo="material"] .mm-capa.mm-capa-tema-pagina::before { display: none; }
:root[data-mm-estilo="material"] .mm-capa-corpo {
  display: block; max-width: var(--mmm-coluna); margin-left: auto; margin-right: auto; padding: 2rem 0 1rem;
  text-align: center;
}
:root[data-mm-estilo="material"] .mm-capa-titulo { font-size: 2.75rem; line-height: 3.25rem; font-weight: 400; }
:root[data-mm-estilo="material"] .mm-capa-texto { max-width: none; margin: .75rem auto 0; color: var(--mmm-suave); font-size: 1rem; }
:root[data-mm-estilo="material"] .mm-capa-lado { margin-top: 1.75rem; text-align: start; }
:root[data-mm-estilo="material"] .mm-capa .mm-kicker { display: none; }
@media (max-width: 600px) {
  :root[data-mm-estilo="material"] .mm-capa-titulo { font-size: 2rem; line-height: 2.5rem; }
}
/* No computador, a capa ocupa a largura do conteúdo, como a oferta e as abas: o texto, a ação e o apoio (ou a busca)
   à esquerda, alinhados, e a ilustração na coluna da direita, centrada nela. Centrada numa coluna estreita, ela ficava
   solta no meio da tela; só alinhada à esquerda, sobrava a tela vazia ao lado (dono, 11/10/2026: "no desktop fica
   bizarro o trem no meio da tela"; "tu não vai só jogar na lateral"). No celular segue empilhada e centrada. A TV box
   (Chrome 52) não lê `:has()` nem `display: contents`: fica com a ilustração em cima, à esquerda. */
@media (min-width: 768px) {
  :root[data-mm-estilo="material"] .mm-capa-corpo {
    align-self: stretch; width: 100%; max-width: none; margin-left: 0; text-align: start;
  }
  :root[data-mm-estilo="material"] .mm-capa-texto { margin-left: 0; margin-right: 0; }
  /* A sexta linha é flexível: a altura da ilustração vai para ela, sem abrir vão entre o título, o texto e a ação. */
  :root[data-mm-estilo="material"] .mm-capa-corpo:has(.mm-capa-ilustracao) {
    display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-rows: repeat(5, auto) 1fr;
    gap: 0 3rem; align-content: start;
  }
  :root[data-mm-estilo="material"] .mm-capa-corpo:has(.mm-capa-ilustracao) > .mm-capa-principal { display: contents; }
  :root[data-mm-estilo="material"] .mm-capa-corpo:has(.mm-capa-ilustracao) > *,
  :root[data-mm-estilo="material"] .mm-capa-corpo:has(.mm-capa-ilustracao) > .mm-capa-principal > * { grid-column: 1; }
  :root[data-mm-estilo="material"] .mm-capa-corpo:has(.mm-capa-ilustracao) .mm-capa-ilustracao {
    grid-column: 2; grid-row: 1 / -1; align-self: center; justify-self: center; width: 100%; max-width: 20rem; margin: 0;
  }
  /* A captura real ocupa metade da capa: a tela do produto precisa de largura para ser lida (12/10/2026). */
  :root[data-mm-estilo="material"] .mm-capa-corpo:has(.mm-capa-captura) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  :root[data-mm-estilo="material"] .mm-capa-corpo:has(.mm-capa-captura) .mm-capa-captura { max-width: none; }
  /* A altura mínima de 80% da tela era da capa com foto; com a ilustração, ela abria um vão antes dos sinais (os números
     do wendelmaques, que ficam fora do corpo, embaixo dele). */
  :root[data-mm-estilo="material"] .mm-capa:has(.mm-capa-ilustracao) { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-mm-estilo="material"] * { transition: none !important; animation: none !important; }
}
/* One tab style for Area, Fita, Abas and HTML consumers. The product supplies its palette.
   The class mm-abas-material also works without Bootstrap.
   Keep base selectors compatible with the Grade TV browser (Chrome 52). */
:root[data-mm-estilo="material"] .nav-tabs,
:root[data-mm-estilo="material"] .nav-underline,
.mm-abas-material {
  --ui-nav-tabs-border-color: var(--mmm-divisoria);
  --ui-nav-underline-border-width: 3px;
  display: flex; align-items: stretch; column-gap: .25rem; row-gap: 0;
  background: var(--mmm-contem);
  border-bottom: 1px solid var(--mmm-divisoria);
  border-radius: var(--mmm-raio-campo) var(--mmm-raio-campo) 0 0;
}
:root[data-mm-estilo="material"] .nav-tabs .nav-link,
:root[data-mm-estilo="material"] .nav-underline .nav-link,
.mm-abas-material .nav-link {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 3.5rem; padding: .875rem 1rem;
  border: 0; border-bottom: 3px solid transparent; border-radius: 0;
  color: var(--mmm-suave); background: transparent; font-weight: 500;
}
:root[data-mm-estilo="material"] .nav-tabs .nav-link:hover,
:root[data-mm-estilo="material"] .nav-underline .nav-link:hover,
.mm-abas-material .nav-link:hover,
:root[data-mm-estilo="material"] .nav-tabs .nav-link:active,
:root[data-mm-estilo="material"] .nav-underline .nav-link:active,
.mm-abas-material .nav-link:active {
  color: var(--mmm-tinta); background: var(--mmm-contem-alto);
}
:root[data-mm-estilo="material"] .nav-tabs .nav-link.active,
:root[data-mm-estilo="material"] .nav-underline .nav-link.active,
.mm-abas-material .nav-link.active {
  color: var(--mmm-sobre-tonal); background: var(--mmm-tonal); border-bottom-color: var(--mmm-primaria); font-weight: 700;
}
:root[data-mm-estilo="material"] .nav-tabs .nav-link:focus-visible,
:root[data-mm-estilo="material"] .nav-underline .nav-link:focus-visible,
.mm-abas-material .nav-link:focus-visible {
  outline: 2px solid var(--mmm-primaria); outline-offset: -2px;
}
:root[data-mm-estilo="material"] .nav-tabs .nav-link:disabled,
:root[data-mm-estilo="material"] .nav-underline .nav-link:disabled,
.mm-abas-material .nav-link:disabled,
:root[data-mm-estilo="material"] .nav-tabs .nav-link.disabled,
:root[data-mm-estilo="material"] .nav-underline .nav-link.disabled,
.mm-abas-material .nav-link.disabled {
  color: var(--mmm-suave); background: transparent; cursor: default;
}
:root[data-mm-estilo="material"] .nav-tabs .badge,
:root[data-mm-estilo="material"] .nav-underline .badge,
.mm-abas-material .badge {
  flex-shrink: 0; font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Area puts its tab list and end actions inside one strip. Only the outer strip has a divider. */
:root[data-mm-estilo="material"] .mm-faixa > .nav {
  border-bottom: 0; border-radius: 0; background: transparent;
}
/* The HTML consumer has no Bootstrap utilities for scrolling and button defaults. */
.mm-abas-material { flex-wrap: nowrap; overflow-x: auto; }
.mm-abas-material > .nav-link { flex-shrink: 0; font: inherit; font-weight: 500; cursor: pointer; }
/* OS COMPONENTES DO ESTILO MATERIAL (docs/ui-metodo-conta-google.md): os padrões do método (atalhos, linhas, oferta,
   "Procurando outra coisa?"), as abas, a ilustração e os contêineres da SDK. Vai montado em `assets/material.css`,
   depois de `material.css`, que dá os tokens (`scripts/assets-material.mjs`). */

/* OS CONTÊINERES DO BOOTSTRAP (`card border`, a faixa `border border-primary-subtle`): superfície sem borda sobre o
   fundo neutro, como os outros. */
:root[data-mm-estilo="material"] main .card.border,
:root[data-mm-estilo="material"] main section.border,
:root[data-mm-estilo="material"] .mm-servicos.border { border-color: transparent !important; }

/* O BLOCO DA CASA (`.mm-bloco`, @mm/ui/blocos) separa-se do anterior por uma linha; o primeiro do contêiner não tem
   anterior, e a linha dele riscava o alto do cartão. */
:root[data-mm-estilo="material"] .mm-bloco:first-child { border-top: 0; }

/* OS PASSOS (@mm/ui/passos): cada passo numa superfície sem borda, como os cartões; dentro de uma seção ou cartão branco,
   na cor do fundo da página (branco sobre branco, as caixas sumiam: HookPulse e My Stack a 390 px, 12/10/2026). */
:root[data-mm-estilo="material"] .mm-steps > li { border-color: transparent; border-radius: var(--mmm-raio-medio); background: var(--mmm-contem); }
:root[data-mm-estilo="material"] :is(.mm-secao, .card) .mm-steps > li { background: var(--mmm-fundo); }

/* A ILUSTRAÇÃO (@mm/ui/ilustracao): a versão do tema da página aparece e a outra some; a escura, lazy, nem carrega. */
.mm-ilustracao img { display: block; width: 100%; height: auto; border-radius: 28px; }
:root[data-mm-theme="dark"] .mm-ilustracao-dupla .mm-ilustracao-clara,
:root:not([data-mm-theme="dark"]) .mm-ilustracao-dupla .mm-ilustracao-escura { display: none; }
:root[data-mm-estilo="material"] .mm-capa-ilustracao { width: 280px; width: min(280px, 70%); margin: 0 auto 1.25rem; }
/* No computador, à esquerda, como o texto da capa; com `:has()`, a capa a põe ao lado do texto (`material.css`). */
@media (min-width: 768px) { :root[data-mm-estilo="material"] .mm-capa-ilustracao { margin-left: 0; margin-right: 0; } }
/* No celular, 140 px: com a barra e o menu em cima, a ação principal da capa ainda cabe na primeira tela (11/10/2026). */
@media (max-width: 575.98px) {
  :root[data-mm-estilo="material"] .mm-capa-ilustracao { width: 140px; margin-bottom: 1rem; }
}

/* As abas usam packages/ui/src/abas/abas-material.css, inclusive nos consumidores sem Bootstrap. */
/* Os filtros em pílula mantêm seu formato; a cor cheia pertence à ação principal da tela. */
:root[data-mm-estilo="material"] .nav-pills { --ui-nav-pills-border-radius: 999px; }
:root[data-mm-estilo="material"] .nav-pills .nav-link.active {
  color: var(--mmm-sobre-tonal); background: var(--mmm-tonal);
}

/* OS PADRÕES DO MÉTODO: atalhos em pílula, grupo de linhas num contêiner e o "Procurando outra coisa?". */
:root[data-mm-estilo="material"] .mm-coluna { max-width: var(--mmm-coluna); margin-left: auto; margin-right: auto; }
/* O detalhe sob pedido: o resumo de um <details> do SDK (o "Ver o que inclui" do plano) tem a cara de link. */
:root[data-mm-estilo="material"] .mm-plano-detalhes > summary { color: var(--mmm-primaria); font-weight: 500; cursor: pointer; }
/* O título de um item de resultado (dado de fora, às vezes de quatro linhas) fica em duas; o inteiro está na ficha. */
:root[data-mm-estilo="material"] .mm-coluna-larga h3 {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
/* A lista de resultados: um pouco mais larga que a coluna, como a página de resultados da busca. */
:root[data-mm-estilo="material"] .mm-coluna-larga {
  max-width: 60rem; margin-left: auto; margin-right: auto; border-radius: var(--mmm-raio);
}
:root[data-mm-estilo="material"] .mm-coluna-larga > .mm-panel-head { padding: 1.25rem 1.5rem .5rem; }
:root[data-mm-estilo="material"] .mm-coluna-larga h3 { font-size: 1.0625rem; line-height: 1.5rem; font-weight: 500; }
.mm-atalhos { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.mm-atalhos a {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.5rem; padding: .5rem 1rem;
  border: 1px solid var(--mmm-linha); border-radius: 999px; background: var(--mmm-contem); color: var(--mmm-tinta); font-weight: 500;
}
.mm-atalhos a:hover { background: var(--mmm-contem-alto); text-decoration: none; }
.mm-atalhos a:active { background: var(--mmm-tonal); text-decoration: none; }
.mm-atalhos .bi { color: var(--mmm-primaria); }
.mm-linhas { margin: 1.5rem 0 0; padding: .5rem 0; border-radius: var(--mmm-raio); background: var(--mmm-contem); }
.mm-linhas > h2 { margin: 0; padding: 1rem 1.5rem .5rem; font-size: 1.375rem; line-height: 1.75rem; }
.mm-linhas ul { margin: 0; padding: 0; list-style: none; }
.mm-linha {
  display: flex; align-items: center; gap: 1rem; min-height: 4.5rem; padding: .75rem 1.5rem; color: var(--mmm-tinta);
}
.mm-linha-texto { flex: 1 1 auto; min-width: 0; }
.mm-linha-valor { flex: none; color: var(--mmm-suave); font-size: .875rem; }
.mm-linha:hover { background: rgba(var(--mmm-primaria-rgb), .06); text-decoration: none; }
.mm-linha:active { background: rgba(var(--mmm-primaria-rgb), .12); text-decoration: none; }
/* A divisória entre linhas é decorativa (cada linha se identifica pelo texto e é o alvo inteiro): no tom suave do
   contorno, como a do Material 3 (outline-variant). */
.mm-linhas li + li .mm-linha { border-top: 1px solid var(--mmm-divisoria); }
.mm-linha > .bi:first-child {
  display: flex; flex: none; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--mmm-recipiente); color: var(--mmm-sobre-recipiente); font-size: 1.125rem;
}
.mm-linha strong { display: block; font-weight: 500; }
.mm-linha small { display: block; color: var(--mmm-suave); font-size: .875rem; }
.mm-linha > .bi:last-child { color: var(--mmm-suave); }
.mm-oferta-contida {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  margin: 1.5rem 0 0; padding: 1.5rem; border-radius: var(--mmm-raio); background: var(--mmm-recipiente); color: var(--mmm-sobre-recipiente);
}
/* A oferta que abre uma coluna da grade (a lateral da programação da Grade) alinha o topo com a coluna vizinha. */
[class*="col-"] > .mm-oferta-contida:first-child { margin-top: 0; }
.mm-oferta-contida p { margin: 0; }
.mm-oferta-contida strong { display: block; font-size: 1.375rem; line-height: 1.75rem; font-weight: 400; }
.mm-oferta-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.mm-oferta-preco { font-size: 1.375rem; line-height: 1.75rem; }
/* OS DETALHES (@mm/ui/detalhes): linhas que abrem no clique, no mesmo contêiner das linhas. */
.mm-detalhes { margin: 1.5rem 0 0; padding: .5rem 0; border-radius: var(--mmm-raio); background: var(--mmm-contem); }
.mm-detalhes > h2, .mm-detalhes > h3 { margin: 0; padding: 1rem 1.5rem .5rem; font-size: 1.375rem; line-height: 1.75rem; }
.mm-detalhes details + details { border-top: 1px solid var(--mmm-divisoria); }
.mm-detalhes summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem;
  padding: .75rem 1.5rem; font-weight: 500; cursor: pointer; list-style: none;
}
.mm-detalhes summary::-webkit-details-marker { display: none; }
.mm-detalhes summary > span { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.mm-detalhes summary > .bi:last-child { flex-shrink: 0; }
.mm-detalhes details[open] > summary { color: var(--mmm-primaria); }
.mm-detalhes summary:hover, .mm-detalhes summary:active { background: rgba(var(--mmm-primaria-rgb), .06); }
.mm-detalhes summary .bi { color: var(--mmm-suave); }
@media (prefers-reduced-motion: no-preference) { .mm-detalhes summary > .bi:last-child { transition: transform .2s; } }
.mm-detalhes details[open] > summary > .bi:last-child { transform: rotate(180deg); }
.mm-detalhes-corpo { padding: 0 1.5rem 1rem; color: var(--mmm-suave); }
.mm-detalhes-corpo > :last-child { margin-bottom: 0; }
/* O resumo com título e uma linha (o formulário que abre no clique, no Radar): o nome em cima, a linha embaixo. */
:root[data-mm-estilo="material"] .mm-detalhes summary h3,
:root[data-mm-estilo="material"] .mm-detalhes summary h4 {
  margin: 0; font-size: 1rem; line-height: 1.5rem; font-weight: 500;
}
.mm-detalhes summary small { display: block; color: var(--mmm-suave); font-size: .875rem; font-weight: 400; }
/* AS SEÇÕES DE UM TEXTO LONGO (@mm/ui/secoes): cada assunto num contêiner, em colunas de fluxo (não em grade: o
   contêiner curto ao lado de um longo deixava um vão branco do tamanho da diferença). Com 28rem de mínimo: duas
   colunas em 1024 e 1280 px, três em 1800 px, uma no celular. O artigo ou o painel que tem seções perde a caixa
   dele: o título e a abertura ficam no fundo da página, como na capa (dono, 11/10/2026: "repensar o fluxo de
   texto"). */
.mm-secoes { margin: 1.5rem 0 0; column-width: 28rem; column-gap: 1rem; }
.mm-secao {
  min-width: 0; margin: 0 0 1rem; padding: 1.5rem; border-radius: var(--mmm-raio); background: var(--mmm-contem);
  break-inside: avoid;
}
/* Mais forte que a classe de título do texto do dicionário (`h5`, na Grade); vale também no bloco da casa embrulhado. */
:root[data-mm-estilo="material"] .mm-secao > :is(h2, h3), :root[data-mm-estilo="material"] .mm-secao > .mm-bloco > h2 {
  margin: 0 0 .75rem; font-size: 1.375rem; line-height: 1.75rem; font-weight: 400;
}
.mm-secao > :last-child { margin-bottom: 0; }
/* O título que vem do texto do dicionário traz o `mt-4` de quando era corrido; no contêiner, ele abre no topo. */
.mm-secao > :first-child { margin-top: 0 !important; }
.mm-secao ul { padding-left: 1.25rem; }
.mm-secao li + li { margin-top: .375rem; }
:root[data-mm-estilo="material"] :is(.mm-leitura, .mm-panel):has(.mm-secoes) {
  max-width: none; padding: 0; border: 0; background: transparent; box-shadow: none;
}
/* A sequência (o guia, a pauta): um contêiner embaixo do outro, na medida de leitura; a partir de 1200 px, o que vem
   depois dela (os relacionados, a oferta) fica na coluna da direita, ao lado do texto. */
/* A prosa das páginas da casa (integrações, números, parceria: `.mm-prose`) e a abertura sob o título ficam numa medida
   de leitura; sem ela, a linha atravessava a tela de 1800 px (11/10/2026). */
:root[data-mm-estilo="material"] .mm-prose, :root[data-mm-estilo="material"] .mm-intro > p,
:root[data-mm-estilo="material"] .mm-bloco > p { max-width: 75ch; }
/* O bloco da casa embrulhado num contêiner (integrações) perde o respiro próprio; o subtítulo fica abaixo do título. */
.mm-secao > .mm-bloco { padding-top: 0 !important; padding-bottom: 0 !important; }
:root[data-mm-estilo="material"] .mm-secao > .mm-bloco > h3 { font-size: 1rem; line-height: 1.5rem; font-weight: 500; }
.mm-secoes.mm-secoes-sequencia { max-width: 46rem; columns: 1; }
/* Fora da sequência, o bloco dos relacionados e da oferta entra no fluxo das colunas, inteiro (wendelmaques). */
.mm-secoes > .mm-leitura-lado { margin: 0 0 1rem; break-inside: avoid; }
@media (min-width: 1200px) {
  :root[data-mm-estilo="material"] .mm-leitura:has(> .mm-secoes-sequencia) {
    display: grid; grid-template-columns: minmax(0, 46rem) minmax(16rem, 24rem); column-gap: 3rem; align-items: start;
  }
  :root[data-mm-estilo="material"] .mm-leitura:has(> .mm-secoes-sequencia) > * { grid-column: 1 / -1; }
  :root[data-mm-estilo="material"] .mm-leitura > .mm-secoes-sequencia { grid-column: 1; }
  :root[data-mm-estilo="material"] .mm-leitura > .mm-secoes-sequencia ~ * {
    grid-column: 2; position: sticky; top: calc(var(--mm-altura-cabecalho, 7rem) + 1rem); margin-top: 1.5rem;
  }
}
/* Sem a caixa do artigo, as linhas voltam ao contêiner branco (dentro da caixa, elas tinham a cor do fundo). */
:root[data-mm-estilo="material"] :is(.mm-leitura, .mm-panel):has(.mm-secoes) .mm-linhas { background: var(--mmm-contem); }
:root[data-mm-estilo="material"] :is(.mm-leitura, .mm-panel):has(.mm-secoes) h1 {
  margin: .5rem 0 .5rem; font-size: 2rem; line-height: 2.5rem; font-weight: 400;
}
:root[data-mm-estilo="material"] :is(.mm-leitura, .mm-panel):has(.mm-secoes) > p,
:root[data-mm-estilo="material"] :is(.mm-leitura, .mm-panel):has(.mm-secoes) :not(.mm-secao) > p { max-width: 75ch; }
.mm-detalhes details > form { padding: 0 1.5rem 1.25rem; color: var(--mmm-tinta); }

/* O CABEÇALHO DO PAINEL (a consulta do PontoFato, o resultado do EditalMD): parte do contêiner branco, sem faixa
   nem linha. */
:root[data-mm-estilo="material"] .mm-panel > .mm-panel-head { background: transparent; border-bottom: 0; }
:root[data-mm-estilo="material"] .mm-searchbar { border-bottom: 0; }

/* O GUIA DA CAPA (@mm/ui/guia): contêiner com o título em letra normal e o "como ler" que abre no clique. */
:root[data-mm-estilo="material"] .mm-guide {
  margin: 1.5rem 0 0; padding: .5rem 0; border: 0; border-radius: var(--mmm-raio); background: var(--mmm-contem);
}
:root[data-mm-estilo="material"] .mm-guide > .mm-panel-title {
  margin: 0; padding: 1rem 1.5rem .5rem; color: var(--mmm-tinta); font-size: 1.375rem; line-height: 1.75rem;
  font-weight: 400; text-transform: none; letter-spacing: 0;
}
:root[data-mm-estilo="material"] .mm-guide > .mm-panel-title .bi { color: var(--mmm-primaria); }
:root[data-mm-estilo="material"] .mm-guide > details { padding: 0 1.5rem 1rem; }
:root[data-mm-estilo="material"] .mm-guide > details > summary { padding: .5rem 0; color: var(--mmm-primaria); font-weight: 500; }

/* A ÁREA COM ABAS (@mm/ui/painel): a fita sublinhada e o conteúdo no contêiner claro, com respiro dos lados. O
   contêiner ganhou fundo (12/10/2026) e o lado zerado colou o conteúdo na borda (dono: "dá um respiro nas bordas, tá
   muito colado"). */
:root[data-mm-estilo="material"] .mm-faixa + .tab-content { padding-inline: 1.5rem; border-color: transparent; }
@media (max-width: 575.98px) {
  :root[data-mm-estilo="material"] .mm-faixa + .tab-content { padding-inline: .75rem; }
}
:root[data-mm-estilo="material"] .mm-faixa { border-bottom-color: var(--mmm-divisoria); }
/* No celular, as abas abertas rolam de lado numa linha: empilhadas, dez abas empurravam a tela para baixo. */
@media (max-width: 767.98px) {
  :root[data-mm-estilo="material"] .mm-faixa { flex-wrap: nowrap; overflow-x: auto; }
  :root[data-mm-estilo="material"] .mm-faixa > :is(.nav-item, .nav-link, .mm-aba) { flex-shrink: 0; }
  /* Com a ponta, as abas moram numa lista dentro da fita: ela fica numa linha só e quem rola é a fita. */
  :root[data-mm-estilo="material"] .mm-faixa > [role="tablist"] { flex-shrink: 0; }
}
/* Na fita que rola, o anel de foco fica por dentro da aba: quem rola corta o que passa da borda, e o anel de fora
   perdia o lado de cima e o de baixo (abas do OKF Index e do EditalMD no celular, prova de 11/10/2026). */
:root[data-mm-estilo="material"] .mm-faixa .nav-link:focus-visible,
:root[data-mm-estilo="material"] .mm-fita-rolavel .nav-link:focus-visible,
:root[data-mm-estilo="material"] .overflow-x-auto > .nav-item > .nav-link:focus-visible { outline-offset: -2px; }

/* O ACERVO (@mm/ui/acervo): cada destino da lista é uma linha com canto de campo, não uma pílula — o nome em duas ou
   três linhas cabia mal na bolha (prova de 11/10/2026, quando o acervo passou ao estilo do app). */
:root[data-mm-estilo="material"] .lista-acervo .destino {
  --ui-btn-border-radius: var(--mmm-raio-campo); --ui-btn-padding-x: 1rem; --ui-btn-padding-y: .5rem;
}

/* O FILTRO ESCOLHIDO (@mm/ui/facetas, `mm-chip`) é tonal, como o chip de filtro do Material 3: a cor cheia é só da ação
   principal da tela (prova do Mural, 11/10/2026). */
:root[data-mm-estilo="material"] .mm-chip.btn-primary {
  --ui-btn-bg: var(--mmm-tonal); --ui-btn-border-color: var(--mmm-tonal); --ui-btn-color: var(--mmm-sobre-tonal);
  --ui-btn-hover-bg: var(--mmm-tonal); --ui-btn-hover-border-color: var(--mmm-contorno); --ui-btn-hover-color: var(--mmm-sobre-tonal);
  --ui-btn-active-bg: var(--mmm-tonal); --ui-btn-active-border-color: var(--mmm-contorno); --ui-btn-active-color: var(--mmm-sobre-tonal);
}

/* OS PLANOS (@mm/ui/blocos): lado a lado só quando cabem. A largura mínima é em rem e cresce com a letra: com o texto
   a 200%, os quatro planos do Radar passam a dois por linha em vez de empurrar a tela (11/10/2026). Nada de cartão
   sozinho na linha de baixo: três planos ficam numa coluna ou lado a lado; quatro, numa linha ou dois por linha. */
:root[data-mm-estilo="material"] .mm-precos { container-type: inline-size; }
:root[data-mm-estilo="material"] .mm-precos > .row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; margin: 0;
}
:root[data-mm-estilo="material"] .mm-precos > .row > * { width: auto; min-width: 0; max-width: none; margin: 0; padding: 0; }
:root[data-mm-estilo="material"] .mm-precos > .row:has(> :nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr); }
@container (min-width: 47rem) {
  :root[data-mm-estilo="material"] .mm-precos > .row:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
:root[data-mm-estilo="material"] .mm-precos > .row:has(> :nth-child(4)) { grid-template-columns: minmax(0, 1fr); }
@container (min-width: 31rem) {
  :root[data-mm-estilo="material"] .mm-precos > .row:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 63rem) {
  :root[data-mm-estilo="material"] .mm-precos > .row:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.mm-procurando { margin: 1.5rem 0 2.5rem; text-align: center; color: var(--mmm-suave); }
/* No computador, na borda do conteúdo, como a capa (11/10/2026); no celular, centrado. A coluna estreita e os atalhos
   também encostam na borda: centrados, ficavam fora do eixo da capa. */
@media (min-width: 768px) {
  .mm-procurando { text-align: start; }
  :root[data-mm-estilo="material"] :is(.mm-coluna, .mm-coluna-larga, .mm-leitura) { margin-left: 0; }
  /* A página estreita e a coluna da home do EditalMD usam a largura de trabalho (moldura.css: a coluna é da prosa).
     Centrada em 48rem, a página parecia a tela do celular esticada; a coluna deixava meia tela vazia ao lado das
     linhas e da oferta (dono, 11/10/2026). A prosa (`.mm-leitura`) fica na medida dela, à esquerda. */
  :root[data-mm-estilo="material"] .mm-workspace.mm-narrow, :root[data-mm-estilo="material"] .mm-coluna { max-width: none; }
  .mm-atalhos { justify-content: flex-start; }
}

/* AS JANELAS (`.mm-contato`: a do contato e a `Janela` da galeria) no celular com a letra grande do sistema. Com o
   texto a 200% em 390 px, o título quebrava no meio da palavra, a aba virava uma letra por linha e o botão em pílula
   virava um círculo (dono, 11/10/2026, diálogo de importação do Google no PageAudit). O respiro sai em px, para não
   dobrar com a letra; o X sai do fluxo do título; as abas não quebram palavra; os botões ocupam a linha. */
:root[data-mm-estilo="material"] .nav:is(.nav-tabs, .nav-underline) .nav-link,
:root[data-mm-estilo="material"] .nav:is(.nav-tabs, .nav-underline) .nav-link > span { overflow-wrap: break-word; }
@media (max-width: 575.98px) {
  :root[data-mm-estilo="material"] .mm-contato { max-width: calc(100vw - 16px); }
  :root[data-mm-estilo="material"] .mm-contato-caixa { padding: 16px; }
  :root[data-mm-estilo="material"] .mm-contato-cabeca { display: block; position: relative; padding-right: 48px; }
  :root[data-mm-estilo="material"] .mm-contato-x { position: absolute; top: 0; right: 0; }
  :root[data-mm-estilo="material"] .mm-contato-acoes > .btn { flex: 1 1 100%; }
  /* Até três abas numa janela estreita viram as abas fixas do Material: partes iguais da linha, o ícone em cima do
     rótulo e o selo no canto do ícone. Lado a lado, com o ícone e o selo na linha, não cabiam e caíam uma embaixo da
     outra, com o sublinhado só na primeira. */
  :root[data-mm-estilo="material"] .mm-contato .nav-tabs:not(:has(> :nth-child(4))) { flex-wrap: nowrap; }
  :root[data-mm-estilo="material"] .mm-contato .nav-tabs:not(:has(> :nth-child(4))) > * { flex: 1 1 0; }
  :root[data-mm-estilo="material"] .mm-contato .nav-tabs:not(:has(> :nth-child(4))) .nav-link {
    position: relative; width: 100%; flex-direction: column; justify-content: flex-start; padding: .625rem .5rem;
    text-align: center;
  }
  :root[data-mm-estilo="material"] .mm-contato .nav-tabs:not(:has(> :nth-child(4))) .nav-link > .badge {
    position: absolute; top: .375rem; left: calc(50% + .5rem);
  }
}
.mm-procurando a { margin: 0 .5rem; font-weight: 500; }

/* A NAVEGAÇÃO fica na barra de cima em qualquer largura (dono, 11/10/2026: "perdemos essa área"). A lista lateral da
   Conta Google tomava 16rem de toda página para links de apresentação (como funciona, preços, perguntas), que quem
   volta quase não usa, e tirava o conteúdo do eixo da marca. Na Conta Google a coluna existe porque as seções são o
   trabalho de quem entra. */
/* NO CELULAR, A OFERTA NA LINHA DO MENU quando cabe ao lado dele: a faixa reserva 9rem em vez de 16rem e cresce com o
   que sobra. Em oito apps a oferta ocupava uma linha só dela, e a barra tinha quatro antes do conteúdo. Com o texto a
   200%, ela volta à linha de baixo. */
@media (max-width: 575.98px) {
  :root[data-mm-estilo="material"] .mm-topnav-itens { flex-basis: 9rem; }
}

/* O CHÃO DA TV BOX (Chrome 52, docs/ui-tv.md): sem `gap` em flex, o respiro vem da margem. Quem lê `gap` não entra. */
@supports not (gap: 1rem) {
  .mm-atalhos li { margin: .25rem; }
  .mm-atalhos a > .bi, .mm-linha > .bi:first-child, .mm-detalhes summary .bi { margin-right: .75rem; }
  .mm-linha > .bi:last-child { margin-left: .75rem; }
  .mm-oferta-acoes > * + *, .mm-oferta-contida > * + * { margin-left: 1rem; }
}
/* AS PÁGINAS DO ESTILO MATERIAL (docs/ui-metodo-conta-google.md): como as listas e os números ocupam a largura no
   computador. Vai montado em `assets/material.css`, depois de `material-componentes.css` (`scripts/assets-material.mjs`).
   Revisão de 11/10/2026: na tela de 1.800 px, a lista numa coluna só deixava o nome numa ponta e o número na outra. */

/* O TEXTO DO CONTÊINER quebra a palavra ou o endereço que não cabe, e o item de uma linha flexível pode encolher: com a
   letra a 200% no celular, o endereço da política do Google, a palavra húngara comprida e o exemplo de relatório do
   PageAudit passavam da borda da tela (até 372 px na privacidade da Grade). */
.mm-secao { overflow-wrap: break-word; }
.mm-secao .d-flex > * { min-width: 0; }
/* O título da página também: "Advertise on CommsHarbor", da página de parceria, passava 56 px da tela a 200%. A
   abertura é uma grade de uma coluna automática, que crescia até a palavra inteira; com o mínimo zero, a coluna fica na
   largura da tela e só a palavra que não cabe na linha quebra. No computador, nada muda; as duas colunas da abertura
   com guia têm seletor mais forte (`telas.css`). */
main :is(h1, h2, h3) { overflow-wrap: break-word; }
.mm-opening { grid-template-columns: minmax(0, 1fr); }

/* AS LISTAS DE PARES (`.mm-rows`, a página de números) num contêiner das seções: sem o recuo e o respiro das listas de
   texto do contêiner. As duas listas de "quem lê" ficam uma embaixo da outra; os ladrilhos do uso vêm depois da lista. */
.mm-secao .mm-rows { padding-left: 0; }
.mm-secao .mm-rows > li + li { margin-top: 0; }
/* O nome comprido ("SERankingBacklinksBot") encolhe e quebra, em vez de passar da tela com a letra a 200%. */
.mm-secao .mm-rows > li > * { min-width: 0; }
.mm-secao > .mm-rows + .mm-rows, .mm-secao > .mm-rows + .mm-kpis { margin-top: 1rem; }

/* NO CELULAR, O RESPIRO SAI EM PX: com a letra a 200% em 390 px, a margem da página e os controles da barra dobravam
   junto. A barra tomava a primeira tela inteira (466 px antes da página, cada controle com 88 px de altura), e o grupo
   de botões da ficha do EditalMD (JSON, Markdown, OKF) passava 237 px da borda. Com a letra normal, nada muda: os
   valores em px são os mesmos que os rem davam. O controle fica com 44 px de altura e 36 px de largura (cabecalho.css). */
@media (max-width: 575.98px) {
  :root[data-mm-estilo="material"], :root[data-mm-estilo="material"] :is(.mm-chrome, .mm-footer) { --mm-gutter: 16px; }
  :root[data-mm-estilo="material"] .mm-topbar > .mm-workspace { gap: 6px 16px; min-height: 0; padding-block: 6px; }
  :root[data-mm-estilo="material"] .mm-chrome .mm-tools { gap: 6px; }
  :root[data-mm-estilo="material"] .mm-chrome :is(.mm-acao, .mm-ctl, .mm-tools .mm-conta-botao) {
    height: auto; min-height: min(var(--mmc-controle), 44px); min-width: 36px; padding: 4px 8px;
  }
  :root[data-mm-estilo="material"] .mm-menubar > .mm-workspace { min-height: 0; }
  :root[data-mm-estilo="material"] .mm-chrome .mm-menu-item { min-height: 44px; margin: 4px 2px; padding: 4px 16px; }
  .d-flex.flex-wrap > .btn-group, .card-footer .btn-group { flex-wrap: wrap; max-width: 100%; }
  .card-footer > .d-flex { min-width: 0; max-width: 100%; }
  /* A barra do comando do acervo (o rótulo e o "Copiar") desce o botão para a linha de baixo quando não cabe. */
  .comando-barra { flex-wrap: wrap; }
  /* O selo de situação (`.mm-status`, "28.263.119 estabelecimentos") quebra a linha em vez de passar da tela. */
  :root[data-mm-estilo="material"] .mm-status { max-width: 100%; white-space: normal; }
  /* O plano quebra a palavra comprida do texto dele: a coluna da grade não passa da tela (`material-componentes.css`). O
     botão de rótulo longo ("Configurar acompanhamento", no Radar) ocupa duas linhas em vez de passar 31 px da tela. */
  :root[data-mm-estilo="material"] .mm-precos .card { overflow-wrap: break-word; }
  :root[data-mm-estilo="material"] main .btn { max-width: 100%; white-space: normal; }
  /* O espaço entre as colunas da grade (`.row.g-4`, o formulário e o "Como pagar" da parceria) também sai em px: em rem,
     ele dobrava com a letra, e a margem negativa da linha (24 px) passava 8 px da margem da página (16 px). */
  :root[data-mm-estilo="material"] main :is(.row.g-4, .row.gx-4) { --ui-gutter-x: 24px; }
  :root[data-mm-estilo="material"] main :is(.row.g-5, .row.gx-5) { --ui-gutter-x: 32px; }
  /* A linha (`@mm/ui/linhas`): o respiro e o ícone em px, e o valor encolhe e quebra. Com a letra a 200%, a seta passava
     8 px da tela nos feeds do Meta Agent Tools (revisão de 12/10/2026). */
  :root[data-mm-estilo="material"] .mm-linha { gap: 16px; padding: 12px 24px; }
  :root[data-mm-estilo="material"] .mm-linha > .bi:first-child { width: 40px; height: 40px; }
  :root[data-mm-estilo="material"] :is(.mm-linha-texto, .mm-linha-valor) { min-width: 0; overflow-wrap: anywhere; }
  :root[data-mm-estilo="material"] .mm-linha-valor { flex: 0 1 auto; }
}

/* AS LISTAS LONGAS (o catálogo e os feeds do Meta Agent Tools, `.mm-lista-colunas`): em colunas de fluxo no
   computador, na ordem de cima para baixo. Numa coluna só, 50 linhas atravessavam a tela. */
@media (min-width: 992px) {
  .mm-lista-colunas { column-width: 24rem; column-gap: 2rem; }
  .mm-lista-colunas > li { break-inside: avoid; }
}
/* GERADO por scripts/material-cores.mjs a partir de SEMENTES (scripts/assets-material.mjs): não edite à mão.
   A paleta de cada app no estilo Material, por papel do Material 3 (material-color-utilities, Apache 2.0). */
/* editalmd: semente #1b3fa0 */
:root[data-mm-estilo="material"][data-mm-paleta="editalmd"] { --mmm-primaria: #1b3fa0; --mmm-primaria-rgb: 27, 63, 160; --mmm-primaria-forte: #00287e; --mmm-sobre-primaria: #ffffff; --mmm-recipiente: #dce1ff; --mmm-sobre-recipiente: #344479; --mmm-tonal: #dee1f9; --mmm-sobre-tonal: #414659; --ui-primary: #1b3fa0; --ui-primary-rgb: 27, 63, 160; --ui-primary-text-emphasis: #1b3fa0; --ui-primary-bg-subtle: #dce1ff; --ui-focus-ring-color: rgba(27, 63, 160, .35); --mm-link: #1b3fa0; --mm-link-rgb: 27, 63, 160; --mm-link-hover: #00287e; --mm-link-hover-rgb: 0, 40, 126; --mm-acao-primary: #1b3fa0; --mm-acao-primary-rgb: 27, 63, 160; --mm-accent-hover: #00287e; }
:root[data-mm-estilo="material"][data-mm-paleta="editalmd"][data-mm-theme="dark"] { --mmm-primaria: #b6c4ff; --mmm-primaria-rgb: 182, 196, 255; --mmm-primaria-forte: #dce1ff; --mmm-sobre-primaria: #1d2d61; --mmm-recipiente: #344479; --mmm-sobre-recipiente: #dce1ff; --mmm-tonal: #414659; --mmm-sobre-tonal: #dee1f9; --ui-primary: #b6c4ff; --ui-primary-rgb: 182, 196, 255; --ui-primary-text-emphasis: #b6c4ff; --ui-primary-bg-subtle: #102255; --ui-focus-ring-color: rgba(182, 196, 255, .45); --mm-link: #b6c4ff; --mm-link-rgb: 182, 196, 255; --mm-link-hover: #dce1ff; --mm-link-hover-rgb: 220, 225, 255; --mm-acao-primary: #b6c4ff; --mm-acao-primary-rgb: 182, 196, 255; --mm-accent-hover: #dce1ff; --mm-acao-sobre: #1d2d61; --mm-on-accent: #1d2d61; }
/* radar-cnpj: semente #2563eb */
:root[data-mm-estilo="material"][data-mm-paleta="radar-cnpj"] { --mmm-primaria: #0053db; --mmm-primaria-rgb: 0, 83, 219; --mmm-primaria-forte: #003ea8; --mmm-sobre-primaria: #ffffff; --mmm-recipiente: #dbe1ff; --mmm-sobre-recipiente: #324478; --mmm-tonal: #dde1f9; --mmm-sobre-tonal: #414659; --ui-primary: #0053db; --ui-primary-rgb: 0, 83, 219; --ui-primary-text-emphasis: #0053db; --ui-primary-bg-subtle: #dbe1ff; --ui-focus-ring-color: rgba(0, 83, 219, .35); --mm-link: #0053db; --mm-link-rgb: 0, 83, 219; --mm-link-hover: #003ea8; --mm-link-hover-rgb: 0, 62, 168; --mm-acao-primary: #0053db; --mm-acao-primary-rgb: 0, 83, 219; --mm-accent-hover: #003ea8; }
:root[data-mm-estilo="material"][data-mm-paleta="radar-cnpj"][data-mm-theme="dark"] { --mmm-primaria: #b4c5ff; --mmm-primaria-rgb: 180, 197, 255; --mmm-primaria-forte: #dbe2ff; --mmm-sobre-primaria: #1a2d60; --mmm-recipiente: #324478; --mmm-sobre-recipiente: #dbe1ff; --mmm-tonal: #414659; --mmm-sobre-tonal: #dde1f9; --ui-primary: #b4c5ff; --ui-primary-rgb: 180, 197, 255; --ui-primary-text-emphasis: #b4c5ff; --ui-primary-bg-subtle: #0d2255; --ui-focus-ring-color: rgba(180, 197, 255, .45); --mm-link: #b4c5ff; --mm-link-rgb: 180, 197, 255; --mm-link-hover: #dbe2ff; --mm-link-hover-rgb: 219, 226, 255; --mm-acao-primary: #b4c5ff; --mm-acao-primary-rgb: 180, 197, 255; --mm-accent-hover: #dbe2ff; --mm-acao-sobre: #1a2d60; --mm-on-accent: #1a2d60; }
/* pageaudit: semente #1a56db */
:root[data-mm-estilo="material"][data-mm-paleta="pageaudit"] { --mmm-primaria: #1a56db; --mmm-primaria-rgb: 26, 86, 219; --mmm-primaria-forte: #003fb1; --mmm-sobre-primaria: #ffffff; --mmm-recipiente: #dbe1ff; --mmm-sobre-recipiente: #334479; --mmm-tonal: #dde1f9; --mmm-sobre-tonal: #414659; --ui-primary: #1a56db; --ui-primary-rgb: 26, 86, 219; --ui-primary-text-emphasis: #1a56db; --ui-primary-bg-subtle: #dbe1ff; --ui-focus-ring-color: rgba(26, 86, 219, .35); --mm-link: #1a56db; --mm-link-rgb: 26, 86, 219; --mm-link-hover: #003fb1; --mm-link-hover-rgb: 0, 63, 177; --mm-acao-primary: #1a56db; --mm-acao-primary-rgb: 26, 86, 219; --mm-accent-hover: #003fb1; }
:root[data-mm-estilo="material"][data-mm-paleta="pageaudit"][data-mm-theme="dark"] { --mmm-primaria: #b5c4ff; --mmm-primaria-rgb: 181, 196, 255; --mmm-primaria-forte: #dbe1ff; --mmm-sobre-primaria: #1b2d61; --mmm-recipiente: #334479; --mmm-sobre-recipiente: #dbe1ff; --mmm-tonal: #414659; --mmm-sobre-tonal: #dde1f9; --ui-primary: #b5c4ff; --ui-primary-rgb: 181, 196, 255; --ui-primary-text-emphasis: #b5c4ff; --ui-primary-bg-subtle: #0f2255; --ui-focus-ring-color: rgba(181, 196, 255, .45); --mm-link: #b5c4ff; --mm-link-rgb: 181, 196, 255; --mm-link-hover: #dbe1ff; --mm-link-hover-rgb: 219, 225, 255; --mm-acao-primary: #b5c4ff; --mm-acao-primary-rgb: 181, 196, 255; --mm-accent-hover: #dbe1ff; --mm-acao-sobre: #1b2d61; --mm-on-accent: #1b2d61; }
/* pontofato: semente #0a6b4f */
:root[data-mm-estilo="material"][data-mm-paleta="pontofato"] { --mmm-primaria: #0a6b4f; --mmm-primaria-rgb: 10, 107, 79; --mmm-primaria-forte: #00513a; --mmm-sobre-primaria: #ffffff; --mmm-recipiente: #a6f2d1; --mmm-sobre-recipiente: #00513b; --mmm-tonal: #cfe9da; --mmm-sobre-tonal: #354b41; --ui-primary: #0a6b4f; --ui-primary-rgb: 10, 107, 79; --ui-primary-text-emphasis: #0a6b4f; --ui-primary-bg-subtle: #a6f2d1; --ui-focus-ring-color: rgba(10, 107, 79, .35); --mm-link: #0a6b4f; --mm-link-rgb: 10, 107, 79; --mm-link-hover: #00513a; --mm-link-hover-rgb: 0, 81, 58; --mm-acao-primary: #0a6b4f; --mm-acao-primary-rgb: 10, 107, 79; --mm-accent-hover: #00513a; }
:root[data-mm-estilo="material"][data-mm-paleta="pontofato"][data-mm-theme="dark"] { --mmm-primaria: #8bd6b5; --mmm-primaria-rgb: 139, 214, 181; --mmm-primaria-forte: #a7f3d0; --mmm-sobre-primaria: #003827; --mmm-recipiente: #00513b; --mmm-sobre-recipiente: #a6f2d1; --mmm-tonal: #354b41; --mmm-sobre-tonal: #cfe9da; --ui-primary: #8bd6b5; --ui-primary-rgb: 139, 214, 181; --ui-primary-text-emphasis: #8bd6b5; --ui-primary-bg-subtle: #002c1e; --ui-focus-ring-color: rgba(139, 214, 181, .45); --mm-link: #8bd6b5; --mm-link-rgb: 139, 214, 181; --mm-link-hover: #a7f3d0; --mm-link-hover-rgb: 167, 243, 208; --mm-acao-primary: #8bd6b5; --mm-acao-primary-rgb: 139, 214, 181; --mm-accent-hover: #a7f3d0; --mm-acao-sobre: #003827; --mm-on-accent: #003827; }
/* hookpulse: semente #0f6b4c */
:root[data-mm-estilo="material"][data-mm-paleta="hookpulse"] { --mmm-primaria: #0f6b4c; --mmm-primaria-rgb: 15, 107, 76; --mmm-primaria-forte: #005138; --mmm-sobre-primaria: #ffffff; --mmm-recipiente: #a8f2ce; --mmm-sobre-recipiente: #005138; --mmm-tonal: #cfe9d9; --mmm-sobre-tonal: #354b40; --ui-primary: #0f6b4c; --ui-primary-rgb: 15, 107, 76; --ui-primary-text-emphasis: #0f6b4c; --ui-primary-bg-subtle: #a8f2ce; --ui-focus-ring-color: rgba(15, 107, 76, .35); --mm-link: #0f6b4c; --mm-link-rgb: 15, 107, 76; --mm-link-hover: #005138; --mm-link-hover-rgb: 0, 81, 56; --mm-acao-primary: #0f6b4c; --mm-acao-primary-rgb: 15, 107, 76; --mm-accent-hover: #005138; }
:root[data-mm-estilo="material"][data-mm-paleta="hookpulse"][data-mm-theme="dark"] { --mmm-primaria: #8dd5b2; --mmm-primaria-rgb: 141, 213, 178; --mmm-primaria-forte: #a8f2cd; --mmm-sobre-primaria: #003826; --mmm-recipiente: #005138; --mmm-sobre-recipiente: #a8f2ce; --mmm-tonal: #354b40; --mmm-sobre-tonal: #cfe9d9; --ui-primary: #8dd5b2; --ui-primary-rgb: 141, 213, 178; --ui-primary-text-emphasis: #8dd5b2; --ui-primary-bg-subtle: #002c1d; --ui-focus-ring-color: rgba(141, 213, 178, .45); --mm-link: #8dd5b2; --mm-link-rgb: 141, 213, 178; --mm-link-hover: #a8f2cd; --mm-link-hover-rgb: 168, 242, 205; --mm-acao-primary: #8dd5b2; --mm-acao-primary-rgb: 141, 213, 178; --mm-accent-hover: #a8f2cd; --mm-acao-sobre: #003826; --mm-on-accent: #003826; }
/* mural: semente #0ea5e9 */
:root[data-mm-estilo="material"][data-mm-paleta="mural"] { --mmm-primaria: #006591; --mmm-primaria-rgb: 0, 101, 145; --mmm-primaria-forte: #004c6e; --mmm-sobre-primaria: #ffffff; --mmm-recipiente: #c9e6ff; --mmm-sobre-recipiente: #004c6e; --mmm-tonal: #d3e5f5; --mmm-sobre-tonal: #384956; --ui-primary: #006591; --ui-primary-rgb: 0, 101, 145; --ui-primary-text-emphasis: #006591; --ui-primary-bg-subtle: #c9e6ff; --ui-focus-ring-color: rgba(0, 101, 145, .35); --mm-link: #006591; --mm-link-rgb: 0, 101, 145; --mm-link-hover: #004c6e; --mm-link-hover-rgb: 0, 76, 110; --mm-acao-primary: #006591; --mm-acao-primary-rgb: 0, 101, 145; --mm-accent-hover: #004c6e; }
:root[data-mm-estilo="material"][data-mm-paleta="mural"][data-mm-theme="dark"] { --mmm-primaria: #94cdf7; --mmm-primaria-rgb: 148, 205, 247; --mmm-primaria-forte: #c9e6ff; --mmm-sobre-primaria: #00344d; --mmm-recipiente: #004c6e; --mmm-sobre-recipiente: #c9e6ff; --mmm-tonal: #384956; --mmm-sobre-tonal: #d3e5f5; --ui-primary: #94cdf7; --ui-primary-rgb: 148, 205, 247; --ui-primary-text-emphasis: #94cdf7; --ui-primary-bg-subtle: #00293e; --ui-focus-ring-color: rgba(148, 205, 247, .45); --mm-link: #94cdf7; --mm-link-rgb: 148, 205, 247; --mm-link-hover: #c9e6ff; --mm-link-hover-rgb: 201, 230, 255; --mm-acao-primary: #94cdf7; --mm-acao-primary-rgb: 148, 205, 247; --mm-accent-hover: #c9e6ff; --mm-acao-sobre: #00344d; --mm-on-accent: #00344d; }
/* okfindex: semente #1d4ed8 */
:root[data-mm-estilo="material"][data-mm-paleta="okfindex"] { --mmm-primaria: #1d4ed8; --mmm-primaria-rgb: 29, 78, 216; --mmm-primaria-forte: #0037b0; --mmm-sobre-primaria: #ffffff; --mmm-recipiente: #dce1ff; --mmm-sobre-recipiente: #364479; --mmm-tonal: #dee1f9; --mmm-sobre-tonal: #424659; --ui-primary: #1d4ed8; --ui-primary-rgb: 29, 78, 216; --ui-primary-text-emphasis: #1d4ed8; --ui-primary-bg-subtle: #dce1ff; --ui-focus-ring-color: rgba(29, 78, 216, .35); --mm-link: #1d4ed8; --mm-link-rgb: 29, 78, 216; --mm-link-hover: #0037b0; --mm-link-hover-rgb: 0, 55, 176; --mm-acao-primary: #1d4ed8; --mm-acao-primary-rgb: 29, 78, 216; --mm-accent-hover: #0037b0; }
:root[data-mm-estilo="material"][data-mm-paleta="okfindex"][data-mm-theme="dark"] { --mmm-primaria: #b7c4ff; --mmm-primaria-rgb: 183, 196, 255; --mmm-primaria-forte: #dde1ff; --mmm-sobre-primaria: #1e2d61; --mmm-recipiente: #364479; --mmm-sobre-recipiente: #dce1ff; --mmm-tonal: #424659; --mmm-sobre-tonal: #dee1f9; --ui-primary: #b7c4ff; --ui-primary-rgb: 183, 196, 255; --ui-primary-text-emphasis: #b7c4ff; --ui-primary-bg-subtle: #122255; --ui-focus-ring-color: rgba(183, 196, 255, .45); --mm-link: #b7c4ff; --mm-link-rgb: 183, 196, 255; --mm-link-hover: #dde1ff; --mm-link-hover-rgb: 221, 225, 255; --mm-acao-primary: #b7c4ff; --mm-acao-primary-rgb: 183, 196, 255; --mm-accent-hover: #dde1ff; --mm-acao-sobre: #1e2d61; --mm-on-accent: #1e2d61; }
/* my-stack: semente #246459 */
:root[data-mm-estilo="material"][data-mm-paleta="my-stack"] { --mmm-primaria: #246459; --mmm-primaria-rgb: 36, 100, 89; --mmm-primaria-forte: #004c42; --mmm-sobre-primaria: #ffffff; --mmm-recipiente: #9ff2e0; --mmm-sobre-recipiente: #005046; --mmm-tonal: #cde8e1; --mmm-sobre-tonal: #334b46; --ui-primary: #246459; --ui-primary-rgb: 36, 100, 89; --ui-primary-text-emphasis: #246459; --ui-primary-bg-subtle: #9ff2e0; --ui-focus-ring-color: rgba(36, 100, 89, .35); --mm-link: #246459; --mm-link-rgb: 36, 100, 89; --mm-link-hover: #004c42; --mm-link-hover-rgb: 0, 76, 66; --mm-acao-primary: #246459; --mm-acao-primary-rgb: 36, 100, 89; --mm-accent-hover: #004c42; }
:root[data-mm-estilo="material"][data-mm-paleta="my-stack"][data-mm-theme="dark"] { --mmm-primaria: #83d5c5; --mmm-primaria-rgb: 131, 213, 197; --mmm-primaria-forte: #9ff2e1; --mmm-sobre-primaria: #003730; --mmm-recipiente: #005046; --mmm-sobre-recipiente: #9ff2e0; --mmm-tonal: #334b46; --mmm-sobre-tonal: #cde8e1; --ui-primary: #83d5c5; --ui-primary-rgb: 131, 213, 197; --ui-primary-text-emphasis: #83d5c5; --ui-primary-bg-subtle: #002c25; --ui-focus-ring-color: rgba(131, 213, 197, .45); --mm-link: #83d5c5; --mm-link-rgb: 131, 213, 197; --mm-link-hover: #9ff2e1; --mm-link-hover-rgb: 159, 242, 225; --mm-acao-primary: #83d5c5; --mm-acao-primary-rgb: 131, 213, 197; --mm-accent-hover: #9ff2e1; --mm-acao-sobre: #003730; --mm-on-accent: #003730; }
/* iptv: semente #7c3aed */
:root[data-mm-estilo="material"][data-mm-paleta="iptv"] { --mmm-primaria: #7430e5; --mmm-primaria-rgb: 116, 48, 229; --mmm-primaria-forte: #5b00c8; --mmm-sobre-primaria: #ffffff; --mmm-recipiente: #eaddff; --mmm-sobre-recipiente: #4f3d74; --mmm-tonal: #e9def8; --mmm-sobre-tonal: #4b4358; --ui-primary: #7430e5; --ui-primary-rgb: 116, 48, 229; --ui-primary-text-emphasis: #7430e5; --ui-primary-bg-subtle: #eaddff; --ui-focus-ring-color: rgba(116, 48, 229, .35); --mm-link: #7430e5; --mm-link-rgb: 116, 48, 229; --mm-link-hover: #5b00c8; --mm-link-hover-rgb: 91, 0, 200; --mm-acao-primary: #7430e5; --mm-acao-primary-rgb: 116, 48, 229; --mm-accent-hover: #5b00c8; }
:root[data-mm-estilo="material"][data-mm-paleta="iptv"][data-mm-theme="dark"] { --mmm-primaria: #d2bcfd; --mmm-primaria-rgb: 210, 188, 253; --mmm-primaria-forte: #eaddff; --mmm-sobre-primaria: #38265c; --mmm-recipiente: #4f3d74; --mmm-sobre-recipiente: #eaddff; --mmm-tonal: #4b4358; --mmm-sobre-tonal: #e9def8; --ui-primary: #d2bcfd; --ui-primary-rgb: 210, 188, 253; --ui-primary-text-emphasis: #d2bcfd; --ui-primary-bg-subtle: #2d1a51; --ui-focus-ring-color: rgba(210, 188, 253, .45); --mm-link: #d2bcfd; --mm-link-rgb: 210, 188, 253; --mm-link-hover: #eaddff; --mm-link-hover-rgb: 234, 221, 255; --mm-acao-primary: #d2bcfd; --mm-acao-primary-rgb: 210, 188, 253; --mm-accent-hover: #eaddff; --mm-acao-sobre: #38265c; --mm-on-accent: #38265c; }
/* commsharbor: semente #0369a1 */
:root[data-mm-estilo="material"][data-mm-paleta="commsharbor"] { --mmm-primaria: #006196; --mmm-primaria-rgb: 0, 97, 150; --mmm-primaria-forte: #004972; --mmm-sobre-primaria: #ffffff; --mmm-recipiente: #cde5ff; --mmm-sobre-recipiente: #0a4a72; --mmm-tonal: #d4e4f6; --mmm-sobre-tonal: #394857; --ui-primary: #006196; --ui-primary-rgb: 0, 97, 150; --ui-primary-text-emphasis: #006196; --ui-primary-bg-subtle: #cde5ff; --ui-focus-ring-color: rgba(0, 97, 150, .35); --mm-link: #006196; --mm-link-rgb: 0, 97, 150; --mm-link-hover: #004972; --mm-link-hover-rgb: 0, 73, 114; --mm-acao-primary: #006196; --mm-acao-primary-rgb: 0, 97, 150; --mm-accent-hover: #004972; }
:root[data-mm-estilo="material"][data-mm-paleta="commsharbor"][data-mm-theme="dark"] { --mmm-primaria: #9acbfa; --mmm-primaria-rgb: 154, 203, 250; --mmm-primaria-forte: #cde5ff; --mmm-sobre-primaria: #003352; --mmm-recipiente: #0a4a72; --mmm-sobre-recipiente: #cde5ff; --mmm-tonal: #394857; --mmm-sobre-tonal: #d4e4f6; --ui-primary: #9acbfa; --ui-primary-rgb: 154, 203, 250; --ui-primary-text-emphasis: #9acbfa; --ui-primary-bg-subtle: #002842; --ui-focus-ring-color: rgba(154, 203, 250, .45); --mm-link: #9acbfa; --mm-link-rgb: 154, 203, 250; --mm-link-hover: #cde5ff; --mm-link-hover-rgb: 205, 229, 255; --mm-acao-primary: #9acbfa; --mm-acao-primary-rgb: 154, 203, 250; --mm-accent-hover: #cde5ff; --mm-acao-sobre: #003352; --mm-on-accent: #003352; }
/* samehand: semente #0d5741 */
:root[data-mm-estilo="material"][data-mm-paleta="samehand"] { --mmm-primaria: #0d5741; --mmm-primaria-rgb: 13, 87, 65; --mmm-primaria-forte: #003e2d; --mmm-sobre-primaria: #ffffff; --mmm-recipiente: #a6f2d2; --mmm-sobre-recipiente: #00513b; --mmm-tonal: #cee9db; --mmm-sobre-tonal: #354b41; --ui-primary: #0d5741; --ui-primary-rgb: 13, 87, 65; --ui-primary-text-emphasis: #0d5741; --ui-primary-bg-subtle: #a6f2d2; --ui-focus-ring-color: rgba(13, 87, 65, .35); --mm-link: #0d5741; --mm-link-rgb: 13, 87, 65; --mm-link-hover: #003e2d; --mm-link-hover-rgb: 0, 62, 45; --mm-acao-primary: #0d5741; --mm-acao-primary-rgb: 13, 87, 65; --mm-accent-hover: #003e2d; }
:root[data-mm-estilo="material"][data-mm-paleta="samehand"][data-mm-theme="dark"] { --mmm-primaria: #8ad6b6; --mmm-primaria-rgb: 138, 214, 182; --mmm-primaria-forte: #a6f3d1; --mmm-sobre-primaria: #003828; --mmm-recipiente: #00513b; --mmm-sobre-recipiente: #a6f2d2; --mmm-tonal: #354b41; --mmm-sobre-tonal: #cee9db; --ui-primary: #8ad6b6; --ui-primary-rgb: 138, 214, 182; --ui-primary-text-emphasis: #8ad6b6; --ui-primary-bg-subtle: #002c1f; --ui-focus-ring-color: rgba(138, 214, 182, .45); --mm-link: #8ad6b6; --mm-link-rgb: 138, 214, 182; --mm-link-hover: #a6f3d1; --mm-link-hover-rgb: 166, 243, 209; --mm-acao-primary: #8ad6b6; --mm-acao-primary-rgb: 138, 214, 182; --mm-accent-hover: #a6f3d1; --mm-acao-sobre: #003828; --mm-on-accent: #003828; }
/* wendelmaques: semente #d7001a */
:root[data-mm-estilo="material"][data-mm-paleta="wendelmaques"] { --mmm-primaria: #bb0015; --mmm-primaria-rgb: 187, 0, 21; --mmm-primaria-forte: #8f000d; --mmm-sobre-primaria: #ffffff; --mmm-recipiente: #ffdad6; --mmm-sobre-recipiente: #73332e; --mmm-tonal: #ffdad6; --mmm-sobre-tonal: #5d3f3c; --ui-primary: #bb0015; --ui-primary-rgb: 187, 0, 21; --ui-primary-text-emphasis: #bb0015; --ui-primary-bg-subtle: #ffdad6; --ui-focus-ring-color: rgba(187, 0, 21, .35); --mm-link: #bb0015; --mm-link-rgb: 187, 0, 21; --mm-link-hover: #8f000d; --mm-link-hover-rgb: 143, 0, 13; --mm-acao-primary: #bb0015; --mm-acao-primary-rgb: 187, 0, 21; --mm-accent-hover: #8f000d; }
:root[data-mm-estilo="material"][data-mm-paleta="wendelmaques"][data-mm-theme="dark"] { --mmm-primaria: #ffb4ac; --mmm-primaria-rgb: 255, 180, 172; --mmm-primaria-forte: #ffdbd6; --mmm-sobre-primaria: #561e1a; --mmm-recipiente: #73332e; --mmm-sobre-recipiente: #ffdad6; --mmm-tonal: #5d3f3c; --mmm-sobre-tonal: #ffdad6; --ui-primary: #ffb4ac; --ui-primary-rgb: 255, 180, 172; --ui-primary-text-emphasis: #ffb4ac; --ui-primary-bg-subtle: #491310; --ui-focus-ring-color: rgba(255, 180, 172, .45); --mm-link: #ffb4ac; --mm-link-rgb: 255, 180, 172; --mm-link-hover: #ffdbd6; --mm-link-hover-rgb: 255, 219, 214; --mm-acao-primary: #ffb4ac; --mm-acao-primary-rgb: 255, 180, 172; --mm-accent-hover: #ffdbd6; --mm-acao-sobre: #561e1a; --mm-on-accent: #561e1a; }