/* ============================================================================
   Portal de Eventos — Design System
   Casca (topbar, menu lateral, tipografia) alinhada ao ERP — Portal Comercial
   e Portal Suporte: Outfit, topbar de 56px na tinta da marca (#021240).
   ============================================================================ */

/* ── Tipografia: a mesma do ERP (Portal Comercial / Portal Suporte) ──
   Outfit (variavel, 100-900) em texto E titulo; IBM Plex Mono (400/500) nos
   numeros (.num). Arquivos copiados do build do ERP (next/font, OFL) e
   hospedados aqui: a CSP do app e `default-src 'self'` (app/main.py), entao um
   <link> para CDN seria bloqueado. latin cobre o pt-BR; latin-ext entra para
   nomes proprios estrangeiros na base de clientes. */
@font-face{
  font-family:'Outfit';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/css/fonts/Outfit-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Outfit';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/css/fonts/Outfit-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/css/fonts/IBMPlexMono-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/css/fonts/IBMPlexMono-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/css/fonts/IBMPlexMono-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/css/fonts/IBMPlexMono-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ── Design tokens ── */
:root{
  /* Marca — mesmo roxo do Portal de Alocacao (#34146c), um passo mais azul que
     o #431462 antigo. A escala 50..900 foi reancorada junto: manter as tintas
     velhas com a nova primaria deixaria os hovers puxando para magenta. */
  --primary:#34146c; --primary-hover:#431a8a;
  --primary-50:#f4f2f8; --primary-100:#e9e4f1; --primary-200:#cfc6e2;
  --primary-300:#ab9ccc; --primary-400:#7f68ae; --primary-500:#593c8c;
  --primary-600:#43217a; --primary-700:#34146c; --primary-800:#2a1057; --primary-900:#1f0c42;

  /* Neutros — fundo do Portal de Alocacao: #f8f9fd com tres veus tirados do
     logo (azul #021240 pelo alto a esquerda, roxo #451365 pelo alto a direita,
     cinza #99a1ae subindo do rodape). Os alfas ficam entre 4% e 10% porque o
     papel precisa continuar branco: o que separa um card do fundo e a distancia
     entre este tom e o --card, e um veu mais forte comeria essa distancia. */
  --bg:#f8f9fd; --card:#ffffff; --surface:#ffffff; --surface-2:#f2f4f7;
  --bg-gradient:
    radial-gradient(1100px 700px at 6% -12%,rgba(2,18,64,.055),transparent 62%),
    radial-gradient(900px 620px at 97% 2%,rgba(69,19,101,.045),transparent 58%),
    radial-gradient(1000px 560px at 50% 108%,rgba(153,161,174,.10),transparent 60%),
    var(--bg);
  --fg:#0f172a; --muted:#64748b;
  --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1;
  --slate-400:#94a3b8; --slate-500:#64748b; --slate-600:#475569; --slate-700:#334155;
  --border:#e9edf3; --border-strong:#dfe5ed;

  /* Semânticos */
  --success:#15803d; --success-bg:#dcfce7;
  --warning:#b45309; --warning-bg:#fef3c7;
  --danger:#e11d48;  --danger-bg:#ffe4e6;
  --info:#1d4ed8;    --info-bg:#dbeafe;
  /* Acento secundário (DESIGN.md — índigo) */
  --secondary:#4648d4; --secondary-strong:#2f2ebe; --secondary-bg:#e1e0ff;

  /* Paleta de STATUS (M-11). Separada da paleta de acao (--danger, --warning):
     la a cor quer dizer "este botao apaga alguma coisa"; aqui quer dizer "o
     convite foi recusado". Cada par tem o seu inverso no [data-theme="dark"] —
     sem isso o badge mantinha fundo pastel claro no tema escuro, em Convidados,
     Pipeline, Eventos, Atividades e Follow-ups. */
  --st-ok-bg:#dcfce7;     --st-ok-fg:#15803d;
  --st-warn-bg:#fef3c7;   --st-warn-fg:#92400e;
  --st-alerta-bg:#ffedd5; --st-alerta-fg:#c2410c;
  --st-perigo-bg:#ffe4e6; --st-perigo-fg:#b91c1c;
  --st-info-bg:#e0f2fe;   --st-info-fg:#0369a1;
  --st-roxo-bg:#ede9fe;   --st-roxo-fg:#6d28d9;
  --st-indigo-bg:#e0e7ff; --st-indigo-fg:#4338ca;
  --st-neutro-bg:var(--slate-100); --st-neutro-fg:var(--slate-600);
  /* Borda: so as familias que aparecem em caixa de aviso (.nota-*). */
  --st-ok-bd:#bbf7d0; --st-warn-bd:#fcd34d; --st-alerta-bd:#fed7aa; --st-perigo-bd:#fecaca;

  /* Tipografia — a do ERP (tailwind.config: sans/mono) */
  --font-sans:'Outfit',ui-sans-serif,system-ui,"Segoe UI",Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,"Cascadia Mono",Consolas,monospace;
  /* Contra a raiz de 14px (ver `html`, abaixo). Os px sao os mesmos de antes:
     estes tokens ja estavam calibrados para o tamanho certo — o que muda e o
     divisor. Quem encolhe de verdade sao os 143 font-size em rem cru, que
     estavam escritos para a raiz do Portal e ate agora rendiam 14% maiores. */
  --text-xs:.857rem;  /* 12px — label-md */
  --text-sm:1rem;     /* 14px — body-sm */
  --text-base:1rem;   /* 14px — corpo de UI (raiz do Portal de Operacoes) */
  --text-md:1.143rem; /* 16px — body-md */
  --text-lg:1.429rem; /* 20px — headline-sm */
  --text-xl:1.714rem; /* 24px — headline-md */
  --text-2xl:2.286rem;/* 32px — headline-lg */

  /* Espaçamento (ritmo 8px) / raio */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem; --space-8:3rem;
  --gutter:1.5rem;
  /* Raio: mesma escala rem do Portal de Operacoes (3/5/8/10/16px na raiz de 16px) */
  --radius-xs:.1875rem; --radius-sm:.3125rem; --radius-default:.3125rem; --radius-md:.5rem; --radius-lg:.625rem; --radius-xl:1rem; --radius:.5rem;

  /* Elevação (sombras suaves multicamada — DESIGN.md) */
  --shadow-xs:0 1px 2px rgba(15,23,42,.04);
  --shadow-sm:0 1px 3px 0 rgba(0,0,0,.10),0 1px 2px -1px rgba(0,0,0,.10);
  --shadow-md:0 4px 14px -3px rgba(15,23,42,.10),0 2px 6px -2px rgba(15,23,42,.06);
  --shadow-lg:0 16px 38px -10px rgba(15,23,42,.16),0 8px 18px -10px rgba(15,23,42,.10);

  /* Foco / movimento / camadas */
  /* WCAG 2.4.11: o anel antigo tinha 16% de opacidade e sumia na tela. Agora sao
     duas camadas -- halo claro para separar do componente e anel solido com
     contraste >= 3:1 contra o fundo. --ring-cor serve ao outline de quem nao usa
     box-shadow (links, icon-btn, summary). */
  --ring-cor:#431462;
  --ring:0 0 0 2px var(--card),0 0 0 4px var(--ring-cor);
  --transition:.16s cubic-bezier(.4,0,.2,1);

  /* Topbar na tinta da marca (#021240, unico tom do logo ACTAR Peers Group) —
     escura nos dois temas. Texto e overlays puxados para o mesmo azul, para a
     faixa nao misturar cinza neutro com azul saturado. */
  --topbar-h:56px;  /* h-16 do ERP na base de 14px */
  --topbar-surface:#021240;
  --topbar-border:rgba(255,255,255,.10);
  --on-topbar:#e8ecf7;
  --on-topbar-muted:#9aa6c4;
  --topbar-hover:rgba(255,255,255,.10);
  --topbar-active:rgba(255,255,255,.18);
  /* Avatar: mesma familia de matiz do logo, porem claro — um azul escuro sobre
     a faixa escura sumiria. */
  --topbar-avatar:linear-gradient(135deg,#1b3d8f 0%,#2f5fc0 100%);

  /* Assinatura do portal na suite ACTAR (Comercial azul, Operacoes roxo,
     Suporte verde, Eventos laranja). Quer dizer "voce esta no Portal de
     Eventos" e mais nada: so em IDENTIDADE e NAVEGACAO (bolinha do nome do
     portal, barra do item ativo do menu). Status, alerta, tipo de evento e
     botao continuam nas paletas semanticas (--st-*, --warning...), mesmo
     sendo laranja parecido. Nunca como cor de texto: sobre branco da ~2,8:1. */
  --portal-accent:#EA7C17;

  /* Menu lateral com as cores de texto/hover/ativo do ERP (globals.css:
     --sidebar-foreground/-muted/-accent/-active). */
  --sidebar-fg:#3D4657; --sidebar-muted:#545D70; --sidebar-hover:#EDF0F7;
  --sidebar-active:rgb(7 104 215 / .20); --sidebar-active-fg:#0B1730;

  --sidebar-w:224px;  /* 16rem do ERP */
  --sidebar-w-collapsed:56px;
  --z-sidebar:40; --z-backdrop:35; --z-topbar:30; --z-menu:60; --z-progresso:80;
}

/* ── Dark mode ── */
[data-theme="dark"]{
  --bg:#121316; --card:#1a1c20; --surface:#1a1c20; --surface-2:#1f2126;
  /* Aqui entra a tinta CRUA do logo, nao a lavada. O veu lavado clareia o fundo
     — e o fundo escuro so tem ~1,09:1 de distancia para o card. Clarear come
     essa distancia inteira e o card some. O #021240 e o #451365 sao mais
     escuros que o #121316: passam a cor sem mexer no brilho. */
  --bg-gradient:
    radial-gradient(1100px 700px at 6% -12%,rgba(2,18,64,.13),transparent 62%),
    radial-gradient(900px 620px at 97% 2%,rgba(69,19,101,.10),transparent 58%),
    radial-gradient(1000px 560px at 50% 108%,rgba(2,18,64,.06),transparent 60%),
    var(--bg);
  /* Mesma tinta da marca, um degrau mais funda — no tema escuro o #021240
     cheio brilharia ao lado das superficies quase pretas. */
  --topbar-surface:#010b28;
  --topbar-border:rgba(255,255,255,.08);
  --on-topbar:#dfe5f4;
  --on-topbar-muted:#8592b3;
  --topbar-hover:rgba(255,255,255,.08);
  --topbar-active:rgba(255,255,255,.15);
  --topbar-avatar:linear-gradient(135deg,#16336f 0%,#2a539f 100%);
  --sidebar-fg:#A3ABBE; --sidebar-muted:#888FA3; --sidebar-hover:#1E2536;
  --sidebar-active:rgb(255 255 255 / .14); --sidebar-active-fg:#E7EDF9;
  --fg:#e2daee; --muted:#9488a8;
  --slate-50:#1a1825; --slate-100:#211f2e; --slate-200:#2c2a3d; --slate-300:#3d3a54;
  --slate-400:#6b6384; --slate-500:#9488a8; --slate-600:#b8aece; --slate-700:#d4cce2;
  --border:#2e2a3f; --border-strong:#3d3854;
  --primary:#9d5cd4; --primary-hover:#8748c2;
  --primary-50:#1e1630; --primary-100:#2a1e42; --primary-200:#3a2858;
  --primary-300:#533d7a; --primary-400:#7050a0; --primary-500:#8e67bc;
  --primary-600:#aa82d0; --primary-700:#c4a0e4; --primary-800:#d9bdf0; --primary-900:#edd9f8;
  --success:#4ade80; --success-bg:#0f2318;
  --warning:#fbbf24; --warning-bg:#271d04;
  --danger:#f87171;  --danger-bg:#2a0f0f;
  --info:#60a5fa;    --info-bg:#0f1e3a;
  --secondary:#818cf8; --secondary-bg:#1e1d3d;
  /* Fundo fundo, texto claro — o oposto do par do tema claro. O neutro nao
     aparece aqui porque o --slate-100/600 ja e redefinido acima. */
  --st-ok-bg:#163d28;     --st-ok-fg:#6ee7a8;
  --st-warn-bg:#3d2f0a;   --st-warn-fg:#fcd34d;
  --st-alerta-bg:#40230d; --st-alerta-fg:#fdba74;
  --st-perigo-bg:#41181c; --st-perigo-fg:#fca5a5;
  --st-info-bg:#0f3350;   --st-info-fg:#7dd3fc;
  --st-roxo-bg:#2f2350;   --st-roxo-fg:#c4b5fd;
  --st-indigo-bg:#252a55; --st-indigo-fg:#a5b4fc;
  --st-ok-bd:#245c3c; --st-warn-bd:#5c470f; --st-alerta-bd:#5e3413; --st-perigo-bd:#5f242a;
  --shadow-xs:0 1px 2px rgba(0,0,0,.5);
  --shadow-sm:0 1px 3px rgba(0,0,0,.6),0 1px 2px -1px rgba(0,0,0,.4);
  --shadow-md:0 4px 14px -3px rgba(0,0,0,.6),0 2px 6px -2px rgba(0,0,0,.4);
  --shadow-lg:0 16px 38px -10px rgba(0,0,0,.7),0 8px 18px -10px rgba(0,0,0,.5);
  --ring-cor:#c9a3f0;
  --ring:0 0 0 2px var(--card),0 0 0 4px var(--ring-cor);
}
/* Botões com background fixo em branco */
[data-theme="dark"] .btn-outline{background:var(--card)}
[data-theme="dark"] .btn-outline:hover{background:var(--primary-50)}
[data-theme="dark"] .btn-outline.danger:hover{background:var(--danger-bg)}
[data-theme="dark"] .btn-ghost-light{background:transparent}
[data-theme="dark"] .btn-ghost-light:hover{background:var(--surface-2)}
[data-theme="dark"] .pipe-filter select{background:var(--surface-2);color:var(--fg);border-color:var(--border-strong)}
[data-theme="dark"] .vg-icon-OVERDUE{background:var(--danger-bg)}
[data-theme="dark"] .afa-danger{background:var(--danger-bg)}
[data-theme="dark"] .afa-badge-ativ{background:var(--success-bg);color:var(--success)}
[data-theme="dark"] .kpi-success{background:var(--success-bg);color:var(--success)}
[data-theme="dark"] .kpi-warning{background:var(--warning-bg)}
[data-theme="dark"] .vg-icon-SOON{background:var(--warning-bg)}
[data-theme="dark"] .msg-bubble{background:var(--surface-2);border-color:var(--border)}
/* Inputs com background fixo em branco */
[data-theme="dark"] .form input,[data-theme="dark"] .form select,[data-theme="dark"] .form textarea,
[data-theme="dark"] .filters input,[data-theme="dark"] .filters select,
[data-theme="dark"] .field input,[data-theme="dark"] .field textarea,
[data-theme="dark"] .search input,
[data-theme="dark"] .cell-input{background:var(--surface-2);color:var(--fg);border-color:var(--border-strong)}
[data-theme="dark"] .cell-input:focus{background:var(--surface-2)}
/* Construtor de template de e-mail: campos soltos + editor RTE no escuro */
[data-theme="dark"] .email-tpl-form input[type="text"]{background:var(--surface-2);color:var(--fg);border:1px solid var(--border-strong);border-radius:var(--radius-sm)}
[data-theme="dark"] .rte-area{background:var(--surface-2);color:var(--fg)}
[data-theme="dark"] .rte-btn{color:var(--slate-600)}
[data-theme="dark"] .rte-btn:hover{background:var(--surface-2);border-color:var(--border-strong)}
[data-theme="dark"] ::placeholder{color:var(--slate-400)}
[data-theme="dark"] ::selection{background:var(--primary-200);color:var(--fg)}
/* Checkboxes / radios nativos: renderiza o controle no esquema escuro */
[data-theme="dark"] input[type="checkbox"],[data-theme="dark"] input[type="radio"]{color-scheme:dark;accent-color:var(--primary)}
/* Dialog / modal */
[data-theme="dark"] dialog{background:var(--card);color:var(--fg);border-color:var(--border)}
[data-theme="dark"] .menu-list{background:var(--card)}
[data-theme="dark"] .menu-list button.danger:hover{background:var(--danger-bg)}
/* Linhas de tabela alternadas */
[data-theme="dark"] .table tbody tr:hover{background:var(--surface-2)}
/* Scrollbar sutil */
[data-theme="dark"]{scrollbar-color:var(--border-strong) var(--bg)}
/* Tema toggle: mostra ícone correto */
.theme-ico-moon{display:inline-flex}
.theme-ico-sun{display:none}
[data-theme="dark"] .theme-ico-moon{display:none}
[data-theme="dark"] .theme-ico-sun{display:inline-flex}

*{box-sizing:border-box}
/* Quem nao define foco proprio (links, icon-btn, summary, checkbox) passa a ter
   rastro visivel de teclado; :focus-visible nao aparece no clique de mouse. */
:focus-visible{outline:2px solid var(--ring-cor);outline-offset:2px}
/* Pula o menu lateral: invisivel ate receber foco pelo teclado (A-12). */
.skip-link{position:absolute;left:-9999px;top:0;z-index:calc(var(--z-sidebar) + 20);
  background:var(--primary);color:#fff;padding:.6rem 1rem;border-radius:0 0 var(--radius-sm) 0;
  font-size:.85rem;font-weight:600;text-decoration:none}
.skip-link:focus{left:0}
main:focus{outline:0}
/* Fonte-raiz de todo o sistema, no `html` e nao so no `body`: `rem` mede contra
   a raiz, entao e daqui que os tokens de espaco e raio escalam junto com o
   texto. Com o valor so no `body` — como estava — mudava a letra e mais nada.
   14px e a raiz do Portal de Operacoes; os font-size em rem deste arquivo usam
   os mesmos valores nominais que os de la (.72/.8/.85/.9rem), entao e este
   numero que faz os dois desenharem do mesmo tamanho. */
html{font-size:14px;-webkit-text-size-adjust:100%}
/* O fundo fica preso a viewport: sem o `fixed` o degrade se estica na altura do
   documento e, numa tela de tabela longa, o veu de cima vira uma faixa no meio
   do caminho em vez de um canto iluminado. */
body{margin:0;background:var(--bg-gradient);background-attachment:fixed;
  color:var(--fg);font-family:var(--font-sans);
  font-size:var(--text-base);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{letter-spacing:-.014em;line-height:1.25}
/* Como no ERP: digito alinhado em toda tabela; .num = monoespacada (R$, data, telefone). */
th,td{font-variant-numeric:tabular-nums}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}
::selection{background:var(--primary-100);color:var(--primary-800)}

/* Utilitários */
.muted{color:var(--muted)} .small{font-size:var(--text-sm)} .right{text-align:right} .center{text-align:center}
.pad{padding:1.5rem} .row{display:flex;align-items:center} .gap{gap:var(--space-2)} .inline{display:inline}
.link{color:var(--primary);font-weight:500} .link:hover{text-decoration:underline}
/* O icone agora e um glifo de fonte (Remixicon), nao mais um <svg>: quem
   dimensiona e o font-size. O width/height continua junto porque o layout ja
   contava com essa caixa reservada dentro dos flex. */
i[class*="ri-"]{display:inline-flex;align-items:center;justify-content:center;
  line-height:1;vertical-align:middle;flex-shrink:0}
.ico{width:18px;height:18px;font-size:18px;flex-shrink:0}

/* ============================================================================
   APP SHELL — menu lateral fixo + área de conteúdo
   ============================================================================ */
.app-shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh;
  transition:grid-template-columns .22s cubic-bezier(.4,0,.2,1)}
.app-shell.sidebar-collapsed{grid-template-columns:var(--sidebar-w-collapsed) 1fr}
/* A coluna nao tem padding lateral: o recuo vive dentro de cada item, para que
   a faixa de hover/ativo sangre ate a borda — e assim que o Portal desenha. */
.sidebar{position:sticky;top:0;align-self:start;height:100vh;overflow:hidden;
  background:var(--card);border-right:1px solid var(--border);display:flex;flex-direction:column;
  padding:0;z-index:var(--z-sidebar)}

/* ---- Faixa da marca: mesma altura da topbar, para as duas se alinharem ---- */
.sidebar-brand{display:flex;align-items:center;justify-content:center;gap:.35rem;
  height:var(--topbar-h);flex-shrink:0;padding:0 .75rem;
  border-bottom:1px solid var(--border);transition:padding .22s cubic-bezier(.4,0,.2,1)}
.sidebar.collapsed .sidebar-brand{padding:0}
/* A marca e bem mais larga que alta (2048x712), entao quem limita e a altura. */
.brand-logo{display:block;width:100%;max-width:190px;height:auto;
  max-height:calc(var(--topbar-h) - 14px);object-fit:contain}
.sidebar.collapsed .brand-logo{display:none}
/* Recolhida: entra so o simbolo, tambem em duas tintas (o azul da marca
   sumiria no tema escuro). */
.brand-mark{display:none;width:30px;height:30px}
.sidebar.collapsed .mark-light{display:block}
[data-theme="dark"] .sidebar.collapsed .mark-light{display:none}
[data-theme="dark"] .sidebar.collapsed .mark-dark{display:block}
/* Swap claro/escuro da marca por extenso. */
img.logo-dark{display:none}
img.logo-light{display:block}
[data-theme="dark"] img.logo-light{display:none}
[data-theme="dark"] img.logo-dark{display:block}

/* So este bloco rola — a faixa da marca fica fora, para a barra de rolagem nao
   aparecer ao lado da logo. */
.sidebar-scroll{flex:1;min-height:0;display:flex;flex-direction:column;
  padding:.75rem 0 1.5rem;overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;scrollbar-color:transparent transparent}
.sidebar:hover .sidebar-scroll{scrollbar-color:var(--border-strong) transparent}

.side-label{display:flex;align-items:center;height:2rem;padding:0 1rem;
  font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.13em;
  color:var(--sidebar-muted);white-space:nowrap;transition:opacity .15s ease}
.sidebar.collapsed .side-label{opacity:0;height:0;padding:0;overflow:hidden}

.sidebar-portal-label{display:flex;align-items:center;justify-content:center;gap:.5rem;
  font-size:.875rem;font-weight:600;letter-spacing:.025em;
  color:var(--sidebar-fg);padding:0 .5rem .5rem;
  white-space:nowrap;overflow:hidden;transition:opacity .15s ease,max-height .22s ease;
  max-height:40px;opacity:1}
/* Bolinha da assinatura do portal ao lado do nome. O texto segue dizendo qual
   portal e — a cor so reforca. */
.portal-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--portal-accent)}
.sidebar.collapsed .sidebar-portal-label{opacity:0;max-height:0;padding:0}
/* Geometria do ERP: grupos com p-2 (gap-2 entre eles), itens de 38,5px (h-11)
   de parede a parede, recuo de 14px (px-4), icone de 17,5px (size-5) a 7px do
   texto (gap-2). */
