/* Extensões locais. Sem redefinir paleta, altura mínima, grid ou rodapé. */
.cli-carteira-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px;}
.cli-carteira-shortcuts{margin-top:2px;}
.cli-carteira-scope{padding:0 26px 14px;}
.cli-carteira-check{display:inline-flex;align-items:center;gap:10px;min-height:32px;max-width:100%;cursor:pointer;user-select:none;}
.cli-carteira-check input{appearance:none;-webkit-appearance:none;position:relative;flex:0 0 28px;width:28px;height:16px;margin:0;border:1px solid currentColor;border-radius:20px;background:rgba(255,255,255,.04);color:inherit;cursor:pointer;transition:background .16s ease,border-color .16s ease;}
.cli-carteira-check input::before{content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:currentColor;transition:transform .16s ease;}
.cli-carteira-check input:checked{background:var(--cli-teal,#22d3ee);border-color:var(--cli-teal,#22d3ee);}
.cli-carteira-check input:checked::before{background:var(--cli-fundo,#060809);transform:translateX(12px);}
.cli-carteira-check:has(input:focus-visible){outline:2px solid var(--cli-teal,#22d3ee);outline-offset:3px;}
.cli-carteira-check input:focus{outline:none;}
@media(prefers-reduced-motion:reduce){.cli-carteira-check input,.cli-carteira-check input::before{transition:none;}}
.cli-carteira-inline{font:inherit;color:inherit;background:none;border:0;padding:4px 0;text-align:left;cursor:pointer;}
.cli-carteira-inline:hover{text-decoration:underline;}
.cli-carteira-inline:focus-visible,.cli-kpi[role=button]:focus-visible{outline:2px solid currentColor;outline-offset:3px;}
.cli-kpi[role=button]{cursor:pointer;}
.cli-carteira-shortcuts [aria-pressed=true]{text-decoration:underline;text-underline-offset:4px;}
.cli-carteira-modal{width:min(740px,calc(100vw - 32px));max-height:85dvh;overflow:auto;}
.cli-carteira-field{display:flex;flex-direction:column;gap:6px;margin:12px 0;font-size:.8rem;}
.cli-carteira-field textarea{min-height:130px;resize:vertical;}
.cli-carteira-help{font-size:.75rem;line-height:1.5;margin:8px 0;overflow-wrap:anywhere;}
.cli-carteira-item{padding:12px 0;border-bottom:1px solid var(--border);}
.cli-carteira-items{max-height:45dvh;overflow:auto;}
.cli-carteira-preview{padding:8px 16px;white-space:normal;}
.cli-carteira-operacional{max-width:230px;white-space:normal!important;font-size:.75rem;}
#cli-view .cli-acao-quando{white-space:normal;overflow:visible;text-overflow:clip;}
.cli-carteira-modal .cli-btn-largo{white-space:normal;text-align:left;justify-content:flex-start;}
.cli-gads-modal{width:min(780px,calc(100vw - 32px));}
.cli-gads-intro{display:flex;gap:13px;margin:4px 0 18px;padding:15px 16px;border:1px solid rgba(34,211,238,.2);border-radius:13px;background:rgba(34,211,238,.065);}
.cli-gads-intro-ico{display:grid;place-items:center;flex:0 0 31px;width:31px;height:31px;border-radius:9px;background:rgba(34,211,238,.14);color:var(--cli-teal,#22d3ee);font-size:1rem;}
.cli-gads-intro strong{display:block;font-size:.9rem;line-height:1.35;color:var(--clr-text,#f0f0f0);}
.cli-gads-intro .cli-carteira-help{margin:5px 0 0;color:rgba(240,240,240,.66);}
.cli-gads-content{display:flex;flex-direction:column;gap:12px;}
.cli-gads-step{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;padding:15px;border:1px solid var(--border,rgba(255,255,255,.09));border-radius:13px;background:rgba(255,255,255,.025);}
.cli-gads-step-number{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(34,211,238,.12);border:1px solid rgba(34,211,238,.25);color:var(--cli-teal,#22d3ee);font-size:.78rem;font-weight:800;}
.cli-gads-step-body{min-width:0;}
.cli-gads-step h3{margin:3px 0 0;font-size:.86rem;line-height:1.35;color:var(--clr-text,#f0f0f0);}
.cli-gads-step .cli-carteira-help{margin:6px 0;color:rgba(240,240,240,.62);}
.cli-gads-primary{margin-top:10px;white-space:normal;text-align:center;}
.cli-gads-badge{display:inline-flex;align-items:center;gap:7px;margin-top:8px;padding:7px 10px;border-radius:999px;font-size:.72rem;font-weight:700;}
.cli-gads-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;}
.cli-gads-badge.ativo{color:#5ee6b0;background:rgba(16,185,129,.11);}
.cli-gads-badge.pausado{color:#f7bf64;background:rgba(245,158,11,.11);}
.cli-gads-field{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px;margin-top:10px;}
.cli-gads-field .cli-carteira-field{min-width:0;margin:0;}
.cli-gads-field .m-inp{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cli-gads-copy{height:40px;}
.cli-gads-warning,.cli-gads-muted,.cli-gads-success,.cli-gads-instruction{margin:9px 0 0!important;padding:10px 11px;border-radius:9px;}
.cli-gads-warning{color:#f7bf64!important;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.16);}
.cli-gads-muted{background:rgba(255,255,255,.035);}
.cli-gads-instruction{background:rgba(255,255,255,.04);color:rgba(240,240,240,.76)!important;}
.cli-gads-success{color:#7ee2b8!important;background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.16);}
.cli-gads-manage{margin-top:2px;border:1px solid var(--border,rgba(255,255,255,.09));border-radius:11px;background:rgba(255,255,255,.02);}
.cli-gads-manage summary{padding:12px 14px;cursor:pointer;font-size:.78rem;font-weight:650;color:rgba(240,240,240,.7);}
.cli-gads-manage summary:hover{color:var(--clr-text,#f0f0f0);}
.cli-gads-manage-body{display:flex;flex-wrap:wrap;gap:8px;padding:0 14px 14px;}
.cli-gads-manage-body .cli-carteira-help{width:100%;margin:0 0 2px;}
.cli-gads-danger{color:#fca5a5;border-color:rgba(239,68,68,.24);}
.cli-gads-status{min-height:18px;margin:10px 2px 0;color:rgba(240,240,240,.55);}
@media(max-width:1180px){.cli-carteira-controls{gap:6px;}.cli-carteira-preview{padding:8px;}}
@media(max-width:768px){.cli-carteira-controls button,.cli-carteira-inline,.cli-carteira-check,.cli-carteira-modal button{min-height:40px;}.cli-carteira-scope{padding-left:14px;padding-right:14px;}.cli-carteira-modal{max-height:90dvh;}.cli-carteira-modal .cli-tabela{min-width:0;}.cli-carteira-modal td,.cli-carteira-modal th{white-space:normal;overflow-wrap:anywhere;}.cli-gads-step{grid-template-columns:28px minmax(0,1fr);gap:9px;padding:12px;}.cli-gads-step-number{width:26px;height:26px}.cli-gads-field{grid-template-columns:minmax(0,1fr);}.cli-gads-copy{width:100%;justify-content:center;}.cli-gads-manage-body{flex-direction:column;}.cli-gads-manage-body .cli-btn{width:100%;justify-content:center;}}

/* O link para o guia ilustrado do Google. Estilo de botão discreto, e não de
   link azul sublinhado: ele é um passo do procedimento, não uma referência. */
.cli-gads-guia {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 10px 0 4px; padding: 9px 13px;
  border-radius: 8px; text-decoration: none;
  background: rgba(34, 211, 238, .1);
  border: 1px solid rgba(34, 211, 238, .3);
  color: #67e8f9; font: 600 .78rem 'Inter', system-ui, sans-serif;
}
.cli-gads-guia::after { content: '↗'; font-size: .8em; opacity: .8; }
.cli-gads-guia:hover { background: rgba(34, 211, 238, .18); }
.cli-gads-guia:focus-visible { outline: 2px solid #22d3ee; outline-offset: 2px; }

/* ── AS FIGURAS DO PASSO A PASSO ──────────────────────────────────────
   Recortes do trecho exato de cada tela do Google Ads. Fundo claro porque a
   interface deles é clara: sobre o fundo escuro do modal, a imagem precisa de
   uma moldura para não parecer um buraco recortado. */
.cli-gads-fig {
  margin: 12px 0 0; padding: 8px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
}
.cli-gads-fig img {
  /* ── TAMANHO NATURAL, E NÃO ESTICADO ─────────────────────────────────
     Era `width:100%`, e um recorte de 270px virava 600px na tela: cada pixel
     esticado mais que o dobro, e o resultado foi o borrão que o dono do
     produto viu. Recorte pequeno tem de aparecer pequeno — nítido e pequeno é
     legível; grande e borrado não é.

     `max-width:100%` continua protegendo o recorte largo (a fileira de
     filtros tem 1148px) de estourar a janela. */
  display: block; width: auto; max-width: 100%; height: auto;
  margin: 0 auto;
  border-radius: 6px; background: #fff;
}
.cli-gads-fig figcaption {
  margin-top: 7px;
  font: 500 .74rem/1.5 'Inter', system-ui, sans-serif;
  color: rgba(232, 236, 243, .55);
}

/* ── O TUTORIAL EM VÍDEO ──────────────────────────────────────────────
   O `aspect-ratio` reserva a altura antes de o vídeo carregar: sem ele o
   modal salta quando os metadados chegam, e a pessoa perde a linha que
   estava lendo. */
.cli-gads-passos { margin-top: 12px; }
.cli-gads-video {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 12px; background: #0f1216;
  border: 1px solid rgba(255, 255, 255, .1);
}
/* Sem barra de player, o clique é o único controle — e precisa parecer
   clicável. Com `controls` (o caso de menos movimento) o cursor volta ao
   normal, porque aí quem manda são os botões do próprio player. */
.cli-gads-video:not([controls]) { cursor: pointer; }
.cli-gads-video-legenda {
  margin: 10px 0 0; text-align: center;
  font-size: .82rem; line-height: 1.45; color: #aab4c2;
}
.cli-gads-trilha {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 10px;
}
/* O número é o rótulo: "passo 3" não precisa de tradução, e cabe num
   botão de 28px. */
.cli-gads-passo-btn {
  width: 28px; height: 28px; padding: 0; flex-shrink: 0;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px; color: #c7d0dc;
  font-size: .78rem; font-weight: 600; line-height: 1;
  transition: background .16s, color .16s, border-color .16s;
}
.cli-gads-passo-btn:hover { background: rgba(255, 255, 255, .14); color: #e8ecf3; }
/* O passo atual muda cor E borda, não só cor: um só canal de diferença
   some para quem não separa esses dois tons. */
.cli-gads-passo-btn.ativo {
  background: rgba(34, 211, 238, .16); border-color: #22d3ee; color: #22d3ee;
}
.cli-gads-passo-btn:focus-visible { outline: 2px solid #22d3ee; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .cli-gads-passo-btn { transition: none; }
}