/* ============================================================================
   estilo.css — base do painel: fontes, tokens, casca, peças compartilhadas e login.
   Valores copiados do Plutus (docs/visual/plutus-kit.md). Sem transição/animação,
   sem hover em linha de tabela, sem anel de foco: o foco só realça a borda.
   ============================================================================ */

/* fontes locais (cópia do Plutus em web/fontes). O login deslogado não enxerga /fontes/:
   ele traz as suas embutidas no próprio HTML (login.html). */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fontes/dm-sans-300.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fontes/dm-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fontes/dm-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fontes/dm-sans-600.woff2') format('woff2'); }

:root {
  /* nomes do painel mantidos (lancador.css e presets.css usam); valores = Plutus */
  --fundo: #f7f5f0; --card: #ffffff; --quente: #faf8f4;
  --texto: #6b6358; --forte: #6b6358; /* era o quase-preto: no Plutus o texto forte é taupe + peso 600 */
  --suave: #9e9588; --fraco: #c4bdb2;
  --borda: #e8e4dc; --borda-leve: #f0ece4;
  --ouro: #b8943f; --ouro-leve: rgba(184, 148, 63, .10);
  --ok: #3d8c52;
  --alerta: #9c7a32; --alerta-fundo: rgba(156, 122, 50, .13);
  --erro: #c05040; --erro-fundo: rgba(192, 80, 64, .10);
  --neutro: #9e9588; --neutro-fundo: #faf8f4; /* = .badge.draft do Plutus */
  --sombra: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 14px rgba(0, 0, 0, .05);
  --raio: 20px; --raio-campo: 12px;
  /* novos (só somam) */
  --ouro-claro: #d4b86a;
  --sombra-sm: 0 1px 2px rgba(0, 0, 0, .04), 0 3px 10px rgba(0, 0, 0, .04);
  --sombra-md: 0 8px 24px rgba(0, 0, 0, .09);
  --sombra-lg: 0 18px 44px rgba(0, 0, 0, .14);
  --veu: rgba(26, 23, 20, .42);
  /* "marcado" sem ouro: segmentado, checkbox, radio, opção escolhida (Lançador e Presets usam o mesmo) */
  --marcado-borda: color-mix(in srgb, #6b6358 45%, transparent);
  --marcado-fundo: color-mix(in srgb, #6b6358 7%, #ffffff);
  --largura-lateral: clamp(220px, 15vw, 272px);
  --fonte: 'DM Sans', -apple-system, BlinkMacSystemFont, ui-sans-serif, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background-color: var(--fundo);
  background-image: radial-gradient(circle at 1px 1px, rgba(107, 99, 88, .05) .5px, transparent .6px);
  background-size: 20px 20px;
  color: var(--texto); font: 400 13px/1.5 var(--fonte); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; } /* nenhuma classe com display derruba o hidden (ex.: o erro do login) */
:focus-visible { outline: none; }       /* sem anel: cada peça realça a própria borda */

/* casca: sidebar flutuante do Plutus (.sb). Entrelinha "normal" como no Plutus (o body dele não define line-height):
   é o que dá o passo de ~42px entre os itens do menu e a altura das linhas da tabela. O 1.5 do body fica pras páginas de texto. */
.shell { display: grid; grid-template-columns: var(--largura-lateral) minmax(0, 1fr); min-height: 100vh; line-height: normal; }
.lateral {
  position: sticky; top: 14px; z-index: 2; display: flex; flex-direction: column;
  height: calc(100vh - 28px); margin: 14px 0 14px 14px;
  padding: clamp(12px, 2vh, 24px) 0 clamp(8px, 1.5vh, 15px);
  overflow-x: hidden; overflow-y: auto; scrollbar-width: none;
  background: var(--card); border: 1px solid var(--borda-leve); border-radius: 20px; corner-shape: squircle; box-shadow: var(--sombra);
}
.lateral::-webkit-scrollbar { display: none; }
.grupo { margin: clamp(8px, 1.5vh, 20px) 18px calc(6px + clamp(4px, .6vh, 8px)); padding: 0 8px; font-size: clamp(10px, 1.3vh, 11px); font-weight: 600; letter-spacing: clamp(1.5px, .3vh, 2.4px); text-transform: uppercase; color: var(--fraco); }
.marca + .grupo { margin-top: 0; }
.lateral a { display: flex; align-items: center; gap: 12px; margin: clamp(0px, .15vh, 2px) 10px; padding: clamp(6px, .9vh, 10px) 14px; border-radius: 11px; font-size: clamp(13px, 1.8vh, 15px); font-weight: 400; color: var(--texto); white-space: nowrap; }
.lateral a svg { width: clamp(16px, 2vh, 21px); height: clamp(16px, 2vh, 21px); flex-shrink: 0; stroke: currentColor; stroke-width: 2; }
.lateral a.ativo { background: linear-gradient(135deg, var(--ouro-leve), transparent); color: var(--ouro); font-weight: 500; }
.lateral a:not(.ativo):focus-visible { background: var(--quente); }
.espaco { flex: 1; }
.sair { margin: 0 10px; padding: clamp(6px, .9vh, 10px) 14px; border: 0; border-radius: 11px; background: none; font-size: clamp(13px, 1.8vh, 15px); color: var(--suave); text-align: left; cursor: pointer; }
.sair:hover, .sair:focus-visible { color: var(--texto); }

/* marca · opção B escolhida pelo Δ: "Axiom." em DM Sans 600 32px, cinza-quente, só o ponto em ouro.
   24px à esquerda = margem 10 + respiro 14 do item: alinha com os ícones do menu. O ponto não entra na conta dos 2 ouros. */
.marca { padding: clamp(8px, 1.4vh, 18px) 24px clamp(16px, 2.6vh, 30px); font-size: 32px; font-weight: 600; line-height: 1; letter-spacing: -.035em; color: var(--texto); }
.marca b { font-weight: 600; color: var(--ouro); }

/* topo da página (Plutus .hd) e área de conteúdo (.content) */
.principal { display: flex; flex-direction: column; min-width: 0; }
.topo { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 38px 16px; }
.topo::after { content: ''; position: absolute; left: 38px; right: 38px; bottom: 0; height: 1px; background: var(--borda-leve); }
.topo > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.topo h1 { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.1; letter-spacing: -.4px; color: var(--texto); }
.topo p { margin: 0; font-size: 13px; color: var(--suave); }
.leitura { display: flex; flex-shrink: 0; align-items: center; gap: 10px; font-size: 12px; color: var(--fraco); }
.principal > main { flex: 1; padding: 30px 38px 56px; }

/* cartão (Plutus .dash-tablecard) e tabela (.svt), sem hover de linha */
.card { background: var(--card); border: 1px solid var(--borda-leve); border-radius: var(--raio); corner-shape: squircle; box-shadow: var(--sombra); overflow: hidden; }
.card + .card { margin-top: 16px; }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th { padding: 14px; border-bottom: 1px solid var(--borda-leve); text-align: left; font-size: 9px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--fraco); white-space: nowrap; }
.tabela td { padding: 13px 14px; border-bottom: 1px solid var(--borda-leve); vertical-align: middle; font-size: 13px; color: var(--texto); }
.tabela tr:last-child td { border-bottom: 0; }
.tabela .d { text-align: right; }
.forte { color: var(--texto); font-weight: 600; }
.sub { display: block; margin-top: 2px; font-size: 10px; color: var(--fraco); }
.muted { color: var(--suave); }
.tabela td.muted { color: var(--suave); } /* célula inteira apagada (ex.: "Enviado" em Criativos): sem isto a cor de .tabela td vence */
/* dinheiro alinhado pela moeda (Plutus/Deméter, B11): numa caixa de largura fixa o "US$" fica na ponta esquerda e o número encostado na direita,
   então o "US$" de todas as linhas fica um embaixo do outro. Vale pro dinheiro de Contas (Saldo, Gasto e totais) e do Lançador (etapa 3, Gasto).
   A caixa encosta na direita da célula, onde o número já ficava, e o título da coluna continua em cima dele. A largura é um mínimo: valor que
   não cabe (na casa dos milhões de dólares) alarga a caixa em vez de passar por cima da coluna do lado. Só posiciona: cor e peso vêm da célula
   ou da própria caixa (.forte, .muted, .lz-nada, tfoot). Neutro: sem ouro, sem hover, sem transição. */
.dinheiro { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; width: fit-content; min-width: 112px; margin-left: auto; white-space: nowrap; }
.apagada td { opacity: .55; }
.rodape { margin: 0; padding: 11px 14px; border-top: 1px solid var(--borda-leve); font-size: 11px; color: var(--suave); }

/* paginação das tabelas (Plutus .tpag, montada por paginacao.js colada na tabela): "Itens por página [10 ⌄]" à esquerda,
   "‹ 1 de N ›" no centro, tudo 11px --fraco. Sem transição, sem efeito ao clicar, sem ouro: a opção escolhida fica em
   --texto 600 e o foco só muda a borda. As linhas fora da página levam [hidden]; a última visível perde a divisória. */
.tabela tbody tr.pg-ultima td { border-bottom: 0; }
.tpag { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 16px; padding: 8px 20px; border-top: 1px solid var(--borda-leve); }
.pg-per { display: inline-flex; justify-self: start; align-items: center; gap: 10px; }
.pg-perlbl { font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0; color: var(--fraco); white-space: nowrap; user-select: none; }
.pg-select { position: relative; display: inline-flex; align-items: center; }
.pg-trigger { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border: 1px solid var(--borda-leve); border-radius: 999px; background: transparent; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0; color: var(--fraco); font-variant-numeric: tabular-nums; cursor: pointer; }
.pg-trigger:focus-visible { outline: none; border-color: var(--suave); }
.pg-caret { width: 6px; height: 6px; border-right: 1.5px solid var(--fraco); border-bottom: 1.5px solid var(--fraco); transform: translateY(-2px) rotate(45deg); }
.pg-trigger[aria-expanded="true"] .pg-caret { transform: translateY(1px) rotate(225deg); }
/* menu próprio abrindo pra cima; aberto, o card para de cortar o que passa da borda (tabela de 1 ou 2 linhas) */
.pg-menu { position: absolute; bottom: calc(100% + 7px); left: 0; z-index: 30; min-width: 100%; margin: 0; padding: 5px; border: 1px solid var(--borda-leve); border-radius: 12px; corner-shape: squircle; background: var(--card); box-shadow: var(--sombra-md); }
.card:has(.pg-menu:not([hidden])) { overflow: visible; }
.pg-opt { display: block; width: 100%; padding: 7px 14px; border: 0; border-radius: 8px; background: transparent; font-size: 13px; color: var(--texto); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: left; cursor: pointer; }
.pg-opt:hover, .pg-opt:focus-visible { outline: none; background: var(--fundo); } /* = .pg-opt:hover do Plutus (--bg) */
.pg-opt[aria-selected="true"] { font-weight: 600; color: var(--texto); }
.pg { display: inline-flex; justify-self: center; align-items: center; gap: 13px; }
.pg-count { font-size: 11px; letter-spacing: 0; color: var(--fraco); font-variant-numeric: tabular-nums; user-select: none; }
.pg-count strong { font-weight: 400; color: var(--fraco); }
.pg-nav { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--borda-leve); border-radius: 50%; background: transparent; color: var(--fraco); cursor: pointer; }
.pg-nav svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pg-nav:not(:disabled):hover { color: var(--texto); }
.pg-nav:focus-visible { outline: none; border-color: var(--suave); }
.pg-nav:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 640px) { .tpag { column-gap: 10px; padding: 8px 14px; } .pg-perlbl { display: none; } }

