/* ============================================================================
   painel.css — Painel Magna · REDESIGN (junho/2026)
   ----------------------------------------------------------------------------
   Drop-in para o projeto Django (operacao-televendas):
     static/css/painel.css  +  Bootstrap 5  +  bootstrap-icons  +  Inter.

   COMO PORTAR
   -----------
   1) Substitua o conteúdo de static/css/painel.css por este arquivo.
      → Já estiliza o markup ATUAL (base.html, painel_3c.html, _tabela_*.html)
        SEM precisar mexer nos templates. Sidebar escura, cards, tabela e
        KPIs entram no novo visual só trocando o CSS.

   2) (Opcional, p/ o visual 100% da referência) pequenos ajustes de template:
      a. LOGO  — em base.html, troque o texto do logo por uma imagem:
           <div class="logo-chip">
             <img class="logo-img" src="{% static 'img/magna-logo.png' %}" alt="MAGNA">
           </div>
         (o .logo-magna em texto continua funcionando como fallback)
      b. KPIs  — em painel_3c.html, envolva os cartões com .kpi-grid/.kpi
         (ver bloco "KPIs — componente" abaixo; as classes utilitárias
          .border.rounded.p-3 antigas também já ficam apresentáveis).
      c. TOPBAR (busca/sino, opcional) — ver bloco "Topbar extras".

   Toda a paleta vive em :root. Troque os tokens pra retematizar.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* --- Marca Magna --- */
  --cor-vermelho:        #c8102e;   /* vermelho Magna — primário, logo, acento ativo */
  --cor-vermelho-hover:  #a60d26;
  --cor-vermelho-soft:   rgba(200,16,46,.10);
  --cor-navy:            #16213e;   /* navy — botões escuros / títulos fortes */
  --cor-azul:            #2563eb;   /* azul — "discadas" / info */
  --cor-laranja:         #e87a00;   /* laranja — conversões / destaque */
  --cor-verde:           #16a34a;   /* verde — atendidas / positivo */

  /* --- Sidebar (near-black) --- */
  --cor-sidebar:         #0f1014;
  --cor-sidebar-elev:    #1b1d24;   /* item ativo / cartões internos */
  --cor-sidebar-hover:   #181a20;
  --cor-sidebar-borda:   rgba(255,255,255,.07);
  --side-text:           #9aa0ac;
  --side-text-strong:    #ffffff;
  --side-muted:          #5f6573;

  /* --- Superfícies claras --- */
  --cor-bg:              #f3f4f6;   /* fundo do conteúdo (era creme #f5f1e8) */
  --cor-card:            #ffffff;
  --cor-borda:           #e7e9ee;
  --cor-borda-forte:     #d8dbe3;
  --cor-texto:           #11131a;
  --cor-texto-muted:     #6b7280;

  /* --- Tints suaves p/ ícones / badges --- */
  --tint-vermelho:       rgba(200,16,46,.10);
  --tint-azul:           rgba(37,99,235,.10);
  --tint-verde:          rgba(22,163,74,.12);
  --tint-laranja:        rgba(232,122,0,.12);
  --tint-navy:           rgba(22,33,62,.10);

  /* --- Forma / profundidade --- */
  --raio:                16px;
  --raio-sm:             10px;
  --raio-pill:           999px;
  --sombra-card:         0 1px 2px rgba(17,19,26,.04), 0 6px 20px rgba(17,19,26,.05);
  --sombra-pop:          0 8px 28px rgba(17,19,26,.10);
  --sidebar-width:       264px;
}

* { box-sizing: border-box; }
html, body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--cor-bg);
  color: var(--cor-texto);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
.tabular, .fs-3, .kpi-valor, td, th { font-variant-numeric: tabular-nums; }

/* ============================================================================
   LAYOUT
   ============================================================================ */
.layout { display: grid; grid-template-columns: var(--sidebar-width) 1fr; min-height: 100vh; }

/* ============================================================================
   SIDEBAR
   ============================================================================ */
.sidebar {
  background: var(--cor-sidebar);
  color: var(--side-text);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  border-right: 1px solid var(--cor-sidebar-borda);
}

/* ---- Cabeçalho / logo --------------------------------------------------- */
/* Layout vertical: logo grande preenchendo a largura + nome centralizado embaixo. */
.sidebar-header { background: transparent; display: flex; flex-direction: column;
  align-items: stretch; gap: 10px; padding: 18px 16px 14px; }
