/* ============================================================
   IP Ads - a pele do painel. NENHUMA cor nasce aqui: tudo consome
   var(--...) do tokens.css (fonte unica, apps/design-system).
   Medidas e raios seguem o handoff (design/handoff/README.md,
   secao Design tokens): rail 64, header 60, raio 10/14/20,
   base de espacamento 4px, profundidade = borda sutil + sombra
   escura, nunca glow.
   ============================================================ */

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg-app);color:var(--fg-1);font-family:var(--font-ui);font-size:14px;line-height:1.5}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--font-display);letter-spacing:-.02em;font-weight:700}
h1{font-size:28px}h2{font-size:22px}h3{font-size:18px}

/* numeros, metricas e eyebrows SEMPRE em mono (handoff) */
.mono{font-family:var(--font-mono)}
.eyebrow{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}

/* ---------- shell: rail 64px + header 60px + main ---------- */
body.com-rail{padding-left:64px}
body.sem-rail .top{display:none}   /* login: pagina solta, sem chrome */

.rail{position:fixed;left:0;top:0;bottom:0;width:64px;z-index:30;background:var(--bg-raised);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;padding:12px 0}
.rail-logo{width:38px;height:38px;border-radius:9px;overflow:hidden;flex-shrink:0}
.rail-div{width:28px;height:1px;background:var(--border-guia);margin:14px 0 10px}
.rail-itens{display:flex;flex-direction:column;align-items:center;gap:6px}
.rail-item{position:relative;width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:var(--fg-2);transition:background 120ms cubic-bezier(.2,0,0,1)}
.rail-item:hover{background:var(--bg-surface)}
.rail-item.on{background:var(--brand-tint);color:var(--brand-accent)}
.rail-barra{display:none}
.rail-item.on .rail-barra{display:block;position:absolute;left:-10px;top:11px;bottom:11px;width:3px;border-radius:0 3px 3px 0;background:var(--brand)}
.rail-badge{position:absolute;top:5px;right:6px;min-width:15px;height:15px;padding:0 3px;border-radius:var(--r-pill);background:var(--brand);color:var(--fg-on-brand);font-family:var(--font-mono);font-size:9px;font-weight:600;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg-raised)}
.rail-vao{flex:1}
.rail-sair{color:var(--fg-3)}

/* header sticky 60px com blur (handoff: rgba(14,14,14,.72) + blur 12px) */
.top{position:sticky;top:0;z-index:10;height:60px;background:color-mix(in srgb, var(--bg-app) 72%, transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.top .in{max-width:1200px;height:100%;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:0 var(--space-10)}
.top .ctx{display:flex;align-items:center;gap:10px;min-width:0}

.wrap{max-width:1200px;margin:0 auto;padding:36px 40px 64px}

/* ---------- botoes ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-display);font-weight:600;font-size:14px;padding:10px 18px;border-radius:10px;background:var(--brand);color:var(--fg-on-brand);transition:transform 120ms cubic-bezier(.2,0,0,1),background 120ms}
.btn:hover{background:var(--brand-amber)}
.btn:active{transform:scale(.97);background:var(--brand-active)}
.btn.sec{background:var(--bg-surface-2);color:var(--fg-1);border:1px solid var(--border)}
.btn.sec:hover{background:var(--bg-surface)}
.btn[disabled],.btn.off{opacity:.5;pointer-events:none}
.btn-sm{font-size:13px;padding:7px 13px}

/* ---------- inputs ---------- */
label{display:block;font-size:12px;color:var(--fg-2);margin:var(--space-4) 0 6px}
input,select,textarea{width:100%;background:var(--bg-surface-2);border:1px solid var(--border);border-radius:10px;padding:9px 12px;color:var(--fg-1)}
input::placeholder,textarea::placeholder{color:var(--fg-3)}
/* anel de foco laranja (handoff): cor vem do token --ring-brand */
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand-border);box-shadow:var(--ring-brand)}
button:focus-visible,a:focus-visible{outline:none;box-shadow:var(--ring-brand)}

/* ---------- pill de status (4 cores do handoff: fill 14%, borda ~34%) ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;padding:3px 10px;border-radius:var(--r-pill);border:1px solid var(--border);background:var(--bg-surface-2);color:var(--fg-2)}
.pill-positive{color:var(--positive);background:var(--positive-tint);border-color:var(--positive-border)}
.pill-warning{color:var(--warning);background:var(--warning-tint);border-color:var(--warning-border)}
.pill-negative{color:var(--negative);background:var(--negative-tint);border-color:var(--negative-border)}
.pill-info{color:var(--info);background:var(--info-tint);border-color:var(--info-border)}
.pill-neutro{color:var(--fg-2)}

/* ---------- selo de medicao (chip pequeno mono por cliente) ----------
   regra de cor em app/medicao.py: ok=positive, a_ligar=neutro,
   pendente=warning, sem_info=neutro APAGADO (nunca testado nao parece ok) */
.selo{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:10px;letter-spacing:.02em;padding:2px 8px;border-radius:var(--r-pill);border:1px solid var(--border);background:var(--bg-surface-2);color:var(--fg-3)}
.selo svg{flex-shrink:0}
.selo-positive{color:var(--positive);background:var(--positive-tint);border-color:var(--positive-border)}
.selo-warning{color:var(--warning);background:var(--warning-tint);border-color:var(--warning-border)}
.selo-neutro{color:var(--fg-2)}
.selo-apagado{color:var(--fg-3);background:var(--bg-raised);opacity:.75}

/* ---------- chips mono (filtros, plataforma, interesses, palavras) ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;padding:6px 12px;border-radius:var(--r-pill);border:1px solid var(--border);background:var(--bg-surface);color:var(--fg-2);transition:background 120ms}
.chip:hover{background:var(--bg-surface-2);color:var(--fg-1)}
.chip.on{color:var(--brand-accent);background:var(--brand-tint);border-color:var(--brand-border)}

/* ---------- cards ---------- */
/* card padrao (surface #1F1F1F via token, borda, raio 14 do handoff) */
.card{background:var(--bg-surface);border:1px solid var(--border);border-radius:14px;padding:var(--space-5);box-shadow:var(--shadow-card)}
/* card de cliente da Home: faixa lateral laranja 3px, hover sobe 2px + sombra */
.card-cliente{position:relative;display:block;overflow:hidden;transition:transform 120ms cubic-bezier(.2,0,0,1),box-shadow 120ms}
.card-cliente::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand)}
.card-cliente:hover{transform:translateY(-2px);box-shadow:var(--shadow-raised)}
/* tile de iniciais 46px (handoff: quadrado escuro com as iniciais em areia) */
.tile-iniciais{width:46px;height:46px;border-radius:11px;background:var(--bg-surface-2);border:1px solid var(--border);color:var(--brand-sand);font-family:var(--font-display);font-weight:700;font-size:17px;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* ---------- flashes ---------- */
.flash{margin:0 0 var(--space-4);padding:11px 14px;border-radius:10px;font-size:13px;border:1px solid var(--border)}
.flash-ok{color:var(--positive);background:var(--positive-tint);border-color:var(--positive-border)}
.flash-erro{color:var(--negative);background:var(--negative-tint);border-color:var(--negative-border)}

/* ---------- login (molde IP Jobs) ---------- */
.login-card{margin:48px auto 0;max-width:680px;display:grid;grid-template-columns:1fr 1.2fr;border:1px solid var(--border);border-radius:20px;background:var(--bg-raised);box-shadow:var(--shadow-raised);overflow:hidden}
.login-panel{background:linear-gradient(160deg,var(--brand-amber),var(--brand) 45%,var(--brand-deep));padding:26px var(--space-6);display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-5);min-height:400px}
.login-panel img{width:34px;height:34px}
.login-panel .title{font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--fg-on-brand);letter-spacing:-.02em;line-height:1.2}
.login-panel .sub{font-size:12.5px;color:color-mix(in srgb, var(--fg-on-brand) 88%, transparent);margin-top:6px;line-height:1.5}
.login-form{padding:34px 28px;display:flex;flex-direction:column;justify-content:center}
.login-form h1{font-size:19px;margin-bottom:var(--space-3)}
.login-form label:first-of-type{margin-top:0}
.login-form .row{display:flex;margin-top:var(--space-5)}
.login-form .btn{flex:1}
.alerta-erro{color:var(--negative);background:var(--negative-tint);border:1px solid var(--negative-border);border-radius:10px;padding:9px 12px;font-size:13px;margin-bottom:var(--space-3)}

