/* ==========================================================================
   Kit MXM v10 - mxm-v10.css (camada 1: visual)
   Design system estatico do MXM WebManager v10 (padrao "principal"/single-spa).
   Calibrado contra os fontes reais do v10 (verdade concreta do visual):
     - chrome (topbar/launcher de modulos/barra de titulo): mxm.principal.front
       (componente principal-menu + principal-janela-sistemas).
     - componentes internos: bibliotecas/mxm/src/lib/componentes (lib Angular
       Material 11 com override; fonte Inter, azul de acao #03629C, navy #1D3361).
   CSS puro, sem build. Mesmos nomes de classe .mxm-* do kit Sakai (o mxm-ui-v10.js
   e a vitrine reusam o mesmo contrato de DOM) - o que muda e o CHROME e os TOKENS.
   LIGHT-ONLY: o WebManager v10 nao tem dark mode (so "Alto contraste"); por
   fidelidade, este kit nao tem tema escuro.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS (:root) - cores/medidas reais do v10
   ========================================================================== */
:root {
  /* --- Dois azuis do v10 (nao misturar) --- */
  --mxm-navy: #1D3361;         /* branding: topbar, tema Material (foco/selecao), footer do launcher */
  --mxm-primary: #03629C;      /* AZUL DE ACAO: botoes, paginacao, links, check/radio, lupa */
  --mxm-primary-fg: #FFFFFF;
  --mxm-accent: #f8750a;       /* accent/laranja (avisos) */

  /* --- Status --- */
  --mxm-info: #6c7072;
  --mxm-warning: #f8750a;
  --mxm-success: #09AB02;
  --mxm-error: #f44336;        /* texto/icone de erro (mat-error) */
  --mxm-error-strong: #d3180c; /* icone de erro na caixa de mensagens */
  --mxm-error-border: #ff0000; /* borda vermelha de campo invalido */

  color-scheme: light;

  /* --- Tipografia (Inter no v10, nao Roboto/Poppins) --- */
  --mxm-font: "Inter", "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --mxm-font-size: 16px;       /* base 16px (campos/labels/botoes) */

  /* --- Medidas do chrome (exatas do v10) --- */
  --mxm-topbar-h: 35px;
  --mxm-titlebar-h: 30px;
  --mxm-chrome-h: 65px;        /* topbar + barra de titulo (index.ejs: calc(100% - 65px)) */

  /* --- Raio padrao do v10: 8px em tudo --- */
  --mxm-radius: 8px;
  --mxm-radius-input: 8px;
  --mxm-radius-card: 8px;
  --mxm-radius-dialog: 8px;

  /* --- Chrome --- */
  --mxm-topbar-bg: var(--mxm-navy);
  --mxm-topbar-fg: #FFFFFF;
  --mxm-topbar-hover: #708090; /* SlateGray (hover de item na topbar) */
  --mxm-titlebar-bg: #6F6F6F;
  --mxm-titlebar-fg: #FFFFFF;

  /* --- Superficies --- */
  --mxm-page-bg: #F5F5F5;
  --mxm-surface: #FFFFFF;
  --mxm-text: #090A0A;
  --mxm-text-strong: #090A0A;
  --mxm-text-muted: #72777A;
  --mxm-card-border: #E3E5E5;
  --mxm-input-bg: #FFFFFF;
  --mxm-input-border: #E3E5E5;
  --mxm-input-fg: #090A0A;
  --mxm-readonly-bg: #EBEBEB;

  /* --- Tabela --- */
  --mxm-table-header-bg: #D3D3D3;
  --mxm-table-header-fg: #72777A;
  --mxm-table-cell-fg: #131313;
  --mxm-table-border: #DEDEDE;
  --mxm-table-zebra: #EFEFEF;
  --mxm-table-hover-bg: #C9C9C9;
  --mxm-table-action-fg: #595959;

  /* --- Rodape de acoes (CRUD / dialog) --- */
  --mxm-footer-bg: #F2F2F2;

  /* --- Painel expansivel / auditoria --- */
  --mxm-panel-border: #BBBBBB;
  --mxm-panel-label: #003867;
  --mxm-panel-nested-bg: #F8F8F8;

  /* --- Caixa de mensagens (notificacoes) --- */
  --mxm-notif-bg: #F4F4F4;
  --mxm-notif-border: #CDCFD0;
  --mxm-notif-title: #003867;

  /* --- Overlay / foco / sombras --- */
  --mxm-overlay: rgba(0, 0, 0, 0.32);
  --mxm-focus-glow: 0 0 0 2px rgba(3, 98, 156, 0.2);
  --mxm-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.12);
  --mxm-shadow-panel: 0 2px 8px rgba(0, 0, 0, 0.25);
  --mxm-shadow-dialog: 0 8px 24px rgba(0, 0, 0, 0.28);
}

/* ==========================================================================
   2. RESET + BASE
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: var(--mxm-font-size);
}

body {
  margin: 0;
  font-family: var(--mxm-font);
  font-size: var(--mxm-font-size);
  font-weight: 400;
  line-height: 1.4;
  color: var(--mxm-text);
  background: var(--mxm-page-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button {
  font-family: inherit;
}

a {
  color: var(--mxm-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.mxm-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ==========================================================================
   3. CHROME v10: TOPBAR (35px navy) - logo | icone-modulo | grupos | busca |
      logout | espacador | hamburguer. Igual ao principal-menu.
   ========================================================================== */
.mxm-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--mxm-topbar-h);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  background: var(--mxm-topbar-bg);
  color: var(--mxm-topbar-fg);
}

/* Ambiente de PROTÓTIPO (padrao do SDK): topbar laranja do design system (#F14B38) + selo, pro
   cliente não confundir com o sistema definitivo. Texto segue branco. Opt-out no shell:
   MXM.ui.shellV10({ ambiente: 'producao' }) volta ao navy. */
