/* ==========================================================================
   site-mk-integra-regra.css: cena do hero 'integra-regra' (o aviso que chega e a regra que o transforma).
   Parte do site.css (tokens, base e o que toda pagina usa vivem la). Este
   arquivo so entra na pagina que tem esta peca: quem decide e o SiteCss, a
   partir das secoes e mockups que a pagina desenhou. Carrega DEPOIS do
   site.css, na ordem fixa do SiteCss::ORDER (a mesma ordem em que as regras
   estavam no arquivo unico, para a cascata nao mudar).
   ========================================================================== */

/* --- 12.5 Cena do hero: o aviso que chega e a regra que o transforma --- */
/* Quinta cena da familia (moldura inteira do hero, 940 x 380, e nao a miniatura
   de 240px que o .mk amplia). Vive em
   app/views/site/mockups/integra-regra.php e tem laco proprio em site.js, sob o
   nome 'integra-regra'. O mini mockup 'integracoes' (.mk__*) continua
   existindo: e ele quem serve a arte do bento da mesma pagina.
   O DESENHO E UMA CASCATA, e nao um trilho: /crm/integracoes e o sentido
   CONTRARIO ao de /crm/api, e a cena de la (bloco 12.4) ja e um trilho de duas
   vias com pacote indo e voltando. Aqui o eixo e a REGRA, que atravessa o
   quadro no meio; o aviso cai em cima dela pela esquerda e a acao sai embaixo
   pela direita. Nada viaja nos fios: eles so se preenchem.
   As consultas de largura deste bloco moram AQUI, no fim dele, e nao na secao
   responsiva la embaixo: a cena e auto-contida, e nenhuma regra de fora toca
   em .mkr. */
.mkr {
  position: relative;
  width: 100%;
  height: 380px;
  overflow: hidden;
  background: var(--bg-card);
  font-family: var(--font-sans);
}

/* A luz: halo largo e baixo na cor da marca atras da REGRA (e nao no meio do
   quadro), que e a faixa que a cena existe para mostrar. Parado, e o unico
   enfeite: o hero e branco e a barra da regra precisa de chao. */
.mkr__luz {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 820px;
  height: 220px;
  margin: -110px 0 0 -410px;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--primary) 9%, transparent), transparent);
  pointer-events: none;
}

.mkr__stack {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 24px 30px;
}

/* 1. A faixa de cima: o aviso a esquerda, a porta de entrada a direita. */
.mkr__topo { display: flex; align-items: stretch; gap: 18px; flex: 0 0 auto; height: 112px; }

/* A porta de entrada nao ganha moldura: duas caixas lado a lado disputariam a
   atencao, e o que o olho precisa ler primeiro e o AVISO. */
.mkr__porta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 7px;
  flex: 0 0 258px;
  min-width: 0;
}

.mkr__ident { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }

.mkr__ident-txt { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

.mkr__porta-rot { font-size: 11px; line-height: 1.35; color: var(--text-ghost); }

/* O endereco vai em monoespacada de sistema (a Geist Mono nao e baixada no site
   publico): e o unico pedaco da cena que nao e frase, e a largura fixa o separa
   do resto sem precisar de outra cor. */
.mkr__url {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  height: 22px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-alt);
  color: var(--text-muted);
}

.mkr__url svg { width: 12px; height: 12px; stroke-width: 1.8; }

.mkr__url-txt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .01em; }

/* 2. O aviso que chegou. As camadas (uma por aviso) sao absolutas dentro do
   cartao, entao trocar de aviso nunca muda a altura do desenho. */
.mkr__aviso {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}

.mkr__cena {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 11px;
}

.mkr__cena + .mkr__cena { visibility: hidden; opacity: 0; }

.mkr__fonte { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; height: 22px; }

.mkr__fonte-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border: 1px solid var(--primary-line);
  border-radius: var(--radius-sm);
  background: var(--primary-subtle);
  color: var(--primary-text);
}

