/* Trínomo Agence — visual premium inspirado no site da Trínomo e no acabamento da Apple.
   Branco limpo, preto como cor de ação, dourado #D2A833 só em destaque; títulos em Inter Tight; linhas finas no lugar de caixas.
   CSP: nada de estilo inline. Cores escolhidas pelo usuário chegam por data-cor (ver app.js). */

@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-wght.8e433c0592f7.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("../fonts/inter-tight-latin-wght.989fe0a65c6d.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

/* =====================================================================
   Tokens
   ===================================================================== */
:root {
  --tn-gold: #d2a833;
  --tn-gold-dark: #a9831f;
  --tn-gold-light: #e3c36a;
  --tn-black: #0b0b0c;

  --bg: #ffffff;
  --bg-soft: #fafafa;
  --surface: #ffffff;
  --surface-2: #f5f5f7;
  --surface-3: #ebebef;
  --ink: #0b0b0c;
  --ink-2: #3a3a3c;
  --muted: #6e6e73;
  --faint: #a1a1a6;
  --border: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.14);
  --accent: var(--tn-gold);
  --accent-text: #8c6b14;
  --ring: rgba(210, 168, 51, 0.28);
  --btn-bg: #0b0b0c;
  --btn-bg-hover: #2c2c2e;
  --btn-fg: #ffffff;
  --ok: #1a7f4b;
  --ok-bg: #eaf6ef;
  --warn: #8a5a00;
  --warn-bg: #fdf5e2;
  --err: #c0322b;
  --err-bg: #fdeeec;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px -4px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.05), 0 12px 32px -12px rgba(0, 0, 0, 0.14);
  --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.04);

  /* menu lateral (a marca da organização pode sobrescrever: /marca/<slug>.css) */
  --menu-bg: #f5f5f7;
  --menu-texto: #3a3a3c;
  --menu-texto-forte: #0b0b0c;
  --menu-grupo: #8e8e93;
  --menu-borda: rgba(0, 0, 0, 0.07);
  --menu-hover: rgba(0, 0, 0, 0.045);
  --menu-ativo: #ffffff;
  --menu-ativo-sombra: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
  --menu-logo-escura: block;
  --menu-logo-branca: none;

  --font: "Inter", system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --r-sm: 0.5rem;
  --r-md: 0.75rem;
  --r-lg: 1.125rem;
  --r-xl: 1.5rem;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --sidebar-w: 16rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0b0c; --bg-soft: #111113; --surface: #151517; --surface-2: #1d1d20; --surface-3: #2a2a2e;
    --ink: #f5f5f7; --ink-2: #c7c7cc; --muted: #8e8e93; --faint: #636366;
    --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.15);
    --accent-text: var(--tn-gold-light); --ring: rgba(210, 168, 51, 0.35);
    --btn-bg: #f5f5f7; --btn-bg-hover: #ffffff; --btn-fg: #0b0b0c;
    --ok: #5cc28e; --ok-bg: rgba(92, 194, 142, 0.13); --warn: #e3c36a; --warn-bg: rgba(210, 168, 51, 0.13);
    --err: #ff8a80; --err-bg: rgba(255, 138, 128, 0.12);
    --shadow-sm: none; --shadow: 0 0 0 1px rgba(255, 255, 255, 0.02); --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.8);
    --menu-bg: #111113; --menu-texto: #c7c7cc; --menu-texto-forte: #fff; --menu-borda: rgba(255, 255, 255, 0.08);
    --menu-hover: rgba(255, 255, 255, 0.06); --menu-ativo: rgba(255, 255, 255, 0.1); --menu-ativo-sombra: none;
    --menu-logo-escura: none; --menu-logo-branca: block;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0b0b0c; --bg-soft: #111113; --surface: #151517; --surface-2: #1d1d20; --surface-3: #2a2a2e;
  --ink: #f5f5f7; --ink-2: #c7c7cc; --muted: #8e8e93; --faint: #636366;
  --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.15);
  --accent-text: var(--tn-gold-light); --ring: rgba(210, 168, 51, 0.35);
  --btn-bg: #f5f5f7; --btn-bg-hover: #ffffff; --btn-fg: #0b0b0c;
  --ok: #5cc28e; --ok-bg: rgba(92, 194, 142, 0.13); --warn: #e3c36a; --warn-bg: rgba(210, 168, 51, 0.13);
  --err: #ff8a80; --err-bg: rgba(255, 138, 128, 0.12);
  --shadow-sm: none; --shadow: 0 0 0 1px rgba(255, 255, 255, 0.02); --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.8);
  --menu-bg: #111113; --menu-texto: #c7c7cc; --menu-texto-forte: #fff; --menu-borda: rgba(255, 255, 255, 0.08);
  --menu-hover: rgba(255, 255, 255, 0.06); --menu-ativo: rgba(255, 255, 255, 0.1); --menu-ativo-sombra: none;
  --menu-logo-escura: none; --menu-logo-branca: block;
  color-scheme: dark;
}

/* =====================================================================
   Base
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 15px/1.55 var(--font); letter-spacing: -0.006em;
  font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: var(--ink); text-decoration: none; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration: underline; text-decoration-color: var(--tn-gold); }
h1, h2, h3 { font-family: var(--font-display); color: var(--ink); line-height: 1.12; margin: 0 0 0.5rem; }
h1 { font-size: clamp(1.9rem, 1.2rem + 1.9vw, 2.65rem); font-weight: 700; letter-spacing: -0.04em; }
h2 { font-size: 1.12rem; font-weight: 650; letter-spacing: -0.02em; }
h3 { font-size: 0.98rem; font-weight: 650; letter-spacing: -0.015em; }
p { margin: 0 0 0.75rem; }
small, .muted { color: var(--muted); }
code { font-size: 0.88em; padding: 0.1rem 0.35rem; border-radius: 0.35rem; background: var(--surface-2); }
strong, b { font-weight: 600; }
:focus-visible { outline: 2px solid var(--tn-gold); outline-offset: 3px; }
::selection { background: rgba(210, 168, 51, 0.28); }
[hidden] { display: none !important; }
.ico { width: 18px; height: 18px; flex: none; }

/* =====================================================================
   Layout: menu lateral + conteúdo
   ===================================================================== */
.app { display: flex; min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; width: var(--sidebar-w); flex: none;
  display: flex; flex-direction: column; gap: 0.25rem;
  background: var(--menu-bg); color: var(--menu-texto); border-right: 1px solid var(--menu-borda);
  padding: 1.25rem 0.85rem 1rem; overflow-y: auto; z-index: 30;
  scrollbar-width: thin; scrollbar-color: var(--menu-borda) transparent;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--menu-borda); border-radius: 6px; }
.sidebar-marca { display: flex; align-items: center; gap: 0.65rem; padding: 0.15rem 0.6rem 1.1rem; color: var(--menu-texto-forte); }
.sidebar-marca:hover { text-decoration: none; }
.sidebar-marca img { height: 28px; width: auto; }
.sidebar-marca .logo-menu-escura { display: var(--menu-logo-escura, block); }
.sidebar-marca .logo-menu-branca { display: var(--menu-logo-branca, none); }
.sidebar-marca .logo-org { height: auto; max-height: 40px; max-width: 180px; object-fit: contain; }
.sidebar-marca span {
  font: 600 0.62rem/1 var(--font); letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-text);
  border-left: 1px solid var(--menu-borda); padding-left: 0.65rem;
}
.sidebar-nav { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.sidebar-grupo { font: 600 0.64rem/1 var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--menu-grupo); padding: 1.15rem 0.7rem 0.5rem; }
.sidebar-nav a, .sidebar-nav .link-menu {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.7rem; border-radius: 0.6rem;
  color: var(--menu-texto); font: 500 0.875rem/1.25 var(--font); letter-spacing: -0.01em; position: relative;
  background: transparent; border: 0; text-align: left; cursor: pointer; width: 100%;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.sidebar-nav a .ico, .sidebar-nav .link-menu .ico { width: 17px; height: 17px; opacity: 0.75; }
.sidebar-nav a:hover, .sidebar-nav .link-menu:hover { background: var(--menu-hover); color: var(--menu-texto-forte); text-decoration: none; }
.sidebar-nav a.ativo { background: var(--menu-ativo); color: var(--menu-texto-forte); box-shadow: var(--menu-ativo-sombra); font-weight: 600; }
.sidebar-nav a.ativo .ico { color: var(--tn-gold); opacity: 1; }
.selo {
  margin-left: auto; min-width: 1.3rem; padding: 0.18rem 0.42rem; border-radius: 999px; text-align: center;
  background: #ff3b30; color: #fff; font: 650 0.68rem/1.05 var(--font); font-variant-numeric: tabular-nums;
}
.selo-ouro { background: var(--tn-gold); color: var(--on-accent, var(--tn-black)); }
.sidebar-rodape { border-top: 1px solid var(--menu-borda); padding-top: 0.75rem; margin-top: 0.5rem; display: grid; gap: 0.5rem; }
.sidebar-nav-rodape { flex: none; }
.sidebar-usuario { display: flex; align-items: center; gap: 0.65rem; padding: 0.45rem 0.6rem; border-radius: 0.7rem; color: var(--menu-texto-forte); }
.sidebar-usuario:hover { text-decoration: none; background: var(--menu-hover); }
.sidebar-usuario .ico { width: 30px; height: 30px; padding: 6px; border-radius: 999px; background: var(--tn-black); color: var(--tn-gold); }
.sidebar-usuario strong { display: block; font-size: 0.86rem; font-weight: 600; letter-spacing: -0.01em; }
.sidebar-usuario small { display: block; color: var(--menu-grupo); font-size: 0.74rem; }
.sidebar-acoes { display: flex; gap: 0.35rem; padding: 0 0.5rem; }
.sidebar .icon-btn { border-color: var(--menu-borda); color: var(--menu-texto); background: transparent; }
.sidebar .icon-btn:hover { background: var(--menu-hover); color: var(--menu-texto-forte); }

.conteudo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
main { flex: 1; width: 100%; max-width: 92rem; margin: 0 auto; padding: 2.5rem clamp(1.25rem, 3.5vw, 3rem) 4rem; }
.footer { padding: 1.25rem clamp(1.25rem, 3.5vw, 3rem); color: var(--faint); font-size: 0.75rem; border-top: 1px solid var(--border); }
.barra-movel { display: none; }
.logo-dark { display: none; }
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-light { display: none; }
  :root:not([data-theme="light"]) .logo-dark { display: block; }
}

@media (max-width: 960px) {
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-100%);
    transition: transform 280ms var(--ease); box-shadow: var(--shadow-lg);
  }
  .sidebar.aberta { transform: none; }
  .sidebar-fundo { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.32); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 20; }
  .barra-movel {
    display: flex; align-items: center; gap: 0.75rem; position: sticky; top: 0; z-index: 10; padding: 0.65rem 1rem;
    background: color-mix(in srgb, var(--bg) 80%, transparent); border-bottom: 1px solid var(--border);
    backdrop-filter: saturate(1.8) blur(20px); -webkit-backdrop-filter: saturate(1.8) blur(20px);
  }
  .barra-movel-marca img { height: 24px; width: auto; }
  main { padding-top: 1.5rem; }
}

/* Cabeçalho de página */
.page-head { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: flex-end; justify-content: space-between; margin-bottom: 2rem; }
.page-head > div:first-child { min-width: 0; }
.page-head h1 { margin-bottom: 0.35rem; }
.page-head p { color: var(--muted); margin: 0; font-size: 0.98rem; max-width: 62ch; }
.page-head .actions { margin-top: 0; }
.eyebrow {
  display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem;
  font: 600 0.7rem/1 var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.eyebrow::before { content: ""; width: 1.25rem; height: 1px; background: var(--tn-gold); flex: none; }
.eyebrow a { color: var(--muted); }
.eyebrow a:hover { color: var(--ink); text-decoration: none; }

/* =====================================================================
   Componentes
   ===================================================================== */
.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.grid-lead { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
@media (max-width: 1100px) { .grid-lead { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 1.5rem 1.6rem; box-shadow: var(--shadow); min-width: 0;
}
.card + .card { margin-top: 1.25rem; }
.grid > .card + .card { margin-top: 0; }
.card > h2:first-child, .card > summary:first-child { margin-top: 0; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.card-head h2 { margin: 0; }
details.card > summary { list-style: none; display: flex; align-items: center; gap: 0.5rem; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::after { content: ""; margin-left: auto; width: 0.5rem; height: 0.5rem; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); transition: transform 200ms var(--ease); }
details.card[open] > summary::after { transform: rotate(-135deg); }
details > summary { cursor: pointer; }

.stat .num { font: 700 2.1rem/1.05 var(--font-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.stat .lbl { color: var(--muted); font-size: 0.84rem; margin-top: 0.35rem; }

/* Botões: cápsula preta (ação), cinza (secundário) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  min-height: 2.5rem; padding: 0.55rem 1.15rem; border-radius: 999px; border: 1px solid transparent;
  font: 550 0.875rem/1 var(--font); letter-spacing: -0.01em; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn-primary, .btn-dark { background: var(--btn-bg); color: var(--btn-fg); box-shadow: var(--shadow-sm); }
.btn-primary:hover, .btn-dark:hover { background: var(--btn-bg-hover); }
.btn-ouro { background: var(--tn-gold); color: var(--on-accent, var(--tn-black)); }
.btn-ouro:hover { background: var(--tn-gold-light); }
.btn-ghost { background: var(--surface-2); color: var(--ink); }
.btn-ghost:hover { background: var(--surface-3); }
.btn-linha { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.btn-linha:hover { background: var(--surface-2); }
.btn-sm { min-height: 2.1rem; padding: 0.4rem 0.85rem; font-size: 0.8rem; }
.btn-lg { min-height: 3rem; padding: 0.75rem 1.5rem; font-size: 0.95rem; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn .ico { width: 16px; height: 16px; }
.icon-btn {
  width: 2.25rem; height: 2.25rem; display: inline-grid; place-items: center; border-radius: 999px; flex: none;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); cursor: pointer;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn-sm { width: 1.9rem; height: 1.9rem; font-size: 0.95rem; }
.icon-btn[disabled] { opacity: 0.35; cursor: not-allowed; }

/* Campos */
label, .label { display: block; font: 500 0.8rem/1.3 var(--font); margin-bottom: 0.4rem; color: var(--ink-2); letter-spacing: -0.005em; }
input[type="text"], input[type="password"], input[type="date"], input[type="email"], input[type="tel"], input[type="url"],
input[type="search"], input[type="datetime-local"], input[type="number"], input:not([type]), select, textarea {
  width: 100%; font: inherit; font-size: 0.92rem; color: var(--ink); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 0.7rem; padding: 0.6rem 0.85rem; min-height: 2.6rem;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease), background-color 160ms var(--ease);
}
textarea { min-height: 5rem; line-height: 1.5; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--ink) 28%, transparent); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--tn-gold); box-shadow: 0 0 0 4px var(--ring); }
select {
  appearance: none; -webkit-appearance: none; padding-right: 2.2rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.85rem center;
}
input[type="file"] { font-size: 0.85rem; color: var(--muted); }
input[type="file"]::file-selector-button {
  font: 550 0.8rem/1 var(--font); border: 0; border-radius: 999px; padding: 0.55rem 0.95rem; margin-right: 0.75rem;
  background: var(--surface-2); color: var(--ink); cursor: pointer;
}
.check { display: flex; align-items: center; gap: 0.55rem; font-weight: 500; font-size: 0.88rem; margin: 0; cursor: pointer; color: var(--ink); }
.check input { width: 1.05rem; height: 1.05rem; accent-color: var(--ink); margin: 0; }
.field { margin-bottom: 1.1rem; position: relative; }
.field .help { font-size: 0.78rem; color: var(--muted); margin-top: 0.35rem; }
.errorlist { list-style: none; padding: 0; margin: 0.4rem 0 0; color: var(--err); font-size: 0.82rem; }
.search { display: flex; gap: 0.5rem; }
.search input { font-size: 1rem; padding: 0.75rem 1.1rem; border-radius: 999px; min-height: 3rem; }
.filters { display: grid; gap: 1rem 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); align-items: end; }
.filters .field { margin: 0; }
.filtros-3 { grid-template-columns: 2fr 1.4fr 1fr; }
@media (max-width: 700px) { .filtros-3 { grid-template-columns: 1fr; } }
.checks { display: flex; flex-wrap: wrap; gap: 0.7rem 1.5rem; margin-top: 1.25rem; }
.checks-coluna { flex-direction: column; gap: 0.75rem; margin: 0.5rem 0 0.3rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 1.25rem; }
.actions > form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0; }
.linha-form { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; }
.linha-form .field { flex: 1 1 14rem; margin: 0; }
.filtro-inline select { min-width: 12rem; }

/* Avisos */
.alert { display: flex; gap: 0.6rem; align-items: flex-start; border-radius: var(--r-md); padding: 0.85rem 1.05rem; margin-bottom: 1.25rem; border: 1px solid transparent; font-size: 0.9rem; }
.alert::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: currentColor; margin-top: 0.45rem; flex: none; opacity: 0.85; }
.alert-ok { background: var(--ok-bg); color: var(--ok); }
.alert-warn { background: var(--warn-bg); color: var(--warn); }
.alert-err { background: var(--err-bg); color: var(--err); }
.alert-info { background: var(--surface-2); color: var(--ink-2); }
.alert a { color: inherit; text-decoration: underline; }
.alert .actions { margin-top: 0.6rem; }

/* Selos */
.badge {
  display: inline-flex; align-items: center; gap: 0.3rem; font: 600 0.7rem/1 var(--font); letter-spacing: 0.01em;
  padding: 0.32rem 0.6rem; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); border: 0; white-space: nowrap;
}
.badge-ok, .badge.etapa-ganho { background: var(--ok-bg); color: var(--ok); }
.badge-err, .badge.etapa-perdido { background: var(--err-bg); color: var(--err); }
.badge-gold { background: rgba(210, 168, 51, 0.15); color: var(--accent-text); }

/* Listas de dados */
dl.dados { display: grid; grid-template-columns: minmax(8rem, 10.5rem) 1fr; gap: 0; margin: 0; }
dl.dados dt, dl.dados dd { padding: 0.65rem 0; border-bottom: 1px solid var(--border); }
dl.dados dt { color: var(--muted); font-size: 0.84rem; }
dl.dados dd { margin: 0; overflow-wrap: anywhere; font-size: 0.92rem; }
dl.dados dt:last-of-type, dl.dados dd:last-of-type { border-bottom: 0; }
@media (max-width: 520px) { dl.dados { grid-template-columns: 1fr; } dl.dados dt { border: 0; padding-bottom: 0; } }

