/* ==========================================================================
   MODELOS DE MENSAGEM DO WHATSAPP

   Duas telas no mesmo arquivo, porque uma leva à outra:
   1. a lista, no formato de tabela do painel, com uma linha por idioma;
   2. o editor, em três colunas (identidade do modelo, conteúdo, prévia).

   A prévia é um celular desenhado em CSS puro, sem imagem de moldura: ela
   precisa acompanhar a cor e o arredondamento do resto do painel, e uma
   moldura em PNG envelheceria sozinha.
   ========================================================================== */

/* --- Lista --------------------------------------------------------------- */
.mm-intro { margin-bottom: 18px; }
.mm-intro h3 { font-size: 16px; margin: 0 0 6px; }
.mm-intro p { color: var(--text-2); font-size: 13.5px; line-height: 1.55; max-width: 78ch; }

.mm-topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}

/* O aviso da integração fica visível o tempo todo: quem monta um modelo
   precisa saber que a aprovação ainda não sai daqui, e não descobrir depois. */
.mm-aviso {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--blue-soft, #FFF5F3); border: 1px solid var(--border-orange, rgba(250, 57, 9,.3));
  color: #8A4A12; border-radius: var(--r-md, 14px);
  padding: 12px 14px; font-size: 13px; line-height: 1.5; margin-bottom: 18px;
}
.mm-aviso svg { flex: 0 0 auto; margin-top: 1px; color: var(--orange, #FA3909); }

.mm-filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
.mm-filtros label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.mm-filtros .form-input { min-width: 170px; }
.mm-filtros .mm-filtro-busca .form-input { min-width: 240px; }

/* A barra de seleção só existe quando algo está marcado, e substitui os
   filtros no lugar de empurrá-los para baixo. */
.mm-selecao {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--blue-soft, #FFF5F3); border: 1px solid var(--border-orange, rgba(250, 57, 9,.3));
  border-radius: var(--r-md, 14px); padding: 10px 14px; margin-bottom: 14px; font-size: 13px;
}
.mm-selecao strong { font-weight: 600; }

/* Rótulo que só o leitor de tela lê. A coluna de ações não mostra título, mas
   uma coluna sem nome nenhum deixa a tabela sem sentido para quem ouve. */
.mm-tabela .sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.mm-tabela td { vertical-align: middle; }
.mm-tabela th.mm-col-check, .mm-tabela td.mm-col-check { width: 42px; padding-right: 0; }
.mm-tabela th.mm-col-acoes, .mm-tabela td.mm-col-acoes { width: 52px; text-align: right; }
.mm-tabela input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--orange, #FA3909); cursor: pointer; }

.mm-linha-nome { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mm-linha-nome strong { font-size: 13.5px; font-weight: 600; }
.mm-linha-nome small { color: var(--text-2); font-size: 12px; line-height: 1.4; }
.mm-linha-nome .mm-nome-meta { color: var(--text-3); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; }

/* A categoria é a informação que mais derruba modelo na Meta (promoção enviada
   como utilidade volta reprovada), então ela ganha forma de etiqueta em vez de
   texto solto, com um tom por categoria para separar as três de relance. */
.mm-pill-categoria {
  display: inline-flex; align-items: center;
  padding: 4px 12px; border-radius: var(--r-pill, 999px);
  font-size: 12px; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent;
}
.mm-pill-categoria--marketing { background: var(--blue-soft, #FFF5F3); color: #B4530E; border-color: rgba(250, 57, 9, .28); }
.mm-pill-categoria--utilidade { background: #EFF6FF; color: #1D4ED8; border-color: rgba(37, 99, 235, .22); }
.mm-pill-categoria--autenticacao { background: #F5F3FF; color: #6D28D9; border-color: rgba(109, 40, 217, .22); }

/* Selos do que o modelo tem, para reconhecer o formato sem abrir. */
.mm-marcadores { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.mm-marcador {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface-2, #FAFAFA); border: 1px solid var(--line, #ECECEE);
  border-radius: var(--r-pill, 999px); padding: 2px 8px; font-size: 11.5px; color: var(--text-2);
}

.mm-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12.5px; }
.mm-status--aprovado { color: #166534; }
.mm-status--em_analise { color: #854D0E; }
.mm-status--rascunho { color: var(--text-2); }
.mm-status--rejeitado { color: #991B1B; }
.mm-status--pausado { color: #075985; }
.mm-status--sem_idioma { color: var(--text-3); }

/* Menu de ações da linha (os três pontos).
   O menu NÃO mora dentro da tabela. A tabela rola na horizontal
   (.table-wrap tem overflow), e todo filho posicionado dentro dela é recortado
   na borda: era isso que cortava o menu, deixando visível só a primeira ação.
   Por isso ele é montado no fim do body, em position: fixed, com as
   coordenadas calculadas a partir do botão que o abriu. */
.mm-kebab { display: inline-block; }
.mm-kebab-botao {
  width: 30px; height: 30px; border-radius: 50%; border: 0; background: transparent;
  color: var(--text-2); cursor: pointer; display: grid; place-items: center;
}
.mm-kebab-botao:hover, .mm-kebab-botao[aria-expanded="true"] { background: var(--surface-2, #FAFAFA); color: var(--text); }
.mm-kebab-lista {
  position: fixed; z-index: 11000; min-width: 216px;
  background: var(--surface, #fff); border: 1px solid var(--line, #ECECEE);
  border-radius: 12px; box-shadow: var(--shadow-lg, 0 18px 50px rgba(17,17,20,.10)); padding: 6px;
}
.mm-kebab-lista button {
  width: 100%; display: flex; align-items: center; gap: 9px; padding: 8px 10px;
  border: 0; border-radius: 8px; background: transparent; color: inherit;
  font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.mm-kebab-lista button:hover { background: var(--surface-2, #FAFAFA); }
.mm-kebab-lista button.mm-perigo { color: var(--red, #E5484D); }
.mm-kebab-lista button:disabled { opacity: .45; cursor: not-allowed; }

.mm-vazio { padding: 40px 20px; text-align: center; color: var(--text-2); font-size: 13.5px; }
.mm-vazio strong { display: block; color: var(--text); font-size: 15px; margin-bottom: 6px; }

/* --- Editor -------------------------------------------------------------- */
.mm-caminho { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); margin-bottom: 16px; }
.mm-caminho button {
  border: 0; background: none; color: var(--text-2); font: inherit; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; gap: 6px;
}
.mm-caminho button:hover { color: var(--orange, #FA3909); }
.mm-caminho strong { color: var(--text); font-weight: 600; }

.mm-editor {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: start;
}
@media (max-width: 1220px) {
  .mm-editor { grid-template-columns: 230px minmax(0, 1fr); }
  .mm-editor .mm-previa-coluna { grid-column: 1 / -1; justify-self: center; }
}
@media (max-width: 780px) {
  .mm-editor { grid-template-columns: minmax(0, 1fr); }
}

.mm-lateral .form-group:last-child { margin-bottom: 0; }
.mm-lateral h4 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-3); font-weight: 600; margin: 0 0 10px;
}

/* Lista de idiomas do modelo. O idioma aberto fica marcado, e cada um mostra o
   próprio status: aprovado em português e recusado em espanhol é normal. */
.mm-idiomas { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.mm-idioma {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 10px; border: 1px solid transparent; border-radius: 10px;
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.mm-idioma:hover { background: var(--surface-2, #FAFAFA); }
.mm-idioma.ativo { background: var(--blue-soft, #FFF5F3); border-color: var(--border-orange, rgba(250, 57, 9,.3)); }
.mm-idioma-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mm-idioma-nome strong { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-idioma-nome small { font-size: 11.5px; }
.mm-idioma-remover {
  border: 0; background: none; color: var(--text-3); cursor: pointer; padding: 2px;
  display: grid; place-items: center; border-radius: 6px;
}
.mm-idioma-remover:hover { color: var(--red, #E5484D); }

.mm-link-acao {
  display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; padding: 0;
  color: var(--orange, #FA3909); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.mm-link-acao:hover { color: var(--blue-strong, #D73108); }

.mm-conteudo-topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 6px;
}
.mm-conteudo-topo h3 { font-size: 19px; font-weight: 700; margin: 0; }
.mm-conteudo-topo .mm-acoes-versao { display: flex; gap: 8px; flex-wrap: wrap; }
.mm-explica { color: var(--text-2); font-size: 13px; line-height: 1.55; margin-bottom: 20px; max-width: 72ch; }

/* O título de cada bloco sai na cor da marca: são eles que dividem o editor em
   Cabeçalho, Mensagem, Rodapé e Botões, e em cinza sumiam no meio do texto. */
.mm-campo { margin-bottom: 22px; }
.mm-campo-rotulo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 13.5px; font-weight: 700; margin-bottom: 8px;
  color: var(--kortei-orange-600, #D73108);
}
.mm-campo-rotulo span.mm-opcional { color: var(--text-3); font-weight: 500; font-size: 12.5px; }
.mm-contador { color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.mm-contador.mm-contador--cheio { color: var(--red, #E5484D); font-weight: 600; }
.mm-ajuda { color: var(--text-2); font-size: 12.5px; line-height: 1.5; margin-top: 7px; }

/* Escolha do tipo de cabeçalho: quatro alvos grandes, como na tela de origem. */
.mm-tipos-cabecalho { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 620px) { .mm-tipos-cabecalho { grid-template-columns: repeat(2, 1fr); } }
.mm-tipo {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 10px; border: 1.5px dashed rgba(250, 57, 9, .32); border-radius: var(--r-md, 14px);
  background: var(--surface, #fff); color: var(--text-2); font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.mm-tipo:hover { border-color: var(--orange, #FA3909); color: var(--text); }
.mm-tipo.ativo {
  border-style: solid; border-color: var(--orange, #FA3909);
  background: var(--blue-soft, #FFF5F3); color: var(--blue-strong, #D73108);
}

.mm-cabecalho-editor { display: flex; align-items: flex-start; gap: 10px; }
.mm-cabecalho-editor > *:first-child { flex: 1; min-width: 0; }
.mm-remover-bloco {
  border: 0; background: none; color: var(--text-3); cursor: pointer;
  padding: 8px; border-radius: 8px; display: grid; place-items: center;
}
.mm-remover-bloco:hover { color: var(--red, #E5484D); background: var(--surface-2, #FAFAFA); }

/* Área de envio do arquivo de exemplo do cabeçalho. */
.mm-upload {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 96px; padding: 18px;
  border: 1.5px dashed rgba(250, 57, 9, .32); border-radius: var(--r-md, 14px);
  background: var(--surface-2, #FAFAFA); color: var(--text-2); font: inherit; font-size: 13px; cursor: pointer;
}
.mm-upload:hover { border-color: var(--orange, #FA3909); color: var(--text); }
.mm-upload.mm-upload--ocupado { cursor: progress; }
.mm-upload-preview { display: flex; align-items: center; gap: 12px; width: 100%; }
.mm-upload-preview img {
  width: 72px; height: 72px; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--line, #ECECEE); background: #fff;
}
.mm-upload-preview .mm-upload-ico {
  width: 72px; height: 72px; display: grid; place-items: center; border-radius: 10px;
  border: 1px solid var(--line, #ECECEE); background: #fff; color: var(--orange, #FA3909);
}
.mm-upload-dados { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text-2); }
.mm-upload-dados strong { display: block; color: var(--text); font-size: 13px; margin-bottom: 2px; }

/* Barra de variáveis acima da mensagem. */
.mm-barra-variaveis { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.mm-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--r-pill, 999px);
  border: 1px solid var(--line, #ECECEE); background: var(--surface, #fff);
  color: var(--text-2); font: inherit; font-size: 12.5px; cursor: pointer;
}
.mm-chip:hover { border-color: var(--orange, #FA3909); color: var(--orange, #FA3909); }

/* A caixa da mensagem com a variável pintada de laranja.
   Um <textarea> não deixa colorir um pedaço do próprio texto, então são duas
   camadas exatamente sobrepostas: embaixo uma div que repete o texto com a
   variável dentro de um <span>, em cima o textarea com o texto transparente e
   só o cursor visível. Quem o usuário lê é a div; quem ele digita é o textarea.

   As duas camadas PRECISAM ter a mesma métrica (fonte, tamanho, entrelinha,
   recuo e espessura da borda). Qualquer diferença aqui desalinha a marcação do
   texto de verdade, e o efeito vira defeito. */
.mm-corpo-caixa { position: relative; }
.mm-corpo-realce,
.mm-corpo {
  font-family: inherit; font-size: 14px; line-height: 1.55;
  padding: 11px 13px; border: 1px solid transparent; border-radius: var(--r-md, 14px);
  white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word;
  letter-spacing: normal;
}
.mm-corpo {
  position: relative; z-index: 1; display: block; width: 100%; box-sizing: border-box;
  min-height: 170px; resize: vertical; outline: none;
  background: transparent; color: transparent; caret-color: var(--text, #111114);
}
.mm-corpo:disabled { color: transparent; }
/* O texto de exemplo é desenhado pela camada de baixo; deixar o nativo à mostra
   escreveria a mesma frase duas vezes, uma por cima da outra. */
.mm-corpo::placeholder { color: transparent; }
/* Sem isto, arrastar para selecionar apagaria o texto aos olhos: o texto do
   textarea é transparente, e a seleção precisa devolver a cor. */
.mm-corpo::selection { color: var(--text, #111114); background: rgba(250, 57, 9, .25); }
.mm-corpo-realce {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  color: var(--text, #111114); pointer-events: none;
  border-color: transparent; background: transparent;
}
.mm-corpo-realce .mm-var-realce {
  color: var(--kortei-orange-600, #D73108); font-weight: 700;
  background: rgba(250, 57, 9, .14); border-radius: 5px;
  box-shadow: 0 0 0 1px rgba(250, 57, 9, .28);
}
/* A borda e o fundo ficam num terceiro elemento, atrás das duas camadas, para
   o foco continuar acendendo a caixa inteira como em qualquer outro campo. */
.mm-corpo-moldura {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border: 1px solid var(--line, #ECECEE); border-radius: var(--r-md, 14px);
  background: var(--surface, #fff); transition: border .15s, box-shadow .15s;
}
.mm-corpo-caixa:focus-within .mm-corpo-moldura {
  border-color: var(--orange, #FA3909); box-shadow: 0 0 0 3px var(--blue-soft, #FFF5F3);
}
.mm-corpo-vazio { color: var(--text-3, #A2A2AA); }

/* Tabela das variáveis usadas: origem e valor de exemplo, um por linha. */
.mm-variaveis { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.mm-variavel {
  display: grid; grid-template-columns: 62px minmax(0, 1.2fr) minmax(0, 1fr); gap: 10px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--line, #ECECEE); border-radius: 10px; background: var(--surface-2, #FAFAFA);
}
@media (max-width: 720px) { .mm-variavel { grid-template-columns: minmax(0, 1fr); } }
.mm-variavel-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; font-weight: 600;
  color: var(--blue-strong, #D73108);
}

.mm-botoes-lista { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.mm-botao-linha { display: grid; grid-template-columns: minmax(0, 1fr) 38px; gap: 10px; align-items: end; }
.mm-botao-linha--url { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr) 38px; }
@media (max-width: 860px) {
  .mm-botao-linha, .mm-botao-linha--url { grid-template-columns: minmax(0, 1fr) 38px; }
  .mm-botao-linha--url > *:nth-child(2), .mm-botao-linha--url > *:nth-child(3) { grid-column: 1 / 2; }
}
.mm-botao-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mm-botao-campo label { font-size: 12.5px; font-weight: 600; color: var(--text-2); }

/* --- Prévia no celular --------------------------------------------------- */
.mm-previa-coluna { position: sticky; top: 20px; }
.mm-previa-titulo { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); font-weight: 600; margin-bottom: 10px; text-align: center; }

/* Proporção de celular de verdade (perto de 9 por 19,5). Curto demais a prévia
   parecia um cartão e enganava sobre quanto texto cabe na tela do cliente. */
.mm-celular {
  width: 288px; max-width: 100%; margin: 0 auto;
  border: 9px solid #101014; border-radius: 38px; overflow: hidden;
  background: #ECE5DD; box-shadow: var(--shadow-lg, 0 18px 50px rgba(17,17,20,.10));
  display: flex; flex-direction: column; min-height: 620px;
}
.mm-celular-status {
  background: #075E54; color: #fff; font-size: 11px; padding: 7px 14px 3px;
  display: flex; align-items: center; justify-content: space-between;
}
.mm-celular-topo {
  background: #075E54; color: #fff; display: flex; align-items: center; gap: 10px; padding: 6px 12px 10px;
}
.mm-celular-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #075E54;
  display: grid; place-items: center; font-size: 12px; font-weight: 700; overflow: hidden; flex: 0 0 auto;
}
.mm-celular-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mm-celular-nome { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* O papel de parede é feito com gradientes, não com imagem: nada de baixar
   arquivo de fora só para o fundo de uma prévia. */
.mm-celular-conversa {
  flex: 1; padding: 14px 12px; display: flex; flex-direction: column; gap: 4px;
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.5) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 45%, rgba(255,255,255,.45) 0 2px, transparent 3px),
    radial-gradient(circle at 40% 80%, rgba(255,255,255,.4) 0 2px, transparent 3px),
    #ECE5DD;
  background-size: 90px 90px, 120px 120px, 70px 70px, auto;
}
.mm-balao {
  background: #fff; border-radius: 8px 8px 8px 2px; padding: 7px 9px 5px;
  box-shadow: 0 1px 1px rgba(0,0,0,.12); font-size: 12.5px; line-height: 1.45; color: #111114;
  word-break: break-word; max-width: 100%;
}
.mm-balao-cabecalho { font-weight: 700; margin-bottom: 4px; }
.mm-balao-midia {
  border-radius: 6px; overflow: hidden; margin-bottom: 6px; background: #D9D3CB;
  display: grid; place-items: center; min-height: 118px; color: #5B5B60;
}
.mm-balao-midia img { width: 100%; display: block; max-height: 170px; object-fit: cover; }
.mm-balao-midia-vazia { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11.5px; padding: 18px; text-align: center; }
.mm-balao-corpo { white-space: pre-wrap; }
.mm-balao-corpo .mm-var { background: #FFF0C2; border-radius: 3px; padding: 0 2px; }
.mm-balao-rodape { color: #8696A0; font-size: 11px; margin-top: 5px; }
.mm-balao-hora { display: block; text-align: right; color: #8696A0; font-size: 10.5px; margin-top: 2px; }

.mm-balao-botoes { display: flex; flex-direction: column; gap: 2px; margin-top: 3px; }
.mm-balao-botao {
  background: #fff; border-radius: 6px; padding: 8px; text-align: center;
  color: #00A5F4; font-size: 12.5px; font-weight: 500;
  border: 1px solid rgba(250, 57, 9, .3);
  box-shadow: 0 1px 1px rgba(0,0,0,.12);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.mm-celular-barra {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #F0F0F0;
}
.mm-celular-campo {
  flex: 1; background: #fff; border-radius: 999px; padding: 7px 12px;
  color: #A2A2AA; font-size: 12px;
}
.mm-celular-enviar {
  width: 30px; height: 30px; border-radius: 50%; background: #00A884; color: #fff;
  display: grid; place-items: center; flex: 0 0 auto;
}

/* Retrato do que falta para o modelo poder ir para análise. */
.mm-pendencias {
  margin-top: 14px; padding: 12px 14px; border-radius: var(--r-md, 14px);
  background: var(--surface-2, #FAFAFA); border: 1px solid var(--line, #ECECEE); font-size: 12.5px;
}
.mm-pendencias strong { display: block; margin-bottom: 6px; font-size: 13px; }
.mm-pendencias ul { margin: 0; padding-left: 18px; color: var(--text-2); line-height: 1.6; }
.mm-pendencias--ok { background: #F0FDF4; border-color: #BBF7D0; color: #166534; }
.mm-pendencias--ok strong { color: #166534; }

/* Faixa de status da versão aberta, inclusive o motivo de uma recusa. */
.mm-faixa {
  display: flex; align-items: flex-start; gap: 10px;
  border-radius: var(--r-md, 14px); padding: 11px 14px; font-size: 13px; line-height: 1.5; margin-bottom: 18px;
}
.mm-faixa svg { flex: 0 0 auto; margin-top: 1px; }
.mm-faixa--analise { background: #FEF9C3; color: #854D0E; }
.mm-faixa--aprovado { background: #DCFCE7; color: #166534; }
.mm-faixa--rejeitado { background: #FEE2E2; color: #991B1B; }