/* tabela viva (montada por tabela.js): título que ordena, campo de busca e pílulas de filtro acima da tabela. Tudo em
   tinta neutra (nunca ouro), sem transição, sem hover em linha. A seta some parada, aparece no título (mouse ou Tab) e
   fica na coluna ordenada; o lugar dela é sempre reservado, então a coluna não pula. Pílula ligada = o "marcado" cinza do
   Lançador. Foco = só a borda muda. Linha fora do filtro leva [hidden] (e data-tb-fora, que o paginar() lê). */
th[data-ord-col] { cursor: pointer; user-select: none; }
.tb-ord { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; border-bottom: 1px solid transparent; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; white-space: inherit; cursor: pointer; }
th.d .tb-ord { flex-direction: row-reverse; } /* número à direita: a seta fica à esquerda e o título continua alinhado com os valores */
.tb-ord:focus-visible { outline: none; border-bottom-color: var(--suave); }
.tb-seta { width: 10px; height: 10px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
th[data-ord-col]:hover .tb-seta, .tb-ord:focus-visible .tb-seta { visibility: visible; } /* no título, nunca na linha */
th[aria-sort] .tb-ord { color: var(--suave); }
th[aria-sort] .tb-seta { visibility: visible; color: var(--texto); }
th[aria-sort="descending"] .tb-seta { transform: rotate(180deg); }
.tb-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 20px; border-bottom: 1px solid var(--borda-leve); }
.tb-busca { position: relative; display: inline-flex; align-items: center; flex: 0 1 260px; min-width: 170px; }
.tb-busca svg { position: absolute; top: 9px; left: 12px; width: 14px; height: 14px; fill: none; stroke: var(--fraco); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.tb-busca input { width: 100%; height: 32px; padding: 0 12px 0 34px; border: 1px solid var(--borda-leve); border-radius: 999px; background: var(--card); font-size: 12.5px; color: var(--texto); outline: none; -webkit-appearance: none; appearance: none; }
.tb-busca input::placeholder { color: var(--fraco); }
.tb-busca input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.tb-busca input:hover { border-color: var(--borda); }
.tb-busca input:focus, .tb-busca input:focus-visible { border-color: var(--suave); }
.tb-pilulas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tb-pilula { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border: 1px solid var(--borda-leve); border-radius: 999px; background: transparent; font-size: 12px; line-height: 1; color: var(--suave); white-space: nowrap; cursor: pointer; }
.tb-pilula:hover { border-color: var(--borda); color: var(--texto); }
.tb-pilula:focus-visible { outline: none; border-color: var(--suave); }
.tb-pilula[aria-pressed="true"] { border-color: var(--marcado-borda); background: var(--marcado-fundo); color: var(--texto); }
.tb-resumo { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 11px; color: var(--suave); }
.tb-resumo .link { font-size: 11px; font-weight: 400; }
.tabela .tb-vazio td { padding: 30px 14px; border-bottom: 0; text-align: center; color: var(--suave); }
@media (max-width: 640px) { .tb-barra { padding: 10px 14px; } .tb-busca { flex-basis: 100%; } .tb-resumo { margin-left: 0; } }

/* pílula de status (Plutus .badge) */
.pilula { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border-radius: 999px; font-size: 9px; font-weight: 600; letter-spacing: .2px; line-height: 1.3; white-space: nowrap; }
.pilula i { width: 5px; height: 5px; flex-shrink: 0; border-radius: 50%; background: currentColor; }
.pilula.ok { background: color-mix(in srgb, var(--ok) 13%, transparent); color: color-mix(in srgb, var(--ok) 78%, transparent); }
.pilula.alerta { background: color-mix(in srgb, var(--alerta) 13%, transparent); color: color-mix(in srgb, var(--alerta) 80%, transparent); }
.pilula.erro { background: color-mix(in srgb, var(--erro) 13%, transparent); color: color-mix(in srgb, var(--erro) 78%, transparent); }
.pilula.neutro { background: var(--neutro-fundo); color: var(--neutro); }

/* barra de uso (Plutus .dm-bar): trilho bege com contorno; cheio neutro (ouro fica pro botão principal) */
.barra { display: inline-block; width: 120px; height: 5px; overflow: hidden; vertical-align: middle; border: 1px solid var(--borda-leve); border-radius: 999px; background: var(--quente); }
.barra i { display: block; height: 100%; border-radius: 999px; background: color-mix(in srgb, var(--texto) 45%, transparent); }
.barra.alerta i { background: var(--alerta); }
.barra.erro i { background: var(--erro); }

/* botões (Plutus .fm-ghost / .fm-primary / .btn-pill.sm) */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 18px; border: 1px solid var(--borda); border-radius: 999px; background: var(--card); color: var(--texto); font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.botao svg { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.botao:hover:not(:disabled), .botao:focus-visible { border-color: var(--fraco); }
.botao.primario, .botao.perigo { padding: 0 20px; border-color: transparent; color: #fff; }
.botao.primario { background: var(--ouro); }
.botao.perigo { background: var(--erro); }
.botao.primario:hover:not(:disabled), .botao.perigo:hover:not(:disabled),
.botao.primario:focus-visible, .botao.perigo:focus-visible { border-color: transparent; opacity: .88; }
.botao:disabled { opacity: .55; cursor: default; }
.botao.pequeno { height: 30px; padding: 0 13px; font-size: 11px; }
.botao.largo { width: 100%; margin-top: 14px; }
/* link de texto neutro (= .lz-btn-texto; não gasta ouro) */
.link { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; font-size: 12px; font-weight: 600; color: var(--suave); text-decoration: underline; text-decoration-color: var(--fraco); text-underline-offset: 3px; cursor: pointer; }
.link:hover, .link:focus-visible { color: var(--texto); }

/* campos (Plutus .fm-input): 42px, raio 12, borda creme; foco = borda + brilho quase invisível */
.campo { width: 100%; height: 42px; padding: 0 13px; border: 1px solid var(--borda-leve); border-radius: var(--raio-campo); corner-shape: squircle; background: var(--card); font-size: 13px; color: var(--texto); outline: none; }
.campo::placeholder { color: var(--fraco); }
.campo:hover { border-color: var(--borda); }
.campo:focus, .campo:focus-visible { border-color: var(--borda); box-shadow: 0 0 4px rgba(107, 99, 88, .06); }
.campo.curto { max-width: 320px; }
textarea.campo { height: 84px; padding: 10px 12px; resize: vertical; }
select.campo { appearance: none; padding-right: 34px; cursor: pointer; background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23c4bdb2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 13px center; }
.rotulo { display: block; margin: 0 0 4px; font-size: 11px; font-weight: 500; color: var(--suave); }
.linha { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.linha > * { flex: 1; min-width: 160px; }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.check input { width: 15px; height: 15px; accent-color: var(--ouro); }

/* barra acima do card: rótulo pequeno + título à esquerda, ações à direita (Plutus .atc-bar + .bmA) */
.barra-topo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.barra-topo .acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sobrancelha { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; font-size: 10.5px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--fraco); }
.sobrancelha svg { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.titulo-bloco { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: -.3px; color: var(--texto); }
.titulo-bloco .apoio { font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--fraco); }

/* confirmação inline (não existe no Plutus: composição com a moldura do .cfg-card e os botões do .fm-cf-acts) */
.barra-acao { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; padding: 10px 12px 10px 18px; background: var(--card); border: 1px solid var(--borda-leve); border-radius: 14px; corner-shape: squircle; box-shadow: var(--sombra-sm); }
.barra-acao .texto { flex: 1; min-width: 200px; font-size: 13px; line-height: 1.45; color: var(--texto); }
/* erro = texto vermelho, sem caixa (Plutus .acnw-warn). Sem "display" aqui: o login usa [hidden]. */
.aviso { margin: 0 0 16px; font-size: 12.5px; line-height: 1.5; color: var(--erro); }
/* vazio (Plutus .es.es-lg): ícone cinza sem fundo + título + apoio */
.vazio { display: flex; flex-direction: column; align-items: center; padding: 64px 24px; text-align: center; }
.vazio svg { width: 38px; height: 38px; margin-bottom: 13px; fill: none; stroke: var(--fraco); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.vazio-t { margin: 0; font-size: 15px; font-weight: 500; letter-spacing: -.01em; color: var(--suave); }
.vazio-s { margin: 6px 0 0; font-size: 13px; color: var(--fraco); }

/* login (só /estilo.css é público: nada de arquivo CSS novo) */
.login { display: grid; place-items: center; min-height: 100vh; padding: 16px; line-height: normal; }
.login form { width: 360px; max-width: 100%; padding: 30px 28px 28px; }
.login .marca { padding: 4px 0 24px; text-align: center; }
.login .aviso { margin: 6px 2px 0; font-size: 11px; }

/* tela estreita: sidebar vira faixa no topo, 16px de respiro lateral */
@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: static; flex-direction: row; flex-wrap: wrap; align-items: center; height: auto; margin: 14px 14px 0; padding: 8px 4px; }
  .lateral a, .sair { margin: 2px 4px; font-size: 13px; }
  .grupo, .espaco { display: none; }
  .marca { padding: 8px 12px; }
  .topo { padding: 18px 16px 14px; }
  .topo::after { left: 16px; right: 16px; }
  .principal > main { padding: 20px 16px 40px; }
}

/* ---- blocos por tela (tarefa 2) ---- */

/* criativos: árvore (Plutus .cfg-grid 300px) + área com barra acima do card (.acr-bar/.bmA). Pasta ativa neutra: o ouro fica no menu e em "Enviar arquivos" */
.criativos { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.criativos .card + .card { margin-top: 0; }
.arvore { padding: 12px 10px; }
.arvore ul { list-style: none; margin: 0; padding: 0 0 0 12px; }
.arvore > ul { padding-left: 0; }
.arvore a { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; font-size: 13px; color: var(--texto); }
.arvore a .nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arvore a .conta { flex-shrink: 0; font-size: 11px; color: var(--fraco); }
.arvore a.ativo, .arvore a:focus-visible { background: var(--quente); }
.arvore a.ativo { font-weight: 600; }
.disco { margin: 10px 10px 0; padding-top: 10px; border-top: 1px solid var(--borda-leve); font-size: 11px; color: var(--fraco); }
.disco.alerta { color: var(--alerta); font-weight: 600; }
.area { position: relative; }
.area .barra-acao, .area .aviso { margin: 0 0 16px; }
.envio { margin: 0 0 16px; font-size: 12.5px; color: var(--suave); }
/* miniatura quadrada (Plutus .acr-th: 40px, raio 10, degradê creme, contorno fino) */
.col-mini { width: 56px; }
.miniatura { display: block; width: 40px; height: 40px; object-fit: cover; border: 1px solid var(--borda-leve); border-radius: 10px; background: linear-gradient(135deg, var(--quente), var(--borda-leve)); transition: transform .1s ease, border-color .1s ease; }
a:hover > .miniatura { border-color: var(--ouro); transform: scale(1.05); }
/* pílula do tipo (Vídeo / Imagem) na tabela de criativos */
.pilula-tipo {
  display: inline-block; padding: 2px 8px; font-size: 11px; font-weight: 500;
  border-radius: 12px; background: var(--quente); border: 1px solid var(--borda-leve); color: var(--texto);
}
.pilula-tipo.video { background: var(--quente); border-color: var(--borda); color: var(--texto); }
.pilula-tipo.imagem { background: var(--quente); border-color: var(--borda); color: var(--texto); }
/* soltar arquivo (Plutus .acnw-media): tracejado e texto cinzas, sem ouro. A moldura sobra 8px pra fora da área:
   com inset 0 a curva do canto (raio 20) começava no mesmo ponto do ícone de "PASTA" e a ponta dele escapava */
.solte { position: absolute; inset: -8px; z-index: 3; display: none; place-items: center; border: 1.5px dashed var(--fraco); border-radius: var(--raio); background: rgba(250, 248, 244, .94); color: var(--suave); font-weight: 600; }
.area.soltando .solte { display: grid; }
@media (max-width: 860px) { .criativos { grid-template-columns: 1fr; } }

/* lançamentos: nº do lote como a Ref. do Plutus (.it-num "#1042", "#" mais claro) e topo do lote numa barra acima do card */
.ref { font-size: 11px; letter-spacing: .2px; color: var(--suave); }
.ref .h { margin-right: 1px; color: var(--fraco); }
.lote-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--suave); }
.acoes-final .muted { font-size: 12px; }
.erro-texto { color: var(--erro); max-width: 360px; }
.sub.erro-texto { font-size: 11px; }

/* contas: linha de totais sem fundo, só a divisória mais forte (o teste exige <tfoot> puro) */
.tabela tfoot td { border-top: 1px solid var(--borda); border-bottom: 0; background: none; font-weight: 600; color: var(--texto); }

/* páginas: pílula de problema ao lado do nome */
.nome-status { display: flex; align-items: center; gap: 8px; }

/* menu de ações da linha (montado por menu-linha.js): coluna "Ações" com o ⋮ sempre visível e o menu que abre no clique do ⋮ ou no
   botão direito em qualquer ponto da linha. Visual copiado do .lz-drop do Lançador (borda leve, raio 12, sombra-md, opção bege ao
   passar o mouse ou focar). Tudo neutro: nunca ouro, sem transição, sem hover na linha (reagem só o botão ⋮ e as opções do menu),
   foco = só a borda (na opção do menu, o fundo bege, como no .lz-drop-opt). O menu é fixo na janela: o JS calcula a posição (cola
   no ⋮ ou no cursor e vira pra cima ou pra esquerda se não cabe), então o card (overflow: hidden) não corta e a tabela não mexe. */
.menu-linha-cel { width: 1%; text-align: center; white-space: nowrap; }
.tabela .menu-linha-cel { padding-top: 7px; padding-bottom: 7px; text-align: center; } /* 28px do botão + 14 = a altura de uma linha de texto: a tabela não engorda */
.tabela th.menu-linha-cel { padding-top: 14px; padding-bottom: 14px; }                 /* o título "Ações" tem o respiro dos outros títulos */
.menu-linha-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--suave); cursor: pointer; }
.menu-linha-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; pointer-events: none; }
.menu-linha-btn:hover, .menu-linha-btn[aria-expanded="true"] { border-color: var(--borda); color: var(--texto); } /* aberto, o ⋮ da linha fica marcado (também no botão direito) */
.menu-linha-btn:focus-visible { outline: none; border-color: var(--suave); }
.menu-linha { position: fixed; z-index: 50; min-width: 188px; max-width: 320px; padding: 5px; border: 1px solid var(--borda-leve); border-radius: 12px; corner-shape: squircle; background: var(--card); box-shadow: var(--sombra-md); user-select: none; }
.menu-linha-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; font-size: 12.5px; color: var(--texto); text-align: left; white-space: nowrap; cursor: pointer; }
.menu-linha-item:hover, .menu-linha-item:focus-visible { outline: none; background: var(--quente); }
.menu-linha-item svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: var(--suave); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.menu-linha-rotulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.menu-linha-item.perigo { color: var(--erro); }
.menu-linha-item.perigo svg { stroke: var(--erro); }
.menu-linha-sep { height: 1px; margin: 5px 6px; background: var(--borda-leve); }

