h1:focus {
    outline: none;
}

/* Formulários das páginas de conta (login, senha). Elas são renderizadas sem interatividade
   porque gravam o cookie de login; por isso usam <input> nativo em vez de MudTextField. */
.conta-form .campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}

.conta-form label {
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.7);
}

.conta-form input[type=text],
.conta-form input[type=email],
.conta-form input[type=password] {
    font: inherit;
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.conta-form input:focus {
    outline: 2px solid var(--mud-palette-primary);
    border-color: transparent;
}

.conta-form .codigo {
    font-size: 1.6rem;
    letter-spacing: 8px;
    text-align: center;
}

.conta-form .lembrar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.validation-message,
.validation-errors {
    color: var(--mud-palette-error);
    font-size: 0.8rem;
}

/* ---------- Gráficos (método dataviz: cor por função, marcas finas, eixos discretos) ---------- */
.viz {
    /* Texto e trilhos seguem o tema (claro/escuro); série e crítico são cores de dados validadas. */
    --viz-texto: var(--mud-palette-text-primary);
    --viz-texto-2: var(--mud-palette-text-secondary);
    --viz-trilho: var(--mud-palette-lines-default);
    --viz-serie: #2a78d6;      /* série única: azul sequencial passo 450 */
    --viz-critico: #d03b3b;    /* status crítico: sempre com legenda/rótulo */
    /* Rampa sequencial (matriz de risco): claro = poucas questões, escuro = muitas; tinta com contraste em cada passo. */
    --viz-rampa-0: #cde2fb; --viz-rampa-1: #9ec5f4; --viz-rampa-2: #6da7ec; --viz-rampa-3: #3987e5;
    --viz-rampa-4: #256abf; --viz-rampa-5: #184f95; --viz-rampa-6: #0d366b;
    --viz-tinta-0: #0b0b0b; --viz-tinta-1: #0b0b0b; --viz-tinta-2: #0b0b0b; --viz-tinta-3: #ffffff;
    --viz-tinta-4: #ffffff; --viz-tinta-5: #ffffff; --viz-tinta-6: #ffffff;
    color: var(--viz-texto);
}
/* Tema escuro: a rampa inverte (profundo = poucas, claro = muitas), passos próprios validados contra a superfície escura. */
.ai4m-escuro .viz {
    --viz-serie: #5b9be6;
    --viz-critico: #f0727a;
    --viz-rampa-0: #1d4775; --viz-rampa-1: #225b96; --viz-rampa-2: #2a70b8; --viz-rampa-3: #3d87d1;
    --viz-rampa-4: #69a4e0; --viz-rampa-5: #9cc3ee; --viz-rampa-6: #cde2fb;
    --viz-tinta-0: #ffffff; --viz-tinta-1: #ffffff; --viz-tinta-2: #ffffff; --viz-tinta-3: #0b0b0b;
    --viz-tinta-4: #0b0b0b; --viz-tinta-5: #0b0b0b; --viz-tinta-6: #0b0b0b;
}

.viz-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
}

.viz-kpi {
    border: 1px solid var(--viz-trilho);
    border-radius: 8px;
    padding: 12px 16px;
}

.viz-kpi-rotulo { font-size: 0.8rem; color: var(--viz-texto-2); }
.viz-kpi-valor { font-size: 2rem; font-weight: 500; line-height: 1.2; }
.viz-kpi-de { font-size: 1rem; color: var(--viz-texto-2); }
.viz-kpi-detalhe { font-size: 0.75rem; color: var(--viz-texto-2); }
/* Número clicável (componente Numero): leva à lista filtrada ou filtra a lista na mesma tela. */
.viz-kpi-clicavel { display: block; width: 100%; text-align: left; font: inherit; color: inherit; background: none; text-decoration: none; cursor: pointer; }
.viz-kpi-clicavel:hover, .viz-kpi-clicavel:focus-visible { border-color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent); }
.viz-kpi-ativo { border-color: var(--mud-palette-primary); box-shadow: inset 0 0 0 1px var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent); }
.viz-kpi-alerta .viz-kpi-valor { color: var(--viz-critico); }

.viz-barra {
    display: grid;
    grid-template-columns: minmax(110px, 30%) 1fr 36px;
    align-items: center;
    gap: 8px;
    padding: 4px 0; /* área de passar o mouse maior que a barra */
}

.viz-barra-nome { font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viz-barra-trilho { background: var(--viz-trilho); border-radius: 4px; height: 12px; }
.viz-barra-valor { background: var(--viz-serie); height: 12px; border-radius: 0 4px 4px 0; }
.viz-barra:hover .viz-barra-valor { filter: brightness(0.9); }
.viz-barra-rotulo { font-size: 0.85rem; text-align: right; font-variant-numeric: tabular-nums; }

.viz-matriz { border-collapse: separate; border-spacing: 2px; width: 100%; font-variant-numeric: tabular-nums; }
.viz-matriz th { font-size: 0.75rem; font-weight: 500; color: var(--viz-texto-2); padding: 4px; }
.viz-matriz th[scope=row] { text-align: right; white-space: nowrap; }
.viz-matriz td {
    text-align: center;
    height: 34px;
    border-radius: 4px;
    background: var(--mud-palette-background-gray);
    font-size: 0.85rem;
    font-weight: 500;
}
.viz-matriz td.viz-critica { box-shadow: inset 0 0 0 2px var(--viz-critico); }
.viz-legenda-critica { color: var(--viz-critico); font-weight: 500; }

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "Ocorreu um erro.";
    }

/* Conteúdo enviado/recebido da IA (Chamadas de IA) */
.ai4m-pre { white-space: pre-wrap; font-size: 0.8rem; margin: 4px 0 12px; max-height: 320px; overflow: auto; padding: 8px; border-radius: 4px; background: var(--mud-palette-background-gray); }

/* Conversa da avaliação de treinamento */
.ai4m-chat { display: flex; flex-direction: column; gap: 8px; }
.ai4m-chat-linha { display: flex; }
.ai4m-chat-minha { justify-content: flex-end; }
.ai4m-chat-balao { max-width: 80%; padding: 8px 12px; border-radius: 12px; background: var(--mud-palette-background-gray); font-size: 0.92rem; }
.ai4m-chat-minha .ai4m-chat-balao { background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }
.ai4m-chat-sistema { background: transparent; border: 1px dashed var(--mud-palette-lines-default); font-style: italic; }
.ai4m-chat-rotulo { font-size: 0.72rem; font-weight: 600; opacity: 0.75; margin-bottom: 2px; }