.logo-chip { border-radius: 12px; padding: 0; line-height: 0; overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.35); display: block; }
.logo-img  { display: block; width: 100%; height: auto; }
.brand-nome { display: flex; align-items: baseline; justify-content: center; gap: 7px;
  padding-top: 9px; margin-top: 2px; position: relative; }
/* fiozinho sutil ligando logo → título */
.brand-nome::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 34px; height: 2px; border-radius: 2px; background: var(--cor-vermelho); opacity: .9; }
.brand-painel { color: var(--side-muted); font-weight: 500; font-size: .82rem;
  text-transform: uppercase; letter-spacing: 2.5px; }
.brand-magna { color: var(--side-text-strong); font-weight: 700; font-size: .82rem;
  text-transform: uppercase; letter-spacing: 2.5px; }
/* Fallback texto (markup atual do base.html, sem <img>) */
.sidebar-header > .logo-magna { background: #fff; color: var(--cor-vermelho);
  font-weight: 800; font-size: 1.4rem; letter-spacing: 1.5px; text-align: center;
  padding: 12px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.logo-sub { color: var(--side-muted); font-size: .72rem; font-weight: 500;
  text-transform: none; letter-spacing: 0; text-align: center; margin-top: 2px; }

/* ---- Navegação ---------------------------------------------------------- */
.sidebar-nav { flex: 1; padding: 6px 12px 12px; overflow-y: auto; }
/* Rótulo de seção opcional (adicione <div class="nav-secao">Operação</div>) */
.nav-secao { color: var(--side-muted); font-size: .67rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.2px; padding: 14px 12px 6px; }

.menu-item {
  position: relative;
  display: flex; align-items: center; gap: 11px; padding: 9px 12px; color: var(--side-text);
  text-decoration: none; border-radius: 9px; font-size: .9rem; font-weight: 500;
  margin-bottom: 2px; width: 100%; background: transparent; border: 0; font-family: inherit;
  text-align: left; cursor: pointer; transition: background .14s, color .14s;
}
.menu-item:hover { background: var(--cor-sidebar-hover); color: var(--side-text-strong); }
.menu-item i { font-size: 1.05rem; width: 20px; text-align: center; opacity: .85; }
.menu-label { flex: 1; }

/* Item ativo: superfície elevada + barra vermelha à esquerda */
.menu-item.ativo { background: var(--cor-sidebar-elev); color: var(--side-text-strong); }
.menu-item.ativo::before { content: ""; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%); width: 3px; height: 20px; border-radius: 0 3px 3px 0;
  background: var(--cor-vermelho); }
