/* Cloudstorm Online — interface definitiva (etapa 6).
 * As cores, bordas e o contraste entre o fundo e os cartões são os da versão provisória,
 * escolhidos pelo dono em 27/10/2026. Mudar só com cuidado. */
:root {
  --fundo: #f4f6f9; --cartao: #ffffff; --texto: #1b2230; --suave: #5b6578; --borda: #dbe0e8;
  --primaria: #2563eb; --primaria-texto: #ffffff; --primaria-suave: #e8effe;
  --ok: #1a7f46; --ok-suave: #e5f5ec; --erro: #c02f22; --erro-suave: #fdecea; --alerta: #8a5a00; --alerta-suave: #fff5dc;
  --raio: 10px; --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --sombra-alta: 0 10px 30px rgba(16, 24, 40, .18);
  --topo: 56px; --fonte-editor: 16px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema=claro]) {
    --fundo: #12151b; --cartao: #1b2029; --texto: #e6e9ef; --suave: #9ba4b5; --borda: #2c333f;
    --primaria: #5b8cff; --primaria-texto: #0d1220; --primaria-suave: #1e2a45;
    --ok: #4fc283; --ok-suave: #15291f; --erro: #ff7a6b; --erro-suave: #34191a; --alerta: #e8b64c; --alerta-suave: #2f2614;
    --sombra: none; --sombra-alta: 0 10px 30px rgba(0, 0, 0, .5);
  }
}
:root[data-tema=escuro] {
  --fundo: #12151b; --cartao: #1b2029; --texto: #e6e9ef; --suave: #9ba4b5; --borda: #2c333f;
  --primaria: #5b8cff; --primaria-texto: #0d1220; --primaria-suave: #1e2a45;
  --ok: #4fc283; --ok-suave: #15291f; --erro: #ff7a6b; --erro-suave: #34191a; --alerta: #e8b64c; --alerta-suave: #2f2614;
  --sombra: none; --sombra-alta: 0 10px 30px rgba(0, 0, 0, .5);
  color-scheme: dark;
}
:root[data-tema=claro] { color-scheme: light; }

* { box-sizing: border-box; }
html, body { margin: 0; }
/* a barra de rolagem da página tem lugar reservado: o conteúdo (centralizado) não pula para o lado quando ela aparece ou some */
html { scrollbar-gutter: stable; }
html:has(body.modo-editor) { scrollbar-gutter: auto; }
body { background: var(--fundo); color: var(--texto); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--primaria); }
[hidden] { display: none !important; }
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
/* ícones de tema (etapa 18): o desenho vem do tema; a camada de fundo (duotone) fica mais clara */
.ic.ic-tema { stroke-width: 1.5; }
.ic-tema .ic-fundo { opacity: .5; }

/* ---------- topo ---------- */
.topo { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 18px; height: var(--topo); padding: 0 16px;
        background: var(--cartao); border-bottom: 1px solid var(--borda); }
.marca { display: flex; align-items: center; gap: 8px; color: var(--texto); text-decoration: none; font-size: 17px; white-space: nowrap; }
.marca .marca-icone { width: 28px; height: 28px; flex: none; }
.marca small { font-size: 12px; font-weight: 700; color: var(--primaria); letter-spacing: .04em; }
.nav-topo { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav-topo::-webkit-scrollbar { display: none; } /* nunca uma barra de rolagem que faça o topo pular */
.nav-topo a { display: flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 8px; color: var(--suave); text-decoration: none;
              font-weight: 600; font-size: 14px; white-space: nowrap; }
.nav-topo a:hover { color: var(--texto); background: var(--fundo); }
.nav-topo a.ativo { color: var(--primaria); background: var(--primaria-suave); }
.usuario-topo { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--suave); font-size: 14px; min-width: 0; }
.botao-icone { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; line-height: 0;
               background: transparent; color: var(--texto); border: 1px solid var(--borda); border-radius: 8px; font-weight: 400; }
.botao-icone:hover { background: var(--fundo); }
.botao-icone .ic { width: 19px; height: 19px; }
.sino-num { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
            background: var(--erro); color: #fff; font-size: 11px; line-height: 18px; font-weight: 700; }
.botao-conta { display: flex; align-items: center; gap: 8px; background: transparent; color: var(--texto); border: 1px solid transparent;
               padding: 3px 8px 3px 3px; border-radius: 999px; font-weight: 600; min-width: 0; }
.botao-conta:hover, .botao-conta[aria-expanded=true] { border-color: var(--borda); background: var(--fundo); }
.botao-conta .quem { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; font-size: 14px; }
@media (max-width: 760px) {
  .topo { gap: 8px; padding: 0 10px; }
  .marca span { display: none; }
  .botao-conta .quem { display: none; }
  .nav-topo a span { display: none; }
  .nav-topo a { padding: 7px 9px; }
}

/* menus e painéis que flutuam */
.flutuante { position: fixed; z-index: 60; background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio);
             box-shadow: var(--sombra-alta); padding: 6px; min-width: 220px; max-width: calc(100vw - 16px); }
.flutuante .cabeca-menu { padding: 8px 10px 10px; border-bottom: 1px solid var(--borda); margin-bottom: 4px; }
.item-menu, .item-menu.perigo { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 6px; background: none; border: 0;
             color: var(--texto); font: inherit; font-size: 14px; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; }
.item-menu:hover, .item-menu:focus-visible, .item-menu.perigo:hover { background: var(--fundo); outline: none; }
.item-menu.perigo { color: var(--erro); }
.item-menu .ic { color: var(--suave); }
.item-menu.perigo .ic { color: var(--erro); }
.separador { height: 1px; background: var(--borda); margin: 4px 0; }
.sino-painel { width: min(420px, calc(100vw - 16px)); max-height: min(72vh, 620px); overflow: auto; }
.sino-topo { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; }
.sino-painel .vazio-pequeno { padding: 8px 10px; }
.aviso { display: flex; gap: 10px; padding: 10px; border-radius: 8px; color: var(--texto); text-decoration: none; }
.aviso:hover { background: var(--fundo); }
.aviso.novo { background: var(--primaria-suave); }
.aviso-texto { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.aviso-citacao { color: var(--suave); border-left: 3px solid var(--borda); padding-left: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* avisos rápidos (toasts) */
.avisos-tela { position: fixed; right: 16px; bottom: 16px; z-index: 80; display: grid; gap: 8px; width: min(380px, calc(100vw - 32px)); }
/* 0.25.3: como popover (por cima das janelas), sem o visual padrão do navegador */
.avisos-tela[popover] { inset: auto 16px 16px auto; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; overflow: visible; }
.toast { display: flex; gap: 10px; align-items: flex-start; background: var(--cartao); border: 1px solid var(--borda); border-left: 4px solid var(--ok);
         border-radius: var(--raio); box-shadow: var(--sombra-alta); padding: 10px 12px; font-size: 14px; overflow-wrap: anywhere; }
.toast.erro { border-left-color: var(--erro); }
.toast.alerta { border-left-color: var(--alerta); }
.toast .ic { color: var(--ok); margin-top: 1px; }
.toast.erro .ic { color: var(--erro); }

/* janelas (dialog) */
dialog.janela { border: 1px solid var(--borda); border-radius: 14px; padding: 0; background: var(--cartao); color: var(--texto);
                width: min(520px, calc(100vw - 24px)); box-shadow: var(--sombra-alta); }
dialog.janela.larga { width: min(760px, calc(100vw - 24px)); }
dialog.janela::backdrop { background: rgba(10, 14, 22, .45); }
.janela-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--borda); }
.janela-cabeca h2 { margin: 0; }
.janela-corpo { padding: 18px 20px 20px; max-height: 70vh; overflow: auto; }

/* ---------- página ---------- */
.app { max-width: 1180px; margin: 0 auto; padding: 22px 16px 56px; }
.app.larga { max-width: 1440px; }
.carregando { color: var(--suave); text-align: center; margin-top: 15vh; }
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 24px; }
.cartao + .cartao { margin-top: 16px; }
.cartao.sem-margem { padding: 0; overflow: hidden; }
.cartao-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cartao-cabeca h2 { margin: 0; }
.cartao.sem-margem .cartao-cabeca { padding: 16px 20px; margin: 0; border-bottom: 1px solid var(--borda); }
.estreito { max-width: 440px; margin: 6vh auto 0; }
h1 { font-size: 22px; margin: 0 0 4px; letter-spacing: -.01em; }
h2 { font-size: 17px; margin: 0 0 12px; }
h3 { font-size: 15px; margin: 0 0 8px; }
.sub { color: var(--suave); margin: 0 0 20px; }
.conteudo { display: grid; gap: 16px; min-width: 0; }
/* as tabelas largas rolam dentro do próprio cartão, sem empurrar a página para os lados (celular) */
.conteudo > * { min-width: 0; }
.conteudo > .cartao + .cartao { margin-top: 0; }
.grade-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.grade-2 > .cartao + .cartao { margin-top: 0; }

.migalhas { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--suave); margin-bottom: 10px; }
.migalhas a { color: var(--suave); text-decoration: none; }
.migalhas a:hover { color: var(--primaria); text-decoration: underline; }
.migalhas .sep { opacity: .6; }
.cabecalho { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.cabecalho .titulos { flex: 1 1 280px; min-width: 0; }
.cabecalho h1 { overflow-wrap: anywhere; }
.cabecalho .linha-selos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--suave); font-size: 14px; }
.cabecalho .desc { margin: 8px 0 0; color: var(--suave); white-space: pre-line; overflow-wrap: anywhere; }

.estatisticas { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 18px; }
.estat { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
         background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 14px 16px; }