.mkr__fonte-tile svg { width: 13px; height: 13px; stroke-width: 1.8; }

.mkr__fonte-nome {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Quem cede largura primeiro e o EVENTO, e nao o nome do sistema (fator de
   encolhimento 2 contra 1): sem este par, "Plataforma de curso" era o cortado,
   e e ele que diz de onde o aviso veio. */
.mkr__fonte-ev {
  flex: 0 2 auto;
  min-width: 0;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mkr__fonte-ev::before { content: '·'; margin-right: 6px; color: var(--text-ghost); }

.mkr__agora {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--primary-subtle);
  color: var(--primary-text);
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
}

/* Os campos que vieram, dois a dois: quatro numa coluna so obrigariam o cartao
   a ter a altura da cena inteira, e a regra e que manda aqui. */
.mkr__campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
}

.mkr__campo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 9px;
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
}

/* Camada "acesa" do campo escolhido: fica ATRAS do conteudo (que sobe com
   z-index), entao a linha ganha borda e fundo da marca por OPACIDADE, sem animar
   cor. Ela nasce VISIVEL: sem JS o desenho parado ja mostra de qual campo a
   regra nasceu. O laco a apaga na montagem e a acende na vez dela. */
.mkr__campo-on {
  position: absolute;
  inset: 0;
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  background: var(--primary-subtle);
}

.mkr__campo-nome,
.mkr__campo-val,
.mkr__clique { position: relative; z-index: 1; }

.mkr__campo-nome { flex: 0 0 auto; font-size: 11px; color: var(--text-muted); }

.mkr__campo-val {
  margin-left: auto;
  min-width: 0;
  font-size: 12px;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* O clique. E ele que diz "sem programar": a regra nasce de apontar o campo que
   veio, e nao de escrever nada. */
.mkr__clique {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-left: 7px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
}

.mkr__clique svg { width: 11px; height: 11px; stroke-width: 2.2; }

/* Os fios curtos entre as tres faixas. Tracejado parado; a copia colorida se
   preenche por scaleY quando o fluxo passa. Nada viaja dentro deles: pacote
   correndo e da cena irma, em /crm/api. */
.mkr__liga {
  position: relative;
  flex: 0 0 auto;
  width: 1px;
  height: 13px;
  background: repeating-linear-gradient(to bottom,
    color-mix(in oklab, var(--primary) 30%, var(--line)) 0 3px, transparent 3px 7px);
}

/* Cada fio desce sob o cartao que ele liga: o de cima sob o campo escolhido, o
   de baixo sob o meio do cartao da acao. */
.mkr__liga--a { align-self: flex-start; margin-left: 60px; }

.mkr__liga--b { align-self: flex-end; margin-right: 220px; }

.mkr__liga-on {
  position: absolute;
  inset: 0;
  background: var(--primary);
  transform: scaleY(0);
  transform-origin: top center;
}

/* 3. A REGRA: o eixo da cena. Ocupa a largura inteira e se le como frase. O
   rotulo numa ponta e o liga-desliga na outra existem para a faixa nao terminar
   em dois vaos do tamanho de um cartao: a frase fica no meio, entre eles. */
.mkr__regra {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  height: 70px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-card);
}

.mkr__regra-rot,
.mkr__ligada {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  font-size: 11px;
  white-space: nowrap;
}

.mkr__regra-rot { color: var(--text-muted); }

.mkr__regra-rot svg { width: 13px; height: 13px; stroke-width: 1.8; }

.mkr__ligada {
  padding: 2px 9px 2px 7px;
  border-radius: 999px;
  background: var(--primary-subtle);
  color: var(--primary-text);
  font-weight: 500;
}

.mkr__ligada svg { width: 14px; height: 14px; stroke-width: 1.8; }

.mkr__frase {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}

/* "se" e "então" nao sao enfeite: sao o que faz as tres escolhas virarem UMA
   frase em vez de tres caixinhas enfileiradas. */