/* ---------- Layout (T0.6, inspirado no Velonic) ---------- */
.ai4m-appbar { border-bottom: 1px solid var(--mud-palette-lines-default); }
.ai4m-drawer { border-right: 1px solid var(--mud-palette-lines-default); }
/* O "Sair" é um botão de formulário com cara de item do menu. */
.ai4m-sair { width: 100%; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.ai4m-conteudo { background: var(--mud-palette-background); min-height: 100vh; }
.ai4m-logo { display: flex; align-items: center; gap: 10px; height: 64px; padding: 0 18px; border-bottom: 1px solid var(--mud-palette-lines-default); }
/* Marca: losango em quatro facetas (o "4" de AI4M), da mais forte, no alto, à mais clara, embaixo. Só CSS: uma faceta desenhada
   e as outras três como sombras deslocadas, para a marca seguir as cores do tema (claro e escuro) sem imagem. */
.ai4m-logo-marca { position: relative; width: 22px; height: 22px; flex: none; transform: rotate(45deg); }
.ai4m-logo-marca::before {
    content: ""; position: absolute; top: 0; left: 0; width: 10px; height: 10px; border-radius: 3px;
    background: var(--mud-palette-primary);
    box-shadow: 12px 0 0 var(--mud-palette-tertiary), 0 12px 0 var(--mud-palette-tertiary),
                12px 12px 0 color-mix(in srgb, var(--mud-palette-tertiary) 50%, transparent);
}
.ai4m-logo-nome { font-weight: 700; font-size: 1.3rem; letter-spacing: 0.04em; color: var(--mud-palette-text-primary); }
.ai4m-usuario { display: flex; align-items: center; gap: 8px; margin-left: 8px; }
.ai4m-drawer .mud-nav-link.active { background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent); color: var(--mud-palette-primary); font-weight: 700; }
.ai4m-drawer .mud-nav-link.active .mud-nav-link-icon { color: var(--mud-palette-primary); }
/* Item marcado pelo NavMenu quando a página é dele mas o endereço não começa pelo do link (ex.: o detalhe de um contrato). */
.ai4m-drawer .ai4m-ativo > .mud-nav-link { background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent); color: var(--mud-palette-primary); font-weight: 700; }
.ai4m-drawer .ai4m-ativo > .mud-nav-link .mud-nav-link-icon { color: var(--mud-palette-primary); }
/* Cartões do conteúdo com sombra leve (menus suspensos ficam fora, com a elevação normal). */
.ai4m-conteudo .mud-paper:not(.mud-elevation-0) { box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04); }
.ai4m-conta { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--mud-palette-background); }
.ai4m-drawer form { overflow: hidden; white-space: nowrap; }
/* Campos no layout tradicional (pedido de 15/10/2026): rótulo sempre acima e o valor numa caixa com borda, em vez da linha
   embaixo do MudBlazor. Na área de conteúdo do sistema e nos diálogos, que o MudBlazor abre fora dela (o seletor de empresa no
   topo e as tabelas ficam como estão). */
:is(.ai4m-conteudo, .mud-dialog) .mud-input-control-input-container > .mud-input.mud-input-text.mud-input-underline:not(.mud-table-cell *) {
    border: 1px solid var(--mud-palette-lines-inputs); border-radius: 4px; background: var(--mud-palette-background); padding: 0 12px;
    transition: border-color .15s, box-shadow .15s; }