.mxm-topbar--prototipo {
  --mxm-topbar-bg: #F14B38;
}

.mxm-topbar-proto-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #7A1C12;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex: none;
}

.mxm-topbar-proto-badge .material-icons {
  font-size: 14px;
}

/* Logo MXM WebManager (imagem real, branca) - clica pra "Area de trabalho" */
.mxm-topbar-logo {
  display: inline-flex;
  align-items: center;
  height: var(--mxm-topbar-h);
  padding: 0 8px;
  cursor: pointer;
  background: transparent;
  border: none;
}

.mxm-topbar-logo img {
  height: var(--mxm-topbar-h);
  display: block;
}

/* Separador vertical branco entre logo / modulo / grupos */
.mxm-topbar-sep {
  color: var(--mxm-topbar-fg);
  font-size: 16px;
  font-weight: 500;
  padding: 0 5px;
  opacity: 0.85;
  user-select: none;
}

/* Icone do modulo atual (abre o launcher de modulos) */
.mxm-topbar-sysicon {
  display: inline-flex;
  align-items: center;
  height: var(--mxm-topbar-h);
  padding: 0 4px;
  cursor: pointer;
  background: transparent;
  border: none;
}

.mxm-topbar-sysicon .mxm-topbar-sysicon-img {
  height: 30px;
  width: 30px;
  border-radius: 3px;
  background-size: cover;
  background-position: center;
}

/* Botao-icone da topbar: grupos de menu, busca, logout, hamburguer.
   Usa Material Icons (fidelidade ao v10). */
.mxm-topbar-btn {
  height: var(--mxm-topbar-h);
  min-width: 34px;
  padding: 0 6px;
  border: none;
  background: transparent;
  color: var(--mxm-topbar-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mxm-topbar-btn:hover {
  background: var(--mxm-topbar-hover);
}

.mxm-topbar-btn .material-icons {
  font-size: 20px;
}

.mxm-topbar-btn:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: -2px;
}

/* Faixa dos grupos de menu do modulo (entre o icone do modulo e a busca).
   Rola horizontalmente no mobile em vez de quebrar. */
.mxm-topbar-groups {
  display: flex;
  align-items: center;
  height: var(--mxm-topbar-h);
  overflow-x: auto;
  scrollbar-width: none;
}

.mxm-topbar-groups::-webkit-scrollbar {
  display: none;
}

/* empurra busca/logout/hamburguer pra direita */
.mxm-topbar-spacer {
  flex: 1 1 auto;
}

/* Spinner de carregamento (placeholder do chrome) */
.mxm-topbar-loading {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  color: var(--mxm-topbar-fg);
  font-size: 13px;
}

/* ==========================================================================
   3b. DROPDOWN do v10 (grupos de menu e utilitarios do hamburguer)
   mat-menu: fundo branco, texto escuro, raio 4px, sombra.
   ========================================================================== */
.mxm-v10-menu {
  position: fixed;
  min-width: 200px;
  max-width: 340px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #FFFFFF;
  color: rgba(0, 0, 0, 0.87);
  border-radius: 4px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.32);
  padding: 6px 0;
  z-index: 70;
  display: none;
}

.mxm-v10-menu.is-open {
  display: block;
}

.mxm-v10-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 35px;
  padding: 0 12px;
  border: none;
  width: 100%;
  background: transparent;
  color: rgba(0, 0, 0, 0.87);
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}

.mxm-v10-menu-item:hover {
  background: #F0F0F0;
}

.mxm-v10-menu-item .material-icons {
  font-size: 18px;
  color: #6C7072;
}

/* seta de submenu (item com filhos) */
.mxm-v10-menu-item .mxm-v10-menu-arrow {
  margin-left: auto;
  font-size: 18px;
  color: #6C7072;
}

.mxm-v10-menu-item.is-active {
  color: var(--mxm-primary);
  font-weight: 600;
}

/* ==========================================================================
   3c. LAUNCHER DE MODULOS (troca de sistema)
   Ancorado em top:35px;left:0 - filtro + grid de cards 180x80 + rodape navy.
   Igual ao principal-janela-sistemas.
   ========================================================================== */
.mxm-v10-launcher-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: transparent;
}

.mxm-v10-launcher {
  position: fixed;
  top: var(--mxm-topbar-h);
  left: 0;
  z-index: 61;
  max-width: min(96vw, 1300px);
  max-height: calc(100vh - var(--mxm-topbar-h) - 8px);
  overflow-y: auto;
  padding: 20px;
  background: #FFFFFF;
  border-radius: 0 0 6px 0;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.mxm-v10-launcher-filtrobox {
  margin-bottom: 14px;
}

.mxm-v10-launcher-filtrobox .mxm-label {
  display: block;
  margin-bottom: 6px;
}

.mxm-v10-launcher-filtrobox .mxm-lupa-filtro {
  margin-bottom: 0;
}

.mxm-v10-launcher-filtrobox .mxm-input {
  padding-right: 2.5rem;
}

.mxm-lupa-filtro-limpar--so {
  right: 0.6rem;
}

.mxm-v10-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 180px);
  gap: 10px;
}