/* ============================================================
   HOME (handoff: IP Ads Home.dc.html + 01-home.png)
   ============================================================ */

/* busca do header (280px, altura 38, radius 10 do handoff) */
.busca{display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;width:280px;background:var(--bg-surface-2);border:1px solid var(--border);border-radius:10px;color:var(--fg-3)}
.busca input{flex:1;min-width:0;border:none;background:transparent;padding:0;border-radius:0;font-size:13px}
.busca input:focus{outline:none;border:none;box-shadow:none}
.busca:focus-within{border-color:var(--brand-border);box-shadow:var(--ring-brand)}

/* cabeca da pagina */
.eyebrow-brand{color:var(--brand-accent);font-size:12px;letter-spacing:.14em}
.titulo-pagina{margin-top:10px;font-size:30px;line-height:1.1}
.sub-pagina{margin-top:8px;color:var(--fg-2)}

/* strip de 4 KPIs (componente Stat do handoff, ~124px) */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:26px}
.stat{background:var(--bg-surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px;min-height:124px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow-card)}
.stat-topo{display:flex;align-items:center;gap:9px;color:var(--fg-2);font-size:13px}
.stat-icone{width:26px;height:26px;border-radius:8px;background:var(--brand-tint);color:var(--brand-accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.stat-valor{font-family:var(--font-mono);font-size:28px;font-weight:700;letter-spacing:-.01em}

/* linha de filtros (chips pill mono) + contagem a direita */
.filtros{display:flex;align-items:center;gap:8px;margin-top:32px}
.filtros .chip{height:32px;padding:0 14px;font-size:12px}
.filtros-vao{flex:1}
.filtros-conta{font-size:11.5px;color:var(--fg-3)}
.dot{width:6px;height:6px;border-radius:var(--r-pill);background:currentColor;display:inline-block;flex-shrink:0}
.dot-warning{background:var(--warning)}

/* lista de cards de cliente (faixa laranja e hover ja em .card-cliente acima) */
.lista-clientes{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.card.card-cliente{padding:0}   /* o grid interno e quem da o respiro (handoff) */
.card-cliente-grid{display:grid;grid-template-columns:270px 150px 1fr auto;align-items:center;gap:20px;padding:18px 22px 18px 24px}
.cliente-idt{display:flex;align-items:center;gap:14px;min-width:0}
.cliente-nomes{min-width:0}
.cliente-nome{font-family:var(--font-display);font-size:16px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cliente-seg{font-size:12px;color:var(--fg-3);margin-top:2px}
.cliente-plats{display:flex;flex-wrap:wrap;gap:6px}
.chip-sm{height:24px;padding:0 10px;font-size:10.5px;letter-spacing:.02em;background:var(--bg-surface-2)}
.cliente-estado{display:flex;flex-direction:column;gap:8px;min-width:0}
.linha-pills,.linha-selos{display:flex;flex-wrap:wrap;gap:7px}
/* pill mini de agregacao ('4 no ar'): mono 10.5, dot na cor do texto */
.pillm{height:24px;padding:0 10px;display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);font-family:var(--font-mono);font-size:10.5px;background:var(--bg-surface-2);border:1px solid var(--border);color:var(--fg-2)}
.pillm .dot{background:currentColor}
.pillm-positive{color:var(--positive);background:var(--positive-tint);border-color:var(--positive-border)}
.pillm-info{color:var(--info);background:var(--info-tint);border-color:var(--info-border)}
.pillm-warning{color:var(--warning);background:var(--warning-tint);border-color:var(--warning-border)}
.pillm-negative{color:var(--negative);background:var(--negative-tint);border-color:var(--negative-border)}
.pillm-neutro{color:var(--fg-2)}
.cliente-verba{display:flex;align-items:center;gap:18px;justify-self:end;color:var(--fg-3)}
.verba{font-size:15px;text-align:right;color:var(--fg-1)}
.verba.zero{color:var(--fg-3)}
.verba-sub{font-size:11px;color:var(--fg-3);margin-top:2px;text-align:right}

/* estado vazio (busca/filtro sem resultado ou banco sem cliente) */
.vazio{padding:56px 20px;text-align:center;border:1px dashed var(--border);border-radius:14px;background:var(--bg-raised)}
.vazio-icone{display:inline-flex;width:52px;height:52px;border-radius:13px;background:var(--bg-surface);border:1px solid var(--border);align-items:center;justify-content:center;color:var(--fg-3)}
.vazio-titulo{font-family:var(--font-display);font-size:17px;font-weight:600;margin-top:14px}
.vazio-sub{font-size:13px;color:var(--fg-2);margin-top:6px}

/* ---------- modal (dialog nativo, backdrop com blur do handoff) ---------- */
/* margin:auto de volta: o reset global zera margens e sem isso o dialog
   nativo abre grudado no canto em vez de centralizado */
dialog.modal{margin:auto;width:520px;max-width:calc(100vw - 48px);background:var(--bg-surface);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-overlay);padding:0;color:var(--fg-1)}
dialog.modal::backdrop{background:var(--overlay-scrim);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.modal-cab{padding:22px 24px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.modal-titulo{font-family:var(--font-display);font-size:20px;font-weight:600;margin-top:6px;letter-spacing:-.01em}
.modal-x{width:36px;height:36px;border-radius:9px;border:1px solid var(--border);background:var(--bg-surface-2);display:flex;align-items:center;justify-content:center;color:var(--fg-2);flex-shrink:0}
.modal-x:hover{background:var(--bg-surface)}
.modal-corpo{padding:22px 24px;display:flex;flex-direction:column;gap:18px}
.modal-corpo label{margin:0 0 8px}
.modal-painel .hint{margin-top:12px}
.modal-pe{padding:16px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px}
/* segmented Meta/Google: radio invisivel, label vira o botao */
.seg-grupo{display:flex;gap:10px}
.seg{position:relative;flex:1;display:flex;align-items:center;justify-content:center;gap:8px;height:44px;border-radius:11px;background:var(--bg-raised);border:1px solid var(--border);color:var(--fg-2);font-weight:600;font-size:14px;cursor:pointer;transition:background 120ms,border-color 120ms,color 120ms;margin:0}
.seg:hover{border-color:var(--fg-3)}
.seg input{position:absolute;opacity:0;width:0;height:0;pointer-events:none;margin:0}
.seg:has(input:checked){background:var(--brand-tint);border-color:var(--brand);color:var(--fg-1)}
.seg:has(input:checked) svg{color:var(--brand-accent)}
.seg:has(input:focus-visible){box-shadow:var(--ring-brand)}
/* caixinha de dica do modal (fundo raised + borda, texto muted) */
.hint{display:flex;align-items:flex-start;gap:9px;padding:12px 14px;border-radius:10px;background:var(--bg-raised);border:1px solid var(--border);font-size:12px;color:var(--fg-2);line-height:1.5}
.hint svg{flex-shrink:0;margin-top:1px;color:var(--fg-3)}

@media (max-width:900px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .card-cliente-grid{grid-template-columns:1fr auto;gap:12px}
  .cliente-plats,.cliente-estado{grid-column:1 / -1}
  .top .in{padding:0 var(--space-4)}
  .busca{width:auto;flex:1;min-width:0}
}

@media (max-width:720px){
  .login-card{max-width:420px;grid-template-columns:1fr;margin-top:var(--space-6)}
  .login-panel{min-height:150px;flex-direction:row;align-items:center}
  body.com-rail{padding-left:64px}
  .wrap{padding:20px 16px 48px}
}

/* ============================================================
   CONSTRUTOR (handoff: IP Ads Construtor.dc.html + 02-construtor.png)
   Grid 376px (arvore, bg raised) + 1fr (inspetor); cada painel com
   scroll proprio; a pagina em si nao rola (estado vive na URL).
   ============================================================ */
body.tela-construtor{overflow:hidden}
.tela-construtor .top .in{max-width:none;padding:0 22px;justify-content:flex-start;gap:14px}
.tela-construtor .top .ctx{margin-left:auto}
.construtor-main{max-width:none;margin:0;padding:0;height:calc(100vh - 60px);display:grid;grid-template-columns:376px 1fr;min-height:0;overflow:hidden}

/* breadcrumb do header (Cesar Car / Conta Meta · act_10293) */
.crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--fg-2);min-width:0;white-space:nowrap}
.crumb svg{color:var(--fg-3);flex-shrink:0}
.crumb b{color:var(--fg-1);font-weight:600}
.crumb .sep{color:var(--fg-3)}
.crumb .mono{font-size:12px}

/* chip de pendencias do header: conta o que TRAVA e leva pro Conferir */
.chip-pend{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:var(--r-pill);background:var(--warning-tint);border:1px solid var(--warning-border);font-family:var(--font-mono);font-size:11px;color:var(--warning);flex-shrink:0}
.chip-pend.ok{background:var(--positive-tint);border-color:var(--positive-border);color:var(--positive)}

/* ---------- arvore (painel esquerdo, bg raised) ---------- */
.arvore{background:var(--bg-raised);border-right:1px solid var(--border);overflow:auto;min-height:0}
.arvore::-webkit-scrollbar,.inspetor::-webkit-scrollbar{width:10px;height:10px}
.arvore::-webkit-scrollbar-thumb,.inspetor::-webkit-scrollbar-thumb{background:var(--bg-surface-2);border-radius:8px;border:2px solid var(--bg-raised)}
.arvore::-webkit-scrollbar-track,.inspetor::-webkit-scrollbar-track{background:transparent}
.arvore-cab{position:sticky;top:0;z-index:1;background:var(--bg-raised);padding:16px 16px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--border)}
.arvore-titulo{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--fg-2)}
.arvore-resumo{font-size:11.5px;color:var(--fg-3);margin-top:3px}
.arvore-nos{padding:10px;display:flex;flex-direction:column;gap:3px}
.arvore-vazia{padding:36px 14px;text-align:center}