.mkr__cola { flex: 0 0 auto; font-size: 13px; color: var(--text-muted); }

.mkr__seta { display: inline-flex; flex: 0 0 auto; color: var(--text-ghost); }

.mkr__seta svg { width: 15px; height: 15px; stroke-width: 2; }

.mkr__escolha {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
  min-width: 0;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
}

/* Mesma ideia da camada do campo: a escolha acende por opacidade. Nasce
   VISIVEL, entao o desenho parado mostra a regra pronta e legivel. */
.mkr__escolha-on {
  position: absolute;
  inset: -1px;
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  background: var(--primary-subtle);
}

.mkr__escolha-txt { position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0; }

.mkr__escolha-rot { font-size: 10px; line-height: 1.3; color: var(--text-muted); }

.mkr__escolha-val {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mkr__escolha-ok { position: relative; z-index: 1; display: inline-flex; flex: 0 0 auto; color: var(--primary-text); }

.mkr__escolha-ok svg { width: 14px; height: 14px; stroke-width: 2.4; }

/* 4. A faixa de baixo: a frase que a cena vende e o que o painel fez. */
.mkr__baixo { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; height: 104px; }

.mkr__dito { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; }

.mkr__dito-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border: 1px solid var(--primary-line);
  border-radius: 50%;
  background: var(--primary-subtle);
  color: var(--primary-text);
}

.mkr__dito-ico svg { width: 17px; height: 17px; stroke-width: 1.8; }

.mkr__dito-txt { display: flex; flex-direction: column; min-width: 0; }

.mkr__dito-1 { font-size: 12px; line-height: 1.45; color: var(--text-muted); }

.mkr__dito-2 { font-size: 16px; font-weight: 500; line-height: 1.35; color: var(--text-1); }

.mkr__saida {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 440px;
  height: 100px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}

.mkr__feito {
  position: absolute;
  z-index: 2;
  right: 12px; top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--primary-subtle);
  color: var(--primary-text);
  font-size: 10px;
  font-weight: 500;
}

.mkr__feito svg { width: 11px; height: 11px; stroke-width: 2.4; }

.mkr__palco { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }

.mkr__ato { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 7px; }

.mkr__ato + .mkr__ato { visibility: hidden; opacity: 0; }

.mkr__ato-topo {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-1);
  white-space: nowrap;
}

.mkr__ato-ico { display: inline-flex; flex: 0 0 auto; color: var(--primary-text); }

.mkr__ato-ico svg { width: 14px; height: 14px; stroke-width: 1.9; }

/* Acao 1: a mensagem que saiu pelo numero do cliente. */
.mkr__bolha {
  position: relative;
  align-self: flex-start;
  max-width: 300px;
  padding: 6px 10px 14px;
  border: 1px solid var(--primary-line);
  border-radius: var(--radius-sm);
  background: var(--primary-subtle);
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-1);
}

.mkr__hora {
  position: absolute;
  right: 8px; bottom: 3px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  color: var(--text-muted);
}

.mkr__hora svg { width: 11px; height: 11px; stroke-width: 2; color: var(--primary-text); }

/* Acao 2: o lead que entrou na etapa do funil. */
.mkr__funil { display: flex; gap: 8px; flex: 1 1 auto; min-height: 0; }

.mkr__coluna {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 0;
  min-width: 0;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
}

.mkr__coluna--alvo { border-color: var(--primary-line); background: var(--primary-subtle); }

.mkr__coluna-tit { font-size: 10px; line-height: 1.2; color: var(--text-muted); }

.mkr__vago { height: 24px; border: 1px dashed var(--line); border-radius: var(--radius-xs); }

.mkr__ficha {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 24px;
  padding: 0 6px;
  border: 1px solid var(--primary-line);
  border-radius: var(--radius-xs);
  background: var(--bg-card);
}