.mxm-v10-card {
  width: 180px;
  height: 80px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: #FAFAFA;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

.mxm-v10-card:hover {
  background: #EEF1F6;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
}

/* Icone do modulo: circulo (avatar) com glifo branco sobre a cor do modulo */
.mxm-v10-card-ico {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

.mxm-v10-card-nome {
  font-size: 13px;
  font-weight: 500;
  color: #1A1A1A;
  overflow-wrap: break-word;
  line-height: 1.2;
}

.mxm-v10-launcher-footer {
  margin-top: 14px;
  padding: 6px 10px;
  background: var(--mxm-navy);
  color: #FFFFFF;
  font-size: 12px;
  border-radius: 4px;
}

.mxm-v10-launcher-vazio {
  padding: 20px;
  color: var(--mxm-text-muted);
  font-size: 14px;
}

/* ==========================================================================
   3d. BARRA DE TITULO (30px cinza) - "codigo - nome da funcao"
   ========================================================================== */
.mxm-titlebar {
  position: fixed;
  top: var(--mxm-topbar-h);
  left: 0;
  right: 0;
  height: var(--mxm-titlebar-h);
  z-index: 39;
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: var(--mxm-titlebar-bg);
  color: var(--mxm-titlebar-fg);
  font-size: 16px;
}

.mxm-titlebar span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   5. CONTENT AREA - abaixo do chrome de 65px, sem sidebar (menu e na topbar)
   ========================================================================== */
.mxm-content {
  margin-top: var(--mxm-chrome-h);
  padding: 1.25rem;
  min-height: calc(100vh - var(--mxm-chrome-h));
}

/* ==========================================================================
   6. TITULO DE PAGINA (secao interna) + ACAO
   ========================================================================== */
.mxm-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 1.25rem;
}

.mxm-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--mxm-text-strong);
  line-height: 1.2;
}

.mxm-page-subtitle {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--mxm-text-muted);
}

.mxm-page-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ==========================================================================
   7. GRID DE FORMULARIO 12 COLUNAS
   ========================================================================== */
.mxm-row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -8px;
}

.mxm-row > [class*="mxm-col"] {
  padding: 0 8px;
  margin-bottom: 16px;
}

.mxm-col-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
.mxm-col-2  { flex: 0 0 16.6666%; max-width: 16.6666%; }
.mxm-col-3  { flex: 0 0 25%;      max-width: 25%; }
.mxm-col-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
.mxm-col-5  { flex: 0 0 41.6666%; max-width: 41.6666%; }
.mxm-col-6  { flex: 0 0 50%;      max-width: 50%; }
.mxm-col-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
.mxm-col-8  { flex: 0 0 66.6666%; max-width: 66.6666%; }
.mxm-col-9  { flex: 0 0 75%;      max-width: 75%; }
.mxm-col-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.mxm-col-11 { flex: 0 0 91.6666%; max-width: 91.6666%; }
.mxm-col-12 { flex: 0 0 100%;     max-width: 100%; }

/* --- Campo com lupa que EXIBE DESCRICAO: LINHA INTEIRA por padrao -------------
   Regra do WebManager (largura por conteudo/bom senso): uma lupa que resolve e
   mostra a DESCRICAO de uma entidade (Cliente, Fornecedor, Plano de conta, Moeda,
   ...) tende a ter descricao LONGA -> ocupa a LINHA INTEIRA, sozinha. O marcador e
   data-mxm-lupa-desc no .mxm-lupa-campo, e esta trava FORCA col-12 por padrao
   (seguro): mesmo que o HTML declare col-6, vira 100%.

   DUAS EXCECOES saem da trava (ficam na COLUNA declarada):
   1. [data-mxm-chave] - o campo-chave (codigo/sequencial). E um codigo curto;
      largura dimensionada ao codigo (col-3/col-4) e fica SOZINHO na propria
      .mxm-row (o campo seguinte cai na linha de baixo). Ver .mxm-lupa-campo abaixo.
   2. [data-mxm-lupa-curta] - lupa cuja descricao e NOTORIAMENTE curta (UF, Cidade,
      CEP) e que PODE dividir a linha (ex.: UF + Cidade lado a lado). O autor marca
      explicitamente; sem a marca, o default (col-12) prevalece - o kit nao adivinha.

   Lupa so de codigo (sem data-mxm-lupa-desc) tambem fica na coluna declarada.
   No MOBILE (<=768px) tudo colapsa pra col-12, inclusive as lupas -curta- e o
   campo-chave (ver breakpoint mais abaixo). */
.mxm-row > [class*="mxm-col"]:has([data-mxm-lupa][data-mxm-lupa-desc]):not(:has([data-mxm-chave])):not(:has([data-mxm-lupa-curta])) {
  flex: 0 0 100%;
  max-width: 100%;
}

/* bloco de campo: label ACIMA (v10 nao usa label flutuante) + controle */
.mxm-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mxm-label {
  font-size: 16px;
  font-weight: 500;
  color: var(--mxm-text-strong);
}

.mxm-label .mxm-required {
  color: var(--mxm-error);
  margin-left: 2px;
}

.mxm-help {
  font-size: 13px;
  color: var(--mxm-text-muted);
}

.mxm-help.is-error {
  color: var(--mxm-error);
}

/* ==========================================================================
   8. BOTOES - v10: raio 8px, altura 50px, Inter 500 16px
   ========================================================================== */
.mxm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  padding: 0 1.25em;
  border: 1px solid transparent;
  border-radius: var(--mxm-radius);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.mxm-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/* primario (Gravar) - preenchido azul de acao */
.mxm-btn--primary {
  background: var(--mxm-primary);
  color: var(--mxm-primary-fg);
  border-color: var(--mxm-primary);
}

.mxm-btn--primary:hover:not(:disabled) {
  background: #05568a;
}

/* secundario / outlined (Excluir no v10 e este: contornado azul, NAO vermelho) */
.mxm-btn--outlined {
  background: #FFFFFF;
  color: var(--mxm-primary);
  border-color: var(--mxm-primary);
}

.mxm-btn--outlined:hover:not(:disabled) {
  background: rgba(3, 98, 156, 0.06);
}

/* texto (sem borda) */
.mxm-btn--text {
  background: transparent;
  color: var(--mxm-primary);
  border-color: transparent;
}

.mxm-btn--text:hover:not(:disabled) {
  background: rgba(3, 98, 156, 0.06);
}

