/* A fonte Inter passou a ser carregada por <link> no <head> do index.php.
   Antes vinha por @import nesta primeira linha, o que serializava o download: o
   navegador precisava baixar e interpretar este arquivo inteiro para só então
   descobrir que precisava da fonte, atrasando a primeira renderização. */

/* ============================================================
   Perfex Reports — SnowUI Dark (ByeWind)
   ============================================================ */

:root {
  /* ── SnowUI Dark base palette ── */
  --bg:            #09090B;
  --bg-header:     #18181B;
  --bg-card:       #18181B;
  --bg-subcard:    #27272A;
  --bg-inactive:   #212124;
  --border:        #3F3F46;
  --separator:     #27272A;

  /* ── Semantic / accent colors ── */
  --blue:          #D1F277;   /* lime da marca — SUPERFICIE de acao, nao texto */
  --blue-dark:     #C2E85C;
  --green:         #22C15E;
  --green-strong:  #16A34A;
  --red:           #F87171;
  --yellow:        #FCD34D;
  --purple:        #A78BFA;
  --orange:        #FB923C;

  /* ── Text hierarchy ──
     Escala de 4 níveis da marca, com contraste medido contra --bg-subcard
     (#27272A), o fundo mais claro do tema e portanto o pior caso. Os três
     primeiros passam no WCAG AA (4,5:1); --text-faded é DECORATIVO e não deve
     receber texto que precise ser lido.

       --text        14,89:1
       --text-sec     9,31:1
       --text-muted   5,87:1
       --text-faded   3,86:1  (só bordas, separadores e ícones inativos) */
  --text:          #FFFFFF;
  --text-sec:      #C8CDD3;
  --text-muted:    #9CA3AF;
  --text-faded:    #7B8290;

  /* Cor de TEXTO e link de destaque. No tema escuro o lime da marca tem
     11,83:1 sobre os cartões, então serve como texto; no tema claro ele daria
     1,26:1 e é trocado por um oliva derivado dele. */
  --blue-text:     #D1F277;

  /* ── Legacy compat ── */
  --primary:       #D1F277;
  --primary-dark:  #C2E85C;
  --success:       #22C15E;
  --danger:        #F87171;
  --warning:       #FCD34D;
  --gray-50:       #24263A;
  --gray-100:      #1E2035;
  --gray-200:      #2D2F45;
  --gray-300:      #3D4059;
  --gray-400:      #8B92A5;
  --gray-500:      #4E5469;
  --gray-600:      #363A52;
  --gray-700:      #2D2F45;
  --gray-800:      #E2E8F0;
  --gray-900:      #F1F5F9;
  --white:         #ffffff;
  --radius:        12px;
  --shadow-sm:     0 2px 8px rgba(0,0,0,.5);
  --shadow:        0 8px 32px rgba(0,0,0,.65);

  /* ── Camadas (z-index) ──
     Antes eram 15 valores literais escolhidos por tentativa, de 50 a 10000 (com
     a sequência 9998/9999/10000, assinatura de conflito resolvido no braço).
     A ordem relativa abaixo é a MESMA de antes, com uma correção deliberada:
     os toasts subiram para cima dos modais. Havia dois sistemas de toast em
     pontas opostas da pilha — .toast-container em 300 (abaixo de qualquer
     modal) e .ml-toast em 9999 —, então um aviso disparado com um modal aberto
     podia simplesmente não aparecer. Valores locais (z-index 1/2/3 dentro de um
     componente) não usam esta escala e ficaram como estavam. */
  --z-header:        50;   /* cabeçalho fixo                                  */
  --z-dropdown:      60;   /* menus presos ao próprio bloco                   */
  --z-fab:           90;   /* botão flutuante de notas                        */
  --z-sidebar-back:  99;   /* fundo escuro da sidebar no celular              */
  --z-sidebar:      100;   /* a sidebar em si                                 */
  --z-menu:         150;   /* menus que precisam passar por cima da sidebar   */
  --z-menu-top:     200;   /* menus de relatório e do botão flutuante         */
  --z-fab-action:   400;   /* botões flutuantes de ação (notificações, IA)    */
  --z-fab-action-2: 401;   /* o de cima quando dois se encontram              */
  --z-modal-back:   500;   /* fundo dos modais leves                          */
  --z-modal:        600;   /* modais (era 1000/1100)                          */
  --z-modal-top:    700;   /* indicador de sync e overlays sobre modal        */
  --z-modal-full:   800;   /* modais de tela cheia: metas e gráfico           */
  --z-toast:        900;   /* avisos — sempre visíveis, inclusive sobre modal */
  --z-tooltip:     1000;   /* dicas e balões: o topo absoluto                 */

  /* Cor do texto sobre a superficie primaria. O lime da marca e claro:
     preto sobre ele da 16,7:1; branco daria 1,26:1. */
  --on-primary:    #0A0A0B;
  /* Acento secundario da marca (azul eletrico), para realce que nao compete
     com o lime — ex.: series de grafico e destaques em texto. */
  --azul:          #06DBF3;   /* azul eletrico da marca — acento secundario */

  /* Componentes RGB dos acentos. rgba() nao aceita var() de hex, entao as
     tintas translucidas passam a usar rgba(var(--X-rgb), alfa) e seguem o
     tema em vez de ficarem presas a uma cor fixa. */
  --acento-rgb:    209, 242, 119;   /* lime da marca  */
  --azul-rgb:      6, 219, 243;     /* azul eletrico */
  --green-rgb:     34, 193, 94;
  --red-rgb:       248, 113, 113;

  /* ---- Paleta das series de grafico ----------------------------------------
     As cores das curvas, barras e faixas moravam cravadas no assets/app.js, em
     hexadecimal, escolhidas contra o fundo escuro. No TEMA CLARO elas viravam
     linha pastel sobre cartao branco: o grafico continuava desenhado, mas nao
     se lia. Agora cada serie tem um token, que o bloco [data-tema="claro"]
     escurece. O JS passa `var(--g-x, #hex)`: o hex antigo fica de reserva, e um
     token que falte so volta ao comportamento de antes.
     Regra: so entra aqui cor de SERIE (o que o grafico desenha). Cor de marca de
     canal fica logo abaixo, porque e identidade e nao escala. */
  --g-receita:        #22C15E;
  --g-pedidos:        #06DBF3;
  --g-unidades:       #a855f7;
  --g-ticket:         #14b8a6;
  --g-dia:            #D1F277;   /* "por dia": a linha de contagem do periodo */
  --g-estoque:        #8b5cf6;
  --g-preco:          #f97316;
  --g-neutro:         #94a3b8;   /* "nao identificado", "sem prazo", sobras    */
  --g-info:           #0086ff;
  --g-info-2:         #3b9dff;
  --g-ruptura:        #ef4444;   /* faixa de fundo: dias sem estoque           */

  /* Publicidade — uma cor por metrica do seletor do grafico de Ads */
  --g-ads-custo:      #f97316;
  --g-ads-cliques:    #06DBF3;
  --g-ads-impressoes: #a855f7;
  --g-ads-vendas:     #22C15E;
  --g-ads-receita:    #14b8a6;
  --g-ads-cpc:        #eab308;
  --g-ads-roas:       #ec4899;
  --g-ads-acos:       #ef4444;
  --g-ads-tacos:      #f59e0b;

  /* Severidade / prioridade (bugs, tarefas, prazos) */
  --g-critica:        #e63329;
  --g-alta:           #f59e0b;
  --g-media:          #eab308;
  --g-baixa:          #22C15E;
  --g-sugestao:       #06DBF3;
  --g-no-prazo:       #D1F277;
  --g-atrasada:       #e63329;

  /* Marca dos canais: texto do selo (o fundo translucido vem do rgba do JS) */
  --g-canal-ml:       #ffe100;
  --g-canal-shopee:   #ff7a5c;
  --g-canal-magalu:   #6cb2ff;
  --g-canal-bling:    #4db6ac;
  --g-canal-outro:    #cbd5e1;
  --g-curva-shopee:   #ee4d2d;   /* curva do painel da Shopee (marca)        */
  --g-curva-shopee-2: #ff6533;

  /* Niveis e tipos (Concorrencia: pizzas de tipo de anuncio e de vendedor,
     selos de medalha). Sao identidade do canal, mas tambem viram FATIA de
     pizza: no claro precisam de corpo para a fatia existir. */
  --g-erro:           #ef4444;
  --g-bronze:         #b45309;
  --g-nivel-platinum: #22d3ee;
  --g-nivel-gold:     #f4c430;
  --g-nivel-silver:   #cbd5e1;
  --g-nivel-nenhum:   #64748b;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }
body {
  font-family: 'Inter', system-ui, -apple-system, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--blue-text); }

/* ---- Sistema não configurado ---- */
.nc-wrap {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
}
.nc-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 40px 48px;
  max-width: 480px;
  text-align: center;
}
.nc-card h1 { font-size: 20px; margin-bottom: 12px; color: var(--text); }
.nc-card p  { color: var(--text-sec); margin-bottom: 16px; }
.nc-card ol { text-align: left; padding-left: 20px; color: var(--text-sec);
              font-size: 14px; line-height: 2; }
.nc-card code { background: var(--bg-subcard); padding: 2px 6px;
                border-radius: 4px; font-size: 13px; color: var(--blue-text); }

/* ============================================================
   LOGIN
   ============================================================ */
#screen-login,
#screen-forgot,
#screen-reset {
  min-height: 100vh;   /* fallback p/ navegadores sem dvh */
  min-height: 100dvh;  /* viewport DINÂMICO: desconta a barra do navegador mobile, então a tela não fica mais alta que a área visível (evita o scroll) */
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 60% 30%, #1e1b4b 0%, var(--bg) 55%, #0c0e1a 100%);
}

.login-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 44px 40px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 24px 64px rgba(0,0,0,.6), 0 0 0 1px rgba(var(--azul-rgb),.08);
  text-align: center;
}
.login-icon    { font-size: 48px; margin-bottom: 12px; }
.login-icon-img { font-size: 0; margin-bottom: 18px; }
.login-logo-img { width: 220px; max-width: 72%; height: auto; display: inline-block; }
.login-card h1 { font-size: 22px; color: var(--text); margin-bottom: 4px; }
.login-sub     { color: var(--text-muted); font-size: 14px; margin-bottom: 28px; }

.form-group        { text-align: left; margin-bottom: 16px; }
.form-group label  { display: block; font-size: 13px; font-weight: 600;
                     color: var(--text-sec); margin-bottom: 6px; }
.form-group input,
.form-group select  {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text);
  background: var(--bg-subcard);
  transition: border-color .2s;
}
.form-group select { height: 42px; cursor: pointer; }
.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(var(--azul-rgb),.15);
}

.error-msg { color: var(--red); font-size: 13px; margin-top: 12px;
             min-height: 20px; display: none; }

/* ============================================================
   LAYOUT COM SIDEBAR
   ============================================================ */
.app-layout {
  display: flex;
  min-height: 100vh;
}

/* --- Sidebar --- */
.app-sidebar {
  width: 172px;
  flex-shrink: 0;
  background: #000000;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: var(--z-sidebar);
  box-shadow: 4px 0 16px rgba(0,0,0,.35);
}
.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sidebar-logo-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.sidebar-logo-btn:hover .app-name { opacity: .75; }
.sidebar-close-btn {
  display: none;
  background: none;
  border: none;
  color: var(--text-sec);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 6px;
  line-height: 1;
}
.app-logo { width: 28px; height: 28px; border-radius: 4px; object-fit: contain; }
/* Sem ícone na marca (lib/Brand.php): a inicial do nome do painel ocupa o lugar. */
.app-logo-text { display: inline-flex; align-items: center; justify-content: center; background: var(--primary); color: var(--on-primary, #0a0a0b); font-weight: 800; font-size: 15px; }
/* Página /configuracoes/marca: prévia da imagem ao lado do campo. */
.brand-img-row { display: flex; gap: 8px; align-items: center; }
.brand-img-row input[type="text"] { flex: 1; min-width: 0; }
.brand-img-prev { width: 40px; height: 40px; object-fit: contain; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-subcard, transparent); }
.app-name  { color: var(--text); font-weight: 600; font-size: 14px; white-space: nowrap; }

.sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: 10px 8px;
  flex: 1;
  gap: 0;
}
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 12px;
  background: transparent;
  border: none;
  color: var(--text-sec);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 8px;
  text-align: left;
  text-decoration: none;
  transition: background .15s, color .15s;
  white-space: normal;
  line-height: 1.25;
  letter-spacing: .01em;
}
.sidebar-item:hover  { background: rgba(255,255,255,.06); color: var(--text); }
.sidebar-item.active {
  background: rgba(var(--azul-rgb),.15);
  color: var(--azul);
  font-weight: 600;
}
.sidebar-icon { font-size: 15px; flex-shrink: 0; width: 20px; text-align: center; }

/* ── Logos dos marketplaces (via background — resolve relativo ao style.css) ── */
.mp-logo {
  display: inline-block;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
}
.mp-logo.mp-ml      { background-image: url("img/logo-ml.svg"); }
.mp-logo.mp-shopee  { background-image: url("img/logo-shopee.svg"); }
.mp-logo.mp-magalu  { background-image: url("img/logo-magalu.svg"); }

/* Tamanhos por contexto */
.sidebar-icon .mp-logo    { width: 18px; height: 18px; }
.ml-connect-icon .mp-logo { width: 64px; height: 64px; }
.home-card-icon .mp-logo  { width: 46px; height: 46px; }
.store-card-icon .mp-logo { width: 32px; height: 32px; }
.sp-platform-icon .mp-logo{ width: 22px; height: 22px; }
.cli-channel-link .mp-logo{ width: 15px; height: 15px; margin-right: 5px; }
.perf-chip .mp-logo,
.perf-channel-tag .mp-logo,
.perf-select-option .mp-logo { width: 14px; height: 14px; margin-right: 3px; }

/* Seta do grupo colapsável "Painéis" */
.sidebar-caret { margin-left: auto; font-size: 10px; color: var(--text-muted); flex-shrink: 0; }

/* Subitens (ML/Shopee sob "Clientes") */
.sidebar-subitem {
  position: relative;
  padding-left: 30px;
  font-size: 12.5px;
}
.sidebar-subitem::before {
  content: "";
  position: absolute;
  left: 16px; top: 50%;
  width: 7px; height: 7px;
  transform: translateY(-60%);
  border-left: 1.5px solid var(--border);
  border-bottom: 1.5px solid var(--border);
  border-bottom-left-radius: 3px;
}

.sidebar-footer {
  border-top: 1px solid var(--border);
  padding: 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar-logout { color: rgba(255,255,255,.45); }
.sidebar-logout:hover { color: #f87171 !important; background: rgba(239,68,68,.1) !important; }

/* --- Área principal --- */
.app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Cabeçalho móvel */
.mobile-header {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  height: 52px;
  background: var(--bg-header);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  flex-shrink: 0;
}
.btn-menu-toggle {
  background: none;
  border: none;
  color: var(--text);
  font-size: 22px;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
}
.mobile-title {
  font-weight: 600;
  color: var(--text);
  font-size: 14px;
  flex: 1;
}

/* Overlay para fechar sidebar no móvel */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: var(--z-sidebar-back);
}

/* ============================================================
   LAYOUT PRINCIPAL
   ============================================================ */
.page-body { width: 100%; max-width: 1400px; margin: 0 auto; padding: 20px 20px 40px; }

/* ============================================================
   PAINEL DE FILTROS
   ============================================================ */
.filter-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.filter-row {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end;
  margin-bottom: 12px;
}
.filter-group        { display: flex; flex-direction: column; gap: 6px; }
.filter-group label  {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .06em;
}
.filter-group select {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
  background: var(--bg-subcard);
  min-width: 200px;
  cursor: pointer;
}
.filter-group select:focus { outline: none; border-color: var(--blue); }

/* Seletor de período ML */
.ml-period-select {
  height: 34px; padding: 0 10px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--bg-inactive);
  color: var(--text); font-size: 13px; cursor: pointer;
  min-width: 160px;
}
.ml-period-select:focus { outline: none; border-color: var(--blue); }

/* Aviso do fluxo de atualização gradual dos custos na tabela de Pedidos Recentes */
.ml-orders-hint {
  margin: 4px 0 12px; padding: 8px 12px; border-radius: 8px;
  font-size: 12px; line-height: 1.5; color: var(--text-sec);
  background: rgba(var(--azul-rgb),.08); border: 1px solid rgba(var(--azul-rgb),.20);
}
.ml-orders-hint b { color: var(--text); font-weight: 600; }

/* Busca da tabela "Pedidos Recentes" (por comprador ou nº do pedido) */
.ml-orders-search {
  height: 34px; padding: 0 12px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--bg-inactive);
  color: var(--text); font-size: 13px; min-width: 260px; max-width: 100%;
}
.ml-orders-search::placeholder { color: var(--text-muted); }
.ml-orders-search:focus { outline: none; border-color: var(--blue); }
@media (max-width: 640px) { .ml-orders-search { min-width: 0; width: 100%; } }

/* Breadcrumb de navegação de categorias (Concorrência) */
.conc-breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  font-size: 12px; margin-bottom: 6px; min-height: 18px;
}
.conc-breadcrumb .conc-bc-item {
  color: var(--blue-text); text-decoration: none; cursor: pointer;
}
.conc-breadcrumb .conc-bc-item:hover { text-decoration: underline; }
.conc-breadcrumb .conc-bc-cur { color: var(--text); font-weight: 600; }
.conc-breadcrumb .conc-bc-sep { color: var(--text-muted); }

/* Feedbacks & Sugestões */
.feedback-choice { display: flex; gap: 16px; padding: 12px 0 4px; }
.feedback-choice-btn {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center;
  min-height: 96px; padding: 18px 16px; border-radius: 12px; cursor: pointer;
  background: var(--bg-subcard, rgba(0,0,0,.12)); border: 1.5px solid var(--border);
  color: var(--text); font-size: 15px; font-weight: 600; transition: border-color .15s, background .15s;
}
.feedback-choice-btn:hover { border-color: var(--blue); background: rgba(var(--azul-rgb),.08); }
.feedback-choice-icon { width: 34px; height: 34px; object-fit: contain; }
.sidebar-icon-img { width: 20px; height: 20px; object-fit: contain; display: block; }
@media (max-width: 480px) { .feedback-choice { flex-direction: column; } }
.feedback-label { display: block; font-size: 13px; font-weight: 600; color: var(--text-sec); margin: 14px 0 6px; }
.feedback-textarea {
  width: 100%; border: 1.5px solid var(--border); border-radius: 8px; padding: 10px 12px;
  font-size: 14px; color: var(--text); background: var(--bg-subcard, rgba(0,0,0,.12)); resize: vertical; font-family: inherit;
}
.feedback-textarea:focus { outline: none; border-color: var(--blue); }
.feedback-select {
  width: 100%; border: 1.5px solid var(--border); border-radius: 8px; padding: 10px 12px;
  font-size: 14px; color: var(--text); background: var(--bg-subcard, rgba(0,0,0,.12)); font-family: inherit; cursor: pointer;
}
.feedback-select:focus { outline: none; border-color: var(--blue); }
.badge.feedback-sev { font-weight: 700; }
.feedback-modules { display: flex; flex-wrap: wrap; gap: 8px; }
.feedback-mod {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer;
  padding: 5px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-subcard, rgba(0,0,0,.12));
}
.feedback-mod input { accent-color: var(--primary, var(--azul)); }
.feedback-file-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.feedback-file-hint { font-size: 11px; color: var(--text-muted); }
/* Tecla dentro da dica de anexos (Ctrl+V). Sem isto o <kbd> herda o monospace
   do navegador e destoa do resto da linha. */
.feedback-file-hint kbd {
  font: inherit; font-size: 10px; padding: 1px 4px; border-radius: 4px;
  border: 1px solid var(--border); background: var(--bg-subcard, rgba(0,0,0,.12));
  color: var(--text); white-space: nowrap;
}
.feedback-filelist { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.feedback-file-list { display: flex; flex-wrap: wrap; gap: 8px; }
.feedback-file-list:empty { display: none; }
.feedback-file-chip { font-size: 12px; padding: 4px 8px; border-radius: 6px; background: rgba(var(--azul-rgb),.12); color: var(--text); }
.feedback-file-x { cursor: pointer; color: var(--red, #e63329); margin-left: 4px; font-weight: 700; }

/* Painel admin de feedbacks */
.feedback-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.feedback-card.is-resolved { opacity: .6; }
.feedback-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.feedback-code {
  display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 8px;
  border-radius: 6px; font-family: ui-monospace, monospace; letter-spacing: .3px;
}
.feedback-code.is-bug  { background: rgba(230,51,41,.16);  color: #ff8a80; }
.feedback-code.is-feat { background: rgba(var(--azul-rgb),.16); color: #93c5fd; }
/* Histórico de metas — agrupamento por mês */
.goals-hist-month { margin-bottom: 18px; }
.goals-hist-month-title {
  font-size: 13px; font-weight: 700; color: var(--text);
  padding: 6px 2px; margin-bottom: 6px; border-bottom: 1px solid var(--border);
}
/* Valor anterior da meta (histórico) */
.goal-hist-prev { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* Modal (popup vermelho) de "metas do mês não configuradas" */
.goal-alert-modal {
  border: 2px solid var(--red);
  border-top: 6px solid var(--red);
  box-shadow: 0 18px 60px rgba(230, 51, 41, .35);
}
.goal-alert-modal .goals-modal-title { color: var(--red); }
.goal-alert-rows { display: flex; flex-direction: column; gap: 10px; }
.goal-alert-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  background: rgba(230, 51, 41, .08);
  border: 1px solid rgba(230, 51, 41, .28);
  border-radius: 10px; padding: 10px 12px;
}
.goal-alert-store   { font-size: 14px; color: var(--text); font-weight: 600; }
.goal-alert-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Abas Abertos/Resolvidos com mais respiro */
#feedbacks-tabs { padding: 5px; }
#feedbacks-tabs .ml-tab-btn { padding: 9px 22px; font-size: 13px; }
.feedback-card-meta { font-size: 12px; color: var(--text-muted); }
.feedback-card-mods { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.feedback-card-text { margin-top: 10px; font-size: 14px; color: var(--text); line-height: 1.5; white-space: pre-wrap; }
.feedback-card-files { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 12px; }
.feedback-card.is-discarded { opacity: .92; }
.feedback-reason { margin-top: 10px; padding: 10px 12px; border-radius: 8px; font-size: 13px; line-height: 1.5;
  background: rgba(248,113,113,.10); border: 1px solid rgba(248,113,113,.28); color: var(--text); }
.feedback-reply-box { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 8px; }
.feedback-reply-label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.feedback-reply-input { width: 100%; resize: vertical; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg2, rgba(0,0,0,.12)); color: var(--text); padding: 8px 10px; font-size: 13px; font-family: inherit; }
.feedback-reply-box .btn { align-self: flex-start; }
.feedback-reply-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.feedback-reply-actions .btn { align-self: center; }
.feedback-reply-chosen { font-size: 12px; color: var(--text-muted); }
.feedback-reply-existing { font-size: 12px; color: var(--text-muted); }

/* Conversa (thread) de um feedback — balões de chat com horário. */
.feedback-thread { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.fb-msg { max-width: 82%; padding: 8px 12px; border-radius: 12px; font-size: 13px; line-height: 1.5; border: 1px solid var(--border); }
.fb-msg-other { align-self: flex-start; border-bottom-left-radius: 4px; background: var(--bg-subcard, rgba(255,255,255,.04)); }
.fb-msg-mine  { align-self: flex-end;  border-bottom-right-radius: 4px; background: rgba(var(--azul-rgb),.14); border-color: rgba(var(--azul-rgb),.30); }
.fb-msg-admin.fb-msg-other { background: rgba(var(--green-rgb),.10); border-color: rgba(var(--green-rgb),.24); }
.fb-msg-meta { display: flex; gap: 8px; align-items: baseline; margin-bottom: 3px; }
.fb-msg-who  { font-weight: 700; font-size: 12px; }
.fb-msg-time { font-size: 11px; color: var(--text-muted); }
.fb-msg-text { white-space: pre-wrap; word-break: break-word; }
.fb-msg-files { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 10px; }
/* Resposta do admin exibida no card do usuário (página bugs-sugestoes) */
.feedback-answer { margin-top: 10px; padding: 10px 12px; border-radius: 8px; font-size: 13px; line-height: 1.5;
  background: rgba(var(--green-rgb),.10); border: 1px solid rgba(var(--green-rgb),.28); color: var(--text); }
.feedback-answer strong, .feedback-reason strong { color: var(--text); }
.feedback-dl { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--blue-text); text-decoration: none; cursor: pointer; padding: 4px 10px; border: 1px solid var(--border); border-radius: 6px; background: rgba(var(--azul-rgb),.08); }
/* Resposta que e erro, e nao conteudo: sem markdown e com aviso. */
.ai-bubble-erro { color: var(--red); }

.feedback-dl:hover { text-decoration: underline; background: rgba(var(--azul-rgb),.16); }

/* Modal visualizador de anexo (bugs e sugestões) */
.fbfile-body { max-height: 72vh; overflow: auto; display: flex; align-items: center; justify-content: center; background: var(--bg-app, rgba(0,0,0,.15)); border: 1px solid var(--border); border-radius: 10px; padding: 10px; min-height: 200px; }
.fbfile-img { max-width: 100%; max-height: 70vh; object-fit: contain; border-radius: 6px; }
.fbfile-frame { width: 100%; height: 70vh; border: 0; border-radius: 6px; background: #fff; }
.fbfile-pre { width: 100%; max-height: 70vh; overflow: auto; margin: 0; padding: 12px; font-size: 12px; line-height: 1.5; color: var(--text); white-space: pre; text-align: left; }
.fbfile-noprev { text-align: center; color: var(--text-sec); font-size: 14px; line-height: 1.6; padding: 30px 20px; }
.fbfile-noprev strong { color: var(--text); }

/* Abas do gráfico de faturamento (Faturamento × Tipo de frete) */
.ml-chart-tabs { display: flex; gap: 6px; }
.ml-chart-tabs .ml-tab-btn { padding: 7px 16px; font-size: 13px; }

/* Gráfico de participação por tipo de frete (donut) */
.ship-chart-wrap { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; justify-content: center; padding: 20px 8px; min-height: 220px; }
.ship-donut svg { display: block; }
.ship-donut-num { fill: var(--text); font-size: 30px; font-weight: 800; }
.ship-donut-lbl { fill: var(--text-muted); font-size: 12px; }
.ship-legend { display: flex; flex-direction: column; gap: 12px; min-width: 210px; }
.ship-legend-row { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text); }
.ship-legend-dot { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.ship-legend-label { flex: 1; }
.ship-legend-nums { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.ship-legend-val { color: var(--text-sec); font-variant-numeric: tabular-nums; }
.ship-legend-rev { color: var(--text-muted); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ship-donut { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ship-donut-total { display: flex; flex-direction: column; align-items: center; font-size: 12px; color: var(--text-muted); line-height: 1.3; }
.ship-donut-total strong { font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; }

/* Acordeão "ver SKUs" do histórico de preço mínimo */
.pf-acc-toggle {
  cursor: pointer; user-select: none; color: var(--blue-text);
  font-size: 12px; font-weight: 600; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
}
.pf-acc-toggle:hover { text-decoration: underline; }
.pf-acc-caret { display: inline-block; transition: transform .15s ease; font-size: 10px; }
.pf-acc-toggle.open .pf-acc-caret { transform: rotate(90deg); }
.pf-acc-body > td { background: rgba(255, 255, 255, .03); }

/* Página dedicada de edição de usuário (slug /editar-usuario) */
#user-edit-page .user-form-card > h3 { display: none; }  /* título fica no cabeçalho da página */
#user-edit-page #user-form-wrap { display: block; }

/* Validação de Preço Mínimo */
.pf-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.pf-msg { font-size: 12px; color: var(--text-muted); display: block; }
.pf-msg:empty { display: none; }
.pf-msg.err { color: var(--red, #e63329); }
.pf-msg.ok  { color: var(--green, #00a650); }
.pf-msg .pf-warn-toggle { color: var(--blue-text); cursor: pointer; text-decoration: underline; }
.pf-warn-list { margin: 6px 0 0; padding: 8px 12px; border-radius: var(--radius);
  background: rgba(245, 158, 11, .08); border: 1px solid rgba(245, 158, 11, .3);
  font-size: 12px; color: var(--text-sec); max-height: 180px; overflow: auto; }
.pf-warn-list div { padding: 2px 0; }

/* Modal de envio da planilha de preço mínimo */
.pf-dropzone {
  border: 2px dashed var(--border); border-radius: 12px; padding: 26px 16px;
  text-align: center; background: var(--bg-subcard, rgba(0,0,0,.12));
  transition: border-color .15s, background .15s;
}
.pf-dropzone.dragover { border-color: var(--blue); background: rgba(var(--azul-rgb),.10); }
.pf-dropzone-icon { font-size: 30px; line-height: 1; }
.pf-dropzone-icon img { width: 34px; height: 34px; object-fit: contain; }
.pf-dropzone-main { font-size: 14px; font-weight: 600; color: var(--text); margin-top: 8px; }
.pf-dropzone-sub  { font-size: 12px; color: var(--text-muted); margin: 8px 0; }
.pf-dropzone-exts { font-size: 11px; color: var(--text-muted); margin-top: 12px; }
.pf-replace { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; font-size: 12px; color: var(--text-sec); cursor: pointer; }
.pf-replace input { margin-top: 2px; flex: none; }
.pf-rules { margin-top: 18px; font-size: 12px; color: var(--text-sec); }
.pf-rules h4 { font-size: 12px; font-weight: 700; color: var(--text); margin: 0 0 6px; }
.pf-rules ul { margin: 0; padding-left: 18px; line-height: 1.65; }
.pf-rules code { background: rgba(0,0,0,.22); padding: 1px 5px; border-radius: 4px; font-size: 11px; }

/* Badge "Preço mínimo" sob as badges do produto no catálogo */
.catalog-floor {
  display: inline-flex; align-items: center; font-size: 11px;
  color: var(--text-muted); margin: 6px 8px 4px 0; padding: 10px;
  border-radius: 6px; background: rgba(255, 255, 255, .04);
  border: 1px solid var(--border);
}
.catalog-floor.is-below {
  color: var(--red, #e63329); font-weight: 600;
  background: rgba(230, 51, 41, .08); border-color: rgba(230, 51, 41, .3);
}
/* Sem preço de custo cadastrado: o selo fica amarelo em vez de sumir. */
.catalog-floor.is-nocost {
  color: var(--yellow, #b45309); font-weight: 600;
  background: color-mix(in srgb, var(--yellow, #FCD34D) 10%, transparent);
  border-color: color-mix(in srgb, var(--yellow, #FCD34D) 40%, transparent);
}
.catalog-cost { color: var(--text-sec); font-weight: 600; }
.catalog-cost--none { color: var(--yellow, #b45309); cursor: help; }
/* O mesmo aviso no card de custo da página do produto (Mercado Livre). */
.ml-product-kpi.is-nocost {
  background: color-mix(in srgb, var(--yellow, #FCD34D) 10%, transparent);
  border-color: color-mix(in srgb, var(--yellow, #FCD34D) 40%, transparent);
  cursor: help;
}

/* Painel "Perda de faturamento" em acordeão */
.loss-table th, .loss-table td { vertical-align: middle; }
.loss-row { cursor: pointer; }
.loss-row:hover { background: rgba(255,255,255,.04); }
.loss-row.is-open { background: rgba(var(--azul-rgb),.10); }
.loss-caret { color: var(--text-muted); width: 30px; text-align: center; }
.loss-detail-row > td { padding: 0 !important; background: rgba(255,255,255,.02); }
.loss-detail { padding: 14px 16px; display: flex; flex-wrap: wrap; gap: 18px 28px; }
.loss-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 20px; flex: 1 1 260px; align-content: start; }
.loss-kv { display: flex; flex-direction: column; gap: 2px; }
.loss-k { font-size: 11px; color: var(--text-muted); }
.loss-v { font-size: 14px; font-weight: 600; }
.loss-charts { display: flex; flex-direction: column; gap: 14px; flex: 1 1 300px; min-width: 240px; }
.loss-chart-title { font-size: 11px; color: var(--text-muted); margin-bottom: 5px; }
.loss-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--border); }
.loss-fill-ok  { background: var(--green); }
.loss-fill-out { background: #e63329; }
.loss-legend { display: flex; gap: 16px; margin-top: 5px; font-size: 11px; color: var(--text-sec); }
.loss-dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
.loss-dot-ok { background: var(--green); }
.loss-dot-out { background: #e63329; }
.loss-cmp { display: flex; align-items: center; gap: 8px; margin: 3px 0; font-size: 12px; }
.loss-cmp-lbl { width: 62px; color: var(--text-muted); flex-shrink: 0; }
.loss-cmp-track { flex: 1; height: 12px; background: var(--border); border-radius: 6px; overflow: hidden; }
.loss-cmp-bar { display: block; height: 100%; background: var(--azul); }
.loss-cmp-cur { background: var(--azul); }
.loss-cmp-val { width: 92px; text-align: right; font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* Faixa de KPIs da perda: cada card traz o valor do período, o do período
   anterior e o selo de variação (.stat-delta, o mesmo dos cards do painel). */
.loss-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 14px 0; }
.loss-kpi { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; background: rgba(255,255,255,.02); }
.loss-kpi-lbl  { font-size: 11px; color: var(--text-muted); }
.loss-kpi-val  { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
.loss-kpi-prev { font-size: 11px; color: var(--text-sec); font-variant-numeric: tabular-nums; }
.loss-kpi-prev em { font-style: normal; color: var(--text-muted); }
.loss-kpi .stat-delta { margin-top: 3px; align-self: flex-start; }

/* Manchete: a frase que o gerente leva ao cliente. */
.loss-headline { border-left: 3px solid #e63329; padding: 10px 14px; margin: 0 0 14px; border-radius: 0 8px 8px 0; background: rgba(230,51,41,.07); font-size: 14px; line-height: 1.5; }

/* Selo de linha cujo "dias sem estoque" foi deduzido, não medido. */
.loss-est { margin-left: 6px; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border); font-size: 10px; color: var(--text-muted); cursor: help; white-space: nowrap; }

.loss-copy-wrap { flex: 1 1 100%; }

/* Selo "queima de estoque" 🔥 e modal de gestão */
.burn-badge { margin-right: 5px; cursor: help; font-size: 1.3em; line-height: 1; vertical-align: -2px; }
/* Fogo ao lado do valor do anúncio (célula de preço do catálogo) */
.price-with-burn { display: inline-flex; align-items: center; gap: 5px; justify-content: flex-end; }
.price-with-burn .burn-badge { margin-right: 0; }
.burn-mode-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.burn-list { display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow-y: auto; }
.burn-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-subcard, rgba(255,255,255,.03)); }
.burn-item.is-expired { opacity: .6; }
.burn-item-id { font-weight: 700; font-family: ui-monospace, monospace; white-space: nowrap; }
.burn-item-cfg { flex: 1; font-size: 12px; color: var(--text-sec); }
.burn-item-del { flex-shrink: 0; }

/* Página de Notificações por cliente (/notificacoes) */
.notif-client-group { margin-bottom: 26px; }
.notif-client-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.notif-client-head h3 { margin: 0; font-size: 16px; }
.notif-client-count { font-size: 12px; color: var(--text-muted); }
.notif-type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.notif-type-card { border: 1px solid var(--border); border-left-width: 4px; border-radius: 10px; background: var(--bg-card, rgba(255,255,255,.03)); overflow: hidden; }
.notif-type-card.notif-sev-danger, .notif-type-card.notif-sev-bad { border-left-color: #e63329; }
.notif-type-card.notif-sev-warn, .notif-type-card.notif-sev-warning { border-left-color: #f59e0b; }
.notif-type-card.notif-sev-info { border-left-color: var(--azul); }
.notif-type-card.notif-sev-ok { border-left-color: var(--green); }
.notif-type-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.notif-type-icon { font-size: 18px; }
.notif-type-label { font-weight: 700; font-size: 13px; flex: 1; }
.notif-type-count { background: var(--bg-inactive, rgba(255,255,255,.08)); border-radius: 10px; padding: 1px 9px; font-size: 12px; font-weight: 700; }
.notif-card-list { list-style: none; margin: 0; padding: 6px 0; max-height: 260px; overflow-y: auto; }
.notif-card-item { display: flex; flex-direction: column; gap: 2px; padding: 7px 12px; cursor: pointer; border-bottom: 1px solid var(--border); }
.notif-card-item:last-child { border-bottom: none; }
.notif-card-item:hover { background: rgba(255,255,255,.05); }
.notif-card-store { font-size: 11px; color: var(--blue, var(--azul)); font-weight: 600; }
.notif-card-msg { font-size: 13px; color: var(--text); }
.notif-card-time { font-size: 11px; color: var(--text-muted); }
/* Logo do canal (ML/Shopee) ao lado do nome da loja (central, página e toasts) */
.notif-chan-logo { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }

/* Aviso de loja conectada sem anúncios e sem vendas (possível conta errada) */
.store-empty-warn {
  margin-top: 6px; font-size: 12px; font-weight: 600; line-height: 1.4;
  color: #f59e0b; background: rgba(245,158,11,.10);
  border: 1px solid rgba(245,158,11,.32); border-radius: 8px; padding: 6px 10px;
}
.store-card--empty { border-color: rgba(245,158,11,.42); }

/* Aviso de histórico ainda em carga (backfill retomável em andamento).
   Azul, não âmbar: não é um problema da conta como o aviso acima — é uma carga
   em progresso, e a loja volta ao normal sozinha quando ela fecha. */
.store-partial-warn {
  margin-top: 6px; font-size: 12px; font-weight: 600; line-height: 1.4;
  color: #3483fa; background: rgba(52,131,250,.10);
  border: 1px solid rgba(52,131,250,.30); border-radius: 8px; padding: 6px 10px;
}
.pf-mark { font-weight: 700; margin-right: 6px; font-size: 12px; line-height: 1; }
.pf-mark-ok  { color: var(--green, #00a650); }
.pf-mark-bad { color: var(--red, #e63329); }
.catalog-row.pf-below td { background: rgba(230, 51, 41, .07); }

/* Régua de reputação do vendedor (vermelho → verde escuro) */
.rep-ruler { display: inline-flex; gap: 2px; align-items: center; }
.rep-ruler i {
  width: 16px; height: 9px; border-radius: 2px; opacity: .2;
}
.rep-ruler i.on {
  opacity: 1; transform: scaleY(1.35);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .35);
}

/* Botões de período */
.period-btns {
  display: flex; gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-inactive);
}
.period-btn  {
  background: var(--bg-inactive);
  color: var(--text-sec);
  border: none;
  padding: 7px 14px;
  font-size: 12px; font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.period-btn:not(:last-child) { border-right: 1px solid var(--border); }
.period-btn:hover  { background: var(--bg-subcard); color: var(--text); }
.period-btn.active { background: var(--blue); color: var(--on-primary); box-shadow: 0 2px 8px rgba(var(--azul-rgb),.35); }

/* Botões de ação */
.filter-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ============================================================
   BOTÕES
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; border-radius: 8px;
  padding: 9px 20px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background .15s, box-shadow .15s, opacity .15s;
  white-space: nowrap; letter-spacing: .01em;
  font-family: 'Inter', system-ui, sans-serif;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-block    { width: 100%; justify-content: center; padding: 12px; font-size: 15px; }

.btn-primary  {
  background: var(--blue);
  color: var(--on-primary);
  box-shadow: 0 2px 8px rgba(var(--azul-rgb),.35);
}
.btn-primary:hover:not(:disabled) {
  background: var(--blue-dark);
  box-shadow: 0 4px 14px rgba(var(--azul-rgb),.45);
}
/* Botões de ação em verde-limão (#D0F078) com texto preto */
#btn-new-user,
#btn-goto-stores,
#btn-goto-audit,
#btn-goto-notes,
#perf-view-all,
#sc-mass,
#sc-modal-browse,
.btn.sc-cost-save,
.btn.cli-access,
.btn.js-select-store,
.btn.js-goal-alert-set,
.btn.js-goal-alert-dismiss {
  background: var(--blue);
  color: #000000;
  box-shadow: 0 2px 8px rgba(var(--acento-rgb),.35);
}
#btn-new-user:hover:not(:disabled),
#btn-goto-stores:hover:not(:disabled),
#btn-goto-audit:hover:not(:disabled),
#btn-goto-notes:hover:not(:disabled),
#perf-view-all:hover:not(:disabled),
#sc-mass:hover:not(:disabled),
#sc-modal-browse:hover:not(:disabled),
.btn.sc-cost-save:hover:not(:disabled),
.btn.cli-access:hover:not(:disabled),
.btn.js-select-store:hover:not(:disabled),
.btn.js-goal-alert-set:hover:not(:disabled),
.btn.js-goal-alert-dismiss:hover:not(:disabled) {
  background: #c6ea63;
  box-shadow: 0 4px 14px rgba(var(--acento-rgb),.5);
}

/* Resumir com a IA — botão padrão em verde-limão var(--blue) com texto preto */
#tc-summarize {
  background: var(--blue);
  color: #000000;
  box-shadow: 0 2px 8px rgba(var(--acento-rgb),.35);
}
#tc-summarize:hover:not(:disabled) {
  background: #c3e85e;
  box-shadow: 0 4px 14px rgba(var(--acento-rgb),.5);
}

.btn-success  {
  background: rgba(var(--green-rgb),.15);
  color: var(--green-strong);
  border: 1px solid rgba(var(--green-rgb),.25);
}
.btn-success:hover:not(:disabled) { background: rgba(var(--green-rgb),.25); }

.btn-outline  {
  background: var(--bg-subcard);
  color: var(--text-sec);
  border: 1px solid var(--border);
}
.btn-outline:hover:not(:disabled) { background: var(--bg-inactive); color: var(--text); }
.btn-outline.active { background: var(--blue); color: var(--on-primary); border-color: var(--blue); }

/* ============================================================
   CARDS DE RESUMO (KPI)
   ============================================================ */
.summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.card-stat {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  min-width: 0;            /* permite o conteúdo encolher dentro do grid (anti-overflow) */
  transition: box-shadow .2s, border-color .2s;
}
/* Conteúdo longo (rótulos/subtítulos) quebra em vez de vazar o card */
.card-stat .stat-val,
.card-stat .stat-lbl,
.card-stat .stat-sub { overflow-wrap: anywhere; }

/* ── Conciliação da Fatura (Billing) — padding consistente do conteúdo da
   seção "Taxas e Custos" (subtítulos e conciliação ficavam colados na borda,
   enquanto os cards tinham padding) e contenção de overflow. ── */
#ml-financial-section > .ml-subsection-title { padding-left: 20px; padding-right: 20px; }
#ml-billing-loading, #ml-billing-error { padding-left: 20px; padding-right: 20px; }
#ml-billing-body { padding: 0 20px 10px; }
#ml-billing-body .summary-cards { padding-left: 0; padding-right: 0; }
#ml-billing-body .card-stat { overflow: hidden; }
#ml-billing-body .card-stat .stat-sub { white-space: normal; line-height: 1.35; }
.ml-billing-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0 6px; }
/* Auditoria de cobranças: o módulo "cobrancas" cria o bloco direto dentro do card,
   que não tem padding próprio — sem esta regra ele encostava na borda. */
#ml-financial-section > .bill-audit { padding: 18px 20px 20px; }
#ml-billing-txns { margin-top: 10px; max-height: 460px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; }
#ml-billing-txns table { width: 100%; }

/* ── Barra de filtros das Transações da Fatura. Os selects são dimensionados
   pela opção mais longa ("Pagamento (MP/parcelamento/recebimento)"), o que os
   inflava a 340px e espremia a busca; o teto de largura mantém tudo numa linha. ── */
#ml-transacoes-page .catalog-status-filter { max-width: 210px; }
#ml-transacoes-page .catalog-search-input { flex: 1 1 260px; }

/* ── Balanço de Devoluções e Reclamações (dentro da Conciliação). Escopado em
   #ml-billing-body de propósito: seletor solto já vazou para o app inteiro. ── */
#ml-billing-body .ml-ret-block { margin-top: 18px; padding: 14px 0 4px; border-top: 1px solid var(--border); }
#ml-billing-body .ml-ret-title { font-weight: 600; margin-bottom: 6px; }
#ml-billing-body .ml-ret-subtitle { font-weight: 600; font-size: 13px; margin: 16px 0 6px; color: var(--text-sec); }
#ml-billing-body .ml-ret-badge {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 600; white-space: nowrap;
    border: 1px solid var(--border); color: var(--text-sec);
}
#ml-billing-body .ml-ret-badge--ok    { background: rgba(var(--green-rgb),.12);  border-color: rgba(var(--green-rgb),.35);  color: var(--green); }
#ml-billing-body .ml-ret-badge--debit { background: rgba(239,68,68,.12);  border-color: rgba(239,68,68,.35);  color: #ef4444; }
#ml-billing-body .ml-ret-badge--wait  { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.35); color: #f59e0b; }
.card-stat:hover { box-shadow: 0 4px 20px rgba(0,0,0,.3); }
.card-help:hover,
.card-help:focus { color: var(--text-sec) !important; border-color: var(--text-muted) !important; }

/* ── Balão de ajuda (tooltip estilo conversa) dos ícones "?" ──
   Renderizado no <body> via JS (não como pseudo-elemento) para não ser cortado
   pelo overflow:hidden das seções (.ml-section-card). */
.card-tip-bubble {
  position: fixed;
  z-index: var(--z-tooltip);
  width: max-content;
  max-width: 240px;
  white-space: normal;
  text-align: left;
  background: var(--bg-subcard);
  color: var(--text);
  border: 1px solid var(--blue);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  padding: 9px 12px;
  border-radius: 12px;
  box-shadow: var(--shadow);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease;
}
.card-tip-bubble--show { opacity: 1; transform: translateY(0); }

/* Rabinho do balão apontando para o ícone (centro alinhado via --tip-arrow-x) */
.card-tip-bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: var(--tip-arrow-x, 50%);
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: var(--bg-subcard);
}
/* Variante exibida ABAIXO do ícone — rabinho aponta para cima */
.card-tip-bubble--bottom::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--bg-subcard);
}

/* Card clicável (ex.: Pedidos Cancelados → abre lista) */
.card-stat-clickable { cursor: pointer; }
.card-stat-clickable:hover { border-color: var(--red); }
.card-stat-hint { font-size: 10px; color: var(--text-muted); margin-top: 4px; }

/* Borda lateral semântica — KPIs de Tarefas */
#summary-cards .card-stat:nth-child(1) { border-left-color: var(--text-muted); }
#summary-cards .card-stat:nth-child(2) { border-left-color: var(--blue); }
#summary-cards .card-stat:nth-child(3) { border-left-color: var(--green-strong); }
#summary-cards .card-stat:nth-child(4) { border-left-color: var(--red); }
#summary-cards .card-stat:nth-child(5) { border-left-color: var(--purple); }

/* Borda lateral semântica — KPIs ML (Pedidos) */
#ml-cards-orders .card-stat:nth-child(1) { border-left-color: var(--green-strong); }
#ml-cards-orders .card-stat:nth-child(2) { border-left-color: var(--blue); }
#ml-cards-orders .card-stat:nth-child(3) { border-left-color: var(--blue); }
#ml-cards-orders .card-stat:nth-child(4) { border-left-color: var(--blue); }
#ml-cards-orders .card-stat:nth-child(5) { border-left-color: var(--purple); }
#ml-cards-orders .card-stat:nth-child(6) { border-left-color: var(--red); }

/* Borda lateral semântica — KPIs ML (Catálogo) */
#ml-cards-items .card-stat:nth-child(1) { border-left-color: var(--green-strong); }
#ml-cards-items .card-stat:nth-child(2) { border-left-color: var(--red); }
#ml-cards-items .card-stat:nth-child(3) { border-left-color: var(--yellow); }
#ml-cards-items .card-stat:nth-child(4) { border-left-color: var(--blue); }

/* Borda lateral semântica — KPIs ML (Ads) */
#ml-ads-cards .card-stat:nth-child(1) { border-left-color: var(--red); }
#ml-ads-cards .card-stat:nth-child(2) { border-left-color: var(--blue); }
#ml-ads-cards .card-stat:nth-child(3) { border-left-color: var(--purple); }
#ml-ads-cards .card-stat:nth-child(4) { border-left-color: var(--yellow); }
#ml-ads-cards .card-stat:nth-child(5) { border-left-color: var(--green-strong); }
#ml-ads-cards .card-stat:nth-child(6) { border-left-color: var(--green); }
#ml-ads-cards .card-stat:nth-child(7)  { border-left-color: var(--blue); }
#ml-ads-cards .card-stat:nth-child(8)  { border-left-color: var(--text-muted); }
#ml-ads-cards .card-stat:nth-child(9)  { border-left-color: var(--red); }
#ml-ads-cards .card-stat:nth-child(10) { border-left-color: var(--yellow); }

/* Cards de publicidade (12 cards) — largura mínima legível, quebra automática */
#ml-ads-cards { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); cursor: default; gap: 12px; }
#ml-ads-cards .card-stat:nth-child(11) { border-left-color: var(--purple); }
#ml-ads-cards .card-stat:nth-child(12) { border-left-color: #fb923c; }
.ml-ads-chart-hint { display: none !important; }

/* Taxas do Marketplace */
#ml-fees-cards .card-stat:nth-child(1) { border-left-color: var(--red); }
#ml-fees-cards .card-stat:nth-child(2) { border-left-color: #fb923c; }
#ml-fees-cards .card-stat:nth-child(3) { border-left-color: var(--green-strong); }
#ml-fees-cards .card-stat:nth-child(4) { border-left-color: var(--yellow); }

/* Reclamações */
#ml-claims-cards .card-stat:nth-child(1) { border-left-color: var(--text-muted); }
#ml-claims-cards .card-stat:nth-child(2) { border-left-color: var(--yellow); }
#ml-claims-cards .card-stat:nth-child(3) { border-left-color: var(--red); }
#ml-claims-cards .card-stat:nth-child(4) { border-left-color: var(--blue); }
#ml-claims-cards .card-stat:nth-child(5) { border-left-color: var(--red); }
#ml-claims-cards .card-stat:nth-child(6) { border-left-color: var(--green-strong); }

.stat-val   {
  font-size: 24px; font-weight: 700;
  color: var(--text);
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -.01em;
}
.stat-lbl   { font-size: 11px; color: var(--text-sec); font-weight: 500; letter-spacing: .03em; text-transform: uppercase; }
.stat-sub   { font-size: 10px; color: var(--text-muted); opacity: .8; margin-top: 2px; }
.stat-blue  { color: var(--blue-text); }
.stat-green { color: var(--green); }
.stat-red   { color: var(--red); }
.stat-purple{ color: var(--purple); }
.stat-orange{ color: #fb923c; }
.stat-yellow{ color: var(--yellow); }

/* Barra de status */
.status-bar {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 16px;
}
.status-pill {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 12px 5px 6px;
  font-size: 12px;
}
.status-pill strong { color: var(--text); }

/* ============================================================
   TABELA DE TAREFAS
   ============================================================ */
.table-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.table-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--separator);
  flex-wrap: wrap; gap: 12px;
}
.table-toolbar h2 { font-size: 14px; font-weight: 700; color: var(--text); }
.toolbar-right     { display: flex; align-items: center; gap: 12px; }
.toolbar-right input {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 7px 12px;
  font-size: 12px;
  width: 240px;
  background: var(--bg-subcard);
  color: var(--text);
}
.toolbar-right input::placeholder { color: var(--text-muted); }
.toolbar-right input:focus { outline: none; border-color: var(--blue); }
.task-count { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

.table-scroll { overflow-x: auto; }

table           { width: 100%; border-collapse: collapse; font-size: 12px; }
thead th        {
  background: var(--bg-subcard);
  color: var(--text-sec);
  padding: 9px 12px;
  text-align: left;
  white-space: nowrap;
  font-size: 11px; font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  position: sticky; top: 0; z-index: 1;
  border-bottom: 1px solid var(--border);
}
tbody td        {
  padding: 8px 12px;
  border-bottom: 1px solid var(--separator);
  vertical-align: middle;
  color: var(--text);
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: rgba(var(--azul-rgb),.06); }
tbody tr.row-overdue td { background: rgba(248,113,113,.07) !important; }

/* ID da tarefa como link */
.task-link {
  color: var(--blue-text);
  text-decoration: none;
  font-weight: 600;
  font-family: 'Segoe UI', monospace;
}
.task-link:hover { text-decoration: underline; }

/* Colunas específicas */
td:first-child  { font-size: 12px; }
.td-date        { white-space: nowrap; color: var(--text-sec); }
.td-assign      { max-width: 200px; font-size: 11px; color: var(--text-sec); }

/* ============================================================
   BADGES (status e prioridade)
   ============================================================ */
.badge {
  display: inline-block; padding: 2px 9px;
  border-radius: 12px; font-size: 11px; font-weight: 700;
  white-space: nowrap; letter-spacing: .02em;
}
/* Status — dark mode */
.s1 { background: rgba(71,85,105,.3);   color: #94a3b8; }
.s2 { background: rgba(var(--azul-rgb),.2);  color: #93c5fd; }
.s3 { background: rgba(250,204,21,.15); color: #fde047; }
.s4 { background: rgba(192,132,252,.2); color: #d8b4fe; }
.s5 { background: rgba(74,222,128,.2);  color: #86efac; }
.od { background: rgba(248,113,113,.25); color: #fca5a5; margin-left: 4px; }

/* Badge "sem estoque" (Principais sem estoque) */
.oos-badge {
  display: inline-block; padding: 2px 9px; border-radius: 12px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
  background: rgba(248,113,113,.25); color: #fca5a5;
}

/* Ícone do estoque FULL (Mercado Envios Full) — substitui o emoji 🏭.
   Usa background-image (não <img>): o caminho é relativo ao style.css, então
   funciona em qualquer rota (a lista de produtos abre em /ml/catalogo, onde um
   src relativo de <img> quebraria). object-fit/contain preserva a proporção. */
.full-logo-icon {
  display: inline-block; flex-shrink: 0; vertical-align: middle;
  height: 16px; width: 48px;   /* proporção do logo real ~134:40 (≈3.35:1) */
  /* Usa o arquivo img/logo-full.webp. O caminho é relativo ao style.css
     (que fica em /assets), então resolve igual em qualquer rota — inclusive
     /ml/catalogo — sem depender do src relativo de um <img>. Assim, trocar o
     arquivo de imagem reflete automaticamente em todos os lugares. */
  background: url("img/logo-full.webp?v=2") no-repeat center center;
  background-size: contain;
}
/* Dentro dos badges de estoque (fonte 12px) o logo acompanha o texto.
   Na lista de produtos cadastrados (proporção do logo real ~134:40). */
.catalog-stock-full .full-logo-icon { height: 19px; width: 48px; }
/* No card "No FULL" o logo fica um pouco maior, junto do texto */
.stat-lbl .full-logo-icon { height: 18px; width: 48px; margin-left: 3px; }

/* Legenda da aba "Principais sem estoque" */
.oos-note {
  font-size: 12px; color: var(--text-muted);
  padding: 12px 16px;
  margin: 0 0 16px;
  background: rgba(248,113,113,.08);
  border: 1px solid rgba(248,113,113,.2);
  border-radius: 10px;
  line-height: 1.5;
}

/* Legenda dos motivos da Perda de Faturamento: mesma caixa da nota, sem o tom
   de alerta — ela explica a coluna, não avisa de nada. O `title` dos selos não
   aparece em tela de toque, e sem isto a coluna Motivo fica sem explicação. */
.loss-legenda {
  margin: 12px 0 0;
  background: var(--surface-2, rgba(148,163,184,.08));
  border-color: rgba(148,163,184,.22);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}

/* Rótulo de Curva B (Curva A usa o azul padrão de .top-prod-pareto-label) */
.top-prod-pareto-label.curve-b {
  color: #fbbf24; background: rgba(251,191,36,.12);
}

/* Prioridade */
.p1 { background: rgba(74,222,128,.15);  color: #86efac; }
.p2 { background: rgba(250,204,21,.15);  color: #fde047; }
.p3 { background: rgba(251,146,60,.15);  color: #fda172; }
.p4 { background: rgba(248,113,113,.2);  color: #fca5a5; }

/* ============================================================
   ESTADOS: CARREGANDO / VAZIO
   ============================================================ */
.loading-state, .empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 20px; color: var(--text-muted); text-align: center; gap: 12px;
}
.loading-state p, .empty-state p { font-size: 14px; }
.empty-sub  { font-size: 13px; color: var(--text-muted); }

/* Spinner */
.spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 768px) {
  .app-sidebar {
    position: fixed;
    left: -260px;
    top: 0;
    height: 100vh;
    z-index: var(--z-sidebar);
    transition: left .28s ease;
  }
  .app-sidebar.sidebar-open { left: 0; }
  .sidebar-close-btn  { display: block; }
  .mobile-header      { display: flex; }

  .page-body        { padding: 12px 12px 150px; }
  .filter-panel     { padding: 14px; }

  /* Painel de filtros no celular.
     O `flex-direction: column` sozinho não bastava: o `align-items: flex-end`
     herdado do .filter-row (que existe para alinhar os controles pela base no
     desktop) passa a empurrar TODOS os grupos para a borda direita quando o eixo
     vira vertical — era o "desarrumado". E o `min-width: 200px` dos selects
     estourava a largura da tela. */
  .filter-row       { flex-direction: column; align-items: stretch; gap: 14px; }
  .filter-group     { width: 100%; min-width: 0; }
  .filter-group select,
  .filter-group .date-input { min-width: 0; width: 100%; }
  .custom-date-wrap { flex-wrap: wrap; }

  /* O seletor de período é um controle segmentado: borda única em volta,
     divisórias entre os botões e cantos arredondados só nas pontas. Com
     `flex-wrap` ele quebrava a linha e as divisórias/cantos caíam em lugares
     errados — daí o aspecto "carregado". Em grade de duas colunas ele volta a
     ser um bloco só, com as divisórias no lugar certo. */
  .period-btns      { display: grid; grid-template-columns: 1fr 1fr; }
  .period-btn       { padding: 9px 10px; }
  .period-btn:not(:last-child) { border-right: none; }
  .period-btn:nth-child(odd)   { border-right: 1px solid var(--border); }
  .period-btn:not(:nth-child(-n+2)) { border-top: 1px solid var(--border); }
  /* Ímpar sozinho na última linha ocupa as duas colunas, sem meio-botão vago. */
  .period-btn:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: none; }
  /* Cards de KPI: `repeat(2, 1fr)` era rígido demais. Num telefone de 360px
     sobram ~336px, ou seja 162px por card — menos que os 36px de padding mais o
     valor monetário, e o conteúdo vazava. Voltando ao auto-fit, a grade cai
     sozinha para uma coluna quando não couber duas, que é o comportamento que a
     regra do desktop já tinha e o override de celular anulava. */
  .summary-cards    { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
  #ml-ads-cards     { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
  .card-stat        { padding: 14px; }

  .toolbar-right    { flex-direction: column; align-items: flex-start; }
  .ml-filter-actions { width: 100%; margin-left: 0; }
  .ml-topbar        { padding: 14px; }
  .ml-topbar-row    { flex-direction: column; align-items: stretch; }
  .ml-topbar-row .filter-group { width: 100%; }
  /* Selects de largura mínima fixa (160px no período, 200px nos filtros) somados
     ao padding do card estouravam a tela. Na vertical eles ocupam a linha toda. */
  .ml-period-select,
  .catalog-status-filter,
  .catalog-search-input { min-width: 0; width: 100%; max-width: 100%; }
  .report-dropdown-menu { right: auto; left: 0; }
  .toolbar-right input { width: 100%; }
  .login-card       { margin: 20px; padding: 32px 24px; }
  .store-cards-grid { grid-template-columns: 1fr; }
  .settings-section-block { padding: 16px; }
  .ml-section-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .ml-section-header-right { width: 100%; }
  .ml-section-card .summary-cards { padding: 12px; }

  /* Home: 2 botões por linha no mobile */
  .home-screen { min-height: auto; padding: 24px 12px; justify-content: flex-start; }
  .home-welcome { margin-bottom: 24px; }
  .home-cards {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 12px; width: 100%;
  }
  .home-card { width: auto; padding: 22px 14px; border-radius: 12px; }
  .home-card-icon { font-size: 34px; margin-bottom: 8px; }
  .home-card-icon-img, .home-card-icon .mp-logo { width: 38px; height: 38px; }
  .home-card-title { font-size: 14px; }
  .home-card-desc  { font-size: 12px; }
}

/* Campo em edição no celular: com o teclado aberto sobra pouca tela, então o campo
   que está sendo preenchido ganha um contorno para não se perder de vista.
   A classe é posta pelo JS (keepFocusedFieldVisible) em qualquer largura; só aqui
   ela vira estilo, para não mudar nada no desktop. */
@media (max-width: 768px) {
  .kb-field-active {
    border-color: var(--blue) !important;
    outline: 2px solid var(--blue);
    outline-offset: 1px;
    box-shadow: 0 0 0 4px rgba(var(--azul-rgb),.18) !important;
  }
}

/* ============================================================
   NAVEGAÇÃO POR ABAS (legado — mantido para compat.)
   ============================================================ */
.app-nav { display: flex; gap: 2px; }
.nav-tab {
  background: transparent;
  color: rgba(255,255,255,.5);
  border: none;
  padding: 8px 16px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  border-radius: 6px;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.nav-tab:hover  { background: rgba(255,255,255,.07); color: var(--text); }
.nav-tab.active { background: rgba(var(--azul-rgb),.18); color: var(--blue-text); }

/* ============================================================
   MERCADO LIVRE — TELA DE CONEXÃO
   ============================================================ */
/* ── Seletor de lojas ── */
.store-selector-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  margin-bottom: 24px; padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.store-selector-title { font-size: 18px; font-weight: 700; color: var(--text); margin: 0; }
/* ── Store table ── */
.store-table-wrap {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.store-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.store-table th {
  text-align: left; padding: 7px 10px;
  border-bottom: 2px solid var(--border);
  color: var(--text-sec); font-weight: 600;
  white-space: nowrap;
}
.store-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  white-space: nowrap;
}
.store-table tbody tr:hover { background: var(--bg-subcard); }
.store-name-cell { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.store-name-text { font-weight: 700; font-size: 16px; color: var(--text); }
.store-name-sub  { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.store-name-edit { display: flex; align-items: center; gap: 4px; }
.store-rename-input {
  padding: 4px 8px; font-size: 13px;
  background: var(--bg-input, var(--bg-subcard));
  border: 1px solid var(--blue); border-radius: 6px;
  color: var(--text); width: 180px;
}
.btn-icon {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 13px; padding: 2px 4px;
  border-radius: 4px; line-height: 1;
}
.btn-icon:hover { color: var(--blue-text); background: var(--bg-subcard); }
.store-var-badge {
  display: inline-block; padding: 2px 8px; border-radius: 99px;
  font-size: 12px; font-weight: 600;
}
.store-var-badge[data-tip] { cursor: help; }
.store-var-badge.pos { background: rgba(var(--green-rgb),.15); color: var(--green); }
.store-var-badge.neg { background: rgba(248,113,113,.15); color: var(--red); }
.store-actions {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: stretch;
  min-width: 110px;
}
.store-actions .btn,
.store-actions .report-dropdown-wrap { width: 100%; }
.store-actions .report-dropdown-wrap .btn { width: 100%; }
.store-table-note { font-size: 11px; color: var(--text-muted); margin-top: 10px; padding: 0 4px; }

/* Tabela de lojas vira cards no mobile: ações logo abaixo do ID, em linha */
@media (max-width: 640px) {
  .store-table-wrap { overflow-x: visible; }
  .store-table { width: 100%; display: block; }
  .store-table thead { display: none; }
  .store-table tbody { display: block; }
  .store-table tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px; padding: 14px; margin-bottom: 12px;
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--bg-card);
  }
  .store-table tbody tr:hover { background: var(--bg-card); }
  .store-table td {
    display: flex; flex-direction: column; gap: 2px;
    padding: 0; border: none; white-space: normal; font-size: 13px;
  }
  .store-table td::before {
    content: attr(data-label);
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .03em; color: var(--text-muted);
  }
  .store-table td[data-label=""]::before,
  .store-table td:not([data-label])::before { content: none; }

  /* Nome + ID ocupam a linha inteira, sem rótulo */
  .store-table td.store-name-col { grid-column: 1 / -1; order: 1; }
  .store-table td.store-name-col::before { content: none; }

  /* Ações logo abaixo do nome, botões em linha */
  .store-table td.store-actions {
    grid-column: 1 / -1; order: 2;
    flex-direction: row; flex-wrap: wrap; gap: 6px;
    min-width: 0; align-items: center; margin-top: 2px;
  }
  .store-table td.store-actions::before { content: none; }
  .store-table td.store-actions .btn { width: auto; flex: 0 0 auto; }
  .store-table td.store-actions .report-dropdown-wrap { width: auto; }
  .store-table td.store-actions .report-dropdown-wrap .btn { width: 100%; }

  /* Métricas em grade de 2 colunas, após as ações */
  .store-table td:not(.store-name-col):not(.store-actions) { order: 3; }
  .store-name-text { font-size: 15px; }
}
/* KPI color classes */
.kpi-green  { color: var(--green); font-weight: 600; }
.kpi-yellow { color: var(--yellow, #f59e0b); font-weight: 600; }
.kpi-red    { color: var(--red);   font-weight: 600; }
.store-metric-na { color: var(--text-muted); }
/* Goal achievement badges */
.store-achieve {
  font-size: 11px; font-weight: 600; margin-top: 3px;
  display: flex; align-items: center; gap: 3px;
}
.store-achieve.achieve-ok   { color: var(--green); }
.store-achieve.achieve-warn { color: var(--yellow, #f59e0b); }
.store-achieve.achieve-bad  { color: var(--red); }
/* Projeção de fim de mês (pace) — mais sutil que o atingimento realizado */
.store-project {
  font-size: 10px; font-weight: 600; margin-top: 2px; opacity: .8;
  display: flex; align-items: center; gap: 3px;
}
.store-project.proj-ok   { color: var(--green); }
.store-project.proj-warn { color: var(--yellow, #f59e0b); }
.store-project.proj-bad  { color: var(--red); }
/* Goals modal */
.goals-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  z-index: var(--z-modal-full);
}
.goals-modal {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 16px; padding: 28px 32px; width: min(560px, 94vw);
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0,0,0,.6);
}
.goals-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.goals-modal-title  { font-size: 16px; font-weight: 700; color: var(--text); margin: 0; }
.goals-close-btn    { font-size: 16px; color: var(--text-muted); }
.goals-modal-hint   { font-size: 12px; color: var(--text-sec); margin: 0 0 18px; }
.goals-modal-body   { margin-bottom: 20px; }
.goals-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
}
@media (max-width: 480px) { .goals-grid { grid-template-columns: 1fr; } }
.goals-field label  { display: block; font-size: 12px; font-weight: 600; color: var(--text-sec); margin-bottom: 5px; }
.goals-field input[type="number"] {
  width: 100%; padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-subcard);
  color: var(--text); font-size: 13px;
}
.goals-field input[type="number"]:focus { border-color: var(--blue); outline: none; }
.goals-field-hint   { font-size: 11px; color: var(--text-muted); display: block; margin-top: 3px; }
.goals-modal-footer { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Permission field inside perm list */
.perm-item-field      { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; }
/* Nota que explica o bloco "Lojas específicas". Ocupa a linha inteira da grade
   (as caixas de permissão são colunas) e fica antes das listas. */
.perm-scope-note {
  width: 100%; margin: 0 0 4px; font-size: 12px; line-height: 1.5;
  color: var(--text-muted);
}
.perm-field-label     { font-size: 13px; font-weight: 600; color: var(--text-sec); }
.perm-field-hint      { font-size: 11px; color: var(--text-muted); }
/* Store permission checkboxes */
.perm-store-checkboxes { display: flex; flex-direction: column; gap: 6px; padding: 6px 0; }
.perm-store-check {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 13px; padding: 5px 10px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--bg-subcard);
}
.perm-store-check:hover { background: var(--surface-2, rgba(0,0,0,.04)); }
.perm-store-check input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); }
.perm-store-check-name { flex: 1; color: var(--text); font-weight: 500; }
.perm-store-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.perm-store-row .perm-store-check { flex: 1; min-width: 200px; }
.perm-store-manager {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 12px; color: var(--text-sec, #8B92A5); white-space: nowrap;
  padding: 5px 10px; border-radius: 6px; border: 1px solid var(--border);
}
.perm-store-manager input { width: 15px; height: 15px; cursor: pointer; accent-color: var(--purple, #A78BFA); }
.perm-store-manager input:checked + span { color: var(--purple, #A78BFA); font-weight: 600; }
.perm-store-check-id   { font-size: 11px; color: var(--text-muted); background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 4px; }
.perm-store-loading    { font-size: 12px; color: var(--text-muted); font-style: italic; padding: 4px 0; }
.btn-danger {
  background: rgba(220,38,38,.12); color: var(--red);
  border: 1px solid rgba(220,38,38,.25); border-radius: var(--radius);
  padding: 6px 14px; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background .15s;
}
.btn-danger:hover { background: rgba(220,38,38,.22); }
.btn-outline {
  background: transparent; color: var(--text-sec);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background .15s;
}
.btn-outline:hover { background: var(--bg-subcard); }

.ml-connect-card {
  max-width: 480px;
  margin: 60px auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 48px 40px;
  text-align: center;
}
.ml-connect-icon  { font-size: 52px; margin-bottom: 16px; }
.ml-connect-card h2 { font-size: 20px; color: var(--text); margin-bottom: 10px; }
.ml-connect-card p  { color: var(--text-sec); font-size: 14px; margin-bottom: 24px; line-height: 1.6; }
.ml-connect-card code { background: var(--bg-subcard); padding: 2px 6px;
                        border-radius: 4px; font-size: 13px; color: var(--blue-text); }
.ml-connect-note { font-size: 12px !important; color: var(--text-muted) !important;
                   margin-top: 16px !important; margin-bottom: 0 !important; }

.btn-ml-connect {
  display: inline-flex; align-items: center; gap: 8px;
  background: #ffe600; color: #1a1a1a;
  border: none; border-radius: var(--radius);
  padding: 12px 28px; font-size: 15px; font-weight: 700;
  cursor: pointer; transition: background .15s;
}
.btn-ml-connect:hover:not(:disabled) { background: #f0d800; }
.btn-ml-connect:disabled { opacity: .6; cursor: not-allowed; }

/* ============================================================
   MERCADO LIVRE — BARRA DE PROGRESSO (sincronização)
   ============================================================ */
.ml-progress-card {
  max-width: 480px;
  margin: 60px auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 40px 40px 36px;
  text-align: center;
}
.ml-progress-step {
  font-size: 14px;
  color: var(--text-sec);
  margin-bottom: 20px;
  min-height: 40px;
  line-height: 1.5;
}
.ml-progress-bar-wrap {
  background: var(--separator);
  border-radius: 8px;
  height: 8px;
  overflow: hidden;
  margin-bottom: 10px;
}
.ml-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--azul));
  border-radius: 8px;
  transition: width .5s ease;
}
.ml-progress-pct {
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-text);
  margin-bottom: 16px;
}
.ml-progress-note {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ============================================================
   MERCADO LIVRE — DASHBOARD
   ============================================================ */
.ml-section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

/* Badge com nickname do vendedor */
.ml-user-badge {
  display: flex; align-items: center; gap: 6px;
  background: rgba(var(--azul-rgb),.1);
  color: var(--azul);
  font-size: 13px; font-weight: 600;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid rgba(var(--azul-rgb),.25);
}
.ml-badge-dot {
  width: 8px; height: 8px;
  background: var(--green-strong);
  border-radius: 50%;
  display: inline-block;
}

/* ── Topbar compacta do dashboard ML ── */
.ml-topbar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.ml-topbar-row {
  display: flex;
  /* Alinhamento pela BASE, igual ao .filter-row. Com `center`, o grupo de
     período (que tem duas linhas: rótulo em cima, select embaixo) era
     centralizado contra os botões de uma linha só, e o topo do painel ficava
     visivelmente desalinhado. Uma das duas ml-topbar-row do index.php já
     corrigia isso com estilo inline; a outra não — daí a diferença entre a tela
     de seleção de loja e a do dashboard. */
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

/* ── Grupo de ações do filtro ML (cabeçalho do dashboard) ── */
.ml-filter-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ── Dropdown de formato de relatório ── */
.report-dropdown-wrap { position: relative; }

.report-dropdown-toggle::after { content: ''; }

.report-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: var(--z-menu-top);
  min-width: 170px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  overflow: hidden;
}
.report-dropdown-menu.open { display: block; }

.report-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: background .15s;
}
.report-dropdown-item:hover { background: var(--bg-subcard); }
.report-dropdown-item + .report-dropdown-item { border-top: 1px solid var(--border); }

/* Botão desconectar */
.btn-ml-disconnect {
  display: inline-flex; align-items: center;
  background: rgba(248,113,113,.1);
  color: var(--red);
  border: 1px solid rgba(248,113,113,.3);
  border-radius: var(--radius);
  padding: 7px 16px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background .15s;
}
.btn-ml-disconnect:hover { background: rgba(248,113,113,.2); }

/* Label de SKU estimado */
.ml-approx { font-size: 11px; font-weight: 400; color: var(--text-muted); }

/* ============================================================
   MERCADO LIVRE — BADGES DE STATUS DO PEDIDO
   ============================================================ */
.ml-paid      { background: rgba(74,222,128,.2);   color: #86efac; }
.ml-pending   { background: rgba(250,204,21,.15);  color: #fde047; }
.ml-cancelled { background: rgba(248,113,113,.2);  color: #fca5a5; }

/* ============================================================
   MERCADO LIVRE — TOAST (notificação OAuth)
   ============================================================ */
.ml-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  padding: 12px 24px; border-radius: 8px;
  font-size: 14px; font-weight: 600; color: #fff;
  box-shadow: var(--shadow); z-index: var(--z-toast);
  transition: opacity .4s;
}
.ml-toast-success { background: var(--success); }
.ml-toast-error   { background: var(--danger); }
.ml-toast-hide    { opacity: 0; }

/* ============================================================
   FILTROS POR COLUNA
   ============================================================ */
#col-filter-row th {
  padding: 4px 6px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.col-filter {
  width: 100%;
  padding: 4px 6px;
  font-size: 11px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-subcard);
  color: var(--text);
  box-sizing: border-box;
}
.col-filter:focus {
  outline: none;
  border-color: var(--blue);
}

/* ── Páginas Perfex admin (Horas Trabalhadas / Tempo de Execução) ── */
/* Filtros por coluna — mesmo estilo de .col-filter */
.hp-col-filter,
.ep-col-filter {
  width: 100%;
  padding: 4px 6px;
  font-size: 11px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-subcard);
  color: var(--text);
  box-sizing: border-box;
}
.hp-col-filter:focus,
.ep-col-filter:focus { outline: none; border-color: var(--blue); }

/* Botões de busca — verde-limão com texto preto */
#hp-btn-search,
#ep-btn-search {
  background: var(--blue);
  color: #000;
  box-shadow: 0 2px 8px rgba(var(--acento-rgb),.35);
}
#hp-btn-search:hover:not(:disabled),
#ep-btn-search:hover:not(:disabled) {
  background: #c2e85f;
  box-shadow: 0 4px 14px rgba(var(--acento-rgb),.5);
}

/* Link de tarefa em Tempo de Execução */
#tab-exectime .task-link { color: var(--blue); }

/* Horas Trabalhadas — linha de total no rodapé da tabela */
#hp-tfoot .hp-total-row td {
  border-top: 2px solid var(--border);
  background: var(--bg-subcard);
  padding-top: 10px; padding-bottom: 10px;
}

/* Horas Trabalhadas — a coluna "Tarefa" absorve o espaço livre,
   evitando colunas muito espaçadas (reduz o "gap" entre elas) */
#tab-horas thead th:nth-child(2),
#tab-horas tbody td:nth-child(2) { width: 100%; }

/* Altura mínima do card "Tempo médio por funcionário" */
.ep-bystaff-card { min-height: 400px; }

/* Menu de seleção de funcionários (Tempo de Execução).
   position:fixed + z-index alto para não ser cortado por overflow de nenhum
   ancestral (o .ml-section-card usa overflow:hidden e o card muda de altura
   conforme a seleção). A posição (top/left) é calculada no JS a partir do botão. */
.ep-staff-menu {
  position: fixed;
  z-index: var(--z-tooltip);
  min-width: 220px;
  max-height: 300px;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  padding: 8px;
}
.ep-staff-menu .ep-staff-actions {
  display: flex; gap: 8px; margin-bottom: 6px;
  padding-bottom: 6px; border-bottom: 1px solid var(--separator);
}
.ep-staff-menu label {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 6px; font-size: 13px; color: var(--text);
  border-radius: 6px; cursor: pointer;
}
.ep-staff-menu label:hover { background: var(--bg-subcard); }
.ep-staff-menu input[type="checkbox"] { accent-color: var(--blue); cursor: pointer; }

/* ============================================================
   FILTRO DE DATA PERSONALIZADA
   ============================================================ */
.custom-date-wrap {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; flex-wrap: wrap;
}
.date-input {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 7px 10px;
  font-size: 12px;
  color: var(--text);
  background: var(--bg-subcard);
}
.date-input:focus { outline: none; border-color: var(--blue); }
.date-sep { color: var(--text-muted); font-size: 12px; }
.btn-sm   { padding: 7px 14px !important; font-size: 12px !important; }

/* ============================================================
   GRÁFICO DE FATURAMENTO
   ============================================================ */
.ml-chart-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-top: 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.ml-chart-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--separator);
  flex-wrap: wrap; gap: 10px;
}
.chart-type-btns {
  display: flex; gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-inactive);
}
.chart-type-btn {
  background: var(--bg-inactive);
  color: var(--text-sec);
  border: none; padding: 6px 14px;
  font-size: 12px; font-weight: 600;
  cursor: pointer; transition: background .15s, color .15s;
}
.chart-type-btn:not(:last-child) { border-right: 1px solid var(--border); }
.chart-type-btn:hover  { background: var(--bg-subcard); color: var(--text); }
.chart-type-btn.active { background: var(--blue); color: var(--on-primary); }

.ml-chart-body  { padding: 16px 16px 12px; }
.ml-chart-hint  {
  text-align: center; color: var(--text-muted);
  font-size: 13px; padding: 40px 20px;
}

/* ── Cabeçalho do gráfico ── */
.ml-chart-header { position: relative; }
.chart-expand-btn {
  position: absolute; top: 0; right: 0;
  width: 30px; height: 30px; padding: 0;
  align-items: center; justify-content: center;
  background: var(--bg-subcard); color: var(--text-sec);
  border: 1px solid var(--border); border-radius: 8px;
  font-size: 15px; cursor: pointer; line-height: 1;
}
.chart-expand-btn:hover { background: var(--bg-inactive); color: var(--text); }
/* O botão de tela cheia aparecia só quando o gráfico estava espremido ao lado
   das tarefas. Com a faixa inteira para ele, quem ainda precisa da tela cheia é
   quem está no celular — e lá o gráfico é sempre estreito. */
.chart-expand-btn { display: inline-flex; }
#chart-modal-body .chart-expand-btn { display: none !important; }

/* Modal de gráfico em tela cheia */
.chart-modal {
  position: fixed; inset: 0; z-index: var(--z-modal-full);
  background: rgba(0,0,0,.6);
  align-items: center; justify-content: center;
  padding: 24px;
  display: none;
}
.chart-modal[style*="flex"] { display: flex; }
.chart-modal-inner {
  position: relative;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; padding: 20px;
  width: 95vw; max-width: 1400px; max-height: 90vh; overflow: auto;
}
.chart-modal-close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--bg-subcard); color: var(--text-sec);
  border: 1px solid var(--border); font-size: 16px; cursor: pointer;
}
.chart-modal-close:hover { background: var(--bg-inactive); color: var(--text); }
/* Dentro do modal o painel ocupa tudo, sem borda dupla */
.chart-modal-body .ml-chart-panel { border: none; box-shadow: none; padding: 0; background: transparent; }
.chart-modal-body > div { display: block !important; }

/* ── Modal do gráfico no celular: modo paisagem ──
   O gráfico é largo por natureza e, espremido na vertical de um celular, fica
   ilegível. Com o aparelho EM PÉ, o conteúdo do modal é girado 90° para usar a
   altura da tela como largura.
   Não há JS nem trava de orientação envolvidos: a condição é `orientation: portrait`,
   então, assim que o usuário girar o aparelho, a regra deixa de valer sozinha e o
   layout volta ao normal — que nesse momento já está deitado. */
@media (max-width: 900px) and (orientation: portrait) {
  .chart-modal { padding: 0; overflow: hidden; }
  .chart-modal-inner {
    /* Largura e altura trocadas de propósito: depois do rotate(90deg) elas se
       invertem na tela. `dvh/dvw` (quando houver suporte) evita o pulo causado
       pela barra de endereço que aparece e some. */
    width: 100vh;  height: 100vw;
    width: 100dvh; height: 100dvw;
    max-width: none; max-height: none;
    /* Sem isto o flex encolhe a caixa para caber na largura da tela e a rotação não
       ganha nada: ela PRECISA transbordar na horizontal antes de girar. */
    flex: 0 0 auto;
    border: none; border-radius: 0;
    transform: rotate(90deg);
    transform-origin: center center;
  }
  /* Girado no sentido horário, o canto superior ESQUERDO do modal é o que vai parar
     no topo direito da tela — é lá que o botão de fechar precisa ficar. */
  .chart-modal-close { left: 12px; right: auto; }
}

.ml-chart-area {
  display: grid;
  grid-template-columns: 1fr;   /* sem painel de tarefas → gráfico ocupa tudo */
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}
/* O painel "Tarefas do Perfex" saiu daqui: agora ele fica ao lado dos alertas,
   na faixa de atenção, porque os dois respondem à mesma pergunta. Enquanto
   dividia esta faixa com o gráfico, um terço da largura ficava vazio toda vez
   que a loja não tinha projeto vinculado — e o gráfico, que é o elemento
   principal da tela, desenhava a curva do mês em 740px de 1400 disponíveis.
   A classe `exp-active` continua sendo alternada pelo JS (ela decide se o
   painel de tarefas aparece), mas não muda mais a grade daqui. */
.ml-chart-area #ml-chart-wrap { min-width: 0; }

/* ── Painel de Tarefas do Perfex ── */
/* O teto de largura vive AQUI, não só na trilha do grid — e a diferença importa.
   Os dois filhos da faixa nascem `display:none`, e o bloco de alertas só aparece
   quando há alerta. Sem alerta, ele deixa de ser item do grid e o painel de
   tarefas escorrega para a PRIMEIRA trilha, a de 1fr: o cartão que devia ter
   260px passava a ocupar a faixa inteira, e era esse o caso mais comum.
   A regra `:only-child` logo abaixo não cobre isso: o bloco de alertas continua
   no DOM, apenas invisível, então o painel nunca é filho único. */
.ml-exp-tasks-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
  width: 100%;
  /* Sem teto fixo: a proporção da faixa (60/40) é quem define a largura. O teto
     de 260px que existia aqui vencia a fração e deixava o painel sempre estreito
     por mais larga que fosse a tela. */
}
.ml-exp-tasks-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-subcard);
  flex-shrink: 0;
}
.ml-tasks-panel-title {
  font-size: 12px; font-weight: 700;
  color: var(--text-sec);
  text-transform: uppercase; letter-spacing: .07em;
}
.ml-exp-tasks-body {
  padding: 10px 14px;
  overflow-y: auto;
  flex: 1;
  max-height: 480px;
  /* O piso de 160px vinha de quando o painel dividia a faixa com o gráfico e
     precisava sustentar a altura da coluna. Ao lado dos alertas ele acompanha o
     próprio conteúdo — uma frase de "nenhum projeto vinculado" não justifica
     uma caixa de dez centímetros. */
}

/* Blocos por projeto */
.exp-proj-block { margin-bottom: 12px; }
.exp-proj-block:last-child { margin-bottom: 0; }
.exp-proj-name {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 700; color: var(--text-sec);
  text-transform: uppercase; letter-spacing: .05em;
  padding: 0 0 5px; border-bottom: 1px solid var(--separator); margin-bottom: 7px;
}
.exp-proj-total {
  background: rgba(var(--azul-rgb),.2); color: var(--azul);
  font-size: 11px; font-weight: 700; border-radius: 10px;
  padding: 2px 8px; letter-spacing: 0;
}
/* Os cartões de status eram blocos empilhados: número grande em cima, rótulo
   embaixo, 62px de altura, dois por fileira. Com os cinco status de um projeto
   isso dava três fileiras — quase 190px só de contadores, e o painel ficava mais
   alto que o gráfico ao lado dele. Deitados, o número e o rótulo dividem a mesma
   linha e a mesma informação cabe em pouco mais de um terço da altura. */
.exp-proj-cards { display: flex; flex-wrap: wrap; gap: 5px; width: 100%; }
.exp-status-card {
  /* Dois por fileira quando cabe; um por fileira quando não cabe. Na coluna de
     260px sobram 232px úteis, e dois de 104 + 5 de intervalo cabem — o painel
     estreitou sem trocar largura por altura. */
  flex: 1 1 calc(50% - 2.5px); min-width: 104px; box-sizing: border-box;
  display: flex; flex-direction: row; align-items: baseline; gap: 6px;
  padding: 5px 9px; border-radius: 8px;
  border: 1px solid var(--border); border-left: 3px solid var(--text-muted);
  background: var(--bg-subcard); min-height: 0;
  transition: background .15s;
}
.exp-status-count { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--text); }
/* O rótulo cede primeiro quando falta largura — o número nunca é cortado. */
.exp-status-label {
  font-size: 10px; color: var(--text-sec); letter-spacing: .02em;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.exp-status-open     { border-left-color: var(--text-muted); }
.exp-status-open     .exp-status-count { color: #8B92A5; }
.exp-status-progress { border-left-color: var(--azul); }
.exp-status-progress .exp-status-count { color: var(--azul); }
.exp-status-waiting  { border-left-color: #F59E0B; }
.exp-status-waiting  .exp-status-count { color: #FCD34D; }
.exp-status-review   { border-left-color: #A855F7; }
.exp-status-review   .exp-status-count { color: #C084FC; }
.exp-status-done     { border-left-color: var(--green); }
.exp-status-done     .exp-status-count { color: var(--green); }
.exp-proj-overdue {
  display: flex; align-items: center; gap: 6px;
  margin-top: 5px; padding: 5px 10px; border-radius: 8px;
  background: rgba(239,68,68,.1); border-left: 3px solid #EF4444;
}
.exp-overdue-count { font-size: 12px; font-weight: 700; color: #EF4444; }
.exp-overdue-label { font-size: 11px; color: #F87171; }

/* Paginação de tarefas vinculadas */
.lt-pagination {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-top: 1px solid var(--separator);
  background: var(--bg-subcard);
}
.lt-pg-btn {
  width: 28px; height: 28px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--bg-card);
  color: var(--text-sec); cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.lt-pg-btn:hover:not([disabled]) { background: var(--blue); color: var(--on-primary); border-color: var(--blue); }
.lt-pg-btn[disabled] { opacity: .35; cursor: default; }
.lt-pg-info { font-size: 12px; color: var(--text-muted); }
@media (max-width: 900px) {
  .ml-chart-area { grid-template-columns: 1fr; }
  .ml-chart-area.exp-active { grid-template-columns: 1fr; }
  .ml-exp-tasks-body { max-height: 320px; }
  /* No celular o gráfico é SEMPRE estreito, com ou sem o painel de tarefas ao lado —
     então o botão de expandir não pode depender de exp-active para aparecer.
     (Dentro do modal ele segue oculto pela regra com !important lá em cima.) */
  .ml-chart-area .chart-expand-btn { display: inline-flex; }
}

/* ── Grid do ml-summary ── */
.ml-summary-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Section cards — containers de cada seção ── */
.ml-section-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
}
.ml-section-card--table { /* variante para seções com tabela — sem padding inferior extra */ }

.ml-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-subcard);
  gap: 12px;
  flex-wrap: wrap;
}
.ml-section-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.ml-section-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.ml-section-icon {
  font-size: 16px;
  flex-shrink: 0;
  line-height: 1;
}
.ml-section-icon-img { width: 20px; height: 20px; object-fit: contain; display: block; }
.ml-inline-icon { width: 16px; height: 16px; object-fit: contain; vertical-align: -3px; }
.inline-cell-icon { width: 14px; height: 14px; object-fit: contain; vertical-align: -2px; }
.ml-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-sec);
  text-transform: uppercase;
  letter-spacing: .07em;
  white-space: nowrap;
}
.ml-section-count {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-inactive);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 9px;
}

/* Cards de KPI dentro das section cards */
.ml-section-card .summary-cards { padding: 16px 20px; }
.ml-section-card .items-api-note { margin: 0 20px 16px; }
.ml-section-card .loading-state  { padding: 24px 20px; }

/* Tabela dentro de section card — sem padding lateral */
.ml-section-card--table .table-scroll { padding: 0; }
.ml-section-card--table tbody td:first-child { padding-left: 20px; }
.ml-section-card--table tbody td:last-child  { padding-right: 20px; }
.ml-section-card--table thead th:first-child { padding-left: 20px; }
.ml-section-card--table thead th:last-child  { padding-right: 20px; }
.ml-section-card--table .pagination-wrap { padding: 12px 20px 4px; }
.ml-section-card--table .top-prod-table th:first-child { padding-left: 20px; }
.ml-section-card--table .top-prod-table td:first-child { padding-left: 20px; }
.ml-section-card--table .top-prod-table th:last-child  { padding-right: 20px; }
.ml-section-card--table .top-prod-table td:last-child  { padding-right: 20px; }

/* ── Abas "Produtos e Estoque" ───────────────────────────────────────────── */
.ml-section-header--tabs { flex-wrap: wrap; gap: 12px; }

.ml-tab-nav {
  display: flex;
  gap: 4px;
  background: var(--bg-inactive);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  flex-shrink: 1;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.ml-tab-nav::-webkit-scrollbar { height: 4px; }
.ml-tab-btn { flex: 0 0 auto; }

.ml-tab-btn {
  padding: 5px 14px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-sec);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.ml-tab-btn:hover  { background: var(--bg-subcard); color: var(--text); }
.ml-tab-btn.active { background: var(--bg-card); color: var(--primary); box-shadow: 0 1px 4px rgba(0,0,0,.3); }

.ml-tab-panel { display: block; }

.ml-tab-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-subcard);
  min-height: 44px;
}

.ml-tab-empty {
  padding: 40px 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* Tabela de top produtos dentro do tab panel */
#ml-top-products-section .table-scroll { padding: 0; }
#ml-top-products-section .top-prod-table th:first-child,
#ml-top-products-section .top-prod-table td:first-child { padding-left: 20px; }
#ml-top-products-section .top-prod-table th:last-child,
#ml-top-products-section .top-prod-table td:last-child  { padding-right: 20px; }

/* Legado — mantido para compat; seções agora usam ml-section-card */
#ml-ads-section,
#ml-financial-section,
#ml-catalog-section,
#ml-orders-table-section,
#ml-top-products-section,
#ml-fulfillment-section {
  margin-top: 0;
}

/* ── Fulfillment — table-panel injetado pelo JS deve ser flat ── */
#ml-fulfillment-body .summary-cards {
  padding: 16px 20px 8px;
}
#ml-fulfillment-body .full-note {
  margin: 0;
  padding: 4px 20px 14px;
}
#ml-fulfillment-body .table-panel {
  border: none;
  border-radius: 0;
  box-shadow: none;
  border-top: 1px solid var(--border);
}
#ml-fulfillment-body .table-toolbar {
  background: rgba(0,0,0,.1);
  padding: 12px 20px;
}
#ml-fulfillment-body .pagination-wrap {
  padding: 10px 20px;
}
#ml-fulfillment-body .full-table th:first-child,
#ml-fulfillment-body .full-table td:first-child { padding-left: 20px; }
#ml-fulfillment-body .full-table th:last-child,
#ml-fulfillment-body .full-table td:last-child  { padding-right: 20px; }

/* ── Seção de Ads — period-btns no cabeçalho ── */
#ml-ads-section .ml-section-header .period-btns {
  border-radius: 8px;
}
#ml-ads-section .ml-section-header .period-btn {
  font-size: 11px;
  padding: 5px 12px;
}

/* ── Alertas dentro de ml-summary-grid ── */
.ml-summary-grid .ml-alerts-block {
  border-radius: 14px;
  overflow: hidden;
}

/* ── Reputação — dentro do topbar ── */
.ml-topbar .ml-reputation-row {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.ml-topbar .ml-cache-info {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

/* ============================================================
   FULFILLMENT — Seção de Sugestão de Envio ao Full
   ============================================================ */

/* Cards de resumo do Full — cores e interação */
.card-stat.full-card-urgent {
  border-left: 4px solid #ef4444;
  background: rgba(239,68,68,.06);
}
.card-stat.full-card-urgent .stat-val { color: #ef4444; }

.card-stat.full-card-warn {
  border-left: 4px solid #f59e0b;
  background: rgba(245,158,11,.06);
}
.card-stat.full-card-warn .stat-val { color: #f59e0b; }

.card-stat.full-card-watch {
  border-left: 4px solid var(--azul);
  background: rgba(var(--azul-rgb),.06);
}
.card-stat.full-card-watch .stat-val { color: var(--azul); }

/* Cards neutros: "Sem reposição", "Sem dados" e "Todos" */
.card-stat.full-card-sr,
.card-stat.full-card-unknown,
.card-stat.full-card-all { border-left: 4px solid var(--text-muted); }
.card-stat.full-card-sr .stat-val,
.card-stat.full-card-unknown .stat-val { color: var(--text-muted); }

/* Cards clicáveis */
.card-stat.full-card-clickable {
  cursor: pointer; user-select: none;
  transition: box-shadow .15s, background .15s, transform .1s;
}
.card-stat.full-card-clickable:hover:not(.full-card-active) {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}

/* Estado ativo (filtro aplicado) */
.card-stat.full-card-urgent.full-card-active {
  background: rgba(239,68,68,.15);
  box-shadow: 0 0 0 2px #ef4444;
}
.card-stat.full-card-warn.full-card-active {
  background: rgba(245,158,11,.15);
  box-shadow: 0 0 0 2px #f59e0b;
}
.card-stat.full-card-watch.full-card-active {
  background: rgba(var(--azul-rgb),.15);
  box-shadow: 0 0 0 2px var(--azul);
}
.card-stat.full-card-all.full-card-active {
  box-shadow: 0 0 0 2px var(--blue);
}
.card-stat.full-card-sr.full-card-active,
.card-stat.full-card-unknown.full-card-active {
  background: rgba(148,163,184,.15);
  box-shadow: 0 0 0 2px var(--text-muted);
}

/* Hint "clique para filtrar" abaixo do label */
.full-card-hint {
  font-size: 10px; color: var(--text-muted); margin-top: 5px;
  opacity: 0; transition: opacity .15s;
}
.card-stat.full-card-clickable:hover .full-card-hint { opacity: 1; }
.card-stat.full-card-active .full-card-hint { opacity: 1; }

.full-note {
  font-size: 12px; color: var(--text-muted);
  margin: 0 0 14px 20px;
}
.full-empty {
  color: var(--text-muted); padding: 16px 20px; font-size: 14px;
}

/* Badges de status Full */
.full-badge {
  display: inline-block; border-radius: 10px;
  font-size: 11px; font-weight: 700; padding: 2px 8px; white-space: nowrap;
}
.full-urgent { background: rgba(239,68,68,.15);  color: #ef4444; }
.full-warn   { background: rgba(245,158,11,.15); color: #f59e0b; }
.full-watch  { background: rgba(var(--azul-rgb),.15); color: var(--azul); }
.full-ok     { background: rgba(var(--green-rgb),.12);  color: var(--green); }
/* Estoque desconhecido e Sem Reposição: neutros — nunca verde, para não passarem
   por "saudável" um item cujo estoque o sistema não conhece. */
.full-unknown { background: rgba(148,163,184,.18); color: var(--text-muted); }
.full-sr      { background: rgba(148,163,184,.18); color: var(--text-muted); }

.full-nodata { color: var(--text-muted); }
/* Reposição já comprada no ERP, sob a coluna "Dias até furo". Discreta de
   propósito: é contexto para ler o número de cima, não um status próprio. */
.fc-incoming { font-size: 10px; color: var(--text-muted); white-space: nowrap; cursor: help; }
.fc-incoming.fc-inc-ok   { color: var(--green); }
.fc-incoming.fc-inc-late { color: #d97706; }
/* Selo "FBS" na coluna de estoque da Shopee (equivalente ao logo FULL do ML) */
.fbs-tag {
  display: inline-block; padding: 1px 5px; border-radius: 4px;
  background: rgba(238,77,45,.15); color: #ee4d2d;
  font-size: 10px; font-weight: 800; letter-spacing: .02em; vertical-align: middle;
}
/* Item resgatado pela janela de 90 dias (zerou e parou de vender) */
.full-stale {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 8px;
  background: rgba(148,163,184,.15); color: var(--text-muted);
  font-size: 10px; font-weight: 600; white-space: nowrap;
}

/* Tabela de fulfillment */
.full-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.full-table th {
  text-align: left; padding: 8px 14px;
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.full-table td {
  padding: 10px 14px; border-bottom: 1px solid var(--separator);
  vertical-align: middle;
}
.full-table tr:last-child td { border-bottom: none; }
.full-prod-name { max-width: 320px; word-break: break-word; }
.full-th-hint   { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-muted); font-size: 10px; }

.full-row-urgent td { background: rgba(239,68,68,.05); }
.full-row-warn   td { background: rgba(245,158,11,.05); }
/* Linhas não acionáveis (Sem Reposição / sem dados) ficam recuadas visualmente */
.full-row-muted td { opacity: .62; }

/* ============================================================
   CALCULADORA DE FURO — modal e resultado
   ============================================================ */
.full-calc-modal { width: min(700px, 96vw); }
.full-calc-grid  { grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .full-calc-grid { grid-template-columns: 1fr; } }

/* Banner de alerta */
.full-calc-alert {
  border-radius: 10px; padding: 12px 16px;
  font-size: 13px; font-weight: 700;
  margin-top: 20px; margin-bottom: 16px;
  display: flex; align-items: center; gap: 10px;
}
.full-calc-alert.fc-critico { background: rgba(239,68,68,.15);  color: #ef4444; border-left: 4px solid #ef4444; }
.full-calc-alert.fc-alerta  { background: rgba(245,158,11,.15); color: #f59e0b; border-left: 4px solid #f59e0b; }
.full-calc-alert.fc-atencao { background: rgba(250,204,21,.12); color: #eab308; border-left: 4px solid #eab308; }
.full-calc-alert.fc-ok      { background: rgba(var(--green-rgb),.12);  color: var(--green); border-left: 4px solid var(--green); }

/* Aviso de atualização do banco (migrações) — só admin */
.db-migracoes-aviso { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 24px 0; padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; }
.db-migracoes-aviso[hidden] { display: none; }
.db-migracoes-aviso.is-alerta { background: rgba(245,158,11,.15); color: #f59e0b; border-left: 4px solid #f59e0b; }
.db-migracoes-aviso.is-erro   { background: rgba(239,68,68,.15);  color: #ef4444; border-left: 4px solid #ef4444; }
.db-migracoes-aviso.is-ok     { background: rgba(var(--green-rgb),.12); color: var(--green); border-left: 4px solid var(--green); }
@media (max-width: 640px) { .db-migracoes-aviso { margin: 12px 16px 0; } }
/* Página Configurações → Licença (lib/License.php) */
.license-situacao { padding: 10px 14px; border-radius: 10px; font-weight: 600; font-size: 14px; }
.license-situacao.is-ok     { background: rgba(var(--green-rgb),.12); color: var(--green); }
.license-situacao.is-alerta { background: rgba(245,158,11,.15); color: #f59e0b; }
.license-situacao.is-erro   { background: rgba(239,68,68,.15);  color: #ef4444; }
.license-dados { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 14px 0 0; font-size: 13px; }
.license-dados dt { color: var(--text-muted, #8a8f98); }
.license-dados dd { margin: 0; overflow-wrap: anywhere; }
#license-f-chave { font-family: ui-monospace, monospace; text-transform: uppercase; }

/* Grid de resultados */
.full-calc-results-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin-top: 4px;
}
@media (max-width: 520px) { .full-calc-results-grid { grid-template-columns: 1fr 1fr; } }

.full-calc-result-item {
  background: var(--bg-subcard); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px; text-align: center;
}
.full-calc-result-val {
  font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.2;
}
.full-calc-result-lbl {
  font-size: 10px; color: var(--text-muted); margin-top: 4px;
  text-transform: uppercase; letter-spacing: .04em;
}
.full-calc-result-highlight {
  border-color: var(--blue); background: rgba(var(--azul-rgb),.08);
  grid-column: span 1;
}
.full-calc-result-highlight .full-calc-result-val { color: var(--blue-text); font-size: 26px; }
.full-calc-result-highlight .full-calc-result-lbl { color: var(--blue-text); }

/* Cabeçalho do gráfico */
.chart-title    { font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--text-muted); text-transform: uppercase; }
.chart-subtitle { font-size: 11px; color: var(--text-sec); margin-top: 2px; }

/* Legenda comparativa do gráfico */
.chart-legend {
  display: flex; gap: 20px; margin: 0 16px 8px;
  align-items: center; flex-wrap: wrap;
}
.legend-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--text-sec);
}
.legend-line-current {
  display: inline-block; width: 28px; height: 3px;
  background: var(--azul); border-radius: 2px;
}
.legend-line-compare {
  display: inline-block; width: 28px; height: 0;
  /* Mesmo token que o gráfico desenha. Antes a cor estava escrita aqui e
     repetida em hexadecimal no JS, e as duas divergiram no tema claro. */
  border-top: 2px dashed var(--serie-anterior);
  position: relative; top: 1px;
}
/* Legenda "Acumulado anterior" (modo acumulado do gráfico ML/Shopee) */
.legend-line-prev {
  display: inline-block; width: 28px; height: 0;
  border-top: 2px dashed rgba(148,163,184,.8);
  position: relative; top: 1px;
}
.legend-line-ads {
  display: inline-block; width: 28px; height: 0;
  border-top: 2px dashed #f97316;
  position: relative; top: 1px;
}
/* Linhas de referência na legenda — o mesmo traço que o SVG desenha, para o
   olho ligar a legenda à linha sem precisar adivinhar. */
.legend-line-meta {
  display: inline-block; width: 28px; height: 0;
  border-top: 2px dotted var(--blue);
  position: relative; top: 1px; opacity: .85;
}
.legend-line-ritmo {
  display: inline-block; width: 28px; height: 0;
  border-top: 2px dotted var(--azul);
  position: relative; top: 1px; opacity: .6;
}
/* Itens de legenda que explicam algo ao passar o mouse (meta e ritmo). */
.legend-item--tip { cursor: help; }
.legend-item--tip:focus-visible {
  outline: 2px solid var(--brand, var(--azul)); outline-offset: 2px; border-radius: 4px;
}
.legend-label { line-height: 1; }

/* Badges de variação no cabeçalho do gráfico */
.cmc-badge {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 11px; font-weight: 700; padding: 2px 6px;
  border-radius: 4px; vertical-align: middle;
}
.cmc-badge[data-tip] { cursor: help; }
.cmc-badge--up   { background: rgba(var(--green-rgb),.15);  color: var(--green); }
.cmc-badge--dn   { background: rgba(248,113,113,.15); color: #f87171; }

/* Cabeçalho de controles do gráfico */
.chart-controls {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  padding: 4px 16px 10px;
}
.chart-rev-header {
  display: flex; align-items: center; gap: 10px;
}
.chart-rev-value {
  font-size: 22px; font-weight: 700; color: var(--text);
}
/* O previsto anda junto do realizado, mas em segundo plano: é uma projeção, não
   um valor apurado, e com o mesmo peso do total viravam dois números brigando. */
.chart-rev-prev {
  font-size: 12px; color: var(--text-sec); white-space: nowrap;
  cursor: help;
}
.chart-rev-prev strong { color: var(--text); font-weight: 700; }
.chart-rev-prev:focus-visible {
  outline: 2px solid var(--brand, var(--azul)); outline-offset: 2px; border-radius: 4px;
}
.compare-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-subcard); border: 1px solid var(--border);
  border-radius: 20px; padding: 5px 14px;
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  cursor: pointer; transition: border-color .15s, color .15s;
  white-space: nowrap;
}
.compare-toggle::before {
  content: ''; display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; background: var(--text-muted); transition: background .15s;
}
.compare-toggle--active { border-color: var(--azul); color: var(--azul); }
.compare-toggle--active::before { background: var(--azul); }
.compare-toggle:hover { border-color: var(--azul); color: var(--azul); }
.chart-mode-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-subcard); border: 1px solid var(--border);
  color: var(--text-muted); border-radius: 20px; padding: 5px 14px;
  font-size: 12px; font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s;
  white-space: nowrap;
}
.chart-mode-btn::before {
  content: ''; display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; background: var(--text-muted); transition: background .15s;
}
.chart-mode-btn--active { border-color: var(--green); color: var(--green); }
.chart-mode-btn--active::before { background: var(--green); }
.chart-mode-btn:hover { border-color: var(--green); color: var(--green); }

/* Chips de overlay de Ads */
.chart-overlay-chips {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 0 16px 10px;
}
.ov-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-subcard); border: 1px solid var(--border);
  border-radius: 20px; padding: 5px 10px;
  font-size: 11px; cursor: pointer;
  transition: border-color .15s, background .15s;
  --ov-color: #f97316;
}
.ov-chip:hover { border-color: var(--ov-color); }
.ov-chip--active {
  border-color: var(--ov-color);
  background: rgba(0,0,0,.12);
  box-shadow: inset 0 0 0 1px var(--ov-color);
}
.ov-chip__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ov-color); flex-shrink: 0;
}
.ov-chip__label { color: var(--text-sec); font-weight: 600; }
.ov-chip--active .ov-chip__label { color: var(--ov-color); }
.ov-chip__value { color: var(--text-muted); font-size: 10px; }

/* Tooltip do gráfico comparativo */
#ml-chart-tooltip {
  position: fixed; z-index: var(--z-tooltip); pointer-events: none; display: none;
  background: var(--bg-subcard); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 14px; min-width: 190px;
  font-size: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.6); color: var(--text);
  /* placeChartTooltip() gira a legenda em 90° no modo paisagem do celular e ancora
     pelo CENTRO — não troque esta origem sem ajustar a conta lá. */
  transform-origin: center center;
}
.tt-header {
  font-weight: 700; font-size: 13px; margin-bottom: 8px;
  color: var(--text); border-bottom: 1px solid var(--border); padding-bottom: 5px;
}
.tt-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 4px; }
.tt-key  { color: var(--text-muted); font-size: 11px; }
.tt-val  { font-weight: 600; }
.tt-dim  { color: var(--text-sec); }
.tt-pos  { color: var(--green); font-weight: 700; }
.tt-neg  { color: var(--red); font-weight: 700; }
.chart-hit:hover { fill: rgba(255,255,255,0.05) !important; }

/* Nota de erro nos produtos */
.items-api-note {
  grid-column: 1 / -1;
  background: rgba(250,204,21,.08);
  color: var(--yellow);
  border: 1px solid rgba(250,204,21,.2);
  border-radius: var(--radius); padding: 10px 14px;
  font-size: 12px; line-height: 1.5;
}

/* ============================================================
   PAGINAÇÃO DOS PEDIDOS
   ============================================================ */
.pagination-wrap { padding: 12px 0 4px; }
.pagination {
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
.pg-btn {
  background: var(--bg-subcard);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 16px;
  font-size: 12px; color: var(--text-sec);
  cursor: pointer; transition: background .15s;
}
.pg-btn:hover:not(:disabled) { background: var(--bg-inactive); color: var(--text); }
.pg-btn:disabled { opacity: .4; cursor: not-allowed; }
.pg-info { font-size: 12px; color: var(--text-muted); }

/* ============================================================
   MERCADO LIVRE — ADS (publicidade)
   ============================================================ */
.stat-orange { color: #fb923c; }
.stat-yellow { color: var(--yellow); }

/* ============================================================
   MERCADO LIVRE — INFO DE CACHE
   ============================================================ */
.ml-cache-info {
  display: flex; align-items: center; gap: 12px;
  margin-top: 10px;
  font-size: 12px; color: var(--text-muted);
}
.ml-cache-info .btn-sm {
  padding: 4px 10px !important; font-size: 12px !important;
  font-weight: 600; color: var(--blue-text);
  background: rgba(var(--azul-rgb),.08);
  border: 1px solid rgba(var(--azul-rgb),.25);
  border-radius: var(--radius); cursor: pointer;
  transition: background .15s;
}
.ml-cache-info .btn-sm:hover { background: rgba(var(--azul-rgb),.15); }

/* ============================================================
   HEADER — botão home
   ============================================================ */
.btn-home {
  display: flex; align-items: center; gap: 10px;
  background: none; border: none; cursor: pointer; padding: 0;
  text-decoration: none;
}
.btn-home:hover .app-name { opacity: .8; }

/* ============================================================
   TELA HOME (seleção de relatório)
   ============================================================ */
.home-screen {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; min-height: 100vh;
  padding: 40px 20px;
}
.home-welcome { text-align: center; margin-bottom: 40px; }
.home-logo  { margin-bottom: 12px; }
.home-logo img { max-width: 220px; max-height: 96px; width: auto; height: auto; object-fit: contain; }
.home-welcome h1 { font-size: 24px; color: var(--text); margin-bottom: 8px; }
.home-welcome p  { color: var(--text-muted); font-size: 15px; }

.home-cards {
  display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;
  max-width: 800px;
}
.home-card {
  display: flex; flex-direction: column; align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px; padding: 36px 32px; width: 220px;
  cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .15s;
  text-align: center;
}
.home-card:hover {
  border-color: rgba(var(--azul-rgb),.5);
  box-shadow: 0 8px 32px rgba(var(--azul-rgb),.18);
  transform: translateY(-3px);
}
.home-card-icon  { font-size: 44px; margin-bottom: 14px; }
.home-card-icon-img { width: 46px; height: 46px; object-fit: contain; }
.home-card-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.home-card-desc  { font-size: 13px; color: var(--text-muted); line-height: 1.5; }

/* ============================================================
   LOGIN — ABAS (master / usuário)
   ============================================================ */
/* ============================================================
   BOTÃO CADEADO + MODAL MASTER
   ============================================================ */
#btn-master-lock {
  position: fixed; bottom: 20px; right: 20px; z-index: var(--z-fab);
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(100,116,139,.12); border: 1px solid rgba(100,116,139,.18);
  color: #94a3b8; font-size: 17px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s, box-shadow .2s;
}
#btn-master-lock:hover {
  background: rgba(100,116,139,.22); color: #64748b;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}

#master-key-modal {
  position: fixed; bottom: 68px; right: 20px; z-index: var(--z-menu-top);
  animation: fadeSlideUp .15s ease;
}
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.master-modal-card {
  background: var(--bg-card); border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.1);
  width: 300px; overflow: hidden;
  border: 1px solid var(--border);
}
.master-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 16px; border-bottom: 1px solid var(--border);
  font-size: 13px; font-weight: 600; color: var(--text-muted);
}
.master-modal-header button {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 15px;
  padding: 2px 4px; line-height: 1; border-radius: 4px;
  transition: background .15s;
}
.master-modal-header button:hover { background: var(--bg-subcard); }
.master-modal-body { padding: 16px; }

/* ============================================================
   MAPEAMENTO LOJAS → PROJETOS
   ============================================================ */
.store-projects-header { margin: 32px 0 16px; border-top: 1px solid var(--border); padding-top: 28px; }
.store-projects-header h3 { font-size: 16px; color: var(--text); margin: 0 0 6px; }
.store-projects-hint { font-size: 13px; color: var(--text-muted); margin: 0 0 20px; }

.sp-platform-block { margin-bottom: 24px; }
.sp-platform-title {
  font-size: 14px; font-weight: 700; color: var(--text-sec);
  margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
}
.sp-stores-list { display: flex; flex-direction: column; gap: 8px; }
.sp-no-stores { font-size: 13px; color: var(--text-muted); padding: 8px 0; }

.sp-store-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; background: var(--bg-subcard);
  border: 1px solid var(--border); border-radius: 8px;
}
.sp-store-info { display: flex; flex-direction: column; min-width: 160px; }
.sp-store-name { font-size: 14px; font-weight: 600; color: var(--text); }
.sp-store-id   { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.sp-store-projects { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.sp-proj-badge {
  display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 9px;
  border-radius: 20px; background: rgba(var(--azul-rgb),.15); color: var(--azul);
}
.sp-no-proj { font-size: 12px; color: var(--text-muted); font-style: italic; }

/* Modal de seleção de projetos */
.sp-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  z-index: var(--z-modal-back); padding: 16px;
}
.sp-modal {
  background: var(--bg-card); border: 2px solid rgba(var(--acento-rgb), .64); border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,.45);
  width: 100%; max-width: 500px; display: flex; flex-direction: column;
  max-height: 90vh;
}
.sp-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.sp-modal-header h4 { margin: 0; font-size: 15px; color: var(--text); }
.sp-modal-hint { font-size: 13px; color: var(--text-muted); padding: 12px 20px 0; margin: 0; }
.sp-search {
  display: block; width: calc(100% - 40px); margin: 12px 20px;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-input, var(--bg-subcard)); color: var(--text); font-size: 13px;
}
.sp-project-list {
  flex: 1; overflow-y: auto; padding: 0 20px 8px; max-height: 340px;
}
.sp-project-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--border); cursor: pointer; font-size: 13px;
}
.sp-project-item:last-child { border-bottom: none; }
.sp-proj-label { display: flex; flex-direction: column; }
.sp-proj-name  { color: var(--text); font-weight: 500; }
.sp-proj-client { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.sp-project-group-title {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg-card); border-bottom: 1px solid var(--border);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-sec); padding: 8px 0 6px; margin-top: 6px;
}
.sp-project-group-title:first-child { margin-top: 0; }
.sp-empty-msg  { font-size: 13px; color: var(--text-muted); text-align: center; padding: 16px 0; }

/* ── Vínculo direto loja → cliente do Perfex (topo do modal) ──
   Fica destacado do resto porque é ele que define de quem é a loja; a lista de
   projetos logo abaixo virou detalhe (a origem das tarefas). */
.sp-client-box {
  margin: 12px 20px 4px; padding: 12px;
  background: var(--bg-subcard); border: 1px solid var(--border); border-radius: 10px;
}
.sp-client-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sp-client-lbl {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-sec);
}
.sp-client-current { font-size: 13px; color: var(--text-muted); margin-right: auto; }
.sp-client-current.is-set { color: var(--text); }
.sp-client-box .sp-search { width: 100%; margin: 10px 0 0; }
.sp-client-list { max-height: 170px; overflow-y: auto; margin-top: 8px; }
.sp-client-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 8px; border: 1px solid transparent; border-radius: 8px;
  background: none; color: var(--text); font-size: 13px; text-align: left; cursor: pointer;
}
.sp-client-item:hover { background: var(--bg-hover, rgba(148,163,184,.12)); }
.sp-client-item.is-sel { border-color: var(--blue); background: rgba(var(--azul-rgb),.12); }
.sp-client-name { flex: 1; }
/* Cliente inativo no Perfex continua escolhível — o selo diz o que ele é, sem impedir. */
.sp-client-inativo {
  font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 10px;
  background: rgba(148,163,184,.18); color: var(--text-muted); text-transform: uppercase;
}
.sp-client-note { padding: 8px 0 0; }
.sp-section-title {
  font-size: 13px; font-weight: 700; color: var(--text);
  padding: 14px 20px 0; margin: 0;
}
.sp-modal-actions {
  display: flex; gap: 10px; padding: 14px 20px;
  border-top: 1px solid var(--border);
}

/* ============================================================
   MODAL "AGRUPAR LOJAS"
   ============================================================ */
.gm-modal { max-width: 560px; }
.gm-step { display: flex; flex-direction: column; overflow-y: auto; }

.gm-choices {
  display: flex; flex-direction: column; gap: 12px; padding: 16px 20px;
}
.gm-choice {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  padding: 16px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-subcard, var(--card-bg)); color: var(--text);
  cursor: pointer; transition: border-color .15s, background .15s;
}
.gm-choice:hover { border-color: var(--primary, var(--azul)); background: var(--bg-card); }
.gm-choice-icon  { font-size: 22px; line-height: 1; }
.gm-choice-title { font-size: 14px; font-weight: 600; }
.gm-choice-desc  { font-size: 12px; color: var(--text-muted); }

.gm-field-label {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  padding: 12px 20px 0; text-transform: uppercase; letter-spacing: .02em;
}
.gm-name-input { margin-bottom: 4px; }

.gm-store-list {
  max-height: 240px; overflow-y: auto; margin: 4px 20px 0;
  border: 1px solid var(--border); border-radius: 8px;
}
.gm-store-section:not(:last-child) { border-bottom: 1px solid var(--border); }
.gm-store-section-title {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; font-size: 12px; font-weight: 600; color: var(--text-muted);
  background: var(--bg-subcard, var(--card-bg));
  position: sticky; top: 0; z-index: 1;
}
.gm-store-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-top: 1px solid var(--border); cursor: pointer; font-size: 13px;
}
.gm-store-item:first-of-type { border-top: none; }
.gm-store-item-name { flex: 1; color: var(--text); }
.gm-store-item-id {
  font-size: 11px; color: var(--text-muted); background: var(--bg-card);
  padding: 1px 6px; border-radius: 4px;
}
.gm-store-search { margin-bottom: 0; }

.gm-ack {
  display: flex; align-items: flex-start; gap: 10px; margin: 14px 20px 4px;
  padding: 12px; border: 1px solid var(--warning, #d97706); border-radius: 8px;
  background: color-mix(in srgb, var(--warning, #d97706) 8%, transparent);
  font-size: 12.5px; color: var(--text); line-height: 1.4; cursor: pointer;
}
.gm-ack input { margin-top: 2px; flex-shrink: 0; }

/* Cabeçalho de grupo de cliente manual */
.store-client-group-tag {
  font-size: 10.5px; font-weight: 600; color: var(--warning, #b45309);
  background: color-mix(in srgb, var(--warning, #d97706) 15%, transparent);
  padding: 1px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .02em;
}
.store-client-group-actions { display: flex; gap: 4px; margin-left: 8px; flex-wrap: wrap; }
/* No celular as ações caem para uma linha só delas, ocupando a largura toda. */
@media (max-width: 640px) {
  .store-client-group-actions { margin-left: 0; width: 100%; }
  .store-client-group-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ============================================================
   TAREFAS VINCULADAS — ML e Shopee
   ============================================================ */
.linked-tasks-header {
  margin: 24px 0 14px; padding-top: 24px; border-top: 2px solid var(--border);
}
.linked-tasks-header h3 { font-size: 15px; color: var(--text); margin: 0 0 12px; }
.linked-tasks-periods { margin-bottom: 0; }

.linked-tasks-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.linked-tasks-table th {
  padding: 8px 10px; border-bottom: 2px solid var(--border);
  text-align: left; color: var(--text-muted); font-size: 11px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
}
.linked-tasks-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); color: var(--text-sec); }
.linked-tasks-table tr:last-child td { border-bottom: none; }
.linked-tasks-table tr:hover td { background: var(--bg-subcard); }
.lt-task-name { color: var(--text); font-weight: 500; max-width: 280px; }

/* ============================================================
   USUÁRIOS — painel
   ============================================================ */
.users-panel { max-width: 900px; margin: 0 auto; }

.users-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.users-header h2 { font-size: 18px; color: var(--text); }

.user-form-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin-bottom: 24px;
}
.user-form-card h3 { font-size: 16px; margin-bottom: 20px; color: var(--text); }

.user-form-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px;
  margin-bottom: 20px;
}
@media (max-width: 700px) { .user-form-grid { grid-template-columns: 1fr; } }

.perm-group { margin-bottom: 20px; }
.perm-label-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; flex-wrap: wrap; gap: 8px;
}
.perm-label { font-size: 13px; font-weight: 600; color: var(--text-sec); }
.admin-toggle {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--blue-text);
  background: rgba(var(--azul-rgb),.08);
  border: 1px solid rgba(var(--azul-rgb),.25);
  border-radius: 6px; padding: 5px 12px;
}
.admin-toggle input { accent-color: var(--blue); }
/* Grade de permissões: três colunas onde couber. Eram duas colunas de largura
   fixa (50%), e com 25 permissões o formulário virava uma coluna de rolagem
   longa demais para se comparar um usuário com o outro. */
.perm-grid  { display: flex; flex-wrap: wrap; gap: 8px; }
.perm-group-divider {
  width: 100%; display: flex; align-items: center; gap: 10px;
  margin: 6px 0 2px; color: var(--text-sec); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
}
.perm-group-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.perm-item {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  color: var(--text-sec);
  background: var(--bg-subcard);
  border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 12px;
  transition: border-color .15s, background .15s;
  width: calc(33.333% - 6px); min-width: 240px;
}
@media (max-width: 1200px) { .perm-item { width: calc(50% - 4px); } }
.perm-item:has(input:checked) {
  border-color: var(--blue);
  background: rgba(var(--azul-rgb),.08);
}
.perm-item input { accent-color: var(--blue); margin-top: 2px; flex-shrink: 0; }
.perm-item-body   { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.perm-item-name   { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; }
/* A explicação fica em duas linhas e abre inteira ao passar o mouse ou ao focar
   pelo teclado. Algumas passam de 40 palavras: em corpo inteiro elas respondiam
   por quase toda a altura do formulário. O texto completo continua no title do
   cartão, que é o que o toque longo mostra no celular. */
.perm-item-hint   {
  font-size: 12px; color: var(--text-muted); font-weight: 400; line-height: 1.4;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  line-clamp: 2; overflow: hidden;
}
.perm-item:hover .perm-item-hint,
.perm-item:focus-within .perm-item-hint { -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
.perm-item:has(input:checked) .perm-item-name { color: var(--blue-text); }
.perm-item:has(input:checked) .perm-item-hint { color: rgba(var(--azul-rgb),.6); }

.user-form-actions { display: flex; gap: 10px; }

/* Badges de permissão na tabela */
.perm-badges-cell { white-space: normal; }
.perm-badge {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 20px;
  background: rgba(var(--azul-rgb),.15); color: var(--blue-text);
}
.perm-none { background: rgba(100,116,139,.15); color: var(--text-muted); }
.perm-badge-admin { background: rgba(234,179,8,.18); color: #92400e; }

/* Acordeão de permissões (compacto: "N permissões ▸" → expande a lista) */
.perm-acc { display: inline-block; }
.perm-acc-toggle {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  background: rgba(var(--azul-rgb),.12); color: var(--blue-text);
  border: none; border-radius: 20px; padding: 3px 10px;
  font-size: 12px; font-weight: 600; cursor: pointer;
}
.perm-acc-toggle:hover { background: rgba(var(--azul-rgb),.22); }
.perm-acc-caret { font-size: 10px; display: inline-block; transition: transform .15s ease; }
.perm-acc.open .perm-acc-caret { transform: rotate(90deg); }
.perm-acc-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; max-width: 460px; }
/* O atributo `hidden` do HTML vale `display: none` na folha do NAVEGADOR, e
   qualquer regra de classe do autor ganha dele por especificidade. Sem esta
   linha, o `display: flex` acima mantinha a lista visível para sempre: a página
   abria com todas as permissões abertas e o clique no acordeão não fazia nada —
   ele alternava o atributo certinho, mas nada mudava na tela. */
.perm-acc-list[hidden] { display: none; }

/* Status ativo / inativo */
.user-status {
  display: inline-block; font-size: 12px; font-weight: 600;
  padding: 3px 10px; border-radius: 20px;
}
.status-active   { background: rgba(var(--green-rgb),.15);  color: var(--green-strong); }
.status-inactive { background: rgba(248,113,113,.15); color: var(--red); }

/* Botões de ação da tabela */
.user-actions { display: flex; gap: 6px; white-space: nowrap; }
.btn-sm { padding: 4px 10px !important; font-size: 12px !important; font-weight: 600; }
.btn-danger  {
  background: rgba(248,113,113,.15);
  color: var(--red);
  border: 1px solid rgba(248,113,113,.3);
}
.btn-danger:hover:not(:disabled) { background: rgba(248,113,113,.25); }
.btn-warning {
  background: rgba(250,204,21,.12);
  color: var(--yellow);
  border: 1px solid rgba(250,204,21,.25);
}
.btn-warning:hover:not(:disabled) { background: rgba(250,204,21,.22); }

/* ============================================================
   BARRA DE PROGRESSO NAS METAS DOS KPIs
   ============================================================ */
.goal-bar-wrap { margin-top: 7px; }
.goal-bar-track {
  background: var(--separator);
  border-radius: 4px;
  height: 5px;
  overflow: hidden;
  margin-bottom: 3px;
}
.goal-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width .4s ease;
}
.goal-bar-pct { font-size: 11px; font-weight: 600; line-height: 1; }

/* ============================================================
   SPARKLINES NOS CARDS DE KPI
   ============================================================ */
.ml-sparkline {
  display: block;
  width: 100%;
  height: 28px;
  margin: 5px 0 2px;
  overflow: visible;
}


/* ============================================================
   BLOCO DE ALERTAS INTELIGENTES
   ============================================================ */
.ml-alerts-block {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
}
.ml-alerts-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  cursor: pointer; user-select: none;
}
.ml-alerts-header:hover { background: rgba(255,255,255,.02); }
.ml-alerts-title {
  font-size: 11px; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .06em;
  display: flex; align-items: center; gap: 6px;
}
.ml-alerts-count {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(248,113,113,.2); color: var(--red);
  font-size: 11px; font-weight: 700;
}
.ml-alerts-count.ok { background: rgba(var(--green-rgb),.15); color: var(--green-strong); }
.ml-alerts-toggle { font-size: 11px; color: var(--text-muted); transition: transform .2s; }
.ml-alerts-toggle.open { transform: rotate(180deg); }
.ml-alerts-body { padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; }
.ml-alerts-body.hidden { display: none; }
.ml-alert-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 7px 10px; border-radius: 8px;
  font-size: 12px; font-weight: 500; color: var(--text-sec);
  line-height: 1.4;
}
.ml-alert-item.alert-warn { background: rgba(250,204,21,.08);  color: var(--yellow); }
.ml-alert-item.alert-bad  { background: rgba(248,113,113,.08); color: var(--red); }
.ml-alert-item.alert-ok   { background: rgba(var(--green-rgb),.08);   color: var(--green-strong); }
.ml-alert-item.alert-info { background: rgba(var(--azul-rgb),.08);  color: var(--blue-text); }

/* ============================================================
   TOP PRODUTOS DO PERÍODO
   ============================================================ */
.top-prod-table { width: 100%; border-collapse: collapse; }
.top-prod-table th {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em;
  padding: 10px 14px; text-align: left;
  border-bottom: 1px solid var(--separator);
}
.top-prod-table th:not(:first-child):not(:nth-child(2)) { text-align: right; }
.top-prod-table td {
  padding: 9px 14px; font-size: 13px; color: var(--text);
  border-bottom: 1px solid var(--separator);
}
.top-prod-table td:not(:first-child):not(:nth-child(2)) { text-align: right; }
.top-prod-table tr:last-child td { border-bottom: none; }
.top-prod-table tr:hover td { background: rgba(255,255,255,.02); }
.top-prod-rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--bg-subcard);
  font-size: 11px; font-weight: 700; color: var(--text-muted);
}
.top-prod-rank.gold   { background: rgba(250,204,21,.2);  color: var(--yellow); }
.top-prod-rank.silver { background: rgba(148,163,184,.2); color: var(--text-sec); }
.top-prod-rank.bronze { background: rgba(251,146,60,.2);  color: #fb923c; }
.top-prod-name { display: flex; align-items: center; gap: 6px; max-width: 320px; }
.top-prod-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-prod-pareto-label {
  font-size: 10px; font-weight: 700; color: var(--blue-text);
  background: rgba(var(--azul-rgb),.12); padding: 1px 6px; border-radius: 10px;
  flex-shrink: 0;
}
/* Coluna SKU (top produtos e previsão de furo) */
.top-prod-sku { white-space: nowrap; }
.top-prod-sku code {
  font-size: 11px; color: var(--text-sec);
  background: var(--bg-subcard); padding: 1px 6px; border-radius: 4px;
}
/* Anúncio com variações: "+N" indica que há outros SKUs além do exibido */
.sku-more {
  display: inline-block; margin-left: 4px; padding: 1px 5px; border-radius: 8px;
  background: rgba(148,163,184,.15); color: var(--text-muted);
  font-size: 10px; font-weight: 700; cursor: help;
}
/* SKU encurtado (15 caracteres + "...") com o completo na dica, e o botão de
   copiar ao lado — ver skuCell() e ligarCopiaSku() no app.js. */
.top-prod-sku .sku-curto { cursor: help; }
.sku-copiar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-left: 4px; padding: 0;
  vertical-align: middle;
  border: 1px solid var(--border); border-radius: 5px;
  background: transparent; color: var(--text-muted); cursor: pointer;
}
.sku-copiar:hover { color: var(--text); border-color: var(--text-muted); }
.sku-copiar .ico { width: 12px; height: 12px; }
.sku-copiar.sku-copiado { color: var(--green); border-color: var(--green); }
.sku-copiar.sku-erro    { color: var(--red);   border-color: var(--red); }

.top-prod-bar-cell { min-width: 100px; }
.top-prod-bar { display: flex; align-items: center; gap: 6px; }
.top-prod-bar-track {
  flex: 1; height: 4px; background: var(--separator); border-radius: 2px; overflow: hidden;
}
.top-prod-bar-fill { height: 100%; background: var(--blue); border-radius: 2px; }
.top-prod-pct { font-size: 11px; color: var(--text-muted); min-width: 38px; text-align: right; }

/* Coluna "Ads": valor investido no anúncio + a fatia do total do período */
.top-prod-ads { white-space: nowrap; }
.top-prod-ads-val { display: block; font-weight: 600; color: var(--text); }
.top-prod-ads-pct { display: block; font-size: 11px; color: var(--text-muted); }
.top-prod-ads-note {
  margin: 10px 2px 0; font-size: 12px; color: var(--text-muted); line-height: 1.5;
}
@media (max-width: 768px) {
  #ml-ads-cards { grid-template-columns: repeat(2, 1fr); }
  .top-prod-bar-cell { display: none; }
  .top-prod-name { max-width: 160px; }
}

/* ── Catalog inline ─────────────────────────────────────── */
.catalog-search-input {
  padding: 6px 12px 6px 32px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg-subcard) url('img/search.webp') no-repeat 10px center;
  background-size: 14px 14px;
  color: var(--text); font-size: 13px;
  min-width: 200px; width: 100%; max-width: 320px;
}
.catalog-search-input:focus { border-color: var(--blue); outline: none; }
.ml-catalog-body { margin-top: 2px; }

/* ── Seletor de colunas do catálogo ──────────────────────── */
.catalog-cols-wrap { position: relative; display: inline-block; }
/* Botão "Colunas" com o mesmo visual dos seletores de filtro (.catalog-status-filter) */
.catalog-cols-btn {
  white-space: nowrap;
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-card); color: var(--text-pri); font-size: 14px; cursor: pointer;
}
.catalog-cols-menu {
  /* z-index acima da sidebar (.app-sidebar tem z-index: var(--z-sidebar)) — senão o menu abre
     ATRÁS do menu esquerdo e fica ilegível. */
  display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: var(--z-menu);
  min-width: 190px; padding: 6px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.4);
}
.catalog-cols-menu.open { display: block; }
.catalog-col-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; border-radius: 7px;
  font-size: 13px; color: var(--text); cursor: pointer;
}
.catalog-col-item:hover { background: var(--bg-subcard); }
.catalog-col-item input { flex-shrink: 0; }
.catalog-col-item.is-fixed { color: var(--text-muted); cursor: default; }
.catalog-col-item.is-fixed:hover { background: none; }

/* ── Product detail page ─────────────────────────────────── */
.product-page-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px; padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.product-page-title {
  font-size: 18px; font-weight: 700; color: var(--text);
  margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Título + identificação empilhados: o cabeçalho continua sendo uma linha só
   (voltar · título · ações), e o SKU/MLB mora embaixo do título, não ao lado. */
.product-page-headwrap { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.product-page-ids { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.product-page-id {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-size: 12px; color: var(--text-sec);
}
.product-page-id-lbl {
  font-size: 10px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--text-muted);
}
.product-page-id code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--text);
  background: var(--bg-subcard); border: 1px solid var(--separator);
  border-radius: 5px; padding: 1px 6px; user-select: all;
}
.product-page-id--miss { color: var(--text-muted); font-style: italic; }

/* Linha de contexto do estoque, abaixo da legenda do gráfico do produto. */
.ml-stock-line { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin: 2px 0 6px; }
.ml-stock-note { font-size: 11px; color: var(--text-sec); }
.ml-stock-note--off { color: var(--text-muted); font-style: italic; }
.ml-stock-cover { font-size: 10px; color: var(--text-muted); }
/* Amostra da faixa de ruptura na legenda — mesma cor/opacidade do gráfico. */
.legend-band-oos {
  display: inline-block; width: 14px; height: 10px; border-radius: 2px;
  background: rgba(239, 68, 68, .28); border: 1px solid rgba(239, 68, 68, .5);
}
.catalog-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.catalog-table thead th {
  background: var(--bg-subcard); color: var(--text-sec); font-size: 11px;
  font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  padding: 8px 12px; text-align: left; position: sticky; top: 0; z-index: 1;
}
.catalog-table tbody td { padding: 9px 12px; border-bottom: 1px solid var(--separator); vertical-align: middle; }
.catalog-row:hover td { background: var(--bg-subcard); }
.catalog-item-title { color: var(--text); font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 400px; }
.catalog-thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; display: block; background: var(--bg-subcard); }
.catalog-thumb-placeholder { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 18px; background: var(--bg-subcard); border-radius: 6px; }

/* Faixa "Sem Reposição" (SR) — banner diagonal no canto superior esquerdo da linha */
.sr-host { position: relative; overflow: hidden; }
.sr-ribbon {
  position: absolute; top: 9px; left: -21px; width: 64px;
  transform: rotate(-45deg); transform-origin: center;
  background: #dc2626; color: #fff;
  font-size: 9px; font-weight: 800; letter-spacing: .6px; text-align: center;
  line-height: 15px; z-index: 3; cursor: help; pointer-events: auto;
  box-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* ── Páginas de Pedidos (detalhado + consolidado) ───────────────────────── */
.orders-controls {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0 6px;
}
.orders-controls .filter-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.orders-search {
  flex: 1; min-width: 200px; padding: 8px 12px; font-size: 13px;
  border: 1px solid var(--separator); border-radius: 8px;
  background: var(--bg-card); color: var(--text);
}
.orders-count { font-size: 12px; color: var(--text-sec); }

/* Cada pedido = um CARD (topo com meta + corpo com produto e métricas) */
.orders-cards { display: block; }

/* Resumo do período: 6 colunas fixas, e não o auto-fit de .summary-cards — que
   na largura desta página enfileirava os cartões numa quantidade qualquer e
   deixava o resto órfão na linha de baixo. No Mercado Livre são onze cartões:
   os seis da leitura que se mostra ao cliente preenchem a primeira linha
   inteira, e o detalhamento financeiro cai na segunda.

   Com seis por linha o cartão fica estreito, então esta variante encolhe fonte
   e respiro — o .card-stat padrão, dimensionado para quatro por linha, cortava
   o rótulo. O minmax(0,...) impede que um valor longo estique a própria coluna. */
#ml-ordpage-cards, #shopee-ordpage-cards, #magalu-ordpage-cards {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}
#ml-ordpage-cards .card-stat,
#shopee-ordpage-cards .card-stat,
#magalu-ordpage-cards .card-stat {
  padding: 10px 11px;
  border-radius: 10px;
}
#ml-ordpage-cards .stat-val,
#shopee-ordpage-cards .stat-val,
#magalu-ordpage-cards .stat-val {
  font-size: 17px; margin-bottom: 4px;
}
#ml-ordpage-cards .stat-lbl,
#shopee-ordpage-cards .stat-lbl,
#magalu-ordpage-cards .stat-lbl {
  font-size: 10px; letter-spacing: .02em; line-height: 1.25;
}
#ml-ordpage-cards .stat-sub,
#shopee-ordpage-cards .stat-sub,
#magalu-ordpage-cards .stat-sub {
  font-size: 9.5px; line-height: 1.3;
}
@media (max-width: 1280px) {
  #ml-ordpage-cards, #shopee-ordpage-cards, #magalu-ordpage-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  #ml-ordpage-cards, #shopee-ordpage-cards, #magalu-ordpage-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  #ml-ordpage-cards, #shopee-ordpage-cards, #magalu-ordpage-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Nota de cobertura sob os cartões de resumo da página de pedidos: ocupa a
   linha inteira do grid em vez de virar uma "coluna" solta ao lado deles. */
.ord-summary-nota {
  grid-column: 1 / -1;
  font-size: 11px; color: var(--text-muted);
  margin-top: -2px;
}
.ord-card {
  border: 1px solid var(--separator); border-radius: 10px;
  background: var(--bg-card); margin-bottom: 12px; overflow: hidden;
}
.ord-card:last-child { margin-bottom: 4px; }
.ord-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap;
  padding: 8px 14px; background: var(--bg-subcard); border-bottom: 1px solid var(--separator);
}
.ord-card-body { display: flex; align-items: center; gap: 8px; padding: 12px 14px; flex-wrap: wrap; }
/* Lista de itens do pedido/carrinho: uma linha por item (variação comprada) */
.ord-card-items { display: flex; flex-direction: column; gap: 8px; min-width: 200px; flex: 1 1 240px; }
.ord-item-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ord-item-meta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ord-item-qty { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.ord-pack-badge {
  font-size: 10px; font-weight: 600; color: var(--text-sec); background: var(--bg-card);
  border: 1px solid var(--separator); border-radius: 8px; padding: 1px 6px; white-space: nowrap; cursor: help;
}
.ord-card-thumb { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; background: var(--bg-subcard); flex-shrink: 0; }
.ord-card-thumb-ph { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; font-size: 20px; background: var(--bg-subcard); border-radius: 8px; flex-shrink: 0; }
.ord-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(82px, 1fr)); gap: 8px 3px; flex: 3 1 520px; }
.ord-metric { display: flex; flex-direction: column; gap: 2px; text-align: right; min-width: 0; }
/* Dica ao passar o mouse — usa o balão data-tip (o title nativo cortava textos longos) */
.ord-metric[data-tip] { cursor: help; }
.ord-metric-lbl { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px; }
.ord-metric-val { font-size: 13px; font-weight: 600; color: var(--text); }
.ord-metric-val.ord-net    { color: var(--green); }
.ord-metric-val.ord-cost   { color: #dc2626; }
.ord-metric-val.ord-pos    { color: var(--green); }
.ord-metric-val.ord-neg    { color: #dc2626; }
.ord-metric-val.ord-credit { color: var(--green); }

/* Procedência do custo: o selo aparece só quando o custo NÃO veio da planilha do
   usuário (veio do Bling). Neutro de propósito — é informação, não alerta, e não
   deve competir com o valor em vermelho ao lado. */
.ord-cogs-src {
  font-size: 9px; font-weight: 600; letter-spacing: .03em; vertical-align: 1px;
  color: var(--text-muted); background: var(--bg-subcard);
  border: 1px solid var(--separator); border-radius: 6px; padding: 0 4px;
  white-space: nowrap; cursor: help;
}

/* Seletor de colunas dos cartões de Pedidos */
.ord-cols-wrap { position: relative; display: inline-block; }
.ord-cols-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: var(--z-dropdown);
  background: var(--bg-card); border: 1px solid var(--separator); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 6px; min-width: 190px;
  max-height: 340px; overflow-y: auto;
}
.ord-cols-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px;
  font-size: 13px; color: var(--text); cursor: pointer; user-select: none;
}
.ord-cols-item:hover { background: var(--bg-subcard); }
.ord-cols-item input { cursor: pointer; }

.ord-meta-left { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-sec); flex-wrap: wrap; }
.ord-meta-id { font-size: 11px; color: var(--text-muted); cursor: help; }
/* Id do pagamento no Mercado Pago (conferência com o extrato) */
.ord-meta-pay { font-size: 11px; color: var(--text-muted); cursor: help; white-space: nowrap; }
.ord-meta-dt { font-weight: 600; color: var(--text); }
.ord-meta-sep { color: var(--text-muted); }
.ord-meta-frete { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--text); }
/* No FULL a logo aparece sozinha (sem o texto "Full"); o title nativo dá o rótulo */
.ord-full-logo { height: 15px; width: auto; vertical-align: middle; cursor: help; }
.ord-meta-store { font-size: 12.5px; font-weight: 700; color: var(--text); }
.ord-item-sku { display: block; font-size: 11px; color: var(--text-muted); }
.ord-item-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ord-item-title { display: block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Nome cortado: o balão (data-tip) mostra o título completo ao passar o mouse/focar */
.ord-item-title[data-tip] { cursor: help; }
.ord-item-title[data-tip]:focus-visible { outline: 2px solid var(--brand, var(--azul)); outline-offset: 2px; border-radius: 4px; }
.ord-multi { font-size: 10px; color: var(--text-muted); background: var(--bg-subcard); border-radius: 8px; padding: 1px 6px; width: fit-content; }
.ord-extra-btn {
  background: transparent; border: 1px dashed var(--separator); color: var(--text-sec);
  border-radius: 6px; padding: 2px 6px; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.ord-extra-btn:hover { border-color: var(--brand, var(--azul)); color: var(--text); }
.ordcogs-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--separator); }
.ordcogs-txt { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.ordcogs-txt .ord-item-title { white-space: normal; }
.ordcogs-input { width: 130px; flex: none; margin: 0; }
.pf-edit-btn {
  background: transparent; border: 1px dashed var(--separator); color: inherit;
  border-radius: 6px; padding: 0 5px; font-size: 11px; line-height: 16px; cursor: pointer; white-space: nowrap; vertical-align: middle;
}
.pf-edit-btn:hover { border-color: var(--brand, var(--azul)); }
.pf-edit-btn .ico { width: 11px; height: 11px; vertical-align: -1px; }
.pf-edit-input { width: 120px; margin: 0; text-align: right; }
.orders-consol-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.orders-consol-table th, .orders-consol-table td { padding: 7px 12px; border-bottom: 1px solid var(--separator); }
.orders-consol-table thead th { background: var(--bg-subcard); color: var(--text-sec); font-weight: 600; text-align: right; }
.orders-consol-table thead th:first-child { text-align: left; }
.orders-consol-table tbody th { text-align: left; font-weight: 600; color: var(--text); }
.orders-consol-table tbody td { text-align: right; font-weight: 600; }
.ord-tax-input { padding: 5px 8px; border: 1px solid var(--separator); border-radius: 6px; background: var(--bg-card); color: var(--text); }

/* Estoque FULL vs Padrão no catálogo */
.catalog-stock-full {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--purple); font-weight: 600; font-size: 12px;
  background: rgba(167,139,250,.12); border: 1px solid rgba(167,139,250,.25);
  border-radius: 6px; padding: 2px 6px;
}
.catalog-stock-seller {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--text-sec); font-size: 12px;
  background: var(--bg-inactive); border: 1px solid var(--border);
  border-radius: 6px; padding: 2px 6px;
}
.catalog-stock-sep { color: var(--text-muted); font-size: 11px; margin: 0 2px; }

/* Preço cheio riscado quando há promoção (sale_price) */
.catalog-price-old {
  color: var(--text-muted); font-weight: 400; font-size: 12px;
  text-decoration: line-through; margin-right: 4px;
}

/* Badges sob o título (variações / atributos) */
.catalog-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.catalog-var-toggle {
  font-size: 11px; font-weight: 600; cursor: pointer;
  color: var(--purple); background: rgba(167,139,250,.12);
  border: 1px solid rgba(167,139,250,.25); border-radius: 6px; padding: 1px 7px;
}
.catalog-var-toggle:hover { background: rgba(167,139,250,.22); }
.catalog-attr { font-size: 11px; font-weight: 600; border-radius: 6px; padding: 1px 7px; cursor: help; }
.catalog-attr--ok   { color: var(--green); background: rgba(var(--green-rgb),.10); }
.catalog-attr--miss { color: #d97706; background: rgba(245,158,11,.12); }
.catalog-mod {
  font-size: 11px; font-weight: 600; border-radius: 6px; padding: 1px 7px; cursor: help;
  color: #dc2626; background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.30);
}

/* "Fora do ar com estoque" — anúncio inativo tendo mercadoria no depósito.
   Vermelho e com o ícone à frente porque, entre os selos da linha, é o único
   que custa dinheiro a cada hora que passa: os outros descrevem o anúncio,
   este pede uma ação hoje. Por isso também vem primeiro na fila de selos. */
.catalog-inativo-estoque {
  font-size: 11px; font-weight: 700; border-radius: 6px; padding: 1px 7px; cursor: help;
  color: #dc2626; background: rgba(239,68,68,.14); border: 1px solid rgba(239,68,68,.38);
  display: inline-flex; align-items: center; gap: 4px;
}
.catalog-inativo-estoque .ico { width: 12px; height: 12px; }

/* Aviso no topo da aba Catálogo, com a contagem e o atalho para filtrar. */
.catalogo-aviso-inativos {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 10px 12px; border-radius: 10px;
  font-size: 13px; color: var(--text);
  background: rgba(239,68,68,.10); border: 1px solid rgba(239,68,68,.32);
}
.catalogo-aviso-inativos.is-on { background: rgba(239,68,68,.18); }
.catalogo-aviso-inativos .cai-icone { display: inline-flex; color: #dc2626; }
.catalogo-aviso-inativos .cai-icone .ico { width: 16px; height: 16px; }
.catalogo-aviso-inativos .cai-texto { flex: 1 1 260px; line-height: 1.45; }
.catalogo-aviso-inativos .cai-btn {
  cursor: pointer; font-size: 12px; font-weight: 700; white-space: nowrap;
  color: #dc2626; background: transparent; padding: 4px 10px; border-radius: 7px;
  border: 1px solid rgba(239,68,68,.45);
}
.catalogo-aviso-inativos .cai-btn:hover { background: rgba(239,68,68,.16); }

/* Lista de variações (linha expansível) */
.catalog-var-row > td { background: var(--bg-subcard); }
.catalog-var-list { padding: 8px 4px; }
.catalog-var-head { font-size: 12px; color: var(--text-sec); margin-bottom: 6px; }
.catalog-var-item {
  display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px;
  padding: 4px 8px; border-top: 1px solid var(--separator);
}

/* Validações / ações necessárias (página do produto) */
.ml-valid { margin-top: 14px; }
.ml-valid-head { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.ml-valid-ok { font-size: 13px; color: var(--green); font-weight: 600; }
.ml-valid-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ml-valid-list li { font-size: 13px; padding: 6px 10px; border-radius: 8px; }
.ml-valid-warn { background: rgba(239,68,68,.10); color: var(--text); }
.ml-valid-opp  { background: rgba(245,158,11,.10); color: var(--text); }
.ml-valid-list a { color: var(--blue-text); text-decoration: none; white-space: nowrap; }

/* Detalhe de custos de frete (página do produto) */
.ml-ship-detail { margin-top: 14px; }
.ml-ship-box {
  margin-top: 10px; border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 14px; background: var(--bg-subcard); max-width: 420px;
}
.ml-ship-row { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; padding: 4px 0; }
.ml-ship-total { border-top: 1px solid var(--separator); margin-top: 4px; padding-top: 8px; font-weight: 700; }
.ml-ship-note { font-size: 11px; color: var(--text-muted); margin-top: 6px; }

/* Badge de competição no catálogo (API price_to_win) */
.catalog-comp {
  display: inline-block; font-size: 11px; font-weight: 600;
  border-radius: 6px; padding: 2px 8px; white-space: nowrap; cursor: help;
  border: 1px solid transparent;
}
.catalog-comp--win  { color: var(--green); background: rgba(var(--green-rgb),.12);  border-color: rgba(var(--green-rgb),.30); }
.catalog-comp--mid  { color: #d97706; background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.30); }
.catalog-comp--lose { color: #dc2626; background: rgba(239,68,68,.12);  border-color: rgba(239,68,68,.30); }
.catalog-comp--out  { color: var(--text-sec); background: var(--bg-inactive); border-color: var(--border); }

/* Badge de qualidade da publicação (API /performance) */
.catalog-quality {
  display: inline-block; font-size: 11px; font-weight: 600;
  border-radius: 6px; padding: 2px 8px; white-space: nowrap;
  border: 1px solid transparent;
}
.catalog-quality--good { color: var(--green); background: rgba(var(--green-rgb),.12);  border-color: rgba(var(--green-rgb),.30); }
.catalog-quality--mid  { color: #d97706; background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.30); }
.catalog-quality--low  { color: #dc2626; background: rgba(239,68,68,.12);  border-color: rgba(239,68,68,.30); }

/* MLB + SKU abaixo do título do produto */
.catalog-item-meta {
  display: block; font-size: 11px; color: var(--text-muted);
  margin-top: 2px; font-variant-numeric: tabular-nums;
  /* Permite selecionar/copiar o MLB/SKU sem abrir a página do produto. */
  user-select: text; -webkit-user-select: text; cursor: text; width: fit-content;
}

/* Badge "X vendidos" (filtro Mais vendidos por período) */
.catalog-sold-badge {
  display: inline-flex; align-items: center; gap: 3px;
  margin-top: 4px; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
  background: rgba(239,68,68,.12); color: #ef4444;
  border: 1px solid rgba(239,68,68,.30);
}
.catalog-sold-badge--zero {
  background: var(--bg2); color: var(--text-muted);
  border-color: var(--border);
}

/* Célula da coluna "Vendas (período)" no catálogo */
.catalog-sold-cell { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.catalog-sold-cell::after { content: ' un.'; font-weight: 400; font-size: 11px; color: var(--text-muted); }
.catalog-sold-cell--zero { color: var(--text-muted); font-weight: 400; }

/* Cabeçalhos ordenáveis do catálogo */
.catalog-th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.catalog-th-sort:hover { color: var(--purple); }
.catalog-sort-ind { font-size: 10px; opacity: .45; margin-left: 2px; }
.catalog-sort-ind.active { opacity: 1; color: var(--purple); }

/* Seletor de status na lista de produtos */
.catalog-status-filter {
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-card); color: var(--text-pri); font-size: 14px; cursor: pointer;
}

/* ── Product chart ─────────────────────────────────────── */
.ml-product-kpis {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--separator);
}
.ml-product-kpi {
  display: flex; flex-direction: column; background: var(--bg-subcard);
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 16px; flex: 1; min-width: 140px;
}
.ml-product-kpi-val { font-size: 16px; font-weight: 700; color: var(--text); }
.ml-product-kpi-lbl { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.ml-chart-tooltip-el {
  position: fixed; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 14px; font-size: 12px; pointer-events: none;
  z-index: var(--z-tooltip); min-width: 160px; box-shadow: var(--shadow);
  transform-origin: center center;   /* ver #ml-chart-tooltip */
}

/* ============================================================
   Reputação ML
   ============================================================ */
.ml-reputation-row {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: 20px;
}
.ml-rep-card {
  /* Base de 180px com quebra de linha: com sete cards e mínimo de 120px, "97%
     positivas" virava "97% po..." e "CANCELAMENTOS" vazava para fora do card. */
  flex: 1 1 180px; min-width: 0;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px;
  display: flex; align-items: center; gap: 10px;
  transition: border-color .15s;
}
.ml-rep-card--ok     { border-color: rgba(var(--green-rgb),.35); }
.ml-rep-card--warn   { border-color: rgba(245,158,11,.45); }
.ml-rep-card--orange { border-color: rgba(251,146,60,.55); }
.ml-rep-card--bad    { border-color: rgba(239,68,68,.5); }
.ml-rep-icon { font-size: 22px; flex-shrink: 0; line-height: 1; z-index: 1; }
.ml-rep-icon-img { width: 30px; height: 30px; object-fit: contain; display: block; }
.ml-rep-body { flex: 1; min-width: 0; z-index: 1; }
.ml-rep-value {
  font-size: 15px; font-weight: 700; color: var(--text);
  line-height: 1.25; overflow-wrap: anywhere;
}

/* Card da medalha: o nome ("Mercado Líder Platinum") pode quebrar linha em vez
   de ser cortado com reticências. */
.ml-rep-card--medal { min-width: 160px; }
.ml-rep-card--medal .ml-rep-value {
  white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2;
}

/* ── Borda animada da medalha (reforço visual do tier de MercadoLíder) ── */
.ml-rep-medal { position: relative; overflow: hidden; }
/* brilho diagonal que varre o card periodicamente */
.ml-rep-medal::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.4) 50%, transparent 65%);
  transform: translateX(-130%);
  animation: repShimmer 3.6s ease-in-out infinite;
}
@keyframes repShimmer {
  0%, 55% { transform: translateX(-130%); }
  100%    { transform: translateX(130%); }
}
/* faíscas cintilantes (gold e platinum) */
.ml-rep-medal--gold::before,
.ml-rep-medal--platinum::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.95) 0 1.6px, transparent 2.2px),
    radial-gradient(circle, rgba(255,255,255,.85) 0 1.1px, transparent 1.7px),
    radial-gradient(circle, rgba(255,255,255,.9) 0 1.3px, transparent 1.9px);
  background-repeat: no-repeat;
  background-position: 20% 32%, 74% 62%, 48% 80%;
  animation: repTwinkle 1.9s ease-in-out infinite;
}
@keyframes repTwinkle {
  0%, 100% { opacity: .15; }
  50%      { opacity: .95; }
}
/* Gold — dourado com pulso de brilho */
.ml-rep-medal--gold {
  border-color: #f0a500;
  animation: repGlowGold 2.4s ease-in-out infinite;
}
@keyframes repGlowGold {
  0%, 100% { box-shadow: 0 0 0 1px rgba(240,165,0,.45), 0 0 10px rgba(240,165,0,.22); }
  50%      { box-shadow: 0 0 0 1px rgba(255,205,70,.95), 0 0 20px rgba(240,165,0,.55); }
}
/* Platinum — azul/ciano com pulso de brilho */
.ml-rep-medal--platinum {
  border-color: #00a0e8;
  animation: repGlowPlatinum 2.4s ease-in-out infinite;
}
@keyframes repGlowPlatinum {
  0%, 100% { box-shadow: 0 0 0 1px rgba(0,160,232,.45), 0 0 10px rgba(0,160,232,.22); }
  50%      { box-shadow: 0 0 0 1px rgba(103,232,249,.95), 0 0 20px rgba(0,160,232,.55); }
}
/* Silver / MercadoLíder base — prateado com pulso suave */
.ml-rep-medal--silver {
  border-color: #b8c0cc;
  animation: repGlowSilver 2.8s ease-in-out infinite;
}
@keyframes repGlowSilver {
  0%, 100% { box-shadow: 0 0 0 1px rgba(184,192,204,.4), 0 0 8px rgba(184,192,204,.18); }
  50%      { box-shadow: 0 0 0 1px rgba(226,232,240,.9), 0 0 15px rgba(184,192,204,.4); }
}
/* Acessibilidade: sem movimento quando o usuário pede menos animação. */
@media (prefers-reduced-motion: reduce) {
  .ml-rep-medal,
  .ml-rep-medal--gold, .ml-rep-medal--platinum, .ml-rep-medal--silver { animation: none; }
  .ml-rep-medal::after,
  .ml-rep-medal--gold::before, .ml-rep-medal--platinum::before { animation: none; opacity: 0; }
}
.ml-rep-label {
  font-size: 10px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .05em; margin-top: 3px;
  overflow-wrap: anywhere;
}

/* ============================================================
   Paginação de tarefas
   ============================================================ */

.tasks-table-info {
  padding: 8px 16px 4px;
  font-size: 12px;
  color: var(--text-muted);
}

.tasks-pagination {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
  border-top: 1px solid var(--separator);
  flex-wrap: wrap;
}

.tasks-pagination .pg-btn {
  min-width: 32px; height: 32px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-card); color: var(--text-sec);
  cursor: pointer; font-size: 13px; font-weight: 500;
  transition: background .15s, color .15s, border-color .15s;
}
.tasks-pagination .pg-btn:hover:not([disabled]) {
  background: var(--blue); color: var(--on-primary); border-color: var(--blue);
}
.tasks-pagination .pg-btn.pg-active {
  background: var(--blue); color: var(--on-primary); border-color: var(--blue);
  font-weight: 700; pointer-events: none;
}
.tasks-pagination .pg-btn[disabled] { opacity: .35; cursor: default; }
.pg-ellipsis {
  min-width: 24px; text-align: center;
  color: var(--text-muted); font-size: 14px; line-height: 32px;
}
.pg-perpage-label {
  font-size: 12px; color: var(--text-muted); margin-right: 2px; white-space: nowrap;
}
.pg-perpage-select {
  height: 32px; padding: 0 8px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--bg-card);
  color: var(--text); font-size: 13px; cursor: pointer;
  margin-right: 8px;
}

/* ============================================================
   Análise de Equipe
   ============================================================ */

.analysis-wrap { padding: 0 0 40px; }
.analysis-title {
  font-size: 18px; font-weight: 700; color: var(--text);
  margin: 32px 0 16px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.analysis-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 900px) { .analysis-grid { grid-template-columns: 1fr; } }

.ml-rep-sub { font-size: 11px; color: var(--text-sec); margin-top: 2px; }

/* ============================================================
   PÁGINA DE CONFIGURAÇÕES
   ============================================================ */
.settings-page-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.settings-page-header h2 { font-size: 22px; color: var(--text); font-weight: 700; }

.settings-section-block {
  /* Era #000000 cravado: no tema escuro um card preto sobre fundo quase preto
     passava por intencional, mas no claro virava um bloco preto no meio da
     pagina. Segue o token como os demais cards. */
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.settings-section-title { margin-bottom: 14px; }
.settings-section-title h3 { font-size: 16px; color: var(--text); margin-bottom: 4px; font-weight: 600; }
/* Ícone (imagem) ao lado do título das seções de configurações */
.settings-h3-icon {
  width: 20px; height: 20px; object-fit: contain;
  vertical-align: -4px; margin-right: 4px;
}
/* Ícone-imagem em título h2 de página (ex.: Painel de Notificações) */
.page-h2-icon {
  width: 24px; height: 24px; object-fit: contain;
  vertical-align: -5px; margin-right: 6px;
}
/* Ícone-imagem no lugar do emoji do tipo de notificação (cards, painel, toast) */
.notif-emoji-img {
  width: 20px; height: 20px; object-fit: contain;
  vertical-align: -4px;
}
/* logo-full é largo (retangular): dá mais tamanho para não ficar minúsculo */
.notif-emoji-img--full_stock_zero {
  width: 30px; height: 30px; vertical-align: -9px;
}
/* Ícone-imagem do nome do cliente no Painel de Notificações */
.notif-client-icon {
  width: 22px; height: 22px; object-fit: contain;
  vertical-align: -4px; margin-right: 6px;
}
/* Linha de 3 colunas: Notificações · IA · Lojas */
.settings-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}
.settings-row-3 .settings-section-block { margin-bottom: 0; height: 100%; }
@media (max-width: 900px) {
  .settings-row-3 { grid-template-columns: 1fr; }
}
.settings-section-desc { color: var(--text-sec); font-size: 13px; margin: 0; }
/* Título com botão de ação na mesma linha (ex.: Usuários + Novo Usuário) */
.settings-title-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding-bottom: 14px;
  border-bottom: 1px solid var(--border); margin-bottom: 16px;
}
.settings-title-row > div { min-width: 0; }

.settings-stores-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.settings-stores-block .settings-section-title { margin-bottom: 0; width: 100%; }

/* Central de saúde das integrações */
.health-services {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px;
}
.health-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 10px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--border); background: var(--bg-subcard);
}
.health-chip small { font-weight: 400; color: var(--text-sec); font-size: 11px; }
.health-chip.bad { border-color: rgba(239,68,68,.4); }
.health-instalacao { margin: 0 0 16px; border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; }
.health-instalacao summary { cursor: pointer; font-weight: 600; }
.health-instalacao h4 { margin: 14px 0 4px; font-size: 14px; }
.health-instalacao code { word-break: break-all; }
.health-cron-nota { margin: 10px 0 2px; font-size: 12px; color: var(--text-sec); }
.health-cron { margin: 0; padding: 8px 10px; background: var(--bg-subcard); border-radius: 6px; font-size: 12px; white-space: pre-wrap; word-break: break-all; }
.health-summary {
  display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 10px;
  font-size: 13px; font-weight: 600; color: var(--text-sec);
}

/* Remove margem extra no users-panel dentro do settings — usa a largura total da seção */
.settings-section-block .users-panel { padding: 0; background: none; border: none; max-width: none; margin: 0; width: 100%; }
#users-table-wrap { width: 100%; }
#users-table-wrap table { width: 100%; border-collapse: collapse; }
.settings-section-block .users-header { padding-bottom: 16px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }

/* ============================================================
   PÁGINA DE LOJAS
   ============================================================ */
.page-section-header {
  display: flex;
  align-items: center;
  gap: 16px;
  /* Os botões de ação têm white-space:nowrap e não encolhem: sem o wrap eles
     estouravam a largura da página no celular (a barra de rolagem horizontal
     aparecia na página inteira). Agora caem para a linha de baixo. */
  flex-wrap: wrap;
  max-width: 100%;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
/* min-width:0 deixa o título encolher/quebrar em vez de empurrar o cabeçalho. */
.page-section-header h2 {
  font-size: 22px; color: var(--text); font-weight: 700; margin: 0;
  min-width: 0; overflow-wrap: anywhere;
}

.btn-back-link {
  background: none;
  border: none;
  color: var(--blue-text);
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
  text-decoration: none;
}
.btn-back-link:hover { text-decoration: underline; }

/* Barra de ações da página de Lojas (toggle + agrupar) */
.stores-view-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.stores-view-bar .stores-view-toggle { margin-bottom: 0; }

/* Alternador de visão da página de Lojas */
.stores-view-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg-subcard);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 10px;
}
.view-toggle-btn {
  background: transparent;
  border: none;
  color: var(--text-sec);
  padding: 6px 14px;
  border-radius: 7px;
  cursor: pointer;
  font-weight: 600;
}
.view-toggle-btn:hover { color: var(--text); }
.view-toggle-btn.active {
  background: var(--blue);
  color: var(--on-primary);
}
.stores-view-hint {
  color: var(--text-muted);
  font-size: 13px;
  margin: 0 0 22px;
}

/* Grupos por cliente (lojas unificadas) */
.store-client-group {
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-subcard);
}
.store-client-group--unset { opacity: .92; }
.store-client-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  /* Os botões de ação (Resumo/Configuração/Editar/Desagrupar) têm nowrap e não
     encolhem: sem o wrap eles estouravam a largura da página no celular e ficavam
     cortados pelo overflow-x:hidden do .app-main. */
  flex-wrap: wrap;
}
.store-client-group-icon { font-size: 18px; line-height: 1; }
.store-client-group-name {
  font-size: 16px;
  color: var(--text);
  font-weight: 700;
  margin: 0;
  min-width: 0; overflow-wrap: anywhere;
}
.store-client-group-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-sec);
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 3px 10px;
  border-radius: 20px;
}
.store-client-group .store-card { background: var(--bg-card); }

/* ============================================================
   Interruptor (switch) — substitui a caixa de marcação onde a
   opção liga/desliga um comportamento, e não "seleciona" um item.
   O <input type="checkbox"> continua sendo o controle real (foco,
   teclado e leitores de tela); o desenho é do <span class="sw-track">.
   ============================================================ */
.sw-toggle { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.sw-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.sw-track {
  position: relative; flex: 0 0 auto; margin-top: 1px;
  width: 40px; height: 22px; border-radius: 999px;
  background: var(--bg-inactive); border: 1px solid var(--border);
  transition: background .16s, border-color .16s;
}
.sw-track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--text-muted);
  transition: transform .16s, background .16s;
}
.sw-toggle input:checked + .sw-track { background: var(--blue); border-color: var(--blue); }
.sw-toggle input:checked + .sw-track::after { transform: translateX(18px); background: #fff; }
.sw-toggle input:focus-visible + .sw-track { outline: 2px solid var(--blue); outline-offset: 2px; }
.sw-toggle input:disabled + .sw-track { opacity: .5; }
.sw-toggle:has(input:disabled) { cursor: default; }
.sw-label { font-size: 13px; color: var(--text); line-height: 1.35; }
/* Interruptor que o usuário vê mas não pode mexer (ex.: exibição no Desempenho,
   que é decisão de admin). O texto explica; o cinza evita a tentativa frustrada. */
.sw-toggle.is-locked .sw-label { color: var(--text-muted); }
.sw-note { font-style: normal; font-size: 11px; color: var(--text-muted); }

/* ── Configuração do cliente: preferências por loja vinculada ── */
.cc-stores-section { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--border); }
.cc-stores-title { font-size: 15px; font-weight: 700; color: var(--text); margin: 0 0 4px; }
.cc-stores-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px; margin-top: 14px;
}
.cc-store-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 12px;
}
.cc-store-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* .mp-logo não tem tamanho próprio — cada contexto define o dele. */
.cc-store-head .mp-logo { width: 18px; height: 18px; }
.cc-store-name { font-size: 14px; font-weight: 700; color: var(--text); }
.cc-store-id   { font-size: 11px; color: var(--text-muted); margin-left: auto; }
.cc-store-toggles { display: flex; flex-direction: column; gap: 11px; }
.cc-store-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 640px) { .cc-stores-list { grid-template-columns: 1fr; } }

/* Custos por SKU — miniatura do produto */
.sku-cost-thumb {
  width: 44px; height: 44px; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg-card); display: inline-block; vertical-align: middle;
}
.sku-cost-thumb--empty { background: var(--bg-subcard); }
.sku-cost-table td { vertical-align: middle; }
.sku-cost-table th, .sku-cost-table td { padding: 5px 8px; }
.sku-cost-table .sc-cost-save { margin-left: 6px; }

/* Ícone (imagem) inline dentro de botões */
.btn-inline-icon { width: 15px; height: 15px; object-fit: contain; vertical-align: -2px; margin-right: 4px; }

/* Input de custo com o visual do catalog-search-input, sem o ícone de busca */
.sc-cost-input.catalog-search-input {
  min-width: 0; width: 100px; max-width: 120px;
  padding: 6px 10px; background-image: none; text-align: right;
}

/* Badge da plataforma no card */
.store-card-plat {
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 11px;
}
.store-card-plat.plat-ml     { background: rgba(255,229,0,.16);  color: #d9c200; }
.store-card-plat.plat-shopee { background: rgba(238,77,45,.14);  color: #ee4d2d; }
.store-card-plat.plat-magalu { background: rgba(0,134,255,.14);  color: #0086ff; }

/* Selo de promoção na lista de produtos (ML) */
.catalog-promo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(var(--green-rgb),.14);
  color: var(--green);
  border: 1px solid rgba(var(--green-rgb),.35);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
}

/* Seção de promoções na tela do produto (ML) */
.ml-promo-section { margin: 4px 0 14px; }
.ml-promo-head { font-size: 13px; font-weight: 700; color: var(--text); margin: 10px 0 8px; }
.ml-promo-body { font-size: 13px; color: var(--text-sec); }
.ml-promo-item { font-size: 13px; color: var(--text-sec); margin-bottom: 4px; }
.ml-promo-loading, .ml-promo-empty {
  color: var(--text-sec);
  font-size: 13px;
  padding: 10px 0;
  display: flex; align-items: center; gap: 8px;
}
.ml-promo-title {
  font-size: 13px; font-weight: 700; color: var(--text);
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.ml-promo-count {
  background: rgba(var(--azul-rgb),.2); color: var(--azul);
  font-size: 11px; border-radius: 10px; padding: 1px 8px;
}
.ml-promo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
/* Grupos: ativas × disponíveis × encerradas */
.ml-promo-group { margin-bottom: 14px; }
.ml-promo-group-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700;
  margin: 0 0 8px; padding: 5px 10px;
  border-radius: 8px;
}
.promo-grp-active   .ml-promo-group-title { background: rgba(var(--green-rgb),.12);  color: var(--green); }
.promo-grp-avail    .ml-promo-group-title { background: rgba(var(--azul-rgb),.12); color: var(--azul); }
.promo-grp-finished .ml-promo-group-title { background: var(--bg-subcard);    color: var(--text-muted); }
.promo-grp-active   .ml-promo-card { border-left: 3px solid var(--green); }
.promo-grp-avail    .ml-promo-card { border-left: 3px solid var(--azul); }
.promo-grp-finished .ml-promo-card { opacity: .75; }
.ml-promo-range    { font-size: 12px; color: var(--text-sec); margin-top: 2px; }
.ml-promo-range-mm { color: var(--text-muted); margin-left: 6px; }
.ml-promo-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
}
.ml-promo-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.ml-promo-type { font-size: 12px; font-weight: 700; color: var(--text); }
.ml-promo-status { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 10px; text-transform: uppercase; letter-spacing: .03em; }
.ml-promo-status.promo-active    { background: rgba(var(--green-rgb),.16);  color: var(--green); }
.ml-promo-status.promo-candidate { background: rgba(var(--azul-rgb),.14); color: var(--azul); }
.ml-promo-status.promo-pending   { background: rgba(245,158,11,.16); color: #d97706; }
.ml-promo-status.promo-finished  { background: var(--bg-subcard);    color: var(--text-muted); }
.ml-promo-name  { font-size: 12px; color: var(--text-sec); margin-bottom: 4px; }
.ml-promo-price { font-size: 15px; color: var(--text); }
.ml-promo-old   { color: var(--text-muted); text-decoration: line-through; font-size: 12px; }
.ml-promo-extra { font-size: 12px; color: var(--text-sec); margin-top: 4px; }
.ml-promo-boost { font-size: 11.5px; color: #d97706; font-weight: 600; margin-top: 4px; }
.ml-promo-copart {
  font-size: 12px;
  color: #7c3aed;
  font-weight: 600;
  margin-top: 5px;
  padding: 4px 8px;
  border-radius: 7px;
  background: rgba(124,58,237,.1);
  border: 1px solid rgba(124,58,237,.25);
}
.ml-promo-copart strong { color: #6d28d9; }
.ml-promo-dates { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* Cards de tarefa clicáveis (painel "Tarefas do Perfex") */
.exp-clickable { cursor: pointer; transition: transform .1s, box-shadow .15s, border-color .15s; }
.exp-clickable:hover { transform: translateY(-1px); box-shadow: 0 3px 12px rgba(0,0,0,.25); border-color: var(--blue); }
.exp-clickable:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Modal de tarefas por status */
.stm-overlay {
  position: fixed; inset: 0; z-index: var(--z-modal-top);
  background: rgba(0,0,0,.55);
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.stm-modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 100%; max-width: 560px;
  max-height: 80vh; display: flex; flex-direction: column;
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
}
.stm-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--border);
}
.stm-title { font-size: 15px; font-weight: 700; color: var(--text); }
.stm-sub   { font-size: 12.5px; color: var(--text-sec); margin-top: 2px; }
.stm-body  { padding: 8px 18px 16px; overflow-y: auto; }
.stm-list  { list-style: none; margin: 0; padding: 0; }
.stm-item  { padding: 11px 0; border-bottom: 1px solid var(--separator); }
.stm-item:last-child { border-bottom: none; }
.stm-link  { color: var(--blue-text); text-decoration: none; font-weight: 600; font-size: 13.5px; }
.stm-link:hover { text-decoration: underline; }
.stm-meta  { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; font-size: 12px; color: var(--text-sec); }
.stm-overdue { color: #ef4444; font-weight: 600; }

/* Indicador discreto de "atualizando em segundo plano" */
.sync-indicator {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: var(--z-modal-top);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(0,0,0,.28);
  color: var(--text-sec);
  font-size: 12.5px;
  font-weight: 600;
}
.sync-ind-body { display: flex; flex-direction: column; gap: 5px; min-width: 140px; }
.sync-ind-text { line-height: 1; }
.sync-ind-bar {
  height: 4px;
  border-radius: 4px;
  background: var(--bg-subcard);
  overflow: hidden;
  position: relative;
}
.sync-ind-fill {
  height: 100%;
  width: 0;
  border-radius: 4px;
  background: var(--blue);
  transition: width .4s ease;
}
/* Estado indeterminado (progresso 0 / ainda na fila): barra desliza */
.sync-indicator.sync-indeterminate .sync-ind-fill {
  width: 40% !important;
  animation: sync-slide 1.1s ease-in-out infinite;
}
@keyframes sync-slide {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(280%); }
}

/* Catálogo Shopee — variações expansíveis */
.sc-expand {
  border: none;
  background: transparent;
  color: var(--text-sec);
  cursor: pointer;
  font-size: 12px;
  padding: 0 4px;
}
.sc-expand:hover { color: var(--blue-text); }
.sc-var-count { color: var(--text-muted); font-size: 11px; }
.sc-models {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0 6px 24px;
}
.sc-model {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  font-size: 12.5px;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--bg-subcard);
}
.sc-model-name  { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-model-price { color: var(--text-sec); }
.sc-model-stock { color: var(--text-sec); font-weight: 600; min-width: 56px; text-align: right; }

/* Botão "canal de venda" na página Clientes */
.cli-channel-link {
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 5px 10px;
  font-weight: 600;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
  background: var(--bg-subcard);
  transition: border-color .15s, background .15s, color .15s;
}
.cli-channel-link:hover { background: var(--bg-card); }
.cli-channel-link.plat-ml     { color: #d9c200; border-color: rgba(255,229,0,.4); }
.cli-channel-link.plat-ml:hover     { background: rgba(255,229,0,.12); }
.cli-channel-link.plat-shopee { color: #ee4d2d; border-color: rgba(238,77,45,.4); }
.cli-channel-link.plat-shopee:hover { background: rgba(238,77,45,.12); }
/* #0086FF e o azul do proprio logo (assets/img/logo-magalu.svg). Sem esta regra o
   botao do Magalu ficava no cinza padrao, do lado de dois canais coloridos - lia-se
   como "canal desativado", e nao como um terceiro canal. */
.cli-channel-link.plat-magalu { color: #0086ff; border-color: rgba(0,134,255,.4); }
.cli-channel-link.plat-magalu:hover { background: rgba(0,134,255,.12); }

.stores-platform-section { margin-bottom: 36px; }
.stores-platform-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.stores-platform-header h3 { font-size: 16px; color: var(--text); font-weight: 600; margin: 0; }

.store-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.store-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color .2s, box-shadow .2s;
}
.store-card:hover {
  border-color: rgba(var(--azul-rgb),.4);
  box-shadow: 0 4px 20px rgba(var(--azul-rgb),.12);
}

.store-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.store-card-icon { font-size: 30px; line-height: 1; }
.store-card-info { flex: 1; min-width: 0; }
.store-card-name {
  font-weight: 600;
  color: var(--text);
  font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.store-card-id { color: var(--text-sec); font-size: 12px; margin-top: 2px; }

.store-proj-count {
  display: inline-block;
  background: rgba(var(--azul-rgb),.1);
  color: var(--blue-text);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}
.store-proj-none { color: var(--text-muted); font-size: 12px; font-style: italic; }

/* Grade de stats */
.store-card-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.store-stat-item {
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 8px 4px;
  text-align: center;
  overflow: hidden;
}
.store-stat-value { overflow: hidden; text-overflow: ellipsis; }
.store-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  margin-bottom: 3px;
}
.store-stat-label {
  font-size: 10px;
  color: var(--text-sec);
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.2;
}
.store-stat-item.stat-done .store-stat-value    { color: var(--green); }
.store-stat-item.stat-overdue .store-stat-value { color: #ef4444; }
.store-stat-item.stat-progress .store-stat-value { color: var(--blue-text); }

.store-stats-loading {
  color: var(--text-sec);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  grid-column: 1 / -1;
}
.store-no-stats {
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
  grid-column: 1 / -1;
  padding: 4px 0;
}

.spinner-sm {
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex-shrink: 0;
}

.store-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ============================================================
   SNOWUI — Refinamentos adicionais
   ============================================================ */

/* Scrollbar refinada */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Focus rings usando indigo */
*:focus-visible {
  outline: 2px solid rgba(var(--azul-rgb),.6);
  outline-offset: 2px;
}

/* Inputs — estilo SnowUI */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
  font-family: 'Inter', system-ui, sans-serif;
}

/* Seleção de texto */
::selection { background: rgba(var(--azul-rgb),.3); color: #fff; }

/* Badge de conexão — indigo */
.ml-badge-dot { background: var(--green-strong); }

/* Nav tab active — indigo */
.nav-tab.active { background: rgba(var(--azul-rgb),.15); color: var(--azul); }

/* Chart type btn active — indigo */
.chart-type-btn.active { background: var(--blue); box-shadow: 0 2px 8px rgba(var(--azul-rgb),.35); }

/* Paginação active */
.tasks-pagination .pg-btn.pg-active {
  background: var(--blue);
  box-shadow: 0 2px 8px rgba(var(--azul-rgb),.35);
}
.tasks-pagination .pg-btn:hover:not([disabled]) {
  background: var(--blue);
  box-shadow: 0 2px 8px rgba(var(--azul-rgb),.25);
}

/* Formulário — label SnowUI */
.form-group label { font-family: 'Inter', system-ui, sans-serif; letter-spacing: .02em; }

/* Sidebar brand */
.sidebar-brand { padding: 18px 16px; }
.app-name { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }

/* Sidebar nav seção */
.sidebar-nav { padding: 12px 10px; gap: 0; }

/* Page body — mais espaço. O padding inferior alto (160px) garante que os botões
   flutuantes (Notas na base 24px e IA empilhado, topo a ~140px), fixos no canto
   inferior direito, fiquem sobre um espaço vazio ao rolar até o fim — e não sobre
   o conteúdo. Precisa ser MAIOR que a altura do FAB de IA empilhado. */
.page-body { padding: 24px 24px 160px; }

/* Section labels — uppercase tracking */
.ml-section-label { letter-spacing: .08em; font-weight: 800; }

/* Tabela — thead mais limpo */
thead th { background: rgba(0,0,0,.15); letter-spacing: .05em; }
tbody tr:hover td { background: rgba(var(--azul-rgb),.04); }

/* Badges de status de pedido */
.ml-paid      { background: rgba(var(--green-rgb),.15);   color: var(--green); }
.ml-pending   { background: rgba(252,211,77,.12);  color: #FCD34D; }
.ml-cancelled { background: rgba(248,113,113,.15); color: #F87171; }

/* Connect card — refinado */
.ml-connect-card, .ml-progress-card, .nc-card {
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
}

/* Tooltip do gráfico */
#ml-chart-tooltip {
  border-radius: 10px;
  backdrop-filter: blur(8px);
}

/* Report dropdown */
.report-dropdown-menu {
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.45);
}

/* Goals modal overlay — fade mais suave */
.goals-modal-overlay { backdrop-filter: blur(4px); }

/* Alert item — indigo info */
.ml-alert-item.alert-info { background: rgba(var(--azul-rgb),.08); color: var(--azul); }

/* Perm item checked — indigo */
.perm-item:has(input:checked) {
  border-color: var(--blue);
  background: rgba(var(--azul-rgb),.08);
}
.perm-item:has(input:checked) .perm-item-name { color: var(--azul); }
.perm-item:has(input:checked) .perm-item-hint { color: rgba(var(--azul-rgb),.55); }

/* Admin toggle */
.admin-toggle {
  background: rgba(var(--azul-rgb),.08);
  border: 1px solid rgba(var(--azul-rgb),.25);
  color: var(--azul);
}

/* Perm badges */
.perm-badge { background: rgba(var(--azul-rgb),.15); color: var(--azul); }
.perm-badge-admin { background: rgba(234,179,8,.15); color: #FCD34D; }

/* Compare toggle active */
.compare-toggle--active { border-color: var(--azul); color: var(--azul); }
.compare-toggle--active::before { background: var(--azul); }
.compare-toggle:hover { border-color: var(--azul); color: var(--azul); }

/* Status pills */
.status-pill { border-radius: 20px; }

/* Smooth transitions globais */
a, button { transition: color .15s, background .15s, opacity .15s; }

/* ============================================================ */
/* Desempenho de Clientes                                       */
/* ============================================================ */
.perf-subtitle { color: var(--text-sec); font-size: 14px; margin: -4px 0 18px; }

/* Barra de filtros da lista de clientes (período / cliente / canal) */
.perf-filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px;
  margin: 0 0 16px; padding: 12px 14px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
}
.perf-filter { display: flex; flex-direction: column; gap: 4px; }
.perf-filter-label {
  font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px;
}
.perf-select {
  background: var(--bg-subcard); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 10px; font-size: 13px; font-family: inherit; min-width: 150px;
}
.perf-select:focus { outline: none; border-color: var(--primary); }
/* Campos de data ficam mais estreitos que os selects */
.perf-filter-date .perf-select { min-width: 140px; }
/* O ícone nativo do input[type=date] é escuro demais no tema dark */
#tab-desempenho input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.7); cursor: pointer; }
.perf-filters .btn { align-self: flex-end; }
.perf-filter-summary { font-size: 12px; color: var(--text-muted); margin-left: auto; align-self: flex-end; padding-bottom: 6px; }
@media (max-width: 720px) {
  .perf-filter, .perf-select { flex: 1 1 100%; min-width: 0; }
  .perf-filter-summary { margin-left: 0; flex: 1 1 100%; }
}

/* Linha-resumo consolidada (só admin) — destaque após o subtítulo */
.perf-admin-summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px;
  margin: 0 0 18px; padding: 12px 16px; border-radius: 12px;
  border: 1px solid var(--blue);
  box-shadow: 0 2px 12px rgba(0,0,0,.15);
}
.pas-metrics { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; }
.pas-item { display: flex; flex-direction: column; line-height: 1.25; }
.pas-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px; }
.pas-val { font-size: 16px; font-weight: 800; color: var(--blue); font-variant-numeric: tabular-nums; }
/* Separador antes de Média diária / Previsão do mês, empurrando-as p/ o fim da linha */
.pas-divider { align-self: stretch; width: 1px; min-height: 30px; background: var(--border); margin: 0 6px 0 auto; }

/* Desempenho usa o cabeçalho de página PADRÃO (.page-section-header global, com
   borda inferior e h2 22px). As regras compactas que existiam aqui NÃO tinham
   escopo e vazavam para todas as páginas (settings, lojas, notificações…),
   removendo a borda do cabeçalho delas. Mantém-se só o alinhamento do botão. */
/* As ações ficam coladas à direita no desktop; quando o cabeçalho quebra (celular),
   o auto deixa de valer e elas ocupam a linha inteira, alinhadas à esquerda. */
#tab-desempenho .page-section-header > div:last-child {
  margin-left: auto;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
@media (max-width: 640px) {
  #tab-desempenho .page-section-header > div:last-child { margin-left: 0; }
  #tab-desempenho .page-section-header > div:last-child .btn { flex: 1 1 auto; justify-content: center; }
}

/* Grid de cards de clientes */
.perf-clients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.perf-client-card {
  text-align: left;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.perf-client-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.perf-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Ações do card (Resumo com IA) — empurradas para a direita do cabeçalho. O card
   virou <div role="button"> justamente para poder conter este botão. */
.perf-card-actions { margin-left: auto; display: flex; gap: 6px; }
.perf-client-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.perf-card-name { font-size: 15px; font-weight: 700; color: var(--text); }
.perf-card-channels { display: flex; gap: 6px; flex-wrap: wrap; }
.perf-chip {
  font-size: 11px; padding: 2px 8px; border-radius: 20px;
  background: var(--bg-subcard); color: var(--text-sec); border: 1px solid var(--border);
}
.perf-chip-warn { background: rgba(248,113,113,.12); color: var(--red); border-color: rgba(248,113,113,.3); }

.perf-card-metrics {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 14px; margin-top: 2px;
}
.perf-metric { display: flex; flex-direction: column; }
.perf-metric-label { font-size: 11px; color: var(--text-muted); }
.perf-metric-val { font-size: 14px; font-weight: 600; color: var(--text); }
.perf-up   { color: var(--green); }
.perf-down { color: var(--red); }

.perf-card-goal { font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 8px; text-align: center; }
.perf-good { background: rgba(74,222,128,.14); color: var(--green); }
.perf-mid  { background: rgba(250,204,21,.14);  color: #FACC15; }
.perf-bad  { background: rgba(248,113,113,.14); color: var(--red); }

/* Barra de ferramentas do detalhe */
.perf-detail-toolbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 14px 0 12px;
}
.perf-month-nav { display: flex; align-items: center; gap: 10px; }
.perf-month-label {
  font-size: 15px; font-weight: 600; color: var(--text);
  min-width: 150px; text-align: center; text-transform: capitalize;
}
.perf-month-nav button { min-width: 38px; }
.perf-channels { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }

.perf-warning {
  background: rgba(250,204,21,.1); border: 1px solid rgba(250,204,21,.3);
  color: #EAB308; font-size: 13px; padding: 10px 14px; border-radius: 8px; margin-bottom: 12px;
}
.perf-sort-hint { font-size: 12px; color: var(--text-muted); margin-left: auto; }

/* Cabeçalho ordenável + filtro no funil (estilo Excel) */
.perf-th-sort { cursor: pointer; user-select: none; }
.perf-th-sort .perf-th-label { cursor: pointer; }
.perf-th-sort:hover { color: var(--text); background: var(--bg-subcard); }
.perf-th-active { color: var(--azul) !important; }
.perf-filter-btn {
  display: inline-block; margin-left: 5px; cursor: pointer;
  font-size: 9px; line-height: 1; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 4px; padding: 2px 3px;
  vertical-align: middle; transition: color .12s, background .12s, border-color .12s;
}
.perf-filter-btn:hover { color: var(--text); background: var(--bg-inactive); }
.perf-filter-btn.active {
  color: #fff; background: var(--primary); border-color: var(--primary);
}

/* Menu suspenso de filtro de coluna */
/* Hint por célula que acompanha o cursor na planilha de desempenho */
.perf-cell-tip {
  position: fixed;
  z-index: var(--z-tooltip);
  max-width: 340px;
  pointer-events: none;
  background: var(--bg-card, #1b1d2a);
  color: var(--text, #e8e8ef);
  border: 1px solid var(--blue);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.4;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
}

.perf-col-filter {
  position: fixed; z-index: var(--z-modal); width: 230px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.45);
  padding: 10px; font-size: 13px;
}
.pcf-head { font-weight: 600; color: var(--text); margin-bottom: 6px; }
.pcf-actions { font-size: 12px; margin-bottom: 8px; }
.pcf-actions a { color: var(--primary); text-decoration: none; }
.pcf-actions a:hover { text-decoration: underline; }
.pcf-sep { color: var(--text-muted); margin: 0 6px; }
.pcf-list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 6px 2px; }
.pcf-list-num { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.pcf-item { display: flex; align-items: center; gap: 7px; padding: 3px 4px; border-radius: 6px; cursor: pointer; color: var(--text-sec); }
.pcf-item:hover { background: var(--bg-inactive); color: var(--text); }
.pcf-group { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); padding: 8px 4px 2px; border-top: 1px solid var(--border); margin-top: 2px; }
.pcf-group:first-child { border-top: none; margin-top: 0; padding-top: 2px; }
.pcf-item input { cursor: pointer; accent-color: var(--primary); }
.pcf-list-num .pcf-item { gap: 4px; justify-content: center; font-size: 12px; }
.pcf-foot { display: flex; gap: 8px; margin-top: 8px; }
.pcf-foot .btn { flex: 1; }

/* Planilha diária — container com altura limitada = "congelar painéis":
   cabeçalho e colunas de identificação ficam fixos e a barra de rolagem
   horizontal fica sempre dentro da tela (no rodapé do quadro). */
.perf-table-wrap {
  overflow: auto;
  max-height: calc(100vh - 170px);
  border: 1px solid var(--border); border-radius: 10px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--border) var(--bg-subcard);
}
.perf-table-wrap::-webkit-scrollbar { height: 13px; width: 13px; }
.perf-table-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 7px; border: 3px solid var(--bg-subcard); }
.perf-table-wrap::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
.perf-table-wrap::-webkit-scrollbar-track { background: var(--bg-subcard); border-radius: 7px; }

/* Barra de rolagem horizontal no topo (espelha a tabela, logo acima dela) */
.perf-scroll-top {
  overflow-x: auto; overflow-y: hidden;
  border: 1px solid var(--border); border-bottom: none;
  border-radius: 10px 10px 0 0;
  scrollbar-width: thin; scrollbar-color: var(--border) var(--bg-subcard);
}
.perf-scroll-top::-webkit-scrollbar { height: 13px; }
.perf-scroll-top::-webkit-scrollbar-thumb { background: var(--border); border-radius: 7px; border: 3px solid var(--bg-subcard); }
.perf-scroll-top::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
.perf-scroll-top::-webkit-scrollbar-track { background: var(--bg-subcard); border-radius: 7px; }
.perf-scroll-top-inner { height: 1px; }
/* Quando a barra do topo está visível, o quadro encosta nela sem cantos duplos */
.perf-scroll-top + .perf-table-wrap { border-radius: 0 0 10px 10px; }
.perf-daily-table {
  width: 100%; border-collapse: collapse; font-size: 12px; white-space: nowrap;
}
.perf-daily-table th, .perf-daily-table td {
  padding: 5px 7px; text-align: right; border-bottom: 1px solid var(--border);
}
.perf-daily-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-header); color: var(--text-sec);
  font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .3px;
  text-align: right; white-space: normal; vertical-align: bottom;
}
.perf-daily-table thead th:first-child,
.perf-daily-table tbody td:first-child,
.perf-daily-table tfoot td:first-child { text-align: left; }
.perf-daily-table tbody td:nth-child(2),
.perf-daily-table thead th:nth-child(2) { text-align: center; }

.perf-col-day { font-weight: 600; color: var(--text); vertical-align: middle; }

/* Linha-cabeçalho de cada dia (largura total) — agrupa "Dia 01 · Quarta-feira"
   seguido de TODAS as lojas daquele dia. O rótulo é sticky à esquerda para
   continuar visível mesmo com rolagem horizontal da planilha. */
.perf-day-sep td {
  background: var(--bg-header);
  border-top: 2px solid var(--blue, var(--azul));
  padding: 0; text-align: left !important;
}
.perf-day-sep-label {
  position: sticky; left: 8px;
  display: inline-block; padding: 6px 4px;
  font-weight: 700; font-size: 13px; color: var(--text);
  letter-spacing: .2px;
}
.perf-day-sep-today td { background: var(--bg-inactive); }
.perf-day-sep-today .perf-day-sep-label { color: var(--blue, var(--azul)); }
.perf-col-meta { color: var(--text-sec); background: var(--bg-subcard); font-style: italic; }
.perf-weekend { color: var(--text-muted); vertical-align: middle; }
.perf-row-future td { color: var(--text-faded); text-align: center; }
.perf-row-today td.perf-col-day { color: var(--primary); }
.perf-daily-table tbody tr:hover td:not([style*="background"]) { background: var(--bg-inactive); }

/* Coluna de canal de venda */
.perf-col-channel { text-align: left !important; line-height: 1.25; white-space: normal; }
/* Nome da loja é o principal; o canal (tag) tem peso visual secundário */
.perf-channel-tag { display: block; font-weight: 400; color: var(--text-muted); font-size: 11px; }
.perf-store-name  { display: block; font-weight: 600; color: var(--text); font-size: 12.5px; }

/* Divisória entre dias (última linha de cada dia) */
.perf-day-end > td { border-bottom: 2px solid var(--border); }
.perf-foot-label { font-weight: 700; color: var(--text); vertical-align: middle; text-align: left; }

/* ---- Colunas de identificação fixas à esquerda (frozen panes) ---- */
/* Larguras fixas — necessárias para os deslocamentos do sticky */
.perf-daily-table .perf-col-day,
.perf-daily-table thead th:nth-child(1) { min-width: 48px;  width: 48px; }
.perf-daily-table .perf-col-dow,
.perf-daily-table thead th:nth-child(2) { min-width: 60px;  width: 60px; }
.perf-daily-table .perf-col-channel,
.perf-daily-table thead th:nth-child(3) { min-width: 150px; width: 150px; }

/* Posição sticky (left acumulado: 0 → 48 → 108) */
.perf-daily-table thead th:nth-child(1),
.perf-daily-table .perf-col-day,
.perf-totals .perf-foot-label           { position: sticky; left: 0; }
.perf-daily-table thead th:nth-child(2),
.perf-daily-table .perf-col-dow         { position: sticky; left: 48px; }
.perf-daily-table thead th:nth-child(3),
.perf-daily-table .perf-col-channel     { position: sticky; left: 108px; }

/* Fundos opacos (cobrem as células que rolam por baixo) e empilhamento */
.perf-daily-table .perf-col-day,
.perf-daily-table .perf-col-dow,
.perf-daily-table tbody .perf-col-channel { background: var(--bg-card); z-index: 3; }
.perf-daily-table thead th:nth-child(1),
.perf-daily-table thead th:nth-child(2),
.perf-daily-table thead th:nth-child(3) { z-index: 6; }
.perf-totals .perf-foot-label,
.perf-totals .perf-col-channel { background: var(--bg-header); z-index: 4; }
/* Sombra sutil na borda direita das colunas fixas */
.perf-daily-table .perf-col-channel,
.perf-daily-table thead th:nth-child(3),
.perf-totals .perf-col-channel { box-shadow: 6px 0 8px -6px rgba(0,0,0,.45); }

.perf-daily-table tfoot td {
  border-top: 2px solid var(--border); border-bottom: none;
  font-weight: 700; color: var(--text); background: var(--bg-header);
}
/* NÃO usar position:sticky;bottom nas linhas de total por loja: com várias linhas
   todas grudavam em bottom:0 e colapsavam umas sobre as outras. Só a linha de
   TOTAL GERAL (uma única) fica fixa no rodapé. */
.perf-grand-total td {
  position: sticky; bottom: 0; z-index: 5;
  background: var(--bg-inactive, #262a3d);
  border-top: 2px solid var(--blue, var(--azul));
  border-bottom: none; color: var(--text); font-weight: 800;
}
.perf-grand-total .perf-grand-label {
  left: 0; z-index: 6; text-align: left !important;
  letter-spacing: .2px;
}

/* Legenda do mapa de calor */
.perf-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; font-size: 12px; color: var(--text-sec); }
.perf-legend-item { display: flex; align-items: center; gap: 6px; }
.perf-legend-swatch { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.swatch-bad  { background: hsl(0, 68%, 82%); }
.swatch-mid  { background: hsl(60, 68%, 82%); }
.swatch-good { background: hsl(120, 68%, 82%); }

@media (max-width: 640px) {
  .perf-clients-grid { grid-template-columns: 1fr; }
  .perf-channels { margin-left: 0; width: 100%; }

  /* ---- Planilha diária no celular ----
     As três colunas de identificação são fixas (frozen panes) e somavam 272px dos
     ~330px de tela: sobrava uma faixa de ~57px para os números e a planilha ficava
     ilegível. Aqui elas encolhem — mas NÃO com display:none: os rodapés têm células
     com colspan (2 nos totais por loja, 3 no total geral) e, ao sumir uma coluna, o
     colspan passa a comer colunas visíveis e a linha de totais sai desalinhada das
     de cima. Por isso as colunas continuam existindo, com largura e texto zerados.
     Agrupado por dia (padrão) a coluna Dia também encolhe: a linha divisória
     "Dia 01 · Quarta-feira" que abre cada dia já diz o dia e o dia da semana. Fora
     desse modo (ordenado por outra coluna) não há divisória — ali o dia é a única
     referência da linha e continua legível.
     Do cabeçalho sobra o funil ⏷: sem ele não haveria como filtrar por dia nem por
     dia da semana no celular. */
  /* Células de corpo/rodapé: sem texto e sem espaçamento. Continuam fixas, com o
     fundo opaco, para cobrir o que rola por baixo da faixa do funil. */
  .perf-daily-table .perf-col-dow,
  .perf-daily-table.perf-by-day .perf-col-day,
  .perf-totals .perf-foot-label {
    width: 0; min-width: 0; max-width: 0;
    padding: 0; font-size: 0; line-height: 0;
  }
  /* Cabeçalho: só o funil, numa faixa de 18px — é ela que passa a definir a
     largura da coluna inteira. */
  .perf-daily-table thead th:nth-child(2),
  .perf-daily-table.perf-by-day thead th:nth-child(1) {
    width: 18px; min-width: 18px; max-width: 18px;
    padding: 5px 0; box-shadow: none;
  }
  .perf-daily-table thead th:nth-child(2) .perf-th-label,
  .perf-daily-table.perf-by-day thead th:nth-child(1) .perf-th-label { display: none; }
  .perf-daily-table thead th:nth-child(2) .perf-filter-btn,
  .perf-daily-table.perf-by-day thead th:nth-child(1) .perf-filter-btn { margin-left: 0; }
  /* 58px é a largura real do cabeçalho "Dia ▲⏷" — vale quando a coluna Dia fica. */
  .perf-daily-table thead th:nth-child(1),
  .perf-daily-table .perf-col-day { min-width: 58px; width: 58px; }

  /* Deslocamentos das colunas fixas, acumulando as larguras acima:
     agrupado por dia → 18 + 18;  ordenado por outra coluna → 58 + 18. */
  .perf-daily-table thead th:nth-child(2),
  .perf-daily-table .perf-col-dow { left: 58px; }
  .perf-daily-table.perf-by-day thead th:nth-child(2),
  .perf-daily-table.perf-by-day .perf-col-dow { left: 18px; }
  .perf-daily-table thead th:nth-child(3),
  .perf-daily-table .perf-col-channel,
  .perf-totals .perf-col-channel { left: 76px; }
  .perf-daily-table.perf-by-day thead th:nth-child(3),
  .perf-daily-table.perf-by-day .perf-col-channel { left: 36px; }
  /* A coluna de loja/canal é a que realmente identifica a linha. */
  .perf-daily-table thead th:nth-child(3),
  .perf-daily-table .perf-col-channel { min-width: 104px; width: 104px; }
  .perf-store-name  { font-size: 11.5px; }
  .perf-channel-tag { font-size: 10px; }
  .perf-grand-total .perf-grand-label { white-space: normal; font-size: 11px; }

  /* 100vh no celular conta a barra de endereço que some ao rolar: a planilha
     transbordava a tela. dvh acompanha a altura realmente visível. */
  .perf-table-wrap { max-height: calc(100dvh - 150px); }

  /* A dica de ordenação é longa e empurrava a barra de ferramentas. */
  .perf-sort-hint { margin-left: 0; flex: 1 1 100%; }
}

/* ============================================================
   Central de Notificações — sino, painel e toasts
   ============================================================ */
.notif-bell-icon { position: relative; display: inline-flex; }
.notif-bell-mobile { position: relative; margin-left: auto; display: inline-flex; align-items: center; }
.notif-bell-img { width: 22px; height: 22px; object-fit: contain; display: block; }
.mobile-header .mobile-title { flex: 1; }

.notif-badge {
  position: absolute; top: -6px; right: -8px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--red, #e63329); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
  border-radius: 9px; box-shadow: 0 0 0 2px var(--bg-header, var(--bg-card));
}
.notif-badge[hidden] { display: none; }

/* Painel deslizante */
.notif-overlay {
  position: fixed; inset: 0; z-index: var(--z-menu-top);
  display: flex; justify-content: flex-end;
  background: rgba(0, 0, 0, .45);
}
.notif-panel {
  width: min(420px, 100%); height: 100%;
  background: var(--bg-card, var(--bg-card));
  border-left: 1px solid var(--border, var(--border));
  display: flex; flex-direction: column;
  box-shadow: -8px 0 28px rgba(0, 0, 0, .35);
  animation: notifSlideIn .18s ease-out;
}
@keyframes notifSlideIn { from { transform: translateX(24px); opacity: .4; } to { transform: none; opacity: 1; } }
.notif-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--border, var(--border));
}
.notif-panel-head h3 { margin: 0; font-size: 16px; }
.notif-panel-actions { display: flex; align-items: center; gap: 8px; }
.notif-panel-body { flex: 1; overflow-y: auto; padding: 8px 10px 20px; }

/* Controles de pop-up do sino (preferência do usuário + soneca, habilitados pelo admin) */
.notif-panel-tools {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 18px; border-bottom: 1px solid var(--border, var(--border));
  font-size: 12px; color: var(--text-sec);
}
.notif-tool { display: inline-flex; align-items: center; gap: 6px; }
.notif-panel-tools .catalog-status-filter { font-size: 12px; padding: 4px 8px; }
.notif-snooze-state { font-size: 11px; color: var(--text-muted); }

.notif-item-store {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--blue); margin-bottom: 2px;
}
.notif-item {
  position: relative; display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 34px 10px 12px; margin: 6px 0;
  background: var(--bg-subcard, var(--bg-subcard));
  border: 1px solid var(--border, var(--border));
  border-left-width: 3px; border-radius: 8px; cursor: pointer;
  transition: background .12s;
}
.notif-item:hover { background: var(--bg-card, var(--bg-card)); }
.notif-item.is-unread { box-shadow: inset 3px 0 0 0 var(--purple, #A78BFA); }
.notif-sev-high { border-left-color: var(--red, #e63329); }
.notif-sev-warn { border-left-color: var(--orange, #FB923C); }
.notif-sev-info { border-left-color: var(--purple, #A78BFA); }
.notif-item-icon { font-size: 16px; line-height: 1.4; }
.notif-item-main { min-width: 0; flex: 1; }
.notif-item-title { font-size: 13px; font-weight: 600; }
.notif-item-msg { font-size: 12px; color: var(--text-sec, #8B92A5); margin-top: 2px; word-break: break-word; }
.notif-item-time { font-size: 10px; color: var(--text-muted, var(--text-muted)); margin-top: 4px; }
.notif-item-dismiss {
  position: absolute; top: 6px; right: 6px;
  background: none; border: none; color: var(--text-muted, var(--text-muted));
  font-size: 13px; cursor: pointer; line-height: 1; padding: 4px;
}
.notif-item-dismiss:hover { color: var(--red, #e63329); }

/* Toasts / pop-ups */
.toast-container {
  position: fixed; top: 16px; right: 16px; z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: 10px;
  max-width: min(360px, calc(100vw - 32px));
}
.toast {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 34px 12px 14px; position: relative;
  background: var(--bg-card, var(--bg-card));
  border: 1px solid var(--border, var(--border)); border-left-width: 4px;
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
  cursor: pointer; animation: toastIn .2s ease-out;
  touch-action: pan-y;
}
.toast.toast-out { animation: toastOut .25s ease-in forwards; }
@keyframes toastIn  { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toastOut { from { transform: none; opacity: 1; } to { transform: translateX(40px); opacity: 0; } }
.toast-icon { font-size: 18px; line-height: 1.3; }
.toast-main { min-width: 0; flex: 1; }
.toast-title { font-size: 13px; font-weight: 700; }
.toast-msg { font-size: 12px; color: var(--text-sec, #8B92A5); margin-top: 2px; word-break: break-word; }
.toast-store { font-size: 10px; color: var(--text-muted, var(--text-muted)); margin-top: 4px; text-transform: uppercase; letter-spacing: .4px; }
.toast-close {
  position: absolute; top: 8px; right: 8px;
  background: none; border: none; color: var(--text-muted, var(--text-muted));
  font-size: 13px; cursor: pointer; line-height: 1; padding: 2px;
}
.toast-close:hover { color: var(--text, #fff); }

/* Preferências de notificação no formulário de usuário */
.notif-prefs-group { margin-top: 16px; }
/* Detalhe técnico do erro de sincronização (só admin vê). Monoespaçado e com
   rolagem: é o corpo cru da resposta da API, que vem em uma linha só. */
.erro-detalhe {
  margin: 8px 0 0; padding: 10px 12px; border-radius: 8px;
  background: var(--bg-subcard); border: 1px solid var(--border);
  color: var(--text-sec); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
  max-height: 220px; overflow: auto;
}
.perm-label-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* "Marcar todos" usa a mesma pílula do admin-toggle, em cinza: ela comanda os
   outros campos em vez de conceder alguma coisa, e o azul a faria parecer
   mais uma preferência da lista. */
.perm-toggle-all {
  color: var(--text-sec); background: transparent; border-color: var(--border);
}
.perm-toggle-all input { accent-color: var(--text-sec); }
.notif-types-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 16px;
}
.notif-type-item { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.notif-type-item input { flex-shrink: 0; }

@media (max-width: 640px) {
  .notif-panel { width: 100%; border-left: none; }
  .toast-container { left: 16px; right: 16px; max-width: none; }
}

/* ============================================================ */
/* Notas de clientes/lojas                                       */
/* ============================================================ */

/* Botão flutuante "+" (canto inferior direito, só na página de uma loja) */
#notes-fab {
  position: fixed; bottom: 24px; right: 24px; z-index: var(--z-fab-action);
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--blue); border: none; color: #000000;
  font-size: 28px; font-weight: 600; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  transition: transform .15s, box-shadow .15s, filter .15s;
}
#notes-fab:hover {
  transform: scale(1.08); filter: brightness(1.1);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .45);
}

/* Editor wysiwyg do modal de nota */
.note-editor-wrap {
  border: 1px solid var(--border, var(--border)); border-radius: 10px;
  overflow: hidden; margin-bottom: 16px; background: var(--bg2, #14151F);
}
.note-editor-toolbar {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  padding: 6px 8px; border-bottom: 1px solid var(--border, var(--border));
  background: var(--bg-card, var(--bg-card));
}
.note-editor-toolbar button {
  background: none; border: 1px solid transparent; border-radius: 6px;
  color: var(--text-sec, #8B92A5); font-size: 13px; line-height: 1;
  min-width: 30px; height: 28px; padding: 0 7px; cursor: pointer;
}
.note-editor-toolbar button:hover {
  background: rgba(var(--azul-rgb), .12); color: var(--text, #fff);
  border-color: rgba(var(--azul-rgb), .25);
}
.note-toolbar-sep {
  width: 1px; height: 18px; background: var(--border, var(--border)); margin: 0 5px;
}
.note-editor {
  min-height: 140px; max-height: 320px; overflow-y: auto;
  padding: 12px 14px; font-size: 14px; line-height: 1.55;
  color: var(--text, #fff); outline: none; word-break: break-word;
}
.note-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted, var(--text-muted)); pointer-events: none;
}
.note-editor a { color: var(--blue, var(--azul)); }
.note-editor ul, .note-editor ol { padding-left: 22px; margin: 6px 0; }

/* Escolha do escopo (loja × cliente) */
.note-scope-group { display: grid; gap: 8px; }
.note-scope-item {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  border: 1px solid var(--border, var(--border)); border-radius: 10px;
  padding: 10px 12px; transition: border-color .12s, background .12s;
}
.note-scope-item:has(input:checked) {
  border-color: var(--blue, var(--azul)); background: rgba(var(--azul-rgb), .08);
}
.note-scope-item input { margin-top: 3px; flex-shrink: 0; }
.note-scope-name { display: block; font-size: 13px; font-weight: 600; }
.note-scope-hint { display: block; font-size: 12px; color: var(--text-sec, #8B92A5); margin-top: 2px; }
.note-scope-disabled { opacity: .55; cursor: not-allowed; }

/* Cartões de nota (modal da loja e página admin) */
.notes-scroll { max-height: 55vh; overflow-y: auto; padding-right: 4px; }
.note-card {
  border: 1px solid var(--border, var(--border)); border-radius: 10px;
  background: var(--bg-card, var(--bg-card)); padding: 12px 14px; margin-bottom: 10px;
}
.note-card-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px;
}
.note-author { font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.note-author-img { width: 14px; height: 14px; object-fit: contain; }
.note-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.note-date { margin-left: auto; font-size: 11px; color: var(--text-muted, var(--text-muted)); white-space: nowrap; }
.note-badge {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 20px; line-height: 1.5;
}
.note-badge-store  { background: rgba(var(--azul-rgb), .14); color: var(--azul); }
.note-badge-client { background: rgba(var(--green-rgb), .14);  color: var(--green); }
.note-card-content {
  font-size: 13px; line-height: 1.55; color: var(--text, #fff); word-break: break-word;
}
.note-card-content p { margin: 0 0 6px; }
.note-card-content p:last-child { margin-bottom: 0; }
.note-card-content ul, .note-card-content ol { padding-left: 22px; margin: 6px 0; }
.note-card-content a { color: var(--blue, var(--azul)); }

/* Ícone em imagem no toast (ex.: nota salva) */
.toast-icon-img { width: 18px; height: 18px; object-fit: contain; display: block; }

/* ============================================================
   ASSISTENTE DE IA (OpenRouter)
   ============================================================ */
/* Botões que só aparecem quando a IA está habilitada */
.ai-gated { display: none; }
body.ai-on .ai-gated { display: inline-flex; }

/* Botão flutuante do assistente (acima do FAB de notas) */
#ai-fab {
  position: fixed; bottom: 88px; right: 24px; z-index: var(--z-fab-action);
  width: 52px; height: 52px; border-radius: 50%;
  background: #D0F078; border: none; color: #111;
  font-size: 24px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  transition: transform .15s, box-shadow .15s;
}
#ai-fab .ai-fab-img { width: 28px; height: 28px; object-fit: contain; }
#ai-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(208,240,120,.5); }

/* Seta para recolher/expandir os botões flutuantes (IA + notas).
   Fica no topo do FAB de IA, levemente à esquerda. */
#fab-toggle {
  position: fixed; bottom: 148px; right: 40px; z-index: var(--z-fab-action-2);
  width: 30px; height: 30px; border-radius: 50%;
  align-items: center; justify-content: center;
  background: #D0F078; border: none; color: #111;
  cursor: pointer; font-size: 13px; line-height: 1;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  transition: transform .15s, box-shadow .15s;
}
#fab-toggle:hover { transform: scale(1.12); box-shadow: 0 6px 16px rgba(0,0,0,.4); }

/* Estado recolhido: desliza os FABs de IA e notas para baixo e os oculta. */
body.fabs-collapsed #ai-fab,
body.fabs-collapsed #notes-fab {
  transform: translateY(160px);
  opacity: 0;
  pointer-events: none;
}
/* Ao recolher, a seta DESCE bem (para perto do rodapé, onde os botões ficavam),
   reforçando a sensação de "ocultar". Volta ao topo do FAB ao reexibir. */
body.fabs-collapsed #fab-toggle { transform: translateY(120px); }
body.fabs-collapsed #fab-toggle:hover { transform: translateY(120px) scale(1.12); }

@media (max-width: 640px) {
  /* Alinha os três (notas, IA e a seta) na mesma coluna à direita — a seta fica
     levemente à esquerda e centralizada sobre os FABs. */
  #notes-fab { right: 16px; }
  #ai-fab    { right: 16px; }
  #fab-toggle { bottom: 144px; right: 27px; }
}

/* Modal do assistente (reaproveita .sp-modal) */
.ai-modal { max-width: 640px; height: min(80vh, 720px); }
.ai-messages {
  flex: 1; overflow-y: auto; padding: 16px 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.ai-empty { color: var(--text-muted); font-size: 13px; text-align: center; margin: auto; padding: 24px; }

.ai-msg { display: flex; }
.ai-msg-user { justify-content: flex-end; }
.ai-msg-bot  { justify-content: flex-start; }
.ai-bubble {
  max-width: 86%; padding: 10px 14px; border-radius: 14px;
  font-size: 13.5px; line-height: 1.5; word-wrap: break-word; overflow-wrap: anywhere;
}
.ai-msg-user .ai-bubble {
  background: var(--blue, var(--azul)); color: #fff; border-bottom-right-radius: 4px;
  white-space: pre-wrap;
}
.ai-msg-bot .ai-bubble {
  background: var(--bg-subcard); color: var(--text);
  border: 1px solid var(--border); border-bottom-left-radius: 4px;
}
.ai-bubble p  { margin: 0 0 8px; }
.ai-bubble p:last-child { margin-bottom: 0; }
.ai-bubble ul { margin: 4px 0 8px; padding-left: 20px; }
.ai-bubble li { margin: 2px 0; }
.ai-bubble .ai-h { font-weight: 700; margin: 8px 0 4px; color: var(--text); }
.ai-bubble code {
  background: rgba(127,127,127,.18); padding: 1px 5px; border-radius: 5px;
  font-size: 12px;
}

/* Indicador "digitando" */
.ai-typing { display: inline-flex; gap: 4px; align-items: center; }
.ai-typing span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted);
  animation: aiBlink 1.2s infinite ease-in-out;
}
.ai-typing span:nth-child(2) { animation-delay: .2s; }
.ai-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes aiBlink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }

/* Indicador "pensando/buscando" (agente com ferramentas — leva alguns segundos) */
.ai-thinking { display: inline-flex; align-items: center; gap: 9px; }
.ai-thinking .ai-spinner {
  width: 15px; height: 15px; flex-shrink: 0; border-radius: 50%;
  border: 2px solid rgba(127,127,127,.25);
  border-top-color: var(--blue, var(--azul));
  animation: aiSpin .7s linear infinite;
}
@keyframes aiSpin { to { transform: rotate(360deg); } }
/* Texto com brilho que "anda" da esquerda p/ direita, reforçando o movimento */
.ai-thinking-label {
  font-size: 13px; font-weight: 500; white-space: nowrap;
  background: linear-gradient(90deg,
    var(--text-muted) 0%, var(--text-muted) 35%,
    var(--text) 50%,
    var(--text-muted) 65%, var(--text-muted) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: aiShimmer 1.5s linear infinite;
}
@keyframes aiShimmer { from { background-position: 130% 0; } to { background-position: -130% 0; } }
.ai-thinking .ai-typing { margin-left: 2px; }
@media (prefers-reduced-motion: reduce) {
  .ai-thinking .ai-spinner { animation-duration: 1.6s; }
  .ai-thinking-label { animation: none; -webkit-text-fill-color: var(--text-sec); color: var(--text-sec); }
}

/* Barra de entrada */
.ai-input-bar {
  display: flex; gap: 8px; align-items: flex-end;
  padding: 12px 20px; border-top: 1px solid var(--border);
}
.ai-input {
  flex: 1; resize: none; max-height: 120px;
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-input, var(--bg-subcard)); color: var(--text);
  font-size: 13.5px; font-family: inherit; line-height: 1.4;
}
.ai-input:focus { outline: none; border-color: var(--blue, var(--azul)); }
.ai-send-btn { flex-shrink: 0; background: var(--blue); color: #000000; border-color: var(--blue); }
.ai-send-btn:hover { background: #c3e85f; border-color: #c3e85f; color: #000000; }
.ai-modal-foot {
  margin: 0; padding: 8px 20px 14px; font-size: 11px; color: var(--text-muted);
}
.ai-model-tag { opacity: .8; }

@media (max-width: 640px) {
  .ai-modal { height: 92vh; max-width: 100%; }
  #ai-fab { bottom: 84px; right: 16px; }
}

/* Barra de exportação de relatório no modal de IA */
.ai-export-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 20px; border-top: 1px solid var(--border);
  background: var(--bg-subcard);
}
.ai-export-lbl { font-size: 12px; color: var(--text-muted); font-weight: 600; margin-right: 2px; }

/* Indicador de escopo no modal de IA */
.ai-scope-hint {
  padding: 8px 20px; font-size: 12px; color: var(--text-sec);
  background: rgba(var(--acento-rgb), .26); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 6px;
}
.ai-scope-hint strong { color: var(--text); }
.ai-scope-icon { width: 16px; height: 16px; object-fit: contain; vertical-align: middle; }

/* Ícone do título do modal de IA */
.ai-title-icon { width: 22px; height: 22px; object-fit: contain; margin-right: 8px; vertical-align: middle; }
#ai-modal-title { display: flex; align-items: center; }

/* Carrossel de perguntas prontas (chips roláveis) */
.ai-suggestions {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-top: 1px solid var(--border);
  background: rgba(var(--acento-rgb), .26);
  overflow-x: auto; overflow-y: hidden; white-space: nowrap;
  scrollbar-width: thin;
}
.ai-suggestions::-webkit-scrollbar { height: 6px; }
.ai-suggestions::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.ai-sugg-lbl {
  flex: 0 0 auto; position: sticky; left: 0; display: inline-flex; align-items: center;
}
.ai-sugg-icon { width: 18px; height: 18px; object-fit: contain; display: block; }
.ai-chip {
  flex: 0 0 auto; max-width: 260px;
  padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-input, var(--bg-card)); color: var(--text-sec);
  font-size: 12.5px; line-height: 1.2; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis;
  transition: border-color .15s, color .15s, background .15s;
}
.ai-chip:hover {
  border-color: var(--blue); color: var(--text);
  background: color-mix(in srgb, var(--blue) 10%, transparent);
}
.ai-chip:active { transform: translateY(1px); }

/* O chip de auditoria não é uma pergunta pronta: é a ação principal do chat de
   uma loja, então vem destacado e antes das demais. */
.ai-chip-audit {
  border-color: var(--blue); color: var(--blue);
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  font-weight: 600; max-width: none;
}
.ai-chip-audit:hover {
  background: var(--blue); color: #fff; border-color: var(--blue);
}

/* ============================================================ */
/* Painéis (Gerente de Contas / Cliente / Reunião)              */
/* ============================================================ */
.panel-filter-bar {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end;
  margin-bottom: 20px;
}
.panel-filter-bar .filter-group { min-width: 220px; }
/* minmax(0, 1fr) e min-width: 0: com "1fr" puro a coluna cresce até caber o
   conteúdo mais largo (as tabelas de estoque e de mais vendidos), e a grade
   inteira passava da largura da página. Assim a tabela rola dentro do card. */
.panel-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.panel-grid > * { min-width: 0; }
@media (min-width: 1000px) {
  .panel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* KPIs, Ata e Parceiros ocupam a linha inteira */
  #pg-kpis-wrap, #pg-ata-wrap, #pc-kpis-wrap, #pc-ata-wrap, #pr-kpis-wrap, #pr-ata-wrap,
  #pc-partners-wrap, #pc-rev-wrap, #pc-service-wrap, #pc-goals-wrap { grid-column: 1 / -1; }
}

/* Gráfico do Painel do Cliente: alternar comparação (período anterior / ano anterior) */
.pc-rev-cmp { display: flex; gap: 6px; flex-wrap: wrap; }

/* Metas × realizado (12 meses) — barras verticais com a meta como marca */
.pc-gh { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end; }
.pc-gh-col { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; outline: none; }
.pc-gh-area { position: relative; width: 100%; height: 140px; display: flex; align-items: flex-end; justify-content: center;
  border-bottom: 1px solid var(--border); }
.pc-gh-bar { display: block; width: 70%; max-width: 38px; min-height: 2px; border-radius: 4px 4px 0 0;
  background: var(--text-faded); opacity: .55; }
.pc-gh-col.is-ok .pc-gh-bar       { background: var(--green-strong); opacity: 1; }
.pc-gh-col.is-bad .pc-gh-bar      { background: var(--danger); opacity: .85; }
.pc-gh-col.is-parcial .pc-gh-bar  { background: var(--azul); opacity: .8; }
.pc-gh-meta { position: absolute; left: 8%; right: 8%; height: 0; border-top: 2px dashed var(--text); opacity: .7; }
.pc-gh-pct { font-size: 11px; font-weight: 700; color: var(--text-sec); }
.pc-gh-col.is-ok .pc-gh-pct { color: var(--green-strong); }
.pc-gh-col.is-bad .pc-gh-pct { color: var(--danger); }
.pc-gh-mes { font-size: 11px; color: var(--text-muted); }
.pc-rev-legend i.pc-gh-leg-ok   { border-top-color: var(--green-strong); }
.pc-rev-legend i.pc-gh-leg-bad  { border-top-color: var(--danger); }
.pc-rev-legend i.pc-gh-leg-meta { border-top: 2px dashed var(--text); }
@media (max-width: 600px) {
  .pc-gh { gap: 2px; }
  .pc-gh-area { height: 100px; }
  .pc-gh-pct { font-size: 9px; }
}

.pc-kpi-filtro { font-size: 12px; color: var(--text-sec); margin: 0 0 10px; }
.panel-kpi-yoy { font-size: 11px; color: var(--text-sec); margin-top: 2px; }
.panel-kpi-yoy .panel-delta { font-size: 11px; }

/* Painel do Cliente — estoque em risco / top produtos / atendimento */
.pc-table-scroll { overflow-x: auto; }
.pc-block-resumo { font-size: 12px; color: var(--text-sec); margin: 0 0 10px; }
.pc-block-table td { vertical-align: middle; }
.pc-item { display: flex; align-items: center; gap: 10px; min-width: 200px; }
.pc-item-thumb { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 6px; object-fit: cover;
  background: var(--bg-subcard); border: 1px solid var(--border); }
.pc-item-thumb--vazia { display: inline-block; }
.pc-item-txt { display: flex; flex-direction: column; min-width: 0; }
.pc-item-title { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pc-item-sub { font-size: 11px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; }
.pc-novo { font-size: 11px; font-weight: 700; color: var(--green-strong); }
.pc-svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.pc-svc-card { background: var(--bg-subcard); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.pc-svc-head { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text); font-size: 14px; }
.pc-svc-ped { margin-left: auto; font-size: 11px; font-weight: 400; color: var(--text-muted); }
.pc-svc-ind { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; align-items: baseline; }
.pc-svc-label { font-size: 12px; color: var(--text-sec); }
.pc-svc-val { font-size: 16px; font-weight: 700; color: var(--text); text-align: right; }
.pc-svc-extra { grid-column: 1 / -1; font-size: 11px; color: var(--text-muted); }
.pc-svc-na { font-size: 11px; font-weight: 400; color: var(--text-muted); }
.pc-svc-ind.is-bad .pc-svc-val { color: var(--danger); }

/* Painel do Cliente — gráfico de faturamento por período */
.pc-rev-head { flex-wrap: wrap; }
.pc-rev-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pc-rev-chans { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-rev-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 12px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--bg-subcard); color: var(--text-sec);
  cursor: pointer; opacity: .55; transition: opacity .15s ease, border-color .15s ease; }
.pc-rev-chip.is-on { opacity: 1; border-color: var(--azul); color: var(--text); }
.pc-rev-chip:hover { opacity: 1; }
.pc-rev-meta { font-size: 12px; color: var(--text-sec); margin-left: 8px; }
.pc-rev-meta.is-ok strong { color: var(--green-strong); }
.pc-rev-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; font-size: 11px; color: var(--text-sec); }
.pc-rev-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pc-rev-legend i { display: inline-block; width: 18px; height: 0; border-top: 2.5px solid var(--azul); }
.pc-rev-legend i.pc-rev-leg-prev { border-top: 2.5px dashed var(--serie-anterior); }

/* Meta dentro do KPI card (barra de progresso + texto) */
.panel-kpi-goal { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.panel-goal-bar { height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; }
.panel-goal-bar span { display: block; height: 100%; background: var(--azul); border-radius: 3px; }
.panel-kpi-goal.is-ok .panel-goal-bar span { background: var(--green-strong); }
.panel-kpi-goal.is-bad .panel-goal-bar span { background: var(--danger); }
.panel-goal-txt { font-size: 11px; color: var(--text-sec); }
.panel-kpi-goal.is-bad .panel-goal-txt { color: var(--danger); }
.panel-section {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px;
}
.panel-section-title {
  font-size: 14px; font-weight: 700; color: var(--text);
  margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
/* Cabeçalho de seção com ação à direita (ex.: Parceiros). A borda inferior passa a
   ser do cabeçalho inteiro, senão ela cortaria só o texto do título. */
.panel-section-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.panel-section-head .panel-section-title { margin: 0; padding: 0; border-bottom: none; }
.panel-hint { color: var(--text-muted); font-size: 12px; margin-top: 10px; }
.panel-actions-row { display: flex; flex-wrap: wrap; gap: 10px; }
.panel-partners { min-height: 60px; display: flex; align-items: center; justify-content: center; }
/* O container é flex e centraliza; sem isto a grade encolhe para a largura do conteúdo. */
.panel-partners > .partner-grid { width: 100%; }

/* KPI cards */
.panel-kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}
.panel-kpi {
  background: var(--bg-subcard); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px;
}
.panel-kpi-label { font-size: 12px; color: var(--text-sec); margin-bottom: 6px; }
.panel-kpi-val   { font-size: 20px; font-weight: 700; color: var(--text); line-height: 1.2; }
.panel-kpi-sub   { margin-top: 4px; font-size: 11px; color: var(--text-sec); line-height: 1.35; }
/* Valor em uma linha só: "R$ 47.350,54" quebrado em dois lia como dois números.
   Sem quebra, um valor na casa do milhão ("R$ 1.263.048,42") passava da borda do
   card. A fonte acompanha a largura do card (container query) entre 14px e 20px, só nos valores longos (is-long);
   as reticências só aparecem se nem 14px couber. */
.panel-kpi       { min-width: 0; container-type: inline-size; }
.panel-kpi-val   { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-kpi-val.is-long { font-size: clamp(14px, 10.5cqi, 20px); }
.panel-kpi-label, .panel-kpi-sub { overflow-wrap: anywhere; }
.panel-kpi.is-alert { border-color: var(--danger); }
.panel-kpi.is-alert .panel-kpi-val { color: var(--danger); }
.panel-kpi.is-warn  { border-color: var(--warning); }
.panel-delta { font-size: 12px; font-weight: 700; }
.panel-delta.up   { color: var(--green-strong); }
.panel-delta.down { color: var(--red); }

/* Tabelas dos painéis */
.panel-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.panel-table th, .panel-table td {
  padding: 9px 10px; border-bottom: 1px solid var(--border); text-align: left;
}
.panel-table th { color: var(--text-sec); font-weight: 600; white-space: nowrap; }
.panel-table td.num, .panel-table th.num { text-align: right; white-space: nowrap; }
.panel-table tbody tr:hover { background: var(--bg-subcard); }

/* Tabela de KPIs do Painel do Gerente: linha do cliente + sub-linhas por
   marketplace. A sub-linha é visualmente subordinada (fundo e fonte menores)
   para não competir com o total do cliente, que é o número que se lê primeiro. */
/* A tabela de KPIs tem 11 colunas e precisa caber SEM barra de rolagem: o
   respiro cai de 9/10px para 6/5px, a fonte encolhe meio ponto e os cabeçalhos
   vêm abreviados (o nome inteiro fica no balão do data-tip). */
.panel-table--kpi { font-size: 12.5px; }
.panel-table--kpi th,
.panel-table--kpi td { padding: 6px 5px; }
.panel-table--kpi td:first-child,
.panel-table--kpi td:nth-child(2) { white-space: nowrap; }
/* Pontilhado discreto avisando que o título abreviado tem explicação. */
.panel-th-abbr {
  cursor: help; border-bottom: 1px dotted var(--text-muted);
}
.panel-th-abbr:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 3px; }
/* Logo do marketplace no lugar do nome — "Mercado Livre, Shopee, Magalu" por
   extenso era a célula mais larga da tabela. */
.panel-chan-logo { width: 15px; height: 15px; vertical-align: -3px; }
.panel-chan-logo + .panel-chan-logo { margin-left: 4px; }
/* "Mercado Líder Platinum" não cabe: corta com reticências e o nome inteiro
   aparece no balão. */
.panel-rep {
  display: inline-block; max-width: 130px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; cursor: help;
}
.panel-row-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-right: 6px; vertical-align: -3px;
  border: none; border-radius: 4px; background: transparent;
  color: var(--text-muted); font-size: 11px; line-height: 1; cursor: pointer;
}
.panel-row-toggle:hover  { background: var(--bg-subcard); color: var(--text); }
.panel-row-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.panel-row-toggle.is-empty { cursor: default; pointer-events: none; }
.panel-table--kpi .panel-row-client.is-open > td { font-weight: 600; }
.panel-table--kpi .panel-row-chan > td {
  background: var(--bg-subcard); color: var(--text-sec); font-size: 12.5px;
}
.panel-table--kpi .panel-row-indent { width: 24px; }
.panel-val-pos { color: var(--green-strong); }
.panel-val-neg { color: var(--red); }

/* Datas do seletor de período dos painéis — o mesmo desenho dos selects ao lado. */
.panel-filter-bar .pg-filter-date { min-width: 160px; }
.panel-filter-bar input[type="date"] {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px 12px; font-size: 13px;
  color: var(--text); background: var(--bg-subcard);
}
.panel-filter-bar input[type="date"]:focus { outline: none; border-color: var(--blue); }

/* Lista de status do Perfex */
.panel-status-list { list-style: none; margin: 12px 0 0; padding: 0; }
.panel-status-list li {
  display: flex; justify-content: space-between; padding: 6px 0;
  border-bottom: 1px dashed var(--border); font-size: 13px; color: var(--text-sec);
}
.panel-status-list li strong { color: var(--text); }

/* Notificações */
.panel-notif-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.panel-notif-list li {
  background: var(--bg-subcard); border: 1px solid var(--border);
  border-left-width: 3px; border-radius: 8px; padding: 8px 12px;
}
.panel-notif-list li.sev-high     { border-left-color: var(--danger); }
.panel-notif-list li.sev-warning  { border-left-color: var(--warning); }
.panel-notif-list li.sev-info     { border-left-color: var(--primary); }
.panel-notif-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.panel-notif-store { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.panel-notif-msg { color: var(--text-sec); font-size: 12px; margin-top: 3px; }

/* Ata das reuniões */
.ata-form { margin-bottom: 16px; }
.ata-form-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.ata-in {
  flex: 1 1 160px; padding: 8px 10px; border: 1.5px solid var(--border);
  border-radius: 8px; background: var(--bg-subcard); color: var(--text); font-size: 13px;
}
.ata-form-row textarea.ata-in { flex: 1 1 100%; resize: vertical; }
.ata-cols { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 800px) { .ata-cols { grid-template-columns: repeat(3, 1fr); } }
.ata-col h4 { font-size: 13px; color: var(--text-sec); margin: 0 0 8px; display: flex; gap: 6px; align-items: center; }
.ata-count { background: var(--bg-subcard); border-radius: 10px; padding: 1px 8px; font-size: 11px; color: var(--text); }
.ata-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ata-list li {
  background: var(--bg-subcard); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px;
}
.ata-list li.ata-empty { text-align: center; color: var(--text-muted); border-style: dashed; }
.ata-item-desc { font-size: 13px; color: var(--text); margin-bottom: 5px; }
.ata-item-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11px; color: var(--text-muted); align-items: center; }
.ata-status { padding: 1px 8px; border-radius: 10px; font-weight: 600; }
.ata-status.s-aberta       { background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--primary); }
.ata-status.s-em_andamento { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); }
.ata-status.s-concluida    { background: color-mix(in srgb, var(--green-strong) 18%, transparent); color: var(--green-strong); }
.ata-status.s-cancelada    { background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--red); }
.ata-status.s-atrasada     { background: color-mix(in srgb, var(--danger) 22%, transparent); color: var(--danger); }
.ata-cli-titulo { font-size: 13px; font-weight: 700; color: var(--text); margin: 14px 0 6px; display: flex; align-items: center; gap: 8px; }
.ata-cli-titulo:first-of-type { margin-top: 4px; }

/* Painéis — filtro/paginação de notificações e rodapé da tabela */
.panel-notif-filter { margin-bottom: 10px; }
.panel-notif-filter .panel-notif-type { max-width: 320px; }
.panel-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; }
.panel-pager-info { font-size: 12px; color: var(--text-sec); }
.panel-table tfoot td { border-top: 2px solid var(--border); font-weight: 700; color: var(--text); }
.panel-table tfoot .panel-foot-median td { font-weight: 600; color: var(--text-sec); }
.panel-notif-list li.sev-warn { border-left-color: var(--warning); }
.panel-notif-list li.sev-danger, .panel-notif-list li.sev-bad { border-left-color: var(--danger); }
.panel-notif-list li.sev-ok { border-left-color: var(--green-strong); }

/* Painéis — transcrições, saída da IA e parceiros (Parte 2) */
.panel-transcripts { margin-top: 12px; }
.panel-transcript-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.panel-transcript-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--bg-subcard); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; }
.panel-transcript-list .pt-name { font-size: 13px; color: var(--text); flex: 1 1 200px; }
.panel-transcript-list .pt-meta { font-size: 11px; color: var(--text-muted); }
.panel-ai-output { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.panel-ai-body { font-size: 14px; line-height: 1.6; color: var(--text); }
.panel-ai-body h1, .panel-ai-body h2, .panel-ai-body h3 { font-size: 15px; margin: 14px 0 6px; color: var(--text); }
.panel-ai-body ul { margin: 6px 0 6px 18px; }
.panel-ai-body table { width: 100%; border-collapse: collapse; margin: 8px 0; }
.panel-ai-body th, .panel-ai-body td { border: 1px solid var(--border); padding: 6px 8px; font-size: 13px; }

/* Parceiros */
/* Cards horizontais: logo 120x120 à esquerda, texto e ações à direita. */
.partner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.partner-banner { background: var(--bg-subcard); border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; display: flex; flex-direction: row; align-items: stretch; gap: 12px; padding: 12px; }
/* Logo do parceiro fixa em 120x120, independente da proporção do arquivo. */
.partner-img { width: 120px; height: 120px; flex: 0 0 120px; object-fit: cover; display: block; border-radius: 8px; }
.partner-noimg { width: 120px; height: 120px; flex: 0 0 120px; display: flex; align-items: center; justify-content: center;
  text-align: center; color: var(--text-sec); font-size: 13px; border: 1px dashed var(--border); border-radius: 8px; box-sizing: border-box; padding: 8px; }
.partner-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.partner-title { font-size: 17px; color: var(--blue); font-weight: 700; line-height: 1.25; }
.partner-benefits { list-style: none; margin: 0; padding: 0; width: 100%; box-sizing: border-box; }
.partner-benefits li { font-size: 12px; color: var(--text-sec); padding: 2px 0 2px 14px; position: relative; text-align: left; }
.partner-benefits li::before { content: '•'; position: absolute; left: 2px; top: 2px; color: var(--text-muted); }

/* Rodapé do card (cupom + botão): empurrado para a base, para que o botão fique na
   mesma altura em todos os cards da linha, tenham benefícios ou não. */
.partner-foot { margin-top: auto; width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Cupom do parceiro (Painel do Cliente) */
.partner-coupon { display: flex; align-items: center; justify-content: center; gap: 6px;
  flex: 1 1 auto; padding: 5px 10px; box-sizing: border-box;
  background: var(--bg-card); border: 1px dashed var(--border); border-radius: 8px; }
.partner-coupon-icon { width: 14px; height: 14px; object-fit: contain; flex: 0 0 14px; }
.partner-coupon-code { font-size: 12px; font-weight: 700; letter-spacing: .5px; color: var(--text);
  text-transform: uppercase; word-break: break-all; }

/* Botão "Link" do parceiro — mesmo formato dos .btn, na cor da marca do card. */
.partner-link-btn { justify-content: center; text-decoration: none;
  flex: 0 0 auto; min-width: 88px; box-sizing: border-box;
  background: #06DBF3; color: #000000; box-shadow: 0 2px 8px rgba(6,219,243,.35); }
.partner-link-btn:hover { background: #05c4d9; box-shadow: 0 4px 14px rgba(6,219,243,.5); }

/* Editor de parceiros (admin) */
.partner-editor-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: var(--z-modal);
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; }
.partner-editor { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; width: 100%; max-width: 640px; }
.partner-editor h3 { margin: 0 0 14px; font-size: 16px; color: var(--text); }
.partner-edit-row { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.partner-edit-thumb { width: 84px; height: 60px; flex: 0 0 84px; background: var(--bg-subcard);
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.partner-edit-thumb img { width: 100%; height: 100%; object-fit: cover; }
.partner-edit-thumb span { font-size: 10px; color: var(--text-muted); text-align: center; }
.partner-edit-fields { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.partner-edit-active { font-size: 12px; color: var(--text-sec); display: flex; align-items: center; gap: 6px; }
.partner-benefits-edit { display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  padding: 8px 10px; border: 1px dashed var(--border); border-radius: 8px; }
.partner-benefits-label { font-size: 12px; color: var(--text-sec); display: flex; align-items: center; gap: 6px; }
.partner-benefit-row { display: flex; gap: 6px; width: 100%; }
.partner-benefit-row .ata-in { flex: 1; }
.partner-coupon-edit { display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  padding: 8px 10px; border: 1px dashed var(--border); border-radius: 8px; }
.partner-coupon-edit .ata-in { width: 100%; box-sizing: border-box; }

/* Blocos dos parceiros já cadastrados (Configurações) — editar aparece no hover */
.partner-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.partner-admin-card { position: relative; display: flex; align-items: center; gap: 10px;
  background: var(--bg-subcard); border: 1px solid var(--border); border-radius: 10px; padding: 10px;
  transition: border-color .15s ease; }
.partner-admin-card:hover { border-color: var(--text-muted); }
.partner-admin-thumb { width: 52px; height: 52px; flex: 0 0 52px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; }
.partner-admin-thumb img { width: 100%; height: 100%; object-fit: cover; }
.partner-admin-thumb span { font-size: 9px; color: var(--text-muted); text-align: center; padding: 2px; }
.partner-admin-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.partner-admin-name { font-size: 13px; color: var(--text); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.partner-admin-off { font-size: 11px; color: var(--text-muted); }
.partner-admin-actions { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--bg-card) 88%, transparent); border-radius: 10px;
  opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.partner-admin-card:hover .partner-admin-actions,
.partner-admin-card:focus-within .partner-admin-actions { opacity: 1; pointer-events: auto; }

/* ==========================================================================
   Tarefas: cards "sem comentário" (admin), página dedicada e modal de comentários
   ========================================================================== */
.nocomment-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px; margin-bottom: 16px; }
.nocomment-card { display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--orange);
  border-radius: var(--radius); padding: 14px 16px; color: var(--text); font: inherit;
  transition: border-color .15s, transform .15s, background .15s; }
.nocomment-card:hover { border-color: var(--orange); transform: translateY(-1px); background: var(--bg-subcard); }
.nocomment-card .nc-icon { font-size: 22px; line-height: 1; flex: 0 0 auto; }
.nocomment-card .nc-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.nocomment-card .nc-count { font-size: 24px; font-weight: 700; color: var(--text); line-height: 1.1; }
.nocomment-card .nc-label { font-size: 13px; color: var(--text-sec); }
.nocomment-card .nc-go { color: var(--text-muted); font-size: 18px; flex: 0 0 auto; }

/* Botão de comentários por linha */
.tc-btn { background: var(--bg-subcard); border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer; padding: 3px 9px; font-size: 14px; line-height: 1; color: var(--text-sec);
  transition: border-color .15s, color .15s; }
.tc-btn:hover { border-color: var(--primary); color: var(--text); }
.tc-btn-count { font-size: 11px; color: var(--text-muted); font-weight: 600; }

/* Modal de comentários + resumo IA */
.tc-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: var(--z-modal);
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; }
.tc-modal { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  width: 100%; max-width: 640px; display: flex; flex-direction: column; max-height: calc(100vh - 80px); }
.tc-modal-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px;
  border-bottom: 1px solid var(--border); }
.tc-modal-head h3 { margin: 0; font-size: 16px; color: var(--text); flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-modal-x { background: none; border: none; color: var(--text-sec); font-size: 18px; cursor: pointer;
  line-height: 1; padding: 4px; }
.tc-modal-x:hover { color: var(--text); }
.tc-modal-body { padding: 16px 18px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.tc-bubble { background: var(--bg-subcard); border: 1px solid var(--border); border-radius: 12px;
  padding: 9px 12px; max-width: 88%; }
.tc-bubble-meta { font-size: 11px; color: var(--text-muted); margin-bottom: 4px;
  display: flex; gap: 8px; justify-content: space-between; }
.tc-bubble-author { font-weight: 600; color: var(--text-sec); }
.tc-bubble-content { font-size: 13px; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.tc-bubble-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tc-attach { display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  font-size: 12px; color: var(--blue-text); text-decoration: none; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 8px; padding: 3px 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-attach:hover { border-color: var(--blue); text-decoration: underline; }
.tc-empty { color: var(--text-sec); font-size: 13px; text-align: center; padding: 18px 0; }
.tc-modal-foot { padding: 14px 18px; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 10px; }
.tc-summary { background: var(--bg-subcard); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; font-size: 13px; color: var(--text); line-height: 1.5; }
.tc-summary p { margin: 0 0 8px; }
.tc-summary ul, .tc-summary ol { margin: 0 0 8px; padding-left: 20px; }

/* ==========================================================================
   Home: card pequeno de log de atualizações (novidades e correções)
   ========================================================================== */
.changelog-card { max-width: 560px; margin: 24px auto 0; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; text-align: left; }
.changelog-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--border); }
.changelog-title { font-size: 14px; font-weight: 700; color: var(--text); }
.changelog-sub { font-size: 12px; color: var(--text-sec); }
/* Sem rolagem interna fixa: as entradas deste log são parágrafos, não uma linha
   cada, e prender 4 delas numa caixa de 300px devolvia a rolagem que a paginação
   veio resolver. Cada página se dimensiona; o teto em vh é só para telas baixas,
   e o min-height evita o card pular de tamanho entre páginas curtas e longas. */
.changelog-list { list-style: none; margin: 0; padding: 2px 0 0;
  min-height: 220px; max-height: 65vh; overflow-y: auto; }
.changelog-list li { display: grid; grid-template-columns: auto auto auto 1fr; align-items: start; gap: 8px;
  padding: 8px 0; border-bottom: 1px dashed var(--border); }
.changelog-list li:last-child { border-bottom: none; }

/* Estado enquanto a lista e buscada. O min-height da .changelog-list ja reserva
   a altura, entao a home nao pula quando as entradas chegam. */
.changelog-list li.changelog-carregando {
  display: flex; align-items: center; gap: 6px;
  color: var(--text-muted); font-size: 12.5px; border-bottom: none;
}

/* Paginação do log de atualizações */
.changelog-pager { display: flex; align-items: center; justify-content: center; gap: 10px;
  padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--border); }
.changelog-nav { background: transparent; border: 1px solid var(--border); color: var(--text-sec);
  border-radius: 6px; width: 26px; height: 26px; line-height: 1; font-size: 15px;
  cursor: pointer; padding: 0; }
.changelog-nav:hover:not(:disabled) { color: var(--text); border-color: var(--text-muted); }
.changelog-nav:disabled { opacity: .35; cursor: default; }
.changelog-pos { font-size: 11.5px; color: var(--text-muted); min-width: 62px; text-align: center; }
.changelog-ver { font-size: 11px; font-weight: 700; color: var(--blue-text);
  font-family: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
  white-space: nowrap; padding-top: 1px; }
.changelog-date { font-size: 11px; color: var(--text-muted); white-space: nowrap; padding-top: 1px; }
.changelog-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  border-radius: 6px; padding: 2px 7px; white-space: nowrap; height: fit-content; }
.changelog-tag.tag-new     { background: rgba(74,222,128,.16);  color: var(--green); }
.changelog-tag.tag-fix     { background: rgba(248,113,113,.16); color: var(--red); }
.changelog-tag.tag-improve { background: rgba(var(--azul-rgb),.16);  color: var(--azul); }
.changelog-text { font-size: 12.5px; color: var(--text-sec); line-height: 1.45; }
.changelog-text strong { color: var(--text); font-weight: 600; }
@media (max-width: 560px) {
  .changelog-list li { grid-template-columns: 1fr; gap: 3px; }
}

/* ==========================================================================
   Ordenação das lojas (arrastar e soltar no seletor de lojas ML/Shopee)
   ========================================================================== */
.store-drag { flex: 0 0 auto; margin-right: 8px; cursor: grab; user-select: none;
  color: var(--text-muted); font-size: 15px; line-height: 1; padding: 2px 3px;
  border-radius: 4px; transition: color .12s, background .12s; }
.store-drag:hover { color: var(--text); background: var(--bg-subcard); }
.store-drag:active { cursor: grabbing; }
.store-table tbody tr.dragging { opacity: .45; }
/* Indicador de onde a loja será solta */
.store-table tbody tr.drag-over-top    { box-shadow: inset 0 2px 0 0 var(--blue); }
.store-table tbody tr.drag-over-bottom { box-shadow: inset 0 -2px 0 0 var(--blue); }

/* ============================================================
   BLING ERP
   TODAS as regras são escopadas em .bling-page / #bling-admin-page.
   Nada de seletor solto: uma regra genérica daqui vazaria para as
   demais páginas (foi o que aconteceu com o .page-section-header da
   página Desempenho, que passou a valer no painel inteiro).
   ============================================================ */

.bling-page .bling-filters,
#bling-admin-page .bling-filters {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
    margin: 12px 0 14px;
}

.bling-page .bling-warn,
#bling-admin-page .bling-warn {
    padding: 11px 14px; margin: 0 0 14px;
    background: rgba(245,158,11,.10);
    border: 1px solid rgba(245,158,11,.35);
    border-radius: 10px;
    color: var(--text); font-size: 13.5px; line-height: 1.5;
}

.bling-page .pf-help,
#bling-admin-page .pf-help {
    color: var(--text-muted); font-size: 12.5px; line-height: 1.5; margin: 0;
}

/* Cartões de resumo (saldo por depósito, totais de pedidos) */
.bling-page .bling-dep-row {
    display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px;
}
.bling-page .bling-dep-card {
    flex: 1 1 150px; min-width: 140px;
    padding: 12px 14px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.bling-page .bling-dep-name  { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.bling-page .bling-dep-units { font-size: 20px; font-weight: 700; color: var(--text); margin-top: 2px; }

/* Saldo zerado — o dado que mais importa nesta tela */
.bling-page .bling-zero { color: var(--danger, #f87171); font-weight: 700; }

.bling-page .top-prod-table td.num,
.bling-page .top-prod-table th.num { text-align: right; white-space: nowrap; }

.bling-page .bling-pager {
    display: flex; gap: 12px; align-items: center; justify-content: center;
    margin-top: 14px; color: var(--text-sec); font-size: 13px;
}

.bling-page .bling-items-row > td { background: var(--bg2); padding: 12px 14px; }
.bling-page .bling-order-detail table { width: 100%; margin-top: 8px; }

.bling-page .bling-badge,
#bling-admin-page .bling-badge {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600;
    background: rgba(148,163,184,.14); color: var(--text-sec);
    border: 1px solid rgba(148,163,184,.28);
}
.bling-page .bling-badge-ok,
#bling-admin-page .bling-badge-ok   { background: rgba(var(--green-rgb),.12);  color: var(--green, var(--green));  border-color: rgba(var(--green-rgb),.3); }
#bling-admin-page .bling-badge-erro { background: rgba(248,113,113,.12); color: var(--danger, #f87171); border-color: rgba(248,113,113,.3); }

/* ---- Kits: a linha do produto composto abre a composição ---- */
.bling-page .bling-badge-kit {
    background: rgba(129,140,248,.14); color: var(--azul); border-color: rgba(129,140,248,.3);
}
.bling-page .bling-kit-row { cursor: pointer; }
.bling-page .bling-kit-row:hover > td { background: var(--bg2); }
.bling-page .bling-kit-toggle { color: var(--text-muted); font-size: 11px; }

.bling-page .bling-comp-row > td { background: var(--bg2); padding: 10px 14px; }
.bling-page .bling-comp-head {
    font-size: 12px; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px;
}
.bling-page .bling-comp-table { width: 100%; }
.bling-page .bling-comp-table tfoot td { border-top: 1px solid var(--border); }

.bling-page .bling-check,
#bling-admin-page .bling-check {
    display: flex; align-items: center; gap: 7px;
    color: var(--text-sec); font-size: 13.5px; cursor: pointer;
}
#bling-admin-page .bling-check-off { opacity: .55; cursor: not-allowed; }

/* ---- Tela de administração ---- */
#bling-admin-page .bling-invite {
    display: flex; gap: 16px; flex-wrap: wrap; align-items: center; justify-content: space-between;
    padding: 16px 18px; margin-bottom: 16px;
    background: var(--bg2); border: 1px solid var(--border); border-radius: 14px;
}
#bling-admin-page .bling-invite-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
#bling-admin-page .bling-invite-link    { margin-bottom: 16px; }
#bling-admin-page .bling-invite-link input { width: 100%; margin-top: 6px; }

#bling-admin-page .bling-account-card {
    padding: 16px 18px; margin-bottom: 14px;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
}
#bling-admin-page .bling-account-head {
    display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
    margin-bottom: 12px;
}
#bling-admin-page .bling-account-actions { display: flex; gap: 8px; flex-wrap: wrap; }
#bling-admin-page .bling-label {
    display: block; margin: 12px 0 5px;
    font-size: 12.5px; font-weight: 600; color: var(--text-sec);
}
#bling-admin-page .bling-stores {
    display: flex; flex-direction: column; gap: 7px;
    margin-bottom: 12px;
}

@media (max-width: 640px) {
    .bling-page .bling-dep-card { flex: 1 1 100%; }
    #bling-admin-page .bling-invite { flex-direction: column; align-items: stretch; }
}

/* Remover conta do Bling: ação destrutiva e irreversível, então o botão não
   pode parecer igual a "Desativar" ao lado dele. */
#bling-admin-page .bling-btn-danger {
  color: var(--danger, #f87171);
  border-color: rgba(248,113,113,.45);
}
#bling-admin-page .bling-btn-danger:hover {
  background: rgba(248,113,113,.1);
  border-color: rgba(248,113,113,.7);
}


/* ============================================================
   FAIXA 1 DO DIAGNOSTICO DE UI/UX
   Foco de teclado, alvo de toque e impressao.
   Bloco no fim do arquivo de proposito: sao regras transversais que precisam
   vencer as regras por componente escritas acima.
   ============================================================ */

/* ------------------------------------------------------------
   1. Foco visivel de teclado
   Antes existiam 7 declaracoes de :focus-visible em 1.961 seletores, e todas
   nos campos de formulario. Botoes, itens da sidebar, abas, links e linhas
   clicaveis nao davam retorno nenhum de foco: navegar por teclado era navegar
   as cegas. O :focus-visible so aparece na navegacao por teclado, entao o
   clique de mouse continua sem contorno.
   ------------------------------------------------------------ */
:where(a, button, input, select, textarea, summary, [tabindex], [role="button"],
       [role="tab"], [role="menuitem"], [role="option"]):focus-visible {
  outline: 2px solid var(--blue-text);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Dentro da sidebar o contorno encosta na borda; o deslocamento negativo o traz
   para dentro do proprio item. */
.app-sidebar :where(a, button):focus-visible {
  outline-offset: -2px;
}

/* Linhas de tabela clicaveis: o outline em <tr> nao renderiza de forma
   confiavel entre navegadores, entao o foco vira um anel interno. */
tr[tabindex]:focus-visible,
tr[role="button"]:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--blue-text);
}

/* Atalho para pular a navegacao e ir direto ao conteudo. Fica invisivel ate
   receber foco pelo teclado. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: var(--z-tooltip);
  background: var(--bg-card); color: var(--text);
  padding: 10px 16px; border: 1px solid var(--blue-text); border-radius: 0 0 8px 0;
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------
   2. Alvo de toque no celular
   .btn-sm tem padding 7px e fonte 12px, o que da cerca de 28px de altura. O
   minimo recomendado para toque e 44px. Como .btn-sm e o botao predominante das
   barras de acao (a de Produtos do ML tem seis lado a lado), no celular isso
   vira uma fileira de alvos pequenos e colados.
   A densidade do desktop nao muda: isto so vale abaixo de 640px.
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  .btn,
  .btn-sm,
  .btn-icon,
  .period-btn,
  .catalog-cols-btn {
    min-height: 44px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* Espaco entre alvos vizinhos, para o dedo nao acertar o botao errado. */
  .ml-filter-actions,
  .pf-head,
  .orders-controls,
  .filter-actions,
  .perf-detail-toolbar {
    gap: 10px;
  }

  /* Campos com 16px evitam o zoom automatico do iOS ao focar. */
  input[type="text"], input[type="email"], input[type="password"],
  input[type="date"], input[type="number"], select, textarea {
    font-size: 16px !important;
  }
}

/* ------------------------------------------------------------
   3. Impressao
   O painel e escuro fixo e ja tem botoes de "Imprimir/PDF" em varias paginas
   (btn-pdf, btn-pdf-table, btn-ml-export-pdf). Sem folha de impressao, o que
   saia era fundo escuro: ilegivel e um desperdicio de tinta.
   ------------------------------------------------------------ */
@media print {
  :root {
    --bg: #fff; --bg-header: #fff; --bg-card: #fff;
    --bg-subcard: #f5f5f7; --bg-inactive: #f0f0f3;
    --border: #c9ccd6; --separator: #e2e4ea;
    --text: #14151f; --text-sec: #3d4152;
    --text-muted: #5a5f73; --text-faded: #7a7f92;
    --blue-text: #3730a3;
    --shadow: none; --shadow-sm: none;
  }

  html, body { background: #fff !important; color: #14151f !important; }

  /* Fora da folha: navegacao, acoes e tudo que nao se imprime. */
  .app-sidebar, .sidebar-overlay, .mobile-header, .toast-container,
  .notif-overlay, .chart-modal, .skip-link,
  .ml-filter-actions, .filter-actions, .report-dropdown-wrap,
  .btn, .btn-sm, .btn-icon, .chart-expand-btn, .fab, .fab-notes {
    display: none !important;
  }

  .app-main { margin: 0 !important; padding: 0 !important; width: 100% !important; }
  .app-layout { display: block !important; }

  /* Cartoes e tabelas nao podem ser cortados no meio pela quebra de pagina. */
  .ml-section-card, .card-stat, .settings-section-block, .panel-section {
    break-inside: avoid;
    border: 1px solid var(--border) !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  table { break-inside: auto; }
  tr, .changelog-card li { break-inside: avoid; }
  thead { display: table-header-group; }  /* repete o cabecalho a cada pagina */

  /* Rolagem horizontal nao existe no papel. */
  .table-wrap, .perf-table-wrap, .ml-catalog-body, [style*="overflow-x"] {
    overflow: visible !important;
  }

  /* O endereco de um link interno da SPA nao ajuda ninguem no papel. */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; color: #5a5f73; }
  a[href^="#"]::after, a[href^="/"]::after { content: none; }

  @page { margin: 12mm; }
}

/* ------------------------------------------------------------
   4. Selo de variacao contra o periodo anterior
   Fica logo abaixo do numero, antes do sparkline: le-se "valor, quanto variou,
   como veio variando" numa unica descida do olho.
   A cor NAO carrega a informacao sozinha - a seta e o texto dizem o mesmo, para
   quem nao distingue verde de vermelho.
   ------------------------------------------------------------ */
.stat-delta {
  display: inline-flex; align-items: baseline; gap: 4px;
  margin: 2px 0 0; font-size: 12px; font-weight: 600;
  line-height: 1.3; white-space: nowrap; cursor: help;
}
.stat-delta-arrow { font-size: 9px; line-height: 1; }
.stat-delta-ref {
  font-size: 10px; font-weight: 500; color: var(--text-muted);
  margin-left: 2px;
}
.stat-delta-up   { color: var(--green); }
.stat-delta-down { color: var(--red); }
.stat-delta-flat { color: var(--text-muted); font-weight: 500; }

/* Em cartao estreito o "vs. periodo anterior" quebraria o layout: some e a
   informacao fica no title, que o toque longo revela. */
@media (max-width: 520px) {
  .stat-delta-ref { display: none; }
}


/* ============================================================
   FAIXA 2 — DIALOGOS E TOASTS
   Componente unico que substitui os dialogos nativos do navegador e padroniza
   os ~20 modais proprios do sistema.
   ============================================================ */

/* ---- Toast ---------------------------------------------------------------
   Usa --z-toast, que na escala de camadas fica ACIMA dos modais: um aviso
   disparado com um dialogo aberto precisa ser visto.
   -------------------------------------------------------------------------- */
.ui-toast-container {
  position: fixed; top: 16px; right: 16px; z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: 8px;
  max-width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}
.ui-toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 3px solid var(--text-muted);
  border-radius: 10px; padding: 12px 14px;
  box-shadow: var(--shadow);
  font-size: 13px; line-height: 1.45; color: var(--text);
  animation: ui-toast-in .18s ease-out;
}
.ui-toast-msg   { flex: 1; word-break: break-word; }
.ui-toast-close {
  flex: 0 0 auto; background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 18px; line-height: 1;
  padding: 0 2px; border-radius: 4px;
}
.ui-toast-close:hover { color: var(--text); }

.ui-toast-ok    { border-left-color: var(--green); }
.ui-toast-erro  { border-left-color: var(--red); }
.ui-toast-aviso { border-left-color: var(--yellow); }
.ui-toast-info  { border-left-color: var(--blue-text); }

.ui-toast-out { animation: ui-toast-out .2s ease-in forwards; }

@keyframes ui-toast-in  { from { opacity: 0; transform: translateX(16px); } }
@keyframes ui-toast-out { to   { opacity: 0; transform: translateX(16px); } }

@media (max-width: 640px) {
  /* No celular o toast vem de baixo, longe do polegar que rola a pagina. */
  .ui-toast-container {
    top: auto; bottom: 12px; left: 12px; right: 12px; max-width: none;
  }
  @keyframes ui-toast-in  { from { opacity: 0; transform: translateY(16px); } }
  @keyframes ui-toast-out { to   { opacity: 0; transform: translateY(16px); } }
}

/* ---- Dialogo ------------------------------------------------------------- */
.ui-dialog-overlay {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(0,0,0,.62);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: ui-dialog-fade .14s ease-out;
}
.ui-dialog-out { animation: ui-dialog-fade .14s ease-in reverse forwards; }
@keyframes ui-dialog-fade { from { opacity: 0; } }

.ui-dialog {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  max-height: calc(100vh - 32px);
  display: flex; flex-direction: column;
  animation: ui-dialog-up .16s ease-out;
}
@keyframes ui-dialog-up { from { transform: translateY(8px); opacity: 0; } }

.ui-dialog-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--separator);
}
.ui-dialog-titulo {
  flex: 1; font-size: 16px; font-weight: 700; color: var(--text); margin: 0;
}
.ui-dialog-perigo .ui-dialog-titulo { color: var(--red); }

.ui-dialog-x {
  flex: 0 0 auto; background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 22px; line-height: 1;
  padding: 0 4px; border-radius: 6px;
}
.ui-dialog-x:hover { color: var(--text); background: var(--bg-subcard); }

.ui-dialog-body {
  padding: 16px 18px; overflow-y: auto; flex: 1 1 auto;
  font-size: 14px; color: var(--text-sec); line-height: 1.55;
}
.ui-dialog-msg { margin: 0; color: var(--text-sec); }

/* Lista do que sera afetado. O confirm() nativo nao dizia — dava so uma linha
   de texto e um "OK". */
.ui-dialog-itens {
  margin: 12px 0 0; padding: 10px 12px 10px 28px;
  background: var(--bg-subcard); border-radius: 8px;
  font-size: 13px; color: var(--text);
}
.ui-dialog-itens li { margin: 3px 0; }

.ui-dialog-digitar {
  display: block; margin-top: 16px;
  font-size: 13px; color: var(--text-sec);
}
.ui-dialog-digitar strong { color: var(--text); }
.ui-dialog-digitar-inp,
.ui-dialog-inp {
  width: 100%; margin-top: 8px;
  border: 1.5px solid var(--border); border-radius: 8px;
  padding: 9px 12px; font-size: 14px; font-family: inherit;
  color: var(--text); background: var(--bg-subcard);
}
.ui-dialog-digitar-inp:focus,
.ui-dialog-inp:focus {
  outline: none; border-color: var(--blue-text);
  box-shadow: 0 0 0 3px rgba(139,141,247,.16);
}

.ui-dialog-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--separator);
}

/* A acao destrutiva e visualmente distinta da segura. Antes, no confirm()
   nativo, "OK" e "Cancelar" tinham exatamente o mesmo peso. */
.ui-dialog-btn-neutro {
  background: var(--bg-subcard); color: var(--text);
  border: 1px solid var(--border);
}
.ui-dialog-btn-neutro:hover { background: var(--bg-inactive); }

.ui-dialog-btn-primario { background: var(--blue); color: var(--on-primary); }
.ui-dialog-btn-primario:hover { background: var(--blue-dark); }

.ui-dialog-btn-perigo {
  background: transparent; color: var(--red);
  border: 1px solid rgba(248,113,113,.5);
}
.ui-dialog-btn-perigo:hover { background: rgba(248,113,113,.12); border-color: var(--red); }
.ui-dialog-btn-perigo:disabled,
.ui-dialog-btn-primario:disabled { opacity: .4; cursor: not-allowed; }

@media (max-width: 640px) {
  /* Botoes empilhados e de largura cheia: alvo de toque confortavel, e a acao
     destrutiva deixa de ficar colada na de cancelar. */
  .ui-dialog-foot { flex-direction: column-reverse; }
  .ui-dialog-foot .btn { width: 100%; justify-content: center; }
}


/* ============================================================
   FAIXA 2 — HIERARQUIA DOS CARDS DE KPI
   Tres niveis de leitura no lugar de uma parede de numeros iguais.
   ============================================================ */

/* A grade vira um empilhamento de duas faixas: os tres destaques dividem a
   PRIMEIRA linha em tres colunas iguais, e os secundarios formam a segunda.
   Com uma grade unica, o auto-fit misturava os dois niveis na mesma linha
   conforme a largura — o "Faturamento Liquido" acabava ao lado dos destaques. */
.summary-cards.kpi-hierarquia {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}
.summary-cards.kpi-hierarquia .kpi-faixa {
  display: grid;
  gap: 12px;
}
.summary-cards.kpi-hierarquia .kpi-faixa-destaque {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* align-items: stretch (padrao) iguala a altura dos tres na linha, sem
     precisar de min-height: o mais alto define a faixa. */
}
.summary-cards.kpi-hierarquia .kpi-faixa-compacta {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  align-items: start;
}

/* --- Nivel 1: os tres numeros que definem o periodo --------------------- */
.card-stat--destaque {
  padding: 18px 20px;
  border-left-width: 4px;
  background: linear-gradient(180deg, var(--bg-subcard) 0%, var(--bg-card) 60%);
  /* Rodape colado embaixo: com alturas iguais, a barra de meta de cada card
     fica na mesma linha de base. */
  display: flex;
  flex-direction: column;
}
.card-stat--destaque .stat-lbl { margin-top: auto; }
.card-stat--destaque .stat-val {
  font-size: 26px;
  line-height: 1.15;
}
.card-stat--destaque .stat-lbl {
  font-size: 12px;
  letter-spacing: .04em;
}

/* --- Nivel 2: contexto, nao manchete ------------------------------------ */
.card-stat--compacto {
  padding: 12px 14px;
}
.card-stat--compacto .stat-val { font-size: 18px; line-height: 1.2; }
.card-stat--compacto .stat-lbl { font-size: 11px; }
/* Sparkline menor no secundario: ali ele e ornamento, nao leitura. */
.card-stat--compacto svg { max-height: 22px; }

/* O selo de variacao so faz sentido no nivel 1. Nos secundarios ele competiria
   com o proprio numero, que ja e pequeno. */
.card-stat--compacto .stat-delta { display: none; }

/* Sem borda colorida no nivel 2. As faixas por posicao (nth-child) vinham de
   quando todos os cards tinham o mesmo peso e a cor era a unica forma de
   distingui-los. Com a hierarquia, a cor no secundario passou a competir com o
   destaque e a sugerir uma categoria que nao existe — as cores eram por POSICAO,
   nao por significado. O !important e necessario porque as regras de origem sao
   mais especificas (#id .classe:nth-child). */
.card-stat--compacto {
  border-left-color: var(--border) !important;

  /* Altura igual em todos. O conteudo varia (uns tem sparkline, outros barra de
     meta, outros rotulo de duas linhas) e as alturas iam de 70 a 111px, o que
     deixava a grade irregular. O min-height cobre o caso mais alto; em rem, para
     acompanhar o tamanho da fonte em vez de quebrar no zoom. */
  min-height: 7.9rem;

  /* align-self evita que o card estique ate a altura da linha quando divide a
     linha com um card de destaque, que e bem mais alto. */
  align-self: start;

  /* Rotulo empurrado para o rodape: com alturas iguais, os rotulos passam a
     ficar todos na mesma linha de base, e a grade le como uma grade. */
  display: flex;
  flex-direction: column;
}
.card-stat--compacto .stat-lbl { margin-top: auto; }
/* O que vem depois do rotulo (barra de meta, dica) acompanha o rodape. */
.card-stat--compacto .stat-lbl ~ * { margin-top: 6px; }

@media (max-width: 640px) {
  /* No celular os tres destaques empilham: lado a lado ficariam estreitos
     demais para um valor em moeda. */
  .summary-cards.kpi-hierarquia .kpi-faixa-destaque { grid-template-columns: 1fr; }
  .card-stat--destaque .stat-val { font-size: 22px; }
}

/* Sub-navegacao das Configuracoes: barra de abas fixa no topo da pagina, para a
   secao aberta continuar identificavel enquanto se rola um bloco longo. */
.settings-subnav {
  position: sticky; top: 0; z-index: var(--z-header);
  flex-wrap: wrap; gap: 4px;
  margin: 0 0 18px;
  padding: 8px 0;
  background: var(--bg);
  border-bottom: 1px solid var(--separator);
}

/* ============================================================
   FAIXA 2 — SET DE ICONES
   SVG inline que herda a cor e o tamanho do texto, no lugar dos emojis.
   ============================================================ */
.ico {
  width: 1.15em; height: 1.15em;
  flex: 0 0 auto;
  vertical-align: -0.18em;
  fill: none;
  stroke: currentColor;      /* herda a cor do texto: um so icone serve a
                                botao neutro, primario e de perigo */
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn .ico { margin-right: -1px; }

/* Bolinha de estado no lugar dos emojis coloridos. */
.ponto-estado {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; vertical-align: 0.05em;
  margin-right: 6px; flex: 0 0 auto;
}
.ponto-ok      { background: var(--green); }
.ponto-atencao { background: var(--yellow); }
.ponto-alerta  { background: var(--orange); }
.ponto-critico { background: var(--red); }
.ponto-neutro  { background: var(--text-muted); }

/* ============================================================
   FAIXA 3 — BUSCA GLOBAL (Ctrl+K)
   ============================================================ */
.busca-overlay {
  position: fixed; inset: 0; z-index: var(--z-modal-full);
  background: rgba(0,0,0,.55);
  display: flex; justify-content: center;
  padding: 12vh 16px 16px;
  animation: ui-dialog-fade .12s ease-out;
}
.busca-caixa {
  width: 100%; max-width: 560px; height: fit-content;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow);
  overflow: hidden;
}
.busca-campo {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--separator);
}
.busca-campo .ico { color: var(--text-muted); }
.busca-input {
  flex: 1; border: none; background: none; outline: none;
  color: var(--text); font-size: 16px; font-family: inherit;
}
.busca-input::placeholder { color: var(--text-muted); }
.busca-kbd {
  font-size: 10px; font-weight: 600; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 5px;
  padding: 2px 6px; font-family: inherit;
}
.busca-lista { list-style: none; margin: 0; padding: 6px; max-height: 52vh; overflow-y: auto; }
.busca-item {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 12px; border-radius: 8px; cursor: pointer;
  font-size: 14px; color: var(--text);
}
.busca-item.ativo { background: var(--bg-subcard); }
/* A faixa colorida marca de qual canal e o resultado sem depender so da cor. */
.busca-item.ativo::before {
  content: ''; position: absolute; left: 6px;
  width: 3px; height: 22px; border-radius: 2px; background: var(--blue-text);
}
.busca-lista { position: relative; }
.busca-item-tipo {
  flex: 0 0 auto; min-width: 96px;
  font-size: 10px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-muted);
}
.busca-item-rotulo  { flex: 1; }
.busca-item-detalhe { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.busca-vazio { padding: 20px 12px; text-align: center; color: var(--text-muted); font-size: 13px; }

@media (max-width: 640px) {
  .busca-overlay { padding: 8vh 10px 10px; }
  .busca-item-tipo { min-width: 72px; }
}

/* Entrada visivel da busca, no topo da navegacao. */
.sidebar-busca { width: 100%; text-align: left; }
.sidebar-kbd {
  margin-left: auto; font-size: 9px; font-weight: 700;
  color: var(--text-muted); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 5px; font-family: inherit;
  letter-spacing: .03em;
}

/* ============================================================
   FAIXA 3 — SKELETONS
   Barras com a FORMA do conteudo, para o layout nao saltar quando os dados
   chegam. Antes o sistema nao tinha nenhum.
   ============================================================ */
.sr-apenas {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.sk {
  background: linear-gradient(90deg, var(--bg-subcard) 0%, var(--bg-inactive) 40%,
                                     var(--bg-subcard) 80%);
  background-size: 300% 100%;
  animation: sk-brilho 1.4s ease-in-out infinite;
  border-radius: 6px;
}
@keyframes sk-brilho { from { background-position: 100% 0; } to { background-position: -100% 0; } }

.sk-wrap { display: grid; gap: 12px; }
.sk-cards  { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.sk-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px 18px;
}
.sk-val { height: 22px; width: 70%; margin-bottom: 10px; }
.sk-lbl { height: 10px; width: 45%; }

.sk-linha {
  display: grid; grid-template-columns: 2.4fr 1fr 1fr .7fr;
  gap: 12px; align-items: center;
  padding: 12px 4px; border-bottom: 1px solid var(--separator);
}
.sk-linha .sk { height: 12px; }
.sk-texto { height: 12px; width: 100%; }
.sk-texto:nth-child(even) { width: 82%; }

/* Quem pediu menos animacao ve as barras paradas. */
@media (prefers-reduced-motion: reduce) {
  .sk { animation: none; }
}

/* ============================================================
   FAIXA 3 — TABELA VIRA CARTAO NO CELULAR
   Generaliza o padrao que so a .store-table tinha. O data-label de cada celula
   e gerado pelo JS a partir do <thead>.
   ============================================================ */
@media (max-width: 640px) {
  table.tabela-cartao { width: 100%; display: block; border-collapse: separate; }
  table.tabela-cartao thead { display: none; }   /* o rotulo vai para cada celula */
  table.tabela-cartao tbody { display: block; }

  table.tabela-cartao tbody tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border); border-radius: 12px;
    padding: 12px 14px; margin-bottom: 10px;
  }

  table.tabela-cartao tbody td {
    display: flex; flex-direction: column; gap: 2px;
    padding: 0; border: none; white-space: normal;
    font-size: 13px; min-width: 0;
  }
  table.tabela-cartao tbody td::before {
    content: attr(data-label);
    font-size: 10px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--text-muted);
  }
  table.tabela-cartao tbody td[data-label=""]::before,
  table.tabela-cartao tbody td:not([data-label])::before { content: none; }

  /* Celula com colspan atravessa a tabela: no cartao ocupa a linha inteira.
     E o caso das linhas de "nenhum resultado" e das linhas de total, que numa
     coluna so ficavam espremidas na metade do cartao. */
  table.tabela-cartao tbody td.celula-larga {
    grid-column: 1 / -1;
    text-align: left;
  }

  /* A primeira celula e o titulo do cartao: ocupa a linha toda e dispensa rotulo. */
  table.tabela-cartao tbody td:first-child {
    grid-column: 1 / -1; font-size: 14px; font-weight: 600; color: var(--text);
  }
  table.tabela-cartao tbody td:first-child::before { content: none; }

  /* Celula so com botoes vira uma faixa de acoes no rodape do cartao. */
  table.tabela-cartao tbody td:last-child:has(.btn) {
    grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 8px;
    padding-top: 4px; border-top: 1px solid var(--separator);
  }
  table.tabela-cartao tbody td:last-child:has(.btn)::before { content: none; }

  /* O wrapper nao precisa mais rolar na horizontal. */
  .tabela-cartao-wrap, .table-wrap:has(table.tabela-cartao) { overflow-x: visible; }
}

/* ============================================================
   FAIXA 3 — HOME ACIONAVEL
   ============================================================ */
#home-resumo { width: 100%; max-width: 1100px; margin: 0 auto 28px; }
.home-bloco { margin-bottom: 22px; }
.home-bloco-titulo {
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-sec);
  margin: 0 0 10px; text-align: left;
}
.home-pendencias, .home-recentes {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.home-pend, .home-recente {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px;
  cursor: pointer; text-align: left; font-family: inherit;
  transition: border-color .15s, background .15s;
}
.home-pend:hover, .home-recente:hover {
  border-color: var(--blue-text); background: var(--bg-subcard);
}
.home-pend-n   { font-size: 24px; font-weight: 700; color: var(--text); line-height: 1.1; }
.home-pend-txt { font-size: 13px; color: var(--text-sec); display: flex; align-items: center; }
.home-pend-det { font-size: 11px; color: var(--text-muted); }
.home-tudo-certo {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  border-radius: 12px; padding: 14px 16px;
  font-size: 13px; color: var(--text-sec); text-align: left;
}
.home-tudo-certo .ico { color: var(--green); }
.home-recente-canal {
  font-size: 10px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-muted);
}
.home-recente-nome { font-size: 14px; font-weight: 600; color: var(--text); }

/* ============================================================
   FAIXA 3 — BREADCRUMB
   Orientacao constante em cadeias profundas. Soma-se aos botoes Voltar, que
   continuam funcionando.
   ============================================================ */
.breadcrumb { margin: 0 0 14px; }
.breadcrumb-lista {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  list-style: none; margin: 0; padding: 0;
}
.breadcrumb-item { display: flex; align-items: center; }
.breadcrumb-sep { color: var(--text-faded); margin: 0 6px; font-size: 12px; }
.breadcrumb-link {
  background: none; border: none; padding: 2px 4px; border-radius: 5px;
  font-family: inherit; font-size: 12px; color: var(--text-sec);
  cursor: pointer; text-decoration: none;
}
.breadcrumb-link:hover { color: var(--blue-text); text-decoration: underline; }
.breadcrumb-atual {
  font-size: 12px; font-weight: 600; color: var(--text); padding: 2px 4px;
}
@media (max-width: 640px) {
  /* No celular so os dois ultimos degraus importam: o resto vira reticencias. */
  .breadcrumb-item:not(:nth-last-child(-n+2)) { display: none; }
  .breadcrumb-item:nth-last-child(2)::before {
    content: '…'; color: var(--text-faded); margin-right: 6px;
  }
}

/* ============================================================
   FAIXA 3 — TEMA CLARO
   Os tokens ja estavam centralizados no :root, o que torna a troca viavel: o
   tema claro redefine os MESMOS tokens, sem duplicar regra nenhuma.
   Contrastes recalculados pela WCAG contra o fundo mais claro do tema (o pior
   caso), mantendo a mesma escala de 4 niveis do escuro.
   ============================================================ */
:root[data-tema="claro"] {
  /* Mesma marca, superficies invertidas. O lime continua sendo SUPERFICIE de
     acao (com texto preto, 16,7:1); para TEXTO e link, que sobre branco daria
     1,26:1, entra a variante oliva escura derivada dele. */
  --bg:            #F7F8F5;
  --bg-header:     #FFFFFF;
  --bg-card:       #FFFFFF;
  --bg-subcard:    #F0F2EC;
  --bg-inactive:   #E7EADF;
  --border:        #D8DCD0;
  --separator:     #E7EADF;

  --blue:          #D1F277;   /* superficie de acao: igual ao escuro */
  --blue-dark:     #C2E85C;
  --blue-text:     #4D6604;   /* oliva derivado do lime — 6,53:1 sobre branco */
  --on-primary:    #0A0A0B;
  --azul:          #0B6E8C;   /* azul eletrico escurecido p/ fundo claro */
  --acento-rgb:    209, 242, 119;
  --azul-rgb:      11, 110, 140;
  --green-rgb:     21, 112, 47;
  --red-rgb:       185, 28, 28;

  /* Series de grafico sobre cartao BRANCO. Mesma familia de matiz, luminancia
     derrubada para a curva ter contorno: um lime #D1F277 ou um ciano #06DBF3
     sobre branco ficam em ~1,3:1 e desaparecem. */
  --g-receita:        #15803D;
  --g-pedidos:        #0B6E8C;
  --g-unidades:       #6D28D9;
  --g-ticket:         #0F766E;
  --g-dia:            #5C7A0C;
  --g-estoque:        #6D28D9;
  --g-preco:          #C2410C;
  --g-neutro:         #5E6459;
  --g-info:           #0B63B8;
  --g-info-2:         #1D74C8;
  --g-ruptura:        #B91C1C;

  --g-ads-custo:      #C2410C;
  --g-ads-cliques:    #0B6E8C;
  --g-ads-impressoes: #6D28D9;
  --g-ads-vendas:     #15803D;
  --g-ads-receita:    #0F766E;
  --g-ads-cpc:        #8A5300;
  --g-ads-roas:       #BE185D;
  --g-ads-acos:       #B91C1C;
  --g-ads-tacos:      #9A4A00;

  --g-critica:        #B91C1C;
  --g-alta:           #9A4A00;
  --g-media:          #8A5300;
  --g-baixa:          #15702F;
  --g-sugestao:       #0B6E8C;
  --g-no-prazo:       #5C7A0C;
  --g-atrasada:       #B91C1C;

  --g-canal-ml:       #7A6A00;
  --g-canal-shopee:   #C2410C;
  --g-canal-magalu:   #0B63B8;
  --g-canal-bling:    #0F766E;
  --g-canal-outro:    #5E6459;
  --g-curva-shopee:   #C2410C;
  --g-curva-shopee-2: #9A3412;

  --g-erro:           #B91C1C;
  --g-bronze:         #8A4010;
  --g-nivel-platinum: #0E7490;
  --g-nivel-gold:     #8A6D00;
  --g-nivel-silver:   #6B7280;
  --g-nivel-nenhum:   #475569;

  --green:         #15702F;
  --green-strong:  #115A26;
  --red:           #B91C1C;
  --yellow:        #8A5300;
  --purple:        #6D28D9;
  --orange:        #C2410C;

  /* Escala de 4 niveis medida contra --bg-subcard (#F0F2EC), o pior caso */
  --text:          #101211;
  --text-sec:      #3E443C;
  --text-muted:    #5E6459;
  --text-faded:    #878D82;

  --primary:       #D1F277;
  --primary-dark:  #C2E85C;
  --success:       #15702F;
  --danger:        #B91C1C;
  --warning:       #8A5300;
  --white:         #ffffff;

  --shadow-sm:     0 1px 3px rgba(10,12,8,.10);
  --shadow:        0 8px 28px rgba(10,12,8,.14);
}

/* Lavagens brancas translucidas somem sobre fundo claro: no tema claro elas
   viram lavagem escura, para o realce continuar existindo. */
:root[data-tema="claro"] .ml-tab-btn.active,
:root[data-tema="claro"] .nav-tab.active {
  background: rgba(77,102,4,.10);
  color: var(--blue-text);
}

/* O login tem gradiente proprio, escuro por natureza. */
:root[data-tema="claro"] #screen-login,
:root[data-tema="claro"] #screen-forgot,
:root[data-tema="claro"] #screen-reset {
  background: radial-gradient(ellipse at 60% 30%, #EDF3DF 0%, #F7F8F5 55%, #E7EADF 100%);
}

/* A sidebar segue escura no tema claro: ancora a navegacao e evita que a tela
   inteira vire uma superficie branca sem hierarquia. */
:root[data-tema="claro"] .app-sidebar {
  background: #09090B;
  border-right-color: #27272A;
}
:root[data-tema="claro"] .app-sidebar .sidebar-item { color: #C8CDD3; }
:root[data-tema="claro"] .app-sidebar .sidebar-item:hover { background: #27272A; color: #FFFFFF; }
:root[data-tema="claro"] .app-sidebar .sidebar-item.active { color: var(--blue); background: #27272A; }
:root[data-tema="claro"] .app-name { color: #FFFFFF; }
:root[data-tema="claro"] .sidebar-kbd { color: #9CA3AF; border-color: #3F3F46; }

/* Botao de troca de tema */
.tema-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 13px;
}
.tema-toggle .ico { width: 1.05em; height: 1.05em; }

/* Rotulo de grupo na sidebar. Substitui o recuo decorativo de .sidebar-subitem,
   que sugeria uma subordinacao inexistente entre Clientes e os canais. */
.sidebar-grupo-rotulo {
  padding: 14px 16px 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted);
}

/* Regras da senha: visiveis enquanto se digita, marcando o que ja foi cumprido.
   Antes viviam no placeholder e sumiam no primeiro caractere. */
.senha-regras {
  list-style: none; margin: 8px 0 0; padding: 0;
  font-size: 12px; color: var(--text-muted);
}
.senha-regras li {
  display: flex; align-items: center; gap: 6px;
  padding: 1px 0;
}
.senha-regras li::before {
  content: ''; flex: 0 0 auto;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-faded);
  transition: background .15s;
}
.senha-regras li.ok { color: var(--green); }
.senha-regras li.ok::before { background: var(--green); }

/* Botao de mostrar/ocultar senha, dentro do proprio campo. */
.senha-wrap { position: relative; }
.senha-wrap input { padding-right: 44px; }
.btn-ver-senha {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); padding: 6px; border-radius: 6px;
  display: flex; align-items: center;
}
.btn-ver-senha:hover { color: var(--text); background: var(--bg-inactive); }

/* Nota de calculo recolhida. Estes textos tinham de 250 a 360 caracteres e
   ficavam fixos ACIMA dos dados, competindo com eles. O conteudo e bom e
   necessario — o problema era a posicao e o volume. <details> nativo: acessivel,
   navegavel por teclado e sem JS. */
.nota-calculo {
  margin: 0 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
}
.nota-calculo > summary {
  cursor: pointer; list-style: none;
  padding: 9px 14px;
  font-size: 12px; font-weight: 600; color: var(--text-sec);
  display: flex; align-items: center; gap: 8px;
  border-radius: 10px;
}
.nota-calculo > summary::-webkit-details-marker { display: none; }
.nota-calculo > summary::before {
  content: ''; flex: 0 0 auto;
  width: 0; height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform .15s;
}
.nota-calculo[open] > summary::before { transform: rotate(90deg); }
.nota-calculo > summary:hover { color: var(--text); }
.nota-calculo > p {
  margin: 0; padding: 0 14px 12px;
  font-size: 12px; line-height: 1.6; color: var(--text-sec);
  border-top: 1px solid var(--separator); padding-top: 10px;
}

/* Pendencia com lojas: abre a lista no lugar, em vez de trocar de aba e deixar
   o usuario procurar quais eram as lojas. */
.home-pend-lista { padding: 0; }
.home-pend-lista > summary {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 14px 16px; cursor: pointer; list-style: none; border-radius: 12px;
}
.home-pend-lista > summary::-webkit-details-marker { display: none; }
.home-pend-lojas {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--separator);
  padding: 6px;
}
.home-pend-loja {
  display: grid; grid-template-columns: 1fr auto; gap: 0 10px;
  background: none; border: none; cursor: pointer; font-family: inherit;
  text-align: left; padding: 8px 10px; border-radius: 8px;
}
.home-pend-loja:hover { background: var(--bg-subcard); }
.home-pend-loja-canal {
  grid-column: 1; font-size: 10px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-muted);
}
.home-pend-loja-nome { grid-column: 1; font-size: 13px; font-weight: 600; color: var(--text); }
.home-pend-loja-info {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  font-size: 12px; color: var(--text-sec); white-space: nowrap;
}

/* ============================================================================
   PAINEL — COMPOSIÇÃO DE DASHBOARD
   ============================================================================
   O relatório de loja era uma coluna de cinco blocos com o mesmo peso visual:
   dez cartões de venda, catorze de publicidade, nove de custos, todos do mesmo
   tamanho, um embaixo do outro. Saber como a loja está indo exigia rolar a
   página inteira, e a metade direita da tela ficava vazia.

   O que muda aqui é a COMPOSIÇÃO, não a identidade: o preto, o lime da marca, a
   Inter e o tema claro continuam os mesmos. A tela passa a ter três registros
   de leitura, e cada um ganha um tratamento próprio:

     1. AGORA      manchete, curva do mês, alertas, tarefas   → herói, sempre aberto
     2. ROTINA     métricas secundárias e publicidade         → faixa densa de linhas
     3. CONSULTA   pedidos, produtos, taxas, conciliação      → seções recolhíveis

   Vale para os três canais: as classes daqui não citam Mercado Livre, Shopee
   nem Magalu de propósito.
   ============================================================================ */

:root {
  /* ── Escala tipográfica ──
     Antes havia 152 declarações em 10 e 11px e o valor de um KPI tinha quase o
     mesmo peso do rótulo. Aqui a escala é nomeada e o piso é 11px: abaixo disso
     não entra texto que precise ser lido.

     O `--num` é o detalhe que mais muda a sensação de painel financeiro: sem
     algarismos de largura fixa, uma coluna de valores dança de linha para linha
     porque o 1 é mais estreito que o 8. A Inter traz a versão tabular; é só
     pedir. */
  --fs-heroi:   40px;   /* a manchete do período */
  --fs-metrica: 22px;   /* número de nível 2 */
  --fs-dado:    15px;   /* número dentro de linha densa */
  --fs-corpo:   13px;
  --fs-rotulo:  11px;   /* caixa-alta, com entreletra */
  --num: tabular-nums;

  /* ── Espaço ──
     Escala de 4 em 4. Os valores soltos (14px aqui, 18px ali, 22px acolá) eram
     o que fazia duas seções vizinhas nunca respirarem igual. */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 40px;
}

/* Todo número do painel com algarismo de largura fixa. */
.stat-val, .metrica-valor, .heroi-valor, .heroi-secundario-valor,
.stat-delta, td, .ord-card-valor {
  font-variant-numeric: var(--num);
}

/* ============================================================
   HERÓI — a linha do mês
   ============================================================
   O gráfico deixa de dividir a faixa com o painel de tarefas e passa a ser o
   primeiro elemento da tela, com a manchete do período à esquerda. A pergunta
   que se responde ao abrir o painel é "a loja fecha o mês na meta?", e essa
   pergunta é uma CURVA com um alvo, não um cartão com um número.
   ============================================================ */

.painel-heroi {
  display: grid;
  grid-template-columns: minmax(240px, 20%) 1fr;
  gap: var(--e-5);
  align-items: stretch;
}
/* Sem manchete (canal que ainda não calcula os destaques) o gráfico ocupa tudo,
   em vez de deixar uma coluna vazia do lado. */
.painel-heroi:not(:has(.heroi-metricas)) { grid-template-columns: 1fr; }

/* Coluna da manchete. A borda é o único filete da faixa: separa os dois papéis
   sem transformar cada um num cartão. */
.heroi-metricas {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  padding-right: 12px;
  border-right: 1px solid var(--separator);
  min-width: 0;
}

/* O primeiro número é a manchete; os outros dois são o contexto dela. Essa
   diferença de tamanho é o que dispensa qualquer moldura, cor de fundo ou
   borda lateral para dizer o que é mais importante. */
.heroi-metricas .card-stat--destaque {
  background: none;
  border: none;
  border-left: none;
  border-radius: 0;
  padding: 14px 16px;
  box-shadow: none;
  min-height: 0;
}
.heroi-metricas .card-stat--destaque + .card-stat--destaque {
  border-top: 1px solid var(--separator);
}
.heroi-metricas .card-stat--destaque:hover { box-shadow: none; }

/* Rótulo em cima do número: lendo de cima para baixo, primeiro se sabe do que
   se trata e só então o valor — que é como se lê uma etiqueta, não como se lê
   uma legenda. */
.heroi-metricas .card-stat--destaque .stat-lbl {
  order: -1;
  margin: 0 0 var(--e-1);
  font-size: var(--fs-rotulo);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.heroi-metricas .card-stat--destaque .stat-val {
  font-size: var(--fs-metrica);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
}
/* A primeira métrica é a manchete da tela. */
.heroi-metricas .card-stat--destaque:first-child .stat-val {
  font-size: var(--fs-heroi);
  letter-spacing: -.03em;
}
.heroi-metricas .stat-delta { margin-top: var(--e-1); }
/* A sparkline do destaque some: a curva grande ao lado já é ela, em tamanho de
   verdade. Repetir a mesma forma duas vezes na mesma faixa é ruído. */
.heroi-metricas .card-stat--destaque > svg { display: none; }
.heroi-metricas .goal-bar-wrap { margin-top: var(--e-2); }
/* Alinhado com o rótulo, que é a primeira linha do bloco. */
.heroi-metricas .card-stat--destaque .card-help { top: 10px !important; right: 10px !important; }

@media (max-width: 1100px) {
  .painel-heroi { grid-template-columns: 1fr; }
  .heroi-metricas {
    flex-direction: row;
    flex-wrap: wrap;
    padding-right: 0;
    padding-bottom: var(--e-4);
    border-right: none;
    border-bottom: 1px solid var(--separator);
  }
  .heroi-metricas .card-stat--destaque { flex: 1 1 180px; }
  .heroi-metricas .card-stat--destaque + .card-stat--destaque {
    border-top: none;
  }
  .heroi-metricas .card-stat--destaque:first-child .stat-val { font-size: var(--fs-metrica); }
}

/* ============================================================
   FAIXA DE ATENÇÃO — alertas e tarefas lado a lado
   ============================================================
   Os dois blocos respondem à mesma pergunta ("o que precisa de mim?") e viviam
   longe um do outro: os alertas embaixo do gráfico, as tarefas numa coluna à
   direita que ficava vazia quando a loja não tinha projeto vinculado.
   ============================================================ */

/* Os alertas e as tarefas não têm o mesmo peso: alerta é frase, que precisa de
   linha para não quebrar em três; tarefa é contador curto. Daí 60/40, e não meio
   a meio. A fração vive só aqui: o teto fixo de 260px que o painel de tarefas
   carregava vencia a coluna e o deixava estreito em qualquer largura de tela. */
.faixa-atencao {
  display: grid;
  grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
  gap: var(--e-4);
  align-items: start;
}
/* Um lado vazio não deixa buraco: o que sobrou ocupa a faixa inteira. */
.faixa-atencao > :only-child { grid-column: 1 / -1; }
@media (max-width: 900px) { .faixa-atencao { grid-template-columns: 1fr; } }

/* ============================================================
   NÍVEL 2 — a faixa densa
   ============================================================
   Vinte e quatro cartões de mesmo tamanho viram uma lista de três colunas com
   filetes: a mesma informação em um quarto da altura. O DOM não muda — são os
   mesmos `.card-stat--compacto` que `aplicarHierarquiaKpi` já produz —, só o
   arranjo. Cartão é moldura, e moldura em métrica de apoio só ocupa espaço.
   ============================================================ */

.summary-cards.kpi-hierarquia .kpi-faixa-compacta {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0 var(--e-6);
  align-items: stretch;
}

.card-stat--compacto {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0 var(--e-3);
  padding: 10px 0;
  min-height: 0;
  background: none;
  border: none;
  border-bottom: 1px solid var(--separator);
  border-radius: 0;
  box-shadow: none;
}
.card-stat--compacto:hover { box-shadow: none; }
.card-stat--compacto .stat-lbl {
  order: -1;
  grid-column: 1;
  margin: 0;
  font-size: var(--fs-corpo);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-sec);
}
.card-stat--compacto .stat-val {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--fs-dado);
  font-weight: 600;
  line-height: 1.3;
  text-align: right;
  white-space: nowrap;
}
/* A barra de meta atravessa as duas colunas, como um rodapé fino da linha. Sem
   isto ela empurraria o valor para fora do alinhamento. */
.card-stat--compacto .goal-bar-wrap {
  grid-column: 1 / -1;
  margin: var(--e-1) 0 0;
}
.card-stat--compacto .card-stat-hint { grid-column: 1 / -1; margin-top: 0; }

/* A sparkline sai do nível 2. Em cartão ela era um enfeite discreto; em linha,
   ocupando a largura toda logo abaixo do rótulo, vira um sublinhado — e, ao
   lado das barras de meta, duas coisas parecidas passam a significar coisas
   diferentes na mesma faixa. A curva de verdade está no herói, em tamanho de
   ler. */
.card-stat--compacto > svg { display: none; }

/* O `?` de ajuda é posicionado por style inline no cardHelp() (top:6px;
   right:8px), pensado para o canto de um cartão. Na linha densa esse canto é
   onde o valor termina, e o ícone caía em cima do número. Daí o !important:
   não há como vencer um style inline de outro jeito. */
.card-stat--compacto .card-help {
  top: 50% !important;
  right: 0 !important;
  transform: translateY(-50%);
}
.card-stat--compacto .stat-val { padding-right: 22px; }

/* O cartão clicável perde a moldura junto com os outros; o sinal de que ele
   responde ao clique passa a ser o valor mudando de cor, não uma borda. */
.card-stat--compacto.card-stat-clickable:hover { border-bottom-color: var(--red); }
.card-stat--compacto.card-stat-clickable:hover .stat-val { color: var(--red); }

/* ============================================================
   SEÇÃO RECOLHÍVEL — o registro de consulta
   ============================================================
   Pedidos, produtos, taxas e conciliação não são lidos de relance: são
   consultados quando se tem uma pergunta. Ficarem abertos por padrão é o que
   fazia a página ter cinco telas de altura.
   ============================================================ */

.secao-recolhivel > .ml-section-header {
  cursor: pointer;
  user-select: none;
}
.secao-recolhivel > .ml-section-header:hover { background: var(--bg-inactive); }

.secao-alternar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  margin-right: var(--e-1);
  flex-shrink: 0;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  transition: transform .18s ease, color .18s ease;
}
/* O ícone é a seta de "voltar", que aponta para a esquerda. Aberta, ela gira
   para baixo (o conteúdo está logo abaixo); fechada, aponta para a direita (o
   conteúdo está guardado). É a convenção de qualquer árvore de arquivos. */
.secao-alternar .ico { width: 14px; height: 14px; }
.secao-alternar { transform: rotate(-90deg); }
.secao-recolhivel.recolhida .secao-alternar { transform: rotate(180deg); }
.secao-recolhivel > .ml-section-header:hover .secao-alternar { color: var(--text); }

/* O corpo some do fluxo em vez de ficar com altura zero: uma seção recolhida
   com tabela dentro ainda reservaria a largura da rolagem horizontal.

   O !important existe porque vários blocos de dentro das seções trazem
   `display:flex` em atributo style — os subtítulos de "Reclamações e Mediações"
   e da "Conciliação da Fatura", por exemplo. Sem ele a seção fechava e esses
   pedaços continuavam na tela, soltos, sem o cabeçalho que os explicava. */
.secao-recolhivel.recolhida > :not(.ml-section-header) { display: none !important; }
.secao-recolhivel.recolhida > .ml-section-header { border-bottom: none; }

/* Resumo de uma linha no cabeçalho da seção fechada — o suficiente para decidir
   se vale abrir. */
.secao-resumo {
  font-size: var(--fs-corpo);
  color: var(--text-muted);
  font-variant-numeric: var(--num);
  white-space: nowrap;
}
.secao-recolhivel:not(.recolhida) .secao-resumo { display: none; }

/* Impressão e busca no navegador precisam ver o conteúdo todo; uma seção
   fechada não pode esconder o dado de quem mandou imprimir o relatório. */
@media print {
  .secao-recolhivel.recolhida > :not(.ml-section-header) { display: revert; }
  .secao-alternar { display: none; }
}

/* ============================================================
   RITMO DA PÁGINA
   ============================================================ */

/* Espaço maior entre blocos de registros diferentes do que dentro de um mesmo
   registro. É o espaçamento, e não uma linha divisória, que agrupa. */
/* O espaçamento entre blocos é do CONTAINER, não de cada bloco: margem própria
   em cima do gap da grade dobrava o vão e abria um buraco de meia tela entre a
   faixa de atenção e as métricas. */
.ml-summary-grid { gap: var(--e-5); }

/* Cabeçalho de seção mais discreto: ele rotula, não anuncia. */
.ml-section-title {
  font-size: var(--fs-corpo);
  letter-spacing: .06em;
}
.ml-section-header { padding: var(--e-3) var(--e-5); }

/* A pilha de cartões de custo tinha o mesmo tamanho de fonte da manchete. */
#ml-fees-cards .stat-val,
#shopee-fees-cards .stat-val,
#magalu-fees-cards .stat-val { font-size: var(--fs-metrica); }


/* ── Ajustes do herói depois de ver a tela ── */

/* O valor da manchete quebrava em duas linhas ("R$" numa, "84.807,05" noutra):
   40px fixos não cabem numa coluna de 240px quando o número passa de cem mil.
   O clamp deixa o tamanho seguir a largura da tela, e o nowrap garante que a
   quebra nunca aconteça — um valor monetário partido ao meio é ilegível. */
:root { --fs-heroi: clamp(26px, 2.6vw, 38px); }
.heroi-metricas .card-stat--destaque .stat-val { white-space: nowrap; }

/* A coluna da manchete, um pouco mais larga que os 20% originais.
   O `@media (min-width: 1101px)` NÃO é decoração: sem ele esta linha vale em
   toda largura e, por vir DEPOIS, vence a regra de empilhar do bloco de 1100px
   lá em cima — mesmo seletor, mesma especificidade, quem vem por último ganha,
   media query ou não. Era esse o motivo de o gráfico sumir no celular: o herói
   continuava em duas colunas, 250px iam para as métricas e sobravam ~30px para
   a curva, que é a largura do padding do `.ml-chart-body`. O SVG usa
   `width:100%` de um contêiner de largura zero — desenhava, e desenhava nada. */
@media (min-width: 1101px) {
  .painel-heroi { grid-template-columns: minmax(250px, 23%) 1fr; }
}

/* O `nowrap` acima resolveu a quebra e criou o corte: o valor não parte mais em
   duas linhas, mas "R$ 100.202,06" a 38px pede ~270px e a coluna tem 250. Como
   a largura vinha da tela (vw) e não da coluna, o número passava do filete e era
   cortado pelo `overflow:hidden` do cartão do gráfico.
   A medida certa é a do PRÓPRIO cartão da métrica: `cqi` faz a fonte seguir a
   largura de quem a contém, e aí ela encolhe sozinha na coluna estreita do
   desktop e no cartão em fileira do celular, sem regra separada para cada um. */
.heroi-metricas .card-stat--destaque { container-type: inline-size; min-width: 0; }
.heroi-metricas .card-stat--destaque .stat-val { font-size: clamp(15px, 9cqi, var(--fs-metrica)); }
.heroi-metricas .card-stat--destaque:first-child .stat-val { font-size: clamp(20px, 11cqi, 34px); }

/* A nota de escala substitui o valor que saiu do cabeçalho do gráfico: diz o
   que cada ponto da curva representa, que era a única informação que o número
   grande carregava e a manchete ao lado não. */
.chart-escala-nota {
  font-size: var(--fs-rotulo);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Os chips de overlay foram para baixo do gráfico. Em cima, onze deles em duas
   fileiras empurravam a curva para o rodapé do cartão — o elemento principal da
   tela começava na metade de baixo. Embaixo eles funcionam como legenda ligável,
   que é o que sempre foram. */
.chart-overlay-chips { margin: var(--e-3) 0 0; }
.ml-chart-panel .chart-legend { margin-top: var(--e-2); }

/* A barra de abas do gráfico ocupava a largura toda para duas palavras. */
.ml-chart-tabs { width: fit-content; }

/* Seção que ficou só com os secundários: o cabeçalho anunciava "Vendas do
   Período" para uma faixa de linhas que já está sob a manchete do período. */
.ml-section-card.secao-so-secundarios > .ml-section-header { display: none; }
.ml-section-card.secao-so-secundarios { background: none; border: none; box-shadow: none; }
.ml-section-card.secao-so-secundarios > .summary-cards { margin-bottom: 0; }

/* ============================================================
   ÍCONES QUE SUBSTITUÍRAM AS IMAGENS .webp
   ============================================================
   Eram 29 arquivos .webp espalhados pela sidebar, pelos cabeçalhos de seção, em
   botões e nos cartões da tela inicial — a terceira linguagem visual do painel,
   depois dos emojis (já trocados) e dos logotipos de canal (que continuam,
   porque logotipo de marca não é ícone de interface).

   Uma imagem não herda a cor do texto ao lado, não cresce junto com a fonte e
   não muda entre o tema claro e o escuro: o mesmo desenho servia ao item ativo
   e ao inativo da sidebar. O ícone em SVG resolve os três de uma vez.

   As classes abaixo existem só para dar o TAMANHO que cada lugar tinha — a cor
   agora vem sozinha, do `currentColor` do `.ico`.
   ============================================================ */

.sidebar-ico   { width: 20px; height: 20px; vertical-align: middle; }
.secao-ico     { width: 20px; height: 20px; vertical-align: -4px; margin-right: 4px; }
.inline-ico    { width: 16px; height: 16px; vertical-align: -3px; }
.home-card-ico { width: 40px; height: 40px; stroke-width: 1.4; }
.escolha-ico   { width: 30px; height: 30px; stroke-width: 1.4; }
.rep-ico       { width: 26px; height: 26px; }
.fab-ico       { width: 26px; height: 26px; }
.dropzone-ico  { width: 32px; height: 32px; stroke-width: 1.4; color: var(--text-faded); }

/* Na sidebar o ícone acompanha o estado do item: apagado quando inativo,
   destacado no item aberto. Era justamente o que a imagem não fazia. */
.app-sidebar .sidebar-item .ico { color: var(--text-faded); transition: color .15s; }
.app-sidebar .sidebar-item:hover .ico,
.app-sidebar .sidebar-item.active .ico { color: currentColor; }

/* Cabeçalho de seção: o ícone é rótulo, não ilustração. */
.ml-section-icon .ico { width: 18px; height: 18px; color: var(--text-muted); }

@media (max-width: 900px) {
  .home-card-ico { width: 34px; height: 34px; }
}

/* ============================================================
   TABELA DE LOJAS — a coluna de ações não pode fugir da tela
   ============================================================
   Onze colunas de métrica mais uma pilha vertical de quatro botões: a coluna de
   ações ficava fora da área visível, e para clicar em "Acessar" era preciso
   rolar a tabela de lado — na página de Clientes, que é onde se abre uma loja.

   Duas mudanças: a coluna gruda na borda direita (as métricas passam por baixo
   dela) e os botões se organizam em duas colunas, o que corta a altura da linha
   pela metade.
   ============================================================ */

.store-table td.store-actions,
.store-table th.store-actions-h {
  position: sticky;
  right: 0;
  z-index: 1;
  background: var(--bg-card);
  /* Filete de sombra à esquerda: diz que há conteúdo passando por baixo. */
  box-shadow: -8px 0 8px -8px rgba(0, 0, 0, .55);
}
.store-table tbody tr:hover td.store-actions { background: var(--bg-subcard); }

.store-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-1);
  min-width: 190px;
}
.store-actions .btn,
.store-actions .report-dropdown-wrap,
.store-actions .report-dropdown-wrap .btn { width: 100%; }
/* A ação principal da linha ("Acessar") ocupa a largura toda. Pelo primeiro
   filho, e não pela classe: cada canal batiza esse botão de um jeito. */
.store-actions > :first-child { grid-column: 1 / -1; }

/* No celular a tabela já vira cartão e a coluna deixa de existir como coluna. */
@media (max-width: 900px) {
  .store-table td.store-actions,
  .store-table th.store-actions-h { position: static; box-shadow: none; }
}


/* Cor da série do período anterior — compartilhada entre o SVG do gráfico e o
   risquinho da legenda. No tema claro o índigo claro sumia sobre o branco. */
:root { --serie-anterior: rgba(129, 140, 248, .85); }
:root[data-tema="claro"] { --serie-anterior: rgba(67, 56, 202, .8); }

/* ============================================================
   TRANSBORDO NO CELULAR — quem pode encolher
   ============================================================
   Item de flex/grid nasce com `min-width: auto`, ou seja, "nunca menor que o
   meu conteúdo". Numa tela de 390px isso ganha de `max-width: 100%`: a nav de
   abas com cinco botões, a tabela larga e o SVG do gráfico empurravam o cartão
   além da tela, e o `overflow: hidden` do cartão cortava o que passou em vez de
   deixar rolar. Liberar o encolhimento nos pontos certos é o que faz o
   `overflow-x: auto` que essas peças já declaram voltar a funcionar.
   ============================================================ */

/* A seção inteira e a coluna que a contém. */
.ml-summary-grid > *,
.ml-section-card,
.ml-section-card > * { min-width: 0; }

/* A nav de abas JÁ tem `max-width:100%` e `overflow-x:auto`; sem isto o
   min-content dos botões vencia os dois e a faixa vazava do cabeçalho. */
.ml-section-header > *,
.ml-tab-nav { min-width: 0; }

/* O herói e o gráfico. `.heroi-grafico` é a trilha `1fr` do herói e não tinha
   regra nenhuma: o SVG da curva definia a largura da coluna, e a partir daí do
   cartão e da página. */
.painel-heroi,
.heroi-grafico,
.ml-chart-panel,
.ml-chart-panel > *,
#ml-chart-wrap, #shopee-chart-wrap, #magalu-chart-wrap { min-width: 0; }

/* O SVG da curva acompanha a largura disponível em vez de ditá-la. */
.ml-chart-body svg { max-width: 100%; height: auto; }

/* O cabeçalho da curva — total, variação, previsto e a nota de escala — era uma
   linha de flex sem quebra: numa tela estreita ele passava 230px do cartão. É a
   peça que fazia o `#ml-chart-wrap` parecer quebrado no celular. */
.chart-rev-header { flex-wrap: wrap; min-width: 0; }

/* A manchete encostava na moldura. O cabeçalho e a curva têm recuo próprio
   (`.ml-chart-header` e `.ml-chart-body`), mas o `.painel-heroi` entrou no cartão
   sem nenhum: os cartões de métrica ficavam a 1px da borda esquerda e da de
   baixo, e texto colado na borda de um cartão com `overflow:hidden` lê-se como
   texto cortado — que é como o número do faturamento vinha aparecendo. */
.ml-chart-panel .painel-heroi { padding: 0 0 var(--e-4) var(--e-5); }
@media (max-width: 1100px) {
  /* Empilhado, a coluna da manchete passa a ter vizinho embaixo e não ao lado:
     o recuo tem de existir dos dois lados. */
  .ml-chart-panel .painel-heroi { padding: 0 var(--e-5) var(--e-4); }
}

@media (max-width: 900px) {
  /* Cabeçalho de seção em duas linhas: título em cima, abas embaixo, ocupando a
     largura toda para rolarem lateralmente dentro do próprio trilho. */
  .ml-section-header { flex-wrap: wrap; }
  .ml-section-header .ml-tab-nav { flex: 1 1 100%; }
}

/* ============================================================
   COR DA MARCA COMO TEXTO
   ============================================================
   O token é `--blue-text`, e não `--primary`: os dois são o MESMO lime no tema
   escuro, mas `--primary` é uma cor de SUPERFÍCIE (botão com texto preto) e no
   tema claro continua lime — sobre branco daria 1,26:1, ilegível. O
   `--blue-text` é a marca já resolvida para texto: lime no escuro, oliva
   derivado (#4D6604, 6,53:1) no claro.
   ============================================================ */

/* Itens de primeiro nível do menu que não são canal nem ferramenta. Hover e
   estado ativo continuam vindo de `.sidebar-item:hover` / `.active`, que têm
   especificidade maior — por isso a marca entra por classe, e não por id. */
.sidebar-item--marca { color: var(--blue-text); }

/* Rótulos dos cartões de reputação. O da MEDALHA fica de fora: aquele cartão já
   tem a borda animada e o nome do tier chamando atenção, e um terceiro realce
   ali disputa com os outros em vez de somar. */
.ml-rep-label { color: var(--blue-text); }
.ml-rep-card--medal .ml-rep-label { color: var(--text-muted); }

/* Título de cada seção do painel. A classe é a mesma nos três canais, então
   Mercado Livre, Shopee e Magalu mudam juntos. */
.ml-section-title { color: var(--blue-text); }

/* No celular, "ver em tela cheia" é sobre a CURVA. Empilhado, o herói põe as
   três métricas antes dela, e no modo paisagem girado elas consomem quase toda
   a altura útil — a curva existia, desenhada, logo abaixo da dobra: expandir
   não mostrava o gráfico. Os números já estão na página atrás do modal; aqui
   eles saem e a curva fica com a área inteira. */
@media (max-width: 900px) {
  #chart-modal .heroi-metricas { display: none; }
  #chart-modal .painel-heroi { grid-template-columns: 1fr; padding: 0; }
}

/* A curva tem proporção 820x172: numa coluna de 250px ela vira uma tira de 53px
   de altura, desenhada e ilegível. Um piso de largura devolve altura à curva e
   o excedente vira rolagem lateral dentro do próprio cartão — a alternativa
   seria esticar o SVG na vertical, o que deformaria junto os rótulos das datas.
   Para a leitura completa continua havendo o botão de tela cheia ao lado. */
@media (max-width: 900px) {
  .ml-chart-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ml-chart-body svg { min-width: 520px; }
  /* Dentro do modal a curva já tem a tela toda: o piso ali só criaria rolagem. */
  #chart-modal .ml-chart-body { overflow-x: visible; }
  #chart-modal .ml-chart-body svg { min-width: 0; }
}

/* ============================================================
   Filtros de /feedbacks
   O layout saiu do atributo style do index.php para cá: estilo inline vence a
   folha, então enquanto ele existia não havia como o media query trocar a
   disposição no celular. Eram cinco controles em flex-wrap, cada um dimensionado
   pela opção mais longa ("Todas as criticidades", "Todos os usuários"), o que no
   telefone virava cinco linhas empilhadas ocupando quase uma tela inteira antes
   de aparecer o primeiro ticket.
   ============================================================ */
.feedbacks-filters {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 16px;
}
.feedbacks-filters #feedbacks-chart-card { margin-left: auto; }

@media (max-width: 768px) {
  /* Grade de duas colunas: os quatro selects passam a ocupar duas linhas em vez
     de quatro, e a busca fica com a linha inteira por ser o controle mais usado. */
  .feedbacks-filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 8px;
  }
  .feedbacks-filters > .catalog-search-input { grid-column: 1 / -1; }
  .feedbacks-filters #feedbacks-chart-card   { grid-column: 1 / -1; margin-left: 0; }
  .feedbacks-filters .catalog-status-filter  { width: 100%; min-width: 0; font-size: 13px; padding: 8px 10px; }
}


/* ==========================================================================
   SOLICITAÇÃO DE CADASTRO (Painel do Cliente)
   Herda os tokens do tema: nada de cor literal, para o tema claro funcionar
   sem uma segunda folha de regras.
   ========================================================================== */

/* Abas do Painel do Cliente — reusa .ml-tab-nav/.ml-tab-btn, só afasta do topo. */
.pc-tab-nav { margin: 4px 0 16px; }

.pc-solic-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.pc-solic-head .panel-section-title { margin: 0 0 4px; }
.pc-solic-head .panel-hint { margin: 0; }

/* Plano de ação no Painel de Reunião: ocupa a largura toda (a tabela é larga). */
#pr-plan-wrap { grid-column: 1 / -1; }

/* Preparação da reunião: faixa de topo, cartões de resumo, duas colunas
   (pauta | compromissos) e detalhes recolhidos. Pouco texto corrido de propósito:
   a seção é lida durante a call. */
#pr-prep-wrap { grid-column: 1 / -1; }
.mpr-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mpr-topo-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.mpr-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-subcard); font-size: 12px; color: var(--text-sec); }
.mpr-chip strong { color: var(--text); }
.mpr-chip--aviso { border-color: rgba(245,158,11,.45); color: var(--text); cursor: help; }
.mpr-msg { margin: 8px 0 0; font-size: 12px; color: var(--text-muted); }

.mpr-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 14px 0 4px; }
.mpr-tile { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px;
  border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: 10px; background: var(--bg-subcard); }
.mpr-tile--good { border-left-color: var(--green-strong, var(--green)); }
.mpr-tile--bad  { border-left-color: var(--red); }
.mpr-tile--warn { border-left-color: #f59e0b; }
.mpr-tile-rot { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.mpr-tile-val { font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpr-tile-val small { font-size: 14px; font-weight: 600; color: var(--text-muted); }
.mpr-tile-sub { font-size: 11px; color: var(--text-sec); overflow-wrap: anywhere; }

.mpr-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 20px; margin-top: 14px; }
.mpr-col { min-width: 0; }
.mpr-h { margin: 0 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.mpr-pauta { margin: 0; padding: 0; list-style: none; counter-reset: mpr; }
.mpr-pauta li { counter-increment: mpr; display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 8px;
  padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.mpr-pauta li::before { content: counter(mpr); grid-row: span 2; width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
  background: var(--bg-subcard); border: 1px solid var(--border); color: var(--text-sec); }
.mpr-pauta li strong { color: var(--text); }
.mpr-pauta li span { color: var(--text-sec); font-size: 12px; overflow-wrap: anywhere; }
.mpr-pauta li.mpr-tom-bad::before  { border-color: var(--red); color: var(--red); }
.mpr-pauta li.mpr-tom-good::before { border-color: var(--green-strong, var(--green)); color: var(--green-strong, var(--green)); }
.mpr-pauta li.mpr-tom-warn::before { border-color: #f59e0b; color: #f59e0b; }

.mpr-comps { margin: 0; padding: 0; list-style: none; }
.mpr-comp { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.mpr-comp-txt { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
.mpr-comp-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 3px; font-size: 11px; color: var(--text-muted); }
.mpr-dono { color: var(--text-sec); }
.mpr-atraso { color: var(--red); font-weight: 600; }
.mpr-comp.is-late { box-shadow: inset 3px 0 0 var(--red); padding-left: 8px; }
/* Mais específico que .sp-input (width: 100%), que espremia o texto ao lado. */
.mpr-comp select.mpr-st { width: 140px; flex: 0 0 140px; }
.mpr-vazio { margin: 0; font-size: 13px; color: var(--text-muted); }

.mpr-notas, .mpr-det { margin-top: 10px; font-size: 13px; }
.mpr-notas summary, .mpr-det summary { cursor: pointer; color: var(--text-sec); font-size: 12px; padding: 4px 0; }
.mpr-notas summary:hover, .mpr-det summary:hover { color: var(--text); }
.mpr-notas textarea { margin-top: 6px; }
.mpr-lista { margin: 6px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.5; color: var(--text); }
.mpr-mut { color: var(--text-muted); font-size: 12px; }

/* Histórico de reuniões (atas registradas). */
.mpr-hist { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border); }
.mpr-hist > summary { cursor: pointer; list-style-position: inside; }
.mpr-hist-lista { margin: 8px 0 0; padding: 0; list-style: none; }
.mpr-hist-lista > li { border-bottom: 1px solid var(--border); }
.mpr-reuniao > summary { cursor: pointer; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 8px 0; font-size: 13px; color: var(--text); }
.mpr-prev { flex: 1 1 240px; min-width: 0; color: var(--text-sec); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpr-reuniao-txt { white-space: pre-line; font-size: 13px; line-height: 1.55; color: var(--text-sec);
  padding: 4px 0 12px 14px; border-left: 2px solid var(--border); margin: 0 0 8px 4px; overflow-wrap: anywhere; }
.pln-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.pln-topo .panel-hint { margin: 0; flex: 1 1 320px; }
.pln-tabela td { vertical-align: top; }
.pln-selecao { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px; }
.pln-tabela th:nth-child(2), .pln-tabela td:nth-child(2) { width: 48%; }
.pln-tabela td:nth-child(3) { min-width: 170px; }
.pln-tabela td:nth-child(4) { min-width: 140px; }
.pln-tabela textarea { min-height: 58px; }

/* Resultado da agência (Painel do Gerente). */
#pg-result-wrap { grid-column: 1 / -1; }
.agr-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.agr-topo select.agr-dias { width: 180px; }
.agr-nat { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); opacity: .85; }
.mpr-tile .agr-nat { margin-bottom: 2px; }
.agr-tabela th .agr-nat { font-weight: 600; margin-top: 2px; }

/* Capacidade dos gerentes (Painel do Gerente, só admin). */
#pg-capacity-wrap { grid-column: 1 / -1; }
.cap-tabela td { vertical-align: top; }

/* Diário de otimizações + diagnóstico de queda. */
#odi-nav { margin: 14px 0 16px; }
.odi-filtros { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin-bottom: 4px; }
.odi-filtros .sp-campo { min-width: 180px; }
.odi-filtros .sp-campo:first-child { min-width: 260px; }
.odi-form { margin: 14px 0; padding: 16px 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); }
.odi-form-tit { margin: 0 0 6px; font-size: 15px; }
.odi-campos-largos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.odi-largo { grid-column: 1 / -1; }
.odi-lista { list-style: none; margin: 16px 0 0; padding: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); overflow: hidden; }
.odi-item { display: grid; grid-template-columns: 92px minmax(0, 1fr) minmax(0, 260px) auto; gap: 8px 18px; padding: 14px 18px;
  border-bottom: 1px solid var(--border); align-items: start; }
.odi-item:last-child { border-bottom: none; }
.odi-item--corrigido { opacity: .55; }
.odi-item-data { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.odi-item-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.odi-valores { font-size: 12.5px; color: var(--text-sec); }
.odi-porque { font-size: 12.5px; color: var(--text-sec); overflow-wrap: anywhere; }
.odi-porque span { color: var(--text-muted); }
.odi-item-leitura { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12.5px; }
.odi-item-leitura .promo-ver { align-self: flex-start; }
.odi-contaminada { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; color: #f59e0b; }
.odi-contaminada svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.odi-item-acoes { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.dqd-manchete { margin: 16px 0 10px; padding: 14px 18px; border: 1px solid var(--border); border-left: 3px solid var(--border);
  border-radius: 12px; background: var(--bg-card); }
.dqd-manchete--queda { border-left-color: var(--red); }
.dqd-valores { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 15px; margin: 2px 0; color: var(--text-sec); }
.dqd-valores strong { font-size: 24px; color: var(--text); }
.dqd-pistas { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dqd-pista { padding: 9px 14px; border-radius: 10px; font-size: 13px; line-height: 1.5; border: 1px solid var(--border);
  border-left: 3px solid var(--border); background: var(--bg-subcard); color: var(--text); }
.dqd-pista--ruim { border-left-color: var(--red); }
.dqd-pista--ok { border-left-color: var(--green-strong, var(--green)); }
.dqd-pista--info { border-left-color: var(--blue, #3b82f6); }
.dqd-grafico { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); }
.dqd-grafico svg { width: 100%; height: 150px; display: block; }
.dqd-linha { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.dqd-linha--atual { stroke: #22b8cf; }
.dqd-linha--anterior { stroke: var(--text-muted); stroke-dasharray: 4 3; }
.dqd-marca { stroke: #f59e0b; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.dqd-marca--anterior { stroke-dasharray: 3 3; opacity: .7; }
.dqd-grafico figcaption { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 11.5px; color: var(--text-muted); margin-top: 6px; }
.dqd-leg { display: inline-block; width: 16px; height: 2px; margin-right: -8px; vertical-align: middle; }
.dqd-leg--atual { background: #22b8cf; }
.dqd-leg--anterior { border-top: 2px dashed var(--text-muted); height: 0; }
.dqd-leg--marca { width: 2px; height: 12px; background: #f59e0b; }
.dqd-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.dqd-bloco { margin-bottom: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); min-width: 0; }
.dqd-grade .dqd-bloco { margin-bottom: 0; }
.dqd-grade > .dqd-bloco:only-child { grid-column: 1 / -1; }
.dqd-bloco h4 { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-sec); }
.dqd-bloco-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.dqd-bloco-cab h4 { margin: 0; }
.dqd-grade + .dqd-bloco { margin-top: 14px; }
.dqd-fatores { display: flex; flex-direction: column; gap: 12px; }
.dqd-fator { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; }
.dqd-fator-rot { font-weight: 600; font-size: 13px; color: var(--text); }
.dqd-fator-val { font-size: 12.5px; color: var(--text-sec); grid-column: 1; }
.dqd-fator-ef { grid-column: 2; grid-row: 1 / span 2; font-weight: 700; font-size: 14px; text-align: right; }
.dqd-barra { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--bg-subcard); overflow: hidden; }
.dqd-barra span { display: block; height: 100%; border-radius: 3px; }
.dqd-barra .neg { background: var(--red); }
.dqd-barra .pos { background: var(--green-strong, var(--green)); }
.dqd-mudancas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dqd-mudancas li { padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; display: flex; flex-direction: column; gap: 3px; }
.dqd-mudancas li:last-child { border-bottom: none; }
@media (max-width: 900px) {
  .odi-item { grid-template-columns: minmax(0, 1fr); }
  .odi-item-acoes { flex-direction: row; flex-wrap: wrap; }
  .dqd-grade, .odi-campos-largos { grid-template-columns: minmax(0, 1fr); }
}

/* Meu dia (central diária). */
.dia-topo-acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dia-topo-acoes .sp-input { width: auto; }
.dia-data { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); }
.dia-data::first-letter { text-transform: uppercase; }
.dia-em-dia { display: flex; gap: 12px; align-items: center; margin: 14px 0 4px; padding: 14px 16px;
  border: 1px solid var(--border); border-left: 3px solid var(--green-strong, var(--green)); border-radius: 12px; background: var(--bg-card); }
.dia-em-dia svg { width: 22px; height: 22px; color: var(--green-strong, var(--green)); flex: none; }
.dia-secoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; align-items: start; }
.dia-secao { min-width: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); overflow: hidden; }
.dia-secao--atrasado, .dia-secao--hoje { grid-column: 1 / -1; }
.dia-secao-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px;
  background: var(--bg-subcard); border-bottom: 1px solid var(--border); }
.dia-secao-cab h3 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-sec); }
.dia-secao-n { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 10px; text-align: center;
  font-size: 11px; line-height: 18px; background: var(--bg-card); border: 1px solid var(--border); color: var(--text); }
.dia-secao--atrasado .dia-secao-n { background: rgba(239,68,68,.15); border-color: rgba(239,68,68,.35); color: var(--red); }
.dia-lista { list-style: none; margin: 0; padding: 0; }
.dia-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 16px; align-items: center;
  padding: 11px 18px; border-bottom: 1px solid var(--border); border-left: 3px solid transparent; }
.dia-item:last-child { border-bottom: none; }
.dia-item.dia-sev--alta { border-left-color: var(--red); }
.dia-item.dia-sev--media { border-left-color: #f59e0b; }
.dia-item-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dia-item-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.dia-item-tit { font-size: 13.5px; color: var(--text); overflow-wrap: anywhere; }
.dia-item-sub { font-size: 12px; color: var(--text-muted); overflow-wrap: anywhere; }
.dia-item-quando { font-size: 12.5px; color: var(--text-sec); text-align: right; white-space: nowrap; }
.dia-item-quando.dia-atraso { color: var(--red); font-weight: 600; }
.dia-tag-cliente { color: #f59e0b; border-color: rgba(245,158,11,.4); background: rgba(245,158,11,.1); }
.dia-item-acoes { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.dia-secao:not(.dia-secao--atrasado):not(.dia-secao--hoje) .dia-item { grid-template-columns: minmax(0, 1fr) auto; }
.dia-secao:not(.dia-secao--atrasado):not(.dia-secao--hoje) .dia-item-acoes { grid-column: 1 / -1; justify-content: flex-start; }
@media (max-width: 900px) {
  .dia-secoes { grid-template-columns: minmax(0, 1fr); }
  .dia-item { grid-template-columns: minmax(0, 1fr) auto; }
  .dia-item-acoes { grid-column: 1 / -1; justify-content: flex-start; }
}

/* Procedimentos operacionais. */
.prc-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.prc-card { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 14px 16px; min-width: 0;
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); color: var(--text); cursor: pointer; font: inherit; }
.prc-card:hover { border-color: var(--text-muted); }
.prc-card-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.prc-card-tit { font-size: 14px; overflow-wrap: anywhere; }
.prc-card-sum { font-size: 12px; color: var(--text-sec); overflow-wrap: anywhere; }
.prc-card-meta { font-size: 11px; color: var(--text-muted); margin-top: auto; }
.prc-titulo { margin: 14px 0 4px; font-size: 18px; color: var(--text); }
.prc-resumo { font-size: 13px; color: var(--text-sec); margin: 6px 0 0; }
/* Leitura de um procedimento: uma folha de documento, não texto solto na página. */
.prc-corpo {
  margin-top: 14px; padding: 22px 26px; max-width: 860px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  font-size: 14px; line-height: 1.65; color: var(--text); overflow-wrap: anywhere;
}
.prc-corpo > :first-child, .prc-corpo > .prc-h1:first-child, .prc-corpo > .prc-h2:first-child { margin-top: 0; }
.prc-corpo > :last-child { margin-bottom: 0; }
.prc-corpo p { margin: 0 0 12px; color: var(--text-sec); }
.prc-corpo strong { color: var(--text); font-weight: 600; }
.prc-corpo ul, .prc-corpo ol { margin: 0 0 14px; padding-left: 22px; color: var(--text-sec); }
.prc-corpo li { margin: 4px 0; }
.prc-corpo li::marker { color: var(--text-muted); }
.prc-corpo .prc-h1 {
  font-size: 16px; font-weight: 700; margin: 22px 0 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border); color: var(--text);
}
.prc-corpo .prc-h2 {
  font-size: 12px; font-weight: 700; margin: 18px 0 8px; color: var(--text-muted);
  letter-spacing: .06em; text-transform: uppercase;
}
/* Passos numerados: o número em círculo é o que o olho procura ao seguir a rotina. */
.prc-corpo ol { list-style: none; counter-reset: prc-passo; padding-left: 0; }
.prc-corpo ol > li { counter-increment: prc-passo; position: relative; padding-left: 34px; margin: 8px 0; }
.prc-corpo ol > li::before {
  content: counter(prc-passo); position: absolute; left: 0; top: 1px;
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: var(--text); background: var(--bg-subcard); border: 1px solid var(--border);
}
/* Checklist: cada passo é uma linha clicável, com o feito riscado. */
.prc-corpo ul.prc-check { list-style: none; padding-left: 0; display: flex; flex-direction: column; gap: 6px; }
.prc-corpo ul.prc-check li { margin: 0; }
.prc-corpo ul.prc-check label {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg-subcard); color: var(--text);
}
.prc-corpo ul.prc-check label:hover { border-color: var(--text-muted); }
.prc-corpo ul.prc-check input { margin-top: 4px; accent-color: var(--green, #22c55e); }
.prc-corpo ul.prc-check input:checked + span { color: var(--text-muted); text-decoration: line-through; }
.prc-corpo a { color: var(--blue-text, var(--blue)); text-decoration: underline; text-underline-offset: 2px; }
html.v2-on .prc-corpo { background: var(--panel); border-color: var(--sep); }
html.v2-on .prc-corpo .prc-h1, html.v2-on .prc-corpo ul.prc-check label, html.v2-on .prc-corpo ol > li::before { border-color: var(--sep); }
@media (max-width: 600px) { .prc-corpo { padding: 16px; } }
.prc-link { background: none; border: none; padding: 0; color: var(--blue-text, var(--blue)); cursor: pointer; font: inherit; }
.prc-versoes { margin: 6px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.7; }
.prc-versoes li { display: flex; gap: 8px; flex-wrap: wrap; }
.prc-texto { font-family: ui-monospace, Consolas, monospace; font-size: 13px; line-height: 1.5; }

/* Manual do sistema (/manual). */
.man-busca { margin: 14px 0; }
.man-busca .sp-input { width: 100%; max-width: 520px; }
.man-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; }
.man-toc { position: sticky; top: calc(var(--top-h, 64px) + 12px); max-height: calc(100vh - var(--top-h, 64px) - 24px); overflow-y: auto;
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); padding: 10px 12px; }
.man-toc summary { cursor: pointer; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.man-toc-grupo { margin: 12px 0 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.man-toc-item { display: block; padding: 4px 6px; border-radius: 6px; font-size: 13px; color: var(--text-sec); text-decoration: none; overflow-wrap: anywhere; }
.man-toc-item:hover { background: var(--bg-subcard); color: var(--text); }
.man-conteudo { min-width: 0; }
.man-grupo { margin: 26px 0 10px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.man-grupo:first-child { margin-top: 0; }
.man-secao { scroll-margin-top: calc(var(--top-h, 64px) + 12px); margin-bottom: 14px; padding: 16px 18px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); transition: border-color .4s; }
.man-secao.man-destaque { border-color: var(--primary); }
.man-secao-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.man-secao-cab h4 { margin: 0; font-size: 17px; color: var(--text); }
.man-resumo { margin: 8px 0 10px; font-size: 14px; color: var(--text-sec); line-height: 1.55; }
.man-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; margin: 0 0 14px; font-size: 12px; }
.man-meta dt { color: var(--text-muted); }
.man-meta dd { margin: 0; color: var(--text-sec); }
.man-blocos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 10px; }
.man-bloco { padding: 12px 14px; border-radius: 10px; background: var(--bg-subcard); min-width: 0; }
.man-bloco h5 { margin: 0 0 6px; font-size: 14px; color: var(--text); }
.man-bloco p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-sec); overflow-wrap: anywhere; }
.man-bloco strong, .man-resumo strong { color: var(--text); font-weight: 600; }
.man-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border);
  font-size: 11px; font-weight: 500; color: var(--text-muted); vertical-align: middle; }
.man-secao-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.man-sub { margin: 14px 0 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.man-passos { display: flex; flex-direction: column; gap: 6px; }
.man-passos .man-sub { margin-top: 0; }
.man-tarefa, .man-botoes { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; }
.man-tarefa summary, .man-botoes summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text); }
.man-tarefa ol, .man-botoes ol { margin: 8px 0 2px; padding-left: 22px; font-size: 13px; line-height: 1.6; color: var(--text-sec); }
.man-tarefa li, .man-botoes li { margin: 3px 0; }
.man-botoes { margin-top: 12px; }
.man-botoes strong { color: var(--text); font-weight: 600; }

/* Tour guiado ("Mostrar na tela"): por cima de tudo, inclusive dos modais. */
.man-tour-bloqueio { position: fixed; inset: 0; z-index: 100000; background: transparent; }
.man-tour-bloqueio.man-tour-escuro { background: rgba(0, 0, 0, .75); }
/* Janela aberta pela página (ex.: "Metas não configuradas") cobriria o elemento destacado:
   fica escondida durante o tour, sem ser fechada, e volta quando o tour termina. */
body.man-tour-on .goals-modal-overlay { visibility: hidden; }
.man-tour-foco { position: fixed; z-index: 100001; pointer-events: none; border: 2px solid var(--primary); border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .75); transition: top .2s, left .2s, width .2s, height .2s; }
.man-tour-balao { position: fixed; z-index: 100002; width: 360px; max-width: calc(100vw - 24px); padding: 14px 16px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); color: var(--text);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35); }
.man-tour-balao--centro { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.man-tour-balao h4 { margin: 4px 0 6px; font-size: 16px; }
.man-tour-balao p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-sec); }
.man-tour-balao strong { color: var(--text); }
.man-tour-cont { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.man-tour-acoes { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.man-tour-esp { flex: 1; }
@media (max-width: 900px) {
  .man-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .man-toc { position: static; max-height: none; }
}
@media (max-width: 600px) { .man-secao { padding: 14px; } }

/* Biblioteca de ações. */
.bib-filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 14px 0; }
.bib-filtros .bib-busca { flex: 1 1 260px; width: auto; }
.bib-filtros .bib-area { flex: 0 0 200px; width: 200px; }
.bib-barra { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--bg-subcard); margin: 10px 0 6px; }
.bib-b-ok  { background: var(--green-strong, var(--green)); }
.bib-b-neu { background: var(--text-muted); opacity: .45; }
.bib-b-mal { background: var(--red); }
.bib-nums { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-sec); }
.bib-nums strong { color: var(--text); }

/* Radar de oportunidades (Painel de Reunião). */
#pr-radar-wrap { grid-column: 1 / -1; }
.ord-lista { margin: 0; padding: 0; list-style: none; }
.ord-op { padding: 10px 0; border-bottom: 1px solid var(--border); }
.ord-op-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ord-op-tit { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.ord-op-val { flex: 0 0 auto; font-size: 15px; font-weight: 700; color: var(--green-strong, var(--green)); white-space: nowrap; }
.ord-op-val.is-sem { font-size: 12px; font-weight: 500; color: var(--text-muted); font-style: italic; }
.ord-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.ord-tag { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); font-size: 11px; color: var(--text-sec); }
.ord-esf-baixo, .ord-conf-alta { border-color: rgba(34,193,94,.35); color: var(--green-strong, var(--green)); }
.ord-esf-alto, .ord-conf-baixa { border-color: rgba(239,68,68,.35); color: var(--red); }
.ord-dep { border-style: dashed; }
.ord-txt { margin: 6px 0; font-size: 13px; color: var(--text-sec); }

/* Relatório executivo: opções no diálogo. */
.rex-form { display: flex; flex-direction: column; gap: 12px; }
.rex-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; }

/* Aprovações: filtro por situação acima da lista. */
.apv-filtros { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 14px; }

/* ---- Lista de solicitações ---- */
.prq-table .prq-code { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.prq-table td.num, .prq-table th.num { text-align: right; }
.prq-acoes { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

.prq-status-badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  background: var(--bg-subcard); color: var(--text-sec);
  border: 1px solid var(--border);
}
/* Ids do Perfex: 1 Não iniciada · 2 Aguardando feedback · 3 Em teste
   · 4 Em progresso · 5 Concluída. Cor só reforça o rótulo, nunca o substitui. */
.prq-st-2 { color: var(--yellow); border-color: var(--yellow); }
.prq-st-3 { color: var(--purple); border-color: var(--purple); }
.prq-st-4 { color: var(--blue-text); border-color: var(--blue-text); }
.prq-st-5 { color: var(--green); border-color: var(--green); }

/* ---- Sub-página: nova solicitação ---- */
.prq-mode { display: flex; gap: 8px; margin: 16px 0 20px; flex-wrap: wrap; }

.prq-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; margin-bottom: 16px;
}
.prq-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.prq-card-title { font-weight: 600; color: var(--text); }
.prq-card-x {
  background: none; border: 1px solid var(--border); color: var(--text-muted);
  border-radius: 8px; width: 30px; height: 30px; font-size: 18px; line-height: 1;
  cursor: pointer; flex-shrink: 0;
}
.prq-card-x:hover { color: var(--red); border-color: var(--red); }

.prq-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.prq-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.prq-field-full { grid-column: 1 / -1; }
.prq-field label { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.prq-req { color: var(--red); }
.prq-field input, .prq-field select, .prq-field textarea {
  width: 100%; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-subcard);
  color: var(--text); font-size: 14px; font-family: inherit;
}
.prq-field textarea { resize: vertical; }
.prq-field input:focus, .prq-field select:focus, .prq-field textarea:focus {
  outline: 2px solid var(--blue); outline-offset: 1px;
}

/* Variações: uma linha por variação, com o × alinhado à direita. */
.prq-vars { margin-top: 16px; border-top: 1px solid var(--separator); padding-top: 12px; }
.prq-vars-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px; font-size: 12px;
  color: var(--text-muted); font-weight: 600;
}
.prq-var {
  display: grid; gap: 8px; margin-bottom: 8px; align-items: center;
  grid-template-columns: 1.2fr 1.6fr 1fr .8fr .7fr auto;
}
.prq-var input {
  width: 100%; min-width: 0; padding: 7px 9px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-subcard);
  color: var(--text); font-size: 13px; font-family: inherit;
}
.prq-var-x {
  background: none; border: 1px solid var(--border); color: var(--text-muted);
  border-radius: 8px; width: 28px; height: 28px; font-size: 16px; line-height: 1; cursor: pointer;
}
.prq-var-x:hover { color: var(--red); border-color: var(--red); }

.prq-add-row { margin: 4px 0 20px; }

/* ---- Passos da planilha ---- */
.prq-steps { margin: 0 0 20px; padding-left: 20px; }
.prq-steps li { margin-bottom: 18px; color: var(--text-sec); }
.prq-steps li p { margin: 4px 0 10px; color: var(--text-muted); font-size: 13px; }
.prq-filename { margin-left: 10px; color: var(--text-sec); font-size: 13px; overflow-wrap: anywhere; }

/* ---- Erros e avisos da validação ---- */
.prq-erros, .prq-avisos {
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px;
  border: 1px solid var(--border); background: var(--bg-subcard);
}
.prq-erros  { border-color: var(--red); }
.prq-avisos { border-color: var(--yellow); }
.prq-erros-tit { margin: 0 0 8px; font-weight: 600; color: var(--text); }
.prq-erros ul, .prq-avisos ul { margin: 0; padding-left: 20px; }
.prq-erros li, .prq-avisos li { color: var(--text-sec); font-size: 13px; margin-bottom: 4px; }

.prq-preview-tit { margin: 0 0 10px; color: var(--text-sec); font-size: 13px; }
/* A prévia tem ~22 colunas: rolagem própria, para a página não rolar de lado. */
.prq-preview-table { font-size: 12px; white-space: nowrap; }
.prq-preview-table td, .prq-preview-table th { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

/* ---- Rodapé de envio ---- */
.prq-foot {
  border-top: 1px solid var(--separator); padding-top: 16px; margin-top: 8px;
}
.prq-foot label { display: block; font-size: 12px; color: var(--text-muted); font-weight: 600; margin-bottom: 4px; }
.prq-foot textarea {
  width: 100%; padding: 8px 10px; border-radius: 8px; resize: vertical;
  border: 1px solid var(--border); background: var(--bg-subcard);
  color: var(--text); font-size: 14px; font-family: inherit;
}
.prq-foot-actions {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 14px; margin-top: 12px; flex-wrap: wrap;
}
.prq-status { font-size: 13px; color: var(--text-muted); }
.prq-status-ok   { color: var(--green); }
.prq-status-erro { color: var(--red); }
#prq-submit[disabled] { opacity: .55; cursor: not-allowed; }

/* ---- Detalhe da solicitação (modal) ---- */
.prq-det-status { display: block; margin: 0 0 14px; color: var(--text-sec); font-size: 13px; }
.prq-det-status select {
  padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg-subcard); color: var(--text); font-family: inherit;
}
.prq-det-notes { color: var(--text-sec); font-size: 13px; margin: 0 0 14px; }
.prq-det-item {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 10px;
}
.prq-det-head { margin-bottom: 8px; color: var(--text); overflow-wrap: anywhere; }
.prq-det-grid {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  font-size: 13px; color: var(--text-muted);
}
.prq-det-link { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--blue-text); }
.prq-det-vars { margin: 10px 0 0; padding-left: 20px; font-size: 13px; color: var(--text-sec); }
.prq-det-vars li { margin-bottom: 3px; overflow-wrap: anywhere; }

/* ---- Cliente final no formulário de usuário ---- */
.cliente-final-group #cliente-final-wrap { margin-top: 12px; }
.cliente-final-group select {
  width: 100%; max-width: 420px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-subcard);
  color: var(--text); font-family: inherit;
}
.cliente-final-group .perm-item-hint { margin-top: 8px; display: block; }

@media (max-width: 720px) {
  /* Empilha a variação: seis colunas num celular viram seis campos ilegíveis. */
  .prq-var { grid-template-columns: 1fr auto; }
  .prq-var input { grid-column: 1; }
  .prq-var-x { grid-column: 2; grid-row: 1; }
  .prq-acoes { justify-content: flex-start; }
  .pc-solic-head { flex-direction: column; align-items: stretch; }
}

/* Sugestões de melhoria da conta (IA) — card entre o período e o gráfico.
   <details> nativo, como a nota de cálculo: recolhido por padrão para não
   empurrar o gráfico, e o resumo diz de relance se há lista e de quando é. */
.ai-sug {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.ai-sug > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
  padding: 14px 20px; border-radius: 14px;
}
.ai-sug > summary::-webkit-details-marker { display: none; }
.ai-sug > summary::before {
  content: ''; flex: 0 0 auto;
  width: 0; height: 0;
  border-left: 6px solid var(--text-sec);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transition: transform .15s;
}
.ai-sug[open] > summary::before { transform: rotate(90deg); }
.ai-sug-titulo {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: var(--text);
}
.ai-sug-titulo .ico { width: 16px; height: 16px; }
.ai-sug-meta { font-size: 12px; color: var(--text-muted); }
.ai-sug-corpo { border-top: 1px solid var(--separator); padding: 12px 20px 16px; }
.ai-sug-barra {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px 16px;
}
.ai-sug-cota { font-size: 12px; color: var(--text-sec); }
.ai-sug-barra .btn { margin-left: auto; }
.ai-sug-msg {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 13px; color: var(--text-sec);
}
.ai-sug-msg:not(:empty) { margin-top: 10px; }
.ai-sug-lista {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  /* Lista longa (12 a 15): rola por dentro do card. A altura de 3 linhas é
     medida no JS (aiSugFitRows), porque o card muda de altura com o texto. */
  max-height: 480px; overflow-y: auto; padding-right: 4px;
  overscroll-behavior: contain; align-content: start;
}
.ai-sug-lista:empty { display: none; }
/* Três sugestões por linha (duas em tela média), cada uma um card enxuto: o que fazer em destaque e
   o dado que justifica abaixo. A prioridade fica só no rótulo; a borda colorida
   é reservada para a sugestão ACEITA, para que ela salte na lista. */
.ai-sug-item {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--bg-subcard);
  border: 1px solid var(--separator);
  border-radius: 10px;
  padding: 8px 12px;
  transition: opacity .2s, transform .2s, border-color .2s;
}
.ai-sug-item.ai-sug-aceita { border-color: var(--green); }
.ai-sug-item.ai-sug-saindo { opacity: .35; transform: scale(.98); }
.ai-sug-item-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 26px; }
.ai-sug-prio {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-muted);
}
.ai-sug-prio-alta  .ai-sug-prio { color: var(--red); }
.ai-sug-prio-media .ai-sug-prio { color: var(--orange); }
.ai-sug-area { font-size: 11px; color: var(--text-muted); }
/* Selo de procedência da sugestão vinda do aprendizado entre contas. A cor carrega o
   peso da evidência: medido em contas parecidas (verde), lacuna observada (azul) e
   hipótese de outro segmento (cinza, de propósito discreta — não é receita). */
.ai-sug-evid-comprovado,
.ai-sug-evid-observado,
.ai-sug-evid-hipotese {
  font-weight: 600; padding: 1px 6px; border-radius: 999px;
  border: 1px solid var(--separator); cursor: help;
}
.ai-sug-evid-comprovado { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.ai-sug-evid-observado  { color: var(--blue);  border-color: color-mix(in srgb, var(--blue) 40%, transparent); }
.ai-sug-evid-hipotese   { color: var(--text-muted); }

/* ---- Aba "Padrões entre contas" (/configuracoes/aprendizado-ia, só admin) ---- */
.ai-bench-resumo {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 12px;
  font-size: 12px; color: var(--text-sec);
}
.ai-bench-tier {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-muted);
}
.ai-bench-tier-boa  { color: var(--green); }
.ai-bench-tier-ruim { color: var(--red); }
.ai-bench-seg {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 8px 0; font-size: 12px; color: var(--text-sec);
}
.ai-bench-seg-input { max-width: 220px; }
.ai-bench-bloco { margin-top: 8px; font-size: 12px; color: var(--text-sec); }
.ai-bench-bloco strong { display: block; margin-bottom: 3px; color: var(--text-pri); font-size: 11px; }
.ai-bench-bloco ul { margin: 0; padding-left: 16px; }
.ai-bench-bloco li { margin-bottom: 3px; }
/* O proibido tem de saltar aos olhos: é a única linha da tela que descreve algo que a IA
   não pode mais sugerir, e é por ela que o admin confere se a trava está certa. */
.ai-bench-proibido { color: var(--red); font-weight: 700; text-transform: uppercase; }
.ai-sug-selo {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; color: var(--green);
}
.ai-sug-votos { margin-left: auto; display: inline-flex; gap: 4px; }
.ai-sug-voto {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 26px; padding: 0;
  background: none; border: 1px solid var(--separator); border-radius: 7px;
  color: var(--text-sec); cursor: pointer; font: inherit;
}
.ai-sug-voto .ico { width: 15px; height: 15px; }
.ai-sug-voto[data-voto="up"]:hover, .ai-sug-voto.ativo { color: var(--green); border-color: var(--green); }
.ai-sug-voto[data-voto="down"]:hover { color: var(--red); border-color: var(--red); }
.ai-sug-voto:disabled { opacity: .5; cursor: default; }
.ai-sug-voto.ativo-ruim { color: var(--red); border-color: var(--red); }
/* Recusa com motivo: o texto do gerente é o que ensina a IA. */
.ai-sug-recusa { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.ai-sug-recusa-rotulo { font-size: 12px; font-weight: 600; color: var(--text); }
.ai-sug-recusa-rotulo span { display: block; font-weight: 400; color: var(--text-muted); }
.ai-sug-motivo {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 52px;
  font: inherit; font-size: 13px; color: var(--text);
  background: var(--bg-card, transparent); border: 1px solid var(--separator); border-radius: 8px; padding: 6px 8px;
}
.ai-sug-motivo:focus { outline: none; border-color: var(--accent, var(--green)); }
.ai-sug-recusa-botoes { display: flex; gap: 6px; flex-wrap: wrap; }

/* Página /configuracoes/aprendizado-ia */
.ai-learn-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ai-learn-item {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--bg-subcard); border: 1px solid var(--separator); border-radius: 10px; padding: 10px 14px;
}
.ai-learn-item.ai-learn-removido { opacity: .6; }
.ai-learn-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.ai-learn-voto { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; }
.ai-learn-voto .ico { width: 14px; height: 14px; }
.ai-learn-boa { color: var(--green); }
.ai-learn-ruim { color: var(--red); }
.ai-learn-btn { margin-left: auto; }
.ai-learn-motivo {
  margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--text);
  border-left: 3px solid var(--separator); padding-left: 8px;
}
@media (max-width: 600px) {
  .ai-learn-btn { margin-left: 0; }
}
.ai-sug-item-titulo { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.35; }
.ai-sug-item-acao { font-size: 13px; line-height: 1.45; color: var(--text-sec); }
.ai-sug-item-porque { font-size: 12px; line-height: 1.4; color: var(--text-muted); }
@media (max-width: 1180px) {
  .ai-sug-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ai-sug-lista { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .ai-sug > summary, .ai-sug-corpo { padding-left: 14px; padding-right: 14px; }
  .ai-sug-barra .btn { margin-left: 0; }
}

/* Card de análise da publicidade pela IA (dentro da seção de Publicidade).
   Reaproveita a casca do .ai-sug; só muda o encaixe: fica abaixo dos cards de
   métricas, dentro de uma seção que já tem fundo e borda próprios. */
.ads-ai { margin: 16px 20px 4px; }
.ads-ai-out:empty { display: none; }
.ads-ai-out .ai-h { font-weight: 700; margin: 12px 0 4px; color: var(--text); }
.ads-ai-out p { margin: 6px 0; }
.ads-ai-out ul { margin: 6px 0 8px 18px; }
.ads-ai-out li { margin: 3px 0; }
/* Pontos positivos em verde, negativos em vermelho (classes postas por adsAiHighlight).
   A cor vem das variáveis do tema, então vale no claro e no escuro; a faixa lateral
   existe porque cor sozinha não é sinal acessível. */
.ads-ai-out .ads-ai-titulo.ads-ai-pos { color: var(--green); }
.ads-ai-out .ads-ai-titulo.ads-ai-neg { color: var(--red); }
.ads-ai-out ul.ads-ai-pos, .ads-ai-out ul.ads-ai-neg,
.ads-ai-out p.ads-ai-pos, .ads-ai-out p.ads-ai-neg {
  margin-left: 0; padding: 6px 10px 6px 14px;
  border-left: 3px solid var(--border); border-radius: 0 8px 8px 0;
}
.ads-ai-out ul.ads-ai-pos, .ads-ai-out p.ads-ai-pos {
  border-left-color: var(--green); background: rgba(var(--green-rgb), .08);
}
.ads-ai-out ul.ads-ai-neg, .ads-ai-out p.ads-ai-neg {
  border-left-color: var(--red); background: rgba(var(--red-rgb), .08);
}
.ads-ai-out ul.ads-ai-pos { padding-left: 28px; }
.ads-ai-out ul.ads-ai-neg { padding-left: 28px; }
.ads-ai-out ul.ads-ai-pos li::marker { color: var(--green); }
.ads-ai-out ul.ads-ai-neg li::marker { color: var(--red); }
@media (max-width: 600px) {
  .ads-ai { margin: 14px 14px 4px; }
}

/* ─── Auditoria de Publicidade (assets/modulos/ads.js) ──────────────────────
   Só o que não existia. Cartões (.card-stat), tabela (.top-prod-table) e avisos
   (.items-api-note) são reusados do painel para a aba não divergir do resto da
   página no primeiro ajuste de tema. */

.ads-tab-panel { padding: 0 20px 18px; }
.ads-audit-topo .summary-cards { padding-left: 0; padding-right: 0; }

.ads-audit-nota {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}
.ads-audit-nota strong { color: var(--text); font-weight: 600; }
.ads-audit-nota em { opacity: .85; }

/* Selo do veredito. Três estados só: o que está bom, o que pede atenção e o que
   está queimando dinheiro. Um quarto tom tornaria a tabela ilegível de longe. */
.ads-chip {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--bg-soft, rgba(148,163,184,.14));
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.ads-chip--ok      { background: rgba(34,193,94,.12);  color: var(--green-strong); border-color: rgba(34,193,94,.3); }
.ads-chip--atencao { background: rgba(245,158,11,.14); color: #b45309;             border-color: rgba(245,158,11,.32); }
.ads-chip--ruim    { background: rgba(239,68,68,.12);  color: var(--red);          border-color: rgba(239,68,68,.3); }

.card-stat.ads-card--atencao { border-left-color: var(--red); }

/* Ritmo da verba */
.ads-audit-ritmo {
  margin: 16px 0 6px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
}
.ads-audit-ritmo-cab {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.ads-audit-barra {
  height: 8px;
  border-radius: 999px;
  background: var(--bg-soft, rgba(148,163,184,.18));
  overflow: hidden;
}
.ads-audit-barra > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--blue);
  transition: width .3s;
}

/* Tabela */
.ads-audit-ordem {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 18px 0 10px;
  font-size: 13px;
  color: var(--text-muted);
}
.ads-audit-titulo { font-weight: 600; }
.ads-audit-sub    { font-size: 12px; color: var(--text-muted); }
/* O motivo do achado fica na própria linha: mandar o gerente abrir um detalhe
   para saber POR QUE o anúncio está na lista é o que faz a fila não ser usada. */
.ads-audit-motivo {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 46ch;
}

/* Proposta de realocação */
.ads-audit-plano { margin-top: 18px; }
.ads-audit-plano > summary {
  cursor: pointer;
  font-weight: 600;
  padding: 10px 0;
}
.ads-audit-plano h4 { margin: 12px 0 6px; font-size: 14px; }
.ads-audit-lista { margin: 0 0 8px; padding-left: 20px; font-size: 13px; line-height: 1.7; }

@media (max-width: 600px) {
  .ads-tab-panel { padding: 0 14px 14px; }
  .ads-audit-motivo { max-width: none; }
}

/* ─── Prioridades: a fila de trabalho (assets/modulos/fila.js) ──────────────
   Cartões (.card-stat) e avisos reusados do painel. O que é novo aqui é a
   LINHA da fila, que precisa ser escaneável: o gerente passa o olho de cima
   para baixo e para no primeiro item que reconhece. */

.fila-intro {
  color: var(--text-muted);
  font-size: 13px;
  margin: -4px 0 16px;
  max-width: 70ch;
}
.fila-cards { padding-left: 0; padding-right: 0; }
.card-stat.fila-card--critico  { border-left-color: var(--red); }
.card-stat.fila-card--dinheiro { border-left-color: var(--green-strong); }

/* Filtros */
.fila-filtros {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 18px 0 14px;
  font-size: 13px;
}
.fila-filtros-rot { color: var(--text-muted); }
.fila-filtros-sep {
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 4px;
}

/* Grupos por cliente */
.fila-grupo { margin-bottom: 22px; }
.fila-grupo-cab {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.fila-grupo-cab h3 { margin: 0; font-size: 15px; }
.fila-grupo-meta { font-size: 12px; color: var(--text-muted); }

/* A linha. A faixa colorida à esquerda é a gravidade: é por ela que se varre a
   lista sem ler, e por isso ela é a única cor forte do item. */
.fila-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 16px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
  transition: border-color .2s, box-shadow .2s;
}
.fila-item:hover { box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.fila-sev--alta  { border-left-color: var(--red); }
.fila-sev--media { border-left-color: #f59e0b; }
.fila-sev--baixa { border-left-color: var(--text-muted); }

.fila-item-corpo { flex: 1 1 420px; min-width: 0; }
.fila-item-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.fila-canal, .fila-estado, .fila-dono {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-soft, rgba(148,163,184,.12));
}
.fila-loja { font-weight: 600; color: var(--text); }
.fila-titulo {
  margin: 2px 0 4px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.fila-motivo {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 78ch;
}
.fila-item-rodape {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-muted);
}
.fila-impacto { color: var(--text); }
.fila-prazo   { color: var(--red); }

.fila-item-acoes {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}
.fila-vazio-dica { font-size: 13px; color: var(--text-muted); margin-top: 6px; }

@media (max-width: 760px) {
  .fila-item { gap: 10px; }
  .fila-item-acoes { width: 100%; }
  .fila-motivo { max-width: none; }
}

/* Título do anúncio na Auditoria: link para a página do produto. Herda a cor do
   texto e só se revela no hover — sublinhar 30 linhas de uma tabela transformaria
   a lista num borrão azul e tiraria o destaque de quem importa, que é o veredito. */
.ads-audit-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--border);
}
.ads-audit-link:hover,
.ads-audit-link:focus-visible {
  color: var(--accent, var(--green-strong));
  border-bottom-color: currentColor;
}

/* ─── Central de Promoções (assets/modulos/promocoes.js) ────────────────────
   A decisão aqui é POR CAMPANHA, então o cartão é a unidade — e não a linha de
   tabela. A faixa colorida à esquerda é a situação: é por ela que se varre a
   lista sem ler, e por isso é a única cor forte do cartão. */

.promo-cards { padding-left: 0; padding-right: 0; }
.card-stat.promo-card--urgente { border-left-color: var(--red); }

.promo-filtros {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 16px 0 14px;
  font-size: 13px;
}

.promo-item {
  padding: 14px 16px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
}
.promo-sit--urgente { border-left-color: var(--red); }
.promo-sit--atencao { border-left-color: #f59e0b; }
.promo-sit--ok      { border-left-color: var(--green-strong); }

.promo-item-cab { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.promo-nome { margin: 0 0 4px; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.promo-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-muted);
}
.promo-sit {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-soft, rgba(148,163,184,.12));
  font-weight: 600;
}
.promo-prazo { color: var(--text); font-weight: 600; }

.promo-numeros {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-muted);
}
.promo-numeros strong { color: var(--text); }
.promo-cabe strong    { color: var(--green-strong); }
.promo-naocabe strong { color: var(--red); }

.promo-banca { margin: 8px 0 0; font-size: 13px; color: var(--text-muted); }

.promo-itens { margin-top: 10px; }
.promo-itens > summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--text-muted);
  padding: 6px 0;
}
.promo-itens > summary:hover { color: var(--text); }

@media (max-width: 700px) {
  .promo-numeros { gap: 10px; }
}

/* Cobertura de estoque na Central de Promoções. O inscrito em risco é o único
   caso em vermelho forte: é compromisso com o canal que vai ser quebrado. */
.promo-estoque { margin: 8px 0 0; font-size: 13px; color: var(--text-muted); }
.promo-estoque--risco { color: var(--red); }
.promo-estoque--risco strong { color: var(--red); }
.promo-estoque--ok { color: var(--green-strong); }
.promo-estoque--sem { font-style: italic; }

.promo-cob {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.promo-cob--ok    { color: var(--green-strong); border-color: rgba(34,193,94,.3); }
.promo-cob--risco { color: var(--red); border-color: rgba(239,68,68,.3); }

/* Resultado das campanhas que já rodaram. "Vendeu mais, ganhou menos" tem cor
   própria, mais forte que "piorou": é a armadilha que a tela existe para mostrar,
   e confundi-la com uma piora comum apagaria o recado. */
.promo-resultados { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border); }
/* Blocos que os módulos inserem logo abaixo do cabeçalho de uma página (Pedidos,
   Catálogo): o cabeçalho já tem a linha de baixo, e a borda do bloco a dobrava. */
.product-page-header + .promo-resultados { border-top: none; margin-top: 4px; padding-top: 4px; }
/* Blocos da página de Pedidos (reputação, risco, cancelamentos, devoluções):
   cartões de seção como o resto do painel, com cabeçalho em faixa própria —
   soltos na página, separados só por uma linha, liam como texto corrido. */
.promo-resultados:is(.order-reputation, .order-risk, .order-cancel, .order-returns) {
  margin: 0 0 16px; padding: 0 0 16px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--bg-card); box-shadow: 0 2px 10px rgba(0,0,0,.2); overflow: hidden; min-width: 0;
}
.promo-resultados:is(.order-reputation, .order-risk, .order-cancel, .order-returns):empty { display: none; }
.promo-resultados:is(.order-reputation, .order-risk, .order-cancel, .order-returns) > * { margin-left: 20px; margin-right: 20px; }
.promo-resultados:is(.order-reputation, .order-risk, .order-cancel, .order-returns) > .promo-res-cab {
  margin: 0 0 14px; padding: 12px 20px; min-height: 50px;
  background: var(--bg-subcard); border-bottom: 1px solid var(--border);
}
.promo-resultados:is(.order-reputation, .order-risk, .order-cancel, .order-returns) > .promo-res-cab h3 {
  font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-sec);
}
.promo-resultados:is(.order-reputation, .order-risk, .order-cancel, .order-returns) > .ads-audit-nota {
  margin-top: 12px; padding: 10px 14px; border-radius: 8px;
  background: var(--bg-subcard); border: 1px solid var(--border); font-size: 12.5px;
}
.promo-resultados:is(.order-reputation, .order-risk, .order-cancel, .order-returns) > .promo-numeros { margin-top: 0; }
.promo-resultados:is(.order-reputation, .order-risk, .order-cancel, .order-returns) > .table-scroll {
  border: 1px solid var(--border); border-radius: 10px;
}
.promo-resultados:is(.order-reputation, .order-risk, .order-cancel, .order-returns) .loading-state { margin: 0; }
/* Dois cartões por linha: a página de Pedidos vira grade e tudo que não é um
   desses cartões (cabeçalho, filtros, resumo, lista) ocupa a linha inteira. */
:is(#ml-orders-page, #shopee-orders-page, #magalu-orders-page) {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; align-items: stretch;
}
:is(#ml-orders-page, #shopee-orders-page, #magalu-orders-page) > * { grid-column: 1 / -1; min-width: 0; }
:is(#ml-orders-page, #shopee-orders-page, #magalu-orders-page) > .promo-resultados:is(.order-reputation, .order-risk, .order-cancel, .order-returns) {
  grid-column: auto;
}
@media (max-width: 900px) {
  :is(#ml-orders-page, #shopee-orders-page, #magalu-orders-page) { grid-template-columns: minmax(0, 1fr); }
}
.catalog-audit { margin-bottom: 22px; }
/* Na página própria (/saude) o bloco vem logo abaixo do cabeçalho, que já tem a linha. */
.catalog-audit:first-child { border-top: none; margin-top: 4px; padding-top: 4px; }
/* Planejamento de estoque (Onda 5): criado por JS como primeiro filho da aba de
   estoque, que não tem padding próprio — cada seção da aba cuida do seu. */
.stock-plan { margin-top: 0; padding: 16px 20px 18px; border-top: 1px solid var(--border); border-bottom: none; }
.stock-plan .ml-tab-nav { margin: 10px 0 12px; }
.stock-plan .promo-item { margin-top: 10px; }
.sp-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px 14px; margin: 12px 0; align-items: end; }
.sp-campo { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text-sec); }
.sp-input {
  width: 100%; padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-subcard);
  color: var(--text); font-size: 13px; font-family: inherit;
}
.sp-input:focus { border-color: var(--blue); outline: none; }
.sp-qtd { width: 90px; text-align: right; }
.sp-acoes { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.promo-res-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.promo-res-cab h3 { margin: 0; font-size: 15px; }

.promo-ver {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.promo-ver--ok        { color: var(--green-strong); border-color: rgba(34,193,94,.3);  background: rgba(34,193,94,.10); }
.promo-ver--ruim      { color: var(--red);          border-color: rgba(239,68,68,.3);  background: rgba(239,68,68,.08); }
.promo-ver--armadilha { color: #fff;                border-color: var(--red);          background: var(--red); }
.promo-ver--sem       { font-weight: 500; font-style: italic; }

.promo-pos { color: var(--green-strong); }
.promo-neg { color: var(--red); }
.promo-nowrap { white-space: nowrap; }

/* Liquidação: a etapa em vigor é destacada na tabela do plano — é a única linha
   que importa para a decisão de hoje. */
.promo-piso { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); }
.promo-piso select { font-size: 13px; }
.promo-etapa-atual td { background: rgba(182,242,74,.08); }

/* Simulador de promoção avulso (ideia 8) */
.promo-sim-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin: 10px 0 14px; }
.promo-sim-campo { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); }
.promo-sim-campo input { width: 120px; font-size: 13px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-subcard); color: var(--text); }
.promo-sim-campo--largo { flex: 1 1 320px; }
.promo-sim-campo--largo input { width: 100%; }
.promo-sim-ajustes { flex: 1 1 100%; font-size: 13px; }
.promo-sim-ajustes summary { cursor: pointer; color: var(--text-muted); }
.promo-sim-linha { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 8px; }
.promo-sim-acoes { display: flex; align-items: flex-end; }
@media (max-width: 640px) {
  .promo-sim-campo input { width: 100%; }
  .promo-sim-campo { flex: 1 1 calc(50% - 14px); }
}

/* Perfex opcional: sem Perfex (index.php marca body[data-perfex="0"]), some tudo o
   que só existe com ele — menu, painéis de tarefas, vínculo de projetos. */
body[data-perfex="0"] .so-perfex { display: none !important; }
/* O par do so-perfex: texto que só vale sem Perfex (a versão sem citar o CRM). */
body:not([data-perfex="0"]) .sem-perfex { display: none !important; }