.mkr__ficha-nome { font-size: 10.5px; line-height: 1.2; color: var(--text-1); }

.mkr__ficha-sub { font-size: 9px; line-height: 1.2; color: var(--text-muted); }

/* Acao 3: a conversa que ganhou etiqueta. */
.mkr__conversa {
  display: flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
}

.mkr__av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--primary-subtle);
  color: var(--primary-text);
  font-size: 12px;
  font-weight: 500;
}

.mkr__conversa-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.mkr__conversa-nome { font-size: 12px; line-height: 1.2; color: var(--text-1); }

.mkr__etiquetas { display: flex; gap: 5px; }

.mkr__etiqueta {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 9.5px;
  font-weight: 500;
  white-space: nowrap;
}

.mkr__etiqueta--calma { background: var(--bg-btn-2); color: var(--text-muted); }

/* Daqui para baixo a cena encolhe INTEIRA (tipografia, cartoes e vaos), e nao
   so a largura: com as caixas estreitas e a letra do desktop, "Plataforma de
   curso" e "Etiquetar conversa" batiam nas reticencias, que e o jeito mais
   barato de uma cena parecer quebrada.
   SAO QUATRO DEGRAUS, e nao os tres de costume: entre o tablet e o celular
   existe uma faixa (481 a 660) em que a cascata ainda cabe deitada mas a REGRA
   ja nao cabe escrita, e foi ali que "Mover no Kanban" virou "Mover no Kanb...".
   De 660 para baixo a cascata vira pilha. */
@media (max-width: 1024px) {
  .mkr { height: 330px; }
  .mkr__stack { padding: 20px 24px; }
  .mkr__luz { width: 620px; height: 200px; margin: -100px 0 0 -310px; }
  .mkr__topo { height: 96px; gap: 14px; }
  .mkr__porta { flex-basis: 212px; gap: 5px; }
  .mkr__ident-txt { font-size: 11px; }
  .mkr__porta-rot { font-size: 10px; }
  .mkr__url { height: 20px; padding: 0 8px; }
  .mkr__url-txt { font-size: 10px; }
  .mkr__cena { gap: 6px; padding: 9px; }
  .mkr__fonte-nome { font-size: 12px; }
  .mkr__campo { padding: 0 8px; }
  .mkr__campo-val { font-size: 11px; }
  .mkr__liga { height: 11px; }
  .mkr__liga--a { margin-left: 48px; }
  .mkr__liga--b { margin-right: 190px; }
  .mkr__regra { height: 62px; gap: 10px; padding: 0 12px; }
  .mkr__cola { font-size: 12px; }
  .mkr__escolha { gap: 7px; padding: 4px 9px; }
  .mkr__escolha-val { font-size: 13px; }
  .mkr__baixo { height: 100px; gap: 14px; }
  .mkr__dito-ico { width: 30px; height: 30px; }
  .mkr__dito-ico svg { width: 15px; height: 15px; }
  .mkr__dito-1 { font-size: 11px; }
  .mkr__dito-2 { font-size: 14px; }
  .mkr__saida { flex-basis: 380px; height: 100px; padding: 9px 10px; }
  .mkr__bolha { max-width: 260px; font-size: 11px; }
  /* O funil e o mais alto dos tres atos: e ele quem decide a altura do palco.
     Encolhe junto, senao o cartao da etapa sai cortado pela metade. */
  .mkr__coluna { gap: 4px; padding: 5px; }
  .mkr__vago, .mkr__ficha { height: 22px; }
}