:is(.ai4m-conteudo, .mud-dialog) .mud-input.mud-input-text.mud-input-underline::before,
:is(.ai4m-conteudo, .mud-dialog) .mud-input.mud-input-text.mud-input-underline::after { display: none; }
:is(.ai4m-conteudo, .mud-dialog) .mud-input.mud-input-text.mud-input-underline:hover:not(.mud-disabled) { border-color: var(--mud-palette-action-default); }
:is(.ai4m-conteudo, .mud-dialog) .mud-input.mud-input-text.mud-input-underline:focus-within { border-color: var(--mud-palette-primary); box-shadow: 0 0 0 1px var(--mud-palette-primary); }
:is(.ai4m-conteudo, .mud-dialog) .mud-input.mud-input-text.mud-input-underline.mud-input-error { border-color: var(--mud-palette-error); }
:is(.ai4m-conteudo, .mud-dialog) .mud-input.mud-input-text.mud-input-underline.mud-disabled { background: var(--mud-palette-action-disabled-background); }
:is(.ai4m-conteudo, .mud-dialog) .mud-input-control-input-container > .mud-input.mud-input-text.mud-input-text-with-label { margin-top: 24px; }
:is(.ai4m-conteudo, .mud-dialog) .mud-input.mud-input-text > input.mud-input-root, :is(.ai4m-conteudo, .mud-dialog) .mud-input.mud-input-text > div.mud-input-slot.mud-input-root { padding: 9px 0; }
:is(.ai4m-conteudo, .mud-dialog) .mud-input.mud-input-text.mud-input-sizing-auto > textarea.mud-input-root, :is(.ai4m-conteudo, .mud-dialog) .mud-input.mud-input-text > textarea.mud-input-root { padding: 9px 0; }
/* O rótulo fica sempre em cima da caixa, também com o campo vazio. */
:is(.ai4m-conteudo, .mud-dialog) .mud-input-control-input-container > label.mud-input-label-inputcontrol:not(.mud-input-label-outlined):not(.mud-input-label-filled) {
    transform: translate(0, 0) scale(0.85) !important; transform-origin: top left; max-width: 117%; color: #299F94; }
:is(.ai4m-conteudo, .mud-dialog) .mud-input-control-input-container > label.mud-input-label-inputcontrol.mud-input-error { color: var(--mud-palette-error); }
/* Rótulo dos campos preenchidos ou em edição: verde-água padrão do sistema (rgb 41 159 148) em todas as telas.
   Campo vazio continua com o rótulo cinza dentro dele, como dica. */
.mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol,
.mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol { color: #299F94; }
/* Documentos do contrato (contrato, aditivos, outros): borda azul do canal Gestão à esquerda de cada item. */
.ai4m-item-doc { border-left: 4px solid #1e88e5; }
/* Lições: vídeo incorporado e imagens */
.ai4m-video { position: relative; width: 100%; max-width: 860px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000; }
.ai4m-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ai4m-figura { margin: 8px 0 16px; max-width: 860px; }
.ai4m-figura img { max-width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--mud-palette-lines-default); }
.ai4m-figura figcaption { font-size: .85rem; color: var(--mud-palette-text-secondary); margin-top: 4px; }
.ai4m-imagem-edicao { width: 220px; }
.ai4m-imagem-edicao img { width: 100%; height: 120px; object-fit: contain; border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; background: var(--mud-palette-background-gray); }
/* Fase 15: texto da política de IA e chat seguro */
/* Listas no conteúdo do sistema (opções das questões, pontos-chave das lições): o MudBlazor zera o recuo, e as letras e marcadores
   ficavam para fora do cartão. Recuo próprio, com o marcador alinhado ao texto de cima. */
.ai4m-lista { margin: 4px 0 0; padding-left: 1.6em; }
.ai4m-lista li { padding-left: .15em; }
/* Fase 43: regras de funcionamento da empresa, uma linha por regra (o que é | quem pode). */
.ai4m-regra { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 8px 24px; padding: 12px 0; border-top: 1px solid var(--mud-palette-lines-default); }
@media (max-width: 760px) { .ai4m-regra { grid-template-columns: 1fr; } }
/* Fase 60: regras de funcionamento agrupadas pela área do menu (a cor vem da classe ai4m-canal-*). */
.ai4m-canal-empresa { --ai4m-canal: #546e7a; --ai4m-canal-texto: #455A64; }
.ai4m-regras-area { border: 1px solid var(--mud-palette-lines-default); border-left: 4px solid var(--ai4m-canal); border-radius: 8px; padding: 4px 16px 0; margin-bottom: 16px; }
.ai4m-regras-titulo { display: flex; align-items: center; gap: 8px; padding: 10px 0 6px; font-weight: 600; color: var(--ai4m-canal-texto); text-transform: uppercase; font-size: .8rem; letter-spacing: .04em; }
.ai4m-regras-titulo + .ai4m-regra { border-top: none; }
.ai4m-regra-padrao { margin-left: 6px; font-size: .7rem; padding: 1px 6px; border-radius: 8px; background: var(--mud-palette-background-gray); color: var(--mud-palette-text-secondary); }
/* Fase 44: modelos e recursos de IA (empresa e plataforma). */
.ai4m-modelo-ia { display: grid; grid-template-columns: 1fr 1.6fr 1.6fr .7fr .8fr .8fr auto; gap: 8px; align-items: end; padding: 4px 0; }
@media (max-width: 1400px) { .ai4m-modelo-ia { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 8px 0; border-top: 1px solid var(--mud-palette-lines-default); } }
.ai4m-recurso-ia { display: grid; grid-template-columns: minmax(0, 1fr) 130px 200px 260px; gap: 8px 16px; align-items: center; padding: 6px 0; border-top: 1px solid var(--mud-palette-lines-default); }
@media (max-width: 960px) { .ai4m-modelo-ia { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ai4m-recurso-ia { grid-template-columns: 1fr; } }
.ai4m-texto-politica { white-space: pre-wrap; line-height: 1.6; max-width: 80ch; }
.ai4m-chat { display: flex; flex-direction: column; gap: 10px; min-height: 160px; max-height: 60vh; overflow-y: auto; padding: 12px;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; background: var(--mud-palette-background-gray); }
.ai4m-chat-vazio { color: var(--mud-palette-text-secondary); margin: auto; text-align: center; }
.ai4m-chat-msg { white-space: pre-wrap; padding: 10px 12px; border-radius: 10px; max-width: 85%; line-height: 1.5; }
.ai4m-chat-eu { align-self: flex-end; background: color-mix(in srgb, #7e57c2 14%, var(--mud-palette-surface)); }
.ai4m-chat-ia { align-self: flex-start; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); }
.ai4m-chat-compacto { min-height: 120px; max-height: 42vh; }
/* Botão e janela do assistente: acima do conteúdo e do menu (drawer, 1100), mas abaixo das listas suspensas, menus e calendários
   (popover, 1201), dos diálogos e dos avisos. Antes ficavam em 1300 e cobriam a lista aberta de um campo no canto da tela. */
.ai4m-chat-fab { position: fixed; right: 24px; bottom: 24px; z-index: calc(var(--mud-zindex-popover) - 1); }
.ai4m-chat-flutuante { position: fixed; right: 24px; bottom: 96px; z-index: calc(var(--mud-zindex-popover) - 1); width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 120px);
    overflow-y: auto; padding: 12px; border-radius: 12px; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .22); }
@media (max-width: 600px) { .ai4m-chat-fab { right: 16px; bottom: 16px; } .ai4m-chat-flutuante { right: 16px; bottom: 84px; } }
/* Botão arrastado (ai4m.js): a posição e o lado da janela do chat vêm de variáveis no <html>. touch-action: o arraste com o dedo
   não rola a página. */
.ai4m-chat-fab { touch-action: none; }
.ai4m-chat-fab.ai4m-arrastando { cursor: grabbing; opacity: .85; }
.ai4m-fab-movido .ai4m-chat-fab { left: var(--ai4m-fab-x); top: var(--ai4m-fab-y); right: auto; bottom: auto; }
.ai4m-fab-movido .ai4m-chat-flutuante { left: var(--ai4m-chat-left); right: var(--ai4m-chat-right); top: var(--ai4m-chat-top); bottom: var(--ai4m-chat-bottom);
    max-height: var(--ai4m-chat-max); }
/* Com o botão do assistente na tela, o fim da página ganha espaço para o último item (ex.: o Salvar) subir acima dele. */
.ai4m-espaco-assistente { padding-bottom: 96px; }
.ai4m-chat-previa { white-space: pre-wrap; font-family: ui-monospace, Consolas, monospace; font-size: .85rem; max-height: 220px; overflow-y: auto;
    padding: 8px; border-radius: 6px; background: var(--mud-palette-background-gray); }
/* Minha conta: cabeçalho do sistema e conteúdo à esquerda, para não parecer a tela de login. */
.ai4m-minha-conta { min-height: 100vh; background: var(--mud-palette-background); color: var(--mud-palette-text-primary); font-family: Lato, "Helvetica Neue", Arial, sans-serif; }
.ai4m-mc-topo { display: flex; align-items: center; gap: 16px; height: 64px; padding: 0 24px 0 6px; background: var(--mud-palette-surface); border-bottom: 1px solid var(--mud-palette-lines-default); }
.ai4m-mc-topo .ai4m-logo { border: none; text-decoration: none; }
.ai4m-mc-espaco { flex: 1; }
.ai4m-mc-avatar { display: inline-flex; width: 32px; height: 32px; border-radius: 50%; align-items: center; justify-content: center; font-weight: 700; color: #fff; background: var(--mud-palette-primary); }
.ai4m-mc-conteudo { max-width: 640px; margin: 0 auto; padding: 32px 16px; }
.ai4m-mc-conteudo h1 { font-size: 1.6rem; margin: 12px 0 16px; }
.ai4m-mc-voltar { color: var(--mud-palette-primary); text-decoration: none; font-weight: 700; font-size: 0.92rem; }
/* Badge das abas (BadgeData): o MudBlazor põe o número no canto, colado na borda direita da aba, que corta o que passa dela
   (overflow: hidden, por causa do efeito do clique). Espaço à direita para o número aparecer inteiro, com qualquer quantidade de dígitos. */
.mud-tab:has(.mud-tab-badge) { padding-right: 28px; }
.ai4m-mc-abas { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.ai4m-mc-abas a { padding: 10px 16px; color: var(--mud-palette-text-secondary); text-decoration: none; font-weight: 700; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.ai4m-mc-abas a.active { color: var(--mud-palette-primary); border-bottom-color: var(--mud-palette-primary); }
/* Uma cor por área no ícone do grupo e dos subgrupos dele; os itens finais ficam na cor normal do menu. --ai4m-canal-texto é a
   mesma área num tom escuro, para texto pequeno sobre fundo claro (contraste AA, 4,5:1 ou mais); o tom claro fica para ícones,
   bordas e pontos. (As classes guardam o nome antigo, "canal".) */
.ai4m-canal-governanca { --ai4m-canal: #1e88e5; --ai4m-canal-texto: #1565C0; }
.ai4m-canal-gestao { --ai4m-canal: #d81b60; --ai4m-canal-texto: #AD1457; }
.ai4m-canal-conhecimento { --ai4m-canal: #2e9e5b; --ai4m-canal-texto: #2E7D4F; }
.ai4m-canal-comunicacao { --ai4m-canal: #ef6c00; --ai4m-canal-texto: #B84A0A; }
.ai4m-canal-tecnologia { --ai4m-canal: #7e57c2; --ai4m-canal-texto: #5E35B1; }
.ai4m-drawer .ai4m-canal > .mud-nav-link .mud-nav-link-icon,
.ai4m-drawer .ai4m-canal .mud-nav-group > .mud-nav-link .mud-nav-link-icon { color: var(--ai4m-canal); }

/* ---------- Site público (T7.1) ---------- */
/* Fundo das faixas alternadas um pouco mais claro que o do sistema: o verde-água (#1B7F81) e o cinza do texto secundário
   passam de 4,5:1 sobre ele (sobre #F5F7F9 ficavam em 4,44:1). */
.site { min-height: 100vh; display: flex; flex-direction: column; background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); font-family: Lato, "Helvetica Neue", Arial, sans-serif;
    --mud-palette-background: #F7F9FA; }
.site main { flex: 1; }
.site main:focus { outline: none; }
.site a { color: var(--mud-palette-primary); }
/* Âncoras (#medicoes, #custos...) não ficam escondidas atrás do topo fixo. */
.site [id] { scroll-margin-top: 80px; }
#uso-painel { scroll-margin-top: 72px; } /* abaixo da barra fixa, ao rolar até o painel de edição ou decisão */
.site a.site-pular { position: absolute; left: 16px; top: -60px; z-index: 30; padding: 10px 16px; border-radius: 6px; background: var(--mud-palette-primary); color: #fff; font-weight: 700; }
.site a.site-pular:focus { top: 8px; }
/* Texto só para leitor de tela (ex.: quem fala em cada balão dos exemplos de conversa). */
.site-oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.site-largura { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.site-topo { border-bottom: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); position: sticky; top: 0; z-index: 10; }
.site-topo-linha { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; position: relative; }
.site-logo { border: none; padding: 0; text-decoration: none; }
.site-menu { display: flex; align-items: center; gap: 20px; }
.site-menu a:not(.mud-button-root) { color: var(--mud-palette-text-secondary); text-decoration: none; font-weight: 700; font-size: 0.95rem; }
.site-menu a:not(.mud-button-root):hover { color: var(--mud-palette-primary); }
.site-hero { padding: 80px 0 64px; background: linear-gradient(180deg, color-mix(in srgb, var(--mud-palette-tertiary) 12%, var(--mud-palette-surface)), var(--mud-palette-surface)); }
.site-hero h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.15; margin: 8px 0 16px; max-width: 820px; }
.site-sobretitulo { color: var(--mud-palette-primary); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.85rem; margin: 0; }
.site-lead { font-size: 1.15rem; line-height: 1.6; color: var(--mud-palette-text-secondary); max-width: 760px; margin: 0 0 28px; }
.site-acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.site-secao { padding: 64px 0; }
.site-secao-alt { background: var(--mud-palette-background); }
.site-secao h2 { font-size: 1.8rem; margin: 0 0 28px; }
.site-passos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; }
.site-passos h3, .site-cartao h3 { font-size: 1.1rem; margin: 10px 0 6px; }
.site-passos p, .site-cartao p { color: var(--mud-palette-text-secondary); line-height: 1.55; margin: 0; }
.site-passo-num { display: inline-flex; width: 36px; height: 36px; border-radius: 50%; align-items: center; justify-content: center; font-weight: 700; color: #fff; background: var(--mud-palette-primary); }
.site-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
/* Grades de 4, 7 e 8 cartões: com três colunas sobrava um cartão sozinho (ou dois) na última linha. Quatro colunas na tela larga e
   duas na média (a de 7 fica 4 + 3). Vale também para os cartões de canal da página inicial (ini-quatro). */
@media (min-width: 1000px) {
    .site-cartoes:has(> :nth-child(4):last-child), .site-cartoes:has(> :nth-child(7):last-child), .site-cartoes:has(> :nth-child(8):last-child) {
        grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 600px) and (max-width: 999px) {
    .site-cartoes:has(> :nth-child(4):last-child), .site-cartoes:has(> :nth-child(8):last-child) { grid-template-columns: repeat(2, 1fr); }
}
/* No tablet, as de 3, 6 e 9 cartões ficariam em duas colunas, com um sozinho no fim: três colunas. */
@media (min-width: 700px) and (max-width: 999px) {
    .site-cartoes:has(> :nth-child(3n):last-child) { grid-template-columns: repeat(3, 1fr); }
}
.site-cartao { background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; padding: 24px; }
.site-cta { text-align: center; }
.site-cta p { color: var(--mud-palette-text-secondary); margin: 0 0 20px; }
.site-texto { max-width: 820px; }
.site-texto h1 { font-size: 2rem; margin: 0 0 16px; }
.site-texto h2 { font-size: 1.2rem; margin: 28px 0 8px; }
.site-texto p, .site-texto li { line-height: 1.65; }
.site-atualizado { color: var(--mud-palette-text-secondary); font-size: 0.9rem; margin-top: 32px; }
/* Rodapé: mapa do site (as mesmas colunas do painel Soluções, mais Empresa e Legal) e a linha da Dotva. */
.site-rodape { border-top: 1px solid var(--mud-palette-lines-default); padding: 40px 0 24px; color: var(--mud-palette-text-secondary); font-size: 0.9rem; }
.site-rodape a { color: var(--mud-palette-text-secondary); }
.site-mapa { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; margin-bottom: 28px; }
.site-mapa-titulo { margin: 0 0 10px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mud-palette-text-primary); }
.site-mapa ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-rodape-nota { margin: 0; padding-top: 16px; border-top: 1px solid var(--mud-palette-lines-default); }
/* Rótulos curtos no celular: "Demonstração" no botão e "Painel" para quem está logado, para caber ao lado de Soluções. */
.site-so-celular { display: none; }
/* Tablet: Como contratar, Segurança e A Dotva saem do topo (continuam no pé do painel Soluções e no rodapé). */
@media (max-width: 960px) { .site-menu .site-menu-sec { display: none; } }
@media (max-width: 640px) {
    .site-topo-linha { gap: 8px; }
    .site-menu { gap: 12px; }
    .site-menu a:not(.mud-button-root), .site-menu .site-sub summary { font-size: 0.9rem; }
    .site-logo .ai4m-logo-nome { font-size: 1.1rem; }
    .site-so-largo { display: none; }
    .site-so-celular { display: inline; }
    .site-hero { padding: 48px 0 40px; }
    .site-secao { padding: 44px 0; }
}
@media (max-width: 359px) { .site-logo .ai4m-logo-nome { display: none; } }

/* Submenu Soluções: fica visível também no celular. O painel se alinha à direita da faixa do topo (não ao botão Soluções,
   que fica à esquerda dos outros itens). */
.site-sub summary { cursor: pointer; color: var(--mud-palette-text-secondary); font-weight: 700; font-size: 0.95rem; list-style: none; }
.site-sub summary::-webkit-details-marker { display: none; }
/* A seta é enfeite: texto alternativo vazio para o leitor de tela (a 1ª linha vale nos navegadores sem essa sintaxe). */
.site-sub summary::after { content: " ▾"; content: " ▾" / ""; }
.site-sub summary:hover, .site-sub[open] summary { color: var(--mud-palette-primary); }
.site-sub-painel { position: absolute; right: 16px; top: 100%; width: min(1120px, calc(100% - 32px)); box-sizing: border-box; padding: 16px; border-radius: 10px; z-index: 20;
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px 16px; align-items: start;
    background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
@media (max-width: 1100px) { .site-sub-painel { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .site-sub-painel { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
    .site-sub-painel { position: fixed; left: 16px; right: 16px; top: 64px; width: auto; grid-template-columns: 1fr;
        max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); overflow-y: auto; }
}
.site-sub-painel span { display: block; padding: 6px 12px 4px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--mud-palette-text-secondary); }
.site-menu .site-sub-painel a:not(.mud-button-root) { display: flex; align-items: baseline; gap: 8px; padding: 6px 12px; border-radius: 6px;
    font-size: 0.9rem; font-weight: 400; color: var(--mud-palette-text-primary); }
.site-menu .site-sub-painel a:not(.mud-button-root):hover { background: var(--mud-palette-background); color: var(--mud-palette-primary); }
/* Página atual: no topo, a cor e um sublinhado grosso (sem mudar a altura da linha); no painel, o fundo na cor do canal e o texto
   no tom escuro dele (contraste AA); no rodapé, o negrito. */
.site-menu > a[aria-current="page"]:not(.mud-button-root), .site-sub.site-ativo > summary {
    color: var(--mud-palette-primary); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.site-menu .site-sub-painel > div a[aria-current="page"]:not(.mud-button-root) {
    background: color-mix(in srgb, var(--ai4m-canal, var(--mud-palette-primary)) 12%, transparent); color: var(--ai4m-canal-texto, var(--mud-palette-primary)); }
.site-menu .site-sub-pe a[aria-current="page"]:not(.mud-button-root) { text-decoration: underline; text-underline-offset: 4px; }
.site-mapa a[aria-current="page"] { font-weight: 700; }
/* Ponto na cor do canal do sistema (ai4m-canal-*). */
.site-sub-painel > div a::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ai4m-canal, var(--mud-palette-primary)); }
.site-sub-pe { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 4px 0 0; padding-top: 10px; border-top: 1px solid var(--mud-palette-lines-default); }
.site-menu .site-sub-pe a:not(.mud-button-root) { font-weight: 700; color: var(--mud-palette-primary); }
.site-menu .site-sub-pe a.site-so-estreito { display: none; }
@media (max-width: 960px) { .site-menu .site-sub-pe a.site-so-estreito { display: flex; } }

/* Páginas de pacote de atendimento: conversa de exemplo no topo. */
.at-chat { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); }
.at-fala { margin: 0; max-width: 85%; padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: #fff; color: #2F3542; line-height: 1.45; font-size: 0.95rem; }
.at-fala.at-contato { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: #D7F5E3; }
.at-nota { margin: 4px 0 0; text-align: center; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mod-acento, #3BC0C3); }

/* Páginas de módulo do site (divulgação): faixas escuras, números, áreas e estágios. */
.mod-hero, .mod-escura { background: linear-gradient(135deg, var(--mod-fundo-1, #0E2233) 0%, var(--mod-fundo-2, #123B4A) 60%, var(--mod-fundo-3, #17595C) 100%); color: #fff; }
.mod-hero { padding: 88px 0 72px; }
.mod-hero-grade { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; }
.mod-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); line-height: 1.12; margin: 16px 0 18px; }
.mod-hero h1 em { color: var(--mod-acento, #3BC0C3); }
.mod-hero-lead { font-size: 1.15rem; line-height: 1.6; color: rgba(255, 255, 255, .82); max-width: 720px; margin: 0 0 28px; }
.mod-selo { display: inline-block; margin: 0; padding: 6px 14px; border: 1px solid var(--mod-acento, #3BC0C3); border-radius: 999px; color: var(--mod-acento, #3BC0C3);
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
/* O acento é claro, feito para as faixas escuras; numa seção clara o selo usa a cor principal (o acento ficava abaixo de 2:1). */
.site-secao:not(.mod-escura) .mod-selo { color: var(--mud-palette-primary); border-color: currentColor; }
/* Selo que é link (LGPD e Estruturação Jurídica levam a /modulos): sem sublinhado e com a cor do selo, não a dos links. */
.site a.mod-selo { color: var(--mod-acento, #3BC0C3); text-decoration: none; }
.mod-hero a.mod-selo:hover { border-color: #fff; color: #fff; }
.site a.mod-botao { display: inline-block; padding: 13px 26px; border-radius: 999px; background: var(--mod-acento, #3BC0C3); color: #0E2233; font-weight: 700;
    text-decoration: none; border: 2px solid var(--mod-acento, #3BC0C3); }
.site a.mod-botao:hover { background: #fff; border-color: #fff; }
.site a.mod-botao-vazado { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.site a.mod-botao-vazado:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
.mod-numeros { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mod-numeros li { padding: 20px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); }
.mod-numeros strong { display: block; font-size: 2.2rem; line-height: 1.1; color: var(--mod-acento, #3BC0C3); }
.mod-numeros span { color: rgba(255, 255, 255, .8); font-size: 0.92rem; }
.site-secao .site-sobretitulo + h2 { margin-top: 6px; }
.mod-dor { border-top: 3px solid var(--mud-palette-secondary); }
.mod-dor h3 { margin-top: 0; }
.mod-etiquetas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.mod-etiquetas li { padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: 0.92rem; color: var(--mud-palette-primary);
    background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); }
.mod-etiquetas-pequenas { margin-top: 14px; gap: 6px; }
.mod-etiquetas-pequenas li { padding: 3px 10px; font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; background: var(--mud-palette-background); }
.mod-area-num { font-size: 1.6rem; font-weight: 700; color: var(--mud-palette-tertiary); }
.mod-escura h2 { color: #fff; margin-top: 14px; }
.mod-escura p a { color: var(--mod-acento); }
.mod-estagios { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.mod-estagios li { padding: 22px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); }
.mod-estagios span { color: var(--mod-acento, #3BC0C3); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.mod-estagios h3 { font-size: 1.15rem; margin: 6px 0; }
.mod-estagios p { margin: 0; color: rgba(255, 255, 255, .8); line-height: 1.55; }
.mod-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.mod-lista { margin: 0; padding-left: 20px; line-height: 1.9; }
.mod-lista li::marker { color: var(--mud-palette-primary); }
.mod-exemplo { box-shadow: 0 12px 32px rgba(0, 0, 0, .08); }
.mod-exemplo h3 { font-size: 1.1rem; margin: 8px 0 12px; }
.mod-exemplo ol { margin: 0 0 14px; padding-left: 22px; color: var(--mud-palette-text-secondary); line-height: 1.7; }
.mod-exemplo ol li::marker { font-weight: 700; color: var(--mud-palette-primary); }
.mod-exemplo p:not(.site-sobretitulo) { margin: 0 0 10px; line-height: 1.55; }
.mod-exemplo p:last-child { margin: 0; }
.mod-exemplo p.site-sobretitulo { color: var(--mud-palette-primary); margin-bottom: 10px; }
.mod-escura .site-cta, .mod-escura.site-secao .mod-hero-lead { margin-left: auto; margin-right: auto; }
.mod-escura .site-cta .mod-hero-lead { color: rgba(255, 255, 255, .82); }
/* Página inicial do site: os três canais. */
.ini-canais-topo { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ini-canais-topo li { padding: 18px 20px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
    border-left: 4px solid var(--ai4m-canal); }
.ini-canais-topo strong { display: block; font-size: 1.25rem; }
/* Cada perfil leva à solução dele: o cartão inteiro é o link. */
.ini-canais-topo a { display: block; color: inherit; text-decoration: none; }
.ini-canais-topo a strong::after { content: " →"; content: " →" / ""; font-weight: 400; opacity: .7; }
.ini-canais-topo li:has(a:hover) { background: rgba(255, 255, 255, .12); }
.ini-canais-topo span { color: rgba(255, 255, 255, .8); font-size: 0.95rem; }
.ini-canal { border-top: 4px solid var(--ai4m-canal); }
.ini-canal .mud-icon-root { color: var(--ai4m-canal); font-size: 2rem; }
.ini-canal .mod-lista { margin-top: 12px; line-height: 1.6; color: var(--mud-palette-text-secondary); }
.ini-canal .mod-lista li { margin-bottom: 6px; }
.ini-canal .mod-lista li::marker { color: var(--ai4m-canal); }
.site a.ini-modulo { text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
.site a.ini-modulo:hover { border-color: var(--mud-palette-primary); box-shadow: 0 8px 24px rgba(0, 0, 0, .08); }
.ini-modulo h3 { margin-top: 0; }
.site-cartoes.ini-quatro { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.ini-nota { margin: 20px 0 0; font-size: 0.92rem; color: rgba(255, 255, 255, .7); }
.site .ini-nota a { color: var(--mod-acento, #3BC0C3); }
.ini-rotulo { margin: 8px 0 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ai4m-canal-texto, var(--ai4m-canal)); }
.site-cartao .ini-rotulo + h3 { margin-top: 2px; }
/* Perguntas frequentes (sem JavaScript). */
.site-faq { max-width: 860px; }
.site-faq details { border-bottom: 1px solid var(--mud-palette-lines-default); }
.site-faq summary { cursor: pointer; padding: 16px 28px 16px 0; font-weight: 700; font-size: 1.05rem; list-style: none; position: relative; }
.site-faq summary::-webkit-details-marker { display: none; }
.site-faq summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-size: 1.4rem; font-weight: 400; color: var(--mud-palette-primary); }
.site-faq details[open] summary::after { content: "–"; }
.site-faq details p { margin: 0 0 18px; line-height: 1.6; color: var(--mud-palette-text-secondary); }
/* Contato: formulário e canais. */
.site-contato-titulo { font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.2; margin: 6px 0 16px; }
.site-secao h2.site-contato-sub { font-size: 1.15rem; margin: 0 0 14px; }
.site-contato-passos { margin-top: 20px; }
.site-secao .site-contato-ok h2 { font-size: 1.3rem; margin: 0 0 8px; }
.site-contato-erro { padding: 12px 14px; border-radius: 6px; background: color-mix(in srgb, var(--mud-palette-error) 10%, transparent); color: var(--mud-palette-error); }
.site-form { max-width: 520px; }
.site-form select, .site-form textarea { font: inherit; padding: 10px 12px; border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 4px; background: #fff; }
.site-form .validation-message { color: var(--mud-palette-error); font-size: 0.85rem; }
.site-form-isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.site-form-nota { margin: 14px 0 0; font-size: 0.85rem; color: var(--mud-palette-text-secondary); }
.site button.mod-botao { font: inherit; font-weight: 700; cursor: pointer; padding: 13px 26px; border-radius: 999px; border: 2px solid var(--mud-palette-primary);
    background: var(--mud-palette-primary); color: #fff; }
.site button.mod-botao:hover { filter: brightness(1.08); }
.ini-ligacao { margin: 16px 0 0; font-weight: 700; }
/* Links dos cartões de canal da página inicial: um por linha, com divisória e a seta no fim, sempre no pé do cartão (os quatro
   cartões alinham as listas mesmo com textos de tamanhos diferentes). */
.ini-canal { display: flex; flex-direction: column; }
.ini-links { list-style: none; margin: auto 0 0; padding: 16px 0 0; }
.ini-links li { border-top: 1px solid var(--mud-palette-lines-default); }
.ini-links a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 2px; font-weight: 700; text-decoration: none;
    color: var(--ai4m-canal-texto, var(--mud-palette-primary)); }
.ini-links a::after { content: "→"; content: "→" / ""; flex: none; transition: transform .15s; }
.ini-links a:hover { background: color-mix(in srgb, var(--ai4m-canal, var(--mud-palette-primary)) 8%, transparent); }
.ini-links a:hover::after { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .ini-links a::after { transition: none; } }
.ini-links-curta { max-width: 520px; }
.ini-ligacao a { text-decoration: none; }
.ini-modulo span { display: inline-block; margin-top: 12px; font-weight: 700; color: var(--mud-palette-primary); }
.mod-estagios li > h3:first-child { margin-top: 0; }
@media (max-width: 860px) {
    .mod-hero-grade, .mod-duas { grid-template-columns: 1fr; }
    .mod-hero { padding: 56px 0 48px; }
}

/* Tom por área nas páginas de divulgação e no submenu: Governança puxa para o azul, Gestão para o rosa, Comunicação para o laranja.
   Trocar as variáveis do tema dentro do bloco muda títulos, números, etiquetas e links de uma vez. */
.mod-tom-governanca { --mod-acento: #7CC0F8; --mod-fundo-1: #0D1F33; --mod-fundo-2: #12385E; --mod-fundo-3: #1B5FA8;
    --mud-palette-primary: #1565C0; --mud-palette-secondary: #1E88E5; --mud-palette-tertiary: #42A5F5; }
.mod-tom-gestao { --mod-acento: #F8A5C2; --mod-fundo-1: #2A1320; --mod-fundo-2: #4E1B36; --mod-fundo-3: #9C1F55;
    --mud-palette-primary: #AD1457; --mud-palette-secondary: #D81B60; --mud-palette-tertiary: #EC407A; }
.mod-tom-comunicacao { --mod-acento: #FFB06B; --mod-fundo-1: #241A1C; --mod-fundo-2: #4D2A16; --mod-fundo-3: #9A4A10;
    --mud-palette-primary: #B84A0A; --mud-palette-secondary: #EF6C00; --mud-palette-tertiary: #FB8C00; }
/* Conhecimento: o fim do degradê é mais escuro que o verde do canal para os números no acento passarem de 3:1 (texto grande). */
.mod-tom-conhecimento { --mod-acento: #8FD6A8; --mod-fundo-1: #11241A; --mod-fundo-2: #1C4430; --mod-fundo-3: #276B44;
    --mud-palette-primary: #2E7D4F; --mud-palette-secondary: #2E9E5B; --mud-palette-tertiary: #43A047; }
.mod-tom-tecnologia { --mod-acento: #C3B1F0; --mod-fundo-1: #17132B; --mod-fundo-2: #2C2257; --mod-fundo-3: #5B3FA0;
    --mud-palette-primary: #5E35B1; --mud-palette-secondary: #7E57C2; --mud-palette-tertiary: #9575CD; }

/* Faixa de simulação (admin da plataforma usando o sistema como outra pessoa) */
.ai4m-simulacao { position: sticky; top: var(--mud-appbar-height, 64px); z-index: 5; display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    padding: 10px 24px; background: var(--mud-palette-warning); color: var(--mud-palette-warning-text); font-size: 0.92rem; }
.ai4m-simulacao span { flex: 1; min-width: 220px; }

/* Painel de criação ou edição aberto no meio de uma página (empresa, credencial, módulo, canal, questão...):
   borda na cor principal e um halo leve, para não se confundir com os outros cartões da tela. */
.ai4m-edicao {
    border: 1px solid var(--mud-palette-primary);
    border-left-width: 5px;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 16%, transparent), 0 4px 14px rgba(0, 0, 0, 0.10) !important;
}

/* Aviso de cookies do site (só com o Google Analytics configurado). */
.site-cookies { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50; max-width: 760px; margin: 0 auto; padding: 16px 20px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; border-radius: 12px; background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary); border: 1px solid var(--mud-palette-lines-default); box-shadow: 0 12px 32px rgba(0, 0, 0, .18); }
.site-cookies[hidden] { display: none; }
.site-cookies p { margin: 0; flex: 1 1 360px; font-size: 0.9rem; line-height: 1.5; }
.site-cookies-botoes { display: flex; gap: 8px; }
/* Recusar tão visível quanto aceitar (sem empurrar o aceite). */
.site-cookies button { font: inherit; font-weight: 700; padding: 8px 18px; border-radius: 8px; cursor: pointer; border: 1px solid var(--mud-palette-primary); }
.site-cookies-recusar { background: transparent; color: var(--mud-palette-primary); }
.site-cookies-aceitar { background: var(--mud-palette-primary); color: #fff; }

/* Ilustração de tela nas páginas do site: sobe sobre o fim do hero, com sombra, como uma janela do sistema. */
.site-tela-faixa { padding: 0 0 8px; margin-top: -40px; position: relative; z-index: 1; }
.site-tela { margin: 0 auto; max-width: 880px; }
.site-tela svg { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 18px 48px rgba(15, 23, 42, .22); background: #fff; }
.site-tela figcaption { text-align: center; font-size: 0.85rem; color: var(--mud-palette-text-secondary); margin-top: 12px; }
@media (max-width: 640px) { .site-tela-faixa { margin-top: -24px; } }
.site-link-botao { background: none; border: 0; padding: 0; font: inherit; color: var(--mud-palette-text-secondary); cursor: pointer; }
.site-link-botao:hover { text-decoration: underline; }

/* Matriz de risco por nível (prioridade × lacuna): cor = urgência, número = quantidade; célula vazia fica neutra.
   Tinta escolhida pelo contraste em cada fundo; o tema escuro tem passos próprios, mais claros, com tinta escura. */
.viz {
    --viz-risco-critico: #c62f2f; --viz-risco-critico-t: #ffffff;
    --viz-risco-alto: #f08a3c;    --viz-risco-alto-t: #0b0b0b;
    --viz-risco-medio: #f4d35e;   --viz-risco-medio-t: #0b0b0b;
    --viz-risco-baixo: #b9dfb0;   --viz-risco-baixo-t: #0b0b0b;
}
.ai4m-escuro .viz {
    --viz-risco-critico: #f0727a; --viz-risco-critico-t: #0b0b0b;
    --viz-risco-alto: #f2a65e;    --viz-risco-alto-t: #0b0b0b;
    --viz-risco-medio: #e3cd6e;   --viz-risco-medio-t: #0b0b0b;
    --viz-risco-baixo: #86c08f;   --viz-risco-baixo-t: #0b0b0b;
}
.viz .viz-risco-critico { background: var(--viz-risco-critico); color: var(--viz-risco-critico-t); }
.viz .viz-risco-alto { background: var(--viz-risco-alto); color: var(--viz-risco-alto-t); }
.viz .viz-risco-medio { background: var(--viz-risco-medio); color: var(--viz-risco-medio-t); }
.viz .viz-risco-baixo { background: var(--viz-risco-baixo); color: var(--viz-risco-baixo-t); }
.viz-legenda-risco { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.8rem; }
.viz-legenda-faixa { color: var(--viz-texto-2); }
.viz-amostra { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.viz-matriz th small { display: block; font-size: 0.65rem; font-weight: 400; line-height: 1.15; }
.viz-matriz th.viz-matriz-direcao { font-size: 0.7rem; letter-spacing: 0.02em; padding-bottom: 0; }

/* Treinamentos sugeridos: blocos alinhados (SugestoesTreinamento) */
.sug-tabela table { table-layout: fixed; }

/* Matriz de risco: célula com questões filtra a tabela (ResultadosPainel) */
.viz-matriz td.viz-clicavel { cursor: pointer; }
.viz-matriz td.viz-marcada { outline: 3px solid var(--mud-palette-text-primary); outline-offset: -3px; }

/* Plano atual × proposta (RespostasPainel): mesma altura, rolagem vertical em cada um */
.plano-comparacao-proposta textarea { height: 240px !important; overflow-y: auto !important; font-size: .875rem; line-height: 1.45; }

/* Título da linha como link (Ctrl+clique abre em outra aba); a linha inteira continua clicável */
a.link-linha { color: inherit; text-decoration: none; }
a.link-linha:hover { text-decoration: underline; }

/* ---------- Ícones com volume (29/10/2026) ----------
   Todos os ícones ganham um relevo leve (luz em cima, sombra embaixo), sem trocar o desenho nem a cor do tema. Nos destaques
   (o título de cada área no Início e os cartões das áreas no site), o ícone vira um selo com o gradiente da cor da área. */
.mud-icon-root { filter: drop-shadow(0 -0.5px 0 rgba(255, 255, 255, .3)) drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
.ai4m-icone-3d,
.ini-canal > .mud-icon-root {
    --ai4m-selo: var(--ai4m-canal, var(--mud-palette-primary));
    box-sizing: content-box;
    padding: .32em;
    border-radius: 28%;
    color: #fff !important;
    background:
        radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .55), transparent 48%),
        linear-gradient(150deg, color-mix(in srgb, var(--ai4m-selo) 70%, white), var(--ai4m-selo) 55%, color-mix(in srgb, var(--ai4m-selo) 68%, black));
    box-shadow: 0 4px 10px color-mix(in srgb, var(--ai4m-selo) 40%, transparent), inset 0 1px 1px rgba(255, 255, 255, .55), inset 0 -2px 3px rgba(0, 0, 0, .28);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35));
}
.ini-canal > .mud-icon-root { font-size: 1.6rem; }
/* O selo no título das páginas (componente Titulo), um pouco menor que o h5. */
.ai4m-icone-titulo { font-size: 1.25rem; }
/* O selo nos cartões do painel de indicadores. */
.ai4m-icone-cartao { font-size: 1.05rem; }

/* ---------- Tabelas: linha sim, linha não (29/10/2026) ----------
   Vale para todas as listas (MudTable) e tabelas simples (MudSimpleTable), com a cor do tema (TemaAI4M: TableStriped). O passar do
   mouse vem depois, para continuar mais forte que a linha alternada. */
.mud-table-root .mud-table-body .mud-table-row:nth-of-type(even) { background-color: var(--mud-palette-table-striped); }
.mud-simple-table table tbody tr:nth-of-type(even) { background-color: var(--mud-palette-table-striped); }
.mud-table-hover .mud-table-body .mud-table-row:hover { background-color: var(--mud-palette-table-hover); }
/* Cabeçalho das tabelas mais marcado que a linha alternada: a cor do texto do tema em transparência (escurece no claro, clareia no
   escuro), em negrito. */
.mud-table-root .mud-table-head .mud-table-cell,
.mud-simple-table table thead th {
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 11%, var(--mud-palette-surface));
    font-weight: 700;
}