.estat .ic { grid-row: span 2; width: 22px; height: 22px; color: var(--primaria); }
.estat b { font-size: 21px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.estat span { color: var(--suave); font-size: 13px; }
/* 0.25.4: no celular os quadros de números ficam em 2 colunas (antes, 4 linhas ocupavam a tela antes da lista) */
@media (max-width: 760px) {
  .estatisticas:not(.compacta) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .estatisticas:not(.compacta) .estat { padding: 12px; column-gap: 10px; }
  .estatisticas:not(.compacta) .estat b { font-size: 19px; }
  .estatisticas:not(.compacta) .estat span { font-size: 12.5px; line-height: 1.35; }
}

.vazio { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 34px 16px; color: var(--suave); }
.vazio .ic { width: 42px; height: 42px; stroke-width: 1.5; color: var(--borda); }
.vazio b { color: var(--texto); font-size: 16px; }
.vazio p { margin: 0; max-width: 460px; }

/* ---------- formulários e botões ---------- */
form { display: grid; gap: 14px; }
label { display: grid; gap: 5px; font-weight: 600; font-size: 14px; }
label small { font-weight: 400; color: var(--suave); }
input, select, textarea { font: inherit; color: var(--texto); background: var(--fundo); border: 1px solid var(--borda); border-radius: 8px; padding: 9px 11px; }
input { width: 100%; }
select { width: auto; max-width: 100%; }
/* a lista que abre no <select> é do sistema: fundo firme e o texto do tema (no escuro também) */
select option, select optgroup { background-color: var(--cartao); color: var(--texto); }
label select, form > label select { width: 100%; }
textarea { width: 100%; resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--primaria); outline-offset: 1px; }
input[readonly] { color: var(--suave); }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--primaria); }
input[type=range] { padding: 0; accent-color: var(--primaria); }
.campo-erro { color: var(--erro); font-weight: 400; font-size: 13px; }
label.com-erro input, label.com-erro textarea, label.com-erro select { border-color: var(--erro); }
.caixa { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.caixa input { width: auto; }

button, .botao { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font: inherit; font-weight: 600; border: 1px solid transparent;
                 border-radius: 8px; padding: 9px 16px; cursor: pointer; background: var(--primaria); color: var(--primaria-texto); text-decoration: none; }
button.secundario, .botao.secundario { background: var(--cartao); color: var(--texto); border-color: var(--borda); }
button.secundario:hover, .botao.secundario:hover { background: var(--fundo); }
button.perigo { background: var(--erro); color: #fff; }
button.verde { background: var(--ok); color: #fff; }
button.link { background: none; border: 0; padding: 0; color: var(--primaria); font-weight: 500; }
button.fantasma { background: transparent; color: var(--texto); border-color: transparent; }
button.fantasma:hover { background: var(--fundo); }
button.pequeno, .botao.pequeno { padding: 5px 10px; font-size: 13px; }
button:disabled { opacity: .55; cursor: not-allowed; }
.acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.acoes.direita { justify-content: flex-end; }
.tecla { font: 600 11px/1 var(--mono); padding: 3px 5px; border-radius: 4px; border: 1px solid currentColor; opacity: .75; }

.msg { border-radius: 8px; padding: 10px 12px; font-size: 14px; overflow-wrap: anywhere; }
.msg.erro { background: var(--erro-suave); color: var(--erro); }
.msg.ok { background: var(--ok-suave); color: var(--ok); }
.msg.alerta { background: var(--alerta-suave); color: var(--alerta); }
.msg.info { background: var(--primaria-suave); color: var(--texto); }
.msg p { margin: 0 0 8px; }
code, .codigo { font-family: var(--mono); font-size: 13px; background: var(--fundo); border: 1px solid var(--borda); border-radius: 6px; padding: 1px 6px; }
.copiavel { display: flex; gap: 8px; }
.copiavel input { font-family: var(--mono); font-size: 13px; }
.copiavel button { white-space: nowrap; }
.busca { display: flex; gap: 8px; margin-bottom: 14px; }
.busca input { max-width: 420px; }
.resultado:not(:empty) { margin-bottom: 16px; }
.passos { margin: 0 0 18px; padding-left: 20px; color: var(--suave); }
.passos li + li { margin-top: 4px; }
.aviso-js { text-align: center; padding: 40px 16px; }

/* ---------- painéis com menu lateral (conta, administração) ---------- */
.painel { display: grid; grid-template-columns: 220px 1fr; gap: 22px; align-items: start; }
.menu { display: grid; gap: 2px; position: sticky; top: calc(var(--topo) + 16px); }
.menu a { display: flex; align-items: center; gap: 9px; padding: 8px 12px; color: var(--texto); text-decoration: none; font-weight: 500; border-radius: 8px; font-size: 14px; }
.menu a .ic { color: var(--suave); }
.menu a:hover { background: var(--cartao); }
.menu a.ativo { background: var(--primaria-suave); color: var(--primaria); }
.menu a.ativo .ic { color: var(--primaria); }
.menu .grupo { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); margin: 14px 12px 4px; }
.menu .grupo:first-child { margin-top: 0; }
@media (max-width: 760px) {
  .painel { grid-template-columns: 1fr; }
  /* 0.25.4: sem rolagem lateral escondida — o que não cabe vai para o botão Mais (abasComMais) */
  .menu { position: static; display: flex; overflow: hidden; gap: 4px; padding-bottom: 4px; scrollbar-width: none; }
  .menu::-webkit-scrollbar { display: none; }
  .menu .grupo { display: none; }
  .menu a { white-space: nowrap; }
  .menu > button.abas-mais:not([hidden]) { display: inline-flex; align-items: center; gap: 7px; flex: none; position: relative; padding: 8px 12px;
    background: none; color: var(--texto); border: 0; border-radius: 8px; font-weight: 500; font-size: 14px; white-space: nowrap; }
  .menu > button.abas-mais:hover { background: var(--cartao); }
  .menu > button.abas-mais .ic { color: var(--suave); }
  .menu > button.abas-mais .ponto-mais { width: 7px; height: 7px; border-radius: 50%; background: var(--erro); }
}
.menu > .aba-escondida { display: none !important; }
.menu > button.abas-mais { display: none; }

/* ---------- tabelas, linhas, etiquetas ---------- */
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { text-align: left; color: var(--suave); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.tabela th, .tabela td { padding: 10px 10px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover td { background: color-mix(in srgb, var(--fundo) 60%, transparent); }
.tabela td.direita, .tabela th.direita { text-align: right; white-space: nowrap; }
.tabela td.num, .tabela th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cartao.sem-margem .tabela th:first-child, .cartao.sem-margem .tabela td:first-child { padding-left: 20px; }
.cartao.sem-margem .tabela th:last-child, .cartao.sem-margem .tabela td:last-child { padding-right: 20px; }
.rolavel { overflow-x: auto; }
/* 0.25.4: dentro de tabelas, "quebrar em qualquer letra" deixava a coluna com uma letra de largura no celular
   (nome em pé, uma letra por linha). Aqui só quebra palavra grande demais; a tabela rola dentro do cartão. */
.tabela .pessoa > div, .tabela .no-linha, .tabela .nome-arquivo { overflow-wrap: break-word; }
.tabela td:has(> .pessoa) { min-width: 170px; }
.tabela-idiomas td > code { white-space: nowrap; }
.tabela-extrato td:nth-child(2) { min-width: 170px; } /* 0.25.4: "O quê" ficava uma palavra por linha no celular */
.etiqueta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 1px 9px;
            background: var(--fundo); border: 1px solid var(--borda); color: var(--suave); white-space: nowrap; }
.etiqueta.verde { background: var(--ok-suave); color: var(--ok); border-color: transparent; }
.etiqueta.vermelha { background: var(--erro-suave); color: var(--erro); border-color: transparent; }
.etiqueta.azul { background: var(--primaria-suave); color: var(--primaria); border-color: transparent; }
.etiqueta.amarela { background: var(--alerta-suave); color: var(--alerta); border-color: transparent; }
.suave { color: var(--suave); }
.pequeno { font-size: 13px; }
.contador { display: inline-block; margin-left: 6px; min-width: 20px; padding: 0 6px; border-radius: 999px; font-size: 12px; line-height: 18px; text-align: center;
            background: var(--fundo); color: var(--suave); border: 1px solid var(--borda); font-weight: 700; }
.contador.vermelho { background: var(--erro); color: #fff; border-color: transparent; }

.linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--borda); }
.linha:last-child { border-bottom: 0; }
.linha.bloco { align-items: flex-start; flex-wrap: wrap; }
.linha .acoes { flex-wrap: wrap; justify-content: flex-end; }
.linha .acoes input { width: 220px; }
@media (max-width: 560px) { .linha { flex-wrap: wrap; } .linha .acoes { justify-content: flex-start; } }

.avatar { width: var(--tam, 36px); height: var(--tam, 36px); border-radius: 50%; object-fit: cover; flex: none; background: var(--fundo); border: 1px solid var(--borda); }
.avatar.quadrado { border-radius: 22%; }
.avatar.iniciais { display: inline-grid; place-items: center; font-weight: 700; font-size: calc(var(--tam, 36px) * .38); line-height: 1;
                   background: var(--primaria-suave); color: var(--primaria); border-color: transparent; }
.pessoa { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pessoa > div { min-width: 0; overflow-wrap: anywhere; }
.seletor-foto { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.citacao { margin: 6px 0 0 46px; padding-left: 10px; border-left: 3px solid var(--borda); color: var(--suave); font-size: 14px; white-space: pre-line; overflow-wrap: anywhere; }
.historico-pedidos { margin-top: 14px; display: grid; gap: 4px; }

/* abas */
/* A linha de baixo é uma sombra por dentro da barra (e não uma borda com as abas descendo 1 px por cima dela):
   assim nada passa da altura da barra e o navegador não cria uma rolagem vertical de 1 px.
   A rolagem lateral continua para quando as abas não cabem (celular). */
.abas { display: flex; gap: 2px; box-shadow: inset 0 -1px 0 var(--borda); overflow-x: auto; overflow-y: hidden;
        scrollbar-width: none; margin-bottom: 18px; }
/* a faixa de abas rola para o lado sem mostrar barra (rodinha, toque ou arrastar; o item ativo aparece sozinho) */
.abas::-webkit-scrollbar { display: none; }
.abas button { display: inline-flex; align-items: center; gap: 7px; background: none; color: var(--suave); border: 0; border-radius: 8px 8px 0 0;
               border-bottom: 2px solid transparent; white-space: nowrap; padding: 10px 12px; }
.abas button:hover { color: var(--texto); }
.abas button.ativo { color: var(--primaria); border-bottom-color: var(--primaria); }

/* cartões de organização e projeto */
.grade-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
/* 0.25.4: busca e ordem da lista de projetos */
.projetos-com-busca { display: grid; gap: 14px; min-width: 0; }
.barra-projetos { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.barra-projetos .busca-arvore { max-width: 360px; }
.ordem-projetos { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.grade-cartoes > .vazio-busca { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .barra-projetos .busca-arvore { flex-basis: 100%; max-width: none; }
}
.cartao-item { display: grid; gap: 10px; align-content: start; background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio);
               box-shadow: var(--sombra); padding: 16px; color: var(--texto); text-decoration: none; min-width: 0; }
a.cartao-item:hover, .cartao-item.clicavel:hover { border-color: var(--primaria); }
.cartao-item .topo-item { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cartao-item .nome { font-weight: 650; overflow-wrap: anywhere; }
.cartao-item .desc { margin: 0; color: var(--suave); font-size: 14px; white-space: pre-line; overflow-wrap: anywhere;
                     display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cartao-item .rodape-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.org-link { display: flex; align-items: center; gap: 12px; color: var(--texto); text-decoration: none; min-width: 0; }
.org-link:hover .org-nome { color: var(--primaria); }
.org-nome { font-weight: 600; overflow-wrap: anywhere; }
.org-desc { margin: 0; color: var(--suave); font-size: 14px; white-space: pre-line; overflow-wrap: anywhere; }
.par-idiomas { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--suave); }
.par-idiomas code { font-size: 12px; padding: 0 5px; }

/* barra de progresso */
.barra { position: relative; height: 6px; border-radius: 999px; background: var(--fundo); border: 1px solid var(--borda); overflow: hidden; min-width: 80px; }
.barra span { position: absolute; left: 0; top: 0; bottom: 0; width: 0; }
.barra-trad { background: var(--primaria); opacity: .45; }
.barra-aprov { background: var(--ok); }
.progresso { display: grid; gap: 4px; }
.progresso .numeros { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--suave); font-variant-numeric: tabular-nums; }
.legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--suave); }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.legenda .l-trad { background: var(--primaria); opacity: .45; }
.legenda .l-aprov { background: var(--ok); }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { background: var(--cartao); color: var(--texto); border: 1px solid var(--borda); border-radius: 999px; padding: 4px 12px; font-weight: 500; font-size: 13px; }
.chip:hover { border-color: var(--primaria); }
.chip.ativo { background: var(--primaria-suave); color: var(--primaria); border-color: var(--primaria); }
.instrucoes { white-space: pre-line; }
.col-progresso { width: 28%; min-width: 160px; }

.problema-item { display: grid; gap: 6px; padding: 14px 20px; border-bottom: 1px solid var(--borda); color: var(--texto); text-decoration: none; }
.problema-item:last-child { border-bottom: 0; }
.problema-item:hover { background: var(--fundo); }
.frase-citada { background: var(--fundo); border: 1px solid var(--borda); border-radius: 6px; padding: 6px 10px; font-size: 14px; overflow-wrap: anywhere; }
.mencao { color: var(--primaria); font-weight: 600; }
.mencao.eu { background: var(--primaria-suave); border-radius: 4px; padding: 0 3px; }

/* ---------- editor ---------- */
body.modo-editor .app { max-width: none; padding: 0; }
.editor { display: grid; grid-template-rows: auto 1fr; height: calc(100vh - var(--topo)); height: calc(100dvh - var(--topo)); }
.ed-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 14px; background: var(--cartao); border-bottom: 1px solid var(--borda); }
.ed-barra .voltar { display: inline-flex; align-items: center; gap: 6px; color: var(--texto); text-decoration: none; font-weight: 600; max-width: 260px; min-width: 0; }
.ed-barra .voltar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-barra .voltar:hover { color: var(--primaria); }
.ed-barra .sep { width: 1px; height: 24px; background: var(--borda); }
.ed-barra select { padding: 6px 10px; max-width: 240px; }
/* círculos de progresso (editor, e tabelas no celular) */
.circulo-progresso { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; padding: 0; border: 0; background: none;
  border-radius: 50%; color: var(--texto); font: inherit; }
button.circulo-progresso { cursor: pointer; }
button.circulo-progresso:hover .circulo-trilho { stroke: color-mix(in srgb, var(--borda) 60%, var(--suave)); }
.circulo-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.circulo-trilho { fill: none; stroke: var(--borda); stroke-width: 3; }
.circulo-arco { fill: none; stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset .6s cubic-bezier(.2, .8, .2, 1); }
.circulo-progresso.trad .circulo-arco { stroke: color-mix(in srgb, var(--primaria) 72%, #fff); }
.circulo-progresso.aprov .circulo-arco { stroke: var(--ok); }
.circulo-num { position: relative; font-size: 9.5px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.circulo-progresso.trad .circulo-num { color: color-mix(in srgb, var(--primaria) 85%, var(--texto)); }
.circulo-progresso.aprov .circulo-num { color: var(--ok); }
.circulo-progresso.completo .circulo-num { font-size: 8.5px; letter-spacing: -.05em; }
.ed-circulos { display: flex; align-items: center; gap: 6px; margin-right: 6px; }
.circulos { display: inline-flex; align-items: center; gap: 6px; }
.ed-barra .direita { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.ed-corpo { display: grid; grid-template-columns: 360px minmax(0, 1fr) 380px; min-height: 0; }
.ed-corpo > *, .bancada-in, .bancada-in > * { min-width: 0; }
.ed-lista { display: grid; grid-template-rows: auto 1fr auto; min-height: 0; border-right: 1px solid var(--borda); background: var(--cartao); }
.ed-lista-cabeca { display: grid; gap: 8px; padding: 10px; border-bottom: 1px solid var(--borda); }
.ed-lista-cabeca input, .ed-lista-cabeca select { padding: 7px 10px; font-size: 14px; }
.ed-lista-cabeca select { width: 100%; }
.ed-contagem { display: flex; justify-content: space-between; font-size: 12px; color: var(--suave); font-variant-numeric: tabular-nums; }
.ed-frases { overflow-y: auto; min-height: 0; }
.ed-frases:focus { outline: none; }
.lin { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 8px; padding: 9px 10px 9px 0; border-bottom: 1px solid var(--borda);
       border-left: 4px solid var(--borda); cursor: pointer; font-size: 14px; }
.lin:hover { background: var(--fundo); }
.lin.st-traduzida { border-left-color: var(--primaria); }
.lin.st-aprovada { border-left-color: var(--ok); }
.lin.st-rascunho { border-left-color: var(--alerta); }
.lin.sel { background: var(--primaria-suave); }
.lin-num { text-align: right; color: var(--suave); font-size: 12px; font-variant-numeric: tabular-nums; padding-top: 1px; }
.lin-textos { display: grid; gap: 3px; min-width: 0; }
.lin-orig, .lin-trad { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.lin-trad { color: var(--primaria); }
.lin.st-aprovada .lin-trad { color: var(--ok); }
.lin.st-rascunho .lin-trad { color: var(--alerta); }
.lin-trad.vazia { color: var(--suave); font-style: italic; }
.compacta .lin-orig, .compacta .lin-trad { -webkit-line-clamp: 1; }
.lin-selos { display: grid; gap: 2px; justify-items: end; align-content: start; }
.selo { font-size: 12px; white-space: nowrap; color: var(--suave); }
.selo.problema { color: var(--erro); font-weight: 600; }
.ed-paginas { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--borda); font-size: 13px; }
.ed-vazio { padding: 18px; color: var(--suave); }

.bancada { overflow-y: auto; min-height: 0; padding: 18px 22px 40px; }
.bancada-in { max-width: 860px; margin: 0 auto; display: grid; gap: 14px; }
.bancada-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bancada-topo .pos { font-weight: 700; font-variant-numeric: tabular-nums; }
.bancada-topo .direita { margin-left: auto; display: flex; gap: 6px; }
.bloco-texto { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); }
.bloco-texto .bt-cabeca { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--borda); font-size: 13px; color: var(--suave); }
.bloco-texto .bt-cabeca .grow { flex: 1; min-width: 0; }
.bloco-texto .bt-corpo { padding: 12px 14px; }
.texto-original { font-size: var(--fonte-editor); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.bloco-texto.tradu { border-color: var(--primaria); box-shadow: 0 0 0 1px var(--primaria); }
.bloco-texto.tradu.travada { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok); }
textarea.caixa-traducao { display: block; width: 100%; border: 0; border-radius: 0; background: transparent; resize: none; min-height: 84px;
                           font-size: var(--fonte-editor); line-height: 1.55; padding: 12px 14px; overflow: hidden; }
textarea.caixa-traducao:focus { outline: none; }
textarea.caixa-traducao[readonly] { color: var(--suave); }
.nota-trava { padding: 8px 12px; border-top: 1px solid var(--borda); font-size: 13px; color: var(--ok); background: var(--ok-suave); display: flex; gap: 8px; align-items: center; }
/* etapa 24: frase aprovada que recebe sugestões */
.nota-sugestao { color: var(--primaria); background: var(--primaria-suave); }
mark.termo-marca { background: none; color: inherit; border-bottom: 2px dotted var(--primaria); cursor: help; }
mark.var-marca { background: var(--alerta-suave); color: var(--alerta); border-radius: 4px; padding: 0 2px; font-family: var(--mono); font-size: .92em; }
/* arquivos de jogo (.msbt): etiquetas clicáveis, cor de amostra, nome da mensagem e várias linhas */
button.var-marca { background: var(--alerta-suave); color: var(--alerta); border: 0; border-radius: 4px; padding: 0 2px; margin: 0; font: inherit;
  font-family: var(--mono); font-size: .92em; line-height: inherit; cursor: pointer; }
button.var-marca:hover { outline: 1px solid var(--alerta); }
button.var-marca:focus-visible { outline: 2px solid var(--primaria); outline-offset: 1px; }
.amostra-cor { display: inline-block; width: .8em; height: .8em; border-radius: 2px; margin-right: 3px; vertical-align: -1px; box-shadow: 0 0 0 1px var(--borda); }
.lin-rotulo { font: 11px/1.3 var(--mono); color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor-jogo .lin-orig, .editor-jogo .lin-trad { white-space: pre-wrap; -webkit-line-clamp: 3; }
.editor-jogo .compacta .lin-orig, .editor-jogo .compacta .lin-trad { -webkit-line-clamp: 1; }
.rotulo-msg { font-size: 12px; padding: 0 5px; overflow-wrap: anywhere; }
.termos-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.termos-chips button { background: var(--primaria-suave); color: var(--texto); border: 1px solid transparent; border-radius: 999px; padding: 3px 10px; font-weight: 400; font-size: 13px; }
.termos-chips button:hover { border-color: var(--primaria); }
.termos-chips b { color: var(--primaria); }
.verificacoes { display: grid; gap: 6px; }
.verif { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; padding: 7px 10px; border-radius: 8px; background: var(--primaria-suave); }
.verif.aviso-q { background: var(--alerta-suave); color: var(--alerta); }
.conflito { display: grid; gap: 8px; }
.caixa-instrucoes summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--primaria); }
.caixa-instrucoes p { margin: 8px 0 0; white-space: pre-line; color: var(--suave); font-size: 14px; }
.caixa-instrucoes { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 14px; }

.assistente { display: grid; grid-template-rows: auto 1fr; min-height: 0; border-left: 1px solid var(--borda); background: var(--cartao); }
.assistente .abas { margin: 0; padding: 0 8px; }
.assistente .abas button { padding: 11px 8px; gap: 5px; font-size: 13.5px; }
.assistente .abas button .ic { width: 16px; height: 16px; }
.assistente-corpo { overflow-y: auto; min-height: 0; padding: 14px; }
.sugestao { display: flex; gap: 10px; width: 100%; text-align: left; background: var(--fundo); color: var(--texto); border: 1px solid var(--borda);
            border-radius: 8px; padding: 9px 10px; margin-bottom: 8px; font-weight: 400; align-items: flex-start; }
.sugestao:hover { border-color: var(--primaria); }
.sug-textos { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; flex: 1; }
.sug-destino { font-weight: 600; }
.sug-n { flex: none; font: 600 11px/1 var(--mono); color: var(--suave); padding-top: 4px; }
.pct { flex: none; font-weight: 700; font-size: 12px; border-radius: 6px; padding: 2px 6px; height: fit-content; background: var(--alerta-suave); color: var(--alerta); }
.pct.pct-alta { background: var(--primaria-suave); color: var(--primaria); }
.pct.pct-100 { background: var(--ok-suave); color: var(--ok); }
.hist-item { padding: 8px 0; border-bottom: 1px solid var(--borda); overflow-wrap: anywhere; }
.hist-item:last-child { border-bottom: 0; }
.termo { display: grid; gap: 2px; width: 100%; text-align: left; background: var(--fundo); color: var(--texto); border: 1px solid var(--borda);
         border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; font-weight: 400; }
.termo:hover { border-color: var(--primaria); }
.comentario { padding: 10px 0; border-bottom: 1px solid var(--borda); display: grid; gap: 6px; overflow-wrap: anywhere; }
.comentario.problema { border-left: 3px solid var(--erro); padding-left: 10px; }
.comentario.resolvido { border-left: 3px solid var(--ok); padding-left: 10px; }
.comentario.apagado { font-style: italic; }
.comentario-cabeca { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.comentario-texto { white-space: pre-wrap; }
.comentario-acoes button.link { font-size: 13px; }
.nova-conversa { margin-top: 12px; }
label.sem-rotulo { position: relative; }
.mencoes-lista { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: var(--cartao); border: 1px solid var(--borda);
                 border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.15); padding: 4px; }
.mencao-opcao { display: flex; align-items: center; gap: 6px; width: 100%; background: none; color: var(--texto); text-align: left; font-weight: 400; padding: 6px 8px; justify-content: flex-start; }
.mencao-opcao.ativa, .mencao-opcao:hover { background: var(--primaria-suave); }
.atalhos { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; align-items: center; font-size: 14px; }
.atalhos .tecla { justify-self: start; opacity: 1; color: var(--texto); border-color: var(--borda); background: var(--fundo); padding: 4px 7px; }
.so-estreito { display: none !important; }

@media (max-width: 1240px) {
  .ed-corpo { grid-template-columns: 320px minmax(0, 1fr); }
  .assistente { grid-column: 2; border-left: 0; border-top: 1px solid var(--borda); }
  .ed-corpo { grid-template-rows: minmax(0, 1fr) minmax(0, 42%); }
  .ed-lista { grid-row: span 2; }
}
@media (max-width: 860px) {
  .editor { height: auto; }
  .ed-corpo { grid-template-columns: 1fr; grid-template-rows: none; }
  .ed-lista { grid-row: auto; max-height: 60vh; border-right: 0; border-bottom: 1px solid var(--borda); }
  .ed-corpo.so-bancada .ed-lista { display: none; }
  .ed-corpo:not(.so-bancada) .bancada, .ed-corpo:not(.so-bancada) .assistente { display: none; }
  .assistente { grid-column: auto; }
  .assistente-corpo { max-height: none; }
  .so-estreito { display: inline-flex !important; }
  .ed-barra .esconder-estreito { display: none; }
  .bancada { padding: 14px; }
  .ed-corpo { grid-template-columns: minmax(0, 1fr); }
  .ed-barra { gap: 8px; padding: 8px 10px; }
  .ed-barra .voltar { flex: 1 1 100%; max-width: none; }
  .ed-barra select { flex: 1 1 140px; min-width: 0; max-width: none; }
  .ed-barra .escolha-menu { flex: 1 1 140px; min-width: 0; max-width: none; }
  .ed-barra .direita { flex-wrap: wrap; justify-content: flex-end; }
  .ed-circulos { margin-right: 2px; }
  .bt-cabeca { flex-wrap: wrap; }
}

/* complementos */
.cartao.destaque { border-color: var(--primaria); }
.cartao.perigo-borda { border-color: var(--erro); }
.msg.recuado { margin: 14px 20px; }
h1.com-espaco { margin-top: 18px; }
.confirmar-texto { margin: 0 0 16px; }
.ajustes-ed { display: grid; gap: 2px; min-width: 260px; }
.item-menu.coluna { flex-direction: column; align-items: stretch; gap: 6px; cursor: default; }
.item-menu.caixa { cursor: pointer; }
.estat b { color: var(--texto); }
.assistente .abas .ic { display: none; }

/* ---------- etapa 7: atividade do projeto ---------- */
.filtros-atividade { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; color: var(--suave); }
.filtros-atividade select { padding: 7px 10px; font-size: 14px; background: var(--cartao); }
.linha-tempo { position: relative; display: grid; gap: 10px; padding-left: 22px; }
.linha-tempo::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: var(--borda); border-radius: 2px; }
.linha-tempo > .cartao { margin-top: 0; }
.dia { position: relative; margin: 10px 0 2px -22px; }
.dia span { display: inline-block; background: var(--cartao); border: 1px solid var(--borda); border-radius: 999px; padding: 3px 12px;
            font-size: 13px; font-weight: 600; box-shadow: var(--sombra); }
.dia:first-child { margin-top: 0; }
.atividade { position: relative; }
.atividade::before { content: ""; position: absolute; left: -18px; top: 22px; width: 10px; height: 10px; border-radius: 50%;
                     background: var(--cartao); border: 2px solid var(--borda); }
.atividade-cabeca { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.atividade-cabeca.clicavel { cursor: pointer; }
.atividade-cabeca.clicavel:hover { background: color-mix(in srgb, var(--fundo) 55%, transparent); }
.atividade-icone { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--primaria-suave); color: var(--primaria); flex: none; }
.atividade-icone .ic { width: 14px; height: 14px; }
.atividade-texto { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.atividade-texto .etiqueta { margin-left: 6px; }
.citado { font-style: italic; }
.riscado, .riscado td { text-decoration: line-through; opacity: .65; }
.atividade-cabeca .hora { white-space: nowrap; font-variant-numeric: tabular-nums; }
.atividade-cabeca .link { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.botao-icone.fantasma { border-color: transparent; width: 30px; height: 30px; }
.botao-icone .ic { transition: transform .15s ease; }
.botao-icone.girado .ic { transform: rotate(180deg); }
.atividade-detalhe { border-top: 1px solid var(--borda); }
.atividade-detalhe .tabela td a { color: var(--texto); }
.atividade-detalhe .tabela td a:hover { color: var(--primaria); }
.atividade-detalhe del { color: var(--erro); }
.acoes.centro { justify-content: center; margin-top: 16px; }
@media (max-width: 640px) { .atividade-cabeca { flex-wrap: wrap; } .atividade-texto { flex-basis: calc(100% - 80px); } }

/* ---------- etapa 7: cópias de segurança ---------- */
.passos-tarefa { margin: 0 0 12px; padding-left: 4px; list-style: none; font-size: 14px; display: grid; gap: 3px; }
.passos-tarefa li.erro { color: var(--erro); }
.instrucoes-cron { margin-top: 6px; }
.instrucoes-cron summary { cursor: pointer; font-weight: 600; color: var(--primaria); margin-bottom: 10px; }
.instrucoes-cron .passos { color: var(--texto); }
.instrucoes-cron .copiavel { margin-bottom: 10px; }
.grande { font-size: 20px; font-variant-numeric: tabular-nums; }
.barra-espaco { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--fundo); border: 1px solid var(--borda); margin-bottom: 10px; }
.barra-espaco .parte { display: block; height: 100%; }
.p0 { background: var(--primaria); }
.p1 { background: var(--ok); }
.p2 { background: var(--alerta); }
.p3 { background: var(--suave); }
.legenda i.p0, .legenda i.p1, .legenda i.p2, .legenda i.p3 { opacity: 1; }
.cartao h2 .ic { vertical-align: -3px; }
.grade-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.recuado-texto { padding: 12px 20px; margin: 0; border-top: 1px solid var(--borda); }
.etiqueta .ic { width: 12px; height: 12px; }
.grade-campos { align-items: end; }

/* ---------- etapa 8: cargos e permissões ---------- */
.perm-editor { display: grid; gap: 12px; }
.perm-grupo { border: 1px solid var(--borda); border-radius: var(--raio); padding: 6px 14px 10px; margin: 0; min-width: 0; }
.perm-grupo legend { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); font-weight: 700; padding: 0 6px; }
.perm-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--borda); font-weight: 500; }
.perm-linha:last-child { border-bottom: 0; }
label.perm-linha { justify-content: flex-start; }
.perm-rotulo { display: grid; gap: 2px; font-weight: 500; }
.perm-rotulo small, .tabela-perm small { display: block; font-weight: 400; color: var(--suave); font-size: 12px; }
.perm-limite { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.perm-limite .caixa { white-space: nowrap; }
.perm-limite .caixa { font-size: 14px; }
input.num-curto { width: 90px; }
.tabela-perm .grupo-linha th, .tabela .grupo-linha th { background: var(--fundo); color: var(--suave); }
.tabela-perm td:first-child { min-width: 220px; }
.tabela-perm b.ajustado { color: var(--primaria); }
.link-voltar { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; margin-bottom: 12px; text-decoration: none; }
a.link-pessoa { color: var(--texto); text-decoration: none; }
a.link-pessoa:hover { color: var(--primaria); }
.cargo-linha .cargo-info { flex: 1 1 300px; min-width: 0; }
.cargo-titulo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 16px; }
.cargo-linha > .acoes { flex: none; }
.cargo-linha .cargo-info p { margin: 4px 0; }
.cargo-linha .cargo-info .desc { color: var(--texto); }
.msg .ic { vertical-align: -4px; }
@media (max-width: 560px) {
  .perm-linha { flex-direction: column; align-items: flex-start; }
  .busca { flex-wrap: wrap; }
}

