/* ============================================================
   CORES DA MARCA — Grupo Amorim Fonecar (paleta oficial)
   ============================================================
   Layout v2: toggle claro/escuro restaurado (pedido do Mauricio, depois
   do passo 3 ter deixado só escuro fixo) -- :root abaixo volta a ser o
   tema CLARO padrão, com [data-bs-theme="dark"] sobrescrevendo pro
   escuro (mesmo padrão que .badge-etapa-* já usava e nunca mudou, ver
   mais abaixo). theme.js decide qual data-bs-theme aplicar (padrão
   "dark" pra quem nunca alternou -- ver theme.js). Tokens que só
   referenciam outro var() (--borda-suave, --brand-primary, --accent...)
   não precisam de versão por tema -- eles resolvem sozinhos pro valor
   ativo no cascade. Só tokens com cor fixa que realmente muda por tema
   estão duplicados abaixo. */
:root {
    --marca-azul: #4365BA;
    --marca-amarelo: #FCE100;
    --marca-preto: #000000;
    --sidebar-bg: var(--marca-azul);
    --sidebar-text: #E6EAF7;
    --sidebar-active-bg: var(--marca-amarelo);
    --sidebar-active-text: var(--marca-azul);

    /* Variáveis antigas mantidas (usadas em várias regras abaixo) apontando
       para a paleta nova, para não precisar reescrever cada uso */
    --brand-primary: var(--marca-azul);
    --brand-primary-dark: #35519a;
    --brand-accent: var(--marca-amarelo);
    --brand-accent-text: var(--marca-azul); /* texto sobre o amarelo */
    /* Alias do token --accent do mockup -- aqui aponta pro azul de marca,
       não pro #6c8cff original do v2 (decisão consciente do passo 1, pra
       manter a identidade visual que aparece nos logos das 7 empresas) */
    --accent: var(--marca-azul);

    --bg: #f3f4f8;
    --bg-accent-glow: rgba(67, 101, 186, 0.08);
    --surface: #ffffff;
    /* Equivalente ao --panel-2 do mockup -- painel "elevado" dentro de um
       --surface (ex: linha de tabela em destaque, sub-card). */
    --surface-2: #eef1f6;
    --text: #1a1d29;
    --text-muted: #6b7280;
    /* 3º nível de texto do mockup (--text-faint) -- mais apagado que
       --text-muted, pra legendas/placeholders. */
    --text-faint: #9aa1ad;
    --border: #e8e9ee;
    --shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.04), 0 1px 1px rgba(17, 17, 17, 0.03);
    --shadow-md: 0 6px 20px rgba(17, 17, 17, 0.06);

    /* Refino visual (estilo HubSpot): cartões mais respirados, sombra
       discreta em vez de borda pesada, cor de marca só como destaque
       pontual (ver uso em .card/.btn/.opp-card abaixo) */
    --radius-card: 12px;
    --radius-botao: 8px;
    /* Radius genérico do mockup, pros componentes novos (.plate, .chip-v2
       etc.) que ainda não foram trazidos nesta etapa */
    --radius: 10px;
    --sombra-card: 0 1px 3px rgba(17, 17, 17, 0.08), 0 1px 2px rgba(17, 17, 17, 0.04);
    --sombra-card-hover: 0 4px 12px rgba(17, 17, 17, 0.10);
    --borda-suave: 1px solid var(--border);
    --espaco-card: 20px;
    /* --border é sutil demais para bordas de campo (quase some no branco
       do --surface); campos de formulário usam este tom mais escuro */
    --border-campo: #c7cbd6;
    /* Barra "vendas realizadas" do gráfico temporal do BI */
    --cor-barra-grafico: #4365BA;

    /* Status semânticos do mockup v2 -- usados em .status-chip, cards de
       indicador etc. desde o passo 3. */
    --ok: #1f7a4d;
    --ok-dim: #D9F2E3;
    --warn: #8a6d00;
    --warn-dim: #FFF6C2;
    --bad: #b3261e;
    --bad-dim: #FCE0E0;

    /* Tipografia do mockup v2: título (Space Grotesk), corpo (Inter, já
       era a fonte usada -- nomeada aqui pra consistência) e dado/código
       (IBM Plex Mono, pra SKU/CNPJ/valores). Mesma fonte nos dois temas. */
    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
}