.side-nav{display:flex;flex-direction:column;gap:.5rem}
.side-group{display:flex;flex-direction:column;gap:.25rem;padding:.5rem 0}
.side-link{display:flex;align-items:center;gap:.5rem;height:2.75rem;padding:0 1rem;
  border-radius:0;font-size:1rem;font-weight:400;color:var(--sidebar-fg);
  white-space:nowrap;overflow:hidden;position:relative;text-decoration:none;
  transition:background .15s ease,color .15s ease,padding .22s ease,justify-content .22s ease}
/* Icone lucide na cor do texto, como no ERP. A cor so aparece no ativo. */
.side-link .ico{width:1.25rem;height:1.25rem;font-size:1.25rem;flex-shrink:0;color:currentColor;transition:color .15s ease}
.side-link:hover{background:var(--sidebar-hover);color:var(--sidebar-active-fg)}
/* Ativo = faixa da suite (--sidebar-active) + semibold + fio de 3px e icone na
   cor do portal (ui.md §8.1 do ERP). Nunca o texto em laranja: ~2,8:1. */
.side-link.active{background:var(--sidebar-active);color:var(--sidebar-active-fg);font-weight:600;
  box-shadow:inset 3px 0 0 0 var(--portal-accent)}
.side-link.active .ico{color:var(--portal-accent)}
.side-link .side-badge{margin-left:auto}

/* ---- Sidebar recolhida ---- */
.sidebar.collapsed .side-link{justify-content:center;gap:0;padding:0}
.sidebar.collapsed .side-link.active{box-shadow:none}
.sidebar.collapsed .side-group{padding:.25rem 0}
.sidebar.collapsed .side-link span{display:none}

/* Recolhida, o rotulo vira tooltip — senao a coluna fica so com icones mudos. */
.sidebar.collapsed .side-link::after{content:attr(title);position:absolute;left:calc(100% + .5rem);
  top:50%;transform:translateY(-50%);background:var(--fg);color:var(--card);
  padding:.35rem .6rem;border-radius:var(--radius-sm);font-size:.75rem;font-weight:500;
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s ease;z-index:var(--z-menu)}
.sidebar.collapsed .side-link:hover::after,
.sidebar.collapsed .side-link:focus-visible::after{opacity:1}