/* ---------- etapa 10: capas das organizações (cartões no estilo da lista de servidores do Discord) ---------- */
.titulo-secao { margin: 4px 0 12px; }
.grade-orgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.cartao-org { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; color: var(--texto); text-decoration: none;
              background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra);
              transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
a.cartao-org[href]:hover { transform: translateY(-2px); border-color: var(--primaria); box-shadow: var(--sombra-alta); }
a.cartao-org[href]:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; }
.cartao-org-capa { aspect-ratio: 2 / 1; overflow: hidden; background: var(--fundo); border-bottom: 1px solid var(--borda); }
.cartao-org-img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
a.cartao-org[href]:hover .cartao-org-img { transform: scale(1.04); }
.cartao-org-corpo { position: relative; display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 34px 14px 14px; min-width: 0; }
.cartao-org-icone { position: absolute; top: -28px; left: 14px; box-shadow: 0 0 0 4px var(--cartao); }
.cartao-org-nome { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 16px; line-height: 1.3; min-width: 0; }
.cartao-org-nome > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selo-membro { display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--ok); color: #fff; }
.selo-membro .ic { width: 12px; height: 12px; stroke-width: 3; }
.cartao-org .desc { margin: 0; color: var(--suave); font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere;
                    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cartao-org-rodape { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; margin-top: auto; padding-top: 10px;
                     font-size: 12.5px; color: var(--suave); font-variant-numeric: tabular-nums; }
.cartao-org-rodape > span { display: inline-flex; align-items: center; }
.cartao-org-rodape > .etiqueta { margin-left: auto; }
.ponto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--suave); opacity: .8; flex: none; }
.ponto.verde { background: #23a55a; opacity: 1; }
.cartao-org.previa { box-shadow: none; pointer-events: none; }

/* sem capa: degradê com a cor da organização (não ocupa espaço no servidor) */
.sem-capa { background:
  radial-gradient(90% 120% at 0% 0%, hsl(var(--m1) 85% 66% / .9), transparent 60%),
  radial-gradient(80% 120% at 100% 100%, hsl(var(--m2) 80% 50% / .9), transparent 60%),
  repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 14px),
  linear-gradient(135deg, hsl(var(--m1) 62% 42%), hsl(var(--m2) 58% 30%)); }

/* topo da página da organização */
.org-topo { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; margin-bottom: 18px; }
.org-banner { position: relative; aspect-ratio: 4 / 1; width: 100%; overflow: hidden; background: var(--fundo); border-bottom: 1px solid var(--borda); }
.org-banner-img { display: block; width: 100%; height: 100%; object-fit: cover; }
button.org-banner-botao { position: absolute; right: 12px; bottom: 12px; background: rgba(12, 15, 22, .62); color: #fff;
                          border: 1px solid rgba(255, 255, 255, .28); backdrop-filter: blur(6px); }