[data-bs-theme="dark"] {
    --sidebar-bg: var(--surface);
    --sidebar-text: var(--text-muted);
    --sidebar-active-bg: var(--surface-2);
    --sidebar-active-text: var(--text);

    --bg: #12161d;
    --bg-accent-glow: rgba(67, 101, 186, 0.10);
    --surface: #1a212b;
    --surface-2: #1f2733;
    --text: #edeff3;
    --text-muted: #8993a4;
    --text-faint: #5c6576;
    --border: #2a3341;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.35);

    /* Sombra preta quase não aparece em fundo já escuro — no hover, um
       leve brilho de borda clara comunica "elevado" melhor que sombra */
    --sombra-card: 0 1px 2px rgba(0, 0, 0, 0.25);
    --sombra-card-hover: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 20px rgba(0, 0, 0, 0.35);
    /* No escuro --border já contrasta bem com --surface */
    --border-campo: var(--border);
    /* Azul de marca padrão fica apagado no escuro -- versão mais clara/
       saturada pra manter contraste contra --surface escuro */
    --cor-barra-grafico: #6f93e8;

    --ok: #2fa891;
    --ok-dim: #1d5a4d;
    --warn: #e8a544;
    --warn-dim: #6b5024;
    --bad: #e15b52;
    --bad-dim: #5f2c28;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    background:
        radial-gradient(1100px 500px at 15% -10%, var(--bg-accent-glow), transparent 60%),
        var(--bg);
    background-attachment: fixed;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 14px;
    transition: background 0.2s ease, color 0.2s ease;
    -webkit-font-smoothing: antialiased;
}

/* Space Grotesk nos títulos (sistema de design do layout v2) -- letras
   maiúsculas/números ficam com mais presença que o Inter do corpo */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); letter-spacing: -0.01em; }

/* TIPOGRAFIA — título de página 20px, texto 14px (já no body), texto
   secundário 12-13px. h3/h4 são os títulos de página usados nas telas hoje. */
.app-content main h3,
.app-content main h4 {
    font-size: 20px;
    font-weight: 700;
}

.app-content main h5,
.app-content main h6 {
    font-size: 15px;
    font-weight: 600;
}

/* ============================================================
   APP SHELL — sidebar fixa à esquerda + topbar com os dois logos
   ============================================================ */
.app-shell {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
}

.sidebar {
    width: 220px;
    flex-shrink: 0;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    transition: width 0.15s ease;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 18px 16px;
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: -0.02em;
    /* rgba branco (não var(--border)) de propósito -- a lateral pode ter
       fundo azul de marca (claro) ou --surface escuro (escuro), e um
       overlay branco translúcido funciona nos dois sem precisar de regra
       por tema. */
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    white-space: nowrap;
    overflow: hidden;
}

.sidebar-nav {
    flex: 1;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-nav .nav-link {
    color: var(--sidebar-text) !important;
    font-weight: 500;
    font-size: 0.92rem;
    border-radius: 8px;
    padding: 9px 12px !important;
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    overflow: hidden;
    transition: background 0.15s ease, color 0.15s ease;
}

.sidebar-nav .nav-link i {
    font-size: 1rem;
    width: 18px;
    text-align: center;
    opacity: 0.9;
    flex-shrink: 0;
}

.sidebar-nav .nav-link:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff !important;
}

/* Item ativo: fundo sutil (mesmo tom de "elevado" usado em cards/tabelas)
   + faixa de acento na cor de marca -- não mais um bloco inteiro de cor,
   pra combinar com o resto do sistema já escuro. */
.sidebar-nav .nav-link.active {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-text) !important;
    font-weight: 700;
    border-left: 3px solid var(--marca-azul);
    padding-left: calc(12px - 3px) !important;
}

.sidebar-nav .nav-link.active i { opacity: 1; }

/* Agrupamento da sidebar por seção (Vendas / Análise / Administração) --
   rótulos discretos entre os itens, com a Administração recolhível pra
   economizar espaço já que a maioria desses itens é só pra admin.
   Opacidade sobre --sidebar-text (não --text-faint, pensado pro
   --surface) -- acompanha a cor da lateral nos dois temas. */
.sidebar-grupo-rotulo {
    color: var(--sidebar-text);
    opacity: 0.6;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 12px 12px 2px;
}