/* no da arvore: chevron + tile de icone + nome/meta + triangulo + bolinha.
   selecionado = fill laranja-soft + borda laranja + faixa 3px (handoff) */
.no{position:relative;display:flex;align-items:center;gap:9px;width:100%;padding:9px 10px 9px 12px;border-radius:10px;border:1px solid transparent;transition:background 120ms cubic-bezier(.2,0,0,1);min-width:0}
.no:hover{background:var(--bg-surface)}
.no.sel{background:var(--brand-tint);border-color:var(--brand-border)}
.no-faixa{display:none}
.no.sel .no-faixa{display:block;position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:3px;background:var(--brand)}
.no-chevron{display:flex;color:var(--fg-3);flex-shrink:0}
.no-tile{width:28px;height:28px;border-radius:7px;background:var(--bg-surface-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--fg-2);flex-shrink:0}
.no.sel .no-tile{background:var(--brand-tint-2);border-color:var(--brand-border);color:var(--brand-accent)}
.no-g .no-tile{width:26px;height:26px}
.no-a .no-tile{width:24px;height:24px;border-radius:6px}
.no-textos{flex:1;min-width:0;text-align:left}
.no-nome{display:block;font-size:13px;font-weight:600;color:var(--fg-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.no-g .no-nome{font-size:12.5px;font-weight:400}
.no-a .no-nome{font-size:12px;font-weight:400}
.no-meta{display:block;font-size:10px;color:var(--fg-3);margin-top:2px}
.no-warn{display:flex;color:var(--warning);flex-shrink:0}
.no-dot{width:8px;height:8px;border-radius:var(--r-pill);flex-shrink:0}
.nd-positive{background:var(--positive)}
.nd-info{background:var(--info)}
.nd-warning{background:var(--warning)}
.nd-negative{background:var(--negative)}
.nd-neutro{background:var(--fg-2)}
/* linhas-guia da hierarquia (handoff: border-left fina nos filhos) */
.no-filhos{margin-left:19px;padding-left:12px;border-left:1px solid var(--border-guia);display:flex;flex-direction:column;gap:3px;margin-top:3px}
.no-filhos.n2{margin-left:16px}
/* linha de criar rascunho (POST + 303): discreta, tracejada */
.no-add{display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;border:1px dashed var(--border);border-radius:9px;color:var(--fg-3);font-family:var(--font-mono);font-size:10.5px;text-align:left;transition:background 120ms}
.no-add:hover{color:var(--fg-2);border-color:var(--fg-3);background:var(--bg-surface)}

/* ---------- inspetor (painel direito) ---------- */
.inspetor{overflow:auto;min-height:0;background:var(--bg-app)}
.insp-cab{position:sticky;top:0;z-index:1;background:var(--bg-app);padding:20px 26px 16px;border-bottom:1px solid var(--border)}
.insp-crumb{font-size:11px;color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.insp-linha{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:11px}
.insp-idt{display:flex;align-items:center;gap:13px;min-width:0}
.insp-icone{width:42px;height:42px;border-radius:10px;background:var(--brand-tint);border:1px solid var(--brand-border);display:flex;align-items:center;justify-content:center;color:var(--brand-accent);flex-shrink:0}
.insp-nivel{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;color:var(--fg-2)}
.insp-plat{display:inline-flex;align-items:center;height:20px;padding:0 9px;border-radius:var(--r-pill);background:var(--bg-surface-2);border:1px solid var(--border);font-family:var(--font-mono);font-size:10px;color:var(--fg-2)}
.insp-nome{font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.insp-acoes{display:flex;align-items:center;gap:8px;flex-shrink:0}
.insp-corpo{max-width:720px}
.insp-sec{padding:22px 26px;border-bottom:1px solid var(--border)}
.insp-sec label{margin-top:0}
.insp-sec-titulo{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--fg-2);margin-bottom:16px}
.tag-mini{height:20px;padding:0 8px;display:inline-flex;align-items:center;border-radius:var(--r-pill);background:var(--bg-surface-2);border:1px solid var(--border);font-family:var(--font-mono);font-size:10px;color:var(--fg-3);letter-spacing:0}
.grade-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.nota-secao{margin-top:12px;font-size:12px;color:var(--fg-3)}
.campo-erro{margin-top:6px;font-size:12px;color:var(--negative)}
.insp-vazio{padding:60px 26px;text-align:center}

/* tira DESEMPENHO (read-only, so campanha no_ar) */
.desemp{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.desemp .celula{background:var(--bg-raised);border:1px solid var(--border);border-radius:11px;padding:12px 14px}
.desemp .rot{font-size:11px;color:var(--fg-3)}
.desemp .val{font-family:var(--font-mono);font-size:18px;color:var(--fg-1);margin-top:4px}
.desemp-nota{margin-top:10px;font-size:11.5px;color:var(--fg-3)}
.link-brand{font-family:var(--font-mono);font-size:11px;color:var(--brand-accent)}
.link-brand:hover{color:var(--brand)}

/* "mais opcoes" = <details> nativo (sem JS): chevron gira quando abre */
.mais-op{padding:18px 26px 30px}
.mais-op summary{list-style:none;display:flex;align-items:center;gap:10px;width:100%;padding:13px 15px;background:var(--bg-raised);border:1px solid var(--border);border-radius:10px;cursor:pointer;font-size:13px;font-weight:500}
.mais-op summary::-webkit-details-marker{display:none}
.mais-op summary:hover{background:var(--bg-surface);border-color:var(--fg-3)}
.mais-op summary>svg{color:var(--brand-accent);flex-shrink:0;transition:transform 120ms cubic-bezier(.2,0,0,1)}
.mais-op[open] summary>svg{transform:rotate(90deg)}
.mais-op summary .vao{flex:1}
.mais-op summary .pista{font-size:10.5px;color:var(--fg-3);font-weight:400}
.mais-op .mais-corpo{margin-top:16px}
.mais-op label{margin-top:0}

/* chips de interesses (laranja, Meta) e palavras-chave (neutro, Google) */
.chips-cab{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--fg-2);font-weight:500;margin-bottom:8px}
.chips-conta{font-size:10.5px;color:var(--fg-3);font-weight:400}
.chips-linha{display:flex;flex-wrap:wrap;gap:7px}
.chip-int{height:28px;padding:0 12px;display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);background:var(--brand-tint);border:1px solid var(--brand-border);font-family:var(--font-mono);font-size:11px;color:var(--brand-accent)}
.chip-int button{display:flex;color:inherit;opacity:.8}
.chip-int button:hover{opacity:1}
.chip-kw{height:28px;padding:0 12px;display:inline-flex;align-items:center;gap:7px;border-radius:var(--r-pill);background:var(--bg-surface);border:1px solid var(--border);font-family:var(--font-mono);font-size:11px;color:var(--fg-1)}
.chip-kw .pont{color:var(--info)}
.chip-kw button{display:flex;color:var(--fg-3)}
.chip-kw button:hover{color:var(--fg-1)}
.chip-add{height:28px;padding:0 12px;display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);background:var(--bg-surface-2);border:1px dashed var(--fg-3);font-family:var(--font-mono);font-size:11px;color:var(--fg-2);cursor:pointer}
.chip-add:hover{color:var(--fg-1);border-color:var(--fg-2)}
.add-painel{display:flex;gap:8px;margin-top:10px;max-width:440px}
.add-painel[hidden]{display:none}   /* o display:flex venceria o [hidden] nativo */
.add-painel input{flex:1;min-width:0}
.add-painel select{width:130px}

/* criativo do anuncio Meta */
.criativo-linha{display:flex;gap:15px;align-items:center}
.criativo-thumb{width:104px;height:104px;border-radius:11px;background:var(--bg-surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--fg-3);flex-shrink:0;overflow:hidden}
.criativo-thumb img{width:100%;height:100%;object-fit:cover}
.criativo-nome{font-size:13px;font-family:var(--font-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.criativo-sub{font-size:12px;color:var(--fg-3);margin-top:4px}
.btn-fantasma{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-display);font-weight:600;font-size:13px;padding:7px 13px;border-radius:10px;color:var(--fg-2);transition:background 120ms}
.btn-fantasma:hover{background:var(--bg-surface);color:var(--fg-1)}

/* RSA (Google): lista de inputs + botao adicionar */
.rsa-lista{display:flex;flex-direction:column;gap:12px}
.rsa-add{margin-top:12px}

@media (max-width:900px){
  .construtor-main{grid-template-columns:300px 1fr}
  .grade-2{grid-template-columns:1fr}
}

/* ============================================================
   VESTIR O ANUNCIO + SEGMENTACAO (E1.4)
   (handoff: IP Ads Vestir anuncio.dc.html + IP Ads Segmentacao.dc.html,
   screenshots/03 e 04). Sub-telas do Construtor: wrap 1180, grid de
   2 colunas (editor 1fr + coluna sticky), cards raio 14.
   ============================================================ */
.sub-wrap{max-width:1180px;margin:0 auto;padding:32px 32px 80px}

/* header das sub-telas: breadcrumb mono pequeno + chip de contexto */
.crumb-mono{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;color:var(--fg-3);min-width:0;white-space:nowrap}
.crumb-mono .sep{color:var(--border)}
.crumb-mono .atual{color:var(--fg-1);overflow:hidden;text-overflow:ellipsis}
.chip-ctx{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:var(--r-pill);background:var(--bg-surface-2);border:1px solid var(--border);font-family:var(--font-mono);font-size:11px;color:var(--fg-2);flex-shrink:0}

/* grid principal: editor a esquerda + coluna sticky a direita */
.duas-colunas{display:grid;gap:32px;margin-top:26px;align-items:start}
.vestir-grid{grid-template-columns:1fr 430px}
.segm-grid{grid-template-columns:1fr 380px}
.col-editor{display:flex;flex-direction:column;gap:16px;min-width:0}
.col-fixa{position:sticky;top:84px}

/* card de secao das sub-telas (mesma pele do .card, padding do handoff) */
.sec-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:14px;padding:20px 22px}
.sec-card label{margin-top:0}
.sec-titulo{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--fg-2);margin-bottom:16px}
.grade-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}