/* Tabelas */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 0.85rem 1rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font: 600 0.68rem/1.2 var(--font); color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; background: var(--surface); white-space: nowrap; }
tbody tr { transition: background-color 120ms; }
tbody tr:hover td { background: var(--bg-soft); }
tr:last-child td { border-bottom: 0; }
td a { font-weight: 550; }
td .sub { display: block; color: var(--muted); font-size: 0.79rem; font-weight: 400; margin-top: 0.1rem; }
.nowrap { white-space: nowrap; }

/* Sócios, pessoas, contatos */
.socios { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.socio { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--border); }
.socio:last-child { border-bottom: 0; }
.socio .nome { font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 0.4rem; }
.socio .meta { color: var(--muted); font-size: 0.82rem; }
.socio.pessoa { align-items: flex-start; }
.socio.pessoa .contatos { margin-top: 0.5rem; }
.item-cor .nome { display: flex; align-items: center; }
.contatos { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.contatos + dl.dados, .contatos + p + dl.dados { margin-top: 1rem; }
.contato {
  display: inline-flex; gap: 0.4rem; align-items: center; padding: 0.4rem 0.75rem; border-radius: 999px;
  background: var(--surface-2); color: var(--ink); font-size: 0.84rem; font-weight: 500; transition: background-color 160ms;
}
.contato:hover { text-decoration: none; background: var(--surface-3); }
.contato .ico { width: 15px; height: 15px; color: var(--muted); }
.contato-zap { background: rgba(37, 211, 102, 0.12); color: #0f7a3d; }
.contato-zap .ico { color: #1aa557; }
.contato-zap:hover { background: rgba(37, 211, 102, 0.2); }
:root[data-theme="dark"] .contato-zap { color: #4be38a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .contato-zap { color: #4be38a; } }

.progress { height: 0.45rem; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.progress > span { display: block; height: 100%; width: 0; background: var(--tn-gold); border-radius: 999px; transition: width 400ms var(--ease); }
.pager { display: flex; gap: 0.5rem; align-items: center; justify-content: flex-end; margin-top: 1.25rem; font-size: 0.85rem; }
.empty { text-align: center; padding: 3rem 1rem; color: var(--muted); }
.empty h2 { color: var(--ink); }

/* Utilitários */
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 1.25rem; } .mt-2 { margin-top: 2rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.texto-erro { color: var(--err) !important; }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0.3rem 0 0; }
.centro { justify-content: center; }
.lista-ajuda { padding-left: 1.1rem; margin: 0.6rem 0; display: grid; gap: 0.45rem; color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* =====================================================================
   Login
   ===================================================================== */
.login-page { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.login-side {
  background: #0b0b0c; color: #f5f5f7; padding: clamp(2rem, 5vw, 4.5rem);
  display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden;
}
.login-side::after { content: ""; position: absolute; left: clamp(2rem, 5vw, 4.5rem); right: clamp(2rem, 5vw, 4.5rem); bottom: 0; height: 1px; background: linear-gradient(90deg, var(--tn-gold), transparent); }
.login-side img { height: 34px; width: auto; align-self: flex-start; }
.login-side img.logo-org { height: auto; max-height: 56px; max-width: 220px; object-fit: contain; }
.login-side h1 { font-size: clamp(2.2rem, 1.2rem + 3vw, 3.75rem); max-width: 14ch; color: #fff; letter-spacing: -0.045em; line-height: 1.02; text-transform: uppercase; }
.login-side h1 em { font-style: normal; color: var(--tn-gold); }
.login-side p { color: #a1a1a6; max-width: 44ch; }
.login-form { display: grid; place-items: center; padding: 2rem clamp(1.25rem, 4vw, 3rem); background: var(--bg); }
.login-form .box { width: 100%; max-width: 23rem; }
.login-form h2 { font-size: 1.6rem; letter-spacing: -0.035em; }
.login-form .btn { width: 100%; min-height: 2.9rem; }
@media (max-width: 860px) { .login-page { grid-template-columns: 1fr; } .login-side { gap: 2rem; } }
.marca-texto { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; color: var(--menu-texto-forte); line-height: 1.2; }
.marca-texto-barra { color: var(--ink); font-size: 0.95rem; }
.marca-texto-login { font-size: 1.4rem; color: #fff; }

/* Verificação em duas etapas (app autenticador) */
.login-form .box-largo { max-width: 27rem; }
.passos-autenticador { padding-left: 1.2rem; margin: 1rem 0 1.25rem; display: grid; gap: 0.7rem; font-size: 0.92rem; }
.qr-caixa { margin: 0.75rem 0 0.5rem; padding: 0.75rem; background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); width: max-content; }
.qr-autenticador { display: block; width: 196px; height: 196px; }
.segredo-texto summary { cursor: pointer; color: var(--muted); font-size: 0.85rem; }
.segredo-texto code { font-size: 0.95rem; letter-spacing: 0.06em; word-break: break-all; }
.campo-codigo { font-size: 1.35rem; letter-spacing: 0.35em; text-align: center; font-variant-numeric: tabular-nums; }
.codigos-recuperacao { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
.codigos-recuperacao code { display: block; padding: 0.45rem 0.6rem; background: var(--surface-2); border-radius: var(--r-sm); font-size: 0.95rem; letter-spacing: 0.05em; text-align: center; }

/* =====================================================================
   Base de dados: importações
   ===================================================================== */
.ufs { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.2rem, 1fr)); gap: 0.4rem; }
.uf { margin: 0; cursor: pointer; }
.uf input { position: absolute; opacity: 0; pointer-events: none; }
.uf span {
  display: block; text-align: center; padding: 0.5rem 0; border-radius: 0.6rem; background: var(--surface-2);
  font-weight: 600; font-size: 0.8rem; color: var(--ink-2); transition: background-color 160ms, color 160ms;
}
.uf:hover span { background: var(--surface-3); }
.uf input:checked + span { background: var(--btn-bg); color: var(--btn-fg); }
.uf input:focus-visible + span { outline: 2px solid var(--tn-gold); outline-offset: 2px; }
.sugestoes {
  list-style: none; margin: 0.35rem 0 0; padding: 0.35rem; position: absolute; left: 0; right: 0; z-index: 5;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); max-height: 18rem; overflow-y: auto;
}
.sugestoes li { padding: 0.55rem 0.7rem; border-radius: 0.5rem; cursor: pointer; font-size: 0.88rem; }
.sugestoes li:hover, .sugestoes li[aria-selected="true"] { background: var(--surface-2); }
.sugestoes li small { color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.65rem; }
.chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.35rem 0.3rem 0.75rem; border-radius: 999px; background: var(--surface-2); color: var(--ink); font-size: 0.82rem; max-width: 100%; }
.chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip button { border: 0; background: transparent; color: var(--muted); cursor: pointer; width: 1.4rem; height: 1.4rem; border-radius: 999px; font-size: 1rem; line-height: 1; }
.chip button:hover { background: var(--surface-3); color: var(--ink); }
.importacoes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.importacao { padding: 1rem 0; border-bottom: 1px solid var(--border); }
.importacao:last-child { border-bottom: 0; }
.importacao-topo { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.importacao .nome { font-weight: 650; font-family: var(--font-display); letter-spacing: -0.015em; }
.importacao .meta { color: var(--muted); font-size: 0.84rem; }
.importacao .actions { margin-top: 0.6rem; }
.importacao .progress { margin-top: 0.6rem; }

/* =====================================================================
   Painel
   ===================================================================== */
.busca-rapida { display: flex; gap: 0.5rem; flex: 0 1 26rem; }
.busca-rapida input { border-radius: 999px; }
.stat-link { color: var(--ink); transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease), transform 200ms var(--ease); }
.stat-link:hover { text-decoration: none; box-shadow: var(--shadow-md); transform: translateY(-1px); }
.grid-painel { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 1100px) { .grid-painel { grid-template-columns: 1fr; } }
.alertas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.alerta a { display: flex; align-items: center; gap: 0.65rem; padding: 0.75rem 0.9rem; border-radius: var(--r-md); color: var(--ink); background: var(--surface-2); font-size: 0.9rem; }
.alerta a:hover { text-decoration: none; background: var(--surface-3); }
.alerta a span:first-of-type { flex: 1; }
.alerta-erro a { background: var(--err-bg); }
.alerta-erro .ico { color: var(--err); }
.alerta-atencao a { background: var(--warn-bg); }
.alerta-atencao .ico { color: var(--tn-gold); }
.alerta-info .ico { color: var(--muted); }
.funil-resumo + .funil-resumo { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.funil-resumo-topo { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.75rem; }
.funil-resumo-topo a { color: var(--ink); }
.barras { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.barras li { display: grid; grid-template-columns: 9rem 1fr 3.5rem; gap: 0.75rem; align-items: center; font-size: 0.82rem; }
.barra-nome { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra { height: 0.5rem; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.barra-fill { display: block; height: 100%; width: 0; background: var(--tn-gold); border-radius: 999px; transition: width 700ms var(--ease); }
.barra-ganho .barra-fill { background: var(--ok); }
.barra-perdido .barra-fill { background: var(--err); }
.barra-num { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }

/* =====================================================================
   Consultar CNPJ: busca em destaque
   ===================================================================== */
.hero-busca { text-align: center; max-width: 46rem; margin: clamp(2rem, 9vh, 6rem) auto 2rem; }
.hero-busca .eyebrow { justify-content: center; }
.hero-busca .eyebrow::after { content: ""; width: 1.25rem; height: 1px; background: var(--tn-gold); flex: none; }
.hero-busca h1 { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.25rem); letter-spacing: -0.05em; line-height: 1; margin-bottom: 0.9rem; }
.hero-busca h1 em { font-style: normal; color: var(--tn-gold); }
.hero-busca > p { color: var(--muted); font-size: 1.05rem; max-width: 36rem; margin: 0 auto 2rem; }
.busca-grande {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.45rem 0.45rem 1.25rem;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 999px; box-shadow: var(--shadow-lg);
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.busca-grande:focus-within { border-color: var(--tn-gold); box-shadow: var(--shadow-lg), 0 0 0 4px var(--ring); }
.busca-grande > .ico { width: 20px; height: 20px; color: var(--muted); }
.busca-grande input, .busca-grande input:focus, .busca-grande input:hover {
  flex: 1; min-width: 0; border: 0; box-shadow: none; background: transparent; font-size: 1.15rem; letter-spacing: 0.01em;
  padding: 0.65rem 0.25rem; min-height: 0;
}
.busca-grande .btn { min-height: 3rem; padding-inline: 1.6rem; font-size: 0.95rem; }
.hero-dicas { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; margin-top: 1.5rem; color: var(--muted); font-size: 0.82rem; }
.hero-dicas span { display: inline-flex; align-items: center; gap: 0.4rem; }
.hero-dicas .ico { width: 15px; height: 15px; color: var(--tn-gold); }
.hero-busca .errorlist { margin-top: 0.75rem; }
.busca-compacta { display: flex; justify-content: flex-end; margin-bottom: 1.5rem; }
.busca-compacta .busca-grande { width: min(100%, 26rem); box-shadow: var(--shadow-sm); padding: 0.25rem 0.25rem 0.25rem 1rem; }
.busca-compacta .busca-grande input { font-size: 0.95rem; padding: 0.45rem 0.2rem; }
.busca-compacta .busca-grande .btn { min-height: 2.3rem; padding-inline: 1rem; font-size: 0.82rem; }
@media (max-width: 560px) {
  .busca-grande { flex-wrap: wrap; border-radius: var(--r-xl); padding: 0.6rem; }
  .busca-grande > .ico { display: none; }
  .busca-grande input { padding: 0.6rem 0.6rem; }
  .busca-grande .btn { width: 100%; }
}

/* =====================================================================
   Gerar lista: barra de resultado
   ===================================================================== */
.resultado-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 1.5rem; margin-bottom: 1.25rem; }
.resultado-topo h2 { font-size: 1.5rem; letter-spacing: -0.035em; margin: 0 0 0.2rem; }
.resultado-topo .muted { font-size: 0.86rem; }
.resultado-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.resultado-acoes form { display: flex; align-items: center; gap: 0; margin: 0; }
.enviar-crm { background: var(--surface-2); border-radius: 999px; padding: 0.25rem; gap: 0.25rem !important; }
.enviar-crm select { min-height: 2.1rem; border: 0; background-color: transparent; font-size: 0.84rem; font-weight: 500; padding: 0.35rem 2rem 0.35rem 0.85rem; width: auto; max-width: 14rem; box-shadow: none; }
.enviar-crm select:focus { box-shadow: 0 0 0 3px var(--ring); }
.enviar-crm .btn { min-height: 2.1rem; }
.enviar-crm-rotulo { font-size: 0.78rem; color: var(--muted); padding-left: 0.75rem; white-space: nowrap; }

/* =====================================================================
   CRM: funil (quadro)
   ===================================================================== */
.funil-topo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem; margin-bottom: 1.5rem; }
.funil-topo h1 { margin-bottom: 0.6rem; display: flex; align-items: center; gap: 0.7rem; }
.funil-numeros { display: flex; flex-wrap: wrap; gap: 0.4rem 1.75rem; }
.funil-numeros div { display: flex; flex-direction: column; }
.funil-numeros strong { font: 700 1.2rem/1.1 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.funil-numeros span { color: var(--muted); font-size: 0.76rem; }
.funil-numeros .ganho strong { color: var(--ok); }
.funil-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.25rem; }

/* Seletor de funis (controle segmentado) */
.abas-funil { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.15rem; padding: 0.25rem; border-radius: 999px; background: var(--surface-2); max-width: 100%; }
.abas-funil a {
  display: inline-flex; align-items: center; gap: 0.1rem; padding: 0.42rem 0.95rem; border-radius: 999px;
  color: var(--muted); font-size: 0.84rem; font-weight: 550; letter-spacing: -0.01em; white-space: nowrap;
  transition: background-color 160ms var(--ease), color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.abas-funil a:hover { color: var(--ink); text-decoration: none; }
.abas-funil a.ativa { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 0.5px rgba(0, 0, 0, 0.05); }
.abas-funil .ponto { width: 0.5rem; height: 0.5rem; margin-right: 0.45rem; }
.abas-funil .aba-mais { color: var(--muted); padding-inline: 0.75rem; }
.abas-funil .ico { width: 14px; height: 14px; margin-right: 0.25rem; }

.filtro-funil { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0; }
.campo-busca { position: relative; flex: 1 1 12rem; max-width: 16rem; }
.campo-busca .ico { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.campo-busca input { padding-left: 2.35rem; border-radius: 999px; background: var(--surface-2); border-color: transparent; min-height: 2.35rem; font-size: 0.86rem; }
.campo-busca input:focus { background: var(--surface); }
.filtro-funil select { width: auto; max-width: 13rem; min-height: 2.35rem; border-radius: 999px; background-color: var(--surface-2); border-color: transparent; font-size: 0.84rem; font-weight: 500; padding-block: 0.35rem; }
.filtro-funil select:focus { background-color: var(--surface); }

.kanban {
  display: grid; grid-auto-flow: column; grid-auto-columns: 18.5rem; gap: 1rem;
  overflow-x: auto; padding: 0.25rem 0.25rem 1rem; margin: 0 -0.25rem; align-items: start;
  scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
}
.kanban::-webkit-scrollbar { height: 8px; }
.kanban::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; }
.coluna { display: flex; flex-direction: column; max-height: calc(100vh - 16rem); min-height: 14rem; scroll-snap-align: start; border-radius: var(--r-lg); transition: background-color 160ms var(--ease); }
.coluna-topo { padding: 0.15rem 0.2rem 0.85rem; margin-bottom: 0.65rem; border-bottom: 2px solid var(--cor, var(--border-strong)); }
.coluna-nome { display: flex; align-items: center; gap: 0.5rem; }
.coluna-nome h2 { font: 650 0.9rem/1.2 var(--font); letter-spacing: -0.01em; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coluna-nome .ponto { margin: 0; }
.coluna-nome .ico { width: 15px; height: 15px; }
.coluna-ganho .coluna-nome .ico { color: var(--ok); }
.coluna-perdido .coluna-nome .ico { color: var(--err); }
.coluna-qtd { margin-left: auto; min-width: 1.6rem; padding: 0.2rem 0.5rem; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font: 600 0.72rem/1 var(--font); text-align: center; font-variant-numeric: tabular-nums; }
.coluna-soma { margin-top: 0.3rem; color: var(--muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.coluna-cards { display: flex; flex-direction: column; gap: 0.6rem; overflow-y: auto; flex: 1; min-height: 8rem; padding: 0.15rem 0.2rem 0.5rem; border-radius: var(--r-md); scrollbar-width: thin; }
.coluna.sobre .coluna-cards { background: color-mix(in srgb, var(--cor, var(--tn-gold)) 7%, transparent); outline: 1.5px dashed color-mix(in srgb, var(--cor, var(--tn-gold)) 55%, transparent); outline-offset: -1px; }
.coluna-vazia { display: grid; place-items: center; min-height: 6rem; margin: 0; border: 1.5px dashed var(--border-strong); border-radius: var(--r-md); color: var(--faint); font-size: 0.8rem; }
.coluna-mais { font-size: 0.8rem; text-align: center; padding: 0.5rem; color: var(--muted); font-weight: 550; }

.card-lead {
  position: relative; display: flex; flex-direction: column; gap: 0.2rem; padding: 0.9rem 0.95rem 0.8rem;
  border-radius: 0.9rem; background: var(--surface); border: 1px solid var(--border); color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); cursor: grab;
  transition: box-shadow 180ms var(--ease), transform 180ms var(--ease), border-color 180ms var(--ease);
}
.card-lead:hover { text-decoration: none; box-shadow: var(--shadow-md); transform: translateY(-1px); border-color: var(--border-strong); }
.card-lead:active { cursor: grabbing; }
.card-lead.arrastando { opacity: 0.4; transform: rotate(1.5deg) scale(0.98); }
.card-lead[data-cor]::before { content: ""; position: absolute; left: 0.95rem; right: 0.95rem; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--cor); }
.card-lead-topo { display: flex; align-items: flex-start; gap: 0.5rem; }
.card-lead-nome { font: 600 0.9rem/1.3 var(--font); letter-spacing: -0.012em; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.card-lead-sub { color: var(--muted); font-size: 0.78rem; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-lead-valor { font: 650 0.95rem/1.2 var(--font-display); letter-spacing: -0.02em; margin-top: 0.35rem; font-variant-numeric: tabular-nums; }
.card-rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.7rem; margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--border); }
.mini { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mini .ico { width: 13px; height: 13px; }
.mini.atrasada { color: var(--err); font-weight: 600; }
.mini.parado { color: var(--warn); font-weight: 600; }
.avatar, .mini.avatar {
  width: 1.5rem; height: 1.5rem; display: inline-grid; place-items: center; border-radius: 999px; flex: none;
  background: var(--tn-black); color: var(--tn-gold); font: 700 0.66rem/1 var(--font); letter-spacing: 0;
}
:root[data-theme="dark"] .avatar, :root[data-theme="dark"] .mini.avatar { background: var(--surface-3); }
.card-lead-topo .avatar { margin-top: -0.1rem; }
@media (max-width: 700px) { .kanban { grid-auto-columns: 84vw; } .coluna { max-height: none; } }

/* =====================================================================
   CRM: card e empresa
   ===================================================================== */
.etapa-form { display: flex; align-items: center; gap: 0.5rem; }
.etapa-form label { margin: 0; white-space: nowrap; }
.etapa-form select { min-width: 12rem; font-weight: 550; }
.etapas-trilha { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.passo { font-size: 0.74rem; font-weight: 500; padding: 0.35rem 0.75rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.passo.feito { color: var(--ink-2); background: var(--surface-3); }
.passo.atual { background: var(--btn-bg); color: var(--btn-fg); font-weight: 650; }
.passo.atual.passo-ganho { background: var(--ok); color: #fff; }
.passo.atual.passo-perdido { background: var(--err); color: #fff; }
.tarefas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.tarefa { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.75rem 0.9rem; border-radius: var(--r-md); background: var(--surface-2); position: relative; padding-left: 1.15rem; }
.tarefa::before { content: ""; position: absolute; left: 0.45rem; top: 0.75rem; bottom: 0.75rem; width: 3px; border-radius: 3px; background: var(--tn-gold); }
.tarefa strong { display: block; font-size: 0.9rem; }
.tarefa .meta { color: var(--muted); font-size: 0.8rem; }
.tarefa.atrasada::before { background: var(--err); }
.tarefa.feita::before { background: var(--ok); }
.tarefa.feita { opacity: 0.65; }
.tarefa.feita strong { text-decoration: line-through; }
.tipos { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.tipo { margin: 0; cursor: pointer; }
.tipo input { position: absolute; opacity: 0; pointer-events: none; }
.tipo span { display: inline-block; padding: 0.4rem 0.8rem; border-radius: 999px; background: var(--surface-2); font-size: 0.8rem; font-weight: 500; color: var(--ink-2); transition: background-color 160ms, color 160ms; }
.tipo:hover span { background: var(--surface-3); }
.tipo input:checked + span { background: var(--btn-bg); color: var(--btn-fg); }
.tipo input:focus-visible + span { outline: 2px solid var(--tn-gold); outline-offset: 2px; }
.linha-tempo { list-style: none; margin: 0; padding: 0 0 0 1.1rem; border-left: 1px solid var(--border-strong); display: grid; gap: 1rem; }
.evento { position: relative; }
.evento::before { content: ""; position: absolute; left: -1.43rem; top: 0.4rem; width: 0.55rem; height: 0.55rem; border-radius: 999px; background: var(--tn-gold); box-shadow: 0 0 0 4px var(--surface); }
.evento-sistema::before { background: var(--faint); }
.evento-comentario { background: var(--surface-2); border-radius: var(--r-md); padding: 0.7rem 0.85rem; }
.evento-comentario::before { top: 1rem; }
.evento-topo { display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; align-items: baseline; }
.evento-topo strong { font-size: 0.86rem; }
.evento .meta { color: var(--muted); font-size: 0.76rem; }
.evento-sistema .pre { color: var(--muted); font-size: 0.85rem; }
.evento-acoes { margin-top: 0.4rem; font-size: 0.8rem; }
.evento-acoes summary { color: var(--muted); }
.evento-acoes form { margin-top: 0.5rem; }
.anexos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.anexos li { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.75rem; border-radius: var(--r-md); background: var(--surface-2); }
.anexos a { display: inline-flex; align-items: center; gap: 0.45rem; flex: 1; min-width: 0; color: var(--ink); font-weight: 500; }
.anexos a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anexos .ico { width: 16px; height: 16px; color: var(--accent-text); flex: none; }
.anexos .meta { color: var(--muted); font-size: 0.76rem; white-space: nowrap; }
.anexar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.anexar input[type="file"] { flex: 1 1 14rem; }
.funis-da-empresa { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.5rem; }
.chip-funil {
  display: inline-flex; flex-direction: column; gap: 0.15rem; padding: 0.6rem 1rem 0.6rem 1.1rem; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); position: relative;
  transition: box-shadow 180ms var(--ease);
}
.chip-funil::before { content: ""; position: absolute; left: 0.45rem; top: 0.6rem; bottom: 0.6rem; width: 3px; border-radius: 3px; background: var(--cor, var(--tn-gold)); }
.chip-funil:hover { text-decoration: none; box-shadow: var(--shadow-md); }
.chip-funil span { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.chip-funil strong { font-size: 0.88rem; }

/* Notificações */
.notificacoes { list-style: none; margin: 0; padding: 0; }
.notificacoes li a { display: flex; gap: 0.8rem; align-items: flex-start; padding: 0.9rem 0.6rem; border-bottom: 1px solid var(--border); color: var(--ink); border-radius: 0.6rem; }
.notificacoes li:last-child a { border-bottom: 0; }
.notificacoes li a:hover { background: var(--bg-soft); text-decoration: none; }
.notificacoes li a > span { flex: 1; }
.notificacoes strong, .notificacoes .meta { display: block; }
.notificacoes .meta { color: var(--muted); font-size: 0.8rem; }
.notificacoes .ico { color: var(--faint); margin-top: 0.15rem; }
.notificacoes li.nao-lida strong { color: var(--ink); }
.notificacoes li.nao-lida .ico { color: var(--tn-gold); }

/* =====================================================================
   Cores escolhidas pelo usuário (data-cor → --cor via app.js)
   ===================================================================== */
.ponto { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 999px; background: var(--cor, var(--tn-gold)); margin-right: 0.45rem; flex: none; }
.ponto-grande { width: 0.75rem; height: 0.75rem; vertical-align: middle; margin-right: 0.6rem; }
.passo.atual[data-cor] { background: var(--cor); color: var(--cor-texto, #fff); }
.badge-cor { background: color-mix(in srgb, var(--cor) 14%, transparent); color: color-mix(in srgb, var(--cor) 78%, var(--ink)); }
:root[data-theme="dark"] .badge-cor { background: color-mix(in srgb, var(--cor) 24%, transparent); color: color-mix(in srgb, var(--cor) 55%, #fff); }
.barras li[data-cor] .barra-fill { background: var(--cor); }

.seletor-cor { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.amostra { position: relative; width: 1.55rem; height: 1.55rem; padding: 0; margin: 0; border-radius: 999px; cursor: pointer; flex: none;
  background: var(--cor, var(--surface)); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border-strong); transition: transform 0.14s var(--ease), box-shadow 0.14s; }
.amostra:hover { transform: scale(1.12); }
.amostra:focus-visible { outline: 2px solid var(--tn-gold); outline-offset: 2px; }
.amostra.escolhida { box-shadow: 0 0 0 2px var(--ink); }
.amostra.escolhida::after { content: ""; position: absolute; inset: 0.4rem; border-radius: 999px; background: var(--cor-texto, #fff); opacity: 0.9; }
.amostra-vazia { background: repeating-linear-gradient(135deg, var(--surface) 0 4px, var(--surface-2) 4px 8px); }
.amostra-vazia::before { content: ""; position: absolute; left: 50%; top: 10%; bottom: 10%; width: 2px; background: var(--muted); transform: translateX(-50%) rotate(45deg); }
.amostra-vazia.escolhida::after { display: none; }
.amostra-livre { display: inline-block; overflow: hidden; background: conic-gradient(from 0deg, #ef4444, #f59e0b, #eab308, #22c55e, #06b6d4, #3b82f6, #a855f7, #ec4899, #ef4444); }
.amostra-livre[data-cor] { background: var(--cor); }
.amostra-livre[data-cor]:not(.escolhida) { background: conic-gradient(from 0deg, #ef4444, #f59e0b, #eab308, #22c55e, #06b6d4, #3b82f6, #a855f7, #ec4899, #ef4444); }
.amostra-livre input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }

/* Edição de etapas */
.etapas-edicao { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.etapas-edicao .etapa-item { display: grid; grid-template-columns: auto minmax(11rem, 1fr) auto auto; gap: 0.5rem 1.25rem; align-items: end;
  padding: 0.85rem 1rem; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); position: relative; }
.etapas-edicao .etapa-item::before { content: ""; position: absolute; left: 0; top: 0.85rem; bottom: 0.85rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--cor, var(--border)); }
.etapa-item .field { margin: 0; }
.etapa-item .field label, .etapa-item .field .label { font-size: 0.72rem; color: var(--muted); margin-bottom: 0.3rem; }
.etapa-ordem { display: flex; align-items: center; gap: 0.2rem; align-self: center; }
.etapa-num { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; background: var(--cor, var(--surface-2)); color: var(--cor-texto, #fff); margin-right: 0.25rem; }
.etapa-fim { display: flex; align-items: center; gap: 0.5rem; align-self: center; }
.etapas-edicao .meta { color: var(--muted); font-size: 0.76rem; white-space: nowrap; }
@media (max-width: 1100px) {
  .etapas-edicao .etapa-item { grid-template-columns: auto minmax(0, 1fr) auto; }
  .etapa-item .etapa-cor { grid-column: 2 / 4; }
  .etapa-item .etapa-fim { grid-column: 1; grid-row: 2; }
}
@media (max-width: 600px) {
  .etapas-edicao .etapa-item { grid-template-columns: 1fr; }
  .etapa-item .etapa-cor, .etapa-item .etapa-fim { grid-column: auto; grid-row: auto; }
}

/* =====================================================================
   Formulários em blocos
   ===================================================================== */
.bloco { border: 0; border-top: 1px solid var(--border); margin: 0 0 0.5rem; padding: 1.1rem 0 0.2rem; min-width: 0; }
.bloco:first-of-type { border-top: 0; padding-top: 0.2rem; }
.bloco legend, .bloco > summary { font: 650 0.68rem/1.2 var(--font); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 0; }
.bloco legend { margin-bottom: 0.75rem; float: left; width: 100%; }
.bloco legend + * { clear: both; }
.bloco .grid { gap: 0 1rem; }
.bloco .grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
.bloco .grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr)); }
#pessoas form .grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: 0 1rem; }
.mais-campos > summary { cursor: pointer; color: var(--ink-2); font-size: 0.84rem; font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: 0.35rem; }
.mais-campos > summary::-webkit-details-marker { display: none; }
.mais-campos > summary::before { content: "+"; display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: 999px; background: var(--surface-2); font-size: 0.8rem; }
.mais-campos[open] > summary::before { content: "−"; }
details.bloco.mais-campos > summary { color: var(--muted); font-size: 0.68rem; }

/* =====================================================================
   Equipe, perfis, marca
   ===================================================================== */
.grupo-permissoes { border: 1px solid var(--border); border-radius: var(--r-md); padding: 0.9rem 1.1rem; margin: 0; display: grid; gap: 0.6rem; }
.grupo-permissoes legend { font-weight: 650; padding: 0 0.3rem; }
input[type="color"] { width: 100%; height: 2.6rem; padding: 0.2rem; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); cursor: pointer; }
.previa-marca { display: grid; grid-template-columns: 9rem 1fr; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; min-height: 11rem; margin-top: 0.6rem; }
.previa-menu { background: var(--menu-bg); color: var(--menu-texto-forte); padding: 0.8rem; display: flex; flex-direction: column; gap: 0.35rem; }
.previa-menu img { max-width: 100%; max-height: 32px; object-fit: contain; align-self: flex-start; margin-bottom: 0.5rem; }
.previa-item { font-size: 0.75rem; padding: 0.3rem 0.5rem; border-radius: var(--r-sm); opacity: 0.8; }
.previa-item.ativo { background: color-mix(in srgb, var(--tn-gold) 22%, transparent); opacity: 1; }
.previa-conteudo { padding: 1rem; background: var(--surface-2); display: flex; align-items: flex-start; }
.previa-botao { background: var(--tn-gold); color: var(--on-accent, var(--tn-black)); }

/* =====================================================================
   Tutorial guiado
   ===================================================================== */
.tour-camada { position: fixed; inset: 0; z-index: 900; }
.tour-camada.tour-escura { background: rgba(0, 0, 0, 0.5); }
.tour-destaque { position: fixed; z-index: 901; border-radius: var(--r-md); pointer-events: none; box-shadow: 0 0 0 3px var(--tn-gold), 0 0 0 9999px rgba(0, 0, 0, 0.5); transition: left 260ms var(--ease), top 260ms var(--ease), width 260ms var(--ease), height 260ms var(--ease); }
.tour-balao { position: fixed; z-index: 902; background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); padding: 1.25rem 1.35rem 1.1rem; }
.tour-balao h3 { font-size: 1.1rem; letter-spacing: -0.025em; margin: 0.3rem 0 0.45rem; }
.tour-balao p { color: var(--ink-2); font-size: 0.9rem; margin: 0 0 1rem; }
.tour-contador { font: 600 0.68rem/1 var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); }
.tour-acoes { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.tour-acoes > div { display: flex; gap: 0.4rem; }
.tour-sair { color: var(--muted); background: transparent; }
@media (prefers-reduced-motion: reduce) { .tour-destaque { transition: none; } }

/* =====================================================================
   Card: etapa + Ganho / Perdido / Reabrir
   ===================================================================== */
.card-status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.card-status > form { margin: 0; }
.card-status .etapa-form select { min-width: 13rem; border-radius: 999px; background-color: var(--surface-2); border-color: transparent; font-weight: 550; }
.btn-ganho { background: #1f9d55; color: #fff; box-shadow: var(--shadow-sm); }
.btn-ganho:hover { background: #188a49; }
.btn-perdido { background: var(--surface); color: var(--err); border-color: color-mix(in srgb, var(--err) 35%, transparent); }
.btn-perdido:hover { background: var(--err-bg); }
.btn-perdido-cheio { background: var(--err); color: #fff; width: 100%; margin-top: 0.75rem; }
.btn-perdido-cheio:hover { filter: brightness(1.08); }
.fechado-em { font-size: 0.82rem; color: var(--muted); padding: 0 0.25rem; }
.badge-titulo { vertical-align: middle; font-size: 0.75rem; padding: 0.38rem 0.7rem; position: relative; top: -0.2em; }
.badge-titulo .ico { width: 13px; height: 13px; }
.popover { position: relative; }
.popover > summary { list-style: none; }
.popover > summary::-webkit-details-marker { display: none; }
.popover-painel {
  position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 40; width: min(20rem, 86vw);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 1rem;
  animation: surgir 160ms var(--ease);
}
@keyframes surgir { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }

/* =====================================================================
   Automações
   ===================================================================== */
.regra-passo { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; padding: 1rem 0; border-top: 1px solid var(--border); }
.regra-passo:first-of-type { border-top: 0; padding-top: 0.5rem; }
.regra-num { width: 1.75rem; height: 1.75rem; border-radius: 999px; display: grid; place-items: center; background: var(--btn-bg); color: var(--btn-fg); font: 700 0.78rem/1 var(--font); margin-top: 0.1rem; }
.regra-titulo { font: 650 0.7rem/1 var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0.45rem 0 0.75rem; }
.regra-corpo .field:last-child { margin-bottom: 0; }
.regras, .ideias { list-style: none; margin: 0; padding: 0; }
.regra { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 1rem; align-items: center; padding: 0.9rem 0; border-bottom: 1px solid var(--border); }
.regra:last-child { border-bottom: 0; }
.regra-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.regra-meta { grid-column: 1; color: var(--muted); font-size: 0.76rem; }
.regra-acoes { grid-column: 2; grid-row: 1 / 3; display: flex; align-items: center; gap: 0.5rem; }
.regra-acoes form { margin: 0; }
.regra-desligada .regra-linha { opacity: 0.5; }
.regra-chip { display: inline-flex; align-items: center; padding: 0.38rem 0.75rem; border-radius: 999px; background: var(--surface-2); color: var(--ink); font-size: 0.82rem; font-weight: 550; }
.regra-chip-entao { background: color-mix(in srgb, var(--tn-gold) 14%, transparent); color: var(--ink); }
.seta { color: var(--faint); font-size: 0.9rem; }
.ideias { display: grid; gap: 0.6rem; margin-bottom: 1rem; }
.ideias li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.ideias .regra-chip { font-size: 0.78rem; padding: 0.3rem 0.65rem; }
.interruptor { position: relative; width: 2.6rem; height: 1.55rem; border-radius: 999px; border: 0; padding: 0; cursor: pointer; background: var(--surface-3); transition: background-color 200ms var(--ease); }
.interruptor span { position: absolute; top: 0.15rem; left: 0.15rem; width: 1.25rem; height: 1.25rem; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 200ms var(--ease); }
.interruptor.ligado { background: #34c759; }
.interruptor.ligado span { transform: translateX(1.05rem); }
.hero-alerta { max-width: 46rem; margin: 0 auto 1.25rem; }
.ideias li { flex-direction: column; align-items: flex-start; gap: 0.3rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--border); }
.ideias li:last-child { border-bottom: 0; }
.ideias .seta { display: none; }
.ideias .regra-chip-entao::before { content: "→"; margin-right: 0.4rem; color: var(--accent-text); }
.table-wrap td:first-child { min-width: 15rem; }
.card > .table-wrap { border-radius: var(--r-md); }
@media (min-width: 961px) {
  .filtro-funil { flex-wrap: nowrap; }
  .filtro-funil select { max-width: 10.5rem; }
}
@media (max-width: 700px) {
  .abas-funil { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .abas-funil::-webkit-scrollbar { display: none; }
  .campo-busca { max-width: none; flex-basis: 100%; }
}
.login-side h1 { margin-bottom: 1.25rem; }
.mb-0 { margin-bottom: 0; }

/* =====================================================================
   Gerar lista: tela inicial (nova lista + minhas listas)
   ===================================================================== */
.nova-lista { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2.5rem; padding: 1.75rem 2rem; }
.nova-lista-texto { display: flex; gap: 1.1rem; align-items: flex-start; flex: 1 1 24rem; }
.nova-lista-texto h2 { font-size: 1.45rem; letter-spacing: -0.03em; margin-bottom: 0.35rem; }
.nova-lista-texto p { color: var(--muted); margin: 0; max-width: 52ch; }
.nova-lista-icone { width: 3rem; height: 3rem; border-radius: 0.9rem; display: grid; place-items: center; background: var(--btn-bg); color: var(--tn-gold); flex: none; }
.nova-lista-icone .ico { width: 22px; height: 22px; }
.nova-lista-acao { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.nova-lista-base { display: flex; flex-direction: column; text-align: right; }
.nova-lista-base strong { font: 700 1.5rem/1.1 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.nova-lista-base span { color: var(--muted); font-size: 0.78rem; }
.minhas-listas { list-style: none; margin: 0; padding: 0; }
.minha-lista {
  display: grid; grid-template-columns: minmax(0, 1fr) 7rem minmax(10rem, 15rem) 6.5rem 1rem; gap: 0.5rem 1.25rem; align-items: center;
  padding: 1rem 0.75rem; margin: 0 -0.75rem; border-radius: var(--r-md); border-bottom: 1px solid var(--border); color: var(--ink);
  transition: background-color 140ms var(--ease);
}
.minhas-listas li:last-child .minha-lista { border-bottom: 0; }
.minha-lista:hover { background: var(--bg-soft); text-decoration: none; }
.minha-lista-nome { min-width: 0; }
.minha-lista-nome strong { display: block; font-size: 0.95rem; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.minha-lista .sub { display: block; color: var(--muted); font-size: 0.79rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.minha-lista-num { display: flex; flex-direction: column; }
.minha-lista-num strong { font: 700 1.1rem/1.1 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.minha-lista-num span { color: var(--muted); font-size: 0.74rem; }
.minha-lista-status { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.minha-lista-status .ico { width: 12px; height: 12px; }
.minha-lista-data { font-size: 0.84rem; font-variant-numeric: tabular-nums; }
.minha-lista-seta { color: var(--faint); transition: transform 160ms var(--ease), color 160ms; }
.minha-lista:hover .minha-lista-seta { transform: translateX(3px); color: var(--ink); }
@media (max-width: 900px) {
  .minha-lista { grid-template-columns: minmax(0, 1fr) auto; }
  .minha-lista-status, .minha-lista-data { grid-column: 1 / -1; }
  .minha-lista-seta { display: none; }
  .nova-lista-base { text-align: left; }
}

/* =====================================================================
   Gerar lista: passo a passo
   ===================================================================== */
.assistente { max-width: 52rem; margin: 0 auto; }
.assistente-topo { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.25rem; margin-bottom: 2.5rem; }
.eyebrow-link { font: 600 0.72rem/1 var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.eyebrow-link:hover { color: var(--ink); text-decoration: none; }
.assistente-progresso { height: 4px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.assistente-progresso span { display: block; height: 100%; width: 16%; border-radius: 999px; background: var(--tn-gold); transition: width 400ms var(--ease); }
.assistente-contador { font-size: 0.84rem; color: var(--muted); white-space: nowrap; padding: 0.45rem 0.85rem; border-radius: 999px; background: var(--surface-2); }
.assistente-contador strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.passo-assistente { display: none; animation: surgir 260ms var(--ease); }
.passo-assistente.atual { display: block; }
.passo-num { font: 600 0.72rem/1 var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 0.9rem; }
.passo-assistente h1 { font-size: clamp(2rem, 1.3rem + 2vw, 2.9rem); letter-spacing: -0.045em; margin-bottom: 0.6rem; }
.passo-ajuda { color: var(--muted); font-size: 1rem; margin-bottom: 1.75rem; }
.passo-nota { color: var(--muted); font-size: 0.82rem; margin-top: 1.25rem; }
.opcoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.65rem; }
.opcoes-ufs { grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); }
.opcoes-lista { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); max-height: 26rem; overflow-y: auto; padding: 0.15rem; margin-top: 1rem; }
.opcao {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; text-align: left; cursor: pointer; width: 100%;
  padding: 1rem 1.1rem; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink);
  font: inherit; transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease), transform 140ms var(--ease), background-color 140ms;
}
.opcao:hover { border-color: var(--ink); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.opcao strong { font-size: 0.98rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.opcao span { font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.opcao.escolhida { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); background: var(--bg-soft); }
.opcoes-ufs .opcao { align-items: center; text-align: center; padding: 0.85rem 0.5rem; }
.opcoes-ufs .opcao strong { font-size: 1.05rem; }
.opcao-todos { margin-top: 0.65rem; flex-direction: row; justify-content: center; border-style: dashed; color: var(--ink-2); font-weight: 550; padding: 0.85rem 1rem; }
.opcao-todos:hover { border-style: solid; }
.opcao-check { position: relative; padding-right: 3rem; }
.opcao-check input { position: absolute; top: 1.05rem; right: 1rem; width: 1.2rem; height: 1.2rem; accent-color: var(--ink); margin: 0; }
.opcao-check:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); background: var(--bg-soft); }
.opcoes-check { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.campo-busca-grande { max-width: none; display: block; }
.campo-busca-grande input { min-height: 3rem; font-size: 1rem; padding-left: 2.6rem; border-radius: 999px; }
.campo-busca-grande .ico { left: 1rem; }
.input-grande { font-size: 1.15rem; min-height: 3.3rem; padding: 0.75rem 1.1rem; border-radius: var(--r-md); }
.passo-nav { display: flex; gap: 0.6rem; margin-top: 1.75rem; }
.resumo-escolhas { margin-top: 1.25rem; padding: 1.25rem 1.4rem; border-radius: var(--r-lg); background: var(--surface-2); }
.resumo-total { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.resumo-total strong { font: 700 2.2rem/1 var(--font-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.resumo-total span { color: var(--muted); }
.resumo-escolhas p { margin: 0.6rem 0 0; }
.assistente-voltar { margin-top: 2rem; }
@media (max-width: 640px) {
  .assistente-topo { grid-template-columns: 1fr auto; }
  .assistente-progresso { grid-column: 1 / -1; grid-row: 2; }
}

/* Página da lista */
.lista-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.lista-total { display: flex; flex-direction: column; }
.lista-total strong { font: 700 2.4rem/1 var(--font-display); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.lista-total span { color: var(--muted); font-size: 0.85rem; margin-top: 0.3rem; }
.lista-situacao { display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start; flex: 1 1 14rem; }
.lista-situacao .ico { width: 12px; height: 12px; }
.segmentos-escolhidos { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
.segmentos-escolhidos .chip { background: var(--btn-bg); color: var(--btn-fg); padding: 0.4rem 0.4rem 0.4rem 0.85rem; font-weight: 550; }
.segmentos-escolhidos .chip button { color: inherit; opacity: 0.7; }
.segmentos-escolhidos .chip button:hover { opacity: 1; background: rgba(255, 255, 255, 0.15); }
.segmentos-escolhidos .chip-fora { background: var(--warn-bg); color: var(--warn); }
.passo-sub { font: 650 0.7rem/1 var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 1.4rem 0 0; }
.opcao.opcao-fora { border-style: dashed; }
.opcao.opcao-fora span { color: var(--warn); }
.passo-nav .btn[disabled] { opacity: 0.35; }

/* Importar planilha: 3 passos */
.passos-importar { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); align-items: start; }
.passos-importar > li { position: relative; padding-top: 1.75rem; }
.passos-importar > li + li { margin-top: 0; }
.passos-importar h2 { font-size: 1.15rem; letter-spacing: -0.025em; margin: 0.9rem 0 0.4rem; }
.passos-importar p { color: var(--ink-2); font-size: 0.9rem; }
.passo-bolinha { width: 2rem; height: 2rem; border-radius: 999px; display: grid; place-items: center; background: var(--btn-bg); color: var(--tn-gold); font: 700 0.85rem/1 var(--font); }
.passos-importar form .btn { width: 100%; }
.tarefa-acoes { display: flex; align-items: center; gap: 0.35rem; flex: none; }
.tarefa-acoes form { margin: 0; }
.minhas-listas li { display: flex; align-items: center; gap: 0.5rem; border-bottom: 1px solid var(--border); }
.minhas-listas li:last-child { border-bottom: 0; }
.minhas-listas li .minha-lista { flex: 1; min-width: 0; border-bottom: 0; margin-right: 0; }
.minha-lista-apagar { margin: 0; flex: none; }
.minha-lista-apagar .icon-btn { opacity: 0.55; }
.minhas-listas li:hover .minha-lista-apagar .icon-btn, .minha-lista-apagar .icon-btn:focus-visible { opacity: 1; }
.passos-importar { align-items: stretch; }
.passos-importar > li.card + li.card { margin-top: 0; }
.passos-importar > li { display: flex; flex-direction: column; min-width: 0; }
.passos-importar > li > .btn { align-self: flex-start; margin-top: auto; }
.passos-importar input[type="file"] { width: 100%; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1100px) { .passos-importar { grid-template-columns: 1fr 1fr 1.25fr; } }
.opcao-config { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.9rem 1rem; border-radius: var(--r-md); background: var(--surface-2); cursor: pointer; margin: 0 0 1rem; }
.opcao-config input { width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; accent-color: var(--ink); flex: none; }
.opcao-config strong { display: block; font-size: 0.9rem; color: var(--ink); }
.opcao-config small { display: block; color: var(--muted); font-size: 0.8rem; font-weight: 400; margin-top: 0.2rem; line-height: 1.45; }

/* =====================================================================
   Agendar e ganhar: janela e quadro da reunião
   ===================================================================== */
.dialogo { border: 0; padding: 0; border-radius: var(--r-xl); width: min(40rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); }
.dialogo::backdrop { background: rgba(0, 0, 0, 0.35); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.dialogo[open] { animation: surgir 200ms var(--ease); }
.dialogo-corpo { padding: 1.6rem 1.75rem 1.5rem; }
.dialogo-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; }
.dialogo-topo h2 { font-size: 1.6rem; letter-spacing: -0.035em; margin: 0; }
.dialogo-topo .eyebrow { margin-bottom: 0.5rem; }
.dialogo .grid { gap: 0 1rem; }
.dialogo-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.dialogo-rodape small { display: block; max-width: 26rem; }
.reuniao { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem 1.5rem; align-items: start; padding: 1.4rem 1.6rem;
  border-radius: var(--r-lg); border: 1px solid color-mix(in srgb, var(--tn-gold) 45%, transparent); background: color-mix(in srgb, var(--tn-gold) 7%, var(--surface)); }
.reuniao-passada { border-color: var(--border); background: var(--surface); }
.reuniao-data { width: 4rem; border-radius: 0.9rem; overflow: hidden; text-align: center; background: var(--surface); box-shadow: var(--shadow); }
.reuniao-dia { display: block; font: 700 1.7rem/1 var(--font-display); padding: 0.55rem 0 0.25rem; letter-spacing: -0.03em; }
.reuniao-mes { display: block; font: 700 0.65rem/1 var(--font); letter-spacing: 0.14em; text-transform: uppercase; padding: 0.35rem 0; background: var(--btn-bg); color: var(--tn-gold); }
.reuniao-info h2 { font-size: 1.2rem; letter-spacing: -0.025em; margin: 0 0 0.35rem; }
.reuniao-info .eyebrow { margin-bottom: 0.5rem; }
.reuniao-info p { margin: 0 0 0.4rem; font-size: 0.88rem; }
.reuniao-local a { font-weight: 550; text-decoration: underline; text-decoration-color: var(--tn-gold); }
.reuniao-resumo { margin-top: 0.75rem; padding: 0.8rem 1rem; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); }
.reuniao-resumo .label { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 650; }
@media (max-width: 760px) { .reuniao { grid-template-columns: auto 1fr; } .reuniao-acoes { grid-column: 1 / -1; } }
.mini.reuniao-mini { color: var(--accent-text); font-weight: 600; }
.dialogo .grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.reuniao-acoes { display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; }
.reuniao-acoes .badge { justify-content: center; padding: 0.5rem; }

/* =====================================================================
   Agenda (calendário)
   ===================================================================== */
.agenda-topo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem; margin-bottom: 1rem; }
.agenda-topo h1 { margin: 0; }
.agenda-controles { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.agenda-nav { display: flex; align-items: center; gap: 0.35rem; }
.agenda-nav .icon-btn { font-size: 1.2rem; line-height: 1; text-decoration: none; }
.agenda-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.1rem; margin-bottom: 1rem; font-size: 0.8rem; color: var(--muted); }
.agenda-legenda i { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 3px; margin-right: 0.35rem; vertical-align: -0.05em; background: var(--cor-evento); }
.agenda-google, .agenda-google-ok { margin-left: auto; }
.agenda-google { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; color: var(--ink); padding: 0.4rem 0.8rem; border-radius: 999px; background: var(--surface-2); }
.agenda-google:hover { text-decoration: none; background: var(--surface-3); }
.agenda-google .ico { width: 15px; height: 15px; }
.tipo-reuniao { --cor-evento: #1a7f4b; }
.tipo-lembrete { --cor-evento: #b8901f; }
.tipo-atrasado { --cor-evento: #c0322b; }
.tipo-concluido { --cor-evento: #a1a1a6; }
.tipo-google { --cor-evento: #2563eb; }
.tipo-evento { --cor-evento: #7c3aed; }
.calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.calendario-cab { padding: 0.6rem 0.7rem; font: 600 0.68rem/1 var(--font); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--border); text-align: right; }
.calendario-dia { min-height: 7.5rem; padding: 0.4rem 0.45rem 0.5rem; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.calendario-dia:nth-child(7n) { border-right: 0; }
.calendario-dia.fora { background: var(--bg-soft); }
.calendario-dia.fora .calendario-num { color: var(--faint); }
.calendario-num { align-self: flex-end; width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border-radius: 999px; font-size: 0.82rem; font-weight: 600; color: var(--ink-2); }
.calendario-num:hover { background: var(--surface-2); text-decoration: none; }
.calendario-dia.hoje .calendario-num { background: var(--tn-gold); color: var(--on-accent, #0b0b0c); }
.cal-evento { display: flex; gap: 0.3rem; align-items: baseline; padding: 0.2rem 0.4rem; border-radius: 0.4rem; font-size: 0.72rem; line-height: 1.3; color: var(--ink);
  background: color-mix(in srgb, var(--cor-evento) 12%, transparent); border-left: 2px solid var(--cor-evento); min-width: 0; }
.cal-evento:hover { text-decoration: none; background: color-mix(in srgb, var(--cor-evento) 20%, transparent); }
.cal-evento b { font-weight: 650; color: var(--cor-evento); flex: none; font-variant-numeric: tabular-nums; }
.cal-evento span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-evento.tipo-concluido span { text-decoration: line-through; }
.cal-mais { font-size: 0.7rem; color: var(--muted); padding-left: 0.4rem; font-weight: 600; }
.semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.6rem; }
.semana-dia { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 0.75rem; min-height: 14rem; display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.semana-dia header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.25rem; }
.semana-dia header span { font: 600 0.68rem/1 var(--font); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.semana-dia header strong { font: 700 1.4rem/1 var(--font-display); letter-spacing: -0.03em; }
.semana-dia.hoje { border-color: var(--tn-gold); box-shadow: 0 0 0 1px var(--tn-gold); }
.semana-dia.hoje header strong { color: var(--accent-text); }
.semana-evento { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.5rem 0.6rem; border-radius: 0.6rem; color: var(--ink);
  background: color-mix(in srgb, var(--cor-evento) 10%, transparent); border-left: 3px solid var(--cor-evento); min-width: 0; }
.semana-evento:hover { text-decoration: none; background: color-mix(in srgb, var(--cor-evento) 18%, transparent); }
.semana-hora { font-size: 0.7rem; font-weight: 650; color: var(--cor-evento); font-variant-numeric: tabular-nums; }
.semana-evento strong { font-size: 0.8rem; line-height: 1.3; overflow-wrap: anywhere; }
.semana-sub { font-size: 0.72rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.semana-vazio { color: var(--faint); font-size: 0.78rem; margin: 0.5rem 0 0; }
@media (max-width: 900px) {
  .semana { grid-template-columns: 1fr; }
  .semana-dia { min-height: 0; }
  .calendario-dia { min-height: 4.5rem; }
  .cal-evento span { display: none; }
}
.fechado-em .ico { width: 14px; height: 14px; vertical-align: -0.15em; }
.reuniao-vazia { grid-template-columns: auto 1fr; border-style: dashed; background: var(--surface); }
.reuniao-vazia .reuniao-dia { color: var(--faint); }
.reuniao-form { display: grid; grid-template-columns: minmax(12rem, 1.2fr) minmax(8rem, 0.8fr) minmax(12rem, 1.6fr) auto; gap: 0 0.75rem; align-items: end; margin-top: 0.75rem; }
.reuniao-form .field { margin-bottom: 0; }
@media (max-width: 1000px) { .reuniao-form { grid-template-columns: 1fr 1fr; } .reuniao-form-link { grid-column: 1 / -1; } }
.filters { align-items: start; }
.senha-provisoria { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1rem 2rem; align-items: center; padding: 1.25rem 1.5rem; margin-bottom: 1.25rem;
  border-radius: var(--r-lg); background: var(--warn-bg); border: 1px solid color-mix(in srgb, var(--tn-gold) 40%, transparent); }
.senha-provisoria p { margin: 0; color: var(--ink-2); font-size: 0.9rem; }
.senha-provisoria dl { margin: 0; display: grid; gap: 0.4rem; }
.senha-provisoria dl > div { display: grid; grid-template-columns: 8.5rem 1fr; align-items: center; gap: 0.75rem; }
.senha-provisoria dt { color: var(--muted); font-size: 0.8rem; }
.senha-provisoria dd { margin: 0; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.senha-provisoria code { font-size: 0.95rem; padding: 0.3rem 0.6rem; background: var(--surface); border: 1px solid var(--border); }
@media (max-width: 760px) { .senha-provisoria { grid-template-columns: 1fr; } }
/* Avisos: texto corrido (negrito no meio não vira coluna); bolinha posicionada à esquerda */
.alert { display: block; position: relative; padding-left: 2rem; }
.alert::before { position: absolute; left: 1rem; top: 1.25rem; margin: 0; }

/* Agendar e ganhar: como criar a reunião e convidados */
.modo-reuniao { border: 0; padding: 0; margin: 0 0 1.1rem; min-width: 0; }
.modo-reuniao legend { font-size: 0.88rem; font-weight: 550; color: var(--ink); margin-bottom: 0.45rem; padding: 0; }
.modo-opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.modo-opcao { position: relative; display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.85rem 0.95rem; border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; background: var(--bg); transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease), background 150ms var(--ease); }
.modo-opcao:hover { border-color: var(--border-strong); }
.modo-opcao input { width: 1.05rem; height: 1.05rem; margin: 0.15rem 0 0; accent-color: var(--ink); flex: none; }
.modo-opcao strong { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; color: var(--ink); }
.modo-opcao strong .ico { width: 1rem; height: 1rem; }
.modo-opcao small { display: block; color: var(--muted); font-size: 0.78rem; line-height: 1.45; margin-top: 0.25rem; }
.modo-opcao:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); background: var(--bg-soft); }
.modo-opcao.indisponivel { cursor: not-allowed; opacity: 0.55; }
.modo-opcao.indisponivel:hover { border-color: var(--border); }
.aviso-google { display: flex; gap: 0.9rem; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 0.6rem; padding: 0.85rem 1rem; border-radius: var(--r-md); background: var(--warn-bg); color: var(--warn); font-size: 0.85rem; line-height: 1.45; }
.aviso-google p { margin: 0; flex: 1 1 16rem; }
.aviso-google strong { color: inherit; }
.convidados { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; min-height: 3rem; padding: 0.45rem 0.55rem; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg); cursor: text; transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease); }
.convidados:focus-within { border-color: var(--tn-gold); box-shadow: 0 0 0 4px var(--ring); }
.convidados.com-erro { border-color: var(--err); }
.convidados input[type="email"] { flex: 1 1 12rem; min-width: 8rem; border: 0; outline: 0; box-shadow: none; padding: 0.35rem 0.3rem; background: transparent; font: inherit; }
.convidados input[type="email"]:focus, .convidados input[type="email"]:hover { box-shadow: none; border: 0; }
.chip-atende { background: var(--ok-bg); color: var(--ok); padding-right: 0.75rem; }
.chip-atende .ico { width: 0.9rem; height: 0.9rem; }
.chip-atende em { font-style: normal; font-size: 0.72rem; opacity: 0.8; }
.chip-atende[hidden] { display: none; }
.sugestao-convidado { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.5rem; padding: 0.35rem 0.75rem; border: 1px dashed var(--border); border-radius: 999px; background: transparent; color: var(--ink-2); font: inherit; font-size: 0.8rem; cursor: pointer; }
.sugestao-convidado:hover { border-style: solid; color: var(--ink); }
.sugestao-convidado span { color: var(--muted); }
.sugestao-convidado .ico { width: 0.85rem; height: 0.85rem; }
.sugestao-convidado[hidden] { display: none; }
.reuniao-convidados { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin: 0.5rem 0 0; }
.reuniao-convidados .label { margin-right: 0.25rem; }
.reuniao-convidados .chip { padding-right: 0.75rem; }
@media (max-width: 640px) { .modo-opcoes { grid-template-columns: 1fr; } }

/* Calendário: novo evento */
.calendario-dia-topo { display: flex; align-items: center; justify-content: space-between; gap: 0.25rem; }
.calendario-dia-topo .calendario-num { margin-left: auto; }
.dia-novo { width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; opacity: 0; transition: opacity 150ms var(--ease), background 150ms var(--ease); }
.dia-novo .ico { width: 0.9rem; height: 0.9rem; }
.dia-novo:hover { background: var(--surface-2); color: var(--ink); }
.dia-novo:focus-visible, .calendario-dia:hover .dia-novo, .semana-dia:hover .dia-novo { opacity: 1; }
@media (hover: none) { .dia-novo { opacity: 0.6; } }
.semana-dia header { align-items: center; gap: 0.3rem; }
.semana-dia header strong { margin-left: auto; }
.evento-pagina { max-width: 44rem; }
.evento-cabecalho { display: flex; gap: 1.25rem; align-items: flex-start; }
.evento-detalhes { display: grid; gap: 0.45rem; margin: 0.75rem 0 0; font-size: 0.92rem; color: var(--ink-2); }
.evento-detalhes .chip { padding-right: 0.75rem; }

/* Funil: configuração do Agendar e ganhar */
.config-agendar { margin: -0.4rem 0 1rem; padding: 1rem 1rem 0.4rem; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--bg); }
.config-agendar[hidden] { display: none; }
.config-agendar .eyebrow { margin-bottom: 0.6rem; }
.config-agendar .help { font-size: 0.78rem; color: var(--muted); line-height: 1.5; margin: -0.3rem 0 0.7rem; }

/* Funil: novo card (busca de empresa) */
#dialogo-novo-card .campo-busca { display: flex; width: 100%; max-width: none; }
#dialogo-novo-card .campo-busca input { width: 100%; }
.busca-resultados { display: grid; gap: 0.3rem; margin-top: 0.5rem; max-height: 16rem; overflow-y: auto; }
.busca-resultados:empty { display: none; }
.resultado { display: grid; gap: 0.1rem; text-align: left; width: 100%; padding: 0.6rem 0.8rem; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg); color: var(--ink); font: inherit; cursor: pointer; transition: border-color 150ms var(--ease), background 150ms var(--ease); }
.resultado:hover { border-color: var(--border-strong); text-decoration: none; }
.resultado strong { font-size: 0.88rem; font-weight: 600; }
.resultado small { font-size: 0.76rem; color: var(--muted); }
.resultado[aria-selected="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); background: var(--bg-soft); }
.resultado.ja-no-funil { border-style: dashed; opacity: 0.75; }
.busca-vazia { margin: 0.4rem 0 0; font-size: 0.82rem; color: var(--muted); }
.ja-tem-card { margin-top: 0.6rem; padding: 0.85rem 1rem; border-radius: var(--r-md); background: var(--warn-bg); color: var(--warn); font-size: 0.86rem; }
.ja-tem-card[hidden] { display: none; }
.ja-tem-card p { margin: 0 0 0.6rem; }
.ja-tem-card .actions { margin: 0; gap: 0.5rem; }

/* Contato provável do dono (veio do cadastro do CNPJ) */
.contato-provavel { display: flex; gap: 0.45rem; align-items: flex-start; margin: 0.5rem 0 0; padding: 0.5rem 0.7rem; border-radius: var(--r-sm); background: var(--warn-bg); color: var(--warn); font-size: 0.78rem; line-height: 1.45; }
.contato-provavel .ico { width: 0.95rem; height: 0.95rem; flex: none; margin-top: 0.1rem; }
.contato-provavel strong { color: inherit; }
.opcao-destaque { border-color: var(--tn-gold); }
.dono-tag { display: inline-block; margin: 0.15rem 0 0.35rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--ok-bg); color: var(--ok); font-size: 0.7rem; font-weight: 600; }

/* =============================================================================
   Anúncios: Integrações, Meta Ads, Google Ads e Instagram
   ============================================================================= */
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.texto-alerta { color: var(--warn); }
.texto-ok { color: var(--ok); }
.link-discreto { display: inline-flex; align-items: center; gap: 0.35rem; border: 0; background: none; padding: 0; color: var(--ink-2); font: inherit; font-size: 0.82rem; cursor: pointer; }
.link-discreto:hover { color: var(--ink); text-decoration: underline; }
.link-discreto .ico { width: 14px; height: 14px; }
.abas-integracao b { margin-left: 0.4rem; font-weight: 600; color: var(--muted); font-size: 0.75rem; }

.conectar-hero { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; padding: 1.6rem 1.75rem; border-radius: var(--r-xl); background: linear-gradient(135deg, #0b0b0c 0%, #1d1a12 60%, #3a2e0e 100%); color: #f5f5f7; }
.conectar-icone { display: flex; gap: 0.35rem; padding: 0.85rem; border-radius: var(--r-md); background: rgba(255, 255, 255, 0.08); color: var(--tn-gold-light, #e9c968); }
.conectar-icone .ico { width: 26px; height: 26px; }
.conectar-texto { flex: 1 1 18rem; }
.conectar-texto h2 { color: #fff; margin: 0 0 0.25rem; font-size: 1.25rem; }
.conectar-texto p { margin: 0; color: rgba(255, 255, 255, 0.72); font-size: 0.92rem; }
.btn-claro { background: #fff; color: #0b0b0c; border: 0; }
.btn-claro:hover { background: #f1f1f3; color: #0b0b0c; text-decoration: none; }
.btn-claro[disabled] { opacity: 0.55; }

.conexao-topo { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.75rem; }
.conexao-icone { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--r-md); background: var(--surface-2); color: var(--ink); flex: none; }
.conexao-icone .ico { width: 20px; height: 20px; }
.conexao-nome { flex: 1; min-width: 0; }
.conexao-nome h2 { margin: 0; font-size: 1.05rem; }
.conexao-nome p { margin: 0.15rem 0 0; font-size: 0.82rem; }
.contas-lista { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.contas-cab { padding: 0.55rem 1rem; background: var(--bg-soft); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.conta-linha { display: flex; align-items: center; gap: 0.85rem; padding: 0.75rem 1rem; border-top: 1px solid var(--border); }
.conta-tipo { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); flex: none; overflow: hidden; }
.conta-tipo img { width: 100%; height: 100%; object-fit: cover; }
.conta-tipo .ico { width: 16px; height: 16px; }
.conta-info { flex: 1; min-width: 0; display: grid; }
.conta-info strong { font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conta-info .muted { font-size: 0.78rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.conta-acoes { display: flex; gap: 0.15rem; }
.icon-btn.favorita { color: var(--tn-gold); }
.icon-btn.favorita svg { fill: currentColor; }
.conexao-rodape { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.9rem; }
.conexao-rodape .link-discreto { margin-right: auto; }
.campo-busca-cheio { max-width: none; width: 100%; display: flex; margin-top: 0.75rem; }
.campo-busca-cheio input { width: 100%; }
.contas-escolha-topo { display: flex; justify-content: space-between; align-items: center; margin: 0.75rem 0 0.4rem; font-size: 0.85rem; color: var(--ink-2); }
.contas-escolha { max-height: 22rem; overflow-y: auto; display: grid; gap: 0.35rem; }
.contas-escolha .contas-cab { background: none; padding: 0.6rem 0.1rem 0.2rem; }
.conta-escolha { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.7rem 0.85rem; border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; }
.conta-escolha[hidden] { display: none; }
.conta-escolha input { width: 1.05rem; height: 1.05rem; margin-top: 0.15rem; accent-color: var(--ink); flex: none; }
.conta-escolha strong { display: block; font-size: 0.9rem; }
.conta-escolha small { display: block; color: var(--muted); font-size: 0.76rem; }
.conta-escolha:has(input:checked:not([disabled])) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); background: var(--bg-soft); }
.conta-escolha.ja-ativa { opacity: 0.6; cursor: default; }
.uso-contas { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.uso-numeros { display: flex; gap: 2rem; }
.uso-numeros div { display: grid; justify-items: center; gap: 0.15rem; }
.uso-numeros .ico { width: 18px; height: 18px; color: var(--ink-2); }
.uso-numeros strong { font: 700 1.6rem/1 var(--font-display); }
.uso-numeros span { font-size: 0.78rem; color: var(--muted); }

.painel-topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.painel-titulo { display: flex; align-items: center; gap: 0.6rem; margin: 0; }
.painel-titulo .ico { width: 1.6rem; height: 1.6rem; }
.painel-filtros { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.painel-filtros select { min-width: 12rem; }
.periodo-livre { display: inline-flex; gap: 0.35rem; align-items: center; }
.periodo-livre[hidden] { display: none; }
.painel-barra { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem; }
.painel-botoes { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.popover-painel.organizar { display: grid; gap: 0.4rem; min-width: 15rem; right: 0; left: auto; }

.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: 0.85rem; }
.kpi { position: relative; padding: 1.1rem 1.2rem 1rem; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); display: grid; gap: 0.35rem; }
.kpi-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; font-size: 0.85rem; color: var(--ink-2); }
.kpi-icone { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--r-md); background: rgba(210, 168, 51, 0.12); color: var(--accent-text); flex: none; }
.kpi-icone .ico { width: 17px; height: 17px; }
.kpi-valor { font: 700 1.55rem/1.15 var(--font-display); letter-spacing: -0.02em; color: var(--ink); }
.kpi-sub { font-size: 0.76rem; color: var(--muted); }
.kpi-var { font-size: 0.76rem; font-weight: 600; color: var(--muted); }
.kpi-var.bom { color: var(--ok); }
.kpi-var.ruim { color: var(--err); }

.abas-metrica { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.abas-metrica a { padding: 0.3rem 0.7rem; border-radius: 999px; font-size: 0.78rem; color: var(--ink-2); background: var(--surface-2); }
.abas-metrica a:hover { text-decoration: none; color: var(--ink); }
.abas-metrica a.ativa { background: var(--btn-bg); color: var(--btn-fg); }
.grafico { position: relative; margin-top: 0.5rem; }
.grafico svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafico .grade { stroke: var(--border); stroke-width: 1; }
.grafico .eixo { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.grafico .area { fill: rgba(210, 168, 51, 0.12); }
.grafico .linha { fill: none; stroke: var(--tn-gold); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafico .guia { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.grafico .ponto { fill: var(--tn-gold); stroke: var(--surface); stroke-width: 2; }
.grafico .alvo { fill: transparent; cursor: crosshair; }
.grafico [hidden] { display: none; }
.grafico-dica { position: absolute; pointer-events: none; display: grid; gap: 0.1rem; padding: 0.45rem 0.7rem; border-radius: var(--r-sm); background: var(--surface); box-shadow: var(--shadow-md); font-size: 0.78rem; white-space: nowrap; }
.grafico-dica span { color: var(--muted); }
.grafico-dica strong { color: var(--ink); font-size: 0.92rem; }
.grafico-dica[hidden] { display: none; }
.vazio-grafico { padding: 3rem 1rem; text-align: center; color: var(--muted); }
.tabela-rolar { overflow-x: auto; }
.tabela-simples { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.tabela-simples th { text-align: left; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tabela-simples td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); }

.busca-tabela .campo-busca { max-width: 18rem; }
.tabela-campanhas { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.tabela-campanhas th { text-align: left; font-size: 0.68rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); padding: 0.6rem 0.65rem; border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--bg-soft); }
.tabela-campanhas th a { color: inherit; }
.tabela-campanhas td { padding: 0.65rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tabela-campanhas td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabela-campanhas tr.pausada td { color: var(--muted); }
.tabela-campanhas tfoot td { font-weight: 600; background: var(--bg-soft); border-bottom: 0; }
.col-campanha { min-width: 16rem; }
.col-campanha strong { display: block; font-weight: 600; color: var(--ink); }
.col-campanha small { color: var(--muted); font-size: 0.74rem; }
.chave { position: relative; width: 2.4rem; height: 1.35rem; border: 0; border-radius: 999px; background: var(--border-strong); cursor: pointer; padding: 0; transition: background 150ms var(--ease); }
.chave i { position: absolute; top: 0.15rem; left: 0.15rem; width: 1.05rem; height: 1.05rem; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: transform 150ms var(--ease); }
.chave.ligada { background: var(--ok); }
.chave.ligada i { transform: translateX(1.05rem); }
.orcamento-form { display: inline-flex; align-items: center; gap: 0.3rem; }
.orcamento-form input { width: 6.5rem; min-height: 2rem; padding: 0.3rem 0.5rem; font-size: 0.84rem; }

.funil-campanha { display: flex; justify-content: center; margin-bottom: 0.75rem; }
.funil-campanha select { min-width: 18rem; }
.funil-etapas { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; align-items: flex-end; }
.funil-etapa-escolha { display: grid; gap: 0.3rem; justify-items: center; min-width: 11rem; }
.funil-etapa-escolha label { font-size: 0.82rem; font-weight: 600; color: var(--ink-2); }
.funil-escolha-linha { display: flex; gap: 0.25rem; align-items: center; }
.funil-mais { width: 100%; display: flex; justify-content: center; }
.funil-visual { display: grid; justify-items: center; gap: 0.35rem; margin-top: 1.25rem; }
.funil-investido { padding: 0.6rem 1.2rem; border-radius: var(--r-md); background: var(--btn-bg); color: var(--btn-fg); font-weight: 600; margin-bottom: 0.6rem; }
.funil-barra-etapa { display: grid; justify-items: center; gap: 0.1rem; padding: 0.9rem 1rem; border-radius: var(--r-md); color: #fff; text-align: center; min-width: 14rem; }
.funil-barra-etapa span { font-size: 0.85rem; opacity: 0.9; }
.funil-barra-etapa strong { font: 700 1.6rem/1.1 var(--font-display); }
.funil-barra-etapa small { font-size: 0.78rem; opacity: 0.85; }
.funil-barra-etapa.nivel-1 { background: #7a5f14; }
.funil-barra-etapa.nivel-2 { background: #604a10; }
.funil-barra-etapa.nivel-3 { background: #46360b; }
.funil-barra-etapa.nivel-4 { background: #302508; }
.funil-barra-etapa.nivel-5, .funil-barra-etapa.nivel-6 { background: #1c1606; }
.funil-barra-etapa small { opacity: 1; color: rgba(255, 255, 255, 0.82); }
.funil-taxa { font-size: 0.82rem; font-weight: 600; color: var(--ink-2); }

.anuncios-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.anuncio { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); display: flex; flex-direction: column; }
.anuncio.pausado { opacity: 0.7; }
.anuncio-midia { aspect-ratio: 1; background: var(--surface-2); }
.anuncio-midia img { width: 100%; height: 100%; object-fit: cover; display: block; }
.anuncio-texto-ad { padding: 1rem; background: var(--bg-soft); display: grid; gap: 0.2rem; border-bottom: 1px solid var(--border); }
.anuncio-texto-ad small { color: var(--muted); font-size: 0.72rem; }
.anuncio-texto-ad strong { color: #1a0dab; font-size: 0.92rem; font-weight: 500; }
.anuncio-texto-ad p { margin: 0.2rem 0 0; font-size: 0.8rem; color: var(--ink-2); }
.anuncio-corpo { padding: 0.9rem 1rem 1rem; display: grid; gap: 0.6rem; }
.anuncio-cab { display: flex; justify-content: space-between; gap: 0.5rem; align-items: flex-start; }
.anuncio-cab strong { display: block; font-size: 0.86rem; }
.anuncio-cab small { display: block; color: var(--muted); font-size: 0.74rem; }
.anuncio-numeros { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 0.75rem; margin: 0; }
.anuncio-numeros dt { font-size: 0.7rem; color: var(--muted); }
.anuncio-numeros dd { margin: 0; font-weight: 600; font-size: 0.9rem; }

.publico-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.5rem; }
.publico-grade h3 { font-size: 0.9rem; margin-bottom: 0.6rem; }
.barra-h { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: 0.6rem; align-items: center; font-size: 0.82rem; margin-bottom: 0.45rem; }
.barra-h span { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-h b { font-weight: 600; font-variant-numeric: tabular-nums; }
.barra-trilho { height: 0.55rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.barra-trilho i { display: block; height: 100%; border-radius: 999px; background: var(--tn-gold); }

.meta-numeros { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.meta-numeros div { display: grid; gap: 0.15rem; }
.meta-numeros span { font-size: 0.78rem; color: var(--muted); }
.meta-numeros strong { font: 700 1.2rem/1.2 var(--font-display); }
.meta-trilho { position: relative; height: 0.7rem; border-radius: 999px; background: var(--surface-2); margin: 0.5rem 0; }
.meta-trilho i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--tn-gold); }
.meta-trilho b { position: absolute; top: -0.25rem; bottom: -0.25rem; width: 2px; background: var(--ink); }

.ig-perfil { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.ig-foto { width: 7.5rem; height: 7.5rem; border-radius: 999px; object-fit: cover; border: 3px solid var(--surface-2); flex: none; }
.ig-foto-vazia { display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.ig-dados { flex: 1 1 18rem; display: grid; gap: 0.25rem; }
.ig-dados h2 { margin: 0; }
.ig-bio { margin: 0.4rem 0 0; font-size: 0.9rem; color: var(--ink-2); }
.ig-numeros { display: flex; gap: 2rem; margin: 0; padding-left: 1.5rem; border-left: 1px solid var(--border); }
.ig-numeros div { display: grid; justify-items: center; }
.ig-numeros dd { margin: 0; font: 700 1.7rem/1 var(--font-display); }
.ig-numeros dt { font-size: 0.8rem; color: var(--muted); }
.ranking-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 0.85rem; }
.ranking { display: flex; gap: 0.9rem; padding: 0.85rem; border: 1px solid var(--border); border-radius: var(--r-lg); color: var(--ink); }
.ranking:hover { text-decoration: none; border-color: var(--border-strong); }
.ranking img { width: 5.5rem; height: 5.5rem; border-radius: var(--r-md); object-fit: cover; flex: none; }
.ranking-titulo { display: flex; align-items: center; gap: 0.35rem; font-weight: 600; font-size: 0.92rem; }
.ranking-titulo .ico { width: 15px; height: 15px; color: var(--accent-text); }
.ranking p { margin: 0.25rem 0; font-size: 0.8rem; color: var(--ink-2); }
.ranking small { color: var(--muted); font-size: 0.76rem; }
.ranking small b { color: var(--ink); }
.posts-filtros { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; margin-bottom: 0.6rem; }
.posts-filtros .muted { font-size: 0.8rem; margin-right: 0.25rem; min-width: 5.5rem; }
.chip-filtro { padding: 0.3rem 0.75rem; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: 0.8rem; }
.chip-filtro:hover { text-decoration: none; color: var(--ink); }
.chip-filtro.ativo { background: var(--btn-bg); color: var(--btn-fg); }
.posts-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.post { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; }
.post-midia { position: relative; aspect-ratio: 4 / 5; background: var(--surface-2); }
.post-midia img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.post-play .ico { width: 3rem; height: 3rem; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.4)); }
.post-corpo { padding: 0.9rem 1rem 1rem; display: grid; gap: 0.5rem; }
.post-corpo p { margin: 0; font-size: 0.84rem; }
.post-numeros { margin: 0; display: grid; gap: 0.1rem; }
.post-numeros div { display: flex; justify-content: space-between; padding: 0.35rem 0; border-bottom: 1px solid var(--border); font-size: 0.82rem; }
.post-numeros dt { display: flex; align-items: center; gap: 0.4rem; color: var(--ink-2); }
.post-numeros dt .ico { width: 14px; height: 14px; color: var(--muted); }
.post-numeros dd { margin: 0; font-weight: 600; }
.badge-reels { background: #fde7ef; color: #b4235a; }
.badge-feed { background: #e6efff; color: #1f4fbf; }

@media (max-width: 720px) {
  .ig-numeros { padding-left: 0; border-left: 0; width: 100%; justify-content: space-around; }
  .painel-filtros select { min-width: 0; flex: 1 1 10rem; }
}
@media print {
  .sidebar, .painel-filtros, .painel-botoes, .abas-metrica, .busca-tabela, .funil-etapas, .funil-campanha,
  form .actions, .orcamento-form button, .chave, .messages, .topo-mobile { display: none !important; }
  .card, .kpi { break-inside: avoid; box-shadow: none; }
  body { background: #fff; }
}
.post-corpo .badge { justify-self: start; }

/* =============================================================================
   Painéis de anúncios (Meta, Google e Instagram) — visual de 2026-10
   ============================================================================= */
:root {
  --serie-1: #c9a227; --serie-2: #2f6fde; --serie-3: #1f9d6a; --serie-4: #c2417f; --serie-5: #7a55d6; --serie-6: #e07b28;
  --kpi-icone-bg: rgba(210, 168, 51, 0.12); --kpi-icone: #9a7613;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --serie-1: #e3c36a; --serie-2: #6aa0ff; --serie-3: #4fd19a; --serie-4: #f07ab0; --serie-5: #a98bff; --serie-6: #ffa25c;
    --kpi-icone-bg: rgba(227, 195, 106, 0.13); --kpi-icone: var(--tn-gold-light);
  }
}
:root[data-theme="dark"] {
  --serie-1: #e3c36a; --serie-2: #6aa0ff; --serie-3: #4fd19a; --serie-4: #f07ab0; --serie-5: #a98bff; --serie-6: #ffa25c;
  --kpi-icone-bg: rgba(227, 195, 106, 0.13); --kpi-icone: var(--tn-gold-light);
}

.ads { display: grid; gap: 1.1rem; }
.ads > * { min-width: 0; }
.ads .mt-1 { margin-top: 0; }

/* Topo: título, conta, datas e comparação */
.ads-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; }
.ads-titulo { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
.ads-titulo h1 { margin: 0; font: 700 clamp(1.7rem, 2.6vw, 2.25rem)/1.05 var(--font-display); letter-spacing: -0.04em; }
.ads-sub { margin: 0.3rem 0 0; color: var(--muted); font-size: 0.86rem; }
.ads-logo { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 0.95rem; background: var(--surface-2); color: var(--ink); flex: none; }
.ads-logo .ico { width: 24px; height: 24px; }
.ads-logo-meta { color: #0866ff; }
.ads-logo-google { color: #1a73e8; }
.ads-logo-instagram { color: #d6249f; }
.ads-controles { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }

.seletor { position: relative; }
.seletor-botao { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2.75rem; padding: 0.45rem 0.9rem;
  border: 1px solid var(--border-strong); border-radius: 0.85rem; background: var(--surface); color: var(--ink);
  font: inherit; font-size: 0.88rem; cursor: pointer; box-shadow: var(--shadow-sm); transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease); }
.seletor-botao:hover { border-color: var(--ink-2); }
.seletor-botao[aria-expanded="true"] { border-color: var(--tn-gold); box-shadow: 0 0 0 3px var(--ring); }
.seletor-botao strong { font-weight: 600; white-space: nowrap; }
.seletor-botao .ico { width: 16px; height: 16px; color: var(--muted); }
.seletor-conta { flex-direction: row; text-align: left; }
.seletor-rotulo { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; }
.seletor-pequeno { min-height: 2.25rem; font-size: 0.82rem; border-radius: 999px; }
.com-comparacao { border-color: var(--tn-gold); }
.com-comparacao strong { color: var(--accent-text); }

.pop { position: absolute; z-index: 40; top: calc(100% + 0.5rem); right: 0; min-width: 18rem; padding: 0.75rem;
  border-radius: 1rem; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.pop[hidden] { display: none; }
.pop { max-width: calc(100vw - 2rem); overflow: auto; }
.pop-conta { width: min(26rem, calc(100vw - 2rem)); }
.ads-controles .pop { left: 0; right: auto; }
.pop-conta .campo-busca, .pop-lista .campo-busca { max-width: none; display: block; margin-bottom: 0.5rem; }
.lista-contas, .lista-checks { list-style: none; margin: 0; padding: 0; max-height: 22rem; overflow-y: auto; }
.lista-contas a { display: grid; gap: 0.1rem; padding: 0.55rem 0.7rem; border-radius: 0.65rem; color: var(--ink); }
.lista-contas a:hover { background: var(--surface-2); text-decoration: none; }
.lista-contas a.ativo { background: var(--kpi-icone-bg); }
.lista-contas a strong { font-weight: 600; font-size: 0.9rem; }
.lista-contas a small { color: var(--muted); font-size: 0.76rem; }
.lista-vazia { padding: 0.75rem; color: var(--muted); font-size: 0.85rem; }
.lista-checks li { padding: 0.15rem 0.2rem; }
.lista-checks .check { padding: 0.4rem 0.5rem; border-radius: 0.55rem; font-weight: 500; font-size: 0.84rem; align-items: flex-start; }
.lista-checks .check:hover { background: var(--surface-2); }
.lista-checks li[hidden], .lista-contas li[hidden] { display: none; }
.pop-lista { width: min(26rem, calc(100vw - 2rem)); left: auto; }
.pop-rodape { display: flex; justify-content: space-between; gap: 0.5rem; padding-top: 0.6rem; margin-top: 0.4rem; border-top: 1px solid var(--border); }

.pop-datas { display: grid; grid-template-columns: 13rem auto; gap: 0.75rem; width: max-content; max-width: calc(100vw - 2rem); }
.datas-atalhos { display: grid; align-content: start; gap: 0.15rem; padding-right: 0.75rem; border-right: 1px solid var(--border); }
.datas-atalhos a { padding: 0.5rem 0.7rem; border-radius: 0.6rem; color: var(--ink); font-size: 0.86rem; }
.datas-atalhos a:hover { background: var(--surface-2); text-decoration: none; }
.datas-atalhos a.ativo { background: var(--btn-bg); color: var(--btn-fg); font-weight: 600; }
.datas-atalhos a.desativar { color: var(--err); }
.datas-atalhos a.desativar.ativo { background: var(--err-bg); color: var(--err); }
.datas-calendario { position: relative; min-width: 33rem; }
.cal-topo { position: absolute; inset: 0 0 auto 0; display: flex; justify-content: space-between; pointer-events: none; }
.cal-topo .cal-seta { pointer-events: auto; font-size: 1.3rem; }
.cal-meses { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.cal-mes strong { display: block; text-align: center; font-weight: 600; text-transform: capitalize; padding: 0.45rem 0 0.6rem; }
.cal-grade { display: grid; grid-template-columns: repeat(7, 2.2rem); gap: 0.15rem 0; justify-content: center; }
.cal-dia-semana { text-align: center; font-size: 0.7rem; color: var(--muted); padding-bottom: 0.3rem; }
.cal-dia { height: 2.2rem; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 0.84rem; cursor: pointer; border-radius: 0.55rem; }
.cal-dia:hover:not([disabled]) { background: var(--surface-2); }
.cal-dia[disabled] { color: var(--faint); cursor: default; }
.cal-dia.no-intervalo { background: var(--kpi-icone-bg); border-radius: 0; }
.cal-dia.inicio, .cal-dia.fim { background: var(--btn-bg); color: var(--btn-fg); font-weight: 600; border-radius: 0.55rem; }
.cal-dia.hoje:not(.inicio):not(.fim) { box-shadow: inset 0 0 0 1px var(--tn-gold); }
.cal-rodape { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 0.75rem; margin-top: 0.6rem; border-top: 1px solid var(--border); }
.cal-escolha { font-size: 0.84rem; color: var(--muted); }

.ads-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; }
.ads-botoes { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.ads-atualizado { color: var(--muted); font-size: 0.8rem; }

/* Seções que carregam depois */
.secao { position: relative; min-width: 0; }
.secao-carregando > * { opacity: 0.55; transition: opacity 200ms var(--ease); }
.secao-carregando::before { content: ""; position: absolute; z-index: 5; top: 0; left: 0; right: 0; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--tn-gold), transparent); background-size: 40% 100%; background-repeat: no-repeat;
  animation: barra-carregando 1.1s ease-in-out infinite; }
@keyframes barra-carregando { from { background-position: -40% 0; } to { background-position: 140% 0; } }
.esqueleto, .esq-bloco, .esq-linha, .esq-linha-tabela, .esq-circulo {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%); background-size: 400% 100%;
  animation: brilho 1.4s ease infinite; border-radius: 0.6rem; }
@keyframes brilho { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.kpi-ads.esqueleto { background: var(--surface); animation: none; display: grid; gap: 0.75rem; }
.esq-linha { display: block; height: 0.8rem; }
.esq-linha.curta { width: 45%; } .esq-linha.media { width: 60%; height: 0.65rem; } .esq-linha.grande { width: 70%; height: 1.8rem; }
.esq-bloco { height: 11rem; } .esq-bloco.alto { height: 18rem; }
.esq-linha-tabela { height: 2.6rem; margin-top: 0.5rem; }
.esq-circulo { width: 6rem; height: 6rem; border-radius: 999px; flex: none; }
.secao-erro { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0; }
.sob-demanda { display: grid; justify-items: center; gap: 0.5rem; padding: 2rem 1rem 2.4rem; text-align: center; color: var(--muted); }
.sob-demanda > .ico { width: 30px; height: 30px; color: var(--accent-text); }
.sob-demanda p { margin: 0 0 0.5rem; max-width: 30rem; font-size: 0.9rem; }

/* Cartões de métricas */
.kpis-ads { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr)); gap: 0.9rem; }
.kpi-ads { position: relative; display: grid; gap: 0.55rem; align-content: start; padding: 1.15rem 1.2rem 1.05rem; min-height: 8.4rem;
  border: 1px solid var(--border); border-radius: 1.15rem; background: var(--surface); box-shadow: var(--shadow); transition: box-shadow 200ms var(--ease), transform 200ms var(--ease); }
.kpi-ads:hover { box-shadow: var(--shadow-md); }
.kpi-ads-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
.kpi-ads-rotulo { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--ink-2); font-size: 0.86rem; font-weight: 500; }
.kpi-ads-icone { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 0.8rem; background: var(--kpi-icone-bg); color: var(--kpi-icone); flex: none; }
.kpi-ads-icone .ico { width: 20px; height: 20px; }
.kpi-ads-valor { font: 700 clamp(1.45rem, 2vw, 1.8rem)/1.1 var(--font-display); letter-spacing: -0.03em; color: var(--ink); }
.kpi-ads-var { font-size: 0.76rem; color: var(--muted); }
.kpi-ads-var b { font-weight: 600; margin-right: 0.25rem; }
.kpi-ads-var.bom b { color: var(--ok); }
.kpi-ads-var.ruim b { color: var(--err); }
.dica-info { position: relative; display: inline-grid; place-items: center; color: var(--faint); cursor: help; }
.dica-info .ico { width: 13px; height: 13px; }
.dica-info::after { content: attr(data-tooltip); position: absolute; z-index: 30; left: 50%; bottom: calc(100% + 0.45rem); transform: translateX(-50%);
  width: max-content; max-width: 15rem; padding: 0.45rem 0.65rem; border-radius: 0.55rem; background: var(--tn-black); color: #fff;
  font-size: 0.74rem; font-weight: 400; line-height: 1.35; opacity: 0; pointer-events: none; transition: opacity 120ms var(--ease); white-space: normal; }
.dica-info:hover::after, .dica-info:focus::after { opacity: 1; }

/* Cartão de seção */
.ads-card { border-radius: 1.25rem; padding: 1.35rem 1.4rem; }
.ads-card h2 { font: 700 1.2rem/1.2 var(--font-display); letter-spacing: -0.02em; }
.ads-card h3 { font-size: 0.95rem; font-weight: 600; margin: 0 0 0.6rem; }
.card-head-ferramentas { align-items: center; }
.ferramentas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.select-pequeno { width: auto; max-width: 20rem; min-height: 2.25rem; padding: 0.3rem 2rem 0.3rem 0.85rem; border-radius: 999px; font-size: 0.82rem; background-color: var(--surface-2); border-color: transparent; }
.nota { margin: 0.6rem 0 0; font-size: 0.78rem; color: var(--muted); }
.vazio-grafico { padding: 2rem 0; text-align: center; color: var(--muted); }

.segmentado { display: inline-flex; flex-wrap: wrap; gap: 0.2rem; padding: 0.22rem; border-radius: 999px; background: var(--surface-2); }
.segmentado button { border: 0; background: transparent; color: var(--ink-2); font: inherit; font-size: 0.82rem; font-weight: 500; padding: 0.4rem 0.9rem; border-radius: 999px; cursor: pointer; }
.segmentado button:hover { color: var(--ink); }
.segmentado button.ativo { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-sm), 0 0 0 0.5px var(--border-strong); }
.segmentado[hidden] { display: none; }

.ads .chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ads .chip { border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); padding: 0.38rem 0.85rem; border-radius: 999px; font: inherit; font-size: 0.8rem; cursor: pointer; transition: all 150ms var(--ease); }
.ads .chip:hover { border-color: var(--border-strong); color: var(--ink); }
.ads .chip.ativo { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.ads .chips-pequenos .chip { font-size: 0.74rem; padding: 0.28rem 0.7rem; }
.ads .chips-pequenos .chip.ativo { background: var(--kpi-icone-bg); color: var(--accent-text); border-color: transparent; font-weight: 600; }

/* Gráfico */
.chips-metricas { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.4rem; }
.chip-metrica { display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  padding: 0.32rem 0.75rem; border-radius: 999px; font: inherit; font-size: 0.78rem; cursor: pointer; }
.chip-metrica:hover { color: var(--ink); border-color: var(--border-strong); }
.chip-metrica.ativo { color: var(--ink); font-weight: 600; border-color: var(--border-strong); background: var(--surface-2); }
.ponto-cor { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 999px; background: var(--serie-1); flex: none; }
.ponto-cor.serie-1 { background: var(--serie-1); } .ponto-cor.serie-2 { background: var(--serie-2); } .ponto-cor.serie-3 { background: var(--serie-3); }
.ponto-cor.serie-4 { background: var(--serie-4); } .ponto-cor.serie-5 { background: var(--serie-5); } .ponto-cor.serie-6 { background: var(--serie-6); }
.grafico-ads { position: relative; margin-top: 0.4rem; }
.grafico-ads svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafico-ads .grade { stroke: var(--border); stroke-width: 1; }
.grafico-ads .eixo { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.grafico-ads .linha { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.grafico-ads .linha-anterior { fill: none; stroke-width: 1.6; stroke-dasharray: 5 5; opacity: 0.55; }
.grafico-ads .area { opacity: 0.12; }
.grafico-ads .guia { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.grafico-ads .ponto { stroke: var(--surface); stroke-width: 2.5; }
.grafico-ads .alvo { fill: transparent; cursor: crosshair; }
.grafico-ads [hidden] { display: none; }
.grafico-ads .serie-1 { stroke: var(--serie-1); } .grafico-ads .serie-2 { stroke: var(--serie-2); } .grafico-ads .serie-3 { stroke: var(--serie-3); }
.grafico-ads .serie-4 { stroke: var(--serie-4); } .grafico-ads .serie-5 { stroke: var(--serie-5); } .grafico-ads .serie-6 { stroke: var(--serie-6); }
.grafico-ads .area.serie-1 { fill: var(--serie-1); stroke: none; }
.grafico-ads .ponto.serie-1 { fill: var(--serie-1); } .grafico-ads .ponto.serie-2 { fill: var(--serie-2); } .grafico-ads .ponto.serie-3 { fill: var(--serie-3); }
.grafico-ads .ponto.serie-4 { fill: var(--serie-4); } .grafico-ads .ponto.serie-5 { fill: var(--serie-5); } .grafico-ads .ponto.serie-6 { fill: var(--serie-6); }
.grafico-ads .grafico-dica { min-width: 11rem; gap: 0.3rem; padding: 0.6rem 0.75rem; border: 1px solid var(--border); }
.dica-dia { color: var(--muted); font-size: 0.74rem; font-weight: 600; }
.dica-linha { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.25rem 0.5rem; font-size: 0.8rem; }
.dica-linha span { color: var(--ink-2); }
.dica-linha strong { font-size: 0.86rem; color: var(--ink); }
.dica-linha small { grid-column: 2 / 4; color: var(--muted); font-size: 0.72rem; text-align: right; }
.legenda-grafico { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 0.75rem; font-size: 0.84rem; color: var(--ink-2); }
.legenda-grafico span { display: inline-flex; align-items: center; gap: 0.4rem; }
.traco-anterior { display: inline-block; width: 1.4rem; border-top: 2px dashed var(--serie-1); vertical-align: middle; margin-right: 0.3rem; }

/* Tabela de campanhas, conjuntos e anúncios */
.tabela-ferramentas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 0.85rem; }
.tabela-ferramentas .campo-busca { flex: 0 1 16rem; }
.contagem { font-size: 0.8rem; margin-left: auto; }
.tabela-ads { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.84rem; }
.tabela-ads th { text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600;
  padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--border); background: var(--surface); white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.tabela-ads th button { border: 0; background: transparent; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; padding: 0; }
.tabela-ads th button:hover { color: var(--ink); }
.tabela-ads th[aria-sort="descending"] button::after { content: " ↓"; color: var(--accent-text); }
.tabela-ads th[aria-sort="ascending"] button::after { content: " ↑"; color: var(--accent-text); }
.tabela-ads td { padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tabela-ads tbody tr[data-linha]:hover td { background: var(--bg-soft); }
.tabela-ads .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabela-ads tfoot td { font-weight: 600; border-bottom: 0; border-top: 1px solid var(--border-strong); background: var(--surface-2); }
.tabela-ads tfoot td:first-child { border-radius: 0.6rem 0 0 0.6rem; } .tabela-ads tfoot td:last-child { border-radius: 0 0.6rem 0.6rem 0; }
.tabela-ads .col-nome { min-width: 19rem; max-width: 28rem; position: sticky; left: 0; background: var(--surface); z-index: 1; }
.tabela-ads th.col-nome { z-index: 2; }
.tabela-ads tr.pausada td { color: var(--muted); }
.nome-celula { display: flex; align-items: center; gap: 0.65rem; }
.nome-celula > div { display: grid; gap: 0.15rem; min-width: 0; }
.nome-celula small { color: var(--muted); font-size: 0.74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-criativo { width: 2.4rem; height: 2.4rem; border-radius: 0.5rem; object-fit: cover; flex: none; background: var(--surface-2); }
.link-nivel { border: 0; background: transparent; padding: 0; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; text-align: left; }
.link-nivel:hover { color: var(--accent-text); text-decoration: underline; }
.status-ponto { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.76rem; color: var(--muted); }
.status-ponto::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--faint); }
.status-ponto.ativo { color: var(--ok); }
.status-ponto.ativo::before { background: var(--ok); }
.col-acoes { white-space: nowrap; }
.btn-analise { display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink);
  border-radius: 999px; padding: 0.32rem 0.7rem; font: inherit; font-size: 0.76rem; font-weight: 500; cursor: pointer; margin-right: 0.25rem; }
.btn-analise .ico { width: 14px; height: 14px; color: var(--accent-text); }
.btn-analise:hover { border-color: var(--tn-gold); }
.btn-analise.ativo { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.btn-analise.ativo .ico { color: var(--tn-gold-light); }
.ads .btn.ativo { background: var(--btn-bg); color: var(--btn-fg); }
.linha-expansao > td { padding: 0 0 0.9rem; background: var(--bg-soft); border-bottom: 1px solid var(--border); }
.linha-expansao [data-expansao] { position: sticky; left: 0; box-sizing: border-box; padding: 1rem 1.1rem 0.2rem; white-space: normal; }
.linha-expansao table th, .linha-expansao table td { position: static; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.linha-expansao .tabela-ads th { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.7rem; }
.expansao-conta { margin: 0 0 1rem; padding: 1rem 1.1rem; border-radius: 1rem; background: var(--bg-soft); border: 1px solid var(--border); }
.expansao-conta[hidden] { display: none; }
.orcamento-form input { width: 5.5rem; text-align: right; }

/* Análise de 4 semanas */
.semanas { display: grid; gap: 0.75rem; }
.semanas-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.semanas-cab h3 { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; font-size: 1rem; }
.semanas-cab .ico { color: var(--accent-text); }
.leitura { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.leitura li { position: relative; padding: 0.55rem 0.8rem 0.55rem 2rem; border-radius: 0.7rem; font-size: 0.84rem; background: var(--surface); border: 1px solid var(--border); }
.leitura li::before { content: ""; position: absolute; left: 0.85rem; top: 50%; width: 0.5rem; height: 0.5rem; margin-top: -0.25rem; border-radius: 999px; background: var(--faint); }
.leitura-bom::before { background: var(--ok) !important; }
.leitura-ruim::before { background: var(--err) !important; }
.tabela-semanas { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.82rem; background: var(--surface); border: 1px solid var(--border); border-radius: 0.9rem; overflow: hidden; }
.tabela-semanas th, .tabela-semanas td { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tabela-semanas thead th { font-size: 0.72rem; color: var(--muted); font-weight: 600; text-align: right; white-space: nowrap; background: var(--surface-2); }
.tabela-semanas thead th:first-child { text-align: left; }
.tabela-semanas thead th small { display: block; color: var(--accent-text); font-weight: 600; }
.tabela-semanas tbody th { text-align: left; font-weight: 500; font-size: 0.82rem; color: var(--ink-2); white-space: nowrap; }
.tabela-semanas tbody tr:last-child > * { border-bottom: 0; }
.tabela-semanas td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabela-semanas td strong { display: block; font-weight: 600; }
.tabela-semanas td .var { font-size: 0.72rem; color: var(--muted); }
.tabela-semanas td .var.bom { color: var(--ok); } .tabela-semanas td .var.ruim { color: var(--err); }
.tabela-semanas td.melhor { background: var(--kpi-icone-bg); position: relative; }
.tabela-semanas td.melhor strong::before { content: "★ "; color: var(--accent-text); font-size: 0.72rem; }
.col-tendencia { width: 8rem; }
.tendencia { width: 7rem; height: 1.9rem; display: block; margin-left: auto; }
.tendencia path { fill: none; stroke: var(--serie-1); stroke-width: 2; stroke-linecap: round; }
.selo-melhor { display: inline-block; padding: 0 0.4rem; border-radius: 0.3rem; background: var(--kpi-icone-bg); color: var(--accent-text); font-weight: 600; }
.publico-compacto h3 { display: inline-flex; align-items: center; gap: 0.4rem; }
.publico-compacto h3 .ico { color: var(--accent-text); }
.tabela-publico .barra-trilho { min-width: 7rem; }
[data-aba-painel] { margin-top: 0.85rem; }
[data-aba-painel][hidden] { display: none; }

/* Galeria de criativos */
.filtros-galeria { margin-bottom: 1rem; padding: 0.9rem 1rem; border-radius: 1rem; background: var(--bg-soft); border: 1px solid var(--border); }
.filtros-galeria summary { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; font-weight: 600; font-size: 0.88rem; list-style: none; }
.filtros-galeria summary::-webkit-details-marker { display: none; }
.filtros-galeria summary .ico { width: 15px; height: 15px; color: var(--accent-text); }
.rotulo-filtro { margin: 0.9rem 0 0.45rem; font-size: 0.8rem; color: var(--muted); font-weight: 500; }
.filtros-linha { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: 1rem; }
.criativo { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 1.1rem; overflow: hidden; background: var(--surface); box-shadow: var(--shadow); transition: box-shadow 200ms var(--ease), transform 200ms var(--ease); }
.criativo:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.criativo[hidden] { display: none; }
.criativo.pausado .criativo-midia img { filter: grayscale(0.6); opacity: 0.8; }
.criativo-midia { position: relative; aspect-ratio: 1 / 1; background: var(--surface-2); overflow: hidden; }
.criativo-midia img { width: 100%; height: 100%; object-fit: cover; display: block; }
.criativo-rank { position: absolute; top: 0.6rem; left: 0.6rem; z-index: 2; padding: 0.15rem 0.5rem; border-radius: 0.5rem; background: var(--tn-gold); color: var(--tn-black); font-weight: 700; font-size: 0.78rem; }
.criativo-chave { position: absolute; top: 0.55rem; right: 0.55rem; z-index: 2; }
.selo-tipo { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2; }
.criativo-play { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; color: #fff; }
.criativo-play .ico { width: 3.4rem; height: 3.4rem; padding: 0.85rem; border-radius: 999px; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: transform 150ms var(--ease), background 150ms var(--ease); }
.criativo-play:hover .ico { transform: scale(1.08); background: rgba(0, 0, 0, 0.6); }
.criativo-play.so-imagem .ico { opacity: 0; width: 2.6rem; height: 2.6rem; padding: 0.65rem; }
.criativo-play.so-imagem:hover .ico, .criativo-play.so-imagem:focus-visible .ico { opacity: 1; }
.criativo-texto { height: 100%; display: grid; align-content: center; gap: 0.35rem; padding: 1rem 1.1rem; background: var(--surface); }
.criativo-texto small { color: var(--ok); font-size: 0.72rem; }
.criativo-texto strong { color: #1a0dab; font-size: 0.95rem; line-height: 1.25; }
.criativo-texto p { margin: 0; font-size: 0.8rem; color: var(--ink-2); }
.criativo-corpo { display: grid; gap: 0.5rem; padding: 0.85rem 0.95rem 1rem; flex: 1; align-content: start; }
.criativo-destaque { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0.7rem; border-radius: 0.7rem; background: var(--kpi-icone-bg); font-size: 0.8rem; color: var(--ink-2); }
.criativo-destaque strong { font: 700 1.1rem/1 var(--font-display); color: var(--accent-text); }
.criativo-corpo h3 { margin: 0.15rem 0 0; font-size: 0.9rem; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.criativo-campanha { margin: 0; font-size: 0.74rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.criativo-legenda { margin: 0; font-size: 0.84rem; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.criativo-numeros { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem 0.75rem; margin: 0.25rem 0 0; padding-top: 0.6rem; border-top: 1px solid var(--border); }
.criativo-numeros div[hidden] { display: none; }
.criativo-numeros dt { font-size: 0.7rem; color: var(--muted); }
.criativo-numeros dd { margin: 0; font-weight: 600; font-size: 0.86rem; font-variant-numeric: tabular-nums; }

/* Janela da prévia (vídeo/imagem) */
.dialogo-previa { width: min(30rem, calc(100vw - 2rem)); }
.dialogo-previa[open], .dialogo-lateral[open] { display: flex; flex-direction: column; }
.dialogo-cab { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.2rem 0.75rem; }
.dialogo-cab h2 { margin: 0; font: 700 1.05rem/1.25 var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dialogo-previa .segmentado { margin: 0 1.2rem 0.6rem; align-self: flex-start; }
.previa-palco { display: grid; place-items: center; min-height: 18rem; padding: 0 1.2rem; overflow: auto; }
.previa-palco iframe { border: 0; max-width: 100%; border-radius: 0.8rem; background: #fff; }
.previa-palco video, .previa-palco img { width: 100%; max-height: 70vh; border-radius: 0.8rem; background: #000; object-fit: contain; }
.previa-palco .esq-bloco { width: 100%; }
.previa-erro { color: var(--muted); text-align: center; padding: 2rem 1rem; }
.previa-info { padding: 0.75rem 1.2rem 1.1rem; font-size: 0.82rem; color: var(--muted); }

/* Organizar (painel lateral) */
.dialogo-lateral { margin: 0 0 0 auto; height: 100vh; max-height: 100vh; width: min(26rem, 100vw); border-radius: 1.25rem 0 0 1.25rem; }
.dialogo-lateral[open] { animation: entrar-lateral 220ms var(--ease); }
@keyframes entrar-lateral { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.dialogo-lateral .segmentado { margin: 0 1.2rem 0.5rem; }
.organizar-form { display: flex; flex-direction: column; min-height: 0; flex: 1; padding: 0 1.2rem 1.1rem; }
.organizar-form[hidden] { display: none; }
.lista-organizar { list-style: none; margin: 0.4rem 0 0.9rem; padding: 0; overflow-y: auto; flex: 1; display: grid; align-content: start; gap: 0.3rem; }
.lista-organizar li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem; border-radius: 0.75rem; background: var(--surface-2); font-size: 0.88rem; cursor: grab; user-select: none; }
.lista-organizar li.desligada { opacity: 0.6; background: transparent; border: 1px dashed var(--border-strong); }
.lista-organizar li.arrastando { opacity: 0.4; }
.alca { color: var(--faint); display: grid; }
.chave-mini { position: relative; display: inline-block; width: 2.3rem; height: 1.3rem; cursor: pointer; }
.chave-mini input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chave-mini i { position: absolute; inset: 0; border-radius: 999px; background: var(--border-strong); transition: background 150ms var(--ease); pointer-events: none; }
.chave-mini i::after { content: ""; position: absolute; top: 0.15rem; left: 0.15rem; width: 1rem; height: 1rem; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: transform 150ms var(--ease); }
.chave-mini input:checked + i { background: var(--ok); }
.chave-mini input:checked + i::after { transform: translateX(1rem); }
.chave-mini input:focus-visible + i { box-shadow: 0 0 0 3px var(--ring); }

/* Instagram */
.ig-perfil-novo { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem; }
.ig-perfil-novo .ig-foto { width: 6rem; height: 6rem; }
.ig-perfil-novo .ig-dados { flex: 1 1 18rem; min-width: 0; }
.ig-perfil-novo h2 { margin: 0; }
.ig-perfil-novo + .kpis-ads { margin-top: 1.1rem; }

@media (max-width: 760px) {
  .ads-controles { width: 100%; }
  .ads-controles .seletor { flex: 1 1 100%; }
  .seletor-botao { width: 100%; justify-content: space-between; }
  .pop, .pop-datas { left: 0; right: auto; }
  .pop-datas { grid-template-columns: 1fr; }
  .datas-atalhos { grid-template-columns: repeat(2, 1fr); border-right: 0; padding-right: 0; border-bottom: 1px solid var(--border); padding-bottom: 0.6rem; }
  .datas-calendario { min-width: 0; }
  .cal-meses { grid-template-columns: 1fr; }
  .cal-mes + .cal-mes { display: none; }
  .tabela-ads .col-nome { min-width: 12rem; }
  .contagem { margin-left: 0; }
}
@media print {
  .ads-controles, .ads-botoes, .filtros-galeria, .chips-metricas, .ferramentas, .tabela-ferramentas, .col-acoes, .criativo-play, .criativo-chave, [data-sob-demanda] { display: none !important; }
  .kpi-ads, .criativo, .ads-card { box-shadow: none; break-inside: avoid; }
}

/* =====================================================================
   Funil: janela lateral do card (abre sem sair do funil)
   ===================================================================== */
.painel-card { border: 0; padding: 0; margin: 0 0 0 auto; width: min(58rem, 100vw); max-width: 100vw; height: 100vh; height: 100dvh;
  max-height: none; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); border-radius: var(--r-xl) 0 0 var(--r-xl); }
.painel-card::backdrop { background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.painel-card[open] { animation: painel-entrar 240ms var(--ease); }
@keyframes painel-entrar { from { transform: translateX(2.5rem); opacity: 0; } to { transform: none; opacity: 1; } }
.painel-card-corpo { padding: 1.6rem 1.9rem 2rem; }
.painel-card-carregando { color: var(--muted); padding: 2rem 0; text-align: center; }
.painel-card-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--border); }
.painel-card-titulo { min-width: 0; }
.painel-card-titulo h2 { font-size: 1.7rem; letter-spacing: -0.035em; margin: 0.35rem 0 0.25rem; overflow-wrap: anywhere; }
.painel-card-titulo h2 .badge { vertical-align: middle; font-size: 0.75rem; }
.painel-card-titulo p { margin: 0; font-size: 0.9rem; }
.painel-card-botoes { display: flex; align-items: center; gap: 0.5rem; flex: none; }
.painel-card-etapa { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.9rem 0; border-bottom: 1px solid var(--border); }
.painel-card-etapa label { font-weight: 600; font-size: 0.85rem; }
.painel-card-etapa select { width: auto; min-width: 14rem; }
.painel-card-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.1rem; }
.painel-card-grade > div { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.painel-bloco { border: 1px solid var(--border); border-radius: var(--r-lg, 1rem); padding: 1.1rem 1.2rem; min-width: 0; }
.painel-bloco h3 { display: flex; align-items: center; gap: 0.45rem; font-size: 0.95rem; margin: 0 0 0.85rem; letter-spacing: -0.01em; }
.painel-bloco h3 .ico { width: 1rem; height: 1rem; color: var(--tn-gold); }
.painel-bloco-destaque { background: var(--surface-2); border-color: transparent; }
.painel-bloco .tarefas { margin-bottom: 0.85rem; }
.painel-bloco .linha-tempo { margin: 0; }
.painel-bloco .tipos { flex-wrap: wrap; }
.painel-pessoa { margin: 0 0 0.6rem; font-size: 1.05rem; }
.painel-rotulo { margin: 1rem 0 0.45rem; color: var(--muted); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.painel-link { display: inline-block; margin-top: 0.75rem; font-size: 0.85rem; font-weight: 600; }
@media (max-width: 860px) {
  .painel-card { border-radius: 0; }
  .painel-card-grade { grid-template-columns: 1fr; }
  .painel-card-corpo { padding: 1.1rem 1rem 1.5rem; }
  .painel-card-topo { flex-direction: column-reverse; }
  .painel-card-botoes { align-self: stretch; justify-content: space-between; }
}
.painel-nav { display: flex; align-items: center; gap: 0.35rem; margin-right: 0.35rem; }
.painel-nav-posicao { font-size: 0.8rem; color: var(--muted); font-weight: 550; white-space: nowrap; }
.painel-nav .icon-btn:disabled { opacity: 0.35; cursor: default; }
.painel-etapa-ok { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; font-weight: 600; color: var(--ok); }
.painel-etapa-ok .ico { width: 1rem; height: 1rem; }
@media (max-width: 860px) { .painel-nav { margin-right: auto; } }
.painel-card-corpo.trocando { opacity: 0.45; pointer-events: none; transition: opacity 120ms var(--ease); }
.painel-card-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--border); }
.painel-card-barra .painel-card-etapa { padding: 0; border: 0; margin: 0; }
.painel-card-fechar { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.painel-card-fechar > form { margin: 0; }
.popover-link { display: block; margin-top: 0.6rem; text-align: center; font-size: 0.8rem; color: var(--muted); }
.motivos-lista .socio { align-items: flex-start; }
.motivo-info { flex: 1; min-width: 0; }
.motivo-editar { margin-top: 0.35rem; }
.motivo-editar .linha-form { display: flex; gap: 0.5rem; align-items: center; max-width: 30rem; }
.motivo-editar .linha-form input { flex: 1; }
.motivo-acoes { flex: none; align-items: center; }
.motivo-acoes form { margin: 0; }
.motivo-acoes .icon-btn:disabled { opacity: 0.3; cursor: default; }

/* =====================================================================
   Início: visão geral das contas
   ===================================================================== */
.visao-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1rem; }
.visao-conta { display: grid; gap: 0.9rem; align-content: start; min-height: 12rem; }
.visao-conta-topo { display: flex; align-items: center; gap: 0.7rem; }
.visao-conta-topo .ads-logo { width: 2.4rem; height: 2.4rem; border-radius: 0.8rem; }
.visao-conta-topo .ads-logo .ico { width: 20px; height: 20px; }
.visao-conta-topo div { min-width: 0; }
.visao-conta-topo strong { display: block; font-family: var(--font-display); font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visao-conta-topo small { color: var(--muted); }
.visao-numeros { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem; }
.visao-numeros span { display: block; font-size: 0.75rem; color: var(--muted); }
.visao-numeros strong { font-family: var(--font-display); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.visao-numeros .var { font-size: 0.75rem; font-weight: 600; margin-left: 0.25rem; }
.visao-numeros .var.bom { color: var(--ok); }
.visao-numeros .var.ruim { color: var(--err); }
.visao-rodape { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: space-between; border-top: 1px solid var(--border); padding-top: 0.75rem; font-size: 0.8rem; }
.visao-conta.secao-carregando { opacity: 0.6; }
.alerta-tipo-saldo .ico, .alerta-tipo-parada .ico { color: var(--err); }
.alerta-tipo-gasto .ico { color: var(--tn-gold-dark); }
.alerta-tipo-conexao .ico { color: #2563eb; }
.chips-filtro { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chips-filtro .chip-metrica { text-decoration: none; }
/* Alertas: lista (botão de visto ao lado) e página de detalhes */
.alertas-lista li { display: flex; align-items: center; gap: 0.4rem; border-bottom: 1px solid var(--border); }
.alertas-lista li:last-child { border-bottom: 0; }
.alertas-lista li a { flex: 1; min-width: 0; border-bottom: 0; }
.alertas-lista li a > .ico:last-child { align-self: center; color: var(--faint); }
.alertas-lista li form { margin: 0 0.4rem 0 0; }
.alertas-lista li.nao-lida a { background: color-mix(in srgb, var(--tn-gold) 5%, transparent); }
.alerta-cab { margin-top: 1rem; }
.alerta-cab h1 { max-width: 30ch; }
.alerta-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; }
.alerta-sub .badge .ico { width: 13px; height: 13px; }
.alerta-cab.alerta-tipo-saldo .eyebrow, .alerta-cab.alerta-tipo-parada .eyebrow { color: var(--err); }
.alerta-cab.alerta-tipo-gasto .eyebrow { color: var(--tn-gold-dark); }
.alerta-pagina { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 1.25rem; align-items: start; }
.alerta-principal, .alerta-lateral { display: grid; gap: 1.25rem; min-width: 0; }
.alerta-principal > .card, .alerta-lateral > .card { margin: 0; }
@media (max-width: 1000px) { .alerta-pagina { grid-template-columns: 1fr; } }
.alerta-texto { font-size: 1.02rem; color: var(--ink); margin: 0 0 1.1rem; }
.alerta-numeros { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 0.6rem; margin: 0; }
.alerta-numeros div { border: 1px solid var(--border); border-radius: var(--r-md); padding: 0.75rem 0.9rem; min-width: 0; }
.alerta-numeros dt { color: var(--muted); font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; }
.alerta-numeros dd { margin: 0.3rem 0 0; font: 600 1.05rem/1.25 var(--font-display); overflow-wrap: anywhere; }
.alerta-subtitulo { font-size: 0.95rem; margin: 1.3rem 0 0.6rem; }
.alerta-motivos { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.6rem; }
.alerta-motivos li { border-left: 3px solid var(--err); background: var(--err-bg); border-radius: 0.5rem; padding: 0.7rem 0.9rem; }
.alerta-motivos strong, .alerta-motivos span { display: block; }
.alerta-motivos span { color: var(--ink-2); font-size: 0.86rem; margin-top: 0.25rem; }
.alerta-serie { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.alerta-serie li { display: grid; grid-template-columns: 6.5rem 1fr 6.5rem; gap: 0.75rem; align-items: center; font-size: 0.82rem; }
.alerta-serie li.destaque .barra-nome, .alerta-serie li.destaque .barra-num { color: var(--ink); font-weight: 700; }
.alerta-serie li:not(.destaque) .barra-fill { background: color-mix(in srgb, var(--tn-gold) 38%, transparent); }
.alerta-trilho { position: relative; display: block; height: 0.6rem; background: var(--surface-2); border-radius: 999px; }
.alerta-trilho .barra-fill { position: absolute; inset: 0 auto 0 0; }
.alerta-media { position: absolute; top: -0.25rem; bottom: -0.25rem; width: 0; border-left: 2px dashed var(--ink-2); }
.alerta-campanhas li { grid-template-columns: minmax(0, 1.4fr) 1fr 6.5rem; }
.alerta-campanhas .barra-num small { display: block; color: var(--muted); font-size: 0.72rem; }
@media (max-width: 600px) {
  .alerta-serie li { grid-template-columns: 4.6rem 1fr 4.9rem; gap: 0.5rem; font-size: 0.78rem; }
  .alerta-campanhas li { grid-template-columns: 1fr 5rem; row-gap: 0.3rem; }
  .alerta-campanhas .barra-nome { grid-column: 1 / -1; white-space: normal; }
  .alerta-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.alerta-dica { display: flex; gap: 0.6rem; align-items: flex-start; background: color-mix(in srgb, var(--tn-gold) 9%, transparent); border-radius: var(--r-md); padding: 0.85rem 1rem; margin: 0 0 1rem; color: var(--ink); }
.alerta-dica .ico { color: var(--tn-gold-dark); flex: none; margin-top: 0.1rem; }
.alerta-passos { margin: 0; padding-left: 1.3rem; display: grid; gap: 0.5rem; color: var(--ink-2); }
.alerta-porque { color: var(--ink-2); margin: 0 0 0.9rem; }
.alerta-lateral h3 { margin: 0.35rem 0 0.2rem; }
.alerta-lateral .help { margin: 0.3rem 0 0; }
.alerta-outros li a { padding: 0.65rem 0.2rem; }
.alerta-outros strong { font-size: 0.86rem; font-weight: 600; }
.check-bloco { align-items: flex-start; gap: 0.6rem; padding: 0.85rem 1rem; border: 1px solid var(--border); border-radius: var(--r-md); }
.check-bloco span { display: grid; gap: 0.15rem; }

/* =====================================================================
   Relatórios personalizados: lista
   ===================================================================== */
.rel-hero { padding: 0; overflow: hidden; }
.rel-hero-topo { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; padding: 1.8rem 2rem; background: var(--tn-black); color: #fff; }
.rel-hero-topo h1 { color: #fff; margin: 0.2rem 0 0.4rem; }
.rel-hero-topo p { color: #c7c7cc; margin: 0; max-width: 40rem; }
.rel-hero-topo .eyebrow { color: var(--tn-gold-light); }
.rel-hero-topo .btn-primary { background: #fff; color: var(--tn-black); }
.rel-hero-topo .btn-primary:hover { background: #f5f5f7; }
.rel-contadores { display: grid; grid-template-columns: repeat(3, 1fr); }
.rel-contadores div { padding: 1.1rem 1rem; text-align: center; }
.rel-contadores div + div { border-left: 1px solid var(--border); }
.rel-contadores span { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.rel-contadores strong { font-family: var(--font-display); font-size: 1.6rem; }
.rel-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 1rem; }
.rel-cartao { display: flex; flex-direction: column; gap: 0.9rem; }
.rel-cartao.rel-inativo { opacity: 0.7; }
.rel-cartao-topo { display: flex; gap: 0.5rem; align-items: flex-start; justify-content: space-between; }
.rel-cartao-topo h2 { font-size: 1.1rem; margin: 0; }
.rel-cartao-info { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; font-size: 0.88rem; color: var(--ink-2); }
.rel-cartao-info li { display: flex; gap: 0.55rem; align-items: center; min-width: 0; }
.rel-cartao-info .ico { width: 17px; height: 17px; flex: none; }
.rel-link { margin: 0; font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rel-cartao-data { display: flex; justify-content: space-between; border-top: 1px solid var(--border); padding-top: 0.7rem; font-size: 0.8rem; color: var(--muted); margin-top: auto; }
.rel-cartao-botoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45rem; }
.rel-cartao-botoes form { display: contents; }
.rel-cartao-botoes .btn { justify-content: center; background: transparent; border: 1px solid; box-shadow: none; }
.rel-btn-verde { color: #1a7f4b; border-color: rgba(26, 127, 75, 0.4) !important; }
.rel-btn-laranja { color: #b45309; border-color: rgba(180, 83, 9, 0.4) !important; }
.rel-btn-azul { color: #2563eb; border-color: rgba(37, 99, 235, 0.4) !important; }
.rel-btn-vermelho { color: var(--err); border-color: rgba(192, 50, 43, 0.4) !important; }
.rel-cartao-botoes .btn:hover { background: var(--surface-2); }

/* =====================================================================
   Relatórios personalizados: editor (painel + prévia)
   ===================================================================== */
.rel-editor { display: grid; grid-template-columns: minmax(20rem, 25rem) 1fr; gap: 1rem; align-items: start; }
.rel-lateral { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; padding: 0; }
.rel-painel-topo { position: sticky; top: 0; z-index: 2; background: var(--surface); padding: 1.1rem 1.2rem 0.9rem; border-bottom: 1px solid var(--border); display: grid; gap: 0.7rem; }
.rel-painel-topo h2 { font-size: 1.05rem; margin: 0; }
.rel-topo-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.rel-topo-botoes .btn { justify-content: center; }
.rel-abas { display: grid; grid-template-columns: repeat(3, 1fr); }
.rel-painel-corpo { padding: 1rem 1.2rem 1.4rem; display: grid; gap: 0.7rem; }
.rel-plataforma { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
.rel-plataforma summary { display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 0.9rem; cursor: pointer; list-style: none; }
.rel-plataforma summary::-webkit-details-marker { display: none; }
.rel-plataforma summary strong { flex: 1; font-size: 0.92rem; }
.rel-plataforma summary > .ico:last-child { width: 16px; height: 16px; color: var(--muted); transition: transform 150ms var(--ease); }
.rel-plataforma[open] summary > .ico:last-child { transform: rotate(90deg); }
.rel-plataforma summary span .ico { width: 18px; height: 18px; }
.rel-plataforma-corpo { padding: 0 0.9rem 0.9rem; display: grid; gap: 0.5rem; background: var(--surface); border-top: 1px solid var(--border); border-radius: 0 0 var(--r-md) var(--r-md); padding-top: 0.8rem; }
.rel-rotulo { margin: 0; font-size: 0.8rem; font-weight: 600; color: var(--ink-2); }
.rel-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.rel-chips form { display: contents; }
.rel-chips .chip button { border: 0; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; padding: 0.1rem; border-radius: 999px; }
.rel-chips .chip button:hover { color: var(--err); }
.rel-chips .chip .ico { width: 13px; height: 13px; }
.rel-tipos { list-style: none; margin: 0.3rem 0 0; padding: 0; display: grid; gap: 0.3rem; }
.rel-tipos li { display: flex; align-items: center; gap: 0.4rem; border-radius: var(--r-sm); padding: 0.35rem 0.4rem 0.35rem 0.7rem; }
.rel-tipos li.ligado { background: var(--surface-2); }
.rel-tipo-linha { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0; }
.rel-tipo-nome { font-size: 0.86rem; color: var(--ink-2); }
.rel-tipos li.ligado .rel-tipo-nome { color: var(--ink); font-weight: 600; }
.rel-ordem { border-top: 1px solid var(--border); padding-top: 0.9rem; margin-top: 0.3rem; }
.rel-ordem ol { margin: 0.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.25rem; counter-reset: ordem; }
.rel-ordem li { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.84rem; padding: 0.3rem 0.4rem; border-radius: var(--r-sm); }
.rel-ordem li:hover { background: var(--surface-2); }
.rel-ordem li > span:first-child::before { counter-increment: ordem; content: counter(ordem) ". "; color: var(--muted); }
.rel-ordem-botoes { display: flex; gap: 0.15rem; }
.rel-ordem-botoes form { margin: 0; }
.rel-edicao { display: grid; gap: 0.8rem; }
.rel-edicao h3 { margin: -0.4rem 0 0; }
.rel-edicao .eyebrow { margin: 0; }
.rel-edicao-rodape { display: flex; flex-wrap: wrap; gap: 0.4rem; border-top: 1px solid var(--border); padding-top: 0.8rem; }
.rel-edicao-rodape form { margin: 0; }
.rel-linha-chave { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; font-size: 0.86rem; font-weight: 600; cursor: pointer; }
.rel-geral { display: grid; gap: 0.3rem; }
.rel-link-campo { display: grid; border: 1px solid var(--border-strong); border-radius: var(--r-sm); overflow: hidden; }
.rel-link-campo span { padding: 0.45rem 0.75rem; background: var(--surface-2); color: var(--muted); font-size: 0.78rem; overflow-wrap: anywhere; }
.rel-link-campo input { border: 0; border-radius: 0; }
.rel-senha { display: flex; gap: 0.35rem; align-items: center; }
.rel-senha input { flex: 1; }
.rel-palco { padding: 0; overflow: hidden; position: sticky; top: 1rem; }
.rel-palco-topo { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 1rem; border-bottom: 1px solid var(--border); }
.rel-status { font-size: 0.8rem; font-weight: 600; color: var(--ok); }
.rel-previa { display: block; width: 100%; height: calc(100vh - 5rem); border: 0; background: var(--bg-soft); }
@media (max-width: 1000px) {
  .rel-editor { grid-template-columns: 1fr; }
  .rel-lateral, .rel-palco { position: static; max-height: none; }
  .rel-previa { height: 80vh; }
}

/* =====================================================================
   Relatórios personalizados: página do cliente
   ===================================================================== */
.rel-pagina { background: var(--bg-soft); min-height: 100vh; }
.rel-folha { max-width: 72rem; margin: 0 auto; padding: 2rem 1.25rem 3rem; display: grid; gap: 1.6rem; }
.rel-pagina-previa .rel-folha { padding-top: 1.25rem; }
.rel-cabecalho { display: grid; grid-template-columns: 1fr auto; gap: 1rem 1.5rem; align-items: center; }
.rel-cabecalho h1 { margin: 0 0 0.3rem; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.rel-cabecalho p { margin: 0; }
.rel-logo { display: flex; justify-content: flex-end; }
.rel-logo-img { max-height: 2.6rem; width: auto; }
.rel-periodo { grid-column: 1 / -1; }
.rel-periodo summary { list-style: none; width: 100%; justify-content: center; }
.rel-periodo summary::-webkit-details-marker { display: none; }
.rel-periodo-form { display: grid; gap: 0.6rem; margin-top: 0.8rem; }
.rel-periodo-livre { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; }
.rel-periodo-livre[hidden] { display: none; }
.rel-imprimir { grid-column: 1 / -1; justify-self: end; }
.rel-observacoes p { margin: 0; color: var(--ink-2); }
.rel-bloco { display: grid; gap: 0.9rem; }
.rel-bloco-titulo { display: flex; align-items: center; gap: 0.55rem; margin: 0; font-size: 1.25rem; }
.rel-bloco-titulo .ico { width: 22px; height: 22px; }
.rel-subtitulo { margin: 0.4rem 0 -0.2rem; font-weight: 600; color: var(--ink-2); }
.rel-vazio { margin: 0; }
.rel-campanhas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 0.9rem; }
.rel-campanha { display: grid; gap: 0.6rem; }
.rel-campanha-topo { display: flex; gap: 0.5rem; align-items: flex-start; justify-content: space-between; }
.rel-campanha-topo strong { font-size: 0.92rem; }
.rel-campanha-numeros { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem 1rem; }
.rel-campanha-numeros span { display: block; font-size: 0.74rem; color: var(--muted); }
.rel-campanha-numeros strong { font-family: var(--font-display); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.rel-rodape { text-align: center; font-size: 0.78rem; color: var(--muted); }
.rel-senha-pagina { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: var(--bg-soft); }
.rel-senha-caixa { width: min(100%, 26rem); display: grid; gap: 0.6rem; }
.rel-senha-caixa .rel-logo { justify-content: flex-start; margin-bottom: 0.6rem; }
.rel-senha-caixa h1 { margin: 0; font-size: 1.5rem; }
@media (max-width: 640px) {
  .rel-cabecalho { grid-template-columns: 1fr; }
  .rel-logo { justify-content: flex-start; grid-row: 1; }
  .rel-cartao-botoes { grid-template-columns: repeat(2, 1fr); }
}
@media print {
  .rel-pagina { background: #fff; }
  .rel-periodo, .rel-imprimir { display: none !important; }
  .rel-folha { padding: 0; max-width: none; }
  .rel-bloco { break-inside: avoid-page; }
}
/* Grades de cartões: o espaço vem do gap, não da margem entre cartões vizinhos. */
.visao-grade > .card, .rel-grade > .card, .rel-campanhas > .card, .rel-bloco .grid > .card { margin: 0; }
.rel-bloco .tabela-ads .col-nome small { display: block; margin-top: 0.1rem; font-weight: 400; }