.sidebar-grupo-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    color: var(--sidebar-text);
    opacity: 0.6;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-top: 12px;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.sidebar-grupo-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
    opacity: 1;
}

.sidebar-grupo-seta {
    font-size: 10px;
    transition: transform 0.15s ease;
}

.sidebar-grupo-toggle[aria-expanded="true"] .sidebar-grupo-seta {
    transform: rotate(180deg);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* Avatar em branco sólido com texto azul -- contrasta contra o fundo da
   lateral nos dois temas (azul de marca no claro, --surface escuro no
   escuro), sem precisar de regra por tema. */
.sidebar-user-avatar {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--marca-azul);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
}

.sidebar-user-info { flex: 1; min-width: 0; }

.sidebar-user-name {
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
}

.sidebar-user-actions a {
    color: var(--sidebar-text);
    font-size: 0.75rem;
    text-decoration: none;
}

.sidebar-user-actions a:hover { color: #fff; }

.app-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Layout v2: logos das empresas saíram do topbar (ver base.html) --
   único filho agora é .topbar-actions, alinhado à direita. */
.topbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 12px 24px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.topbar-actions { display: flex; align-items: center; gap: 10px; }

.app-content main {
    padding: 24px;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}

/* Sidebar colapsada (só ícones) em telas menores */
@media (max-width: 900px) {
    .sidebar { width: 64px; }
    .sidebar-brand-text,
    .sidebar-nav .nav-link span,
    .sidebar-user-info { display: none; }
    .sidebar-nav .nav-link { justify-content: center; }
    .sidebar-user { justify-content: center; }
    .sidebar-grupo-rotulo,
    .sidebar-grupo-toggle { display: none; }
    /* Sem o botão de recolher visível, o grupo Administração fica sempre
       aberto em telas estreitas -- mesmo comportamento de ícone que os
       demais itens, sem exigir clique num controle que sumiu. */
    .sidebar-nav .collapse { display: flex !important; flex-direction: column; height: auto !important; }
    .topbar { padding: 12px; }
}

/* THEME TOGGLE (e sino de alertas, que reaproveita o mesmo estilo) */
.theme-toggle {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--marca-azul);
    border-radius: 999px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    transition: transform 0.15s ease, background 0.15s ease;
}

.theme-toggle:hover {
    background: var(--bg);
    transform: translateY(-1px);
}

/* CARDS */
.card {
    background: var(--surface);
    border: var(--borda-suave);
    border-radius: var(--radius-card);
    box-shadow: var(--sombra-card);
    transition: box-shadow 0.15s ease, transform 0.2s ease;
}

.card:hover {
    box-shadow: var(--sombra-card-hover);
}

.card-body {
    padding: var(--espaco-card);
}

.card-title { color: var(--text-muted); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.display-6 { color: var(--text); font-weight: 700; letter-spacing: -0.02em; }

/* KPI CARDS (painel BI) — valor sempre numa linha só (encolhe em vez de
   quebrar), centralizado horizontal e verticalmente, com ícone associado
   ao rótulo */
.kpi-card .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 96px;
}
.kpi-card-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 6px;
}
.kpi-card-icone {
    flex-shrink: 0;
    font-size: 1rem;
    color: var(--marca-azul);
}
.kpi-card-valor {
    color: var(--text);
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
    font-size: clamp(1.15rem, 3.2vw, 1.75rem);
    line-height: 1.2;
}

/* Texto de apoio abaixo dos gráficos (painel BI) -- cor cheia (não
   --text-muted) pra acompanhar o destaque visual do título do gráfico */
.texto-destaque-grafico {
    color: var(--text);
    font-weight: 500;
}

/* BUTTONS — a cor de marca fica reservada pro botão primário (a ação
   principal de cada tela); botões secundários/outline usam tom neutro,
   não azul, pra não competir visualmente com a ação principal */
.btn {
    border-radius: var(--radius-botao);
    font-weight: 500;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease;
}
.btn-primary {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--brand-primary-dark);
    border-color: var(--brand-primary-dark);
    transform: translateY(-1px);
}
.btn-accent {
    background: var(--brand-accent);
    border-color: var(--brand-accent);
    color: var(--brand-accent-text);
    font-weight: 600;
}
.btn-accent:hover {
    filter: brightness(0.95);
    transform: translateY(-1px);
    color: var(--brand-accent-text);
}

