/* Os componentes do produto do cliente, sobre o design system.
 *
 * `styles.css` é o design system do console, copiado do sistema atual sem
 * alteração, e o aceite do M5 depende de um operador reconhecê-lo. O que entra
 * aqui não existe lá: barra de idioma, popover de conta, gaveta do celular. Não
 * são duas descrições da mesma coisa — quando a coisa já existe no design
 * system, ela é acrescentada lá, e foi o que a D-210 fez com a caixa de texto.
 *
 * As regras vêm do desenho da jornada numerada (D-205), copiadas dele. Entram à
 * medida que cada etapa constrói a tela que as usa: CSS de componente que
 * ninguém desenhou ainda é código inalcançável, e a regra 11 não o quer aqui.
 */

/* ===== barra superior ===== */
.mk-burger { display: none; background: none; border: 0; padding: 6px; margin-right: 6px; cursor: pointer; color: inherit }
.mk-burger svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round }
.header-right-group { gap: 10px; align-items: center; flex: none }
/* O logotipo anda colado no hambúrguer, e não no meio da barra.
   O `space-between` do console centraliza o item do meio quando há três, e
   abaixo de 800px a folha dele ainda dá `flex:1 1 auto` ao logotipo — os dois
   juntos empurravam a marca para longe do menu justamente nas larguras
   intermediárias, que é onde ela some do canto que a pessoa procura. */
.site-header .brand-row { justify-content: flex-start }
.site-header .logo-box { flex: 0 1 auto; margin-right: auto }