/* botao aparentemente desabilitado que AINDA mostra tooltip (o [disabled]
   nativo com pointer-events:none engoliria o title do 'Enviar arquivo') */
.desab{opacity:.55;cursor:not-allowed}
.desab:hover{background:transparent;color:var(--fg-2)}

/* contador do texto principal: passa do alvo = ambar (M9: avisa, nao trava) */
.contador{font-family:var(--font-mono);font-size:10.5px;color:var(--fg-3)}
.contador.acima{color:var(--warning)}
.linha-rotulo{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.linha-rotulo label{margin:0}

/* card da IA (fora do F1: botao desabilitado, acento areia da marca) */
.card-ia{display:flex;align-items:center;gap:12px;padding:16px 22px}
.card-ia .icone-ia{width:34px;height:34px;border-radius:9px;background:color-mix(in srgb, var(--brand-sand) 14%, transparent);border:1px solid color-mix(in srgb, var(--brand-sand) 30%, transparent);display:flex;align-items:center;justify-content:center;color:var(--brand-sand);flex-shrink:0}
.card-ia .fala{flex:1;font-size:13px;color:var(--fg-2)}

/* resultado inline do /drive/check (checagem pelos bytes) */
.drive-check-res{margin-top:8px;font-size:11.5px;color:var(--fg-3)}
.drive-check-res.ok{color:var(--positive)}
.drive-check-res.erro{color:var(--negative)}

/* ---------- preview (coluna direita do Vestir) ---------- */
.preview-cab{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.preview-palco{background:var(--bg-raised);border:1px solid var(--border);border-radius:16px;padding:22px;display:flex;justify-content:center}
.preview-nota{margin-top:12px;font-size:12px;color:var(--fg-3);text-align:center}
/* segmented Feed/Stories (client-side puro no painel.js) */
.seg-mini{display:inline-flex;background:var(--bg-raised);border:1px solid var(--border);border-radius:9px;padding:3px;gap:2px}
.seg-mini button{height:28px;padding:0 14px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--fg-2);transition:background 120ms,color 120ms}
.seg-mini button.on{background:var(--brand);color:var(--fg-on-brand)}

/* cartao do FEED: card claro estilo Meta (tokens --pv-* do bloco local) */
.pv-feed{width:340px;background:var(--pv-card);border-radius:12px;overflow:hidden;box-shadow:var(--pv-sombra)}
.pv-cab{display:flex;align-items:center;gap:10px;padding:12px 14px}
.pv-avatar{width:40px;height:40px;border-radius:var(--r-pill);background:var(--brand);display:flex;align-items:center;justify-content:center;color:var(--fg-on-brand);font-family:var(--font-display);font-weight:700;font-size:15px;flex-shrink:0}
.pv-nome{font-size:13px;font-weight:600;color:var(--pv-texto)}
.pv-patrocinado{font-size:11px;color:var(--pv-muted)}
.pv-pontos{color:var(--pv-muted);font-size:20px;line-height:1}
.pv-texto{padding:0 14px 12px;font-size:13.5px;color:var(--pv-texto);line-height:1.45;overflow-wrap:break-word}
.pv-midia{position:relative;width:100%;aspect-ratio:4/5;background:linear-gradient(135deg,var(--pv-midia-1),var(--pv-midia-2));display:flex;align-items:center;justify-content:center;overflow:hidden}
.pv-midia img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pv-midia-vazia{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--pv-midia-icone)}
.pv-midia-vazia span{font-family:var(--font-mono);font-size:11px}
.pv-barra{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--pv-barra)}
.pv-barra .info{flex:1;min-width:0}
.pv-dominio{font-family:var(--font-mono);font-size:10px;color:var(--pv-muted);text-transform:uppercase;letter-spacing:.04em}
.pv-titulo{font-size:14px;font-weight:700;color:var(--pv-texto);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-desc{font-size:12px;color:var(--pv-muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-cta{flex-shrink:0;padding:8px 14px;background:var(--pv-botao);border-radius:7px;font-size:13px;font-weight:600;color:var(--pv-texto)}

/* frame do STORIES: 9:16 com overlay e corte do texto em 70 chars */
.pv-stories{width:250px;aspect-ratio:9/16;border-radius:16px;overflow:hidden;position:relative;background:linear-gradient(160deg,var(--pv-midia-1),var(--pv-midia-3));box-shadow:var(--pv-sombra)}
.pv-stories img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pv-st-progresso{position:absolute;top:0;left:0;right:0;padding:12px 12px 0;display:flex;align-items:center;gap:8px;z-index:2}
.pv-st-progresso .cheia{flex:1;height:3px;border-radius:3px;background:var(--pv-branco-85)}
.pv-st-progresso .vazia{width:22px;height:3px;border-radius:3px;background:var(--pv-branco-40)}
.pv-st-cab{position:absolute;top:22px;left:12px;right:12px;display:flex;align-items:center;gap:8px;z-index:2}
.pv-st-avatar{width:30px;height:30px;border-radius:var(--r-pill);background:var(--brand);display:flex;align-items:center;justify-content:center;color:var(--fg-on-brand);font-family:var(--font-display);font-weight:700;font-size:12px;border:2px solid var(--pv-card);flex-shrink:0}
.pv-st-nome{font-size:12px;font-weight:600;color:var(--pv-card);text-shadow:var(--pv-sombra-texto)}
.pv-st-patrocinado{font-size:11px;color:var(--pv-branco-85);text-shadow:var(--pv-sombra-texto)}
.pv-st-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--pv-midia-icone)}
.pv-st-rodape{position:absolute;left:0;right:0;bottom:0;padding:16px 14px;background:linear-gradient(transparent,var(--pv-scrim));z-index:2}
.pv-st-texto{font-size:13px;color:var(--pv-card);line-height:1.4;text-shadow:var(--pv-sombra-texto);overflow-wrap:break-word}
.pv-st-cta{margin-top:12px;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;background:var(--pv-branco-95);border-radius:8px;font-size:13px;font-weight:700;color:var(--pv-texto)}

/* dialog Trocar do Drive: lista server-rendered dos criativos do cliente */
.cr-lista{display:flex;flex-direction:column;gap:10px;max-height:52vh;overflow:auto}
.cr-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:11px;background:var(--bg-raised)}
.cr-item.atual{border-color:var(--brand-border);background:var(--brand-tint)}
.cr-thumb{width:56px;height:56px;border-radius:9px;background:var(--bg-surface-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--fg-3);flex-shrink:0;overflow:hidden}
.cr-thumb img{width:100%;height:100%;object-fit:cover}
.cr-info{flex:1;min-width:0}
.cr-nome{font-family:var(--font-mono);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-sub{font-size:11.5px;color:var(--fg-3);margin-top:3px}
.tag-em-uso{height:24px;padding:0 10px;display:inline-flex;align-items:center;border-radius:var(--r-pill);background:var(--brand-tint);border:1px solid var(--brand-border);font-family:var(--font-mono);font-size:10.5px;color:var(--brand-accent);flex-shrink:0}

/* ---------- Segmentacao ---------- */
/* nota-link de volta a arvore (handoff: pilula raised com icone list-tree) */
.nota-arvore{margin-top:14px;display:inline-flex;align-items:center;gap:9px;padding:9px 13px;border-radius:10px;background:var(--bg-raised);border:1px solid var(--border);font-size:12.5px;color:var(--fg-2)}
.nota-arvore:hover{border-color:var(--fg-3)}
.nota-arvore svg:first-child{color:var(--brand-accent);flex-shrink:0}
.nota-arvore .mono{color:var(--fg-1);font-size:12px}
.nota-arvore svg:last-child{color:var(--fg-3);flex-shrink:0}

/* slider do raio: range nativo com trilha na cor da marca */
.raio-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:var(--r-pill);background:var(--bg-surface-2);border:none;padding:0;cursor:pointer}
.raio-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:var(--r-pill);background:var(--fg-1);border:3px solid var(--brand);cursor:pointer}
.raio-slider::-moz-range-thumb{width:10px;height:10px;border-radius:var(--r-pill);background:var(--fg-1);border:3px solid var(--brand);cursor:pointer}
.raio-slider::-moz-range-progress{height:6px;border-radius:var(--r-pill);background:var(--brand)}
.raio-slider:focus{outline:none;box-shadow:var(--ring-brand)}