/* variantes de perigo (mantidas por compatibilidade; no v10 o Excluir e outlined
   azul, entao evite usa-las nos templates v10) */
.mxm-btn--danger {
  background: var(--mxm-error);
  color: #FFFFFF;
  border-color: var(--mxm-error);
}

.mxm-btn--danger-outlined {
  background: #FFFFFF;
  color: var(--mxm-error);
  border-color: var(--mxm-error);
}

/* variante compacta (Exportar da caixa de mensagens etc.) */
.mxm-btn--shrinked {
  height: 34px;
  font-size: 13px;
  padding: 0 0.9em;
}

.mxm-btn:focus-visible {
  outline: 2px solid var(--mxm-primary);
  outline-offset: 2px;
}

/* Rodape de acoes de CRUD: barra cinza clara, botoes CENTRALIZADOS.
   No v10 a barra de acoes tem fundo #F2F2F2. Sem botao "Novo". */
.mxm-form-acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.5rem 0;
  background: var(--mxm-footer-bg);
  border-radius: var(--mxm-radius);
}

.mxm-form-acoes .mxm-btn {
  min-width: 11.5rem;
}

/* Barra de ação no topo do formulário - fora do rodapé de CRUD */
.mxm-form-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

/* Intervalo (de / até) - dois campos com separador */
.mxm-interval {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mxm-interval .mxm-input {
  flex: 1 1 0;
  min-width: 0;
}

.mxm-interval-sep {
  flex: 0 0 auto;
  color: var(--mxm-text-muted);
  font-size: 14px;
}

/* ==========================================================================
   LAYOUT "TELA CHEIA" (form-page): rodape de CRUD fixo no fundo da TELA
   ========================================================================== */
.mxm-content--cheia {
  height: calc(100vh - var(--mxm-chrome-h));
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}

.mxm-content--cheia > section {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.mxm-content--cheia > section[hidden] {
  display: none;
}

.mxm-content--cheia > section > .mxm-page-header {
  flex-shrink: 0;
}

.mxm-content--cheia > section.mxm-secao-scroll {
  overflow-y: auto;
}

.mxm-form-card {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.mxm-form-card__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
}

.mxm-form-card > .mxm-form-acoes {
  flex-shrink: 0;
  margin-top: 0;
  border-radius: 0;
  padding: 0.6rem 1.5rem;
  border-top: 1px solid var(--mxm-card-border);
}

/* ==========================================================================
   AUDITORIA - painel (expansion) com colunas Criado/Alterado; so em registro
   carregado. Igual ao mxm-audit (borda #bbb, label #003867).
   ========================================================================== */
.mxm-audit {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--mxm-panel-border);
  border-radius: var(--mxm-radius);
  background: var(--mxm-surface);
}

.mxm-audit-titulo {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--mxm-panel-label);
}

.mxm-audit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.mxm-audit-evento {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mxm-audit-rotulo {
  font-size: 14px;
  font-weight: 700;
  color: var(--mxm-text-strong);
}

.mxm-audit-usuario {
  font-size: 16px;
  color: var(--mxm-text);
}

.mxm-audit-data {
  font-size: 14px;
  color: var(--mxm-text-muted);
}

/* ==========================================================================
   UPLOAD (dropzone) + ANEXOS / MXM DRIVE
   ========================================================================== */
.mxm-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 16px;
  border: 2px dashed var(--mxm-input-border);
  border-radius: var(--mxm-radius-input);
  text-align: center;
  color: var(--mxm-text-muted);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.mxm-upload:hover,
.mxm-upload.is-dragover {
  border-color: var(--mxm-primary);
  background: rgba(3, 98, 156, 0.05);
}

.mxm-upload i {
  font-size: 1.8rem;
  color: var(--mxm-text-muted);
}

.mxm-upload input[type="file"] {
  display: none;
}

.mxm-upload-dica {
  font-size: 13px;
}

.mxm-anexo-lista {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  border: 1px solid var(--mxm-card-border);
  border-radius: var(--mxm-radius);
  overflow: hidden;
}

.mxm-anexo-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 14px;
}

.mxm-anexo-item + .mxm-anexo-item {
  border-top: 1px solid var(--mxm-card-border);
}

.mxm-anexo-ico {
  color: var(--mxm-primary);
  flex-shrink: 0;
}

.mxm-anexo-nome {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--mxm-text);
}

.mxm-anexo-tam {
  font-size: 13px;
  color: var(--mxm-text-muted);
  white-space: nowrap;
}

.mxm-anexo-vazio {
  padding: 10px 12px;
  font-size: 14px;
  color: var(--mxm-text-muted);
}

/* ==========================================================================
   9. BOTOES DE ACAO DE LINHA - v10: icones cinza #595959 (sem circulo colorido)
   ========================================================================== */
.mxm-btn-edit,
.mxm-btn-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--mxm-table-action-fg);
  font-size: 18px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.mxm-btn-edit .pi,
.mxm-btn-del .pi {
  font-size: 18px;
}

.mxm-btn-edit:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--mxm-primary);
}

.mxm-btn-del:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--mxm-error);
}

/* ==========================================================================
   10. CARD - raio 8px
   ========================================================================== */
.mxm-card {
  background: var(--mxm-surface);
  border: 1px solid var(--mxm-card-border);
  border-radius: var(--mxm-radius-card);
  box-shadow: var(--mxm-shadow-card);
  padding: 20px;
}

.mxm-card + .mxm-card,
.mxm-card + .mxm-panel,
.mxm-panel + .mxm-card,
.mxm-panel + .mxm-panel,
.mxm-cards + .mxm-panel,
.mxm-cards + .mxm-card {
  margin-top: 1.25rem;
}

.mxm-card-title {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 700;
  color: var(--mxm-text-strong);
}