.mk-pop { position: relative }
.mk-pop-alvo {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line, #0000001a);
  background: var(--surface-solid, #fff); border-radius: 999px; padding: 5px 10px;
  cursor: pointer; font: inherit; font-size: .85rem; line-height: 1
}
.mk-pop-alvo:hover { border-color: var(--accent, #0071e3) }
.mk-caret { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; opacity: .55 }
.mk-avatar {
  width: 26px; height: 26px; border-radius: 50%; background: var(--accent, #0071e3); color: #fff;
  display: grid; place-items: center; font-size: .72rem; font-weight: 700; letter-spacing: .02em
}
.mk-pop-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 8px); min-width: 186px; z-index: 60;
  background: var(--surface-solid, #fff); border: 1px solid var(--line, #0000001a); border-radius: 14px;
  box-shadow: 0 14px 34px #0000001f; padding: 6px; overflow: hidden
}
.mk-pop.aberto .mk-pop-menu { display: block }
.mk-pop-menu button, .mk-pop-menu a {
  display: flex; width: 100%; align-items: center; gap: 10px; background: none; border: 0;
  padding: 9px 11px; border-radius: 9px; cursor: pointer; font: inherit; font-size: .88rem;
  text-align: left; color: inherit; text-decoration: none
}
.mk-pop-menu button:hover, .mk-pop-menu a:hover { background: var(--light-blue, #eef5fc) }
.mk-pop-menu button.on { font-weight: 700 }
.mk-pop-menu hr { border: 0; border-top: 1px solid var(--line, #0000001a); margin: 6px 4px }
.mk-pop-menu svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .6 }
.mk-pop-saldo {
  display: flex; flex-direction: column; align-items: stretch; gap: 9px; margin: 2px 4px 6px;
  padding: 12px 13px; border: 1px solid var(--line, #0000001a); border-radius: 11px;
  font-size: .88rem; font-variant-numeric: tabular-nums
}
.mk-pop-saldo > span { font-weight: 600 }
.mk-pop-saldo .button { width: 100%; min-height: 34px; font-size: .84rem }

/* A bandeira é imagem, e o círculo é daqui. O arquivo é o quadrado 1x1 do
   flag-icons, sem recorte dentro — recortar no CSS deixa os três arquivos
   servíveis e cacheáveis, e o do espanhol sozinho tem 93 KB de brasão. */
/* Item 31: bandeira e avatar um degrau maiores. Eram os dois únicos alvos
   do cabeçalho e os dois menores da tela. */
.fl { width: 25px; height: 25px; display: block; flex: none; border-radius: 50%; object-fit: cover }
#pop-idioma .mk-pop-alvo { padding: 4px 8px 4px 4px }

/* ===== gaveta do celular ===== */
.mk-gaveta { display: none; position: fixed; inset: 0; z-index: 90; background: #0006 }
.mk-gaveta.aberta { display: block }
.mk-gaveta-painel {
  position: absolute; left: 0; top: 0; bottom: 0; width: min(84vw, 310px);
  background: var(--surface-solid, #fff); padding: 18px 16px; overflow: auto;
  display: flex; flex-direction: column; gap: 6px
}
.mk-gaveta-painel a {
  display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 11px;
  text-decoration: none; color: inherit; font-size: .95rem
}
.mk-gaveta-painel a.on { background: var(--light-blue, #eef5fc); font-weight: 700 }
.mk-gaveta-painel svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round }
.mk-gaveta-saldo {
  border: 1px solid var(--line, #0000001a); border-radius: 12px; padding: 11px 13px;
  margin: 4px 0 8px; font-size: .9rem;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px
}
.mk-gaveta-painel hr { border: 0; border-top: 1px solid var(--line, #0000001a); margin: 10px 4px }

@media (max-width: 860px) {
  .mk-burger { display: inline-flex }
  .header-right-group { display: flex }
  #pop-usuario { display: none }
}

/* ===== conteúdo ===== */
.mk-meta { color: var(--muted, #6e6e73); font-size: .88rem; margin: 5px 0 0 }
.app-content h1 { font-size: 1.55rem; letter-spacing: -.01em; margin: 0 }
/* No console o título fica à direita; aqui ele começa na margem esquerda. */
.app-content .page-heading { display: block; margin-bottom: 18px }

/* ===== a jornada de envio: trilha, zona de solta e cartões =====
 *
 * Copiado do desenho da jornada numerada (D-205). A trilha marca o passo do
 * tipo como `opcional` desde a primeira tela — é isso que a faz nunca crescer
 * no meio do caminho, que era o defeito do contador antigo, e por isso a classe
 * existe já aqui, com o passo ainda longe.
 */
.mk-sub { font-size: .95rem; font-weight: 700; margin: 26px 0 10px }

.mk-solta {
  border: 2px dashed var(--line-strong, #0003); border-radius: 18px; padding: 30px 22px;
  text-align: center; background: var(--surface-solid, #fff)
}
.mk-solta p { margin: 0 0 4px; font-size: 1.05rem; font-weight: 600 }
.mk-solta small { color: var(--muted, #6e6e73) }
.mk-solta-acoes { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap }
/* O botão é `<label>` com o campo escondido dentro: o campo de arquivo do
   navegador não se veste, e a etiqueta que o embrulha abre o mesmo seletor. */
.mk-solta label.button { cursor: pointer }

.mk-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 14px }
.mk-card {
  position: relative; border: 1px solid var(--line, #0000001a); border-radius: 14px;
  padding: 9px; background: var(--surface-solid, #fff)
}
.mk-card > img {
  width: 100%; height: 184px; object-fit: cover; object-position: top; border-radius: 10px;
  display: block; background: #f2f2f4
}
/* O `z-index` não é enfeite: a miniatura leva um `transform` para o giro, e
   elemento transformado é pintado no mesmo passo dos posicionados, na ordem do
   DOM — como ela vem DEPOIS do selo e dos botões, cobria os dois. E cobria em
   silêncio: `display`, `visibility` e `opacity` respondiam "visível", o
   retângulo estava no lugar certo, e mesmo assim não se via nada. Quem conta a
   verdade é o `elementFromPoint`, que no ponto do selo devolvia `IMG`. */
.mk-selo {
  position: absolute; top: 17px; left: 17px; z-index: 1; background: #000000a8; color: #fff;
  line-height: 1.5;
  border-radius: 8px; padding: 2px 8px; font-size: .75rem; font-weight: 700;
  font-variant-numeric: tabular-nums
}
.mk-card-bts { position: absolute; top: 15px; right: 15px; z-index: 1; display: flex; gap: 5px }
/* Pegar e o número, juntos e à esquerda: a mão pega o cartão pelo canto onde o
   número diz qual ele é. O selo perde a posição própria e passa a ser item da
   fila — duas âncoras absolutas para dois elementos vizinhos brigariam por um
   pixel a cada mudança de tamanho. */
.mk-card-esq { position: absolute; top: 15px; left: 15px; z-index: 1;
  display: flex; align-items: center; gap: 5px }
.mk-card-esq .mk-selo { position: static }
/* A dica não pode ser cortada pelo cartão nem passar por baixo do vizinho. */
.mk-card [data-tooltip]::after { z-index: 3 }
.mk-mini-bt {
  width: 28px; height: 28px; border-radius: 8px; background: #ffffffe8;
  border: 1px solid var(--line, #0000001a); display: grid; place-items: center;
  cursor: pointer; color: #333; padding: 0
}
.mk-mini-bt svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round }
.mk-mini-bt.mk-arrasta { cursor: grab }
.mk-card-nome {
  font-size: .82rem; color: var(--muted, #6e6e73); margin: 9px 2px 7px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis
}
.mk-rotulo {
  width: 100%; font-size: .85rem; padding: 7px 10px; border: 1px solid var(--line, #0000001a);
  border-radius: 9px; background: var(--surface-solid, #fff)
}

.jn-trilha { display: flex; align-items: flex-start; padding: 6px 4px 0; margin-bottom: 6px }
.jn-col { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0 }
.jn-linhas { display: flex; align-items: center; width: 100%; margin-bottom: 9px }
.jn-linhas i { flex: 1; height: 2px; background: var(--line, #0000001a); display: block }
.jn-linhas i.on { background: #1b7f43 }
.jn-linhas i.vazio { background: transparent }
.jn-bola {
  width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: 12.5px; font-weight: 600; border: 2px solid var(--line-strong, #0003);
  background: var(--surface-solid, #fff); color: var(--muted, #6e6e73)
}
.jn-bola svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round }
.jn-col.feito .jn-bola { background: #1b7f43; border-color: #1b7f43; color: #fff }
.jn-col.agora .jn-bola { background: var(--accent, #0071e3); border-color: var(--accent, #0071e3); color: #fff }
.jn-col.opcional:not(.feito):not(.agora) .jn-bola { border-style: dashed }
.jn-rot { font-size: 12.5px; font-weight: 600; padding: 0 6px; color: var(--muted, #6e6e73) }
/* Passo concluído é link, e link de trilha não é frase: sem sublinhado, e com
   o cursor dizendo que dá para voltar por ali. */
a.jn-rot, a.jn-bola { text-decoration: none; cursor: pointer }
a.jn-rot:hover, .jn-col.feito:has(a:hover) .jn-rot { color: var(--accent, #0071e3) }
.jn-col.feito:has(a:hover) .jn-bola { background: #145f33; border-color: #145f33 }
.jn-col.agora .jn-rot { color: var(--text, #1d1d1f) }
.jn-risca { height: 1px; background: var(--line, #0000001a); margin: 12px 0 22px }
/* Botão não é frase: o sublinhado do `<a>` pertence a uma palavra dentro de um
   texto, e num botão só empurra a atenção para a palavra em vez do gesto. A
   seta diz para que lado o gesto leva, e é a do Feather, no traço fino do
   resto — a de trás à esquerda do texto, a da frente à direita, porque a seta
   fica do lado para onde ela aponta. */
.button, .button:hover, .button:focus { text-decoration: none }
.jn-seta { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.jn-pe .button { display: inline-flex; align-items: center; gap: 7px }

/* O par da jornada: branco à esquerda, azul à direita, em todas as telas (etapa
   6½, item 13). Com um botão só ele fica à direita, que é onde a mão procura o
   "seguinte"; com dois, o que desfaz vai para o canto oposto do que avança — a
   mesma razão da D-257, em escala de tela. */
.jn-pe { display: flex; justify-content: space-between; gap: 10px; margin-top: 26px }
/* O azul se empurra para a direita sozinho. Perguntar por `:only-child` levaria
   um Voltar solitário para a direita também, que é o contrário do combinado. */
.jn-pe .primary { margin-left: auto }

@media (max-width: 700px) {
  .jn-rot { font-size: 11px; padding: 0 2px }
  .jn-bola { width: 26px; height: 26px; font-size: 11.5px }
  /* Os dois na MESMA linha, e não empilhados.
     Empilhado, o azul ficava por cima do branco: a ordem visual invertia entre
     o computador e o telefone, e o botão que avança passava a ser o primeiro
     que a mão encontra subindo do fim da página. Numa linha só, a geometria é
     a mesma nas duas larguras — nada troca de lugar quando a janela encolhe.
     O Voltar vira só a seta, com o nome no `aria-label` para quem lê a tela em
     voz alta, e mantém os 44px da D-257. O que avança fica com o resto. */
  /* 44px de altura pela D-257: a regra vale para o rodapé como vale para os
     botões do cartão, e o Voltar reduzido à seta é justamente o alvo que mais
     precisa dela. */
  .jn-pe .button { min-height: 44px }
  .jn-pe .jn-voltar { flex: 0 0 20%; min-width: 56px; padding-left: 0; padding-right: 0;
    justify-content: center; gap: 0 }
  .jn-pe .jn-voltar span { display: none }
  .jn-pe .primary { flex: 1 1 auto; justify-content: center }
}

/* No telefone estreito os cinco rótulos não cabem lado a lado e se encavalam —
   "Documentos" e "O que fazer" viravam uma linha só de letras. Fica o do passo
   atual, que é a única informação que a pessoa precisa ali: as bolas continuam
   dizendo onde ela está e quanto falta. */
@media (max-width: 480px) {
  .jn-col:not(.agora) .jn-rot { display: none }
  .jn-col.agora .jn-rot { white-space: nowrap }
}
.mk-card-nota { font-size: .74rem; line-height: 1.35; color: #8a6d00; margin: -3px 2px 7px }

/* ===== tipos de documento e confirmação, do desenho da jornada (D-205) ===== */
.tpc-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:13px}
.tpc{display:flex;flex-direction:column;gap:9px;padding:15px 16px;border:1.5px solid var(--line,#0000001a);
  border-radius:12px;background:var(--surface-solid,#fff);box-shadow:0 1px 2px rgba(16,24,40,.05);
  cursor:pointer;text-align:left;font:inherit;color:inherit;width:100%}
.tpc:hover{border-color:var(--line-strong,#0003)}
.tpc.on{border-color:var(--accent,#0071e3);background:#f8fbff}
.tpc.novo{border-style:dashed;border-color:var(--accent,#0071e3)}
.tpc-ico{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:var(--light-blue,#eef5fc);color:var(--accent,#0071e3);flex:none}
.tpc-ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.tpc b{display:block;font-size:.86rem;font-weight:650}
.tpc.novo b{color:var(--accent,#0071e3)}
.tpc small{display:block;font-size:.76rem;color:var(--muted,#6e6e73);line-height:1.45;margin-top:2px}
.tp-grupo{font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted,#6e6e73);
  font-weight:600;margin:0 0 8px}
.tp-grupo:first-child{margin-top:0}
/* As seções estavam encavaladas: o rótulo do grupo seguinte nascia colado na
   última fileira de cartões. O respiro é o que faz "meus tipos" e "tipos do
   sistema" serem lidos como dois grupos e não como uma lista só. */
.tp-grupo{margin:28px 0 12px}
/* O rótulo do grupo pertence ao que vem DEPOIS dele, e por isso fica mais perto
   dos cartões de baixo do que da seção de cima. Com o filtro na mesma linha, a
   caixa cresceu e empurrou o rótulo para o meio do vão — alinhar pelo fim
   devolve a proximidade que diz de quem é o título. */
.tp-grupo-linha{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  margin-top:34px}
.tp-grupo-linha .tp-grupo{margin:0}
.tp-filtro{margin:0}
.tp-filtro select{padding:7px 10px;border:1px solid var(--line,#0000001a);border-radius:9px;
  font-size:.85rem;background:var(--surface-solid,#fff)}
.tp-grupo-linha + .tpc-grade{margin-top:12px}
.mk-sub-tela{margin:-12px 0 22px}
.tp-campo{display:grid;grid-template-columns:160px 1fr 96px;gap:14px;align-items:baseline;
  padding-bottom:10px;border-bottom:1px solid var(--line,#0000001a)}
.tp-campo:last-child{border-bottom:0}
.tp-campo b{font-size:.92rem}
.tp-campo span{font-size:.88rem;color:var(--muted,#6e6e73)}
.tp-campo i{font-style:normal;font-size:.76rem;color:var(--muted,#6e6e73);text-align:right}
/* A régua fina entre as linhas é o que faz a tabela ser lida como tabela — sem
   ela, quatro pares de rótulo e descrição viram um parágrafo. É a pontilhada do
   desenho, na nossa cor de linha. */
.tp-campos{display:flex;flex-direction:column}
.tp-campo{padding:9px 0;border-bottom:1px dotted var(--line,#0000001a)}
.tp-campo:last-child{border-bottom:0}
.mk-conta{border:1px solid var(--line,#0000001a);border-radius:16px;background:var(--surface-solid,#fff);
  padding:16px 20px;margin-top:20px;max-width:430px}
.mk-conta table{width:100%;border-collapse:collapse;font-size:.9rem}
.mk-conta td{padding:5px 0}
.mk-conta td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.mk-conta tr.tot td{border-top:1px solid var(--line,#0000001a);padding-top:10px;font-weight:700;font-size:1.05rem}
.mk-conta tr.sal td{color:var(--muted,#6e6e73);font-size:.85rem}
.jn-aviso{margin:0;width:100%;max-width:700px;font-size:.72rem;line-height:1.6;
  color:var(--muted,#6e6e73);text-align:center}
.jn-pe.centro{flex-direction:column;align-items:center;gap:14px}
.mk-volta{display:inline-block;margin-bottom:10px;font-size:.88rem}
/* A numeração é a ficha do desenho: número branco em círculo cheio da cor
   primária. Ela existe porque uma lista de campos sem número é uma pilha — e a
   ordem dos campos é a ordem em que o modelo os devolve, então ela conta. */
.mk-num{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--accent,#0071e3);color:#fff;font-size:.78rem;font-weight:700;
  font-variant-numeric:tabular-nums}
.mk-num-mini{width:22px;height:22px;font-size:.72rem}
.mk-campo-bloco + .mk-campo-bloco{margin-top:16px;padding-top:16px;
  border-top:1px solid var(--line,#0000001a)}
.mk-campo-linha{display:grid;grid-template-columns:26px 1fr 2fr 140px 38px;gap:10px;
  align-items:center;margin-bottom:9px}
/* O X tem a altura da linha, e não uma altura própria: menor, ele flutuava
   dentro dela; maior, esticava a linha inteira no telefone. A largura acompanha
   para o botão não sair quadrado. */
.mk-tira{width:38px;height:38px;align-self:stretch;min-height:0}
.mk-teto{margin:8px 0 0;font-size:.78rem}
/* As duas ações da tela de leitura, no alto e à direita do nome. */
.tp-cabeca{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  margin-top:6px}
.tp-acoes{display:flex;gap:8px;flex:none}
.mk-acao{width:38px;height:38px;border-radius:10px}
.mk-acao svg{width:18px;height:18px}
.jn-titulo .chip{margin-left:10px;vertical-align:middle}

/* O modal de confirmação e o aviso de salvo. */
.mk-modal{position:fixed;inset:0;z-index:130;background:#0b0b0c8c;display:grid;place-items:center;
  padding:20px}
.mk-modal[hidden]{display:none}
.mk-modal-caixa{width:min(420px,100%);background:var(--surface-solid,#fff);border-radius:16px;
  padding:22px 24px;box-shadow:0 24px 70px rgba(0,0,0,.18)}
.mk-modal-texto{margin:0 0 18px;font-size:.98rem;line-height:1.5}
.mk-modal-pe{display:flex;justify-content:flex-end;gap:10px}
.mk-aviso{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:140;
  display:flex;align-items:center;gap:9px;
  padding:12px 20px;border-radius:12px;background:#e8f6ed;color:#1b6b3a;
  border:1px solid #b7e2c6;font-size:.9rem;font-weight:600;
  box-shadow:0 12px 34px rgba(0,0,0,.1);transition:opacity .4s ease}
.mk-aviso[hidden]{display:none}
.mk-aviso.saindo{opacity:0}
.mk-aviso svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.mk-rotulo-g{max-width:460px;font-size:1.02rem;padding:11px 14px}
.mk-titulo-campo label{display:block;font-size:.82rem;font-weight:600;margin-bottom:6px}
.mk-bloco{background:var(--surface-solid,#fff);border:1px solid var(--line,#0000001a);
  border-radius:16px;padding:20px 24px;margin-bottom:18px}
.mk-titulo-linha{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
/* No telefone a linha de campo vira bloco: nome e descrição ocupam a largura,
   e o tipo divide a última linha com o botão de tirar. Empilhando os quatro, o
   X ficava sozinho num degrau e parecia botão de outra coisa. A régua entre um
   campo e outro é o que impede que três linhas virem uma mancha. */
@media(max-width:700px){
  /* No telefone o X sobe para a linha do número, à direita, e encolhe para a
     altura dele: embaixo, do tamanho do `select`, ele pesava mais que o campo
     que apaga. */
  .mk-campo-linha{grid-template-columns:26px 1fr;gap:8px}
  .mk-campo-linha > input, .mk-campo-linha > select{grid-column:1 / -1}
  .mk-campo-linha > .mk-tira{grid-column:2;grid-row:1;justify-self:end;
    width:26px;height:26px;border-radius:8px}
  .mk-campo-linha > .mk-tira svg{width:14px;height:14px}
  .mk-campo-cab{display:none}
}
@media(max-width:640px){
  .tp-campo{grid-template-columns:1fr;gap:2px}
  .tp-campo i{text-align:left}
  .tp-opcoes{grid-column:1}
}
/* O cartão é `<a>` na tela do menu e `<button>` no passo da jornada — o mesmo
   desenho servindo aos dois (D-205). O `<a>` traz sublinhado de link, que num
   ladrilho não quer dizer nada. */
.tpc, .tpc:hover { text-decoration: none }
.tp-grupo + .mk-meta { margin-top: 0 }
/* O seletor combinado do desenho — a extração por regra exata não o pegou
   porque ele nomeia dois elementos de uma vez. */
.mk-campo-linha input, .mk-campo-linha select {
  width: 100%; padding: 8px 11px; font-size: .88rem;
  border: 1px solid var(--line, #0000001a); border-radius: 8px
}
.mk-campo-cab { font-size: .78rem; font-weight: 600; color: var(--muted, #6e6e73) }
.mk-bloco-campos { max-width: 900px }
.mk-ajuda { margin: -2px 0 12px }
/* A sub-tabela de opções fica recuada sob o campo a que pertence: sem o recuo,
   ela parece uma lista de campos e não uma lista de valores daquele campo. */
/* Sem régua horizontal entre o tipo e as opções: elas são do MESMO campo, e a
   linha as fazia parecer outra seção. O recuo com a barra à esquerda já diz que
   uma coisa pertence à outra. */
.mk-opcoes { margin: 2px 0 4px 36px; padding-left: 14px;
  border-left: 2px solid var(--line, #0000001a) }
.mk-oculto { display: none }
.mk-opcoes-titulo { margin: 0 0 8px; font-size: .78rem; font-weight: 600 }
.mk-opcoes-titulo span { font-weight: 400 }
/* A opção é duas linhas, e não duas colunas: a descrição precisa da largura
   toda para caber, e alinhada com a caixa do rótulo ela se lê como continuação
   da mesma opção. O X fica na primeira linha, à direita do rótulo. */
.mk-opcao-linha { display: grid; grid-template-columns: 22px 1fr 32px; gap: 8px 10px;
  align-items: center; margin-bottom: 12px }
.mk-opcao-linha .mk-opcao-descricao { grid-column: 2 / 4 }
.mk-opcao-linha .mk-tira { width: 32px; height: 32px }
.mk-opcao-linha input { width: 100%; padding: 7px 10px; font-size: .85rem;
  border: 1px solid var(--line, #0000001a); border-radius: 8px }
/* As fichas da lista fechada, na tela de leitura. */
.tp-opcoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px }
@media (max-width: 700px) { .mk-opcao-linha { grid-template-columns: 22px 1fr 32px } }
/* O tipo desativado continua na tela do menu, apagado: ele some da jornada mas
   não do mundo, senão não haveria como reativá-lo. */
.tpc-off { opacity: .55 }
.tpc-off b::after { content: ' ·'; }

/* ===== meus pedidos e acompanhamento, do desenho da jornada (D-205) ===== */
.chip{display:inline-block;padding:3px 11px;border-radius:999px;font-size:.78rem;font-weight:600;border:1px solid;line-height:1.5}
.chip-ok{color:#1b6b3a;background:#e8f6ed;border-color:#b7e2c6}
.chip-run{color:#1a4f8a;background:#e9f2fd;border-color:#b9d6f5}
.chip-wait{color:#63636a;background:#f1f1f3;border-color:#dcdce0}
.chip-err{color:#9a2b2b;background:#fdeceb;border-color:#f3c4c1}
.mk-filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.mk-filtros select,.mk-filtros input{padding:8px 11px;border:1px solid var(--line,#0000001a);border-radius:9px;
  font-size:.87rem;background:var(--surface-solid,#fff)}
.mk-ord-bt{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid var(--line,#0000001a);
  border-radius:9px;background:var(--surface-solid,#fff);cursor:pointer;font:inherit;font-size:.87rem}
.mk-ord-bt svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* O cartão inteiro é o link — é o alvo grande, e é o que o dedo acerta no
   telefone. Mas cartão não é frase: o sublinhado e o azul de link pertencem a
   uma palavra dentro de um texto, e aqui empurrariam a atenção para o número do
   pedido em vez do estado dele. Mesmo motivo do `.tpc`. */
.mk-pedido{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;
  border:1px solid var(--line,#0000001a);border-radius:14px;padding:14px 18px;margin-bottom:10px;
  background:var(--surface-solid,#fff);cursor:pointer;text-decoration:none;color:inherit}
.mk-pedido:hover h3{color:var(--accent,#0071e3)}
.mk-pedido:hover{border-color:var(--accent,#0071e3)}
.mk-pedido h3{margin:7px 0 3px;font-size:.86rem;font-weight:600}
.mk-pedido .mk-meta{margin:0}
.mk-pedido .mk-barra{margin-top:8px;max-width:280px}
.mk-icos{display:flex;gap:6px;align-items:center}
.mk-ico{width:36px;height:36px;border-radius:10px;border:1px solid var(--line,#0000001a);
  background:var(--surface-solid,#fff);display:grid;place-items:center;cursor:pointer;color:var(--muted,#6e6e73)}
.mk-ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.mk-ico:hover{color:var(--accent,#0071e3);border-color:var(--accent,#0071e3)}
.mk-contagem{font-size:1.2rem;font-weight:700;margin:0}
.mk-barra{height:7px;border-radius:99px;background:var(--line,#0000001a);overflow:hidden}
.mk-barra span{display:block;height:100%;background:var(--accent,#0071e3)}
.mk-busca{position:relative;max-width:420px;margin-bottom:12px}
.mk-busca>svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;
  fill:none;stroke:var(--muted,#6e6e73);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.mk-busca input{width:100%;padding:10px 38px;border:1px solid var(--line,#0000001a);border-radius:10px;
  font-size:.9rem;background:var(--surface-solid,#fff);color:inherit}
.mk-busca input:focus{outline:none;border-color:var(--accent,#0071e3)}
.mk-card-erro{border-color:#e8b4b0;background:#fdf6f5}
.mk-card-erro-txt{font-size:.8rem;line-height:1.45;color:#9a2b2b;margin:8px 2px 0}
.ev{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;
  padding:44px 24px;border-radius:16px;background:var(--surface-solid,#fff);border:1px solid var(--line,#0000001a)}
.ev-ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:var(--light-blue,#eef5fc);color:var(--accent,#0071e3)}
.ev-ico svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.ev-ico.neutro{background:#f4f5f7;color:var(--muted,#6e6e73)}
.ev h3{margin:4px 0 0;font-size:1.12rem;font-weight:600}
.ev p{margin:0;font-size:.92rem;line-height:1.6;max-width:400px;color:var(--muted,#6e6e73)}

/* ===== a jornada: as regras que faltavam (D-205) =====
   Sete classes estavam escritas nos templates e não existiam em folha nenhuma,
   e a tela "O que fazer" mostrava um `<polyline>` sem estilo — uma seta preta
   ocupando o cartão inteiro. Vieram do desenho, sem retoque: é ele que manda
   quando ele e qualquer outra coisa discordam. */
.jn-meio{max-width:760px;margin-inline:auto}
.jn-titulo{font-size:1.35rem;font-weight:680;letter-spacing:-.01em;margin:0}
.jn-op{display:flex;align-items:center;gap:12px;width:100%;padding:15px 17px;border-radius:11px;
  cursor:pointer;font:inherit;font-size:.97rem;text-align:left;background:transparent;
  border:1.5px solid var(--line,#0000001a);color:inherit}
.jn-op:hover{border-color:var(--line-strong,#0003)}
/* O rádio de verdade fica escondido e continua sendo ele quem guarda a escolha:
   o `:has(:checked)` só pinta o que ele já decidiu. Assim a tela responde no
   clique sem JavaScript, e o teclado continua andando entre as opções. */
.jn-opcoes{display:flex;flex-direction:column;gap:9px;margin-top:22px}
.jn-op input{position:absolute;opacity:0;width:0;height:0}
.jn-op:has(input:checked){background:var(--light-blue,#eef5fc);border-color:var(--accent,#0071e3);color:var(--accent,#0071e3)}
.jn-op:has(input:focus-visible){outline:3px solid #0071e340;outline-offset:2px}
.jn-op:has(input:checked) .jn-marca{background:var(--accent,#0071e3);border-color:var(--accent,#0071e3)}
.jn-op:has(input:checked) .jn-marca svg{display:block}
.jn-op small{display:block;opacity:.75;font-size:.84rem;margin-top:2px}
/* A marca é sempre desenhada; o visto dentro dela só aparece na escolhida.
   Sem esta regra o `display:none` não existe e o visto aparece nas duas. */
.jn-marca{width:21px;height:21px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1.5px solid var(--line-strong,#0003);background:transparent}
.jn-marca svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;
  stroke-linejoin:round;display:none}
.jn-op.on .jn-marca{background:var(--accent,#0071e3);border-color:var(--accent,#0071e3)}
.jn-op.on .jn-marca svg{display:block}
.jn-preco{font-size:.82rem;opacity:.75;white-space:nowrap}
.mk-bloco-topo{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.mk-bloco-topo h3{margin:0;font-size:.98rem}
.mk-erro{font-size:.8rem;color:#9a2b2b;margin:6px 0 0}
/* A mensagem de saldo alinha com o botão que ela explica, e não com o texto
   acima: ela é a legenda daquele botão, e legenda fica debaixo da coisa.
   No telefone o botão ocupa a linha quase inteira, e aí o centro é o alinhamento
   do próprio botão — nada a corrigir. */
.mk-falta{text-align:right;font-size:.8rem;max-width:none}
@media(max-width:700px){ .mk-falta{text-align:center} }
/* O nome do pedido, no bloco próprio do desenho (tela 6). */
/* O título de seção usa o mesmo corpo do título da tela, e ganha o respiro que
   separa uma seção da anterior. */
.jn-titulo-secao{margin-top:26px}
.jn-titulo-secao + .mk-bloco{margin-top:12px}
.mk-rotulo-pedido{margin-top:12px}
.mk-rotulo-pedido label{display:block;font-size:.88rem;font-weight:650;margin-bottom:9px}
.mk-rotulo-pedido label span{font-weight:400;color:var(--muted,#6e6e73);font-size:.82rem}
/* O número do pedido continua visível ao lado do nome: é por ele que a pessoa
   fala com o suporte, e ele sumiria se o rótulo o cobrisse. */
.mk-numero{font-weight:400;color:var(--muted,#6e6e73);font-size:.82rem;margin-left:6px}

/* ===== alvo de dedo e distância do destrutivo (D-257) =====
   Regra, e não conserto desta tela: todo controle tocável tem 44px no celular,
   e ação que perde trabalho não fica adjacente a ação de uso repetido. Aqui as
   duas coisas eram o mesmo defeito — girar e tirar com 28px e 5px entre eles,
   no aparelho que é a população deste produto. */
.mk-tirar{position:absolute;top:15px;right:15px;z-index:1}
.mk-tirar span{display:none}
.mk-card-bts{right:48px}
@media(max-width:700px){
  .mk-mini-bt{width:44px;height:44px;border-radius:11px}
  .mk-mini-bt svg{width:18px;height:18px}
  /* Apagar volta para DENTRO da miniatura, no mesmo arranjo do computador —
     decisão do Alan, e a moldura passa a ser a mesma nas duas larguras.
     O que fica da D-257 é o que dá para manter aqui: os 44px de alvo e uma
     distância real entre girar e apagar. Antes eram 28px com 5 de folga, um
     roçar de dedo; agora são 44 com 14, e os centros ficam a 58px em vez de
     33. É menos separação do que o botão embaixo dava, e é a troca que o
     arranjo único custa. */
  .mk-tirar{right:15px}
  .mk-card-bts{right:73px}
}

/* ===== enviar: o desenho da jornada, telas 1 e 2 (D-205) ===== */
.mk-solta-fina{padding:16px 20px;text-align:left}
.mk-solta-fina .mk-solta-acoes{margin-top:0}
.mk-solta-linha{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.mk-solta-linha p{margin:0}
/* Os dois ícones dos botões de anexar — o clipe e a câmera. No telefone eles
   são o que a mão procura antes de ler, e é por isso que o texto pode encolher
   sem o botão perder o sentido. */
.mk-so-estreito{display:none}
.mk-camera{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;margin-right:7px;vertical-align:-3px}
@media(max-width:480px){
  /* Os dois na mesma linha: o ícone carrega o sentido, então o texto perde a
     palavra genérica e fica com a que distingue — "Arquivos" e "Foto". Empilhar
     custava uma rolagem inteira antes de a pessoa ver o primeiro documento. */
  /* A segunda tela empilha o convite e os botões, como a primeira: em linha, os
     botões ficavam com a sobra da largura, o texto encostava na borda e o par
     deixava de ser o mesmo par da tela anterior. */
  .mk-solta-linha{flex-direction:column;align-items:stretch;gap:14px}
  .mk-solta-acoes{flex-wrap:nowrap;gap:8px}
  .mk-solta-acoes .button{flex:1 1 0;min-width:0;padding:12px 10px;font-size:.9rem;
    justify-content:center;white-space:nowrap}
  .mk-solta-acoes .mk-so-largo{display:none}
  .mk-solta-acoes .mk-so-estreito{display:inline}
  .mk-camera{margin-right:6px}
}
/* Arrastar o arquivo para cima da área precisa dizer que ela recebe: sem o
   realce, soltar no lugar certo vira sorte. */
.mk-solta.sobre{border-color:var(--accent,#0071e3);background:var(--light-blue,#eef5fc)}
.mk-solta-andamento{margin-top:14px}
.mk-solta-andamento small{display:block;margin-top:7px;color:var(--muted,#6e6e73)}

/* A lupa: o documento em tela cheia, com zoom. */
.mk-lupa{display:flex;position:fixed;inset:0;background:#0b0b0ceb;z-index:120;flex-direction:column}
.mk-lupa[hidden]{display:none}
.mk-lupa-barra{display:flex;align-items:center;justify-content:space-between;gap:16px;flex:none;
  padding:12px 18px;color:#fff;font-size:.88rem;background:#00000059}
.mk-lupa-bts{display:flex;align-items:center;gap:6px}
.mk-lupa-bts b{font-size:.8rem;font-weight:600;min-width:64px;text-align:center;opacity:.85}
.mk-lupa-bts button{width:34px;height:34px;border-radius:9px;border:1px solid #ffffff2e;
  background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer}
.mk-lupa-bts button:hover{background:#ffffff1f}
.mk-lupa-bts svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
/* `touch-action: pinch-zoom` deixa o navegador entregar os dois ponteiros em
   vez de sequestrar o gesto para dar zoom na página inteira — e mantém a
   rolagem de um dedo, que é como se percorre a imagem ampliada. */
/* `place-items:center` centraliza, e ao mesmo tempo torna INALCANÇÁVEL o que
   transborda para a esquerda e para cima: a rolagem não vai abaixo de zero, e
   metade da imagem ampliada fica atrás da borda. `margin:auto` centraliza do
   mesmo jeito e sem esse efeito. Medido: com o `place-items`, o ponto sob os
   dedos escorregava 5% na horizontal no primeiro gesto.

   `touch-action: pinch-zoom` deixa o navegador entregar os dois ponteiros em
   vez de sequestrar o gesto para dar zoom na página inteira. */
.mk-lupa-palco{flex:1;overflow:auto;display:grid;place-items:start;padding:20px;
  touch-action:pinch-zoom}
.mk-lupa-palco img{margin:auto}
.mk-lupa-palco img{display:block;border-radius:6px;background:#fff;
  max-width:calc(100vw - 40px);max-height:calc(100vh - 100px)}
.mk-lupa-palco img.real{max-width:none;max-height:none}
/* O cursor promete o que a superfície FAZ, e as duas grades não fazem o mesmo.
   Medido: na tela de ENVIO o clique na miniatura abre a lupa (`envio.js`), e o
   `zoom-in` é honesto; na de ACOMPANHAR o único ligado à lupa é o botão
   `[data-lupa-cartao]` — a imagem não responde a clique nenhum, e a regra sem
   escopo prometia uma lupa que não vinha. O Alan passou o mouse, viu o cursor,
   clicou, e não aconteceu nada.
   Ampliar continuar sendo botão ali é decisão e está certa: o cartão inteiro
   vira link para o resultado, e um mesmo toque que às vezes amplia e às vezes
   navega é um toque que a pessoa não pode prever. O defeito era o cursor, não
   a ação. */
#grade .mk-card > img { cursor: zoom-in }
.mk-card [data-lupa-cartao] { cursor: zoom-in }

/* O cartão que ainda está subindo: um arco girando NO MEIO da miniatura, e
   nenhum texto. O texto vivia embaixo do cartão e era vermelho — a MESMA cor
   da recusa, que é o outro estado desta mesma tela. Duas coisas diferentes com
   a mesma cor ensinam a pessoa a não confiar na cor, e a cor da recusa é a que
   precisa ser acreditada. */
.mk-subindo {
  position: absolute; top: 9px; left: 9px; right: 9px; height: 184px;
  display: grid; place-items: center; border-radius: 10px;
  background: #ffffff73; z-index: 2
}
.mk-subindo i {
  display: block; width: 26px; height: 26px; border-radius: 50%;
  border: 2.5px solid #0000001c; border-top-color: var(--accent, #0071e3);
  animation: mk-gira .8s linear infinite
}
@keyframes mk-gira { to { transform: rotate(360deg) } }
/* Quem pediu para não ver movimento não vê: o arco para e vira um anel, que
   continua dizendo "isto ainda não terminou" sem girar. */
@media (prefers-reduced-motion: reduce) {
  .mk-subindo i { animation: none; border-top-color: #0000001c }
}
@media(max-width:700px){
  .mk-lupa-bts button{width:44px;height:44px}
}

/* A tela de resultado. Os valores são os do mockup da jornada (D-205), que é a
   única referência deste marco — não reinterpretados. */
.mk-res {
  display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 24px; align-items: start
}
.mk-res > * { min-width: 0 }
.mk-res .mk-bloco { min-width: 0 }
/* Imagem à esquerda, texto à direita, e as duas com a mesma largura: o par é a
   defesa (D-245), e dar mais espaço a um dos lados convida a ler só ele. */
.mk-res-doc { grid-template-columns: 1fr 1fr }
/* A imagem acompanha a rolagem do texto. Sem isso, conferir o fim de uma
   transcrição longa é conferir contra o vazio — a imagem já subiu. */
.mk-res-img { position: sticky; top: 14px }
.mk-res-img .mk-mini {
  max-height: calc(100vh - 150px); object-fit: contain; object-position: top; background: #f2f2f4
}
.mk-res-img-pe {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 10px; flex-wrap: wrap
}
.mk-mini {
  width: 100%; border-radius: 12px; border: 1px solid var(--line, #0000001a);
  display: block; cursor: zoom-in
}
.mk-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: var(--surface-solid, #fff); border: 1px solid var(--line, #0000001a);
  border-radius: 14px; padding: 10px 16px; margin-bottom: 18px
}
.mk-nav-botoes { display: flex; align-items: center; gap: 8px }
.mk-nav .button { min-width: 40px }
/* `pre-wrap` e não `pre`: a transcrição vem com as quebras do documento, e
   respeitá-las é o que faz o texto na tela parecer o texto no papel — mas ela
   ainda precisa caber na coluna. */
/* Justificado e SEM hifenização. O hífen que o navegador inventa fica no meio
   de uma transcrição paleográfica, onde tudo o que está escrito é para ser
   lido como estava no papel — quem lê não tem como saber que aquele traço é
   nosso e não do escrivão. Os buracos entre as palavras são o preço, e são
   um defeito de aparência; o hífen seria um defeito de conteúdo. */
.mk-texto {
  font-size: 1.05rem; line-height: 1.85; white-space: pre-wrap; margin: 0;
  text-align: justify; hyphens: manual;
}
.mk-chave { display: grid; grid-template-columns: 150px 1fr; gap: 8px 16px; font-size: .94rem; margin: 0 }
.mk-chave dt { color: var(--muted, #6e6e73) }
.mk-chave dd { margin: 0; font-weight: 600 }
.mk-chave dd:empty::after { content: '—'; color: var(--muted, #6e6e73); font-weight: 400 }
.mk-switch { display: inline-flex; align-items: center; gap: 9px; font-size: .87rem; color: var(--muted, #6e6e73); cursor: pointer }
.mk-switch input { position: absolute; opacity: 0; pointer-events: none }
.mk-switch i {
  width: 38px; height: 21px; border-radius: 99px; background: #cbd5e1;
  position: relative; display: inline-block; flex: none; transition: background .15s ease
}
.mk-switch i::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px;
  border-radius: 50%; background: #fff; transition: transform .15s ease
}
.mk-switch input:checked + i { background: var(--accent, #0071e3) }
.mk-switch input:checked + i::after { transform: translateX(17px) }
.mk-switch-linha {
  margin: 0 0 14px; padding-bottom: 14px;
  border-bottom: 1px solid var(--line, #0000001a); width: 100%
}

@media (max-width: 940px) {
  .mk-res { grid-template-columns: 1fr }
  .mk-res-doc { grid-template-columns: 1fr }
  /* Empilhado, a imagem grudada no topo cobriria o texto que ela existe para
     confrontar. */
  .mk-res-img { position: static }
  .mk-res-img .mk-mini { max-height: 60vh }
  .mk-chave { grid-template-columns: 130px 1fr }
  .mk-nav-botoes { flex-wrap: wrap }
}
/* Passo de navegação sem destino. Ele fica na fileira para que os quatro
   botões não dancem de posição a cada documento — some-lo faria o "próximo"
   pular para onde estava o "primeiro". */
.desativado { opacity: .38; pointer-events: none }

/* O esqueleto: a área da imagem existe antes da imagem, e não pula quando ela
   chega. Sem isso o texto ao lado dança para baixo no meio de uma leitura. */
/* A caixa NÃO reserva a forma do documento. Reservá-la pela proporção gravada
   deixava uma faixa branca embaixo sempre que o `max-height` da imagem
   apertava mais que a proporção — a caixa guardava espaço que a imagem não ia
   ocupar. Ela cresce com a imagem, e o brilho cobre o vazio enquanto isso. */
.mk-esqueleto { position: relative; border-radius: 12px; overflow: hidden; background: #ececed }
.mk-esqueleto.pronta { background: none; overflow: visible }
.mk-esqueleto:not(.pronta) { min-height: 220px }
.mk-esqueleto::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, #0000 20%, #ffffffb0 50%, #0000 80%);
  background-size: 220% 100%;
  animation: brilho 1.25s linear infinite;
}
/* Some quando a grande chega — inclusive para quem pediu menos movimento. */
.mk-esqueleto.pronta::after { content: none }
.mk-esqueleto.pronta { background: none }
@keyframes brilho { from { background-position: 140% 0 } to { background-position: -40% 0 } }
@media (prefers-reduced-motion: reduce) { .mk-esqueleto::after { animation: none } }

/* O contador do paginador em duas versões. `display:none` e não recorte no
   script: a palavra tem comprimentos diferentes nos três idiomas. */
.mk-so-estreito { display: none }
@media (max-width: 620px) {
  .mk-so-largo { display: none }
  .mk-so-estreito { display: inline }
}
/* Bandeja e seta dentro do MESMO alvo, sem divisória. O alvo cresce para
   caber os dois sem apertar o toque. É a forma que serve aos dois botões de
   baixar — o do pedido inteiro e o do documento da tela. */
.mk-ico-seta { width: auto; gap: 2px; padding: 0 7px; display: inline-flex; align-items: center }
.mk-ico-seta .mk-caret { width: 12px; height: 12px }
#pop-baixar, #pop-baixar-um { position: relative }


/* Meus dados. O avatar grande é o mesmo da barra, três vezes maior. */
.md-lead { margin: -14px 0 22px }
.md-nota { margin: -4px 0 16px }
/* O círculo e o botão na primeira linha, alinhados pelo CENTRO; a palavra
   numa linha própria embaixo dos dois. Com ela na mesma coluna do botão, o
   botão subia junto e o meio dele deixava de coincidir com o meio do
   círculo — que foi o que o Alan viu. */
.md-foto {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: 0 18px;
}
/* O botão herda `margin-top` de `.button`, e dentro de uma célula de grade
   isso o empurra 6px abaixo do centro — a olho é o botão "quase" alinhado com
   o círculo, que é pior do que claramente desalinhado. */
/* E não estica: numa coluna `1fr` o botão ocupava a largura toda do
   cartão, e um botão de largura de página para uma ação opcional pesa
   mais do que a ação vale. */
.md-foto > .button { margin-top: 0; justify-self: start }
.md-opcional, .md-erro-foto { grid-column: 2; margin: 5px 0 0; font-size: .72rem; color: var(--muted, #6e6e73) }
.md-erro-foto { color: var(--danger, #b42318) }
.mk-avatar-g { width: 64px; height: 64px; font-size: 1.3rem; flex: none }
.md-acoes { justify-content: flex-start; margin-top: 4px }
/* A foto no lugar das iniciais: mesmo círculo, e cortada no centro para não
   deformar quem mandou uma foto que não é quadrada. O corte de verdade é no
   servidor; este é o que sobra. */
.md-retrato { border-radius: 50%; object-fit: cover; display: block }

/* O avatar da GAVETA, que é o do celular: 40px porque ali ele fica ao lado do
   nome e do e-mail, e 26px ao lado de duas linhas de texto desaparece. */
.mk-avatar-m { width: 40px; height: 40px; font-size: .95rem; flex: none }

/* Com foto e em tela de computador, a conta deixa de ser pílula e vira só o
   retrato. A foto já diz de quem é a conta; a moldura em volta dela competia
   com a bandeira do idioma ao lado, que é o mesmo tipo de botão.
   O corte é o mesmo em que a conta some da barra e vai para a gaveta. */
@media (min-width: 861px) {
  .mk-pop-alvo-foto {
    padding: 0; border: 0; background: none; border-radius: 50%;
  }
  .mk-pop-alvo-foto:hover { border-color: transparent }
  /* 40px, medido no avatar da gaveta do celular e aplicado igual aqui:
     é o tamanho em que um rosto de 256px ainda se reconhece. A pílula
     do idioma ao lado tem 35 de altura, então o retrato passa cinco
     pixels dela — e é assim de propósito: sem moldura em volta, ele
     precisa de um pouco mais de diâmetro para ter o mesmo peso. */
  .mk-pop-alvo-foto .mk-avatar { width: 40px; height: 40px }
}

/* O recorte do avatar. O palco é quadrado e a máscara é um anel opaco por
   cima — o buraco redondo é o que vai virar a foto. */
.rc-caixa { width: min(380px, 92vw) }
.rc-palco { position: relative; width: 100%; aspect-ratio: 1; margin: 0 auto 14px; background: #1d1d1f; border-radius: 12px; overflow: hidden; touch-action: none }
.rc-tela { width: 100%; height: 100%; display: block; cursor: grab }
.rc-tela:active { cursor: grabbing }
/* A sombra de fora e o círculo, numa sombra só: `box-shadow` gigante com o
   elemento redondo no meio. Dois elementos dariam uma borda serrilhada entre
   eles em telas de densidade fracionada. */
.rc-mascara {
  position: absolute; inset: 0; margin: auto; width: 78%; aspect-ratio: 1;
  border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55); border: 2px solid rgba(255, 255, 255, .85);
}
.rc-zoom { display: flex; align-items: center; gap: 10px; margin: 0 2px 8px }
.rc-zoom svg { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--muted, #6e6e73); stroke-width: 1.8; stroke-linecap: round }
.rc-zoom input { flex: 1; accent-color: var(--accent, #0071e3); min-height: 24px }
.rc-dica { text-align: center; margin: 0 0 14px; font-size: .78rem }
/* A foto do bloco de Meus dados é clicável: clicar nela reabre o recorte. */
.rc-alvo { cursor: pointer }

/* O X que apaga a foto, no canto dela. */
.md-foto-alvo { position: relative; display: inline-block; flex: none }
.md-tirar {
  position: absolute; top: -2px; right: -2px; width: 24px; height: 24px;
  display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 1px solid var(--line, #0000001a); border-radius: 50%;
  background: var(--surface-solid, #fff); color: var(--muted, #6e6e73);
}
.md-tirar:hover { color: var(--danger, #b42318); border-color: currentColor }
.md-tirar svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round }

/* ===== a tabela do extrato e a dos chamados, que são a MESMA (D-327) =====
   O canvas desenhou as duas com os mesmos atributos e só as larguras de coluna
   diferentes — por isso as colunas saem da regra e vêm da tela, em `--cols`.
   Duas famílias de classe para uma tabela é o que a poda do M8 encontraria viva
   nas duas pontas, e é a divergência que ninguém desfaz depois.

   Alinhamento de célula NÃO mora aqui: é do conteúdo, não do esqueleto. O
   extrato alinha duas colunas à direita e os chamados alinham uma, e generalizar
   isso faria a terceira tela herdar o alinhamento da segunda. */
.tabela-cab {
  display: grid; grid-template-columns: var(--cols); gap: 14px;
  padding: 12px 0 9px; border-bottom: 1px solid var(--line, #0000001a);
  font-size: .72rem; font-weight: 750; letter-spacing: .03em;
  text-transform: uppercase; color: var(--muted, #6e6e73);
}
.tabela-linhas { display: flex; flex-direction: column }
.tabela-linha {
  display: grid; grid-template-columns: var(--cols); gap: 14px;
  align-items: baseline; padding: 13px 0;
  border-bottom: 1px dotted var(--line, #0000001a);
}
/* A última linha não leva régua: a régua separa duas linhas, e embaixo da
   última não há o que separar — ela vira um segundo traço logo acima da borda
   do bloco. */
.tabela-linha:last-child { border-bottom: 0 }


/* ===== Créditos. Canvas `Créditos e Suporte`, pranchetas Main e Celular =====
 *
 * O que já existe no design system é reusado e não redesenhado: o cartão do
 * extrato é `.mk-bloco` — branco, borda `--line`, raio 16, mesmo respiro —, a
 * ficha de "em andamento" é `.chip .chip-run`, cujas três cores são as do
 * canvas, e o botão é `.button.primary`, cujo raio de 8px vem da segunda regra
 * de `.button` no `styles.css`. Escrever raio aqui reintroduziria a pílula que
 * aquela regra tirou. */
.cr-topo { margin-bottom: 26px; display: flex; align-items: flex-end;
  justify-content: space-between; gap: 24px; flex-wrap: wrap }
.cr-carrinho { width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round }

.cr-caixas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px }
.cr-caixa { background: var(--surface-solid, #fff); border: 1px solid var(--line, #0000001a);
  border-radius: 16px; padding: 20px 24px }
.cr-caixa > span { display: block; font-size: .78rem; font-weight: 750; color: var(--muted, #6e6e73) }
.cr-caixa > strong { display: block; margin: 6px 0 2px; font-size: 2.1rem; line-height: 1;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums }
.cr-caixa > small { font-size: .76rem; color: var(--muted, #6e6e73) }
/* A caixa do disponível é a única com fundo, e é a resposta à pergunta que traz
   a pessoa aqui. As outras duas explicam o número dela. */
.cr-caixa-forte { background: var(--light-blue, #eef5fc); border-color: rgba(0, 113, 227, .18) }
.cr-caixa-forte > span { color: #1a4f8a }
.cr-caixa-forte > strong { color: #0a3f78 }
.cr-caixa-forte > small { color: #4a6d95 }

.cr-extrato-topo { display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap; margin-bottom: 4px }
.cr-extrato-topo h3 { margin: 0; font-size: .98rem }
.cr-filtros { display: flex; align-items: center; gap: 8px }
.cr-filtros select { padding: 0 11px; min-height: 38px; border: 1px solid var(--line-strong, #00000029);
  border-radius: 10px; background: var(--surface-solid, #fff); color: inherit;
  font: inherit; font-size: .85rem; cursor: pointer }



/* No computador o invólucro dos números não existe como caixa: ele se desfaz
   em duas colunas da grade, que é onde o cabeçalho as nomeia. */
.cr-numeros { display: contents }
.cr-num { text-align: right }
.cr-quando { font-size: .85rem; color: var(--muted, #6e6e73) }
.cr-oque { font-size: .9rem }
.cr-sub { display: block; margin-top: 2px; font-size: .82rem; color: var(--muted, #6e6e73) }
.cr-valor { font-size: .92rem; font-weight: 650; text-align: right; font-variant-numeric: tabular-nums }
.cr-entrada { color: var(--success, #16794d) }
.cr-saldo { font-size: .92rem; text-align: right; color: var(--muted, #6e6e73);
  font-variant-numeric: tabular-nums }
/* No computador a data tem coluna e o saldo tem cabeçalho, então o duplicado e
   o rótulo ficam fora da tela. No telefone é o contrário — ver abaixo. */
.cr-quando-junto, .cr-saldo-rotulo { display: none }
.cr-vazio { margin: 18px 0 4px; font-size: .88rem; color: var(--muted, #6e6e73) }
.cr-pe { margin: 18px 2px 0; font-size: .86rem; color: var(--muted, #6e6e73); line-height: 1.55 }

@media (max-width: 700px) {
  /* O botão fica NA MESMA LINHA do título, e não vira barra de largura cheia:
     barra fina lê-se como aviso, e comprar crédito é a ação principal desta
     tela. Quem cede é a fonte do título. */
  .cr-topo { align-items: center; gap: 12px; margin-bottom: 20px }
  .cr-caixas { grid-template-columns: 1fr 1fr; gap: 10px }
  /* A do disponível ocupa a linha inteira porque é a que a pessoa veio ver; as
     outras duas dividem a seguinte, e cabem, porque os números são curtos. */
  .cr-caixa-forte { grid-column: 1 / -1 }
  .cr-caixa { padding: 14px 16px }
  .cr-caixa > strong { font-size: 1.4rem; margin: 4px 0 2px }
  .cr-caixa-forte > strong { font-size: 2rem }
  .cr-filtros { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
  .cr-filtros select { min-height: 40px }
  /* AS COLUNAS DEIXAM DE EXISTIR, e por isso o cabeçalho some: cada lançamento
     vira um bloco de dois lados — o que aconteceu à esquerda, os números à
     direita — e nada rola para o lado.

     Isto fica preso ao EXTRATO e não sobe para o esqueleto, ao contrário do
     resto: a lista de chamados do M7.4 recolhe de outro jeito no telefone —
     conferi a prancheta dela e a linha é centrada, com outro respiro. O que se
     generaliza é o que foi medido igual, não o que parece parecido. */
  .cr-extrato .tabela-cab { display: none }
  .cr-extrato .tabela-linha { display: flex; justify-content: space-between;
    align-items: flex-start; gap: 12px; padding: 14px 0 }
  .cr-oque { flex: 1 1 auto; min-width: 0 }
  .cr-quando { display: none }
  .cr-quando-junto { display: inline }
  /* Os números viram o lado direito do bloco, empilhados. */
  .cr-numeros { display: block; flex: none; text-align: right }
  .cr-valor { font-size: .95rem }
  .cr-saldo { display: block; margin-top: 3px; font-size: .78rem }
  .cr-saldo-rotulo { display: inline }
  /* A ficha desce para DEPOIS da sub-linha: no telefone ela é a última coisa
     do bloco, e não um aposto no meio do título. */
  .cr-oque { display: flex; flex-direction: column; align-items: flex-start; gap: 3px }
  .cr-oque .cr-sub { order: 1; margin-top: 0 }
  .cr-oque .chip { order: 2; margin-top: 3px }
}

/* ===== o suporte: abrir um chamado, a lista, e o chamado aberto (M7.4) ===== */

/* O formulário ocupa a COLUNA ESTREITA e não a largura toda. Campo de texto com
   mil pixels convida a escrever um parágrafo por linha, e quem lê do outro lado
   é uma pessoa. */
/* O bloco de cima é UM bloco para quem lê, mesmo sendo dois cartões: por isso
   o respiro que o separa da lista é o mesmo `18px` que separa qualquer par de
   blocos do produto, e não o zero que sobrava.

   O cartão de dentro perde a margem própria: dentro de uma grade, a margem do
   item SOMA com o `gap`, e o formulário ficava a 34px do aviso enquanto o aviso
   ficava colado na lista — dois respiros diferentes numa tela só. */
.sp-topo { display: grid; grid-template-columns: minmax(0, 640px) 1fr; gap: 24px;
  align-items: start; margin-bottom: 18px }
.sp-topo > .mk-bloco { margin-bottom: 0 }
/* A coluna da direita responde a pergunta que a pessoa faz DEPOIS de clicar em
   enviar, e por isso ela fica ao lado e não abaixo. Debaixo do formulário ela
   só seria lida por quem já mandou. */
.sp-depois {
  background: var(--light-blue, #eef5fc); border: 1px solid rgba(0, 113, 227, .18);
  border-radius: 16px; padding: 20px 24px;
}
.sp-depois h3 { margin: 0 0 10px; font-size: .95rem; color: #0a3f78 }
.sp-depois p { margin: 0 0 12px; font-size: .86rem; color: #1a4f8a; line-height: 1.6 }
.sp-depois p:last-child { margin-bottom: 0 }
.sp-enviar { width: 100%; margin-top: 22px }

/* Depois de enviar, o aviso SUBSTITUI o formulário. */
/* O aviso não usa a largura da página. Ele tem três linhas de texto, e uma
   linha de 1150px obriga o olho a varrer a tela inteira para ler "ficou com o
   código X" — que é a única coisa dali que a pessoa pode precisar repetir. */
.sp-enviado { max-width: 820px }
.sp-enviado h2 { margin: 0 0 8px; font-size: 1.35rem; line-height: 1.25; letter-spacing: -.03em }
.sp-enviado p { margin: 0 0 6px; font-size: .95rem; line-height: 1.6 }
.sp-feito {
  width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center;
  background: #e8f6ed; color: var(--success, #16794d); margin-bottom: 16px;
}
.sp-feito svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.sp-acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 22px }

/* A lista. O alinhamento à direita é da última coluna e mora aqui, e não no
   esqueleto da tabela: alinhamento de célula é do conteúdo (D-327). */
.sp-dir { text-align: right }
.sp-codigo { font-size: .88rem; font-weight: 650 }
/* A LINHA INTEIRA é o link, e ela continua com a CARA do canvas: tinta do
   texto, sem sublinhado. Azul sublinhado no meio de uma coluna de códigos
   lê-se como "um destes é diferente dos outros" — e a linha inteira sublinhada
   seria pior ainda. O que informa que ali se clica é o realce da linha ao
   passar o ponteiro, que é o mesmo gesto do cartão de pedido. */
.sp-linha { color: inherit; text-decoration: none }
.sp-linha:hover { background: var(--light-blue, #eef5fc) }
.sp-linha:hover .sp-codigo { text-decoration: underline }
.sp-sob { display: block; margin-top: 2px; font-size: .82rem; color: var(--muted, #6e6e73) }

/* A faixa de quem ainda não tem chamado. Ela é DISCRETA de propósito: some no
   instante em que o primeiro chamado nascer, então não pode ocupar o tamanho de
   uma seção de verdade. Não é o `.ev`, que é o estado vazio grande e
   centralizado — aqui o vazio é passageiro, e lá ele é o assunto da tela. */
.sp-vazio {
  display: flex; align-items: center; gap: 14px; padding: 22px 24px;
  border: 1px dashed var(--line-strong, #00000029); border-radius: 16px;
  background: rgba(255, 255, 255, .55);
}
.sp-vazio-ico {
  width: 42px; height: 42px; flex: none; border-radius: 11px; display: grid;
  place-items: center; background: var(--light-blue, #eef5fc); color: var(--accent, #0071e3);
}
.sp-vazio-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round }
.sp-vazio b { display: block; font-size: .92rem }

/* ===== o chamado aberto ===== */

.sp-volta { margin-bottom: 12px }
.sp-volta a { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; color: var(--accent, #0071e3); text-decoration: none }
.sp-volta a:hover { text-decoration: underline }
.sp-volta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round }
/* A coluna é UMA SÓ e tudo mora dentro dela. Com o cabeçalho na largura inteira
   da página, a ficha de situação ia parar na beira da tela, a duzentos pixels da
   borda direita dos balões. */
.sp-coluna { max-width: 820px }
.sp-cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px }
.sp-cabeca h1 { margin: 6px 0; font-size: 2rem; line-height: 1.05; letter-spacing: -.04em }
.sp-etiqueta { display: block; font-size: .8rem; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; color: var(--muted, #6e6e73) }

/* O que veio de nós tem o fundo azul-claro e o do cliente tem fundo branco: é a
   mesma distinção que o e-mail faz, e é o que dispensa um rótulo "você"/"nós"
   repetido em cada bloco. */
.sp-conversa { display: flex; flex-direction: column; gap: 12px }
.sp-balao {
  padding: 16px 18px; border: 1px solid var(--line, #0000001a);
  border-radius: 14px; background: var(--surface-solid, #fff);
}
.sp-balao-nosso { border-color: rgba(0, 113, 227, .18); background: var(--light-blue, #eef5fc) }
.sp-balao-nosso .sp-balao-topo b { color: #0a3f78 }
.sp-balao-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: .86rem }
.sp-balao-topo .mk-meta { margin: 0; font-size: .78rem }
.sp-balao p { margin: 0; font-size: .9rem; line-height: 1.6 }
.sp-responder { margin-top: 18px }
.sp-responder .sp-acoes { justify-content: space-between; margin-top: 16px }

/* No telefone as duas colunas viram uma, e os dois botões do rodapé do chamado
   ocupam a linha inteira: lado a lado num aparelho estreito, "Está resolvido,
   pode fechar" quebra em três linhas e encosta no botão de enviar. */
@media (max-width: 720px) {
  .sp-topo { grid-template-columns: 1fr; gap: 18px }
  .sp-acoes { flex-direction: column; align-items: stretch }
  .sp-acoes .button { width: 100% }
  /* O aviso encolhe e vira UM parágrafo, sem título. Sem a coluna ao lado ele
     passa a ser a continuação do botão — e título mais duas frases separadas
     fazem dele uma seção, que é peso demais para uma nota que responde "e
     agora?". O título sai porque a primeira frase já o responde.

     No desenho ele fica DENTRO do cartão branco; aqui fica colado por baixo. É
     a mesma leitura a um traço de distância, e evita duplicar a marcação para
     dois tamanhos de tela — que é como uma das duas cópias envelhece sozinha. */
  .sp-depois { padding: 14px 16px; border-radius: 12px }
  .sp-depois h3 { display: none }
  .sp-depois p { display: inline; font-size: .84rem }
  .sp-depois p + p::before { content: ' ' }

  /* O cabeçalho do chamado encolhe: dois rem de título num aparelho de 390px
     ocupam três linhas antes de a conversa começar, e a conversa é o que a
     pessoa veio ler. */
  .sp-cabeca { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 18px }
  .sp-cabeca h1 { font-size: 1.4rem; line-height: 1.2; letter-spacing: -.03em; margin: 5px 0 0 }
  .sp-etiqueta { font-size: .74rem }
  .sp-conversa { gap: 10px }
  .sp-balao { padding: 14px 16px }
  .sp-balao p { font-size: .88rem }
  .sp-balao-topo { font-size: .82rem; align-items: baseline; margin-bottom: 6px }
  /* O PRINCIPAL EM CIMA, e é o único lugar onde a ordem dos dois se inverte.
     Lado a lado no computador, o de fechar vem antes porque a leitura vai da
     ação branda para a firme; empilhados no telefone, quem está com o polegar
     na tela alcança primeiro o de baixo — e o de baixo não pode ser o que
     encerra a conversa. */
  .sp-responder .sp-acoes { flex-direction: column-reverse; gap: 8px }
}

/* No telefone a tabela de chamados vira lista: código e ficha na primeira
   linha, assunto na segunda, data na terceira. Quatro colunas num aparelho de
   390px dariam ao assunto uma coluna de trinta pixels.

   A reordenação é por `order` e vale só aqui — a tabela do extrato tem quatro
   colunas com outros pesos, e a dela é dela. */
.sp-tabela { --cols: 110px 150px 1fr 150px }
@media (max-width: 720px) {
  .sp-tabela .tabela-cab { display: none }
  .sp-tabela .tabela-linha { grid-template-columns: 1fr auto; gap: 0 10px; row-gap: 3px }
  .sp-tabela .tabela-linha .sp-codigo { order: 1 }
  .sp-tabela .tabela-linha .sp-dir { order: 2 }
  .sp-tabela .tabela-linha span:nth-child(3) { order: 3; grid-column: 1 / -1; margin-top: 2px }
  .sp-tabela .tabela-linha .mk-meta { order: 4; grid-column: 1 / -1; margin: 0 }
}

/* O campo de texto longo, que o vocabulário de conta nunca teve.
   `.login-field` vestia `input` e `select` e parava aí — não por descuido, mas
   porque até aqui nenhuma tela do produto pedia um `textarea`. Sem esta regra
   ele saía com o desenho do navegador: monospace, 2px de recheio e a borda
   cinza do sistema, no meio de campos de 49px e raio 8.

   O raio é 8 e não 12, e é o mesmo caso da D-316: o canvas desenha 12, a folha
   diz 8, e numa coluna de campos a diferença lê-se como defeito. A altura vem
   do `rows` de cada tela — mensagem e resposta não têm o mesmo tamanho, e
   número fixo aqui obrigaria uma exceção lá. */
.login-field textarea {
  width: 100%; padding: 12px 13px; font-family: inherit; font-size: .92rem;
  line-height: 1.55; color: var(--text, #1d1d1f);
  border: 1px solid var(--line-strong, #00000029); border-radius: 8px;
  background: rgba(255, 255, 255, .94); resize: vertical;
}
.login-field textarea:focus { border-color: var(--accent, #0071e3); box-shadow: 0 0 0 3px rgba(37, 99, 235, .14) }

/* O anexo do chamado. A moldura é tracejada e não sólida: os vizinhos são
   campos que já têm valor, e a tracejada diz "ainda não há nada aqui" sem
   precisar de texto. */
.sp-opcional { font-weight: 400; color: var(--muted, #6e6e73) }
.sp-anexo {
  display: flex; align-items: center; flex-wrap: nowrap; gap: 10px;
  box-sizing: border-box; min-height: 49px; padding: 0 13px; cursor: pointer;
  border: 1px dashed var(--line-strong, #00000029); border-radius: 8px;
  background: rgba(255, 255, 255, .7);
}
.sp-anexo svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--muted, #6e6e73); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
/* O nome do arquivo escolhido ocupa a linha e é cortado no fim: nome de câmera
   — `PHOTO-2023-03-24-21-09-51.jpg` — é mais comprido do que a moldura, e
   deixá-lo quebrar faria o campo crescer de altura ao escolher um arquivo. */
.sp-anexo > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .9rem; color: var(--muted, #6e6e73) }
.sp-anexo-escolhido { color: var(--text, #1d1d1f) }

/* O anexo já mandado, dentro do balão a que pertence. Não é botão: é uma linha
   de texto com um clipe, porque um botão ali competiria com os dois do rodapé
   do chamado, que são as ações da tela. */
.sp-anexo-baixar {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;
  padding: 7px 11px; border: 1px solid var(--line, #0000001a); border-radius: 8px;
  background: var(--surface-solid, #fff); color: inherit; text-decoration: none;
  font-size: .84rem; max-width: 100%;
}
.sp-anexo-baixar:hover { border-color: var(--accent, #0071e3); color: var(--accent, #0071e3) }
.sp-anexo-baixar svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.sp-anexo-baixar > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.sp-anexo-baixar .mk-meta { margin: 0; flex: none; font-size: .78rem }

/* A página do botão de fechar que vem no e-mail. Ela é vista por quem pode não
   estar logado, então não há barra lateral para empurrá-la: o bloco se centra
   sozinho, como as telas de conta. */
.sp-fechar { margin-inline: auto }

/* O rodapé com o link para os documentos legais. Discreto de propósito: ele
   existe para cumprir a promessa dos termos — "todos ficam publicados e
   acessíveis a qualquer momento" —, e não para disputar atenção com o produto.
   Mora aqui, e não no `styles.css`, porque as duas molduras que o usam são as
   duas que carregam esta folha. */
.mk-rodape-legal { margin: 32px auto 12px; text-align: center; font-size: .78rem }
.mk-rodape-legal a { color: var(--tinta-fraca, #6e6e73); text-decoration: none }
.mk-rodape-legal a:hover { text-decoration: underline }