/* mini-mapa placeholder: grade + circulo proporcional ao raio */
.mini-mapa{margin-top:16px;position:relative;height:150px;border-radius:11px;overflow:hidden;background:var(--bg-raised);border:1px solid var(--border);display:flex;align-items:center;justify-content:center}
.mini-mapa .grade{position:absolute;inset:0;background-image:linear-gradient(var(--bg-surface-2) 1px,transparent 1px),linear-gradient(90deg,var(--bg-surface-2) 1px,transparent 1px);background-size:26px 26px;opacity:.5}
.mapa-circulo{position:relative;border-radius:var(--r-pill);background:var(--brand-tint);border:1px solid var(--brand-border);display:flex;align-items:center;justify-content:center;color:var(--brand-accent);transition:width 120ms cubic-bezier(.2,0,0,1),height 120ms cubic-bezier(.2,0,0,1)}
.mapa-legenda{position:absolute;bottom:10px;right:12px;font-family:var(--font-mono);font-size:10.5px;color:var(--fg-3)}

/* segmented de genero (radio invisivel + :has, mesmo truque do modal) */
.seg-inline{display:inline-flex;background:var(--bg-raised);border:1px solid var(--border);border-radius:9px;padding:3px;gap:2px;margin-top:8px}
.seg-inline label{position:relative;height:30px;padding:0 16px;display:inline-flex;align-items:center;border-radius:7px;color:var(--fg-2);font-size:13px;font-weight:600;cursor:pointer;margin:0;transition:background 120ms,color 120ms}
.seg-inline input{position:absolute;opacity:0;width:0;height:0;pointer-events:none;margin:0}
.seg-inline label:has(input:checked){background:var(--brand);color:var(--fg-on-brand)}
.seg-inline label:has(input:focus-visible){box-shadow:var(--ring-brand)}