.menu-item.ativo i { opacity: 1; color: #fff; }

/* ---- Grupos com submenu (Bootstrap collapse) ---------------------------- */
.menu-grupo { margin-bottom: 2px; }
.menu-chevron { font-size: .72rem; transition: transform .18s ease; opacity: .55; }
/* Suporta tanto a classe .expandido quanto o estado aria-expanded do collapse */
.menu-grupo.expandido > .menu-grupo-toggle,
.menu-grupo-toggle[aria-expanded="true"] { color: var(--side-text-strong); background: transparent; }
.menu-grupo.expandido .menu-chevron,
.menu-grupo-toggle[aria-expanded="true"] .menu-chevron { transform: rotate(180deg); }

.submenu { padding: 2px 0 4px; margin: 2px 0 4px 17px; border-left: 1px solid var(--cor-sidebar-borda); }
.submenu.oculto { display: none; }            /* fallback p/ mockup sem Bootstrap-JS */
.submenu-header { color: var(--side-muted); font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px; margin: 8px 0 3px 14px; }
.submenu-item { position: relative; display: flex; align-items: center;
  padding: 7px 12px 7px 14px; color: var(--side-text); text-decoration: none;
  font-size: .84rem; font-weight: 500; border-radius: 7px; margin: 0 0 1px 6px;
  transition: background .14s, color .14s; }
.submenu-item:hover { background: var(--cor-sidebar-hover); color: var(--side-text-strong); }
.submenu-item.ativo { background: var(--cor-sidebar-elev); color: var(--side-text-strong); font-weight: 600; }
.submenu-item.ativo::before { content: ""; position: absolute; left: -1px; top: 50%;
  transform: translateY(-50%); width: 3px; height: 16px; border-radius: 0 3px 3px 0;
  background: var(--cor-vermelho); }
/* O bullet "·" do markup atual fica redundante no novo visual — ocultamos. */
.submenu-bullet { display: none; }

/* ---- Rodapé (usuário) --------------------------------------------------- */
.sidebar-footer { padding: 12px 14px 16px; border-top: 1px solid var(--cor-sidebar-borda); }
.user-info { display: flex; align-items: center; gap: 11px; margin-bottom: 10px;
  color: var(--side-text); font-size: .85rem; }
.user-info > i { font-size: 1.9rem; color: var(--side-muted); }   /* bi-person-circle */
.user-name { color: var(--side-text-strong); font-weight: 600; }
.user-role { color: var(--side-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; }
/* Botão "Sair" — versão discreta sobre fundo escuro */
.sidebar-footer .btn-outline-light { border-color: var(--cor-sidebar-borda);
  color: var(--side-text); font-weight: 600; border-radius: 9px; }
.sidebar-footer .btn-outline-light:hover { background: var(--cor-sidebar-hover); color: #fff; border-color: var(--cor-sidebar-borda); }

/* Scrollbar discreta */
.sidebar-nav::-webkit-scrollbar { width: 8px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 8px; }

/* ============================================================================
   MAIN / TOPBAR
   ============================================================================ */
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar { background: rgba(255,255,255,.82); backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--cor-borda); padding: 16px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  position: sticky; top: 0; z-index: 20; }
.topbar-titulo { font-size: 1.32rem; font-weight: 700; color: var(--cor-texto); margin: 0; letter-spacing: -.01em; }
.topbar-sub { font-size: .82rem; color: var(--cor-texto-muted); margin: 2px 0 0; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.conteudo { padding: 24px 44px 40px; flex: 1; max-width: 1480px; width: 100%; margin-inline: auto; }

/* ---- Topbar extras (opcionais: busca / sino / botão escuro) -------------- */
.topbar-search { position: relative; }
.topbar-search i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--cor-texto-muted); font-size: .95rem; }
.topbar-search input { width: 280px; padding: 9px 14px 9px 36px; border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pill); background: var(--cor-card); font-size: .88rem; color: var(--cor-texto); outline: none; transition: border-color .14s, box-shadow .14s; }
.topbar-search input:focus { border-color: var(--cor-vermelho); box-shadow: 0 0 0 3px var(--cor-vermelho-soft); }
.icon-btn { position: relative; width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--cor-borda);
  background: var(--cor-card); color: var(--cor-texto); display: flex; align-items: center; justify-content: center; font-size: 1.05rem; cursor: pointer; transition: background .14s; }