.mxm-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

/* ==========================================================================
   11. KPI CARD - label + info + numero grande
   ========================================================================== */
.mxm-kpi {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--mxm-surface);
  border: 1px solid var(--mxm-card-border);
  border-radius: var(--mxm-radius-card);
  box-shadow: var(--mxm-shadow-card);
  padding: 1rem;
  font-family: inherit;
  transition: box-shadow 0.15s ease;
}

button.mxm-kpi {
  cursor: pointer;
}

button.mxm-kpi:hover {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
}

.mxm-kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mxm-kpi-label {
  font-size: 14px;
  color: var(--mxm-text-muted);
}

.mxm-kpi-info {
  color: var(--mxm-text-muted);
  font-size: 1rem;
  cursor: pointer;
}

.mxm-kpi-info:hover {
  color: var(--mxm-text);
}

.mxm-kpi-value {
  margin-top: 4px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--mxm-text-strong);
}

.mxm-kpi-value--primary { color: var(--mxm-primary); }
.mxm-kpi-value--navy { color: var(--mxm-navy); }
.mxm-kpi-value--accent { color: var(--mxm-accent); }

/* ==========================================================================
   12. INPUT - v10: borda outline #E3E5E5, raio 8px, altura 40px, fundo branco
   ========================================================================== */
.mxm-input,
.mxm-select,
.mxm-textarea {
  width: 100%;
  height: 40px;
  padding: 0 1em;
  border: 1px solid var(--mxm-input-border);
  border-radius: var(--mxm-radius-input);
  background: var(--mxm-input-bg);
  color: var(--mxm-input-fg);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mxm-input::placeholder,
.mxm-textarea::placeholder {
  color: var(--mxm-text-muted);
}

.mxm-input:focus,
.mxm-select:focus,
.mxm-textarea:focus {
  outline: none;
  border-color: var(--mxm-navy);
  box-shadow: var(--mxm-focus-glow);
}

.mxm-input:disabled,
.mxm-select:disabled,
.mxm-textarea:disabled,
.mxm-input[readonly] {
  background: var(--mxm-readonly-bg);
  border-color: var(--mxm-readonly-bg);
  cursor: not-allowed;
}

/* Erro: borda vermelha (2px no foco, 1px fora) - padrao do field-wrap v10 */
.mxm-input.is-invalid,
.mxm-select.is-invalid,
.mxm-textarea.is-invalid {
  border-color: var(--mxm-error-border);
}

.mxm-input.is-invalid:focus,
.mxm-select.is-invalid:focus,
.mxm-textarea.is-invalid:focus {
  border-width: 2px;
  box-shadow: none;
}

.mxm-input-group {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.mxm-input-group .mxm-input {
  flex: 1 1 auto;
  min-width: 0;
}

/* Campo com lupa (v10): UM input mostrando "código - descrição", com X (limpar)
   e lupa como ícones no canto direito. Editável; selecionar substitui o valor.
   O markup é só: <div class="mxm-lupa-campo" data-mxm-lupa="..."><input class="mxm-input"></div>
   - os ícones são injetados pelo mxm-ui-v10.js (hidratarLupa). */
.mxm-lupa-campo {
  position: relative;
  display: block;
}

.mxm-lupa-campo .mxm-input {
  width: 100%;
  padding-right: 4.25rem;
}

.mxm-lupa-campo .mxm-lupa-x,
.mxm-lupa-campo .mxm-lupa-btn {
  position: absolute;
  top: 0;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.mxm-lupa-campo .mxm-lupa-btn {
  right: 0.6rem;
  width: 1.6rem;
  color: var(--mxm-primary);
}

.mxm-lupa-campo .mxm-lupa-x {
  right: 2.1rem;
  width: 1.5rem;
  color: var(--mxm-text-muted);
}

.mxm-lupa-campo .mxm-lupa-x:hover {
  color: var(--mxm-text);
}

/* ==========================================================================
   13. SELECT + PAINEL
   ========================================================================== */
.mxm-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23090A0A' d='M6 8 0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.mxm-select-panel {
  background: var(--mxm-surface);
  border: 1px solid var(--mxm-card-border);
  border-radius: var(--mxm-radius);
  box-shadow: var(--mxm-shadow-panel);
  padding: 6px 0;
  overflow: hidden;
}

.mxm-select-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 16px;
  color: var(--mxm-text);
  cursor: pointer;
  transition: background 0.12s ease;
}

.mxm-select-option:hover {
  background: #F0F0F0;
}

.mxm-select-option.is-selected {
  background: rgba(29, 51, 97, 0.1);
  color: var(--mxm-navy);
  font-weight: 500;
}

/* ==========================================================================
   14. TEXTAREA
   ========================================================================== */
.mxm-textarea {
  height: auto;
  min-height: 96px;
  padding: 0.6em 1em;
  resize: vertical;
}

/* ==========================================================================
   15. CHECKBOX / RADIO - marcacao azul de acao #03629C
   ========================================================================== */
.mxm-check,
.mxm-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: var(--mxm-text);
  cursor: pointer;
  user-select: none;
}

/* Lista de checkboxes empilhados verticalmente (ex.: opções de acesso). */
.mxm-check-lista {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.mxm-check input,
.mxm-radio input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 18px;
  border: 2px solid var(--mxm-text-muted);
  background: var(--mxm-input-bg);
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.mxm-check input {
  border-radius: 3px;
}

.mxm-radio input {
  border-radius: 50%;
}

.mxm-check input:focus-visible,
.mxm-radio input:focus-visible {
  outline: none;
  box-shadow: var(--mxm-focus-glow);
}

.mxm-check input:checked,
.mxm-radio input:checked {
  background: var(--mxm-primary);
  border-color: var(--mxm-primary);
}

.mxm-check input:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  width: 5px;
  height: 10px;
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.mxm-radio input:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FFFFFF;
  transform: translate(-50%, -50%);
}

/* ==========================================================================
   16. TABELA - v10: header #d3d3d3, zebra #efefef, hover #c9c9c9, linha 28px
   ========================================================================== */
.mxm-table-wrap {
  width: 100%;
  border: 1px solid var(--mxm-table-border);
  border-radius: 4px;
  overflow-x: auto;
}

/* scrollableFull: o container rola verticalmente (altura setada via JS) e o
   cabeçalho fica fixo no topo, pra a grid ocupar o espaço mesmo com poucas linhas. */
.mxm-table-wrap--full {
  overflow-y: auto;
}

.mxm-table-wrap--full .mxm-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.mxm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.mxm-table thead th {
  text-align: left;
  padding: 0 0.75em;
  height: 32px;
  font-size: 14px;
  font-weight: 700;
  color: var(--mxm-table-header-fg);
  background: var(--mxm-table-header-bg);
  border-bottom: 1px solid var(--mxm-table-border);
  white-space: nowrap;
}

.mxm-table thead th:not(:last-child) {
  border-right: 1px solid var(--mxm-table-border);
}

.mxm-table tbody td {
  padding: 0 0.75em;
  height: 28px;
  color: var(--mxm-table-cell-fg);
  border-bottom: 1px solid var(--mxm-table-border);
  vertical-align: middle;
  white-space: nowrap;
}

/* Zebra por padrao no v10 (linhas pares cinza claro) */
.mxm-table tbody tr:nth-child(even) td {
  background: var(--mxm-table-zebra);
}

.mxm-table tbody tr:hover td {
  background: var(--mxm-table-hover-bg);
}

.mxm-table tbody tr:last-child td {
  border-bottom: none;
}

/* Coluna de acoes a ESQUERDA, estreita */
.mxm-table .mxm-cell-actions {
  text-align: left;
  white-space: nowrap;
  width: 1%;
}

.mxm-table .mxm-cell-actions .mxm-btn-edit + .mxm-btn-del {
  margin-left: 4px;
}

/* Barra de botoes padrao ACIMA da grid (Adicionar novo / Excluir selecionados /
   Excluir nao selecionados) - igual aos grids do v10. Botoes com icone +/-. */
.mxm-table-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Coluna de selecao (checkbox) - primeira coluna, estreita */
.mxm-table .mxm-cell-select {
  width: 1%;
  text-align: center;
  white-space: nowrap;
}

.mxm-table .mxm-cell-select input {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--mxm-primary);
}