/* coluna ESTIMATIVA DE ALCANCE (sticky) */
.est-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:14px;padding:22px}
.est-rotulo{font-size:12px;color:var(--fg-3);margin-top:16px}
.est-publico{font-family:var(--font-mono);font-size:26px;font-weight:600;letter-spacing:-.01em;margin-top:4px}
.est-barra{position:relative;height:8px;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--brand-deep),var(--brand) 45%,var(--fg-3));margin-top:20px}
.est-marcador{position:absolute;left:50%;top:50%;width:16px;height:16px;border-radius:var(--r-pill);background:var(--fg-1);border:3px solid var(--brand);transform:translate(-50%,-50%);box-shadow:var(--shadow-card);transition:left 240ms cubic-bezier(.2,0,0,1)}
.est-extremos{display:flex;justify-content:space-between;margin-top:9px;font-family:var(--font-mono);font-size:10.5px;color:var(--fg-3)}
.est-leitura{display:flex;align-items:center;gap:9px;margin-top:16px;padding:10px 12px;border-radius:10px;font-size:12.5px;border:1px solid var(--border);background:var(--bg-raised);color:var(--fg-2)}
.est-leitura.positive{background:var(--positive-tint);border-color:var(--positive-border);color:var(--positive)}
.est-leitura.warning{background:var(--warning-tint);border-color:var(--warning-border);color:var(--warning)}
.est-linhas{margin-top:20px;border-top:1px solid var(--border);padding-top:18px;display:flex;flex-direction:column;gap:16px}
.est-linha{display:flex;align-items:center;justify-content:space-between;gap:10px}
.est-linha .rot{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--fg-2)}
.est-linha .rot svg{color:var(--fg-3);flex-shrink:0}
.est-linha .val{font-family:var(--font-mono);font-size:14px;color:var(--fg-1);text-align:right}
.est-nota{margin-top:18px;font-size:11.5px;color:var(--fg-3);line-height:1.5}
.est-indisponivel{margin-top:16px;padding:14px;border:1px dashed var(--border);border-radius:10px;font-size:12.5px;color:var(--fg-3);line-height:1.5}

@media (max-width:1020px){
  .vestir-grid,.segm-grid{grid-template-columns:1fr}
  .col-fixa{position:static}
}

/* ============================================================
   CONFERIR (E1.5)
   (handoff: IP Ads Conferir.dc.html + 05-conferir.png). Sub-tela
   do Construtor: wrap 1100, banner de prontidao, checklist em 3
   grupos com icone por severidade, resumo sticky 360px + preview.
   ============================================================ */
.conf-wrap{max-width:1100px}

/* banner de prontidao: ambar quando trava, verde quando pronto,
   azul quando a campanha ja saiu da edicao (na fila ou alem) */
.conf-banner{display:flex;align-items:center;gap:16px;margin-top:22px;padding:18px 22px;border-radius:14px;border:1px solid var(--border);background:var(--bg-surface)}
.conf-banner.trava{background:var(--warning-tint);border-color:var(--warning-border)}
.conf-banner.pronto{background:var(--positive-tint);border-color:var(--positive-border)}
.conf-banner.fila{background:var(--info-tint);border-color:var(--info-border)}
.conf-banner-icone{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.conf-banner.trava .conf-banner-icone{background:var(--warning-tint);color:var(--warning)}
.conf-banner.pronto .conf-banner-icone{background:var(--positive-tint);color:var(--positive)}
.conf-banner.fila .conf-banner-icone{background:var(--info-tint);color:var(--info)}
.conf-banner-textos{flex:1;min-width:0}
.conf-banner-titulo{font-family:var(--font-display);font-size:17px;font-weight:600;color:var(--fg-1)}
.conf-banner-sub{font-size:13px;color:var(--fg-2);margin-top:3px}
.conf-banner-acao{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.conf-banner-nota{font-family:var(--font-mono);font-size:10.5px;color:var(--fg-3)}

/* grid: checklist 1fr + resumo 360px (handoff) */
.conf-grid{display:grid;grid-template-columns:1fr 360px;gap:28px;margin-top:22px;align-items:start}
.conf-col{display:flex;flex-direction:column;gap:16px;min-width:0}

/* card de grupo do checklist */
.conf-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.conf-card-cab{padding:14px 20px;border-bottom:1px solid var(--border);font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--fg-2)}
.conf-item{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--bg-surface-2)}
.conf-card > :last-child{border-bottom:0}
/* linha com pendencia ganha um lavado da cor (handoff: tint a 6%) */
.conf-item.aviso{background:color-mix(in srgb, var(--warning) 6%, transparent)}
.conf-item.bloqueio{background:color-mix(in srgb, var(--negative) 6%, transparent)}
/* bolinha de severidade 26px: check verde / alerta ambar / x vermelho */
.conf-ico{width:26px;height:26px;border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid var(--border);color:var(--fg-2)}
.conf-ico.ok{background:var(--positive-tint);border-color:var(--positive-border);color:var(--positive)}
.conf-ico.aviso{background:var(--warning-tint);border-color:var(--warning-border);color:var(--warning)}
.conf-ico.bloqueio{background:var(--negative-tint);border-color:var(--negative-border);color:var(--negative)}
.conf-rotulo{flex:1;min-width:0;font-size:13.5px;color:var(--fg-1)}
.conf-rotulo .det-aviso{color:var(--warning);font-size:12.5px}
.conf-rotulo .det-bloqueio{color:var(--negative);font-size:12.5px}
.conf-nota{font-family:var(--font-mono);font-size:11px;color:var(--fg-3);flex-shrink:0}
.conf-nota.positive{color:var(--positive)}
/* bloco explicativo do M10 (inline, nao ha tela interna de detalhe) */
.conf-m10{margin:0 20px 16px 58px;padding:12px 14px;border-radius:10px;background:var(--bg-raised);border:1px solid var(--border);font-size:12.5px;color:var(--fg-2);line-height:1.55}
.conf-m10 b{color:var(--fg-1);font-weight:600}
.conf-m10 a{display:inline-flex;align-items:center;gap:5px;margin-top:8px;font-family:var(--font-mono);font-size:11.5px;color:var(--brand-accent)}
.conf-m10 a:hover{color:var(--brand)}