button.org-banner-botao:hover { background: rgba(12, 15, 22, .8); }
.org-topo-corpo { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; padding: 0 20px 18px; }
.org-topo-icone { position: relative; z-index: 1; margin-top: -40px; box-shadow: 0 0 0 5px var(--cartao); }
.org-topo-corpo .titulos { flex: 1 1 280px; min-width: 0; padding-top: 14px; }
.org-topo-corpo h1 { margin: 0 0 4px; overflow-wrap: anywhere; }
.org-topo-corpo .linha-selos { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; color: var(--suave); font-size: 14px; }
.org-topo-corpo .linha-selos > span { display: inline-flex; align-items: center; }
.org-topo-corpo .desc { margin: 10px 0 0; color: var(--suave); white-space: pre-line; overflow-wrap: anywhere; }
.org-topo-corpo > .acoes { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 16px; }

/* configurações e janela de recorte */
.config-capa { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.config-capa-previa { width: 280px; max-width: 100%; }
.config-capa > .acoes { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.recorte { display: flex; justify-content: center; background: repeating-conic-gradient(var(--fundo) 0 25%, var(--cartao) 0 50%) 0 0 / 20px 20px;
           border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; }
.recorte.estreito { max-width: 340px; margin: 0 auto; }
.recorte-tela { display: block; width: 100%; height: auto; cursor: grab; touch-action: none; }
.recorte-tela.arrastando { cursor: grabbing; }
.recorte-tela:focus-visible { outline: 2px solid var(--primaria); outline-offset: -2px; }
.recorte-zoom { display: flex; align-items: center; gap: 10px; margin: 12px auto 4px; max-width: 420px; color: var(--suave); }
.recorte-zoom input { flex: 1; accent-color: var(--primaria); }
.recorte-zoom .ic.pequeno { width: 14px; height: 14px; }
.recorte-rodape { display: flex; align-items: flex-start; gap: 16px; margin: 8px 0 4px; }
.recorte-rodape > p { flex: 1; margin: 22px 0 0; }
.recorte-previa { display: grid; gap: 6px; width: 220px; flex: none; }
.recorte-previa .cartao-org-corpo { padding-top: 30px; }
.recorte-previa .cartao-org-icone { --tam: 44px !important; top: -24px; }
.recorte-previa canvas { display: block; }

@media (max-width: 560px) {
  .org-banner { aspect-ratio: 2 / 1; }
  .org-topo-corpo { padding: 0 14px 14px; gap: 12px; }
  .org-topo-icone { --tam: 72px !important; margin-top: -30px; }
  .recorte-rodape { flex-direction: column; }
  .recorte-rodape > p { margin-top: 0; }
  .org-topo-corpo .titulos { padding-top: 4px; flex-basis: 100%; }
  .org-topo-corpo > .acoes { padding-top: 0; }
}

/* ---------- planos e limites das organizações (etapa 11) ---------- */
.medidor { height: 8px; border-radius: 999px; background: var(--fundo); border: 1px solid var(--borda); overflow: hidden; min-width: 80px; }
.medidor span { display: block; height: 100%; width: 0; background: var(--primaria); border-radius: 999px; }
.medidor.alto span { background: var(--alerta); }
.medidor.cheio span { background: var(--erro); }
.medidor.grande { height: 14px; margin: 4px 0 6px; }
.uso-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.uso-numeros > div { display: grid; gap: 2px; min-width: 0; }
.uso-numeros b { font-size: 24px; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.uso-numeros span { color: var(--suave); font-size: 13px; }
.uso-numeros .esgotado b { color: var(--erro); }
.uso-legenda { margin: 0 0 12px; }
.texto-erro { color: var(--erro); }
.texto-ok { color: var(--ok); }
.lista-limites { display: grid; margin-bottom: 10px; }
.limite-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto 110px; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--borda); }
.limite-linha:last-child { border-bottom: 0; }
.limite-rotulo { font-weight: 500; }
.limite-valor { font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.chips-uso { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-uso { font-size: 12px; background: var(--fundo); border: 1px solid var(--borda); border-radius: 999px; padding: 1px 9px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chip-uso code { font-size: 11px; color: var(--suave); }
.col-uso { min-width: 150px; }
.col-uso .medidor { margin-bottom: 4px; }
.nao-quebra { white-space: nowrap; }
.plano-limites { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 14px; margin: 0 0 14px; font-size: 14px; }
.plano-limites dt { color: var(--suave); }
.plano-limites dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.plano-limites dd.suave { font-weight: 400; }
.num-medio { width: 140px; }
.linha-plano { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.linha-plano select { min-width: 180px; }
.uso-admin { border-top: 1px solid var(--borda); margin-top: 16px; padding-top: 14px; }
.uso-admin h3 { margin: 0 0 4px; font-size: 15px; }
.uso-admin .acoes { margin-top: 10px; }
.saldo-envio { margin-bottom: 14px; }
.acoes.recuado { padding: 12px 20px; }
.acoes.direita.recuado > .suave { margin-right: auto; }
@media (max-width: 560px) {
  .uso-numeros b { font-size: 19px; }
  .limite-linha { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .limite-linha .medidor { grid-column: 1 / -1; }
  .linha-plano { width: 100%; }
  .linha-plano select { flex: 1; min-width: 0; }
}

/* ---------- etapa 12: página do projeto com menu lateral, pastas e arquivos ---------- */
.painel-projeto { grid-template-columns: 210px minmax(0, 1fr); }
.menu-projeto a .grow { flex: 1; min-width: 0; }
.menu-projeto a .contador { margin-left: auto; }
@media (max-width: 760px) { .painel-projeto { grid-template-columns: minmax(0, 1fr); } }
.cartao-dica { padding: 12px 20px 0; margin: 0; }
.sem-margem { margin: 0; }
.link-voltar.sem-margem { margin: 0; }
.tabela tr.clicavel { cursor: pointer; }
.nome-idioma { display: inline-flex; align-items: center; gap: 8px; color: var(--texto); text-decoration: none; }
.nome-idioma .ic { color: var(--suave); }
.nome-idioma:hover { color: var(--primaria); }
.titulo-idioma { display: grid; gap: 2px; }
.titulo-idioma h2 code { font-weight: 500; color: var(--suave); }
.resumo-idioma { display: grid; gap: 4px; padding: 14px 20px; border-bottom: 1px solid var(--borda); }

/* barra de busca da árvore */
.barra-arvore { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 10px 20px; border-bottom: 1px solid var(--borda); }
.busca-arvore { display: flex; align-items: center; gap: 8px; flex: 1 1 220px; max-width: 420px; color: var(--suave); }
.busca-arvore input { flex: 1; min-width: 0; }
.barra-arvore .acoes { gap: 4px; }

/* árvore de pastas e arquivos */
.tabela.arvore td { padding-top: 7px; padding-bottom: 7px; }
.no-arvore { display: flex; align-items: center; gap: 6px; min-width: 0; padding-left: calc(var(--nivel, 0) * 22px); }
.no-arvore > .ic { flex: none; color: var(--suave); width: 18px; height: 18px; }
.no-arvore > .ic-pasta { color: var(--alerta); }
.no-arvore .seta, .no-arvore .seta-vazia { flex: none; width: 22px; height: 22px; }
.no-arvore .seta { display: inline-grid; place-items: center; padding: 0; background: none; border: 0; border-radius: 6px; color: var(--suave); }
.no-arvore .seta:hover { background: var(--fundo); color: var(--texto); }
.no-arvore .seta .ic { width: 16px; height: 16px; transition: transform .12s ease; }
.no-arvore .seta.aberta .ic { transform: rotate(90deg); }
.no-textos { display: grid; min-width: 0; }
.no-textos > small { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.no-textos a.nome-arquivo, .no-textos .nome-arquivo { color: var(--texto); text-decoration: none; font-weight: 600; overflow-wrap: anywhere; text-align: left; }
.no-textos a.nome-arquivo:hover, .no-textos button.nome-arquivo:hover { color: var(--primaria); }
.no-textos button.link { font-weight: 600; color: var(--texto); text-align: left; }
.no-textos button.link:hover { color: var(--primaria); }
.no-linha { overflow-wrap: anywhere; }
.linha-pasta .nome-pasta, .linha-pasta b { font-weight: 600; }
.tabela.arvore .linha-pasta { cursor: pointer; }
.titulo-arquivo { color: var(--suave); font-weight: 400; font-size: 13px; }
.selo-contexto { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 0 7px; border: 0; border-radius: 999px; vertical-align: 1px;
                 background: var(--primaria-suave); color: var(--primaria); font-size: 11.5px; font-weight: 600; line-height: 18px; }
.selo-contexto .ic { width: 12px; height: 12px; }
.selo-contexto.mudo { padding: 0 4px; }
.tabela .col-marcar { width: 34px; padding-right: 0; }
.cartao.sem-margem .tabela .col-marcar:first-child { padding-left: 20px; }
.tabela tr.selecionada td { background: var(--primaria-suave); }
.tabela tr.alvo td { background: var(--primaria-suave); box-shadow: inset 0 1px 0 var(--primaria), inset 0 -1px 0 var(--primaria); }
.tabela tr[draggable=true] { cursor: grab; }
.barra-selecao { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 20px;
                 background: var(--primaria-suave); border-bottom: 1px solid var(--borda); font-size: 14px; position: sticky; top: var(--topo); z-index: 5; }
.barra-selecao[hidden] { display: none; }
button.perigo-texto { color: var(--erro); }
.soltar-raiz { display: none; align-items: center; justify-content: center; gap: 8px; margin: 10px 20px; padding: 10px; border: 2px dashed var(--borda);
               border-radius: 8px; color: var(--suave); font-size: 14px; }
.aba-arquivos.arrastando .soltar-raiz { display: flex; }
.soltar-raiz.alvo { border-color: var(--primaria); color: var(--primaria); background: var(--primaria-suave); }
@media (max-width: 760px) { .esconder-estreito { display: none; } }

/* janelas de arquivos */
.abas-janela { margin: 0 0 16px; }
.painel-aba { display: grid; gap: 14px; }
.painel-aba[hidden] { display: none; }
.campo-bloco { display: grid; gap: 6px; font-size: 14px; }
.campo-bloco small { color: var(--suave); }
.campo-bloco.com-erro textarea { border-color: var(--erro); }
.rotulo-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.previa-md { border: 1px solid var(--borda); border-radius: 8px; padding: 10px 12px; min-height: 180px; background: var(--fundo); }
.detalhes-arquivo { display: grid; grid-template-columns: max-content 1fr max-content 1fr; gap: 6px 14px; margin: 0; font-size: 13px; }
.detalhes-arquivo dt { color: var(--suave); }
.detalhes-arquivo dd { margin: 0; }
@media (max-width: 560px) { .detalhes-arquivo { grid-template-columns: max-content 1fr; } }
.escolher-envio { display: flex; gap: 8px; flex-wrap: wrap; }
.resumo-envio { display: grid; gap: 4px; }
.lista-envio { display: grid; gap: 2px; margin-top: 4px; }
.lista-envio div { display: flex; align-items: center; gap: 6px; overflow-wrap: anywhere; }
.lista-envio .ic { width: 14px; height: 14px; flex: none; }
.envio-progresso { display: grid; gap: 10px; }
.envio-progresso[hidden] { display: none; }
.erros-envio { display: grid; gap: 6px; max-height: 240px; overflow: auto; }
.erros-envio .msg { margin: 0; }
fieldset.grupo-campos { border: 1px solid var(--borda); border-radius: 8px; padding: 10px 14px 12px; margin: 0; display: grid; gap: 10px; min-width: 0; }
fieldset.grupo-campos[hidden] { display: none; }
fieldset.grupo-campos legend { font-weight: 600; font-size: 14px; padding: 0 4px; }
.lista-marcar { display: flex; flex-wrap: wrap; gap: 6px 18px; }
label.marcar { display: inline-flex; align-items: center; gap: 7px; font-weight: 400; }

/* contexto do arquivo (Markdown simples) */
.md { font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p, .md ul, .md ol, .md blockquote, .md pre { margin: 0 0 8px; }
.md ul, .md ol { padding-left: 22px; }
.md h4, .md h5, .md h6 { margin: 10px 0 6px; font-size: 15px; }
.md h5, .md h6 { font-size: 14px; }
.md code { font-family: var(--mono); font-size: .9em; background: var(--fundo); border: 1px solid var(--borda); border-radius: 4px; padding: 0 4px; }
.md pre { background: var(--fundo); border: 1px solid var(--borda); border-radius: 8px; padding: 8px 10px; overflow: auto; }
.md pre code { border: 0; padding: 0; background: none; }
/* etapa 23: prévia de um trecho de Markdown no editor */
.previa-trecho { margin-top: 6px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px; background: var(--fundo); max-width: 100%; }
.previa-trecho.titulo { font-weight: 600; font-size: 16px; }
.previa-trecho .link-md, .previa-trecho a { color: var(--primaria); text-decoration: underline; }
.previa-trecho .img-md { color: var(--suave); font-style: italic; }
.md blockquote { border-left: 3px solid var(--borda); padding-left: 10px; color: var(--suave); }
.md hr { border: 0; border-top: 1px solid var(--borda); margin: 10px 0; }
.md li input[type=checkbox] { margin: 0 4px 0 0; vertical-align: -1px; }
.ed-barra select.sel-arquivo { max-width: 320px; }
.tabela.arvore td.direita .acoes { flex-wrap: nowrap; }
@media (max-width: 560px) { .no-arvore { padding-left: calc(var(--nivel, 0) * 12px); } }

/* ---------- etapa 14: botão de ajuda (?), novidades e menu de ajuda ---------- */
.ponto-novo { position: absolute; top: -3px; right: -3px; width: 11px; height: 11px; border-radius: 50%; background: var(--primaria);
              border: 2px solid var(--cartao); pointer-events: none; }
.nav-topo a { position: relative; }
.nav-topo a .ponto-novo { top: 3px; right: 3px; width: 9px; height: 9px; }
.menu-ajuda { width: 270px; }
.menu-ajuda .item-texto, .menu-ajuda-previa .item-texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-ajuda .ic-fim, .menu-ajuda-previa .ic-fim { width: 15px; height: 15px; color: var(--suave); }
.etiqueta.pequena-etq { font-size: 11px; padding: 0 7px; }
.rodape-menu { border-top: 1px solid var(--borda); margin-top: 4px; padding: 8px 10px 3px; font-size: 12px; color: var(--suave); }
.menu a .contador.novo { margin-left: auto; background: var(--primaria); color: var(--primaria-texto); border-color: transparent; }

.novidades { display: grid; }
.novidade { padding: 18px 0; border-bottom: 1px solid var(--borda); }
.novidade:first-child { padding-top: 2px; }
.novidade:last-child { border-bottom: 0; padding-bottom: 4px; }
.novidade.rascunho { opacity: .8; }
.novidade-cabeca { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; margin-bottom: 8px; }
.novidade-cabeca h3 { margin: 0; font-size: 17px; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
.novidade-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--suave); font-size: 13px; }
.novidade-meta .botao-icone { width: 30px; height: 30px; }
.novidade-texto { position: relative; max-height: 10.5em; overflow: hidden; }
.novidade-texto.aberto { max-height: none; }
.novidade-texto:not(.aberto)::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3em;
                                       background: linear-gradient(to bottom, transparent, var(--cartao)); pointer-events: none; }
.novidade > .acoes { margin-top: 6px; }
.novidade > .acoes:empty { display: none; }
.link-externo { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; }
.link-externo .ic { width: 14px; height: 14px; }
.rodape-janela { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--borda); }

.escolhas { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; min-width: 0; }
.escolhas legend { padding: 0; margin-bottom: 6px; font-weight: 600; font-size: 14px; }
.escolha { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px; cursor: pointer; }
.escolha input { margin-top: 3px; }
.escolha span { display: grid; gap: 2px; }
.escolha small { color: var(--suave); font-weight: 400; }
.escolha:has(input:checked) { border-color: var(--primaria); background: var(--primaria-suave); }
.nowrap { white-space: nowrap; }
a.chip { display: inline-flex; align-items: center; text-decoration: none; }
.cartao-faixa { padding: 14px 20px; border-bottom: 1px solid var(--borda); }
.cartao-faixa .sub { margin-bottom: 12px; }
.cartao.sem-margem > .acoes.centro:not(:empty) { padding: 12px; }

.aj-grade { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 20px; align-items: start; }
.aj-lista { list-style: none; margin: 0 0 12px; padding: 0; border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; }
.aj-item { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 10px; border-bottom: 1px solid var(--borda); background: var(--cartao); }
.aj-item:last-child { border-bottom: 0; }
.aj-item.escondido .aj-ic, .aj-item.escondido .aj-desc { opacity: .5; }
.aj-item.com-erro { background: var(--erro-suave); }
.aj-ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 8px; background: var(--fundo); color: var(--suave); }
.aj-sep .aj-ic { background: none; }
.aj-linha { width: 22px; height: 2px; border-radius: 2px; background: var(--borda); }
.aj-desc { flex: 1; min-width: 0; }
.aj-desc .pequeno { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aj-desc .campo-erro { white-space: normal; }
.aj-acoes { display: flex; gap: 2px; flex: none; }
.botao-icone.invisivel { visibility: hidden; }
.botao-icone.perigo { color: var(--erro); }
.aj-previa-caixa { position: sticky; top: calc(var(--topo) + 16px); display: grid; gap: 6px; }
.flutuante.aj-previa { position: static; width: auto; min-width: 0; box-shadow: var(--sombra); }
.aj-previa .item-menu { cursor: default; }
.aj-previa .item-menu:hover { background: none; }
.aj-barra { position: sticky; bottom: 12px; margin-top: 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px 12px; flex-wrap: wrap;
            padding: 10px 14px; border: 1px solid var(--primaria); background: var(--primaria-suave); border-radius: var(--raio); box-shadow: var(--sombra-alta); }
.aj-icones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.aj-icones .botao-icone.ativo { border-color: var(--primaria); background: var(--primaria-suave); color: var(--primaria); }
@media (max-width: 900px) {
  .aj-grade { grid-template-columns: minmax(0, 1fr); }
  .aj-previa-caixa { position: static; max-width: 320px; }
}
@media (max-width: 560px) {
  .aj-item { flex-wrap: wrap; }
  .aj-desc { flex-basis: calc(100% - 50px); }
  .aj-acoes { width: 100%; justify-content: flex-end; }
}
.novidade button.link { padding: 0; }

/* ---------- glossários e memórias de tradução da organização (etapa 15) ---------- */
.recurso-explica { margin-bottom: 12px; }
.cartao.sem-margem > .recurso-explica { margin: 0; padding: 14px 20px 0; }
.cartao.sem-margem > .chave-equipe { margin: 12px 20px 0; }
.cartao.sem-margem > .recurso-explica + .cartao-cabeca, .cartao.sem-margem > .chave-equipe + .cartao-cabeca { border-bottom: 0; }
.recursos-org { min-width: 0; }
.chave-equipe { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px; background: var(--fundo); align-items: flex-start; }
.chave-equipe input { margin-top: 3px; }
.chave-equipe small { font-weight: 400; }
.nome-recurso { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--texto); text-decoration: none; }
.nome-recurso:hover { color: var(--primaria); }
.nome-recurso .ic { width: 18px; height: 18px; color: var(--primaria); flex: none; }
.recurso-desc { margin: 2px 0 0 26px; max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabela-recursos td:first-child { min-width: 220px; }
.icone-recurso { --tam: 56px; width: 56px; height: 56px; background: var(--primaria-suave); color: var(--primaria); }
.icone-recurso .ic { width: 28px; height: 28px; }
.lista-projetos { flex-direction: column; flex-wrap: nowrap; max-height: 240px; overflow-y: auto; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; margin-top: 6px; }
.lista-projetos .etiqueta { margin-left: 6px; font-size: 11px; padding: 0 6px; }
.filtros-recurso .busca { flex-wrap: wrap; margin-bottom: 0; }
.filtros-recurso select { width: auto; max-width: 220px; }
.paginacao { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 14px 0 4px; }
.texto-memoria { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 160px; max-width: 420px; }
.recurso-projeto { margin-bottom: 16px; }
.recurso-projeto a { color: var(--primaria); }
@media (max-width: 600px) {
  .recurso-desc { white-space: normal; margin-left: 0; }
  .tabela-recursos td:first-child { min-width: 160px; }
}

/* ---------- etapa 16 ---------- */
.etiqueta.roxa { background: #f1eafe; color: #6d3fd1; border-color: transparent; }
:root[data-tema=escuro] .etiqueta.roxa { background: #2a2140; color: #b79cff; }
@media (prefers-color-scheme: dark) { :root:not([data-tema=claro]) .etiqueta.roxa { background: #2a2140; color: #b79cff; } }
.etiqueta .ic { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; }

/* ver como */
.faixa-ver-como { position: sticky; top: var(--topo); z-index: 29; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
                  padding: 7px 16px; background: var(--alerta-suave); color: var(--alerta); border-bottom: 1px solid var(--borda); font-size: 14px; }
.faixa-ver-como > span:nth-of-type(1) { flex: 1 1 320px; color: var(--texto); }
.faixa-ver-como .botao, .faixa-ver-como button { margin-left: auto; }
body.vendo-como .editor { height: calc(100vh - var(--topo) - 42px); height: calc(100dvh - var(--topo) - 42px); }
.cartao.plano { box-shadow: none; display: grid; gap: 10px; align-content: start; }
.cartao.plano h3 { margin: 0; font-size: 15px; }
.dica-perm { display: block; color: var(--suave); font-size: 12.5px; }

/* editor: vários arquivos */
.ed-lista { grid-template-rows: auto auto 1fr auto; }
.ed-lista:not(:has(.ed-escopo)) { grid-template-rows: auto 1fr auto; }
.ed-escopo { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--primaria-suave); color: var(--primaria);
             font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--borda); }
.ed-escopo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lin-arquivo { position: sticky; top: 0; z-index: 1; display: flex; align-items: baseline; gap: 6px; padding: 6px 10px; background: var(--fundo);
               border-bottom: 1px solid var(--borda); font-size: 12.5px; font-weight: 700; color: var(--texto); }
.lin-arquivo .ic { width: 14px; height: 14px; align-self: center; color: var(--suave); }
.lin-arquivo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lin-arquivo small { margin-left: auto; font-weight: 400; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.pos-arquivo { font-weight: 400; }

/* editor: sugestões no centro (como no Crowdin) */
.central { display: grid; gap: 4px; border-top: 1px solid var(--borda); padding-top: 6px; }
.sec-central > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; padding: 8px 0; font-size: 12.5px; font-weight: 700;
                         letter-spacing: .05em; text-transform: uppercase; color: var(--ok); }
.sec-central > summary::-webkit-details-marker { display: none; }
.sec-central > summary::after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; }
.sec-central:not([open]) > summary::after { transform: rotate(-90deg); }
.sec-central > summary .etiqueta { text-transform: none; letter-spacing: 0; font-weight: 600; }
.lista-central { display: grid; gap: 2px; padding-bottom: 6px; }
.sug-central { position: relative; display: grid; gap: 4px; width: 100%; text-align: left; justify-items: start; justify-content: stretch; background: transparent; color: var(--texto); border: 0;
               border-bottom: 1px solid var(--borda); border-radius: 0; padding: 10px 34px 10px 2px; font-weight: 400; }
.sug-central:hover:not(:disabled) { background: var(--fundo); }
.sug-central:disabled { opacity: 1; cursor: default; }
.sug-texto { font-size: var(--fonte-editor); overflow-wrap: anywhere; white-space: pre-wrap; }
.sug-meta { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; }
.sug-meta .ic { width: 14px; height: 14px; }
.sug-meta .pct { font-size: 11px; padding: 1px 5px; }
.sug-origem { flex-basis: 100%; font-style: italic; overflow-wrap: anywhere; }
.sug-central .sug-n { position: absolute; right: 6px; top: 12px; }
.outro-idioma { display: flex; align-items: baseline; gap: 12px; justify-content: space-between; padding: 9px 2px; border-bottom: 1px solid var(--borda); overflow-wrap: anywhere; }
.outro-meta { display: flex; align-items: center; gap: 4px; flex: none; color: var(--ok); font-weight: 600; }
.outro-meta .ic { width: 15px; height: 15px; }

/* editor: painel da direita com busca */
.busca-painel { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.busca-painel input[type=search] { flex: 1 1 160px; min-width: 0; padding: 7px 10px; font-size: 14px; }
.buscar-em { display: flex; align-items: center; gap: 6px; color: var(--suave); flex-basis: 100%; }
.buscar-em select { padding: 4px 8px; font-size: 13px; }
.busca-resultado { display: grid; gap: 8px; }
.rotulo-secao { font-weight: 700; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; font-size: 11.5px; }
.ajuda-busca { color: var(--suave); background: var(--fundo); border: 1px solid var(--borda); border-radius: 8px; padding: 10px 12px; }
.ajuda-busca ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.ajuda-busca i { color: var(--texto); }

/* comentários: botões ao passar o mouse */
.lista-comentarios { display: grid; gap: 8px; margin-bottom: 12px; }
.comentario { position: relative; background: var(--fundo); border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; border-bottom: 1px solid var(--borda); }
.comentario.problema, .comentario.resolvido { padding-left: 12px; }
.comentario.apagado { background: none; border-style: dashed; }
.comentario-rodape { margin-top: 2px; }
.comentario-ferramentas { position: absolute; top: -12px; right: 8px; display: flex; gap: 2px; padding: 2px; background: var(--cartao);
                          border: 1px solid var(--borda); border-radius: 8px; box-shadow: var(--sombra-alta); opacity: 0; pointer-events: none;
                          transition: opacity .12s; z-index: 2; }
.comentario:hover .comentario-ferramentas, .comentario:focus-within .comentario-ferramentas { opacity: 1; pointer-events: auto; }
.comentario-ferramentas .botao-icone { width: 30px; height: 30px; border: 0; }
.comentario-ferramentas .botao-icone .ic { width: 16px; height: 16px; }
@media (hover: none) { .comentario-ferramentas { opacity: 1; pointer-events: auto; position: static; justify-self: end; box-shadow: none; } }

/* menu do botão direito */
.ancora-menu { position: fixed; width: 1px; height: 1px; pointer-events: none; }
.menu-trecho { min-width: 240px; }

/* idiomas: abrir pastas no editor */
.acoes-arvore .botao-icone { width: 32px; height: 32px; }
.marca-pasta { margin: 0 6px 0 0; vertical-align: -2px; }
.tabela tr.linha-pasta.marcada td { background: var(--primaria-suave); }
.dica-pastas { display: flex; align-items: center; gap: 6px; margin: 0; padding: 4px 20px 8px; }
.dica-pastas .ic { width: 15px; height: 15px; }
.lista-orgs { max-height: 320px; overflow-y: auto; }
.lista-orgs .marcar { display: flex; align-items: center; gap: 8px; }

/* atendimentos */
.suporte { display: grid; gap: 14px; }
/* as duas partes da janela de suporte ficam uma sobre a outra: o tamanho é sempre o do "Novo atendimento" e a lista rola por dentro */
.suporte-paineis { position: relative; }
.suporte-painel.escondido { visibility: hidden; }
.suporte-meus { position: absolute; top: 0; left: 0; right: 0; height: 100%; overflow: auto; overscroll-behavior: contain; padding-right: 2px; }
.janela-corpo.sem-rolagem { overflow: hidden; }
.escolha-assunto { display: flex; gap: 8px; flex-wrap: wrap; }
.opcao-cartao { flex: 1 1 160px; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px; cursor: pointer; font-weight: 600; }
.opcao-cartao:has(input:checked) { border-color: var(--primaria); background: var(--primaria-suave); color: var(--primaria); }
.lista-atend { display: grid; gap: 6px; }
.item-atend { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--borda);
              border-radius: 10px; color: var(--texto); text-decoration: none; }
.item-atend:hover { border-color: var(--primaria); }
.conteudo.estreito { max-width: 1100px; margin: 0 auto; width: 100%; }
.atend-grade { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
@media (max-width: 860px) { .atend-grade { grid-template-columns: 1fr; } }
.atend-conversa { display: grid; gap: 12px; }
.atend-msg { border: 1px solid var(--borda); border-radius: 10px; padding: 10px 14px; display: grid; gap: 6px; }
.atend-msg.da-equipe { background: var(--primaria-suave); border-color: transparent; }
.atend-msg.nota { background: var(--alerta-suave); border: 1px dashed var(--alerta); }
.atend-msg .comentario-cabeca .direita { margin-left: auto; }
.atend-texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.atend-evento { display: flex; align-items: center; gap: 6px; justify-content: center; }
.atend-evento .ic { width: 14px; height: 14px; }
textarea.nota { background: var(--alerta-suave); }
.dados-atend { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; margin: 0 0 12px; font-size: 14px; align-items: center; }
.dados-atend dt { color: var(--suave); }
.dados-atend dd { margin: 0; min-width: 0; }
.dados-atend select { width: 100%; padding: 5px 8px; }
.filtros-atend { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 20px; }
.filtros-atend select, .filtros-atend input { padding: 7px 10px; font-size: 14px; }
.filtros-atend input[type=search] { flex: 1 1 200px; }
.filtros-atend input.curto { flex: 0 1 140px; }
.tabela tr.clicavel { cursor: pointer; }
.tabela tr.clicavel:hover td { background: var(--fundo); }

/* ---------- etapa 17: textos de Pokémon (.garc), pk3DS e XLIFF ---------- */
.cartao-pacotes { margin-bottom: 16px; }
.nome-pacote { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nome-pacote .ic { width: 16px; height: 16px; color: var(--primaria); }
.nome-pacote code { font: 12px var(--mono); }
.selo-garc { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--fundo); border: 1px solid var(--borda);
  color: var(--suave); font: 600 10px/16px var(--mono); vertical-align: 1px; text-transform: uppercase; letter-spacing: .04em; }
.garc-tabela { max-height: 280px; overflow: auto; border: 1px solid var(--borda); border-radius: 8px; margin: 6px 0; }
.garc-tabela table { margin: 0; }
.garc-tabela select { min-width: 0; padding: 4px 6px; }
.garc-tabela code { font: 12px var(--mono); overflow-wrap: anywhere; }
.garc-resumo { display: grid; gap: 8px; }
.estatisticas.compacta { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 0; }
.estatisticas.compacta .estat { padding: 8px 10px; }
.codigos-garc code { display: inline-block; margin: 2px 4px 0 0; padding: 0 5px; border-radius: 4px; background: var(--alerta-suave); color: var(--alerta); font: 11px/18px var(--mono); }
.lista-erros { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 6px; max-height: 320px; overflow: auto; }
.lista-erros code { font: 12px var(--mono); overflow-wrap: anywhere; }
details.msg > summary { cursor: pointer; font-weight: 600; }
mark.var-marca.quebra, button.var-marca.quebra { background: var(--fundo); color: var(--primaria); border: 1px dashed var(--borda); }
.outro-idioma.referencia .etiqueta { font-size: 10px; padding: 0 6px; }
.outro-idioma .botao-icone.pequeno { width: 26px; height: 26px; }
.outro-idioma .botao-icone.pequeno .ic { width: 14px; height: 14px; }
.previa-garc-area:empty { display: none; }
.previa-garc-area { display: grid; gap: 6px; margin-top: 10px; }
.previa-garc { display: grid; gap: 6px; }
.previa-caixa { position: relative; padding: 8px 12px; border-radius: 8px; background: #20242c; color: #f3f5f8; font: 15px/1.45 var(--mono); max-width: 640px; }
.previa-linha { white-space: pre; min-height: 1.45em; overflow-x: auto; }
.previa-n { position: absolute; top: 4px; right: 8px; font-size: 11px; color: #9aa3b2; }
.previa-var { padding: 0 4px; border-radius: 4px; background: #3a4150; color: #ffd27a; font-size: 12px; }
.previa-ramo { padding: 0 2px; border-radius: 4px; background: #2c3f63; color: #cfe0ff; }
.previa-ramo i { opacity: .7; font-style: normal; padding: 0 2px; }
.estatisticas.compacta .estat { display: grid; gap: 0; align-content: start; }
.estatisticas.compacta .estat b { font-size: 20px; }
.estatisticas.compacta .estat span { font-size: 12px; }

/* ---------- etapa 17.3: editor no estilo do Crowdin ---------- */
/* dicas ao passar o mouse: ação e atalho */
.dica { position: fixed; z-index: 1000; max-width: 280px; padding: 6px 9px; border-radius: 6px; background: #1f2530; color: #f3f5f8;
  font-size: 12.5px; line-height: 1.35; pointer-events: none; box-shadow: 0 4px 14px rgba(0,0,0,.18); display: grid; gap: 1px; }
.dica[hidden] { display: none; }
.dica-atalho { color: #aab3c2; font-size: 11.5px; font-family: var(--mono); }
/* barra de ferramentas embaixo da tradução */
.ed-ferramentas { display: flex; align-items: center; gap: 2px; padding: 6px 8px; border-top: 1px solid var(--borda); }
.ed-ferramentas .grow { flex: 1; }
.ed-ferramentas .botao-icone { width: 34px; height: 34px; color: var(--suave); }
.ed-ferramentas .botao-icone:hover { color: var(--texto); }
.ed-ferramentas .botao-icone.texto-curto { font: 600 13px var(--mono); }
.contador-ed { display: grid; justify-items: end; min-width: 34px; padding: 2px 7px; margin-right: 6px; border-radius: 6px; background: var(--fundo);
  font: 11.5px/1.25 var(--mono); color: var(--suave); font-variant-numeric: tabular-nums; cursor: default; }
.contador-ed b { color: var(--texto); font-weight: 600; }
.contador-ed b.longo { color: var(--alerta); }
.botao-icone.disquete { width: 40px; height: 40px; border-radius: 8px; background: var(--ok); color: #fff; border: 0; }
.botao-icone.disquete:hover { filter: brightness(1.08); color: #fff; }
.botao-icone.disquete .ic { width: 20px; height: 20px; }
/* traduções do projeto */
.rotulo-secao { margin: 8px 0 2px; color: var(--suave); font-weight: 600; }
.trad-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 6px; border-radius: 8px; background: var(--fundo); }
.trad-item.editada { opacity: .75; }
.trad-corpo { flex: 1; min-width: 0; display: grid; gap: 6px; }
.trad-texto { font-size: var(--fonte-editor); overflow-wrap: anywhere; white-space: pre-wrap; }
.trad-acoes { display: flex; gap: 2px; flex: none; }
.trad-acoes .botao-icone { width: 34px; height: 34px; color: var(--suave); }
.trad-acoes .botao-icone.aprovar { color: var(--ok); }
.trad-acoes .botao-icone.aprovar.ativo { background: var(--ok); color: #fff; border-radius: 8px; }
.sug-meta .avatar { --tam: 22px; }
.sug-meta b { color: var(--texto); font-weight: 600; }
/* painel da direita: conteúdo + menu vertical de ícones */
.assistente { display: grid; grid-template-columns: minmax(0, 1fr) 52px; grid-template-rows: none; }
.assist-painel { display: grid; grid-template-rows: auto 1fr; min-height: 0; min-width: 0; }
.assist-titulo { display: flex; align-items: center; gap: 6px; padding: 10px 8px 10px 14px; border-bottom: 1px solid var(--borda);
  font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--suave); }
.assist-titulo .grow { flex: 1; }
.assist-titulo .botao-icone.pequeno { width: 28px; height: 28px; }
.assist-trilho { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; border-left: 1px solid var(--borda); background: var(--fundo); overflow-y: auto; }
.trilho-botao { position: relative; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--suave); }
.trilho-botao:hover { background: var(--cartao); color: var(--texto); }
.trilho-botao.ativo { background: var(--primaria-suave); color: var(--primaria); }
.trilho-botao .ic { width: 20px; height: 20px; }
.selo-trilho { position: absolute; top: 2px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--primaria); color: #fff; font: 600 10px/16px var(--fonte, inherit); }
.selo-trilho.vermelho { background: var(--erro); }
.ponto-trilho { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--primaria); }
.ed-corpo.painel-fechado { grid-template-columns: 360px minmax(0, 1fr) 53px; }
.painel-fechado .assistente { grid-template-columns: 52px; }
.painel-fechado .assist-painel { display: none; }
.ctx-arquivo { display: flex; gap: 10px; align-items: flex-start; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--borda); }
.ctx-arquivo .ic { width: 18px; height: 18px; color: var(--suave); flex: none; margin-top: 2px; }
.vazio-painel { padding: 18px 8px; }
@media (max-width: 1240px) {
  .ed-corpo.painel-fechado { grid-template-columns: 320px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .painel-fechado .assistente { grid-template-columns: 1fr; }
  .painel-fechado .assist-trilho { flex-direction: row; justify-content: flex-end; border-left: 0; padding: 4px 8px; }
}
@media (max-width: 860px) {
  .ed-corpo.painel-fechado { grid-template-columns: minmax(0, 1fr); }
}
.ed-ferramentas .botao-icone:not(.disquete), .bt-cabeca .botao-icone, .trad-acoes .botao-icone:not(.ativo), .assist-titulo .botao-icone { border-color: transparent; background: transparent; box-shadow: none; }
.ed-ferramentas .botao-icone:not(.disquete):hover, .bt-cabeca .botao-icone:hover, .trad-acoes .botao-icone:not(.ativo):hover, .assist-titulo .botao-icone:hover { background: var(--fundo); }

/* prévia como no jogo (Pokémon 3DS): tela de 400 px desenhada no tamanho real e ampliada sem borrar */
.previa-3ds { display: grid; gap: 8px; }
.previa-opcoes { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.previa-op { display: flex; align-items: center; gap: 6px; }
.chip.pequeno { padding: 2px 10px; font-size: 12px; min-height: 26px; }
.previa-telas { display: grid; gap: 6px; }
.tela-3ds-moldura { position: relative; max-width: 800px; border-radius: 8px; overflow: hidden;
  background: linear-gradient(180deg, #3d6f8f 0%, #2a5470 55%, #1d3c52 100%); }
.tela-3ds { display: block; width: 100%; height: auto; aspect-ratio: 400 / 74; }
.tela-3ds-n { position: absolute; top: 4px; left: 8px; font-size: 11px; color: #e9f2f8; text-shadow: 0 1px 2px #0008; }
.previa-medida { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; padding: 6px 10px; border-radius: 6px; }
.previa-medida .ic { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.previa-medida.ok { background: var(--ok-suave); color: var(--ok); }
.previa-medida.meio { background: var(--alerta-suave); color: var(--alerta); }
.previa-medida.ruim { background: var(--erro-suave); color: var(--erro); }


/* ---------- etapa 18: tela de abertura, temas e aplicativo ---------- */

/* tela de abertura: aparece antes de tudo (o tema.js marca <html class="js">; sem JavaScript ela não aparece) */
.abertura { display: none; }
.js .abertura { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; overflow: hidden;
  background: var(--fundo); color: var(--texto); }
.js .abertura[hidden] { display: none; }
.abertura-fundo { position: absolute; inset: 0; pointer-events: none; }
.abertura-fundo i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; }
.abertura-fundo i:nth-child(1) { width: 46vmax; height: 46vmax; left: -12vmax; top: -16vmax; background: color-mix(in srgb, var(--primaria) 14%, transparent); }
.abertura-fundo i:nth-child(2) { width: 40vmax; height: 40vmax; right: -14vmax; bottom: -18vmax; background: color-mix(in srgb, var(--primaria) 10%, transparent); }
.abertura-fundo i:nth-child(3) { display: none; }
.abertura-centro { position: relative; display: grid; justify-items: center; gap: 14px; padding: 24px; text-align: center; }
.abertura-vidro { width: clamp(116px, 24vmin, 168px); aspect-ratio: 1; }
.abertura-icone { display: block; width: 100%; height: 100%; overflow: visible; }
.abertura-reflexo { transform: translateX(0); }
.abertura-nome { margin-top: 4px; font-size: clamp(22px, 4.2vmin, 30px); font-weight: 300; letter-spacing: -.01em; color: var(--texto); }
.abertura-nome span { font-weight: 600; }
.abertura-nome b { font-size: .5em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primaria); vertical-align: .35em; }
.abertura-barra { width: 168px; height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--borda) 80%, transparent); overflow: hidden; }
.abertura-barra span { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--primaria);
  transform: scaleX(.04); transform-origin: left center; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.abertura-texto { margin: 0; min-height: 1.5em; font-size: 13px; color: var(--suave); }
.abertura.demorando .abertura-texto { color: var(--alerta); max-width: 320px; }
.abertura.entrando .abertura-vidro { animation: ab-icone .75s cubic-bezier(.2, .9, .25, 1.12) both; }
.abertura.entrando .abertura-nome { animation: ab-subir .6s .12s cubic-bezier(.2, .8, .2, 1) both; }
.abertura.entrando .abertura-barra, .abertura.entrando .abertura-texto { animation: ab-subir .6s .22s cubic-bezier(.2, .8, .2, 1) both; }
.abertura.entrando .abertura-reflexo { animation: ab-reflexo 2.6s .55s cubic-bezier(.45, 0, .2, 1) infinite; }
.abertura.saindo { pointer-events: none; animation: ab-sair .45s cubic-bezier(.4, 0, .2, 1) forwards; }
.abertura.saindo .abertura-centro { animation: ab-centro-sair .45s cubic-bezier(.4, 0, .2, 1) forwards; }
/* abertura no meio do uso (entrar numa organização, num projeto, voltar do editor): surge rápido, sem a entrada do ícone */
.abertura.rapida { animation: ab-surgir .16s ease-out both; }
.abertura.rapida .abertura-vidro, .abertura.rapida .abertura-nome, .abertura.rapida .abertura-barra, .abertura.rapida .abertura-texto { animation: none; }
.abertura.rapida.saindo { animation: ab-sair .3s cubic-bezier(.4, 0, .2, 1) forwards; }
.abertura.rapida.saindo .abertura-centro { animation: none; }
@keyframes ab-surgir { from { opacity: 0; } }
@keyframes ab-icone { from { opacity: 0; transform: translateY(12px) scale(.82); } to { opacity: 1; transform: none; } }
@keyframes ab-subir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ab-reflexo { 0% { transform: translateX(0); } 55%, 100% { transform: translateX(1700px); } }
@keyframes ab-sair { to { opacity: 0; visibility: hidden; } }
@keyframes ab-centro-sair { to { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) {
  .abertura.entrando .abertura-vidro, .abertura.entrando .abertura-nome, .abertura.entrando .abertura-barra,
  .abertura.entrando .abertura-texto, .abertura.entrando .abertura-reflexo, .abertura.saindo .abertura-centro { animation: none; }
  .abertura.saindo { animation: ab-sair .2s linear forwards; }
}

/* indicador que desliza até o item ativo: só os temas com animação o desenham */
.indicador-deslize { display: none; }

/* escolha de tema (Preferências) */
.grade-temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 14px; }
.cartao-tema { display: grid; gap: 10px; align-content: start; justify-items: stretch; padding: 10px; text-align: left; font-weight: 400;
  background: var(--cartao); color: var(--texto); border: 1px solid var(--borda); border-radius: 12px; }
.cartao-tema:hover { border-color: var(--primaria); }
.cartao-tema.ativo { border-color: var(--primaria); box-shadow: 0 0 0 1px var(--primaria); background: var(--primaria-suave); }
.cartao-tema-texto { display: grid; gap: 3px; padding: 0 2px 2px; }
.cartao-tema-nome { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 650; }
.cartao-tema-nome .marca-escolha { color: var(--primaria); width: 16px; height: 16px; }
.cartao-tema small { color: var(--suave); font-size: 12.5px; line-height: 1.4; }
.seguir-padrao { align-items: flex-start; font-weight: 400; font-size: 14px; }
.seguir-padrao input { margin-top: 3px; }

/* miniatura de um tema: as cores vêm do tema.json (--p-*); "vidro" desenha cartões translúcidos sobre um fundo colorido */
.previa-tema { --p-fundo: #f4f6f9; --p-cartao: #fff; --p-texto: #1b2230; --p-suave: #5b6578; --p-borda: #dbe0e8; --p-primaria: #2563eb;
  position: relative; display: grid; grid-template-rows: 15px 1fr; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px;
  background: var(--p-fundo); border: 1px solid var(--p-borda); }
.previa-tema i { display: block; }
.pt-topo { display: flex; align-items: center; gap: 5px; padding: 0 7px; background: var(--p-cartao); border-bottom: 1px solid var(--p-borda); }
.pt-marca { width: 8px; height: 8px; border-radius: 3px; background: var(--p-primaria); margin-right: 4px; }
.pt-item { width: 20px; height: 4px; border-radius: 3px; background: var(--p-suave); opacity: .35; }
.pt-item.ativo { background: var(--p-primaria); opacity: .85; }
.pt-corpo { display: grid; grid-template-columns: 20% 1fr 1fr; gap: 6px; padding: 7px; min-height: 0; }
.pt-lado { display: grid; gap: 5px; align-content: start; padding-top: 2px; }
.pt-lado .pt-item { width: 100%; height: 5px; }
.pt-cartao { display: grid; gap: 5px; align-content: start; padding: 7px; border-radius: 5px; background: var(--p-cartao); border: 1px solid var(--p-borda); }
.pt-linha { height: 4px; border-radius: 2px; background: var(--p-suave); opacity: .35; }
.pt-linha.forte { background: var(--p-texto); opacity: .75; }
.pt-linha.curta { width: 60%; }
.pt-botao { width: 34px; height: 8px; border-radius: 3px; background: var(--p-primaria); margin-top: 3px; }
.previa-tema.vidro { background:
  radial-gradient(70% 70% at 0% 0%, color-mix(in srgb, var(--p-primaria) 34%, transparent), transparent 70%),
  radial-gradient(60% 70% at 100% 100%, rgba(150, 120, 255, .28), transparent 70%),
  radial-gradient(50% 60% at 100% 0%, rgba(110, 214, 228, .25), transparent 70%), var(--p-fundo); }
.previa-tema.vidro .pt-topo { margin: 3px 4px 0; border-radius: 7px; border: 1px solid color-mix(in srgb, #fff 45%, transparent); background: color-mix(in srgb, var(--p-cartao) 55%, transparent); }
.previa-tema.vidro .pt-cartao { border-radius: 8px; border-color: color-mix(in srgb, #fff 45%, transparent); background: color-mix(in srgb, var(--p-cartao) 60%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 60%, transparent); }
.previa-tema.vidro .pt-lado { padding: 4px; border-radius: 8px; background: color-mix(in srgb, var(--p-cartao) 40%, transparent); }
.previa-tema.vidro .pt-botao, .previa-tema.vidro .pt-item.ativo { border-radius: 999px; }

/* Administração > Aparência */
.lista-temas { display: grid; }
.linha-tema { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--borda); }
.linha-tema:last-child { border-bottom: 0; }
.linha-tema-texto { display: grid; gap: 4px; min-width: 0; }
.linha-tema-texto p { overflow-wrap: anywhere; }
.excecoes { margin-bottom: 12px; }
.faixa-experimentar { background: var(--primaria-suave); color: var(--primaria); }
@media (max-width: 760px) {
  .linha-tema { grid-template-columns: 110px minmax(0, 1fr); padding: 12px 14px; }
  .linha-tema > .acoes { grid-column: 1 / -1; }
}

/* aplicativo instalável */
.instalar-topo { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.instalar-topo p { margin: 4px 0 0; }
.instalar-icone { flex: none; border-radius: 22%; }
.passos-instalar { color: var(--texto); }
.cartao-app .app-linha { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cartao-app h2 { margin: 0 0 2px; }
.cartao-app p { margin: 0; }
.cartao-app .grow { flex: 1 1 210px; min-width: 0; } /* 0.25.4: no celular o botão desce em vez de espremer o texto */
.entrar-icone { display: block; width: 64px; height: 64px; margin: -6px 0 10px -4px; }
/* 0.25.4: tela de entrar — apresentação ao lado do formulário (só cores do tema) */
.entrar-caixa { max-width: 880px; margin: 5vh auto 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; }
.entrar-apresentacao { background: var(--primaria-suave); padding: 36px 34px; display: grid; align-content: center; gap: 4px; }
.entrar-apresentacao .entrar-icone { width: 72px; height: 72px; margin: 0 0 12px -4px; }
.entrar-marca { margin: 0; font-size: 22px; color: var(--texto); }
.entrar-marca small { font-size: 14px; font-weight: 700; color: var(--primaria); letter-spacing: .04em; }
.entrar-frase { margin: 2px 0 18px; color: var(--suave); }
.entrar-recursos { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.entrar-recursos li { display: flex; gap: 12px; align-items: flex-start; }
.entrar-recursos .ic { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--primaria); }
.entrar-recursos li > div { display: grid; gap: 1px; font-size: 14px; }
.entrar-recursos span { color: var(--suave); font-size: 13px; }
.entrar-formulario { padding: 36px 34px 26px; display: grid; align-content: center; }
.entrar-formulario h1 { margin: 0 0 4px; }
.entrar-versao { margin: 10px 0 0; }
@media (max-width: 760px) {
  .entrar-caixa { grid-template-columns: 1fr; margin-top: 12px; }
  .entrar-apresentacao { padding: 22px 20px; }
  .entrar-apresentacao .entrar-icone { width: 52px; height: 52px; margin-bottom: 6px; }
  .entrar-frase { margin-bottom: 0; }
  .entrar-recursos { display: none; }
  .entrar-formulario { padding: 22px 20px 18px; }
}

/* ---------- etapa 18.2: casca da organização e do projeto ---------- */
/* o topo da casca não cria caixa (o cabeçalho e o menu ficam direto na grade da página); cada seção fica pronta, escondida */
.casca-topo { display: contents; }
.casca-topo > * { min-width: 0; }
.casca-corpo { min-width: 0; }
.secao-casca[hidden] { display: none; }
/* foto do projeto nas configurações */
.campo-foto-projeto { display: grid; gap: 4px; margin: 4px 0 18px; }
.campo-foto-projeto .rotulo-campo { font-weight: 600; font-size: 14px; }
.campo-foto-projeto .seletor-foto { margin: 8px 0 0; }

/* ---------- etapa 18.3 ---------- */
/* glossário e memória: a quem vale e com quem está compartilhado, em selos no cabeçalho (mudar pelo menu ⋯) */
.selo-recurso { display: inline-flex; align-items: center; gap: 5px; }
.selo-recurso .ic { width: 15px; height: 15px; color: var(--suave); }
.selo-recurso a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 2px; }
.selo-recurso a:hover { color: var(--primaria); }
.compart-atuais { margin-bottom: 12px; }
.rotulo-secao { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); margin: 4px 0 8px; }

/* menus do tema no lugar dos <select> (editor): o botão parece um seletor; a lista abre com o visual e a animação do tema */
.escolha-menu { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; padding: 7px 10px 7px 12px; border: 1px solid var(--borda);
  border-radius: 8px; background: var(--fundo); color: var(--texto); font: inherit; font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; }
.escolha-menu:hover { border-color: color-mix(in srgb, var(--primaria) 45%, var(--borda)); }
.escolha-menu[aria-expanded="true"] { border-color: var(--primaria); }
.escolha-texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.escolha-menu .escolha-seta { flex: none; width: 16px; height: 16px; color: var(--suave); transition: transform .2s ease; }
.escolha-menu[aria-expanded="true"] .escolha-seta { transform: rotate(180deg); }
.escolha-menu.pequeno { padding: 4px 8px 4px 10px; font-size: 13px; }
.ed-barra .escolha-menu { max-width: 260px; }
.ed-lista-cabeca .escolha-menu { width: 100%; }
.menu-escolha { padding: 6px; }
.menu-escolha .escolha-caixa { display: grid; gap: 6px; }
.menu-escolha .escolha-lista { max-height: min(60vh, 440px); overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 1px; }
.menu-escolha.submenu .escolha-lista { max-height: none; }
.escolha-busca { width: 100%; padding: 7px 10px; font-size: 14px; }
.escolha-grupo { padding: 8px 10px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--suave); }
.escolha-grupo:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--borda); padding-top: 10px; }
.item-escolha { gap: 8px; padding: 7px 10px 7px 6px; font-size: 14px; }
.item-escolha .marca-escolha { flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; color: var(--primaria); }
.item-escolha .marca-escolha .ic { width: 16px; height: 16px; }
.item-escolha .item-texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-escolha.escolhido { color: var(--primaria); font-weight: 600; }
.item-escolha.tem-sub .ic-fim { width: 15px; height: 15px; color: var(--suave); margin-left: 8px; }
.escolha-nada { padding: 10px; }
.submenu { min-width: 200px; }

/* contador de caracteres selecionados, ao lado do contador da tradução */
.contador-sel { display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 8px; margin-right: 6px; border-radius: 6px; font-size: 12px; font-variant-numeric: tabular-nums;
  background: var(--primaria-suave); color: var(--primaria); }
.contador-sel small { font-size: 11px; opacity: .85; }
.contador-sel b { font-weight: 700; }

/* avisos: número clicável no topo da frase, categoria na aba Avisos, notas (gênero e plural) em cinza */
button.selo-avisos { cursor: pointer; font: inherit; font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
button.selo-avisos .ic { width: 14px; height: 14px; }
.verif .ic { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.verif.nota-q { background: var(--fundo); color: var(--suave); }
.verif-texto { display: grid; gap: 1px; min-width: 0; }
.verif-cat { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .75; }
.verificacoes.no-painel { display: grid; gap: 6px; }
.verificacoes:empty { display: none; }
.acoes-avisos { margin: 12px 0 0; }
.previa-medida.neutra { background: var(--fundo); color: var(--suave); }
.selo-trilho.amarelo { background: var(--alerta); color: #fff; }
.ed-vazio.procurando { display: flex; align-items: center; gap: 10px; }
.girando { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--borda); border-top-color: var(--primaria); animation: girar .8s linear infinite; flex: none; }
@keyframes girar { to { transform: rotate(360deg); } }

/* painel da direita: painéis fixados uns sobre os outros, com divisórias que se arrastam */
.assist-painel { grid-template-rows: minmax(0, 1fr); }
.assist-pilha { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
.assist-secao { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; }
.assist-pilha.varios .assist-secao { min-height: 120px; }
.assist-secao > .assistente-corpo { flex: 1 1 auto; }
.assist-divisor { flex: none; height: 9px; margin: -4px 0; position: relative; z-index: 2; cursor: row-resize; touch-action: none; }
.assist-divisor::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: var(--borda); transition: background-color .15s ease, height .15s ease, top .15s ease; }
.assist-divisor:hover::before, .assist-divisor.arrastando::before, .assist-divisor:focus-visible::before { top: 3px; height: 3px; background: var(--primaria); }
.assist-divisor:focus-visible { outline: none; }
body.arrastando-divisor { cursor: row-resize; user-select: none; }
.assist-secao + .assist-divisor + .assist-secao > .assist-titulo { border-top: 0; }
.botao-fixar .ic { transform: rotate(45deg); transition: transform .2s ease; }
.botao-fixar.ativo { color: var(--primaria); }
.botao-fixar.ativo .ic { transform: none; }
.trilho-botao.fixo { color: var(--primaria); }
.marca-fixo { position: absolute; bottom: 1px; right: 2px; width: 13px; height: 13px; display: grid; place-items: center; border-radius: 50%; background: var(--cartao); color: var(--primaria); }
.marca-fixo .ic { width: 10px; height: 10px; }
.assist-secao.piscar > .assist-titulo { animation: piscar-titulo .9s ease; }
@keyframes piscar-titulo { 30% { background: var(--primaria-suave); } }

/* ajustes do editor: onde aparece cada categoria de aviso */
.flutuante .ajustes-ed { max-height: calc(100vh - 140px); overflow-y: auto; overscroll-behavior: contain; }
.ajustes-avisos { display: grid; gap: 6px; padding: 4px 10px 6px; }
.rotulo-ajustes { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--suave); padding: 4px 0 2px; }
.linha-lugar { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.linha-lugar .chips { flex-wrap: nowrap; gap: 4px; }
.acoes-lugar { display: flex; gap: 14px; justify-content: flex-end; padding-top: 2px; }

/* caixa de comentário enxuta: "Problema" e enviar só aparecem quando há texto; o tipo do problema, quando ele é marcado */
.nova-conversa { display: grid; gap: 8px; }
.nova-conversa label.sem-rotulo { position: relative; display: block; }
.nova-conversa textarea { width: 100%; min-height: 64px; resize: vertical; transition: min-height .2s ease; }
.nova-conversa.digitando textarea { min-height: 88px; }
.conversa-opcoes, .conversa-tipo { display: none; align-items: center; gap: 10px; }
.nova-conversa.digitando .conversa-opcoes { display: flex; animation: surgir-baixo .22s ease both; }
.nova-conversa.com-problema .conversa-tipo { display: flex; animation: surgir-baixo .22s ease both; }
.conversa-tipo .escolha-menu { flex: 1; }
.conversa-opcoes .grow { flex: 1; }
.marca-problema { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; cursor: pointer; }
.enviar-conversa { width: 36px; height: 36px; background: var(--primaria); color: var(--primaria-texto); border-color: transparent; }
.enviar-conversa:disabled { opacity: .5; }
.enviar-conversa .ic { width: 18px; height: 18px; }
@keyframes surgir-baixo { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nova-conversa.digitando .conversa-opcoes, .nova-conversa.com-problema .conversa-tipo { animation: none; } }
@media (max-width: 860px) {
  /* no celular o painel da direita fica embaixo da frase, com a altura do conteúdo: os painéis fixados só se empilham */
  .assist-pilha { overflow: visible; }
  .assist-secao, .assist-pilha.varios .assist-secao { flex: none; min-height: 0; }
  .assist-divisor { display: none; }
  .assist-secao + .assist-divisor + .assist-secao { border-top: 1px solid var(--borda); }
}

/* tabelas de arquivos e idiomas: no celular, círculos no lugar da barra (o nome do arquivo ganha espaço e não fica em pé) */
.col-progresso .circulos { display: none; }
@media (max-width: 760px) {
  .col-progresso { width: auto; min-width: 0; }
  .col-progresso .progresso { display: none; }
  .col-progresso .circulos { display: inline-flex; }
  .tabela.arvore th, .tabela.arvore td { padding-left: 8px; padding-right: 8px; }
  .tabela.arvore td:has(> .no-arvore) { min-width: 150px; } /* 0.25.4: a coluna do nome (antes pegava a das caixas de marcar) */
  .col-progresso .circulo-progresso { width: 30px; height: 30px; }
  .col-progresso .circulo-num { font-size: 8.5px; }
  .col-progresso .circulos { gap: 4px; }
  .no-textos a.nome-arquivo, .no-textos .nome-arquivo { overflow-wrap: break-word; }
  .tabela.arvore td.direita { padding-left: 2px; padding-right: 6px; }
  .tabela.arvore th.num, .tabela.arvore td.num { padding-left: 4px; }
  .tabela.arvore .marca-pasta { flex: none; }
}

/* etapa 19: versões da tradução no editor (como as sugestões do Crowdin) e a linha de aprovação com recuo */
.versoes-lista { display: grid; gap: 4px; }
.trad-item.versao:not(.atual) { background: transparent; box-shadow: inset 0 0 0 1px var(--borda); }
.linha-aprovacao { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.ramo-aprovacao { flex: none; width: 14px; height: 16px; margin: -12px 2px 0 10px; border-left: 1.5px solid var(--borda); border-bottom: 1.5px solid var(--borda); border-bottom-left-radius: 7px; }
.selo-aprovada { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px 1px 3px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); background: var(--ok-suave); color: var(--ok); font-weight: 600; }
.selo-aprovada .ic { width: 15px; height: 15px; }
.linha-aprovacao .avatar { --tam: 20px; }
.linha-aprovacao b { color: var(--texto); font-weight: 600; }
.linha-aprovacao .link { color: var(--ok); font-weight: 600; }
.mais-versoes { justify-self: start; display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; padding: 4px 12px 4px 8px; border: 1px solid var(--borda); border-radius: 999px;
  background: var(--cartao); color: var(--primaria); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.mais-versoes .ic { width: 15px; height: 15px; }
.mais-versoes .suave { font-weight: 500; }
.mais-versoes:hover { background: var(--primaria-suave); }
.mais-versoes:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; }
/* etapa 19: downloads da equipe (aba Equipe do projeto) */
.tabela-downloads th.centro, .tabela-downloads td.centro { text-align: center; width: 96px; }
.tabela-downloads tr.ausente td:first-child > span { color: var(--suave); }
.tabela-downloads input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--primaria); }
.downloads-equipe { margin-top: 16px; }
.dl-pessoa { display: grid; gap: 12px; margin: 4px 0 16px; }
.dl-pessoa-linha { display: grid; gap: 6px; }
.dl-pessoa-linha.ausente b { color: var(--suave); font-weight: 600; }
/* etapa 19: prévia do jogo com a plaquinha do nome de quem fala (a tela começa mais alto) */
.tela-3ds.com-placa { aspect-ratio: 400 / 90; }

/* etapa 20: telas de menu do jogo (Mochila, Resumo, Informação, Pokédex) e setas para os balões */
.tela-3ds.tela-menu { aspect-ratio: 400 / 240; }
.tela-3ds.tela-menu.baixo { aspect-ratio: 320 / 240; }
.tela-3ds-moldura.moldura-menu { max-width: 600px; width: 100%; background: #000; }
/* o canvas tem 2× o tamanho da tela; sem isto a linha da grade fica com a altura dele e sobra um vão em cima */
.previa-telas > *, .previa-baloes > * { min-width: 0; min-height: 0; }
.tela-3ds-moldura { align-self: start; }
.tela-3ds-moldura > canvas { max-width: 100%; }
.tela-3ds-moldura.moldura-menu.baixo { max-width: 480px; }
.previa-baloes { display: grid; gap: 6px; }
.previa-nav { display: flex; align-items: center; gap: 8px; }
.previa-nav[hidden] { display: none; }
.previa-nav-n { font-size: 13px; color: var(--suave); min-width: 9em; text-align: center; }
.ajustes-baloes { display: grid; gap: 6px; padding: 4px 10px 6px; }
.ajustes-baloes .linha-lugar { padding: 0; }
.ajustes-baloes select { width: auto; flex: none; min-width: 7em; padding: 3px 6px; border: 1px solid var(--borda); border-radius: 6px; background: var(--fundo); color: inherit; font: inherit; font-size: 13px; }
.linha-lugar.desativado { opacity: .5; }

/* ---------- etapa 21: planilhas .xlsx (Kingdom Hearts Union χ e outras) ---------- */
.planilha-leitura .lista-envio .etiqueta { margin-left: 8px; }
.planilha-opcoes { display: grid; gap: 12px; }
.planilha-opcoes .titulo-secao { margin: 8px 0 0; font-size: 15px; }
.tabela-papeis td { vertical-align: top; }
.tabela-papeis td:first-child { width: 40%; }
.tabela-papeis select { width: 100%; min-width: 160px; }
.amostra-coluna { max-width: 260px; }
.amostra-celula { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; font-family: var(--mono); font-size: 12px; }
.exemplos-divisao { display: grid; gap: 2px; max-height: 180px; overflow: auto; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--fundo); }
.exemplos-divisao > div { display: flex; align-items: center; gap: 6px; min-width: 0; }
.exemplos-divisao .ic { width: 15px; height: 15px; flex: none; color: var(--suave); }
.bloco-importacao { display: grid; gap: 10px; padding-top: 4px; }
.importar-corpo { display: grid; gap: 10px; }
.importar-corpo[hidden] { display: none; }
.tabela.compacta td { padding: 4px 8px; }
.tabela.compacta select { min-width: 180px; }
.barra.indeterminada span { width: 35%; animation: barra-vai 1.2s ease-in-out infinite; }
@keyframes barra-vai { 0% { left: -35%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .barra.indeterminada span { animation: none; width: 100%; opacity: .3; } }
.selo-planilha { color: var(--ok); }
/* contexto de cada linha da planilha (caminho no jogo, plataforma…), embaixo do original */
.contexto-frase { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--borda); display: grid; gap: 2px; overflow-wrap: anywhere; }
.contexto-frase code { font-size: 12px; }
/* prévia das caixas de texto (KH χ) */
.previa-kh { display: grid; gap: 8px; }
.previa-kh-opcoes { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.previa-kh-opcoes .chips { gap: 4px; }
.previa-kh-opcoes .chip { padding: 2px 10px; font-size: 12px; }
.previa-kh-opcoes input { width: auto; padding: 2px 8px; margin-left: 4px; }
.previa-kh-caixas { display: grid; gap: 8px; }
.kh-caixa { position: relative; background: #10131c; color: #f2f4f8; border-radius: 10px; padding: 10px 44px 10px 14px; border: 1px solid #2c333f;
  font-size: 15px; line-height: 1.5; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.kh-caixa-n { position: absolute; top: -9px; left: 12px; padding: 0 6px; border-radius: 6px; background: #2c333f; font-size: 11px; line-height: 17px; color: #c9d0dc; }
.previa-kh-caixas:has(.kh-caixa-n) { padding-top: 8px; gap: 16px; }
.kh-linha { position: relative; display: block; border-radius: 4px; padding-left: 2px; }
.kh-linha.longa { background: rgba(255, 90, 80, .18); box-shadow: inset 3px 0 0 #ff6b5e; }
.kh-texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.kh-n { position: absolute; right: -36px; top: 2px; width: 28px; text-align: right; font-size: 11px; color: #9aa3b5; font-variant-numeric: tabular-nums; }
.kh-linha.longa .kh-n { color: #ff8a80; font-weight: 600; }
.kh-imp { color: #ffd65c; }
.kh-var { background: rgba(255, 214, 92, .16); border-radius: 3px; outline: 1px dashed rgba(255, 214, 92, .45); }
.kh-ctrl { color: #9aa3b5; }

/* ---------- etapa 22: Pokémon Brilliant Diamond / Shining Pearl ---------- */
.selo-bdsp { color: var(--primaria); }
.texto-multilinha { white-space: pre-wrap; }
.previa-bdsp { display: grid; gap: 8px; }
.bdsp-caixas { display: grid; gap: 14px; padding-top: 8px; }
.bdsp-caixa { position: relative; width: max-content; max-width: 100%; }
/* balão de fala do jogo: branco, borda cinza grossa, faixa cinza à direita */
.bdsp-caixa.balao { background: #fbfbfa; color: #3a3a3a; border: 4px solid #6f747c; border-radius: 12px; padding: 4.5% 7% 4.5% 5.5%;
  box-shadow: inset -14px 0 0 #d9dbdf, 0 2px 6px rgba(0, 0, 0, .18); }
.bdsp-caixa.janela { background: #f3f5ee; color: #333; border: 2px solid #9fb08a; border-radius: 10px; padding: 3% 4%; }
.bdsp-area { position: relative; font-family: "Arial Narrow", "Roboto Condensed", "Liberation Sans Narrow", Arial, sans-serif; font-weight: 500;
  font-size: 18px; line-height: 24px; }
.bdsp-caixa.balao .bdsp-area { min-height: calc(2 * 1em * 1.55); }
.bdsp-linha { position: relative; white-space: pre; border-radius: 3px; }
.bdsp-recorte { overflow: hidden; }
.bdsp-texto { display: inline-block; transform-origin: left center; white-space: pre; }
.bdsp-linha.subiu { opacity: .45; }
.bdsp-linha.passa { background: rgba(229, 57, 53, .14); box-shadow: inset 3px 0 0 #e53935; }
.bdsp-n { position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); font: 600 11px/1.6 system-ui, sans-serif; color: #8a8f98; }
.bdsp-caixa.balao .bdsp-n { left: calc(100% + 58px); }
.bdsp-linha.passa .bdsp-n { color: #e53935; }
.bdsp-var { background: rgba(255, 213, 79, .55); border-radius: 2px; }
.bdsp-ramo { text-decoration: underline dotted rgba(37, 99, 235, .7); text-underline-offset: 3px; }
.bdsp-art { color: #9aa0a8; font-size: 70%; }
.bdsp-caixa-n { position: absolute; top: -12px; left: 12px; padding: 0 6px; border-radius: 6px; background: #6f747c; font: 11px/17px system-ui, sans-serif; color: #fff; }
.bdsp-seta { position: absolute; right: 2.4%; bottom: 8%; font-size: 12px; color: #6f747c; }
:root[data-tema="escuro"] .bdsp-caixa.balao { box-shadow: inset -14px 0 0 #c9ccd1, 0 2px 6px rgba(0, 0, 0, .4); }

/* ---------- etapa 22.1: planilhas genéricas — o que é cada coluna ---------- */
.tabela-colunas td { vertical-align: top; }
.tabela-colunas td.coluna-nome { width: 26%; min-width: 150px; }
.tabela-colunas td.coluna-nome b { overflow-wrap: anywhere; }
.tabela-colunas td.papel-coluna { width: 38%; min-width: 220px; }
.tabela-colunas td.papel-coluna .suave { margin-top: 4px; }
.tabela-colunas .papel-selects { display: flex; flex-wrap: wrap; gap: 6px; }
.tabela-colunas .papel-selects select { flex: 1 1 140px; min-width: 0; width: auto; }
.letra-coluna { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 5px; margin-right: 6px;
  border-radius: 5px; background: var(--fundo); border: 1px solid var(--borda); font-family: var(--mono); font-size: 11px; color: var(--suave); vertical-align: 1px; }
.tabela-colunas tr.coluna-ignorada td.coluna-nome b, .tabela-colunas tr.coluna-ignorada .amostra-celula { opacity: .55; }
.chip.suave { opacity: .75; }
@media (max-width: 760px) {
  /* no celular, cada coluna da planilha vira um bloco: nome, exemplos e "importar como" um embaixo do outro */
  .tabela-colunas thead { display: none; }
  .tabela-colunas, .tabela-colunas tbody, .tabela-colunas tr, .tabela-colunas td { display: block; width: auto !important; min-width: 0 !important; }
  .tabela-colunas tr { padding: 10px 0; border-bottom: 1px solid var(--borda); }
  .tabela-colunas td { border: 0; padding: 4px 8px; }
  .tabela-colunas td.amostra-coluna, .tabela-colunas td.amostra-coluna .amostra-celula { max-width: 100%; }
}
/* a janela de envio de planilha não pode ficar mais larga que a tela por causa de um exemplo comprido */
.janela-corpo form, .planilha-opcoes, .lista-envio { grid-template-columns: minmax(0, 1fr); }
.janela-corpo .grade-2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.bloco-importacao, .importar-corpo { grid-template-columns: minmax(0, 1fr); }
.bloco-importacao .chip { white-space: normal; max-width: 100%; }

/* etapa 25: inteligência artificial */
.pessoa-linha { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.campo-com-botao { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.campo-com-botao > label { flex: 1 1 220px; min-width: 0; }
.ia-projetos { border: 1px solid var(--borda); border-radius: 8px; padding: 10px 14px 12px; margin: 0; display: grid; gap: 8px; min-width: 0; }
.ia-projetos legend { font-weight: 600; font-size: 14px; padding: 0 4px; }
.ia-projetos-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 6px 14px; max-height: 220px; overflow: auto; }
.ia-projetos-lista .caixa { font-weight: 400; }
.ia-projetos-chave, .ia-emprestada-para { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.ia-emprestada-para .chip { display: inline-flex; align-items: center; gap: 6px; }
.ia-limite-pessoa { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ia-limite-pessoa select { width: auto; }
.ia-nota { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 6px; }
.ia-nota .ic { color: var(--primaria); flex: none; }
.ia-bloco { display: grid; gap: 6px; margin-bottom: 8px; min-width: 0; }
.ia-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.ia-acoes .ia-chave { width: auto; max-width: 100%; font-size: 13px; padding: 4px 8px; }
.sug-ia .sug-meta .ic { color: var(--primaria); }
.passos-ia { background: var(--fundo); border: 1px solid var(--borda); border-radius: 8px; padding: 8px 12px; font-size: 14px; }
.passos-ia summary { cursor: pointer; font-weight: 600; color: var(--primaria); }
.passos-ia ol { margin: 8px 0 2px; padding-left: 20px; display: grid; gap: 4px; }
.cartao.sem-margem > .ia-fim { padding-bottom: 16px; }
.ia-campo-limite { display: grid; gap: 6px; }
.ia-campo-limite select { width: auto; }
.ia-campo-limite .perm-limite { display: flex; flex-wrap: wrap; } /* 0.25.4: no celular passava 5 px da tela */
.ia-por-pessoa { margin: 20px 0 8px; font-size: 15px; }

/* etapa 25.1: botão Mais nas abas e seções agrupadas da organização */
.abas .aba-escondida { display: none !important; }
.abas button.abas-mais { flex: none; position: relative; }
.abas button.abas-mais .ponto-mais { width: 7px; height: 7px; border-radius: 50%; background: var(--erro); }
.abas-sub .abas { margin-bottom: 14px; }
.abas-sub .abas button { padding: 8px 10px; font-size: 14px; }
.painel-org { grid-template-columns: 200px minmax(0, 1fr); }
.painel-org > .parte-agrupada { min-width: 0; }
.painel-org .menu .contador { margin-left: auto; }
.lista-caixas { display: grid; gap: 10px; }
.lista-caixas .caixa small { font-weight: 400; }
@media (max-width: 760px) { .painel-org { grid-template-columns: minmax(0, 1fr); } }