/* Linhas coloridas por status/legenda (fundo tingido) - via opcoes.linhaClasse */
.mxm-table tbody tr.mxm-linha--sucesso td { background: rgba(9, 171, 2, 0.10); }
.mxm-table tbody tr.mxm-linha--erro td { background: rgba(211, 24, 12, 0.09); }
.mxm-table tbody tr.mxm-linha--aviso td { background: rgba(248, 117, 10, 0.12); }
.mxm-table tbody tr.mxm-linha--info td { background: rgba(3, 98, 156, 0.08); }

/* ==========================================================================
   17. PAGINACAO - centralizada, botoes azuis de acao
   ========================================================================== */
.mxm-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}

.mxm-pager-info {
  width: 100%;
  text-align: center;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--mxm-text-muted);
}

.mxm-pager-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--mxm-primary);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.mxm-pager-btn:hover:not(:disabled) {
  background: rgba(3, 98, 156, 0.08);
}

.mxm-pager-btn.is-active {
  background: var(--mxm-primary);
  color: var(--mxm-primary-fg);
  font-weight: 600;
}

.mxm-pager-btn:disabled {
  color: rgba(0, 0, 0, 0.26);
  cursor: not-allowed;
}

/* ==========================================================================
   18. BADGE / TAG DE STATUS
   ========================================================================== */
.mxm-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  background: rgba(114, 119, 122, 0.14);
  color: var(--mxm-text-muted);
}

.mxm-badge--info    { background: rgba(3, 98, 156, 0.12); color: var(--mxm-primary); }
.mxm-badge--success { background: rgba(9, 171, 2, 0.12);  color: var(--mxm-success); }
.mxm-badge--warning { background: rgba(248, 117, 10, 0.16); color: #B4560A; }
.mxm-badge--error   { background: rgba(211, 24, 12, 0.10); color: var(--mxm-error-strong); }

.mxm-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

/* ==========================================================================
   19. DIALOG / MODAL - v10: raio 8px, header com divisoria, acoes centro #F2F2F2
   ========================================================================== */
.mxm-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--mxm-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.mxm-dialog-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.mxm-dialog {
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  background: var(--mxm-surface);
  border-radius: var(--mxm-radius-dialog);
  box-shadow: var(--mxm-shadow-dialog);
  transform: translateY(8px);
  transition: transform 0.2s ease;
}

.mxm-dialog-backdrop.is-open .mxm-dialog {
  transform: translateY(0);
}

.mxm-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--mxm-footer-bg);
}

.mxm-dialog-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--mxm-text-strong);
}

.mxm-dialog-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--mxm-text-muted);
  font-size: 18px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.mxm-dialog-close:hover {
  background: #F0F0F0;
}

.mxm-dialog-body {
  padding: 16px 20px;
  overflow-y: auto;
  color: var(--mxm-text);
}

/* Rodape de acoes: barra cinza clara centralizada (v10 mat-dialog-actions) */
.mxm-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 8px 20px;
  background: var(--mxm-footer-bg);
  border-radius: 0 0 var(--mxm-radius-dialog) var(--mxm-radius-dialog);
}

.mxm-dialog--mensagens .mxm-dialog-title {
  color: var(--mxm-notif-title);
}

.mxm-msg-filtro {
  margin-bottom: 12px;
}