.side-user{display:flex;align-items:center;gap:.55rem;padding:.35rem .5rem;border-radius:10px}
.side-user .user-meta{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.side-user .user-name{font-size:var(--text-sm);font-weight:600;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-user .user-role{font-size:var(--text-xs);color:var(--muted)}
.side-logout{margin-left:auto;flex-shrink:0}
.avatar{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;
  background:var(--primary);color:#fff;font-size:.78rem;font-weight:700;flex-shrink:0}

.app-main{flex:1;min-width:0;display:flex;flex-direction:column}
.nav-backdrop{display:none}
.content{padding:1rem 2.5rem 2rem;width:100%;max-width:1440px;margin:0 auto;flex:1}
.content-wide{padding-left:.75rem;padding-right:.75rem;max-width:none}

/* Topbar escura (padrao do Portal de Alocacao) — a faixa e a tinta da marca,
   nao o fundo do papel. Tudo que mora dentro dela e pintado com os tokens
   --on-topbar*, porque sobre o navy os tokens claros do resto do app somem. */
.app-topbar{display:flex;align-items:center;gap:1rem;position:sticky;top:0;z-index:var(--z-topbar);
  background:var(--topbar-surface);border-bottom:1px solid var(--topbar-border);
  color:var(--on-topbar);padding:0 1.5rem;height:var(--topbar-h);min-height:var(--topbar-h)}
.topbar-slot{flex:1;min-width:0;display:flex;align-items:center;gap:1rem}
.topbar-right{display:flex;align-items:center;gap:.75rem;flex-shrink:0}
/* Botao redondo sem moldura: o realce vem do overlay branco, nao de borda —
   borda clara sobre navy desenharia um aro que briga com o avatar. */
.topbar-icon{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:50%;
  border:0;background:transparent;color:var(--on-topbar-muted);cursor:pointer;transition:var(--transition)}
.topbar-icon:hover{background:var(--topbar-hover);color:var(--on-topbar)}
.topbar-icon.active{background:var(--topbar-active);color:var(--on-topbar)}
/* 18px e a medida do Portal de Alocacao. */
.topbar-icon .ico{width:1rem;height:1rem;font-size:1rem}
/* Tela cheia: "entrar" em repouso, "sair" quando a tela ja esta cheia. */
.fullscreen-toggle .fs-ico{display:inline-flex}
.fullscreen-toggle .fs-out{display:none}
.fullscreen-toggle.is-full .fs-in{display:none}
.fullscreen-toggle.is-full .fs-out{display:inline-flex}
/* Bloco do usuario nas medidas do Portal de Alocacao. Com o avatar a esquerda
   a folga maior passa para o lado do texto. E informacao, nao botao: sem fundo,
   sem hover — e sem a barra divisoria que havia aqui, que nao existe la. */
.topbar-user{display:flex;align-items:center;gap:.5rem;padding:.25rem .75rem .25rem .25rem;
  border-radius:999px;background:transparent;border:0}
.topbar-user-meta{display:flex;flex-direction:column;line-height:1.2;text-align:left}
.topbar-user .user-name{font-size:.85rem;font-weight:600;color:var(--on-topbar);
  max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-user .user-role{font-size:.72rem;font-weight:500;color:var(--on-topbar-muted)}
.topbar-logout{display:inline-flex;margin-left:.25rem}
.topbar-user .logout{display:inline-flex;align-items:center;gap:.3rem;border:0;background:transparent;
  color:var(--on-topbar-muted);font:inherit;font-size:.8rem;padding:.25rem .5rem;
  border-radius:var(--radius-md);cursor:pointer;transition:var(--transition)}
.topbar-user .logout .ico{width:16px;height:16px;font-size:16px}
.topbar-user .logout:hover{background:var(--topbar-active);color:var(--on-topbar)}
/* Empresa ativa (Etapa 1) — o seletor do ERP, nas cores da faixa. O <select>
   nativo fica transparente sobre a tinta da topbar; as opcoes voltam ao claro. */
.topbar-company{display:inline-flex;align-items:center;gap:.35rem;color:var(--on-topbar-muted);
  font-size:.82rem;font-weight:600;max-width:240px}
.topbar-company .ico{width:16px;height:16px;font-size:16px;flex-shrink:0}
.topbar-company span{color:var(--on-topbar);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-company select{min-width:0;max-width:200px;border:1px solid var(--topbar-border);border-radius:var(--radius-sm);
  background:transparent;color:var(--on-topbar);font:inherit;padding:.3rem .5rem;cursor:pointer}
.topbar-company select:hover,.topbar-company select:focus{background:var(--topbar-hover);outline:0}
.topbar-company option{color:var(--fg);background:var(--card)}
.topbar-user a.logout{text-decoration:none}
/* Escopado a topbar: o mesmo .avatar aparece na lista de usuarios, sobre card
   branco, onde o roxo continua certo. */
.topbar-user .avatar{background:var(--topbar-avatar)}
/* O nome da tela NAO entra na faixa: ele ja e' o titulo no alto da pagina, e
   repeti-lo aqui so roubava a largura da busca. */
/* ----------------------------------------------------------------------------
   Busca da topbar -- mesmo desenho do Portal de Operacoes.

   Antes o campo era uma pilula `background:var(--card)`, ou seja BRANCA, dentro
   da faixa azul da marca: um buraco de luz no meio da topbar, e a diferenca que
   mais saltava entre os dois sistemas. Aqui ele e' um veu claro sobre o azul.

   Sobre fundo escuro os controles nao herdam o formulario claro padrao -- dai
   o :hover/:focus explicitos, senao a regra generica de input passa na frente.
   ---------------------------------------------------------------------------- */
.topbar-search{display:flex;align-items:center;gap:.5rem;flex:0 1 420px;min-width:0;
  height:40px;padding:0 .5rem 0 .75rem;border-radius:var(--radius-md);
  background:var(--topbar-hover);border:1px solid transparent;transition:var(--transition)}
/* O foco marca pela borda, e nao clareando o fundo: com o fundo mais claro o
   placeholder cai abaixo do contraste minimo -- e e' justamente no campo
   focado e ainda vazio que ele precisa ser lido. */
.topbar-search:focus-within{border-color:var(--on-topbar-muted)}
.topbar-search .ico{width:18px;height:18px;font-size:18px;color:var(--on-topbar-muted);flex-shrink:0}
.topbar-search input,.topbar-search input:hover,.topbar-search input:focus{
  flex:1;width:auto;min-width:0;height:100%;margin:0;padding:0;border:0;outline:0;box-shadow:none;
  background:transparent;color:var(--on-topbar);font:inherit;font-size:var(--text-sm)}
.topbar-search input::placeholder{color:var(--on-topbar-muted);opacity:1}
/* O X nativo do WebKit sobraria ao lado do atalho. */
.topbar-search input::-webkit-search-cancel-button{display:none}
/* Atalho a vista, em vez de escondido. Sai da frente ao focar: quem ja esta
   digitando nao precisa mais dele, e o espaco vale mais para o termo. */
.topbar-search-kbd{font:inherit;font-size:.66rem;font-weight:700;letter-spacing:.04em;line-height:1;
  padding:.25rem .4rem;border-radius:var(--radius-sm);border:1px solid var(--topbar-border);
  color:var(--on-topbar-muted);white-space:nowrap;flex-shrink:0}
.topbar-search:focus-within .topbar-search-kbd,
.topbar-search.sem-alvo .topbar-search-kbd{display:none}
@media (max-width:640px){.topbar-search-kbd{display:none}}
/* Tela sem lista: a barra mantem a forma e o campo e' que se apaga -- diz
   "aqui nao ha o que buscar" sem sumir com o controle nem fingir que funciona.
   O placeholder nao desbota junto: e' ele que explica o campo apagado. */
.topbar-search.sem-alvo{background:transparent;border-color:var(--topbar-border)}
.topbar-search.sem-alvo .ico{opacity:.55}
.topbar-search.sem-alvo input{cursor:not-allowed}
@media (max-width:760px){.topbar-search{flex:1 1 auto}}

/* Controle segmentado (abas de filtro) */
.seg{display:inline-flex;align-items:center;gap:.15rem;background:var(--surface-2);border:1px solid var(--border);
  border-radius:999px;padding:.25rem;flex-wrap:wrap}
.seg a{padding:.3rem .7rem;border-radius:999px;font-size:var(--text-xs);font-weight:600;color:var(--muted);
  transition:var(--transition);white-space:nowrap}
.seg a:hover{color:var(--fg)}
.seg a.active{background:var(--card);color:var(--primary);box-shadow:var(--shadow-xs)}

/* Botão Sair no rodapé da sidebar */
.side-logout{width:100%;border:0;background:transparent;font:inherit;cursor:pointer;text-align:left;color:var(--danger)}
.side-logout .ico{color:var(--danger)}
.side-logout:hover{background:#fff1f2;color:#be123c}
.side-logout:hover .ico{color:#be123c}
.page-title{font-size:1rem;font-weight:700;margin:.1rem 0 .75rem;letter-spacing:-.01em;line-height:1.3}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.5rem}
.app-foot{text-align:center;padding:1.5rem 1rem;font-size:var(--text-xs);color:var(--slate-400)}

/* ── Manual de Ajuda ── */
.help-layout{display:grid;grid-template-columns:220px 1fr;gap:2rem;align-items:start}
.help-toc{position:sticky;top:calc(var(--topbar-h) + 1rem);display:flex;flex-direction:column;gap:2px}
.help-toc-title{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin:0 0 .4rem .4rem}
.help-toc a{font-size:.8rem;color:var(--muted);padding:.28rem .55rem;border-radius:var(--radius-xs);transition:var(--transition)}
.help-toc a:hover{color:var(--primary);background:var(--primary-50)}
.help-toc a.active{color:var(--primary);font-weight:600;background:var(--primary-50)}
.help-toc .toc-sub{padding-left:1.1rem;font-size:.76rem}
.help-content{min-width:0}
.help-section{margin-bottom:2.5rem;scroll-margin-top:calc(var(--topbar-h) + 1rem)}
.help-section h2{display:flex;align-items:center;gap:.5rem;font-size:1rem;color:var(--fg);border-bottom:1px solid var(--border);padding-bottom:.55rem;margin:0 0 1rem}
.help-section h2 .ico{width:16px;height:16px;font-size:16px;color:var(--primary);flex-shrink:0}
.help-section h3{font-size:.85rem;color:var(--primary);margin:1.2rem 0 .45rem;font-weight:600}
.help-section p,.help-section li{font-size:.85rem;color:var(--fg);line-height:1.7}
.help-section ul,.help-section ol{padding-left:1.4rem;margin:.35rem 0}
.help-section li{margin-bottom:.25rem}
.help-section code{background:var(--surface-2);border:1px solid var(--border);border-radius:4px;padding:.1rem .35rem;font-size:.8rem}
.help-tip{background:var(--primary-50);border-left:3px solid var(--primary);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:.65rem 1rem;margin:.85rem 0;font-size:.8rem;color:var(--fg)}
.help-tip strong{color:var(--primary)}
.help-badge{display:inline-block;padding:.15rem .55rem;border-radius:999px;font-size:var(--text-xs);font-weight:600}
.help-badge-admin{background:var(--primary-100);color:var(--primary-700)}
.help-badge-member{background:var(--info-bg);color:var(--info)}
.help-badge-comercial{background:var(--success-bg);color:var(--success)}
@media(max-width:860px){.help-layout{grid-template-columns:1fr}.help-toc{position:static}}
.app-foot a{color:var(--slate-400)}

/* Botao unico de 3 tracos, como no Portal: no desktop recolhe/expande a coluna;
   em telas estreitas abre o drawer por cima. Antes ele so existia no mobile e o
   desktop recolhia por um chevron escondido dentro da propria sidebar. */
.hamburger{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:0;
  background:transparent;color:var(--on-topbar);border-radius:var(--radius-sm);cursor:pointer;
  flex-shrink:0;transition:background var(--transition)}
.hamburger:hover{background:var(--topbar-active)}
.hamburger .ico{width:1.15rem;height:1.15rem;font-size:1.15rem}

/* ============================================================================
   CARDS / GRID
   ============================================================================ */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}
.card-head{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid var(--border)}
.card-head h3{margin:0;font-size:1.125rem;font-weight:650;letter-spacing:-.01em}
.grid{display:grid;gap:1rem}
.grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* Stat cards (dashboard) */
.stat{padding:1.15rem 1.25rem;transition:var(--transition)}
.stat:hover{box-shadow:var(--shadow-md)}
.stat-label{margin:0;font-size:var(--text-xs);color:var(--muted);font-weight:500;text-transform:uppercase;letter-spacing:.04em}
.stat-value{margin:.25rem 0 0;font-size:1.35rem;font-weight:700;letter-spacing:-.025em}
.stat-hint{margin:.2rem 0 0;font-size:var(--text-xs);color:var(--muted)}
.kpi-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}

/* KPI cards compactos (Visão geral do evento) */
.kpi-grid{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.kpi{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);padding:.85rem;box-shadow:var(--shadow-xs);transition:var(--transition)}
.kpi:hover{box-shadow:var(--shadow-sm)}
.kpi-label{font-size:var(--text-xs);color:var(--muted)}
.kpi-ic{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;flex-shrink:0}
.kpi-ic .ico{width:15px;height:15px;font-size:15px}
.kpi-value{margin:.4rem 0 0;font-size:1.05rem;font-weight:700;letter-spacing:-.01em}
.kpi-info{background:var(--info-bg);color:var(--info)}
.kpi-success{background:#ecfdf5;color:#047857}
.kpi-warning{background:#fffbeb;color:var(--warning)}
.kpi-muted{background:var(--slate-100);color:var(--slate-600)}
.kpi-primary{background:var(--primary-50);color:var(--primary)}

/* Link de RSVP */
.rsvp-card{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.rsvp-link{margin:.35rem 0 0;font-size:.85rem;color:var(--primary);word-break:break-all}
.min0{min-width:0}

/* Estágios do pipeline (cores) */
.badge.badge-NEGOTIATION{background:var(--st-warn-bg);color:var(--st-warn-fg)}
.badge.badge-WON{background:var(--st-ok-bg);color:var(--st-ok-fg)}
.badge.badge-LOST{background:var(--st-perigo-bg);color:var(--st-perigo-fg)}

/* ============================================================================
   EVENT CARDS
   ============================================================================ */
.event-grid{display:grid;gap:.85rem;grid-template-columns:1fr}
@media(min-width:640px){.event-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.event-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1280px){.event-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1536px){.event-grid{grid-template-columns:repeat(5,1fr)}}
.event-card{display:flex;flex-direction:column;border:1px solid var(--border);background:var(--card);
  border-radius:var(--radius-md);padding:1rem;box-shadow:var(--shadow-sm);transition:var(--transition);color:inherit;
  min-height:195px;overflow:hidden}
.event-card:hover{border-color:var(--primary-200);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.event-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;margin-bottom:.6rem;flex-shrink:0}
.event-name{margin:0;font-size:var(--text-sm);font-weight:650;line-height:1.3;flex-shrink:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.event-meta{display:flex;flex-direction:column;gap:.3rem;margin-top:.5rem;font-size:var(--text-xs);color:var(--muted);overflow:hidden;flex:1}
/* Badge de tipo (chip colorido em caixa-alta) */
.badge[class*="evt-"]{text-transform:uppercase;letter-spacing:.05em;font-size:.7rem;font-weight:700;padding:.25rem .55rem}
.badge.evt-LUNCH{background:var(--st-warn-bg);color:var(--st-warn-fg)}
.badge.evt-DINNER{background:var(--primary-50);color:var(--primary-700)}
.badge.evt-FAIR{background:var(--st-info-bg);color:var(--st-info-fg)}
.badge.evt-WEB{background:var(--st-indigo-bg);color:var(--st-indigo-fg)}
.badge.evt-OTHER{background:var(--st-neutro-bg);color:var(--st-neutro-fg)}
/* Dot do status no rodapé do card */
.event-foot .badge .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0}
/* Card "Novo Evento" (tracejado) */
.event-card-new{align-items:center;justify-content:center;text-align:center;gap:.6rem;
  border:2px dashed var(--border-strong);background:transparent;box-shadow:none;min-height:195px}
.event-card-new:hover{border-color:var(--primary-300);background:var(--primary-50);transform:none;box-shadow:none}
.event-card-new .nc-plus{width:54px;height:54px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--card);border:1px solid var(--border);color:var(--primary);box-shadow:var(--shadow-sm)}
.event-card-new .nc-plus .ico{width:24px;height:24px;font-size:24px}
.event-card-new h3{margin:0;font-size:1.05rem;font-weight:650;color:var(--fg)}
.event-card-new p{margin:0;font-size:var(--text-sm);color:var(--muted);max-width:200px}
.event-meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .8rem}
.mi{display:inline-flex;align-items:center;gap:.35rem;min-width:0}
.mi-ico{width:14px;height:14px;font-size:14px;flex-shrink:0;color:var(--primary-400)}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.event-foot{margin-top:auto;padding-top:.6rem;border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-shrink:0}
.badge.badge-outline{background:transparent;border:1px solid var(--border-strong);color:var(--muted)}
.badge-xs{font-size:.7rem;padding:.1rem .4rem}
/* Status com cor */
.badge.badge-PLANNING{background:var(--st-warn-bg);color:var(--st-warn-fg)}
.badge.badge-DONE{background:var(--st-ok-bg);color:var(--st-ok-fg)}
.badge.badge-CANCELLED{background:var(--st-perigo-bg);color:var(--st-perigo-fg)}
/* Status do convite (somente exibição) — uma cor por status */
.badge.inv-PENDING{background:var(--st-neutro-bg);color:var(--st-neutro-fg)}
.badge.inv-SENT{background:var(--st-info-bg);color:var(--st-info-fg)}
.badge.inv-CONFIRMED{background:var(--st-ok-bg);color:var(--st-ok-fg)}
.badge.inv-INSCRITO{background:var(--st-indigo-bg);color:var(--st-indigo-fg)}
.badge.inv-DECLINED{background:var(--st-perigo-bg);color:var(--st-perigo-fg)}
.badge.inv-ATTENDED{background:var(--st-roxo-bg);color:var(--st-roxo-fg)}
.badge.inv-NO_SHOW{background:var(--st-alerta-bg);color:var(--st-alerta-fg)}
/* Situação do checklist */
.badge.sit-DONE{background:var(--st-ok-bg);color:var(--st-ok-fg)}
.badge.sit-OVERDUE{background:var(--st-perigo-bg);color:var(--st-perigo-fg)}
.badge.sit-TODAY{background:var(--st-alerta-bg);color:var(--st-alerta-fg)}
.badge.sit-SOON{background:var(--st-warn-bg);color:var(--st-warn-fg)}
.badge.sit-ON_TRACK{background:var(--st-info-bg);color:var(--st-info-fg)}
.badge.sit-PENDING{background:var(--st-neutro-bg);color:var(--st-neutro-fg)}
.table-compact .badge[class*="sit-"]{font-size:.6rem;padding:.1rem .3rem}
/* Alertas do checklist */
.alerts{display:inline-flex;align-items:center;gap:.5rem}
.alert-sev{display:inline-flex;align-items:center;gap:.15rem;font-size:var(--text-xs);font-weight:700}
.alert-sev .ico{width:14px;height:14px;font-size:14px}
.alert-estourado{color:#dc2626} .alert-urgente{color:#ea580c} .alert-alerta{color:#d97706}

/* ============================================================================
   BADGES
   ============================================================================ */
.badge{display:inline-flex;align-items:center;gap:.25rem;padding:.18rem .55rem;border-radius:999px;
  background:var(--st-neutro-bg);color:var(--st-neutro-fg);font-size:var(--text-xs);font-weight:600;line-height:1.4}
.badge .ico{width:13px;height:13px;font-size:13px;flex-shrink:0}
.badge-status{background:var(--primary-50);color:var(--primary)}
.badge-actar{background:var(--st-roxo-bg);color:var(--st-roxo-fg);margin-left:.4rem}
.badge-competitor{background:var(--st-perigo-bg);color:var(--st-perigo-fg);margin-left:.4rem}
.badge-new{background:var(--st-ok-bg);color:var(--st-ok-fg);margin-left:.4rem}

/* ============================================================================
   TABLES
   ============================================================================ */
.table{width:100%;border-collapse:collapse;font-size:.88rem}
.table th{text-align:left;padding:.7rem 1rem;border-bottom:1px solid var(--border);color:var(--slate-500);
  font-weight:600;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.02em;vertical-align:middle}
.table td{padding:.7rem 1rem;border-bottom:1px solid var(--border);vertical-align:middle}
.table tbody tr{transition:background .12s}
.table tbody tr:hover{background:var(--surface-2)}
.table tr:last-child td{border-bottom:0}
.table td.right{text-align:right}
.table th.right{text-align:right}
/* Cabeçalho clicável para ordenar (aba Convidados) */
.table th.th-sort{cursor:pointer;user-select:none;transition:var(--transition)}
.table th.th-sort:hover{color:var(--primary)}
.table th.th-sort:focus-visible{outline:0;box-shadow:var(--ring);border-radius:var(--radius-sm)}
.table th.th-sort::after{content:"↕";margin-left:.3rem;font-size:.85em;opacity:.35}
.table th.th-sort[aria-sort="ascending"]::after{content:"↑";opacity:1;color:var(--primary)}
.table th.th-sort[aria-sort="descending"]::after{content:"↓";opacity:1;color:var(--primary)}
.table th.th-sort[aria-sort="ascending"],.table th.th-sort[aria-sort="descending"]{color:var(--primary)}
/* O titulo virou link de verdade (M-07, ordenacao no servidor): herda a cor do
   <th> para nao virar um link azul no meio do cabecalho, mas mantem o foco
   visivel -- quem navega por teclado precisa ver onde esta. */
.table th.th-sort a{color:inherit;text-decoration:none}
.table th.th-sort a:focus-visible{outline:0;box-shadow:var(--ring);border-radius:var(--radius-sm)}
.table td.center{text-align:center}
/* Colunas com largura fixa (alinhamento estável) */
/* Rolagem controlada + cabecalho fixo (M-12). A tabela larga esticava a pagina
   inteira e o cabecalho sumia na linha 30. Agora a rolagem mora na tabela e o
   thead gruda no topo dela — com box-shadow no lugar da borda, porque borda de
   celula sticky nao pinta em tabela com border-collapse. */
.table-scroll{overflow:auto;max-height:calc(100vh - var(--topbar-h) - 8rem)}
.table-scroll .table thead th{position:sticky;top:0;z-index:1;background:var(--card);
  box-shadow:inset 0 -1px 0 var(--border)}
.table-wide{min-width:1080px}
.table-fixed{table-layout:fixed}
.table-fixed td{overflow:hidden;text-overflow:ellipsis}
/* Relatório de Follow-ups (filtros + status) */
.fu-filtros{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:.75rem}
.fu-filtros label{display:flex;flex-direction:column;gap:.15rem;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.fu-filtros select{border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:.28rem .5rem;font:inherit;font-size:var(--text-xs);background:#fff;min-width:140px}
.badge.fu-andamento{background:var(--st-warn-bg);color:var(--st-warn-fg)}
.badge.fu-nao-iniciado{background:var(--st-neutro-bg);color:var(--st-neutro-fg)}
/* Barra do Pipeline (filtro de fase + exportar) */
.pipe-toolbar{display:flex;justify-content:space-between;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
.pipe-filter{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--muted)}
.pipe-filter select{border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:.4rem .6rem;font:inherit;font-size:.85rem;background:#fff}
/* ----------------------------------------------------------------------------
   Barra de filtros -- o funil abre e fecha os combos, no lugar do modal antigo.
   Mesmo desenho do SISTEMAALOCACAOPYTHON: a barra e' irma da tabela, nao uma
   janela por cima dela, entao da' para ver o que se esta recortando enquanto se
   escolhe. Sem `display` proprio de proposito -- o atributo `hidden` do HTML e'
   quem esconde, e o JS so o alterna.
   ---------------------------------------------------------------------------- */
.filter-bar{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:.85rem 1rem;margin:0 0 1rem;box-shadow:var(--shadow-xs)}
/* O numero de colunas vem da tela (--filtro-cols, no style do <form>): uma
   grade fixa de 4 deixaria buraco na tela que filtra por um campo so. */
.filter-bar form{display:grid;grid-template-columns:repeat(var(--filtro-cols,4),minmax(0,1fr)) auto;
  gap:.5rem .75rem;align-items:end}
.filter-bar label{display:block;font-size:var(--text-xs);font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted);margin-bottom:.2rem}
.filter-bar select,.filter-bar input{width:100%;border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);padding:.3rem .45rem;font:inherit;font-size:.82rem;height:2rem;
  background:var(--card);color:var(--fg);transition:var(--transition)}
.filter-bar select:focus,.filter-bar input:focus{outline:0;border-color:var(--primary);box-shadow:var(--ring)}
.filtro-acoes{display:flex;align-items:center;gap:.4rem}
.filtro-acoes .btn,.filtro-acoes .btn-outline{height:2rem}
/* Funil marcado: a barra pode estar fechada, e o recorte precisa aparecer
   mesmo assim -- os chips dizem o que, o funil diz que ha algo. */
.icon-btn.tem-filtro{color:var(--primary);background:var(--primary-50)}
@media (max-width:1100px){.filter-bar form{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.filter-bar form{grid-template-columns:1fr}}
/* Indicador de selecao da tabela de convidados: diz se o alcance e a pagina ou o recorte */
.sel-info{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--muted);
  background:var(--primary-50);border:1px solid var(--primary-200,var(--border));
  border-radius:var(--radius-pill,999px);padding:.25rem .65rem}
.sel-info strong{color:var(--primary-700,var(--primary))}
.sel-clear{background:none;border:0;padding:0;cursor:pointer;color:var(--primary);
  font:inherit;text-decoration:underline}
.sel-clear:hover{color:var(--primary-700,var(--primary))}
.sel-aviso{display:inline-flex;align-items:center;gap:.3rem;font-size:.8rem;font-weight:500;
  color:#b45309;background:var(--warning-bg);border:1px solid #fcd34d;border-radius:var(--radius-sm);padding:.25rem .55rem}
.sel-aviso:empty{display:none}
/* Oferta de ampliar a selecao para alem da pagina (e o caminho de volta) */
.sel-escopo{display:inline-flex;align-items:center;gap:.4rem;flex-wrap:wrap;font-size:.8rem;
  color:var(--muted);background:var(--warning-bg);border:1px dashed #fcd34d;
  border-radius:var(--radius-sm);padding:.25rem .55rem}
[data-theme="dark"] .sel-escopo{border-color:#78350f}
[data-theme="dark"] .sel-aviso{color:#fbbf24;border-color:#78350f}
/* Coluna Links (Convidados) — ícones de estado com tooltip no hover */
.link-icons{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.link-chip{display:inline-flex;cursor:default}
.link-ico{width:16px;height:16px;font-size:16px}
.li-ok{color:#16a34a}
.li-warn{color:#d97706}
.li-bad{color:#dc2626}
/* Tabela compacta (Convidados) */
.table-compact{font-size:.75rem}
.table-compact th{padding:.45rem .55rem;font-size:var(--text-xs)}
.table-compact td{padding:.45rem .55rem}
.table-compact .badge{font-size:.72rem}
.table-compact .small{font-size:.75rem}
/* Campo editável dentro da célula */
.cell-input{width:100%;border:1px solid transparent;border-radius:6px;padding:.35rem .5rem;font:inherit;font-size:.82rem;background:transparent;transition:var(--transition)}
.cell-input:hover{border-color:var(--border-strong)}
.cell-input:focus{outline:0;border-color:var(--primary);background:#fff;box-shadow:var(--ring)}

/* ============================================================================
   TABS (legado) + EVENT LATERAL NAV
   ============================================================================ */
.tabs{display:flex;flex-wrap:wrap;gap:.25rem;border:1px solid var(--border);border-radius:10px;padding:.3rem .4rem;background:var(--card);box-shadow:var(--shadow-xs);margin:1rem 0}
.tab{padding:.45rem .9rem;border-radius:7px;border-bottom:2px solid transparent;font-size:.9rem;font-weight:500;color:var(--muted)}
.tab:hover{color:var(--fg);background:var(--slate-100)} .tab.active{border-color:var(--primary);color:var(--primary);background:#fff;box-shadow:var(--shadow-xs)}

/* ============================================================================
   AFAZERES
   ============================================================================ */
.afa-group-head{display:flex;align-items:center;gap:.75rem;padding:.55rem .85rem;border-left:4px solid transparent;margin-bottom:0;border-radius:var(--radius-md) var(--radius-md) 0 0}
.afa-group-head + .card{border-top-left-radius:0;border-top-right-radius:0;border-top:0}
.afa-group-title{font-size:.9rem;font-weight:700}
.afa-count{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;background:var(--slate-100);color:var(--slate-500);padding:.15rem .5rem;border-radius:999px}
.afa-danger{background:#fff5f5;border-left-color:var(--danger)}
.afa-danger .afa-group-title{color:var(--danger)}
.afa-today-grp{background:var(--primary-50);border-left-color:var(--primary)}
.afa-today-grp .afa-group-title{color:var(--primary)}
.afa-muted{background:var(--surface-2);border-left-color:var(--border-strong)}
.afa-muted .afa-group-title{color:var(--fg)}
.afa-title{font-weight:500}
.afa-context{font-size:var(--text-xs)}
.afa-due-cell{font-size:.78rem;font-weight:500;color:var(--muted)}
.afa-overdue{color:var(--danger);font-weight:600}
.afa-duetoday{color:var(--primary);font-weight:600}
.afa-badge-reminder{background:var(--primary-50);color:var(--primary-700);display:inline-flex;align-items:center;gap:.3rem}
.afa-badge-reminder .ico{width:12px;height:12px;font-size:12px}
.afa-badge-ativ{background:#ecfdf5;color:#047857;display:inline-flex;align-items:center;gap:.3rem}
.afa-badge-ativ .ico{width:12px;height:12px;font-size:12px}
.afa-resp{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem}

/* Detalhe do evento: nav horizontal + corpo */
.ev-layout{display:flex;flex-direction:column;gap:.75rem;margin-top:.75rem}
.ev-nav{display:flex;flex-direction:row;gap:2px;background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius-md);padding:.3rem;
  overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap;box-shadow:var(--shadow-sm)}
.ev-nav::-webkit-scrollbar{display:none}
.ev-nav-item{display:inline-flex;align-items:center;gap:.4rem;padding:.38rem .65rem;
  border-radius:8px;white-space:nowrap;font-size:var(--text-xs);font-weight:500;
  color:var(--slate-600);transition:var(--transition);flex-shrink:0}
.ev-nav-item .ico{width:14px;height:14px;font-size:14px;flex-shrink:0}
.ev-nav-item:hover{background:var(--surface-2);color:var(--fg)}
.ev-nav-item.active{background:var(--primary-50);color:var(--primary-700);font-weight:600}
.ev-nav-item.active .ico{color:var(--primary)}
.ev-body{min-width:0}

/* ============================================================================
   BUTTONS
   ============================================================================ */
.btn,.btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;text-decoration:none;
  transition:var(--transition);white-space:nowrap}
.btn{background:var(--primary);color:#fff;border:0;border-radius:var(--radius-sm);padding:.55rem 1rem;font-size:.9rem;font-weight:550;cursor:pointer;box-shadow:var(--shadow-xs)}
.btn:hover{background:var(--primary-hover);box-shadow:var(--shadow-sm)}
.btn:focus-visible,.btn-outline:focus-visible{outline:0;box-shadow:var(--ring)}
.btn:active,.btn-outline:active{transform:translateY(1px)}
.btn-outline{background:#fff;border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:.55rem 1rem;font-size:.9rem;font-weight:500;cursor:pointer;color:var(--fg)}
.btn-outline:hover{border-color:var(--primary-300);background:var(--primary-50);color:var(--primary-700)}
.btn-outline.danger{color:var(--danger);border-color:#fecdd3}
.btn-outline.danger:hover{background:#fff1f2;color:#be123c}
.btn .ico,.btn-outline .ico{width:16px;height:16px;font-size:16px}
/* Botão compacto */
.btn-sm{padding:.38rem .7rem;font-size:.8rem;gap:.3rem}
.btn-sm .ico{width:14px;height:14px;font-size:14px}
/* Variantes de cor */
.btn-amber{background:#d97706;color:#fff;border:0}
.btn-amber:hover{background:#b45309}
.btn-blue{background:#2563eb;color:#fff;border:0}
.btn-blue:hover{background:#1d4ed8}
/* Menu dropdown (Ações em massa) */
.menu{position:relative;display:inline-block}
.menu > summary{list-style:none;cursor:pointer}
.menu > summary::-webkit-details-marker{display:none}
.menu-list{position:absolute;top:calc(100% + .35rem);left:0;z-index:var(--z-menu);min-width:210px;background:#fff;
  border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:.4rem;display:flex;flex-direction:column;
  animation:pop .14s ease}
.menu-list button,.menu-list a{display:block;text-align:left;background:transparent;border:0;border-radius:7px;padding:.5rem .6rem;font:inherit;font-size:.85rem;cursor:pointer;color:var(--fg);text-decoration:none;transition:var(--transition)}
.menu-list button:hover,.menu-list a:hover{background:var(--slate-100)}
.menu-list button.danger{color:var(--danger)} .menu-list button.danger:hover{background:#fff1f2}
.menu-row .menu-list{right:0;left:auto}
/* Menu de Notificação: separa visualmente o que dispara e-mail */
.menu-hint{display:flex;align-items:center;gap:.3rem;margin:.15rem 0 .2rem;padding:.15rem .6rem;
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.menu-hint .ico-xs{width:12px;height:12px;font-size:12px}
.menu-sep{height:1px;background:var(--border);margin:.35rem .3rem}
.menu-list button.notify{color:var(--warning);font-weight:500}
.menu-list button.notify:hover{background:var(--warning-bg)}
/* Acao fora da janela (ex.: convite depois do evento). Fica visivel e apagada,
   com o motivo no title -- some do menu a equipe so se perguntaria por que. */
.menu-list button:disabled,.menu-list button.notify:disabled{color:var(--muted);opacity:.6;cursor:not-allowed}
.menu-list button:disabled:hover,.menu-list button.notify:disabled:hover{background:transparent}
.icon-btn.icon-btn-notify:hover{background:var(--warning-bg);color:var(--warning)}
.table-fixed td.acts{overflow:visible}
.menu-row > summary{width:30px;height:30px}

/* Diálogo de confirmação de envio de e-mail (segunda confirmação) */
.notify-warn{display:flex;gap:.5rem;align-items:flex-start;margin:0 0 .85rem;padding:.6rem .7rem;
  background:var(--warning-bg);border:1px solid var(--warning);border-radius:var(--radius-sm);
  color:var(--warning);font-size:.82rem;line-height:1.4}
.notify-warn .ico{width:16px;height:16px;font-size:16px;flex:none;margin-top:.1rem}
.notify-list{margin:0;padding:0 0 0 1.1rem;max-height:190px;overflow:auto;font-size:.82rem;color:var(--fg)}
.notify-list li{margin:.15rem 0}
.notify-list li.optout{color:var(--muted);text-decoration:line-through}
.btn-notify{background:#b45309;color:#fff}
.btn-notify:hover{background:#92400e}
[data-theme="dark"] .btn-notify{background:#f59e0b;color:#1c1917}
[data-theme="dark"] .btn-notify:hover{background:#fbbf24}
/* Confirmacao destrutiva (exclusao): nunca usa o botao primario */
.danger-warn{display:flex;gap:.5rem;align-items:flex-start;margin:0 0 .85rem;padding:.6rem .7rem;
  border:1px solid var(--danger);border-radius:var(--radius-sm);background:var(--danger-bg);
  color:var(--danger);font-size:.83rem;line-height:1.35}
.danger-warn .ico{width:16px;height:16px;font-size:16px;flex:none;margin-top:.1rem}
.danger-type{display:block;margin:.85rem 0 0;font-size:.82rem;color:var(--muted)}
.danger-type input{margin-top:.3rem}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{background:#be123c}
.btn-danger:disabled{opacity:.5;cursor:not-allowed}
/* Botao desabilitado tem que parecer desabilitado — o `.btn-teste` do B-05
   trava enquanto a configuracao de e-mail esta suja. */
.btn:disabled,.btn-outline:disabled{opacity:.5;cursor:not-allowed}
.btn:disabled:hover{background:var(--primary);box-shadow:var(--shadow-xs)}
.btn-outline:disabled:hover{border-color:var(--border-strong);background:#fff;color:var(--fg)}
[data-theme="dark"] .btn-danger:hover{background:#f43f5e}

/* Botões de ícone (ações em linha de tabela) */
.row-actions{display:inline-flex;gap:.25rem;justify-content:flex-end;align-items:center}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:0;background:transparent;color:var(--muted);border-radius:7px;cursor:pointer;transition:var(--transition)}
.icon-btn:hover{background:var(--primary-50);color:var(--primary)}
.icon-btn.danger:hover{background:#fff1f2;color:var(--danger)}
.icon-btn .ico{width:16px;height:16px;font-size:16px}
/* Setas de reordenar: na ponta da lista nao ha para onde ir — o botao
   continua no lugar (a linha nao pula), mas apagado e sem hover. */
.icon-btn:disabled{opacity:.35;cursor:default}
.icon-btn:disabled:hover{background:transparent;color:var(--muted)}

.btn-ghost{background:transparent;border:0;color:var(--muted);cursor:pointer;font-size:.85rem;display:inline-flex;align-items:center;gap:.3rem;transition:var(--transition)}
.btn-ghost:hover{color:var(--danger)} .btn-ghost .ico{width:15px;height:15px;font-size:15px}
.btn-ghost-light{background:transparent;border:1px solid var(--border-strong);color:var(--slate-600);border-radius:var(--radius-sm);padding:.4rem .75rem;cursor:pointer;font-size:.85rem;transition:var(--transition)}
.btn-ghost-light:hover{background:var(--slate-100);color:var(--fg)}

/* ── Visão Geral do evento ───────────────────────────────────────── */
.vg-kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-bottom:.25rem}
.vg-kpi-grid .vg-kpi.card.pad{padding:.65rem .85rem}
.vg-kpi{display:flex;flex-direction:column;gap:.22rem}
.vg-kpi-label{font-size:var(--text-xs);font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.vg-kpi-row{display:flex;align-items:baseline;gap:.6rem}
.vg-kpi-big{font-size:1.35rem;font-weight:700;letter-spacing:-.03em;color:var(--fg);line-height:1}
.vg-kpi-total{font-size:1rem;font-weight:400;color:var(--muted)}
.vg-kpi-delta{font-size:.72rem;font-weight:600;padding:.15rem .4rem;border-radius:999px}
.vg-delta-success{background:#ecfdf5;color:#047857}
.vg-delta-warn{background:#fffbeb;color:#92400e}
.vg-bar{height:6px;border-radius:999px;background:var(--slate-100);overflow:hidden;margin:.1rem 0}
.vg-bar-fill{height:100%;border-radius:999px;transition:width .4s ease}
.vg-bar-primary{background:var(--primary)}
.vg-bar-blue{background:#3b82f6}
.vg-bar-amber{background:#f59e0b}
.vg-kpi-sub{font-size:.72rem}
.vg-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.85rem}
.vg-section-head{display:flex;align-items:center;justify-content:space-between;padding:.45rem .85rem;border-bottom:1px solid var(--border)}
.vg-section-title{display:inline-flex;align-items:center;gap:.35rem;font-size:.75rem;font-weight:600;color:var(--fg)}
.vg-section-title .ico{width:13px;height:13px;font-size:13px;color:var(--primary)}
.vg-tasks{display:flex;flex-direction:column;flex:1;overflow-y:auto}
.vg-task{display:flex;align-items:center;gap:.5rem;padding:.28rem .75rem;border-bottom:1px solid var(--border);transition:background .12s}
.vg-task:last-child{border-bottom:0}
.vg-task:hover{background:var(--surface-2)}
.vg-task .badge{font-size:.6rem;padding:.1rem .35rem}
.vg-task-icon{width:24px;height:24px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--primary-50)}
.vg-task-icon .ico{width:12px;height:12px;font-size:12px;color:var(--primary)}
.vg-icon-OVERDUE{background:#fff5f5}.vg-icon-OVERDUE .ico{color:var(--danger)}
.vg-icon-TODAY{background:var(--primary-50)}.vg-icon-TODAY .ico{color:var(--primary)}
.vg-icon-SOON{background:#fffbeb}.vg-icon-SOON .ico{color:#d97706}
.vg-task-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}
.vg-task-title{font-size:.75rem;font-weight:500;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vg-task-meta{font-size:.72rem}
@media(max-width:900px){.vg-kpi-grid{grid-template-columns:1fr}.vg-cols{grid-template-columns:1fr}}

/* ── Gantt v2 (Visão Geral) ─────────────────────────────────────── */
.g2-card{overflow:hidden;min-width:0;display:flex;flex-direction:column}
.g2-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem .85rem;border-bottom:1px solid var(--border)}
.g2-prog-lbl{font-size:.7rem;color:var(--muted)}
.g2-prog-lbl strong{color:var(--fg)}
.g2-scroll{overflow:auto;flex:1}
.g2-inner{min-width:max-content}
.g2-row{display:grid;border-top:1px solid var(--border)}
.g2-head{border-top:0;background:var(--surface-2)}
.g2-cell{padding:.4rem .5rem;font-size:.7rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g2-head .g2-cell{font-size:.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:.35rem .5rem}
.g2-center{text-align:center}
.g2-act{padding-left:.75rem}
.g2-done .g2-act{text-decoration:line-through;color:var(--muted)}
.g2-due{font-size:.72rem;color:var(--muted)}
.g2-avatar{width:22px;height:22px;border-radius:50%;background:var(--primary);color:#fff;font-size:.55rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;letter-spacing:0}
.g2-avatar-empty{background:var(--border);color:var(--muted);font-size:.6rem}
.g2-pct{font-size:.72rem;font-weight:600;padding:.1rem .3rem;border-radius:4px}
.g2-pct-done{background:#dcfce7;color:#15803d}
.g2-pct-pend{background:#f1f5f9;color:var(--muted)}
.g2-day{border-left:1px solid var(--border);text-align:center;font-size:9px;color:var(--muted);padding:.35rem 0;white-space:nowrap;writing-mode:vertical-rl;transform:rotate(180deg);height:36px;display:flex;align-items:center;justify-content:center}
.g2-eventday{background:#fffbeb}
.g2-daycell{position:relative;border-left:1px solid var(--border);min-height:30px;display:flex;align-items:center}
.g2-bar{position:absolute;inset:5px 2px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden}
.g2-bar-seg{position:absolute;inset:5px 0;opacity:.25}
.g2-bar-done,.g2-bar-seg.g2-bar-done{background:#16a34a}
.g2-bar-pend,.g2-bar-seg.g2-bar-pend{background:var(--primary)}
.g2-footer{display:flex;align-items:center;gap:1.25rem;padding:.4rem .85rem;border-top:1px solid var(--border);background:var(--surface-2)}
.g2-leg{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;color:var(--muted)}
.g2-leg-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.g2-dot-done{background:#16a34a}
.g2-dot-pend{background:var(--primary)}
.g2-dot-evt{background:#f59e0b}

/* Cabeçalho do evento */
.event-header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.event-header .ev-actions{display:flex;gap:.4rem;flex-shrink:0}
.event-header .ev-actions .btn-outline{padding:.3rem .65rem;font-size:.75rem}
.event-header .ev-actions .btn-outline .ico{width:13px;height:13px;font-size:13px}
.event-title-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.event-title-row h2{margin:0;font-size:1.1rem;font-weight:700;letter-spacing:-.02em}
.event-sub{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .75rem;margin:.35rem 0 0;font-size:.78rem;color:var(--muted)}
.event-sub span{display:inline-flex;align-items:center;gap:.3rem} .event-sub .ico{width:13px;height:13px;font-size:13px}

/* ============================================================================
   FORMS
   ============================================================================ */
.form{display:flex;flex-direction:column;gap:.9rem}
.form label{display:flex;flex-direction:column;gap:.35rem;font-size:.85rem;font-weight:550}
.form input,.form select,.form textarea{border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:.55rem .7rem;font:inherit;font-size:.9rem;background:#fff;color:var(--fg);transition:var(--transition)}
.form input::placeholder,.form textarea::placeholder{color:var(--slate-400)}
.form input:focus,.form select:focus,.form textarea:focus{outline:0;border-color:var(--primary);box-shadow:var(--ring)}
.form .check{flex-direction:row;align-items:center;gap:.5rem;font-weight:400}
.form-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.5rem}

/* Filtros (lista de eventos) */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.25rem;align-items:center}
.filters input,.filters select{border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:.5rem .65rem;font:inherit;font-size:.9rem;background:#fff;height:40px;transition:var(--transition)}
.filters .filter-search{flex:1;min-width:220px}
.filters input:focus,.filters select:focus{outline:0;border-color:var(--primary);box-shadow:var(--ring)}

/* ============================================================================
   LISTA PAGINADA -- chips de filtro e rodape (A-01/M-03)
   O filtro morava dentro do modal: fechado o modal, a tela ficava curta sem
   dizer por que. Os chips sao o filtro ativo em texto, cada um com o seu X.
   ============================================================================ */
/* A barra de recorte: busca, chips e o botao Filtrar sao UMA coisa so -- o que
   esta reduzindo a lista. Separados por meia tela, o usuario le a busca, esquece
   o filtro, e conclui que faltam registros. */
.lista-topo{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;margin:0 0 1rem}
.lista-topo .chips{margin:0;flex:1 1 auto}
/* O funil encosta na direita; os chips ocupam o resto. (A busca saiu daqui
   para a topbar, como no Portal de Operacoes.) */
.lista-topo>.btn-outline,.lista-topo>.filtro-funil{margin-left:auto;flex-shrink:0}
.lista-topo.pad{margin:0;padding:.75rem 1rem;border-bottom:1px solid var(--border)}

.chips{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:0 0 .75rem}
.chips-rot{display:inline-flex;align-items:center;gap:.3rem;font-size:var(--text-xs);font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.chips-rot svg{width:.8rem;height:.8rem}
.chip{display:inline-flex;align-items:center;gap:.3rem;max-width:22rem;padding:.2rem .5rem .2rem .6rem;
  border:1px solid var(--border-strong);border-radius:999px;background:var(--card);
  font-size:.78rem;color:var(--fg);text-decoration:none;transition:var(--transition)}
.chip:hover{border-color:var(--danger);color:var(--danger)}
.chip:focus-visible{outline:0;box-shadow:var(--ring)}
.chip-dim{color:var(--muted);font-weight:600}
.chip-dim::after{content:':'}
.chip-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip-x{width:.8rem;height:.8rem;font-size:.8rem;opacity:.55;flex:none}
.chip:hover .chip-x{opacity:1}
.chip-limpar{margin-left:.25rem;font-size:.78rem;color:var(--muted);text-decoration:underline}
.chip-limpar:hover{color:var(--primary)}
/* Rodape: a contagem primeiro, a navegacao depois -- a pergunta e 'quantos
   sao' antes de 'para onde vou'. */
.paginacao{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;
  margin-top:.25rem;padding:.75rem 1rem;border-top:1px solid var(--border)}
.pag-conta{margin:0;font-size:.82rem;color:var(--muted)}
.pag-conta strong{color:var(--fg);font-weight:650}
.pag-nav{display:inline-flex;align-items:center;gap:.25rem}
.pag-btn{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;
  padding:0 .55rem;border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  background:var(--card);font-size:.82rem;color:var(--fg);text-decoration:none;transition:var(--transition)}
.pag-btn:hover{border-color:var(--primary);color:var(--primary)}
.pag-btn:focus-visible{outline:0;box-shadow:var(--ring)}
.pag-btn.is-off{opacity:.4}
.pag-pos{padding:0 .5rem;font-size:.82rem;color:var(--muted);white-space:nowrap}

/* ============================================================================
   DIALOG / MODAL
   ============================================================================ */
.dialog{border:0;border-radius:var(--radius-lg);padding:1.6rem;max-width:560px;width:90%;box-shadow:var(--shadow-lg)}
.dialog[open]{animation:dialog-in .18s cubic-bezier(.4,0,.2,1)}
.dialog::backdrop{background:rgba(15,23,42,.45);backdrop-filter:blur(2px)}
.dialog h3{margin:0 0 1rem;font-size:1.1rem;font-weight:650}
/* Abas dentro de diálogo */
.dlg-tabs{display:flex;gap:.25rem;border-bottom:1px solid var(--border);margin-bottom:1rem}
.dlg-tab{background:transparent;border:0;border-bottom:2px solid transparent;padding:.5rem .9rem;font:inherit;font-size:.9rem;font-weight:500;color:var(--muted);cursor:pointer;margin-bottom:-1px;transition:var(--transition)}
.dlg-tab:hover{color:var(--fg)}
.dlg-tab.active{border-color:var(--primary);color:var(--primary)}

/* Flash — segue em uso INLINE nas paginas publicas (erro dentro do formulario,
   onde o aviso precisa ficar colado ao campo). No shell do app ele virou toast. */
.flash{margin:1rem 1.85rem 0;padding:.8rem 1rem;border-radius:var(--radius-sm);font-size:.8rem;font-weight:500;
  border:1px solid transparent;animation:pop .2s ease}
.flash-success{background:var(--success-bg);color:#047857;border-color:#a7f3d0}
.flash-error{background:var(--danger-bg);color:#be123c;border-color:#fecdd3}

/* Barra de carregamento (M-01). Acima de tudo, inclusive do menu aberto: ela
   avisa que a pagina inteira esta saindo. Indeterminada porque o servidor nao
   informa progresso -- uma barra que anda ate 90% e para mentiria sobre o que
   falta. O corpo solido ja e o sinal; o brilho que passa por cima so reforca.
   Com prefers-reduced-motion a regra global desliga a animacao e sobra a barra
   parada, que continua dizendo "aguarde" sem nada se mexendo. */
.progresso{position:fixed;top:0;left:0;right:0;height:3px;z-index:var(--z-progresso);
  background:var(--primary);overflow:hidden}
.progresso[hidden]{display:none}
.progresso::after{content:"";position:absolute;top:0;bottom:0;width:40%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  animation:progresso-passa 1.15s ease-in-out infinite}
@keyframes progresso-passa{from{left:-40%}to{left:100%}}
/* O texto existe para o leitor de tela: uma barra colorida nao anuncia nada. */
.progresso-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Cursor de espera enquanto a pagina sai -- o segundo sinal, para quem nao
   estava olhando para o topo da tela. */
html.carregando,html.carregando *{cursor:progress}

/* Selo de escopo (A-13). Diz de onde vem o numero do bloco quando o Dashboard
   esta filtrado por um evento. Nao e enfeite: sem ele, "Proximos eventos" e a
   tabela de desempenho aparecem ao lado de indicadores de um evento so, e os
   dois recortes viram um numero unico na cabeca de quem le. Cor nao informa
   sozinha -- o nome do escopo esta escrito no selo. */
.scope-tag{display:inline-flex;align-items:center;gap:.28rem;vertical-align:middle;
  padding:.1rem .45rem;border-radius:999px;border:1px solid var(--border);
  background:var(--card);color:var(--muted);
  font-size:.7rem;font-weight:600;line-height:1.5;text-transform:none;letter-spacing:0;
  max-width:16rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scope-tag svg{width:.72rem;height:.72rem;flex:none}
/* Escopo que contraria o filtro da tela: precisa saltar mais que o do bloco
   que simplesmente obedece. */
.scope-neutro{border-color:var(--warning);color:var(--warning)}
.scope-head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:0 0 .6rem}
.scope-head h3{margin:0;font-size:var(--text-xs);color:var(--muted);font-weight:600;
  text-transform:uppercase;letter-spacing:.04em}

/* Busca dentro de um select longo (A-17). A caixa de busca e acessorio: fica
   menor que o campo de verdade (o select logo abaixo), para nao disputar com
   ele a atencao de quem so quer abrir a lista. */
.sel-busca{width:100%;padding:.35rem .55rem;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--card);color:var(--fg);font:inherit;font-size:.8rem;font-weight:400}
.sel-busca::placeholder{color:var(--muted)}
.sel-busca-conta{font-size:.72rem;font-weight:400;color:var(--muted)}
.sel-busca-conta:empty{display:none}

/* Erro no campo (C-05). O motivo da recusa fica embaixo do campo que a causou,
   nao numa faixa longe dele. A cor sozinha nao informa (daltonismo): o texto diz
   o que houve e o aria-invalid marca o campo para o leitor de tela. */
.field-err{margin:.15rem 0 0;font-size:.78rem;font-weight:500;color:#be123c;line-height:1.35}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{
  border-color:#be123c;background:var(--danger-bg)}
input[aria-invalid="true"]:focus,select[aria-invalid="true"]:focus,textarea[aria-invalid="true"]:focus{
  border-color:#be123c}

/* Toast (A-05) — ancorado no canto inferior direito, onde alcanca quem acabou de
   agir no rodape de uma tabela longa. A faixa antiga nascia no topo do conteudo. */
.toast-wrap{position:fixed;right:1.25rem;bottom:1.25rem;z-index:var(--z-menu);
  display:flex;flex-direction:column;gap:.5rem;max-width:min(420px,calc(100vw - 2.5rem));pointer-events:none}
.toast{display:flex;align-items:flex-start;gap:.6rem;pointer-events:auto;
  padding:.75rem .85rem;border-radius:var(--radius-sm);border:1px solid transparent;
  background:var(--card);box-shadow:var(--shadow-lg);font-size:var(--text-sm);font-weight:500;
  transform:translateY(0);opacity:1;transition:opacity .18s ease,transform .18s ease;
  animation:toast-in .22s ease}
.toast-out{opacity:0;transform:translateY(.5rem)}
.toast .toast-ico{width:18px;height:18px;font-size:18px;flex:none;margin-top:.05rem}
.toast-msg{flex:1;min-width:0;line-height:1.45}
.toast-close{flex:none;border:0;background:transparent;cursor:pointer;padding:.1rem;border-radius:var(--radius-xs);
  color:currentColor;opacity:.6;transition:var(--transition)}
.toast-close:hover{opacity:1;background:rgba(0,0,0,.06)}
.toast-close .ico{width:15px;height:15px;font-size:15px}
/* Sinal de gravacao na propria linha (A-08). Fica ao lado do controle, nao no
   topo da tela: quem marcou a caixa esta olhando para a linha, nao para o
   cabecalho. Some sozinho; a versao de erro fica ate a linha ser recarregada. */
.save-pill{display:inline-block;margin-left:.4rem;padding:.05rem .35rem;border-radius:4px;
  font-size:.68rem;font-weight:600;letter-spacing:.02em;vertical-align:middle;
  background:var(--success-bg);color:#047857}
.save-pill-erro{background:var(--danger-bg);color:#be123c}
.row-out{opacity:0;transition:opacity .18s ease}

.toast-success{background:var(--success-bg);color:#047857;border-color:#a7f3d0}
.toast-error{background:var(--danger-bg);color:#be123c;border-color:#fecdd3}
@keyframes toast-in{from{opacity:0;transform:translateY(.6rem)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){.toast-wrap{left:1rem;right:1rem;bottom:1rem;max-width:none}}

/* Breadcrumb (M-06) — no lugar dos 10 links "Voltar" com rotulo proprio. */
.breadcrumb{margin:0 0 .8rem}
.breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;list-style:none;margin:0;padding:0}
.breadcrumb li{display:flex;align-items:center;gap:.4rem;font-size:var(--text-xs)}
.breadcrumb a{color:var(--muted);transition:var(--transition)}
.breadcrumb a:hover{color:var(--primary);text-decoration:underline}
.breadcrumb [aria-current="page"]{color:var(--fg);font-weight:600}
.bc-sep{color:var(--slate-400)}
@media(max-width:900px){.breadcrumb{margin-bottom:.6rem}}

/* Estado vazio (M-08) — antes era uma linha cinza que so dizia que nao havia
   nada. Agora diz por que esta vazio e oferece a acao que resolve. */
.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:.6rem;padding:2.75rem 1.5rem}
.empty-state .empty-ico{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;background:var(--surface-2);color:var(--muted)}
.empty-state .empty-ico .ico{width:21px;height:21px;font-size:21px}
.empty-title{font-size:var(--text-sm);font-weight:600;color:var(--fg);margin:0}
.empty-hint{font-size:var(--text-sm);color:var(--muted);margin:0;max-width:44ch;line-height:1.55}
.empty-state .btn,.empty-state .btn-outline{margin-top:.35rem}
/* Dentro de um card com pouca altura (coluna do dashboard), comprime. */
.card .empty-state{padding:2rem 1.25rem}

/* Dialogos compartilhados de confirmacao */
.confirm-dlg{max-width:420px}
.danger-dlg{max-width:480px}
.confirm-msg{margin:0 0 1rem;color:var(--muted)}
.danger-dlg .confirm-msg{margin:0 0 .5rem;color:var(--fg)}
.danger-dlg h3 .ico{color:var(--danger)}

/* ============================================================================
   KANBAN / CADASTRO / FLOW CARDS
   ============================================================================ */
.kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:900px){.kanban{grid-template-columns:1fr}}
.kanban-col{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-md);padding:.75rem;min-height:120px}
.kanban-head{display:flex;justify-content:space-between;font-weight:600;font-size:.75rem;margin-bottom:.5rem;padding:0 .25rem}
.kanban-amount{font-size:.7rem}
.opp-card{margin-bottom:.5rem;padding:.6rem .75rem;transition:var(--transition)}
.opp-card:hover{box-shadow:var(--shadow-md)}
.opp-title{margin:0;font-weight:600;font-size:.75rem} .opp-value{margin:0;color:var(--primary);font-weight:600;font-size:.75rem}
.opp-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}
.opp-card-meta{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.3rem;font-size:.7rem}
.cadastro-card{display:flex;align-items:flex-start;gap:.65rem;padding:.75rem .9rem;transition:var(--transition)}
.cadastro-card:hover{border-color:var(--primary-200);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.cadastro-ic{width:28px;height:28px;color:var(--primary)}
.cadastro-body{min-width:0}
.cadastro-card h3{margin:0;font-size:.82rem;font-weight:650}
.cadastro-card .muted{margin:.15rem 0 0;font-size:var(--text-xs)}

/* Login */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;
  background:linear-gradient(135deg,#ede9fe,#f8fafc,#cffafe)}
.login-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:2rem;width:100%;max-width:360px;
  box-shadow:0 10px 30px rgba(15,23,42,.1);text-align:center}
/* O nome do sistema agora vem depois da marca, nao no lugar dela. O seletor
   leva `img.` porque .login-logo e declarada aqui embaixo e, com a mesma
   especificidade, venceria o display:none do par oculto — as duas tintas
   apareceriam juntas. */
.login-logo{width:100%;max-width:220px;height:auto;margin:0 auto .9rem}
.login-brand{color:var(--primary);font-size:1.25rem;margin:0 0 .35rem;font-weight:700}
.login-card .form{margin-top:1.25rem;text-align:left}
.login-card .btn{width:100%;margin-top:.5rem}
.login-alert{margin:1rem 0 0;padding:.6rem .75rem;border-radius:var(--radius-sm);background:var(--danger-bg);
  color:#be123c;font-size:.85rem;font-weight:500;text-align:left}
.login-help{margin:1rem 0 0}
.conta-senha{max-width:420px}

/* ── Páginas públicas (RSVP / NPS) — visual moderno ── */
.pub-body{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:1.25rem;
  background:radial-gradient(1100px 560px at 50% -12%,rgba(67,20,98,.18),transparent),
             linear-gradient(160deg,#f5f3ff 0%,#f8fafc 45%,#ecfeff 100%)}
.nps-card{background:#fff;border:1px solid rgba(15,23,42,.06);border-radius:22px;width:100%;max-width:460px;overflow:hidden;
  box-shadow:0 24px 60px -20px rgba(67,20,98,.35),0 8px 24px -12px rgba(15,23,42,.15)}
.nps-head{position:relative;padding:1.75rem 1.6rem 1.55rem;color:#fff;overflow:hidden;
  background:linear-gradient(135deg,var(--primary) 0%,#6d28d9 58%,#7c3aed 100%)}
.nps-head::after{content:"";position:absolute;top:-45%;right:-12%;width:230px;height:230px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.20),transparent 70%)}
.nps-brand{display:inline-flex;align-items:center;gap:.4rem;font-size:.68rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;opacity:.9;margin:0 0 .65rem;position:relative}
.nps-brand .ico{width:15px;height:15px;font-size:15px}
.nps-sub{margin:0 0 .3rem;font-size:.78rem;opacity:.82;position:relative}
.nps-title{margin:0;font-size:1.45rem;font-weight:700;line-height:1.2;position:relative}
.pub-meta{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.95rem;position:relative}
.pub-meta span{display:inline-flex;align-items:center;gap:.35rem;font-size:.77rem;
  background:rgba(255,255,255,.16);padding:.3rem .62rem;border-radius:999px}
.pub-meta .ico{width:14px;height:14px;font-size:14px}
.nps-body{padding:1.6rem;display:flex;flex-direction:column;gap:1rem}
.nps-q{margin:0;font-weight:600;text-align:center;font-size:1.02rem;color:#0f172a}
/* Campos */
.field{display:flex;flex-direction:column;gap:.35rem;font-size:.82rem;font-weight:600;color:#475569}
.field input,.field textarea{font:inherit;font-weight:400;color:#0f172a;background:#f8fafc;width:100%;
  border:1px solid #e2e8f0;border-radius:11px;padding:.72rem .85rem;transition:border-color .15s,box-shadow .15s,background .15s}
.field input::placeholder,.field textarea::placeholder{color:#94a3b8}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--primary);background:#fff;
  box-shadow:0 0 0 4px rgba(67,20,98,.12)}
/* Estrelas NPS */
.nps-stars{display:flex;justify-content:center;gap:.5rem;padding:.25rem 0}
.nps-stars .star input{position:absolute;opacity:0;width:0;height:0}
.nps-stars .star span{font-size:2.6rem;color:#e2e8f0;cursor:pointer;transition:transform .12s,color .12s}
.nps-stars .star span:hover{transform:scale(1.12)}
.nps-stars .star.on span{color:#f59e0b}
.pub-scale{display:flex;justify-content:space-between;margin:-.4rem .2rem 0;font-size:.72rem;color:#94a3b8}
/* Botões RSVP */
.rsvp-actions{display:flex;flex-direction:column;gap:.6rem;margin-top:.25rem}
.rsvp-actions .btn,.rsvp-actions .btn-outline{width:100%;display:inline-flex;align-items:center;justify-content:center;
  gap:.45rem;padding:.82rem 1rem;border-radius:12px;font-weight:600;font-size:.95rem}
.rsvp-yes{background:linear-gradient(135deg,#16a34a,#15803d);border:0}
.rsvp-yes:hover{filter:brightness(1.06)}
.rsvp-no{color:#b91c1c;border:1px solid #fecaca;background:#fff}
.rsvp-no:hover{background:#fff1f2}
.rsvp-actions .ico{width:18px;height:18px;font-size:18px}
.nps-submit{width:100%;padding:.85rem;border-radius:12px;font-size:.95rem;font-weight:600}
/* Agradecimento */
.nps-thanks{text-align:center;align-items:center;gap:.55rem}
.pub-check{width:64px;height:64px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:#dcfce7;color:#16a34a}
.pub-check .ico{width:34px;height:34px;font-size:34px}
.pub-check-ok{width:52px;height:52px;background:#dcfce7;color:#16a34a;margin:0 auto .25rem}
.pub-check-ok .ico{width:26px;height:26px;font-size:26px}
.pub-check-warn{background:#fef3c7;color:#b45309}
/* Gate dos 4 dígitos */
.code-input{letter-spacing:.6em;text-align:center;font-size:1.4rem;font-weight:600;padding-left:1.1rem !important}
/* Consentimento LGPD (páginas públicas) */
.consent-check{display:flex;gap:.55rem;align-items:flex-start;font-size:.78rem;color:#64748b;
  line-height:1.45;background:#f8fafc;border:1px solid #e2e8f0;border-radius:11px;padding:.7rem .85rem;text-align:left}
.consent-check input{margin-top:.15rem;width:16px;height:16px;flex:0 0 auto;accent-color:var(--primary)}
/* Sub-status de convite na lista de convidados */
.rsvp-sub{font-size:.68rem;color:#94a3b8;margin-top:.2rem;display:flex;align-items:center;gap:.2rem}
.rsvp-sub-warn{color:#b45309}
.rsvp-sub .mi-ico{width:11px;height:11px;font-size:11px}
.nps-thanks h2{margin:0;font-size:1.2rem}
.pub-foot{text-align:center;font-size:.72rem;color:#94a3b8;padding:0 1.6rem 1.4rem}
.nps-stars-static span{font-size:2rem;color:#d1d5db} .nps-stars-static span.on{color:var(--primary)}
.nps-stars-inline span{color:#d1d5db;font-size:.95rem} .nps-stars-inline span.on{color:var(--primary)}
.nps-bar-row{display:flex;align-items:center;gap:.4rem;margin-top:.25rem;font-size:.7rem}
.nps-bar-label{width:1.4rem;text-align:right;color:var(--muted)}
.nps-bar{flex:1;height:6px;background:#f1f5f9;border-radius:99px;overflow:hidden}
.nps-bar-fill{height:6px;background:var(--primary);border-radius:99px}

/* Diversos Fase 3 */
.flow-card{display:flex;flex-direction:column;gap:.4rem;text-decoration:none;color:inherit;transition:var(--transition)}
.flow-card:hover{border-color:var(--primary-200);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.loglist{display:flex;flex-direction:column}
.logitem{padding:.75rem 1rem;border-bottom:1px solid var(--slate-100);font-size:.9rem}
.logitem:last-child{border-bottom:0}

.done-row td:nth-child(2){text-decoration:line-through;color:var(--muted)}

/* Cronograma (Gantt) do checklist */
.gantt-wrap > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;width:auto}
.gantt-wrap > summary::-webkit-details-marker{display:none}
.gantt-wrap > summary .ico{width:16px;height:16px;font-size:16px}
.gantt-row{display:grid;border-top:1px solid var(--border)}
.gantt-head{border-top:0;align-items:end}
.gantt-act{padding:.5rem;font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gantt-act.done{text-decoration:line-through;color:var(--muted)}
.gantt-head .gantt-act{font-size:.72rem;font-weight:600;color:var(--muted)}
.gantt-day{border-left:1px solid var(--border);text-align:center;font-size:10px;line-height:1.2;color:var(--muted);padding:.25rem 1px}
.gantt-cell{position:relative;border-left:1px solid var(--border);min-height:34px}
.gantt-eventday{background:#fffbeb}
.gantt-star{color:#f59e0b;font-size:.7rem}
.gantt-day .gantt-star{display:block}
.gantt-bar{position:absolute;left:1px;right:1px;top:8px;bottom:8px;border-radius:3px;background:var(--primary)}
.gantt-bar.done{background:#16a34a}

/* Selos de não-lidas */
.unread-badge,.tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;
  padding:0 6px;border-radius:99px;background:var(--danger);color:#fff;font-size:.7rem;font-weight:700;line-height:1}
.tab-badge{margin-left:.4rem;height:18px;min-width:18px}
.unread-badge{gap:.25rem}
.unread-badge .ico{width:13px;height:13px;font-size:13px}

/* Chat — thread (desktop e mobile) */
.d-thread{height:55vh;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.6rem;background:var(--surface-2)}
.msg-row{display:flex;justify-content:flex-start} .msg-row.mine{justify-content:flex-end}
.msg-bubble{max-width:78%;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:.5rem .7rem}
.msg-row.mine .msg-bubble{background:var(--primary);color:#fff;border-color:transparent}
.msg-sender{margin:0 0 .2rem;font-size:var(--text-xs);font-weight:700;opacity:.8}
.msg-body{margin:0;white-space:pre-wrap;word-break:break-word;font-size:.9rem}
.msg-time{margin:.25rem 0 0;font-size:.72rem;opacity:.6;text-align:right}
.msg-handle{margin-top:.35rem;text-align:right;border-top:1px solid var(--border);padding-top:.3rem}
.msg-handle button{font-size:.72rem;border:0;background:var(--slate-100);color:var(--muted);border-radius:6px;padding:.15rem .5rem;cursor:pointer}
.msg-handle button.on{background:var(--st-ok-bg);color:var(--st-ok-fg)}

/* App de celular */
.m-body{background:var(--bg);min-height:100vh;margin:0}
.m-top{background:var(--primary);color:#fff;padding:1rem;display:flex;align-items:center;justify-content:space-between;gap:.75rem;position:sticky;top:0;z-index:5}
.m-hi{margin:0;font-size:.78rem;opacity:.8} .m-title{margin:0;font-size:1.2rem}
.m-list{padding:1rem;display:flex;flex-direction:column;gap:.5rem}
.m-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1rem;display:flex;align-items:center;justify-content:space-between;text-decoration:none;color:inherit}
.m-card-name{margin:0;font-weight:600} .m-chevron{color:var(--muted);font-size:1.4rem}
.m-chat-body{display:flex;flex-direction:column;height:100dvh}
.m-back{color:#fff;text-decoration:none;font-size:1.4rem} .min0{min-width:0}
.m-chat-title{font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-thread{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.6rem}
.m-composer{background:var(--card);border-top:1px solid var(--border);padding:.6rem}
.m-composer-row{display:flex;gap:.4rem;align-items:center}
.m-composer-row input{flex:1;background:var(--surface);color:var(--fg);border:1px solid var(--border);border-radius:99px;padding:.6rem 1rem;font-size:.95rem}
.m-mic,.m-send{border:0;width:42px;height:42px;border-radius:50%;font-size:1.1rem;cursor:pointer;flex-shrink:0}
.m-mic{background:var(--slate-200)} .m-mic.rec{background:var(--danger);color:var(--card)} .m-send{background:var(--primary);color:#fff}
.m-audio-preview{display:flex;gap:.5rem;align-items:center;padding:.4rem 0}.m-audio-preview audio{flex:1}

/* Gráficos do dashboard (barras em CSS) */
.chart-legend{display:flex;gap:1rem;flex-wrap:wrap;font-size:.72rem;color:var(--muted);margin-bottom:1rem}
.chart-legend span{display:inline-flex;align-items:center;gap:.3rem}
.chart-legend i{width:11px;height:11px;border-radius:2px;display:inline-block}
.chart-row{margin-bottom:.9rem}
.chart-row:last-child{margin-bottom:0}
.chart-row-head{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;margin-bottom:.25rem}
.chart-row-name{font-size:.85rem;font-weight:600;color:#0f172a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chart-row-meta{font-size:.75rem;color:var(--muted);white-space:nowrap}
.chart-bar{display:flex;height:18px;background:#f1f5f9;border-radius:5px;overflow:hidden}
.chart-seg{height:100%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:#fff;min-width:0;overflow:hidden}
.chart-seg-go{background:#16a34a}
.chart-seg-no{background:#94a3b8}

/* Editor de texto rico (modelo de e-mail) */
/* Seletor do tipo de e-mail na aba Modelo de E-mail (Convite/Inscricao/NPS).
   O ponto marca o tipo que ja tem modelo salvo -- sem ele nao da para saber
   quais dos tres foram personalizados sem clicar em cada um. */
.tpl-kinds{display:flex;gap:.25rem;margin-bottom:1rem;border-bottom:1px solid var(--border)}
.tpl-kind{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .9rem;border:1px solid transparent;border-bottom:0;border-radius:var(--radius-sm) var(--radius-sm) 0 0;color:var(--muted);font-size:.8rem;font-weight:600;text-decoration:none;margin-bottom:-1px}
.tpl-kind:hover{color:var(--fg);background:var(--surface-2)}
.tpl-kind.on{color:var(--primary);background:var(--surface);border-color:var(--border);border-bottom:1px solid var(--surface)}
.tpl-kind-dot{width:6px;height:6px;border-radius:50%;background:var(--primary)}

.rte{display:flex;flex-direction:column;gap:.4rem}
.rte-label{font-size:.85rem;font-weight:600;color:#0f172a}
.rte-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem;padding:.35rem;border:1px solid var(--border);border-radius:8px 8px 0 0;background:var(--surface-2)}
.rte-btn{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 .4rem;border:1px solid transparent;border-radius:6px;background:transparent;color:#334155;font-size:.95rem;cursor:pointer;line-height:1}
.rte-btn:hover{background:#e2e8f0;border-color:var(--border)}
.rte-sep{width:1px;height:20px;background:var(--border);margin:0 .25rem}
.rte-insert{height:30px;padding:0 .4rem;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:#334155;font-size:.72rem;cursor:pointer}
/* A previa e um iframe: o e-mail nao herda nada do app, e o fundo segue branco
   mesmo no tema escuro — como sera no cliente de e-mail. */
.tpl-preview{display:block;width:100%;max-width:640px;min-height:340px;border:1px solid var(--border);border-radius:var(--radius-md);background:#fff;overflow:hidden}
/* Aba "Modelo de e-mail": escrever a esquerda, ver a direita, na mesma tela. */
.tpl-editor{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 1rem;align-items:start}
.tpl-col{min-width:0}
.tpl-card{margin:0 0 1rem}
.tpl-h{margin:0 0 .75rem;font-size:1rem}
.tpl-input{width:100%;font-size:.8rem;padding:.45rem .75rem}
.tpl-hint{margin:.5rem 0 0}
.tpl-lbl{font-size:.72rem}
.tpl-status{margin:0 0 1rem}
.tpl-head-line{margin:0 0 .35rem}
.tpl-img-row{align-items:center;flex-wrap:wrap;margin-top:.75rem}
.tpl-img-prev{max-width:240px;border:1px solid var(--border);border-radius:var(--radius-md)}
/* A previa acompanha a rolagem: e o motivo de estar olhando para esta tela. */
.tpl-sticky{position:sticky;top:calc(var(--topbar-h) + 1rem)}
.tpl-more>summary{cursor:pointer;font-size:1rem;font-weight:600;list-style:none}
.tpl-more>summary::-webkit-details-marker{display:none}
.tpl-more>summary::before{content:"\25B8";margin-right:.4rem;font-size:.8em;color:var(--muted)}
.tpl-more[open]>summary{margin-bottom:.75rem}
.tpl-more[open]>summary::before{content:"\25BE"}
.tpl-bar{grid-column:1/-1;position:sticky;bottom:0;z-index:2;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.5rem;padding:.75rem 0;margin-bottom:1rem;background:var(--bg);border-top:1px solid var(--border)}
/* So existe para o data-confirm ter um form proprio; nao ocupa espaco. */
.tpl-reset-form{display:none}
/* Coluna unica antes de a previa ficar estreita demais para valer a pena. */
@media (max-width:1100px){.tpl-editor{grid-template-columns:1fr}.tpl-sticky{position:static}}
.rte-color{position:relative;font-weight:700}
.rte-color input[type="color"]{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.rte-hilite{background:#fff3a3}
.rte-hilite .rte-hilite-a{color:#1f2937}
.rte-area{min-height:140px;padding:.75rem .85rem;border:1px solid var(--border);border-top:none;border-radius:0 0 8px 8px;background:#fff;font-size:.95rem;line-height:1.6;overflow-y:auto}
.rte-area:focus{outline:none;box-shadow:inset 0 0 0 2px rgba(59,130,246,.25)}
.rte-area:empty::before{content:attr(data-placeholder);color:var(--muted)}

/* ============================================================================
   STATUS FORA DO BADGE (M-10) — caixas de aviso, valores e marcacoes
   Nasceram como style= inline com cor crua, o que as deixava de fora do tema:
   fundo pastel claro continuava pastel claro no escuro. Aqui usam os mesmos
   tokens --st-* dos badges, entao viram junto com o tema.
   ============================================================================ */
.nota-ok,.nota-warn,.nota-alerta,.nota-perigo{border:1px solid;border-radius:8px}
.nota-ok{background:var(--st-ok-bg);border-color:var(--st-ok-bd)}
.nota-warn{background:var(--st-warn-bg);border-color:var(--st-warn-bd)}
.nota-alerta{background:var(--st-alerta-bg);border-color:var(--st-alerta-bd)}
.nota-perigo{background:var(--st-perigo-bg);border-color:var(--st-perigo-bd)}
/* Variante com a cor so na lateral — usada na lista de pendencias do follow-up,
   onde uma caixa cheia por item deixaria a coluna pesada demais. */
.nota-warn-l{background:var(--st-warn-bg);border-left:3px solid var(--st-warn-bd);border-radius:4px}

/* Valor monetario com sinal (Dashboard): verde entra, vermelho sai. */
.val-pos{color:var(--st-ok-fg)}
.val-neg{color:var(--st-perigo-fg)}

/* Estado escrito por extenso, fora do badge (etapas do follow-up). */
.est-ok{color:var(--st-ok-fg)}
.est-andamento{color:var(--st-warn-fg)}
.est-bloqueada{color:var(--muted)}
.est-ok,.est-andamento,.est-bloqueada{font-size:.78rem;font-weight:600;white-space:nowrap}
.feito{text-decoration:line-through;color:var(--muted)}

/* Marcacao de Account Manager na lista de usuarios. */
.badge-am{background:var(--st-info-bg);color:var(--st-info-fg);margin-left:.3rem}
/* Etiqueta OBZ no cabecalho do evento. */
.tag-obz{color:var(--st-info-fg)}
/* Previa do convidado no seletor de convites. */
.te-preview{background:var(--surface-2);border-radius:8px;padding:.65rem 1rem;margin:.5rem 0;font-size:.85rem}
/* Link do rodape das paginas publicas (herda a cor do rodape). */
.pub-link{color:inherit;text-decoration:underline}

/* ============================================================================
   PAGINAS DE ERRO (403 / 404 / 500)
   ============================================================================ */
.err{max-width:560px;margin:3rem auto;text-align:center}
.err-ico{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;
  border-radius:50%;background:var(--primary-50);color:var(--primary);margin-bottom:1rem}
.err-ico .ico{width:26px;height:26px;font-size:26px}
.err-ico.danger{background:var(--danger-bg);color:var(--danger)}
.err-cod{margin:0 0 .35rem;font-size:var(--text-sm);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.err h2{margin:0 0 .6rem;font-size:1.35rem;letter-spacing:-.01em}
.err p.muted{margin:0 auto;max-width:48ch;line-height:1.6}
.err-acoes{display:flex;gap:var(--space-2);justify-content:center;flex-wrap:wrap;margin-top:1.5rem}

/* Realce de quem acabou de mudar de lugar (B-04). A lista reordena sem
   recarregar; sem um sinal, o cartao troca de posicao sem nada dizer que foi
   ESTE que se moveu. O @media de movimento reduzido (fim do arquivo) desliga. */
@keyframes reorder-flash{from{background:var(--primary-50)}to{background:var(--card)}}
.reorder-flash{animation:reorder-flash .9s ease-out}

/* ============================================================================
   ANIMAÇÕES / RESPONSIVO DO SHELL
   ============================================================================ */
@keyframes dialog-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes drawer-in{from{transform:translateX(-100%)}to{transform:none}}

@media(max-width:900px){
  .app-shell,.app-shell.sidebar-collapsed{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;height:100dvh;width:var(--sidebar-w);transform:translateX(-100%);transition:transform .22s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow-lg)}
  /* O drawer sempre abre por extenso. Sem isto, quem tivesse deixado a coluna
     recolhida no desktop receberia no celular uma gaveta de 56px so com icones:
     o estado recolhido persiste no localStorage e nao sabe do breakpoint. */
  .sidebar.collapsed{width:var(--sidebar-w)}
  .sidebar.collapsed .brand-logo{display:block}
  .sidebar.collapsed .brand-mark{display:none}
  .sidebar.collapsed .side-link{justify-content:flex-start;gap:.5rem;padding:0 1rem}
  .sidebar.collapsed .side-link.active{box-shadow:inset 3px 0 0 0 var(--portal-accent)}
  .sidebar.collapsed .side-link span{display:inline}
  .sidebar.collapsed .side-link::after{content:none}
  .sidebar.collapsed .side-label{opacity:1;height:2rem;padding:0 1rem}
  .sidebar.collapsed .side-group{padding:.5rem 0}
  .sidebar.collapsed .sidebar-portal-label{opacity:1;max-height:40px;padding:0 .5rem .5rem}
  body.nav-open .sidebar{transform:none}
  body.nav-open .nav-backdrop{display:block;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:var(--z-backdrop);backdrop-filter:blur(1px)}
  .app-topbar{padding:0 .85rem;gap:.6rem}
  .topbar-icon{display:none}
  .topbar-user-meta{display:none}
  .topbar-company span{display:none}
  .topbar-company select{max-width:130px}
  .topbar-user{padding:0}
  /* Sem o nome ao lado, "Sair" fica so no icone — o rotulo roubaria a largura. */
  .topbar-user .logout span{display:none}
  /* Estreito: a busca toma a faixa toda. */
  .topbar-search{flex:1 1 auto}
  .content{padding:1.25rem 1rem}
  .flash{margin:1rem 1rem 0}
}

/* Movimento reduzido (M-14). O seletor universal nao alcanca pseudo-elemento
   nem o ::backdrop do <dialog> — justamente onde estao o fade do fundo do modal
   e o "pop" do menu. Sem eles, quem pediu menos movimento continuava recebendo
   o modal aparecendo com animacao. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after,dialog::backdrop{
    transition:none !important;animation:none !important;scroll-behavior:auto !important}
  html{scroll-behavior:auto !important}
}

/* -- Busca no CRM do ERP (Etapa 3 - templates/_crm.html) -- */
.crm-busca { margin: 0 0 .75rem; padding: .6rem .75rem; border: 1px dashed var(--border-strong); border-radius: 8px; }
.crm-busca .crm-dica { margin: .35rem 0 0; }
.crm-res { list-style: none; margin: .35rem 0 0; padding: 0; max-height: 220px; overflow-y: auto;
  border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); }
.crm-res li + li { border-top: 1px solid var(--border); }
.crm-res button { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; width: 100%;
  padding: .45rem .6rem; background: none; border: 0; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.crm-res button:hover, .crm-res button:focus-visible { background: var(--surface-2); }
.crm-res .crm-vazio { padding: .45rem .6rem; }
.crm-ligado { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.crm-ligado p { flex-basis: 100%; margin: 0; }
input.crm-travado { background: var(--surface-2); color: var(--muted); }
.badge.badge-crm { background: var(--st-ok-bg); color: var(--st-ok-fg); }
.badge.badge-fora-crm { background: var(--st-warn-bg); color: var(--st-warn-fg); }