/* resumo sticky (coluna direita) */
.conf-resumo{position:sticky;top:84px;background:var(--bg-surface);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.conf-res-cab{padding:18px 20px;border-bottom:1px solid var(--border)}
.conf-res-nome{font-family:var(--font-display);font-size:17px;font-weight:600;margin-top:8px;letter-spacing:-.01em}
.conf-res-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.conf-res-linhas{padding:16px 20px;display:flex;flex-direction:column;gap:13px;border-bottom:1px solid var(--border)}
.conf-res-linha{display:flex;justify-content:space-between;gap:12px}
.conf-res-linha .rot{font-size:13px;color:var(--fg-2)}
.conf-res-linha .val{font-family:var(--font-mono);font-size:13px;color:var(--fg-1);text-align:right}
.conf-preview{padding:16px 20px}
.conf-pv-cab{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;color:var(--fg-3);margin-bottom:10px}
.conf-pv-linha{display:flex;gap:12px;align-items:center}
/* mini thumb 64x80 com o gradiente claro do preview Meta (tokens --pv-*) */
.conf-pv-thumb{width:64px;height:80px;border-radius:9px;background:linear-gradient(135deg,var(--pv-midia-1),var(--pv-midia-2));display:flex;align-items:center;justify-content:center;color:var(--pv-midia-icone);flex-shrink:0;overflow:hidden}
.conf-pv-thumb img{width:100%;height:100%;object-fit:cover}
.conf-pv-titulo{font-size:12.5px;font-weight:600;color:var(--fg-1)}
.conf-pv-texto{font-size:11.5px;color:var(--fg-2);margin-top:3px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.conf-pv-vazio{font-size:12px;color:var(--fg-3)}

@media (max-width:1020px){
  .conf-grid{grid-template-columns:1fr}
  .conf-resumo{position:static}
  .conf-banner{flex-wrap:wrap}
}

/* ============================================================
   APROVACAO (E1.5)
   (handoff: IP Ads Aprovacao.dc.html + 06-aprovacao.png). Fila da
   trava de gasto: strip com lock + somas, checkbox laranja por
   card (borda acende via :has) e acoes por card.
   ============================================================ */
.apr-wrap{max-width:1080px}

/* identidade do aprovador no header */
.apr-idt{display:flex;align-items:center;gap:9px}
.apr-avatar{width:32px;height:32px;border-radius:var(--r-pill);background:var(--brand);color:var(--fg-on-brand);font-family:var(--font-display);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.apr-idt-textos{line-height:1.2}
.apr-idt-textos .nome{font-size:12.5px;font-weight:600}
.apr-idt-textos .papel{font-size:10.5px;color:var(--fg-3)}

/* strip da trava (handoff: gradiente surface -> raised + lock 48px) */
.apr-strip{margin-top:24px;padding:22px 24px;border-radius:16px;background:linear-gradient(135deg,var(--bg-surface),var(--bg-raised));border:1px solid var(--border);display:flex;align-items:center;gap:28px}
.apr-lock{width:48px;height:48px;border-radius:12px;background:var(--brand-tint);border:1px solid var(--brand-border);display:flex;align-items:center;justify-content:center;color:var(--brand-accent);flex-shrink:0}
.apr-stats{display:flex;gap:36px;flex:1;flex-wrap:wrap}
.apr-stat .rot{font-size:12px;color:var(--fg-2)}
.apr-stat .val{font-family:var(--font-mono);font-size:28px;font-weight:600;margin-top:2px;color:var(--fg-1)}
.apr-stat .val .de{font-size:16px;color:var(--fg-3)}
/* a verba a liberar em laranja: e o numero da decisao (handoff) */
.apr-stat .val.laranja{color:var(--brand-accent)}

/* checkbox custom 20px (a marcada pinta de laranja, handoff) */
.chk{appearance:none;-webkit-appearance:none;width:20px;height:20px;border-radius:6px;background:var(--bg-surface-2);border:1px solid var(--fg-3);cursor:pointer;position:relative;flex-shrink:0;padding:0;margin:0;transition:background 120ms,border-color 120ms}
.chk:checked{background:var(--brand);border-color:var(--brand)}
.chk:checked::after{content:'';position:absolute;left:6px;top:2.5px;width:5px;height:10px;border:solid var(--fg-on-brand);border-width:0 2px 2px 0;transform:rotate(45deg)}
.chk:focus-visible{outline:none;box-shadow:var(--ring-brand)}
.apr-todas{display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding:0 4px;color:var(--fg-2);font-size:13px;cursor:pointer}

/* card da fila: faixa laranja fixa; borda acende quando marcado */
.apr-lista{display:flex;flex-direction:column;gap:12px;margin-top:10px}
.apr-card{position:relative;overflow:hidden;background:var(--bg-surface);border:1px solid var(--border);border-radius:14px;transition:border-color 120ms}
.apr-card:has(input[data-apr-check]:checked){border-color:var(--brand-border)}
.apr-faixa{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand)}
.apr-grid{padding:18px 22px 18px 24px;display:flex;align-items:center;gap:18px}
.apr-corpo{flex:1;min-width:0}
.apr-nome-linha{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.apr-nome{font-family:var(--font-display);font-size:16px;font-weight:600;letter-spacing:-.01em}
.apr-meta{display:flex;align-items:center;gap:14px;margin-top:8px;font-size:12px;color:var(--fg-3);flex-wrap:wrap}
.apr-meta .com-icone{display:inline-flex;align-items:center;gap:5px}
.apr-meta .mono{font-size:11.5px}
/* chip de ressalva (nota do checador congelada no envio) */
.apr-ressalva{margin-top:10px;display:inline-flex;align-items:center;gap:7px;min-height:26px;padding:3px 11px;border-radius:var(--r-pill);background:var(--warning-tint);border:1px solid var(--warning-border);font-size:11.5px;color:var(--warning);line-height:1.3}
.apr-ressalva svg{flex-shrink:0}
.apr-direita{display:flex;align-items:center;gap:28px;flex-shrink:0}
.apr-verba{text-align:right}
.apr-verba .val{font-size:18px;color:var(--fg-1)}
.apr-verba .rot{font-size:11px;color:var(--fg-3);margin-top:2px}
.apr-acoes{display:flex;gap:8px;align-items:center}

@media (max-width:900px){
  .apr-strip{flex-wrap:wrap}
  .apr-grid{flex-wrap:wrap}
  .apr-direita{width:100%;justify-content:space-between}
}

/* ============================================================
   LOG DE SUBIDA (E1.6)
   (handoff: IP Ads Log de subida.dc.html + 07-log-de-subida.png).
   Wrap 960 centrado; card resumo do push; timeline com circulo
   de status 28px + linha conectora; no de erro expandido; e o
   historico de auditoria. Nenhuma cor nasce aqui: so var(--...).
   ============================================================ */
.log-wrap{max-width:960px}

/* card resumo do push (surface, raio 14, icone 46 tintado pelo status) */
.log-resumo{margin-top:24px;padding:20px 22px;border-radius:14px;background:var(--bg-surface);border:1px solid var(--border);display:flex;align-items:center;gap:18px}
.log-resumo-ico{width:46px;height:46px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--bg-surface-2);border:1px solid var(--border);color:var(--fg-2)}
.log-resumo-ico.positive{background:var(--positive-tint);border-color:var(--positive-border);color:var(--positive)}
.log-resumo-ico.warning{background:var(--warning-tint);border-color:var(--warning-border);color:var(--warning)}
.log-resumo-ico.negative{background:var(--negative-tint);border-color:var(--negative-border);color:var(--negative)}
.log-resumo-ico.info{background:var(--info-tint);border-color:var(--info-border);color:var(--info)}
.log-resumo-corpo{flex:1;min-width:0}
.log-resumo-linha1{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.log-resumo-nome{font-family:var(--font-display);font-size:17px;font-weight:600;letter-spacing:-.01em}
/* pill do push em mono 10.5 com dot (handoff: 'concluído com 1 erro') */
.log-resumo-linha1 .pill{font-family:var(--font-mono);font-size:10.5px;height:24px;padding:0 10px}
.log-resumo-meta{display:flex;align-items:center;gap:16px;margin-top:7px;font-family:var(--font-mono);font-size:11.5px;color:var(--fg-3);flex-wrap:wrap}
.log-resumo-meta .positive{color:var(--positive)}
.log-resumo-acoes{display:flex;gap:10px;flex-shrink:0}
.log-nota-guiada{margin-top:10px;font-size:12.5px;color:var(--fg-2);padding:0 4px}

/* timeline (handoff: painel raised, cab mono espacada, nos em grid 30px+1fr) */
.log-tl{margin-top:18px;background:var(--bg-raised);border:1px solid var(--border);border-radius:14px;padding:22px 24px}
.log-tl-cab{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--fg-2);margin-bottom:20px}
.log-no{position:relative;display:grid;grid-template-columns:30px 1fr;gap:14px;padding-bottom:20px}
.log-no.fim{padding-bottom:0}
/* linha conectora entre os circulos (handoff: 2px, comeca sob a bola) */
.log-fio{position:absolute;left:14px;top:28px;bottom:-2px;width:2px;background:var(--bg-surface-2)}
.log-bola{width:28px;height:28px;border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;z-index:1;background:var(--bg-surface-2);border:1px solid var(--border);color:var(--fg-2)}
.log-bola.ok{background:var(--positive-tint);border-color:var(--positive-border);color:var(--positive)}
.log-bola.erro{background:var(--negative-tint);border-color:var(--negative-border);color:var(--negative)}
.log-bola.pendente{color:var(--fg-3)}
.log-no-corpo{min-width:0}
.log-no-linha{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:3px}
.log-no-idt{min-width:0}
.log-tag{font-family:var(--font-mono);font-size:10px;color:var(--fg-3);letter-spacing:.04em}
.log-no-nome{font-size:13.5px;color:var(--fg-1);margin-top:1px}
.log-no-dir{text-align:right;flex-shrink:0}
/* id que voltou da plataforma: mono AZUL (handoff) */
.log-id{font-family:var(--font-mono);font-size:12px;color:var(--info)}
.log-id.erro{color:var(--negative)}
.log-id.aguarda{color:var(--fg-3)}
.log-hora{font-family:var(--font-mono);font-size:10.5px;color:var(--fg-3);margin-top:2px}

/* no de erro expandido (handoff: lavado vermelho 8%, borda 30%) */
.log-erro{margin-top:10px;padding:12px 14px;border-radius:10px;background:color-mix(in srgb, var(--negative) 8%, transparent);border:1px solid var(--negative-border)}
.log-erro-titulo{font-size:12.5px;color:var(--negative);font-weight:600}
.log-erro-sub{font-size:12.5px;color:var(--fg-2);margin-top:5px;line-height:1.5}
.log-erro-proto{font-family:var(--font-mono);font-size:10.5px;color:var(--fg-3);margin-top:6px}
.log-erro-acoes{margin-top:11px;display:flex;gap:8px;align-items:center}

/* roteiro guiado: payload dobravel + form de colar id */
.log-payload{margin-top:10px}
.log-payload summary{font-family:var(--font-mono);font-size:11px;color:var(--fg-3);cursor:pointer}
.log-payload pre{margin-top:8px;padding:12px 14px;border-radius:10px;background:var(--bg-app);border:1px solid var(--border);font-family:var(--font-mono);font-size:11px;color:var(--fg-2);overflow-x:auto;white-space:pre-wrap;word-break:break-word}
.log-colar{margin-top:10px;display:flex;gap:8px;align-items:center;max-width:520px}
.log-colar input{font-family:var(--font-mono);font-size:12px;padding:7px 11px}
.log-colar .btn{flex-shrink:0}
.log-tl-vazio{font-size:12.5px;color:var(--fg-3)}

/* historico de auditoria (handoff: cards surface raio 12, icone 32) */
.log-hist{margin-top:22px}
.log-hist-cab{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--fg-3);margin-bottom:12px}
.log-hist-lista{display:flex;flex-direction:column;gap:10px}
.log-hist-card{display:flex;align-items:center;gap:14px;padding:14px 18px;background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;transition:border-color 120ms}
.log-hist-card:hover{border-color:var(--fg-3)}
.log-hist-ico{width:32px;height:32px;border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--bg-surface-2);border:1px solid var(--border);color:var(--fg-2)}
.log-hist-ico.check{background:var(--positive-tint);border-color:var(--positive-border);color:var(--positive)}
.log-hist-ico.alert-triangle{background:var(--warning-tint);border-color:var(--warning-border);color:var(--warning)}
.log-hist-ico.x{background:var(--negative-tint);border-color:var(--negative-border);color:var(--negative)}
.log-hist-ico.cloud-upload{background:var(--info-tint);border-color:var(--info-border);color:var(--info)}
.log-hist-corpo{flex:1;min-width:0}
.log-hist-nome{font-size:13.5px;color:var(--fg-1)}
.log-hist-linha{font-family:var(--font-mono);font-size:11px;color:var(--fg-3);margin-top:2px}
.log-hist-quando{font-family:var(--font-mono);font-size:11px;color:var(--fg-3);flex-shrink:0}