.mxm-msg-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

/* botoes de exportar da caixa de mensagens: compactos */
.mxm-msg-toolbar .mxm-btn {
  height: 34px;
  font-size: 13px;
  padding: 0 0.9em;
}

.mxm-msg-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--mxm-notif-border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--mxm-notif-bg);
}

.mxm-msg-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--mxm-text-strong);
}

.mxm-msg-item + .mxm-msg-item {
  border-top: 1px solid var(--mxm-notif-border);
}

.mxm-msg-ico {
  flex-shrink: 0;
  font-size: 1.1rem;
}

.mxm-msg-ico--erro { color: var(--mxm-error-strong); }
.mxm-msg-ico--aviso { color: var(--mxm-accent); }
.mxm-msg-ico--info { color: var(--mxm-info); }
.mxm-msg-ico--sucesso { color: var(--mxm-success); }

.mxm-dialog--acoes-centro .mxm-dialog-footer {
  justify-content: center;
}

.mxm-msg-vazio {
  padding: 12px 14px;
  font-size: 14px;
  color: var(--mxm-text-muted);
}

/* ==========================================================================
   19b. JANELA DE LUPA (SearchWindow v10): filtro c/ ícone + limpar, seleção de
   linha destacada, funil por coluna e paginação (primeira/última). Rodapé Ok +
   Fechar (centralizados) vem do dialog.
   ========================================================================== */
.mxm-lupa-filtro {
  position: relative;
  margin-bottom: 12px;
}

.mxm-lupa-filtro .mxm-input {
  padding-right: 4.5rem;
}

.mxm-lupa-filtro-ico,
.mxm-lupa-filtro-limpar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mxm-text-muted);
}

.mxm-lupa-filtro-ico {
  right: 0.75rem;
  pointer-events: none;
}

.mxm-lupa-filtro-limpar {
  right: 2.25rem;
  width: 1.6rem;
  height: 1.6rem;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
}

.mxm-lupa-filtro-limpar:hover {
  color: var(--mxm-text);
  background: #f0f0f0;
}

.mxm-lupa-tabela {
  max-height: 44vh;
  overflow-y: auto;
}

.mxm-lupa-tabela .mxm-table tbody tr {
  cursor: pointer;
}

/* linha selecionada (azul claro SÓLIDO - bem distinto do cinza da zebra, pra
   um clique deixar claro qual registro foi selecionado; vence zebra e hover). */
.mxm-table tbody tr.is-selected td,
.mxm-table tbody tr.is-selected:hover td {
  background: #cfe3f7;
}

/* funil por coluna (visual, igual ao grid do v10) */
.mxm-lupa-funil {
  float: right;
  font-size: 0.75rem;
  color: var(--mxm-text-muted);
  opacity: 0.85;
}

/* pager da lupa (padrão v10): controles de página à ESQUERDA, contagem à DIREITA */
.mxm-lupa-pager {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.mxm-lupa-pager .mxm-pager-info {
  width: auto;
  margin: 0;
  text-align: right;
}

.mxm-lupa-pager-linha {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mxm-lupa-pagina {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--mxm-text-muted);
  padding: 0 6px;
}

/* número da página = campo editável (igual ao paginador do v10) */
.mxm-lupa-pagina-input {
  width: 3rem;
  height: 28px;
  padding: 0 0.4rem;
  border: 1px solid var(--mxm-input-border);
  border-radius: 6px;
  background: var(--mxm-input-bg);
  color: var(--mxm-text);
  font-family: inherit;
  font-size: 14px;
  text-align: center;
}

.mxm-lupa-pagina-input:focus {
  outline: none;
  border-color: var(--mxm-navy);
  box-shadow: var(--mxm-focus-glow);
}

/* ==========================================================================
   20. TOAST - existe por compatibilidade, mas o padrao MXM e a CAIXA DE
   MENSAGENS (mensagens/alerta). Evite toast nos prototipos v10.
   ========================================================================== */
.mxm-toast-region {
  position: fixed;
  top: calc(var(--mxm-chrome-h) + 16px);
  right: 16px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 360px;
  width: calc(100% - 32px);
  pointer-events: none;
}

.mxm-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  background: var(--mxm-surface);
  border: 1px solid var(--mxm-card-border);
  border-left: 4px solid var(--mxm-primary);
  border-radius: var(--mxm-radius-card);
  box-shadow: var(--mxm-shadow-panel);
  color: var(--mxm-text);
  font-size: 14px;
}

.mxm-toast--success { border-left-color: var(--mxm-success); }
.mxm-toast--error   { border-left-color: var(--mxm-error); }
.mxm-toast--warning { border-left-color: var(--mxm-accent); }
.mxm-toast--info    { border-left-color: var(--mxm-info); }

.mxm-toast-ico { font-size: 16px; line-height: 1.4; }
.mxm-toast--success .mxm-toast-ico { color: var(--mxm-success); }
.mxm-toast--error   .mxm-toast-ico { color: var(--mxm-error); }
.mxm-toast--warning .mxm-toast-ico { color: var(--mxm-accent); }
.mxm-toast--info    .mxm-toast-ico { color: var(--mxm-info); }

.mxm-toast-body { flex: 1 1 auto; }
.mxm-toast-title { font-weight: 700; color: var(--mxm-text-strong); }
.mxm-toast-msg { margin-top: 2px; color: var(--mxm-text); }

/* ==========================================================================
   21. EXPANSION PANEL - v10: borda #bbb, label #003867 sobre a borda
   ========================================================================== */
.mxm-panel {
  background: var(--mxm-surface);
  border: 1px solid var(--mxm-panel-border);
  border-radius: var(--mxm-radius);
  overflow: hidden;
}

.mxm-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: none;
  background: transparent;
  color: var(--mxm-panel-label);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.mxm-panel-header:hover {
  background: var(--mxm-panel-nested-bg);
}