/* aviso rápido (aviso.js): pílula clara embaixo, no centro, ~2,5 s. Medidas e sombra do toast do Plutus (docs/visual/plutus-kit.md §2.24), sem a
   mola de entrada e sem movimento nenhum: a pílula nasce e some direto (o aviso.js a tira com um timer). A caixa #avisos (index.html, aria-live)
   é fixa na janela, não pega clique e empilha os avisos com o mais novo embaixo. Tudo neutro: ícone --suave, nome em negrito, nunca ouro. */
#avisos { position: fixed; left: 0; right: 0; bottom: 30px; z-index: 9999; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 16px; pointer-events: none; }
.aviso-toast { display: flex; align-items: center; gap: 11px; max-width: min(520px, 100%); padding: 12px 21px; border: 1px solid var(--borda-leve); border-radius: 999px; background: var(--card); box-shadow: 0 12px 30px rgba(0, 0, 0, .07), 0 2px 6px rgba(0, 0, 0, .04); font-size: 13px; line-height: normal; color: var(--texto); }
.aviso-toast-ic { display: inline-flex; flex-shrink: 0; color: var(--suave); }
.aviso-toast-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.aviso-toast-msg { min-width: 0; overflow-wrap: anywhere; }
.aviso-toast b { font-weight: 600; color: var(--texto); }