@media (max-width:720px){
  .log-resumo{flex-wrap:wrap}
  .log-resumo-acoes{width:100%;justify-content:flex-end}
  .log-no-linha{flex-wrap:wrap}
  .log-no-dir{text-align:left}
}

/* ============================================================
   BIBLIOTECAS (E1.7)
   (handoff: IP Ads Bibliotecas.dc.html + 08-bibliotecas.png).
   Wrap padrao 1120; abas com sublinhado laranja; Criativos em grid
   de 3, Modelos em grid de 2 com faixa laranja, o resto em linhas.
   Nenhuma cor nasce aqui: so var(--...) do tokens.css.
   ============================================================ */

/* abas (Tabs do handoff: linha inferior + sublinhado laranja na ativa) */
.bib-tabs{display:flex;gap:26px;margin-top:22px;border-bottom:1px solid var(--border)}
.bib-tab{position:relative;padding:12px 2px;font-size:14px;font-weight:500;color:var(--fg-2);transition:color 120ms}
.bib-tab:hover{color:var(--fg-1)}
.bib-tab.on{color:var(--fg-1)}
.bib-tab.on::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--brand)}

/* ---------- CRIATIVOS: grid 3 col, thumb 4:5, chip de formato ---------- */
.bib-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
.bib-card-criativo{background:var(--bg-surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:transform 120ms cubic-bezier(.2,0,0,1),box-shadow 120ms,border-color 120ms}
.bib-card-criativo:hover{transform:translateY(-2px);box-shadow:var(--shadow-raised);border-color:var(--fg-3)}
/* gradiente claro do placeholder = mesmos tokens --pv-* do preview Meta */
.bib-thumb{position:relative;width:100%;aspect-ratio:4/5;background:linear-gradient(135deg,var(--pv-midia-1),var(--pv-midia-2));display:flex;align-items:center;justify-content:center;overflow:hidden}
.bib-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bib-thumb-icone{color:var(--pv-midia-icone)}
.bib-chip-fmt{position:absolute;top:10px;left:10px;height:22px;padding:0 9px;display:inline-flex;align-items:center;border-radius:var(--r-pill);background:var(--overlay-scrim);font-family:var(--font-mono);font-size:10px;color:var(--fg-1);z-index:1}
.bib-corpo-criativo{padding:12px 14px}
.bib-nome{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bib-rodape{display:flex;align-items:center;justify-content:space-between;margin-top:7px}
.bib-usado{font-size:11px;color:var(--fg-3)}
.bib-dim{font-size:10.5px;color:var(--fg-3)}
.bib-usar-form{margin-top:10px;display:flex;justify-content:flex-end}

/* ---------- PUBLICOS / PALAVRAS / COPY & UTM: linhas ---------- */
.bib-lista{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.bib-linha{display:flex;align-items:center;gap:16px;padding:16px 20px;background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;transition:border-color 120ms}
.bib-linha:hover{border-color:var(--fg-3)}
.bib-tile{width:38px;height:38px;border-radius:10px;background:var(--bg-surface-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--fg-2);flex-shrink:0}
.bib-info{flex:1;min-width:0}
.bib-info-nome{font-size:14px;font-weight:500;color:var(--fg-1)}
.bib-info-meta{font-size:11px;color:var(--fg-3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bib-chip-usado{height:24px;padding:0 10px;display:inline-flex;align-items:center;border-radius:var(--r-pill);background:var(--bg-surface-2);border:1px solid var(--border);font-family:var(--font-mono);font-size:10.5px;color:var(--fg-2);flex-shrink:0}

/* ---------- MODELOS: grid 2 col, faixa laranja, tile areia ---------- */
.bib-grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:24px}
.bib-card-modelo{position:relative;overflow:hidden;background:var(--bg-surface);border:1px solid var(--border);border-radius:14px;padding:20px 22px;transition:transform 120ms cubic-bezier(.2,0,0,1),box-shadow 120ms,border-color 120ms}
.bib-card-modelo:hover{transform:translateY(-2px);box-shadow:var(--shadow-raised);border-color:var(--fg-3)}
.bib-faixa{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand)}
.bib-modelo-topo{display:flex;align-items:center;justify-content:space-between}
.bib-tile-modelo{width:36px;height:36px;border-radius:9px;background:color-mix(in srgb, var(--brand-sand) 14%, transparent);border:1px solid color-mix(in srgb, var(--brand-sand) 30%, transparent);display:flex;align-items:center;justify-content:center;color:var(--brand-sand)}
.bib-chip-plat{height:22px;padding:0 9px;display:inline-flex;align-items:center;border-radius:var(--r-pill);background:var(--bg-surface-2);border:1px solid var(--border);font-family:var(--font-mono);font-size:10px;color:var(--fg-2)}
.bib-modelo-nome{font-family:var(--font-display);font-size:16px;font-weight:600;margin-top:14px;letter-spacing:-.01em}
.bib-modelo-meta{font-size:12.5px;color:var(--fg-2);margin-top:6px;min-height:18px}
.bib-modelo-acao{margin-top:14px}

@media (max-width:900px){
  .bib-grid3{grid-template-columns:repeat(2,1fr)}
  .bib-grid2{grid-template-columns:1fr}
}
@media (max-width:640px){
  .bib-grid3{grid-template-columns:1fr}
  .bib-linha{flex-wrap:wrap}
}