.btn-outline-primary {
    color: var(--text-muted);
    border-color: var(--border);
    background: transparent;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
    color: var(--text);
    background: var(--bg);
    border-color: var(--border);
}

/* FORM CONTROLS */
.form-control, .form-select {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-campo);
    border-radius: 8px;
}
.form-control:focus, .form-select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 20%, transparent);
    background: var(--surface);
    color: var(--text);
}
label { color: var(--text-muted); font-size: 0.85rem; font-weight: 500; margin-bottom: 4px; }

/* TABLE */
.table { color: var(--text); }
.table > :not(caption) > * > * { border-color: var(--border); background: var(--surface); color: var(--text); }

/* Texto sempre quebra por palavra inteira, nunca no meio da palavra */
.table td, .table th {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
}

/* Colunas de texto principal (ex: Cliente, Produto, Título, Mensagem) — mais largura, quebra normal */
.table .col-texto-longo { min-width: 220px; }
/* Colunas de texto secundário (ex: Vendedor, Empresa, Nome de usuário) */
.table .col-texto-medio { min-width: 140px; }
/* Colunas curtas (ex: Valor, Etapa, Canal, Data, ações) — não precisam de largura extra */
.table .col-texto-curto { min-width: 90px; white-space: nowrap; }

/* Colunas que podem vir com conteúdo muito comprido e sem espaços (e-mail, payload,
   erro técnico) — corta com reticências numa linha só; o texto completo fica no title */
.table .col-truncar {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Fallback para tabelas de colunas dinâmicas (ex: Relatórios), onde não dá pra
   classificar cada coluna como longa/curta de antemão */
.table .col-generico { min-width: 120px; }

/* FUNIL (KANBAN) */
.funil-col h6 {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 2px solid var(--brand-primary);
    padding-bottom: 6px;
    margin-bottom: 10px;
}

.opp-card {
    background: var(--surface);
    border: var(--borda-suave);
    border-left: 3px solid var(--brand-primary);
    border-radius: var(--radius-card);
    padding: 10px 12px;
    margin-bottom: 10px;
    transition: box-shadow 0.15s ease;
}

.opp-card:hover {
    box-shadow: var(--sombra-card-hover);
}

.opp-card .valor {
    display: inline-block;
    background: var(--brand-accent);
    color: var(--brand-accent-text);
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.85rem;
}

/* KANBAN — arrastar e soltar */
.funil-cards {
    min-height: 60px;
    border-radius: var(--radius-card);
    transition: outline-color 0.1s ease;
}

/* Destaca a coluna que está recebendo o card durante o arraste — o
   "ghost" do SortableJS é inserido dentro da coluna sob o cursor, então
   :has() já identifica a coluna certa sem precisar de JS extra */
.funil-cards:has(.sortable-ghost) {
    outline: 2px dashed var(--marca-azul);
    outline-offset: -2px;
}

.funil-cards:empty::after {
    content: "Solte aqui";
    display: block;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    border: 1px dashed var(--border);
    border-radius: 8px;
    padding: 18px 4px;
}

.opp-card[draggable="true"] {
    cursor: grab;
}

.opp-card.sortable-ghost {
    opacity: 0.4;
}

.opp-card.sortable-drag {
    box-shadow: var(--shadow-sm);
    cursor: grabbing;
}

/* Kanban responsivo (funil de vendas e Copiloto de produção, que reusa a
   mesma estrutura #id > .row.g-3 > .col.funil-col) -- abaixo de 768px as
   colunas ficam espremidas na largura da tela por padrão (.row/.col do
   Bootstrap dividem em partes iguais sem breakpoint aqui). Em telas
   pequenas vira scroll horizontal com largura fixa por coluna, achado
   #5 da revisão UI/UX Pro Max de 18/08/2026. */
@media (max-width: 767.98px) {
    #funil-kanban-oportunidades,
    #copiloto-kanban {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 8px;
    }

    #funil-kanban-oportunidades > .funil-col,
    #copiloto-kanban > .funil-col {
        flex: 0 0 260px;
        max-width: 260px;
    }
}

