/* ==========================================================================
   Emori Tables — componente visual "clean" para telas com tabelas
   (card arredondado, chips de status, pills de métrica, coluna fixa).

   Uso: adicione a classe `tclean-card` no `.card` que envolve a tabela,
   `tclean-card__header` no header, `tclean-table` na <table>, e as
   classes de chip/pill nas células. Ver campanhas.php / campanhas.js
   como referência de implementação.

   No fim do arquivo fica o "Tema do painel (DS 2.0)": reskin das classes do
   tema (header, menu lateral, .card, botões, modais) sob .app-container,
   aplicado em todas as telas que incluem componentes/css.php.
   ========================================================================== */

:root {
  --tc-ink: #450165;          /* roxo Emori — títulos, ícones, foco */
  --tc-accent: #794c8a;       /* roxo secundário — hover/realces */
  --tc-border: #EBEAF0;       /* borda neutra levemente arroxeada */
  --tc-border-soft: rgba(69, 1, 101, 0.06);
  --tc-muted: #8b8698;
  --tc-success: #3ac47d;
  --tc-success-bg: rgba(58, 196, 125, 0.14);
  --tc-success-border: rgba(58, 196, 125, 0.4);
  --tc-danger: #d92550;
  --tc-danger-bg: rgba(217, 37, 80, 0.12);
  --tc-danger-border: rgba(217, 37, 80, 0.35);
  --tc-radius-lg: 12px;
  --tc-radius-sm: 6px;

  /* DS 2.0 (design-system/reference/Emori DS.dc.html) — usados pelo tema do painel no fim do arquivo */
  --tc-yellow: #f7b924;       /* amarelo Emori — símbolo, aba ativa */
  --tc-text: #2b2733;
  --tc-faint: #a9a4b5;
  --tc-bg: #faf9fc;
  --tc-surface: #fff;
  --tc-lavender: #f4eff8;     /* fundo de item ativo / hover */
  --tc-lavender-line: #e9dff1;
  --tc-track: #f4f2f7;        /* trilho de progress */
  --tc-success-ink: #1f8a54;
  --tc-danger-ink: #c21f47;
  --tc-warning-ink: #6b4c07;
  --tc-warning-bg: #fdf3d6;
  --tc-warning-line: #f1d58a;
  --tc-radius-card: 18px;
  --tc-radius-ctl: 10px;
  --tc-radius-ctl-sm: 8px;
  --tc-font: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tc-mono: 'Geist Mono', ui-monospace, monospace;

  /* ---- Tokens completos (DESIGN.md é a fonte da verdade; mude os dois juntos).
     Código fora deste :root não usa cor, tamanho de fonte, raio ou sombra
     literal: só var(--tc-*). scripts/lint-design-system.sh cobra isso. ---- */

  /* Cores de apoio */
  --tc-white: #fff;              /* texto/ícone sobre fundo escuro ou colorido */
  --tc-text-strong: #201c29;     /* títulos de bloco mais fortes que --tc-text */
  --tc-text-soft: #5d5868;       /* parágrafo de apoio (entre text e muted) */
  --tc-ink-hover: #5a0a85;       /* hover de botão roxo cheio (header, extensão) */
  --tc-info: #3f6ad8;            /* avisos do sistema, chip info */
  --tc-info-bg: rgba(63, 106, 216, 0.12);
  --tc-warning: #d9822b;         /* ícone/valor de alerta (laranja) */
  --tc-warning-strong: #8a6209;  /* texto de alerta sobre fundo amarelo claro */
  --tc-yellow-hover: #ffc94a;
  --tc-yellow-soft: #fffaf0;
  --tc-yellow-bg: rgba(247, 185, 36, 0.14);
  --tc-yellow-line: rgba(247, 185, 36, 0.4);
  --tc-success-bright: #3ae08a;  /* "ao vivo" sobre fundo escuro */
  --tc-success-soft: #eafaf1;    /* fundo verde opaco (sem transparência) */
  --tc-success-line: #c8f0da;
  --tc-success-bg-soft: rgba(58, 196, 125, 0.06);
  --tc-danger-bright: #ff9999;   /* valor negativo sobre tooltip escuro */
  --tc-brand-ml-blue: #3483fa;   /* azul do Mercado Livre (Flex) */
  --tc-ml-green-bg: rgba(0, 166, 80, 0.12);
  --tc-ml-green: #00a650;        /* selo Full do Mercado Livre */
  --tc-ml-green-line: rgba(0, 166, 80, 0.35);

  /* Marcas dos marketplaces: selo do card de integração (onboarding) */
  --tc-brand-ml-bg: #fff6cc;
  --tc-brand-ml-ink: #4a3b00;
  --tc-brand-shopee-bg: #fde7e1;
  --tc-brand-shopee-ink: #9c2d14;
  --tc-brand-amazon-bg: #e7eaf0;
  --tc-brand-amazon-ink: #232f3e;
  --tc-brand-tiktok-bg: #ececed;
  --tc-brand-tiktok-ink: #111111;

  /* Gráficos por marketplace (marketplaceChartColor em functions.js): 3 tons por marca */
  --tc-chart-ml-1: rgba(232, 196, 90, 0.88);
  --tc-chart-ml-2: rgba(214, 178, 72, 0.88);
  --tc-chart-ml-3: rgba(196, 160, 60, 0.88);
  --tc-chart-shopee-1: rgba(214, 132, 112, 0.88);
  --tc-chart-shopee-2: rgba(196, 118, 100, 0.88);
  --tc-chart-shopee-3: rgba(180, 108, 96, 0.88);
  --tc-chart-amazon-1: rgba(92, 78, 118, 0.92);
  --tc-chart-amazon-2: rgba(74, 64, 98, 0.92);
  --tc-chart-amazon-3: rgba(110, 96, 130, 0.92);
  --tc-chart-tiktok-1: rgba(110, 188, 186, 0.88);
  --tc-chart-tiktok-2: rgba(180, 120, 150, 0.88);
  --tc-chart-tiktok-3: rgba(100, 110, 130, 0.88);

  /* Paleta categórica de gráficos antigos (var colors em functions.js, por índice) */
  --tc-chart-1: #f7b924;
  --tc-chart-2: #8430ce;
  --tc-chart-3: #ffce56;
  --tc-chart-4: #4bc0c0;
  --tc-chart-5: #1150af;
  --tc-chart-6: #ff9f40;
  --tc-chart-7: #7fffd4;
  --tc-chart-8: #ff1493;
  --tc-chart-9: #d2691e;

  /* Lilás (séries secundárias, período anterior, ícones vazios) */
  --tc-lilac-100: #d6c4e4;
  --tc-lilac-200: #c7b3d8;
  --tc-lilac-300: #b8a8c9;
  --tc-lilac-400: #9a78ad;
  --tc-accent-soft: rgba(121, 76, 138, 0.12);

  /* Neutros (linhas de grade, trilhos, ícones apagados) */
  --tc-gray-50: #f5f4f7;
  --tc-gray-100: #f1eff5;
  --tc-gray-300: #d9d3e2;
  --tc-gray-400: #c7c3d1;
  --tc-gray-500: #b9b4c4;
  --tc-gray-600: #666666;        /* mockups de tela de terceiros (extensão) */
  --tc-gray-700: #555555;

  /* Branco translúcido (sobre fundo roxo/escuro) */
  --tc-white-a10: rgba(255, 255, 255, 0.1);
  --tc-white-a15: rgba(255, 255, 255, 0.15);
  --tc-white-a25: rgba(255, 255, 255, 0.25);
  --tc-white-a35: rgba(255, 255, 255, 0.35);
  --tc-white-a60: rgba(255, 255, 255, 0.6);
  --tc-white-a80: rgba(255, 255, 255, 0.8);

  /* Sobreposições */
  --tc-backdrop: rgb(32, 10, 46);            /* .modal-backdrop (com opacity .4) */
  --tc-overlay: rgba(20, 15, 30, 0.35);
  --tc-overlay-strong: rgba(32, 28, 41, 0.45);

  /* Pulsos animados (início → fim transparente da mesma cor) */
  --tc-pulse-success: rgba(58, 196, 125, 0.5);
  --tc-pulse-success-end: rgba(58, 196, 125, 0);
  --tc-pulse-success-bright: rgba(58, 224, 138, 0.5);
  --tc-pulse-yellow: rgba(247, 185, 36, 0.55);
  --tc-pulse-yellow-end: rgba(247, 185, 36, 0);
  --tc-pulse-danger: rgba(217, 37, 80, 0.45);
  --tc-pulse-danger-end: rgba(217, 37, 80, 0);

  /* Sombras: só em camada flutuante (menu, popover, modal, drawer) e foco */
  --tc-shadow-focus: 0 0 0 3px rgba(121, 76, 138, 0.15);
  --tc-shadow-xs: 0 1px 4px rgba(37, 15, 51, 0.25);
  --tc-shadow-sticky: 6px 0 6px -4px rgba(69, 1, 101, 0.08);
  --tc-shadow-popover: 0 12px 28px -14px rgba(37, 15, 51, 0.35);
  --tc-shadow-menu: 0 16px 40px -16px rgba(37, 15, 51, 0.25);
  --tc-shadow-card-hover: 0 8px 24px rgba(69, 1, 101, 0.14);
  --tc-shadow-raised: 0 10px 30px -18px rgba(69, 1, 101, 0.25);
  --tc-shadow-panel: 0 24px 60px -24px rgba(69, 1, 101, 0.18);
  --tc-shadow-modal: 0 20px 60px rgba(37, 15, 51, 0.25);
  --tc-shadow-drawer: 0 30px 80px -20px rgba(37, 15, 51, 0.4);
  --tc-shadow-sheet: 0 -12px 40px -12px rgba(37, 15, 51, 0.35);
  --tc-shadow-soft: 0 10px 30px rgba(69, 1, 101, 0.08);   /* mockup flutuante */

  /* Raios além dos de cima */
  --tc-radius-2xs: 2px;
  --tc-radius-xs: 4px;
  --tc-radius-xl: 16px;
  --tc-radius-sheet: 20px;
  --tc-radius-pill: 999px;

  /* Escala de fonte (px). O nome é o tamanho; não há outros tamanhos no painel. */
  --tc-fs-9: 9px;
  --tc-fs-10: 10px;
  --tc-fs-11: 11px;
  --tc-fs-11-5: 11.5px;
  --tc-fs-12: 12px;
  --tc-fs-12-5: 12.5px;   /* segmented, legendas de tabela */
  --tc-fs-13: 13px;       /* label */
  --tc-fs-13-5: 13.5px;   /* controles, cabeçalho de tabela, corpo de tabela */
  --tc-fs-14: 14px;       /* corpo */
  --tc-fs-14-5: 14.5px;   /* menu lateral */
  --tc-fs-15: 15px;
  --tc-fs-16: 16px;       /* subtítulo de página */
  --tc-fs-17: 17px;       /* título de card e de modal, ícones do header */
  --tc-fs-18: 18px;
  --tc-fs-20: 20px;
  --tc-fs-22: 22px;
  --tc-fs-24: 24px;
  --tc-fs-26: 26px;       /* valor de KPI */
  --tc-fs-28: 28px;
  --tc-fs-32: 32px;
  --tc-fs-34: 34px;       /* título do hero da extensão */
  --tc-fs-42: 42px;       /* título de página */

  /* Site público (tclean-site-*): títulos fluidos — o tamanho acompanha a largura da tela */
  --tc-fs-site-hero: clamp(36px, 5.2vw, 66px);   /* h1 da home */
  --tc-fs-site-h1: clamp(34px, 4.8vw, 60px);     /* h1 das outras páginas */
  --tc-fs-site-h2: clamp(28px, 3.2vw, 42px);     /* título de seção */
  --tc-fs-site-cta: clamp(28px, 3.6vw, 48px);    /* faixa roxa de CTA */
  --tc-fs-site-lead: clamp(16px, 1.5vw, 19px);   /* subtítulo do hero */
  --tc-fs-site-sobra: clamp(34px, 3.6vw, 44px);  /* valor da sobra na calculadora */
  --tc-fs-site-preco: 40px;                      /* preço do plano */
  --tc-fs-site-relogio: 64px;                    /* hora na tela de bloqueio (mockup do app) */
  --tc-fs-blog-h1: clamp(32px, 4vw, 52px);       /* h1 do blog (home, categoria e post) */
  /* Capa gerada do blog: tamanhos relativos à largura da capa (cqw), iguais na tela e no PNG */
  --tc-fs-capa-selo: 3cqw;
  --tc-fs-capa-titulo: 6.4cqw;
  --tc-fs-capa-dado: 10cqw;
  --tc-fs-capa-dado-longo: 7.6cqw;
  --tc-fs-capa-rotulo: 2.8cqw;
  --tc-fs-capa-mini: 17cqw;
  --tc-fs-capa-mini-longo: 13cqw;
  --tc-fs-capa-mini-extra: 9.5cqw;
  --tc-backdrop-a06: rgba(32, 10, 46, 0.06);     /* grade da capa clara */
  --tc-backdrop-a60: rgba(32, 10, 46, 0.6);      /* rótulo do dado na capa clara */
  --tc-radius-2xl: 24px;                         /* faixa de CTA e chat do site */
  --tc-radius-phone: 44px;                       /* moldura de celular (mockup) */
}

/* ---------- Abas de visão (ex.: Curva ABC | Por período) ---------- */
.tclean-view-tabs {
  display: flex;
  gap: 28px;
  align-items: flex-end;
  margin: 0 0 18px;
  padding: 0 2px 0;
  border-bottom: 1px solid var(--tc-border);
}

.tclean-view-tabs__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 2px 12px;
  color: var(--tc-muted);
  font-size: var(--tc-fs-15);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s ease, border-color .15s ease;
}

.tclean-view-tabs__item:hover {
  color: var(--tc-ink);
  text-decoration: none;
}

.tclean-view-tabs__item.is-active,
.tclean-view-tabs__item.active {
  color: var(--tc-ink);
  font-weight: 600;
  border-bottom-color: var(--tc-yellow);
}
/* Abas do Bootstrap montadas como tclean-view-tabs (div.nav): sem o visual de .nav */
.tclean-view-tabs.nav { flex-wrap: wrap; }
/* A regra geral de link do tema (.app-container a) pintava as abas inativas de roxo */
.app-container .tclean-view-tabs__item { color: var(--tc-muted); }
.app-container .tclean-view-tabs__item:hover { color: var(--tc-ink); }
.app-container .tclean-view-tabs__item.is-active,
.app-container .tclean-view-tabs__item.active { color: var(--tc-ink); }

.tclean-view-tabs__icon {
  font-size: var(--tc-fs-13);
  opacity: 0.75;
}

.tclean-view-tabs__item.is-active .tclean-view-tabs__icon {
  opacity: 1;
  color: var(--tc-ink);
}

/* ---------- Card ---------- */
.tclean-card {
  background: var(--tc-surface);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  box-shadow: none;
  overflow: hidden;
}

.tclean-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--tc-border);
  background: var(--tc-surface);
}

.tclean-card__title-group {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.tclean-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-ctl-sm);
  color: var(--tc-ink);
  font-size: var(--tc-fs-14);
}

.tclean-card__title {
  font-size: var(--tc-fs-17);
  font-weight: 600;
  color: var(--tc-ink);
  margin: 0;
  white-space: nowrap;
}

.tclean-card__count {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--tc-radius-ctl-sm);
  background: var(--tc-border-soft);
  color: var(--tc-ink);
  font-size: var(--tc-fs-12);
  font-weight: 600;
}

.tclean-card__tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tclean-search {
  position: relative;
}

.tclean-search input {
  height: 36px;
  min-width: 220px;
  padding: 0 12px 0 34px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-ctl-sm);
  font-size: var(--tc-fs-14);
  color: var(--tc-text);
  background: var(--tc-surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.tclean-search input::placeholder { color: var(--tc-muted); }

.tclean-search input:focus {
  outline: none;
  border-color: var(--tc-accent);
  box-shadow: var(--tc-shadow-focus);
}

.tclean-search i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tc-muted);
  font-size: var(--tc-fs-13);
  pointer-events: none;
}

.tclean-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--tc-radius-ctl-sm);
  border: 1px solid var(--tc-border);
  background: transparent;
  color: var(--tc-ink);
  font-size: var(--tc-fs-13-5);
  font-weight: 500;
  transition: background-color .15s ease, border-color .15s ease;
}

.tclean-btn:hover {
  background: var(--tc-border-soft);
  border-color: var(--tc-accent);
  color: var(--tc-ink);
}

/* Ação principal (uma por tela/modal: "Salvar", "Aplicar"). Mesmo visual do
   .btn-primary do tema remapeado mais abaixo; use esta classe em código novo. */
.tclean-btn--primary { background: var(--tc-ink); border-color: var(--tc-ink); color: var(--tc-white); }
.tclean-btn--primary:hover { background: var(--tc-accent); border-color: var(--tc-accent); color: var(--tc-white); }

/* Ação destrutiva (remover, deletar) no mesmo formato do botão secundário */
.tclean-btn--danger { color: var(--tc-danger); }
.tclean-btn--danger:hover { background: var(--tc-danger-bg); border-color: var(--tc-danger-border); color: var(--tc-danger); }
.tclean-btn:disabled,
.tclean-btn[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; }
button.tclean-btn { font-family: inherit; cursor: pointer; }

/* ---------- Wrapper com borda/raio próprios (tabela "flutua" dentro do card) ---------- */
.tclean-table-wrap {
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  overflow-x: auto;
  overflow-y: hidden;
}

.tclean-card__body {
  padding: 16px 20px 20px;
}

/* Botões de exportar (Excel/CSV/PDF), movidos do topo da tabela pro header do card via JS.
   Ficam "grudados" como um grupo só (sem gap, cantos externos arredondados). */
.tclean-card__tools .dt-buttons {
  display: flex;
  gap: 0;
}

.tclean-card__tools .dt-button {
  height: 36px;
  padding: 0 14px !important;
  border-radius: 0 !important;
  border: 1px solid var(--tc-border) !important;
  margin-left: -1px !important;
  background: var(--tc-surface) !important;
  color: var(--tc-ink) !important;
  font-size: var(--tc-fs-13-5) !important;
  box-shadow: none !important;
  position: relative;
}

.tclean-card__tools .dt-button:hover {
  background: var(--tc-border-soft) !important;
  border-color: var(--tc-accent) !important;
  z-index: 1;
}

.tclean-card__tools .dt-button:first-child {
  margin-left: 0 !important;
  border-top-left-radius: var(--tc-radius-ctl-sm) !important;
  border-bottom-left-radius: var(--tc-radius-ctl-sm) !important;
}

.tclean-card__tools .dt-button:last-child {
  border-top-right-radius: var(--tc-radius-ctl-sm) !important;
  border-bottom-right-radius: var(--tc-radius-ctl-sm) !important;
}

/* Setas de ordenação do DataTables — mesma regra que existe no base.css (escopada em
   .table-responsive), só que escopada no nosso wrapper já que não usamos mais aquela classe. */
.tclean-table-wrap table.dataTable thead th.dt-orderable-asc,
.tclean-table-wrap table.dataTable thead th.dt-orderable-desc,
#rp_modal_table_wrap table.dataTable thead th.dt-orderable-asc,
#rp_modal_table_wrap table.dataTable thead th.dt-orderable-desc {
  position: relative;
  cursor: pointer;
  padding-right: 25px !important;
}

.tclean-table-wrap table.dataTable thead th.dt-orderable-asc:after,
.tclean-table-wrap table.dataTable thead th.dt-orderable-desc:after,
#rp_modal_table_wrap table.dataTable thead th.dt-orderable-asc:after,
#rp_modal_table_wrap table.dataTable thead th.dt-orderable-desc:after {
  content: "↕";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--tc-fs-14);
  color: var(--tc-muted);
}

.tclean-table-wrap table.dataTable thead th.dt-ordering-asc,
.tclean-table-wrap table.dataTable thead th.dt-ordering-desc,
#rp_modal_table_wrap table.dataTable thead th.dt-ordering-asc,
#rp_modal_table_wrap table.dataTable thead th.dt-ordering-desc {
  position: relative;
  cursor: pointer;
  padding-right: 25px !important;
}

.tclean-table-wrap table.dataTable thead th.dt-ordering-asc:after,
#rp_modal_table_wrap table.dataTable thead th.dt-ordering-asc:after {
  content: "↑";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--tc-fs-14);
  font-weight: bold;
  color: var(--tc-ink);
}

.tclean-table-wrap table.dataTable thead th.dt-ordering-desc:after,
#rp_modal_table_wrap table.dataTable thead th.dt-ordering-desc:after {
  content: "↓";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--tc-fs-14);
  font-weight: bold;
  color: var(--tc-ink);
}

/* ---------- Tabela ---------- */
.tclean-table {
  width: 100%;
  margin: 0 !important;
  border-collapse: separate;
  border-spacing: 0;
}

/* Trava a largura só da coluna que tem o botão de copiar (SKU / ID do
   pedido), sem mudar o table-layout da tabela inteira (as outras colunas
   continuam com largura de conteúdo, como sempre foram). Com min=max=width
   nos três, o navegador não recalcula essa coluna quando o conteúdo interno
   muda (botão de copiar aparecendo/sumindo no hover) — é isso que fazia a
   tabela toda "tremer" na transição entre linhas. */
.tclean-sku-col {
  width: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;
  overflow: hidden;
}

.tclean-pedido-id-col {
  width: 115px !important;
  min-width: 115px !important;
  max-width: 115px !important;
  overflow: hidden;
}

.tclean-table thead th {
  height: 48px;
  padding: 0 16px !important;
  background: var(--tc-surface);
  color: var(--tc-muted);
  font-size: var(--tc-fs-13-5);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  text-align: center;
  border-bottom: 1px solid var(--tc-border) !important;
  border-top: none !important;
  border-right: 1px solid var(--tc-border) !important;
  white-space: nowrap;
}

.tclean-table thead th:last-child,
.tclean-table tbody td:last-child {
  border-right: none !important;
}

.tclean-table tbody td {
  padding: 12px 12px !important;
  font-size: var(--tc-fs-13-5);
  color: var(--tc-text);
  text-align: center;
  border-bottom: 1px solid var(--tc-border-soft) !important;
  border-top: none !important;
  border-right: 1px solid var(--tc-border-soft) !important;
  vertical-align: middle;
  background: var(--tc-surface);
}

/* Só a coluna fixa (--sticky-first, usada quando a tabela tem scroll
   horizontal) mantém o corpo alinhado à esquerda — o nome do anúncio/produto
   não fica legível centralizado. O restante das colunas, nela e em qualquer
   outra tabela, fica centralizado. */
.tclean-table--sticky-first tbody td:first-child {
  text-align: left;
}

.tclean-table tbody tr {
  transition: background-color .12s ease;
}

.tclean-table tbody tr:hover td {
  /* Cor sólida (não rgba sobre branco): a coluna fixa fica numa camada de
     composição própria (position:sticky + box-shadow) e uma cor transparente
     rende com opacidade diferente nela vs. nas células normais, criando uma
     "costura" visível entre a 1ª coluna e o resto da linha no hover. */
  background: var(--tc-bg);
}

.tclean-table tbody tr:last-child td { border-bottom: none !important; }

/* Linha inteira clicável (abre o modal de detalhe do pedido) — só na tabela de
   Margem por Pedido (classe aplicada condicionalmente pelo JS). */
.tclean-table--row-clickable tbody tr {
  cursor: pointer;
}

.tclean-table .tabular-nums {
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* Coluna fixa (primeira coluna) ao rolar tabelas largas */
.tclean-table--sticky-first thead th:first-child,
.tclean-table--sticky-first tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  max-width: 260px;
  overflow: hidden;
  box-shadow: var(--tc-shadow-sticky);
}

/* Quando a 1ª coluna é ordenável, ".dt-orderable-asc/-desc" (mais abaixo) tem
   mais especificidade (inclui "table.dataTable") e sobrescreve position:sticky
   pra "relative" (usado só pra posicionar a seta ↕) — essa regra precisa
   igualar essa especificidade pra continuar vencendo aqui. */
.tclean-table-wrap table.tclean-table--sticky-first thead th:first-child {
  position: sticky;
  left: 0;
}

.tclean-table--sticky-first thead th:first-child { z-index: 3; }

/* Celular: sem coluna fixa. Presa, a 1ª coluna (produto/anúncio) ocupa quase a tela toda e
   sobra pouco espaço para rolar as demais; no celular a tabela rola inteira. Do md (768px)
   para cima continua fixa. position:relative (não static) mantém a seta de ordenação. */
@media (max-width: 767.98px) {
  .tclean-table--sticky-first thead th:first-child,
  .tclean-table--sticky-first tbody td:first-child,
  .tclean-table-wrap table.tclean-table--sticky-first thead th:first-child {
    position: relative;
    left: auto;
    z-index: auto;
    box-shadow: none;
  }
}

/* O tema (.flex2 / .widget-content-left) não define min-width:0, então
   textos longos "vazam" para fora da célula fixa em vez de truncar.
   Corrige apenas dentro da coluna fixa, sem alterar essas classes globalmente. */
.tclean-table--sticky-first tbody td:first-child .widget-content,
.tclean-table--sticky-first tbody td:first-child .widget-content-wrapper,
.tclean-table--sticky-first tbody td:first-child .widget-content-left {
  min-width: 0;
}

.tclean-table--sticky-first tbody td:first-child .widget-heading,
.tclean-table--sticky-first tbody td:first-child .widget-heading a,
.tclean-table--sticky-first tbody td:first-child .widget-subheading {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Pedido com vários produtos (pack) — cada bloco de produto é uma linha
   truncada só, não uma pilha de itens empurrando a altura da linha toda. */
.tclean-table--sticky-first tbody td:first-child .widget-content + .widget-content {
  margin-top: 8px;
}

/* ---------- Chips de status (pill com borda, ícone + texto) ---------- */
.tclean-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px 0 8px;
  border-radius: var(--tc-radius-sm);
  border: 1px solid var(--tc-border);
  background: var(--tc-surface);
  font-size: var(--tc-fs-13);
  font-weight: 500;
  color: var(--tc-text);
  white-space: nowrap;
}

.tclean-chip__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--tc-muted);
}

.tclean-chip--success .tclean-chip__dot { background: var(--tc-success); }
.tclean-chip--warning .tclean-chip__dot { background: var(--tc-yellow); }
.tclean-chip--danger  .tclean-chip__dot { background: var(--tc-danger); }
.tclean-chip--info    .tclean-chip__dot { background: var(--tc-info); }
.tclean-chip--accent  .tclean-chip__dot { background: var(--tc-accent); }

/* Ícone com significado (status/tipo) em vez de bolinha genérica */
.tclean-chip__icon {
  flex-shrink: 0;
  font-size: var(--tc-fs-12);
  width: 13px;
  text-align: center;
  color: var(--tc-muted);
}

.tclean-chip--success .tclean-chip__icon { color: var(--tc-success); }
.tclean-chip--warning .tclean-chip__icon { color: var(--tc-warning); }
.tclean-chip--danger  .tclean-chip__icon { color: var(--tc-danger); }
.tclean-chip--info    .tclean-chip__icon { color: var(--tc-ink); }
.tclean-chip--neutral .tclean-chip__icon { color: var(--tc-ink); }

/* Distribuição (tipo de logística do anúncio): Full ganha destaque verde,
   remetendo ao selo do próprio Mercado Livre (wordmark itálico) — os
   demais tipos usam o chip padrão com bolinha colorida. */
.tclean-chip--full {
  gap: 3px;
  padding: 0 7px 0 6px;
  border-color: var(--tc-ml-green-line);
  background: transparent;
  color: var(--tc-ml-green);
  font-style: italic;
  font-weight: 800;
  font-size: var(--tc-fs-10);
  text-transform: uppercase;
  letter-spacing: -.01em;
}

/* O ícone genérico reserva uma caixa de 13px pra alinhar com outros ícones do
   sistema — mais larga que o raio em si, o que deixava o espaçamento pro
   texto maior do que o da bolinha (7px) dos outros badges de Distribuição. */
.tclean-chip--full .tclean-chip__icon { width: auto; }

.tclean-chip--full .tclean-chip__icon { color: var(--tc-ml-green); font-size: var(--tc-fs-10); }

/* Barrinhas de nível (Conversão: Alta/Média/Baixa) */
.tclean-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
  flex-shrink: 0;
}

.tclean-bars span {
  width: 3px;
  border-radius: var(--tc-radius-2xs);
  background: var(--tc-border);
}

.tclean-bars span:nth-child(1) { height: 5px; }
.tclean-bars span:nth-child(2) { height: 8px; }
.tclean-bars span:nth-child(3) { height: 11px; }

.tclean-bars--alta span { background: var(--tc-success); }
.tclean-bars--media span:nth-child(1),
.tclean-bars--media span:nth-child(2) { background: var(--tc-warning); }
.tclean-bars--baixa span:nth-child(1) { background: var(--tc-danger); }

/* ---------- ROAS: pill branca com seta (menos "verde sólido" que Lucro) ---------- */
.tclean-roas {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--tc-radius-sm);
  border: 1px solid var(--tc-border);
  background: var(--tc-surface);
  font-size: var(--tc-fs-13-5);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tc-text);
}

.tclean-roas i { font-size: var(--tc-fs-11); }

.tclean-roas--up i,
.tclean-roas--up .tclean-roas__value { color: var(--tc-success); }

.tclean-roas--down i,
.tclean-roas--down .tclean-roas__value { color: var(--tc-danger); }

/* ---------- Pills de métrica (lucro / margem / ROAS etc.) ---------- */
.tclean-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--tc-radius-sm);
  font-size: var(--tc-fs-13-5);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  border: 1px solid transparent;
}

.tclean-pill--positive {
  background: var(--tc-success-bg);
  border-color: var(--tc-success-border);
  color: var(--tc-success-ink);
}

.tclean-pill--negative {
  background: var(--tc-danger-bg);
  border-color: var(--tc-danger-border);
  color: var(--tc-danger);
}

.tclean-pill--neutral {
  background: var(--tc-border-soft);
  border-color: var(--tc-border);
  color: var(--tc-muted);
}

/* Placeholder tracejado (ex.: "Sem custo") */
.tclean-ghost {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--tc-radius-sm);
  border: 1px dashed var(--tc-border);
  color: var(--tc-muted);
  font-size: var(--tc-fs-13);
  white-space: nowrap;
  background: transparent;
  cursor: default;
}

/* ---------- "Sem custo" clicável + modal de custo (semCustoHtml em functions.js) ---------- */
.tclean-sem-custo { cursor: pointer; font-family: inherit; transition: none; }
.tclean-sem-custo:hover { border-color: var(--tc-accent); color: var(--tc-ink); background: var(--tc-lavender); }

/* Mesmo padrão do "Sem custo" pro botão "+ Anexar" fornecedor (Produtos) */
.tclean-anexar-fornecedor { cursor: pointer; font-family: inherit; transition: none; }
.tclean-anexar-fornecedor:hover { border-color: var(--tc-accent); color: var(--tc-ink); background: var(--tc-lavender); }
.tclean-custo-salvo { font-weight: 500; color: var(--tc-text); }
/* Custo com lápis de editar ao lado (custoEditavelHtml em functions.js) */
.tclean-custo-editavel { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.tclean-editar-custo,
.tclean-skupai-editar-custo { display: inline-flex; align-items: center; justify-content: center; padding: 2px; border: 0; border-radius: var(--tc-radius-ctl-sm); background: transparent; color: var(--tc-muted); font-size: var(--tc-fs-13); line-height: 1; vertical-align: middle; cursor: pointer; }
.tclean-editar-custo:hover,
.tclean-editar-custo:focus-visible,
.tclean-skupai-editar-custo:hover,
.tclean-skupai-editar-custo:focus-visible { color: var(--tc-ink); background: var(--tc-border-soft); outline: none; }
.tclean-custo-modal { border: 0; border-radius: var(--tc-radius-card); overflow: hidden; }
.tclean-custo-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--tc-border);
}
.tclean-custo-modal__title { margin: 0; font-size: var(--tc-fs-20); font-weight: 500; color: var(--tc-ink); }
.tclean-custo-modal__id { font: var(--tc-fs-12) var(--tc-mono); color: var(--tc-muted); }
.tclean-custo-modal__close {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--tc-radius-ctl-sm);
  background: var(--tc-lavender);
  color: var(--tc-ink);
  cursor: pointer;
}
.tclean-custo-modal__body { display: flex; flex-direction: column; gap: 8px; padding: 20px 24px; }
/* Contexto do produto no topo do modal (abrirModalCusto): foto, título e custo atual */
.tclean-custo-modal__produto { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; padding: 10px 12px; border: 1px solid var(--tc-border); border-radius: var(--tc-radius-ctl); background: var(--tc-bg); }
.tclean-custo-modal__thumb { flex-shrink: 0; width: 44px; height: 44px; object-fit: contain; border-radius: var(--tc-radius-ctl-sm); background: var(--tc-surface); }
.tclean-custo-modal__produto-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tclean-custo-modal__produto-titulo { font-size: var(--tc-fs-13-5); color: var(--tc-ink); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tclean-custo-modal__produto-titulo:empty { display: none; }
.tclean-custo-modal__atual { font-size: var(--tc-fs-13); color: var(--tc-muted); }
/* Sem foto (ex.: custo em massa): ícone no lugar da miniatura e texto do resumo inteiro */
.tclean-custo-modal__icone { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--tc-radius-ctl-sm); background: var(--tc-lavender); color: var(--tc-ink); font-size: var(--tc-fs-16); }
.tclean-custo-modal__icone ~ .tclean-custo-modal__produto-info .tclean-custo-modal__produto-titulo { display: block; -webkit-line-clamp: unset; }
.tclean-custo-modal__label { margin: 0; font-size: var(--tc-fs-14); font-weight: 500; color: var(--tc-ink); }
.tclean-custo-modal__input {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-ctl);
}
.tclean-custo-modal__input:focus-within { border-color: var(--tc-accent); box-shadow: var(--tc-shadow-focus); }
.tclean-custo-modal__input span { font-size: var(--tc-fs-15); color: var(--tc-muted); }
.tclean-custo-modal__input input { flex: 1; min-width: 0; border: 0; outline: none; font-size: var(--tc-fs-16); color: var(--tc-text); background: transparent; }
.tclean-custo-modal__hint { font-size: var(--tc-fs-13); color: var(--tc-muted); }
.tclean-custo-modal__hint:empty { display: none; }
.tclean-custo-modal__warn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 10px 14px;
  border-radius: var(--tc-radius-ctl);
  background: var(--tc-warning-bg);
  color: var(--tc-warning-ink);
  font-size: var(--tc-fs-13-5);
}
.tclean-custo-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--tc-border);
}
.tclean-custo-modal__footer .tclean-btn { height: 40px; padding: 0 16px; }
.tclean-custo-modal__save {
  height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--tc-radius-ctl);
  background: var(--tc-success);
  color: var(--tc-white);
  font: 500 var(--tc-fs-14) var(--tc-font);
  cursor: pointer;
}
.tclean-custo-modal__save:disabled { background: var(--tc-success-bg); color: var(--tc-success-ink); opacity: .7; cursor: not-allowed; }

/* ---------- Menu de ações "..." por linha ---------- */
.tclean-actions {
  position: relative;
  display: inline-flex;
}

.tclean-actions__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  border-radius: var(--tc-radius-sm);
  color: var(--tc-muted);
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}

.tclean-actions__btn:hover {
  background: var(--tc-border-soft);
  color: var(--tc-ink);
}
/* Ação única indisponível (ex.: calculadora num marketplace sem cálculo) */
.tclean-actions__btn:disabled { opacity: .4; cursor: not-allowed; background: transparent; color: var(--tc-muted); }

.tclean-actions__menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  min-width: 240px;
  padding: 6px;
  background: var(--tc-surface);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-ctl);
  box-shadow: var(--tc-shadow-card-hover);
  text-align: left;
}

.tclean-actions__menu.is-open { display: block; }
/* Aberto, o menu vai para o <body> (wireActionsMenu): fica acima do drawer de anúncio (9999) e abaixo dos modais */
body > .tclean-actions__menu.is-open { z-index: 10030; }

.tclean-actions__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: var(--tc-radius-sm);
  font-size: var(--tc-fs-13-5);
  color: var(--tc-text);
  text-decoration: none;
  cursor: pointer;
}

.tclean-actions__item:hover {
  background: var(--tc-border-soft);
  color: var(--tc-ink);
}

.tclean-actions__item:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.tclean-actions__item:disabled:hover {
  background: transparent;
  color: var(--tc-text);
}

.tclean-actions__item i {
  width: 14px;
  color: var(--tc-muted);
}

/* Ícone do marketplace no lugar do ícone fa (ex.: "Clonar para Shopee") */
.tclean-actions__marca {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  object-fit: contain;
}

/* ---------- DataTables: reskin discreto dos controles ---------- */
.tclean-card .dataTables_wrapper .dt-buttons {
  gap: 6px;
}

.tclean-card .dataTables_wrapper .dt-button,
.tclean-card .dataTables_wrapper .btn-secondary {
  height: 34px;
  padding: 0 12px !important;
  border-radius: var(--tc-radius-ctl-sm) !important;
  border: 1px solid var(--tc-border) !important;
  background: var(--tc-surface) !important;
  color: var(--tc-ink) !important;
  font-size: var(--tc-fs-13) !important;
  box-shadow: none !important;
}

.tclean-card .dataTables_wrapper .dt-button:hover,
.tclean-card .dataTables_wrapper .btn-secondary:hover {
  background: var(--tc-border-soft) !important;
  border-color: var(--tc-accent) !important;
}

/* DataTables 2.3.3 (integração bs4) usa .dt-paging > nav > ul.pagination >
   li.page-item > a.page-link (classes do próprio Bootstrap), não mais
   .dataTables_paginate/.paginate_button (nomes do DataTables 1.x) — as regras
   acima nunca batiam com o markup real, então a paginação ficava só com o
   estilo padrão do Bootstrap, sem o visual "clean" do resto da tela. */
.tclean-card .dt-paging .pagination {
  gap: 4px;
  margin: 0;
}

.tclean-card .dt-paging .page-link {
  border-radius: var(--tc-radius-ctl-sm) !important;
  border: 1px solid transparent !important;
  color: var(--tc-ink) !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 6px 12px;
  font-size: var(--tc-fs-13);
}

.tclean-card .dt-paging .page-link:hover {
  background: var(--tc-border-soft) !important;
}

.tclean-card .dt-paging .page-item.active .page-link {
  border-color: var(--tc-border) !important;
  background: var(--tc-surface) !important;
  font-weight: 600;
}

.tclean-card .dt-paging .page-item.disabled .page-link {
  color: var(--tc-muted) !important;
  opacity: .5;
}

.tclean-card .dt-info,
.tclean-card .dt-length label {
  color: var(--tc-muted);
  font-size: var(--tc-fs-13);
}

/* .dt-length é um <div> comum com <select> e <label> como irmãos (inline) —
   sem isso, o texto do label quebra pra uma linha nova quando o espaço aperta
   ao lado da paginação (nada relacionado a "dataTables_length", que também
   era o nome antigo). */
.tclean-card .dt-length {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  white-space: nowrap;
}

.tclean-card .dt-length label {
  margin: 0;
  white-space: nowrap;
}

/* Rodapé de tabela paginada (server-side) — info à esquerda, seletor de
   página + paginação à direita, mesmo layout do print de referência. Só
   organiza o "dom" do DataTables em linha; cores/formas dos controles já
   vêm do reskin acima. */
.tclean-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid var(--tc-border);
}

.tclean-table-footer__pager {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.tclean-table-footer .dt-length select {
  /* o <select> vem com as classes .form-control do Bootstrap, que define
     width:100% — sem sobrescrever aqui, ele estica pra largura do <label>
     inteiro (que envolve "Exibir" + select + "resultados por página") e
     empurra esse texto por cima da paginação ao lado. */
  width: auto;
  height: 32px;
  min-width: 62px;
  border-radius: var(--tc-radius-ctl-sm);
  border: 1px solid var(--tc-border);
  /* padding-right maior de propósito: o "custom-select" do Bootstrap desenha a
     seta como background-image nesse espaço — com padding igual dos dois
     lados, o texto (ex.: "100") fica por baixo do ícone da seta. */
  padding: 0 28px 0 10px;
  font-size: var(--tc-fs-13);
  color: var(--tc-ink);
}

/* Paginação/rodapé fora de .tclean-card (drawers, modais, telas antigas): o mesmo
   visual do reskin acima, ancorado no próprio rodapé padrão (DT_DOM_PADRAO). */
.tclean-table-footer .dt-paging .pagination { gap: 4px; margin: 0; }
.tclean-table-footer .dt-paging .page-link {
  border-radius: var(--tc-radius-ctl-sm) !important;
  border: 1px solid transparent !important;
  color: var(--tc-ink) !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 6px 12px;
  font-size: var(--tc-fs-13);
}
.tclean-table-footer .dt-paging .page-link:hover { background: var(--tc-border-soft) !important; }
.tclean-table-footer .dt-paging .page-item.active .page-link {
  border-color: var(--tc-border) !important;
  background: var(--tc-surface) !important;
  font-weight: 600;
}
.tclean-table-footer .dt-paging .page-item.disabled .page-link { color: var(--tc-muted) !important; opacity: .5; }
.tclean-table-footer .dt-info,
.tclean-table-footer .dt-length label { color: var(--tc-muted); font-size: var(--tc-fs-13); }
.tclean-table-footer .dt-length { display: flex; align-items: center; gap: 6px; flex-shrink: 0; white-space: nowrap; }
.tclean-table-footer .dt-length label { margin: 0; white-space: nowrap; }
/* Tabela sem paginação/info (paging:false): rodapé vazio some */
.tclean-table-footer:has(> .tclean-table-footer__info:empty):has(> .tclean-table-footer__pager:empty) { display: none; }

/* Barra de busca acima da tabela (o "f" do DT_DOM_PADRAO), no visual do .tclean-search */
.tclean-table-toolbar { display: flex; justify-content: flex-end; padding: 0 0 12px; }
.tclean-table-toolbar:empty,
.tclean-table-toolbar:not(:has(.dt-search)) { display: none; }
.tclean-table-toolbar .dt-search { position: relative; margin: 0; }
.tclean-table-toolbar .dt-search label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tclean-table-toolbar .dt-search input {
  width: 240px;
  max-width: 100%;
  height: 36px;
  margin: 0 !important;
  padding: 0 12px 0 34px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-ctl);
  background: var(--tc-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%238b8698' d='M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z'/%3E%3C/svg%3E") no-repeat 12px center / 13px;
  font-size: var(--tc-fs-13-5);
  color: var(--tc-text);
}
.tclean-table-toolbar .dt-search input:focus { outline: none; border-color: var(--tc-accent); box-shadow: var(--tc-shadow-focus); }

/* ---------- ID do pedido + botão de copiar (só aparece no hover da linha) ---------- */
.tclean-pedido-id {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: var(--tc-text);
  white-space: nowrap;
}

/* Reserva espaço animando a largura (0 → 22px): o texto "anda" um pouco pra
   esquerda no hover pra abrir espaço pro ícone, igual ao concorrente. Isso só
   não faz a TABELA "andar" junto porque a coluna tem largura fixa (columns:
   "width" no DataTable, ver item.js/contribuicao.js) — a coluna não recalcula
   quando o conteúdo interno muda, só o espaço interno é redistribuído. */
.tclean-pedido-id .tclean-copy-btn {
  width: 0;
  opacity: 0;
  overflow: hidden;
  flex-shrink: 0;
  transition: opacity .15s ease, width .15s ease;
}

.tclean-table tbody tr:hover .tclean-pedido-id .tclean-copy-btn,
.tclean-pedido-id .tclean-copy-btn.is-copied {
  width: 22px;
  opacity: 1;
}

/* Na coluna fixa (sticky-first, com scroll horizontal) o "peso" de crescer o
   botão sozinho ainda balança a coluna — por isso o texto também encolhe
   2 caracteres no hover (troca de versão), compensando o espaço do ícone
   em vez de só empurrar. */
.tclean-pedido-id__value--hover { display: none; }

.tclean-table tbody tr:hover .tclean-pedido-id__value--rest {
  display: none;
}

.tclean-table tbody tr:hover .tclean-pedido-id__value--hover {
  display: inline;
}

.tclean-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--tc-muted);
  border-radius: var(--tc-radius-sm);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.tclean-copy-btn:hover {
  background: var(--tc-border-soft);
  color: var(--tc-ink);
}

.tclean-copy-btn__icon--check { display: none; color: var(--tc-success); }
.tclean-copy-btn.is-copied .tclean-copy-btn__icon--copy { display: none; }
.tclean-copy-btn.is-copied .tclean-copy-btn__icon--check { display: block; }

/* ---------- SKU: valor truncado (10 caracteres, no JS) + copiar ----------
   O corte é feito no texto (JS), não por largura/ellipsis do CSS: assim a
   quantidade de caracteres visíveis não muda quando o botão de copiar
   aparece/desaparece (o flex encolhendo o texto pra abrir espaço pro ícone
   fazia sumir mais 2 caracteres só no hover). */
.tclean-sku {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-width: 0;
}

/* Reserva espaço animando a largura (0 → 22px), igual ao ID do pedido —
   só não faz a tabela "andar" porque a coluna SKU tem largura fixa (ver
   "width" na definição da coluna em item.js). */
.tclean-sku .tclean-copy-btn {
  width: 0;
  opacity: 0;
  overflow: hidden;
  flex-shrink: 0;
  transition: opacity .15s ease, width .15s ease;
}

/* Aparece ao passar o mouse na linha inteira, não só em cima do SKU. */
.tclean-table tbody tr:hover .tclean-sku .tclean-copy-btn,
.tclean-sku .tclean-copy-btn.is-copied {
  width: 22px;
  opacity: 1;
}

.tclean-sku__value {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Ícones de marketplace numa célula (aba Produtos › coluna Marketplaces) ---------- */
.tclean-mk {
  width: 18px;
  height: 18px;
  margin-right: 4px;
  object-fit: contain;
  vertical-align: middle;
}

/* Produto no marketplace só pelas variações (o pai lá tem outro SKU): apagado e com contorno tracejado */
.tclean-mk--variacoes {
  opacity: .45;
  outline: 1px dashed var(--tc-muted);
  outline-offset: 1px;
  border-radius: var(--tc-radius-sm);
}

/* ---------- Célula "Produto vendido" (Margem por Pedido) ---------- */
.tclean-pedido-produto {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  /* max-width próprio (não só herdado do td:first-child do sticky-first) —
     assim o truncamento funciona igual em qualquer coluna, mesmo em tabelas
     como curvaabc.php onde "Anúncio" não é a 1ª coluna (é "Pos." antes dela). */
  max-width: 260px;
  cursor: pointer;
}

.tclean-pedido-produto + .tclean-pedido-produto {
  margin-top: 8px;
}

/* Miniatura compacta (30px, padrão Cargoos) + selo do marketplace — usada
   em item.js/previsao_estoque.js no lugar do avatar-icon-wrapper do tema
   (44-54px, pesado demais pra linha de tabela densa). */
.tclean-pedido-produto__thumb {
  position: relative;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: inline-block;
}

.tclean-pedido-produto__thumb > img:first-child {
  width: 30px;
  height: 30px;
  border-radius: var(--tc-radius-sm);
  object-fit: cover;
  display: block;
  border: 1px solid var(--tc-border);
  background: var(--tc-surface);
}

/* Produto sem foto (fallback do <img>) — mesma moldura, ícone genérico no lugar. */
.tclean-pedido-produto__thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--tc-radius-sm);
  border: 1px solid var(--tc-border);
  background: var(--tc-border-soft);
  font-size: var(--tc-fs-12);
}

.tclean-pedido-produto__badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--tc-white);
  background: var(--tc-surface);
  object-fit: contain;
}

/* Wrapper do título + linha auxiliar (ex.: link do MLB) quando tem uma 2ª
   linha embaixo do título — sem min-width:0 aqui, um item flex não encolhe
   abaixo do conteúdo "natural" e o título não trunca (ellipsis do
   .tclean-pedido-produto__titulo não tem efeito), vazando por cima da
   coluna vizinha. */
.tclean-pedido-produto__info {
  min-width: 0;
  overflow: hidden;
}

.tclean-pedido-produto__titulo {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--tc-fs-13-5);
  color: var(--tc-text);
}

/* Linha auxiliar abaixo do título (ex.: "Sincronizado com N anúncios" em
   promocoes.js) — mesma ideia do __info, uma 2ª linha menor e discreta. */
.tclean-pedido-produto__info-aux {
  margin-top: 4px;
  font-size: var(--tc-fs-12);
  opacity: .75;
}

/* Etiqueta embaixo do título (ex.: chip "Amostra grátis" do pedido), dentro do
   __info; sem a opacidade do __info-aux para o chip manter a cor. */
.tclean-pedido-produto__etiqueta {
  margin-top: 4px;
  line-height: 1;
}

/* ---------- Modal de detalhe do pedido (contribuicao.php) ---------- */
.tclean-pedido-modal {
  border-radius: var(--tc-radius-lg);
  border: none;
  overflow: hidden;
  box-shadow: var(--tc-shadow-modal);
}

.tclean-pedido-modal__header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--tc-border);
}

.tclean-pedido-modal__thumb {
  width: 44px;
  height: 44px;
  border-radius: var(--tc-radius-ctl-sm);
  object-fit: cover;
  border: 1px solid var(--tc-border);
  flex-shrink: 0;
}

.tclean-pedido-modal__title-group {
  min-width: 0;
  flex: 1;
}

.tclean-pedido-modal__title {
  font-size: var(--tc-fs-17);
  font-weight: 600;
  color: var(--tc-ink);
  margin: 0;
}

.tclean-pedido-modal__subtitulo {
  font-size: var(--tc-fs-13);
  color: var(--tc-muted);
}

.tclean-pedido-modal__body {
  padding: 20px 24px 24px;
}

.tclean-pedido-modal__section {
  font-size: var(--tc-fs-12-5);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--tc-muted);
  margin: 20px 0 10px;
}

.tclean-pedido-modal__section:first-child {
  margin-top: 0;
}

.tclean-pedido-modal__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--tc-border-soft);
  font-size: var(--tc-fs-14);
  color: var(--tc-text);
}

.tclean-pedido-modal__row:last-child { border-bottom: none; }

.tclean-pedido-modal__row > span:first-child {
  display: flex;
  align-items: center;
  color: var(--tc-muted);
}

.tclean-pedido-modal__icon {
  width: 18px;
  color: var(--tc-muted);
}

.tclean-pedido-modal__row--total {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--tc-border);
  font-weight: 600;
}

.tclean-pedido-modal__row--total > span:last-child {
  color: var(--tc-success);
  font-size: var(--tc-fs-15);
}

.tclean-pedido-modal__ml-link {
  flex-shrink: 0;
  height: 36px;
  font-size: var(--tc-fs-13);
  white-space: nowrap;
}

/* "Detalhamento da venda" abre/fecha — o cabeçalho da seção vira um botão só,
   com a margem sempre visível e o corpo (linhas de valor) escondido até clicar,
   igual a referência. */
.tclean-pedido-modal__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
}

.tclean-pedido-modal__section--toggle {
  margin: 0;
}

.tclean-pedido-modal__toggle-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--tc-fs-13);
  color: var(--tc-muted);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

.tclean-pedido-modal__toggle-summary strong {
  color: var(--tc-success);
  font-weight: 700;
}

/* Margem negativa: total e resumo em vermelho (is-negative no __row--total e no __toggle). */
.tclean-pedido-modal__row--total.is-negative > span:last-child,
.tclean-pedido-modal__toggle.is-negative .tclean-pedido-modal__toggle-summary strong {
  color: var(--tc-danger);
}

.tclean-pedido-modal__chevron {
  font-size: var(--tc-fs-12);
  color: var(--tc-muted);
  transition: transform .15s ease;
}

.tclean-pedido-modal__toggle.is-open .tclean-pedido-modal__chevron {
  transform: rotate(180deg);
}

/* ==========================================================================
   Página de detalhe de campanha (campanha.php) — breadcrumb, header, KPIs,
   funil, e o drawer enxuto de anúncio (campanha_item_drawer.php).
   ========================================================================== */

.tclean-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px 14px;
  font-size: var(--tc-fs-13-5);
  color: var(--tc-muted);
}

.tclean-breadcrumb a {
  color: var(--tc-muted);
  text-decoration: none;
}

.tclean-breadcrumb a:hover {
  color: var(--tc-ink);
  text-decoration: underline;
}

.tclean-breadcrumb i {
  font-size: var(--tc-fs-10);
  opacity: .6;
}

.tclean-breadcrumb span {
  color: var(--tc-ink);
  font-weight: 600;
}

/* ---------- Header da campanha ---------- */
.tclean-campanha-header {
  padding: 20px 24px;
}

.tclean-campanha-header__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  font-size: var(--tc-fs-13);
  color: var(--tc-muted);
  margin-bottom: 8px;
}

.tclean-campanha-header__meta strong {
  color: var(--tc-text);
}

.tclean-campanha-header__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.tclean-campanha-header__title {
  font-size: var(--tc-fs-26);
  font-weight: 700;
  color: var(--tc-ink);
  margin: 0;
}

.tclean-campanha-header__period {
  flex-shrink: 0;
  max-width: 340px;
}

.tclean-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 10px 16px;
  border-radius: var(--tc-radius-sm);
  font-size: var(--tc-fs-13-5);
}

.tclean-alert--warning {
  background: var(--tc-yellow-bg);
  color: var(--tc-warning-strong);
  border: 1px solid var(--tc-yellow-line);
}

.tclean-alert--danger {
  align-items: flex-start;
  background: var(--tc-danger-bg);
  color: var(--tc-danger-ink);
  border: 1px solid var(--tc-danger-border);
}

.tclean-alert--success {
  background: var(--tc-success-soft);
  color: var(--tc-success-ink);
  border: 1px solid var(--tc-success-line);
}

/* Texto escrito por IA (ex.: análise semanal da Saúde): lavanda, para não parecer aviso do sistema */
.tclean-alert--ia {
  background: var(--tc-lavender);
  color: var(--tc-text);
  border: 1px solid var(--tc-lavender-line);
}
.tclean-alert--ia > i { color: var(--tc-ink); }
/* Informativo (não é erro nem atenção): ex.: "ainda a confirmar" e a comissão sugerida em Publicidade › Afiliados */
.tclean-alert--info {
  background: var(--tc-info-bg);
  color: var(--tc-text);
  border: 1px solid var(--tc-info-bg);
}
.tclean-alert--info > i { color: var(--tc-info); }
.tclean-alert__meta { font-size: var(--tc-fs-12-5); color: var(--tc-text-soft); font-weight: 400; }

/* Aviso com título, texto e lista/ações (ícone alinhado ao topo) */
.tclean-alert--bloco { align-items: flex-start; margin-top: 0; }
.tclean-alert--bloco > i { margin-top: 3px; }
.tclean-alert__corpo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tclean-alert__titulo { font-weight: 600; }
.tclean-alert__lista { margin: 0; padding-left: 18px; }
.tclean-alert__acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.tclean-alert__corpo a:not(.tclean-btn) { color: inherit; font-weight: 600; }
.tclean-alert a.tclean-btn { text-decoration: none; }
.tclean-alert a.tclean-btn--primary:hover { color: var(--tc-white); }

/* ---------- Grid unificado de KPIs (um card só, com divisórias internas) ----------
   3 blocos: os 4 KPIs pequenos em 2x2 (colunas 1-2), ROAS e Funil como colunas
   altas lado a lado (colunas 3-4), cada um ocupando as duas linhas — do mesmo jeito
   que o print de referência do concorrente. */
.tclean-kpi-unified {
  display: grid;
  grid-template-columns: 1fr 1fr 1.1fr 1.1fr;
  grid-template-areas:
    "investido unidades roas funil"
    "faturamento lucro roas funil";
  padding: 0;
  overflow: hidden;
}

.tclean-kpi-cell {
  padding: 16px 20px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.tclean-kpi-cell--investido { grid-area: investido; }
.tclean-kpi-cell--unidades { grid-area: unidades; border-left: 1px solid var(--tc-border-soft); }
.tclean-kpi-cell--faturamento { grid-area: faturamento; border-top: 1px solid var(--tc-border-soft); }
.tclean-kpi-cell--lucro { grid-area: lucro; border-top: 1px solid var(--tc-border-soft); border-left: 1px solid var(--tc-border-soft); }
.tclean-kpi-cell--roas { grid-area: roas; border-left: 1px solid var(--tc-border-soft); }
.tclean-kpi-cell--funil { grid-area: funil; border-left: 1px solid var(--tc-border-soft); }

/* Mesma lógica do campanhas.php: os 4 KPIs pequenos têm gráfico de altura fixa
   (JS), então a sobra de altura que o Grid empurra pra bater com a coluna de
   ROAS/Funil precisa virar respiro ENTRE o valor e o gráfico — não vão morto
   depois do eixo X. */
.tclean-kpi-cell--investido,
.tclean-kpi-cell--unidades,
.tclean-kpi-cell--faturamento,
.tclean-kpi-cell--lucro {
  justify-content: space-between;
}

#cp_funil { flex: 1; display: flex; min-height: 0; }

/* Variante de campanhas.php: 1 coluna estreita com Investido/Vendas empilhados,
   depois Campanhas ativas / ROAS / Funil como 3 colunas altas. */
.tclean-kpi-unified--campanhas {
  grid-template-columns: 1fr 1.05fr 1fr 0.95fr;
  grid-template-areas:
    "cps-investido cps-campanhas cps-roas cps-funil"
    "cps-vendas cps-campanhas cps-roas cps-funil";
}

.tclean-kpi-cell--cps-investido { grid-area: cps-investido; }
.tclean-kpi-cell--cps-vendas { grid-area: cps-vendas; border-top: 1px solid var(--tc-border-soft); }
.tclean-kpi-cell--cps-campanhas { grid-area: cps-campanhas; border-left: 1px solid var(--tc-border-soft); }
.tclean-kpi-cell--cps-roas { grid-area: cps-roas; border-left: 1px solid var(--tc-border-soft); }
.tclean-kpi-cell--cps-funil { grid-area: cps-funil; border-left: 1px solid var(--tc-border-soft); }

/* Investido/Vendas usam gráfico com altura fixa (JS), então qualquer sobra de
   altura que o Grid empurrar pra essas células (pra bater com a coluna de
   Campanhas ativas/ROAS/Funil) precisa virar respiro ENTRE o valor e o gráfico
   — não sobra solta depois do eixo X, que é o que parecia "espaço demais no
   rodapé" na referência do concorrente. */
.tclean-kpi-cell--cps-investido,
.tclean-kpi-cell--cps-vendas {
  justify-content: space-between;
}

#cps_funil { flex: 1; display: flex; min-height: 0; }

.tclean-campaign-bar {
  height: 12px;
  border-radius: var(--tc-radius-sm);
  background: var(--tc-border-soft);
  overflow: hidden;
  display: flex;
  margin: 10px 0;
}

.tclean-campaign-bar__seg { height: 100%; }

.tclean-campaign-bar__seg--listrado {
  background-image: repeating-linear-gradient(-45deg, var(--tc-white-a35) 0 6px, transparent 6px 12px);
}

.tclean-campaign-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: var(--tc-fs-14);
  color: var(--tc-muted);
  margin-bottom: 10px;
}

.tclean-campaign-legend span {
  display: inline-flex;
  align-items: center;
}

/* Tabela de "Campanhas ativas" — mais espaçosa e legível que a mini-tabela do ROAS,
   já que aqui não divide o card com um gráfico embaixo. Tamanho/peso de fonte e
   ritmo vertical calibrados pra bater com a referência do concorrente
   (text-[14px] leading-5 pro rótulo, font-medium tabular-nums pros números). */
.tclean-metric-table--campanhas {
  font-size: var(--tc-fs-14);
  line-height: 1.45;
}

/* Seletor composto (.tclean-metric-table.tclean-metric-table--campanhas), não só
   ".tclean-metric-table--campanhas" — a tabela carrega as duas classes, e com a
   mesma especificidade o ".tclean-metric-table th" (uppercase, 10.5px) definido
   mais abaixo no arquivo vencia essa regra na cascata, deixando o cabeçalho caixa
   alta e pequeno mesmo com esse override aqui. Isso também deixa a regra correta
   independente da ordem no arquivo, sem depender de reordenar blocos. */
.tclean-metric-table.tclean-metric-table--campanhas th {
  text-transform: none;
  font-weight: 500;
  font-size: var(--tc-fs-14);
  letter-spacing: 0;
  padding-bottom: 6px;
}

/* O corpo da tabela (Ativas/Vendas/% Fat.) usa .text-center (JS), mas o cabeçalho
   herdava o text-align:right do ".tclean-metric-table th:not(:first-child)" base
   — mesma coluna, alinhamentos diferentes, rótulo "flutuando" fora do eixo dos
   números embaixo. Precisa do seletor composto pela mesma razão do bloco acima. */
.tclean-metric-table.tclean-metric-table--campanhas th:not(:first-child) {
  text-align: center;
}

.tclean-metric-table--campanhas td {
  padding: 7px 0;
}

.tclean-metric-table--campanhas td:not(:first-child) {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.tclean-metric-table--campanhas th:first-child,
.tclean-metric-table--campanhas td:first-child {
  text-align: left;
}

/* Última coluna (% Fat.) fica melhor alinhada à direita do que centralizada — o
   anel + percentual formam um bloco que "ancora" no fim da linha, como no resto
   da tabela de campanhas. O td já usa a classe utilitária ".text-end" (JS, tem
   !important, então não dava pra vencer daqui). O th precisa do seletor composto
   pra vencer o ".tclean-metric-table.tclean-metric-table--campanhas th:not(:first-child)"
   (center) definido acima, que tem a mesma especificidade. */
.tclean-metric-table.tclean-metric-table--campanhas th:last-child {
  text-align: right;
}

.tclean-campaign-icon {
  width: 16px;
  margin-right: 8px;
  text-align: center;
}

.tclean-campaign-ring {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  background: conic-gradient(var(--ring-color, var(--tc-success)) calc(var(--pct, 0) * 1%), var(--tc-border-soft) 0);
}

.tclean-btn--block {
  width: 100%;
  margin-top: 12px;
}

/* "Campanhas ativas" tem naturalmente menos conteúdo que ROAS/Funil (sem gráfico
   grande), então sobra espaço na célula (mesma altura das 2 linhas ao lado). Em vez
   de esticar algo artificialmente (já vimos que isso cria vão morto), ancora o botão
   no rodapé do card — sobra vira respiro intencional acima do botão, não vão órfão. */
.tclean-kpi-cell--cps-campanhas #cps_exportar_relatorio {
  margin-top: auto;
}

.tclean-kpi-cell__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.tclean-kpi-cell__label {
  font-size: var(--tc-fs-13);
  color: var(--tc-muted);
}

.tclean-kpi-cell__info {
  color: var(--tc-border);
  font-size: var(--tc-fs-12);
  cursor: help;
}

.tclean-kpi-cell__value-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.tclean-kpi-cell__value {
  font-size: var(--tc-fs-24);
  font-weight: 700;
  color: var(--tc-text-strong);
  line-height: 1.2;
}

.tclean-kpi-cell__value .tclean-ghost {
  font-size: var(--tc-fs-14);
  font-weight: 500;
}

/* Divisória entre o valor principal e a mini-tabela (ACOS/TACOS, CTR/Conversão) —
   mesmo papel do "h-px bg-border" do concorrente: dá ritmo à célula sem precisar
   inflar a altura do gráfico embaixo pra preencher o espaço. */
.tclean-kpi-cell__divider {
  height: 1px;
  background: var(--tc-border-soft);
  margin: 10px 0;
  flex-shrink: 0;
}

.tclean-kpi-cell__chart {
  margin-top: 6px;
}

/* O CSS Grid já estica essa célula pra bater com a altura da linha (ex.: o card
   de "Campanhas ativas" ao lado); flex:1 aqui faz o wrapper do gráfico absorver
   esse espaço sobrando ANTES do JS desenhar o gráfico, então dá pra medir a
   altura disponível de verdade (ver carregarSerieCampanhas em campanhas.js) em
   vez de chutar um número fixo — que é o motivo do gráfico às vezes ficar
   desproporcionalmente alto. */
.tclean-kpi-cell__chart--tall {
  margin-top: 10px;
  flex: 1 1 auto;
  min-height: 90px;
}

/* ---------- Badge de variação vs. período anterior ---------- */
.tclean-variacao {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--tc-radius-pill);
  font-size: var(--tc-fs-11-5);
  font-weight: 700;
  white-space: nowrap;
}

.tclean-variacao--up { background: var(--tc-success-bg); color: var(--tc-success-ink); }
.tclean-variacao--down { background: var(--tc-danger-bg); color: var(--tc-danger-ink); }
.tclean-variacao:empty { display: none; }

/* ---------- Mini tabela de métricas (ACOS/TACOS) dentro do card de ROAS ---------- */
.tclean-metric-table {
  width: 100%;
  margin-top: 8px;
  border-collapse: collapse;
  font-size: var(--tc-fs-12);
}

.tclean-metric-table th {
  text-align: left;
  font-weight: 600;
  color: var(--tc-muted);
  font-size: var(--tc-fs-11);
  text-transform: uppercase;
  letter-spacing: .02em;
  padding: 0 0 3px;
  border-bottom: 1px solid var(--tc-border-soft);
}

.tclean-metric-table th:not(:first-child),
.tclean-metric-table td:not(:first-child) {
  text-align: right;
}

.tclean-metric-table td {
  padding: 4px 0;
  border-top: 1px solid var(--tc-border-soft);
  color: var(--tc-text);
}

.tclean-metric-table td:first-child i {
  color: var(--tc-muted);
  width: 14px;
  margin-right: 4px;
}

@media (max-width: 992px) {
  .tclean-kpi-unified {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "investido unidades"
      "faturamento lucro"
      "roas funil";
  }
  .tclean-kpi-cell--roas { border-left: none; border-top: 1px solid var(--tc-border-soft); }
}
@media (max-width: 576px) {
  .tclean-kpi-unified {
    grid-template-columns: 1fr;
    grid-template-areas:
      "investido"
      "unidades"
      "faturamento"
      "lucro"
      "roas"
      "funil";
  }
  .tclean-kpi-cell { border-left: none !important; border-top: 1px solid var(--tc-border-soft); }
  .tclean-kpi-cell--investido { border-top: none; }
}

@media (max-width: 992px) {
  .tclean-kpi-unified--campanhas {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "cps-investido cps-vendas"
      "cps-campanhas cps-campanhas"
      "cps-roas cps-funil";
  }
  .tclean-kpi-cell--cps-vendas { border-top: none; border-left: 1px solid var(--tc-border-soft); }
  .tclean-kpi-cell--cps-campanhas { border-left: none; border-top: 1px solid var(--tc-border-soft); }
  .tclean-kpi-cell--cps-roas { border-left: none; border-top: 1px solid var(--tc-border-soft); }
}
@media (max-width: 576px) {
  .tclean-kpi-unified--campanhas {
    grid-template-columns: 1fr;
    grid-template-areas:
      "cps-investido"
      "cps-vendas"
      "cps-campanhas"
      "cps-roas"
      "cps-funil";
  }
  .tclean-kpi-unified--campanhas .tclean-kpi-cell { border-left: none !important; border-top: 1px solid var(--tc-border-soft); }
  .tclean-kpi-cell--cps-investido { border-top: none; }
}

/* ---------- Tooltip CSS puro (sem lib, sem reinit após re-render AJAX) ---------- */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--tc-ink);
  color: var(--tc-white);
  font-size: var(--tc-fs-11-5);
  font-weight: 500;
  width: max-content;
  max-width: 200px;
  white-space: normal;
  text-align: center;
  line-height: 1.35;
  padding: 6px 10px;
  border-radius: var(--tc-radius-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 20;
}

.tclean-kpi-cell__info[data-tooltip]::after {
  left: auto;
  right: -6px;
  transform: translateY(4px);
}

.tclean-kpi-cell__info[data-tooltip]:hover::after {
  transform: translateY(0);
}

[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- Funil de conversão (curva contínua em SVG, sem lib nova) ---------- */
.tclean-funnel2 {
  position: relative;
  padding-top: 34px;
  margin: 4px 0 2px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.tclean-funnel2__svg {
  display: block;
  width: 100%;
  height: 90px;
  flex: 1;
  min-height: 60px;
}

.tclean-funnel2__callout {
  position: absolute;
  top: 0;
  bottom: 38px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
}

.tclean-funnel2__callout-pill {
  background: var(--tc-gray-50);
  color: var(--tc-muted);
  font-size: var(--tc-fs-11);
  font-weight: 700;
  padding: 2px 9px;
  border-radius: var(--tc-radius-pill);
  white-space: nowrap;
  flex-shrink: 0;
}

.tclean-funnel2__callout-line {
  width: 0;
  border-left: 1px dashed var(--tc-gray-400);
  flex: 1;
  margin-top: 1px;
}

.tclean-funnel2__labels {
  position: relative;
  height: 34px;
  margin-top: 4px;
}

.tclean-funnel2__label {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
}

.tclean-funnel2__label-name {
  font-size: var(--tc-fs-12);
  color: var(--tc-muted);
}

.tclean-funnel2__label-value {
  font-size: var(--tc-fs-15);
  font-weight: 700;
  color: var(--tc-text-strong);
}

.tclean-kpi-card__stats {
  margin-top: 4px;
}

.tclean-kpi-card__stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 0;
  border-top: 1px solid var(--tc-border-soft);
  font-size: var(--tc-fs-12);
}

.tclean-kpi-card__stat-row > span:first-child { color: var(--tc-muted); }
.tclean-kpi-card__stat-row strong { color: var(--tc-text); }

/* ---------- Célula de anúncio (thumbnail + título) na tabela de itens ---------- */
.tclean-item-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}

.tclean-item-cell:hover .tclean-item-cell__title {
  color: var(--tc-ink);
  text-decoration: underline;
}

.tclean-item-cell__thumb {
  width: 36px;
  height: 36px;
  border-radius: var(--tc-radius-sm);
  object-fit: cover;
  border: 1px solid var(--tc-border);
  flex-shrink: 0;
  background: var(--tc-gray-50);
}

.tclean-item-cell__title {
  font-size: var(--tc-fs-13-5);
  color: var(--tc-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Drawer enxuto de anúncio ---------- */
.app-drawer-wrapper-campanha-item {
  width: 620px;
  right: -620px;
}

@media (max-width: 700px) {
  .app-drawer-wrapper-campanha-item { width: 100%; right: -100%; }
}

.app-drawer-overlay-campanha-item {
  position: fixed;
  inset: 0;
  background: var(--tc-overlay-strong);
  z-index: 9998;
}

.tclean-item-drawer {
  padding: 24px;
}

.tclean-item-drawer__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.tclean-item-drawer__thumb {
  width: 72px;
  height: 72px;
  border-radius: var(--tc-radius-ctl);
  object-fit: cover;
  border: 1px solid var(--tc-border);
  background: var(--tc-gray-50);
}

.tclean-item-drawer__badges {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.tclean-item-drawer__title {
  font-size: var(--tc-fs-18);
  font-weight: 600;
  color: var(--tc-ink);
  margin: 16px 0 4px;
}

.tclean-item-drawer__meta {
  font-size: var(--tc-fs-13);
  color: var(--tc-muted);
}

.tclean-item-drawer__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0;
}

.tclean-item-drawer__stat {
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-sm);
  padding: 12px 14px;
  min-width: 0;
}

.tclean-item-drawer__stat-label {
  font-size: var(--tc-fs-12);
  color: var(--tc-muted);
  margin-bottom: 4px;
}

.tclean-item-drawer__stat-value-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.tclean-item-drawer__stat-value {
  font-size: var(--tc-fs-16);
  font-weight: 700;
  color: var(--tc-text-strong);
}

.tclean-item-drawer__stat-caption {
  font-size: var(--tc-fs-11);
  color: var(--tc-muted);
  margin-top: 3px;
}

.tclean-item-drawer__section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--tc-border);
}

.tclean-item-drawer__section h4 {
  font-size: var(--tc-fs-14);
  font-weight: 600;
  color: var(--tc-ink);
  margin: 0 0 12px;
}

.tclean-item-drawer__grid2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}

.tclean-item-drawer__grid2 > * {
  min-width: 0;
}

.tclean-item-drawer__grid2 .tclean-item-drawer__section {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-sm);
  padding: 14px;
  min-width: 0;
}

@media (max-width: 700px) {
  .tclean-item-drawer__grid2 { grid-template-columns: 1fr; }
}

.tclean-item-drawer__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.tclean-item-drawer__section-head h4 {
  margin: 0;
}

.tclean-divisao {
  display: flex;
  align-items: center;
  gap: 14px;
}

.tclean-divisao__chart {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
}

.tclean-divisao__legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--tc-fs-13);
  min-width: 0;
}

.tclean-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 6px;
  flex-shrink: 0;
}

.tclean-dot--ads { background: var(--tc-ink); }
.tclean-dot--organico { background: var(--tc-border); border: 1px solid var(--tc-muted); }
.tclean-dot--estoque { background: var(--tc-border-soft); border: 1px solid var(--tc-border); }

.tclean-stockbar {
  height: 10px;
  border-radius: var(--tc-radius-pill);
  background: var(--tc-border-soft);
  overflow: hidden;
  display: flex;
}

.tclean-stockbar__seg--ads { background: var(--tc-ink); height: 100%; }
.tclean-stockbar__seg--organico { background: var(--tc-lilac-300); height: 100%; }

.tclean-stockbar__legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--tc-fs-12-5);
  margin-top: 10px;
}

.tclean-stockbar__legend > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tclean-stockbar__total {
  font-size: var(--tc-fs-13);
  color: var(--tc-muted);
}

.tclean-stockbar__total strong {
  color: var(--tc-text-strong);
}

/* ---------- Badge de dependência de Ads (drawer de item) ---------- */
.tclean-dependency-badge {
  font-size: var(--tc-fs-11);
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--tc-radius-pill);
  white-space: nowrap;
}

.tclean-dependency-badge--alta { background: var(--tc-danger-bg); color: var(--tc-danger-ink); }
.tclean-dependency-badge--media { background: var(--tc-yellow-bg); color: var(--tc-warning-strong); }
.tclean-dependency-badge--baixa { background: var(--tc-success-bg); color: var(--tc-success-ink); }

/* ---------- Termos mais buscados (Trends API x título) ---------- */
.tclean-termos-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tclean-termos-list__item,
.tclean-termos-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px dashed var(--tc-border);
  border-radius: var(--tc-radius-pill);
  font-size: var(--tc-fs-12);
  color: var(--tc-muted);
}

.tclean-termos-list li.tclean-termos-list__item--ok {
  color: var(--tc-text);
  border-style: solid;
  border-color: var(--tc-success);
  background: var(--tc-success-bg-soft);
}

.tclean-termos-list__rank {
  font-weight: 700;
  color: var(--tc-muted);
  min-width: 16px;
}

.tclean-termos-list li i {
  margin-left: auto;
  font-size: var(--tc-fs-10);
  color: var(--tc-border);
}

.tclean-termos-list li.tclean-termos-list__item--ok i {
  color: var(--tc-success);
}

.tclean-termos-list__legend {
  display: flex;
  gap: 14px;
  margin-top: 10px;
  font-size: var(--tc-fs-11);
  color: var(--tc-muted);
}

.tclean-termos-list__legend i {
  margin-right: 4px;
  font-size: var(--tc-fs-9);
}

.tclean-termos-list__legend span:first-child i { color: var(--tc-success); }

/* ---------- Botão "Filtros" + drawer colapsável ----------
   Os filtros da página ficam escondidos num painel que desliza da direita,
   igual ao mecanismo já usado pra drawer de anúncio/genérico (app.js:
   .open-filtros-drawer / .close-filtros-drawer), só que numa largura menor,
   apropriada pra um formulário de filtros (não conteúdo grande). */
.tclean-filtros-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-ctl-sm);
  background: var(--tc-surface);
  color: var(--tc-ink);
  font-weight: 500;
  font-size: var(--tc-fs-14);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}

.tclean-filtros-btn:hover {
  background: var(--tc-border-soft);
  border-color: var(--tc-accent);
}

.tclean-filtros-btn__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--tc-radius-pill);
  background: var(--tc-ink);
  color: var(--tc-white);
  font-size: var(--tc-fs-11);
  font-weight: 700;
}

.app-drawer-wrapper-filtros {
  width: 380px;
  max-width: 90vw;
  height: 100%;
  position: fixed;
  right: -380px;
  top: 0;
  transition: all .2s;
  z-index: 9999;
  background: var(--tc-surface);
}

.app-drawer-wrapper-filtros.drawer-open {
  right: 0;
  box-shadow: var(--tc-shadow-drawer);
}

.app-drawer-overlay-filtros {
  position: fixed;
  inset: 0;
  background: var(--tc-overlay);
  z-index: 9998;
}

/* O popup do daterangepicker (plugin) é anexado no <body> com z-index 3001
   (ver plugins/daterangepicker/daterangepicker.css) — menor que o do nosso
   drawer de filtros (9999), então ao abrir o calendário de dentro do drawer
   ele ficava escondido atrás do painel. Um popup de data deve sempre ficar
   por cima de tudo, então sobe o z-index dele globalmente. */
.daterangepicker {
  z-index: 10000 !important;
}

.tclean-filtros-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--tc-border);
}

.tclean-filtros-drawer__title {
  font-size: var(--tc-fs-17);
  font-weight: 600;
  color: var(--tc-ink);
  margin: 0;
}

.tclean-filtros-drawer__body {
  padding: 20px;
  overflow-y: auto;
  height: calc(100% - 138px);
}

.tclean-filtros-drawer__footer {
  padding: 16px 20px;
  border-top: 1px solid var(--tc-border);
}

/* ---------- Seletor de período compacto (input do daterangepicker vestido
   de botão-pílula, igual ao concorrente) — usado quando a única "filtragem"
   da tela é data (não justifica esconder atrás do drawer de Filtros). O
   daterangepicker em si não muda, só a casca visual do input que o abre. */
.tclean-date-picker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-ctl-sm);
  background: var(--tc-surface);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}

.tclean-date-picker:hover,
.tclean-date-picker:focus-within {
  background: var(--tc-border-soft);
  border-color: var(--tc-accent);
}

.tclean-date-picker__icon {
  color: var(--tc-muted);
  font-size: var(--tc-fs-13);
  flex-shrink: 0;
}

.tclean-date-picker__chevron {
  color: var(--tc-muted);
  font-size: var(--tc-fs-11);
  flex-shrink: 0;
}

.tclean-date-picker__input {
  border: none;
  outline: none;
  background: transparent;
  color: var(--tc-ink);
  font-weight: 500;
  font-size: var(--tc-fs-14);
  /* Cabe "01/09/2026 - 26/09/2026" inteiro na Geist (168px fixo cortava o
     último dígito); field-sizing acompanha o texto onde o navegador suporta */
  field-sizing: content;
  font-variant-numeric: tabular-nums;
  padding: 0;
  cursor: pointer;
}
@supports not (field-sizing: content) {
  .tclean-date-picker__input { min-width: 23ch; }
}

/* ---------- Resultado dos pedidos (dashboard) ---------- */
.tclean-resultado-grid {
  display: flex;
  flex-direction: column;
}

.tclean-resultado-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 20px;
  border: none;
  border-top: 1px solid var(--tc-border);
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background-color .12s ease;
}

.tclean-resultado-stat:first-child {
  border-top: none;
}

.tclean-resultado-stat:hover {
  background: var(--tc-border-soft);
}

.tclean-resultado-stat::after {
  content: '\f105';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  margin-left: auto;
  color: var(--tc-muted);
  font-size: var(--tc-fs-13);
}

.tclean-resultado-stat__value {
  font-size: var(--tc-fs-20);
  font-weight: 700;
  min-width: 28px;
}

.tclean-resultado-stat__label {
  color: var(--tc-muted);
  font-size: var(--tc-fs-14);
}

.tclean-resultado-stat--success .tclean-resultado-stat__value { color: var(--tc-success); }
.tclean-resultado-stat--warning .tclean-resultado-stat__value { color: var(--tc-warning); }
.tclean-resultado-stat--danger .tclean-resultado-stat__value { color: var(--tc-danger); }

/* Modal "Resultado dos pedidos" tem só 6 colunas (mais espaço livre que as
   tabelas densas que definem .tclean-pedido-id-col/.tclean-sku-col com
   largura fixa e enxuta) — alarga só aqui pra caber o ID/SKU quase inteiro. */
#modal_resultado_pedidos .tclean-pedido-id-col {
  width: 190px !important;
  min-width: 190px !important;
  max-width: 190px !important;
}
#modal_resultado_pedidos .tclean-sku-col {
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
}

.rp-produto-thumb {
  width: 36px;
  height: 36px;
  border-radius: var(--tc-radius-sm);
  object-fit: cover;
  border: 1px solid var(--tc-border);
  flex-shrink: 0;
}

.rp-produto-thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tc-border-soft);
  color: var(--tc-muted);
  font-size: var(--tc-fs-13);
}

/* ==========================================================================
   Tema do painel (DS 2.0)
   Só sobrescreve aparência das classes do tema (base.css) — não muda
   estrutura nem IDs. Escopo .app-container, pra não vazar para landing/login.
   Referência: design-system/reference/Emori Dashboard.dc.html
   ========================================================================== */

/* ---------- Base ---------- */
body:has(> .app-container),
.app-container {
  font-family: var(--tc-font);
  color: var(--tc-text);
  -webkit-font-smoothing: antialiased;
}
.app-container,
.app-container .app-main,
.app-container .app-main__outer,
.app-container .app-main .app-main__inner {
  background: var(--tc-bg);
}
.app-container .app-main .app-main__inner {
  padding: 28px 32px 32px;
}
.app-container .btn,
.app-container .form-control,
.app-container .form-select,
.app-container .input-group-text,
.app-container .dropdown-menu,
.app-container .modal,
.app-container .popover,
.app-container .tooltip {
  font-family: var(--tc-font);
}
.tooltip,
.popover,
.app-container .tooltip,
.app-container .popover,
body > .tooltip,
body > .popover {
  z-index: 105000 !important;
}
.tooltip .tooltip-inner {
  max-width: 360px !important;
  text-align: left;
}
/* Tooltip claro para comparação de valores e uma nota de referência. */
.tooltip.tclean-tooltip--light.show { opacity: 1; }
.tooltip.tclean-tooltip--light .tooltip-inner {
  width: 280px;
  max-width: min(280px, calc(100vw - 32px)) !important;
  padding: 12px 14px;
  background: var(--tc-surface);
  color: var(--tc-text);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  box-shadow: var(--tc-shadow-popover);
  font-family: var(--tc-font);
  font-size: var(--tc-fs-13);
  font-weight: 400;
  line-height: 1.5;
}
.tclean-tooltip--light .tooltip-arrow { display: none; }
.tclean-tooltip__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  color: var(--tc-text-soft);
}
.tclean-tooltip__row + .tclean-tooltip__row { margin-top: 4px; }
.tclean-tooltip__row strong {
  color: var(--tc-text-strong);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tclean-tooltip__note {
  margin-top: 8px;
  color: var(--tc-muted);
  font-size: var(--tc-fs-11-5);
  line-height: 1.4;
}
/* Dica (i) ao lado de um valor, na mesma linha: o texto abre no tooltip claro acima
   (Bootstrap Tooltip com customClass: tclean-tooltip--light; initMarketplaceFeesTooltips). */
.tclean-dica {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.tclean-dica__icone {
  color: var(--tc-muted);
  font-size: var(--tc-fs-12);
  cursor: help;
}
.tclean-dica__icone:hover,
.tclean-dica__icone:focus-visible { color: var(--tc-ink); outline: none; }
.app-container a { color: var(--tc-ink); }
.app-container a:hover { color: var(--tc-accent); }
.app-container .text-emori { color: var(--tc-ink) !important; }
.app-container .bg-emori { background-color: var(--tc-ink) !important; }
.app-container .text-muted { color: var(--tc-muted) !important; }

/* ---------- Header ---------- */
.app-container .app-header {
  height: 72px;
  background: var(--tc-surface);
  border-bottom: 1px solid var(--tc-border);
}
.app-container .app-header.header-shadow { box-shadow: none; }
.app-container .app-header .app-header__content { height: 72px; padding: 0 32px; }
.app-container .app-header__logo {
  height: 72px;
  width: 264px;
  padding: 0 22px;
  background: var(--tc-surface);
  border-right: 1px solid var(--tc-border);
}
/* Logo refinado (design-system/brand/logo/logo-emori.css) */
.app-container .app-header__logo .logo-src {
  width: 131px !important;
  height: 32px !important;
  background: url("../images/logo-inverse.svg") left center / contain no-repeat !important;
}
/* Seletor de conta (admin/agência): o select2 calcula a largura pelo nome mais
   longo da lista e empurrava avatar e ícones pra fora do header. */
.app-container .app-header--admin .app-header-left { flex: 1 1 auto; min-width: 0; }
.app-container .app-header--admin .app-header-left .nav,
.app-container .app-header--admin .app-header-left .nav-item,
.app-container .app-header--admin .app-header-left .nav-link,
.app-container .app-header--admin .app-header-left .form-group { min-width: 0; max-width: 100%; }
/* Largura fixa confortável; só encolhe quando falta espaço no header */
.app-container .app-header--admin .app-header-left .select2-container { width: 360px !important; max-width: 100%; }
.app-container .app-header .header-user-info > .widget-heading {
  font-size: var(--tc-fs-14); font-weight: 500; color: var(--tc-text);
}
.app-container .app-header .header-user-info > .widget-subheading {
  font-size: var(--tc-fs-12-5); color: var(--tc-muted); opacity: 1;
}
.app-container .app-header .header-dots .icon-wrapper-alt {
  width: 40px; height: 40px;
  border-radius: var(--tc-radius-ctl) !important;
  border: 1px solid var(--tc-border);
  background: var(--tc-surface);
}
.app-container .app-header .header-dots .icon-wrapper-alt .icon-wrapper-bg { display: none; }
.app-container .app-header .header-dots .icon-wrapper-alt .icon,
.app-container .app-header .header-dots .icon-wrapper-alt .fa,
.app-container .app-header .header-dots .icon-wrapper-alt .fab {
  color: var(--tc-ink) !important;
  font-size: var(--tc-fs-17);
}
.app-container .app-header .header-dots .icon-wrapper-alt .text-danger { color: var(--tc-danger) !important; }
.app-container .app-header .header-btn-lg::before { display: none; }
.app-container .app-header .header-btn-lg #img_avatar { border-radius: var(--tc-radius-ctl) !important; }
/* Botão de ajuda no mesmo padrão dos ícones do header (40x40, ícone centralizado);
   p-1/pe-1/ps-1 do markup vêm com !important do Bootstrap */
.app-container .app-header .header-btn-lg .btn-alternate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0 !important;
  border-radius: var(--tc-radius-ctl);
  border: 1px solid var(--tc-border);
  background: var(--tc-surface);
  box-shadow: none;
}
.app-container .app-header .header-btn-lg .btn-alternate:hover { background: var(--tc-lavender); border-color: var(--tc-lavender-line); }
.app-container .app-header .header-btn-lg .btn-alternate .fa {
  padding: 0 !important;
  font-size: var(--tc-fs-17);
  line-height: 1;
  color: var(--tc-ink) !important;
}
/* Espaço igual entre os ícones (só o primeiro tinha me-2) */
.app-container .app-header .header-dots { display: flex; align-items: center; gap: 8px; }
.app-container .app-header .header-dots .dropdown > .btn { margin: 0 !important; }

/* ---------- Sidebar ---------- */
.app-container .app-sidebar {
  width: 264px;
  min-width: 264px;
  flex: 0 0 264px;
  background: var(--tc-surface);
  border-right: 1px solid var(--tc-border);
}
.app-container .app-sidebar.sidebar-shadow { box-shadow: none; }
.app-container .app-sidebar .app-sidebar__inner { padding: 14px 12px 24px; }
.app-container .vertical-nav-menu .app-sidebar__heading {
  padding: 6px 12px 8px;
  margin: 0;
  font-size: var(--tc-fs-11-5);
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--tc-ink);
}
.app-container .vertical-nav-menu li a {
  height: 40px;
  line-height: 38px;
  padding: 0 12px 0 42px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: var(--tc-radius-ctl);
  font-size: var(--tc-fs-14-5);
  color: var(--tc-text);
  /* Sem transição: o tema anima "all" (no menu recolhido o texto "voava" com o
     text-indent) e, mesmo só na cor, o fade de um item apagando enquanto o
     próximo acende parecia piscar ao passar o mouse pela lista. */
  transition: none;
}
.app-container .vertical-nav-menu li a:hover {
  background: var(--tc-lavender);
  color: var(--tc-ink);
}
.app-container .vertical-nav-menu i.metismenu-icon {
  left: 12px;
  width: 20px;
  font-size: var(--tc-fs-17);
  color: var(--tc-muted);
  opacity: 1;
  transition: none;
}
.app-container .vertical-nav-menu li a:hover i.metismenu-icon,
.app-container .vertical-nav-menu li.mm-active > a i.metismenu-icon,
.app-container .vertical-nav-menu li a.mm-active i.metismenu-icon {
  color: var(--tc-ink);
  opacity: 1; /* o tema baixa pra .6 no hover e o ícone "sumia" */
}
.app-container .vertical-nav-menu li.mm-active > a {
  color: var(--tc-ink);
  font-weight: 600;
}
.app-container .vertical-nav-menu li a.mm-active,
.app-container .vertical-nav-menu ul > li > a.mm-active {
  background: var(--tc-lavender);
  border-color: var(--tc-lavender-line);
  color: var(--tc-ink);
  font-weight: 600;
}
.app-container .vertical-nav-menu ul:before { background: var(--tc-border); }
.app-container .vertical-nav-menu ul > li > a {
  height: 36px;
  line-height: 34px;
  padding: 0 12px 0 16px;
  font-size: var(--tc-fs-14);
}
.app-container .vertical-nav-menu i.metismenu-state-icon { color: var(--tc-gray-500); opacity: 1; }
.app-container.closed-sidebar .app-sidebar:not(:hover) .vertical-nav-menu .menu-badge { display: none; }
.app-container .vertical-nav-menu .menu-badge {
  padding: 3px 6px;
  border-radius: var(--tc-radius-sm);
  background: var(--tc-ink);
  color: var(--tc-white);
}

/* Sidebar aberta ocupa 264px; recolhida (closed-sidebar) volta aos 80px do tema.
   Abaixo de 768px o tema já esconde o menu em gaveta (translateX). */
@media (min-width: 768px) {
  .app-container.fixed-sidebar:not(.closed-sidebar) .app-main .app-main__outer { padding-left: 264px; }
  .app-container.closed-sidebar .app-header__logo { width: 80px; padding: 0 16px; }
  .app-container.closed-sidebar .app-header__logo .logo-src { display: none; }
  .app-container.closed-sidebar .app-sidebar { width: 80px; min-width: 80px; flex: 0 0 80px; transition: width .2s ease, min-width .2s ease, flex-basis .2s ease; }
  .app-container.closed-sidebar .app-sidebar .app-sidebar__heading { transition: none; }
  .app-container.closed-sidebar .app-sidebar:hover { width: 264px !important; min-width: 264px !important; flex: 0 0 264px !important; }
  .app-container.closed-sidebar .vertical-nav-menu li a { padding: 0; text-indent: -999em; }
  .app-container.closed-sidebar .vertical-nav-menu i.metismenu-icon { left: 50%; margin-left: -10px; text-indent: 0; }
  .app-container.closed-sidebar .app-sidebar:hover .vertical-nav-menu li a { padding: 0 12px 0 42px; text-indent: 0; }
  .app-container.closed-sidebar .app-sidebar:hover .vertical-nav-menu i.metismenu-icon { left: 12px; margin-left: 0; }
}

/* ---------- Cards ---------- */
/* Título dos cards antigos (card-body > h5.card-title): tema punha caixa alta e cinza-azulado */
.app-container .card-title {
  margin-bottom: 12px;
  text-transform: none;
  font-size: var(--tc-fs-15);
  font-weight: 500;
  color: var(--tc-ink);
}
.app-container .card {
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-card);
  box-shadow: none;
  background: var(--tc-surface);
}
.app-container .card.mb-3 { margin-bottom: 20px !important; }
.app-container .card[class*="card-shadow-"] { box-shadow: none; }
.app-container .card > .card-header,
.app-container .card-header {
  min-height: 60px;
  padding: 0 20px;
  background: transparent;
  border-bottom: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-card) var(--tc-radius-card) 0 0;
  text-transform: none;
}
.app-container .card-header .card-header-title,
.app-container .card-header-title {
  font-size: var(--tc-fs-15) !important;
  font-weight: 500 !important;
  color: var(--tc-ink);
  text-transform: none !important;
  letter-spacing: 0;
}
.app-container .card-body { padding: 20px; }
.app-container .card-footer {
  background: transparent;
  border-top: 1px solid var(--tc-border);
}

/* Abas dentro do header do card (ex.: Top 10 Anúncios) */
.app-container .card-header .nav { gap: 20px; margin-left: auto; }
.app-container .card-header .nav .nav-link,
.app-container .card-header-tab-animation .nav .nav-link {
  padding: 0 2px;
  height: 60px;
  line-height: 58px;
  margin: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-size: var(--tc-fs-14);
  font-weight: 400;
  color: var(--tc-muted);
  background: transparent !important;
}
.app-container .card-header .nav .nav-link::before { display: none; }
.app-container .card-header .nav .nav-link:hover { color: var(--tc-ink); }
.app-container .card-header .nav .nav-link.active {
  color: var(--tc-ink);
  font-weight: 500;
  border-bottom-color: var(--tc-yellow);
}

/* ---------- Widgets de número (tema) ---------- */
.app-container .widget-chart .widget-numbers,
.app-container .widget-numbers {
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--tc-ink);
  font-variant-numeric: tabular-nums;
}
.app-container .widget-chart .widget-numbers small { font-weight: 400; }
.app-container .widget-chart .widget-subheading,
.app-container .widget-subheading {
  font-size: var(--tc-fs-13);
  font-weight: 400;
  color: var(--tc-muted);
  opacity: 1;
}
.app-container .widget-chart .widget-title,
.app-container .widget-heading {
  font-size: var(--tc-fs-13);
  font-weight: 500;
  color: var(--tc-muted);
  opacity: 1 !important;
}
.app-container .widget-content .widget-heading { color: var(--tc-text); }
.app-container .text-focus { color: var(--tc-text) !important; }

/* ---------- Progress ---------- */
.app-container .progress {
  background: var(--tc-track);
  border-radius: var(--tc-radius-sm);
  box-shadow: none;
}
.app-container .progress .progress-bar { border-radius: var(--tc-radius-sm); }
.app-container .progress-wrapper-bottom .progress { border-radius: 0 0 var(--tc-radius-card) var(--tc-radius-card); }
.app-container .progress-bar.bg-emori { background: var(--tc-accent) !important; }

/* ---------- Botões ---------- */
.app-container .btn {
  border-radius: var(--tc-radius-ctl-sm);
  font-weight: 500;
  box-shadow: none;
}
.app-container .btn-shadow { box-shadow: none !important; }
.app-container .btn-alternate,
.app-container .btn-dark,
.app-container .btn-primary {
  background: var(--tc-ink);
  border-color: var(--tc-ink);
  color: var(--tc-white);
}
.app-container .btn-alternate:hover,
.app-container .btn-dark:hover,
.app-container .btn-primary:hover {
  background: var(--tc-accent);
  border-color: var(--tc-accent);
  color: var(--tc-white);
}
.app-container .btn-outline-alternate,
.app-container .btn-outline-secondary {
  background: var(--tc-surface);
  border: 1px solid var(--tc-border);
  color: var(--tc-ink);
}
.app-container .btn-outline-alternate:hover,
.app-container .btn-outline-secondary:hover {
  background: var(--tc-lavender);
  border-color: var(--tc-lavender-line);
  color: var(--tc-ink);
}
.app-container .btn-outline-alternate.active,
.app-container .btn-outline-alternate:active {
  background: var(--tc-ink) !important;
  border-color: var(--tc-ink) !important;
  color: var(--tc-white) !important;
}
/* Grupo segmentado (ex.: 6 meses | 12 meses | Personalizado) */
.app-container .btn-group-sm > .btn-outline-alternate { height: 30px; padding: 0 10px; font-size: var(--tc-fs-12-5); }

/* ---------- Formulários ---------- */
.app-container .form-control,
.app-container .form-select {
  border-color: var(--tc-border);
  border-radius: var(--tc-radius-ctl);
  color: var(--tc-text);
}
.app-container .form-control:focus,
.app-container .form-select:focus {
  border-color: var(--tc-accent);
  box-shadow: var(--tc-shadow-focus);
}
.app-container .input-group-text {
  background: var(--tc-surface);
  border-color: var(--tc-border);
  color: var(--tc-ink);
}

/* ---------- Alertas ---------- */
.app-container .alert {
  border: 0;
  border-radius: var(--tc-radius-lg);
  font-size: var(--tc-fs-14);
}
.app-container .alert-warning { background: var(--tc-warning-bg); color: var(--tc-warning-ink); }
.app-container .alert-danger { background: var(--tc-danger-bg); color: var(--tc-danger-ink); }

/* ---------- Badges ---------- */
.app-container .badge { font-weight: 600; letter-spacing: .02em; border-radius: var(--tc-radius-ctl-sm); }
.app-container .badge.rounded-pill { border-radius: var(--tc-radius-pill); }
/* Selo "Novo" do menu lateral (nav_lateral.php). A cor vem de badge_color do
   menu (style inline, ex.: var(--tc-accent)); sem ela, accent. */
.app-container .badge.tclean-nav-badge {
  padding: 2px 7px;
  border-radius: var(--tc-radius-sm);
  background-color: var(--tc-accent);
  color: var(--tc-white);
  font-size: var(--tc-fs-9);
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1.3;
  text-transform: uppercase;
}
.app-container .badge.tclean-nav-badge--sub { padding: 2px 6px; letter-spacing: .02em; line-height: 1; }

/* ---------- Modais / dropdowns ---------- */
.modal-backdrop.show { background: var(--tc-backdrop); opacity: .4; }
.app-container ~ .modal .modal-content,
.modal .modal-content {
  border: 0;
  border-radius: var(--tc-radius-card);
  box-shadow: var(--tc-shadow-drawer);
  overflow: hidden;
}
/* base.css põe sombra no .modal-dialog. Com -centered/-scrollable ele ocupa a
   altura da tela e a sombra vira um retângulo atrás do card; a sombra certa
   já está no .modal-content acima. */
.modal .modal-dialog { box-shadow: none; }
.modal .modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--tc-border);
}
.modal .modal-title {
  font-family: var(--tc-font);
  font-size: var(--tc-fs-20);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--tc-ink);
}
.app-container .dropdown-menu {
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  box-shadow: var(--tc-shadow-menu);
}

/* ---------- Cores "de sistema" do Bootstrap/ArchitectUI na paleta do DS ----------
   O tema original usa primary = azul #3f6ad8 e info = ciano #16aaff (com
   !important). Sucesso (#3ac47d), perigo (#d92550), aviso (#f7b924) e
   alternate (#794c8a) já são as cores do DS e ficam como estão.
   Tela nova não deve depender disto: use os componentes tclean-* (ver
   design-system/README.md › "Como montar uma tela"). */
:root {
  --bs-primary: #450165;
  --bs-primary-rgb: 69, 1, 101;
  --bs-info: #3f6ad8;
  --bs-info-rgb: 63, 106, 216;
  --bs-link-color: #450165;
}
.text-primary, .link-primary { color: var(--tc-ink) !important; }
.bg-primary { background-color: var(--tc-ink) !important; }
.border-primary { border-color: var(--tc-ink) !important; }
.text-info { color: var(--tc-info) !important; }
.bg-info { background-color: var(--tc-info) !important; }
/* Botões info / outline-primary / outline-info = botão secundário do DS */
.app-container .btn-info,
.app-container .btn-outline-primary,
.app-container .btn-outline-info,
.modal .btn-info,
.modal .btn-outline-primary,
.modal .btn-outline-info {
  background: var(--tc-surface);
  border: 1px solid var(--tc-border);
  color: var(--tc-ink);
  box-shadow: none;
}
.app-container .btn-info:hover,
.app-container .btn-outline-primary:hover,
.app-container .btn-outline-info:hover,
.modal .btn-info:hover,
.modal .btn-outline-primary:hover,
.modal .btn-outline-info:hover,
.app-container .btn-outline-primary.active,
.app-container .btn-outline-info.active {
  background: var(--tc-lavender);
  border-color: var(--tc-lavender-line);
  color: var(--tc-ink);
}
.modal .btn-primary { background: var(--tc-ink); border-color: var(--tc-ink); color: var(--tc-white); }
.modal .btn-primary:hover { background: var(--tc-accent); border-color: var(--tc-accent); }
/* Gradientes do tema (cabeçalhos de dropdown, cards de destaque) viram o roxo Emori */
.bg-gradient-primary,
.bg-premium-dark,
.bg-plum-plate { background-image: linear-gradient(135deg, var(--tc-ink) 0%, var(--tc-accent) 100%) !important; }

/* Título de seção dentro de uma página/aba (ex.: grupos de notificações em Ajustes) */
.tclean-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 12px;
  font-family: var(--tc-font);
  font-size: var(--tc-fs-16);
  font-weight: 500;
  color: var(--tc-ink);
}
.tclean-section-title i { font-size: var(--tc-fs-14); color: var(--tc-muted); }

/* ---------- Cabeçalho de página (novo, opcional por tela) ----------
   <div class="tclean-page-head">
     <div><h1 class="tclean-page-title">Título</h1><p class="tclean-page-subtitle">…</p></div>
     <div class="tclean-page-actions">…filtros…</div>
   </div> */
.tclean-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 20px;
  margin-bottom: 20px;
}
.tclean-page-title {
  margin: 0;
  font-family: var(--tc-font);
  font-size: var(--tc-fs-42);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--tc-ink);
}
.tclean-page-subtitle {
  margin: 6px 0 0;
  font-size: var(--tc-fs-16);
  font-weight: 300;
  color: var(--tc-muted);
}
.tclean-page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.tclean-page-actions__sep { font-size: var(--tc-fs-13); color: var(--tc-muted); }

/* ---------- Faixa de KPIs (home: .description-block) ---------- */
.app-container .card:has(.description-block) .card-footer { border-top: 0; padding: 0; }
.app-container .description-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 0;
  padding: 18px 20px;
  text-align: left !important;
}
.app-container .description-block.border-right { border-right: 1px solid var(--tc-border) !important; }
.app-container .description-block .description-text {
  order: 0;
  font-size: var(--tc-fs-13);
  font-weight: 400;
  text-transform: none;
  color: var(--tc-muted);
}
.app-container .description-block .description-header {
  order: 1;
  margin: 0;
  font-size: var(--tc-fs-22);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--tc-ink);
  font-variant-numeric: tabular-nums;
}
.app-container .description-block .description-percentage {
  order: 2;
  display: inline-flex;
  padding: 2px 7px;
  border-radius: var(--tc-radius-ctl-sm);
  background: var(--tc-lavender);
  font-size: var(--tc-fs-12);
  font-weight: 600;
  color: var(--tc-ink) !important;
}

/* ---------- Responsivo ---------- */
@media (max-width: 991.98px) {
  .app-container .app-main .app-main__inner { padding: 18px 16px 24px; }
  .app-container .app-header,
  .app-container .app-header .app-header__content { height: 64px; }
  .app-container .app-header .app-header__content { padding: 0 16px; }
  .app-container .app-header__logo { height: 64px; width: auto; border-right: 0; }
  .app-container .app-header__logo .logo-src { width: 105px !important; height: 26px !important; }
  .tclean-page-title { font-size: var(--tc-fs-32); }
  .tclean-page-subtitle { font-size: var(--tc-fs-14-5); }
  .tclean-page-actions { width: 100%; }
  .tclean-page-actions .tclean-date-picker { flex: 0 1 auto; }
  .app-container .card { border-radius: var(--tc-radius-xl); }
  .app-container .card-body { padding: 16px; }
  .app-container .card > .card-header,
  .app-container .card-header { padding: 0 16px; }
  .app-container .card-header .nav { gap: 14px; }
}
@media (max-width: 575.98px) {
  .app-container .description-block { padding: 14px 16px; }
  .app-container .description-block.border-right { border-right: 0 !important; }
  .app-container .card:has(.description-block) .row > [class*="col-"] { border-bottom: 1px solid var(--tc-border); }
  .app-container .card:has(.description-block) .row > [class*="col-"]:nth-child(odd) .description-block { border-right: 1px solid var(--tc-border) !important; }
  .app-container .description-block .description-header { font-size: var(--tc-fs-18); }
  .app-container .card-header .nav .nav-link { font-size: var(--tc-fs-13); }
}

/* ==========================================================================
   Dashboard (home.php) — Visão geral / Ao vivo
   Layout da referência design-system/reference/Emori Dashboard.dc.html.
   ========================================================================== */

.tclean-dash .tclean-card { border-radius: var(--tc-radius-card); }
.tclean-dash .tclean-card__title { font-size: var(--tc-fs-15); font-weight: 500; }
.tclean-dash .tclean-card__header { min-height: 60px; padding: 12px 22px; }
.tclean-dash .tclean-card__body { padding: 16px 22px 20px; }
.tclean-dash .tclean-view-tabs { margin-bottom: 20px; }

/* Seletor de lojas (Tom Select renderizado por consulta_multi) */
.tclean-store-bar { margin-bottom: 20px; }
.tclean-store-bar .store-filter-host { padding: 0; }
.tclean-store-bar .store-filter-wrap .input-group-text,
.tclean-store-bar .store-filter-wrap .ts-control,
.tclean-store-bar .store-filter-wrap .btn {
  min-height: 42px;
  border-color: var(--tc-border) !important;
  background: var(--tc-surface);
  font-size: var(--tc-fs-13-5);
}
.tclean-store-bar .store-filter-wrap .input-group-text {
  border-radius: var(--tc-radius-ctl) 0 0 var(--tc-radius-ctl);
  color: var(--tc-ink);
  font-weight: 500;
}
.tclean-store-bar .store-filter-wrap .btn { border-radius: 0 var(--tc-radius-ctl) var(--tc-radius-ctl) 0; }
.tclean-store-bar .ts-control .item {
  border-radius: var(--tc-radius-ctl-sm) !important;
  background: var(--tc-ink) !important;
  border-color: var(--tc-ink) !important;
  color: var(--tc-white) !important;
}

/* Seletor de lojas em chips (renderStoreChips em functions.js) — vale pra
   todas as telas com #multi_tab; com mais de 6 lojas volta o campo com busca. */
.store-chips {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  padding: 4px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-surface);
}
.store-chips__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  font-size: var(--tc-fs-13-5);
  font-weight: 500;
  color: var(--tc-ink);
}
.store-chips__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--tc-radius-ctl-sm);
  background: transparent;
  color: var(--tc-ink);
  font: 500 var(--tc-fs-13-5) var(--tc-font);
  white-space: nowrap;
  cursor: pointer;
}
.store-chips__item img { width: 14px; height: 14px; border-radius: 50%; }
.store-chips__item:hover { background: var(--tc-lavender); }
.store-chips__item.is-active { background: var(--tc-ink); color: var(--tc-white); }
.store-chips__item.is-active img { box-shadow: 0 0 0 1.5px var(--tc-white); }
.store-chips__item:disabled { opacity: .45; cursor: not-allowed; background: transparent; }
.store-chips__add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--tc-radius-ctl-sm);
  color: var(--tc-muted) !important;
  font-size: var(--tc-fs-12);
  text-decoration: none;
}
.store-chips__add:hover { background: var(--tc-lavender); color: var(--tc-ink) !important; }
.store-filter-host:has(.store-chips) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Nas telas em que o #multi_tab fica dentro de um .card-header, a caixa do card
   duplicava a borda dos chips */
.app-container .card-header:has(.store-chips) {
  min-height: 0;
  padding: 0 !important;
  margin-bottom: 20px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Grades */
.tclean-dash-row {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}
.tclean-dash-row--main-side { grid-template-columns: minmax(0, 1fr) 300px; }
.tclean-dash-row--heat { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.tclean-dash-row--halves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tclean-dash-row > .tclean-card { margin-bottom: 0; }

/* Variação vs período anterior */
.tclean-delta {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: var(--tc-radius-ctl-sm);
  font-size: var(--tc-fs-12);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tclean-delta:empty { display: none; }
.tclean-delta--good { background: var(--tc-success-bg); color: var(--tc-success-ink); }
.tclean-delta--bad { background: var(--tc-danger-bg); color: var(--tc-danger-ink); }

/* Faixa de KPIs (um card com células divididas) */
.tclean-kpi-band {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}
.tclean-kpi {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 20px 22px;
  border: 0;
  border-left: 1px solid var(--tc-border);
  background: transparent;
  text-align: left;
  font-family: inherit;
}
.tclean-kpi:first-child,
.tclean-kpi.d-md-none:first-child + .tclean-kpi { border-left: 0; }
.tclean-kpi__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--tc-fs-13);
  color: var(--tc-muted);
}
.tclean-kpi__line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tclean-kpi__value {
  font-size: var(--tc-fs-26);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--tc-ink);
  font-variant-numeric: tabular-nums;
}
.tclean-kpi__foot { font-size: var(--tc-fs-12-5); color: var(--tc-muted); }
.tclean-kpi__foot strong { font-weight: 600; color: var(--tc-text); }
.tclean-kpi__compare { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.tclean-kpi__bar {
  display: block;
  height: 5px;
  border-radius: var(--tc-radius-pill);
  background: var(--tc-track);
  overflow: hidden;
}
.tclean-kpi__bar > span { display: block; height: 100%; border-radius: var(--tc-radius-pill); background: var(--tc-accent); transition: width .4s ease; }
.tclean-kpi__bar--prev > span { background: var(--tc-lilac-100); }
.tclean-kpi__bar--thick { height: 8px; }
.tclean-kpi__bar--soft > span { background: var(--tc-lilac-400); }
.tclean-kpi__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--tc-radius-ctl-sm);
  font-size: var(--tc-fs-11);
}
.tclean-kpi__icon--danger { background: var(--tc-danger-bg); color: var(--tc-danger); }
.tclean-kpi__icon--warning { background: var(--tc-warning-bg); color: var(--tc-warning-strong); }
.tclean-kpi--issue { cursor: pointer; transition: background .15s ease; }
.tclean-kpi--issue:hover { background: var(--tc-bg); }
.tclean-kpi__more {
  margin-top: auto;
  align-self: flex-end;
  font-size: var(--tc-fs-13);
  font-weight: 500;
  color: var(--tc-ink);
}
.tclean-kpi__more i { font-size: var(--tc-fs-10); margin-left: 2px; }
/* O botão herda .tclean-resultado-stat (handler do modal) — neutraliza o visual antigo */
.tclean-kpi.tclean-resultado-stat {
  align-items: stretch;
  width: auto;
  padding: 20px 22px;
  border-top: 0;
  border-radius: 0;
  box-shadow: none;
}
.tclean-kpi.tclean-resultado-stat:hover { background: var(--tc-bg); }
.tclean-kpi.tclean-resultado-stat::after { display: none; }

/* Cascata "Para onde foi cada real vendido" */
.tclean-cascata__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 22px 24px 8px;
}
.tclean-cascata__total { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.tclean-cascata__value {
  font-size: var(--tc-fs-32);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--tc-ink);
  font-variant-numeric: tabular-nums;
}
.tclean-cascata__value small { font-size: 0.85em; font-weight: 400; color: var(--tc-lilac-200); }
.tclean-cascata__hint { font-size: var(--tc-fs-13); color: var(--tc-muted); }
.tclean-cascata__hint strong { color: var(--tc-ink); font-weight: 600; }
.tclean-cascata__sobrou { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.tclean-cascata__sobrou > .tclean-cascata__hint:first-child { font-size: var(--tc-fs-12); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.tclean-cascata__line { display: flex; align-items: center; gap: 8px; }
.tclean-cascata__sobrou-value {
  font-size: var(--tc-fs-24);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--tc-success-ink);
  font-variant-numeric: tabular-nums;
}
.tclean-cascata { padding: 4px 24px 4px; }
.tclean-cascata__row {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) 120px 76px;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid var(--tc-border);
}
.tclean-cascata__row--head {
  padding: 0 0 6px;
  border-top: 0;
  font-size: var(--tc-fs-12);
  color: var(--tc-faint);
  text-align: right;
}
.tclean-cascata__row--vendido { border-top: 0; }
.tclean-cascata__row--total { padding-top: 10px; }
.tclean-cascata__name { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.tclean-cascata__name > span { display: flex; align-items: flex-start; gap: 8px; font-size: var(--tc-fs-14-5); line-height: 1.2; color: var(--tc-text); }
.tclean-cascata__name i { width: 14px; margin-top: 2px; font-size: var(--tc-fs-12); color: var(--tc-muted); text-align: center; }
.tclean-cascata__name small { padding-left: 22px; font-size: var(--tc-fs-12); line-height: 1.3; color: var(--tc-muted); }
.tclean-cascata__row--vendido .tclean-cascata__name > span { font-weight: 500; color: var(--tc-ink); }
.tclean-cascata__row--vendido .tclean-cascata__name i { color: var(--tc-ink); }
.tclean-cascata__row--total .tclean-cascata__name > span { font-weight: 500; color: var(--tc-success-ink); }
.tclean-cascata__row--total .tclean-cascata__name i { color: var(--tc-success-ink); }
.tclean-cascata__row--total.is-negative .tclean-cascata__name > span,
.tclean-cascata__row--total.is-negative .tclean-cascata__name i { color: var(--tc-danger); }
.tclean-cascata__track { position: relative; height: 20px; border-radius: var(--tc-radius-sm); background: var(--tc-track); }
.tclean-cascata__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: var(--tc-radius-sm);
  background: var(--tc-lilac-100);
  transition: left .4s ease, width .4s ease;
}
.tclean-cascata__fill--solid { background: var(--tc-ink); }
.tclean-cascata__fill--accent { background: var(--tc-success); }
.tclean-cascata__fill--danger { background: var(--tc-danger); }
.tclean-cascata__prev {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  margin-left: -1px;
  border-radius: var(--tc-radius-pill);
  background: var(--tc-accent);
}
.tclean-cascata__amount {
  font-size: var(--tc-fs-15);
  font-weight: 500;
  color: var(--tc-text);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tclean-cascata__row--vendido .tclean-cascata__amount { font-weight: 600; color: var(--tc-ink); }
.tclean-cascata__row--total .tclean-cascata__amount { font-weight: 600; color: var(--tc-success-ink); }
.tclean-cascata__row--total.is-negative .tclean-cascata__amount { color: var(--tc-danger); }
.tclean-cascata__delta .tclean-delta i { margin-right: 3px; font-size: var(--tc-fs-9); }
.tclean-cascata__delta { text-align: right; }
.tclean-cascata__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  padding: 8px 24px 18px;
  font-size: var(--tc-fs-12);
  color: var(--tc-muted);
}
.tclean-cascata__legend > span { display: inline-flex; align-items: center; gap: 6px; }
.tclean-cascata__swatch { display: inline-block; width: 12px; height: 10px; border-radius: var(--tc-radius-xs); background: var(--tc-lilac-100); }

/* ---------- Ponte (início → entradas/saídas → fim) ----------
   Explica a diferença entre dois números de estoque (ex.: pagantes no início e no
   fim do período). Total nas pontas; entradas em verde, saídas em vermelho; cada
   grupo é um botão que abre a lista de quem compõe o número. Uso: estatisticas.js. */
.tclean-ponte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 10px;
  padding: 16px 20px;
}
.tclean-ponte__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-ctl);
  background: var(--tc-surface);
  font-family: inherit;
  text-align: left;
}
button.tclean-ponte__item { cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
button.tclean-ponte__item:hover { border-color: var(--tc-lavender-line); }
button.tclean-ponte__item.is-active { border-color: var(--tc-accent); box-shadow: var(--tc-shadow-focus); }
button.tclean-ponte__item:disabled { cursor: default; }
.tclean-ponte__item--total { background: var(--tc-bg); }
.tclean-ponte__item--fim { border-color: var(--tc-lavender-line); background: var(--tc-lavender); }
.tclean-ponte__rotulo { font-size: var(--tc-fs-12-5); color: var(--tc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tclean-ponte__valor { font-size: var(--tc-fs-22); font-weight: 500; line-height: 1.1; color: var(--tc-ink); font-variant-numeric: tabular-nums; }
.tclean-ponte__aux { font-size: var(--tc-fs-12); color: var(--tc-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tclean-ponte__item--entrada .tclean-ponte__valor { color: var(--tc-success-ink); }
.tclean-ponte__item--saida .tclean-ponte__valor { color: var(--tc-danger-ink); }
.tclean-ponte__item.is-zero .tclean-ponte__valor { color: var(--tc-faint); }
.tclean-ponte__nota { border-top: 1px solid var(--tc-border-soft); }
.tclean-cascata__swatch--prev { width: 2px; height: 12px; background: var(--tc-accent); }

/* Meta de vendas (card roxo) */
.tclean-meta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  min-height: 100%;
  padding: 22px 24px;
  border-radius: var(--tc-radius-card);
  background: var(--tc-ink);
  color: var(--tc-white);
}
#setup_meta { height: 100%; }
.tclean-meta__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--tc-fs-15); font-weight: 500; }
.tclean-meta__btn {
  height: 30px;
  padding: 0 10px;
  border-radius: var(--tc-radius-ctl-sm);
  border: 1px solid var(--tc-white-a25);
  background: transparent;
  color: var(--tc-white);
  font: 500 var(--tc-fs-12-5) var(--tc-font);
  cursor: pointer;
}
.tclean-meta__btn:hover { background: var(--tc-white-a10); }
.tclean-meta__btn--solid { align-self: flex-start; border-color: var(--tc-yellow); background: var(--tc-yellow); color: var(--tc-ink); }
.tclean-meta__btn--solid:hover { background: var(--tc-yellow-hover); }
.tclean-meta__value { display: flex; align-items: baseline; gap: 8px; }
.tclean-meta__value span { font-size: var(--tc-fs-42); font-weight: 500; letter-spacing: -0.03em; line-height: 1; color: var(--tc-yellow); }
.tclean-meta__value small { font-size: var(--tc-fs-14); color: var(--tc-white-a80); }
.tclean-meta__track { position: relative; height: 10px; border-radius: var(--tc-radius-sm); background: var(--tc-white-a15); }
.tclean-meta__fill { height: 100%; border-radius: var(--tc-radius-sm); background: var(--tc-yellow); }
.tclean-meta__expected { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--tc-white); border-radius: var(--tc-radius-pill); }
.tclean-meta__row { display: flex; justify-content: space-between; gap: 8px; font-size: var(--tc-fs-12-5); color: var(--tc-white-a80); }
.tclean-meta__foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--tc-white-a15);
  font-size: var(--tc-fs-13);
  line-height: 1.45;
  color: var(--tc-white-a80);
}
.tclean-meta__foot i { margin-right: 6px; color: var(--tc-yellow); }
.tclean-meta__foot strong { color: var(--tc-white); }
.tclean-meta__hint { font-size: var(--tc-fs-13-5); color: var(--tc-white-a80); }
.tclean-meta__form { display: flex; align-items: center; gap: 8px; }
.tclean-meta__form > span { font-size: var(--tc-fs-15); color: var(--tc-white-a80); }
.tclean-meta__input {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--tc-radius-ctl);
  border: 1px solid var(--tc-white-a25);
  background: var(--tc-white-a10);
  color: var(--tc-white);
  font: 500 var(--tc-fs-15) var(--tc-font);
}
.tclean-meta__input:focus { outline: none; border-color: var(--tc-yellow); }
.tclean-meta__form .tclean-meta__btn--solid { height: 38px; }

/* Controle segmentado (6 meses | 12 meses | Personalizado) */
.tclean-segmented { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--tc-border); border-radius: var(--tc-radius-ctl-sm); }
.tclean-segmented__item {
  height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--tc-radius-sm);
  background: transparent;
  color: var(--tc-muted);
  font: 500 var(--tc-fs-12-5) var(--tc-font);
  cursor: pointer;
}
.tclean-segmented__item:hover { color: var(--tc-ink); }
.tclean-segmented__item.active { background: var(--tc-lavender); color: var(--tc-ink); }
/* Segmentado usado como aba do Bootstrap (div.nav): anula o gap/margem das .nav de card-header */
.app-container .card-header .nav.tclean-segmented,
.tclean-segmented.nav { gap: 2px; flex-wrap: nowrap; margin-left: 0; }
a.tclean-segmented__item { display: inline-flex; align-items: center; text-decoration: none; }
.tclean-segmented--solid .tclean-segmented__item.active { background: var(--tc-ink); color: var(--tc-white); }

/* Publicidade */
.tclean-ads-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 16px 22px 8px;
}
.tclean-ads-stats__item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tclean-ads-stats__item span { font-size: var(--tc-fs-12); color: var(--tc-muted); }
.tclean-ads-stats__item strong { font-size: var(--tc-fs-16); font-weight: 500; color: var(--tc-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tclean-ads-share { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--tc-border); }
.tclean-ads-share:empty { display: none; }
.tclean-ads-share__line { display: flex; justify-content: space-between; font-size: var(--tc-fs-13); color: var(--tc-muted); }
.tclean-ads-share__line strong { color: var(--tc-ink); font-weight: 600; }
.tclean-link { font-size: var(--tc-fs-13-5); font-weight: 500; text-decoration: none; color: var(--tc-ink); }
.tclean-link i { font-size: var(--tc-fs-10); margin-left: 2px; }

/* Abas no header do card (Top 10) */
.tclean-card__header--tabs { align-items: flex-end; padding-bottom: 0; }
.tclean-card__header--tabs .tclean-card__title-group { padding-bottom: 14px; }
.tclean-card-tabs { display: flex; gap: 20px; margin: 0 0 -1px auto; padding: 0; list-style: none; }
.tclean-card-tabs .nav-link {
  padding: 0 2px 13px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  font-size: var(--tc-fs-14);
  color: var(--tc-muted);
}
.tclean-card-tabs .nav-link:hover { color: var(--tc-ink); }
.tclean-card-tabs .nav-link.active { color: var(--tc-ink); font-weight: 500; border-bottom-color: var(--tc-yellow); background: transparent; }

/* Top 10 anúncios */
/* Top 10 anúncios (tabela; linha abre o drawer do anúncio) */
.tclean-top10__anuncio { display: flex; align-items: center; gap: 12px; min-width: 0; max-width: 360px; }
.tclean-top10__rank {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--tc-radius-ctl-sm);
  font: 500 var(--tc-fs-12) var(--tc-mono);
  color: var(--tc-faint);
}
.tclean-top10__rank.is-podium { background: var(--tc-lavender); color: var(--tc-ink); font-weight: 600; }
.tclean-top10 .tclean-top-row__info { text-align: left; }
.tclean-top10__fat { display: flex; flex-direction: column; gap: 4px; min-width: 130px; text-align: left; }
.tclean-top10__fat > span:first-child { font-weight: 500; color: var(--tc-text); font-variant-numeric: tabular-nums; }
.tclean-top10__fat small { font-size: var(--tc-fs-11-5); color: var(--tc-muted); }
.tclean-top10__go { width: 36px; color: var(--tc-gray-400); text-align: center; }
.tclean-top10 tbody tr:hover .tclean-top10__go { color: var(--tc-ink); }
.tclean-top10 tbody tr.is-static { cursor: default; }
.tclean-top10__all { margin-left: 18px; padding-bottom: 13px; white-space: nowrap; }
.tclean-top-row__thumb,
.tclean-live-row__thumb { position: relative; width: 44px; height: 44px; flex-shrink: 0; }
.tclean-top-row__thumb > img:first-child,
.tclean-live-row__thumb > img:first-child {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--tc-radius-ctl);
  border: 1px solid var(--tc-border);
  background: var(--tc-surface);
}
.tclean-live-row__mk { position: absolute; right: -4px; bottom: -3px; width: 17px; height: 17px; border-radius: 50%; background: var(--tc-surface); }
.tclean-top-row__info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tclean-top-row__title { font-size: var(--tc-fs-14); color: var(--tc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tclean-top-row__sub { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--tc-fs-12-5); color: var(--tc-muted); }
.tclean-top-row__sub strong { color: var(--tc-ink); font-weight: 600; }
.tclean-pill--neutral { background: var(--tc-lavender); color: var(--tc-ink); }

/* Logística: barras horizontais */
.tclean-bars-list { display: flex; flex-direction: column; gap: 14px; }
.tclean-bars-list__row { display: grid; grid-template-columns: 130px minmax(0, 1fr) 96px; align-items: center; gap: 12px; }
.tclean-bars-list__name { font-size: var(--tc-fs-13-5); color: var(--tc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tclean-bars-list__value { font-size: var(--tc-fs-13); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tclean-bars-list__value strong { font-weight: 600; color: var(--tc-ink); }
.tclean-bars-list__value span { color: var(--tc-muted); }
.tclean-bars-list .tclean-kpi__bar > span { background: var(--tc-ink); }
.tclean-bars-list .tclean-kpi__bar--soft > span { background: var(--tc-lilac-400); }

/* Estado vazio */
.tclean-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 36px 16px;
  text-align: center;
  font-size: var(--tc-fs-13-5);
  color: var(--tc-muted);
}
.tclean-empty i { font-size: var(--tc-fs-22); color: var(--tc-lilac-200); }
.tclean-empty strong { color: var(--tc-ink); font-weight: 500; }

/* ---------- Ao vivo ---------- */
.tclean-live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 4px;
  border-radius: 50%;
  background: var(--tc-danger);
  box-shadow: 0 0 0 0 var(--tc-pulse-danger);
  animation: tclean-live-pulse 1.8s ease-out infinite;
  vertical-align: middle;
}
.tclean-live-dot--light { margin: 0 8px 0 0; background: var(--tc-success-bright); box-shadow: 0 0 0 0 var(--tc-pulse-success-bright); }
@keyframes tclean-live-pulse {
  0% { box-shadow: 0 0 0 0 var(--tc-pulse-danger); }
  70% { box-shadow: 0 0 0 7px var(--tc-pulse-danger-end); }
  100% { box-shadow: 0 0 0 0 var(--tc-pulse-danger-end); }
}
@media (prefers-reduced-motion: reduce) { .tclean-live-dot { animation: none; } }

.tclean-live-hero {
  display: grid;
  grid-template-columns: minmax(220px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 24px 40px;
  padding: 26px 28px;
  border-radius: var(--tc-radius-card);
  background: var(--tc-ink);
  color: var(--tc-white);
}
.tclean-live-hero__head { display: flex; flex-direction: column; gap: 8px; }
.tclean-live-hero__label {
  display: inline-flex;
  align-items: center;
  font-size: var(--tc-fs-12);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tc-white-a80);
}
.tclean-live-hero__value {
  font-size: var(--tc-fs-42);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tclean-live-hero__split { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tclean-live-hero__bar { display: flex; gap: 3px; height: 14px; border-radius: var(--tc-radius-pill); overflow: hidden; }
.tclean-live-hero__bar > span { min-width: 2px; }
.tclean-live-hero__legend { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.tclean-live-hero__item { display: inline-flex; align-items: center; gap: 6px; font-size: var(--tc-fs-13); color: var(--tc-white-a80); }
.tclean-live-hero__item strong { font-weight: 600; color: var(--tc-white); font-variant-numeric: tabular-nums; }
.tclean-live-hero__item > span:last-child { font-size: var(--tc-fs-12); color: var(--tc-white-a60); }
.tclean-live-hero__item.is-accent strong { color: var(--tc-yellow); }
.tclean-live-hero__swatch { width: 9px; height: 9px; border-radius: var(--tc-radius-xs); }

.tclean-live-status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--tc-fs-12-5); color: var(--tc-muted); }
.tclean-live-status .tclean-live-dot { margin: 0; background: var(--tc-success); animation-name: tclean-live-pulse-ok; }
@keyframes tclean-live-pulse-ok {
  0% { box-shadow: 0 0 0 0 var(--tc-pulse-success); }
  70% { box-shadow: 0 0 0 7px var(--tc-pulse-success-end); }
  100% { box-shadow: 0 0 0 0 var(--tc-pulse-success-end); }
}
.tclean-live-hora { font: 500 var(--tc-fs-12-5) var(--tc-mono); color: var(--tc-muted); white-space: nowrap; }
/* Tabela "Pedidos chegando agora": 10 colunas cabendo sem rolagem em 1440px */
.tclean-table--compact thead th { padding: 0 8px !important; }
.tclean-table--compact tbody td { padding: 10px 8px !important; }
.tclean-table--compact .tclean-pedido-produto { max-width: 200px; }
/* Chip de logística com nome longo corta com reticências (nome inteiro no title da célula) */
.tclean-table--compact .tclean-chip {
  display: inline-block;
  max-width: 150px;
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.tclean-table--compact .tclean-chip__dot,
.tclean-table--compact .tclean-chip__icon { display: inline-block; margin-right: 6px; vertical-align: middle; }

/* Mini-gráfico dos KPIs */
.tclean-spark { display: block; width: 100%; height: 36px; overflow: visible; }
.tclean-spark__line { fill: none; stroke: var(--tc-accent); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.tclean-spark__area { fill: var(--tc-accent-soft); stroke: none; }
.tclean-spark__prev { fill: none; stroke: var(--tc-lilac-200); stroke-width: 1.5; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }

/* Alerta: custo unitário faltando */
.tclean-cost-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 12px 16px;
  border-radius: var(--tc-radius-lg);
  background: var(--tc-warning-bg);
  color: var(--tc-warning-ink);
  font-size: var(--tc-fs-14);
}
.tclean-cost-alert.d-none { display: none !important; }
.tclean-cost-alert > span { flex: 1; min-width: 0; }
.tclean-cost-alert a { color: var(--tc-warning-ink); font-weight: 600; }
.tclean-cost-alert__btn {
  flex-shrink: 0;
  height: 30px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--tc-radius-ctl-sm);
  border: 1px solid var(--tc-warning-line);
  background: var(--tc-surface);
  font-size: var(--tc-fs-12-5);
  font-weight: 500 !important;
  text-decoration: none;
  white-space: nowrap;
}
.tclean-cost-alert__btn:hover { background: var(--tc-yellow-soft); }

/* Cascata | Funil */
.tclean-cascata__title-line { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tclean-segmented__item i { font-size: var(--tc-fs-11); margin-right: 4px; }


/* Funil do dashboard (modelo da referência): faixa baixa + células por etapa */
.tclean-funil { padding: 14px 0 0; }
.tclean-funnel3__svg { display: block; width: 100%; height: 160px; }
.tclean-funnel3__divider { stroke: var(--tc-gray-300); stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.tclean-funnel3__prev { fill: none; stroke: var(--tc-ink); stroke-opacity: .45; stroke-width: 1.4; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.tclean-funnel3__cells { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--tc-border); }
.tclean-funnel3__cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 10px 16px; border-left: 1px solid var(--tc-border); }
.tclean-funnel3__cell.is-first { border-left: 0; }
.tclean-funnel3__cell.is-total { background: var(--tc-success-bg-soft); }
.tclean-funnel3__name { display: flex; align-items: flex-start; gap: 5px; min-height: 31px; font-size: var(--tc-fs-12); line-height: 1.3; color: var(--tc-muted); }
.tclean-funnel3__name i { margin-top: 2px; font-size: var(--tc-fs-11); }
.tclean-funnel3__value { font-size: var(--tc-fs-14); font-weight: 600; color: var(--tc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.tclean-funnel3__cell.is-first .tclean-funnel3__value { color: var(--tc-ink); }
.tclean-funnel3__cell.is-total .tclean-funnel3__value { color: var(--tc-success-ink); }
.tclean-funnel3__cell.is-negative .tclean-funnel3__value { color: var(--tc-danger); }
.tclean-funnel3__share { font-size: var(--tc-fs-11-5); color: var(--tc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Legenda em chips (gráficos por loja) */
.tclean-chart-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 10px; font-size: var(--tc-fs-12-5); color: var(--tc-muted); }
.tclean-chart-legend:empty { display: none; }
.tclean-chart-legend__item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tclean-chart-legend__item strong { font-weight: 600; color: var(--tc-text); font-variant-numeric: tabular-nums; }
.tclean-chart-legend__swatch { width: 9px; height: 9px; border-radius: var(--tc-radius-xs); flex-shrink: 0; }
.tclean-chart-legend__swatch.is-line { width: 14px; height: 2px; border-radius: var(--tc-radius-pill); }
.tclean-chart-legend__item img { border-radius: 50%; }
/* Total no título da dica do ApexCharts (gráficos empilhados por loja): "Out/26 · total R$ X" */
.tclean-chart-total { font-weight: 600; color: var(--tc-ink); font-variant-numeric: tabular-nums; }

/* Líquido vendido por dia (linha do DS, SVG puro) */
.tclean-liquido { display: flex; flex-direction: column; }
.tclean-liquido__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 20px 24px 4px;
}
.tclean-liquido__body { flex: 1; display: flex; flex-direction: column; padding: 8px 24px 16px; }
.tclean-linechart { position: relative; display: flex; flex-direction: column; gap: 10px; }
.tclean-linechart__svg { display: block; width: 100%; height: 180px; overflow: visible; }
.tclean-linechart__grid { stroke: var(--tc-gray-100); vector-effect: non-scaling-stroke; }
.tclean-linechart__line { fill: none; stroke: var(--tc-accent); stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.tclean-linechart__prev { fill: none; stroke: var(--tc-lilac-200); stroke-width: 2; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.tclean-linechart__cursor { stroke: var(--tc-border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tclean-linechart__dot {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  border: 2px solid var(--tc-white);
  background: var(--tc-accent);
  box-shadow: var(--tc-shadow-xs);
  pointer-events: none;
  z-index: 2;
}
.tclean-linechart__dot--prev { background: var(--tc-lilac-200); }
.tclean-linechart__dates { display: flex; justify-content: space-between; font: var(--tc-fs-12) var(--tc-mono); color: var(--tc-faint); }
.tclean-linechart__key { display: inline-block; width: 14px; height: 2px; background: var(--tc-accent); vertical-align: middle; margin-right: 6px; }
.tclean-linechart__key--prev { height: 0; background: none; border-top: 2px dashed var(--tc-lilac-200); }
.tclean-linechart__tip {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: var(--tc-radius-ctl);
  border: 1px solid var(--tc-border);
  background: var(--tc-surface);
  box-shadow: var(--tc-shadow-popover);
  font-size: var(--tc-fs-12);
  color: var(--tc-muted);
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
}
.tclean-linechart__tip strong { color: var(--tc-ink); font-weight: 600; }
.tclean-linechart__tip .tclean-linechart__key { width: 10px; margin-right: 5px; }

/* Mapa de calor em grade (7 dias x 24h) */
.tclean-heat-card { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; }
.tclean-heat-card__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; }
.tclean-heat-card__pico {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--tc-radius-ctl-sm);
  background: var(--tc-lavender);
  color: var(--tc-ink);
  font-size: var(--tc-fs-12-5);
  font-weight: 500;
  white-space: nowrap;
}
.tclean-heat-card__pico.d-none { display: none !important; }
.tclean-heat { display: grid; grid-template-columns: 30px repeat(24, minmax(0, 1fr)); gap: 3px; align-items: center; }
.tclean-heat__day { font-size: var(--tc-fs-11-5); color: var(--tc-muted); }
.tclean-heat__cell { height: 18px; border-radius: var(--tc-radius-xs); }
.tclean-heat__hour { padding-top: 3px; font: var(--tc-fs-10) var(--tc-mono); color: var(--tc-faint); white-space: nowrap; }
.tclean-heat-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: auto; font-size: var(--tc-fs-12-5); color: var(--tc-muted); }
.tclean-heat-card__foot strong { font-weight: 600; color: var(--tc-text); }
.tclean-heat-card__scale { display: inline-flex; align-items: center; gap: 6px; }
.tclean-heat-card__scale > span { display: flex; gap: 2px; }
.tclean-heat-card__scale i { width: 14px; height: 10px; border-radius: var(--tc-radius-2xs); }

/* Alerta de custo é do período — some no Ao vivo */
.tclean-dash[data-home-tab="vivo"] #alerta_sem_custo { display: none !important; }

/* Lucro do dia em destaque no card roxo do Ao vivo */
.tclean-live-hero__lucro { font-size: var(--tc-fs-13-5); color: var(--tc-white-a80); }
.tclean-live-hero__lucro strong { font-size: var(--tc-fs-16); font-weight: 600; color: var(--tc-yellow); }
.tclean-live-hero__lucro span { font-size: var(--tc-fs-12-5); color: var(--tc-white-a60); }

/* Pedidos do Ao vivo em cartões (celular) */
.tclean-live-cards { display: none; }
.tclean-live-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 2px;
  border: 0;
  border-top: 1px solid var(--tc-border);
  background: transparent;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}
.tclean-live-card:first-child { border-top: 0; }
.tclean-live-card__info { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.tclean-live-card__title { font-size: var(--tc-fs-14); color: var(--tc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tclean-live-card__meta { font-size: var(--tc-fs-12-5); color: var(--tc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tclean-live-card .tclean-pill { flex-shrink: 0; }

/* ---------- Dashboard: responsivo ---------- */
@media (max-width: 1399.98px) {
  .tclean-dash-row--main-side { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 1199.98px) {
  .tclean-dash-row,
  .tclean-dash-row--main-side,
  .tclean-dash-row--heat,
  .tclean-dash-row--halves { grid-template-columns: minmax(0, 1fr); }
  .tclean-meta { min-height: 0; }
}
@media (max-width: 991.98px) {
  .tclean-live-hero { grid-template-columns: minmax(0, 1fr); padding: 22px; }
  .tclean-live-hero__value { font-size: var(--tc-fs-32); }
  .tclean-cascata__row { grid-template-columns: 150px minmax(0, 1fr) 104px 68px; gap: 10px; }
  .tclean-ads-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .tclean-kpi-band { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tclean-kpi { padding: 16px; border-left: 0; border-top: 1px solid var(--tc-border); }
  .tclean-kpi:nth-child(-n+2) { border-top: 0; }
  .tclean-kpi:nth-child(even) { border-left: 1px solid var(--tc-border); }
  .tclean-kpi-band > .tclean-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .tclean-kpi__value { font-size: var(--tc-fs-22); }
  .tclean-cascata__head { padding: 18px 16px 6px; }
  .tclean-cascata__sobrou { align-items: flex-start; text-align: left; }
  .tclean-cascata { padding: 4px 16px; }
  .tclean-cascata__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name amount" "track delta"; gap: 6px 12px; }
  .tclean-cascata__row--head { display: none; }
  .tclean-cascata__name { grid-area: name; }
  .tclean-cascata__track { grid-area: track; height: 14px; }
  .tclean-cascata__amount { grid-area: amount; }
  .tclean-cascata__delta { grid-area: delta; }
  .tclean-cascata__legend { padding: 10px 16px 16px; }
  .tclean-cascata__legend .ms-auto { margin-left: 0 !important; }
  .tclean-cost-alert { flex-wrap: wrap; }
  #live_pedidos .tclean-table-wrap { display: none; }
  #live_pedidos .tclean-live-cards { display: block; }
  .tclean-liquido__head, .tclean-liquido__body { padding-left: 16px; padding-right: 16px; }
  .tclean-funnel3__svg { height: 110px; }
  .tclean-funnel3__cells { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tclean-funnel3__cell:nth-child(4) { border-left: 0; }
  .tclean-funnel3__cell:nth-child(n+4) { border-top: 1px solid var(--tc-border); }
  .tclean-heat { grid-template-columns: 26px repeat(24, minmax(0, 1fr)); gap: 2px; }
  .tclean-heat__cell { height: 14px; border-radius: var(--tc-radius-2xs); }
  .tclean-heat__hour { font-size: var(--tc-fs-9); }
  .tclean-bars-list__row { grid-template-columns: 96px minmax(0, 1fr) 84px; }
  .tclean-dash .tclean-card__header { padding: 12px 16px; }
  .tclean-dash .tclean-card__body { padding: 14px 16px 16px; }
  .tclean-card-tabs { width: 100%; margin-left: 0; gap: 16px; overflow-x: auto; }
}

/* ---------- Dashboard no celular — Visão geral (design-system/reference/Emori Mobile.dc.html, tela 1b) ---------- */
@media (max-width: 767.98px) {
  /* Período: só o seletor principal, compacto (a comparação segue com o padrão) */
  #home_periodo .tclean-page-actions__sep,
  #home_periodo .tclean-date-picker:has(#compare_date) { display: none; }
  #home_periodo .tclean-date-picker { flex: 1 1 auto; }

  /* KPIs: cartões lado a lado com rolagem horizontal */
  .tclean-dash-row > .tclean-kpi-band:not(.tclean-kpi-band--issues) {
    display: flex;
    gap: 10px;
    margin: 0 -16px;
    padding: 0 16px 4px;
    overflow-x: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    scrollbar-width: none;
  }
  .tclean-dash-row > .tclean-kpi-band:not(.tclean-kpi-band--issues)::-webkit-scrollbar { display: none; }
  /* Cada cartão cresce com o valor (o vendido é o mais largo); como na referência,
     o valor fica inteiro numa linha e a variação vai junto do "vs" */
  .tclean-dash-row > .tclean-kpi-band:not(.tclean-kpi-band--issues) > .tclean-kpi {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "label label" "value value" "delta foot";
    align-content: start;
    align-items: center;
    flex: 0 0 auto;
    min-width: 150px;
    gap: 4px 6px;
    padding: 12px 14px;
    border: 1px solid var(--tc-border) !important;
    border-radius: var(--tc-radius-lg);
    background: var(--tc-surface);
    grid-column: auto !important;
  }
  .tclean-dash-row > .tclean-kpi-band:not(.tclean-kpi-band--issues) .tclean-kpi__line { display: contents; }
  .tclean-dash-row > .tclean-kpi-band:not(.tclean-kpi-band--issues) .tclean-kpi__label { grid-area: label; }
  .tclean-dash-row > .tclean-kpi-band:not(.tclean-kpi-band--issues) .tclean-kpi__value { grid-area: value; }
  .tclean-dash-row > .tclean-kpi-band:not(.tclean-kpi-band--issues) .tclean-kpi__line > .tclean-delta { grid-area: delta; padding: 1px 6px; font-size: var(--tc-fs-11-5); }
  .tclean-dash-row > .tclean-kpi-band:not(.tclean-kpi-band--issues) .tclean-kpi__foot { grid-area: foot; white-space: nowrap; }
  .tclean-kpi-band:not(.tclean-kpi-band--issues) .tclean-kpi__label { font-size: var(--tc-fs-12-5); }
  .tclean-kpi-band:not(.tclean-kpi-band--issues) .tclean-kpi__value { font-size: var(--tc-fs-20); white-space: nowrap; }
  .tclean-kpi-band:not(.tclean-kpi-band--issues) .tclean-kpi__compare { display: none; }
  .tclean-kpi-band:not(.tclean-kpi-band--issues) .tclean-kpi__foot { font-size: var(--tc-fs-11-5); }

  /* "Para onde foi cada real vendido": vendido e sobrou em linhas (vendido primeiro e
     maior, como no desktop), cascata vertical */
  .tclean-cascata__head { flex-direction: column; align-items: stretch; gap: 6px; padding: 16px 16px 4px; }
  .tclean-cascata__head #cascata_modo { display: none; }
  .tclean-cascata__head .tclean-card__title { font-size: var(--tc-fs-14); }
  .tclean-cascata__total,
  .tclean-cascata__sobrou { flex-direction: row; flex-wrap: nowrap; align-items: baseline; gap: 6px; text-align: left; }
  .tclean-cascata__label,
  .tclean-cascata__sobrou > .tclean-cascata__hint:first-child { margin-right: auto; font-size: var(--tc-fs-13); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--tc-muted); }
  .tclean-cascata__total > .tclean-cascata__hint,
  .tclean-cascata__sobrou > .tclean-cascata__hint:last-child { display: none; }
  .tclean-cascata__line { align-items: baseline; gap: 6px; }
  .tclean-cascata__value { font-size: var(--tc-fs-24); }
  .tclean-cascata__sobrou-value { font-size: var(--tc-fs-20); }
  .tclean-cascata { padding: 0 16px 8px; }
  .tclean-cascata__row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name amount" "track track";
    gap: 6px 8px;
    padding: 9px 0;
    border-top-color: var(--tc-gray-100);
  }
  .tclean-cascata__row--total { padding-top: 9px; }
  .tclean-cascata__name > span { flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: var(--tc-fs-13-5); }
  .tclean-cascata__name i { display: none; }
  .tclean-cascata__name { flex-direction: row; align-items: baseline; gap: 6px; }
  .tclean-cascata__name small { padding-left: 0; font-size: var(--tc-fs-12); }
  .tclean-cascata__track { height: 10px; }
  .tclean-cascata__prev,
  .tclean-cascata__delta,
  .tclean-cascata__legend { display: none !important; }
  .tclean-cascata__amount { font-size: var(--tc-fs-14); font-weight: 600; }

  /* Meta compacta */
  .tclean-meta { gap: 10px; padding: 16px; min-height: 0; }
  .tclean-meta__head { align-items: baseline; font-size: var(--tc-fs-14); }
  .tclean-meta__value--inline { display: flex; align-items: baseline; gap: 6px; }
  .tclean-meta__value--inline span { font-size: var(--tc-fs-26); line-height: 1; }
  .tclean-meta__value--inline small { font-size: var(--tc-fs-12-5); color: var(--tc-lilac-100); }
  .tclean-meta__foot { margin-top: 0; padding-top: 0; border-top: 0; font-size: var(--tc-fs-12-5); color: var(--tc-lilac-100); }
  .tclean-meta__foot strong { color: var(--tc-yellow); font-weight: 600; white-space: nowrap; }
}

/* ---------- Resultado dos pedidos como painel de baixo pra cima (celular, tela 1c da referência) ---------- */
@media (max-width: 767.98px) {
  .modal.tclean-sheet .modal-dialog {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    height: auto;
    max-height: 88vh;
    margin: 0;
    box-shadow: none;
    transform: translateY(100%);
    transition: transform .25s ease-out;
  }
  .modal.tclean-sheet.show .modal-dialog { transform: none; }
  .modal.tclean-sheet .modal-content {
    max-height: 88vh;
    border-radius: var(--tc-radius-sheet) var(--tc-radius-sheet) 0 0 !important;
    box-shadow: var(--tc-shadow-sheet);
  }
  .modal.tclean-sheet .modal-content::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    margin: 8px auto 0;
    border-radius: var(--tc-radius-2xs);
    background: var(--tc-gray-300);
  }
  .modal.tclean-sheet .modal-header { padding: 10px 18px 12px; border-bottom: 0; }
  .modal.tclean-sheet .modal-header .modal-title { font-size: var(--tc-fs-20); }
  .modal.tclean-sheet .modal-header #rp_modal_subtitle { margin-top: 2px; font-size: var(--tc-fs-13-5); }
  .modal.tclean-sheet .tclean-actions { display: none; }
  .modal.tclean-sheet .modal-body { padding: 0 !important; overflow-y: auto; }

  .tclean-sheet__chips {
    display: flex;
    gap: 8px;
    padding: 0 18px 12px;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--tc-border);
  }
  .tclean-sheet__chips::-webkit-scrollbar { display: none; }
  .tclean-sheet__chip {
    flex-shrink: 0;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-pill);
    background: var(--tc-surface);
    color: var(--tc-text);
    font: 500 var(--tc-fs-13) var(--tc-font);
    white-space: nowrap;
  }
  .tclean-sheet__chip strong { margin-left: 4px; font-weight: 600; color: var(--tc-muted); }
  .tclean-sheet__chip.is-active { background: var(--tc-ink); border-color: var(--tc-ink); color: var(--tc-white); }
  .tclean-sheet__chip.is-active strong { color: var(--tc-lilac-100); }

  .tclean-sheet__lista { padding: 0 18px 24px; }
  .tclean-sheet__item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-top: 1px solid var(--tc-border); }
  .tclean-sheet__item:first-child { border-top: 0; }
  .tclean-sheet__thumb { width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--tc-radius-ctl); border: 1px solid var(--tc-border); object-fit: cover; background: var(--tc-surface); }
  .tclean-sheet__thumb--vazio { display: inline-flex; align-items: center; justify-content: center; color: var(--tc-lilac-200); }
  .tclean-sheet__info { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
  .tclean-sheet__titulo { font-size: var(--tc-fs-14); color: var(--tc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tclean-sheet__meta { font: var(--tc-fs-12) var(--tc-mono); color: var(--tc-muted); }
  .tclean-sheet__rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 2px; }
  .tclean-sheet__rodape .tclean-chip { height: 24px; font-size: var(--tc-fs-12); }
  .tclean-sheet__acao { font-size: var(--tc-fs-12-5); font-weight: 500; color: var(--tc-ink); text-decoration: none; }
  .tclean-sheet__acao i { font-size: var(--tc-fs-10); margin-left: 2px; }
  .tclean-sheet__valor { flex-shrink: 0; font-size: var(--tc-fs-14); font-weight: 600; color: var(--tc-text); font-variant-numeric: tabular-nums; }
  .tclean-sheet__valor.is-danger { color: var(--tc-danger); }
}

/* Painel lateral: .modal.tclean-sheet.tclean-sheet--lado abre à direita, na altura toda, a partir
   do md (drawer de detalhe, ex.: produto em Publicidade › Afiliados); no celular segue de baixo pra cima. */
@media (min-width: 768px) {
  .modal.tclean-sheet--lado .modal-dialog {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 560px;
    max-width: 92vw;
    height: 100%;
    margin: 0;
    transform: translateX(100%);
    transition: transform .25s ease-out;
  }
  .modal.tclean-sheet--lado.show .modal-dialog { transform: none; }
  .modal.tclean-sheet--lado .modal-content {
    height: 100%;
    border: 0;
    border-left: 1px solid var(--tc-border);
    border-radius: 0 !important;
    box-shadow: var(--tc-shadow-drawer);
  }
  .modal.tclean-sheet--lado .modal-body { overflow-y: auto; }
}

/* ---------- Central de Promoções (promocoes.php) ---------- */
.tclean-promo-aproveitamento { display: flex; flex-direction: column; gap: 12px; }
.tclean-promo-aproveitamento__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tclean-promo-aproveitamento__head > div { display: flex; flex-direction: column; gap: 2px; }
.tclean-promo-aproveitamento .tclean-kpi__bar > span { background: var(--tc-accent); }
/* Tabelas do drawer da campanha: as regras antigas com #show_table (id) venciam o tclean-table */
#show_table .promo-drawer-table.tclean-table thead th {
  font-size: var(--tc-fs-13-5);
  font-weight: 600;
  color: var(--tc-muted);
  letter-spacing: 0;
  border-bottom: 1px solid var(--tc-border-soft);
}
#show_table .promo-variantes-wrap { background: var(--tc-bg); border-radius: 0 0 var(--tc-radius-lg) var(--tc-radius-lg); }
/* Selo do card de campanha (chip) no canto do card */
.promo-card .tclean-chip.promo-card-badge { flex-shrink: 0; }
#show_cards .promo-card .promo-card-title { color: var(--tc-ink); font-weight: 500; }
#show_cards .promo-card:hover .promo-card-title { color: var(--tc-accent); }

/* Simulação da promoção (#modal_promo_simular): usa a moldura do modal de custo (tclean-custo-modal) +
   tclean-promo-sim: preço de/por, desconto (range + %), tabela Hoje × Na promoção e o resultado por venda */
.tclean-promo-sim { gap: 14px; }
.tclean-promo-sim__topo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.tclean-promo-sim__precos { display: flex; flex-direction: column; gap: 2px; }
.tclean-promo-sim__de { font-size: var(--tc-fs-13); color: var(--tc-muted); }
.tclean-promo-sim__por { display: inline-flex; align-items: center; gap: 8px; font-size: var(--tc-fs-26); font-weight: 500; letter-spacing: -0.02em; color: var(--tc-ink); font-variant-numeric: tabular-nums; }
.tclean-promo-sim__por .tclean-pill { font-size: var(--tc-fs-13); letter-spacing: 0; }
.tclean-promo-sim__controle { flex: 1 1 260px; max-width: 360px; display: flex; flex-direction: column; gap: 6px; }
.tclean-promo-sim__ajuste { display: flex; align-items: center; gap: 12px; }
.tclean-promo-sim__range { flex: 1; min-width: 0; accent-color: var(--tc-ink); }
.tclean-promo-sim__pct { width: 104px; flex-shrink: 0; height: 40px; }
.tclean-promo-sim__tabela { margin: 0; font-variant-numeric: tabular-nums; }
.tclean-promo-sim__tabela th[scope="row"] { font-weight: 400; color: var(--tc-text); }
.tclean-promo-sim__tabela thead th:not(:first-child),
.tclean-promo-sim__tabela td { text-align: right; white-space: nowrap; }
.tclean-promo-sim__tabela thead th:last-child,
.tclean-promo-sim__tabela td:last-child { background: var(--tc-lavender); }
.tclean-promo-sim__tabela .tclean-promo-sim__preco-linha th,
.tclean-promo-sim__tabela .tclean-promo-sim__preco-linha td { font-weight: 600; color: var(--tc-ink); }
.tclean-promo-sim__soma td { color: var(--tc-success-ink); }
.tclean-promo-sim__tabela tfoot th,
.tclean-promo-sim__tabela tfoot td { border-top: 1px solid var(--tc-border); font-weight: 600; color: var(--tc-ink); }
.tclean-promo-sim__tabela tfoot td small { display: block; margin-top: 2px; font-size: var(--tc-fs-12); font-weight: 500; color: var(--tc-muted); }
.tclean-promo-sim__resumo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: var(--tc-fs-14); color: var(--tc-text); }
.tclean-promo-sim__resumo:empty { display: none; }
.tclean-promo-sim__resumo .tclean-delta { margin: 0; }
.tclean-promo-sim .tclean-alert { margin-top: 0; }
.tclean-promo-sim__mono { font-family: var(--tc-mono); }
/* Celular: o drawer da campanha ocupa a tela toda e a tabela fica Anúncio · Margem · Ação (ID, custo e preços
   aparecem no modal de simulação, que abre de baixo pra cima); nas abas Ativados/Programados sai só ID e custo */
@media (max-width: 767.98px) {
  .tclean-page-promocoes .app-drawer-wrapper-generic { width: 100%; }
  .tclean-page-promocoes .app-drawer-wrapper-generic:not(.drawer-open) { right: -100%; }
  .tclean-page-promocoes #show_table .promo-drawer-table th:nth-child(2),
  .tclean-page-promocoes #show_table .promo-drawer-table td:nth-child(2),
  .tclean-page-promocoes #show_table .promo-drawer-table th:nth-child(3),
  .tclean-page-promocoes #show_table .promo-drawer-table td:nth-child(3),
  .tclean-page-promocoes #table_promocoes_disponiveis th:nth-child(4),
  .tclean-page-promocoes #table_promocoes_disponiveis td:nth-child(4) { display: none; }
  .tclean-page-promocoes #show_table .promo-drawer-table th:first-child { width: 124px !important; }
  .tclean-page-promocoes #show_table .promo-drawer-table th:nth-child(5) { width: 124px !important; }
  .tclean-page-promocoes #show_table .promo-drawer-table .tclean-pedido-produto { align-items: flex-start; }
  .tclean-page-promocoes #show_table .promo-drawer-table .tclean-pedido-produto__titulo { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .tclean-page-promocoes #show_table .promo-drawer-table th:nth-child(6) { width: 92px !important; }
  .tclean-page-promocoes #show_table .tclean-promo-sim__antes { white-space: normal; }
  .tclean-page-promocoes #show_table .promo-simular { padding: 0 10px; font-size: var(--tc-fs-13); }
  .tclean-page-promocoes #show_table .promo-simular .fas { display: none; }
}
/* Oferta relâmpago com estoque (#modal_promo_stock): mesma moldura (tclean-custo-modal) + tclean-promo-stock */
.tclean-promo-stock { gap: 16px; }
.tclean-promo-stock .tclean-custo-modal__produto { margin-bottom: 0; }
.tclean-promo-stock__chip { margin-left: auto; flex-shrink: 0; }
.tclean-promo-stock__precos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.tclean-promo-stock__campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tclean-promo-stock__de { height: 46px; display: flex; align-items: center; font-size: var(--tc-fs-16); color: var(--tc-muted); font-variant-numeric: tabular-nums; }
.tclean-promo-stock .tclean-custo-modal__input input[readonly] { color: var(--tc-text-soft); }
.tclean-promo-stock__estoque { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--tc-border); border-radius: var(--tc-radius-ctl); background: var(--tc-bg); }
.tclean-promo-stock__estoque .tclean-custo-modal__label .fas { margin-right: 4px; color: var(--tc-accent); }
.tclean-promo-stock__limites { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tclean-promo-stock__limites > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--tc-border); border-radius: var(--tc-radius-ctl-sm); background: var(--tc-surface); }
.tclean-promo-stock__limites span { font-size: var(--tc-fs-12); color: var(--tc-muted); }
.tclean-promo-stock__limites strong { font-size: var(--tc-fs-16); font-weight: 600; color: var(--tc-ink); font-variant-numeric: tabular-nums; }
.tclean-promo-stock__qtd { display: flex; align-items: stretch; gap: 8px; }
.tclean-promo-stock__qtd .tclean-btn { width: 46px; height: 46px; justify-content: center; padding: 0; flex-shrink: 0; }
.tclean-promo-stock__qtd-input { flex: 1; min-width: 0; height: 46px; border: 1px solid var(--tc-border); border-radius: var(--tc-radius-ctl); background: var(--tc-surface); text-align: center; font-family: inherit; font-size: var(--tc-fs-20); font-weight: 600; color: var(--tc-ink); font-variant-numeric: tabular-nums; }
.tclean-promo-stock__qtd-input:focus { outline: none; border-color: var(--tc-accent); box-shadow: var(--tc-shadow-focus); }
.tclean-promo-stock__qtd-input.is-invalid { border-color: var(--tc-danger); }
.tclean-promo-stock__atalhos { align-self: center; }
.tclean-promo-stock .tclean-custo-modal__warn { margin-top: 0; }
@media (max-width: 767.98px) {
  #modal_promo_stock .modal-dialog { min-height: 0; }
  #modal_promo_stock .modal-content { max-height: 88vh; overflow-y: auto; }
  #modal_promo_stock .tclean-custo-modal__footer { position: sticky; bottom: 0; background: var(--tc-surface); }
  #modal_promo_stock .tclean-custo-modal__footer .tclean-btn { justify-content: center; white-space: nowrap; }
  #modal_promo_stock #modal_promo_stock_confirm_btn { flex: 1; }
  .tclean-promo-stock__atalhos { align-self: stretch; }
  .tclean-promo-stock__atalhos .tclean-segmented__item { flex: 1; }
}
/* Linha "antes: R$ X (Y%)" embaixo da margem na tabela da campanha */
.tclean-promo-sim__antes { margin-top: 2px; font-size: var(--tc-fs-12); color: var(--tc-muted); white-space: nowrap; }
@media (max-width: 767.98px) {
  .tclean-promo-sim__controle { max-width: none; }
  .tclean-promo-sim__por { font-size: var(--tc-fs-22); }
  #modal_promo_simular .tclean-custo-modal__footer { position: sticky; bottom: 0; background: var(--tc-surface); }
  #modal_promo_simular .modal-dialog { min-height: 0; }
  #modal_promo_simular .tclean-custo-modal__footer .tclean-btn { justify-content: center; white-space: nowrap; }
  #modal_promo_simular #promo_sim_entrar { flex: 1; }
  #modal_promo_simular .modal-content { max-height: 88vh; overflow-y: auto; }
}

/* ---------- Filas do Redis (tabelas_redis.php) ---------- */
.tclean-view-tabs.tclean-redis__tabs { flex-wrap: nowrap; gap: 20px; margin: 0; padding: 0 20px; overflow-x: auto; scrollbar-width: none; }
.tclean-redis__tabs::-webkit-scrollbar { display: none; }
.tclean-redis__tabs .tclean-view-tabs__item { flex-shrink: 0; white-space: nowrap; }
.tclean-redis__tabs .tclean-card__count,
.tclean-redis__tab-count { margin-left: 4px; }
.tclean-redis__tab-count { height: 20px; padding: 0 7px; font-size: var(--tc-fs-11-5); }
.tclean-redis__scroll { max-height: 520px; overflow: auto; }
.tclean-redis__scroll--sm { max-height: 300px; }
.tclean-redis__scroll .tclean-table thead th { position: sticky; top: 0; z-index: 2; background: var(--tc-surface); }
.tclean-redis__key { display: block; font: 500 var(--tc-fs-13) var(--tc-mono); color: var(--tc-ink); }
span.tclean-redis__key { display: inline-block; }
.tclean-redis__label { display: block; font-size: var(--tc-fs-12); color: var(--tc-muted); }
.tclean-redis__desc { white-space: normal !important; max-width: 380px; font-size: var(--tc-fs-12-5); color: var(--tc-muted) !important; }
.tclean-redis__pulse { animation: tclean-redis-pulse 1.8s ease-out infinite; }
@keyframes tclean-redis-pulse {
  0% { box-shadow: 0 0 0 0 var(--tc-pulse-yellow); }
  70% { box-shadow: 0 0 0 6px var(--tc-pulse-yellow-end); }
  100% { box-shadow: 0 0 0 0 var(--tc-pulse-yellow-end); }
}
@media (prefers-reduced-motion: reduce) { .tclean-redis__pulse { animation: none; } }
.tclean-redis__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding-top: 12px; font-size: var(--tc-fs-12-5); color: var(--tc-muted); }
.tclean-redis__foot i { margin-right: 4px; }
.tclean-redis__toggle { cursor: pointer; }
.tclean-redis__toggle[aria-expanded="false"] .fa-chevron-down { transform: rotate(-90deg); }

/* Variantes de pill usadas no cohort (estatisticas.js) */
.tclean-pill--warning { background: var(--tc-warning-bg); color: var(--tc-warning-strong); border-color: var(--tc-yellow-line); }
.tclean-pill--muted { background: var(--tc-track); color: var(--tc-muted); }

/* ---------- Estatísticas (estatisticas.php) ---------- */
.tclean-estat .tclean-kpi__value { font-size: var(--tc-fs-24); }
.tclean-estat .tclean-kpi__foot { line-height: 1.35; }
/* Corpo dos gráficos: respiro só nas laterais (a legenda do ApexCharts já ocupa o topo) */
.tclean-estat__chart { padding: 8px 12px 4px; min-height: 300px; }
/* Aba Saúde: os 5 sinais vitais (link para a aba de detalhe) numa linha; 3 colunas abaixo de 1400px, 2 no tablet */
.tclean-estat--sinais { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1399.98px) { .tclean-estat--sinais { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tclean-estat--sinais .tclean-kpi { color: inherit; text-decoration: none; border-bottom: 1px solid var(--tc-border-soft); }
.tclean-estat--sinais .tclean-kpi:hover { background: var(--tc-bg); }
.tclean-estat--sinais .tclean-kpi__label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
@media (max-width: 991.98px) { .tclean-estat--sinais { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Cards da mesma linha com a mesma altura (o .h-100 do tema vira 100vh, não serve) */
.tclean-estat__linha > [class*="col-"] { display: flex; flex-direction: column; min-width: 0; }
/* Colunas com tabela larga (cohort, insights) não crescem além da linha: a tabela rola dentro do card */
#cohort { min-width: 0; }
.tclean-estat__linha > [class*="col-"] > .tclean-card { flex: 1 1 auto; margin-bottom: 0; }
.tclean-estat__nota { margin: 0; padding: 12px 20px; font-size: var(--tc-fs-12-5); color: var(--tc-muted); border-bottom: 1px solid var(--tc-border-soft); }
/* Barra de participação + percentual na mesma célula (Planos ativos) */
.tclean-estat__share { display: grid; grid-template-columns: minmax(0, 1fr) 52px; align-items: center; gap: 10px; }
.tclean-estat__share > span:last-child { font-size: var(--tc-fs-12-5); color: var(--tc-muted); text-align: right; font-variant-numeric: tabular-nums; }
/* Ação de ícone dentro da célula (WhatsApp em "Clientes para acompanhar") */
.tclean-estat__acao { width: 32px; height: 32px; padding: 0; }
.tclean-estat__acao .fa-whatsapp { font-size: var(--tc-fs-16); color: var(--tc-success-ink); }
.tclean-card__tools .form-select-sm { width: auto; min-width: 110px; height: 32px; font-size: var(--tc-fs-13); }

/* Cohort (retenção por safra) */
.tclean-cohort__pct { margin-top: 3px; padding: 2px 6px; font-size: var(--tc-fs-11); }
.tclean-cohort__celula { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 2px 0; line-height: 1.1; }
.tclean-cohort__pct-texto { color: var(--tc-text); }
.tclean-cohort__pct-texto.is-medio { color: var(--tc-warning-strong); }
.tclean-cohort__pct-texto.is-baixo { color: var(--tc-danger); }
#t_cohort { min-width: 1100px; font-size: var(--tc-fs-13); }
#t_cohort thead th, #t_cohort tfoot th { background: var(--tc-bg) !important; white-space: nowrap; }
#t_cohort th, #t_cohort td { min-width: 72px; }
#t_cohort .tclean-cohort__fixa { position: sticky; left: 0; z-index: 2; min-width: 96px; background: var(--tc-surface); border-right: 1px solid var(--tc-border) !important; }
#t_cohort thead .tclean-cohort__fixa, #t_cohort tfoot .tclean-cohort__fixa { z-index: 3; background: var(--tc-bg) !important; }
#t_cohort td.tclean-cohort__resumo { background: var(--tc-bg); }
#t_cohort td.tclean-cohort__vazio { background: var(--tc-gray-50); }

/* Tabelas da tela: larguras por coluna (truncamento inteligente) */
#insights_table, #estat_planos_t, #estat_faturas_t { table-layout: fixed; width: 100%; }
#insights_table { min-width: 730px; }
#estat_planos_t { min-width: 840px; }
#estat_faturas_t { min-width: 480px; }
#insights_table th, #insights_table td,
#estat_planos_t th, #estat_planos_t td,
#estat_faturas_t th, #estat_faturas_t td { box-sizing: border-box; }
#insights_table tbody td { padding-top: 10px !important; padding-bottom: 10px !important; }
#estat_planos_t tfoot th, #estat_faturas_t tfoot th { font-weight: 600; color: var(--tc-ink); }
#movimento_lista .tclean-table-wrap { margin: 0 20px 20px; }
/* Saúde de pagamentos: tipo de recuperação no motivo e a ação no modal do cliente */
.tclean-cobranca__tipo { margin-bottom: 4px; }
.tclean-cobranca-acao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 16px;
  padding: 12px 16px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-ctl);
  background: var(--tc-bg);
  font-size: var(--tc-fs-13-5);
  color: var(--tc-text);
}
.tclean-cobranca-acao--retentar { border-color: var(--tc-success-border); background: var(--tc-success-bg-soft); }
.tclean-cobranca-acao--cliente { border-color: var(--tc-warning-line); background: var(--tc-warning-bg); }
.tclean-cobranca-acao__texto { flex: 1 1 320px; }
.tclean-cobranca-acao__botoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tclean-cobranca-acao__confirmar { font-size: var(--tc-fs-13); }
#movimento_t { table-layout: fixed; width: 100%; min-width: 800px; }
/* Funil de assinatura: três tabelas pequenas lado a lado abaixo dos KPIs */
.tclean-estat__funil-detalhe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 16px 20px 20px; border-top: 1px solid var(--tc-border-soft); }
.tclean-estat__funil-detalhe:empty { display: none; }
.tclean-estat__subtitulo { margin: 0 0 8px; font-size: var(--tc-fs-13-5); font-weight: 600; color: var(--tc-ink); }
@media (max-width: 1199.98px) { .tclean-estat__funil-detalhe { grid-template-columns: minmax(0, 1fr); } }
#movimento_t th, #movimento_t td { box-sizing: border-box; }

@media (max-width: 767.98px) {
  .tclean-estat.tclean-kpi-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Selects/inputs soltos em cabeçalho de card ou de página não esticam (o Bootstrap põe width: 100%) */
.tclean-card__tools > .form-select,
.tclean-card__tools > .form-control,
.tclean-page-actions > .form-select,
.tclean-page-actions > .form-control { width: auto; min-width: 160px; height: 36px; font-size: var(--tc-fs-13-5); }

/* ---------- Campanhas do Clent (campanhas_clent.php) ---------- */
.tclean-campanha-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px 20px;
  align-items: start;
}
.tclean-campanha-form__campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tclean-campanha-form__campo--largo { grid-column: span 3; }
.tclean-campanha-form__campo .form-label { margin: 0; font-size: var(--tc-fs-13); font-weight: 500; color: var(--tc-text); }
.tclean-campanha-form__ajuda { margin: 0; font-size: var(--tc-fs-12-5); color: var(--tc-text-soft); }
.tclean-campanha-form__acoes { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.tclean-btn.is-confirmar { background: var(--tc-danger-bg); border-color: var(--tc-danger-border); color: var(--tc-danger-ink); }
.tclean-campanha-link { font-size: var(--tc-fs-13); font-weight: 500; color: var(--tc-ink); white-space: nowrap; }
.tclean-campanha-form--coluna { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.tclean-campanha-form--coluna .tclean-campanha-form__acoes { justify-content: flex-start; }
@media (max-width: 991.98px) {
  .tclean-campanha-form { grid-template-columns: minmax(0, 1fr); }
  .tclean-campanha-form__campo--largo { grid-column: auto; }
}

/* Automações: jornada (lista de etapas) e detalhe de uma etapa */
.tclean-auto-voltar { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: var(--tc-fs-13-5); font-weight: 500; color: var(--tc-ink); text-decoration: none; }
.tclean-auto-voltar:hover { color: var(--tc-ink-hover); }
.tclean-auto-sub { font-size: var(--tc-fs-12-5); color: var(--tc-text-soft); font-weight: 400; }
.tclean-auto-etapa { display: flex; align-items: flex-start; gap: 12px; }
/* Mesmas larguras nas tabelas das três fases, para as colunas alinharem */
.tclean-auto-tabela { table-layout: fixed; min-width: 860px; }
.tclean-auto-tabela th:nth-child(1) { width: 29%; }
.tclean-auto-tabela th:nth-child(2) { width: 13%; }
.tclean-auto-tabela th:nth-child(n+3):nth-child(-n+6) { width: 10%; }
.tclean-auto-tabela th:nth-child(7) { width: 18%; }
.tclean-auto-etapa__num {
  display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: var(--tc-radius-sm);
  background: var(--tc-lavender); color: var(--tc-ink); font-size: var(--tc-fs-12-5); font-weight: 600;
}
.tclean-auto-passos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tclean-auto-passos__item { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; border-right: 1px solid var(--tc-border-soft); min-width: 0; }
.tclean-auto-passos__item:last-child { border-right: 0; }
.tclean-auto-passos__rotulo { display: flex; align-items: center; gap: 8px; font-size: var(--tc-fs-12); font-weight: 600; color: var(--tc-text-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.tclean-auto-passos__rotulo .tclean-auto-etapa__num { width: 22px; height: 22px; font-size: var(--tc-fs-11-5); }
.tclean-auto-passos__valor { font-size: var(--tc-fs-15); font-weight: 600; color: var(--tc-text-strong); overflow-wrap: anywhere; }
.tclean-auto-passos__ajuda { font-size: var(--tc-fs-13); color: var(--tc-text-soft); }
.tclean-auto-detalhe { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.tclean-auto-lateral { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tclean-auto-msgs { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; }
.tclean-auto-msgs li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid var(--tc-border-soft); font-size: var(--tc-fs-13-5); }
.tclean-auto-msgs li:last-child { border-bottom: 0; }
.tclean-auto-msgs .tclean-auto-sub { flex-basis: 100%; order: 3; }
.tclean-auto-msgs__nome { font-family: var(--tc-mono); font-size: var(--tc-fs-13); color: var(--tc-text-strong); }
.tclean-auto-msgs__total { font-weight: 600; color: var(--tc-text-strong); font-variant-numeric: tabular-nums; }
@media (max-width: 1199.98px) {
  .tclean-auto-detalhe { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
  .tclean-auto-passos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tclean-auto-passos__item:nth-child(2) { border-right: 0; }
}

/* Calculadora de preços (componentes/calculator.php, componentes/js/calculator.js), no drawer genérico */
.tclean-calc { display: flex; flex-direction: column; gap: 16px; }
.tclean-calc__produto { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--tc-border); border-radius: var(--tc-radius-card); background: var(--tc-bg); }
.tclean-calc__thumb { flex-shrink: 0; width: 52px; height: 52px; overflow: hidden; border-radius: var(--tc-radius-ctl); background: var(--tc-surface); }
.tclean-calc__thumb img { width: 100%; height: 100%; object-fit: contain; }
.tclean-calc__produto-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tclean-calc__titulo { margin: 0; font-size: var(--tc-fs-14-5); font-weight: 600; color: var(--tc-ink); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tclean-calc__sub { font-size: var(--tc-fs-12-5); color: var(--tc-muted); }
.tclean-calc__tipo { align-self: flex-start; }
.tclean-calc__secao { border: 1px solid var(--tc-border); border-radius: var(--tc-radius-card); background: var(--tc-surface); overflow: hidden; }
.tclean-calc__secao-titulo { margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--tc-border-soft); font-size: var(--tc-fs-12); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--tc-muted); background: var(--tc-bg); }
.tclean-calc__linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 10px 14px; border-bottom: 1px solid var(--tc-border-soft); }
.tclean-calc__linha:last-child { border-bottom: 0; }
.tclean-calc__rotulo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tclean-calc__rotulo > span { font-size: var(--tc-fs-14); font-weight: 500; color: var(--tc-ink); }
.tclean-calc__rotulo small { font-size: var(--tc-fs-12-5); color: var(--tc-muted); }
.tclean-calc__rotulo small strong { color: var(--tc-text-strong); font-weight: 600; }
.tclean-calc__rotulo small em { font-style: normal; }
.tclean-calc__rotulo--switch { flex-direction: row; align-items: center; gap: 10px; }
.tclean-calc__rotulo--switch > div:last-child { display: flex; flex-direction: column; gap: 2px; }
.tclean-calc__rotulo--switch > div:last-child > span { font-size: var(--tc-fs-14); font-weight: 500; color: var(--tc-ink); }
.tclean-calc__valor { font-size: var(--tc-fs-16); font-weight: 600; color: var(--tc-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tclean-calc__input { display: flex; align-items: center; gap: 6px; width: 160px; height: 40px; margin: 0; padding: 0 12px; border: 1px solid var(--tc-border); border-radius: var(--tc-radius-ctl); background: var(--tc-surface); cursor: text; }
.tclean-calc__input:focus-within { border-color: var(--tc-accent); box-shadow: var(--tc-shadow-focus); }
.tclean-calc__input span { font-size: var(--tc-fs-14); color: var(--tc-muted); }
.tclean-calc__input input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; text-align: right; font-size: var(--tc-fs-16); font-weight: 600; color: var(--tc-ink); font-variant-numeric: tabular-nums; }
#alert_valor_frete:not(:empty) { padding: 10px 14px 0; }
.tclean-calc__resultado { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; background: var(--tc-success-bg-soft); }
.tclean-calc__resultado-valor { font-size: var(--tc-fs-22); font-weight: 600; color: var(--tc-success-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tclean-calc__resultado--negativo { background: var(--tc-danger-bg); }
.tclean-calc__resultado--negativo .tclean-calc__resultado-valor { color: var(--tc-danger-ink); }
.tclean-calc__enviar { height: 44px; }
.tclean-calc .form-check-input:checked { background-color: var(--tc-ink); border-color: var(--tc-ink); }
.tclean-calc .form-check-input:focus { border-color: var(--tc-accent); box-shadow: var(--tc-shadow-focus); }

/* Anúncios › Por SKU: produto pai do ERP e SKUs filhos (componentes/sku_pai_*.php, js/sku_pai.js) */
.tclean-skupai-tabela { min-width: 980px; }
.tclean-skupai-skt { height: 50px; }
.tclean-skupai-pai { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tclean-skupai-pai__codigo,
.tclean-skupai-sku { font-family: var(--tc-mono); font-size: var(--tc-fs-13); color: var(--tc-text-strong); white-space: nowrap; }
.tclean-skupai-titulo { max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tclean-skupai-head { min-width: 0; }
.tclean-skupai-secao { margin: 20px 0 8px; font-size: var(--tc-fs-13-5); font-weight: 600; color: var(--tc-ink); }
.tclean-skupai-kit { width: 76px; height: 34px; padding: 0 8px; font-variant-numeric: tabular-nums; }
.tclean-skupai-resumo { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.tclean-skupai-resumo__item { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--tc-border); border-radius: var(--tc-radius-ctl); background: var(--tc-surface); min-width: 0; }
.tclean-skupai-resumo__rotulo { font-size: var(--tc-fs-12-5); color: var(--tc-text-soft); }
.tclean-skupai-resumo__valor { display: flex; align-items: center; gap: 2px; font-size: var(--tc-fs-16); font-weight: 600; color: var(--tc-ink); font-variant-numeric: tabular-nums; }
/* Lápis do custo do pai: mesmo estilo de .tclean-editar-custo (seção "Sem custo") */
@media (max-width: 991.98px) {
  .tclean-skupai-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Automações › Rotinas e IA (componentes/rotinas_body.php, js/rotinas.js) */
.tclean-rot-tabela { table-layout: fixed; min-width: 900px; }
.tclean-rot-tabela th:nth-child(1) { width: 34%; }
.tclean-rot-tabela th:nth-child(2) { width: 15%; }
.tclean-rot-tabela th:nth-child(3) { width: 13%; }
.tclean-rot-tabela th:nth-child(4) { width: 14%; }
.tclean-rot-tabela th:nth-child(5) { width: 11%; }
.tclean-rot-tabela th:nth-child(6) { width: 13%; }
.tclean-rot-tabela--ia th:nth-child(1) { width: 28%; }
.tclean-rot-tabela--ia th:nth-child(n+2):nth-child(-n+6) { width: 9%; }
.tclean-rot-tabela--ia th:nth-child(7) { width: 14%; }
.tclean-rot-tabela--ia th:nth-child(8) { width: 13%; }
.tclean-rot-tabela--servicos { min-width: 600px; }
.tclean-rot-tabela--servicos th:nth-child(1) { width: 60%; }
.tclean-rot-tabela--servicos th:nth-child(2) { width: 40%; }
.tclean-rot-tabela--execucoes { min-width: 640px; }
.tclean-rot-tabela--execucoes th:nth-child(1) { width: 22%; }
.tclean-rot-tabela--execucoes th:nth-child(2) { width: 16%; }
.tclean-rot-tabela--execucoes th:nth-child(3) { width: 14%; }
.tclean-rot-tabela--execucoes th:nth-child(4) { width: 48%; }
.tclean-rot-tabela--dias { min-width: 640px; }
.tclean-rot-tabela--dias th { width: auto; }
.tclean-auto-lateral .tclean-auto-msgs__nome { overflow-wrap: anywhere; }
.tclean-rot-saida { display: block; font-family: var(--tc-mono); font-size: var(--tc-fs-12); color: var(--tc-text-soft); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 7.5em; overflow: hidden; }

/* Automações › Time de conteúdo (componentes/conteudo_*.php, js/conteudo.js; <body class="tclean-page-conteudo">).
   Usa também tclean-auto-* (passos, lateral, listas) e tclean-rot-saida da aba Rotinas e IA. */
:where(.tclean-page-conteudo) .tclean-conteudo-secoes { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
:where(.tclean-page-conteudo) .tclean-conteudo-secoes::-webkit-scrollbar { display: none; }
:where(.tclean-page-conteudo) .tclean-conteudo-secoes .tclean-segmented__item { flex-shrink: 0; white-space: nowrap; }
:where(.tclean-page-conteudo) .tclean-conteudo-secoes__conta { margin-left: 4px; font-weight: 600; color: var(--tc-ink); }
:where(.tclean-page-conteudo) .tclean-conteudo-secoes__conta:empty { display: none; }
/* Esteira: uma célula por etapa da linha de produção */
:where(.tclean-page-conteudo) .tclean-conteudo-esteira { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); border-top: 1px solid var(--tc-border-soft); }
:where(.tclean-page-conteudo) .tclean-conteudo-esteira__item { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-right: 1px solid var(--tc-border-soft); min-width: 0; }
:where(.tclean-page-conteudo) .tclean-conteudo-esteira__item:last-child { border-right: 0; }
:where(.tclean-page-conteudo) .tclean-conteudo-esteira__item.is-destaque { background: var(--tc-warning-bg); }
:where(.tclean-page-conteudo) .tclean-conteudo-esteira__nome { display: flex; align-items: center; gap: 6px; font-size: var(--tc-fs-12); font-weight: 600; color: var(--tc-text-soft); text-transform: uppercase; letter-spacing: 0.04em; }
:where(.tclean-page-conteudo) .tclean-conteudo-esteira__num { font-size: var(--tc-fs-24); font-weight: 600; color: var(--tc-text-strong); font-variant-numeric: tabular-nums; }
:where(.tclean-page-conteudo) .tclean-conteudo-esteira__erro { padding: 0 16px 16px; }
/* Tabelas da tela (larguras por coluna, como .tclean-rot-tabela) */
:where(.tclean-page-conteudo) .tclean-conteudo-tabela { table-layout: fixed; }
:where(.tclean-page-conteudo) .tclean-conteudo-tabela--agentes { min-width: 1080px; }
:where(.tclean-page-conteudo) .tclean-conteudo-tabela--agentes td { vertical-align: top; }
:where(.tclean-page-conteudo) .tclean-conteudo-tabela--agentes th:nth-child(1) { width: 32%; }
:where(.tclean-page-conteudo) .tclean-conteudo-tabela--agentes th:nth-child(2) { width: 19%; }
:where(.tclean-page-conteudo) .tclean-conteudo-tabela--agentes th:nth-child(3) { width: 19%; }
:where(.tclean-page-conteudo) .tclean-conteudo-tabela--agentes th:nth-child(4) { width: 9%; }
:where(.tclean-page-conteudo) .tclean-conteudo-tabela--agentes th:nth-child(5) { width: 12%; }
:where(.tclean-page-conteudo) .tclean-conteudo-tabela--agentes th:nth-child(6) { width: 9%; }
:where(.tclean-page-conteudo) .tclean-conteudo-tabela--agenda { min-width: 600px; }
:where(.tclean-page-conteudo) .tclean-conteudo-tabela--agenda th:nth-child(1) { width: 36%; }
:where(.tclean-page-conteudo) .tclean-conteudo-tabela--agenda th:nth-child(2) { width: 30%; }
:where(.tclean-page-conteudo) .tclean-conteudo-tabela--agenda th:nth-child(3) { width: 20%; }
:where(.tclean-page-conteudo) .tclean-conteudo-tabela--agenda th:nth-child(4) { width: 14%; }
:where(.tclean-page-conteudo) .tclean-conteudo-tabela--pautas { min-width: 920px; }
:where(.tclean-page-conteudo) .tclean-conteudo-tabela--pautas th:nth-child(1) { width: 32%; }
:where(.tclean-page-conteudo) .tclean-conteudo-tabela--pautas th:nth-child(2) { width: 16%; }
:where(.tclean-page-conteudo) .tclean-conteudo-tabela--pautas th:nth-child(3) { width: 13%; }
:where(.tclean-page-conteudo) .tclean-conteudo-tabela--pautas th:nth-child(4) { width: 21%; }
:where(.tclean-page-conteudo) .tclean-conteudo-tabela--pautas th:nth-child(5) { width: 8%; }
:where(.tclean-page-conteudo) .tclean-conteudo-tabela--pautas th:nth-child(6) { width: 10%; }
:where(.tclean-page-conteudo) .tclean-conteudo-tabela--achados { min-width: 560px; }
:where(.tclean-page-conteudo) .tclean-conteudo-tabela--achados th:nth-child(1) { width: 54%; }
:where(.tclean-page-conteudo) .tclean-conteudo-tabela--achados th:nth-child(n+2) { width: 15%; }
:where(.tclean-page-conteudo) .tclean-conteudo-tabela--fontes { min-width: 940px; }
:where(.tclean-page-conteudo) .tclean-conteudo-tabela--fontes th:nth-child(1) { width: 38%; }
:where(.tclean-page-conteudo) .tclean-conteudo-tabela--fontes th:nth-child(2) { width: 14%; }
:where(.tclean-page-conteudo) .tclean-conteudo-tabela--fontes th:nth-child(3) { width: 11%; }
:where(.tclean-page-conteudo) .tclean-conteudo-tabela--fontes th:nth-child(4) { width: 13%; }
:where(.tclean-page-conteudo) .tclean-conteudo-tabela--fontes th:nth-child(5) { width: 11%; }
:where(.tclean-page-conteudo) .tclean-conteudo-tabela--fontes th:nth-child(6) { width: 13%; }
:where(.tclean-page-conteudo) .tclean-conteudo-tabela--posts { min-width: 780px; }
:where(.tclean-page-conteudo) .tclean-conteudo-tabela--posts th:nth-child(1) { width: 40%; }
:where(.tclean-page-conteudo) .tclean-conteudo-tabela--posts th:nth-child(n+2) { width: 12%; }
:where(.tclean-page-conteudo) .tclean-conteudo-tabela--papeis { min-width: 580px; }
:where(.tclean-page-conteudo) .tclean-conteudo-tabela--papeis th:nth-child(1) { width: 40%; }
:where(.tclean-page-conteudo) .tclean-conteudo-tabela--papeis th:nth-child(n+2) { width: 15%; }
:where(.tclean-page-conteudo) .tclean-conteudo-tabela--dias th:nth-child(1) { width: 34%; }
:where(.tclean-page-conteudo) .tclean-conteudo-tabela--dias th:nth-child(n+2) { width: 33%; }
:where(.tclean-page-conteudo) .tclean-conteudo-rotina { min-height: 40px; }
:where(.tclean-page-conteudo) .tclean-conteudo-rotina + .tclean-conteudo-rotina { margin-top: 10px; }
:where(.tclean-page-conteudo) .tclean-conteudo-agente { display: flex; align-items: flex-start; gap: 12px; }
:where(.tclean-page-conteudo) .tclean-conteudo-agente__nome { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 600; color: var(--tc-text-strong); }
/* Linha do tempo de uma pauta (conteudo_pauta_evento) */
:where(.tclean-page-conteudo) .tclean-conteudo-linha { list-style: none; margin: 0 0 8px; padding: 0; }
:where(.tclean-page-conteudo) .tclean-conteudo-linha__item { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; padding-bottom: 14px; }
:where(.tclean-page-conteudo) .tclean-conteudo-linha__item::before { content: ''; position: absolute; left: 6px; top: 18px; bottom: 0; width: 2px; background: var(--tc-border); }
:where(.tclean-page-conteudo) .tclean-conteudo-linha__item:last-child::before { display: none; }
:where(.tclean-page-conteudo) .tclean-conteudo-linha__ponto { width: 14px; height: 14px; margin-top: 3px; border: 2px solid var(--tc-accent); border-radius: var(--tc-radius-pill); background: var(--tc-lavender); }
:where(.tclean-page-conteudo) .tclean-conteudo-linha__ponto.is-erro { border-color: var(--tc-danger); background: var(--tc-danger-bg); }
:where(.tclean-page-conteudo) .tclean-conteudo-linha__corpo { min-width: 0; font-size: var(--tc-fs-13-5); color: var(--tc-text); }
/* Prévia do rascunho, checagens do revisor e decisão (Aprovação e painel lateral) */
:where(.tclean-page-conteudo) .tclean-conteudo-previa { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--tc-border); border-radius: var(--tc-radius-card); background: var(--tc-bg); }
:where(.tclean-page-conteudo) .tclean-conteudo-previa__titulo { margin: 0; font-size: var(--tc-fs-20); font-weight: 600; color: var(--tc-text-strong); }
:where(.tclean-page-conteudo) .tclean-conteudo-previa__resumo { margin: 0; font-size: var(--tc-fs-15); color: var(--tc-text-soft); }
:where(.tclean-page-conteudo) .tclean-conteudo-previa__rotulo { display: block; margin-bottom: 4px; font-size: var(--tc-fs-12); font-weight: 600; color: var(--tc-muted); text-transform: uppercase; letter-spacing: 0.04em; }
:where(.tclean-page-conteudo) .tclean-conteudo-previa__bloco p,
:where(.tclean-page-conteudo) .tclean-conteudo-previa__bloco ul { margin: 0; font-size: var(--tc-fs-14); }
:where(.tclean-page-conteudo) .tclean-conteudo-previa__bloco ul { padding-left: 18px; }
:where(.tclean-page-conteudo) .tclean-conteudo-previa__corpo { max-width: 78ch; font-size: var(--tc-fs-14-5); line-height: 1.6; color: var(--tc-text); overflow-wrap: anywhere; }
:where(.tclean-page-conteudo) .tclean-conteudo-previa__corpo h4 { margin: 12px 0 4px; font-size: var(--tc-fs-16); font-weight: 600; color: var(--tc-text-strong); }
:where(.tclean-page-conteudo) .tclean-conteudo-previa__corpo p { margin: 0 0 10px; }
:where(.tclean-page-conteudo) .tclean-conteudo-checagens { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--tc-fs-13-5); }
:where(.tclean-page-conteudo) .tclean-conteudo-checagens li { display: flex; align-items: flex-start; gap: 8px; }
:where(.tclean-page-conteudo) .tclean-conteudo-checagens__icone.is-ok { color: var(--tc-success); }
:where(.tclean-page-conteudo) .tclean-conteudo-checagens__icone.is-falha { color: var(--tc-danger); }
:where(.tclean-page-conteudo) .tclean-conteudo-decisao { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--tc-border-soft); }
:where(.tclean-page-conteudo) .tclean-conteudo-decisao .form-label { margin: 0; font-size: var(--tc-fs-13); font-weight: 500; color: var(--tc-text); }
:where(.tclean-page-conteudo) .tclean-conteudo-decisao__linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
:where(.tclean-page-conteudo) .tclean-conteudo-decisao__data { max-width: 240px; }
/* Painel lateral da pauta (.modal.tclean-sheet.tclean-sheet--lado) */
:where(.tclean-page-conteudo) .tclean-conteudo-sheet__head { align-items: flex-start; gap: 14px; padding: 20px 22px; border-bottom: 1px solid var(--tc-border); }
:where(.tclean-page-conteudo) .tclean-conteudo-sheet__titulos { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
:where(.tclean-page-conteudo) .tclean-conteudo-sheet__titulo { margin: 0; font-size: var(--tc-fs-18); font-weight: 600; color: var(--tc-text-strong); }
/* .modal.tclean-sheet .modal-body zera o padding no celular: o seletor repete as classes para ganhar dele */
.modal.tclean-sheet .modal-body.tclean-conteudo-sheet__body { padding: 18px 22px 26px !important; }
:where(.tclean-page-conteudo) .tclean-conteudo-sheet__body a { color: var(--tc-ink); }
:where(.tclean-page-conteudo) .tclean-conteudo-sheet__passos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
:where(.tclean-page-conteudo) .tclean-conteudo-sheet__secao { margin: 18px 0 10px; font-size: var(--tc-fs-14); font-weight: 600; color: var(--tc-ink); }
:where(.tclean-page-conteudo) .tclean-conteudo-sheet__texto { margin: 0 0 10px; font-size: var(--tc-fs-13-5); }
/* Teto diário de IA */
:where(.tclean-page-conteudo) .tclean-conteudo-teto { display: flex; flex-direction: column; gap: 8px; }
:where(.tclean-page-conteudo) .tclean-conteudo-teto__linha { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: var(--tc-fs-14); }
:where(.tclean-page-conteudo) .tclean-conteudo-teto__barra { height: 10px; overflow: hidden; border-radius: var(--tc-radius-pill); background: var(--tc-track); }
:where(.tclean-page-conteudo) .tclean-conteudo-teto__uso { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--tc-success); }
:where(.tclean-page-conteudo) .tclean-conteudo-teto.is-alerta .tclean-conteudo-teto__uso { background: var(--tc-warning); }
:where(.tclean-page-conteudo) .tclean-conteudo-teto.is-estourado .tclean-conteudo-teto__uso { background: var(--tc-danger); }
@media (max-width: 1199.98px) {
  :where(.tclean-page-conteudo) .tclean-conteudo-esteira { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  :where(.tclean-page-conteudo) .tclean-conteudo-esteira__item:nth-child(4n) { border-right: 0; }
  :where(.tclean-page-conteudo) .tclean-conteudo-esteira__item:nth-child(n+5) { border-top: 1px solid var(--tc-border-soft); }
}
@media (max-width: 767.98px) {
  :where(.tclean-page-conteudo) .tclean-conteudo-esteira { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where(.tclean-page-conteudo) .tclean-conteudo-esteira__item { padding: 12px 14px; }
  :where(.tclean-page-conteudo) .tclean-conteudo-esteira__item:nth-child(4n) { border-right: 1px solid var(--tc-border-soft); }
  :where(.tclean-page-conteudo) .tclean-conteudo-esteira__item:nth-child(2n) { border-right: 0; }
  :where(.tclean-page-conteudo) .tclean-conteudo-esteira__item:nth-child(n+3) { border-top: 1px solid var(--tc-border-soft); }
  :where(.tclean-page-conteudo) .tclean-conteudo-esteira__num { font-size: var(--tc-fs-20); }
  :where(.tclean-page-conteudo) .tclean-conteudo-sheet__head { padding: 6px 18px 14px; }
  .modal.tclean-sheet .modal-body.tclean-conteudo-sheet__body { padding: 14px 18px 24px !important; }
  :where(.tclean-page-conteudo) .tclean-conteudo-sheet__passos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :where(.tclean-page-conteudo) .tclean-conteudo-sheet__passos .tclean-auto-passos__item { padding: 12px; border-right: 1px solid var(--tc-border-soft); }
  :where(.tclean-page-conteudo) .tclean-conteudo-sheet__passos .tclean-auto-passos__item:last-child { border-right: 0; }
}

/* ---------- Pesquisa de produtos (product_research.php) ---------- */
.tclean-dossie__foto { width: 148px; height: 148px; margin: 0 auto 12px; }
.tclean-dossie__foto img { width: 100%; height: 100%; object-fit: contain; }
#tabela_pesquisas .pr-title { max-width: 340px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }

/* Linha de simulador: rótulo (+ legenda) à esquerda, valor ou campo à direita */
.tclean-calc { display: flex; flex-direction: column; }
.tclean-calc__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--tc-border-soft);
}
.tclean-calc__row:first-child { border-top: 0; padding-top: 0; }
.tclean-calc__label { display: flex; flex-direction: column; gap: 2px; font-size: var(--tc-fs-13-5); color: var(--tc-text); }
.tclean-calc__label small { font-size: var(--tc-fs-12); color: var(--tc-muted); }
.tclean-calc__value { font-size: var(--tc-fs-15); font-weight: 500; color: var(--tc-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tclean-calc__value--lg { font-size: var(--tc-fs-20); letter-spacing: -0.01em; }
.tclean-calc__input { width: 112px; flex-shrink: 0; }

.tclean-rel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.product-rel-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-surface);
  overflow: hidden;
}
.product-rel-card .rel-img-wrapper { display: flex; align-items: center; justify-content: center; height: 130px; background: var(--tc-bg); }
.product-rel-card .rel-img-wrapper img { max-width: 100%; max-height: 100%; object-fit: contain; }
.product-rel-card .rel-body { display: flex; flex-direction: column; justify-content: space-between; flex: 1; padding: 10px 12px; }
.product-rel-card .rel-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--tc-fs-12-5);
  line-height: 1.35;
  color: var(--tc-text);
}
.product-rel-card .rel-price { font-weight: 600; color: var(--tc-ink); font-variant-numeric: tabular-nums; }

/* ---------- Segurança e rate limit (seguranca.php) ---------- */
.tclean-kpi__bar--danger > span { background: var(--tc-danger); }
.tclean-kpi__bar--warning > span { background: var(--tc-yellow); }
.tclean-kpi__bar--success > span { background: var(--tc-success); }
.tclean-sec__domains { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.tclean-sec__domains > .tclean-empty { grid-column: 1 / -1; }
.tclean-sec__domain {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
}
.tclean-sec__domain-info { flex: 1; min-width: 0; }
.tclean-sec__domain-name { display: block; font-weight: 600; color: var(--tc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tclean-sec__domain-sub { display: block; font-size: var(--tc-fs-12); color: var(--tc-muted); }
.tclean-sec__key { display: block; margin-top: 2px; font: var(--tc-fs-12) var(--tc-mono); color: var(--tc-muted); word-break: break-all; }
.tclean-sec__uso { min-width: 180px; }

/* ---------- Guia passo a passo (upload de planilha de custos) ---------- */
.tclean-guia-step {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--tc-border);
}
.tclean-guia-step:last-child { border-bottom: none; padding-bottom: 0; }
.tclean-guia-step__num {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--tc-lavender);
  color: var(--tc-ink);
  font-weight: 700;
  font-size: var(--tc-fs-14);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tclean-guia-step__content { flex: 1; min-width: 0; }
.tclean-guia-step__title { margin: 0 0 4px; font-size: var(--tc-fs-14); font-weight: 600; color: var(--tc-text); }
.tclean-guia-step__text { margin: 0; font-size: var(--tc-fs-13); color: var(--tc-muted); line-height: 1.5; }
.tclean-guia-step__text strong { color: var(--tc-text); }
.tclean-guia-step__content .btn { margin-top: 10px; }
#modal_guia_planilha .modal-footer { border-top: 0; }
.tclean-sec__uso-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; font-size: var(--tc-fs-12); }

/* ---------- Fornecedores (modal Novo fornecedor + seleção em Produtos) ---------- */
.tclean-fornecedor-section {
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  margin: 0 20px 12px;
  overflow: hidden;
}
.tclean-fornecedor-section:first-child { margin-top: 16px; }
.tclean-fornecedor-section__header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--tc-surface);
  border: none;
  font-weight: 600;
  font-size: var(--tc-fs-14-5);
  color: var(--tc-text);
  cursor: pointer;
}
.tclean-fornecedor-section__header i.fa-chevron-down { transition: transform .15s ease; color: var(--tc-muted); font-size: var(--tc-fs-12); }
.tclean-fornecedor-section__header.collapsed i.fa-chevron-down { transform: rotate(-90deg); }
/* padding-top folgado de propósito: o .row.g-3 do Bootstrap tem margin-top
   negativo (compensa o gutter das colunas), que sem isso puxa a 1ª linha de
   campos pra cima da borda superior, dando a impressão de a linha "cortar"
   o texto do primeiro campo. */
.tclean-fornecedor-section__body { padding: 22px 16px 16px; border-top: 1px solid var(--tc-border); }

.tclean-fornecedor-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 8px 12px;
  border: 1px dashed var(--tc-border);
  border-radius: var(--tc-radius-ctl);
  color: var(--tc-muted);
  font-size: var(--tc-fs-13);
  margin-bottom: 8px;
  background: var(--tc-bg);
}
.tclean-fornecedor-slot--filled {
  justify-content: space-between;
  border-style: solid;
  background: var(--tc-surface);
  color: var(--tc-text);
}
.tclean-fornecedor-slot__label { font-size: var(--tc-fs-11); color: var(--tc-muted); text-transform: uppercase; letter-spacing: .02em; }
.tclean-fornecedor-slot__name { font-weight: 600; }
.tclean-fornecedor-slot__actions { display: flex; align-items: center; gap: 4px; }

.tclean-fornecedor-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--tc-radius-ctl);
  cursor: pointer;
  transition: background-color .12s ease;
}
.tclean-fornecedor-row:hover { background: var(--tc-lavender); }
.tclean-fornecedor-row--selected { background: var(--tc-border-soft); }
.tclean-fornecedor-row__name { font-weight: 600; color: var(--tc-text); font-size: var(--tc-fs-13-5); }
.tclean-fornecedor-row__meta { font-size: var(--tc-fs-12); color: var(--tc-muted); }

/* ---------- Truncamento "inteligente" das tabelas ----------
   Depois de várias tentativas (table-layout:auto puro, JS esticando só a
   coluna de título — stretchTitleColumn, removido por dar 2 regressões em
   produção), inspecionamos ao vivo a tabela de um concorrente (Cargoos,
   com login do Bruno) pra ver o "padrão de mercado" de verdade — medindo
   com JS em 3 larguras de tela, não só olhando print. O padrão deles:
   table-layout:fixed + width:100% + width em px fixo em TODA coluna
   (inclusive a de título) + min-width igual à soma das colunas. SEM
   nenhum JS ajustando largura em tempo real. Resultado medido:
   - Tela estreita (wrap < soma das colunas): tabela fica na soma mínima,
     não encolhe mais — aciona o scroll horizontal do .tclean-table-wrap.
   - Tela larga (wrap > soma das colunas): a tabela preenche exatamente
     (width:100%), e table-layout:fixed reparte a sobra PROPORCIONALMENTE
     em TODAS as colunas (medido: ~1.49x em cada uma, não só no título) —
     é assim que title-layout:fixed nativamente distribui espaço extra
     quando width:100% > soma dos <th>. Achávamos essa distribuição
     "uniforme" ruim (comentário antigo desse bloco dizia isso), mas o
     concorrente prova que funciona bem na prática — nenhuma coluna fica
     vazia, todas crescem de forma proporcional e continuam com cara de
     coluna "cheia".
   O width de cada <th> aqui é medido do conteúdo real de cada tabela
   (rodando sem nenhum width, deixando table-layout:auto medir sozinho) —
   já leva em conta o cabeçalho do DataTables (label + ícone de ordenação),
   que é a pegadinha que causou regressão numa tentativa anterior de dar
   width fixo (coluna menor que o cabeçalho precisa estoura mesmo assim).
   Achado testando ao vivo (tabela ficava sempre ~40px mais larga por
   coluna do que o width que a gente dava, em todas as 3 tabelas): o
   base.css tem uma regra antiga `table.dataTable th, table.dataTable td {
   box-sizing: content-box }` que desliga o box-sizing:border-box padrão
   (Bootstrap, no `*`) só pras tabelas do DataTables. Com content-box, o
   width do CSS vira só a área de conteúdo — padding (16px, ou 25px nas
   colunas ordenáveis, por causa do ícone de ordenação) e borda somam por
   cima, empurrando a coluna renderizada bem além do width que a gente
   pediu. Sem re-medir tudo de novo: força border-box de volta só nessas 3
   tabelas (seletor por ID já ganha da regra do base.css).
   Linha mais baixa (padrão Cargoos, ~54px vs. nossos ~61-69px antes):
   miniatura menor (30px, ver .tclean-pedido-produto__thumb) + padding
   vertical da célula reduzido só nessas 3 tabelas (10px em vez dos 12px
   genéricos de .tclean-table, que continuam valendo nas outras telas). */
#table_itens { table-layout: fixed; width: 100%; min-width: 760px; }
#table_itens th, #table_itens td { box-sizing: border-box; }
#table_itens tbody td { padding-top: 10px !important; padding-bottom: 10px !important; }
#table_itens .tclean-pedido-produto { max-width: 100%; overflow: hidden; }

#table_produtos { table-layout: fixed; width: 100%; min-width: 1360px; } /* soma das 11 colunas (com Ações) */
#table_produtos th, #table_produtos td { box-sizing: border-box; }
#table_produtos tbody td { padding-top: 10px !important; padding-bottom: 10px !important; }
#table_produtos .tclean-pedido-produto { max-width: 100%; overflow: hidden; }

#table_anuncios { table-layout: fixed; width: 100%; min-width: 1633px; }
#table_anuncios th, #table_anuncios td { box-sizing: border-box; }
#table_anuncios tbody td { padding-top: 10px !important; padding-bottom: 10px !important; }
#table_anuncios .tclean-pedido-produto { max-width: 100%; overflow: hidden; }

/* Mesmo padrão propagado pra Curva ABC (tabela_80/95/100 + sem_table, aba
   "padrão" — a aba "período" tem colunas dinâmicas e não entrou nessa
   leva). */
#tabela_80, #tabela_95, #tabela_100 { table-layout: fixed; width: 100%; min-width: 1220px; }
#tabela_80 th, #tabela_80 td, #tabela_95 th, #tabela_95 td, #tabela_100 th, #tabela_100 td { box-sizing: border-box; }
#tabela_80 tbody td, #tabela_95 tbody td, #tabela_100 tbody td { padding-top: 10px !important; padding-bottom: 10px !important; }
#tabela_80 .tclean-pedido-produto, #tabela_95 .tclean-pedido-produto, #tabela_100 .tclean-pedido-produto { max-width: 100%; overflow: hidden; }

#sem_table { table-layout: fixed; width: 100%; min-width: 640px; }
#sem_table th, #sem_table td { box-sizing: border-box; }
#sem_table tbody td { padding-top: 10px !important; padding-bottom: 10px !important; }
#sem_table .tclean-pedido-produto { max-width: 100%; overflow: hidden; }

/* Mesmo padrão propagado pra Margem de Contribuição (contribuicao.js) —
   sem min-width aqui porque a tabela alterna entre 2 conjuntos de colunas
   diferentes (Margem por Anúncio / Margem por Pedido, larguras diferentes
   em cada). Não precisa: table-layout:fixed já usa a soma dos width de
   cada <th> como piso automaticamente (é a própria definição do algoritmo,
   width:100% só entra como concorrente nesse "maior valor entre os dois") —
   width nos <th> quem vem da config de coluna do DataTables (ver
   getContribuicaoColumns() no JS), não de HTML estático. */
#table_contribuicao { table-layout: fixed; width: 100%; }
#table_contribuicao th, #table_contribuicao td { box-sizing: border-box; }
#table_contribuicao tbody td { padding-top: 10px !important; padding-bottom: 10px !important; }
#table_contribuicao .tclean-pedido-produto { max-width: 100%; overflow: hidden; }

/* Mesmo padrão propagado pro Mapa de Vendas (mapa.js) — #table_estados é
   tabela simples (sem DataTables). A tabela de anúncios por estado foi
   renomeada pra #table_mapa_anuncios: "#table_anuncios" já é usado (com
   outras larguras) pela aba Anúncios de item.php — mesmo ID em páginas
   diferentes nunca colide no DOM, mas colidiria aqui no CSS (a última
   regra ganha da primeira, quebrando uma das duas telas). */
#table_estados { table-layout: fixed; width: 100%; min-width: 600px; }
#table_estados th, #table_estados td { box-sizing: border-box; }
#table_estados tbody td { padding-top: 10px !important; padding-bottom: 10px !important; }

#table_mapa_anuncios { table-layout: fixed; width: 100%; min-width: 1265px; }
#table_mapa_anuncios th, #table_mapa_anuncios td { box-sizing: border-box; }
#table_mapa_anuncios tbody td { padding-top: 10px !important; padding-bottom: 10px !important; }
#table_mapa_anuncios .tclean-pedido-produto { max-width: 100%; overflow: hidden; }

/* Mesmo padrão propagado pra Central de Promoções (promocoes.js) — tabelas
   dentro da drawer genérica (.app-drawer-wrapper-generic, 70% da largura da
   tela: bem mais espaço do que parece numa janela estreita, mesmo bug de
   sempre se não travar largura). .tclean-table--compact já cuida do padding
   e do max-width do .tclean-pedido-produto (200px) — só falta o
   table-layout:fixed + box-sizing pra não estourar. */
#table_promocoes_sem_ativa,
#table_promocoes_disponiveis,
#table_promocoes_ativos,
#table_promocoes_programados {
  table-layout: fixed;
  width: 100%;
}
#table_promocoes_sem_ativa th, #table_promocoes_sem_ativa td,
#table_promocoes_disponiveis th, #table_promocoes_disponiveis td,
#table_promocoes_ativos th, #table_promocoes_ativos td,
#table_promocoes_programados th, #table_promocoes_programados td {
  box-sizing: border-box;
}

/* Sub-tabela de variantes (expandida dentro da linha "Sincronizado com N
   anúncios") — mesma ideia, mas por classe: pode haver mais de 1 expandida
   ao mesmo tempo, então não tem ID único. */
.promo-variantes-table { table-layout: fixed; width: 100%; }
.promo-variantes-table th, .promo-variantes-table td { box-sizing: border-box; }

/* Mesmo padrão propagado pra Qualidade da Conta (account_quality.js). */
#table_problems { table-layout: fixed; width: 100%; min-width: 970px; }
#table_problems th, #table_problems td { box-sizing: border-box; }
#table_problems tbody td { padding-top: 10px !important; padding-bottom: 10px !important; }
#table_problems .tclean-pedido-produto { max-width: 100%; overflow: hidden; }

/* Mesmo padrão propagado pra Sugestão de Full (full.js). */
#table_full { table-layout: fixed; width: 100%; min-width: 930px; }
#table_full th, #table_full td { box-sizing: border-box; }
#table_full tbody td { padding-top: 10px !important; padding-bottom: 10px !important; }
#table_full .tclean-pedido-produto { max-width: 100%; overflow: hidden; }

/* Mesmo padrão propagado pro Catálogo / Buy Box (catalogo.js). */
#table_catalogo { table-layout: fixed; width: 100%; min-width: 940px; }
#table_catalogo th, #table_catalogo td { box-sizing: border-box; }
#table_catalogo tbody td { padding-top: 10px !important; padding-bottom: 10px !important; }
#table_catalogo .tclean-pedido-produto { max-width: 100%; overflow: hidden; }

/* Mesmo padrão propagado pra Evolução de Posição (posicao.js) — substitui o
   antigo DataTables Responsive (colunas somem num "+") por larguras fixas. */
#tabela_targets { table-layout: fixed; width: 100%; min-width: 1340px; }
#tabela_targets th, #tabela_targets td { box-sizing: border-box; }
#tabela_targets tbody td { padding-top: 10px !important; padding-bottom: 10px !important; }
#tabela_targets .tclean-pedido-produto { max-width: 100%; overflow: hidden; }

/* Mesmo padrão propagado pro preview "Margem por pedido" da Home
   (mercadolivre.js) — mesmas colunas/larguras da tabela completa em
   contribuicao.js (margem=pedido), só que com poucas linhas (preview). */
#table_home_pedidos { table-layout: fixed; width: 100%; min-width: 1360px; }
#table_home_pedidos th, #table_home_pedidos td { box-sizing: border-box; }
#table_home_pedidos tbody td { padding-top: 10px !important; padding-bottom: 10px !important; }
#table_home_pedidos .tclean-pedido-produto { max-width: 100%; overflow: hidden; }

/* Mesmo padrão pra "Pedidos chegando agora" (aba Ao vivo da Home,
   pedidos_ao_vivo() em mercadolivre.js) — sobrepõe o max-width:200px que
   .tclean-table--compact aplica por padrão em .tclean-pedido-produto. */
#table_home_live_pedidos { table-layout: fixed; width: 100%; min-width: 1290px; }
#table_home_live_pedidos th, #table_home_live_pedidos td { box-sizing: border-box; }
#table_home_live_pedidos .tclean-pedido-produto { max-width: 100%; overflow: hidden; }

/* Mesmo padrão pra Pesquisa de Produtos (product_research.js). */
#tabela_pesquisas { table-layout: fixed; width: 100%; min-width: 1325px; }
#tabela_pesquisas th, #tabela_pesquisas td { box-sizing: border-box; }
#tabela_pesquisas tbody td { padding-top: 10px !important; padding-bottom: 10px !important; }
#tabela_pesquisas .tclean-pedido-produto { max-width: 100%; overflow: hidden; }

/* Curva ABC por período (curvaabc_periodo.js, visão semanal) — número de
   colunas de período é dinâmico (varia com o range escolhido). Mesmo assim
   precisa de table-layout:fixed: em table-layout:auto, o width:100% da
   .tclean-table força o navegador a redistribuir o espaço sobrando pelas
   colunas (mesmo com um width inline no <th>, que em modo auto é só uma
   dica) — é o que fazia ANÚNCIO esticar bem além do que pedimos. Em modo
   fixed, os widths de ABC/ANÚNCIO/período/total (todos definidos no JS)
   valem literalmente, e a tabela só cresce além da soma deles. */
#tabela_c_80, #tabela_c_95, #tabela_c_100 {
  table-layout: fixed;
  width: 100%;
}
#tabela_c_80 th, #tabela_c_80 td,
#tabela_c_95 th, #tabela_c_95 td,
#tabela_c_100 th, #tabela_c_100 td {
  box-sizing: border-box;
}
#tabela_c_80 .tclean-pedido-produto,
#tabela_c_95 .tclean-pedido-produto,
#tabela_c_100 .tclean-pedido-produto {
  max-width: 100%;
  overflow: hidden;
}

/* Saúde de pagamentos Pagar.me (estatisticas.js) e o histórico do cliente
   no modal #modal_billing_history. */
#billing_risk_clients { table-layout: fixed; width: 100%; min-width: 1400px; }
#billing_risk_clients th, #billing_risk_clients td { box-sizing: border-box; }
#billing_risk_clients tbody td { padding-top: 10px !important; padding-bottom: 10px !important; }
#billing_history_t { table-layout: fixed; width: 100%; min-width: 1060px; }
#billing_history_t th, #billing_history_t td { box-sizing: border-box; }

/* Publicidade › Afiliados (afiliados.js): Produtos, Pedidos, Amostras e Por loja */
#table_afil_produtos { table-layout: fixed; width: 100%; min-width: 1146px; }
#table_afil_pedidos { table-layout: fixed; width: 100%; min-width: 1080px; }
#table_afil_amostras { table-layout: fixed; width: 100%; min-width: 990px; }
#table_afil_lojas { table-layout: fixed; width: 100%; min-width: 760px; }
#table_afil_produtos th, #table_afil_produtos td,
#table_afil_pedidos th, #table_afil_pedidos td,
#table_afil_amostras th, #table_afil_amostras td,
#table_afil_lojas th, #table_afil_lojas td { box-sizing: border-box; }
/* Cabeçalhos longos ("Vendas por afiliado", "Margem sem afiliado") quebram em 2 linhas em vez de cortar */
#table_afil_produtos thead th, #table_afil_pedidos thead th, #table_afil_amostras thead th, #table_afil_lojas thead th {
  white-space: normal; line-height: 1.25; padding-top: 6px !important; padding-bottom: 6px !important;
}
#table_afil_produtos tbody td, #table_afil_pedidos tbody td, #table_afil_amostras tbody td { padding-top: 10px !important; padding-bottom: 10px !important; }
#table_afil_produtos .tclean-pedido-produto, #table_afil_pedidos .tclean-pedido-produto, #table_afil_amostras .tclean-pedido-produto { max-width: 100%; overflow: hidden; }

/* ==========================================================================
   Onboarding (autenticar.php / importando.php) — telas sem sidebar entre o
   cadastro e o dashboard. Fase 1 do redesenho: substitui o dropdown solto
   de autenticar.php e cobre o silêncio de "estamos importando seus dados".
   ========================================================================== */
.tclean-auth-shell {
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 56px 24px 40px;
  background: linear-gradient(180deg, var(--tc-bg) 0%, var(--tc-lavender) 100%);
  font-family: var(--tc-font);
  color: var(--tc-text);
}
.tclean-auth-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 44px;
}
.tclean-auth-logo__mark {
  width: 30px;
  height: 30px;
  border-radius: var(--tc-radius-ctl-sm);
  background: var(--tc-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tclean-auth-logo__text {
  font-size: var(--tc-fs-20);
  font-weight: 700;
  color: var(--tc-ink);
  letter-spacing: -0.02em;
}
.tclean-auth-card {
  width: 100%;
  max-width: 640px;
  background: var(--tc-surface);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-card);
  padding: 48px;
  box-sizing: border-box;
  box-shadow: var(--tc-shadow-panel);
}
.tclean-auth-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.tclean-auth-step {
  font-size: var(--tc-fs-12);
  font-weight: 600;
  color: var(--tc-ink);
  background: var(--tc-lavender);
  padding: 5px 11px;
  border-radius: var(--tc-radius-pill);
}
.tclean-auth-progress {
  display: flex;
  gap: 6px;
  margin-bottom: 30px;
}
.tclean-auth-progress__seg {
  height: 4px;
  flex: 1;
  border-radius: var(--tc-radius-xs);
  background: var(--tc-border);
}
.tclean-auth-progress__seg--done {
  background: var(--tc-ink);
}
.tclean-auth-title {
  margin: 0 0 10px;
  font-size: var(--tc-fs-26);
  font-weight: 700;
  color: var(--tc-text);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.tclean-auth-subtitle {
  margin: 0 0 30px;
  font-size: var(--tc-fs-15);
  color: var(--tc-muted);
  line-height: 1.55;
}
.tclean-marketplace-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}
.tclean-marketplace-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--tc-radius-lg);
  border: 1.5px solid var(--tc-border);
  background: var(--tc-surface);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color .15s ease, background .15s ease;
}
.tclean-marketplace-card:hover {
  border-color: var(--tc-accent);
}
.tclean-marketplace-card.is-selected {
  border-color: var(--tc-ink);
  background: var(--tc-lavender);
}
.tclean-marketplace-card__mark {
  width: 40px;
  height: 40px;
  border-radius: var(--tc-radius-ctl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--tc-fs-12-5);
  flex-shrink: 0;
}
.tclean-marketplace-card__mark--ml { background: var(--tc-brand-ml-bg); color: var(--tc-brand-ml-ink); }
.tclean-marketplace-card__mark--shopee { background: var(--tc-brand-shopee-bg); color: var(--tc-brand-shopee-ink); }
.tclean-marketplace-card__mark--amazon { background: var(--tc-brand-amazon-bg); color: var(--tc-brand-amazon-ink); }
.tclean-marketplace-card__mark--tiktok { background: var(--tc-brand-tiktok-bg); color: var(--tc-brand-tiktok-ink); }
/* Logo oficial do marketplace no card (adm/assets/img/site/logos/, cor e proporção originais) */
.tclean-marketplace-card__mark--logo { width: 72px; background: var(--tc-surface); border: 1px solid var(--tc-border); }
.tclean-marketplace-card__logo { width: auto; max-width: 60px; height: 22px; object-fit: contain; }
.tclean-marketplace-card__logo--shopee { height: 30px; }
.tclean-marketplace-card__logo--amazon { height: 16px; margin-top: 3px; }
.tclean-marketplace-card__logo--tiktok { height: 24px; }
.tclean-auth-passos { margin-bottom: 26px; max-width: none; }

/* Card de opção com 3 escolhas e texto de apoio (ex.: ChatGPT · Claude · Desenvolvedor em aplicativos.php) */
.tclean-marketplace-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 0; }
.tclean-marketplace-card__mark--ia { background: var(--tc-lavender); color: var(--tc-ink); font-size: var(--tc-fs-18); }
.tclean-marketplace-card__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tclean-marketplace-card__nome { font-size: var(--tc-fs-15); font-weight: 600; color: var(--tc-text-strong); }
.tclean-marketplace-card__sub { font-size: var(--tc-fs-12-5); color: var(--tc-muted); line-height: 1.35; }
@media (max-width: 767px) {
  .tclean-marketplace-grid--3 { grid-template-columns: minmax(0, 1fr); }
}

/* Passo a passo numerado (guia de configuração): número, título, texto, caminho de menu e campos para copiar */
.tclean-passos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.tclean-passos__item { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; }
.tclean-passos__num { width: 32px; height: 32px; border-radius: 50%; background: var(--tc-ink); color: var(--tc-white); font-size: var(--tc-fs-14); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.tclean-passos__titulo { margin: 4px 0 0; font-size: var(--tc-fs-15); font-weight: 600; color: var(--tc-text-strong); }
.tclean-passos__texto { margin: 4px 0 0; font-size: var(--tc-fs-14); line-height: 1.6; color: var(--tc-text-soft); }
.tclean-passos__menu { display: inline-block; padding: 0 6px; border-radius: var(--tc-radius-xs); background: var(--tc-lavender); border: 1px solid var(--tc-lavender-line); color: var(--tc-ink); font-weight: 600; white-space: nowrap; }
.tclean-passos__campos { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.tclean-passos__nota { margin: 8px 0 0; font-size: var(--tc-fs-12-5); color: var(--tc-muted); }

/* Campo com valor para copiar (endereço, nome, pergunta de exemplo): rótulo opcional + valor + botão */
.tclean-campo-copiar { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 12px; border: 1px solid var(--tc-border); border-radius: var(--tc-radius-ctl); background: var(--tc-bg); }
.tclean-campo-copiar__rotulo { flex: 0 0 150px; font-size: var(--tc-fs-12-5); color: var(--tc-muted); }
.tclean-campo-copiar__valor { flex: 1; min-width: 0; font-size: var(--tc-fs-14); color: var(--tc-ink); overflow-wrap: anywhere; }
.tclean-campo-copiar__valor--mono { font-family: var(--tc-mono); font-size: var(--tc-fs-13); }
.tclean-campo-copiar .tclean-btn { flex: none; }
.tclean-campo-copiar .tclean-btn.is-copied { border-color: var(--tc-success); color: var(--tc-success-ink); }
@media (max-width: 575px) {
  .tclean-campo-copiar { flex-wrap: wrap; }
  .tclean-campo-copiar__rotulo { flex-basis: 100%; }
}
.tclean-marketplace-card__badge {
  font-size: var(--tc-fs-11);
  font-weight: 600;
  color: var(--tc-success-ink);
  background: var(--tc-success-soft);
  padding: 1px 7px;
  border-radius: var(--tc-radius-pill);
  width: fit-content;
}
.tclean-auth-cta {
  display: block;
  text-align: center;
  padding: 16px;
  border-radius: var(--tc-radius-lg);
  background: var(--tc-ink);
  color: var(--tc-white);
  font-size: var(--tc-fs-15);
  font-weight: 600;
  text-decoration: none;
  box-sizing: border-box;
  border: none;
  width: 100%;
  cursor: pointer;
  font-family: inherit;
  transition: opacity .15s ease;
}
.tclean-auth-cta:hover {
  opacity: .92;
  color: var(--tc-white);
}
.tclean-auth-cta[disabled],
.tclean-auth-cta.is-disabled {
  background: var(--tc-border);
  color: var(--tc-faint);
  pointer-events: none;
  cursor: default;
}
.tclean-auth-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 22px;
  font-size: var(--tc-fs-12-5);
  color: var(--tc-faint);
  text-align: center;
}
.tclean-auth-help {
  margin-top: 22px;
  font-size: var(--tc-fs-13);
  color: var(--tc-muted);
  text-decoration: none;
}
.tclean-auth-help:hover {
  color: var(--tc-ink);
}
.tclean-auth-ghost {
  display: block;
  text-align: center;
  font-size: var(--tc-fs-13-5);
  font-weight: 600;
  color: var(--tc-muted);
  text-decoration: none;
  padding: 10px;
}
.tclean-auth-ghost:hover {
  color: var(--tc-ink);
}

/* Barra de progresso real (importando.php) */
.tclean-auth-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.tclean-auth-progress-bar {
  width: 100%;
  height: 8px;
  border-radius: var(--tc-radius-pill);
  background: var(--tc-lavender-line);
  overflow: hidden;
  margin-bottom: 28px;
}
.tclean-auth-progress-bar__fill {
  height: 100%;
  border-radius: var(--tc-radius-pill);
  background: var(--tc-ink);
  transition: width .4s ease;
}
.tclean-auth-success-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--tc-radius-lg);
  background: var(--tc-success-soft);
  border: 1px solid var(--tc-success-line);
  margin-bottom: 24px;
}
.tclean-auth-checklist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 24px;
}
.tclean-auth-checklist__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--tc-radius-ctl);
}
.tclean-auth-checklist__icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tclean-auth-checklist__icon--done {
  background: var(--tc-success);
}
.tclean-auth-checklist__icon--pending {
  border: 2px solid var(--tc-border);
}
.tclean-auth-checklist__icon--active {
  border: 2px solid var(--tc-lavender-line);
  border-top-color: var(--tc-ink);
  animation: tclean-spin 1.1s linear infinite;
}
@keyframes tclean-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Card de ativação, dentro do dashboard real (home.php) */
.tclean-activation-card {
  background: var(--tc-surface);
  border: 1px solid var(--tc-lavender-line);
  border-radius: var(--tc-radius-card);
  padding: 26px 28px;
  margin-bottom: 24px;
  box-shadow: var(--tc-shadow-raised);
}
.tclean-activation-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
}
.tclean-activation-card__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.tclean-activation-card__step {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  border-radius: var(--tc-radius-ctl);
  background: var(--tc-bg);
}
.tclean-activation-card__dismiss {
  width: 28px;
  height: 28px;
  border-radius: var(--tc-radius-ctl-sm);
  border: none;
  background: transparent;
  color: var(--tc-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.tclean-activation-card__dismiss:hover {
  background: var(--tc-lavender-line);
}

/* ---------- Paywall (plan_confirmation.php) ----------
   Mesma moldura sem sidebar do onboarding (.tclean-auth-shell + .tclean-auth-logo),
   com largura de página. O título muda pelo motivo do bloqueio (teste, cartão
   recusado, cancelado); a grade mostra 3 planos e o resto em linhas compactas. */
.tclean-paywall {
  width: 100%;
  max-width: 1080px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.tclean-paywall__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.tclean-paywall__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--tc-radius-pill);
  border: 1px solid var(--tc-lavender-line);
  background: var(--tc-lavender);
  color: var(--tc-ink);
  font-size: var(--tc-fs-13);
  font-weight: 500;
}
.tclean-paywall__status--warning { background: var(--tc-warning-bg); border-color: var(--tc-warning-line); color: var(--tc-warning-ink); }
.tclean-paywall__status--danger { background: var(--tc-danger-bg); border-color: var(--tc-danger-border); color: var(--tc-danger-ink); }
.tclean-paywall__title {
  margin: 0;
  max-width: 760px;
  font-size: var(--tc-fs-42);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--tc-text-strong);
}
.tclean-paywall__subtitle {
  margin: 0;
  max-width: 640px;
  font-size: var(--tc-fs-16);
  font-weight: 300;
  line-height: 1.5;
  color: var(--tc-text-soft);
}
.tclean-paywall__subtitle strong { font-weight: 600; color: var(--tc-text); }
.tclean-paywall__acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 6px;
}
.tclean-paywall__acoes .tclean-btn { height: 48px; padding: 0 22px; font-size: var(--tc-fs-15); font-weight: 600; text-decoration: none; }
.tclean-paywall__resumo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 24px;
  background: var(--tc-surface);
  border: 1px solid var(--tc-lavender-line);
  border-radius: var(--tc-radius-xl);
}
.tclean-paywall__resumo-intro { display: flex; align-items: center; gap: 12px; }
.tclean-paywall__resumo-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--tc-radius-ctl);
  background: var(--tc-lavender);
  color: var(--tc-ink);
}
.tclean-paywall__resumo-titulo { font-size: var(--tc-fs-15); font-weight: 600; color: var(--tc-text-strong); }
.tclean-paywall__resumo-sub { font-size: var(--tc-fs-13); color: var(--tc-text-soft); }
.tclean-paywall__kpis { display: flex; flex-wrap: wrap; gap: 40px; }
.tclean-paywall__kpi-valor {
  font-size: var(--tc-fs-26);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--tc-text-strong);
}
.tclean-paywall__kpi-label { font-size: var(--tc-fs-13); color: var(--tc-text-soft); }
.tclean-paywall__planos { display: flex; flex-direction: column; gap: 20px; }
.tclean-paywall__planos-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.tclean-paywall__h2 { margin: 0; font-size: var(--tc-fs-22); font-weight: 600; color: var(--tc-text-strong); }
.tclean-paywall__hint { margin: 4px 0 0; font-size: var(--tc-fs-13-5); color: var(--tc-text-soft); }
.tclean-paywall__intervalo { margin-top: 12px; }
.tclean-paywall__contas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: var(--tc-fs-13);
  color: var(--tc-text-soft);
}
.tclean-paywall__nota { margin: 0; text-align: center; font-size: var(--tc-fs-13-5); color: var(--tc-text-soft); }

/* Card de plano: --destaque = o recomendado (borda + CTA cheio); __selo = "Mais escolhido" */
.tclean-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.tclean-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px 24px 24px;
  background: var(--tc-surface);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-card);
}
.tclean-plan-card--destaque {
  padding: 27px 23px 23px;
  border: 2px solid var(--tc-ink);
  box-shadow: var(--tc-shadow-panel);
}
.tclean-plan-card__selo {
  position: absolute;
  top: -14px;
  left: 24px;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--tc-radius-pill);
  background: var(--tc-yellow);
  color: var(--tc-text-strong);
  font-size: var(--tc-fs-12-5);
  font-weight: 600;
}
.tclean-plan-card__nome { margin: 0; font-size: var(--tc-fs-17); font-weight: 600; color: var(--tc-text-strong); }
.tclean-plan-card__desc { margin: 4px 0 0; font-size: var(--tc-fs-13-5); color: var(--tc-text-soft); }
.tclean-plan-card__preco { display: flex; align-items: baseline; gap: 4px; font-size: var(--tc-fs-14); color: var(--tc-text-soft); }
.tclean-plan-card__valor {
  font-size: var(--tc-fs-42);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--tc-text-strong);
}
/* Anual: o preço do ano e, embaixo, quanto dá por mês e a economia */
.tclean-plan-card__equivale { margin-top: -10px; font-size: var(--tc-fs-13); color: var(--tc-text-soft); }
.tclean-plan-card__equivale strong { font-weight: 600; color: var(--tc-success-ink); }
.tclean-plan-card__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: var(--tc-fs-14);
}
.tclean-plan-card__item { display: flex; align-items: flex-start; gap: 10px; color: var(--tc-text); }
.tclean-plan-card__item svg { flex-shrink: 0; margin-top: 1px; color: var(--tc-success-ink); }
.tclean-plan-card__item strong { font-weight: 600; }
.tclean-plan-card__item--off { color: var(--tc-text-soft); }
.tclean-plan-card__item--off svg { color: var(--tc-faint); }
.tclean-plan-card__reco {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--tc-radius-ctl);
  background: var(--tc-lavender);
  color: var(--tc-ink);
  font-size: var(--tc-fs-13);
  font-weight: 500;
}
.tclean-plan-card__cta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  border-radius: var(--tc-radius-ctl);
  border: 1px solid var(--tc-lilac-100);
  background: var(--tc-surface);
  color: var(--tc-ink);
  font-size: var(--tc-fs-15);
  font-weight: 600;
  text-decoration: none;
  transition: background-color .15s ease;
}
.tclean-plan-card__cta:hover { background: var(--tc-lavender); color: var(--tc-ink); }
.tclean-plan-card--destaque .tclean-plan-card__cta { background: var(--tc-ink); border-color: var(--tc-ink); color: var(--tc-white); }
.tclean-plan-card--destaque .tclean-plan-card__cta:hover { background: var(--tc-accent); border-color: var(--tc-accent); color: var(--tc-white); }
/* Modo "trocar plano": o CTA vira botão; plano atual e planos que não comportam as contas ficam desabilitados */
button.tclean-plan-card__cta { width: 100%; font-family: inherit; cursor: pointer; }
.tclean-plan-card .tclean-plan-card__cta:disabled { background: var(--tc-bg); border-color: var(--tc-border); color: var(--tc-text-soft); cursor: default; }
.tclean-plan-card .tclean-plan-card__cta.is-confirmar { background: var(--tc-ink); border-color: var(--tc-ink); color: var(--tc-white); }

/* Planos maiores em linha compacta (link inteiro clicável) */
.tclean-plan-mais {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 24px;
  background: var(--tc-surface);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-xl);
}
.tclean-plan-mais__titulo { font-size: var(--tc-fs-14); font-weight: 600; color: var(--tc-text-strong); }
.tclean-plan-mais__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tclean-plan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  color: var(--tc-text);
  text-decoration: none;
  transition: border-color .15s ease;
}
.tclean-plan-row:hover { border-color: var(--tc-accent); color: var(--tc-text); }
button.tclean-plan-row { width: 100%; background: var(--tc-surface); font-family: inherit; text-align: left; cursor: pointer; }
button.tclean-plan-row:disabled { cursor: default; opacity: .55; }
button.tclean-plan-row.is-confirmar { border-color: var(--tc-ink); background: var(--tc-lavender); }
.tclean-plan-row--destaque { padding: 13px 15px; border: 2px solid var(--tc-ink); background: var(--tc-lavender); }
.tclean-plan-row__nome { display: block; font-size: var(--tc-fs-15); font-weight: 600; color: var(--tc-text-strong); }
.tclean-plan-row__info { display: block; font-size: var(--tc-fs-13); color: var(--tc-text-soft); }
.tclean-plan-row__preco { font-size: var(--tc-fs-15); font-weight: 600; color: var(--tc-ink); white-space: nowrap; }
.tclean-plan-row__mes { font-size: var(--tc-fs-12-5); font-weight: 400; color: var(--tc-text-soft); }
.tclean-plan-row__selo {
  display: inline-flex;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: var(--tc-radius-pill);
  background: var(--tc-yellow);
  color: var(--tc-text-strong);
  font-size: var(--tc-fs-11);
  font-weight: 600;
  vertical-align: middle;
}

/* Garantias (ícone + título + texto) e perguntas frequentes */
.tclean-garantias { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tclean-garantias__item { display: flex; align-items: flex-start; gap: 12px; }
.tclean-garantias__icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--tc-radius-ctl);
  background: var(--tc-lavender);
  color: var(--tc-ink);
}
.tclean-garantias__titulo { font-size: var(--tc-fs-14); font-weight: 600; color: var(--tc-text-strong); }
.tclean-garantias__texto { font-size: var(--tc-fs-13); color: var(--tc-text-soft); }
.tclean-faq { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tclean-faq__item { padding: 16px 20px; background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-lg); }
.tclean-faq__pergunta { margin: 0 0 6px; font-size: var(--tc-fs-14); font-weight: 600; color: var(--tc-text-strong); }
.tclean-faq__resposta { margin: 0; font-size: var(--tc-fs-13-5); line-height: 1.5; color: var(--tc-text-soft); }

/* ---------- Checkout (pagamento.php) ----------
   Uma tela só: formulário (cartão, titular e endereço) + resumo do pedido fixo
   ao lado. Os campos usam .tclean-field (a página não tem .app-container, então o
   reskin do .form-control do tema não vale aqui). */
.tclean-checkout { width: 100%; max-width: 1080px; display: flex; flex-direction: column; gap: 24px; }
.tclean-checkout__head { display: flex; flex-direction: column; gap: 8px; }
.tclean-checkout__voltar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  font-size: var(--tc-fs-13-5);
  font-weight: 500;
  color: var(--tc-ink);
  text-decoration: none;
}
.tclean-checkout__voltar:hover { color: var(--tc-accent); }
.tclean-checkout__title { margin: 0; font-size: var(--tc-fs-32); font-weight: 500; letter-spacing: -0.03em; color: var(--tc-text-strong); }
.tclean-checkout__subtitle { margin: 0; font-size: var(--tc-fs-15); font-weight: 300; color: var(--tc-text-soft); }
.tclean-checkout__corpo { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; }
.tclean-checkout__form { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; margin: 0; }
.tclean-checkout__lado { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 24px; }
.tclean-checkout__secao {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: var(--tc-surface);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-card);
}
.tclean-checkout__secao--resumo { border-color: var(--tc-lavender-line); }
.tclean-checkout__secao-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.tclean-checkout__h2 { margin: 0; font-size: var(--tc-fs-17); font-weight: 600; color: var(--tc-text-strong); }
.tclean-checkout__bandeiras { display: flex; flex-wrap: wrap; gap: 6px; }
.tclean-checkout__bandeira {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-sm);
  font-size: var(--tc-fs-11-5);
  font-weight: 600;
  color: var(--tc-text-soft);
}
.tclean-checkout__bandeira.is-ativa { background: var(--tc-lavender); border-color: var(--tc-lavender-line); color: var(--tc-ink); }
.tclean-checkout__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tclean-checkout__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Campos curtos (validade + CVV) continuam lado a lado no celular */
.tclean-checkout__grid--fixo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tclean-checkout__endereco {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px dashed var(--tc-gray-300);
  border-radius: var(--tc-radius-ctl);
  background: var(--tc-bg);
  font-size: var(--tc-fs-13-5);
  color: var(--tc-text);
}
.tclean-checkout__endereco svg { flex-shrink: 0; color: var(--tc-success-ink); }
.tclean-checkout__endereco .tclean-checkout__link { margin-left: auto; }
/* Ação secundária em texto (botão sem moldura): "Editar" endereço, "Tem um cupom?" */
.tclean-checkout__link {
  width: fit-content;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--tc-fs-13-5);
  font-weight: 500;
  color: var(--tc-ink);
  white-space: nowrap;
  cursor: pointer;
}
.tclean-checkout__check { display: flex; align-items: flex-start; gap: 10px; font-size: var(--tc-fs-13-5); color: var(--tc-text); cursor: pointer; }
.tclean-checkout__check input { width: 18px; height: 18px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--tc-ink); }
.tclean-checkout__check-ajuda { display: block; margin-top: 2px; font-size: var(--tc-fs-13); color: var(--tc-text-soft); }
.tclean-checkout__enviar { display: flex; flex-direction: column; gap: 10px; }
.tclean-checkout__enviar .tclean-auth-cta { display: flex; align-items: center; justify-content: center; gap: 10px; }
.tclean-checkout__microcopy { margin: 0; text-align: center; font-size: var(--tc-fs-13); color: var(--tc-text-soft); }
/* Plano anual: escolha Cartão | Pix (.tclean-segmented largo, no topo do formulário) */
.tclean-segmented.tclean-checkout__metodo { display: flex; width: 100%; padding: 4px; }
.tclean-checkout__metodo .tclean-segmented__item {
  flex: 1;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: var(--tc-fs-14);
  font-weight: 600;
}

/* Pix (plano anual): QR code + "copia e cola" + prazo + situação do pagamento.
   Montado por pagamento.js; copiar e contagem do prazo em functions.js (pixCopiar, pixPrazo). */
.tclean-pix { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.tclean-pix__qr {
  width: 232px;
  height: 232px;
  padding: 12px;
  box-sizing: border-box;
  background: var(--tc-white);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
}
.tclean-pix__qr img { display: block; width: 100%; height: 100%; }
.tclean-pix__valor { font-size: var(--tc-fs-24); font-weight: 600; letter-spacing: -0.02em; color: var(--tc-text-strong); }
.tclean-pix__copia { display: flex; gap: 8px; width: 100%; max-width: 520px; }
.tclean-pix__copia .tclean-field__input { height: 42px; font-size: var(--tc-fs-13); text-overflow: ellipsis; }
.tclean-pix__copia .tclean-btn { height: 42px; flex-shrink: 0; font-weight: 600; }
.tclean-pix__prazo { font-size: var(--tc-fs-13-5); color: var(--tc-text-soft); }
.tclean-pix__prazo strong { font-family: var(--tc-mono); font-weight: 600; color: var(--tc-text); }
.tclean-pix__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--tc-radius-pill);
  background: var(--tc-lavender);
  color: var(--tc-ink);
  font-size: var(--tc-fs-13);
  font-weight: 500;
}
.tclean-pix__status--ok { background: var(--tc-success-bg); color: var(--tc-success-ink); }
.tclean-pix__status--erro { background: var(--tc-danger-bg); color: var(--tc-danger-ink); }
.tclean-pix__passos { margin: 0; padding-left: 18px; max-width: 520px; text-align: left; font-size: var(--tc-fs-13-5); line-height: 1.5; color: var(--tc-text-soft); }
.tclean-pix--expirado .tclean-pix__qr { opacity: .35; }
.tclean-checkout__plano { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tclean-checkout__plano-label { font-size: var(--tc-fs-12-5); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tc-muted); }
.tclean-checkout__plano-nome { margin-top: 4px; font-size: var(--tc-fs-22); font-weight: 600; color: var(--tc-text-strong); }
.tclean-checkout__trocar { font-size: var(--tc-fs-13-5); font-weight: 500; color: var(--tc-ink); text-decoration: none; }
.tclean-checkout__cupom { display: flex; gap: 8px; }
.tclean-checkout__cupom .tclean-field__input { height: 40px; text-transform: uppercase; }
.tclean-checkout__cupom .tclean-btn { height: 40px; font-weight: 600; }
.tclean-checkout__cupom-msg { margin: 0; font-size: var(--tc-fs-13); }
.tclean-checkout__cupom-msg--ok { color: var(--tc-success-ink); }
.tclean-checkout__cupom-msg--erro { color: var(--tc-danger-ink); }
.tclean-checkout__linhas { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--tc-border); font-size: var(--tc-fs-14); }
.tclean-checkout__linha { display: flex; justify-content: space-between; gap: 12px; }
.tclean-checkout__linha > span:first-child { color: var(--tc-text-soft); }
.tclean-checkout__linha > span:last-child { font-variant-numeric: tabular-nums; }
.tclean-checkout__linha--total { align-items: baseline; padding-top: 12px; border-top: 1px solid var(--tc-border); }
.tclean-checkout__linha--total > span:first-child { font-weight: 600; color: var(--tc-text-strong); }
.tclean-checkout__linha--total > span:last-child { font-size: var(--tc-fs-24); font-weight: 600; letter-spacing: -0.02em; color: var(--tc-text-strong); }
.tclean-checkout__proxima { font-size: var(--tc-fs-13); color: var(--tc-text-soft); }
.tclean-checkout__confianca { display: flex; flex-direction: column; gap: 12px; padding: 4px 8px; }
.tclean-checkout__confianca-item { display: flex; align-items: center; gap: 10px; font-size: var(--tc-fs-13-5); color: var(--tc-text); text-decoration: none; }
.tclean-checkout__confianca-item svg { flex-shrink: 0; color: var(--tc-ink); }
a.tclean-checkout__confianca-item { font-weight: 500; color: var(--tc-ink); }

/* Campo de formulário fora do .app-container (label + input + erro do jquery-validate) */
.tclean-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tclean-field__label { font-size: var(--tc-fs-13); font-weight: 500; color: var(--tc-text); }
.tclean-field__opcional { font-weight: 400; color: var(--tc-text-soft); }
.tclean-field__wrap { position: relative; }
.tclean-field__input {
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--tc-gray-300);
  border-radius: var(--tc-radius-ctl);
  background: var(--tc-surface);
  color: var(--tc-text);
  font-family: inherit;
  font-size: var(--tc-fs-15);
}
.tclean-field__input:focus { outline: none; border-color: var(--tc-accent); box-shadow: var(--tc-shadow-focus); }
.tclean-field__input:disabled { background: var(--tc-bg); color: var(--tc-text-soft); }
.tclean-field__input--mono { font-family: var(--tc-mono); }
.tclean-field__input.is-invalid { border-color: var(--tc-danger); }
.tclean-field__wrap .tclean-field__input { padding-right: 104px; }
.tclean-field__adorno { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); }
.tclean-field__erro { font-size: var(--tc-fs-12-5); color: var(--tc-danger-ink); }

@media (max-width: 900px) {
  .tclean-plan-grid,
  .tclean-plan-mais__grid,
  .tclean-faq { grid-template-columns: minmax(0, 1fr); }
  .tclean-garantias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tclean-paywall__title { font-size: var(--tc-fs-32); }
  .tclean-checkout__lado { position: static; }
}
@media (max-width: 560px) {
  .tclean-garantias,
  .tclean-checkout__grid:not(.tclean-checkout__grid--fixo) { grid-template-columns: minmax(0, 1fr); }
  .tclean-paywall__kpis { gap: 24px; }
}

/* ==========================================================================
   CSS próprio de telas e componentes (antes em blocos <style> nas páginas).
   Cada bloco é escopado pela classe raiz da tela (no <body>) ou pelo
   container exclusivo do componente; :where() mantém a especificidade que
   o <style> original tinha.
   ========================================================================== */

/* ---------- Header / atualização automática (componentes/nav_sup.php) ---------- */
@keyframes tcNavSupSpinSlow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
#autoRefreshIcon.spin-slow {
  display: inline-block;
  animation: tcNavSupSpinSlow 15s linear infinite;
}
@keyframes tcNavSupSpinFast {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
#autoRefreshIcon.spin-fast {
  display: inline-block;
  animation: tcNavSupSpinFast 0.8s linear infinite;
}

/* ---------- Dashboard / popover de status de pedidos (home.php) ---------- */
.popover-pedidos-status {
  max-width: 580px !important;
  border-radius: var(--tc-radius-ctl-sm);
  border: 1px solid var(--tc-border);
  box-shadow: var(--tc-shadow-popover) !important;
  z-index: 1060;
}
.popover-pedidos-status .popover-body {
  padding: 0.5rem;
}
.info-pedidos-icon {
  transition: transform 0.15s ease, opacity 0.15s ease;
  cursor: pointer;
}
.info-pedidos-icon:hover {
  transform: scale(1.2);
  opacity: 0.85;
}

/* ---------- Campanhas (campanhas.php) ---------- */
.tclean-page-campanhas .id {
  cursor: pointer;
}

/* ---------- Margem de contribuição (contribuicao.php) ---------- */
.tclean-page-contribuicao .widget-numbers { font-size: var(--tc-fs-18) !important; }

/* ---------- Lucro e prejuízo (lucro_prejuizo.php) ---------- */
.tclean-page-lucro-prejuizo .widget-numbers { font-size: var(--tc-fs-18) !important; }

/* ---------- Promoções (promocoes.php) ---------- */
/* No original o <style> vinha antes do base.css, então as utilidades .fsize-* do tema
   ganhavam dele; o :not() preserva isso. */
.tclean-page-promocoes .widget-numbers:not([class*="fsize-"]) { font-size: var(--tc-fs-18) !important; }

/* ---------- Perguntas (questions.php) ---------- */
.tclean-page-questions .widget-numbers { font-size: var(--tc-fs-18) !important; }

/* ---------- ChatGPT e Claude (aplicativos.php) ----------
   Só o que é da tela: o resto vem de .tclean-marketplace-grid--3, .tclean-passos e .tclean-campo-copiar. */
:where(.tclean-page-aplicativos) .tclean-card + .tclean-card { margin-top: 16px; }
:where(.tclean-page-aplicativos) .tclean-card__body { padding: 20px 24px; }
:where(.tclean-page-aplicativos) .tclean-card__sub { margin: 2px 0 0; font-size: var(--tc-fs-13); color: var(--tc-muted); }
:where(.tclean-page-aplicativos) .tclean-apps-config { width: 100%; min-height: 200px; font-family: var(--tc-mono); font-size: var(--tc-fs-12-5); color: var(--tc-text); background: var(--tc-bg); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-ctl); padding: 12px; resize: vertical; }
:where(.tclean-page-aplicativos) .tclean-apps-dev { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 767px) {
  :where(.tclean-page-aplicativos) .tclean-apps-dev { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Pesquisa interna / Top produtos (internal_search.php) ---------- */
.products-grid-container {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, 275px) !important;
  gap: 12px !important;
  justify-content: start !important;
  align-items: start !important;
  width: 100% !important;
}
.product-card-item {
  width: 275px !important;
  min-width: 275px !important;
  max-width: 275px !important;
  box-sizing: border-box !important;
  background: var(--tc-surface);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-ctl-sm);
  padding: 11px;
  font-size: var(--tc-fs-13);
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.product-card-item:hover {
  border-color: var(--tc-ink);
  box-shadow: var(--tc-shadow-card-hover);
}

/* Modal Detalhes do Produto */
#modal_produto_detalhes .modal-dialog {
  width: 95% !important;
  max-width: 1350px !important;
  height: calc(100vh - 3.5rem) !important;
  margin: 1.75rem auto !important;
  box-shadow: none !important; /* Desliga a sombra padrão do tema no .modal-dialog que criava uma caixa escura abaixo */
}
#modal_produto_detalhes .modal-content {
  height: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--tc-surface);
  border-radius: var(--tc-radius-lg);
  border: 1px solid var(--tc-border);
  box-shadow: var(--tc-shadow-modal) !important;
  overflow: hidden;
}
#modal_produto_detalhes .modal-header {
  background: var(--tc-bg);
  border-bottom: 1px solid var(--tc-gray-100);
  flex-shrink: 0;
}
#modal_produto_detalhes .modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  position: relative;
}
#modal_product_loading {
  flex: 1 1 auto;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#modal_product_body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}
#modal_produto_detalhes .nav-tabs {
  background: var(--tc-bg);
  border-bottom: 1px solid var(--tc-border);
  padding: 8px 16px 0 16px;
  margin: 0;
  gap: 4px;
  flex-shrink: 0;
}
#modal_produto_detalhes .nav-tabs .nav-link {
  font-size: var(--tc-fs-12);
  font-weight: 600;
  color: var(--tc-muted);
  border: 1px solid transparent;
  border-top-left-radius: var(--tc-radius-sm);
  border-top-right-radius: var(--tc-radius-sm);
  padding: 8px 14px;
  transition: all 0.15s ease;
  cursor: pointer;
}
#modal_produto_detalhes .nav-tabs .nav-link:hover {
  color: var(--tc-ink);
  background: var(--tc-lavender);
}
#modal_produto_detalhes .nav-tabs .nav-link.active {
  color: var(--tc-ink) !important;
  background: var(--tc-surface) !important;
  border-color: var(--tc-border) var(--tc-border) var(--tc-surface) !important;
  font-weight: 700;
}
#modal_produto_detalhes .tab-content {
  padding: 16px;
  background: var(--tc-surface);
  flex: 1 1 auto;
  overflow-y: auto;
}
#modal_produto_detalhes .tab-content > .tab-pane {
  display: none !important;
}
#modal_produto_detalhes .tab-content > .tab-pane.active {
  display: block !important;
}

/* ---------- Chat IA (chat.php e componentes/chat.php) ---------- */
/* As duas telas tinham o mesmo <style>; agora compartilham a classe raiz .tclean-chat-ia
   (no div .app-inner-layout.chat-layout). :where() mantém a especificidade original. */
:where(.tclean-chat-ia) .chat-box img {
    max-width: 60px;
    max-height: 60px;
    width: auto;
    height: auto;
    object-fit: cover;
    border-radius: var(--tc-radius-sm);
    border: 1px solid var(--tc-border);
    margin: 4px 6px 4px 0;
    vertical-align: middle;
    display: inline-block;
    box-shadow: var(--tc-shadow-xs);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}
:where(.tclean-chat-ia) .chat-box img:hover {
    transform: scale(2.2);
    box-shadow: var(--tc-shadow-card-hover);
    z-index: 20;
    position: relative;
}
:where(.tclean-chat-ia) #inputmessage {
    resize: none;
    min-height: 48px;
    max-height: 160px;
    line-height: 1.4;
    overflow-y: auto;
    font-family: inherit;
    field-sizing: content;
}
:where(.tclean-chat-ia) .app-inner-layout__bottom-pane .input-group {
    align-items: flex-end;
}

/* ---------- Drawer de anúncio (componentes/anuncio_drawer.php) ---------- */
.app-drawer-wrapper-anuncio .anuncio-drawer-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}
.app-drawer-wrapper-anuncio .anuncio-drawer-header {
    flex: 0 0 auto;
    padding: 0.65rem 1.1rem 0.55rem;
    background: var(--tc-surface);
    border-bottom: 1px solid var(--tc-border);
    z-index: 5;
}
.app-drawer-wrapper-anuncio .anuncio-drawer-product {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    margin-bottom: 0.45rem;
    padding-right: 2.4rem;
}
.app-drawer-wrapper-anuncio .anuncio-drawer-product-main {
    min-width: 0;
    flex: 1;
}
.app-drawer-wrapper-anuncio .anuncio-drawer-product-main .avatar-icon-wrapper,
.app-drawer-wrapper-anuncio .anuncio-drawer-product-main .avatar-icon {
    width: 40px !important;
    height: 40px !important;
}
.app-drawer-wrapper-anuncio .anuncio-drawer-product-main .widget-heading {
    font-size: var(--tc-fs-14-5);
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.app-drawer-wrapper-anuncio .anuncio-drawer-product-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}
.app-drawer-wrapper-anuncio .anuncio-drawer-product-actions .btn {
    margin: 0 !important;
}
.app-drawer-wrapper-anuncio .anuncio-drawer-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.app-drawer-wrapper-anuncio .anuncio-drawer-kicker {
    font-size: var(--tc-fs-12);
    font-weight: 600;
    color: var(--tc-muted);
    min-width: 0;
}
.app-drawer-wrapper-anuncio .anuncio-drawer-kicker #titulo_drawer {
    color: var(--tc-text);
}
.app-drawer-wrapper-anuncio .anuncio-drawer-modes {
    display: inline-flex;
    gap: 0.15rem;
    padding: 0.15rem;
    background: var(--tc-gray-100);
    border-radius: var(--tc-radius-pill);
    flex-shrink: 0;
}
.app-drawer-wrapper-anuncio .anuncio-drawer-mode-btn {
    border: 0;
    background: transparent;
    color: var(--tc-muted);
    font-size: var(--tc-fs-12-5);
    font-weight: 600;
    padding: 0.28rem 0.75rem;
    border-radius: var(--tc-radius-pill);
    line-height: 1.2;
}
.app-drawer-wrapper-anuncio .anuncio-drawer-mode-btn.active {
    background: var(--tc-surface);
    color: var(--tc-text);
    box-shadow: var(--tc-shadow-xs);
}
.app-drawer-wrapper-anuncio .anuncio-drawer-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    height: auto !important;
}
.app-drawer-wrapper-anuncio .anuncio-drawer-scroll .drawer-section {
    padding: 0.75rem 1.1rem 1.25rem;
}
.app-drawer-wrapper-anuncio .anuncio-period-bar {
    margin-bottom: 0.75rem;
}
.app-drawer-wrapper-anuncio .anuncio-performance-card #ads,
.app-drawer-wrapper-anuncio .anuncio-performance-card #vendas_custo_ads {
    min-height: 220px;
}
.app-drawer-wrapper-anuncio .anuncio-quality-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-ctl-sm);
    background: var(--tc-surface);
    padding: 0.55rem 0.7rem;
    margin-bottom: 0.65rem;
}
.app-drawer-wrapper-anuncio .anuncio-quality-score {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 0.75rem;
    border-right: 1px solid var(--tc-border);
    min-width: 96px;
    flex-shrink: 0;
}
.app-drawer-wrapper-anuncio .anuncio-quality-score-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    margin-bottom: 0.1rem;
}
.app-drawer-wrapper-anuncio .anuncio-quality-label {
    font-size: var(--tc-fs-11);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tc-muted);
    font-weight: 700;
}
.app-drawer-wrapper-anuncio .anuncio-quality-status {
    font-size: var(--tc-fs-11);
    font-weight: 700;
    padding: 0.08rem 0.35rem;
    border-radius: var(--tc-radius-pill);
    line-height: 1.2;
    background: var(--tc-gray-100);
    color: var(--tc-text);
}
.app-drawer-wrapper-anuncio .anuncio-quality-score-value {
    font-size: var(--tc-fs-22);
    font-weight: 700;
    color: var(--tc-text);
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.app-drawer-wrapper-anuncio .anuncio-quality-score-bar .progress,
.app-drawer-wrapper-anuncio .anuncio-quality-chip .progress {
    height: 4px;
    margin: 0.3rem 0 0;
    background: var(--tc-track);
    border-radius: var(--tc-radius-pill);
    overflow: hidden;
}
.app-drawer-wrapper-anuncio .anuncio-quality-score-bar .progress-bar {
    border-radius: var(--tc-radius-pill);
}
.app-drawer-wrapper-anuncio .anuncio-quality-card[data-quality-level="low"] .anuncio-quality-status {
    background: var(--tc-danger-bg);
    color: var(--tc-danger-ink);
}
.app-drawer-wrapper-anuncio .anuncio-quality-card[data-quality-level="low"] #barra_geral {
    background-color: var(--tc-danger) !important;
}
.app-drawer-wrapper-anuncio .anuncio-quality-card[data-quality-level="mid"] .anuncio-quality-status {
    background: var(--tc-yellow-bg);
    color: var(--tc-warning-strong);
}
.app-drawer-wrapper-anuncio .anuncio-quality-card[data-quality-level="mid"] #barra_geral {
    background-color: var(--tc-yellow) !important;
}
.app-drawer-wrapper-anuncio .anuncio-quality-card[data-quality-level="high"] .anuncio-quality-status {
    background: var(--tc-success-bg);
    color: var(--tc-success-ink);
}
.app-drawer-wrapper-anuncio .anuncio-quality-card[data-quality-level="high"] #barra_geral {
    background-color: var(--tc-success) !important;
}
.app-drawer-wrapper-anuncio .anuncio-quality-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    min-width: 0;
    flex: 1;
}
.app-drawer-wrapper-anuncio .anuncio-quality-chip {
    flex: 1 1 110px;
    max-width: 160px;
    min-width: 100px;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-ctl-sm);
    background: var(--tc-bg);
}
.app-drawer-wrapper-anuncio .anuncio-quality-chip-label {
    display: block;
    font-size: var(--tc-fs-11);
    color: var(--tc-muted);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-drawer-wrapper-anuncio .anuncio-quality-chip-value {
    display: block;
    margin-top: 0.1rem;
    font-size: var(--tc-fs-14);
    color: var(--tc-text);
    line-height: 1.2;
}
.app-drawer-wrapper-anuncio .anuncio-drawer-abas {
    position: relative;
}
.app-drawer-wrapper-anuncio .anuncio-drawer-tabs {
    position: sticky;
    top: 0;
    z-index: 4;
    background: var(--tc-surface);
    padding: 0 0 0.15rem;
    margin-bottom: 0.55rem !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    border-bottom: 1px solid var(--tc-border);
}
.app-drawer-wrapper-anuncio .anuncio-drawer-tabs .nav-item {
    margin: 0;
}
.app-drawer-wrapper-anuncio .anuncio-drawer-tabs .nav-link {
    white-space: nowrap;
    padding: 0.45rem 0.7rem !important;
    font-size: var(--tc-fs-13-5);
}
.app-drawer-wrapper-anuncio .anuncio-desc-panel {
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-ctl-sm);
    background: var(--tc-surface);
    overflow: hidden;
}
.app-drawer-wrapper-anuncio .anuncio-desc-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid var(--tc-border);
    background: var(--tc-bg);
}
.app-drawer-wrapper-anuncio .anuncio-desc-col-labels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    flex: 1;
    min-width: 0;
    font-size: var(--tc-fs-11);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tc-muted);
}
.app-drawer-wrapper-anuncio .anuncio-desc-col-labels span:last-child {
    padding-left: 0.85rem;
}
.app-drawer-wrapper-anuncio .anuncio-desc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    min-height: 240px;
}
.app-drawer-wrapper-anuncio .anuncio-desc-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0.7rem 0.85rem;
}
.app-drawer-wrapper-anuncio .anuncio-desc-col + .anuncio-desc-col {
    border-left: 1px solid var(--tc-border);
    background: var(--tc-bg);
}
.app-drawer-wrapper-anuncio .anuncio-desc-current {
    flex: 1;
    font-size: var(--tc-fs-14);
    line-height: 1.5;
    color: var(--tc-text);
    white-space: pre-wrap;
    overflow-y: auto;
    overflow-x: hidden;
    height: 240px;
    max-height: 240px;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-sm);
    background: var(--tc-surface);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.app-drawer-wrapper-anuncio .anuncio-description-ai,
.app-drawer-wrapper-anuncio .anuncio-description-ai-skt {
    flex: 1;
    min-height: 240px;
    height: 240px !important;
    max-height: 240px;
    resize: vertical;
    font-size: var(--tc-fs-14);
    line-height: 1.5;
    border-color: var(--tc-border);
    background: var(--tc-surface);
    overscroll-behavior: contain;
}
.app-drawer-wrapper-anuncio .anuncio-desc-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    border-top: 1px solid var(--tc-border);
    background: var(--tc-surface);
}
@media (max-width: 991.98px) {
    .app-drawer-wrapper-anuncio .anuncio-drawer-product {
        flex-direction: column;
        align-items: flex-start;
        padding-right: 2.4rem;
    }
    .app-drawer-wrapper-anuncio .anuncio-drawer-product-actions {
        width: 100%;
        justify-content: flex-start;
    }
    .app-drawer-wrapper-anuncio .anuncio-quality-card {
        flex-direction: column;
        align-items: stretch;
    }
    .app-drawer-wrapper-anuncio .anuncio-quality-score {
        border-right: 0;
        border-bottom: 1px solid var(--tc-border);
        padding-right: 0;
        padding-bottom: 0.5rem;
        min-width: 0;
    }
    .app-drawer-wrapper-anuncio .anuncio-quality-chip {
        max-width: none;
    }
    .app-drawer-wrapper-anuncio .anuncio-desc-col-labels {
        display: none;
    }
    .app-drawer-wrapper-anuncio .anuncio-desc-grid {
        grid-template-columns: 1fr;
    }
    .app-drawer-wrapper-anuncio .anuncio-desc-col + .anuncio-desc-col {
        border-left: 0;
        border-top: 1px solid var(--tc-border);
    }
}

/* Tooltip/popover acima do drawer: as regras `.tooltip, .popover, body > .tooltip,
   body > .popover { z-index: 105000 !important }` e `.tooltip .tooltip-inner
   { max-width: 360px !important; text-align: left }` já existem idênticas no tema
   global do emori-tables.css, então não são repetidas aqui. */

/* ---------- Modal de clonar anúncio entre marketplaces (componentes/clone_modal.php + componentes/js/clone.js) ----------
   Um modal só para qualquer destino (prévia → editar → confirmar → publicar), aberto pela tabela de
   Anúncios e pelo drawer. Corpo rolável; cabeçalho e rodapé (confirmação + botões) sempre visíveis.
   No celular vira painel de baixo pra cima (.tclean-sheet). */
#modal_clone {
    z-index: 10050;
}
/* backdrop abaixo do modal de clone e acima do drawer — só nas telas que incluem o drawer
   (:where mantém a especificidade original de body.modal-open > .modal-backdrop) */
body.modal-open:where(:has(.app-drawer-wrapper-anuncio)) > .modal-backdrop {
    z-index: 10040;
}
#modal_clone .modal-dialog { max-height: calc(100vh - 2rem); margin: 1rem auto; }
.tclean-clone { display: flex; flex-direction: column; max-height: calc(100vh - 2rem); overflow: hidden; }
.tclean-clone .modal-header { flex-shrink: 0; align-items: flex-start; }
.tclean-clone__origem { margin: 4px 0 0; font-size: var(--tc-fs-13); color: var(--tc-muted); }
.tclean-clone__id { font-family: var(--tc-mono); font-size: var(--tc-fs-12-5); }
.tclean-clone__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding: 20px 24px; -webkit-overflow-scrolling: touch; }
.tclean-clone__body .tclean-alert { margin-top: 0; }
.tclean-clone__carregando { display: flex; flex-direction: column; gap: 12px; }
.tclean-clone__carregando-texto { margin: 0; font-size: var(--tc-fs-13-5); color: var(--tc-muted); }
.tclean-clone__form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.tclean-clone__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.tclean-clone__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tclean-clone__rotulo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tclean-clone__contador { font-size: var(--tc-fs-12-5); font-weight: 400; color: var(--tc-muted); font-variant-numeric: tabular-nums; }
.tclean-clone__contador.is-excedido { color: var(--tc-danger-ink); }
.tclean-clone__ajuda { font-size: var(--tc-fs-12-5); color: var(--tc-muted); }
.tclean-clone .tclean-field__input { height: 40px; font-size: var(--tc-fs-14); }
.tclean-clone textarea.tclean-field__input { height: auto; min-height: 104px; padding: 10px 14px; resize: vertical; line-height: 1.45; }
.tclean-clone .tclean-field__input[readonly] { background: var(--tc-bg); color: var(--tc-text-soft); }
.tclean-clone__secao { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border: 1px solid var(--tc-border); border-radius: var(--tc-radius-ctl); background: var(--tc-bg); }
.tclean-clone__secao-titulo { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--tc-fs-14); font-weight: 600; color: var(--tc-ink); }
.tclean-clone__secao-titulo i { font-size: var(--tc-fs-13); color: var(--tc-muted); }
.tclean-clone__avancado > summary { cursor: pointer; font-size: var(--tc-fs-13); font-weight: 500; color: var(--tc-ink); }
.tclean-clone__avancado[open] > summary { margin-bottom: 12px; }
.tclean-clone__fotos { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.tclean-clone__foto { width: 56px; height: 56px; flex-shrink: 0; object-fit: cover; border: 1px solid var(--tc-border); border-radius: var(--tc-radius-ctl-sm); background: var(--tc-surface); }
.tclean-clone__variacoes { max-height: 240px; overflow: auto; }
.tclean-clone__celula-input { box-sizing: border-box; width: 100%; min-width: 64px; height: 32px; padding: 0 8px; border: 1px solid var(--tc-gray-300); border-radius: var(--tc-radius-sm); background: var(--tc-surface); color: var(--tc-text); font-family: inherit; font-size: var(--tc-fs-13); }
.tclean-clone__celula-input:focus { outline: none; border-color: var(--tc-accent); box-shadow: var(--tc-shadow-focus); }
.tclean-clone__celula-input.is-invalid { border-color: var(--tc-danger); }
.tclean-clone__check { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: var(--tc-fs-13-5); color: var(--tc-text); cursor: pointer; }
.tclean-clone__check input { width: 18px; height: 18px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--tc-ink); }
.tclean-clone__footer { flex-shrink: 0; display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 16px 24px 20px; border-top: 1px solid var(--tc-border); background: var(--tc-surface); }
.tclean-clone__botoes { display: flex; justify-content: flex-end; gap: 10px; }
@media (max-width: 767.98px) {
    .tclean-clone__grid, .tclean-clone__grid--3 { grid-template-columns: minmax(0, 1fr); }
    .modal.tclean-sheet .tclean-clone { max-height: 88vh; }
    .modal.tclean-sheet .tclean-clone__body { padding: 4px 18px 18px !important; }
    .tclean-clone__footer { padding: 12px 18px 16px; }
}

/* ---------- Agente de Promoções: FAB + drawer de chat (componentes/promotions_chat_drawer.php) ---------- */
/* Classes promo-chat-*, promo-msg*, promo-bubble, promo-typing-*, promo-ai-fab e btn-promo-batch só
   existem neste componente (+ js/promotions_chat.js). .btn-promo-action também é usada em resume.php,
   por isso vai escopada com :where(#promo_chat_drawer, #modal_promo_oportunidades) — :where() não soma
   especificidade, então a cascata continua igual à do <style> original. */

/* Botão Flutuante IA Promoções */
.promo-ai-fab {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 9990;
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--tc-accent) 0%, var(--tc-ink) 100%);
    color: var(--tc-white);
    border: none;
    border-radius: var(--tc-radius-pill);
    padding: 12px 22px;
    box-shadow: var(--tc-shadow-card-hover);
    cursor: pointer;
    font-size: var(--tc-fs-14-5);
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.promo-ai-fab:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--tc-shadow-modal);
    color: var(--tc-white);
}
.promo-ai-fab .pulse-badge {
    width: 10px;
    height: 10px;
    background-color: var(--tc-success);
    border-radius: 50%;
    box-shadow: 0 0 0 var(--tc-pulse-success);
    animation: promoPulse 2s infinite;
}
@keyframes promoPulse {
    0% { box-shadow: 0 0 0 0 var(--tc-pulse-success); }
    70% { box-shadow: 0 0 0 8px var(--tc-pulse-success-end); }
    100% { box-shadow: 0 0 0 0 var(--tc-pulse-success-end); }
}

/* Slide Drawer Direito para Chat de Promoções */
.promo-chat-drawer {
    position: fixed;
    top: 0;
    right: -820px;
    width: 780px;
    max-width: 98vw;
    height: 100%;
    background: var(--tc-surface);
    z-index: 10000;
    box-shadow: var(--tc-shadow-drawer);
    transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}
.promo-chat-drawer.open {
    right: 0;
}
.promo-chat-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--tc-overlay-strong);
    backdrop-filter: blur(2px);
    z-index: 9995;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.promo-chat-overlay.open {
    display: block;
    opacity: 1;
}

/* Header do Drawer */
.promo-chat-header {
    background: linear-gradient(135deg, var(--tc-backdrop) 0%, var(--tc-ink) 100%);
    color: var(--tc-white);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--tc-shadow-xs);
}
.promo-chat-header-title {
    display: flex;
    align-items: center;
    gap: 12px;
}
.promo-chat-header-title h5 {
    margin: 0;
    font-size: var(--tc-fs-17);
    font-weight: 700;
    color: var(--tc-white);
    letter-spacing: 0.2px;
}
.promo-chat-header-title small {
    color: var(--tc-white-a80);
    font-size: var(--tc-fs-12);
}
.promo-chat-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--tc-white-a15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--tc-fs-18);
    border: 2px solid var(--tc-white-a25);
}

/* Área de Mensagens */
.promo-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: var(--tc-bg);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Estilo dos Balões */
.promo-msg {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    animation: promoFadeInMsg 0.25s ease forwards;
}
@keyframes promoFadeInMsg {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.promo-msg-user {
    align-self: flex-end;
}
.promo-msg-agent {
    align-self: flex-start;
    width: 100%;
}
.promo-bubble {
    padding: 12px 16px;
    border-radius: var(--tc-radius-lg);
    font-size: var(--tc-fs-14-5);
    line-height: 1.5;
    word-break: break-word;
}
.promo-msg-user .promo-bubble {
    background: var(--tc-ink);
    color: var(--tc-white);
    border-bottom-right-radius: var(--tc-radius-xs);
    box-shadow: var(--tc-shadow-xs);
    max-width: 85%;
    margin-left: auto;
}
.promo-msg-agent .promo-bubble {
    background: var(--tc-surface);
    color: var(--tc-text);
    border-bottom-left-radius: var(--tc-radius-xs);
    border: 1px solid var(--tc-border);
    box-shadow: var(--tc-shadow-raised);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}
.promo-msg-time {
    font-size: var(--tc-fs-11-5);
    color: var(--tc-faint);
    margin-top: 4px;
}
.promo-msg-user .promo-msg-time {
    text-align: right;
}

/* Formatação de Tabelas e Conteúdo Markdown */
.promo-table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin: 12px 0;
    border-radius: var(--tc-radius-ctl-sm);
    border: 1px solid var(--tc-border);
    box-shadow: var(--tc-shadow-raised);
    box-sizing: border-box;
    display: block;
}
.promo-bubble table {
    width: 100%;
    min-width: 580px;
    border-collapse: collapse;
    margin: 0;
    font-size: var(--tc-fs-12-5);
    background: var(--tc-surface);
}
.promo-bubble th, .promo-bubble td {
    padding: 7px 10px;
    border: 1px solid var(--tc-border);
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}
.promo-bubble th {
    background: var(--tc-bg);
    font-weight: 700;
    color: var(--tc-text);
    font-size: var(--tc-fs-12);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    position: sticky;
    top: 0;
    z-index: 1;
}
.promo-bubble td.col-title, .promo-bubble th.col-title {
    white-space: normal;
    min-width: 150px;
    max-width: 220px;
    word-break: break-word;
}
.promo-bubble tr:nth-child(even) {
    background-color: var(--tc-bg);
}
.promo-bubble tr:hover {
    background-color: var(--tc-gray-100);
}
.promo-bubble ul, .promo-bubble ol {
    margin: 6px 0;
    padding-left: 20px;
}
.promo-bubble code {
    background: var(--tc-gray-100);
    padding: 2px 5px;
    border-radius: var(--tc-radius-xs);
    font-size: 0.85em;
    color: var(--tc-danger);
}
.promo-bubble img {
    max-width: 60px;
    max-height: 60px;
    width: auto;
    height: auto;
    object-fit: cover;
    border-radius: var(--tc-radius-sm);
    border: 1px solid var(--tc-border);
    margin: 4px 6px 4px 0;
    vertical-align: middle;
    display: inline-block;
    box-shadow: var(--tc-shadow-xs);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}
.promo-bubble img:hover {
    transform: scale(2.2);
    box-shadow: var(--tc-shadow-card-hover);
    z-index: 20;
    position: relative;
}

/* Ações de Confirmação Rápida (HITL) e Botões de Ação na Tabela */
.promo-hitl-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}
:where(#promo_chat_drawer, #modal_promo_oportunidades) .btn-promo-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: var(--tc-fs-12);
    font-weight: 600;
    border-radius: var(--tc-radius-sm);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    text-decoration: none !important;
}
:where(#promo_chat_drawer, #modal_promo_oportunidades) .btn-promo-action.btn-enter {
    background: var(--tc-success-ink);
    color: var(--tc-white) !important;
}
:where(#promo_chat_drawer, #modal_promo_oportunidades) .btn-promo-action.btn-enter:hover {
    background: var(--tc-success-ink);
    transform: scale(1.03);
}
:where(#promo_chat_drawer, #modal_promo_oportunidades) .btn-promo-action.btn-exit {
    background: var(--tc-danger);
    color: var(--tc-white) !important;
}
:where(#promo_chat_drawer, #modal_promo_oportunidades) .btn-promo-action.btn-exit:hover {
    background: var(--tc-danger-ink);
    transform: scale(1.03);
}
:where(#promo_chat_drawer, #modal_promo_oportunidades) .btn-promo-action:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}
.btn-promo-batch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: var(--tc-fs-13);
    font-weight: 600;
    border-radius: var(--tc-radius-ctl-sm);
    background: linear-gradient(135deg, var(--tc-accent) 0%, var(--tc-ink) 100%);
    color: var(--tc-white) !important;
    border: none;
    cursor: pointer;
    box-shadow: var(--tc-shadow-xs);
    transition: all 0.2s ease;
    text-decoration: none !important;
    margin: 8px 0;
}
.btn-promo-batch:hover {
    transform: translateY(-2px);
    box-shadow: var(--tc-shadow-card-hover);
    color: var(--tc-white) !important;
}

/* Elementos Colapsáveis (<details> / <summary>) */
.promo-bubble details {
    background: var(--tc-bg);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-ctl-sm);
    margin: 10px 0;
    padding: 6px 12px;
    transition: background 0.2s ease;
}
.promo-bubble details[open] {
    background: var(--tc-surface);
    border-color: var(--tc-gray-300);
}
.promo-bubble details summary {
    cursor: pointer;
    font-weight: 600;
    font-size: var(--tc-fs-13);
    color: var(--tc-muted);
    user-select: none;
    padding: 6px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.promo-bubble details summary:hover {
    color: var(--tc-text-strong);
}
.promo-bubble details summary::marker {
    color: var(--tc-accent);
}


/* Sugestões Rápidas */
.promo-chat-quick-queries {
    padding: 8px 16px;
    background: var(--tc-gray-100);
    border-top: 1px solid var(--tc-border);
    display: flex;
    gap: 8px;
    overflow-x: auto;
    white-space: nowrap;
}
.promo-chat-quick-queries button {
    background: var(--tc-surface);
    border: 1px solid var(--tc-gray-300);
    color: var(--tc-muted);
    border-radius: var(--tc-radius-sheet);
    padding: 5px 12px;
    font-size: var(--tc-fs-12-5);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}
.promo-chat-quick-queries button:hover {
    background: var(--tc-ink);
    color: var(--tc-white);
    border-color: var(--tc-ink);
}

/* Footer / Input */
.promo-chat-footer {
    padding: 14px 18px;
    background: var(--tc-surface);
    border-top: 1px solid var(--tc-border);
}
.promo-chat-footer form {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}
.promo-chat-input {
    flex: 1;
    border: 1px solid var(--tc-gray-300);
    border-radius: var(--tc-radius-card);
    padding: 10px 16px;
    font-size: var(--tc-fs-14-5);
    line-height: 1.4;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    resize: none;
    min-height: 42px;
    max-height: 160px;
    overflow-y: auto;
    font-family: inherit;
    box-sizing: border-box;
    field-sizing: content;
}
.promo-chat-input:focus {
    border-color: var(--tc-accent);
    box-shadow: var(--tc-shadow-focus);
}
.promo-chat-send-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--tc-ink);
    color: var(--tc-white);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
}
.promo-chat-send-btn:hover {
    background: var(--tc-accent);
    transform: scale(1.05);
}
.promo-chat-send-btn:disabled {
    background: var(--tc-gray-300);
    cursor: not-allowed;
    transform: none;
}

/* Typing indicator */
.promo-typing-indicator {
    display: flex;
    gap: 4px;
    padding: 10px 14px;
    background: var(--tc-surface);
    border-radius: var(--tc-radius-lg);
    border: 1px solid var(--tc-border);
    width: fit-content;
}
.promo-typing-dot {
    width: 6px;
    height: 6px;
    background: var(--tc-faint);
    border-radius: 50%;
    animation: promoBounce 1.4s infinite ease-in-out both;
}
.promo-typing-dot:nth-child(1) { animation-delay: -0.32s; }
.promo-typing-dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes promoBounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}
/* Modal de Oportunidades em Promoções */
#modal_promo_oportunidades {
    z-index: 105000 !important;
}
#modal_promo_oportunidades .modal-dialog {
    z-index: 105001 !important;
}
/* Backdrop acima do drawer só enquanto o modal de oportunidades está ABERTO.
   Antes valia sempre que o modal existia na página, e o backdrop (104990) cobria
   os modais de custo abertos a partir do drawer (#modal_cost 99999, #modal_sem_custo).
   (:where mantém a especificidade original de .modal-backdrop.show) */
:where(body:has(#modal_promo_oportunidades.show)) .modal-backdrop.show {
    z-index: 104990 !important;
}
/* Modal aberto por cima do de oportunidades (ex.: custo): ele e o 2º backdrop sobem acima. */
:where(body:has(#modal_promo_oportunidades.show)) .modal.show:not(#modal_promo_oportunidades) {
    z-index: 105010 !important;
}
:where(body:has(#modal_promo_oportunidades.show)) .modal-backdrop.show ~ .modal-backdrop.show {
    z-index: 105005 !important;
}
/* Modal aberto a partir do drawer genérico (.app-drawer-wrapper-generic, z 9999):
   o backdrop fica entre o drawer e o modal (.modal é 99999 no base.css), escurecendo
   o drawer — mesmo valor do drawer de anúncio (#modal_clone). */
body:where(:has(.app-drawer-wrapper-generic.drawer-open)) .modal-backdrop.show {
    z-index: 10040;
}
#modal_promo_oportunidades .table-responsive {
    border-radius: var(--tc-radius-ctl-sm);
    background: var(--tc-surface);
}
#modal_promo_oportunidades table td,
#modal_promo_oportunidades table th {
    vertical-align: middle !important;
}

/* ---------- Produtos e Palavras-chave (posicao.php) ---------- */
/* Escopo: classe tclean-page-posicao no <body> de posicao.php (os modais e o menu do
   autocomplete, anexado em #modal_target, ficam fora de .app-container). :where() não soma
   especificidade: a cascata fica igual à do antigo <style> da página. */
:where(.tclean-page-posicao) .ui-autocomplete {
    z-index: 10050 !important;
    max-height: 350px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--tc-surface) !important;
    border: 1px solid var(--tc-border) !important;
    border-radius: var(--tc-radius-ctl-sm) !important;
    box-shadow: var(--tc-shadow-menu) !important;
    padding: 4px 0 !important;
}
:where(.tclean-page-posicao) .ui-autocomplete-loading-more {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    font-size: var(--tc-fs-12) !important;
    color: var(--tc-muted) !important;
    background-color: var(--tc-bg) !important;
    border-top: 1px dashed var(--tc-border) !important;
    list-style: none !important;
    pointer-events: none !important;
}
:where(.tclean-page-posicao) .ui-autocomplete .ui-menu-item {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}
:where(.tclean-page-posicao) .ui-autocomplete .ui-menu-item .ui-menu-item-wrapper,
:where(.tclean-page-posicao) .ui-autocomplete .ui-menu-item.ui-state-focus,
:where(.tclean-page-posicao) .ui-autocomplete .ui-menu-item .ui-state-active {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}
:where(.tclean-page-posicao) .ui-autocomplete-row a.autocomplete-anuncio {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 12px !important;
    text-decoration: none !important;
    color: var(--tc-text) !important;
    background-color: var(--tc-surface) !important;
    border-bottom: 1px solid var(--tc-gray-100) !important;
    transition: background-color 0.15s ease-in-out !important;
    cursor: pointer !important;
}
:where(.tclean-page-posicao) .ui-autocomplete-row:last-child a.autocomplete-anuncio {
    border-bottom: none !important;
}
:where(.tclean-page-posicao) .ui-autocomplete-row:hover a.autocomplete-anuncio,
:where(.tclean-page-posicao) .ui-autocomplete-row a.autocomplete-anuncio:hover,
:where(.tclean-page-posicao) .ui-autocomplete-row.ui-state-focus a.autocomplete-anuncio,
:where(.tclean-page-posicao) .ui-autocomplete-row.ui-state-active a.autocomplete-anuncio {
    background-color: var(--tc-bg) !important;
}
:where(.tclean-page-posicao) .autocomplete-anuncio-thumb {
    position: relative !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
}
:where(.tclean-page-posicao) .autocomplete-anuncio-thumb img.autocomplete-anuncio-photo {
    width: 44px !important;
    height: 44px !important;
    object-fit: cover !important;
    border-radius: var(--tc-radius-sm) !important;
    border: 1px solid var(--tc-border) !important;
    display: block !important;
}
:where(.tclean-page-posicao) .autocomplete-anuncio-thumb img.autocomplete-anuncio-mk {
    position: absolute !important;
    right: -4px !important;
    bottom: -4px !important;
    width: 16px !important;
    height: 16px !important;
    background: var(--tc-surface) !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 1px var(--tc-border) !important;
    padding: 1px !important;
}
:where(.tclean-page-posicao) .autocomplete-anuncio-text {
    min-width: 0 !important;
    flex: 1 !important;
    line-height: 1.3 !important;
}
:where(.tclean-page-posicao) .autocomplete-anuncio-text strong {
    display: block !important;
    font-weight: 600 !important;
    font-size: var(--tc-fs-13) !important;
    color: var(--tc-text) !important;
    margin-bottom: 2px !important;
}
:where(.tclean-page-posicao) .autocomplete-anuncio-text small {
    display: block !important;
    color: var(--tc-muted) !important;
    font-size: var(--tc-fs-12) !important;
    font-weight: 400 !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

/* Estilos das Abas e Análise da Pesquisa */
:where(.tclean-page-posicao) #modal_posicao_tabs {
    border-bottom: none;
    gap: 4px;
}
:where(.tclean-page-posicao) #modal_posicao_tabs .nav-link {
    color: var(--tc-muted);
    border: none;
    border-bottom: 2px solid transparent;
    padding: 12px 18px;
    font-size: var(--tc-fs-14);
    font-weight: 500;
    transition: all 0.15s ease;
    background: transparent;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
:where(.tclean-page-posicao) #modal_posicao_tabs .nav-link i {
    font-size: var(--tc-fs-13);
    opacity: 0.75;
    color: inherit;
}
:where(.tclean-page-posicao) #modal_posicao_tabs .nav-link:hover:not(.active) {
    color: var(--tc-ink);
    border-bottom-color: var(--tc-border);
}
:where(.tclean-page-posicao) #modal_posicao_tabs .nav-link.active {
    color: var(--tc-ink);
    font-weight: 600;
    border-bottom: 2px solid var(--tc-yellow);
    background: var(--tc-surface);
    border-top-left-radius: var(--tc-radius-ctl-sm);
    border-top-right-radius: var(--tc-radius-ctl-sm);
}
:where(.tclean-page-posicao) #modal_posicao_tabs .nav-link.active i {
    opacity: 1;
    color: var(--tc-ink);
}

/* Header Info Box */
:where(.tclean-page-posicao) .search-analysis-header {
    background: var(--tc-bg);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-lg);
    padding: 14px 18px;
}
:where(.tclean-page-posicao) .search-analysis-header__title {
    color: var(--tc-ink);
    font-size: var(--tc-fs-17);
    font-weight: 600;
    margin: 0;
}

/* Top Anúncios Cards */
:where(.tclean-page-posicao) .top-anuncio-card {
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-ctl);
    background: var(--tc-surface);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}
:where(.tclean-page-posicao) .top-anuncio-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--tc-shadow-card-hover);
    border-color: var(--tc-accent);
}
:where(.tclean-page-posicao) .top-anuncio-card.is-target {
    border: 2px solid var(--tc-ink);
    background: var(--tc-bg);
}
:where(.tclean-page-posicao) .top-anuncio-rank {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--tc-fs-12);
    color: var(--tc-white);
    box-shadow: var(--tc-shadow-xs);
    z-index: 2;
}
:where(.tclean-page-posicao) .rank-gold { background: linear-gradient(135deg, var(--tc-yellow), var(--tc-warning)); }
:where(.tclean-page-posicao) .rank-silver { background: linear-gradient(135deg, var(--tc-gray-500), var(--tc-muted)); }
:where(.tclean-page-posicao) .rank-bronze { background: linear-gradient(135deg, var(--tc-warning), var(--tc-warning-strong)); }
:where(.tclean-page-posicao) .rank-normal { background: linear-gradient(135deg, var(--tc-muted), var(--tc-text)); }

:where(.tclean-page-posicao) .top-anuncio-img-wrap {
    width: 100%;
    height: 130px;
    background: var(--tc-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
:where(.tclean-page-posicao) .top-anuncio-img-wrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
:where(.tclean-page-posicao) .top-anuncio-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
:where(.tclean-page-posicao) .top-anuncio-title {
    font-size: var(--tc-fs-12-5);
    line-height: 1.35;
    color: var(--tc-text);
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 6px;
    min-height: 34px;
}
:where(.tclean-page-posicao) .top-anuncio-price {
    font-size: var(--tc-fs-15);
    font-weight: 700;
    color: var(--tc-text-strong);
    margin-bottom: 6px;
}

/* Stat Boxes (Métricas de Mercado) */
:where(.tclean-page-posicao) .stat-box-clean {
    background: var(--tc-surface);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-lg);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
}
:where(.tclean-page-posicao) .stat-box-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--tc-radius-ctl-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--tc-fs-16);
    flex-shrink: 0;
}
:where(.tclean-page-posicao) .stat-box-icon--price {
    background: var(--tc-success-bg);
    color: var(--tc-success-ink);
}
:where(.tclean-page-posicao) .stat-box-icon--full {
    background: var(--tc-ml-green-bg);
    color: var(--tc-ml-green);
}
:where(.tclean-page-posicao) .stat-box-icon--ads {
    background: var(--tc-yellow-bg);
    color: var(--tc-warning);
}
:where(.tclean-page-posicao) .stat-box-icon--target {
    background: var(--tc-border-soft);
    color: var(--tc-ink);
}

/* Oportunidades de SEO Card & Badges */
:where(.tclean-page-posicao) .tclean-seo-card {
    background: var(--tc-surface);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-lg);
    padding: 16px 18px;
    margin-bottom: 16px;
}
:where(.tclean-page-posicao) .tclean-seo-card--warning {
    background: var(--tc-yellow-soft);
    border: 1px solid var(--tc-yellow-line);
    border-left: 4px solid var(--tc-yellow);
}
:where(.tclean-page-posicao) .tclean-seo-card--success {
    background: var(--tc-success-bg-soft);
    border: 1px solid var(--tc-success-border);
    border-left: 4px solid var(--tc-success);
}
:where(.tclean-page-posicao) .tclean-seo-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--tc-radius-ctl-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--tc-fs-16);
    flex-shrink: 0;
}
:where(.tclean-page-posicao) .tclean-seo-icon--warning {
    background: var(--tc-yellow-bg);
    color: var(--tc-warning);
}
:where(.tclean-page-posicao) .tclean-seo-icon--success {
    background: var(--tc-success-bg);
    color: var(--tc-success-ink);
}
:where(.tclean-page-posicao) .tclean-seo-title {
    color: var(--tc-ink);
    font-size: var(--tc-fs-15);
    font-weight: 600;
    margin: 0;
}
:where(.tclean-page-posicao) .tclean-seo-desc {
    color: var(--tc-text);
    font-size: var(--tc-fs-12-5);
    line-height: 1.45;
    margin-bottom: 12px;
}
:where(.tclean-page-posicao) .tclean-seo-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--tc-radius-ctl-sm);
    background: var(--tc-yellow-bg);
    border: 1px solid var(--tc-yellow-line);
    color: var(--tc-text);
    font-size: var(--tc-fs-12-5);
    font-weight: 500;
    margin: 3px;
    transition: all 0.15s ease;
    text-decoration: none;
}
:where(.tclean-page-posicao) .tclean-seo-pill:hover {
    background: var(--tc-yellow-bg);
    border-color: var(--tc-yellow);
    transform: translateY(-1px);
}
:where(.tclean-page-posicao) .tclean-seo-pill__icon {
    color: var(--tc-warning);
    font-size: var(--tc-fs-10);
}
:where(.tclean-page-posicao) .tclean-seo-pill__word {
    color: var(--tc-text-strong);
    font-weight: 700;
}
:where(.tclean-page-posicao) .tclean-seo-pill__meta {
    color: var(--tc-warning-strong);
    font-size: var(--tc-fs-11);
    font-weight: 500;
}

/* Tags / Bigramas */
:where(.tclean-page-posicao) .kw-tag-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--tc-radius-sheet);
    font-size: var(--tc-fs-12);
    font-weight: 500;
    margin: 3px;
    border: 1px solid transparent;
    line-height: 1.2;
}
:where(.tclean-page-posicao) .kw-tag-badge--present {
    background-color: var(--tc-success-bg);
    color: var(--tc-success-ink);
    border-color: var(--tc-success-border);
}
:where(.tclean-page-posicao) .kw-tag-badge--missing {
    background-color: var(--tc-border-soft);
    color: var(--tc-text);
    border-color: var(--tc-border);
}
:where(.tclean-page-posicao) .kw-tag-badge--missing i {
    color: var(--tc-warning);
}

/* ---------- Relatório Executivo de Auditoria (resume.php) ---------- */
/* Escopo: classe tclean-page-resume no <body> de resume.php (o bloco original estilizava
   body, .app-main__outer, .card.h-100 etc.). :where() não soma especificidade: a cascata
   fica igual à do antigo <style> da página. */
/* Design Visual Estilo Relatório Executivo */
body:where(.tclean-page-resume) { background-color: var(--tc-bg); }
:where(.tclean-page-resume) .app-main__outer { min-height: auto !important; }
:where(.tclean-page-resume) .app-main__inner { padding-bottom: 20px !important; min-height: auto !important; }
:where(.tclean-page-resume) .app-inner-layout { margin-bottom: 0 !important; }
:where(.tclean-page-resume) .card.h-100 { height: auto !important; }

:where(.tclean-page-resume) .report-card { border: none; border-radius: var(--tc-radius-lg); box-shadow: var(--tc-shadow-raised); background: var(--tc-surface); margin-bottom: 20px; }
:where(.tclean-page-resume) .report-header { background: linear-gradient(135deg, var(--tc-text) 0%, var(--tc-text-strong) 100%); color: var(--tc-white); border-radius: var(--tc-radius-lg); padding: 20px 26px; margin-bottom: 20px; box-shadow: var(--tc-shadow-raised); }

/* Tabs de Lojas / Multi-marketplace */
:where(.tclean-page-resume) .tabs-store-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
:where(.tclean-page-resume) .store-tab-btn { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: var(--tc-radius-ctl-sm); border: 1px solid var(--tc-gray-300); background: var(--tc-surface); font-weight: 600; font-size: var(--tc-fs-14); color: var(--tc-text); text-decoration: none; transition: all 0.2s ease; box-shadow: var(--tc-shadow-raised); }
:where(.tclean-page-resume) .store-tab-btn:hover { color: var(--tc-text-strong); background: var(--tc-bg); border-color: var(--tc-gray-500); text-decoration: none; transform: translateY(-1px); }
:where(.tclean-page-resume) .store-tab-btn.active { background: var(--tc-text); color: var(--tc-white); border-color: var(--tc-text-strong); box-shadow: var(--tc-shadow-raised); }
:where(.tclean-page-resume) .store-tab-btn.disabled { opacity: 0.55; cursor: not-allowed; background: var(--tc-gray-100); border-style: dashed; pointer-events: none; }

:where(.tclean-page-resume) .badge-rebote { background-color: var(--tc-warning-bg); color: var(--tc-warning-ink); font-weight: 700; border: 1px solid var(--tc-warning-line); }
:where(.tclean-page-resume) .badge-alta { background-color: var(--tc-success-bg); color: var(--tc-success-ink); font-weight: 700; border: 1px solid var(--tc-success-line); }
:where(.tclean-page-resume) .badge-queda { background-color: var(--tc-danger-bg); color: var(--tc-danger-ink); font-weight: 700; border: 1px solid var(--tc-danger-border); }
:where(.tclean-page-resume) .badge-estavel { background-color: var(--tc-gray-100); color: var(--tc-text); font-weight: 600; border: 1px solid var(--tc-border); }
:where(.tclean-page-resume) .badge-desaceleracao { background-color: var(--tc-yellow-bg); color: var(--tc-warning-strong); font-weight: 700; border: 1px solid var(--tc-yellow-line); }

:where(.tclean-page-resume) .kpi-box { background: var(--tc-surface); border-radius: var(--tc-radius-ctl); padding: 16px 18px; box-shadow: var(--tc-shadow-raised); border-left: 4px solid var(--tc-info); transition: transform 0.15s ease; }
:where(.tclean-page-resume) .kpi-box:hover { transform: translateY(-2px); }
:where(.tclean-page-resume) .kpi-box.success { border-left-color: var(--tc-success); }
:where(.tclean-page-resume) .kpi-box.warning { border-left-color: var(--tc-yellow); }
:where(.tclean-page-resume) .kpi-box.danger { border-left-color: var(--tc-danger); }

:where(.tclean-page-resume) .prod-report-item { border-radius: var(--tc-radius-ctl); border: 1px solid var(--tc-border); background: var(--tc-surface); margin-bottom: 14px; overflow: hidden; transition: all 0.2s ease; box-shadow: var(--tc-shadow-raised); }
:where(.tclean-page-resume) .prod-report-item:hover { border-color: var(--tc-gray-300); box-shadow: var(--tc-shadow-card-hover); }

:where(.tclean-page-resume) .prod-img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--tc-radius-ctl-sm); border: 1px solid var(--tc-border); background: var(--tc-surface); }
:where(.tclean-page-resume) .prod-title { font-size: var(--tc-fs-15); font-weight: 700; color: var(--tc-text-strong); line-height: 1.35; }

:where(.tclean-page-resume) .acao-imediata-box { background: var(--tc-success-soft); border: 1px solid var(--tc-success-line); border-radius: var(--tc-radius-ctl-sm); padding: 10px 14px; margin-top: 10px; }
:where(.tclean-page-resume) .acao-imediata-title { font-size: var(--tc-fs-12-5); font-weight: 800; text-transform: uppercase; color: var(--tc-success-ink); letter-spacing: 0.5px; margin-bottom: 4px; }
:where(.tclean-page-resume) .acao-imediata-text { font-size: var(--tc-fs-14); color: var(--tc-success-ink); font-weight: 600; line-height: 1.4; margin: 0; }

:where(.tclean-page-resume) .icon-rotate { transition: transform 0.25s ease; }
:where(.tclean-page-resume) .icon-rotate.rotated { transform: rotate(180deg); }
:where(.tclean-page-resume) .detail-drawer { display: none; background: var(--tc-bg); border-top: 1px solid var(--tc-border); }

/* Timeline dos 4 Períodos */
:where(.tclean-page-resume) .timeline-4p-container { display: flex; position: relative; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
@media (max-width: 768px) { :where(.tclean-page-resume) .timeline-4p-container { flex-direction: column; } }
:where(.tclean-page-resume) .timeline-step { flex: 1; background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-ctl-sm); padding: 12px 14px; position: relative; box-shadow: var(--tc-shadow-raised); }
:where(.tclean-page-resume) .timeline-step.active { border-color: var(--tc-info); background: var(--tc-bg); border-width: 2px; }
:where(.tclean-page-resume) .timeline-step-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; border-bottom: 1px solid var(--tc-gray-100); padding-bottom: 4px; }
:where(.tclean-page-resume) .timeline-tag { font-size: var(--tc-fs-12-5); font-weight: 800; text-transform: uppercase; color: var(--tc-muted); }
:where(.tclean-page-resume) .timeline-date { font-size: var(--tc-fs-12); font-weight: 700; color: var(--tc-text); }
:where(.tclean-page-resume) .timeline-step.active .timeline-tag { color: var(--tc-info); }
:where(.tclean-page-resume) .timeline-step.active .timeline-date { color: var(--tc-info); }
:where(.tclean-page-resume) .timeline-val { font-size: var(--tc-fs-17); font-weight: 800; color: var(--tc-text-strong); margin-bottom: 2px; }
:where(.tclean-page-resume) .timeline-step.active .timeline-val { color: var(--tc-info); }
:where(.tclean-page-resume) .timeline-metric-row { font-size: var(--tc-fs-12-5); color: var(--tc-text); display: flex; justify-content: space-between; margin-bottom: 2px; }

:where(.tclean-page-resume) .hipotese-card { background: var(--tc-surface); border: 1px solid var(--tc-border); border-left: 3px solid var(--tc-info); border-radius: var(--tc-radius-sm); padding: 9px 12px; margin-bottom: 6px; font-size: var(--tc-fs-13-5); color: var(--tc-text); }
:where(.tclean-page-resume) .var-badge-zero { background: var(--tc-danger-bg); color: var(--tc-danger-ink); font-weight: 700; padding: 2px 6px; border-radius: var(--tc-radius-xs); font-size: var(--tc-fs-12); border: 1px solid var(--tc-danger-border); }
:where(.tclean-page-resume) .var-badge-ok { background: var(--tc-success-bg); color: var(--tc-success-ink); font-weight: 600; padding: 2px 6px; border-radius: var(--tc-radius-xs); font-size: var(--tc-fs-12); }
:where(.tclean-page-resume) .var-badge-warn { background: var(--tc-warning-bg); color: var(--tc-warning-ink); font-weight: 600; padding: 2px 6px; border-radius: var(--tc-radius-xs); font-size: var(--tc-fs-12); }

:where(.tclean-page-resume) .btn-promo-action { font-size: var(--tc-fs-12-5); font-weight: 700; padding: 4px 12px; border-radius: var(--tc-radius-sm); cursor: pointer; }
:where(.tclean-page-resume) .acao-cumprida-text { font-size: var(--tc-fs-14); color: var(--tc-success-ink); font-weight: 600; line-height: 1.4; margin: 0; }
:where(.tclean-page-resume) .badge-cumprido { background: var(--tc-success-bg); color: var(--tc-success-ink); border: 1px solid var(--tc-success-line); font-weight: 700; }

/* Card de Promoções Inline */
:where(.tclean-page-resume) .promo-inline-card { background: var(--tc-success-soft); border: 1px solid var(--tc-success-line); border-radius: var(--tc-radius-ctl-sm); padding: 14px; margin-top: 12px; }
:where(.tclean-page-resume) .promo-inline-table th { font-size: var(--tc-fs-12); text-transform: uppercase; color: var(--tc-success-ink); background: var(--tc-success-bg); border-top: none; }
:where(.tclean-page-resume) .promo-inline-table td { font-size: var(--tc-fs-13); vertical-align: middle; }

/* ---------- Extensão Chrome (extensao.php) ---------- */
/* Escopo: classe tclean-page-extensao no <body> de extensao.php. :where() não soma
   especificidade: a cascata fica igual à do antigo <style> da página (ex.: o
   `.app-container a:hover` do tema continua ganhando de `.ext-btn--ghost:hover`, como antes). */
:where(.tclean-page-extensao) .ext { font-family: var(--tc-font); color: var(--tc-text); max-width: 1180px; margin: 0 auto; }
:where(.tclean-page-extensao) .ext h1, :where(.tclean-page-extensao) .ext h2, :where(.tclean-page-extensao) .ext h3 { font-family: var(--tc-font); color: var(--tc-text); }
:where(.tclean-page-extensao) .ext-btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: var(--tc-radius-ctl); font-weight: 600; font-size: var(--tc-fs-15); text-decoration: none; transition: background .15s, border-color .15s; }
:where(.tclean-page-extensao) .ext .ext-btn--primary { background: var(--tc-ink); color: var(--tc-white); }
:where(.tclean-page-extensao) .ext .ext-btn--primary:hover { background: var(--tc-ink-hover); color: var(--tc-white); text-decoration: none; }
:where(.tclean-page-extensao) .ext .ext-btn--ghost { background: var(--tc-surface); color: var(--tc-ink); border: 1px solid var(--tc-lavender-line); }
:where(.tclean-page-extensao) .ext-btn--ghost:hover { border-color: var(--tc-ink); color: var(--tc-ink); text-decoration: none; }
:where(.tclean-page-extensao) .ext-btn img { width: 20px; height: 20px; }

/* Hero */
:where(.tclean-page-extensao) .ext-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; padding: 36px 40px; margin-bottom: 28px; background: linear-gradient(135deg, var(--tc-surface) 0%, var(--tc-lavender) 100%); border: 1px solid var(--tc-lavender-line); border-radius: var(--tc-radius-card); }
:where(.tclean-page-extensao) .ext-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; margin-bottom: 16px; background: var(--tc-surface); border: 1px solid var(--tc-lavender-line); border-radius: var(--tc-radius-pill); font-size: var(--tc-fs-12); font-weight: 600; color: var(--tc-accent); }
:where(.tclean-page-extensao) .ext-eyebrow img { width: 16px; height: 16px; }
:where(.tclean-page-extensao) .ext-hero h1 { font-size: var(--tc-fs-34); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 14px; }
:where(.tclean-page-extensao) .ext-hero h1 span { color: var(--tc-ink); }
:where(.tclean-page-extensao) .ext-hero p { font-size: var(--tc-fs-16); line-height: 1.55; color: var(--tc-text-soft); margin: 0 0 24px; }
:where(.tclean-page-extensao) .ext-hero__ctas { display: flex; gap: 10px; flex-wrap: wrap; }
:where(.tclean-page-extensao) .ext-hero__trust { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 18px; font-size: var(--tc-fs-13); color: var(--tc-muted); }
:where(.tclean-page-extensao) .ext-hero__trust i { color: var(--tc-success-ink); margin-right: 4px; }

/* Mockups (imitam o visual da extensão nas telas do ML) */
:where(.tclean-page-extensao) .mk { background: var(--tc-surface); border: 1px solid var(--tc-lavender-line); border-left: 3px solid var(--tc-ink); border-radius: var(--tc-radius-ctl); padding: 12px 14px; font-size: var(--tc-fs-12); box-shadow: var(--tc-shadow-soft); }
:where(.tclean-page-extensao) .mk-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
:where(.tclean-page-extensao) .mk-badge { font-size: var(--tc-fs-9); font-weight: 700; letter-spacing: .5px; color: var(--tc-white); background: var(--tc-ink); padding: 2px 6px; border-radius: var(--tc-radius-xs); }
:where(.tclean-page-extensao) .mk-title { font-weight: 600; color: var(--tc-gray-700); }
:where(.tclean-page-extensao) .mk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
:where(.tclean-page-extensao) .mk-cell { background: var(--tc-bg); border: 1px solid var(--tc-lavender); border-radius: var(--tc-radius-sm); padding: 6px 8px; }
:where(.tclean-page-extensao) .mk-lbl { display: block; white-space: nowrap; font-size: var(--tc-fs-9); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; color: var(--tc-muted); }
:where(.tclean-page-extensao) .mk-val { display: block; white-space: nowrap; font-size: var(--tc-fs-14); font-weight: 700; color: var(--tc-text); }
:where(.tclean-page-extensao) .mk-val--ok { color: var(--tc-success-ink); }
:where(.tclean-page-extensao) .mk-val--bad { color: var(--tc-danger-ink); }
:where(.tclean-page-extensao) .mk-bars { display: flex; align-items: flex-end; gap: 6px; height: 64px; margin-top: 10px; }
:where(.tclean-page-extensao) .mk-bars span { flex: 1; background: var(--tc-ink); opacity: .85; border-radius: var(--tc-radius-xs) var(--tc-radius-xs) 0 0; }
:where(.tclean-page-extensao) .mk-bars span:last-child { background: var(--tc-accent); }
:where(.tclean-page-extensao) .mk-months { display: flex; gap: 6px; margin-top: 3px; }
:where(.tclean-page-extensao) .mk-months span { flex: 1; text-align: center; font-size: var(--tc-fs-9); color: var(--tc-muted); }
:where(.tclean-page-extensao) .mk-actions { display: flex; gap: 6px; margin-bottom: 10px; }
:where(.tclean-page-extensao) .mk-action { flex: 1; display: flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid var(--tc-lavender-line); border-radius: var(--tc-radius-ctl-sm); font-weight: 600; color: var(--tc-ink); }
:where(.tclean-page-extensao) .mk-action--primary { background: var(--tc-ink); border-color: var(--tc-ink); color: var(--tc-white); }
:where(.tclean-page-extensao) .mk-action--primary i { color: var(--tc-yellow); }
:where(.tclean-page-extensao) .mk-action b { margin-left: auto; color: var(--tc-text); }
:where(.tclean-page-extensao) .mk-strip { display: flex; gap: 0; }
:where(.tclean-page-extensao) .mk-strip .mk-val { font-size: var(--tc-fs-13); }
:where(.tclean-page-extensao) .mk-strip .mk-cell { flex: 1; min-width: 0; padding: 4px 8px; background: transparent; border: 0; border-left: 1px solid var(--tc-lavender-line); border-radius: 0; }
:where(.tclean-page-extensao) .mk-strip .mk-cell:first-child { border-left: 0; }
:where(.tclean-page-extensao) .mk-row { display: grid; grid-template-columns: 18px 1fr auto auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--tc-gray-100); }
:where(.tclean-page-extensao) .mk-row:last-child { border-bottom: 0; }
:where(.tclean-page-extensao) .mk-row--here { background: var(--tc-lavender); margin: 0 -14px; padding: 6px 14px; }
:where(.tclean-page-extensao) .mk-pos { color: var(--tc-muted); font-weight: 600; }
:where(.tclean-page-extensao) .mk-chip { font-size: var(--tc-fs-10); font-weight: 700; padding: 1px 7px; border-radius: var(--tc-radius-pill); background: var(--tc-gray-100); color: var(--tc-gray-700); }
:where(.tclean-page-extensao) .mk-chip--full { background: var(--tc-success-soft); color: var(--tc-ml-green); font-style: italic; }
:where(.tclean-page-extensao) .mk-calc dl { margin: 0; }
:where(.tclean-page-extensao) .mk-calc dl div { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed var(--tc-border); }
:where(.tclean-page-extensao) .mk-calc dt { font-weight: 400; color: var(--tc-gray-600); }
:where(.tclean-page-extensao) .mk-calc dd { margin: 0; font-weight: 600; }
:where(.tclean-page-extensao) .mk-calc__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; padding: 8px 10px; background: var(--tc-lavender); border-radius: var(--tc-radius-ctl-sm); }
:where(.tclean-page-extensao) .mk-calc__total strong { font-size: var(--tc-fs-18); color: var(--tc-success-ink); }
:where(.tclean-page-extensao) .mk-logbar { display: flex; height: 8px; border-radius: var(--tc-radius-xs); overflow: hidden; margin: 6px 0; }
:where(.tclean-page-extensao) .mk-promo { display: inline-flex; flex-direction: column; gap: 3px; padding: 6px 8px; border: 1px solid var(--tc-lavender-line); border-left: 3px solid var(--tc-ink); border-radius: var(--tc-radius-sm); background: var(--tc-bg); }
:where(.tclean-page-extensao) .mk-promo--warn { border-left-color: var(--tc-warning); background: var(--tc-yellow-soft); }

:where(.tclean-page-extensao) .ext-hero__visual { position: relative; padding-bottom: 56px; }
:where(.tclean-page-extensao) .ext-hero__visual .mk + .mk { position: absolute; right: -14px; bottom: 0; width: 62%; }

/* Seções */
:where(.tclean-page-extensao) .ext-section { margin: 44px 0 0; }
:where(.tclean-page-extensao) .ext-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; flex-wrap: wrap; }
:where(.tclean-page-extensao) .ext-section__head h2 { font-size: var(--tc-fs-24); font-weight: 700; letter-spacing: -0.01em; margin: 0 0 4px; }
:where(.tclean-page-extensao) .ext-section__head p { margin: 0; color: var(--tc-muted); font-size: var(--tc-fs-14); }
:where(.tclean-page-extensao) .ext-tag { display: inline-block; margin-bottom: 8px; font-size: var(--tc-fs-11); font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--tc-accent); }

:where(.tclean-page-extensao) .ext-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
:where(.tclean-page-extensao) .ext-feature { display: flex; flex-direction: column; background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-card); overflow: hidden; }
:where(.tclean-page-extensao) .ext-feature__demo { padding: 22px; background: var(--tc-bg); border-bottom: 1px solid var(--tc-border); min-height: 168px; display: flex; flex-direction: column; justify-content: center; }
:where(.tclean-page-extensao) .ext-feature__body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
:where(.tclean-page-extensao) .ext-feature__where { font-size: var(--tc-fs-12); font-weight: 600; color: var(--tc-accent); }
:where(.tclean-page-extensao) .ext-feature__where i { margin-right: 4px; }
:where(.tclean-page-extensao) .ext-feature h3 { font-size: var(--tc-fs-17); font-weight: 700; margin: 0; }
:where(.tclean-page-extensao) .ext-feature p { font-size: var(--tc-fs-14); line-height: 1.5; color: var(--tc-text-soft); margin: 0; }
:where(.tclean-page-extensao) .ext-feature a.ext-link { margin-top: auto; padding-top: 6px; font-size: var(--tc-fs-13); font-weight: 600; color: var(--tc-ink); }
:where(.tclean-page-extensao) .ext-new { font-size: var(--tc-fs-10); font-weight: 700; letter-spacing: .4px; color: var(--tc-warning-ink); background: var(--tc-warning-bg); border: 1px solid var(--tc-warning-line); padding: 1px 6px; border-radius: var(--tc-radius-pill); margin-left: 6px; vertical-align: middle; }

/* Passos */
:where(.tclean-page-extensao) .ext-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
:where(.tclean-page-extensao) .ext-step { position: relative; padding: 22px; background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-card); }
:where(.tclean-page-extensao) .ext-step__n { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-bottom: 12px; border-radius: 50%; background: var(--tc-lavender); color: var(--tc-ink); font-weight: 700; }
:where(.tclean-page-extensao) .ext-step h3 { font-size: var(--tc-fs-16); font-weight: 700; margin: 0 0 6px; }
:where(.tclean-page-extensao) .ext-step p { font-size: var(--tc-fs-14); color: var(--tc-text-soft); margin: 0; line-height: 1.5; }
:where(.tclean-page-extensao) .ext-step kbd { background: var(--tc-lavender); color: var(--tc-ink); border-radius: var(--tc-radius-xs); padding: 1px 6px; font-family: var(--tc-font); font-size: var(--tc-fs-12); }

/* FAQ */
:where(.tclean-page-extensao) .ext-faq { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
:where(.tclean-page-extensao) .ext-faq details { background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-ctl); padding: 14px 18px; }
:where(.tclean-page-extensao) .ext-faq summary { cursor: pointer; font-weight: 600; font-size: var(--tc-fs-15); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
:where(.tclean-page-extensao) .ext-faq summary::-webkit-details-marker { display: none; }
:where(.tclean-page-extensao) .ext-faq summary::after { content: "+"; color: var(--tc-ink); font-size: var(--tc-fs-18); line-height: 1; }
:where(.tclean-page-extensao) .ext-faq details[open] summary::after { content: "–"; }
:where(.tclean-page-extensao) .ext-faq details p { margin: 10px 0 0; font-size: var(--tc-fs-14); line-height: 1.55; color: var(--tc-text-soft); }

/* CTA final */
:where(.tclean-page-extensao) .ext-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin: 44px 0 24px; padding: 28px 32px; background: var(--tc-ink); border-radius: var(--tc-radius-card); color: var(--tc-white); }
:where(.tclean-page-extensao) .ext-cta h2 { color: var(--tc-white); font-size: var(--tc-fs-22); font-weight: 700; margin: 0 0 4px; }
:where(.tclean-page-extensao) .ext-cta p { margin: 0; color: var(--tc-white-a80); font-size: var(--tc-fs-14); }
:where(.tclean-page-extensao) .ext .ext-cta .ext-btn--primary { background: var(--tc-yellow); color: var(--tc-text); }
:where(.tclean-page-extensao) .ext .ext-cta .ext-btn--primary:hover { background: var(--tc-yellow-hover); color: var(--tc-text); }
:where(.tclean-page-extensao) .ext .ext-cta .ext-btn--ghost { background: transparent; color: var(--tc-white); border-color: var(--tc-white-a35); }
:where(.tclean-page-extensao) .ext .ext-cta .ext-btn--ghost:hover { border-color: var(--tc-white); color: var(--tc-white); }

@media (max-width: 991px) {
    :where(.tclean-page-extensao) .ext-hero { grid-template-columns: 1fr; padding: 28px 22px; }
    :where(.tclean-page-extensao) .ext-hero__visual { padding-bottom: 0; }
    :where(.tclean-page-extensao) .ext-hero__visual .mk + .mk { position: static; width: auto; margin-top: 12px; }
    :where(.tclean-page-extensao) .ext-features, :where(.tclean-page-extensao) .ext-faq, :where(.tclean-page-extensao) .ext-steps { grid-template-columns: 1fr; }
    :where(.tclean-page-extensao) .ext-hero h1 { font-size: var(--tc-fs-28); }
}

/* ---------- Publicidade › Afiliados (campanhas.php?tab=afiliados) ----------
   Escopo: classe tclean-page-afiliados no <body> (campanhas.php). JS: js/afiliados.js.
   Componentes do DS: faixa de KPIs, bars-list, metric-table, tclean-alert--bloco, cascata,
   tclean-live-card (listas no celular) e .modal.tclean-sheet--lado (painel do produto). */
:where(.tclean-page-afiliados) .tclean-afil__filtros { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 16px; }
:where(.tclean-page-afiliados) .tclean-afil__fontes { display: flex; flex-wrap: wrap; gap: 6px; }
:where(.tclean-page-afiliados) .tclean-afil__chip-off { border-style: dashed; color: var(--tc-muted); }
:where(.tclean-page-afiliados) .tclean-afil__chip-mini { height: 20px; padding: 0 7px; font-size: var(--tc-fs-11); }
:where(.tclean-page-afiliados) .tclean-afil__mk-icone { flex-shrink: 0; margin-right: 6px; border-radius: 50%; vertical-align: -2px; }
:where(.tclean-page-afiliados) .tclean-afil__info { color: var(--tc-gray-400); font-size: var(--tc-fs-11); cursor: help; }
:where(.tclean-page-afiliados) .tclean-afil__aux { font-size: var(--tc-fs-12); color: var(--tc-muted); font-variant-numeric: tabular-nums; }
:where(.tclean-page-afiliados) .tclean-afil__aux--forte { color: var(--tc-text); font-weight: 500; }
:where(.tclean-page-afiliados) .tclean-afil__mono { font-family: var(--tc-mono); }
:where(.tclean-page-afiliados) .tclean-afil__nota { margin: 8px 0 0; font-size: var(--tc-fs-12); line-height: 1.45; color: var(--tc-muted); }
:where(.tclean-page-afiliados) .tclean-afil__nota:empty { display: none; }
:where(.tclean-page-afiliados) .tclean-afil__bom { color: var(--tc-success-ink); font-weight: 500; }
:where(.tclean-page-afiliados) .tclean-afil__ruim { color: var(--tc-danger-ink); font-weight: 500; }
:where(.tclean-page-afiliados) .tclean-afil__sem-foto { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--tc-lilac-200); }

/* KPIs: a faixa ocupa a linha (no celular vira os cartões com rolagem da home) */
:where(.tclean-page-afiliados) .tclean-afil__kpis-linha { grid-template-columns: minmax(0, 1fr); }
:where(.tclean-page-afiliados) .tclean-afil__spark { margin-top: auto; }
:where(.tclean-page-afiliados) .tclean-kpi .tclean-metric-table { margin-top: 2px; }
:where(.tclean-page-afiliados) .tclean-kpi .tclean-metric-table td { font-variant-numeric: tabular-nums; }
:where(.tclean-page-afiliados) .tclean-kpi .tclean-metric-table td:first-child { color: var(--tc-muted); }
:where(.tclean-page-afiliados) .tclean-afil__mini-barras { gap: 8px; }
:where(.tclean-page-afiliados) .tclean-afil__mini-barras .tclean-bars-list__row { grid-template-columns: 62px minmax(0, 1fr) 62px; gap: 8px; }
:where(.tclean-page-afiliados) .tclean-afil__mini-barras .tclean-bars-list__name { display: flex; align-items: center; font-size: var(--tc-fs-12-5); }

/* O que olhar agora */
:where(.tclean-page-afiliados) .tclean-afil__olhar-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
:where(.tclean-page-afiliados) .tclean-afil__link-btn { padding: 0; border: 0; background: transparent; cursor: pointer; }
:where(.tclean-page-afiliados) .tclean-afil__olhar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
:where(.tclean-page-afiliados) .tclean-afil__aviso { height: 100%; }
:where(.tclean-page-afiliados) .tclean-afil__aviso-numero { font-size: var(--tc-fs-20); font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }

/* Gráfico */
:where(.tclean-page-afiliados) .tclean-afil__grafico-corpo { padding: 12px 16px 16px; }

/* Por loja | Para onde vai cada R$ 100 */
:where(.tclean-page-afiliados) .tclean-afil__loja { display: flex; align-items: center; gap: 8px; min-width: 0; }
:where(.tclean-page-afiliados) .tclean-afil__loja > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(.tclean-page-afiliados) .tclean-afil__loja .tclean-afil__mk-icone { margin-right: 0; }
:where(.tclean-page-afiliados) .tclean-afil__cartao-valor { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; font-size: var(--tc-fs-12); color: var(--tc-muted); font-variant-numeric: tabular-nums; }
:where(.tclean-page-afiliados) .tclean-afil__cartao-valor strong { font-size: var(--tc-fs-14); color: var(--tc-text); }

/* Linha a linha */
:where(.tclean-page-afiliados) .tclean-afil__abas .tclean-segmented__item,
:where(.tclean-page-afiliados) .tclean-afil__filtros .tclean-segmented__item,
:where(.tclean-page-afiliados) .tclean-afil__qtd { color: var(--tc-faint); font-variant-numeric: tabular-nums; }
:where(.tclean-page-afiliados) .tclean-afil__qtd:empty { display: none; }
:where(.tclean-page-afiliados) #afil_filtro_chip { cursor: pointer; }

/* Painel do produto (.modal.tclean-sheet--lado) */
:where(.tclean-page-afiliados) .tclean-afil-prod__head { display: flex; align-items: flex-start; gap: 14px; padding: 20px 22px; border-bottom: 1px solid var(--tc-border); }
:where(.tclean-page-afiliados) .tclean-afil-prod__thumb .tclean-pedido-produto__thumb { width: 48px; height: 48px; }
:where(.tclean-page-afiliados) .tclean-afil-prod__thumb .tclean-pedido-produto__thumb > img:first-child { width: 100%; height: 100%; }
:where(.tclean-page-afiliados) .tclean-afil-prod__titulos { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
:where(.tclean-page-afiliados) .tclean-afil-prod__sub,
:where(.tclean-page-afiliados) .tclean-afil-prod__meta { font-size: var(--tc-fs-12-5); color: var(--tc-muted); }
:where(.tclean-page-afiliados) .tclean-afil-prod__titulo { margin: 0; font-size: var(--tc-fs-17); font-weight: 600; line-height: 1.3; color: var(--tc-text-strong); }
:where(.tclean-page-afiliados) .tclean-afil-prod__body { padding: 18px 22px 26px !important; }
:where(.tclean-page-afiliados) #afil_prod_corpo { display: flex; flex-direction: column; gap: 18px; }
:where(.tclean-page-afiliados) .tclean-afil-prod__caixas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
:where(.tclean-page-afiliados) .tclean-afil-prod__caixa { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px; border: 1px solid var(--tc-border); border-radius: var(--tc-radius-ctl); background: var(--tc-surface); font-size: var(--tc-fs-13); }
:where(.tclean-page-afiliados) .tclean-afil-prod__caixas .tclean-afil-prod__caixa > span { font-size: var(--tc-fs-12); color: var(--tc-muted); }
:where(.tclean-page-afiliados) .tclean-afil-prod__caixas .tclean-afil-prod__caixa > strong { font-size: var(--tc-fs-20); font-weight: 600; color: var(--tc-text-strong); font-variant-numeric: tabular-nums; }
:where(.tclean-page-afiliados) .tclean-afil-prod__caixa--tracejada { align-items: flex-start; gap: 8px; border-style: dashed; }
:where(.tclean-page-afiliados) .tclean-afil-prod__caixa--grafico { padding: 10px 12px; }
:where(.tclean-page-afiliados) .tclean-afil-prod__secao { display: flex; flex-direction: column; gap: 8px; }
:where(.tclean-page-afiliados) .tclean-afil-prod__secao-titulo { margin: 0; font-size: var(--tc-fs-11-5); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tc-muted); }
:where(.tclean-page-afiliados) .tclean-afil-prod__linha { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--tc-gray-100); font-size: var(--tc-fs-13); font-variant-numeric: tabular-nums; }
:where(.tclean-page-afiliados) .tclean-afil-prod__linha:last-child { border-bottom: 0; }
:where(.tclean-page-afiliados) .tclean-afil-prod__linha.is-forte { font-weight: 600; }
:where(.tclean-page-afiliados) .tclean-afil-prod__linha.is-negativo > span:last-child { color: var(--tc-danger-ink); }
:where(.tclean-page-afiliados) .tclean-afil-prod__conta { width: 100%; }
:where(.tclean-page-afiliados) .tclean-afil-prod__conta .tclean-afil-prod__linha { border-bottom-color: var(--tc-border-soft); }
:where(.tclean-page-afiliados) .tclean-afil-prod__amostras { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
:where(.tclean-page-afiliados) .tclean-afil-prod__amostras > div { display: flex; flex-direction: column; gap: 2px; }
:where(.tclean-page-afiliados) .tclean-afil-prod__seller { align-self: flex-start; }

@media (max-width: 1399.98px) {
}
@media (max-width: 1399.98px) {
}
/* Até 1400px os 5 KPIs não cabem numa linha: 3 + 2 (Afiliado × Ads ocupa duas colunas) */
@media (min-width: 768px) and (max-width: 1399.98px) {
  :where(.tclean-page-afiliados) #afil_kpis { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :where(.tclean-page-afiliados) #afil_kpis > .tclean-kpi:nth-child(n+4) { border-top: 1px solid var(--tc-border); }
  :where(.tclean-page-afiliados) #afil_kpis > .tclean-kpi:nth-child(4) { border-left: 0; }
  :where(.tclean-page-afiliados) #afil_kpis > .tclean-kpi:nth-child(5) { grid-column: span 2; }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  :where(.tclean-page-afiliados) .tclean-afil__olhar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  :where(.tclean-page-afiliados) .tclean-afil__filtros { margin-bottom: 12px; }
  /* Chips da fonte do dado quebram linha (nada cortado) */
  :where(.tclean-page-afiliados) .tclean-afil__fontes .tclean-chip { height: auto; min-height: 26px; white-space: normal; }
  /* KPIs: um cartão por KPI, com rolagem lateral (regras da home); vendas primeiro */
  :where(.tclean-page-afiliados) #afil_kpis > .tclean-kpi { flex: 0 0 auto; width: 190px; min-width: 190px; }
  :where(.tclean-page-afiliados) #afil_kpis .tclean-kpi__value { font-size: var(--tc-fs-20); }
  :where(.tclean-page-afiliados) #afil_kpis .tclean-kpi__foot { white-space: normal; }
  :where(.tclean-page-afiliados) #afil_kpis .tclean-afil__info { display: none; }
  :where(.tclean-page-afiliados) .tclean-afil__kpi-vendas { order: -1; }
  /* Avisos: um cartão por vez, com rolagem lateral */
  :where(.tclean-page-afiliados) .tclean-afil__olhar-grid { display: flex; gap: 10px; margin: 0 -16px; padding: 0 16px 4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; }
  :where(.tclean-page-afiliados) .tclean-afil__olhar-grid::-webkit-scrollbar { display: none; }
  :where(.tclean-page-afiliados) .tclean-afil__olhar-grid > * { flex: 0 0 86%; scroll-snap-align: start; }
  /* Tabelas viram cartões */
  :where(.tclean-page-afiliados) .tclean-afil__lojas-tabela,
  :where(.tclean-page-afiliados) #table_afil_produtos,
  :where(.tclean-page-afiliados) #table_afil_pedidos { display: none; }
  :where(.tclean-page-afiliados) .tclean-afil__cartoes { display: block; }
  /* Período: só o seletor principal (o "vs" segue no padrão, como na home) + Filtros */
  :where(.tclean-page-afiliados) #pub_periodo { flex-wrap: nowrap; width: 100%; }
  :where(.tclean-page-afiliados) #pub_periodo .tclean-page-actions__sep,
  :where(.tclean-page-afiliados) #pub_periodo .tclean-date-picker:has(#compare_date) { display: none; }
  :where(.tclean-page-afiliados) #pub_periodo .tclean-date-picker { flex: 1 1 auto; min-width: 0; }
  /* Cabeçalho dos cards: título e seletores quebram linha */
  :where(.tclean-page-afiliados) #afil_card_grafico .tclean-card__title-group { flex-wrap: wrap; }
  :where(.tclean-page-afiliados) #afil_card_linhas .pagination { flex-wrap: wrap; }
  /* Sem a caixa e sem rolagem lateral da tabela: só cartões + rodapé */
  :where(.tclean-page-afiliados) #afil_produtos .tclean-table-wrap,
  :where(.tclean-page-afiliados) #afil_pedidos .tclean-table-wrap { border: 0; border-radius: 0; overflow: visible; }
  :where(.tclean-page-afiliados) #afil_lojas .tclean-afil__cartoes { padding: 0 16px; }
  :where(.tclean-page-afiliados) .tclean-afil__linhas-titulo { flex-wrap: wrap; }
  :where(.tclean-page-afiliados) .tclean-afil__abas { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  :where(.tclean-page-afiliados) #afil_card_linhas .tclean-card__tools { width: 100%; }
  :where(.tclean-page-afiliados) #afil_card_linhas .tclean-search { flex: 1; }
  :where(.tclean-page-afiliados) .tclean-afil-prod__head { padding: 6px 18px 14px; }
  :where(.tclean-page-afiliados) .tclean-afil-prod__body { padding: 14px 18px 24px !important; }
  :where(.tclean-page-afiliados) .tclean-afil-prod__caixas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Conciliação (conciliacao.php) ----------
   Escopo: classe tclean-page-conciliacao no <body>. JS: js/conciliacao.js. Layout "fluxo do dinheiro": resumo do
   dinheiro → quando vou receber | o marketplace pagou certo? → previsto por dia → pedidos. Cada situação, dia,
   linha da conferência e motivo é um filtro da tabela (.tclean-rec__alvo; o ativo leva .is-active e o grupo
   .tclean-rec__grupo ganha .has-ativo, que esmaece os irmãos). Componentes do DS: card, segmented, chip,
   chart-legend, tclean-live-card (linhas no celular), tclean-alert--bloco e .modal.tclean-sheet--lado (painel). */
:where(.tclean-page-conciliacao) .tclean-rec__fonte { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
:where(.tclean-page-conciliacao) .tclean-rec__fonte:empty { display: none; }
:where(.tclean-page-conciliacao) .tclean-rec__mk { margin-right: 6px; border-radius: 50%; }
:where(.tclean-page-conciliacao) .tclean-rec__breve { font-size: var(--tc-fs-13); color: var(--tc-faint); white-space: nowrap; }
:where(.tclean-page-conciliacao) .tclean-rec__nota { margin: 8px 0 0; font-size: var(--tc-fs-12); line-height: 1.45; color: var(--tc-muted); }
:where(.tclean-page-conciliacao) .tclean-rec__nota strong { font-weight: 600; color: var(--tc-text); }
:where(.tclean-page-conciliacao) .tclean-rec__nota .tclean-rec__ponto { margin-right: 6px; vertical-align: 1px; border-radius: var(--tc-radius-2xs); }
:where(.tclean-page-conciliacao) .tclean-rec__aux { font-size: var(--tc-fs-12); color: var(--tc-muted); font-variant-numeric: tabular-nums; }
:where(.tclean-page-conciliacao) .tclean-rec__rotulo { font-size: var(--tc-fs-13); color: var(--tc-muted); }
:where(.tclean-page-conciliacao) .tclean-rec__rotulo-linha { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
:where(.tclean-page-conciliacao) .tclean-rec__rotulo-linha .tclean-rec__aux { color: var(--tc-faint); }
:where(.tclean-page-conciliacao) .tclean-rec__mono { font-family: var(--tc-mono); font-size: var(--tc-fs-12-5); }
:where(.tclean-page-conciliacao) .tclean-rec__previsto { color: var(--tc-muted); }
:where(.tclean-page-conciliacao) .tclean-rec__forte { font-weight: 600; color: var(--tc-text-strong); }
:where(.tclean-page-conciliacao) .tclean-rec__atraso { color: var(--tc-warning-strong); font-weight: 500; }

/* Cor de cada situação (financeiro, conferência, data vencida, marketplace): bolinha, barra empilhada e barrinha */
:where(.tclean-page-conciliacao) .tclean-rec__ponto { display: inline-block; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; }
:where(.tclean-page-conciliacao) .tclean-rec__cor--liberado,
:where(.tclean-page-conciliacao) .tclean-rec__cor--conferido { background: var(--tc-success); }
:where(.tclean-page-conciliacao) .tclean-rec__cor--a_liberar { background: var(--tc-yellow); }
:where(.tclean-page-conciliacao) .tclean-rec__cor--reembolso,
:where(.tclean-page-conciliacao) .tclean-rec__cor--mais { background: var(--tc-info); }
:where(.tclean-page-conciliacao) .tclean-rec__cor--retido,
:where(.tclean-page-conciliacao) .tclean-rec__cor--menos { background: var(--tc-danger); }
:where(.tclean-page-conciliacao) .tclean-rec__cor--contestacao { background: var(--tc-danger-ink); }
:where(.tclean-page-conciliacao) .tclean-rec__cor--pendente { background: var(--tc-lilac-100); }
:where(.tclean-page-conciliacao) .tclean-rec__cor--vencido { background: var(--tc-warning); }
:where(.tclean-page-conciliacao) .tclean-rec__cor--mk-mercadolivre { background: var(--tc-chart-ml-1); }
:where(.tclean-page-conciliacao) .tclean-rec__cor--mk-tiktok { background: var(--tc-chart-tiktok-1); }
:where(.tclean-page-conciliacao) .tclean-rec__cor--mk-shopee { background: var(--tc-chart-shopee-1); }
:where(.tclean-page-conciliacao) .tclean-rec__cor--mk-amazon { background: var(--tc-chart-amazon-1); }
/* Barra empilhada proporcional (largura de cada parte pelo flex-grow do JS) */
:where(.tclean-page-conciliacao) .tclean-rec__pilha { display: flex; gap: 2px; height: 14px; overflow: hidden; border-radius: var(--tc-radius-pill); background: var(--tc-track); }
:where(.tclean-page-conciliacao) .tclean-rec__pilha > span { flex: 1 1 0; min-width: 4px; }
:where(.tclean-page-conciliacao) .tclean-rec__pilha--fina { height: 10px; }
:where(.tclean-page-conciliacao) .tclean-rec__barrinha { display: block; height: 6px; overflow: hidden; border-radius: var(--tc-radius-pill); background: var(--tc-track); }
:where(.tclean-page-conciliacao) .tclean-rec__barrinha > span { display: block; height: 100%; border-radius: var(--tc-radius-pill); }
/* Item selecionado como filtro: os irmãos do mesmo grupo esmaecem */
:where(.tclean-page-conciliacao) .tclean-rec__grupo.has-ativo .tclean-rec__alvo:not(.is-active) { opacity: .5; }
:where(.tclean-page-conciliacao) .tclean-rec__alvo { transition: opacity .15s ease, background-color .15s ease, border-color .15s ease; }
:where(.tclean-page-conciliacao) .tclean-rec__alvo:focus-visible { outline: 0; box-shadow: var(--tc-shadow-focus); }

/* Barra fixa do filtro: pílula roxa no topo enquanto a tabela está filtrada (some sem filtro) */
:where(.tclean-page-conciliacao) .tclean-rec__barra-filtro { position: sticky; top: 84px; z-index: 6; display: flex; align-items: center; gap: 12px; width: fit-content; max-width: 100%; height: 40px; margin: 0 auto 16px; padding: 0 6px 0 16px; border-radius: var(--tc-radius-pill); background: var(--tc-ink); color: var(--tc-white); font-size: var(--tc-fs-14); box-shadow: var(--tc-shadow-popover); }
:where(.tclean-page-conciliacao) .tclean-rec__barra-filtro-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(.tclean-page-conciliacao) .tclean-rec__barra-filtro-texto strong { font-weight: 600; }
:where(.tclean-page-conciliacao) .tclean-rec__barra-filtro-ver { flex-shrink: 0; padding: 0; border: 0; background: transparent; color: var(--tc-yellow); font: 600 var(--tc-fs-14) var(--tc-font); white-space: nowrap; cursor: pointer; }
:where(.tclean-page-conciliacao) .tclean-rec__barra-filtro-ver:hover { color: var(--tc-yellow-hover); }
:where(.tclean-page-conciliacao) .tclean-rec__barra-filtro-ver i { margin-left: 2px; font-size: var(--tc-fs-12); }
:where(.tclean-page-conciliacao) .tclean-rec__barra-filtro-limpar { display: inline-flex; flex: 0 0 28px; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--tc-radius-pill); background: var(--tc-white-a15); color: var(--tc-white); font-size: var(--tc-fs-12); cursor: pointer; }
:where(.tclean-page-conciliacao) .tclean-rec__barra-filtro-limpar:hover { background: var(--tc-white-a25); }

/* 1. Resumo do dinheiro: previsto | onde está o dinheiro | por marketplace */
:where(.tclean-page-conciliacao) .tclean-rec-resumo { display: grid; grid-template-columns: minmax(180px, .75fr) minmax(0, 3fr) minmax(200px, .9fr); grid-template-areas: "prev onde mks"; gap: 24px 28px; padding: 24px; }
:where(.tclean-page-conciliacao) .tclean-rec-resumo__previsto { grid-area: prev; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
:where(.tclean-page-conciliacao) .tclean-rec-resumo__valor { font-size: var(--tc-fs-28); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; color: var(--tc-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
:where(.tclean-page-conciliacao) .tclean-rec-resumo__previsto .tclean-rec__aux { font-size: var(--tc-fs-13); line-height: 1.5; }
:where(.tclean-page-conciliacao) .tclean-rec-resumo__previsto .tclean-rec__aux strong { font-weight: 600; color: var(--tc-text); }
:where(.tclean-page-conciliacao) .tclean-rec-resumo__onde { grid-area: onde; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
:where(.tclean-page-conciliacao) .tclean-rec-resumo__situacoes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
:where(.tclean-page-conciliacao) .tclean-rec__sit { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; padding: 10px; border: 1px solid var(--tc-border); border-radius: var(--tc-radius-ctl); background: var(--tc-surface); font-family: inherit; text-align: left; cursor: pointer; }
:where(.tclean-page-conciliacao) .tclean-rec__sit:hover:not(:disabled) { border-color: var(--tc-lilac-200); background: var(--tc-lavender); }
:where(.tclean-page-conciliacao) .tclean-rec__sit.is-active { border-color: var(--tc-ink); background: var(--tc-lavender); box-shadow: inset 0 0 0 1px var(--tc-ink); }
:where(.tclean-page-conciliacao) .tclean-rec__sit.is-zero { opacity: .45; cursor: default; }
:where(.tclean-page-conciliacao) .tclean-rec__sit-nome { display: flex; align-items: center; gap: 6px; max-width: 100%; font-size: var(--tc-fs-12-5); color: var(--tc-muted); white-space: nowrap; }
:where(.tclean-page-conciliacao) .tclean-rec__sit-valor { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: var(--tc-fs-15); font-weight: 600; color: var(--tc-text-strong); white-space: nowrap; font-variant-numeric: tabular-nums; }
:where(.tclean-page-conciliacao) .tclean-rec__sit-valor.is-negativo { color: var(--tc-danger-ink); }
:where(.tclean-page-conciliacao) .tclean-rec__sit-sub { font-size: var(--tc-fs-12); line-height: 1.35; color: var(--tc-faint); }
:where(.tclean-page-conciliacao) .tclean-rec-resumo__mks { grid-area: mks; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
:where(.tclean-page-conciliacao) .tclean-rec-resumo__mk-lista { display: flex; flex-direction: column; gap: 14px; }
:where(.tclean-page-conciliacao) .tclean-rec-resumo__mk { display: flex; flex-direction: column; gap: 6px; }
:where(.tclean-page-conciliacao) .tclean-rec-resumo__mk-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 8px; }
:where(.tclean-page-conciliacao) .tclean-rec-resumo__mk-nome { display: inline-flex; align-items: center; font-size: var(--tc-fs-13-5); color: var(--tc-text); white-space: nowrap; }
:where(.tclean-page-conciliacao) .tclean-rec-resumo__mk-valor { font-size: var(--tc-fs-14); font-weight: 600; color: var(--tc-text-strong); white-space: nowrap; font-variant-numeric: tabular-nums; }
:where(.tclean-page-conciliacao) .tclean-rec-resumo__mk-valor .tclean-rec__aux { font-weight: 400; color: var(--tc-faint); }

/* 2. Quando vou receber | O marketplace pagou certo?: mesma altura (a linha estica os dois; as barras ocupam a sobra) */
:where(.tclean-page-conciliacao) .tclean-rec__card-cheio { display: flex; flex-direction: column; }
:where(.tclean-page-conciliacao) .tclean-rec__corpo-cheio { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
:where(.tclean-page-conciliacao) .tclean-rec-receber__totais { display: flex; gap: 24px; }
:where(.tclean-page-conciliacao) .tclean-rec-receber__total { display: flex; flex-direction: column; align-items: flex-end; }
:where(.tclean-page-conciliacao) .tclean-rec-receber__total > span { font-size: var(--tc-fs-12); color: var(--tc-muted); }
:where(.tclean-page-conciliacao) .tclean-rec-receber__total > strong { font-size: var(--tc-fs-17); font-weight: 600; color: var(--tc-text-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
:where(.tclean-page-conciliacao) .tclean-rec-receber { display: flex; flex: 1 1 auto; flex-direction: column; gap: 8px; }
:where(.tclean-page-conciliacao) .tclean-rec-receber__grafico { display: flex; flex: 1 1 auto; align-items: stretch; gap: 12px; min-height: 230px; }
:where(.tclean-page-conciliacao) .tclean-rec-receber__dias { display: flex; flex: 1 1 auto; gap: 6px; min-width: 0; }
:where(.tclean-page-conciliacao) .tclean-rec-receber__dia { display: flex; flex: 1 1 0; flex-direction: column; align-items: stretch; gap: 4px; min-width: 44px; padding: 6px 2px 4px; border: 0; border-radius: var(--tc-radius-ctl-sm); background: transparent; font-family: inherit; cursor: pointer; }
:where(.tclean-page-conciliacao) .tclean-rec-receber__dia:hover:not(:disabled) { background: var(--tc-lavender); }
:where(.tclean-page-conciliacao) .tclean-rec-receber__dia.is-active { background: var(--tc-lavender); box-shadow: inset 0 0 0 1px var(--tc-ink); }
:where(.tclean-page-conciliacao) .tclean-rec-receber__dia:disabled { cursor: default; }
:where(.tclean-page-conciliacao) .tclean-rec-receber__valor { position: absolute; right: -4px; left: -4px; font-size: var(--tc-fs-11-5); font-weight: 600; line-height: 16px; color: var(--tc-text-strong); text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
:where(.tclean-page-conciliacao) .tclean-rec-receber__trilho { position: relative; flex: 1 1 auto; min-height: 110px; border-bottom: 1px solid var(--tc-border); }
:where(.tclean-page-conciliacao) .tclean-rec-receber__barra { position: absolute; right: 12%; bottom: 0; left: 12%; border-radius: var(--tc-radius-sm) var(--tc-radius-sm) 0 0; background: var(--tc-lilac-200); }
:where(.tclean-page-conciliacao) .tclean-rec-receber__rotulo { font-size: var(--tc-fs-12); font-weight: 600; color: var(--tc-text-soft); text-align: center; white-space: nowrap; }
:where(.tclean-page-conciliacao) .tclean-rec-receber__ped { font-size: var(--tc-fs-11); color: var(--tc-faint); text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
:where(.tclean-page-conciliacao) .tclean-rec-receber__dia.is-hoje .tclean-rec-receber__barra { background: var(--tc-ink); }
:where(.tclean-page-conciliacao) .tclean-rec-receber__dia.is-hoje .tclean-rec-receber__rotulo { color: var(--tc-ink); }
:where(.tclean-page-conciliacao) .tclean-rec-receber__dia.is-vencido .tclean-rec-receber__barra { background: var(--tc-warning); }
:where(.tclean-page-conciliacao) .tclean-rec-receber__dia.is-vencido .tclean-rec-receber__valor,
:where(.tclean-page-conciliacao) .tclean-rec-receber__dia.is-vencido .tclean-rec-receber__rotulo { color: var(--tc-warning-strong); }
:where(.tclean-page-conciliacao) .tclean-rec-receber__dia.is-zero .tclean-rec-receber__valor { color: var(--tc-faint); font-weight: 400; }
:where(.tclean-page-conciliacao) .tclean-rec-receber__depois { display: flex; flex: 0 0 132px; flex-direction: column; align-self: flex-end; gap: 4px; margin-bottom: 38px; padding: 12px; border: 1px dashed var(--tc-gray-300); border-radius: var(--tc-radius-ctl); background: var(--tc-bg); }
:where(.tclean-page-conciliacao) .tclean-rec-receber__depois-rotulo { font-size: var(--tc-fs-12); color: var(--tc-muted); }
:where(.tclean-page-conciliacao) .tclean-rec-receber__depois strong { font-size: var(--tc-fs-16); font-weight: 600; color: var(--tc-text-strong); white-space: nowrap; font-variant-numeric: tabular-nums; }
:where(.tclean-page-conciliacao) .tclean-rec-conf { display: flex; flex: 1 1 auto; flex-direction: column; gap: 14px; }
:where(.tclean-page-conciliacao) .tclean-rec-conf__topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
:where(.tclean-page-conciliacao) .tclean-rec-conf__pct { font-size: var(--tc-fs-32); font-weight: 600; line-height: 1; color: var(--tc-success-ink); font-variant-numeric: tabular-nums; }
:where(.tclean-page-conciliacao) .tclean-rec-conf__topo .tclean-rec__aux { font-size: var(--tc-fs-13); }
:where(.tclean-page-conciliacao) .tclean-rec-conf__lista { display: flex; flex-direction: column; }
:where(.tclean-page-conciliacao) .tclean-rec-conf__item { padding: 3px 0; border-top: 1px solid var(--tc-gray-100); }
:where(.tclean-page-conciliacao) .tclean-rec-conf__linha { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto minmax(88px, auto); align-items: center; gap: 10px; width: 100%; padding: 8px 6px; border: 0; border-radius: var(--tc-radius-ctl-sm); background: transparent; color: var(--tc-text); font: 500 var(--tc-fs-14) var(--tc-font); text-align: left; cursor: pointer; }
:where(.tclean-page-conciliacao) .tclean-rec-conf__linha:hover:not(:disabled) { background: var(--tc-lavender); }
:where(.tclean-page-conciliacao) .tclean-rec-conf__linha.is-active { background: var(--tc-lavender); box-shadow: inset 2px 0 0 var(--tc-ink); }
:where(.tclean-page-conciliacao) .tclean-rec-conf__linha.is-zero { opacity: .45; cursor: default; }
:where(.tclean-page-conciliacao) .tclean-rec-conf__nome { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
:where(.tclean-page-conciliacao) .tclean-rec-conf__dica { font-size: var(--tc-fs-12); font-weight: 400; color: var(--tc-faint); }
:where(.tclean-page-conciliacao) .tclean-rec-conf__ped { font-size: var(--tc-fs-13); font-weight: 400; color: var(--tc-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
:where(.tclean-page-conciliacao) .tclean-rec-conf__valor { font-weight: 600; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
:where(.tclean-page-conciliacao) .tclean-rec-conf__valor--conferido { color: var(--tc-success-ink); }
:where(.tclean-page-conciliacao) .tclean-rec-conf__valor--pendente { color: var(--tc-text-soft); }
:where(.tclean-page-conciliacao) .tclean-rec-conf__valor--menos { color: var(--tc-danger-ink); }
:where(.tclean-page-conciliacao) .tclean-rec-conf__valor--mais { color: var(--tc-info); }
:where(.tclean-page-conciliacao) .tclean-rec-conf__motivos { display: flex; flex-wrap: wrap; gap: 4px 6px; padding: 0 6px 6px 24px; }
:where(.tclean-page-conciliacao) .tclean-rec-conf__motivo { padding: 3px 10px; border: 0; border-radius: var(--tc-radius-ctl-sm); background: var(--tc-gray-50); color: var(--tc-text-soft); font: 400 var(--tc-fs-12) var(--tc-font); text-align: left; cursor: pointer; }
:where(.tclean-page-conciliacao) .tclean-rec-conf__motivo:hover { background: var(--tc-lavender); color: var(--tc-ink); }
:where(.tclean-page-conciliacao) .tclean-rec-conf__motivo.is-active { background: var(--tc-lavender); color: var(--tc-ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--tc-ink); }
:where(.tclean-page-conciliacao) .tclean-rec-conf > .tclean-rec__nota { margin-top: auto; }

/* 3. Previsto por dia: altura fixa (o card não pula ao trocar Marketplace | Situação) */
:where(.tclean-page-conciliacao) .tclean-rec__grafico-corpo { padding: 12px 16px 16px; }
:where(.tclean-page-conciliacao) .tclean-rec__grafico { min-height: 280px; }

/* 4. Pedidos: filtro ativo no título */
:where(.tclean-page-conciliacao) .tclean-rec__lista-titulo { flex-wrap: wrap; }
:where(.tclean-page-conciliacao) .tclean-rec__filtros-ativos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
:where(.tclean-page-conciliacao) .tclean-rec__filtro { padding-right: 4px; font-weight: 600; }
:where(.tclean-page-conciliacao) .tclean-rec__filtro-x { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 2px; padding: 0; border: 0; border-radius: var(--tc-radius-pill); background: var(--tc-border-soft); color: inherit; font-size: var(--tc-fs-10); cursor: pointer; }
:where(.tclean-page-conciliacao) .tclean-rec__filtro-x:hover { background: var(--tc-accent-soft); }
:where(.tclean-page-conciliacao) .tclean-rec__todos { padding: 0; border: 0; background: transparent; font-family: inherit; text-decoration: underline; cursor: pointer; }
#table_conciliacao { table-layout: fixed; width: 100%; min-width: 1970px; }
#table_conciliacao .tclean-pedido-produto { max-width: 100%; overflow: hidden; }
#table_conciliacao th, #table_conciliacao td { box-sizing: border-box; }
#table_conciliacao tbody td { padding-top: 10px !important; padding-bottom: 10px !important; font-variant-numeric: tabular-nums; }
:where(.tclean-page-conciliacao) .tclean-rec__cartoes { display: none; }
:where(.tclean-page-conciliacao) .tclean-rec__cartoes .tclean-live-card { align-items: flex-start; }
:where(.tclean-page-conciliacao) .tclean-rec__cartao-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
:where(.tclean-page-conciliacao) .tclean-rec__cartao-chips .tclean-chip { height: 22px; font-size: var(--tc-fs-11-5); }
:where(.tclean-page-conciliacao) .tclean-rec__cartao-valor { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
:where(.tclean-page-conciliacao) .tclean-rec__cartao-valor strong { font-size: var(--tc-fs-14); color: var(--tc-text-strong); }

/* Painel do pedido (.modal.tclean-sheet--lado) */
:where(.tclean-page-conciliacao) .tclean-rec-ped__head { display: flex; align-items: flex-start; gap: 14px; padding: 20px 22px; border-bottom: 1px solid var(--tc-border); }
:where(.tclean-page-conciliacao) .tclean-rec-ped__titulos { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
:where(.tclean-page-conciliacao) .tclean-rec-ped__sub { font-size: var(--tc-fs-12-5); color: var(--tc-muted); }
:where(.tclean-page-conciliacao) .tclean-rec-ped__titulo { margin: 0; font-family: var(--tc-mono); font-size: var(--tc-fs-17); font-weight: 600; color: var(--tc-text-strong); }
:where(.tclean-page-conciliacao) .tclean-rec-ped__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
#modal_rec_pedido .modal-body.tclean-rec-ped__body { padding: 18px 22px 26px !important; }
:where(.tclean-page-conciliacao) #rec_ped_corpo { display: flex; flex-direction: column; gap: 18px; }
:where(.tclean-page-conciliacao) .tclean-rec-ped__caixas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
:where(.tclean-page-conciliacao) .tclean-rec-ped__caixa { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px; border: 1px solid var(--tc-border); border-radius: var(--tc-radius-ctl); background: var(--tc-surface); }
:where(.tclean-page-conciliacao) .tclean-rec-ped__caixa > span { font-size: var(--tc-fs-12); color: var(--tc-muted); }
:where(.tclean-page-conciliacao) .tclean-rec-ped__caixa > strong { font-size: var(--tc-fs-17); font-weight: 600; color: var(--tc-text-strong); font-variant-numeric: tabular-nums; }
:where(.tclean-page-conciliacao) .tclean-rec-ped__secao { display: flex; flex-direction: column; gap: 6px; }
:where(.tclean-page-conciliacao) .tclean-rec-ped__secao-titulo { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: var(--tc-fs-11-5); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tc-muted); }
:where(.tclean-page-conciliacao) .tclean-rec-ped__secao-titulo .tclean-rec__aux { letter-spacing: 0; text-transform: none; }
:where(.tclean-page-conciliacao) .tclean-rec-ped__datas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
:where(.tclean-page-conciliacao) .tclean-rec-ped__data { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-left: 3px solid var(--tc-lilac-100); background: var(--tc-gray-50); border-radius: var(--tc-radius-xs); }
:where(.tclean-page-conciliacao) .tclean-rec-ped__data.is-ok { border-left-color: var(--tc-success); }
:where(.tclean-page-conciliacao) .tclean-rec-ped__data > span { font-size: var(--tc-fs-12); color: var(--tc-muted); }
:where(.tclean-page-conciliacao) .tclean-rec-ped__data > strong { font-size: var(--tc-fs-14); font-weight: 600; color: var(--tc-text-strong); font-variant-numeric: tabular-nums; }
:where(.tclean-page-conciliacao) .tclean-rec-ped__data > small { font-size: var(--tc-fs-11-5); line-height: 1.35; color: var(--tc-muted); }
:where(.tclean-page-conciliacao) .tclean-rec-ped__linha { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--tc-gray-100); font-size: var(--tc-fs-13); font-variant-numeric: tabular-nums; }
:where(.tclean-page-conciliacao) .tclean-rec-ped__linha:last-child { border-bottom: 0; }
:where(.tclean-page-conciliacao) .tclean-rec-ped__linha > span:last-child { flex-shrink: 0; text-align: right; }
:where(.tclean-page-conciliacao) .tclean-rec-ped__linha small { color: var(--tc-muted); }
:where(.tclean-page-conciliacao) .tclean-rec-ped__linha.is-forte { font-weight: 600; }
:where(.tclean-page-conciliacao) .tclean-rec-ped__linha.is-negativo > span:last-child { color: var(--tc-danger-ink); }
:where(.tclean-page-conciliacao) .tclean-rec-ped__item { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(.tclean-page-conciliacao) .tclean-rec-ped__linha--produto { align-items: center; }
:where(.tclean-page-conciliacao) .tclean-rec-ped__produto { flex: 1; max-width: none; cursor: default; }
:where(.tclean-page-conciliacao) .tclean-rec-ped__mov { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--tc-border); border-radius: var(--tc-radius-ctl); }
:where(.tclean-page-conciliacao) .tclean-rec-ped__mov.is-fora { border-style: dashed; }
:where(.tclean-page-conciliacao) .tclean-rec-ped__mov-topo { display: flex; justify-content: space-between; gap: 10px; font-size: var(--tc-fs-14); font-variant-numeric: tabular-nums; }
:where(.tclean-page-conciliacao) .tclean-rec-ped__mov-nome { font-weight: 500; color: var(--tc-text-strong); }
:where(.tclean-page-conciliacao) .tclean-rec-ped__mov-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--tc-fs-12); color: var(--tc-muted); }
:where(.tclean-page-conciliacao) .tclean-rec-ped__mov-meta .tclean-chip { height: 20px; font-size: var(--tc-fs-11); }
:where(.tclean-page-conciliacao) .tclean-rec-ped__mov-conta { padding-left: 10px; border-left: 2px solid var(--tc-gray-100); }
:where(.tclean-page-conciliacao) .tclean-rec-ped__mov-conta .tclean-rec-ped__linha { padding: 3px 0; border-bottom: 0; font-size: var(--tc-fs-12-5); color: var(--tc-text-soft); }
:where(.tclean-page-conciliacao) .tclean-rec-ped__link { align-self: flex-start; text-decoration: none; }

@media (max-width: 1399.98px) {
  /* Resumo em duas linhas: previsto | por marketplace em cima, onde está o dinheiro embaixo */
  :where(.tclean-page-conciliacao) .tclean-rec-resumo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "prev mks" "onde onde"; }
}
@media (max-width: 767.98px) {
  :where(.tclean-page-conciliacao) #rec_periodo { flex-wrap: wrap; }
  :where(.tclean-page-conciliacao) #rec_periodo .tclean-segmented { flex: 1 1 100%; }
  :where(.tclean-page-conciliacao) #rec_periodo .tclean-segmented__item { flex: 1; }
  :where(.tclean-page-conciliacao) #rec_periodo .tclean-date-picker { flex: 1 1 auto; min-width: 0; }
  :where(.tclean-page-conciliacao) .tclean-rec__breve { flex: 1 1 100%; }
  /* Barra do filtro: compacta, na largura da tela, logo abaixo do header */
  :where(.tclean-page-conciliacao) .tclean-rec__barra-filtro { top: 72px; gap: 8px; width: 100%; height: 36px; margin-bottom: 12px; padding-left: 14px; font-size: var(--tc-fs-13); }
  :where(.tclean-page-conciliacao) .tclean-rec__barra-filtro-texto { flex: 1 1 auto; }
  :where(.tclean-page-conciliacao) .tclean-rec__barra-filtro-ver { font-size: var(--tc-fs-13); }
  :where(.tclean-page-conciliacao) .tclean-rec__barra-filtro-prefixo { display: none; }
  /* Resumo empilhado */
  :where(.tclean-page-conciliacao) .tclean-rec-resumo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "prev" "onde" "mks"; gap: 22px; padding: 18px 16px; }
  :where(.tclean-page-conciliacao) .tclean-rec-resumo__valor { font-size: var(--tc-fs-28); }
  :where(.tclean-page-conciliacao) .tclean-rec-resumo__situacoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Quando vou receber: barras com rolagem lateral; "Depois" embaixo, numa linha */
  :where(.tclean-page-conciliacao) .tclean-rec-receber__totais { gap: 16px; }
  :where(.tclean-page-conciliacao) .tclean-rec-receber__total { align-items: flex-start; }
  :where(.tclean-page-conciliacao) .tclean-rec-receber__grafico { flex-direction: column; min-height: 0; }
  :where(.tclean-page-conciliacao) .tclean-rec-receber__dias { min-height: 210px; overflow-x: auto; padding-bottom: 4px; }
  :where(.tclean-page-conciliacao) .tclean-rec-receber__dia { min-width: 50px; }
  :where(.tclean-page-conciliacao) .tclean-rec-receber__depois { flex: none; flex-direction: row; flex-wrap: wrap; align-items: baseline; align-self: stretch; gap: 4px 10px; margin-bottom: 0; }
  :where(.tclean-page-conciliacao) .tclean-rec-conf__linha { grid-template-columns: 8px minmax(0, 1fr) auto auto; gap: 8px; padding: 8px 4px; }
  :where(.tclean-page-conciliacao) .tclean-rec-conf__motivos { padding-left: 20px; }
  :where(.tclean-page-conciliacao) .tclean-rec__grafico { min-height: 220px; }
  /* Tabela vira cartões, sem a caixa e sem rolagem lateral */
  :where(.tclean-page-conciliacao) #table_conciliacao { display: none; }
  :where(.tclean-page-conciliacao) .tclean-rec__cartoes { display: block; }
  :where(.tclean-page-conciliacao) #rec_lista .tclean-table-wrap { border: 0; border-radius: 0; overflow: visible; }
  :where(.tclean-page-conciliacao) #rec_card_lista .tclean-card__tools { width: 100%; }
  :where(.tclean-page-conciliacao) #rec_card_lista .tclean-search { flex: 1; }
  :where(.tclean-page-conciliacao) #rec_card_lista .pagination { flex-wrap: wrap; }
  /* Painel do pedido de baixo pra cima */
  :where(.tclean-page-conciliacao) .tclean-rec-ped__head { padding: 6px 18px 14px; }
  #modal_rec_pedido .modal-body.tclean-rec-ped__body { padding: 14px 16px 24px !important; }
  :where(.tclean-page-conciliacao) .tclean-rec-ped__caixas,
  :where(.tclean-page-conciliacao) .tclean-rec-ped__datas { grid-template-columns: minmax(0, 1fr); }
  :where(.tclean-page-conciliacao) .tclean-rec-ped__caixas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  :where(.tclean-page-conciliacao) .tclean-rec-ped__caixa { padding: 10px; }
  :where(.tclean-page-conciliacao) .tclean-rec-ped__caixa > strong { font-size: var(--tc-fs-14); }
}

/* ---------- Showcase do design system (design-system.php) ----------
   Moldura da página de showcase: índice lateral, seções, item de componente,
   prévia e bloco de código. Classes tclean-dss-* (só nesta página).
   Markup: componentes/design_system/_helpers.php · JS: js/design_system.js */
.tclean-dss {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

/* Índice */
.tclean-dss-toc {
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  padding: 14px 14px 18px;
  background: var(--tc-surface);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
}
.tclean-dss-toc__meta {
  margin: 0 0 8px;
  font-size: var(--tc-fs-12);
  color: var(--tc-faint);
  line-height: 1.45;
}
.tclean-dss-toc .tclean-dss-toc__section {
  display: block;
  margin-top: 12px;
  font-size: var(--tc-fs-13);
  font-weight: 600;
  color: var(--tc-text);
  text-decoration: none;
}
.tclean-dss-toc .tclean-dss-toc__item {
  display: block;
  padding: 3px 0 3px 10px;
  border-left: 2px solid var(--tc-border);
  font-size: var(--tc-fs-12-5);
  color: var(--tc-muted);
  text-decoration: none;
  line-height: 1.35;
}
.tclean-dss-toc .tclean-dss-toc__section:hover,
.tclean-dss-toc .tclean-dss-toc__item:hover {
  color: var(--tc-ink);
  text-decoration: none;
}
.tclean-dss-toc .tclean-dss-toc__item.is-active {
  color: var(--tc-ink);
  font-weight: 500;
  border-left-color: var(--tc-yellow);
}

/* Seções e itens */
.tclean-dss-main { min-width: 0; }
.tclean-dss-section {
  margin-bottom: 48px;
  scroll-margin-top: 80px;
}
.tclean-dss-section__title {
  margin: 0 0 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--tc-border);
  font-size: var(--tc-fs-26);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--tc-ink);
}
.tclean-dss-section__intro {
  max-width: 860px;
  margin: 8px 0 24px;
  font-size: var(--tc-fs-14);
  color: var(--tc-muted);
  line-height: 1.55;
}
.tclean-dss-item {
  margin: 0 0 36px;
  scroll-margin-top: 80px;
}
.tclean-dss-item__head { margin-bottom: 10px; }
.tclean-dss-item__title {
  display: flex;
  align-items: center;
  margin: 0 0 6px;
  font-size: var(--tc-fs-17);
  font-weight: 600;
  color: var(--tc-text-strong);
}
.tclean-dss-item__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  margin-right: 8px;
  padding: 0 6px;
  border-radius: var(--tc-radius-pill);
  background: var(--tc-lavender);
  color: var(--tc-ink);
  font-size: var(--tc-fs-11);
  font-weight: 600;
}
.tclean-dss-item__purpose {
  max-width: 860px;
  margin: 0 0 8px;
  font-size: var(--tc-fs-14);
  color: var(--tc-text);
  line-height: 1.55;
}
.tclean-dss-item__classes {
  display: block;
  margin: 0 0 8px;
  padding: 6px 10px;
  border-radius: var(--tc-radius-sm);
  background: var(--tc-gray-50);
  color: var(--tc-accent);
  font-family: var(--tc-mono);
  font-size: var(--tc-fs-12);
  white-space: normal;
  word-break: break-word;
}
.tclean-dss-item__where,
.tclean-dss-item__notes {
  max-width: 860px;
  margin: 0 0 4px;
  font-size: var(--tc-fs-12-5);
  color: var(--tc-muted);
  line-height: 1.5;
}
.tclean-dss-item__notes { color: var(--tc-faint); }
.tclean-dss-item__toolbar { margin: 0 0 8px; }
.tclean-dss-section__intro code,
.tclean-dss-item__purpose code,
.tclean-dss-item__where code,
.tclean-dss-item__notes code,
.tclean-dss-toc__meta code {
  padding: 1px 5px;
  border-radius: var(--tc-radius-xs);
  background: var(--tc-gray-50);
  color: var(--tc-accent);
  font-family: var(--tc-mono);
  font-size: 0.92em;
}

/* Exemplo: rótulo, prévia e bloco de código */
.tclean-dss-demo { margin: 12px 0; }
.tclean-dss-demo__label {
  margin-bottom: 6px;
  font-size: var(--tc-fs-12);
  font-weight: 600;
  color: var(--tc-muted);
}
.tclean-dss-preview {
  padding: 20px;
  background: var(--tc-bg);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
}
.tclean-dss-preview--row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.tclean-dss-preview--col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.tclean-dss-preview--block > .mb-3:last-child { margin-bottom: 0 !important; }
.tclean-dss-fig {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
}
.tclean-dss-fig figcaption {
  font-family: var(--tc-mono);
  font-size: var(--tc-fs-11-5);
  color: var(--tc-faint);
  max-width: none;
  overflow: visible;
  white-space: nowrap;
  text-overflow: clip;
}
/* O shell do onboarding ocupa a tela inteira na página real; aqui fica contido */
.tclean-dss-preview .tclean-auth-shell {
  min-height: 0;
  padding: 32px 16px;
  border-radius: var(--tc-radius-lg);
}
/* As telas de onboarding não ficam dentro de .app-container; aqui ficam, e a regra
   de link do tema (.app-container a) pintaria os links de roxo */
.app-container .tclean-dss-preview .tclean-auth-cta,
.app-container .tclean-dss-preview .tclean-auth-cta:hover { color: var(--tc-white); }
.app-container .tclean-dss-preview .tclean-auth-ghost,
.app-container .tclean-dss-preview .tclean-auth-help { color: var(--tc-muted); }
.app-container .tclean-dss-preview .tclean-auth-ghost:hover,
.app-container .tclean-dss-preview .tclean-auth-help:hover { color: var(--tc-ink); }

.tclean-dss-code {
  margin-top: 8px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-ctl);
  background: var(--tc-surface);
  overflow: hidden;
}
.tclean-dss-code__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px 7px 12px;
  list-style: none;
  cursor: pointer;
  font-size: var(--tc-fs-12);
  font-weight: 600;
  color: var(--tc-muted);
}
.tclean-dss-code__summary::-webkit-details-marker { display: none; }
.tclean-dss-code__summary > span::before {
  content: "▸";
  display: inline-block;
  margin-right: 6px;
  transition: transform .15s ease;
}
.tclean-dss-code[open] .tclean-dss-code__summary > span::before { transform: rotate(90deg); }
.tclean-dss-code__summary:hover { color: var(--tc-ink); }
.tclean-dss-code__copy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-sm);
  background: var(--tc-surface);
  color: var(--tc-ink);
  font-family: inherit;
  font-size: var(--tc-fs-11-5);
  font-weight: 500;
  cursor: pointer;
}
.tclean-dss-code__copy:hover {
  background: var(--tc-border-soft);
  border-color: var(--tc-accent);
}
.tclean-dss-code__copy.is-copied {
  color: var(--tc-success-ink);
  border-color: var(--tc-success-border);
  background: var(--tc-success-bg);
}
.tclean-dss-code__pre {
  max-height: 440px;
  margin: 0;
  padding: 14px 16px;
  overflow: auto;
  background: var(--tc-text-strong);
  color: var(--tc-gray-100);
  font-family: var(--tc-mono);
  font-size: var(--tc-fs-12-5);
  line-height: 1.6;
  white-space: pre;
  tab-size: 4;
}
.tclean-dss-code__pre code {
  color: inherit;
  font-size: inherit;
  background: none;
  padding: 0;
}

/* Tokens */
.tclean-dss-tokens {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 10px;
}
.tclean-dss-token {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px;
  background: var(--tc-surface);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-ctl);
}
.tclean-dss-token__swatch {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-ctl-sm);
}
.tclean-dss-token__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tclean-dss-token__name {
  padding: 0;
  border: 0;
  background: none;
  color: var(--tc-ink);
  font-family: var(--tc-mono);
  font-size: var(--tc-fs-12-5);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  word-break: break-all;
}
.tclean-dss-token__name:hover { text-decoration: underline; }
.tclean-dss-token__name.is-copied { color: var(--tc-success-ink); }
.tclean-dss-token__value {
  padding: 0;
  background: none;
  color: var(--tc-muted);
  font-family: var(--tc-mono);
  font-size: var(--tc-fs-11-5);
  word-break: break-all;
}
.tclean-dss-token__use {
  font-size: var(--tc-fs-12);
  color: var(--tc-text);
  line-height: 1.4;
}
.tclean-dss-type {
  padding: 4px 16px;
  background: var(--tc-surface);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
}
.tclean-dss-type__row {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--tc-border);
}
.tclean-dss-type__row:last-child { border-bottom: 0; }
.tclean-dss-type__sample--mono { font-family: var(--tc-mono); }
.tclean-dss-type__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tclean-dss-type__sample {
  overflow: hidden;
  color: var(--tc-text);
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1.25;
}
.tclean-dss-shapes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 22px 18px;
  padding: 20px;
  background: var(--tc-bg);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
}
.tclean-dss-shape {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.tclean-dss-shape__box {
  width: 72px;
  height: 72px;
  margin-bottom: 8px;
  background: var(--tc-lavender);
  border: 1px solid var(--tc-lavender-line);
}
.tclean-dss-shape__box--shadow {
  width: 100%;
  margin: 8px 0 14px;
  background: var(--tc-surface);
  border: 0;
  border-radius: var(--tc-radius-lg);
}

/* Tabelas de exemplo (regra por ID, como toda tabela nova) */
#dss_table_demo { table-layout: fixed; width: 100%; min-width: 910px; }
#dss_table_demo th, #dss_table_demo td { box-sizing: border-box; }
#dss_table_demo tbody td { padding-top: 10px !important; padding-bottom: 10px !important; }
#dss_table_demo .tclean-pedido-produto { max-width: 100%; overflow: hidden; }
#dss_table_sticky { table-layout: fixed; width: 100%; min-width: 1100px; }
#dss_table_sticky th, #dss_table_sticky td { box-sizing: border-box; }

@media (max-width: 991.98px) {
  .tclean-dss { grid-template-columns: minmax(0, 1fr); }
  .tclean-dss-toc {
    position: static;
    max-height: 260px;
  }
  .tclean-dss-type__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}


/* ==========================================================================
   Site público (home, /precos, /extensao, /app, /inteligencia-artificial)
   Componentes tclean-site-*, só com tokens --tc-*. As páginas do site carregam
   SÓ este arquivo (sem base.css/Bootstrap): o bloco "Base" abaixo faz o reset,
   escopado em body.tclean-site para não mexer no painel.
   Markup: adm/componentes/site/*.php; comportamento: adm/js/site.js.
   Referência visual: desenho aprovado no Claude Design (Main/Precos/Extensao/App/IA).
   ========================================================================== */

/* ---------- Base ---------- */
.tclean-site {
  margin: 0;
  background: var(--tc-bg);
  color: var(--tc-text);
  font-family: var(--tc-font);
  font-size: var(--tc-fs-16);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}
:where(.tclean-site) *,
:where(.tclean-site) *::before,
:where(.tclean-site) *::after { box-sizing: border-box; }
:where(.tclean-site) img,
:where(.tclean-site) video,
:where(.tclean-site) svg { max-width: 100%; }
:where(.tclean-site) img,
:where(.tclean-site) video { display: block; height: auto; }
:where(.tclean-site) a { color: var(--tc-ink); }
:where(.tclean-site) a:hover { color: var(--tc-ink-hover); }
:where(.tclean-site) h1,
:where(.tclean-site) h2,
:where(.tclean-site) h3,
:where(.tclean-site) p,
:where(.tclean-site) figure,
:where(.tclean-site) blockquote { margin: 0; }
:where(.tclean-site) button { font-family: inherit; }
:where(.tclean-site) [hidden] { display: none !important; }
:where(.tclean-site) [id] { scroll-margin-top: 80px; }
:where(.tclean-site) :focus-visible { outline: 2px solid var(--tc-accent); outline-offset: 2px; }
.tclean-site-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.tclean-site-pular { position: absolute; left: 16px; top: -60px; z-index: 60; background: var(--tc-ink); color: var(--tc-white); padding: 10px 14px; border-radius: var(--tc-radius-ctl); text-decoration: none; }
.tclean-site-pular:focus { top: 12px; color: var(--tc-white); }
.tclean-site-icone { width: 1em; height: 1em; flex-shrink: 0; fill: currentColor; vertical-align: -0.125em; }
.tclean-site-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.tclean-site-wrap--estreito { max-width: 1000px; }
.tclean-site-wrap--largo { max-width: 1240px; }
.tclean-site-so-mob { display: none !important; }

/* ---------- Logo (SVG inline: símbolo amarelo + texto roxo; --claro no rodapé) ---------- */
.tclean-site-logo { display: block; width: 115px; height: 28px; }
.tclean-site-logo__mark { fill: none; stroke: var(--tc-yellow); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.tclean-site-logo__ponto { fill: var(--tc-yellow); stroke: none; }
.tclean-site-logo__texto { fill: var(--tc-ink); }
.tclean-site-logo--claro .tclean-site-logo__texto { fill: var(--tc-white); }
.tclean-site-simbolo { display: inline-block; width: 16px; height: 13px; flex-shrink: 0; }
.tclean-site-simbolo .tclean-site-logo__mark { stroke-width: 5; }
.tclean-site-simbolo--verde .tclean-site-logo__mark { stroke: var(--tc-success-ink); stroke-width: 6; }
.tclean-site-simbolo--vermelho .tclean-site-logo__mark { stroke: var(--tc-danger-ink); stroke-width: 6; }

/* ---------- Header ---------- */
.tclean-site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--tc-bg) 90%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--tc-border);
}
.tclean-site-header__inner { height: 64px; display: flex; align-items: center; gap: 32px; }
.tclean-site-header__logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.tclean-site-header__nav { display: flex; gap: 26px; font-size: var(--tc-fs-14-5); font-weight: 500; }
.tclean-site-header__link { color: var(--tc-text); text-decoration: none; white-space: nowrap; }
.tclean-site-header__link:hover { color: var(--tc-ink); }
.tclean-site-header__link[aria-current="page"] {
  color: var(--tc-ink);
  text-decoration: underline;
  text-decoration-color: var(--tc-yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}
.tclean-site-header__acoes { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.tclean-site-header__entrar {
  height: 40px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  font-size: var(--tc-fs-14-5);
  font-weight: 500;
  color: var(--tc-ink);
  text-decoration: none;
  border-radius: var(--tc-radius-ctl);
}
.tclean-site-header__entrar:hover { background: var(--tc-lavender); }
.tclean-site-header__menu {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: var(--tc-radius-ctl);
  border: 1px solid var(--tc-border);
  background: var(--tc-surface);
  color: var(--tc-ink);
  align-items: center;
  justify-content: center;
  font-size: var(--tc-fs-18);
  cursor: pointer;
}
.tclean-site-menu {
  border-top: 1px solid var(--tc-border);
  background: var(--tc-surface);
  padding: 8px 16px 16px;
  display: flex;
  flex-direction: column;
}
.tclean-site-menu__link {
  min-height: 48px;
  display: flex;
  align-items: center;
  font-size: var(--tc-fs-16);
  font-weight: 500;
  color: var(--tc-text);
  text-decoration: none;
  border-bottom: 1px solid var(--tc-border);
}
.tclean-site-menu__link[aria-current="page"] { color: var(--tc-ink); }
.tclean-site-menu .tclean-site-btn { margin-top: 14px; }

/* ---------- Botões ---------- */
.tclean-site-btn {
  height: 52px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: var(--tc-radius-lg);
  border: 1px solid transparent;
  font-size: var(--tc-fs-16);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.tclean-site-btn .tclean-site-icone { font-size: var(--tc-fs-17); }
.tclean-site-btn--primario { background: var(--tc-ink); color: var(--tc-white); }
.tclean-site-btn--primario:hover { background: var(--tc-ink-hover); color: var(--tc-white); }
.tclean-site-btn--secundario { background: var(--tc-surface); color: var(--tc-ink); border-color: var(--tc-border); font-size: var(--tc-fs-15); padding: 0 20px; }
.tclean-site-btn--secundario:hover { background: var(--tc-lavender); color: var(--tc-ink); }
.tclean-site-btn--claro { background: var(--tc-surface); color: var(--tc-ink); font-weight: 600; padding: 0 26px; height: 54px; }
.tclean-site-btn--claro:hover { background: var(--tc-lavender); color: var(--tc-ink); }
/* Exceção do amarelo (DESIGN.md › Colors): botão de ação SOMENTE sobre fundo roxo/escuro (faixa .tclean-site-cta),
   texto roxo Emori sobre amarelo = 8,25:1 (hover 9,5:1). Nunca sobre fundo claro. */
.tclean-site-btn--destaque { background: var(--tc-yellow); color: var(--tc-ink); font-weight: 600; padding: 0 26px; height: 54px; }
.tclean-site-btn--destaque:hover { background: var(--tc-yellow-hover); color: var(--tc-ink); }
.tclean-site-btn--destaque:focus-visible { outline-color: var(--tc-white); }
.tclean-site-btn--loja { background: var(--tc-text-strong); color: var(--tc-white); height: 54px; padding: 0 18px; }
.tclean-site-btn--loja:hover { background: var(--tc-ink); color: var(--tc-white); }
.tclean-site-btn--loja .tclean-site-icone { font-size: var(--tc-fs-22); }
.tclean-site-btn__loja { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.tclean-site-btn__loja small { font-size: var(--tc-fs-11); color: var(--tc-white-a80); font-weight: 400; }
.tclean-site-btn__loja strong { font-size: var(--tc-fs-16); font-weight: 600; }
.tclean-site-btn--md { height: 44px; padding: 0 18px; font-size: var(--tc-fs-14-5); border-radius: var(--tc-radius-ctl); }
.tclean-site-btn--sm { height: 40px; padding: 0 16px; font-size: var(--tc-fs-14-5); border-radius: var(--tc-radius-ctl); }
.tclean-site-btn--bloco { width: 100%; }
.tclean-site-btn--quebra { white-space: normal; text-align: center; min-height: 44px; height: auto; padding-top: 10px; padding-bottom: 10px; }

/* ---------- Textos de seção ---------- */
.tclean-site-eyebrow { font-size: var(--tc-fs-12); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tc-accent); }
.tclean-site-h1 { font-size: var(--tc-fs-site-h1); line-height: 1.05; font-weight: 500; letter-spacing: -0.035em; color: var(--tc-text-strong); }
.tclean-site-h1--home { font-size: var(--tc-fs-site-hero); line-height: 1.04; }
.tclean-site-h1 em { font-style: normal; color: var(--tc-ink); }
.tclean-site-marca {
  color: var(--tc-ink);
  text-decoration: underline;
  text-decoration-color: var(--tc-yellow);
  text-decoration-thickness: 6px;
  text-underline-offset: 8px;
  text-decoration-skip-ink: none;
}
.tclean-site-h2 { font-size: var(--tc-fs-site-h2); line-height: 1.1; font-weight: 500; letter-spacing: -0.03em; color: var(--tc-text-strong); }
.tclean-site-h3 { font-size: var(--tc-fs-20); font-weight: 600; color: var(--tc-ink); margin: 0; }
.tclean-site-lead { font-size: var(--tc-fs-site-lead); font-weight: 300; line-height: 1.55; color: var(--tc-text-soft); max-width: 560px; }
.tclean-site-texto { font-size: var(--tc-fs-16); font-weight: 300; color: var(--tc-text-soft); }
.tclean-site-legenda { font-size: var(--tc-fs-13); color: var(--tc-text-soft); } /* text-soft: contraste AA (muted dava 3,35:1) */
.tclean-site-legenda a { font-weight: 500; }
.tclean-site-tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--tc-radius-pill);
  background: var(--tc-surface);
  border: 1px solid var(--tc-border);
  font-size: var(--tc-fs-13);
  font-weight: 500;
  color: var(--tc-text-soft);
}
.tclean-site-tag .tclean-site-icone { color: var(--tc-ink); }
.tclean-site-selo { align-self: flex-start; display: inline-flex; align-items: center; font-size: var(--tc-fs-12); font-weight: 600; border-radius: var(--tc-radius-sm); padding: 2px 9px; }
.tclean-site-selo--gratis { color: var(--tc-success-ink); background: var(--tc-success-soft); }
.tclean-site-selo--conta { color: var(--tc-white); background: var(--tc-ink); }
.tclean-site-selo--lavanda { color: var(--tc-ink); background: var(--tc-lavender); }
.tclean-site-exemplo { font-size: var(--tc-fs-11-5); font-weight: 600; color: var(--tc-warning-ink); background: var(--tc-warning-bg); border-radius: var(--tc-radius-sm); padding: 2px 8px; white-space: nowrap; }
.tclean-site-checks { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: var(--tc-fs-13-5); color: var(--tc-text-soft); }
.tclean-site-checks li { display: flex; align-items: center; gap: 6px; }
.tclean-site-checks .tclean-site-icone { color: var(--tc-success-ink); }
.tclean-site-checks--centro { justify-content: center; gap: 10px 24px; }
.tclean-site-checks--espaco { margin-top: 18px; }
.tclean-site-lista { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: var(--tc-fs-15); }
.tclean-site-lista li { display: flex; gap: 10px; }
.tclean-site-lista .tclean-site-icone { color: var(--tc-ink); font-size: var(--tc-fs-18); margin-top: 2px; }
.tclean-site-lista--passos li { align-items: center; gap: 12px; }
.tclean-site-lista__num {
  width: 28px;
  height: 28px;
  border-radius: var(--tc-radius-ctl-sm);
  background: var(--tc-lavender);
  color: var(--tc-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--tc-fs-13);
  font-weight: 600;
  flex-shrink: 0;
}
.tclean-site-link { font-size: var(--tc-fs-14-5); font-weight: 500; color: var(--tc-ink); display: inline-flex; gap: 6px; align-items: center; text-decoration: none; }
.tclean-site-acoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tclean-site-acoes--centro { justify-content: center; }

/* Selos de marketplace (cores de marca) */
.tclean-site-mks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--tc-fs-13); font-weight: 500; color: var(--tc-text-soft); }
.tclean-site-mk { display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border-radius: var(--tc-radius-sm); font-size: var(--tc-fs-13); font-weight: 600; white-space: nowrap; }
.tclean-site-mk--xs { height: auto; padding: 0 5px; border-radius: var(--tc-radius-xs); font-size: var(--tc-fs-11-5); }
.tclean-site-mk--ml { background: var(--tc-brand-ml-bg); color: var(--tc-brand-ml-ink); }
.tclean-site-mk--shopee { background: var(--tc-brand-shopee-bg); color: var(--tc-brand-shopee-ink); }
.tclean-site-mk--amazon { background: var(--tc-brand-amazon-bg); color: var(--tc-brand-amazon-ink); }
.tclean-site-mk--tiktok { background: var(--tc-brand-tiktok-bg); color: var(--tc-brand-tiktok-ink); }

/* ---------- Seções e colunas ---------- */
.tclean-site-section { padding: clamp(56px, 7vw, 96px) 0; }
.tclean-site-section--branca { background: var(--tc-surface); border-top: 1px solid var(--tc-border); border-bottom: 1px solid var(--tc-border); }
.tclean-site-section--hero { padding: clamp(40px, 6vw, 80px) 0 40px; }
.tclean-site-section--topo { padding: clamp(40px, 6vw, 72px) 0 clamp(48px, 6vw, 80px); }
.tclean-site-section--sem-topo { padding-top: 0; }
.tclean-site-section--colada { padding: 8px 0 clamp(48px, 6vw, 80px); }
.tclean-site-section--curta { padding: 0 0 clamp(48px, 6vw, 72px); }
.tclean-site-section--so-topo { padding: clamp(48px, 6vw, 72px) 0 0; }
.tclean-site-pilha { display: flex; flex-direction: column; gap: 36px; }
.tclean-site-pilha--32 { gap: 32px; }
.tclean-site-pilha--28 { gap: 28px; }
.tclean-site-cabeca { max-width: 720px; display: flex; flex-direction: column; gap: 12px; }
.tclean-site-cabeca--centro { max-width: none; align-items: center; text-align: center; }
.tclean-site-cabeca--centro .tclean-site-h1,
.tclean-site-cabeca--centro .tclean-site-h2 { max-width: 820px; }
.tclean-site-cabeca--centro .tclean-site-lead { max-width: 620px; }
.tclean-site-cabeca--linha { max-width: none; flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.tclean-site-split { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 64px); align-items: center; }
.tclean-site-split--invertido { flex-direction: row-reverse; }
.tclean-site-split--centro { justify-content: center; }
.tclean-site-split--centro > .tclean-site-split__texto { max-width: 560px; }
.tclean-site-split__texto { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.tclean-site-split__texto--hero { flex: 1 1 440px; gap: 22px; }
.tclean-site-split__midia { flex: 1.35 1 520px; min-width: 0; }
.tclean-site-split__midia--video { flex: 1.15 1 480px; }
.tclean-site-split__midia--celular { flex: 0 1 330px; display: flex; justify-content: center; }
.tclean-site-split__midia--chat { flex: 1 1 420px; display: flex; justify-content: center; }
.tclean-site-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.tclean-site-grid--250 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.tclean-site-grid--260 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.tclean-site-grid--280 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.tclean-site-grid--cards { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }

/* ---------- Vídeo do hero (poster + <video> carregado só no clique) ---------- */
.tclean-site-video { position: relative; border-radius: var(--tc-radius-sheet); background: var(--tc-backdrop); padding: clamp(10px, 2vw, 22px); box-shadow: var(--tc-shadow-drawer); }
.tclean-site-video__tela { position: relative; border-radius: var(--tc-radius-xl); overflow: hidden; background: var(--tc-bg); aspect-ratio: 16 / 9; }
.tclean-site-video__tela picture { display: block; height: 100%; }
.tclean-site-video__poster,
.tclean-site-video__player { width: 100%; height: 100%; object-fit: cover; }
.tclean-site-video__player { position: absolute; inset: 0; background: var(--tc-bg); }
.tclean-site-video__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: none;
  background: var(--tc-surface);
  color: var(--tc-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: var(--tc-fs-26);
  box-shadow: var(--tc-shadow-modal);
  transition: transform .15s ease;
}
.tclean-site-video__play:hover { transform: translate(-50%, -50%) scale(1.05); }
.tclean-site-video__play .tclean-site-icone { margin-left: 4px; }
.tclean-site-video.is-tocando .tclean-site-video__play { display: none; }
.tclean-site-video__legenda { position: absolute; left: clamp(18px, 3vw, 34px); right: clamp(18px, 3vw, 34px); bottom: clamp(16px, 3vw, 32px); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; pointer-events: none; }
.tclean-site-video.is-tocando .tclean-site-video__legenda { display: none; }
.tclean-site-video__chip { display: inline-flex; align-items: center; gap: 8px; background: var(--tc-text-strong); color: var(--tc-white); border-radius: var(--tc-radius-pill); padding: 6px 12px 6px 8px; font-size: var(--tc-fs-12-5); font-weight: 500; }
.tclean-site-video__ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--tc-success-bright); }
.tclean-site-video__nota { background: var(--tc-white-a80); color: var(--tc-text-strong); border-radius: var(--tc-radius-pill); padding: 5px 10px; font-size: var(--tc-fs-11-5); font-weight: 500; }

/* ---------- Calculadora "Quanto sobra de cada venda?" (v2.3: formulário e resultado em 2 cards) ---------- */
.tclean-site-calc { display: flex; flex-direction: column; gap: 16px; }
.tclean-site-calc__cabeca { display: flex; flex-direction: column; gap: 10px; }
.tclean-site-calc__corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.tclean-site-calc__form,
.tclean-site-calc__resultado { background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-card); padding: 16px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tclean-site-calc__par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* Ajustes recolhidos da calculadora (imposto, tipo de anúncio, frete fora do ML): <details> nativo */
.tclean-site-calc__ajustes { border-top: 1px solid var(--tc-border); padding-top: 4px; }
.tclean-site-calc__ajustes-titulo { min-height: 44px; display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font-size: var(--tc-fs-14); font-weight: 500; color: var(--tc-ink); }
.tclean-site-calc__ajustes-titulo::-webkit-details-marker { display: none; }
.tclean-site-calc__ajustes-titulo small { font-size: var(--tc-fs-13); font-weight: 400; color: var(--tc-muted); }
.tclean-site-calc__ajustes-chev { color: var(--tc-ink); font-size: var(--tc-fs-14); transition: transform .2s ease; }
.tclean-site-calc__ajustes[open] .tclean-site-calc__ajustes-chev { transform: rotate(180deg); }
.tclean-site-calc__ajustes-corpo { display: flex; flex-direction: column; gap: 12px; padding: 6px 0 4px; }
.tclean-site-calc__aviso { font-size: var(--tc-fs-12-5); line-height: 1.45; color: var(--tc-warning-ink); background: var(--tc-warning-bg); border: 1px solid var(--tc-warning-line); border-radius: var(--tc-radius-ctl-sm); padding: 8px 10px; }
.tclean-site-calc__topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; }
.tclean-site-calc__rotulo { font-size: var(--tc-fs-13); font-weight: 500; color: var(--tc-text-soft); }
.tclean-site-calc__sobra { font-size: var(--tc-fs-site-sobra); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--tc-success-ink); }
.tclean-site-calc__pct { height: 30px; padding: 0 10px; display: inline-flex; align-items: center; flex-shrink: 0; font-size: var(--tc-fs-14); font-weight: 600; border-radius: var(--tc-radius-ctl-sm); font-variant-numeric: tabular-nums; background: var(--tc-success-soft); color: var(--tc-success-ink); }
.tclean-site-calc.is-prejuizo .tclean-site-calc__sobra { color: var(--tc-danger-ink); }
.tclean-site-calc.is-prejuizo .tclean-site-calc__pct { background: var(--tc-danger-bg); color: var(--tc-danger-ink); }
.tclean-site-calc__prejuizo { display: flex; gap: 10px; align-items: flex-start; background: var(--tc-danger-bg); border: 1px solid var(--tc-danger-border); border-radius: var(--tc-radius-lg); padding: 12px 14px; color: var(--tc-danger-ink); font-size: var(--tc-fs-14); }
.tclean-site-calc__prejuizo .tclean-site-icone { font-size: var(--tc-fs-18); margin-top: 1px; }
.tclean-site-calc__prejuizo strong { font-weight: 600; }
.tclean-site-calc__barra { display: flex; height: 14px; border-radius: var(--tc-radius-pill); overflow: hidden; background: var(--tc-track); }
.tclean-site-calc__seg { display: block; height: 100%; border-right: 2px solid var(--tc-surface); transition: width .25s ease; }
.tclean-site-calc__seg:last-child { border-right: 0; }
.tclean-site-calc__seg--taxa_venda, .tclean-site-calc__cor--taxa_venda { background: var(--tc-ink); }
.tclean-site-calc__seg--taxa_fixa, .tclean-site-calc__cor--taxa_fixa { background: var(--tc-accent); }
.tclean-site-calc__seg--frete, .tclean-site-calc__cor--frete { background: var(--tc-lilac-400); }
.tclean-site-calc__seg--imposto, .tclean-site-calc__cor--imposto { background: var(--tc-lilac-200); }
.tclean-site-calc__seg--custo, .tclean-site-calc__cor--custo { background: var(--tc-gray-500); }
.tclean-site-calc__seg--sobra { background: var(--tc-success); }
.tclean-site-calc__linhas { display: flex; flex-direction: column; }
.tclean-site-calc__linha { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--tc-border); font-size: var(--tc-fs-14); font-variant-numeric: tabular-nums; }
.tclean-site-calc__item { display: flex; gap: 10px; align-items: center; min-width: 0; }
.tclean-site-calc__cor { display: inline-block; width: 10px; height: 10px; border-radius: var(--tc-radius-2xs); flex-shrink: 0; }
.tclean-site-calc__nome { color: var(--tc-text); }
.tclean-site-calc__nota-linha { font-size: var(--tc-fs-12); color: var(--tc-text-soft); }
.tclean-site-calc__valor { flex-shrink: 0; white-space: nowrap; color: var(--tc-text); }
.tclean-site-calc__ancora { font-size: var(--tc-fs-13-5); color: var(--tc-text-soft); }
.tclean-site-calc__ancora strong { font-weight: 600; color: var(--tc-ink); }
.tclean-site-calc__nota { font-size: var(--tc-fs-12); line-height: 1.5; color: var(--tc-text-soft); }
.tclean-site-calc.is-carregando .tclean-site-calc__resultado { opacity: .7; transition: opacity .15s ease; }
@media (min-width: 768px) {
  .tclean-site-calc { gap: 24px; }
  .tclean-site-calc__corpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
  .tclean-site-calc__form,
  .tclean-site-calc__resultado { padding: 24px; gap: 18px; }
}

/* Opções grandes do site (marketplace e tamanho do pacote na calculadora): botão com aria-pressed */
.tclean-site-opcoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.tclean-site-opcao {
  min-height: 46px;
  padding: 8px 10px;
  border-radius: var(--tc-radius-ctl);
  border: 1.5px solid var(--tc-border);
  background: var(--tc-surface);
  color: var(--tc-text);
  font-family: inherit;
  font-size: var(--tc-fs-14);
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.tclean-site-opcao:hover { border-color: var(--tc-lilac-200); }
.tclean-site-opcao[aria-pressed="true"] { border-color: var(--tc-ink); background: var(--tc-lavender); color: var(--tc-ink); }
.tclean-site-opcao--pacote { min-height: 56px; border-radius: var(--tc-radius-lg); display: flex; align-items: center; gap: 8px; text-align: left; color: var(--tc-text); }
.tclean-site-opcao--pacote[aria-pressed="true"] { color: var(--tc-text); }
.tclean-site-opcao__icone { width: 30px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--tc-ink); }
.tclean-site-opcao__icone svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.tclean-site-opcao__texto { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.tclean-site-opcao__nome { font-size: var(--tc-fs-14); font-weight: 600; }
.tclean-site-opcao__exemplo { font-size: var(--tc-fs-11-5); font-weight: 400; color: var(--tc-text-soft); }
@media (min-width: 1024px) {
  .tclean-site-opcoes--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Campos do site (input grande com prefixo/sufixo) */
.tclean-site-field { display: flex; flex-direction: column; gap: 6px; }
.tclean-site-field__label { font-size: var(--tc-fs-13); font-weight: 500; color: var(--tc-text); }
.tclean-site-field__label small { font-size: var(--tc-fs-13); font-weight: 400; color: var(--tc-muted); }
.tclean-site-field__caixa { height: 50px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid var(--tc-border); border-radius: var(--tc-radius-ctl); background: var(--tc-surface); }
.tclean-site-field__caixa--curta { height: 44px; width: 120px; flex-shrink: 0; }
.tclean-site-field--linha { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
.tclean-site-field__caixa:focus-within { border-color: var(--tc-accent); box-shadow: var(--tc-shadow-focus); }
.tclean-site-field__fixo { font-size: var(--tc-fs-14); color: var(--tc-text-soft); }
.tclean-site-field__input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: var(--tc-fs-17); font-weight: 500; color: var(--tc-text-strong); font-variant-numeric: tabular-nums; padding: 0; }
.tclean-site-field__input:focus-visible { outline: none; }

/* Segmented grande do site (marketplace, tipo de anúncio, mensal/anual) */
.tclean-site-seg { display: flex; flex-wrap: wrap; padding: 3px; gap: 2px; background: var(--tc-track); border-radius: var(--tc-radius-ctl); }
.tclean-site-seg--inline { display: inline-flex; flex-wrap: nowrap; padding: 4px; border-radius: var(--tc-radius-lg); }
.tclean-site-seg__item {
  flex: 1 1 auto;
  height: 38px;
  padding: 0 12px;
  border: none;
  border-radius: var(--tc-radius-ctl-sm);
  font-size: var(--tc-fs-13);
  font-weight: 500;
  cursor: pointer;
  background: transparent;
  color: var(--tc-text-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.tclean-site-seg--igual .tclean-site-seg__item { flex: 1 1 0; }
.tclean-site-seg--inline .tclean-site-seg__item { height: 40px; padding: 0 18px; font-size: var(--tc-fs-14); }
.tclean-site-seg__item[aria-pressed="true"] { background: var(--tc-surface); color: var(--tc-ink); box-shadow: var(--tc-shadow-xs); }
.tclean-site-seg__selo { font-size: var(--tc-fs-11-5); font-weight: 600; color: var(--tc-success-ink); background: var(--tc-success-soft); border-radius: var(--tc-radius-sm); padding: 1px 7px; }

/* Resumo da calculadora na 1ª dobra do celular */
.tclean-site-calcmini { margin-top: 16px; background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-xl); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--tc-text); }
.tclean-site-calcmini:hover { color: var(--tc-text); border-color: var(--tc-lavender-line); }
.tclean-site-calcmini__topo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tclean-site-calcmini__titulo { font-size: var(--tc-fs-15); font-weight: 600; color: var(--tc-text-strong); }
.tclean-site-calcmini__eyebrow { font-size: var(--tc-fs-10); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tc-accent); }
.tclean-site-calcmini__dados { font-size: var(--tc-fs-12-5); color: var(--tc-text-soft); }
.tclean-site-calcmini .tclean-site-calc__barra { height: 10px; }
.tclean-site-calcmini__sobra { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--tc-fs-13); color: var(--tc-text-soft); }
.tclean-site-calcmini__valor { font-size: var(--tc-fs-20); font-weight: 600; color: var(--tc-success-ink); font-variant-numeric: tabular-nums; }
.tclean-site-calcmini__valor small { font-size: var(--tc-fs-13); }
.tclean-site-calcmini.is-prejuizo .tclean-site-calcmini__valor { color: var(--tc-danger-ink); }
.tclean-site-calcmini__aviso { font-size: var(--tc-fs-11-5); color: var(--tc-warning-ink); }

/* ---------- Marketplaces integrados ---------- */
.tclean-site-integra { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.tclean-site-integra__lista { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.tclean-site-mkcard { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 10px; border-radius: var(--tc-radius-xl); background: var(--tc-surface); border: 1px solid var(--tc-border); font-size: var(--tc-fs-16); font-weight: 600; color: var(--tc-text); }
.tclean-site-sigla { width: 32px; height: 32px; border-radius: var(--tc-radius-ctl-sm); display: flex; align-items: center; justify-content: center; font-size: var(--tc-fs-12); font-weight: 700; flex-shrink: 0; }
.tclean-site-sigla--sm { width: 30px; height: 30px; font-size: var(--tc-fs-11); }

/* ---------- Mockups (dados de exemplo) ---------- */
.tclean-site-mock { background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-card); overflow: hidden; box-shadow: var(--tc-shadow-panel); }
.tclean-site-mock--plano { box-shadow: none; }
.tclean-site-mock__head { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--tc-border); }
.tclean-site-mock__head--cinza { padding: 12px 16px; background: var(--tc-gray-50); }
.tclean-site-mock__titulo { font-size: var(--tc-fs-17); font-weight: 600; color: var(--tc-ink); }
.tclean-site-mock__titulo--sm { font-size: var(--tc-fs-13-5); color: var(--tc-text); }
.tclean-site-mock__fim { margin-left: auto; }
.tclean-site-mock__sub { font-size: var(--tc-fs-11-5); color: var(--tc-muted); }
.tclean-site-mock__rolagem { overflow-x: auto; }
.tclean-site-mock__largo { min-width: 520px; }
.tclean-site-mock__rodape { padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: var(--tc-warning-bg); color: var(--tc-warning-ink); font-size: var(--tc-fs-13); }
.tclean-site-mock__rodape strong { font-weight: 600; }
.tclean-site-mock__obs { margin-top: 10px; font-size: var(--tc-fs-12); color: var(--tc-muted); }

/* Tabela de exemplo em grid (pedidos, anúncios) */
.tclean-site-grade__linha { display: grid; grid-template-columns: minmax(0, 2.4fr) repeat(3, minmax(0, 1fr)); gap: 12px; padding: 12px 20px; align-items: center; font-size: var(--tc-fs-14); border-bottom: 1px solid var(--tc-border); }
.tclean-site-grade--anuncios .tclean-site-grade__linha { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
.tclean-site-grade__linha:last-child { border-bottom: 0; }
.tclean-site-grade__linha--cab { font-size: var(--tc-fs-12-5); font-weight: 600; color: var(--tc-muted); }
.tclean-site-grade__linha--alerta { background: var(--tc-danger-bg); }
.tclean-site-grade__num { text-align: right; font-variant-numeric: tabular-nums; }
.tclean-site-grade__num--suave { color: var(--tc-text-soft); }
.tclean-site-grade__num--neg { color: var(--tc-danger-ink); font-weight: 600; }
.tclean-site-grade__fim { justify-self: end; }
.tclean-site-grade__aberto { background: var(--tc-lavender); border-bottom: 1px solid var(--tc-lavender-line); }
.tclean-site-grade__aberto .tclean-site-grade__linha { border-bottom: 0; }
.tclean-site-grade__quebra { padding: 4px 20px 16px 64px; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.tclean-site-produto { display: flex; gap: 10px; align-items: center; min-width: 0; }
.tclean-site-produto__thumb { width: 34px; height: 34px; border-radius: var(--tc-radius-ctl-sm); border: 1px solid var(--tc-lavender-line); background: var(--tc-lavender); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--tc-accent); font-size: var(--tc-fs-16); }
.tclean-site-produto__thumb--44 { width: 44px; height: 44px; font-size: var(--tc-fs-20); }
.tclean-site-produto__thumb--52 { width: 52px; height: 52px; font-size: var(--tc-fs-24); }
.tclean-site-produto__info { min-width: 0; }
.tclean-site-produto__nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.tclean-site-produto__meta { font-size: var(--tc-fs-11-5); color: var(--tc-muted); }
.tclean-site-produto__meta--alerta { color: var(--tc-danger-ink); font-weight: 500; }
.tclean-site-valor { font-size: var(--tc-fs-13); font-weight: 600; border-radius: var(--tc-radius-sm); padding: 3px 8px; font-variant-numeric: tabular-nums; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.tclean-site-valor--pos { color: var(--tc-success-ink); background: var(--tc-success-soft); }
.tclean-site-valor--neg { color: var(--tc-danger-ink); background: var(--tc-danger-bg); }
.tclean-site-valor--ok { color: var(--tc-success-ink); background: var(--tc-success-soft); font-size: var(--tc-fs-12); padding: 2px 8px; }
.tclean-site-valor--revisar { color: var(--tc-warning-ink); background: var(--tc-warning-bg); font-size: var(--tc-fs-12); padding: 2px 8px; }
.tclean-site-mini { background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-ctl); padding: 8px 10px; }
.tclean-site-mini--ink { background: var(--tc-ink); border-color: var(--tc-ink); color: var(--tc-white); }
.tclean-site-mini--cinza { background: var(--tc-bg); border-color: transparent; border-radius: var(--tc-radius-ctl-sm); padding: 6px 9px; }
.tclean-site-mini__rotulo { font-size: var(--tc-fs-11); color: var(--tc-muted); }
.tclean-site-mini--ink .tclean-site-mini__rotulo { color: var(--tc-white-a80); }
.tclean-site-mini__valor { font-size: var(--tc-fs-13-5); font-weight: 600; font-variant-numeric: tabular-nums; }
.tclean-site-mini__valor--ink { font-size: var(--tc-fs-16); color: var(--tc-ink); }
.tclean-site-mini__valor--neg { font-size: var(--tc-fs-16); color: var(--tc-danger-ink); }
.tclean-site-minis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.tclean-site-minis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* KPIs dentro do mockup */
.tclean-site-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-bottom: 1px solid var(--tc-border); }
.tclean-site-kpis__item { padding: 14px 20px; border-right: 1px solid var(--tc-border); }
.tclean-site-kpis__item:last-child { border-right: 0; }
.tclean-site-kpis__rotulo { font-size: var(--tc-fs-12-5); color: var(--tc-muted); }
.tclean-site-kpis__valor { font-size: var(--tc-fs-24); font-weight: 500; color: var(--tc-ink); font-variant-numeric: tabular-nums; }
.tclean-site-kpis__valor--neg { color: var(--tc-danger-ink); }

/* Card genérico do site */
.tclean-site-card { background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-card); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.tclean-site-card--cinza { background: var(--tc-bg); padding: 22px; gap: 10px; }
.tclean-site-card--lavanda { background: var(--tc-lavender); border-color: var(--tc-lavender-line); }
.tclean-site-card--linha { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 20px; padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 32px); }
.tclean-site-card--linha .tclean-site-split__texto { gap: 6px; }
.tclean-site-card__topo { display: flex; align-items: center; gap: 8px; }
.tclean-site-card__topo .tclean-site-icone { color: var(--tc-ink); font-size: var(--tc-fs-18); }
.tclean-site-card__topo .tclean-site-icone--alerta { color: var(--tc-danger-ink); }
.tclean-site-card__titulo { font-size: var(--tc-fs-15); font-weight: 600; color: var(--tc-ink); }
.tclean-site-card__titulo--lg { font-size: var(--tc-fs-18); color: var(--tc-text-strong); }
.tclean-site-card__texto { font-size: var(--tc-fs-15); color: var(--tc-text-soft); }
.tclean-site-card__rotulo { font-size: var(--tc-fs-12-5); color: var(--tc-muted); }
.tclean-site-card__valor { font-size: var(--tc-fs-28); font-weight: 500; letter-spacing: -0.02em; color: var(--tc-ink); font-variant-numeric: tabular-nums; }
.tclean-site-card__valor--neg { color: var(--tc-danger-ink); }
.tclean-site-card__icone { width: 44px; height: 44px; border-radius: var(--tc-radius-lg); display: flex; align-items: center; justify-content: center; font-size: var(--tc-fs-20); background: var(--tc-lavender); color: var(--tc-ink); flex-shrink: 0; }
.tclean-site-card__icone--verde { background: var(--tc-success-soft); color: var(--tc-success-ink); }
.tclean-site-card__icone--vermelho { background: var(--tc-danger-bg); color: var(--tc-danger-ink); }
.tclean-site-card__icone--branco { background: var(--tc-surface); color: var(--tc-ink); }
.tclean-site-card__icone--sm { width: 40px; height: 40px; border-radius: var(--tc-radius-ctl); font-size: var(--tc-fs-18); }
.tclean-site-linhas { display: flex; flex-direction: column; border-top: 1px solid var(--tc-border); }
.tclean-site-linhas__item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--tc-border); font-size: var(--tc-fs-13-5); }
.tclean-site-linhas__item:last-child { border-bottom: 0; }
.tclean-site-linhas__data { font-family: var(--tc-mono); color: var(--tc-muted); width: 58px; flex-shrink: 0; }
.tclean-site-linhas__valor { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.tclean-site-linhas__valor--neg { color: var(--tc-danger-ink); }

/* Clone de anúncio */
.tclean-site-clone { display: flex; flex-direction: column; gap: 14px; }
.tclean-site-clone__linha { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; }
.tclean-site-clone__origem { flex: 1 1 220px; min-width: 0; }
.tclean-site-clone__img { height: 110px; border-radius: var(--tc-radius-lg); border: 1px solid var(--tc-border); background: repeating-linear-gradient(45deg, var(--tc-lavender) 0 6px, var(--tc-surface) 6px 12px); }
.tclean-site-clone__destinos { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.tclean-site-destino { background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-xl); padding: 12px 14px; display: flex; align-items: center; gap: 10px; font-size: var(--tc-fs-14); font-weight: 500; }
.tclean-site-destino .tclean-site-valor { margin-left: auto; }
.tclean-site-ia { background: var(--tc-lavender); border: 1px solid var(--tc-lavender-line); border-radius: var(--tc-radius-xl); padding: 14px 16px; display: flex; gap: 12px; }
.tclean-site-ia > .tclean-site-icone { color: var(--tc-accent); font-size: var(--tc-fs-18); margin-top: 2px; }
.tclean-site-ia__rotulo { font-size: var(--tc-fs-12-5); font-weight: 600; color: var(--tc-accent); }
.tclean-site-ia__texto { font-size: var(--tc-fs-14-5); color: var(--tc-text); }
.tclean-site-preco { font-size: var(--tc-fs-20); font-weight: 500; color: var(--tc-ink); font-variant-numeric: tabular-nums; }

/* ---------- Recursos (IA / App / Extensão) ---------- */
.tclean-site-recurso { text-decoration: none; color: var(--tc-text); background: var(--tc-bg); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-card); padding: 22px; display: flex; flex-direction: column; gap: 16px; transition: border-color .15s ease, box-shadow .15s ease; }
.tclean-site-recurso:hover { color: var(--tc-text); border-color: var(--tc-lavender-line); box-shadow: var(--tc-shadow-card-hover); }
.tclean-site-recurso__previa { background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-xl); padding: 14px; display: flex; flex-direction: column; gap: 8px; min-height: 176px; }
.tclean-site-recurso__previa--escura { background: var(--tc-text-strong); border-color: var(--tc-text-strong); }
.tclean-site-recurso__titulo { font-size: var(--tc-fs-18); font-weight: 600; color: var(--tc-ink); margin: 0 0 6px; }
.tclean-site-recurso__texto { font-size: var(--tc-fs-14-5); color: var(--tc-text-soft); }
.tclean-site-recurso__mais { margin-top: auto; font-size: var(--tc-fs-14-5); font-weight: 500; color: var(--tc-ink); display: inline-flex; gap: 6px; align-items: center; }
.tclean-site-recurso__exemplo { font-size: var(--tc-fs-11); color: var(--tc-muted); }
.tclean-site-recurso__previa--escura .tclean-site-recurso__exemplo { color: var(--tc-white-a60); }

/* Bolhas de conversa (WhatsApp / assistente) */
.tclean-site-bolha { max-width: 88%; border-radius: var(--tc-radius-lg) var(--tc-radius-lg) var(--tc-radius-lg) var(--tc-radius-xs); padding: 8px 12px; font-size: var(--tc-fs-13-5); line-height: 1.45; align-self: flex-start; background: var(--tc-surface); border: 1px solid var(--tc-border); }
.tclean-site-bolha--eu { align-self: flex-end; max-width: 85%; background: var(--tc-lavender); border-color: transparent; border-radius: var(--tc-radius-lg) var(--tc-radius-lg) var(--tc-radius-xs) var(--tc-radius-lg); }
.tclean-site-bolha strong { font-weight: 600; color: var(--tc-ink); }
.tclean-site-bolha--audio { display: flex; flex-direction: column; gap: 6px; }
.tclean-site-bolha__audio { display: flex; align-items: center; gap: 8px; color: var(--tc-ink); }
.tclean-site-bolha__onda { width: 120px; height: 20px; fill: var(--tc-accent); }
.tclean-site-bolha__tempo { font-size: var(--tc-fs-12); color: var(--tc-text-soft); }
.tclean-site-bolha__transcricao { font-size: var(--tc-fs-12-5); color: var(--tc-text-soft); font-style: italic; }
.tclean-site-digitando { align-self: flex-start; display: flex; gap: 4px; background: var(--tc-surface); border-radius: var(--tc-radius-lg); padding: 12px 14px; }
.tclean-site-digitando span { width: 7px; height: 7px; border-radius: 50%; background: var(--tc-lilac-300); }
.tclean-site-digitando span:nth-child(2) { background: var(--tc-lilac-400); }
.tclean-site-digitando span:nth-child(3) { background: var(--tc-accent); }

/* Aviso (notificação do app) */
.tclean-site-notif { background: var(--tc-surface); border-radius: var(--tc-radius-lg); padding: 10px 12px; display: flex; gap: 10px; }
.tclean-site-notif--grande { border-radius: var(--tc-radius-card); padding: 11px 12px; }
.tclean-site-notif__icone { width: 28px; height: 28px; border-radius: var(--tc-radius-ctl-sm); background: var(--tc-ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tclean-site-notif--grande .tclean-site-notif__icone { width: 34px; height: 34px; border-radius: var(--tc-radius-ctl); }
.tclean-site-notif__corpo { min-width: 0; flex: 1; font-size: var(--tc-fs-12-5); }
.tclean-site-notif__topo { display: flex; justify-content: space-between; gap: 6px; }
.tclean-site-notif__titulo { font-weight: 600; color: var(--tc-text-strong); }
.tclean-site-notif__titulo--neg { color: var(--tc-danger-ink); }
.tclean-site-notif__quando { font-size: var(--tc-fs-11); color: var(--tc-muted); }
.tclean-site-notif__linha { color: var(--tc-text); }
.tclean-site-notif__linha--suave { color: var(--tc-text-soft); }
.tclean-site-notif__lucro { font-weight: 600; color: var(--tc-success-ink); }

/* ---------- Depoimentos ---------- */
.tclean-site-quote { background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-card); padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.tclean-site-quote__texto { font-size: var(--tc-fs-15); line-height: 1.6; color: var(--tc-text); }
.tclean-site-quote__autor { margin-top: auto; display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--tc-border); }
.tclean-site-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--tc-lavender-line); color: var(--tc-ink); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: var(--tc-fs-15); flex-shrink: 0; }
.tclean-site-quote__nome { font-size: var(--tc-fs-15); font-weight: 600; color: var(--tc-text-strong); }
.tclean-site-quote__loja { font-size: var(--tc-fs-13); color: var(--tc-text-soft); }

/* ---------- Planos ---------- */
.tclean-site-planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(208px, 1fr)); gap: 14px; align-items: stretch; }
/* Planos completos (/precos): 3 por linha do md para cima, sem card sobrando sozinho numa linha */
@media (min-width: 768px) { .tclean-site-planos:not(.tclean-site-planos--resumo) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tclean-site-planos--resumo { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.tclean-site-plano { position: relative; background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-card); padding: 24px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
.tclean-site-plano--destaque { border: 2px solid var(--tc-ink); padding: 23px 19px 19px; box-shadow: var(--tc-shadow-panel); }
.tclean-site-plano--mini { border-radius: var(--tc-radius-xl); padding: 18px; gap: 6px; box-shadow: none; }
.tclean-site-plano--mini.tclean-site-plano--destaque { padding: 17px; }
.tclean-site-plano__tag { position: absolute; top: -12px; left: 20px; font-size: var(--tc-fs-11-5); font-weight: 600; border-radius: var(--tc-radius-pill); padding: 3px 10px; background: var(--tc-ink); color: var(--tc-white); white-space: nowrap; }
.tclean-site-plano--mini .tclean-site-plano__tag { top: -11px; left: 16px; font-size: var(--tc-fs-11); padding: 2px 9px; }
.tclean-site-plano__nome { font-size: var(--tc-fs-18); font-weight: 600; color: var(--tc-text-strong); }
.tclean-site-plano--mini .tclean-site-plano__nome { font-size: var(--tc-fs-15); }
.tclean-site-plano__perfil { font-size: var(--tc-fs-13-5); color: var(--tc-text-soft); }
.tclean-site-plano:not(.tclean-site-plano--mini) .tclean-site-plano__perfil { min-height: 3em; }
.tclean-site-plano__limites { font-size: var(--tc-fs-13); color: var(--tc-muted); }
.tclean-site-plano__precos { display: flex; flex-direction: column; gap: 2px; min-height: 78px; }
.tclean-site-plano__de { font-size: var(--tc-fs-13); color: var(--tc-muted); text-decoration: line-through; font-variant-numeric: tabular-nums; min-height: 19px; }
.tclean-site-plano__linha { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.tclean-site-plano__valor { font-size: var(--tc-fs-site-preco); font-weight: 500; letter-spacing: -0.03em; color: var(--tc-ink); font-variant-numeric: tabular-nums; line-height: 1.05; }
.tclean-site-plano--mini .tclean-site-plano__valor { font-size: var(--tc-fs-28); letter-spacing: -0.02em; }
.tclean-site-plano__mes { font-size: var(--tc-fs-14); color: var(--tc-muted); }
.tclean-site-plano--mini .tclean-site-plano__mes { font-size: var(--tc-fs-13); }
.tclean-site-plano__cobranca { font-size: var(--tc-fs-12-5); color: var(--tc-text-soft); }
.tclean-site-plano__lista { margin: 0; padding: 14px 0 0; border-top: 1px solid var(--tc-border); list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: var(--tc-fs-14); }
.tclean-site-plano__lista li { display: flex; gap: 8px; align-items: center; }
.tclean-site-plano__lista .tclean-site-icone { color: var(--tc-ink); }
.tclean-site-plano__lista strong { font-weight: 600; }
.tclean-site-plano__dia { margin-top: auto; font-size: var(--tc-fs-12-5); color: var(--tc-muted); font-variant-numeric: tabular-nums; }
.tclean-site-contas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: var(--tc-fs-14); flex: 1.4 1 420px; min-width: 0; }
.tclean-site-contas__chip { height: 32px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-ctl-sm); }
.tclean-site-contas__chip--total { background: var(--tc-ink); border-color: var(--tc-ink); color: var(--tc-white); font-weight: 500; padding: 0 12px; }
.tclean-site-contas__op { color: var(--tc-muted); }
.tclean-site-contas__logo { width: auto; height: 18px; }
.tclean-site-incluso { border: 1px solid var(--tc-border); border-radius: var(--tc-radius-xl); padding: 18px; display: flex; gap: 14px; }
.tclean-site-incluso__titulo { font-size: var(--tc-fs-15); font-weight: 600; color: var(--tc-text-strong); }
.tclean-site-incluso__texto { font-size: var(--tc-fs-14); color: var(--tc-text-soft); }

/* ---------- FAQ ---------- */
.tclean-site-faq { display: flex; flex-wrap: wrap; gap: clamp(24px, 5vw, 64px); }
.tclean-site-faq__cabeca { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.tclean-site-faq__lista { flex: 2 1 480px; min-width: 0; display: flex; flex-direction: column; border-top: 1px solid var(--tc-border); }
.tclean-site-faq__item { border-bottom: 1px solid var(--tc-border); }
.tclean-site-faq__pergunta { display: flex; align-items: center; gap: 16px; padding: 20px 0; font-size: var(--tc-fs-17); font-weight: 500; color: var(--tc-text-strong); cursor: pointer; list-style: none; }
.tclean-site-faq__pergunta::-webkit-details-marker { display: none; }
.tclean-site-faq__chev { margin-left: auto; color: var(--tc-ink); font-size: var(--tc-fs-16); transition: transform .2s ease; }
.tclean-site-faq__item[open] .tclean-site-faq__chev { transform: rotate(180deg); }
.tclean-site-faq__resposta { margin: 0 0 20px; font-size: var(--tc-fs-15); color: var(--tc-text-soft); }

/* ---------- Faixa de CTA ---------- */
.tclean-site-cta { background: var(--tc-ink); border-radius: var(--tc-radius-2xl); padding: clamp(28px, 5vw, 64px) clamp(24px, 5vw, 64px); display: flex; flex-wrap: wrap; gap: 24px 28px; align-items: center; justify-content: space-between; }
.tclean-site-cta__texto { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.tclean-site-cta__simbolo { width: 40px; height: 32px; }
.tclean-site-cta__titulo { font-size: var(--tc-fs-site-cta); line-height: 1.08; font-weight: 500; letter-spacing: -0.03em; color: var(--tc-white); }
.tclean-site-cta__titulo--menor { font-size: var(--tc-fs-site-h2); line-height: 1.1; }
.tclean-site-cta__sub { font-size: var(--tc-fs-17); font-weight: 300; color: var(--tc-white-a80); }
.tclean-site-cta__acoes { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.tclean-site-cta__nota { font-size: var(--tc-fs-13); color: var(--tc-white-a80); }

/* ---------- Rodapé ---------- */
.tclean-site-footer { background: var(--tc-text-strong); color: var(--tc-white-a80); padding: 56px 0 28px; }
.tclean-site-footer__topo { display: flex; flex-wrap: wrap; gap: 36px; justify-content: space-between; }
.tclean-site-footer__marca { flex: 1 1 240px; display: flex; flex-direction: column; gap: 12px; font-size: var(--tc-fs-14); }
.tclean-site-footer__marca p { max-width: 300px; }
.tclean-site-footer__col { display: flex; flex-direction: column; gap: 6px; font-size: var(--tc-fs-14); }
.tclean-site-footer__titulo { font-weight: 600; color: var(--tc-white); }
.tclean-site-footer a { color: var(--tc-white-a80); text-decoration: none; }
.tclean-site-footer a:hover { color: var(--tc-white); }
.tclean-site-footer__social { display: flex; gap: 14px; font-size: var(--tc-fs-18); }
/* Área de toque ≥ 24px (WCAG 2.5.8) nos links do rodapé; o gap da coluna caiu de 10 para 6px para manter o ritmo */
.tclean-site-footer__col a { display: flex; align-items: center; min-height: 24px; }
.tclean-site-footer__social a { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; }
.tclean-site-footer__base { margin-top: 36px; border-top: 1px solid var(--tc-white-a15); padding-top: 20px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: var(--tc-fs-12-5); color: var(--tc-white-a60); }

/* ---------- Barra fixa do celular (WhatsApp + CTA): aparece depois do CTA do hero ---------- */
.tclean-site-barra { display: none; }

/* ---------- Link "Agendar demonstração" (CTA secundário, SITE_DEMO): texto, não compete com o botão ---------- */
.tclean-site-demo { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; font-size: var(--tc-fs-14); font-weight: 600; color: var(--tc-ink); text-decoration: none; }
.tclean-site-demo .tclean-site-icone { font-size: var(--tc-fs-15); }
.tclean-site-demo:hover span { text-decoration: underline; text-decoration-color: var(--tc-yellow); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.tclean-site-demo--claro { color: var(--tc-white); }
.tclean-site-demo--claro:hover { color: var(--tc-white); }

/* ==========================================================================
   Home v2.3 (landing.php) — mobile first: o estilo base é o do celular (390px);
   @media (min-width: 768px) e (min-width: 1024px) acrescentam o desktop.
   ========================================================================== */
.tclean-site-section--compacta { padding: 56px 0 0; }
.tclean-site-h2--centro-desk { text-wrap: balance; }

/* Hero: promessa + CTA na 1ª dobra */
.tclean-site-hero { padding: 20px 0 0; }
.tclean-site-hero__texto { display: flex; flex-direction: column; gap: 14px; }
/* H1 da home = linha dos marketplaces + pergunta (dois spans); herda gap e alinhamento do __texto (celular e desktop) */
.tclean-site-hero__h1 { display: flex; flex-direction: column; gap: inherit; align-items: inherit; margin: 0; font: inherit; color: inherit; }
.tclean-site-hero__mks { display: flex; align-items: center; gap: 8px; font-size: var(--tc-fs-12-5); font-weight: 500; line-height: 1.3; color: var(--tc-text-soft); }
.tclean-site-hero__mks-logos { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.tclean-site-hero__mk { width: 16px; height: 16px; object-fit: contain; }
.tclean-site-hero__mk--shopee { width: 13px; height: 18px; }
.tclean-site-hero .tclean-site-h1--home { line-height: 1.03; letter-spacing: -0.04em; text-wrap: balance; }
.tclean-site-hero .tclean-site-lead { max-width: 560px; }
.tclean-site-hero__acoes { display: flex; flex-direction: column; gap: 10px; }
.tclean-site-hero__cta { height: 54px; font-size: var(--tc-fs-17); font-weight: 600; border-radius: var(--tc-radius-lg); }
.tclean-site-hero__confianca { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; font-size: var(--tc-fs-13); color: var(--tc-text-soft); }
.tclean-site-hero__demo-pre { display: none; }
.tclean-site-precos__demo { margin-top: 12px; }
.tclean-site-hero__demo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 6px; margin-top: -6px; font-size: var(--tc-fs-14); color: var(--tc-text-soft); }

/* Vídeo vertical 9:16 (celular): pôster leve; o <video> só entra no toque */
.tclean-site-video.tclean-site-video--vertical { width: min(100%, 338px); margin: 20px auto 0; padding: 0; background: var(--tc-backdrop); border-radius: var(--tc-radius-2xl); overflow: hidden; box-shadow: var(--tc-shadow-drawer); }
.tclean-site-video--vertical .tclean-site-video__tela { aspect-ratio: 9 / 16; border-radius: 0; background: var(--tc-backdrop); }
.tclean-site-video--vertical .tclean-site-video__play { top: 44%; }
.tclean-site-video--vertical .tclean-site-video__player { background: var(--tc-backdrop); object-fit: contain; }
.tclean-site-video--vertical .tclean-site-video__chip { position: absolute; left: 14px; top: 14px; background: var(--tc-overlay-strong); }
.tclean-site-video.is-tocando .tclean-site-video__chip { display: none; }
.tclean-site-video--vertical .tclean-site-video__play { width: 76px; height: 76px; font-size: var(--tc-fs-26); }
.tclean-site-menu__link--demo { gap: 8px; color: var(--tc-ink); }
.tclean-site-cta__acoes .tclean-site-demo { margin-top: -4px; }
.tclean-site-video__play--ink { background: var(--tc-ink); color: var(--tc-white); box-shadow: var(--tc-shadow-drawer); }

/* Desktop: navegador com o painel desenhado (dados de demonstração) + celular e card sobrepostos */
.tclean-site-painel-palco { position: relative; margin: 44px auto 0; }
.tclean-site-painel { position: relative; margin: 0; background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-card); overflow: hidden; box-shadow: var(--tc-shadow-drawer); }
.tclean-site-painel__barra { height: 40px; padding: 0 14px; display: flex; align-items: center; gap: 8px; background: var(--tc-track); border-bottom: 1px solid var(--tc-border); }
.tclean-site-painel__url { margin-left: 14px; height: 24px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: var(--tc-radius-sm); background: var(--tc-surface); font-family: var(--tc-mono); font-size: var(--tc-fs-12); color: var(--tc-text-soft); }
.tclean-site-painel__nota { margin-left: auto; font-size: var(--tc-fs-11-5); color: var(--tc-text-soft); }
.tclean-site-painel__corpo { position: relative; display: flex; min-height: 420px; }
.tclean-site-painel__menu { width: 190px; flex-shrink: 0; border-right: 1px solid var(--tc-border); padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; font-size: var(--tc-fs-13); color: var(--tc-text-soft); }
.tclean-site-painel__menu span { height: 34px; padding: 0 10px; display: flex; align-items: center; border-radius: var(--tc-radius-ctl-sm); }
.tclean-site-painel__menu .is-ativo { background: var(--tc-lavender); color: var(--tc-ink); font-weight: 600; }
.tclean-site-painel__conteudo { flex: 1; min-width: 0; padding: 18px; display: flex; flex-direction: column; gap: 14px; background: var(--tc-bg); }
.tclean-site-painel__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tclean-site-painel__kpi { background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-lg); padding: 12px 14px; display: flex; flex-direction: column; }
.tclean-site-painel__kpi span { font-size: var(--tc-fs-12); color: var(--tc-text-soft); }
.tclean-site-painel__kpi strong { font-size: var(--tc-fs-24); font-weight: 500; color: var(--tc-text-strong); font-variant-numeric: tabular-nums; }
.tclean-site-painel .is-ink { color: var(--tc-ink); }
.tclean-site-painel .is-pos { color: var(--tc-success-ink); font-weight: 600; }
.tclean-site-painel .is-neg { color: var(--tc-danger-ink); font-weight: 600; }
.tclean-site-painel .is-suave { color: var(--tc-text-soft); }
.tclean-site-painel__tabela { background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-lg); overflow: hidden; }
.tclean-site-painel__linha { display: grid; grid-template-columns: minmax(0, 2.4fr) repeat(3, minmax(0, 1fr)); gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--tc-border); font-size: var(--tc-fs-13-5); font-variant-numeric: tabular-nums; }
.tclean-site-painel__linha > span:not(:first-child) { text-align: right; }
.tclean-site-painel__linha:last-child { border-bottom: 0; }
.tclean-site-painel__linha--cab { font-size: var(--tc-fs-11-5); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tc-text-soft); }
.tclean-site-painel__linha--neg { background: var(--tc-danger-bg); }
.tclean-site-painel__produto { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--tc-text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tclean-site-painel__nome2 { display: flex; flex-direction: column; min-width: 0; }
.tclean-site-painel__nome2 small { font-size: var(--tc-fs-11-5); color: var(--tc-danger-ink); }
.tclean-site-painel .tclean-site-video__play { top: 55%; }
.tclean-site-painel .tclean-site-video__player { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--tc-backdrop); z-index: 2; }
.tclean-site-painel__celular { position: absolute; right: -8px; bottom: -36px; width: 210px; height: 300px; border-radius: var(--tc-radius-phone); background: var(--tc-backdrop); padding: 10px; box-shadow: var(--tc-shadow-drawer); }
.tclean-site-painel__celular-tela { height: 100%; border-radius: var(--tc-radius-2xl); background: var(--tc-text-strong); padding: 44px 10px 10px; display: flex; flex-direction: column; gap: 8px; }
.tclean-site-painel__repasse { position: absolute; left: -14px; bottom: -30px; width: 250px; background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-xl); padding: 14px 16px; box-shadow: var(--tc-shadow-drawer); display: flex; flex-direction: column; gap: 4px; }
.tclean-site-painel__repasse span { font-size: var(--tc-fs-12); color: var(--tc-text-soft); }
.tclean-site-painel__repasse strong { font-size: var(--tc-fs-24); font-weight: 500; color: var(--tc-text-strong); font-variant-numeric: tabular-nums; }
.tclean-site-painel__repasse small { font-size: var(--tc-fs-12); color: var(--tc-danger-ink); }

/* Miniatura de produto desenhada (sem foto) e aviso de venda (notificação do app) */
/* Miniatura desenhada (site_thumb()): fundo suave + ícone do produto na cor do token da variante */
.tclean-site-thumb { width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--tc-radius-ctl-sm); background: var(--tc-track); display: inline-flex; align-items: center; justify-content: center; color: var(--tc-accent); font-size: var(--tc-fs-16); }
.tclean-site-thumb--lilas { background: var(--tc-lavender-line); color: var(--tc-ink); }
.tclean-site-thumb--amarelo { background: var(--tc-warning-bg); color: var(--tc-warning-strong); }
.tclean-site-thumb--rosa { background: var(--tc-danger-bg); color: var(--tc-danger-ink); }
.tclean-site-thumb--branco { background: var(--tc-surface); color: var(--tc-danger-ink); }
.tclean-site-thumb--tinta { color: var(--tc-ink); }
.tclean-site-aviso { display: flex; gap: 8px; align-items: flex-start; background: var(--tc-surface); border-radius: var(--tc-radius-lg); padding: 9px 10px; line-height: 1.3; text-align: left; }
.tclean-site-aviso__icone { width: 22px; height: 22px; flex-shrink: 0; border-radius: var(--tc-radius-sm); background: var(--tc-ink); display: flex; align-items: center; justify-content: center; }
.tclean-site-aviso__icone .tclean-site-simbolo { width: 14px; height: 12px; }
.tclean-site-aviso > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.tclean-site-aviso strong { font-size: var(--tc-fs-12); font-weight: 600; color: var(--tc-text-strong); }
.tclean-site-aviso strong.is-neg { color: var(--tc-danger-ink); }
.tclean-site-aviso small { font-size: var(--tc-fs-11-5); color: var(--tc-text-soft); }

/* Logos oficiais dos marketplaces (cor e proporção originais, cartões neutros com respiro) */
.tclean-site-logos { padding: 36px 0 0; }
.tclean-site-logos__inner { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.tclean-site-logos__titulo { font-size: var(--tc-fs-15); font-weight: 600; color: var(--tc-text-strong); text-align: center; }
.tclean-site-logos__lista { width: 100%; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tclean-site-logos__item { height: 72px; padding: 10px; border: 1px solid var(--tc-border); border-radius: var(--tc-radius-lg); background: var(--tc-surface); display: flex; align-items: center; justify-content: center; gap: 8px; }
.tclean-site-logos__img { width: auto; max-width: 100%; }
.tclean-site-logos__img--ml { height: 36px; }
.tclean-site-logos__img--shopee { height: 50px; }
.tclean-site-logos__img--amazon { height: 26px; margin-top: 5px; }
.tclean-site-logos__img--tiktok { height: 32px; width: 32px; }
.tclean-site-logos__nome { font-size: var(--tc-fs-16); font-weight: 600; color: var(--tc-brand-tiktok-ink); white-space: nowrap; }
.tclean-site-logos__nota { font-size: var(--tc-fs-13-5); color: var(--tc-text-soft); text-align: center; }

/* Bloco de recurso: texto + ilustração (no desktop lado a lado; --invertido troca o lado) */
.tclean-site-bloco { padding: 48px 0 0; }
.tclean-site-recursos .tclean-site-bloco { padding-top: 56px; }
.tclean-site-bloco__inner { display: flex; flex-direction: column; gap: 18px; }
.tclean-site-bloco__texto { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tclean-site-bloco__midia { min-width: 0; display: flex; justify-content: center; }
.tclean-site-bloco .tclean-site-texto { max-width: 460px; }
.tclean-site-chips { display: none; margin: 4px 0 0; padding: 0; list-style: none; flex-wrap: wrap; gap: 8px; }
.tclean-site-chips li { height: 32px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border-radius: var(--tc-radius-ctl-sm); background: var(--tc-surface); border: 1px solid var(--tc-border); font-size: var(--tc-fs-13-5); color: var(--tc-text); }
.tclean-site-chips .tclean-site-icone { color: var(--tc-success-ink); font-size: var(--tc-fs-13); }

/* "O problema": de R$ 100 mil vendidos, quanto sobra (faixa escura com barras) */
.tclean-site-sobrou { width: 100%; max-width: 520px; border-radius: var(--tc-radius-card); background: var(--tc-backdrop); padding: 18px 16px; display: flex; flex-direction: column; gap: 9px; color: var(--tc-white); font-variant-numeric: tabular-nums; }
.tclean-site-sobrou__topo { display: flex; justify-content: space-between; font-size: var(--tc-fs-13); }
.tclean-site-sobrou__total { height: 12px; border-radius: var(--tc-radius-sm); background: var(--tc-lilac-200); }
.tclean-site-sobrou__item { display: grid; grid-template-columns: 96px minmax(0, 1fr) 72px; gap: 8px; align-items: center; font-size: var(--tc-fs-12-5); }
.tclean-site-sobrou__rotulo { color: var(--tc-white-a80); }
.tclean-site-sobrou__trilho { height: 10px; border-radius: var(--tc-radius-xs); background: var(--tc-white-a10); }
.tclean-site-sobrou__fill { display: block; height: 100%; border-radius: var(--tc-radius-xs); background: var(--tc-danger-bright); }
.tclean-site-sobrou__valor { text-align: right; }
.tclean-site-sobrou__fim { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--tc-white-a25); display: flex; justify-content: space-between; align-items: baseline; font-size: var(--tc-fs-14); }
.tclean-site-sobrou__fim strong { font-size: var(--tc-fs-24); font-weight: 600; color: var(--tc-success-bright); }
.tclean-site-sobrou__fim small { font-size: var(--tc-fs-14); font-weight: 500; }
.tclean-site-sobrou__nota { font-size: var(--tc-fs-11); color: var(--tc-white-a80); }

/* Ilustrações dos recursos (desenhadas; números fictícios) */
.tclean-site-ilustra { width: 100%; max-width: 520px; border-radius: var(--tc-radius-card); background: var(--tc-lavender); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.tclean-site-ilustra--amarelo { background: var(--tc-yellow-soft); }
.tclean-site-ilustra__nota { font-size: var(--tc-fs-11); color: var(--tc-text-soft); text-align: right; }
.tclean-site-pedido { background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-lg); padding: 11px 12px; display: flex; align-items: center; gap: 10px; }
.tclean-site-pedido .tclean-site-thumb { width: 38px; height: 38px; font-size: var(--tc-fs-18); }
.tclean-site-pedido__info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tclean-site-pedido__nome { font-size: var(--tc-fs-14); color: var(--tc-text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tclean-site-pedido__meta { font-size: var(--tc-fs-12); color: var(--tc-text-soft); }
.tclean-site-pedido__lucro { font-size: var(--tc-fs-15); font-weight: 600; color: var(--tc-success-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tclean-site-pedido--neg { border: 1.5px solid var(--tc-danger-border); }
.tclean-site-pedido--neg .tclean-site-pedido__meta,
.tclean-site-pedido--neg .tclean-site-pedido__lucro { color: var(--tc-danger-ink); }
.tclean-site-dias { background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-lg); padding: 12px; }
.tclean-site-dias__topo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tclean-site-dias__topo span { font-size: var(--tc-fs-13); color: var(--tc-text-soft); }
.tclean-site-dias__topo strong { font-size: var(--tc-fs-20); font-weight: 600; color: var(--tc-text-strong); font-variant-numeric: tabular-nums; }
.tclean-site-dias__barras { margin-top: 10px; height: 56px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; align-items: end; }
.tclean-site-dias__barra { display: block; border-radius: var(--tc-radius-xs); background: var(--tc-lilac-200); }
.tclean-site-dias__barra--vazio { background: var(--tc-border); }
.tclean-site-dias__barra--forte { background: var(--tc-ink); }
.tclean-site-dias__rotulos { margin-top: 4px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; font-size: var(--tc-fs-11); color: var(--tc-text-soft); text-align: center; }
.tclean-site-amenos { background: var(--tc-surface); border: 1.5px solid var(--tc-danger-border); border-radius: var(--tc-radius-lg); padding: 12px; display: flex; flex-direction: column; gap: 6px; font-size: var(--tc-fs-13); }
.tclean-site-amenos__linha { display: flex; justify-content: space-between; gap: 10px; color: var(--tc-text); font-variant-numeric: tabular-nums; }
.tclean-site-amenos__linha--titulo { font-weight: 600; color: var(--tc-danger-ink); }
.tclean-site-margens { background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-lg); padding: 12px; display: flex; flex-direction: column; gap: 10px; font-size: var(--tc-fs-13); }
.tclean-site-margens__linha { display: grid; grid-template-columns: minmax(0, 1fr) 92px 52px; gap: 8px; align-items: center; }
.tclean-site-margens__nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tclean-site-margens__barra { display: flex; height: 10px; border-radius: var(--tc-radius-xs); overflow: hidden; background: var(--tc-track); }
.tclean-site-margens__seg { display: block; height: 100%; }
.tclean-site-margens__seg--ads { background: var(--tc-yellow); }
.tclean-site-margens__seg--afiliado { background: var(--tc-accent); }
.tclean-site-margens__seg--margem { background: var(--tc-success); }
.tclean-site-margens__valor { text-align: right; font-weight: 600; color: var(--tc-success-ink); font-variant-numeric: tabular-nums; }
.tclean-site-margens__valor.is-neg { color: var(--tc-danger-ink); }
.tclean-site-margens__legenda { display: flex; flex-wrap: wrap; gap: 12px; font-size: var(--tc-fs-11-5); color: var(--tc-text-soft); }
.tclean-site-margens__legenda span { display: inline-flex; align-items: center; gap: 4px; }
.tclean-site-margens__legenda i { width: 8px; height: 8px; border-radius: var(--tc-radius-2xs); }
.tclean-site-clonar { min-height: 50px; background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-lg); padding: 8px 12px; display: flex; align-items: center; gap: 10px; }
.tclean-site-clonar__logo { width: auto; }
.tclean-site-clonar__logo--ml { height: 22px; }
.tclean-site-clonar__logo--shopee { height: 32px; }
.tclean-site-clonar__logo--amazon { height: 18px; margin-top: 4px; }
.tclean-site-clonar__logo--tiktok { height: 24px; width: 24px; }
.tclean-site-clonar__titulo { flex: 1; min-width: 0; font-size: var(--tc-fs-13-5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tclean-site-clonar--origem .tclean-site-clonar__titulo { font-weight: 500; }
.tclean-site-clonar__nota { font-size: var(--tc-fs-12); color: var(--tc-text-soft); }
.tclean-site-clonar__status { margin-left: auto; font-size: var(--tc-fs-12-5); font-weight: 600; color: var(--tc-success-ink); white-space: nowrap; }
.tclean-site-clonar__status--revisar { color: var(--tc-warning-ink); }
.tclean-site-clonar__seta { display: flex; justify-content: center; color: var(--tc-accent); font-size: var(--tc-fs-18); }

/* "Onde você estiver": faixa escura com carrossel (WhatsApp, app, extensão) */
.tclean-site-onde { margin-top: 56px; padding: 40px 0 32px; background: var(--tc-backdrop); color: var(--tc-white); display: flex; flex-direction: column; gap: 16px; }
.tclean-site-onde > .tclean-site-wrap,
.tclean-site-depoimentos > .tclean-site-wrap { width: 100%; }
.tclean-site-onde__cabeca { display: flex; flex-direction: column; gap: 8px; }
.tclean-site-onde .tclean-site-h2 { color: var(--tc-white); text-wrap: balance; }
.tclean-site-onde__sub { font-size: var(--tc-fs-15); color: var(--tc-white-a80); }

/* Carrossel nativo: scroll-snap com swipe no celular; grade no desktop */
.tclean-site-wrap.tclean-site-wrap--carrossel { width: 100%; min-width: 0; padding: 0; }
.tclean-site-carrossel {
  margin: 0;
  padding: 2px 16px 6px;
  list-style: none;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tclean-site-carrossel::-webkit-scrollbar { display: none; }
.tclean-site-carrossel > li { flex: 0 0 82%; scroll-snap-align: start; display: flex; }
.tclean-site-carrossel > li > * { flex: 1; min-width: 0; }
.tclean-site-canal { border-radius: var(--tc-radius-card); background: var(--tc-white-a10); border: 1px solid var(--tc-white-a15); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.tclean-site-canal__previa { height: 230px; border-radius: var(--tc-radius-xl); padding: 12px 10px; display: flex; flex-direction: column; gap: 7px; overflow: hidden; }
.tclean-site-canal__previa--zap { background: var(--tc-gray-100); font-size: var(--tc-fs-12); line-height: 1.35; color: var(--tc-text-strong); }
.tclean-site-canal__previa--app { background: var(--tc-text-strong); padding: 14px 10px; gap: 8px; }
.tclean-site-canal__previa--chrome { padding: 0; gap: 0; background: var(--tc-surface); color: var(--tc-text-strong); }
.tclean-site-canal__titulo { font-size: var(--tc-fs-18); font-weight: 600; color: var(--tc-white); }
.tclean-site-canal__texto { font-size: var(--tc-fs-14-5); color: var(--tc-white-a80); }
.tclean-site-canal__link { margin-top: auto; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; font-size: var(--tc-fs-14-5); font-weight: 600; color: var(--tc-yellow); text-decoration: none; }
.tclean-site-canal__link:hover { color: var(--tc-yellow-hover); }
.tclean-site-canal__com-icone { display: flex; align-items: center; gap: 10px; }
.tclean-site-canal__icone { width: 26px; height: 26px; flex-shrink: 0; }
.tclean-site-canal__selos { margin-top: auto; }
/* No card estreito do carrossel, as duas pílulas ficam uma embaixo da outra, com a largura do card */
.tclean-site-lojas.tclean-site-canal__selos { width: 100%; grid-template-columns: minmax(0, 1fr); align-self: stretch; }
.tclean-site-lojas.tclean-login-vitrine__selos { align-self: center; }
.tclean-site-footer__lojas { margin-top: 4px; }
.tclean-site-zap { max-width: 88%; align-self: flex-start; background: var(--tc-surface); border-radius: var(--tc-radius-ctl); padding: 7px 9px; }
.tclean-site-zap--eu { align-self: flex-end; max-width: 82%; background: var(--tc-success-soft); }
.tclean-site-zap strong { font-weight: 600; }
.tclean-site-zap--extra { display: none; }
.tclean-site-minichrome__barra { height: 30px; flex-shrink: 0; background: var(--tc-gray-100); display: flex; align-items: center; gap: 6px; padding: 0 10px; font-size: var(--tc-fs-11); color: var(--tc-gray-700); }
.tclean-site-minichrome__icone { width: 14px; height: 14px; }
.tclean-site-minichrome__corpo { flex: 1; display: flex; gap: 8px; padding: 10px; }
.tclean-site-minichrome__anuncio { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.tclean-site-minichrome__foto { height: 96px; border-radius: var(--tc-radius-ctl-sm); background: var(--tc-lavender); display: flex; align-items: center; justify-content: center; color: var(--tc-accent); font-size: var(--tc-fs-34); }
.tclean-site-minichrome__linha { height: 8px; width: 90%; border-radius: var(--tc-radius-xs); background: var(--tc-border); }
.tclean-site-minichrome__linha--curta { width: 70%; }
.tclean-site-minichrome__emori { width: 120px; border: 1.5px solid var(--tc-ink); border-radius: var(--tc-radius-ctl); padding: 8px; display: flex; flex-direction: column; gap: 2px; font-size: var(--tc-fs-11); }
.tclean-site-minichrome__emori strong { font-weight: 600; color: var(--tc-ink); }
.tclean-site-minichrome__emori small { font-size: var(--tc-fs-11); color: var(--tc-text-soft); }
.tclean-site-minichrome__emori b { font-weight: 600; }
.tclean-site-minichrome__emori b.is-pos { font-size: var(--tc-fs-16); color: var(--tc-success-ink); }

/* Botões das lojas de app (site_lojas() em componentes/site/funcoes.php): padrão próprio, sem os selos
   oficiais. Duas pílulas iguais (a grade de 2 colunas 1fr dá a mesma largura), borda fina escura, ícone
   à esquerda e texto em peso médio. --claro: sobre fundo roxo/escuro (pílula clara com texto roxo). */
.tclean-site-lojas { display: inline-grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 10px; width: max-content; max-width: 100%; align-self: flex-start; }
.tclean-site-lojas__btn {
  height: 46px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--tc-text-strong);
  border-radius: var(--tc-radius-pill);
  background: var(--tc-surface);
  color: var(--tc-text-strong);
  font-size: var(--tc-fs-15);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.tclean-site-lojas__btn:hover { background: var(--tc-lavender); color: var(--tc-ink); border-color: var(--tc-ink); }
.tclean-site-lojas__btn:focus-visible { outline: 2px solid var(--tc-accent); outline-offset: 2px; }
.tclean-site-lojas__icone { font-size: var(--tc-fs-18); }
.tclean-site-lojas--claro .tclean-site-lojas__btn { border-color: var(--tc-white); background: var(--tc-white); color: var(--tc-ink); }
.tclean-site-lojas--claro .tclean-site-lojas__btn:hover { background: var(--tc-lavender); border-color: var(--tc-lavender); color: var(--tc-ink); }
.tclean-site-lojas--claro .tclean-site-lojas__btn:focus-visible { outline-color: var(--tc-white); }

/* Como funciona: 3 passos */
.tclean-site-etapas { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.tclean-site-etapas__visual { display: none; }
.tclean-site-etapas__corpo { display: flex; gap: 14px; align-items: flex-start; }
.tclean-site-etapas__num { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: var(--tc-ink); color: var(--tc-white); display: flex; align-items: center; justify-content: center; font-size: var(--tc-fs-14); font-weight: 600; }
.tclean-site-etapas__titulo { font-size: var(--tc-fs-17); font-weight: 600; color: var(--tc-text-strong); }
.tclean-site-etapas__texto { font-size: var(--tc-fs-15); color: var(--tc-text-soft); }
.tclean-site-etapas__venda { display: flex; justify-content: space-between; font-size: var(--tc-fs-13); color: var(--tc-text-soft); }
.tclean-site-etapas__venda strong { color: var(--tc-success-ink); font-weight: 600; }
.tclean-site-etapas__legenda { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--tc-fs-11-5); color: var(--tc-text-soft); }
.tclean-site-etapas__legenda span { display: inline-flex; align-items: center; gap: 4px; }

/* Depoimentos com foto */
.tclean-site-depoimentos { padding: 56px 0 0; display: flex; flex-direction: column; gap: 14px; }
.tclean-site-depo { margin: 0; height: 100%; border: 1px solid var(--tc-border); border-radius: var(--tc-radius-card); background: var(--tc-surface); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.tclean-site-depo__tag { height: 26px; padding: 0 10px; }
.tclean-site-depo__texto { font-size: var(--tc-fs-17); line-height: 1.4; color: var(--tc-text-strong); }
.tclean-site-depo__autor { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.tclean-site-depo__autor picture { flex-shrink: 0; }
.tclean-site-depo__foto { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: center top; }
.tclean-site-depo__autor > span { display: flex; flex-direction: column; }
.tclean-site-depo__nome { font-size: var(--tc-fs-15); font-weight: 600; color: var(--tc-text-strong); }
.tclean-site-depo__loja { font-size: var(--tc-fs-13); color: var(--tc-text-soft); }

/* Preço em uma faixa + link para /precos */
.tclean-site-faixapreco { border-radius: var(--tc-radius-sheet); background: var(--tc-lavender); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.tclean-site-faixapreco__texto { display: flex; flex-direction: column; gap: 10px; }
.tclean-site-faixapreco__titulo { font-size: var(--tc-fs-26); line-height: 1.1; font-weight: 500; letter-spacing: -0.03em; color: var(--tc-text-strong); }
.tclean-site-faixapreco__sub { font-size: var(--tc-fs-15); color: var(--tc-text-soft); }
.tclean-site-faixapreco__lista { flex-direction: column; gap: 6px; font-size: var(--tc-fs-14-5); color: var(--tc-text); }
.tclean-site-faixapreco__acao { height: 48px; font-weight: 600; }

/* FAQ numa coluna (home): ritmo curto no fim da página */
.tclean-site-faqbloco { padding: 40px 0 0; }
.tclean-site-faqbloco__inner { max-width: 820px; display: flex; flex-direction: column; gap: 10px; }
.tclean-site-faqbloco__titulo { margin-bottom: 4px; font-size: var(--tc-fs-26); line-height: 1.1; font-weight: 500; letter-spacing: -0.03em; color: var(--tc-text-strong); }
.tclean-site-faqbloco .tclean-site-faq__lista { flex: none; border-top: 0; }
.tclean-site-faqbloco .tclean-site-faq__pergunta { min-height: 52px; padding: 8px 0; font-size: var(--tc-fs-15); }
.tclean-site-faqbloco .tclean-site-faq__resposta { margin: 0 0 14px; }
.tclean-site-faqbloco__mais { margin-top: 6px; font-size: var(--tc-fs-14); color: var(--tc-text-soft); }
.tclean-site-faqbloco__mais a { font-weight: 600; }
.tclean-site-ctafinal { padding: 24px 0 0; }

@media (min-width: 768px) {
  .tclean-site-section--compacta { padding-top: 88px; }
  .tclean-site-h2--centro-desk { text-align: center; }
  .tclean-site-hero { padding-top: clamp(40px, 6vw, 72px); }
  .tclean-site-hero__texto { align-items: center; text-align: center; gap: 22px; }
  .tclean-site-hero .tclean-site-h1--home { max-width: 900px; }
  .tclean-site-hero__acoes { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .tclean-site-hero__cta { height: 52px; padding: 0 24px; font-size: var(--tc-fs-16); font-weight: 500; }
  .tclean-site-hero__confianca { margin-top: -6px; }
  .tclean-site-hero__demo { margin-top: -14px; }
  .tclean-site-hero__demo-pre { display: inline; }
  .tclean-site-logos { padding: 104px 0 28px; }
  .tclean-site-logos__inner { gap: 18px; }
  .tclean-site-logos__titulo { font-size: var(--tc-fs-13); font-weight: 500; color: var(--tc-text-soft); }
  .tclean-site-logos__lista { max-width: 980px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .tclean-site-logos__item { height: 96px; padding: 18px 28px; border-radius: var(--tc-radius-xl); gap: 12px; }
  .tclean-site-logos__img--ml { height: 46px; }
  .tclean-site-logos__img--shopee { height: 62px; }
  .tclean-site-logos__img--amazon { height: 32px; margin-top: 6px; }
  .tclean-site-logos__img--tiktok { height: 40px; width: 40px; }
  .tclean-site-logos__nome { font-size: var(--tc-fs-20); }
  .tclean-site-bloco { padding-top: 80px; }
  .tclean-site-recursos { padding-bottom: 24px; }
  .tclean-site-recursos .tclean-site-bloco { padding-top: 104px; }
  .tclean-site-bloco__inner { flex-direction: row; align-items: center; gap: clamp(28px, 5vw, 64px); }
  .tclean-site-bloco--invertido .tclean-site-bloco__inner { flex-direction: row-reverse; }
  .tclean-site-bloco__texto { flex: 1 1 360px; gap: 14px; }
  .tclean-site-bloco__midia { flex: 1.2 1 420px; }
  .tclean-site-bloco .tclean-site-texto { font-size: var(--tc-fs-17); }
  .tclean-site-chips { display: flex; }
  .tclean-site-sobrou { border-radius: var(--tc-radius-sheet); }
  .tclean-site-sobrou__item { grid-template-columns: 120px minmax(0, 1fr) 90px; }
  .tclean-site-onde { margin-top: 96px; padding: 88px 0; gap: 32px; }
  .tclean-site-onde__cabeca { align-items: center; text-align: center; }
  .tclean-site-onde__deslize { display: none; }
  .tclean-site-wrap.tclean-site-wrap--carrossel { padding: 0 20px; }
  .tclean-site-carrossel { padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; overflow: visible; }
  .tclean-site-carrossel > li { flex: none; }
  .tclean-site-carrossel:has(> li:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tclean-site-canal { padding: 20px; gap: 14px; }
  .tclean-site-zap--extra { display: block; }
  .tclean-site-etapas { flex-direction: row; gap: 16px; }
  .tclean-site-etapas__item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
  .tclean-site-etapas__visual { height: 150px; border-radius: var(--tc-radius-card); background: var(--tc-surface); border: 1px solid var(--tc-border); padding: 16px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
  .tclean-site-etapas__visual--logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tclean-site-etapas__visual--logos > span { border: 1px solid var(--tc-border); border-radius: var(--tc-radius-ctl); display: flex; align-items: center; justify-content: center; gap: 6px; overflow: hidden; }
  .tclean-site-etapas__visual--logos .tclean-site-logos__img--ml { height: 24px; }
  .tclean-site-etapas__visual--logos .tclean-site-logos__img--shopee { height: 34px; }
  .tclean-site-etapas__visual--logos .tclean-site-logos__img--amazon { height: 16px; margin-top: 3px; }
  .tclean-site-etapas__visual--logos .tclean-site-logos__img--tiktok { height: 20px; width: 20px; }
  .tclean-site-etapas__visual--logos b { font-size: var(--tc-fs-12); font-weight: 600; color: var(--tc-brand-tiktok-ink); }
  .tclean-site-etapas__visual--escuro { background: var(--tc-text-strong); border-color: var(--tc-text-strong); }
  .tclean-site-depoimentos { margin-top: 88px; padding: 88px 0; background: var(--tc-surface); border-top: 1px solid var(--tc-border); gap: 32px; }
  .tclean-site-depo { padding: 24px; }
  .tclean-site-faixapreco { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 32px; border-radius: var(--tc-radius-2xl); }
  .tclean-site-faixapreco__titulo { font-size: var(--tc-fs-32); }
  .tclean-site-faixapreco__lista { flex-direction: row; gap: 8px 20px; }
  .tclean-site-faixapreco__acao { flex-shrink: 0; }
  .tclean-site-faqbloco { padding-top: 48px; }
  .tclean-site-ctafinal { padding-top: 48px; }
}
/* ==========================================================================
   ChatGPT e Claude / servidor MCP (chatgpt-claude.php) — mobile first, desenho McpMobile/Mcp do canvas.
   Usa a moldura da home v2.3 (tclean-site-hero, -bloco, -recursos, -faqbloco, -cta) e as cenas abaixo.
   Números fictícios desenhados em HTML/CSS; sem logos da OpenAI/Anthropic.
   ========================================================================== */
.tclean-site-mcp-hero { align-items: center; }
.tclean-site-mcp-hero__texto { gap: 14px; }
.tclean-site-mcp-hero .tclean-site-h1 { font-size: var(--tc-fs-site-hero); line-height: 1.04; letter-spacing: -0.04em; text-wrap: balance; }
.tclean-site-mcp-hero .tclean-site-h1 em { display: block; }
.tclean-site-mcp-hero__acoes { display: flex; flex-direction: column; gap: 6px; }
.tclean-site-mcp-hero__acoes .tclean-site-demo { align-self: center; }
.tclean-site-mcp-hero__nota { font-size: var(--tc-fs-13); color: var(--tc-text-soft); text-align: center; }
.tclean-site-mcp-selo { align-self: flex-start; height: 30px; padding: 0 12px 0 10px; display: inline-flex; align-items: center; gap: 8px; border-radius: var(--tc-radius-pill); background: var(--tc-backdrop); color: var(--tc-white); font-size: var(--tc-fs-12-5); font-weight: 600; }
.tclean-site-mcp-selo .tclean-site-icone { color: var(--tc-yellow); }

/* Pedido + cartão de confirmação (hero) */
.tclean-site-mcp-pedido { width: 100%; max-width: 540px; border-radius: var(--tc-radius-card); background: var(--tc-lavender); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.tclean-site-mcp-pedido__msg { align-self: flex-end; max-width: 86%; background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-xl) var(--tc-radius-xl) var(--tc-radius-xs) var(--tc-radius-xl); padding: 10px 12px; font-size: var(--tc-fs-14-5); color: var(--tc-text-strong); }
.tclean-site-mcp-pedido__acao { align-self: flex-start; height: 28px; padding: 0 10px 0 6px; display: inline-flex; align-items: center; gap: 6px; border-radius: var(--tc-radius-pill); background: var(--tc-surface); border: 1px solid var(--tc-lavender-line); font-size: var(--tc-fs-12); font-weight: 600; color: var(--tc-ink); }
.tclean-site-mcp-pedido__simbolo { width: 18px; height: 18px; border-radius: var(--tc-radius-xs); background: var(--tc-ink); display: inline-flex; align-items: center; justify-content: center; }
.tclean-site-mcp-pedido__simbolo .tclean-site-simbolo { width: 12px; height: 10px; }
.tclean-site-mcp-confirma { background: var(--tc-surface); border: 1.5px solid var(--tc-ink); border-radius: var(--tc-radius-xl); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.tclean-site-mcp-confirma__titulo { display: flex; align-items: center; gap: 6px; font-size: var(--tc-fs-13); font-weight: 600; color: var(--tc-ink); }
.tclean-site-mcp-confirma__linha { display: flex; justify-content: space-between; gap: 10px; font-size: var(--tc-fs-15); color: var(--tc-text-strong); font-variant-numeric: tabular-nums; }
.tclean-site-mcp-confirma__linha--suave { font-size: var(--tc-fs-13-5); color: var(--tc-text-soft); }
.tclean-site-mcp-confirma__botoes { margin-top: 4px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tclean-site-mcp-confirma__sim,
.tclean-site-mcp-confirma__nao { height: 44px; border-radius: var(--tc-radius-ctl); display: flex; align-items: center; justify-content: center; font-size: var(--tc-fs-14-5); font-weight: 600; }
.tclean-site-mcp-confirma__sim { background: var(--tc-ink); color: var(--tc-white); }
.tclean-site-mcp-confirma__nao { border: 1px solid var(--tc-border); color: var(--tc-text); font-weight: 500; }
.tclean-site-mcp-pedido__seguinte { display: none; }
.tclean-site-mcp-confirma--feito { border-color: var(--tc-success-line); }
.tclean-site-mcp-confirma__feito { margin-top: 4px; height: 40px; border-radius: var(--tc-radius-ctl); background: var(--tc-success-soft); color: var(--tc-success-ink); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: var(--tc-fs-14); font-weight: 600; }
.tclean-site-mcp-pedido .is-pos,
.tclean-site-mcp-lote .is-pos { color: var(--tc-success-ink); font-weight: 600; }
.tclean-site-mcp-pedido .is-neg,
.tclean-site-mcp-lote .is-neg,
.tclean-site-mcp-promo .is-neg { color: var(--tc-danger-ink); font-weight: 600; }

/* Onde funciona + O que é MCP */
.tclean-site-mcp-onde { display: flex; flex-direction: column; gap: 20px; }
.tclean-site-mcp-clientes { display: flex; flex-direction: column; gap: 10px; }
.tclean-site-mcp-clientes__titulo { font-size: var(--tc-fs-13); color: var(--tc-text-soft); }
.tclean-site-mcp-clientes__lista { display: flex; flex-wrap: wrap; gap: 8px; }
.tclean-site-mcp-clientes__chip { height: 40px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; border-radius: var(--tc-radius-lg); background: var(--tc-surface); border: 1px solid var(--tc-border); font-size: var(--tc-fs-15); font-weight: 600; color: var(--tc-text-strong); }
.tclean-site-mcp-clientes__chip .tclean-site-icone { color: var(--tc-accent); }
.tclean-site-mcp-clientes__chip--outros { background: transparent; border: 1px dashed var(--tc-lilac-200); font-size: var(--tc-fs-14); font-weight: 400; color: var(--tc-text-soft); }
.tclean-site-mcp-oque { padding: 16px; border-radius: var(--tc-radius-xl); background: var(--tc-surface); border: 1px solid var(--tc-border); display: flex; gap: 14px; align-items: flex-start; }
.tclean-site-mcp-oque__sigla { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--tc-radius-ctl); background: var(--tc-lavender); display: flex; align-items: center; justify-content: center; font-size: var(--tc-fs-12); font-weight: 600; color: var(--tc-ink); }
.tclean-site-mcp-oque__titulo { font-size: var(--tc-fs-16); font-weight: 600; color: var(--tc-text-strong); }
.tclean-site-mcp-oque__texto { margin-top: 2px; font-size: var(--tc-fs-14-5); color: var(--tc-text-soft); }

/* Grava depois do seu ok × Só lê */
.tclean-site-mcp-ok { width: 100%; max-width: 560px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tclean-site-mcp-ok__card { border-radius: var(--tc-radius-xl); background: var(--tc-surface); border: 1px solid var(--tc-border); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.tclean-site-mcp-ok__card--escuro { background: var(--tc-backdrop); border-color: var(--tc-backdrop); color: var(--tc-white); }
.tclean-site-mcp-ok__icone { width: 36px; height: 36px; border-radius: var(--tc-radius-ctl); background: var(--tc-lavender); color: var(--tc-ink); display: flex; align-items: center; justify-content: center; font-size: var(--tc-fs-16); }
.tclean-site-mcp-ok__card--escuro .tclean-site-mcp-ok__icone { background: var(--tc-yellow-bg); color: var(--tc-yellow); }
.tclean-site-mcp-ok__titulo { font-size: var(--tc-fs-15); font-weight: 600; color: var(--tc-text-strong); }
.tclean-site-mcp-ok__card--escuro .tclean-site-mcp-ok__titulo { color: var(--tc-white); }
.tclean-site-mcp-ok__lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: var(--tc-fs-13-5); color: var(--tc-text-soft); }
.tclean-site-mcp-ok__card--escuro .tclean-site-mcp-ok__lista { color: var(--tc-white-a80); }

/* Fala do usuário e nota */
.tclean-site-mcp-fala { align-self: flex-start; font-size: var(--tc-fs-14-5); font-weight: 500; color: var(--tc-ink); background: var(--tc-lavender); border-radius: var(--tc-radius-lg); padding: 10px 12px; }
.tclean-site-mcp-nota { display: flex; gap: 8px; align-items: flex-start; font-size: var(--tc-fs-13-5); color: var(--tc-text-soft); }
.tclean-site-mcp-nota .tclean-site-icone { margin-top: 2px; color: var(--tc-accent); }

/* Cena: custo em lote (antes → depois) */
.tclean-site-mcp-lote { width: 100%; max-width: 560px; background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-xl); overflow: hidden; }
.tclean-site-mcp-lote__linha { display: grid; grid-template-columns: minmax(0, 1fr) 92px 80px; gap: 8px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--tc-border); font-size: var(--tc-fs-13); font-variant-numeric: tabular-nums; }
.tclean-site-mcp-lote__linha > span:not(:first-child) { text-align: right; white-space: nowrap; }
.tclean-site-mcp-lote__linha--cab { font-size: var(--tc-fs-11); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tc-text-soft); }
.tclean-site-mcp-lote__linha--neg { background: var(--tc-danger-bg); }
.tclean-site-mcp-lote__nome { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tc-text-strong); }
.tclean-site-mcp-lote s { color: var(--tc-text-soft); }
.tclean-site-mcp-lote strong { font-weight: 600; color: var(--tc-text-strong); }
.tclean-site-mcp-lote__rodape { padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--tc-fs-13); color: var(--tc-text-soft); }
.tclean-site-mcp-lote__alerta { height: 26px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: var(--tc-radius-ctl-sm); background: var(--tc-warning-bg); color: var(--tc-warning-ink); font-weight: 600; }

/* Cena: promoção com piso de margem + ações da Shopee */
.tclean-site-mcp-promo { width: 100%; max-width: 560px; background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-xl); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.tclean-site-mcp-promo__topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--tc-fs-14); font-weight: 600; color: var(--tc-text-strong); }
.tclean-site-mcp-promo__piso { height: 26px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: var(--tc-radius-ctl-sm); background: var(--tc-lavender); color: var(--tc-ink); font-size: var(--tc-fs-12); }
/* A linha tracejada vertical marca o piso de 15% (37,5% da largura do trilho, escala até 40%) */
.tclean-site-mcp-promo__barras { position: relative; display: flex; flex-direction: column; gap: 10px; font-size: var(--tc-fs-12-5); }
.tclean-site-mcp-promo__linha { display: grid; grid-template-columns: 96px minmax(0, 1fr) 48px; gap: 8px; align-items: center; }
.tclean-site-mcp-promo__trilho { position: relative; height: 12px; border-radius: var(--tc-radius-sm); background: var(--tc-track); }
.tclean-site-mcp-promo__trilho::after { content: ""; position: absolute; top: -4px; bottom: -4px; left: 37.5%; border-left: 2px dashed var(--tc-ink); }
.tclean-site-mcp-promo__fill { display: block; height: 100%; border-radius: var(--tc-radius-sm); background: var(--tc-success); }
.tclean-site-mcp-promo__fill--neg { background: var(--tc-danger-bright); }
.tclean-site-mcp-promo__valor { text-align: right; font-weight: 600; color: var(--tc-success-ink); font-variant-numeric: tabular-nums; }
.tclean-site-mcp-promo__resumo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; font-size: var(--tc-fs-13); font-weight: 600; }
.tclean-site-mcp-promo__entram,
.tclean-site-mcp-promo__fora { height: 36px; border-radius: var(--tc-radius-ctl); display: flex; align-items: center; justify-content: center; }
.tclean-site-mcp-promo__entram { background: var(--tc-success-soft); color: var(--tc-success-ink); }
.tclean-site-mcp-promo__fora { background: var(--tc-danger-bg); color: var(--tc-danger-ink); }
.tclean-site-mcp-acoes { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.tclean-site-mcp-acoes li { height: 30px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; border-radius: var(--tc-radius-ctl-sm); background: var(--tc-surface); border: 1px solid var(--tc-border); font-size: var(--tc-fs-13); color: var(--tc-text); }
.tclean-site-mcp-acoes__logo { width: auto; height: 20px; }

/* Cena: clone lado a lado (original × prévia, nada publicado ainda) */
.tclean-site-mcp-clone { width: 100%; max-width: 560px; border-radius: var(--tc-radius-card); background: var(--tc-yellow-soft); padding: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tclean-site-mcp-clone__card { min-width: 0; background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-lg); padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.tclean-site-mcp-clone__card--previa { border: 1.5px dashed var(--tc-accent); }
.tclean-site-mcp-clone__topo { display: flex; align-items: center; gap: 6px; font-size: var(--tc-fs-11); color: var(--tc-text-soft); }
.tclean-site-mcp-clone__card--previa .tclean-site-mcp-clone__topo { color: var(--tc-ink); font-weight: 600; }
.tclean-site-mcp-clone__logo { width: 16px; height: 16px; }
.tclean-site-mcp-clone__logo--shopee { width: auto; height: 18px; }
.tclean-site-mcp-clone__foto { height: 86px; border-radius: var(--tc-radius-ctl-sm); background: var(--tc-lavender-line); display: flex; align-items: center; justify-content: center; color: var(--tc-ink); font-size: var(--tc-fs-34); }
.tclean-site-mcp-clone__titulo { font-size: var(--tc-fs-12); line-height: 1.35; color: var(--tc-text-strong); }
.tclean-site-mcp-clone__titulo mark { background: var(--tc-warning-bg); color: var(--tc-text-strong); }
.tclean-site-mcp-clone__preco { font-size: var(--tc-fs-15); font-weight: 600; font-variant-numeric: tabular-nums; }
.tclean-site-mcp-clone__rodape { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 2px 0; }
.tclean-site-mcp-clone__nada { font-size: var(--tc-fs-12-5); font-weight: 600; color: var(--tc-warning-ink); }
.tclean-site-mcp-clone__publicar { height: 36px; padding: 0 14px; border-radius: var(--tc-radius-ctl); background: var(--tc-ink); color: var(--tc-white); display: inline-flex; align-items: center; font-size: var(--tc-fs-13-5); font-weight: 600; }

/* Cena: estratégia (mini-relatório escuro) */
.tclean-site-mcp-relatorio { width: 100%; max-width: 560px; border-radius: var(--tc-radius-card); background: var(--tc-backdrop); color: var(--tc-white); padding: 16px; display: flex; flex-direction: column; gap: 12px; font-size: var(--tc-fs-13); }
.tclean-site-mcp-relatorio__titulo { color: var(--tc-white-a80); }
.tclean-site-mcp-relatorio__linha { display: grid; grid-template-columns: 92px minmax(0, 1fr) 96px; gap: 8px; align-items: center; }
.tclean-site-mcp-relatorio__barras { display: flex; flex-direction: column; gap: 3px; }
.tclean-site-mcp-relatorio__margem,
.tclean-site-mcp-relatorio__ads { display: block; height: 8px; border-radius: var(--tc-radius-xs); }
.tclean-site-mcp-relatorio__margem { background: var(--tc-success-bright); }
.tclean-site-mcp-relatorio__ads { background: var(--tc-yellow); }
.tclean-site-mcp-relatorio__valor { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tclean-site-mcp-relatorio__valor.is-alerta { color: var(--tc-danger-bright); font-weight: 600; }
.tclean-site-mcp-relatorio__legenda { display: flex; gap: 12px; font-size: var(--tc-fs-11-5); color: var(--tc-white-a80); }
.tclean-site-mcp-relatorio__legenda span { display: inline-flex; align-items: center; gap: 5px; }
.tclean-site-mcp-relatorio__legenda i { width: 8px; height: 8px; border-radius: var(--tc-radius-2xs); }
.tclean-site-mcp-relatorio__conclusao { border-radius: var(--tc-radius-lg); background: var(--tc-white-a10); padding: 10px 12px; font-size: var(--tc-fs-13-5); }

/* Também dá para pedir */
.tclean-site-mcp-extras { max-width: 900px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.tclean-site-mcp-extras__card { border-radius: var(--tc-radius-xl); background: var(--tc-surface); border: 1px solid var(--tc-border); padding: 14px; display: flex; gap: 12px; align-items: flex-start; }
.tclean-site-mcp-extras__card > .tclean-site-icone { margin-top: 3px; color: var(--tc-accent); font-size: var(--tc-fs-16); }
.tclean-site-mcp-extras__titulo { font-size: var(--tc-fs-15); font-weight: 600; color: var(--tc-text-strong); }
.tclean-site-mcp-extras__texto { font-size: var(--tc-fs-13-5); color: var(--tc-text-soft); }

/* Conectar em 3 passos: bloco escuro com o endereço copiável ([data-site-copiar] em js/site.js) */
.tclean-site-mcp-conectar { margin-top: 56px; padding: 40px 0; background: var(--tc-backdrop); color: var(--tc-white); }
.tclean-site-mcp-conectar__inner { display: flex; flex-direction: column; gap: 20px; }
.tclean-site-mcp-conectar__texto { display: flex; flex-direction: column; gap: 12px; }
.tclean-site-mcp-conectar .tclean-site-h2 { color: var(--tc-white); }
.tclean-site-mcp-conectar__selo { align-self: flex-start; height: 28px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: var(--tc-radius-ctl-sm); background: var(--tc-yellow-bg); color: var(--tc-yellow); font-size: var(--tc-fs-12); font-weight: 600; }
.tclean-site-mcp-conectar__tags { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--tc-fs-12); color: var(--tc-white-a80); }
.tclean-site-mcp-conectar__tags li { min-height: 26px; padding: 3px 8px; display: inline-flex; align-items: center; border-radius: var(--tc-radius-sm); border: 1px solid var(--tc-white-a25); }
.tclean-site-mcp-conectar__mais { font-size: var(--tc-fs-13-5); color: var(--tc-white-a80); }
.tclean-site-mcp-conectar__mais a { color: var(--tc-yellow); font-weight: 600; }
.tclean-site-mcp-conectar__mais a:hover { color: var(--tc-yellow-hover); }
.tclean-site-mcp-conectar__passos-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tclean-site-mcp-conectar__endereco { border-radius: var(--tc-radius-xl); background: var(--tc-white-a10); border: 1px solid var(--tc-white-a15); padding: 6px 6px 6px 14px; display: flex; align-items: center; gap: 8px; }
.tclean-site-mcp-conectar__endereco { flex-wrap: wrap; }
.tclean-site-mcp-conectar__endereco code { flex: 1 1 auto; min-width: 0; font-family: var(--tc-mono); font-size: var(--tc-fs-12); color: var(--tc-white); white-space: nowrap; }
.tclean-site-mcp-conectar__copiar { height: 44px; padding: 0 14px; flex-shrink: 0; border: none; border-radius: var(--tc-radius-ctl); background: var(--tc-yellow); color: var(--tc-ink); font-family: inherit; font-size: var(--tc-fs-14); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: background .15s ease; }
.tclean-site-mcp-conectar__copiar:hover { background: var(--tc-yellow-hover); }
.tclean-site-mcp-conectar__copiar:focus-visible { outline: 2px solid var(--tc-white); outline-offset: 2px; }
.tclean-site-mcp-conectar__copiar.is-copiado { background: var(--tc-success-bright); color: var(--tc-text-strong); }
.tclean-site-mcp-conectar__passos { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: var(--tc-fs-15); }
.tclean-site-mcp-conectar__passos li { display: flex; gap: 12px; align-items: flex-start; }
.tclean-site-mcp-conectar__passos strong { font-weight: 600; }
.tclean-site-mcp-conectar__num { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: var(--tc-yellow); color: var(--tc-ink); display: flex; align-items: center; justify-content: center; font-size: var(--tc-fs-13); font-weight: 700; }
.tclean-site-ctafinal { padding-bottom: 24px; }

@media (min-width: 768px) {
  .tclean-site-mcp-hero__acoes { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
  .tclean-site-mcp-hero__acoes .tclean-site-demo { align-self: auto; }
  .tclean-site-mcp-hero__nota { text-align: left; }
  .tclean-site-mcp-hero .tclean-site-hero__cta { height: 54px; padding: 0 24px; }
  .tclean-site-mcp-pedido { padding: 28px; border-radius: var(--tc-radius-2xl); }
  .tclean-site-mcp-pedido__seguinte { margin-top: 10px; padding-top: 18px; border-top: 1px dashed var(--tc-lilac-200); display: flex; flex-direction: column; gap: 10px; }
  .tclean-site-mcp-oque { max-width: 620px; padding: 18px 20px; }
  .tclean-site-mcp-extras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tclean-site-mcp-conectar__endereco code { font-size: var(--tc-fs-14); }
  .tclean-site-ctafinal { padding-bottom: 40px; }
}
@media (min-width: 1024px) {
  .tclean-site-carrossel:has(> li:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tclean-site-mcp-onde { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; }
  .tclean-site-mcp-conectar { margin-top: 96px; padding: 64px 0; }
  .tclean-site-mcp-conectar__inner { flex-direction: row; align-items: center; gap: clamp(28px, 5vw, 64px); }
  .tclean-site-mcp-conectar__texto,
  .tclean-site-mcp-conectar__passos-col { flex: 1 1 0; }
}

/* Tablet (768–1023px): menu no botão e painel do hero sem os cartões sobrepostos */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .tclean-site-header__nav { display: none; }
  .tclean-site-header__menu { display: inline-flex; }
  .tclean-site-painel__menu,
  .tclean-site-painel__celular,
  .tclean-site-painel__repasse { display: none; }
  .tclean-site-painel__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .tclean-site--home .tclean-site-footer { padding-top: 24px; }
  .tclean-site-barra {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--tc-surface) 97%, transparent);
    border-top: 1px solid var(--tc-border);
    box-shadow: var(--tc-shadow-sheet);
    align-items: center;
    gap: 10px;
    transform: translateY(110%);
    visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
  }
  .tclean-site-barra.is-visivel { transform: none; visibility: visible; transition: transform .25s ease; }
  .tclean-site-barra__wa { width: 50px; height: 50px; flex-shrink: 0; border-radius: var(--tc-radius-lg); border: 1px solid var(--tc-border); display: flex; align-items: center; justify-content: center; color: var(--tc-success-ink); font-size: var(--tc-fs-24); }
  .tclean-site-barra__cta { flex: 1; min-width: 0; height: 50px; padding: 0 12px; flex-direction: column; gap: 0; line-height: 1.15; white-space: normal; text-align: center; }
  .tclean-site-barra__texto { font-size: var(--tc-fs-16); font-weight: 600; }
  .tclean-site-barra__sub { font-size: var(--tc-fs-11-5); color: var(--tc-white-a80); }
}

/* ---------- Extensão: navegador, comparativo, busca, passos ---------- */
.tclean-site-browser { background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-xl); overflow: hidden; box-shadow: var(--tc-shadow-drawer); }
.tclean-site-browser__barra { height: 40px; padding: 0 14px; display: flex; align-items: center; gap: 8px; background: var(--tc-track); border-bottom: 1px solid var(--tc-border); }
.tclean-site-browser__ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--tc-gray-300); flex-shrink: 0; }
.tclean-site-browser__url { margin-left: 10px; flex: 1; min-width: 0; height: 24px; border-radius: var(--tc-radius-sm); background: var(--tc-surface); font-family: var(--tc-mono); font-size: var(--tc-fs-11-5); color: var(--tc-muted); display: flex; align-items: center; padding: 0 10px; white-space: nowrap; overflow: hidden; }
.tclean-site-browser__ext { width: 24px; height: 24px; border-radius: var(--tc-radius-sm); background: var(--tc-ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tclean-site-browser__corpo { display: flex; flex-wrap: wrap; gap: 16px; padding: 18px; background: var(--tc-gray-50); }
.tclean-site-esqueleto { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 10px; opacity: .75; }
.tclean-site-esqueleto__img { height: 180px; border-radius: var(--tc-radius-ctl); border: 1px solid var(--tc-lavender-line); background: var(--tc-lavender); display: flex; align-items: center; justify-content: center; color: var(--tc-accent); font-size: var(--tc-fs-site-sobra); }
.tclean-site-esqueleto__linha { height: 12px; width: 90%; border-radius: var(--tc-radius-xs); background: var(--tc-gray-100); }
.tclean-site-esqueleto__linha--70 { width: 70%; }
.tclean-site-esqueleto__linha--60 { width: 60%; }
.tclean-site-esqueleto__linha--76 { width: 76%; }
.tclean-site-esqueleto__linha--preco { height: 22px; width: 40%; margin-top: 6px; background: var(--tc-gray-300); }
.tclean-site-esqueleto__linha--btn { height: 36px; width: 100%; margin-top: 6px; border-radius: var(--tc-radius-ctl-sm); }
.tclean-site-esqueleto__linha--fina { height: 10px; }
.tclean-site-extcard { flex: 1 1 250px; min-width: 0; background: var(--tc-surface); border: 1px solid var(--tc-lavender-line); border-radius: var(--tc-radius-xl); box-shadow: var(--tc-shadow-raised); overflow: hidden; }
.tclean-site-extcard__topo { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--tc-border); font-size: var(--tc-fs-13); font-weight: 600; color: var(--tc-ink); }
.tclean-site-extcard__topo .tclean-site-selo { margin-left: auto; font-size: var(--tc-fs-10); padding: 1px 6px; }
.tclean-site-extcard__corpo { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.tclean-site-extcard__grafico-topo { display: flex; justify-content: space-between; font-size: var(--tc-fs-10); color: var(--tc-muted); }
.tclean-site-extcard__queda { color: var(--tc-danger-ink); font-weight: 600; }
.tclean-site-linha-grafico { display: block; width: 100%; height: 38px; fill: none; stroke: var(--tc-accent); stroke-width: 2; }
.tclean-site-linha-grafico--ink { stroke: var(--tc-ink); stroke-width: 2.5; }
.tclean-site-linha-grafico--anterior { stroke: var(--tc-lilac-100); }
.tclean-site-extcard__calc { border-top: 1px solid var(--tc-border); padding-top: 10px; display: flex; flex-direction: column; gap: 4px; font-size: var(--tc-fs-12); }
.tclean-site-extcard__calc-titulo { font-size: var(--tc-fs-11); font-weight: 600; color: var(--tc-text); }
.tclean-site-extcard__calc-linha { display: flex; justify-content: space-between; color: var(--tc-text-soft); }
.tclean-site-extcard__calc-linha span:last-child { color: var(--tc-text); font-variant-numeric: tabular-nums; }
.tclean-site-extcard__calc-linha--sobra { font-weight: 600; }
.tclean-site-extcard__calc-linha--sobra span,
.tclean-site-extcard__calc-linha--sobra span:last-child { color: var(--tc-success-ink); }
.tclean-site-extcard__cadeado { background: var(--tc-lavender); border-radius: var(--tc-radius-ctl-sm); padding: 8px 10px; display: flex; gap: 8px; align-items: center; font-size: var(--tc-fs-11-5); color: var(--tc-ink); }
.tclean-site-compara { border: 1px solid var(--tc-border); border-radius: var(--tc-radius-card); overflow: hidden; }
.tclean-site-compara__linha { display: grid; grid-template-columns: minmax(0, 1fr) 96px 120px; align-items: center; border-bottom: 1px solid var(--tc-border); }
.tclean-site-compara__linha:last-child { border-bottom: 0; }
.tclean-site-compara__linha--cab { align-items: end; background: var(--tc-bg); }
.tclean-site-compara__recurso { padding: 14px 20px; font-size: var(--tc-fs-15); }
.tclean-site-compara__linha--cab .tclean-site-compara__recurso { padding: 16px 20px; font-size: var(--tc-fs-13); font-weight: 600; color: var(--tc-muted); }
.tclean-site-compara__col { display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: stretch; text-align: center; padding: 14px 8px; font-size: var(--tc-fs-18); color: var(--tc-success-ink); }
.tclean-site-compara__col--com { background: var(--tc-lavender); color: var(--tc-ink); }
.tclean-site-compara__col--nao { color: var(--tc-faint); font-size: var(--tc-fs-13); }
.tclean-site-compara__linha--cab .tclean-site-compara__col { padding: 16px 8px; font-size: var(--tc-fs-14); font-weight: 600; color: var(--tc-text-strong); }
.tclean-site-compara__linha--cab .tclean-site-compara__col--com { background: var(--tc-ink); color: var(--tc-white); }
.tclean-site-compara__col small { display: block; font-size: var(--tc-fs-11-5); font-weight: 400; color: var(--tc-muted); }
.tclean-site-compara__linha--cab .tclean-site-compara__col--com small { color: var(--tc-white-a80); }
.tclean-site-busca__resumo { padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; background: var(--tc-lavender); border-bottom: 1px solid var(--tc-lavender-line); font-size: var(--tc-fs-12-5); color: var(--tc-text-soft); }
.tclean-site-busca__resumo strong { font-weight: 600; color: var(--tc-text-strong); }
.tclean-site-busca__termo { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--tc-ink); }
.tclean-site-busca__item { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--tc-border); }
.tclean-site-busca__item:last-child { border-bottom: 0; }
.tclean-site-busca__meio { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tclean-site-busca__preco { font-size: var(--tc-fs-15); font-weight: 600; font-variant-numeric: tabular-nums; }
.tclean-site-etqs { display: flex; gap: 6px; flex-wrap: wrap; }
.tclean-site-etq { font-size: var(--tc-fs-11); font-weight: 600; color: var(--tc-ink); background: var(--tc-lavender); border-radius: var(--tc-radius-xs); padding: 1px 6px; }
.tclean-site-etq--full { color: var(--tc-ml-green); background: transparent; border: 1px solid var(--tc-ml-green-line); padding: 0 6px; }
.tclean-site-passo { background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-card); padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.tclean-site-passo--destaque { background: var(--tc-lavender); border-color: var(--tc-lavender-line); }
.tclean-site-passo__num { width: 36px; height: 36px; border-radius: var(--tc-radius-ctl); background: var(--tc-ink); color: var(--tc-white); display: flex; align-items: center; justify-content: center; font-weight: 600; }
.tclean-site-passo--destaque .tclean-site-passo__num { background: var(--tc-yellow); color: var(--tc-text-strong); }
.tclean-site-passo__titulo { font-size: var(--tc-fs-17); font-weight: 600; color: var(--tc-text-strong); }
.tclean-site-passo--destaque .tclean-site-passo__titulo { color: var(--tc-ink); }
.tclean-site-passo__texto { font-size: var(--tc-fs-14-5); color: var(--tc-text-soft); }
.tclean-site-passos { margin: 0; padding: 0; list-style: none; }

/* ---------- App: celular, QR ---------- */
.tclean-site-phone { width: 300px; max-width: 100%; height: 620px; border-radius: var(--tc-radius-phone); background: var(--tc-text-strong); padding: 12px; box-shadow: var(--tc-shadow-drawer); }
.tclean-site-phone--600 { height: 600px; }
.tclean-site-phone__tela { position: relative; height: 100%; border-radius: var(--tc-radius-2xl); background: var(--tc-backdrop); overflow: hidden; display: flex; flex-direction: column; padding: 22px 12px 16px; gap: 10px; }
.tclean-site-phone__tela--clara { background: var(--tc-bg); padding: 40px 14px 14px; gap: 12px; }
.tclean-site-phone__notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 90px; height: 24px; border-radius: var(--tc-radius-pill); background: var(--tc-text-strong); }
.tclean-site-phone__data { text-align: center; margin-top: 26px; color: var(--tc-white); font-size: var(--tc-fs-13); }
.tclean-site-phone__data span { color: var(--tc-white-a80); }
.tclean-site-phone__hora { font-size: var(--tc-fs-site-relogio); font-weight: 300; letter-spacing: -0.03em; line-height: 1; }
.tclean-site-phone__avisos { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.tclean-site-phone__rodape { margin-top: auto; text-align: center; font-size: var(--tc-fs-11); color: var(--tc-white-a60); }
.tclean-site-app__hoje { display: flex; align-items: center; gap: 6px; font-size: var(--tc-fs-17); font-weight: 600; color: var(--tc-ink); }
.tclean-site-app__hoje span { margin-left: auto; font-size: var(--tc-fs-10); font-weight: 400; color: var(--tc-muted); }
.tclean-site-app__lucro { background: var(--tc-ink); border-radius: var(--tc-radius-card); padding: 14px; color: var(--tc-white); }
.tclean-site-app__lucro small { display: block; font-size: var(--tc-fs-11-5); color: var(--tc-white-a80); }
.tclean-site-app__lucro strong { display: block; font-size: var(--tc-fs-28); font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tclean-site-app__pedidos { background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-xl); overflow: hidden; }
.tclean-site-app__pedidos-titulo { padding: 9px 12px; font-size: var(--tc-fs-12); font-weight: 600; color: var(--tc-text); border-bottom: 1px solid var(--tc-border); }
.tclean-site-app__pedido { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--tc-border); font-size: var(--tc-fs-12); }
.tclean-site-app__pedido:last-child { border-bottom: 0; }
.tclean-site-app__pedido-nome { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tclean-site-app__pedido-valor { font-weight: 600; color: var(--tc-success-ink); }
.tclean-site-app__pedido-valor--neg { color: var(--tc-danger-ink); }
.tclean-site-qr { display: flex; align-items: center; gap: 16px; background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-xl); padding: 14px; max-width: 420px; }
.tclean-site-qr__img { width: 104px; height: 104px; flex-shrink: 0; border-radius: var(--tc-radius-ctl-sm); border: 1px solid var(--tc-border); background: var(--tc-white); padding: 8px; }
.tclean-site-qr__titulo { font-size: var(--tc-fs-15); font-weight: 600; color: var(--tc-text-strong); }
.tclean-site-qr__texto { font-size: var(--tc-fs-13-5); color: var(--tc-text-soft); }

/* ---------- IA: chat, perguntas, assistente MCP ---------- */
.tclean-site-chat { width: 100%; max-width: 440px; background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-2xl); overflow: hidden; box-shadow: var(--tc-shadow-drawer); }
.tclean-site-chat__topo { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--tc-border); }
.tclean-site-chat__avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--tc-ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tclean-site-chat__nome { font-size: var(--tc-fs-15); font-weight: 600; color: var(--tc-text-strong); }
.tclean-site-chat__sub { font-size: var(--tc-fs-12); color: var(--tc-muted); }
.tclean-site-chat__conversa { background: var(--tc-track); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.tclean-site-chat__conversa .tclean-site-bolha { font-size: var(--tc-fs-14); border-color: transparent; }
.tclean-site-chat__conversa .tclean-site-bolha--eu { background: var(--tc-lavender-line); }
.tclean-site-chat__entrada { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--tc-border); }
.tclean-site-chat__campo { flex: 1; height: 40px; border-radius: var(--tc-radius-pill); background: var(--tc-track); display: flex; align-items: center; padding: 0 14px; font-size: var(--tc-fs-13-5); color: var(--tc-muted); }
.tclean-site-chat__mic { width: 40px; height: 40px; border-radius: 50%; background: var(--tc-ink); color: var(--tc-white); display: flex; align-items: center; justify-content: center; font-size: var(--tc-fs-16); }
.tclean-site-perguntas { display: flex; flex-wrap: wrap; gap: 10px; }
.tclean-site-pergunta { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: var(--tc-radius-pill); background: var(--tc-bg); border: 1px solid var(--tc-border); font-size: var(--tc-fs-15); }
.tclean-site-pergunta .tclean-site-icone { color: var(--tc-accent); }
.tclean-site-assistente { padding: 18px; display: flex; flex-direction: column; gap: 14px; font-size: var(--tc-fs-14-5); }
.tclean-site-assistente .tclean-site-bolha--eu { background: var(--tc-track); font-size: var(--tc-fs-14-5); padding: 10px 14px; }
.tclean-site-ferramenta { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-size: var(--tc-fs-12-5); color: var(--tc-ink); background: var(--tc-lavender); border: 1px solid var(--tc-lavender-line); border-radius: var(--tc-radius-pill); padding: 4px 10px 4px 6px; }
.tclean-site-ferramenta__icone { width: 20px; height: 20px; border-radius: var(--tc-radius-sm); background: var(--tc-ink); display: flex; align-items: center; justify-content: center; }
.tclean-site-tabelinha { border: 1px solid var(--tc-border); border-radius: var(--tc-radius-lg); overflow: hidden; font-size: var(--tc-fs-13-5); }
.tclean-site-tabelinha__linha { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); padding: 8px 12px; border-top: 1px solid var(--tc-border); }
.tclean-site-tabelinha__linha:first-child { border-top: 0; background: var(--tc-bg); color: var(--tc-muted); font-weight: 600; font-size: var(--tc-fs-12-5); }
.tclean-site-tabelinha__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tclean-site-tabelinha__num--neg { color: var(--tc-danger-ink); font-weight: 600; }
.tclean-site-tabelinha--branca { background: var(--tc-surface); }
.tclean-site-tabelinha--4 .tclean-site-tabelinha__linha { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 8px; }
.tclean-site-tabelinha__mono { font-family: var(--tc-mono); font-size: var(--tc-fs-12-5); }
.tclean-site-antes { background: var(--tc-bg); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-xl); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.tclean-site-antes--depois { background: var(--tc-lavender); border-color: var(--tc-lavender-line); gap: 8px; }
.tclean-site-antes__topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tclean-site-antes__ia { display: inline-flex; align-items: center; gap: 6px; font-size: var(--tc-fs-12); font-weight: 600; color: var(--tc-accent); }
.tclean-site-antes__titulo { font-size: var(--tc-fs-15); font-weight: 500; }
.tclean-site-antes__titulo:has(.tclean-site-thumb) { display: flex; align-items: center; gap: 10px; }
.tclean-site-antes__texto { font-size: var(--tc-fs-13-5); color: var(--tc-text-soft); }
.tclean-site-antes--depois .tclean-site-antes__texto { color: var(--tc-text); }
.tclean-site-seta { display: flex; justify-content: center; color: var(--tc-accent); font-size: var(--tc-fs-20); }

/* ---------- Leitura: documentos legais e textos longos ----------
   Termos, políticas e segurança (adm/termos-e-condicoes.php etc.) e o post do blog. Celular: título,
   índice fechado (<details>) e o texto; desktop (≥ 1024px): índice fixo à esquerda (aberto pelo
   js/site.js, [data-site-indice], que marca a seção visível) e o texto em ~70 caracteres por linha. */
.tclean-site-doc { display: flex; flex-direction: column; gap: 24px; }
.tclean-site-doc__cabeca { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tclean-site-doc__titulo { font-size: var(--tc-fs-site-h2); line-height: 1.12; font-weight: 500; letter-spacing: -0.03em; color: var(--tc-text-strong); text-wrap: balance; }
.tclean-site-doc__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: var(--tc-fs-14); color: var(--tc-text-soft); }
.tclean-site-doc__lado { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tclean-site-indice { border: 1px solid var(--tc-border); border-radius: var(--tc-radius-card); background: var(--tc-surface); }
.tclean-site-indice__titulo { min-height: 48px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--tc-fs-14); font-weight: 600; color: var(--tc-text-strong); cursor: pointer; list-style: none; }
.tclean-site-indice__titulo::-webkit-details-marker { display: none; }
.tclean-site-indice__titulo .tclean-site-icone { color: var(--tc-accent); transition: transform .15s ease; }
.tclean-site-indice[open] .tclean-site-indice__titulo .tclean-site-icone { transform: rotate(180deg); }
.tclean-site-indice__lista { margin: 0; padding: 0 8px 10px; list-style: none; display: flex; flex-direction: column; }
.tclean-site-indice__lista a { display: block; padding: 9px 8px; border-radius: var(--tc-radius-ctl); font-size: var(--tc-fs-14); line-height: 1.35; color: var(--tc-text); text-decoration: none; }
.tclean-site-indice__lista a:hover { background: var(--tc-lavender); color: var(--tc-ink); }
.tclean-site-indice__lista a[aria-current] { background: var(--tc-lavender); color: var(--tc-ink); font-weight: 600; }
.tclean-site-docs { display: none; }
.tclean-site-docs__titulo { padding: 0 8px 4px; font-size: var(--tc-fs-12); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tc-text-soft); }
.tclean-site-docs a { display: block; padding: 6px 8px; border-radius: var(--tc-radius-ctl); font-size: var(--tc-fs-14); color: var(--tc-text); text-decoration: none; }
.tclean-site-docs a:hover,
.tclean-site-docs a[aria-current] { color: var(--tc-ink); background: var(--tc-lavender); }
.tclean-site-leitura { min-width: 0; max-width: 720px; font-size: var(--tc-fs-17); line-height: 1.7; color: var(--tc-text); overflow-wrap: break-word; }
.tclean-site-leitura > * + * { margin-top: 1em; }
.tclean-site-leitura > :first-child { margin-top: 0; }
.tclean-site-leitura h2 { margin-top: 2em; font-size: var(--tc-fs-22); line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; color: var(--tc-text-strong); }
.tclean-site-leitura h3 { margin-top: 1.6em; font-size: var(--tc-fs-18); line-height: 1.35; font-weight: 600; color: var(--tc-text-strong); }
.tclean-site-leitura h4 { margin: 1.4em 0 0; font-size: var(--tc-fs-17); font-weight: 600; color: var(--tc-text-strong); }
.tclean-site-leitura h2 + *,
.tclean-site-leitura h3 + *,
.tclean-site-leitura h4 + * { margin-top: .5em; }
.tclean-site-leitura ul,
.tclean-site-leitura ol { margin-bottom: 0; padding-left: 1.4em; }
.tclean-site-leitura li + li { margin-top: .4em; }
.tclean-site-leitura li::marker { color: var(--tc-accent); }
.tclean-site-leitura strong,
.tclean-site-leitura b { font-weight: 600; color: var(--tc-text-strong); }
.tclean-site-leitura a { text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.tclean-site-leitura code { padding: 1px 5px; border-radius: var(--tc-radius-xs); background: var(--tc-lavender); font-family: var(--tc-mono); font-size: var(--tc-fs-15); color: var(--tc-ink); overflow-wrap: anywhere; }
.tclean-site-leitura img,
.tclean-site-leitura iframe,
.tclean-site-leitura video { max-width: 100%; border-radius: var(--tc-radius-card); }
.tclean-site-leitura blockquote { padding-left: 16px; border-left: 3px solid var(--tc-lavender-line); color: var(--tc-text-soft); }
.tclean-site-leitura table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: var(--tc-fs-15); }
.tclean-site-leitura th,
.tclean-site-leitura td { padding: 8px 12px; border-bottom: 1px solid var(--tc-border); text-align: left; vertical-align: top; }
.tclean-site-leitura hr { border: none; border-top: 1px solid var(--tc-border); }
@media (min-width: 1024px) {
  .tclean-site-doc { display: grid; grid-template-columns: 250px minmax(0, 720px); grid-template-areas: "lado cabeca" "lado leitura"; gap: 32px 64px; align-items: start; }
  .tclean-site-doc__cabeca { grid-area: cabeca; }
  .tclean-site-doc > .tclean-site-leitura { grid-area: leitura; }
  .tclean-site-doc__fim { grid-column: 2; min-width: 0; }
  .tclean-site-doc--sem-lado { grid-template-columns: minmax(0, 720px); grid-template-areas: "cabeca" "leitura"; justify-content: center; }
  .tclean-site-doc--sem-lado .tclean-site-doc__fim { grid-column: 1; }
  .tclean-site-doc__lado { grid-area: lado; position: sticky; top: 88px; max-height: calc(100vh - 112px); overflow-y: auto; }
  .tclean-site-indice { border: none; background: transparent; }
  .tclean-site-indice__titulo { min-height: 0; padding: 0 8px 8px; cursor: default; font-size: var(--tc-fs-12); letter-spacing: .08em; text-transform: uppercase; color: var(--tc-text-soft); }
  .tclean-site-indice__titulo .tclean-site-icone { display: none; }
  .tclean-site-indice__lista { padding: 0; }
  .tclean-site-indice__lista a { padding: 6px 8px; font-size: var(--tc-fs-13-5); color: var(--tc-text-soft); }
  .tclean-site-docs { display: flex; flex-direction: column; gap: 2px; padding-top: 16px; border-top: 1px solid var(--tc-border); }
  .tclean-site-leitura h2 { font-size: var(--tc-fs-24); }
}

/* ==========================================================================
   Blog (adm/blog.php, blog_post.php, blog_categoria.php; markup em componentes/site/blog.php).
   Desenho aprovado BlogHome/BlogPost/BlogCategoria + sistema de capas (out/2026), mobile first.
   A capa gerada é HTML + CSS em unidades do contêiner (cqw): a mesma marcação vira PNG/WebP no
   worker/blog_capas.php. Comportamento: js/site.js (progresso, YouTube leve, carregar mais,
   copiar link, leituras). Tipografia do corpo: .tclean-site-leitura (seção Leitura).
   ========================================================================== */
.tclean-blog { padding-bottom: 8px; }
.tclean-blog-topo { padding: 20px 0 0; }
.tclean-blog-topo__inner { display: flex; flex-direction: column; gap: 14px; }
.tclean-blog-topo__linha { display: flex; flex-direction: column; gap: 14px; }
.tclean-blog-topo__texto { display: flex; flex-direction: column; gap: 6px; max-width: 640px; min-width: 0; }
.tclean-blog-h1 { font-size: var(--tc-fs-blog-h1); line-height: 1.05; font-weight: 500; letter-spacing: -0.035em; color: var(--tc-text-strong); text-wrap: balance; }
.tclean-blog-h1__extra { color: var(--tc-text-soft); }
.tclean-blog-sub { font-size: var(--tc-fs-16); color: var(--tc-text-soft); }
.tclean-blog-h2 { font-size: var(--tc-fs-22); font-weight: 600; letter-spacing: -0.02em; color: var(--tc-text-strong); }

/* Busca e chips */
.tclean-blog-busca { width: 100%; }
.tclean-blog-busca__caixa { height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid var(--tc-border); border-radius: var(--tc-radius-lg); background: var(--tc-surface); }
.tclean-blog-busca__caixa:focus-within { border-color: var(--tc-accent); box-shadow: var(--tc-shadow-focus); }
.tclean-blog-busca__icone { color: var(--tc-text-soft); font-size: var(--tc-fs-17); }
.tclean-blog-busca__input { flex: 1; min-width: 0; height: 100%; border: none; outline: none; background: transparent; font-family: inherit; font-size: var(--tc-fs-16); color: var(--tc-text-strong); }
.tclean-blog-busca__input:focus-visible { outline: none; }
.tclean-blog-busca__input::placeholder { color: var(--tc-text-soft); }
.tclean-blog-chips,
.tclean-blog-assuntos { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tclean-blog-chips::-webkit-scrollbar,
.tclean-blog-assuntos::-webkit-scrollbar { display: none; }
.tclean-blog-chip { height: 40px; padding: 0 14px; display: inline-flex; align-items: center; flex-shrink: 0; border-radius: var(--tc-radius-pill); border: 1px solid var(--tc-border); background: var(--tc-surface); color: var(--tc-text); font-size: var(--tc-fs-14); font-weight: 500; text-decoration: none; white-space: nowrap; }
.tclean-blog-chip:hover { color: var(--tc-ink); border-color: var(--tc-lavender-line); }
.tclean-blog-chip[aria-current] { background: var(--tc-ink); border-color: var(--tc-ink); color: var(--tc-white); font-weight: 600; }
.tclean-blog-assunto { height: 36px; padding: 0 12px; display: inline-flex; align-items: center; flex-shrink: 0; border-radius: var(--tc-radius-ctl); border: 1px solid var(--tc-border); background: var(--tc-surface); color: var(--tc-text); font-size: var(--tc-fs-13-5); font-weight: 500; text-decoration: none; }
.tclean-blog-assunto[aria-current] { border-color: var(--tc-ink); color: var(--tc-ink); font-weight: 600; }

/* Estrutura */
.tclean-blog-secao { padding: 20px 0 0; }
.tclean-blog-abre,
.tclean-blog-colunas,
.tclean-blog-principal { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.tclean-blog-lado { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tclean-blog-cabeca { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tclean-blog-cabeca__link { min-height: 44px; display: inline-flex; align-items: center; font-size: var(--tc-fs-14); font-weight: 600; text-decoration: none; white-space: nowrap; }
.tclean-blog-kicker { display: flex; align-items: center; gap: 6px; font-size: var(--tc-fs-13); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tc-text-soft); }
.tclean-blog-kicker--vivo { color: var(--tc-danger-ink); }
.tclean-blog-kicker--vivo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.tclean-blog-destaque { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tclean-blog-rotulo { font-size: var(--tc-fs-11-5); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tc-accent); }
.tclean-blog-meta { font-size: var(--tc-fs-12-5); color: var(--tc-text-soft); }
.tclean-blog-vazio { padding: 24px; border-radius: var(--tc-radius-card); border: 1px dashed var(--tc-border); background: var(--tc-surface); color: var(--tc-text-soft); }

/* Card (capa grande) e item de lista; o link cobre o card inteiro */
.tclean-blog-card { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tclean-blog-card__titulo { font-size: var(--tc-fs-17); line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; color: var(--tc-text-strong); text-wrap: balance; }
.tclean-blog-card--destaque .tclean-blog-card__titulo { font-size: var(--tc-fs-24); }
.tclean-blog-card__link,
.tclean-blog-item__link { color: inherit; text-decoration: none; }
.tclean-blog-card__link::after,
.tclean-blog-item__link::after { content: ""; position: absolute; inset: 0; }
.tclean-blog-card:hover .tclean-blog-card__link,
.tclean-blog-item:hover .tclean-blog-item__link { color: var(--tc-ink); }
.tclean-blog-card:focus-within,
.tclean-blog-item:focus-within { outline: 2px solid var(--tc-accent); outline-offset: 4px; border-radius: var(--tc-radius-sm); }
.tclean-blog-card__link:focus-visible,
.tclean-blog-item__link:focus-visible { outline: none; }
.tclean-blog-lista { display: flex; flex-direction: column; }
.tclean-blog-item { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--tc-border); }
.tclean-blog-item__mini { width: 104px; flex-shrink: 0; }
.tclean-blog-item__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tclean-blog-item__titulo { font-size: var(--tc-fs-16); line-height: 1.3; font-weight: 600; color: var(--tc-text-strong); }
.tclean-blog-grupo { margin-top: 16px; font-size: var(--tc-fs-13); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tc-text-soft); }
.tclean-blog-grupo:first-child { margin-top: 0; }
.tclean-blog-trilho { display: flex; gap: 12px; overflow-x: auto; margin: 0 -16px; padding: 4px 16px; scroll-padding-inline: 16px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.tclean-blog-trilho::-webkit-scrollbar { display: none; }
.tclean-blog-trilho > * { flex: 0 0 78%; min-width: 0; scroll-snap-align: start; }

/* Paginação: números no desktop, "Carregar mais" no celular */
.tclean-blog-paginas { display: none; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 20px; }
.tclean-blog-paginas__num,
.tclean-blog-paginas__seta { min-width: 44px; height: 44px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--tc-radius-lg); border: 1px solid var(--tc-border); background: var(--tc-surface); color: var(--tc-text); font-size: var(--tc-fs-14-5); font-weight: 600; text-decoration: none; }
.tclean-blog-paginas__num:hover,
.tclean-blog-paginas__seta:hover { border-color: var(--tc-lavender-line); color: var(--tc-ink); }
.tclean-blog-paginas__num[aria-current] { background: var(--tc-ink); border-color: var(--tc-ink); color: var(--tc-white); }
.tclean-blog-paginas__reticencias { padding: 0 4px; color: var(--tc-text-soft); }
.tclean-blog-mais { margin-top: 14px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: var(--tc-radius-lg); border: 1px solid var(--tc-border); background: var(--tc-surface); font-size: var(--tc-fs-15); font-weight: 600; text-decoration: none; }
.tclean-blog-mais[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* Blocos laterais: caixa, mudanças de taxa, calculadoras, taxas de hoje, resumo diário */
.tclean-blog-caixa { border-radius: var(--tc-radius-card); border: 1px solid var(--tc-border); background: var(--tc-surface); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.tclean-blog-caixa--lavanda { background: var(--tc-lavender); border-color: var(--tc-lavender); }
.tclean-blog-caixa__topo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tclean-blog-caixa__titulo { font-size: var(--tc-fs-17); font-weight: 600; color: var(--tc-text-strong); }
.tclean-blog-caixa__nota { font-size: var(--tc-fs-12); color: var(--tc-text-soft); white-space: nowrap; }
.tclean-blog-caixa__texto { font-size: var(--tc-fs-14); color: var(--tc-text-soft); }
.tclean-blog-caixa__btn { width: 100%; }
.tclean-blog-mudancas { margin: 0; padding: 0; list-style: none; }
.tclean-blog-mudancas__item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--tc-border); }
.tclean-blog-mudancas__item:last-child { border-bottom: 0; }
.tclean-blog-mudancas__data { width: 44px; flex-shrink: 0; font-family: var(--tc-mono); font-size: var(--tc-fs-13); font-weight: 600; color: var(--tc-ink); }
.tclean-blog-mudancas__texto { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.tclean-blog-mudancas__link { font-size: var(--tc-fs-14-5); line-height: 1.35; font-weight: 500; color: var(--tc-text-strong); text-decoration: none; }
.tclean-blog-mudancas__link:hover { color: var(--tc-ink); text-decoration: underline; }
.tclean-blog-mudancas__taxas { min-height: 24px; font-size: var(--tc-fs-12-5); font-weight: 600; text-decoration: none; }
.tclean-blog-selo { height: 26px; padding: 0 9px; display: inline-flex; align-items: center; gap: 6px; border-radius: var(--tc-radius-pill); border: 1px solid var(--tc-border); background: var(--tc-surface); color: var(--tc-text); font-size: var(--tc-fs-12); font-weight: 600; white-space: nowrap; }
.tclean-blog-selo__logo { width: auto; height: 15px; }
.tclean-blog-selo .tclean-blog-capa__logo--amazon { height: 10px; margin-top: 2px; }
.tclean-blog-calc { min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: var(--tc-radius-lg); border: 1px solid var(--tc-border); background: var(--tc-surface); color: var(--tc-text-strong); font-size: var(--tc-fs-14-5); font-weight: 600; text-decoration: none; }
.tclean-blog-calc:hover { color: var(--tc-ink); border-color: var(--tc-lavender-line); }
.tclean-blog-calc__logo { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.tclean-blog-calc__seta { margin-left: auto; color: var(--tc-ink); }
.tclean-blog-taxas { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; font-size: var(--tc-fs-14); }
.tclean-blog-taxas dt { color: var(--tc-text-soft); }
.tclean-blog-taxas dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; color: var(--tc-text-strong); }
.tclean-blog-resumo { border-radius: var(--tc-radius-card); background: var(--tc-backdrop); color: var(--tc-white); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.tclean-blog-resumo__titulo { font-size: var(--tc-fs-18); font-weight: 600; line-height: 1.25; }
.tclean-blog-resumo__texto { font-size: var(--tc-fs-14); color: var(--tc-white-a80); }
.tclean-blog-resumo__acoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tclean-blog-resumo__btn { height: 46px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--tc-radius-lg); border: 1px solid var(--tc-white-a35); color: var(--tc-white); font-size: var(--tc-fs-14-5); font-weight: 600; text-decoration: none; }
.tclean-blog-resumo__btn:hover { color: var(--tc-white); background: var(--tc-white-a10); }
.tclean-blog-resumo__btn--wa { background: var(--tc-yellow); border-color: var(--tc-yellow); color: var(--tc-text-strong); }
.tclean-blog-resumo__btn--wa:hover { background: var(--tc-yellow-hover); color: var(--tc-text-strong); }

/* Categoria: título com o logo e "Comece por aqui" */
.tclean-blog-cat { display: flex; align-items: center; gap: 12px; }
.tclean-blog-cat__icone { width: 52px; height: 52px; flex-shrink: 0; border-radius: var(--tc-radius-xl); background: var(--tc-lavender); display: flex; align-items: center; justify-content: center; }
.tclean-blog-cat__icone--ml { background: var(--tc-brand-ml-bg); }
.tclean-blog-cat__icone--shopee { background: var(--tc-brand-shopee-bg); }
.tclean-blog-cat__icone--amazon { background: var(--tc-brand-amazon-bg); }
.tclean-blog-cat__icone--tiktok { background: var(--tc-brand-tiktok-bg); }
.tclean-blog-cat__logo { width: auto; height: 28px; }
.tclean-blog-cat__texto { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tclean-blog-comece { display: flex; gap: 12px; align-items: center; border-radius: var(--tc-radius-xl); background: var(--tc-brand-ml-bg); padding: 14px; color: var(--tc-brand-ml-ink); text-decoration: none; }
.tclean-blog-comece:hover { color: var(--tc-brand-ml-ink); box-shadow: var(--tc-shadow-card-hover); }
.tclean-blog-comece__icone { width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--tc-radius-lg); background: var(--tc-surface); display: flex; align-items: center; justify-content: center; }
.tclean-blog-comece__logo { width: auto; height: 22px; }
.tclean-blog-comece__texto { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tclean-blog-comece__kicker { font-size: var(--tc-fs-11-5); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tclean-blog-comece__titulo { font-size: var(--tc-fs-16); line-height: 1.3; font-weight: 600; color: var(--tc-text-strong); }

/* ---------- Capa gerada (16:9; --og = 1200×630; --mini = miniatura de lista) ---------- */
/* Página do gerador (worker/blog_capas.php): só a capa, 1200px, sem cantos */
.tclean-blog-gerador { margin: 0; width: 1200px; overflow: hidden; }
.tclean-blog-gerador .tclean-blog-capa { border-radius: 0; }
.tclean-blog-capa { --capa-grade: var(--tc-backdrop-a06); display: block; container-type: inline-size; aspect-ratio: 16 / 9; position: relative; overflow: hidden; border-radius: var(--tc-radius-card); background-color: var(--tc-lavender); color: var(--tc-ink); background-image: linear-gradient(var(--capa-grade) 1px, transparent 1px), linear-gradient(90deg, var(--capa-grade) 1px, transparent 1px); background-size: 8cqw 8cqw; font-family: var(--tc-font); }
.tclean-blog-capa--og { aspect-ratio: 1200 / 630; border-radius: 0; }
.tclean-blog-capa--ml { background-color: var(--tc-brand-ml-bg); color: var(--tc-brand-ml-ink); }
.tclean-blog-capa--shopee { background-color: var(--tc-brand-shopee-bg); color: var(--tc-brand-shopee-ink); }
.tclean-blog-capa--amazon { background-color: var(--tc-brand-amazon-bg); color: var(--tc-brand-amazon-ink); }
.tclean-blog-capa--tiktok { background-color: var(--tc-brand-tiktok-bg); color: var(--tc-brand-tiktok-ink); }
.tclean-blog-capa--taxas { background-color: var(--tc-lavender); color: var(--tc-ink); }
.tclean-blog-capa--guia { --capa-grade: var(--tc-white-a10); background-color: var(--tc-ink); color: var(--tc-white); }
.tclean-blog-capa--noticia { --capa-grade: var(--tc-white-a10); background-color: var(--tc-backdrop); color: var(--tc-white); }
.tclean-blog-capa--com-foto { background-image: none; }
.tclean-blog-capa__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tclean-blog-capa__motivo { position: absolute; right: -6cqw; bottom: -10cqw; width: 48cqw; height: auto; opacity: .3; }
.tclean-blog-capa--guia .tclean-blog-capa__motivo,
.tclean-blog-capa--noticia .tclean-blog-capa__motivo { opacity: .22; }
.tclean-blog-capa__motivo polyline { fill: none; stroke: var(--tc-yellow); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tclean-blog-capa__selo { position: absolute; left: 5cqw; top: 5cqw; height: 7.4cqw; padding: 0 2.6cqw; display: inline-flex; align-items: center; gap: 1.6cqw; border-radius: var(--tc-radius-pill); background: var(--tc-white); color: var(--tc-text); font-size: var(--tc-fs-capa-selo); font-weight: 600; white-space: nowrap; }
.tclean-blog-capa__logo { width: auto; height: 4.2cqw; }
/* Altura do logo por marketplace (dentro da capa; fora dela, cada componente define a sua) */
.tclean-blog-capa .tclean-blog-capa__logo--ml { height: 3.8cqw; }
.tclean-blog-capa .tclean-blog-capa__logo--shopee { height: 4.6cqw; }
.tclean-blog-capa .tclean-blog-capa__logo--amazon { height: 2.3cqw; }
.tclean-blog-capa .tclean-blog-capa__logo--tiktok { height: 4.2cqw; }
.tclean-blog-capa__titulo { position: absolute; left: 5cqw; top: 19cqw; width: 52cqw; font-size: var(--tc-fs-capa-titulo); line-height: 1.06; font-weight: 600; letter-spacing: -0.03em; text-wrap: balance; }
.tclean-blog-capa--largo .tclean-blog-capa__titulo { width: 60cqw; }
/* Dado comprido (antes → depois): título na largura toda e o dado embaixo, à direita */
.tclean-blog-capa--dado-embaixo .tclean-blog-capa__titulo { top: 17cqw; width: 86cqw; }
.tclean-blog-capa--dado-embaixo .tclean-blog-capa__dados { top: auto; bottom: 5cqw; max-width: 70cqw; }
.tclean-blog-capa__dados { position: absolute; right: 5cqw; top: 22cqw; max-width: 40cqw; display: flex; flex-direction: column; align-items: flex-end; gap: 1cqw; text-align: right; }
.tclean-blog-capa__dado { padding: 1cqw 2cqw; border-radius: 1.6cqw; background: var(--tc-yellow); color: var(--tc-text-strong); font-size: var(--tc-fs-capa-dado); line-height: 1; font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tclean-blog-capa__dado--longo { font-size: var(--tc-fs-capa-dado-longo); }
.tclean-blog-capa__rotulo { font-size: var(--tc-fs-capa-rotulo); font-weight: 600; color: var(--tc-backdrop-a60); }
.tclean-blog-capa--guia .tclean-blog-capa__rotulo,
.tclean-blog-capa--noticia .tclean-blog-capa__rotulo { color: var(--tc-white-a80); }
.tclean-blog-capa__rotulo--video { position: absolute; right: 4cqw; top: 47cqw; }
.tclean-blog-capa__play { position: absolute; right: 6cqw; top: 24cqw; width: 20cqw; height: 20cqw; border-radius: 50%; background: var(--tc-yellow); display: flex; align-items: center; justify-content: center; }
.tclean-blog-capa__play svg { width: 8cqw; height: 8cqw; fill: var(--tc-text-strong); }
.tclean-blog-capa__marca { position: absolute; left: 5cqw; bottom: 4.6cqw; display: flex; }
.tclean-blog-capa__marca .tclean-site-logo { width: 13cqw; height: auto; }
.tclean-blog-capa--mini { border-radius: var(--tc-radius-ctl); }
.tclean-blog-capa__mini-logo { position: absolute; left: 7cqw; top: 7cqw; width: auto; height: 14cqw; }
.tclean-blog-capa--mini .tclean-blog-capa__mini-logo { height: 14cqw; }
.tclean-blog-capa--mini .tclean-blog-capa__logo--shopee { height: 17cqw; }
.tclean-blog-capa--mini .tclean-blog-capa__logo--amazon { height: 9cqw; }
.tclean-blog-capa__mini-simbolo { width: 16cqw; height: auto; }
.tclean-blog-capa__mini-dado { position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%); padding: 1.5cqw 3cqw; border-radius: 2.4cqw; background: var(--tc-yellow); color: var(--tc-text-strong); font-size: var(--tc-fs-capa-mini); font-weight: 700; letter-spacing: -0.04em; white-space: nowrap; }
.tclean-blog-capa__mini-dado--longo { font-size: var(--tc-fs-capa-mini-longo); }
.tclean-blog-capa__mini-dado--extra { font-size: var(--tc-fs-capa-mini-extra); }
.tclean-blog-capa__mini-play { position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%); width: 30cqw; height: 30cqw; border-radius: 50%; background: var(--tc-yellow); display: flex; align-items: center; justify-content: center; }
.tclean-blog-capa__mini-play svg { width: 12cqw; height: 12cqw; fill: var(--tc-text-strong); }

/* ---------- Post ---------- */
.tclean-blog-progresso { position: sticky; top: 56px; z-index: 29; height: 3px; background: var(--tc-border); }
.tclean-blog-progresso__barra { display: block; width: 100%; height: 100%; background: var(--tc-yellow); transform: scaleX(0); transform-origin: left center; }
/* Trilha do post: uma linha, o título do post corta com reticências */
.tclean-blog-post .tclean-site-trilha ol { flex-wrap: nowrap; }
.tclean-blog-post .tclean-site-trilha li { flex-shrink: 0; }
.tclean-blog-post .tclean-site-trilha li:last-child { flex-shrink: 1; min-width: 0; }
.tclean-blog-post .tclean-site-trilha li:last-child span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tclean-blog-post { padding-top: 14px; display: flex; flex-direction: column; gap: 16px; }
.tclean-blog-post__cabeca { display: flex; flex-direction: column; gap: 14px; max-width: 820px; }
.tclean-blog-post__selos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tclean-blog-post__tipo { font-size: var(--tc-fs-12-5); font-weight: 600; color: var(--tc-accent); }
.tclean-blog-post__titulo { font-size: var(--tc-fs-blog-h1); line-height: 1.05; font-weight: 500; letter-spacing: -0.035em; color: var(--tc-text-strong); text-wrap: balance; }
.tclean-blog-post__sub { font-size: var(--tc-fs-17); font-weight: 300; line-height: 1.45; color: var(--tc-text-soft); }
.tclean-blog-post__linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.tclean-blog-post__grade { display: flex; flex-direction: column; gap: 24px; }
.tclean-blog-post__artigo { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.tclean-blog-post__lado { display: none; }
.tclean-blog-autor { display: flex; align-items: center; gap: 10px; }
.tclean-blog-autor__foto { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: var(--tc-ink); color: var(--tc-white); display: flex; align-items: center; justify-content: center; font-size: var(--tc-fs-14); font-weight: 600; }
.tclean-blog-autor__simbolo { width: 20px; height: 16px; }
.tclean-blog-autor__texto { display: flex; flex-direction: column; line-height: 1.3; }
.tclean-blog-autor__nome { font-size: var(--tc-fs-14); font-weight: 600; color: var(--tc-text-strong); }
.tclean-blog-compartilhar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tclean-blog-compartilhar--topo { display: none; }
.tclean-blog-compartilhar__rotulo { margin-right: 2px; font-size: var(--tc-fs-13); color: var(--tc-text-soft); }
.tclean-blog-compartilhar__btn { height: 40px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border-radius: var(--tc-radius-ctl); border: 1px solid var(--tc-border); background: var(--tc-surface); color: var(--tc-text); font-family: inherit; font-size: var(--tc-fs-13-5); font-weight: 600; text-decoration: none; cursor: pointer; }
.tclean-blog-compartilhar__btn:hover { color: var(--tc-ink); border-color: var(--tc-lavender-line); }
.tclean-blog-compartilhar__btn .tclean-site-icone { color: var(--tc-ink); }
.tclean-blog-compartilhar__btn.is-copiado { color: var(--tc-success-ink); border-color: var(--tc-success-border); }
.tclean-blog-muda { border-radius: var(--tc-radius-xl); border: 1px solid var(--tc-warning-line); background: var(--tc-warning-bg); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.tclean-blog-muda__titulo { display: flex; align-items: center; gap: 8px; font-size: var(--tc-fs-16); font-weight: 700; color: var(--tc-warning-ink); }
.tclean-blog-muda__lista { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: var(--tc-fs-15); line-height: 1.45; color: var(--tc-text); }
.tclean-blog-muda__fazer { font-size: var(--tc-fs-15); line-height: 1.45; color: var(--tc-text); }
.tclean-blog-muda__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tclean-blog-muda__tag { padding: 3px 10px; display: inline-block; border-radius: var(--tc-radius-sm); background: var(--tc-surface); color: var(--tc-warning-ink); font-size: var(--tc-fs-12-5); font-weight: 600; }
.tclean-blog-sumario--desk { display: none; }
.tclean-blog-corpo { max-width: 68ch; }
.tclean-blog-corpo h2 { margin-top: 1.6em; }
.tclean-blog-tabela { overflow-x: auto; border: 1px solid var(--tc-border); border-radius: var(--tc-radius-lg); background: var(--tc-surface); }
.tclean-blog-tabela table { display: table; width: 100%; min-width: 420px; border-collapse: collapse; font-size: var(--tc-fs-13-5); font-variant-numeric: tabular-nums; }
.tclean-blog-tabela caption { caption-side: bottom; padding: 8px 12px; text-align: left; font-size: var(--tc-fs-12); color: var(--tc-text-soft); }
.tclean-blog-tabela th { background: var(--tc-track); color: var(--tc-text-soft); font-size: var(--tc-fs-12); font-weight: 600; }
.tclean-blog-tabela th,
.tclean-blog-tabela td { padding: 10px 12px; border-bottom: 0; border-top: 1px solid var(--tc-border); }
.tclean-blog-tabela tr:first-child th { border-top: 0; }
.tclean-blog-figura { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.tclean-blog-figura img,
.tclean-blog-figura video { width: 100%; height: auto; border-radius: var(--tc-radius-xl); background: var(--tc-track); }
.tclean-blog-figura__legenda { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: var(--tc-fs-13); line-height: 1.45; color: var(--tc-text-soft); }
.tclean-blog-figura__credito { color: var(--tc-text-soft); font-weight: 500; }
.tclean-blog-galeria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tclean-blog-galeria img { aspect-ratio: 4 / 3; object-fit: cover; }
.tclean-blog-video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--tc-radius-xl); background: var(--tc-backdrop); }
.tclean-blog-video__poster,
.tclean-blog-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.tclean-blog-video__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; cursor: pointer; }
.tclean-blog-video__icone { width: 68px; height: 68px; border-radius: 50%; background: var(--tc-yellow); display: flex; align-items: center; justify-content: center; box-shadow: var(--tc-shadow-raised); }
.tclean-blog-video__icone svg { width: 26px; height: 26px; fill: var(--tc-text-strong); }
.tclean-blog-video__play:hover .tclean-blog-video__icone { background: var(--tc-yellow-hover); }
.tclean-blog-ctacalc { border-radius: var(--tc-radius-xl); border: 1px solid var(--tc-lavender-line); background: var(--tc-lavender); padding: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.tclean-blog-ctacalc__topo { display: flex; align-items: center; gap: 10px; }
.tclean-blog-ctacalc__logo { width: auto; height: 22px; }
.tclean-blog-ctacalc__icone { color: var(--tc-ink); font-size: var(--tc-fs-20); }
.tclean-blog-ctacalc__titulo { font-size: var(--tc-fs-16); font-weight: 600; color: var(--tc-text-strong); }
.tclean-blog-ctacalc__texto { font-size: var(--tc-fs-14-5); color: var(--tc-text-soft); }
.tclean-blog-faq { display: flex; flex-direction: column; gap: 12px; }
.tclean-blog-faq .tclean-site-faq__lista { flex: none; }
.tclean-blog-faq__titulo { font-size: var(--tc-fs-22); font-weight: 600; letter-spacing: -0.02em; color: var(--tc-text-strong); }
.tclean-blog-fontes { border-top: 1px solid var(--tc-border); padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.tclean-blog-fontes__titulo { font-size: var(--tc-fs-15); font-weight: 600; color: var(--tc-text-strong); }
.tclean-blog-fontes__lista { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: var(--tc-fs-14); color: var(--tc-text-soft); overflow-wrap: anywhere; }
.tclean-blog-ia { display: flex; gap: 8px; align-items: flex-start; font-size: var(--tc-fs-13); color: var(--tc-text-soft); }
.tclean-blog-ia__icone { margin-top: 3px; color: var(--tc-accent); }
.tclean-blog-ctafim { border-radius: var(--tc-radius-sheet); background: var(--tc-ink); padding: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.tclean-blog-ctafim__titulo { font-size: var(--tc-fs-22); line-height: 1.15; font-weight: 500; letter-spacing: -0.02em; color: var(--tc-white); }
.tclean-blog-ctafim__texto { font-size: var(--tc-fs-14-5); color: var(--tc-white-a80); }
.tclean-blog-relacionados { padding-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.tclean-blog-post__resumo { padding-top: 8px; }

@media (min-width: 768px) {
  .tclean-blog-progresso { top: 64px; }
  .tclean-blog-chips,
  .tclean-blog-assuntos { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
  .tclean-blog-trilho { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; overflow: visible; margin: 0; padding: 0; }
  .tclean-blog-trilho > * { min-width: 0; }
  .tclean-blog-compartilhar--topo { display: flex; }
  .tclean-blog-compartilhar--fim { display: none; }
  .tclean-blog-item__mini { width: 148px; }
  .tclean-blog-paginas { display: flex; }
  .tclean-blog-mais { display: none; }
  .tclean-blog-galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .tclean-blog-topo { padding-top: 40px; }
  .tclean-blog-topo__linha { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 20px; }
  .tclean-blog-busca { flex: 0 1 420px; }
  .tclean-blog-sub { font-size: var(--tc-fs-17); }
  .tclean-blog-h2 { font-size: var(--tc-fs-24); }
  .tclean-blog-secao { padding-top: 28px; }
  .tclean-blog-abre { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 32px; align-items: start; }
  .tclean-blog-lista--ultimas .tclean-blog-item__mini { display: none; }
  .tclean-blog-colunas { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 40px; align-items: start; padding-top: 20px; }
  .tclean-blog-lado { position: sticky; top: 88px; }
  .tclean-blog-cat { gap: 16px; }
  .tclean-blog-cat__icone { width: 64px; height: 64px; }
  .tclean-blog-cat__logo { height: 34px; }
  .tclean-blog-post { padding-top: 24px; gap: 18px; }
  .tclean-blog-post__sub { font-size: var(--tc-fs-20); }
  .tclean-blog-post__grade { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; }
  .tclean-blog-post__artigo { max-width: 760px; }
  .tclean-blog-post__lado { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 16px; }
  .tclean-blog-sumario--mob { display: none; }
  .tclean-blog-sumario--desk { display: block; border: 1px solid var(--tc-border); background: var(--tc-surface); padding: 12px 8px; }
  .tclean-blog-corpo { font-size: var(--tc-fs-18); }
  .tclean-blog-corpo h2 { font-size: var(--tc-fs-26); }
  .tclean-blog-ctafim { padding: 28px; }
  .tclean-blog-ctafim__titulo { font-size: var(--tc-fs-26); }
  .tclean-blog-relacionados { padding-top: 32px; }
  .tclean-blog-post__resumo { max-width: 760px; }
}
@media (prefers-reduced-motion: reduce) {
  .tclean-blog-progresso { display: none; }
}

/* ---------- Celular (< 768px) ---------- */
@media (max-width: 767.98px) {
  .tclean-site { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .tclean-site-wrap { padding: 0 16px; }
  .tclean-site-so-mob { display: flex !important; }
  .tclean-site-so-desk { display: none !important; }
  .tclean-site-header__inner { height: 56px; gap: 6px; }
  .tclean-site-header__nav,
  .tclean-site-header__cta { display: none; }
  .tclean-site-header__menu { display: inline-flex; }
  .tclean-site-logo { width: 99px; height: 24px; }
  .tclean-site-section--hero { padding: 22px 0 32px; }
  .tclean-site-split__texto--hero { gap: 14px; }
  .tclean-site-h1--home { line-height: 1.05; }
  .tclean-site-marca { text-decoration-thickness: 5px; text-underline-offset: 6px; }
  .tclean-site-mk { height: 24px; padding: 0 8px; font-size: var(--tc-fs-12); }
  .tclean-site-video { padding: 10px; border-radius: var(--tc-radius-xl); }
  .tclean-site-video__tela { border-radius: var(--tc-radius-ctl); }
  .tclean-site-video__play { width: 60px; height: 60px; font-size: var(--tc-fs-22); }
  .tclean-site-video__legenda { left: 16px; right: auto; bottom: 14px; }
  .tclean-site-video__chip { font-size: var(--tc-fs-11-5); padding: 4px 10px 4px 7px; }
  .tclean-site-video__nota { display: none; }
  .tclean-site-seg:not(.tclean-site-seg--igual):not(.tclean-site-seg--inline) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tclean-site-grade__quebra { padding-left: 20px; }
  .tclean-site-cta__acoes { width: 100%; }
  .tclean-site-cta__acoes .tclean-site-btn { width: 100%; }
  .tclean-site-compara__linha { grid-template-columns: minmax(0, 1fr) 72px 92px; }
  .tclean-site-compara__recurso { padding: 12px 14px; font-size: var(--tc-fs-14); }
  .tclean-site-phone { height: 560px; }
  .tclean-site-plano:not(.tclean-site-plano--mini) .tclean-site-plano__perfil { min-height: 0; }
  .tclean-site-plano__precos { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tclean-site *,
  .tclean-site *::before,
  .tclean-site *::after { transition: none !important; }
}


/* ==========================================================================
   Páginas de SEO (calculadora.php = /calculadora e /calculadora/{marketplace}, taxas-mercado-livre.php,
   taxas-shopee.php, frete-mercado-livre.php) — mobile first. Helpers em componentes/site/seo.php.
   ========================================================================== */
/* Trilha (breadcrumb) acima do H1 */
.tclean-site-trilha { font-size: var(--tc-fs-13); color: var(--tc-text-soft); }
.tclean-site-trilha ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; }
.tclean-site-trilha li { display: inline-flex; align-items: center; gap: 6px; }
.tclean-site-trilha li + li::before { content: "/"; color: var(--tc-faint); }
.tclean-site-trilha a { display: inline-flex; align-items: center; min-height: 24px; color: var(--tc-ink); font-weight: 500; text-decoration: none; }
.tclean-site-trilha a:hover { text-decoration: underline; }

/* Tabela de dados (taxas, frete): <table> de verdade; rola na horizontal no celular com a 1ª coluna fixa */
.tclean-site-tabela { background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-card); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tclean-site-tabela:focus-visible { outline: 2px solid var(--tc-ink); outline-offset: 2px; }
.tclean-site-tabela__t { width: 100%; border-collapse: collapse; font-size: var(--tc-fs-14); font-variant-numeric: tabular-nums; color: var(--tc-text); }
.tclean-site-tabela__t th,
.tclean-site-tabela__t td { padding: 10px 14px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--tc-border); }
.tclean-site-tabela__t thead th { background: var(--tc-bg); font-size: var(--tc-fs-12-5); font-weight: 600; color: var(--tc-text-soft); vertical-align: bottom; }
.tclean-site-tabela__t tbody th { font-weight: 500; color: var(--tc-text-strong); }
.tclean-site-tabela__t th:first-child,
.tclean-site-tabela__t td:first-child { position: sticky; left: 0; z-index: 1; text-align: left; background: var(--tc-surface); }
.tclean-site-tabela__t thead th:first-child { background: var(--tc-bg); }
.tclean-site-tabela__t tbody tr:last-child > * { border-bottom: 0; }
.tclean-site-tabela__t small { font-size: var(--tc-fs-12); color: var(--tc-text-soft); }
.tclean-site-tabela__t .is-destaque { background: var(--tc-lavender); color: var(--tc-ink); font-weight: 600; }
/* Nota da tabela (fonte, vigência): fica parada à esquerda enquanto a tabela rola */
.tclean-site-tabela__nota { position: sticky; left: 0; margin: 0; padding: 10px 14px; font-size: var(--tc-fs-12-5); color: var(--tc-text-soft); border-top: 1px solid var(--tc-border); }
/* --texto: colunas de texto quebram linha; --matriz: muitas colunas de número (tabela de frete) */
.tclean-site-tabela--texto .tclean-site-tabela__t th,
.tclean-site-tabela--texto .tclean-site-tabela__t td { white-space: normal; text-align: left; }
.tclean-site-tabela--texto .tclean-site-tabela__t td { min-width: 120px; }
.tclean-site-tabela--matriz .tclean-site-tabela__t { font-size: var(--tc-fs-13); }
.tclean-site-tabela--matriz .tclean-site-tabela__t th,
.tclean-site-tabela--matriz .tclean-site-tabela__t td { padding: 8px 10px; }
.tclean-site-tabela--matriz .tclean-site-tabela__t tbody tr:nth-child(even) > * { background: var(--tc-bg); }
.tclean-site-tabela--matriz .tclean-site-tabela__t thead th { white-space: normal; min-width: 76px; line-height: 1.25; }

/* Bloco de dado: título + texto + tabela com espaço curto entre eles (dentro de .tclean-site-pilha) */
.tclean-site-dado { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tclean-site-dado .tclean-site-acoes { margin-top: 4px; }

/* Fatos em destaque (resumo das taxas logo abaixo do topo) */
.tclean-site-fatos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tclean-site-fatos__item { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-card); min-width: 0; }
.tclean-site-fatos__rotulo { font-size: var(--tc-fs-12-5); font-weight: 600; color: var(--tc-text-soft); }
.tclean-site-fatos__valor { font-size: var(--tc-fs-20); font-weight: 600; letter-spacing: -0.02em; color: var(--tc-ink); font-variant-numeric: tabular-nums; }
.tclean-site-fatos__nota { font-size: var(--tc-fs-13); color: var(--tc-text-soft); }

/* Conta passo a passo (preço − taxas = sobra) */
.tclean-site-conta { list-style: none; margin: 0; padding: 0; background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-card); }
.tclean-site-conta__linha { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--tc-border); font-size: var(--tc-fs-15); }
.tclean-site-conta__linha:last-child { border-bottom: 0; }
.tclean-site-conta__nome { display: flex; flex-direction: column; gap: 2px; color: var(--tc-text-strong); }
.tclean-site-conta__nome small { font-size: var(--tc-fs-12-5); color: var(--tc-text-soft); }
.tclean-site-conta__valor { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--tc-text-strong); }
.tclean-site-conta__valor small { font-weight: 500; color: var(--tc-text-soft); }
.tclean-site-conta__valor--neg { color: var(--tc-danger-ink); }
.tclean-site-conta__linha--total { background: var(--tc-lavender); border-radius: 0 0 var(--tc-radius-card) var(--tc-radius-card); }
.tclean-site-conta__linha--total .tclean-site-conta__valor { color: var(--tc-ink); font-size: var(--tc-fs-17); }

/* Barras de distribuição (estudo do peso dos pacotes) */
.tclean-site-barras { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-card); }
.tclean-site-barras__linha { display: grid; grid-template-columns: 92px minmax(0, 1fr) 48px; align-items: center; gap: 10px; font-size: var(--tc-fs-13-5); }
.tclean-site-barras__rotulo { color: var(--tc-text); white-space: nowrap; }
.tclean-site-barras__trilho { height: 14px; background: var(--tc-track); border-radius: var(--tc-radius-xs); overflow: hidden; }
.tclean-site-barras__barra { display: block; height: 100%; background: var(--tc-ink); border-radius: var(--tc-radius-xs); }
.tclean-site-barras__linha.is-destaque .tclean-site-barras__barra { background: var(--tc-yellow); }
.tclean-site-barras__linha.is-destaque .tclean-site-barras__rotulo { font-weight: 600; color: var(--tc-text-strong); }
.tclean-site-barras__pct { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tc-text-strong); }

/* Conteúdo recolhido (outras reputações): <details> com a tabela dentro */
.tclean-site-detalhe { background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-card); }
.tclean-site-detalhe__titulo { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; font-size: var(--tc-fs-16); font-weight: 600; color: var(--tc-text-strong); cursor: pointer; list-style: none; }
.tclean-site-detalhe__titulo::-webkit-details-marker { display: none; }
.tclean-site-detalhe__chev { margin-left: auto; color: var(--tc-ink); transition: transform .2s ease; }
.tclean-site-detalhe[open] .tclean-site-detalhe__chev { transform: rotate(180deg); }
.tclean-site-detalhe .tclean-site-tabela { border: 0; border-top: 1px solid var(--tc-border); border-radius: 0 0 var(--tc-radius-card) var(--tc-radius-card); }

/* Cartão inteiro clicável (hub de calculadoras, guias relacionados) e pílula de outra calculadora */
.tclean-site-card--link { text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease; }
.tclean-site-card--link:hover { border-color: var(--tc-ink); transform: translateY(-2px); }
.tclean-site-card--link:focus-visible { outline: 2px solid var(--tc-ink); outline-offset: 2px; }
.tclean-site-card--link .tclean-site-link { margin-top: auto; }
.tclean-site-mkcard--link { text-decoration: none; height: 48px; font-size: var(--tc-fs-15); }
.tclean-site-mkcard--link:hover { border-color: var(--tc-ink); color: var(--tc-ink); }
.tclean-site-mkcard--link .tclean-site-icone { color: var(--tc-ink); }
.tclean-site-outras-bloco { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 20px; }
.tclean-site-outras-bloco__titulo { font-size: var(--tc-fs-13); font-weight: 600; color: var(--tc-text-soft); }
.tclean-site-outras { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.tclean-site-outras__logo { width: 24px; height: 24px; object-fit: contain; }

@media (min-width: 768px) {
  .tclean-site-fatos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .tclean-site-fatos__item { padding: 18px 20px; }
  .tclean-site-fatos__valor { font-size: var(--tc-fs-24); }
  .tclean-site-barras { padding: 20px 24px; }
  .tclean-site-barras__linha { grid-template-columns: 120px minmax(0, 1fr) 56px; font-size: var(--tc-fs-14); }
}


/* ==========================================================================
   Login e cadastro (adm/login.php, adm/register.php, forget-password.php, password-reset.php) — v2.3, mobile first.
   <body class="tclean-site tclean-login-page">: usa a base do site público (reset, fonte)
   + componentes tclean-login*. No celular, o formulário inteiro fica na 1ª dobra e a vitrine
   (login) ou o "Depois: conecte a sua loja" (cadastro) vêm abaixo; no desktop, lado a lado.
   Comportamento: js/site.js (olho da senha, vitrine) e js/register.js (cadastro).
   ========================================================================== */
.tclean-login-page { padding-bottom: 0; }
.tclean-login { min-height: 100vh; display: flex; flex-direction: column; }
.tclean-login__main { padding: 24px 16px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.tclean-login__logo { min-height: 44px; display: flex; align-items: center; }
.tclean-login__card { width: 100%; max-width: 420px; background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-sheet); padding: 24px 20px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--tc-shadow-panel); }
.tclean-login__cabeca { display: flex; flex-direction: column; gap: 4px; }
.tclean-login__titulo { font-size: var(--tc-fs-28); line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; color: var(--tc-text-strong); }
.tclean-login__sub { font-size: var(--tc-fs-15); color: var(--tc-text-soft); }
.tclean-login .tclean-alert { margin: 0; display: block; border-radius: var(--tc-radius-lg); font-size: var(--tc-fs-14); }
.tclean-login .tclean-alert a { color: inherit; font-weight: 600; }
.tclean-login__form { display: flex; flex-direction: column; gap: 14px; }
.tclean-login__campo { display: flex; flex-direction: column; gap: 6px; }
.tclean-login__label { font-size: var(--tc-fs-14); font-weight: 500; color: var(--tc-text); }
.tclean-login__caixa { height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1.5px solid var(--tc-border); border-radius: var(--tc-radius-lg); background: var(--tc-surface); transition: border-color .15s ease, box-shadow .15s ease; }
.tclean-login__caixa--olho { padding-right: 4px; }
.tclean-login__caixa:focus-within { border-color: var(--tc-accent); box-shadow: var(--tc-shadow-focus); }
.tclean-login__caixa:has(.is-invalid) { border-color: var(--tc-danger); }
.tclean-login__icone { color: var(--tc-accent); font-size: var(--tc-fs-17); }
.tclean-login__input { flex: 1; min-width: 0; height: 100%; border: none; outline: none; background: transparent; font-family: inherit; font-size: var(--tc-fs-16); color: var(--tc-text-strong); padding: 0; }
.tclean-login__input:focus-visible { outline: none; }
.tclean-login__input::placeholder { color: var(--tc-muted); }
.tclean-login__input--cupom { text-transform: uppercase; }
.tclean-login__input--cupom::placeholder { text-transform: none; }
.tclean-login__olho { width: 44px; height: 44px; flex-shrink: 0; border: none; border-radius: var(--tc-radius-ctl); background: transparent; color: var(--tc-accent); display: flex; align-items: center; justify-content: center; font-size: var(--tc-fs-17); cursor: pointer; }
.tclean-login__olho:hover { background: var(--tc-lavender); }
.tclean-login__olho.is-visivel { color: var(--tc-ink); background: var(--tc-lavender); }
.tclean-login__dica { font-size: var(--tc-fs-12-5); color: var(--tc-text-soft); }
.tclean-login__erro { font-size: var(--tc-fs-12-5); font-style: normal; color: var(--tc-danger-ink); }
.tclean-login__linha-direita { display: flex; justify-content: flex-end; margin-top: -6px; }
.tclean-login__link { min-height: 44px; display: inline-flex; align-items: center; font-size: var(--tc-fs-14); font-weight: 600; text-decoration: none; }
.tclean-login__link-btn { min-height: 44px; padding: 0; border: none; background: transparent; color: var(--tc-ink); font-family: inherit; font-size: var(--tc-fs-14); font-weight: 600; cursor: pointer; }
.tclean-login__cupom-link { margin-top: -6px; }
.tclean-login__btn { width: 100%; height: 54px; border-radius: var(--tc-radius-lg); font-size: var(--tc-fs-17); font-weight: 600; white-space: normal; text-align: center; }
.tclean-login__btn[disabled] { opacity: .6; cursor: default; }
.tclean-login__termos { font-size: var(--tc-fs-12-5); line-height: 1.45; color: var(--tc-text-soft); text-align: center; }
.tclean-login__troca { font-size: var(--tc-fs-15); color: var(--tc-text-soft); text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 6px; }
.tclean-login__troca .tclean-login__link { font-size: var(--tc-fs-15); }
.tclean-login__ajuda { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; font-size: var(--tc-fs-14); color: var(--tc-text-soft); text-decoration: none; }
.tclean-login__ajuda .tclean-site-icone { color: var(--tc-success-ink); font-size: var(--tc-fs-18); }
.tclean-login__ajuda strong { color: var(--tc-ink); font-weight: 600; }
.tclean-login__ajuda:hover { color: var(--tc-text); }
.tclean-login__rodape { font-size: var(--tc-fs-12); line-height: 1.5; color: var(--tc-text-soft); text-align: center; }
/* Selo de ícone no topo do cartão (ex.: link de senha expirado em adm/password-reset.php) */
.tclean-login__selo { width: 48px; height: 48px; margin-bottom: 8px; border-radius: var(--tc-radius-pill); background: var(--tc-lavender); color: var(--tc-ink); display: flex; align-items: center; justify-content: center; font-size: var(--tc-fs-22); }
.tclean-login__selo--aviso { background: var(--tc-warning-bg); color: var(--tc-warning-ink); }

/* 3 passos do cadastro (criar conta → conectar a loja → ver o lucro) */
.tclean-login-passos { width: 100%; max-width: 420px; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; font-size: var(--tc-fs-12); line-height: 1.25; }
.tclean-login-passos__item { display: flex; flex-direction: column; gap: 6px; color: var(--tc-text-soft); }
.tclean-login-passos__item::before { content: ""; height: 4px; border-radius: var(--tc-radius-2xs); background: var(--tc-lavender-line); }
.tclean-login-passos__item.is-atual,
.tclean-login-passos__item.is-feito { color: var(--tc-ink); font-weight: 600; }
.tclean-login-passos__item.is-atual::before,
.tclean-login-passos__item.is-feito::before { background: var(--tc-ink); }

/* Cadastro no celular: "Depois: conecte a sua loja" com os logos oficiais */
.tclean-login-depois { width: 100%; max-width: 420px; border-radius: var(--tc-radius-card); background: var(--tc-lavender); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.tclean-login-depois__titulo { font-size: var(--tc-fs-16); font-weight: 600; color: var(--tc-text-strong); }
.tclean-login-depois__texto { font-size: var(--tc-fs-14); color: var(--tc-text-soft); }
.tclean-login-depois__logos { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.tclean-login-depois__logos li { height: 48px; border-radius: var(--tc-radius-ctl); background: var(--tc-surface); display: flex; align-items: center; justify-content: center; gap: 4px; padding: 4px; overflow: hidden; }
.tclean-login-depois__logos span { font-size: var(--tc-fs-10); font-weight: 600; line-height: 1.1; color: var(--tc-brand-tiktok-ink); }
.tclean-login-depois__logo { width: auto; max-width: 100%; }
.tclean-login-depois__logo--ml { height: 24px; }
.tclean-login-depois__logo--shopee { height: 34px; }
.tclean-login-depois__logo--amazon { height: 15px; margin-top: 3px; }
.tclean-login-depois__logo--tiktok { height: 20px; width: 20px; flex-shrink: 0; }
.tclean-login-depois__seguro { display: flex; gap: 8px; align-items: center; font-size: var(--tc-fs-12-5); color: var(--tc-text-soft); }
.tclean-login-depois__seguro .tclean-site-icone { color: var(--tc-success-ink); font-size: var(--tc-fs-15); }

/* Cadastro no desktop: painel lavanda com os 3 passos */
.tclean-login-painel { display: none; }

/* Vitrine do app (login): celular desenhado com dados de demonstração */
.tclean-login-vitrine { background: linear-gradient(180deg, var(--tc-backdrop), var(--tc-ink)); color: var(--tc-white); padding: 32px 16px 28px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.tclean-login-vitrine__cabeca { display: flex; flex-direction: column; gap: 6px; max-width: 420px; }
.tclean-login-vitrine__titulo { font-size: var(--tc-fs-24); line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; color: var(--tc-white); }
.tclean-login-vitrine__legenda { font-size: var(--tc-fs-15); color: var(--tc-white-a80); min-height: 3em; }
.tclean-login-vitrine__celular { width: 210px; height: 400px; border-radius: var(--tc-radius-phone); background: var(--tc-backdrop); padding: 9px; border: 1px solid var(--tc-white-a15); box-shadow: var(--tc-shadow-drawer); }
.tclean-login-vitrine__tela { height: 100%; border-radius: var(--tc-radius-2xl); background: var(--tc-bg); padding: 30px 12px 12px; display: flex; flex-direction: column; gap: 8px; color: var(--tc-text-strong); text-align: left; }
.tclean-login-vitrine__tela[hidden] { display: none; }
.tclean-login-vitrine__tela-titulo { font-size: var(--tc-fs-13); font-weight: 600; }
.tclean-login-vitrine__kpi { background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-lg); padding: 10px; display: flex; flex-direction: column; }
.tclean-login-vitrine__kpi span { font-size: var(--tc-fs-10); color: var(--tc-text-soft); }
.tclean-login-vitrine__kpi strong { font-size: var(--tc-fs-20); font-weight: 600; color: var(--tc-ink); font-variant-numeric: tabular-nums; }
.tclean-login-vitrine__kpi small { font-size: var(--tc-fs-10); color: var(--tc-success-ink); }
.tclean-login-vitrine__grafico { width: 100%; height: 54px; }
.tclean-login-vitrine__grafico polyline { fill: none; stroke: var(--tc-ink); stroke-width: 3; }
.tclean-login-vitrine__linha { display: flex; justify-content: space-between; gap: 6px; padding: 5px 0; border-bottom: 1px solid var(--tc-border); font-size: var(--tc-fs-11); }
.tclean-login-vitrine__linha span { color: var(--tc-text-soft); }
.tclean-login-vitrine__linha strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.tclean-login-vitrine__demo { margin-top: auto; font-size: var(--tc-fs-10); color: var(--tc-text-soft); text-align: center; }
.tclean-login-vitrine__controles { display: flex; align-items: center; gap: 16px; }
.tclean-login-vitrine__seta { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--tc-white-a35); background: transparent; color: var(--tc-white); display: flex; align-items: center; justify-content: center; font-size: var(--tc-fs-15); cursor: pointer; }
.tclean-login-vitrine__seta:hover { background: var(--tc-white-a10); }
.tclean-login-vitrine__pontos { display: flex; gap: 6px; }
.tclean-login-vitrine__ponto { width: 6px; height: 6px; border-radius: var(--tc-radius-2xs); background: var(--tc-white-a35); transition: width .2s ease; }
.tclean-login-vitrine__ponto.is-ativo { width: 22px; background: var(--tc-yellow); }

@media (min-width: 900px) {
  .tclean-login { flex-direction: row; }
  .tclean-login__main { flex: 1 1 480px; min-width: 0; padding: 40px 24px; justify-content: center; gap: 24px; }
  .tclean-login-depois { display: none; }
  .tclean-login-vitrine { flex: 1 1 520px; min-width: 0; min-height: 100vh; padding: 48px 24px; justify-content: center; background: linear-gradient(160deg, var(--tc-backdrop), var(--tc-ink)); }
  .tclean-login-vitrine__titulo { font-size: var(--tc-fs-34); }
  .tclean-login-vitrine__celular { width: 250px; height: 480px; }
  .tclean-login-painel { flex: 1 1 520px; min-width: 0; min-height: 100vh; background: var(--tc-lavender); padding: 48px clamp(24px, 5vw, 72px); display: flex; flex-direction: column; justify-content: center; gap: 28px; }
  .tclean-login-painel__titulo { max-width: 520px; font-size: var(--tc-fs-34); line-height: 1.1; font-weight: 500; letter-spacing: -0.03em; color: var(--tc-text-strong); }
  .tclean-login-painel__passos { max-width: 520px; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 22px; }
  .tclean-login-painel__passos > li { display: flex; gap: 14px; }
  .tclean-login-painel__passos > li > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .tclean-login-painel__passo { font-size: var(--tc-fs-17); font-weight: 600; color: var(--tc-text-strong); }
  .tclean-login-painel__texto { font-size: var(--tc-fs-15); color: var(--tc-text-soft); }
  .tclean-login-painel__logos { margin-top: 10px; }
  .tclean-login-painel__pedido { margin-top: 10px; }
}