@media (max-width: 768px) {
  .mkr { height: 288px; }
  .mkr__stack { padding: 16px; }
  .mkr__luz { width: 480px; height: 170px; margin: -85px 0 0 -240px; }
  /* A coluna da direita fica so com o ponto ao vivo e o endereco: a linha que
     explica o endereco precisa de ~230px para nao virar quatro linhas de
     orfas, e aqui a coluna inteira tem 172. */
  .mkr__topo { height: 82px; gap: 12px; }
  .mkr__porta { flex-basis: 172px; gap: 5px; }
  .mkr__porta-rot { display: none; }
  .mkr__cena { gap: 6px; padding: 8px; }
  .mkr__fonte { height: 20px; }
  .mkr__fonte-tile { width: 20px; height: 20px; }
  .mkr__fonte-tile svg { width: 12px; height: 12px; }
  .mkr__liga { height: 10px; }
  .mkr__liga--a { margin-left: 40px; }
  .mkr__liga--b { margin-right: 160px; }
  /* A barra perde as palavras de ligacao e os tres vistos. Nao e economia de
     enfeite: em 700px sobram 427px para a frase e ela pede 442, e era assim que
     "Enviar mensagem" virava "Enviar mens...". Os rotulos campo/condicao/acao
     ficam, e sao eles que mantem as tres caixas lidas como uma regra. */
  .mkr__cola, .mkr__escolha-ok { display: none; }
  .mkr__regra { height: 54px; gap: 8px; padding: 0 10px; }
  .mkr__escolha { padding: 4px 8px; }
  .mkr__escolha-rot { font-size: 9px; }
  .mkr__escolha-val { font-size: 12px; }
  .mkr__baixo { height: 98px; gap: 12px; }
  .mkr__dito { gap: 9px; }
  .mkr__dito-ico { width: 28px; height: 28px; }
  .mkr__dito-ico svg { width: 14px; height: 14px; }
  .mkr__dito-1 { font-size: 10.5px; }
  .mkr__dito-2 { font-size: 13px; }
  .mkr__saida { flex-basis: 320px; height: 98px; padding: 9px 10px; }
  .mkr__bolha { max-width: 100%; padding: 4px 8px 12px; font-size: 10.5px; line-height: 1.35; }
  .mkr__coluna { gap: 3px; padding: 4px; }
  .mkr__vago, .mkr__ficha { height: 20px; }
  .mkr__av { width: 24px; height: 24px; font-size: 11px; }
}

/* A faixa em que a cascata deixa de caber deitada. A moldura aqui tem ~480px
   uteis: o cartao do aviso ficaria com 296 (e "cliente Marina Alves" viraria
   reticencia) e a regra inteira nao cabe escrita. Entao a cascata vira PILHA: a
   porta de entrada volta a ser a faixa de cima (column-reverse poe a coluna da
   direita acima do cartao, sem mexer na ordem do HTML), os dois cartoes ficam
   com a largura toda, e saem as tres pecas que existiam so para fechar vao: o
   rotulo da barra, o liga-desliga e a frase de venda (que o H1 logo acima ja
   diz, e com mais letra). */
@media (max-width: 660px) {
  .mkr__topo { flex-direction: column-reverse; height: auto; gap: 6px; }
  .mkr__porta {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
  }
  .mkr__aviso { flex: 0 0 78px; }
  .mkr__dito, .mkr__regra-rot, .mkr__ligada { display: none; }
  .mkr__liga { height: 8px; }
  .mkr__liga--a { margin-left: 34px; }
  /* Com o cartao da acao ocupando a largura toda, o fio desce pelo meio. */
  .mkr__liga--b { align-self: center; margin-right: 0; }
  .mkr__regra { height: 44px; gap: 7px; }
  /* Os 8px que a barra e os dois fios devolveram vao todos para o cartao da
     acao: e ele que decide se a cena cabe. O palco tem de ser MAIOR que o mais
     alto dos tres atos, que aqui e a conversa (nome, duas etiquetas e avatar);
     por isso os tres tambem encolhem logo abaixo. */
  .mkr__baixo { height: 92px; }
  .mkr__saida { flex: 1 1 auto; height: 92px; }
  .mkr__ato { gap: 5px; }
  .mkr__bolha { padding: 4px 8px 10px; }
  .mkr__coluna { gap: 3px; padding: 4px; }
  .mkr__vago, .mkr__ficha { height: 19px; }
  .mkr__conversa { padding: 5px 8px; }
  .mkr__conversa-txt { gap: 2px; }
  .mkr__av { width: 22px; height: 22px; }
}