.icon-btn:hover { background: var(--cor-bg); }
.icon-btn .dot { position: absolute; top: 9px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--cor-vermelho); border: 1.5px solid var(--cor-card); }
.btn-dark-action { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 11px;
  background: var(--cor-navy); color: #fff; border: 0; font-weight: 600; font-size: .88rem; text-decoration: none; cursor: pointer; transition: background .14s; }
.btn-dark-action:hover { background: #0e1730; color: #fff; }

/* ============================================================================
   CARTÕES
   ============================================================================ */
.painel-card { background: var(--cor-card); border: 1px solid var(--cor-borda);
  border-radius: var(--raio); padding: 22px; box-shadow: var(--sombra-card); margin-bottom: 18px; }
.painel-card h2 { font-size: 1.06rem; font-weight: 700; color: var(--cor-texto);
  margin: 0 0 6px 0; letter-spacing: -.01em; }
.painel-card p { color: var(--cor-texto-muted); margin: 0; }
/* Chip "Listas rodando hoje" (era .badge.bg-info) já recebe estilo de badge abaixo */

/* ============================================================================
   TOGGLE Hoje | Total  (btn-group do markup atual → segmentado)
   ============================================================================ */
.btn-group[role="group"] { background: var(--cor-bg); border: 1px solid var(--cor-borda);
  border-radius: 12px; padding: 4px; gap: 3px; }
.btn-group[role="group"] .btn { border: 0 !important; border-radius: 9px !important;
  font-weight: 600; font-size: .85rem; color: var(--cor-texto-muted); padding: 7px 16px; }
.btn-group[role="group"] .btn.btn-primary,
.btn-group[role="group"] .btn:not(.btn-outline-primary):hover { background: var(--cor-navy); color: #fff; box-shadow: 0 2px 8px rgba(22,33,62,.22); }
.btn-group[role="group"] .btn.btn-outline-primary { background: transparent; color: var(--cor-texto-muted); }
.btn-group[role="group"] .btn.btn-outline-primary:hover { background: #fff; color: var(--cor-texto); }

/* Componente segmentado próprio (mockup) */
.segmented { display: inline-flex; gap: 3px; padding: 4px; background: var(--cor-bg); border: 1px solid var(--cor-borda); border-radius: 12px; }
.segmented a { padding: 7px 16px; border-radius: 9px; color: var(--cor-texto-muted); text-decoration: none; font-weight: 600; font-size: .85rem; display: inline-flex; align-items: center; gap: 7px; transition: background .14s, color .14s; }
.segmented a:hover { color: var(--cor-texto); }
.segmented a.ativo { background: var(--cor-navy); color: #fff; box-shadow: 0 2px 8px rgba(22,33,62,.22); }

/* ============================================================================
   KPIs
   ----------------------------------------------------------------------------
   (A) Markup ATUAL: <div class="border rounded p-3 flex-fill text-center">
       — recebe um trato limpo automaticamente.
   (B) Componente novo .kpi-grid/.kpi (recomendado) — visual da referência.
   ============================================================================ */
/* (A) — cartões utilitários existentes */
.painel-card .border.rounded { border-color: var(--cor-borda) !important;
  border-radius: var(--raio-sm) !important; box-shadow: var(--sombra-card);
  padding: 16px !important; }
.painel-card .border.rounded .fs-3 { font-size: 1.9rem !important; font-weight: 800; letter-spacing: -.02em; }

/* (B) — componente KPI */
.kpi-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.kpi { background: var(--cor-card); border: 1px solid var(--cor-borda); border-radius: var(--raio);
  padding: 18px; box-shadow: var(--sombra-card); display: flex; flex-direction: column; min-height: 138px;
  transition: box-shadow .16s, transform .16s; }
.kpi:hover { box-shadow: var(--sombra-pop); transform: translateY(-2px); }
.kpi-top { display: flex; align-items: flex-start; justify-content: space-between; }
.kpi-label { font-size: .8rem; color: var(--cor-texto-muted); font-weight: 500; }
.kpi-ico { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.kpi-ico.t-vermelho { background: var(--tint-vermelho); color: var(--cor-vermelho); }
.kpi-ico.t-azul     { background: var(--tint-azul);     color: var(--cor-azul); }
.kpi-ico.t-verde    { background: var(--tint-verde);    color: var(--cor-verde); }
.kpi-ico.t-navy     { background: var(--tint-navy);     color: var(--cor-navy); }
.kpi-ico.t-laranja  { background: var(--tint-laranja);  color: var(--cor-laranja); }
.kpi-valor { font-size: 2rem; font-weight: 800; color: var(--cor-texto); letter-spacing: -.02em; line-height: 1; margin: 14px 0 0; }
.kpi-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 12px; }
.kpi-sub { font-size: .76rem; color: var(--cor-texto-muted); }
.kpi-delta { display: inline-flex; align-items: center; gap: 3px; font-size: .76rem; font-weight: 700; }
.kpi-delta.up   { color: var(--cor-verde); }
.kpi-delta.down { color: var(--cor-vermelho); }
.spark { width: 78px; height: 30px; flex-shrink: 0; }

/* ============================================================================
   FORMULÁRIOS (filtros)
   ============================================================================ */
.form-control, .form-select { border-radius: 10px; border-color: var(--cor-borda); font-size: .88rem; }
.form-control:focus, .form-select:focus { border-color: var(--cor-vermelho); box-shadow: 0 0 0 3px var(--cor-vermelho-soft); }
.form label, label.small { font-weight: 600; color: var(--cor-texto-muted); }

/* ============================================================================
   BOTÕES (Bootstrap → identidade Magna)
   ============================================================================ */
.btn { border-radius: 10px; font-weight: 600; }
.btn-primary { background: var(--cor-vermelho); border-color: var(--cor-vermelho); }
.btn-primary:hover, .btn-primary:focus { background: var(--cor-vermelho-hover); border-color: var(--cor-vermelho-hover); }
.btn-outline-primary { color: var(--cor-vermelho); border-color: var(--cor-vermelho); }
.btn-outline-primary:hover { background: var(--cor-vermelho); border-color: var(--cor-vermelho); }
.btn-outline-secondary { color: var(--cor-texto-muted); border-color: var(--cor-borda-forte); }
.btn-outline-secondary:hover { background: var(--cor-bg); color: var(--cor-texto); border-color: var(--cor-borda-forte); }

/* ============================================================================
   TABELAS  (.table.table-sm.table-hover dentro de .painel-card)
   ============================================================================ */
.painel-card .table { border-collapse: separate; border-spacing: 0; margin: 6px 0 0; }
.painel-card .table > thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .5px;
  color: var(--cor-texto-muted); font-weight: 700; border: 0; border-bottom: 1px solid var(--cor-borda);
  padding: 10px 12px; vertical-align: bottom; }
.painel-card .table > thead th .small { font-weight: 500; text-transform: none; letter-spacing: 0; }
.painel-card .table > tbody td { padding: 13px 12px; border-top: 0; border-bottom: 1px solid var(--cor-borda);
  font-size: .88rem; vertical-align: middle; color: var(--cor-texto); }
.painel-card .table > tbody tr:last-child td { border-bottom: 0; }
.painel-card .table.table-hover > tbody tr:hover > * { background: #fafbfc; }
.painel-card .table strong { font-weight: 700; }
/* Peso editável (input + check) na tabela */
.painel-card .table input[type="number"] { border-radius: 8px; text-align: center; font-weight: 700; }

/* ============================================================================
   BADGES (status / chips)  — versão pill suave
   ============================================================================ */
.badge { font-weight: 600; border-radius: var(--raio-pill); padding: .4em .7em; font-size: .72rem; }
.badge.bg-success   { background: var(--tint-verde) !important;    color: var(--cor-verde) !important; }
.badge.bg-warning   { background: var(--tint-laranja) !important;  color: #9a5300 !important; }
.badge.bg-secondary { background: #eef0f3 !important;              color: var(--cor-texto-muted) !important; }
.badge.bg-info      { background: var(--tint-azul) !important;     color: var(--cor-azul) !important; }
.badge.bg-primary   { background: var(--tint-vermelho) !important; color: var(--cor-vermelho) !important; }

/* Chip "ao vivo" (mockup) */
.chip-status { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 600;
  padding: 4px 10px; border-radius: var(--raio-pill); background: var(--tint-verde); color: var(--cor-verde); }
.chip-status .live { width: 7px; height: 7px; border-radius: 50%; background: var(--cor-verde); animation: pulso 2s infinite; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.45); } 70% { box-shadow: 0 0 0 6px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } }

/* ============================================================================
   PROGRESS BAR (coluna Total — _barra_conclusao_3c.html)
   ============================================================================ */
.progress { background: #eef0f3; border-radius: var(--raio-pill); overflow: hidden; }
.progress-bar.bg-primary { background-color: var(--cor-azul) !important; }
.progress-bar.bar-sem-ligacao { background-color: var(--cor-vermelho); }

/* Barra inline própria (mockup) */
.mini-bar { height: 5px; border-radius: var(--raio-pill); background: #eef0f3; overflow: hidden; }
.mini-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--cor-azul); }

/* ============================================================================
   ALERTAS / NOTA
   ============================================================================ */
.alert { border-radius: var(--raio-sm); }
.alert-light { background: #fbfbfc; border: 1px solid var(--cor-borda); color: var(--cor-texto-muted); }
.alert-light i, .alert-light .bi { color: var(--cor-azul); }

/* ============================================================================
   SUB-NAVEGAÇÃO (tabs internos) — preservada
   ============================================================================ */
.painel-subnav { display: flex; gap: 4px; background: var(--cor-card); padding: 6px; border-radius: 10px; border: 1px solid var(--cor-borda); width: fit-content; }
.subnav-link { padding: 8px 18px; border-radius: 8px; color: var(--cor-texto-muted); text-decoration: none; font-weight: 600; font-size: .92rem; transition: all .15s; }
.subnav-link:hover { background: var(--cor-bg); color: var(--cor-texto); }
.subnav-link.ativo { background: var(--cor-navy); color: #fff; }
.subnav-link i { margin-right: 6px; }

/* ============================================================================
   EM CONSTRUÇÃO / LOGIN — preservados, re-tematizados
   ============================================================================ */
.em-construcao { text-align: center; padding: 60px 20px; color: var(--cor-texto-muted); }
.em-construcao i { font-size: 3rem; color: var(--cor-laranja); }
.em-construcao h2 { margin: 14px 0 6px; color: var(--cor-texto); }
.login-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--cor-sidebar); }
.login-card { background: var(--cor-card); border-radius: var(--raio); padding: 40px; width: 380px; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.login-card .logo-magna { color: var(--cor-vermelho); font-size: 2rem; text-align: center; margin-bottom: 4px; }
.login-card .logo-sub { color: var(--cor-texto-muted); text-align: center; margin-bottom: 24px; }

/* ============================================================================
   CORES SEMÂNTICAS (utilitários Bootstrap → paleta Magna)
   Mantém o color-coding das métricas alinhado à identidade.
   ============================================================================ */
.text-primary { color: var(--cor-azul) !important; }
.text-success { color: var(--cor-verde) !important; }
.text-info    { color: #0e7490 !important; }          /* CPC — teal, distinto do azul */
.text-warning, .text-warning-emphasis { color: var(--cor-laranja) !important; }
.text-danger  { color: var(--cor-vermelho) !important; }

/* ============================================================================
   ABAS (nav-tabs) — Comparativo (Dia/Mês) e afins
   ============================================================================ */
.nav-tabs { border-bottom: 1px solid var(--cor-borda); gap: 2px; }
.nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  color: var(--cor-texto-muted); font-weight: 600; font-size: .92rem; padding: 10px 16px; }
.nav-tabs .nav-link:hover { color: var(--cor-texto); border-bottom-color: var(--cor-borda-forte); isolation: isolate; }
.nav-tabs .nav-link.active { color: var(--cor-vermelho); background: transparent; border-bottom-color: var(--cor-vermelho); }

/* ============================================================================
   LINHAS DE GRUPO EM TABELA (.table-light) — Comparativo
   ============================================================================ */
.painel-card .table > tbody > tr.table-light > * { background: var(--cor-bg); color: var(--cor-texto); }
.painel-card .table > tbody > tr.table-light td { font-weight: 700; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .4px; color: var(--cor-texto-muted); padding-top: 10px; padding-bottom: 6px; }
.painel-card .table .border-start { border-left: 1px solid var(--cor-borda) !important; }
.painel-card .table.table-bordered, .painel-card .table.table-bordered > :not(caption) > * > * { border-color: var(--cor-borda); }

/* ============================================================================
   BADGES — variantes que aparecem nas páginas (status, motivos, etapas)
   ============================================================================ */
.badge.bg-danger,
.badge.bg-danger-subtle    { background: var(--tint-vermelho) !important; color: var(--cor-vermelho) !important; }
.badge.bg-dark             { background: var(--cor-navy) !important;       color: #fff !important; }
.badge.bg-light,
.badge.bg-light.text-dark,
.badge.text-bg-light       { background: #eef0f3 !important;               color: var(--cor-texto-muted) !important; border: 0; }
.badge.bg-success-subtle   { background: var(--tint-verde) !important;     color: var(--cor-verde) !important; }
.badge.bg-light.text-secondary { background: #eef0f3 !important;           color: var(--cor-texto-muted) !important; }

/* ============================================================================
   BOTÕES — variantes success/danger alinhadas
   ============================================================================ */
.btn-success { background: var(--cor-verde); border-color: var(--cor-verde); }
.btn-success:hover, .btn-success:focus { background: #128a3e; border-color: #128a3e; }
.btn-outline-success { color: var(--cor-verde); border-color: var(--cor-verde); }
.btn-outline-success:hover { background: var(--cor-verde); border-color: var(--cor-verde); }
.btn-danger { background: var(--cor-vermelho); border-color: var(--cor-vermelho); }
.btn-danger:hover, .btn-danger:focus { background: var(--cor-vermelho-hover); border-color: var(--cor-vermelho-hover); }
.btn-outline-danger { color: var(--cor-vermelho); border-color: var(--cor-vermelho); }
.btn-outline-danger:hover { background: var(--cor-vermelho); border-color: var(--cor-vermelho); }

/* ============================================================================
   CARTÕES-ESTATÍSTICA CLICÁVEIS (dashboard / funil) — hover sutil
   ============================================================================ */
a.text-decoration-none .border.rounded { transition: box-shadow .15s, transform .15s, border-color .15s; }
a.text-decoration-none:hover .border.rounded { box-shadow: var(--sombra-pop); transform: translateY(-2px); border-color: var(--cor-borda-forte) !important; }
.fs-1 { letter-spacing: -.02em; }
.fs-2, .fs-3 { font-weight: 800; letter-spacing: -.02em; }

/* ============================================================================
   FORMULÁRIOS — labels, switch, file, textarea
   ============================================================================ */
.form-label { font-weight: 600; color: var(--cor-texto); font-size: .86rem; }
.form-text { color: var(--cor-texto-muted); }
.form-check-input:checked { background-color: var(--cor-vermelho); border-color: var(--cor-vermelho); }
.form-check-input:focus { border-color: var(--cor-vermelho); box-shadow: 0 0 0 3px var(--cor-vermelho-soft); }
.form-switch .form-check-input { cursor: pointer; }
textarea.form-control { border-radius: var(--raio-sm); }

/* ============================================================================
   CÓDIGO / PRE / DETAILS — e-mails, logs
   ============================================================================ */
code { background: #f1f3f5; color: #334155; padding: .12em .42em; border-radius: 5px; font-size: .85em; }
details > summary { cursor: pointer; }
pre { border-radius: var(--raio-sm); }

/* ============================================================================
   ALERTAS coloridos — deliverability / erros
   ============================================================================ */
.alert-danger  { background: var(--tint-vermelho); border: 1px solid rgba(200,16,46,.18); color: #8a1020; }
.alert-warning { background: var(--tint-laranja);  border: 1px solid rgba(232,122,0,.20);  color: #8a4b00; }
.alert-success { background: var(--tint-verde);    border: 1px solid rgba(22,163,74,.20);   color: #0f6b35; }
.alert i, .alert .bi { color: inherit; }

/* Estado de borda vermelha em cartões (limite estourado) */
.border-danger { border-color: var(--cor-vermelho) !important; }

/* ============================================================================
   RESPONSIVO
   ============================================================================ */
@media (max-width: 1200px) { .kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 992px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .topbar-search input { width: 180px; }
}
@media (max-width: 640px) { .kpi-grid { grid-template-columns: 1fr; } }

/* ============================================================================
   GALERIA DE TEMPLATES  (Templates & Modelos / Nova campanha de e-mail)
   Cards selecionaveis com miniatura ao vivo (iframe escalado).
   ============================================================================ */
tr.linha-clicavel { cursor: pointer; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.tpl-card { position: relative; display: flex; flex-direction: column; background: var(--cor-card);
  border: 2px solid var(--cor-borda); border-radius: var(--raio); overflow: hidden; cursor: pointer;
  transition: border-color .15s, box-shadow .15s; }
.tpl-card:hover { box-shadow: var(--sombra-pop); }
.tpl-card input { position: absolute; opacity: 0; pointer-events: none; }
.tpl-card.sel { border-color: var(--cor-vermelho); box-shadow: 0 0 0 3px var(--cor-vermelho-soft); }
.tpl-check { position: absolute; top: 10px; right: 10px; z-index: 2; width: 26px; height: 26px;
  border-radius: 50%; background: var(--cor-vermelho); color: #fff; display: none;
  align-items: center; justify-content: center; font-size: .9rem; }
.tpl-card.sel .tpl-check { display: flex; }
.tpl-thumb { height: 230px; overflow: hidden; background: #f6f7f9;
  border-bottom: 1px solid var(--cor-borda); position: relative; }
.tpl-thumb iframe { width: 200%; height: 460px; border: 0; transform: scale(.5);
  transform-origin: top left; pointer-events: none; }
.tpl-meta { padding: 14px 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.tpl-nome { font-weight: 700; color: var(--cor-texto); }
.tpl-desc { font-size: .82rem; color: var(--cor-texto-muted); margin: 4px 0 10px; }
.tpl-acoes { display: flex; gap: 8px; flex-wrap: wrap; }


/* ============================================================================
   REDESIGN 1a (jul/2026) — casca minimalista + Home "Visão Geral"
   Acrescenta ao painel.css. Sobrescreve o cabeçalho da sidebar e adiciona
   os componentes hero / jornada / funil-em-barras usados no dashboard_geral.
   Requer a fonte "Space Grotesk" (link no <head> do base.html).
   ============================================================================ */

/* Sidebar: logo à esquerda + PAINEL TELEVENDAS à direita (minimalista) */
.sidebar-header { flex-direction: row; align-items: center; gap: 12px; padding: 18px 16px 16px; }
.sidebar-header .logo-chip { width: 96px; height: 52px; border-radius: 9px; box-shadow: 0 2px 8px rgba(0,0,0,.35); flex: none; padding: 0; }
.sidebar-header .logo-img { width: 100%; height: 100%; object-fit: contain; }
.sidebar-header .brand-nome { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; padding: 0; margin: 0; }
.sidebar-header .brand-nome::before { display: none; }
.sidebar-header .brand-painel { font-size: .64rem; letter-spacing: 2px; }
.sidebar-header .brand-magna  { font-size: .92rem; letter-spacing: 1px; }

/* Item de menu ativo: ícone na cor da marca (vermelho) */
.menu-item.ativo i { color: var(--cor-vermelho); opacity: 1; }

/* ---- Hero band (destaque do dia + KPIs) --------------------------------- */
.hero-band { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 16px; }
.hero-vendas { position: relative; overflow: hidden; border-radius: 18px; padding: 18px 22px; color: #fff;
  background: linear-gradient(135deg, var(--cor-vermelho) 0%, #8a0d20 60%, var(--cor-navy) 130%);
  box-shadow: 0 12px 32px rgba(200,16,46,.20); }
.hero-hex { position: absolute; right: -36px; top: -28px; opacity: .16; }
.hero-label { font-size: .76rem; text-transform: uppercase; letter-spacing: 1.5px; opacity: .85; font-weight: 600; }
.hero-num { font-family: 'Space Grotesk','Inter',sans-serif; font-size: 4rem; font-weight: 700; line-height: .9; }
.hero-chip { display:inline-flex; align-items:center; gap:5px; font-size:.82rem; font-weight:700; background:rgba(255,255,255,.18); padding:4px 10px; border-radius: var(--raio-pill); }
.hero-subs { display:flex; gap:22px; font-size:.82rem; }
.hero-subs .k { opacity:.75; }
.hero-subs .v { font-weight:700; font-size:1.05rem; }
.hero-bar { height:6px; border-radius: var(--raio-pill); background: rgba(255,255,255,.22); overflow:hidden; }
.hero-bar > span { display:block; height:100%; background:#fff; border-radius:inherit; }
.hero-band .kpi-col { display:flex; flex-direction:column; gap:16px; }
.hero-band .kpi-col .kpi { flex:1; min-height:0; }
.hero-band .kpi-col a { display:block; }

/* ---- Jornada (tiles) + funil em barras ---------------------------------- */
.jornada-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:14px; }
.jornada-tile { display:flex; align-items:center; gap:13px; padding:14px 16px; border:1px solid var(--cor-borda); border-radius:12px; background:#fafbfc; }
.jornada-tile .ico { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex:none; }
.jornada-tile .num { font-family:'Space Grotesk','Inter',sans-serif; font-size:1.45rem; font-weight:700; line-height:1.15; }
.ico.t-azul{ background:var(--tint-azul); color:var(--cor-azul); }
.ico.t-navy{ background:var(--tint-navy); color:var(--cor-navy); }
.ico.t-verde{ background:var(--tint-verde); color:var(--cor-verde); }
.ico.t-laranja{ background:var(--tint-laranja); color:var(--cor-laranja); }
.ico.t-vermelho{ background:var(--tint-vermelho); color:var(--cor-vermelho); }

.funil-rows { display:flex; flex-direction:column; gap:11px; }
.funil-row { display:flex; align-items:center; gap:12px; }
.funil-lab { width:110px; font-size:.8rem; color: var(--cor-texto-muted); font-weight:500; }
.funil-track { flex:1; height:24px; border-radius:7px; background:#eef0f3; overflow:hidden; }
.funil-track > span { display:block; height:100%; border-radius:7px; min-width:2px; }
.funil-val { width:60px; text-align:right; font-family:'Space Grotesk','Inter',sans-serif; font-weight:700; font-size:.92rem; }
.funil-pct { width:52px; text-align:right; font-size:.74rem; color: var(--cor-texto-muted); }
.fb-navy   { background:linear-gradient(90deg,#16213e,#1e2c4d); }
.fb-blue   { background:linear-gradient(90deg,var(--cor-azul),#4f80f0); }
.fb-green  { background:linear-gradient(90deg,var(--cor-verde),#3cc46b); }
.fb-orange { background:linear-gradient(90deg,var(--cor-laranja),#f59b33); }
.fb-red    { background:linear-gradient(90deg,var(--cor-vermelho),#e5334f); }

@media (max-width: 1100px){
  .hero-band { grid-template-columns: 1fr; }
  .jornada-grid { grid-template-columns: repeat(2,1fr); }
}