/* BADGES para categoria de produto */
.badge-reformado { background: var(--brand-accent); color: var(--brand-accent-text); }
.badge-novo { background: var(--brand-primary); color: #fff; }

/* BADGES de etapa do funil de vendas — fundos pastéis, texto na cor forte
   correspondente (nunca cor pura/saturada sobre fundo colorido) */
.badge-etapa {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
.badge-etapa-lead_ativo       { background: #E3E9F7; color: #2c4a91; }
.badge-etapa-proposta_enviada { background: #FFF6C2; color: #8a7600; }
.badge-etapa-venda_ganha      { background: #D9F2E3; color: #1f7a4d; }
.badge-etapa-venda_perdida    { background: #FCE0E0; color: #b3261e; }

[data-bs-theme="dark"] .badge-etapa-lead_ativo       { background: rgba(67, 101, 186, 0.22); color: #c3d1f2; }
[data-bs-theme="dark"] .badge-etapa-proposta_enviada { background: rgba(252, 225, 0, 0.18); color: #f5e37a; }
[data-bs-theme="dark"] .badge-etapa-venda_ganha      { background: rgba(31, 122, 77, 0.25); color: #8fdcae; }
[data-bs-theme="dark"] .badge-etapa-venda_perdida    { background: rgba(179, 38, 30, 0.25); color: #f5a9a4; }

/* COPILOTO (Kanban de produção/expedição) -- espelha .opp-card, mas a
   prioridade (Parte 7 da especificação) precisa colorir o card inteiro, não
   só a esquerda como o funil de vendas. */
.pedido-producao-card {
    background: var(--surface);
    border: var(--borda-suave);
    border-left: 3px solid var(--brand-primary);
    border-radius: var(--radius-card);
    padding: 10px 12px;
    margin-bottom: 10px;
    transition: box-shadow 0.15s ease;
}
.pedido-producao-card:hover { box-shadow: var(--sombra-card-hover); }
.pedido-producao-card[draggable="true"] { cursor: grab; }
.pedido-producao-card.sortable-ghost { opacity: 0.4; }
.pedido-producao-card.sortable-drag { box-shadow: var(--shadow-sm); cursor: grabbing; }
.pedido-producao-card .valor {
    display: inline-block;
    background: var(--brand-accent);
    color: var(--brand-accent-text);
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.85rem;
}
.pedido-producao-card.prioridade-1 { border: 2px solid #2e7d32; }
.pedido-producao-card.prioridade-2 { border: 2px solid #f57c00; }
.pedido-producao-card.prioridade-3 { border: 2px solid #d32f2f; }

.pedido-producao-label {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    margin: 2px 4px 2px 0;
}

/* Farol de prioridade (Baixa/Média/Alta) -- mesma cor em 3 lugares: borda
   do card (.prioridade-N acima), indicador no cabeçalho do card
   (.farol-indicador) e os 3 botões clicáveis no painel de edição (.btn-farol) */
.farol-1, .farol-1 i { color: #2e7d32; }
.farol-2, .farol-2 i { color: #f57c00; }
.farol-3, .farol-3 i { color: #d32f2f; }

.farol-indicador {
    font-size: 0.7rem;
    font-weight: 600;
    margin-left: 6px;
}
.farol-indicador i { font-size: 0.55rem; vertical-align: 1px; }

.btn-farol {
    background: none;
    border: none;
    padding: 2px;
    font-size: 1rem;
    opacity: 0.3;
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.btn-farol:hover { opacity: 0.7; }
.btn-farol.ativo { opacity: 1; transform: scale(1.15); }

.container { max-width: 1140px; }

/* HISTÓRICO DE CONTATO (timeline por cliente) */
.historico-timeline {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
}

.historico-item {
    background: var(--surface);
    border: var(--borda-suave);
    border-left: 4px solid var(--text-muted);
    border-radius: var(--radius-card);
    padding: 10px 14px;
}

.historico-item.historico-tipo-ligacao    { border-left-color: var(--brand-primary); }
.historico-item.historico-tipo-whatsapp   { border-left-color: #1f7a4d; }
.historico-item.historico-tipo-email      { border-left-color: var(--text-muted); }
.historico-item.historico-tipo-presencial { border-left-color: var(--brand-accent); }
.historico-item.historico-tipo-outro      { border-left-color: var(--border); }

.historico-tipo-badge {
    display: inline-block;
    text-transform: capitalize;
    font-weight: 600;
    font-size: 0.8rem;
    margin-right: 8px;
}

.historico-autor {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-right: 8px;
}

.historico-data { font-size: 0.75rem; }

.historico-texto {
    margin-top: 4px;
    font-size: 0.9rem;
    white-space: pre-wrap;
}

/* ============================================================
   TABELAS — rolagem horizontal sem cortar conteúdo, em todas as
   telas do sistema (funil, clientes, produtos, relatórios, etc.)
   ============================================================ */
.table-responsive {
    overflow-x: auto;
}

/* Coluna de ações (editar/excluir/etc.) sempre visível mesmo com
   scroll horizontal da tabela */
.table .col-acoes {
    position: sticky;
    right: 0;
    background: inherit;
    white-space: nowrap;
}

/* table-striped pinta linhas via background em ::before/nth-child com
   var(--surface)/mix; garantir que a coluna sticky acompanhe o fundo
   da própria linha (par ou ímpar) em vez de ficar transparente */
.table-striped > tbody > tr > td.col-acoes {
    background-color: var(--surface);
}
.table-striped > tbody > tr:nth-of-type(odd) > td.col-acoes {
    background-color: color-mix(in srgb, var(--surface) 96%, var(--text) 4%);
}

@media (max-width: 900px) {
    .table td, .table th {
        padding: 0.4rem 0.5rem;
    }
}

/* ============================================================
   ABAS — tela de detalhe do cliente (menos rolagem, cada tipo de
   informação no seu lugar, estilo HubSpot)
   ============================================================ */
.tabs-cliente {
    display: flex;
    gap: 20px;
    border-bottom: var(--borda-suave);
    margin-bottom: var(--espaco-card);
    overflow-x: auto;
}

.tab-btn {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 2px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.tab-btn:hover { color: var(--text); }

.tab-btn.active {
    color: var(--marca-azul);
    border-bottom-color: var(--marca-azul);
}

.tab-content { display: none; }
.tab-content.active { display: block; }

/* Grid simples de rótulo/valor (ex: aba "Dados cadastrais") */
.info-grid dt {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}
.info-grid dd { font-size: 0.92rem; margin-bottom: 14px; }

/* ============================================================
   BUSCA GLOBAL (Ctrl+K / Cmd+K) — modal de navegação rápida
   ============================================================ */
.busca-global-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 17, 23, 0.5);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 12vh;
    z-index: 1080;
}
.busca-global-overlay[hidden] { display: none; }

.busca-global-modal {
    background: var(--surface);
    border-radius: var(--radius-card);
    box-shadow: var(--sombra-card-hover);
    width: 560px;
    max-width: 92vw;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.busca-global-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: var(--borda-suave);
    color: var(--text-muted);
    flex-shrink: 0;
}

.busca-global-input-wrap input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text);
    font-size: 0.95rem;
}

.busca-global-input-wrap kbd {
    font-size: 0.7rem;
    color: var(--text-muted);
    border: var(--borda-suave);
    border-radius: 4px;
    padding: 1px 6px;
}

.busca-global-resultados {
    overflow-y: auto;
    padding: 8px;
}

.busca-global-grupo-titulo {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 10px 10px 4px;
}

.busca-global-item {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--text);
    text-decoration: none;
    font-size: 0.9rem;
}
.busca-global-item:hover,
.busca-global-item.ativo {
    background: var(--bg);
}
.busca-global-item small {
    display: block;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.busca-global-dica,
.busca-global-vazio {
    padding: 24px 10px;
    text-align: center;
}

.autocomplete-cliente-wrap {
    position: relative;
}

.autocomplete-cliente-resultados {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--surface);
    border-radius: var(--radius-card);
    box-shadow: var(--sombra-card-hover);
    max-height: 280px;
    overflow-y: auto;
    padding: 6px;
    z-index: 20;
}

.autocomplete-cliente-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border: none;
    background: none;
    border-radius: 8px;
    color: var(--text);
    font-size: 0.9rem;
}
.autocomplete-cliente-item:hover {
    background: var(--bg);
}
.autocomplete-cliente-item small {
    display: block;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.autocomplete-cliente-vazio {
    padding: 12px 10px;
    text-align: center;
}

/* ============================================================
   FILTROS EM CHIPS + AÇÕES EM MASSA (Clientes, Produtos, Oportunidades)
   ============================================================ */
.filtro-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.filtro-chips-rotulo {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 2px;
}

.chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: 999px;
    border: var(--borda-suave);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.chip:hover { color: var(--text); border-color: var(--marca-azul); }
.chip.ativo {
    background: var(--marca-azul);
    border-color: var(--marca-azul);
    color: #fff;
    font-weight: 600;
}

.table .col-checkbox { width: 36px; text-align: center; }

.barra-acao-massa {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--surface);
    border: var(--borda-suave);
    border-left: 3px solid var(--marca-azul);
    border-radius: var(--radius-card);
    padding: 10px 16px;
    margin-bottom: 14px;
    box-shadow: var(--sombra-card);
}
.barra-acao-massa[hidden] { display: none; }
.barra-acao-massa-contagem { font-weight: 600; color: var(--text); white-space: nowrap; }

/* VERSIONAMENTO */
.version-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    color: var(--sidebar-text);
    opacity: 0.85;
}

.version-tag i { color: var(--marca-amarelo); font-size: 0.68rem; }

/* ============================================================
   PAINEL (Layout v2, passo 3) -- placas de empresa, alerta acionável e
   cards de indicador. Usa os tokens --ok/--warn/--bad/--font-mono
   definidos no passo 1 (sistema de design) e ainda não usados em
   nenhuma outra tela até aqui.
   ============================================================ */
.placas-empresas {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.placa-empresa {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px 5px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    white-space: nowrap;
}

.placa-empresa-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-faint);
    flex-shrink: 0;
}

/* "com-dados" é uma simplificação de 2 estados (ver comentário em
   EMPRESAS_GRUPO/app.py) -- o mockup original previa 3 (integrada/em
   andamento/pendente), mas não há dado real hoje pra diferenciar "em
   andamento" de "integrada". */
.placa-empresa.com-dados {
    color: var(--text);
    border-color: var(--ok-dim);
}
.placa-empresa.com-dados .placa-empresa-dot {
    background: var(--ok);
    box-shadow: 0 0 0 2px var(--ok-dim);
}

.painel-alerta {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: var(--radius-card);
    background: var(--warn-dim);
    border: 1px solid var(--warn);
    color: var(--text);
}
.painel-alerta i { color: var(--warn); flex-shrink: 0; }

.indicador-card {
    background: var(--surface);
    border: var(--borda-suave);
    border-radius: var(--radius-card);
    padding: 14px 16px;
    height: 100%;
}
.indicador-rotulo {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.indicador-valor {
    color: var(--text);
    font-weight: 700;
    font-size: 1.75rem;
    letter-spacing: -0.02em;
    font-family: var(--font-display);
}
.indicador-nota {
    color: var(--text-faint);
    font-size: 0.75rem;
}

/* "Road" -- funil em linha usado no bloco de Reativação Fonecar (Clientes,
   passo 3). Adaptado do componente .road do mockup v2, trocando os nomes
   de token pelos já usados no resto do projeto (--surface/--surface-2/
   --border em vez de --panel/--panel-2/--line). */
.road {
    background: var(--surface);
    border: var(--borda-suave);
    border-radius: var(--radius-card);
    padding: 24px 20px 18px;
}
.road-track {
    position: relative;
    display: flex;
    justify-content: space-between;
}
.road-track::before {
    content: "";
    position: absolute;
    top: 17px;
    left: 12%;
    right: 12%;
    height: 2px;
    background-image: linear-gradient(90deg, var(--border) 60%, transparent 40%);
    background-size: 14px 2px;
}
.road-node {
    position: relative;
    text-align: center;
    width: 30%;
    z-index: 1;
}
.road-dot {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 2px solid var(--text-faint);
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text);
}
.road-node:nth-child(2) .road-dot { border-color: var(--warn); }
.road-node:nth-child(3) .road-dot { border-color: var(--ok); }
.road-node .rlabel { font-size: 0.75rem; font-weight: 600; color: var(--text); }
.road-node .rsub { font-size: 0.68rem; color: var(--text-faint); margin-top: 2px; }

/* Status chip (Produtos, passo 3) -- badge de status derivado (não uma
   tabela nova): "Bloqueado" > "Sem estoque" > "Disponível", nessa ordem
   de prioridade, a partir de bloqueado_para_venda + estoque_atual, os
   dois já existentes em produtos. */
.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
.status-chip::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.status-chip.ok { color: var(--ok); background: var(--ok-dim); }
.status-chip.ok::before { background: var(--ok); }
.status-chip.warn { color: var(--warn); background: var(--warn-dim); }
.status-chip.warn::before { background: var(--warn); }
.status-chip.bad { color: var(--bad); background: var(--bad-dim); }
.status-chip.bad::before { background: var(--bad); }
/* Neutro -- estado inicial/sem urgência (ex: "rascunho" do Configurador),
   não tinha variante nenhuma dos 3 níveis semânticos existentes. */
.status-chip.neutro { color: var(--text-muted); background: var(--surface-2); }
.status-chip.neutro::before { background: var(--text-muted); }

/* Marcadores rápidos na listagem de Produtos (bloqueado para venda,
   disponível como componente de kit, é kit publicável) -- botão-ícone
   discreto, esmaecido quando desligado, na cor de marca quando ligado.
   Clicar alterna o campo direto (rota /produtos/<id>/alternar/<campo>),
   sem precisar abrir Editar Produto. */
.flags-produto {
    display: flex;
    align-items: center;
    gap: 6px;
}
.flag-icone {
    background: none;
    border: none;
    padding: 2px;
    font-size: 1.05rem;
    line-height: 1;
    color: var(--accent);
    opacity: 1;
    cursor: pointer;
    transition: opacity .15s ease, transform .1s ease;
}
.flag-icone:hover {
    opacity: 0.75;
    transform: scale(1.1);
}
.flag-icone.flag-inativo {
    color: var(--text-faint);
    opacity: 0.45;
}
.flag-icone.flag-inativo:hover {
    opacity: 0.7;
}

/* SKU/CNPJ/dado técnico -- fonte monoespaçada (sistema de design do
   passo 1, --font-mono ainda sem uso até aqui). */
.dado-mono {
    font-family: var(--font-mono);
    font-size: 0.85rem;
}

/* Cards de vendedor (passo 3) -- adaptado de .vendedor-card do mockup,
   trocando --panel/--panel-2/--line/--radius pelos tokens já usados no
   resto do projeto. Sem barra de progresso de meta (.vendedor-meta-track
   do mockup) -- não existe meta cadastrada em lugar nenhum hoje. */
.vendedor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}
.vendedor-card {
    background: var(--surface);
    border: var(--borda-suave);
    border-radius: var(--radius-card);
    padding: 16px;
}
.vendedor-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.vendedor-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text);
    flex-shrink: 0;
}
.vendedor-name-wrap { flex: 1; min-width: 0; }
.vendedor-name { font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; line-height: 1.2; }
.vendedor-loja-row { margin-top: 3px; }
.vendedor-stats {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    border-top: 1px solid var(--border);
    padding-top: 10px;
}
.vstat { text-align: center; }
.vstat .vv { font-family: var(--font-mono); font-size: 0.95rem; color: var(--text); }
.vstat .vl { font-size: 0.62rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.03em; }

/* Diagrama de arquitetura + linha do tempo (Multi-empresa, passo 3) --
   adaptado de .arch-card/.timeline do mockup. */
.arch-card {
    background: var(--surface);
    border: var(--borda-suave);
    border-radius: var(--radius-card);
    padding: 18px 20px;
    margin-bottom: 20px;
}
.arch-card h3 { font-family: var(--font-display); font-size: 0.9rem; margin: 0 0 10px; }
.arch-flow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.arch-box {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-align: center;
    color: var(--text);
}
.arch-box.key { border-color: var(--ok-dim); color: var(--ok); }
.arch-arrow { color: var(--text-faint); font-size: 0.9rem; }
.link-table-note {
    font-size: 0.72rem;
    color: var(--text-muted);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    margin-top: 6px;
}
.link-table-note code { font-family: var(--font-mono); color: var(--marca-azul); }

.timeline { display: flex; gap: 6px; align-items: stretch; margin: 6px 0 4px; flex-wrap: wrap; }
.tl-step { flex: 1; min-width: 90px; text-align: center; }
.tl-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    border: 2px solid var(--border);
    background: var(--surface-2);
    color: var(--text-faint);
}
.tl-step.done .tl-dot { border-color: var(--ok); background: var(--ok-dim); color: var(--ok); }
.tl-name { font-size: 0.7rem; font-weight: 600; color: var(--text); }
.tl-sub { font-size: 0.6rem; color: var(--text-faint); margin-top: 2px; }