@media (max-width: 480px) {
  .mkr { height: 246px; }
  /* Menos respiro NA LATERAL que em cima e embaixo: numa tela de 360px cada
     pixel de margem sai do valor escrito dentro das caixas, e a altura ja esta
     no limite. */
  .mkr__stack { padding: 12px 10px; }
  .mkr__luz { width: 320px; height: 140px; margin: -70px 0 0 -160px; }
  .mkr__ident-txt, .mkr__url-txt { font-size: 9.5px; }
  .mkr__url { height: 18px; padding: 0 7px; gap: 4px; }
  .mkr__url svg { width: 11px; height: 11px; }
  /* Com a regra em ~300px saem tambem as setas: os 36px delas eram a diferenca
     entre "Enviar mensagem" escrito e "Enviar mens..." cortado. Ficam as TRES
     escolhas, com o rotulo em cima de cada valor, que e o que a cena precisa
     dizer. */
  .mkr__seta { display: none; }
  .mkr__topo { gap: 5px; }
  /* O selo "chegou agora" e o unico enfeite da linha de cima do cartao, e aqui
     ele custa os 70px que faltavam para "Plataforma de curso" caber escrito. */
  .mkr__agora { display: none; }
  .mkr__aviso { flex: 0 0 70px; }
  .mkr__cena { gap: 4px; padding: 6px; }
  .mkr__fonte { height: 17px; gap: 5px; }
  .mkr__fonte-tile { width: 17px; height: 17px; }
  .mkr__fonte-tile svg { width: 10px; height: 10px; }
  .mkr__fonte-nome { font-size: 10.5px; }
  .mkr__fonte-ev { font-size: 9px; }
  .mkr__campos { gap: 4px; }
  .mkr__campo { padding: 0 4px; gap: 3px; }
  .mkr__campo-nome { font-size: 9px; }
  .mkr__campo-val { font-size: 10px; }
  .mkr__clique { width: 13px; height: 13px; margin-left: 3px; }
  .mkr__clique svg { width: 9px; height: 9px; }
  .mkr__liga { height: 7px; }
  .mkr__liga--a { margin-left: 28px; }
  .mkr__regra { height: 40px; padding: 0 6px; }
  .mkr__frase { gap: 5px; }
  .mkr__escolha { padding: 3px 6px; }
  .mkr__escolha-rot { font-size: 8.5px; }
  .mkr__escolha-val { font-size: 10px; }
  .mkr__baixo { height: 74px; }
  .mkr__saida { height: 74px; padding: 7px 8px; }
  .mkr__feito { right: 8px; top: 7px; padding: 0 6px; font-size: 9px; }
  .mkr__ato { gap: 4px; }
  .mkr__ato-topo { font-size: 10px; }
  .mkr__ato-ico svg { width: 12px; height: 12px; }
  .mkr__bolha { padding: 3px 7px; font-size: 9px; line-height: 1.35; }
  /* Sem a faixa de baixo da bolha nao ha onde por a hora: ela sai, e o que fica
     e o texto que o painel mandou. */
  .mkr__hora { display: none; }
  .mkr__coluna { gap: 2px; padding: 3px; }
  .mkr__vago, .mkr__ficha { height: 16px; }
  .mkr__ficha-nome { font-size: 9.5px; }
  .mkr__ficha-sub { display: none; }
  .mkr__conversa { gap: 7px; padding: 4px 7px; }
  .mkr__conversa-txt { gap: 2px; }
  .mkr__av { width: 20px; height: 20px; font-size: 10px; }
  .mkr__conversa-nome { font-size: 10.5px; }
  .mkr__etiqueta { font-size: 9px; padding: 0 6px; }
}