.mxm-panel-arrow {
  color: var(--mxm-text-strong);
  font-size: 14px;
  transition: transform 0.2s ease;
}

.mxm-panel.is-open .mxm-panel-arrow {
  transform: rotate(180deg);
}

.mxm-panel-body {
  display: none;
  padding: 0 16px 16px;
  color: var(--mxm-text);
}

.mxm-panel.is-open .mxm-panel-body {
  display: block;
}

/* ==========================================================================
   22. LEGENDA DE CORES
   ========================================================================== */
.mxm-legenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: var(--mxm-surface);
  border: 1px solid var(--mxm-card-border);
  border-radius: var(--mxm-radius);
  font-size: 13px;
  color: var(--mxm-text-muted);
}

.mxm-legenda-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mxm-legenda-cor {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex: 0 0 14px;
}

/* ==========================================================================
   DASHBOARD v10 (landing pos-login) - grupos "Links" + "Favoritos".
   Calibrado no DashboardComponent real: fundo #f1f3f4, cards 170x85 brancos,
   X no canto sup-esq, icone 30px no canto sup-dir, titulo 13px no rodape.
   ========================================================================== */
.mxm-dash-page {
  background: #f1f3f4;
  min-height: 100%;
  padding: 5px 20px 20px;
  box-sizing: border-box;
}
.mxm-dash-grupo-ico {
  display: block;
  color: #8a8a8a;
  font-size: 30px !important;
  width: 30px;
  height: 30px;
  margin: 20px 0 12px;
}
.mxm-dash-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.mxm-dash-card {
  position: relative;
  width: 170px;
  height: 85px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  padding: 8px 10px;
  transition: box-shadow 0.15s;
  overflow: hidden;
}
.mxm-dash-card:hover {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}
.mxm-dash-card-x {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #d1cfcf;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mxm-dash-card-x:hover {
  background: #e4e4e4;
  color: #9e9e9e;
}
.mxm-dash-card-x .material-icons {
  font-size: 14px;
}
.mxm-dash-card-ico {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mxm-dash-card-ico .material-icons {
  font-size: 30px;
}
.mxm-dash-card-ico-img {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mxm-dash-card-titulo {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 7px;
  font-size: 13px;
  font-weight: 500;
  color: #1a1a1a;
  line-height: 1.2;
  max-height: 2.4em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
@media (max-width: 768px) {
  .mxm-dash-page {
    padding: 12px;
  }
  .mxm-dash-card {
    width: calc(50% - 5px);
  }
}

/* ==========================================================================
   RESPONSIVIDADE
   ========================================================================== */
@media (max-width: 768px) {
  .mxm-content {
    padding: 1rem;
  }

  .mxm-page-header {
    flex-direction: column;
    align-items: stretch;
  }

  .mxm-page-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .mxm-page-actions .mxm-btn:not(.mxm-btn--icon),
  .mxm-dialog-footer .mxm-btn:not(.mxm-btn--icon) {
    width: 100%;
  }

  .mxm-form-acoes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }

  .mxm-form-acoes .mxm-btn {
    min-width: 0;
    width: 100%;
  }

  .mxm-row > [class*="mxm-col"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* launcher ocupa a largura */
  .mxm-v10-launcher {
    max-width: 100vw;
    right: 0;
  }

  .mxm-v10-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }

  .mxm-v10-card {
    width: 100%;
  }

  /* --- Tabela empilha como card --- */
  .mxm-table-wrap {
    border: none;
    border-radius: 0;
    overflow-x: visible;
  }

  .mxm-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .mxm-table,
  .mxm-table tbody,
  .mxm-table tr,
  .mxm-table td {
    display: block;
    width: 100%;
  }

  .mxm-table tbody tr {
    position: relative;
    margin-bottom: 12px;
    border: 1px solid var(--mxm-card-border);
    border-radius: var(--mxm-radius);
    background: var(--mxm-surface);
    box-shadow: var(--mxm-shadow-card);
    padding: 4px 0;
    overflow: hidden;
  }

  .mxm-table tbody tr:has(> .mxm-cell-actions),
  .mxm-table tbody tr:has(> .mxm-cell-select) {
    padding-top: 3rem;
  }

  .mxm-table tbody tr:nth-child(even) td,
  .mxm-table tbody tr:hover td {
    background: transparent;
  }

  .mxm-table tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: auto;
    text-align: right;
    white-space: normal;
    border-bottom: 1px solid var(--mxm-table-border);
    padding: 10px 16px;
  }

  .mxm-table tbody tr td:last-child {
    border-bottom: none;
  }

  .mxm-table tbody td::before {
    content: attr(data-label);
    font-size: 12px;
    font-weight: 700;
    color: var(--mxm-table-header-fg);
    text-align: left;
    margin-right: auto;
  }

  .mxm-table .mxm-cell-actions {
    position: absolute;
    top: 0.4rem;
    right: 0.6rem;
    left: auto;
    width: auto;
    padding: 0;
    border-bottom: none;
    display: flex;
    gap: 6px;
    justify-content: flex-end;
  }

  .mxm-table .mxm-cell-actions::before {
    display: none;
  }

  /* Checkbox de selecao: canto superior ESQUERDO do card (espelha as acoes, que
     ficam no topo-direito). Sem isso, a celula empilhava como uma linha vazia. */
  .mxm-table .mxm-cell-select {
    position: absolute;
    top: 0.4rem;
    left: 0.6rem;
    width: auto;
    padding: 0;
    border-bottom: none;
    justify-content: flex-start;
  }

  .mxm-table .mxm-cell-select::before {
    display: none;
  }
}

/* ==========================================================================
   ACESSIBILIDADE - respeitar reducao de movimento
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
  }
}