/* lançamento #N: marcar anúncios e a barra de ações em massa (montadas pela tela lancamentos.js). A caixinha é a do Lançador (quadrado de 18px, ✓ branco
   no taupe cheio, traço no meio-termo) e o estado vai no aria-checked do botão: marcar é trocar um atributo, sem refazer a tabela. Tudo em tinta neutra
   (marcado = --texto, linha marcada = o cinza-claro do "marcado"), nunca ouro; sem transição, sem animação e sem hover em linha (a linha marcada vem do
   aria-checked, não do mouse). A barra é uma pílula clara presa no rodapé da janela, no centro (padrão da Atena e do Hermes do OD, sem a subida): fica
   fora do fluxo, então não empurra a tabela; com ela na tela a página ganha um respiro embaixo pra ela não cobrir o rodapé da paginação. Foco = só a borda. */
.tabela .lote-selecao-col { width: 44px; padding: 7px 0 7px 14px; line-height: 0; } /* 26px do botão + 14 = a altura de uma linha de texto (sem entrelinha em volta do botão): a tabela não engorda */
.lote-selecao-caixa { display: inline-flex; vertical-align: middle; padding: 4px; border: 0; border-radius: 7px; background: none; cursor: pointer; }
.lote-selecao-caixa:disabled { opacity: .45; cursor: default; }
.lote-selecao-marca { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 18px; height: 18px; border: 1.5px solid var(--borda); border-radius: 5px; background: var(--card); }
.lote-selecao-marca svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.lote-selecao-caixa[aria-checked="true"] .lote-selecao-marca, .lote-selecao-caixa[aria-checked="mixed"] .lote-selecao-marca { border-color: transparent; background: var(--texto); }
.lote-selecao-caixa[aria-checked="true"] .lote-selecao-marca svg { opacity: 1; }
.lote-selecao-caixa[aria-checked="mixed"] .lote-selecao-marca::after { content: ''; width: 9px; height: 1.6px; border-radius: 1px; background: #fff; }
.lote-selecao-caixa:focus-visible { outline: none; }
.lote-selecao-caixa:focus-visible .lote-selecao-marca { border-color: var(--suave); }
.tabela tr:has(.lote-selecao-caixa[aria-checked="true"]) td { background: var(--marcado-fundo); }
.lote-selecao { position: fixed; left: 0; right: 0; bottom: 30px; z-index: 40; display: flex; align-items: center; gap: 2px; width: max-content; max-width: calc(100vw - 32px); margin: 0 auto; padding: 5px 8px 5px 20px; border: 1px solid var(--borda-leve); border-radius: 14px; corner-shape: squircle; background: var(--card); box-shadow: var(--sombra-lg); font-size: 12.5px; color: var(--texto); }
.lote-selecao-n { margin-right: 4px; font-weight: 600; white-space: nowrap; }
.lote-selecao-sep { width: 1px; height: 20px; margin: 0 8px 0 6px; background: var(--borda-leve); }
.lote-selecao-acao, .lote-selecao-x { display: inline-flex; align-items: center; border: 1px solid transparent; background: none; color: var(--texto); white-space: nowrap; cursor: pointer; }
.lote-selecao-acao { gap: 7px; height: 32px; padding: 0 12px; border-radius: 9px; font-size: 12.5px; }
.lote-selecao-acao svg { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: var(--suave); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lote-selecao-acao:hover:not(:disabled) svg, .lote-selecao-acao:focus-visible svg { stroke: var(--texto); }
.lote-selecao-acao:disabled { opacity: .45; cursor: default; }
.lote-selecao-x { justify-content: center; width: 28px; height: 28px; padding: 0; border-radius: 8px; color: var(--fraco); }
.lote-selecao-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lote-selecao-x:hover, .lote-selecao-x:focus-visible { color: var(--texto); }
.lote-selecao-acao:focus-visible, .lote-selecao-x:focus-visible { outline: none; border-color: var(--suave); }
.principal > main:has(.lote-selecao:not([hidden])) { padding-bottom: 112px; }
body:has(#avisos .aviso-toast) .lote-selecao { bottom: 86px; } /* o aviso rápido também mora embaixo, no centro (2,5 s): enquanto ele está na tela a barra sobe e não fica por baixo dele */