/* Convenção backdrop-filter: só usar sobre fundo translúcido de verdade
   (rgba/hsla com alpha < 1, ou gradiente cujas paradas tenham alpha < 1
   — inclusive a última parada/camada de baixo, senão o composto final
   fica opaco mesmo com camadas translúcidas por cima). Sobre fundo 100%
   opaco o backdrop-filter não muda nada visualmente em navegador
   correto, mas já causou um bug real de texto do próprio elemento
   borrado/ilegível em WebView Android (visto ao vivo em .auth-submit).
   IMPORTANTE (descoberto depois que a 1ª correção — só no .auth-submit —
   não segurou e o bug voltou): o mesmo bug acontece em texto de um
   elemento FILHO quando existe backdrop-filter em qualquer ANCESTRAL
   dele, mesmo que o próprio elemento não tenha backdrop-filter nenhum —
   foi o caso de .auth-gate/.auth-card, ancestrais do botão, que também
   tiveram que perder o backdrop-filter.
   2ª reincidência (.pf-modal-backdrop, 2026-08-25): dessa vez nem era
   ancestral — .pf-modal-backdrop e .pf-modal-card são IRMÃOS (mesmo pai
   .pf-modal), e o botão dourado dentro do card ficou ilegível mesmo assim.
   Ou seja, o escopo real do bug é o STACKING CONTEXT/overlay inteiro, não
   só a cadeia de ancestrais — qualquer backdrop-filter dentro do mesmo
   .pf-modal (ou .auth-gate) é suspeito, irmão ou ancestral. Antes de copiar
   um backdrop-filter existente pra um componente novo, confirme (a) que o
   background dele é translúcido de verdade E (b) que nenhum elemento com
   texto importante (botão, label) compartilha o mesmo overlay/stacking
   context, nem como filho nem como irmão. */
  :root{
    --bg: #12151A;
    --bg-2: #0D0F13;
    --panel: #1A1F26;
    --panel-2: #212832;
    --line: #2C333D;
    --line-soft: #232A33;
    --text: #EDEBE3;
    --text-dim: #8B93A0;
    --text-faint: #5C636E;
    --accent: #F2B705;
    --accent-deep: #B98600;
    --accent-soft: rgba(242,183,5,0.12);
    --steel: #4F9AC0;
    --steel-soft: rgba(79,154,192,0.14);
    --good: #4FAE7C;
    --good-soft: rgba(79,174,124,0.14);
    --bad: #E1595A;
    --bad-soft: rgba(225,89,90,0.14);
    --warn: #E1943C;
    --radius: 16px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{
    background:
      repeating-linear-gradient(180deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 7px),
      var(--bg);
    color: var(--text);
    font-family: 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
  }
  body.auth-locked{ overflow:hidden; }
  ::selection{ background: var(--accent-soft); }
  .mono{ font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; }
  .hidden{ display:none !important; }
  .wrap{ max-width: 1680px; margin: 0 auto; padding: 0 28px 80px; }

  /* ---------- Header ---------- */
  header.top{
    background: linear-gradient(180deg, var(--bg-2), var(--bg));
    border-bottom: 1px solid var(--line);
    position: relative;
    overflow: hidden;
  }
  header.top::before{
    content:"";
    position:absolute; inset:0;
    background: repeating-linear-gradient(100deg, transparent 0 38px, rgba(242,183,5,0.035) 38px 40px);
    pointer-events:none;
  }
  .top-inner{
    max-width:1680px; margin:0 auto; padding: 30px 14px 24px 28px;
    display:flex; align-items:flex-end; justify-content:space-between; gap: 24px;
    position:relative; z-index:1; flex-wrap:wrap;
  }
  .brand{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    flex-wrap:nowrap;
    margin-top:12px;
  }
  .brand-logos{
    display:flex;
    align-items:center;
    gap:8px;
    flex-shrink:0;
  }
  .brand-logo-main{
    height:84px;
    width:auto;
    display:block;
    flex-shrink:0;
  }
  /* Selo 33 anos no meio do topo (18/09/2026). */
  .brand-selo-33{
    position:absolute; left:45%; top:10px; transform:translateX(-50%);
    height:124px; width:auto; pointer-events:none;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.45));
  }
  @media (max-width: 1300px){ .brand-selo-33{ display:none; } }
  .brand-mark{
    /* 60 -> 80px (18/09/2026) -> 104px (23/09/2026), sempre o mesmo pedido:
       "deixe maior a logo". Passa da logo principal (84px) de proposito — e a
       marca de Telhas Metalicas que o usuario quer em destaque. */
    height:104px; width:auto; flex-shrink:0; display:block;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
  }
  .brand-text .name{
    font-family:'Oswald'; font-weight:600; font-size:22px; letter-spacing:0.04em;
    text-transform:uppercase; line-height:1;
  }
  .brand-text{ margin-left:0; text-align:center; }
  .brand-text .tag{ font-size:11.5px; color:var(--text-dim); letter-spacing:0.06em; margin-top:4px; text-transform:uppercase;}
  .telhas-logo-img{
    margin-left:0;
    width:auto;
    height:95.3px;
    display:block;
    filter: drop-shadow(0 8px 14px rgba(0,0,0,0.24));
    flex-shrink:0;
  }
  .period{
    margin-left:auto;
    margin-right:-2px;
    text-align:right;
  }
  .period .eyebrow{ font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); font-weight:600; }
  .period .value{ font-family:'Oswald'; font-size:30px; font-weight:600; letter-spacing:0.02em; margin-top:2px;}
  .period .sub{ font-size:13px; color:var(--text-faint); margin-top:2px;}
  .excel-btn{
    margin-top:10px;
    border:1px solid var(--line);
    background:var(--panel-2);
    color:var(--text);
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    letter-spacing:0.02em;
    padding:7px 10px;
    border-radius:8px;
    cursor:pointer;
  }
  .excel-btn:hover{ border-color:var(--accent); color:var(--accent); }
  /* Assinatura "POWERED BY" em linha propria, logo acima da fileira de
     atalhos (2026-09-03). Alinhada a direita como o resto da coluna do
     cabecalho; sem margem inferior porque a .logout-powered-row logo abaixo
     ja tem margin-top. */
  /* A assinatura mora na .header-utility-row, junto do "Importar Excel do
     mês". A linha é justify-content:flex-end (os botões encostam à direita);
     margin-right:auto joga a assinatura pro canto esquerdo e come o espaço
     vazio do meio, em vez de ficar colada nos botões. flex-shrink deixa ela
     ceder primeiro se a janela apertar — a linha é nowrap, e quem tem que
     continuar inteiro ali é o botão, não a assinatura. */
  /* 18/09/2026: pedido "o power jogue para a direita" — margin-right:0 deixa
     a assinatura encostada nos botões (Reunião / Importar) em vez do canto
     esquerdo; o meio do topo agora é do selo 33 anos. */
  .header-utility-row #poweredSignature{
    margin-right:0;
    flex:0 1 auto;
    min-width:0;
  }
  .logout-powered-row{
    margin-top:10px;
    display:flex;
    justify-content:flex-start;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
  }
  .logout-powered-row .logout-btn{
    margin-left:auto;
  }
  .logout-powered-row .excel-btn{
    margin-top:0;
  }
  /* Botão Claro/Escuro (19/09/2026), logo abaixo do Sair, à direita. */
  .tema-toggle-row{ display:flex; justify-content:flex-end; margin-top:8px; }
  .tema-toggle-row .tema-toggle-btn{
    margin-top:0; padding:6px 14px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:0.03em;
  }
  .gpd-access-card{
    display:inline-block;
    text-decoration:none;
    border-color: rgba(242,183,5,0.35);
    color: var(--accent);
  }
  .gpd-access-card:hover{
    background: var(--accent-soft);
  }
  /* Liquid-glass gold badge, matches the .seller-kpi / green-pill glass treatment used elsewhere in this file */
  .gpd-access-card-lg{
    font-size:16px;
    font-weight:800;
    padding:11px 22px;
    letter-spacing:0.04em;
    border-radius:999px;
    color:var(--text);
    border:1px solid rgba(242,183,5,0.35);
    background:linear-gradient(180deg, rgba(242,183,5,0.20), rgba(242,183,5,0.05));
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 4px 10px rgba(0,0,0,0.2);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  }
  .gpd-access-card-lg:hover{
    background:linear-gradient(180deg, rgba(242,183,5,0.28), rgba(242,183,5,0.08));
    transform: translateY(-1px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.12),
      0 6px 14px rgba(0,0,0,0.26);
  }
  /* 3ª reincidência do bug de texto dourado "apagado" (ver nota grande no
     topo deste arquivo): aqui não tem ::after decorativo nenhum — o
     próprio .gpd-access-card-lg tem backdrop-filter, e "GPD"/"Almoxarifado"/
     "Produção" eram texto solto (sem wrapper) dentro do elemento com o
     blur. Sem promover o texto pra sua própria camada de composição
     (position:relative + z-index), o Chromium pode rasterizar o texto
     JUNTO com o backdrop-filter do próprio elemento e ele sai borrado/
     lavado — mesmo mecanismo do .auth-submit, causa diferente (aqui é
     backdrop-filter direto no elemento, lá era ::after cobrindo por cima).
     Todo <a>/<button> com .gpd-access-card-lg PRECISA de <span> em volta
     do texto visível. */
  .gpd-access-card-lg span{ position:relative; z-index:1; }
  /* Contagem de estoque baixo colada no atalho "Almoxarifado" (2026-09-12,
     so pro Rafael). Mesma ideia do recorte "fora da carteira" da pilula de
     Visitas: numero menor, em cor propria, que se le como anexo do botao e
     nao como um segundo botao. A cor NAO e o vermelho da pilula
     (.gpd-access-card-red) — vermelho sobre vermelho e exatamente o jeito de
     o texto sumir neste arquivo. Usa o mesmo position:relative + z-index da
     regra acima, pelo backdrop-filter do proprio .gpd-access-card-lg. */
  .almox-baixo-badge{
    position:relative;
    z-index:1;
    margin-left:9px;
    padding:2px 8px;
    border-radius:999px;
    font-family:'JetBrains Mono', monospace;
    font-size:11.5px;
    font-weight:700;
    letter-spacing:0.02em;
    text-transform:uppercase;
    color:#FFD9DA;
    background:rgba(225,89,90,0.38);
    border:1px solid rgba(225,89,90,0.6);
  }
  /* Mesma pílula liquid-glass do .gpd-access-card-lg (dourada) — usada nos
     atalhos Almoxarifado/Produção com a cor trocada pra vermelho (var(--bad))
     em vez de duplicar a receita toda inteira de novo. */
  .gpd-access-card-lg.gpd-access-card-red{
    color: var(--text);
    border-color: rgba(225,89,90,0.35);
    background:linear-gradient(180deg, rgba(225,89,90,0.20), rgba(225,89,90,0.05));
  }
  .gpd-access-card-lg.gpd-access-card-red:hover{
    background:linear-gradient(180deg, rgba(225,89,90,0.28), rgba(225,89,90,0.08));
  }
  /* Mesma pílula, em azul-aço (var(--steel)) — atalho "Margem Região"
     (margem.html). Cor própria de propósito: é a única tela do header que
     não é do time comercial inteiro (só Rafael e Valmir), então não divide
     o dourado dos atalhos gerais nem o vermelho dos setores. */
  .gpd-access-card-lg.gpd-access-card-steel{
    color: var(--text);
    border-color: rgba(79,154,192,0.38);
    background:linear-gradient(180deg, rgba(79,154,192,0.22), rgba(79,154,192,0.05));
  }
  .gpd-access-card-lg.gpd-access-card-steel:hover{
    background:linear-gradient(180deg, rgba(79,154,192,0.30), rgba(79,154,192,0.09));
  }
  /* Atalho "só visual" (vendedor sem acesso liberado ainda): aparece na
     mesma pílula, porém apagado e sem reação a hover — ver
     setAccessCardPreview em js/app.js. */
  .gpd-access-card-lg.gpd-access-card-preview{
    opacity:0.4;
    cursor:not-allowed;
    filter:saturate(0.55);
  }
  .gpd-access-card-lg.gpd-access-card-preview:hover{
    transform:none;
    background:linear-gradient(180deg, rgba(242,183,5,0.20), rgba(242,183,5,0.05));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 4px 10px rgba(0,0,0,0.2);
  }
  .gpd-access-card-lg.gpd-access-card-red.gpd-access-card-preview:hover{
    background:linear-gradient(180deg, rgba(225,89,90,0.20), rgba(225,89,90,0.05));
  }
  /* Mesma receita liquid-glass do .gpd-plano-mes-pill (css/gpd.css) — index.html
     não carrega css/gpd.css, então essa cópia mantém a mesma pílula
     rótulo+valor sem puxar o stylesheet inteiro do GPD. */
  .visitas-mes-pill{
    display:flex;
    align-items:center;
    gap:10px;
    appearance:none;
    -webkit-appearance:none;
    font-family:'Inter', sans-serif;
    cursor:pointer;
    border:1px solid rgba(242,183,5,0.32);
    background:linear-gradient(180deg, rgba(242,183,5,0.18), rgba(242,183,5,0.04));
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-radius:999px;
    padding:8px 18px;
    white-space:nowrap;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 10px rgba(0,0,0,0.18);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  }
  .visitas-mes-pill:hover{
    background:linear-gradient(180deg, rgba(242,183,5,0.26), rgba(242,183,5,0.07));
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 6px 14px rgba(0,0,0,0.24);
  }
  .visitas-mes-modal-table tbody tr{ cursor:default; }
  .visitas-mes-modal-table tbody tr:hover{ background:transparent; }
  /* Linha com aba correspondente no GPD (ver gpdSheetForVendorName em
     js/app.js) abre o PDF de visitas registradas ao clicar — volta a ter
     affordance de clique, diferente das linhas sem aba (ex.: "Outros"),
     que ficam com o padrão não-clicável acima. */
  .visitas-mes-modal-table tbody tr.visitas-row-has-pdf{ cursor:pointer; }
  .visitas-mes-modal-table tbody tr.visitas-row-has-pdf:hover{ background:#f5f6f8; }
  /* .pf-modal-card é claro de propósito (fundo branco), mas thead th/tbody
     td no resto do site usam as variáveis do tema escuro (--text-faint,
     --line) — sem isso a tabela ficava com texto quase invisível (claro
     sobre branco) dentro do modal. */
  .visitas-mes-modal-table thead th{ color:#5a6270; border-bottom-color:#e2e5ea; font-size:13px; padding:0 10px 12px; }
  .visitas-mes-modal-table tbody td{ color:#151515; border-bottom-color:#eef0f3; font-size:16px; padding:13px 10px; }
  .visitas-mes-modal-table td.name{ color:#151515; font-weight:700; font-size:17px; }
  .visitas-mes-modal-table .pill{ font-size:14px; font-weight:700; padding:4px 10px; }
  #visitasMesModal .pf-modal-title{ font-size:22px; }
  /* Botão "Rota" (mapa-visitas.html) ao lado do título — só admin. */
  .visitas-mes-titulo{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
  .visitas-rota-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-family:'Oswald', sans-serif;
    font-size:14px;
    font-weight:600;
    letter-spacing:0.06em;
    text-transform:uppercase;
    text-decoration:none;
    color:#fff;
    background:linear-gradient(180deg, #4f9ac0 0%, #2a7ba8 100%);
    border:1px solid #1f6690;
    border-radius:999px;
    padding:5px 14px 5px 11px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.35), 0 3px 8px rgba(42,123,168,0.35);
    transition:transform .12s ease, box-shadow .12s ease;
  }
  .visitas-rota-btn svg{ width:17px; height:17px; }
  .visitas-rota-btn:hover{ transform:translateY(-1px); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,0.35), 0 6px 14px rgba(42,123,168,0.45); }
  #visitasMesModal .pf-modal-sub{ font-size:14px; }
  .visitas-mes-pill span{
    font-size:10.5px;
    text-transform:uppercase;
    letter-spacing:0.1em;
    color:var(--accent);
    font-weight:600;
  }
  .visitas-mes-pill strong{
    font-family:'JetBrains Mono', monospace;
    font-size:15px;
    font-weight:700;
    letter-spacing:0.02em;
    color:var(--text);
  }
  /* Visitas fora da carteira: cor propria pra ler de relance quanto do total
     foi prospeccao (pedido do usuario, 2026-09-04). Azul-aco em vez do
     dourado da tag "Fora da carteira" do GPD porque a pilula INTEIRA ja e
     dourada -- dourado sobre dourado e exatamente como o texto some (ver as
     ocorrencias do botao dourado ilegivel neste projeto). Menor e recuado
     de proposito: e um recorte do numero
     branco ao lado, nao um segundo total. */
  .visitas-mes-pill strong.visitas-mes-avulsa{
    color:#7BC0DE;
    font-size:12px;
    margin-left:-4px;
  }
  /* Mesmo recorte dentro do modal (fundo BRANCO): tom mais fechado do mesmo
     azul, senao o #7BC0DE some no claro. */
  .visitas-avulsa-num{
    display:inline-block;
    margin-left:8px;
    font-family:'JetBrains Mono', monospace;
    font-size:12px;
    font-weight:700;
    color:#2C7DA8;
  }
  /* Ausentes no mesmo modal (16/09/2026): dourado fechado, mesma família do
     selo "ausente" do GPD; só informação, fora do total. */
  .visitas-ausente-num{
    display:inline-block;
    min-width:26px;
    padding:2px 8px;
    border-radius:999px;
    font-family:'JetBrains Mono', monospace;
    font-size:12px;
    font-weight:700;
    text-align:center;
    color:#8A5A00;
    background:rgba(217,164,65,0.18);
    border:1px solid rgba(217,164,65,0.45);
  }
  .month-picker-card{
    margin-top:10px;
    width:min(360px, 100%);
    text-align:left;
    border:1px solid var(--line);
    background:var(--panel-2);
    border-radius:10px;
    padding:10px;
  }
  .month-picker-card.hidden{ display:none; }
  .month-picker-title{
    font-size:10.5px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--accent);
    font-weight:700;
    margin-bottom:8px;
  }
  .month-picker-list{
    display:grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap:6px 10px;
  }
  .month-picker-item{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:12px;
    color:var(--text);
  }
  .month-picker-actions{
    margin-top:10px;
    display:flex;
    justify-content:flex-end;
  }
  .month-picker-note{
    margin-top:8px;
    font-size:11px;
    color:var(--text-faint);
    min-height:15px;
  }
  .access-status{
    margin-top:8px;
    font-size:11.5px;
    color:var(--accent);
    letter-spacing:0.04em;
    min-height:14px;
  }
  .header-utility-row{
    margin-top:10px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    flex-wrap:nowrap;
    width:100%;
  }
  .header-utility-row .excel-btn{
    margin-top:0;
    flex:0 0 auto;
  }
  .user-identity-card{
    margin-top:0;
    padding:7px 10px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.08);
    background:linear-gradient(180deg, rgba(33,40,50,0.98), rgba(26,31,38,0.98));
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 20px rgba(0,0,0,0.18);
    position:relative;
    overflow:hidden;
    transform:none;
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:8px;
    text-align:left;
    min-width:0;
    max-width:none;
    white-space:nowrap;
  }
  .user-identity-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 34%, transparent 60%);
    pointer-events:none;
  }
  .user-identity-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(242,183,5,0.06), transparent 42%);
    pointer-events:none;
  }
  .user-identity-label{
    position:relative;
    z-index:1;
    font-size:10px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--accent);
    font-weight:700;
    white-space:nowrap;
  }
  .user-identity-meta{
    position:relative;
    z-index:1;
    margin-top:0;
    display:inline-flex;
    gap:8px;
    flex-wrap:nowrap;
  }
  .user-identity-pill{
    display:inline-flex;
    align-items:center;
    padding:4px 8px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.10);
    background:rgba(255,255,255,0.06);
    font-size:10px;
    letter-spacing:0.04em;
    text-transform:uppercase;
  }
  .user-identity-pill.gold{
    border-color:rgba(242,183,5,0.30);
    background:rgba(242,183,5,0.10);
    color:var(--accent);
    font-weight:700;
  }
  .month-apply-status{
    margin-top:6px;
    font-size:11px;
    color:#9fe7bf;
    letter-spacing:0.03em;
    min-height:14px;
  }
  .month-apply-status.hidden{ display:none; }
  /* pill em vez de texto cinza discreto — pedido do usuario apos confundir
     um instantaneo antigo do painel com a planilha atual: precisa dar pra
     ver de relance quando foi a ultima leitura, sem procurar. */
  .auto-refresh-status{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-top:8px;
    padding:5px 12px 5px 10px;
    border-radius:999px;
    border:1px solid rgba(79,154,192,0.3);
    background:linear-gradient(180deg, rgba(79,154,192,0.16), rgba(79,154,192,0.05));
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    font-weight:600;
    letter-spacing:0.02em;
    color:#bcd7ea;
  }
  /* Clicavel: forca a releitura da planilha na hora (ver
     refreshDashboardDataNow em js/app.js). */
  .auto-refresh-status{ cursor:pointer; }
  .auto-refresh-status:hover{ border-color:rgba(79,154,192,0.6); }
  .auto-refresh-status-busy{ opacity:0.6; pointer-events:none; }
  .auto-refresh-status::before{
    content:"";
    width:6px; height:6px;
    border-radius:50%;
    background:var(--steel);
    box-shadow:0 0 8px 2px rgba(79,154,192,0.65);
    flex:none;
    animation: autoRefreshPulse 2.4s ease-in-out infinite;
  }
  @keyframes autoRefreshPulse{
    0%,100%{ opacity:1; }
    50%{ opacity:0.4; }
  }
  @media (prefers-reduced-motion: reduce){
    .auto-refresh-status::before{ animation:none; }
  }
  .auto-refresh-status.hidden{ display:none; }
  .access-banner{
    margin-top:22px;
    padding:14px 16px;
    border:1px solid rgba(242,183,5,0.24);
    border-radius:14px;
    background:linear-gradient(180deg, rgba(242,183,5,0.12), rgba(242,183,5,0.04));
    color:var(--text);
    font-size:13px;
  }
  .access-banner strong{
    color:var(--accent);
  }
  .seller-panel{
    margin-bottom:18px;
    padding:18px;
    border:1px solid rgba(79,154,192,0.22);
    border-radius:18px;
    background:linear-gradient(180deg, rgba(33,45,58,0.94), rgba(25,31,38,0.96));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  }
  .seller-panel-head{
    display:flex;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    align-items:flex-end;
  }
  .seller-panel-title{
    font-family:'Oswald';
    font-size:29px;
    letter-spacing:0.04em;
    text-transform:uppercase;
  }
  .seller-panel-sub{
    margin-top:6px;
    color:#a9b5c7;
    font-size:16px;
    max-width:720px;
  }
  .seller-panel-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:999px;
    border:1px solid rgba(242,183,5,0.28);
    background:rgba(242,183,5,0.10);
    color:var(--accent);
    font-size:13px;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
  }
  .seller-kpis{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap:12px;
    margin-top:18px;
  }
  .seller-kpi{
    padding:16px 16px 14px;
    border-radius:var(--radius);
    border:1px solid rgba(255,255,255,0.13);
    background:
      radial-gradient(130% 75% at 14% -12%, rgba(255,255,255,0.10), rgba(255,255,255,0) 55%),
      linear-gradient(165deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.012) 45%, rgba(255,255,255,0.015) 100%),
      rgba(18,22,28,0.5);
    position:relative;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.14),
      inset 0 -1px 0 rgba(0,0,0,0.3),
      0 2px 4px rgba(0,0,0,0.35),
      0 10px 20px -8px rgba(0,0,0,0.45);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
  }
  .seller-kpi-compact{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    height:100%;
  }
  .seller-kpi-compact .value{
    max-width:100%;
  }
  .seller-kpi .label{
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--text-dim);
    font-weight:700;
  }
  .seller-kpi .value{
    margin-top:8px;
    font-family:'JetBrains Mono';
    font-size:clamp(17px, 1.7vw, 25px);
    font-weight:700;
    line-height:1.1;
    overflow-wrap:break-word;
  }
  .seller-kpi-value-main{
    font-size:clamp(17px, 1.7vw, 25px);
    line-height:1.05;
    white-space:normal;
    overflow-wrap:break-word;
  }
  .seller-kpi-value-secondary{
    margin-top:4px;
    font-size:clamp(11.5px, 0.95vw, 13px);
    font-weight:700;
    color:#9da8b8;
    white-space:normal;
    overflow-wrap:break-word;
  }
  .seller-kpi .meta{
    margin-top:10px;
    font-size:13px;
    color:#9ca9ba;
  }
  .seller-kpi .foot.steel{ color: var(--steel); }
  .seller-kpi-track{
    margin-top:12px;
    height:8px;
    border-radius:999px;
    background:rgba(0,0,0,0.28);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
    overflow:hidden;
  }
  .seller-kpi-fill{
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg, #7fd6a6, #54c890);
  }
  .seller-kpi-fill.steel{
    background:linear-gradient(90deg, #8fd1ff, #4f9ac0);
  }
  .seller-kpi-fill.gold{
    background:linear-gradient(90deg, #ffe27a, #f2b705);
  }
  .seller-kpi-fill.warn{
    background:linear-gradient(90deg, #ffcc84, #e1943c);
  }
  .seller-kpi-fill.bad{
    background:linear-gradient(90deg, #ff9a9a, #ea5455);
  }
  .seller-kpi-foot{
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-top:8px;
    font-size:13px;
    color:#9da8b8;
  }
  .seller-inline-stats{
    display:grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap:12px;
    margin-top:14px;
  }
  .seller-inline-card{
    padding:12px 14px;
    border-radius:12px;
    background:rgba(13,15,19,0.28);
    border:1px solid rgba(255,255,255,0.04);
    text-align:center;
  }
  .seller-inline-card .label{
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--text-dim);
    font-weight:700;
  }
  .seller-inline-card .value{
    margin-top:8px;
    font-family:'JetBrains Mono';
    font-size:19px;
    font-weight:700;
  }
  .seller-section-title{
    margin-top:18px;
    margin-bottom:10px;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:0.12em;
    color:var(--accent);
    font-weight:800;
  }
  .seller-detail-grid{
    display:grid;
    gap:10px;
    margin-top:14px;
    width:100%;
  }
  .seller-detail-grid-top{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .seller-detail-grid-bottom{
    /* 29/09/2026: virou de 4 pra 5 cartões (Ligações/Mensagens/Clientes do
       CRM + Visitas/Meta) — auto-fit em vez de repeat(4) fixo, mesmo caminho
       do .detail-grid-bottom do admin, pra não sobrar 1 cartão sozinho numa
       fileira torta. */
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    margin-top:10px;
  }
  .seller-detail-item{
    padding:12px 14px;
    border-radius:var(--radius);
    border:1px solid rgba(255,255,255,0.10);
    background:
      radial-gradient(130% 75% at 14% -12%, rgba(255,255,255,0.08), rgba(255,255,255,0) 55%),
      linear-gradient(165deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0.01) 45%, rgba(255,255,255,0.012) 100%),
      rgba(15,18,23,0.46);
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    position:relative;
    backdrop-filter: blur(14px) saturate(135%);
    -webkit-backdrop-filter: blur(14px) saturate(135%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.12),
      inset 0 -1px 0 rgba(0,0,0,0.26),
      0 2px 3px rgba(0,0,0,0.3),
      0 6px 14px -8px rgba(0,0,0,0.4);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
  }
  .seller-detail-item .dl{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--text-dim);
    font-weight:700;
  }
  .seller-detail-item .dv{
    margin-top:6px;
    font-family:'JetBrains Mono';
    font-size:19px;
    font-weight:800;
    color:var(--text);
  }
  .seller-detail-item .dv .pill{
    font-size:22px;
    padding:3px 14px;
  }
  .auth-gate{
    position:fixed;
    inset:0;
    z-index:90;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    overflow:hidden;
    /* backdrop-filter removido (era blur(10px)): mesma familia de bug do
       .auth-submit (ver nota no topo do arquivo) — texto de elementos
       FILHOS dentro de uma arvore com backdrop-filter num ancestral
       (mesmo sem blur direto no proprio elemento) tambem sai borrado em
       WebView Android. O overlay escuro sozinho (0.82 de opacidade) ja
       segura o fundo o suficiente sem precisar do blur. */
    background:rgba(8,11,16,0.9);
  }
  /* massas de luz borradas atrás do card — aço, dourado (accent da marca)
     e verde, a mesma paleta já usada no resto do painel, tratada como
     iluminação de chão de fábrica em vez de flat solid. */
  .auth-field-glow{
    position:absolute;
    border-radius:50%;
    filter: blur(90px);
    opacity:0.5;
    pointer-events:none;
    will-change:transform;
  }
  .auth-field-glow-steel{
    width:620px; height:620px;
    left:-180px; top:-160px;
    background: radial-gradient(circle at 35% 35%, rgba(79,154,192,0.8), rgba(79,154,192,0) 70%);
    animation: authDrift1 26s ease-in-out infinite;
  }
  .auth-field-glow-gold{
    width:540px; height:540px;
    right:-160px; bottom:-180px;
    background: radial-gradient(circle at 60% 40%, rgba(242,183,5,0.6), rgba(242,183,5,0) 70%);
    animation: authDrift2 32s ease-in-out infinite;
  }
  .auth-field-glow-green{
    width:400px; height:400px;
    right:8%; top:8%;
    background: radial-gradient(circle at 50% 50%, rgba(79,174,124,0.38), rgba(79,174,124,0) 70%);
    animation: authDrift3 22s ease-in-out infinite;
  }
  @keyframes authDrift1{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(40px,30px); } }
  @keyframes authDrift2{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-30px,-40px); } }
  @keyframes authDrift3{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-20px,25px) scale(1.06); } }
  @media (prefers-reduced-motion: reduce){
    .auth-field-glow{ animation:none; }
  }
  .auth-card{
    width:min(560px, 100%);
    padding:58px 44px 46px;
    border-radius:24px;
    position:relative;
    z-index:1;
    overflow:hidden;
    /* backdrop-filter removido (era blur(26px) saturate(150%)): é o
       ANCESTRAL direto do .auth-submit, e a mesma familia de bug do botao
       (texto borrado em WebView Android) volta mesmo sem blur direto no
       proprio botao, só por ele estar dentro de uma arvore com
       backdrop-filter em algum ancestral — reincidiu depois da 1a correção
       (que só tirou do botão) por causa disso. As massas de luz atrás já
       têm blur(90px) na própria origem (.auth-field-glow), então o card
       ainda fica com uma boa suavidade sem precisar do backdrop-filter;
       só sobe um pouco a opacidade da camada de baixo pra compensar. */
    background:
      linear-gradient(165deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.015) 40%, rgba(255,255,255,0.025) 100%),
      linear-gradient(180deg, rgba(26,31,38,0.85), rgba(13,15,19,0.94));
    border:1px solid rgba(255,255,255,0.09);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.16),
      inset 0 -1px 0 rgba(0,0,0,0.35),
      0 2px 4px rgba(0,0,0,0.45),
      0 14px 28px -8px rgba(0,0,0,0.55),
      0 34px 60px -16px rgba(0,0,0,0.62);
  }
  .auth-card::after{
    content:"";
    position:absolute;
    left:10%; right:10%; bottom:0;
    height:1px;
    background: linear-gradient(90deg, rgba(79,154,192,0) 0%, rgba(79,154,192,0.5) 50%, rgba(79,154,192,0) 100%);
    pointer-events:none;
  }
  /* Usuário/senha (ou outro dado) invalido: sacode o card de login pra dar
     feedback imediato — reaproveita o @keyframes btnFxShake já definido na
     biblioteca de botões (ver .btn-fx--shake mais abaixo), só sem depender
     de hover: a classe é ligada/desligada via JS em cada tentativa (ver
     shakeAuthCard em js/app.js, js/gpd.js e js/almoxarifado.js). */
  .auth-card.shake-invalid{
    animation: btnFxShake .5s cubic-bezier(.36,.07,.19,.97) both;
  }
  @media (prefers-reduced-motion: reduce){
    .auth-card.shake-invalid{ animation:none !important; }
  }
  .auth-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-family:'JetBrains Mono', monospace;
    font-size:10.5px;
    font-weight:600;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--steel);
    margin-bottom:20px;
  }
  .auth-eyebrow::before{
    content:"";
    width:6px; height:6px;
    border-radius:50%;
    background:var(--steel);
    box-shadow:0 0 10px 2px rgba(79,154,192,0.7);
  }
  .auth-card h2{
    font-family:'Oswald';
    font-size:28px;
    font-weight:600;
    letter-spacing:0.03em;
    text-transform:uppercase;
    margin-bottom:6px;
  }
  .auth-card p{
    color:var(--text-dim);
    font-size:13px;
    line-height:1.5;
    margin-bottom:32px;
  }
  .auth-form{
    display:grid;
    gap:26px;
  }
  .auth-field{
    display:grid;
    gap:7px;
  }
  .auth-field label{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.09em;
    color:var(--text-dim);
    font-weight:700;
    padding-left:4px;
  }
  .auth-input-wrap{
    position:relative;
    display:flex;
    align-items:center;
    border-radius:14px;
    overflow:hidden; /* recorta a varredura de brilho no raio do próprio campo */
  }
  .auth-input-wrap > svg{
    position:absolute;
    left:16px;
    width:16px; height:16px;
    color:var(--text-faint);
    pointer-events:none;
    z-index:2;
    transition:color .15s ease;
  }
  .auth-input-wrap:focus-within > svg{ color:var(--steel); }
  .auth-field input{
    position:relative;
    z-index:1;
    width:100%;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:14px;
    background:rgba(9,11,15,0.45);
    color:var(--text);
    padding:13px 16px 13px 44px;
    font-size:16px;
    font-weight:500;
    outline:none;
    transition:border-color .18s ease, box-shadow .18s ease, background .35s ease, backdrop-filter .35s ease;
  }
  .auth-field input::placeholder{ color:var(--text-faint); }
  /* "vidro" no foco: o campo ganha profundidade de fosco (blur+saturação
     sobe) e brilho interno no topo, como se a luz das massas atrás
     estivesse atravessando ele — em vez de só um contorno colorido. */
  .auth-field input:focus{
    border-color:var(--steel);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0) 45%),
      rgba(9,11,15,0.55);
    backdrop-filter: blur(6px) saturate(160%);
    -webkit-backdrop-filter: blur(6px) saturate(160%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.3),
      inset 0 0 16px rgba(79,154,192,0.18),
      0 0 0 3px var(--steel-soft),
      0 0 24px -6px rgba(79,154,192,0.6);
  }
  /* confirmado: quando o valor bate com a credencial real, o campo herda
     o mesmo tratamento de vidro do foco, só que verde — e continua aceso
     mesmo depois de tirar o cursor dele. */
  .auth-input-wrap.is-correct input,
  .auth-input-wrap.is-correct input:focus{
    border-color:var(--good);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0) 45%),
      rgba(9,11,15,0.55);
    backdrop-filter: blur(6px) saturate(160%);
    -webkit-backdrop-filter: blur(6px) saturate(160%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.3),
      inset 0 0 16px rgba(79,174,124,0.22),
      0 0 0 3px var(--good-soft),
      0 0 24px -6px rgba(79,174,124,0.65);
  }
  .auth-input-wrap.is-correct > svg{ color:var(--good); }
  .auth-input-wrap::before{
    content:"";
    position:absolute; inset:0;
    z-index:1;
    border-radius:inherit;
    background:linear-gradient(115deg,
      transparent 30%, rgba(255,255,255,0.16) 45%, rgba(255,255,255,0.32) 50%,
      rgba(255,255,255,0.16) 55%, transparent 70%);
    transform:translateX(-140%);
    pointer-events:none;
    opacity:0;
  }
  .auth-input-wrap:focus-within::before{
    opacity:1;
    animation: authSheen 1s ease forwards;
  }
  @keyframes authSheen{ to{ transform:translateX(140%); } }
  @media (prefers-reduced-motion: reduce){
    .auth-input-wrap::before{ animation:none !important; opacity:0 !important; }
  }
  /* Autofill do navegador (usuário/senha salvos) por padrão troca o fundo
     pra um tom claro e ignora o color: da gente — sem isso, o campo
     preenchido automaticamente destoa do tema escuro e fica difícil de
     ler. Delay gigante no transition é o truque padrão pra segurar o
     background-color que o navegador tenta forçar. */
  .auth-field input:-webkit-autofill,
  .auth-field input:-webkit-autofill:hover,
  .auth-field input:-webkit-autofill:focus{
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0 1000px rgba(9,11,15,0.45) inset;
    box-shadow: 0 0 0 1000px rgba(9,11,15,0.45) inset;
    transition: background-color 9999s ease-in-out 0s;
    caret-color: var(--text);
  }
  .auth-show-pass{
    justify-self:start;
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:4px;
    padding:2px 4px 2px 0;
    background:none;
    border:none;
    cursor:pointer;
  }
  /* display:inline-flex acima tem mais especificidade que o [hidden] do
     navegador (que so aplica display:none via UA stylesheet) — sem isso o
     atributo hidden que js/app.js usa pra esconder o botao de vendedor
     nao tinha efeito nenhum visualmente. */
  .auth-show-pass[hidden]{ display:none; }
  .auth-show-pass-label{
    color:var(--text-dim);
    font-size:12px;
    font-weight:600;
    letter-spacing:0.02em;
    transition:color .15s ease;
  }
  .auth-show-pass:hover .auth-show-pass-label{ color:var(--text); }
  /* lente de vidro líquido: halo desfocado atrás + cápsula fosca na
     frente com destaque especular. Responde no toque (transform no
     :active), não espera o clique soltar. Só existe pra Rafael/Valmir/
     Luciano — js/app.js dá `hidden` nela pra qualquer outro usuário. */
  .auth-toggle-orb{
    position:relative;
    flex:none;
    width:38px; height:38px;
    border-radius:50%;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,0.16);
    background:
      radial-gradient(circle at 32% 26%, rgba(255,255,255,0.32), rgba(255,255,255,0) 55%),
      linear-gradient(165deg, rgba(79,154,192,0.32), rgba(9,11,15,0.6) 70%);
    backdrop-filter: blur(9px) saturate(180%);
    -webkit-backdrop-filter: blur(9px) saturate(180%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.3),
      inset 0 -3px 6px rgba(0,0,0,0.35),
      0 4px 10px -4px rgba(0,0,0,0.55);
    transition: transform 100ms ease-out, background .35s ease, border-color .35s ease, box-shadow .35s ease;
  }
  .auth-toggle-orb::before{
    content:"";
    position:absolute;
    inset:-11px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(79,154,192,0.5), rgba(79,154,192,0) 72%);
    filter:blur(11px);
    z-index:-1;
    opacity:0.75;
    transition:background .35s ease, opacity .35s ease;
  }
  .auth-show-pass:active .auth-toggle-orb{ transform:scale(0.92); }
  .auth-toggle-orb svg{
    width:17px; height:17px;
    color:var(--text);
    position:absolute;
    transition:opacity .28s ease, transform .32s cubic-bezier(.2,.85,.3,1.15), color .35s ease;
  }
  .auth-icon-eye-off{ opacity:0; transform:scale(.5) rotate(-18deg); }
  .auth-icon-eye{ opacity:1; transform:scale(1) rotate(0deg); }
  .auth-show-pass[aria-pressed="true"] .auth-toggle-orb{
    border-color:rgba(242,183,5,0.6);
    background:
      radial-gradient(circle at 32% 26%, rgba(255,255,255,0.4), rgba(255,255,255,0) 55%),
      linear-gradient(165deg, rgba(255,210,90,0.55), rgba(120,80,0,0.55) 75%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.4),
      inset 0 -3px 6px rgba(90,60,0,0.4),
      0 4px 16px -4px rgba(242,183,5,0.65);
  }
  .auth-show-pass[aria-pressed="true"] .auth-toggle-orb::before{
    background:radial-gradient(circle, rgba(242,183,5,0.6), rgba(242,183,5,0) 72%);
    opacity:1;
  }
  .auth-show-pass[aria-pressed="true"] .auth-icon-eye{ opacity:0; transform:scale(.5) rotate(18deg); }
  .auth-show-pass[aria-pressed="true"] .auth-icon-eye-off{ opacity:1; transform:scale(1) rotate(0deg); color:#2a1c02; }
  /* senha confere com a credencial real: a lente vira vidro verde,
     independente de estar mostrando ou escondendo a senha. */
  .auth-show-pass.is-correct .auth-toggle-orb{
    border-color:rgba(120,215,165,0.7);
    background:
      radial-gradient(circle at 32% 26%, rgba(255,255,255,0.4), rgba(255,255,255,0) 55%),
      linear-gradient(165deg, rgba(120,220,165,0.5), rgba(9,60,32,0.55) 75%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.4),
      inset 0 -3px 6px rgba(9,60,32,0.4),
      0 4px 18px -4px rgba(79,174,124,0.7);
  }
  .auth-show-pass.is-correct .auth-toggle-orb::before{
    background:radial-gradient(circle, rgba(79,174,124,0.65), rgba(79,174,124,0) 72%);
    opacity:1;
  }
  .auth-show-pass:focus-visible .auth-toggle-orb{
    outline:2px solid var(--steel);
    outline-offset:3px;
  }
  @media (prefers-reduced-motion: reduce){
    .auth-show-pass:active .auth-toggle-orb{ transform:none; }
    .auth-toggle-orb, .auth-toggle-orb::before, .auth-toggle-orb svg{ transition-duration:.01ms !important; }
  }
  /* botão como bloco de vidro âmbar: gradiente opaco (não é translúcido,
     não precisa de backdrop-filter — chegou a ter um blur() aqui que não
     tinha efeito visual nenhum num fundo já sólido e ainda causava o texto
     do botão borrar em navegadores Android com esse bug de composição),
     cúpula especular no topo (::before) e uma varredura de brilho que
     atravessa no hover (::after). */
  .auth-submit{
    position:relative;
    overflow:hidden;
    margin-top:10px;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:1px solid rgba(255,238,190,0.5);
    border-radius:999px;
    padding:14px 16px;
    font-family:'Inter', sans-serif;
    font-size:12.5px;
    font-weight:700;
    letter-spacing:0.07em;
    text-transform:uppercase;
    color:#241a02;
    background:linear-gradient(180deg, #FFDA6B 0%, var(--accent) 58%, var(--accent-deep) 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.65),
      inset 0 -10px 14px -6px rgba(120,80,0,0.4),
      0 0 44px rgba(242,183,5,0.35),
      0 14px 28px -10px rgba(242,183,5,0.55),
      0 2px 4px rgba(0,0,0,0.35);
    cursor:pointer;
    transition:transform .12s ease, box-shadow .18s ease;
  }
  .auth-submit::before{
    content:"";
    position:absolute;
    left:6%; right:6%; top:3px;
    height:44%;
    border-radius:999px;
    background:linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0) 100%);
    pointer-events:none;
  }
  .auth-submit::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(115deg,
      transparent 30%, rgba(255,255,255,0.28) 46%, rgba(255,255,255,0.5) 50%,
      rgba(255,255,255,0.28) 54%, transparent 70%);
    transform:translateX(-140%);
    pointer-events:none;
  }
  /* color repetido de proposito no :hover — NAO e redundante. Todo botao
     dourado de modal e <button class="excel-btn auth-submit">, e
     ".excel-btn:hover{ color:var(--accent) }" (styles.css:138) tem
     especificidade 0,2,0 contra 0,1,0 do ".auth-submit" normal: no hover o
     texto virava dourado sobre fundo dourado e sumia. Essa foi a 6a
     aparicao do "botao dourado ilegivel" (2026-09-03, "Salvar prazo" da
     Producao) — as anteriores foram backdrop-filter e texto sem <span>,
     causas diferentes, ja documentadas acima. Como .auth-submit:hover vem
     DEPOIS de .excel-btn:hover no arquivo e empata em especificidade, esta
     linha ganha; e nao muda nada fora do hover. */
  .auth-submit:hover{
    color:#241a02;
    transform:translateY(-1px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.65),
      inset 0 -10px 14px -6px rgba(120,80,0,0.4),
      0 0 56px rgba(242,183,5,0.45),
      0 18px 34px -10px rgba(242,183,5,0.65),
      0 2px 4px rgba(0,0,0,0.35);
  }
  .auth-submit:hover::after{ animation: authSheen .85s ease forwards; }
  .auth-submit:active{ transform:translateY(0); }
  /* z-index:1 só se aplica a filhos span/svg — texto solto (sem wrapper)
     dentro de .auth-submit fica sem position/z-index, então o ::after
     (sheen diagonal, position:absolute) pinta POR CIMA do texto na ordem
     normal de pintura CSS (positioned sempre depois de in-flow estático,
     mesmo com z-index:auto nos dois). Foi a causa real do botão dourado
     "ilegível" nos modais do Almoxarifado (Registrar entrada/entrega,
     Salvar item/fornecedor/empresa/colaborador, Registrar movimentação) —
     não era backdrop-filter/WebView como as correções anteriores
     assumiram (ver nota em .pf-modal-backdrop acima). Todo <button
     class="auth-submit"> PRECISA envolver o texto em <span> (ver
     almoxarifado.html), senão o bug volta em qualquer navegador,
     desktop incluso. */
  .auth-submit span, .auth-submit svg{ position:relative; z-index:2; }
  /* Os dois pseudo-elementos são puramente decorativos e ficam SEMPRE atrás
     do texto, explicitamente. Sem z-index eles herdam "auto" e a ordem de
     pintura decide — e é ela que varia entre navegador e WebView Android,
     que é como esse botão já ficou ilegível 5 vezes (login, Almoxarifado,
     Importar Faturamento, "Somar ao valor lançado"). Cada uma dessas foi
     corrigida com uma regra nova travada por ID, uma por ocorrência; isto
     aqui é a mesma correção aplicada de uma vez pra TODOS os .auth-submit,
     pra não existir uma 6ª. Não muda nada onde já está certo: o texto sobe
     de 1 pra 2 e os decorativos descem de auto pra 0, mantendo a mesma
     ordem visual (fundo -> brilho -> sheen -> texto). */
  .auth-submit::before, .auth-submit::after{ z-index:0; }
  .auth-submit svg{ width:15px; height:15px; }
  @media (prefers-reduced-motion: reduce){
    .auth-submit:hover::after{ animation:none !important; }
  }
  .auth-error{
    min-height:18px;
    color:var(--bad);
    font-size:12px;
  }
  .auth-note{
    margin-top:22px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,0.07);
    color:var(--text-faint);
    font-size:11.5px;
    line-height:1.5;
  }
  .auth-almox-link{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    margin-top:16px;
    text-align:center;
    font-size:12px;
    font-weight:600;
    color:var(--text-dim);
    text-decoration:none;
  }
  .auth-almox-link svg{ width:13px; height:13px; }
  .auth-almox-link:hover{
    color:var(--steel);
  }
  .auth-users-hint{
    margin-top:10px;
    padding:10px 12px;
    border:1px solid rgba(79,154,192,0.22);
    border-radius:10px;
    background:rgba(23,30,38,0.65);
    font-size:11.5px;
    color:#b8c3d3;
    line-height:1.5;
  }
  .auth-users-hint strong{
    color:#d9e7ff;
  }

  /* ---------- KPI hero ---------- */
  .kpi-strip{
    display:grid; grid-template-columns: minmax(220px, 1.3fr) repeat(5, minmax(205px, 1fr)); gap:1px;
    background: var(--line);
    border: 1px solid var(--line);
    margin-top: 28px; border-radius: var(--radius); overflow-x:auto; overflow-y:hidden;
  }
  .kpi{
    background: var(--panel); padding: 20px 22px; position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
    overflow:hidden;
  }
  .kpi .label{ font-size:12.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-dim); font-weight:600;}
  .kpi .val{ font-family:'JetBrains Mono'; font-size:clamp(20px, 1.45vw, 26px); font-weight:600; margin-top:8px; line-height:1.1; white-space:nowrap;}
  .kpi .val.good{ color:var(--good); }
  .kpi .val.bad{ color:var(--bad); }
  .kpi .foot{ font-size:13.5px; color:var(--text-faint); margin-top:8px;}
  .kpi .foot.good{ color:var(--good); }
  .kpi .foot.bad{ color:var(--bad); font-size:14.85px; }
  .kpi-combo .kpi-combo-sep{ height:1px; background:var(--line); margin:14px 0; }
  .kpi-combo .label:not(:first-child){ margin-top:0; }
  .kpi-3d{
    background: linear-gradient(160deg, #252d39 0%, #1f2631 48%, #1b212b 100%);
    border-top: 1px solid rgba(255,255,255,0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -14px 18px rgba(0,0,0,0.14);
    transform: translateY(-1px);
  }
  .kpi-3d::before{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(110deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 42%);
    pointer-events:none;
  }
  .kpi-3d .label{ font-size:12.5px; line-height:1.25; }
  /* Reserva a altura de 2 linhas nos cartões de valor único para que o número
     principal (o "herói" de cada célula) comece sempre na mesma altura,
     independente do rótulo quebrar ou não em duas linhas. */
  .kpi-3d:not(.kpi-combo) .label{ min-height:2.5em; }
  .kpi-3d .val{ font-size:clamp(20px, 1.45vw, 27px); white-space:nowrap; }
  #kpiStrip .kpi:nth-child(2) .val,
  #kpiStrip .kpi:nth-child(3) .val{
    font-size:clamp(17px, 1.2vw, 23px);
  }
  .kpi-3d .foot{ font-size:14px; }
  #kpiStrip .kpi:nth-child(5) .val{ font-size:clamp(22px, 1.65vw, 30px); }
  .kpi-centered{
    align-items:center;
    text-align:center;
  }
  #kpiStrip .kpi-centered .val{ font-size:clamp(20px, 1.55vw, 27px); }
  .powered-card{
    margin-top:12px;
    padding:14px 18px;
    border-radius:14px;
    border:1px solid rgba(110, 241, 171, 0.55);
    background:linear-gradient(155deg, #2f7e58 0%, #256a49 45%, #1d543a 100%);
    box-shadow:0 10px 22px rgba(7, 33, 21, 0.35), inset 0 1px 0 rgba(229, 255, 241, 0.35), inset 0 -12px 20px rgba(0,0,0,0.20);
    position:relative;
    overflow:hidden;
    text-align:center;
    color:#eafff3;
    font-family:'Oswald';
    letter-spacing:0.08em;
    text-transform:uppercase;
    font-size:19px;
    line-height:1.25;
    font-weight:600;
  }
  .powered-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(110deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.03) 35%, rgba(255,255,255,0) 55%);
    pointer-events:none;
  }
  .powered-card.powered-inline{
    margin-top:0;
    padding:7px 10px;
    border-radius:8px;
    font-size:11px;
    line-height:1.15;
    letter-spacing:0.05em;
    max-width:290px;
  }
  .part-badge{
    display:inline-block;
    margin-left:0;
    position:relative;
    overflow:hidden;
    padding:4px 11px;
    border-radius:999px;
    font-size:13px;
    font-weight:700;
    color:#062312;
    border:1px solid rgba(180,255,205,0.65);
    background:
      linear-gradient(155deg, rgba(218,255,232,0.88) 0%, rgba(120,242,167,0.68) 46%, rgba(72,199,125,0.7) 100%);
    backdrop-filter: blur(7px) saturate(140%);
    -webkit-backdrop-filter: blur(7px) saturate(140%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.5),
      inset 0 -6px 10px rgba(0,0,0,0.09),
      0 2px 5px rgba(26,143,85,0.18);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }
  .part-badge::after{
    content:"";
    position:absolute;
    left:10%;
    top:10%;
    width:80%;
    height:30%;
    border-radius:999px;
    background:linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255,0));
    pointer-events:none;
  }
  .part-badge:hover{
    transform: translateY(-1px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.56),
      inset 0 -6px 10px rgba(0,0,0,0.1),
      0 3px 7px rgba(26,143,85,0.22);
  }
  .part-line{
    display:block;
    margin-top:14px;
  }
  .info-chip-line{
    display:block;
    margin-top:12px;
  }
  .info-chip-stack{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
    margin-top:12px;
    width:100%;
  }
  .info-chip-3d{
    display:inline-block;
    position:relative;
    overflow:hidden;
    padding:5px 12px;
    border-radius:12px;
    font-size:12.5px;
    font-weight:700;
    color:#062312;
    border:1px solid rgba(180,255,205,0.65);
    background:
      linear-gradient(155deg, rgba(218,255,232,0.88) 0%, rgba(120,242,167,0.68) 46%, rgba(72,199,125,0.7) 100%);
    backdrop-filter: blur(7px) saturate(140%);
    -webkit-backdrop-filter: blur(7px) saturate(140%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.5),
      inset 0 -6px 10px rgba(0,0,0,0.09),
      0 2px 5px rgba(26,143,85,0.18);
    max-width:100%;
    text-align:center;
  }
  .info-chip-3d.gold{
    color:#181300;
    border:1px solid rgba(255,204,64,0.82);
    background:
      linear-gradient(160deg, rgba(255,239,120,0.95) 0%, rgba(255,222,55,0.9) 45%, rgba(247,182,0,0.92) 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.56),
      inset 0 -6px 10px rgba(0,0,0,0.1),
      0 2px 5px rgba(198,138,0,0.25);
  }
  .info-chip-3d.bad{
    color:#2a0a0a;
    border:1px solid rgba(255,189,189,0.75);
    background:
      linear-gradient(155deg, rgba(255,224,224,0.92) 0%, rgba(240,140,140,0.78) 46%, rgba(197,68,68,0.85) 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.5),
      inset 0 -6px 10px rgba(0,0,0,0.1),
      0 2px 5px rgba(163,45,45,0.25);
  }
  .info-chip-3d::after{
    content:"";
    position:absolute;
    left:10%;
    top:10%;
    width:80%;
    height:30%;
    border-radius:999px;
    background:linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255,0));
    pointer-events:none;
  }

  .gauge-kpi{ display:flex; align-items:center; justify-content:center; gap:20px; }
  .gauge-num{ position:relative; width:275px; flex-shrink:0; display:flex; flex-direction:column; align-items:center; }
  .gauge-title{
    font-family:'Inter'; font-weight:600; font-size:14px; color:var(--text-dim);
    text-align:center; margin-bottom:4px;
  }
  .gauge-canvas-wrap{ position:relative; width:275px; height:275px; } /* 213 -> 245 (+15%) -> 275px (19/09/2026: "maior") — acompanha gaugeSize em js/app.js */
  .gauge-canvas-wrap::before{
    content:"";
    position:absolute;
    left:50%; top:158px;
    width:64%; height:23px;
    transform:translateX(-50%);
    background:radial-gradient(ellipse at center, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 72%);
    filter:blur(2px);
    z-index:0;
  }
  .gauge-canvas-wrap canvas{
    position:relative; z-index:1;
    width:275px !important; height:275px !important;
    filter: drop-shadow(0 5px 8px rgba(6,9,22,0.55)) drop-shadow(0 0 16px rgba(150,174,234,0.4)) drop-shadow(0 -1px 0 rgba(255,255,255,0.12));
  }
  .gauge-center{
    position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; pointer-events:none; z-index:2; transform:translateY(40px);
  }
  .gauge-value{
    font-family:'JetBrains Mono'; font-weight:700; font-size:34px; color:#AFC0F2;
    text-shadow:0 1px 0 rgba(255,255,255,0.18), 0 2px 6px rgba(0,0,0,0.45);
  }
  .gauge-txt{ text-align:center; }
  /* Texto abaixo do "Meta Mês" maior (pedido do usuário, 14/09/2026: "deixe
     maior o texto", aprovado na prévia). Rótulo em nowrap: com 15px ele
     quebrava em duas linhas no card; 28px no valor ainda cabe
     "R$ 16.009.368,85" (vários meses selecionados). */
  .gauge-txt .label{margin-bottom:6px; font-size:14px; white-space:nowrap;}
  .gauge-txt .val{ font-size:28px; }
  .gauge-txt .foot{ font-size:16px; }

  /* corrugated bar - signature element */
  .corr-bar{
    height:10px; border-radius:6px; overflow:hidden; position:relative;
    background: var(--panel-2); border:1px solid var(--line);
  }
  .corr-fill{
    height:100%; position:relative;
    background-image: repeating-linear-gradient(90deg,
      rgba(255,255,255,0.22) 0px, rgba(255,255,255,0.22) 2px,
      transparent 2px, transparent 4px);
    background-color: var(--accent);
    transition: width 0.6s cubic-bezier(.2,.8,.2,1);
  }
  .corr-fill.good{ background-color: var(--good); }
  .corr-fill.bad{ background-color: var(--bad); }
  .corr-fill.steel{ background-color: var(--steel); }

  /* ---------- Weekly rhythm ---------- */
  .rhythm{
    margin-top: 18px;
    background:
      radial-gradient(130% 75% at 14% -12%, rgba(255,255,255,0.14), rgba(255,255,255,0) 52%),
      linear-gradient(165deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.015) 45%, rgba(255,255,255,0.02) 100%),
      rgba(20,24,30,0.6);
    border:1px solid rgba(255,255,255,0.14);
    border-radius:var(--radius);
    padding: 14px 22px 18px; display:flex; align-items:flex-start; gap: 22px; flex-wrap:wrap;
    position:relative;
    overflow:hidden;
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.14),
      inset 0 -1px 0 rgba(0,0,0,0.3),
      0 22px 46px rgba(0,0,0,0.36),
      0 2px 8px rgba(0,0,0,0.22);
  }
  .rhythm::after{
    content:"";
    position:absolute;
    left:10%; right:10%; bottom:0;
    height:1px;
    background: linear-gradient(90deg, rgba(79,154,192,0) 0%, rgba(242,183,5,0.4) 35%, rgba(79,174,124,0.32) 65%, rgba(79,154,192,0) 100%);
    pointer-events:none;
  }
  .rhythm .rlabel{ font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-dim); font-weight:600; white-space:nowrap; position:relative; z-index:1;}
  .rhythm-bars{ display:flex; gap:10px; flex:1; min-width:260px; position:relative; z-index:1; }
  /* Título "Ritmo semanal" centralizado em cima e as semanas embaixo, na
     largura toda e centralizadas (18/09/2026: "coloque o ritmo no centro e
     centralize os cards em baixo"). Antes o título ficava à esquerda, na
     mesma linha das barras. No celular a regra de 640px já empilhava. */
  .rhythm{ flex-direction:column; align-items:center; gap:12px; }
  .rhythm .rlabel{ text-align:center; }
  .rhythm-bars{ width:100%; justify-content:center; }
  .rweek{ flex:1; text-align:center; }
  .rweek .rbar-track{
    height:92px;
    background: linear-gradient(180deg, rgba(0,0,0,0.3), rgba(0,0,0,0.12));
    border:1px solid rgba(255,255,255,0.12);
    border-radius:16px;
    display:flex; align-items:flex-end; overflow:hidden;
    box-shadow: inset 0 2px 7px rgba(0,0,0,0.4), inset 0 -1px 0 rgba(255,255,255,0.04);
    transition: background 0.25s ease, border-color 0.25s ease;
  }
  .rweek .rbar{
    width:100%;
    background-color: var(--steel);
    background-image: linear-gradient(180deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.06) 45%, rgba(255,255,255,0) 72%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.32);
    border-radius: 10px;
    transition: height 0.4s cubic-bezier(.2,.8,.2,1);
  }
  .rweek .rbar.good{ background-color:var(--good); }
  .rweek .rbar.bad{ background-color:var(--bad); }
  .rweek .rbar.steel{ background-color:var(--steel); }
  /* Semana sem dado lancado ainda (nao e 0% de performance real) - placeholder
     neutro em vez do sliver vermelho, pra nao parecer erro/alarme. */
  .rweek .rbar-track.nodata{
    border-style:dashed;
    border-color: rgba(255,255,255,0.1);
    background: linear-gradient(180deg, rgba(0,0,0,0.16), rgba(0,0,0,0.06));
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.2);
  }
  .rweek .rbar.nodata{
    width:10px;
    margin:0 auto;
    border-radius:999px;
    background-color: rgba(255,255,255,0.16);
    background-image:none;
    box-shadow:none;
  }
  .rweek .rpct{ font-family:'JetBrains Mono'; font-size:17.3px; margin-top:6px; font-weight:800; color:var(--text);}
  .rweek .rname{ font-size:14.4px; color:var(--text); text-transform:uppercase; letter-spacing:0.04em; margin-top:2px; font-weight:800;}
  .rweek .rmeta{ font-family:'JetBrains Mono'; font-size:15.5px; color:var(--text); margin-top:4px; font-weight:800;}
  .rweek .rmeta.good{ color:var(--good); }
  .rweek .rmeta.bad{ color:var(--bad); }
  .rweek .rmeta-diario{
    margin-top:6px;
    padding-top:6px;
    border-top:1px dashed var(--line);
    font-size:12.1px;
    font-weight:600;
    color:var(--text-dim);
    text-transform:none;
    letter-spacing:0;
  }
  .rweek .rmeta-diario span{
    display:block;
    margin-top:2px;
    font-family:'JetBrains Mono';
    font-size:15px;
    font-weight:800;
    color:var(--accent);
  }

  .audit-bar{
    margin-top: 12px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 12px;
  }
  .audit-item{ background: var(--panel-2); border:1px solid var(--line-soft); border-radius:10px; padding:10px 12px; }
  .audit-item .k{ font-size:10px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.06em; }
  .audit-item .v{ margin-top:6px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
  .audit-item .mono{ font-size:12px; }
  .audit-item .delta.ok{ color: var(--good); }
  .audit-item .delta.bad{ color: var(--bad); }
  .audit-item.exact{ border-color: rgba(79,174,124,0.45); box-shadow: inset 0 0 0 1px rgba(79,174,124,0.28); }
  .audit-item .target-hit{ color: var(--good); font-weight:700; }
  .audit-item .target-miss{ color: var(--bad); font-weight:700; }

  .excel-pie-wrap{
    position:relative;
    background:#f8f9fb;
    border:1px solid #c7ccd4;
    border-radius:8px;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.8), 0 2px 8px rgba(0,0,0,0.18);
    padding:6px;
  }
  .excel-pie-wrap svg{
    width:100%;
    height:auto;
    display:block;
  }
  .pie-click-hint{
    position:absolute;
    left:14px;
    bottom:12px;
    z-index:3;
    font-size:12px;
    font-weight:700;
    color:#0f1821;
    font-family:'JetBrains Mono', monospace;
    background: linear-gradient(160deg, rgba(235,248,255,0.9) 0%, rgba(193,229,255,0.72) 45%, rgba(141,197,240,0.7) 100%);
    border:1px solid rgba(195,229,255,0.88);
    border-radius:10px;
    padding:8px 11px;
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.8),
      inset 0 -8px 12px rgba(13,42,72,0.12),
      0 4px 10px rgba(8,34,58,0.22);
    max-width:400px;
    pointer-events:none;
    transform: translateZ(0);
  }
  .pie-hint-breakdown{
    margin-top:6px;
    padding-top:6px;
    border-top:1px solid rgba(13,42,72,0.18);
    display:flex;
    flex-direction:column;
    gap:3px;
  }
  .pie-hint-row{
    display:flex;
    justify-content:space-between;
    gap:14px;
    font-size:11px;
    font-weight:600;
  }
  .pie-hint-row em{
    font-style:normal;
    opacity:0.72;
  }
  .pie-click-hint::after{
    content:"";
    position:absolute;
    left:12%;
    top:9%;
    width:76%;
    height:38%;
    border-radius:999px;
    background:linear-gradient(180deg, rgba(255,255,255,0.46), rgba(255,255,255,0));
    pointer-events:none;
  }
  .pie-click-hint.active{
    border-color:rgba(167,220,255,0.95);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.82),
      inset 0 -8px 12px rgba(13,42,72,0.14),
      0 8px 16px rgba(8,34,58,0.26);
  }
  .pie-click-hint strong{ color:#111; }

  /* ---------- Gráfico: % Atingido da meta por região (blocos isométricos) ---------- */
  .reg-iso-chart-wrap{
    position:relative;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    margin-top:6px;
  }
  .reg-iso-chart-wrap svg{
    width:100%;
    min-width:640px;
    height:auto;
    display:block;
  }

  /* ---------- Modal: subgráfico Passo Fundo ---------- */
  .pf-modal{
    position:fixed;
    inset:0;
    z-index:120;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
  }
  .pf-modal.hidden{ display:none !important; }
  .pf-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(8,11,16,0.72);
    /* backdrop-filter removido: mesmo bug de composição do Android WebView
       de .auth-gate/.auth-card (ver nota no topo do arquivo) — mas aqui o
       elemento afetado não é nem descendente, é o botão dourado IRMÃO
       (.pf-modal-card > .auth-submit) dentro do mesmo .pf-modal. O bug
       reincidiu no botão "Registrar entrada" do Almoxarifado (texto
       ilegível) mesmo sem nenhum ancestral com blur — então o filtro em
       QUALQUER elemento do mesmo stacking context (.pf-modal) já basta,
       não precisa ser ancestral direto. */
    cursor:pointer;
  }
  .pf-modal-card{
    position:relative;
    width:min(880px, 95vw);
    max-height:92vh;
    overflow:auto;
    background: linear-gradient(160deg, #ffffff 0%, #f4f6f9 100%);
    border-radius:18px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.6);
    padding:22px 24px 26px;
    animation: pfModalIn 0.22s ease;
  }
  /* Versão "pizza" do subgráfico precisa de mais largura pros rótulos com
     leader lines nas duas laterais (ver renderPassoFundoModalChartPizza). */
  .pf-modal-card.wide{
    width:min(1180px, 96vw);
  }
  @keyframes pfModalIn{
    from{ opacity:0; transform: translateY(12px) scale(0.98); }
    to{ opacity:1; transform: translateY(0) scale(1); }
  }
  .pf-modal-close{
    position:absolute;
    top:14px;
    right:14px;
    width:32px;
    height:32px;
    border-radius:50%;
    border:1px solid rgba(0,0,0,0.12);
    background:#fff;
    color:#333;
    font-size:18px;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  }
  .pf-modal-close:hover{ background:#f0f0f0; }
  .pf-modal-title{
    margin:0 34px 2px 0;
    font-family:'Oswald', sans-serif;
    font-size:19px;
    font-weight:700;
    color:#151515;
  }
  .pf-modal-sub{
    font-size:12px;
    color:#5a6270;
    margin-bottom:10px;
    font-family:'JetBrains Mono', monospace;
  }
  #pfModalSvg{
    width:100%;
    height:auto;
    display:block;
  }
  .visitas-vendor-pdf-card{
    width:min(1100px, 94vw);
    height:min(820px, 88vh);
    max-height:88vh;
    display:flex;
    flex-direction:column;
  }
  .visitas-vendor-pdf-frame{
    flex:1;
    width:100%;
    margin-top:8px;
    border:0;
    border-radius:12px;
    background:#12151a;
  }

  /* ---------- Tabs ---------- */
  nav.tabs{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    gap: 2px 4px;
    margin-top: 30px;
    border-bottom: 1px solid var(--line);
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:2px;
  }
  nav.tabs button{
    background:none; border:none; color:var(--text); font-family:'Oswald';
    text-transform:uppercase; letter-spacing:0.04em; font-size:15px; font-weight:700;
    padding: 10px 12px; cursor:pointer; position:relative; white-space:nowrap;
    flex-shrink:0;
    border-radius:6px 6px 0 0;
    transition: color 0.15s, background-color 0.15s;
  }
  nav.tabs button:hover{ color: var(--accent); background: rgba(242,183,5,0.06); }
  nav.tabs button:focus-visible{
    outline: 2px solid var(--accent);
    outline-offset: -2px;
  }
  nav.tabs button.active{ color: var(--accent); }
  nav.tabs button.active::after{
    content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--accent);
  }

  @media (min-width: 901px){
    nav.tabs{
      flex-wrap:nowrap;
      justify-content:space-between;
      gap:0;
    }
  }

  /* ---------- Sidebar do Almoxarifado (almoxarifado.html apenas) ----------
     Reaproveita as mesmas classes nav.tabs/.tab-btn e os atributos data-tab
     que js/almoxarifado.js usa pra trocar de aba (document.querySelectorAll
     ('nav.tabs .tab-btn')) — não pode virar uma marcação nova, só um
     modificador. O seletor sempre carrega .tabs-sidebar, que só existe em
     almoxarifado.html, então nav.tabs "puro" (usado no index.html, painel
     comercial) nunca é afetado por nada abaixo.
     Mobile (<901px, breakpoint já usado no resto do projeto): continua uma
     fileira horizontal rolável, sempre visível — sem conceito de
     abrir/fechar aqui, .almox-sidebar-toggle/-backdrop/-close ficam
     display:none.
     Desktop (>=901px): sidebar SEMPRE visível como coluna fixa à esquerda
     (pedido explícito do usuário — nada de drawer escondido atrás de botão
     de menu aqui; o botão/backdrop/close de abrir-fechar ficam
     display:none também neste breakpoint). A elevação dos itens (hover e
     ativo) reaproveita a MESMA receita de sombra em camadas do .card/
     .kpi-3d já usados no resto do projeto (highlight inset em cima, sombra
     inset embaixo, + drop-shadows crescentes) — não inventa um efeito
     novo. */
  .almox-shell{
    display:flex;
    flex-direction:column;
    gap:22px;
    margin-top:30px;
    position:relative;
  }
  .almox-main{ min-width:0; }
  .almox-main .kpi-strip{ margin-top:0; }

  .almox-sidebar-toggle,
  .almox-sidebar-backdrop,
  .almox-sidebar-head{
    display:none;
  }

  nav.tabs.tabs-sidebar{
    margin-top:0;
    border-bottom:none;
    gap:8px;
    padding-bottom:8px;
  }
  nav.tabs.tabs-sidebar button{
    display:flex;
    align-items:center;
    gap:8px;
    text-transform:none;
    font-family:'Inter', sans-serif;
    font-weight:600;
    font-size:14px;
    letter-spacing:0.01em;
    border-radius:999px;
    padding:10px 16px;
    color:var(--text-dim);
    border:1px solid transparent;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, color 0.16s ease;
  }
  nav.tabs.tabs-sidebar button svg{
    width:17px;
    height:17px;
    flex-shrink:0;
    opacity:0.75;
  }
  /* Estado hover/pressed: elevação nítida (nem de longe tão sutil quanto
     antes) sobre fundo neutro — mesma estrutura de sombra em 4 camadas do
     .card (highlight/sombra interna + 2 drop-shadows). */
  nav.tabs.tabs-sidebar button:hover{
    color:var(--text);
    background:
      linear-gradient(160deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.02) 55%, rgba(255,255,255,0.05) 100%),
      var(--panel-2);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.14),
      inset 0 -10px 14px -6px rgba(0,0,0,0.4),
      0 3px 6px rgba(0,0,0,0.4),
      0 12px 22px -10px rgba(0,0,0,0.6);
    transform: translateY(-1.5px);
  }
  /* Estado ativo (selecionado): mesma estrutura, só que com o gradiente
     dourado já usado em .seg-btn.active — sombra bem mais pronunciada
     (blur/offset maiores) pra parecer inflado/flutuando, como no
     mockup de referência. */
  nav.tabs.tabs-sidebar button.active{
    color:#151a1f;
    background:linear-gradient(160deg, #ffe066 0%, #f2b705 55%, #c89100 100%);
    box-shadow:
      inset 0 1.5px 0 rgba(255,255,255,0.65),
      inset 0 -14px 18px -6px rgba(120,80,0,0.35),
      0 4px 8px rgba(0,0,0,0.35),
      0 14px 24px -8px rgba(242,183,5,0.42),
      0 22px 38px -16px rgba(0,0,0,0.6);
    transform: translateY(-1.5px);
  }
  nav.tabs.tabs-sidebar button.active:hover{ transform: translateY(-1.5px); }
  nav.tabs.tabs-sidebar button.active::after{ content:none; }
  nav.tabs.tabs-sidebar button.active svg{ opacity:1; }

  @media (min-width: 901px){
    /* Botão de menu, backdrop e cabeçalho "Menu ×" só existem pro drawer
       mobile — neste breakpoint a sidebar é sempre visível, então nada
       disso tem função aqui. */
    .almox-sidebar-toggle,
    .almox-sidebar-backdrop,
    .almox-sidebar-head{
      display:none;
    }

    .almox-shell{
      flex-direction:row;
      align-items:flex-start;
      gap:28px;
    }
    .almox-main{ flex:1; min-width:0; }

    /* Coluna fixa à esquerda, sempre visível (sem transform/translateX —
       não é mais um drawer). position:sticky pra acompanhar o scroll da
       página sem sair da viewport. */
    .almox-sidebar{
      position:sticky;
      top:24px;
      width:236px;
      flex:0 0 236px;
      display:flex;
      flex-direction:column;
      padding:14px;
      background:
        linear-gradient(165deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0.01) 60%),
        var(--panel);
      border:1px solid rgba(255,255,255,0.08);
      border-radius: var(--radius);
      box-shadow:
        0 1px 2px rgba(0,0,0,0.35),
        0 16px 30px -14px rgba(0,0,0,0.55);
    }

    nav.tabs.tabs-sidebar{
      flex:1;
      display:flex;
      flex-direction:column;
      flex-wrap:nowrap;
      /* Sem isso, o nav.tabs{justify-content:space-between} genérico (regra
         de cima, pensada pra fileira horizontal do index.html) vaza aqui:
         como este nav agora tem flex:1 (altura cheia da sidebar), sobra
         espaço vertical e o space-between espalhava os 8 botões telona
         afora em vez de ficarem com o gap de 10px pretendido. */
      justify-content:flex-start;
      overflow:visible;
      gap:10px;
      padding:0;
    }
    nav.tabs.tabs-sidebar button{
      width:100%;
      text-align:left;
      padding:13px 16px;
    }
  }

  .panel{ display:none; margin-top: 26px; animation: fade 0.25s ease; }
  .panel.active{ display:block; }
  @keyframes fade{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);} }

  .grid2{ display:grid; grid-template-columns: 1.5fr 1fr; gap: 20px; align-items:start; }
  .grid3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  @media (max-width: 900px){ .grid2, .grid3{ grid-template-columns: 1fr; } }

  /* Espaçamento padrão entre cards empilhados verticalmente num mesmo painel (mesmo valor do gap de .grid2/.grid3) */
  .panel > .card + .card{ margin-top:20px; }

  .card{
    background:
      radial-gradient(130% 75% at 14% -12%, rgba(255,255,255,0.16), rgba(255,255,255,0) 52%),
      linear-gradient(165deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.015) 45%, rgba(255,255,255,0.02) 100%),
      rgba(20,24,30,0.6);
    border:1px solid rgba(255,255,255,0.14); border-radius: var(--radius);
    padding: 20px 22px;
    position:relative;
    overflow:hidden;
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.16),
      inset 0 -1px 0 rgba(0,0,0,0.35),
      0 2px 4px rgba(0,0,0,0.45),
      0 14px 28px -8px rgba(0,0,0,0.55),
      0 34px 60px -16px rgba(0,0,0,0.62);
  }
  .card::after{
    content:"";
    position:absolute;
    left:10%; right:10%; bottom:0;
    height:1px;
    background: linear-gradient(90deg, rgba(79,154,192,0) 0%, rgba(242,183,5,0.4) 35%, rgba(79,174,124,0.32) 65%, rgba(79,154,192,0) 100%);
    pointer-events:none;
  }
  .card h3{
    font-family:'Oswald'; font-size:14px; text-transform:uppercase; letter-spacing:0.06em;
    font-weight:600; color:var(--text); margin-bottom: 4px;
  }
  .card .card-sub{ font-size:12px; color:var(--text-faint); margin-bottom:16px; }

  table{ width:100%; border-collapse:collapse; font-size:14px;}
  thead th{
    text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:0.05em;
    color:var(--text-faint); font-weight:600; padding: 0 10px 10px; border-bottom:1px solid var(--line);
    cursor:pointer; user-select:none; white-space:nowrap;
  }
  thead th:hover{ color: var(--accent); }
  thead th.sorted::after{ content:" ▾"; color:var(--accent); }
  tbody td{ padding: 10px; border-bottom: 1px solid var(--line-soft); vertical-align:middle; }
  tbody tr{ cursor:pointer; transition: background 0.12s; }
  tbody tr:hover{ background: var(--panel-2); }
  #chapaHistTable th,
  #chapaHistTable td{ text-align:center; }
  #chapaHistTable thead th{ color:var(--text-dim); font-weight:700; }
  #chapaHistTable tbody td{ font-size:15px; font-weight:700; }
  /* Tratamento premium padrão (dourado/--accent) para linhas de totalizador; grupo-total-row e bobina-total-row sobrescrevem com suas próprias cores temáticas abaixo */
  tbody tr.total-row{
    font-weight:700;
    background:linear-gradient(180deg, rgba(242,183,5,0.14), rgba(242,183,5,0.05) 58%, rgba(255,255,255,0.02));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 0 0 1px rgba(242,183,5,0.18);
  }
  tbody tr.total-row:hover{
    background:linear-gradient(180deg, rgba(242,183,5,0.18), rgba(242,183,5,0.08) 58%, rgba(255,255,255,0.03));
  }
  tbody tr.total-row td{
    border-top:1px solid rgba(242,183,5,0.42);
    border-bottom:1px solid rgba(242,183,5,0.22);
    font-weight:800;
  }
  tbody tr.total-row td.name{
    color:var(--accent);
    letter-spacing:0.06em;
  }
  #panel-margem-grupo #grupoTable tr.grupo-total-sep td{
    height:10px;
    padding:0;
    border-top:2px dashed rgba(242,183,5,0.28);
    border-bottom:none;
    background:transparent;
  }
  #panel-margem-grupo #grupoTable tr.grupo-total-row{
    background:linear-gradient(180deg, rgba(242,183,5,0.14), rgba(242,183,5,0.05) 58%, rgba(255,255,255,0.02));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 0 0 1px rgba(242,183,5,0.18);
  }
  #panel-margem-grupo #grupoTable tr.grupo-total-row:hover{
    background:linear-gradient(180deg, rgba(242,183,5,0.18), rgba(242,183,5,0.08) 58%, rgba(255,255,255,0.03));
  }
  #panel-margem-grupo #grupoTable tr.grupo-total-row td{
    border-top:1px solid rgba(242,183,5,0.42);
    border-bottom:1px solid rgba(242,183,5,0.22);
    font-weight:800;
  }
  #panel-margem-grupo #grupoTable tr.grupo-total-row td.name{
    color:var(--accent);
    letter-spacing:0.06em;
  }
  #panel-bobina #bobinaTable tr.bobina-total-row{
    background:linear-gradient(180deg, rgba(79,174,124,0.14), rgba(79,174,124,0.05) 58%, rgba(255,255,255,0.02));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 0 0 1px rgba(79,174,124,0.18);
  }
  #panel-bobina #bobinaTable tr.bobina-total-row:hover{
    background:linear-gradient(180deg, rgba(79,174,124,0.18), rgba(79,174,124,0.08) 58%, rgba(255,255,255,0.03));
  }
  #panel-bobina #bobinaTable tr.bobina-total-row td{
    border-top:1px solid rgba(79,174,124,0.42);
    border-bottom:1px solid rgba(79,174,124,0.22);
    font-weight:800;
  }
  #panel-bobina #bobinaTable tr.bobina-total-row td.name{
    color:var(--good);
    letter-spacing:0.06em;
  }
  td.num{ font-family:'JetBrains Mono'; text-align:right; white-space:nowrap; }
  td.name{ font-weight:600; }
  /* Vendedor que fechou a meta do mes: nome em verde (pedido do usuario,
     2026-08-31). So a coluna do nome — os numeros da linha ja tem as pilulas
     e barras com a propria escala de cor. Linhas de totalizador nao entram
     (mantem o dourado; ver hitGoal em js/app.js). */
  #vendTable tbody td.name.goal-hit{ color:var(--good); font-weight:800; }
  .pill{
    display:inline-block; padding:2px 8px; border-radius:20px; font-size:11px; font-weight:600;
    font-family:'JetBrains Mono';
  }
  .pill.good{ background:var(--good-soft); color:var(--good); }
  .pill.bad{ background:var(--bad-soft); color:var(--bad); }
  .pill.warn{ background: rgba(225,148,60,0.15); color:var(--warn); }
  .pill.steel{ background:var(--steel-soft); color:var(--steel); }
  .pill.bad.pulse{ animation: gpd-pill-pulse 1.3s ease-in-out infinite; }
  @keyframes gpd-pill-pulse{
    0%{ box-shadow: 0 0 0 0 rgba(225,89,90,0.65); transform:scale(1); }
    60%{ box-shadow: 0 0 0 10px rgba(225,89,90,0); transform:scale(1.12); }
    100%{ box-shadow: 0 0 0 0 rgba(225,89,90,0); transform:scale(1); }
  }

  .bar-cell{ width:110px; }
  .detail-row{ display:none; background: var(--bg-2); }
  .detail-row.open{ display:table-row; }
  .detail-row td{ padding: 16px 10px; border-bottom: 1px solid var(--line); }
  .detail-grid{ display:grid; gap:14px; }
  /* auto-fit: acomoda 4 (vendedores) ou 5 (regiões) itens numa única linha sem duplicar a classe */
  .detail-grid-top{ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  /* auto-fit também aqui (25/09/2026, "deixe na linha de cima junto"): com os
     números do CRM viraram SEIS itens nesta linha e o fixo em 5 jogava a Meta
     de visitas sozinha numa terceira fileira, com a linha de cima sobrando
     espaço à direita. */
  .detail-grid-bottom{ grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-top:12px; }
  .detail-item .dl{ font-size:10px; text-transform:uppercase; color:var(--text-dim); letter-spacing:0.05em; font-weight:700;}
  .detail-item .dv{ font-family:'JetBrains Mono'; font-size:15px; margin-top:3px; font-weight:800; color:var(--text);}
  @media (max-width: 900px){
    .detail-grid-top,
    .detail-grid-bottom{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  .seg-toggle{
    display:flex;
    gap:3px;
    background:linear-gradient(165deg, rgba(44,52,64,0.95) 0%, rgba(33,40,50,0.95) 100%);
    border:1px solid var(--line);
    border-radius:13px;
    padding:4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -8px 12px rgba(0,0,0,0.12);
    backdrop-filter: blur(8px) saturate(130%);
    -webkit-backdrop-filter: blur(8px) saturate(130%);
  }
  .seg-btn{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    background:transparent;
    border:1px solid transparent;
    color:var(--text-dim);
    font-family:'Oswald';
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:0.04em;
    font-weight:600;
    padding:6px 12px;
    border-radius:9px;
    cursor:pointer;
    transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  }
  .seg-btn::after{
    content:"";
    position:absolute;
    left:12%;
    top:8%;
    width:76%;
    height:38%;
    border-radius:999px;
    background:linear-gradient(180deg, rgba(255,255,255,0.38), rgba(255,255,255,0));
    opacity:0;
    transition:opacity 0.2s ease;
    pointer-events:none;
    z-index:-1;
  }
  .seg-btn:hover{
    color:var(--text);
    transform: translateY(-1px);
    border-color: rgba(255,255,255,0.14);
    background:linear-gradient(165deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  }
  .seg-btn.active{
    color:#151a1f;
    background:linear-gradient(160deg, #ffd126 0%, #f2b705 52%, #c89100 100%);
    border-color: rgba(255,235,156,0.82);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -10px 14px rgba(120,80,0,0.2), 0 2px 8px rgba(242,183,5,0.28);
    animation: segSwapPop 0.22s ease;
  }
  .seg-btn.active::after{ opacity:1; }
  @keyframes segSwapPop{
    0%{ transform:scale(0.96); }
    100%{ transform:scale(1); }
  }
  .mix-summary{
    display:grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap:12px;
    margin-top:16px;
    padding:12px;
    background:var(--panel-2);
    border:1px solid var(--line);
    border-radius:var(--radius);
  }
  .mix-summary .ms-item{
    background: linear-gradient(165deg, rgba(43,52,66,0.98) 0%, rgba(36,44,56,0.98) 100%);
    border:1px solid var(--line-soft);
    border-radius:11px;
    padding:12px 14px;
    min-height:78px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 1px 3px rgba(0,0,0,0.18);
  }
  .mix-summary .ms-item .ms-label{ font-size:11.5px; text-transform:uppercase; letter-spacing:0.07em; color:#aab6c8; font-weight:700; }
  .mix-summary .ms-item .ms-val{ font-family:'JetBrains Mono'; font-size:24px; font-weight:800; margin-top:6px; color:#f3f7ff; text-shadow:0 1px 0 rgba(0,0,0,0.24); }
  .mix-summary .ms-item.glass-hit,
  .mix-summary .ms-item.glass-miss{
    position:relative;
    overflow:hidden;
    border-width:1px;
    backdrop-filter: blur(8px) saturate(145%);
    -webkit-backdrop-filter: blur(8px) saturate(145%);
  }
  .mix-summary .ms-item.glass-hit{
    background: linear-gradient(165deg, rgba(188,255,218,0.28) 0%, rgba(92,211,127,0.18) 55%, rgba(39,128,81,0.16) 100%);
    border-color: rgba(140,255,190,0.5);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.36), inset 0 -12px 16px rgba(0,0,0,0.1), 0 3px 8px rgba(38,151,90,0.2);
  }
  .mix-summary .ms-item.glass-miss{
    background: linear-gradient(165deg, rgba(255,202,202,0.28) 0%, rgba(225,89,90,0.18) 55%, rgba(139,45,46,0.18) 100%);
    border-color: rgba(255,159,159,0.5);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), inset 0 -12px 16px rgba(0,0,0,0.1), 0 3px 8px rgba(154,52,52,0.2);
  }
  .mix-summary .ms-item.glass-hit .ms-label,
  .mix-summary .ms-item.glass-miss .ms-label{ color:#e9f0fb; }
  .mix-summary .ms-item.glass-hit::after,
  .mix-summary .ms-item.glass-miss::after{
    content:"";
    position:absolute;
    left:11%;
    top:8%;
    width:78%;
    height:38%;
    border-radius:999px;
    background: transparent;
    pointer-events:none;
  }
  .mix-summary .ms-val.hit{ color: #caffdf; text-shadow:0 1px 0 rgba(0,0,0,0.32), 0 0 6px rgba(91,216,146,0.25); }
  .mix-summary .ms-val.miss{ color: #ffd3d7; text-shadow:0 1px 0 rgba(0,0,0,0.32), 0 0 6px rgba(255,124,132,0.25); }
  @media (max-width: 900px){ .mix-summary{ grid-template-columns:1fr; } }
  #panel-bobina .mix-summary{ grid-template-columns: repeat(3, minmax(180px, 1fr)); }
  #panel-bobina .mix-summary .ms-item{
    min-height:64px;
    padding:10px 12px;
    justify-content:flex-start;
    gap:4px;
  }
  #panel-bobina .mix-summary .ms-item .ms-label{
    font-size:10.5px;
  }
  #panel-bobina .mix-summary .ms-item .ms-val{
    font-size:22px;
    margin-top:2px;
  }
  #panel-bobina .bobina-extra{
    margin-top:12px;
    border:1px solid var(--line);
    background:#fff;
    color:#111;
    overflow:hidden;
  }
  #panel-bobina .bobina-extra .extra-top{
    display:grid;
    grid-template-columns: 152px 1fr;
    min-height:140px;
  }
  #panel-bobina .bobina-extra .extra-head{
    background:#24508c;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Oswald';
    font-size:15px;
    font-style:italic;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.04em;
  }
  #panel-bobina .bobina-extra .extra-body{
    padding:14px 14px 12px 14px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:8px;
  }
  #panel-bobina .bobina-extra .metric-line{
    display:grid;
    grid-template-columns: 1fr 190px;
    align-items:center;
    gap:12px;
    min-height:28px;
  }
  #panel-bobina .bobina-extra .metric-value{
    font-family:'JetBrains Mono';
    font-size:30px;
    font-weight:700;
    color:#1f4d86;
    line-height:1;
  }
  #panel-bobina .bobina-extra .metric-value.red{ color:#b31515; }
  #panel-bobina .bobina-extra .metric-value.green{ color:#19af47; }
  #panel-bobina .bobina-extra .metric-label{
    font-size:17px;
    color:#111;
    line-height:1;
    text-align:right;
    justify-self:end;
  }
  #panel-bobina .bobina-extra .metric-label.highlight{
    background:#fff600;
    font-weight:700;
    padding:2px 8px;
  }
  #panel-bobina .bobina-extra .extra-bottom{
    background:#24508c;
    color:#fff;
    display:grid;
    grid-template-columns: 1fr auto;
    align-items:center;
    padding:7px 12px 7px 12px;
    font-family:'Oswald';
    font-weight:700;
    border-top:1px solid #11365f;
  }
  #panel-bobina .bobina-extra .extra-bottom .bottom-label{ font-size:26px; }
  #panel-bobina .bobina-extra .extra-bottom .bottom-value{ font-size:25px; }
  .legend-row{ display:flex; gap:16px; margin-top:12px; flex-wrap:wrap; }
  .legend-item{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-dim); }
  .legend-dot{ width:10px; height:10px; border-radius:2px; }

  #panel-insumos .card h3,
  #panel-insumos .card .card-sub{
    text-align:center;
  }
  #panel-insumos .card h3{
    font-size:16px;
    letter-spacing:0.08em;
    font-weight:700;
  }
  #panel-insumos .card .card-sub{
    font-size:13.5px;
    font-weight:500;
    color:var(--text-dim);
  }
  #panel-insumos #insumoTable thead th,
  #panel-insumos #comTable thead th,
  #panel-acessorios #acessTable thead th,
  #panel-insumos #acessTable thead th{
    text-align:center;
    color:var(--text-dim);
    font-weight:700;
  }
  #panel-insumos #insumoTable tbody td,
  #panel-insumos #comTable tbody td,
  #panel-acessorios #acessTable tbody td,
  #panel-insumos #acessTable tbody td{
    text-align:center;
  }
  #panel-insumos #insumoTable td.num,
  #panel-insumos #comTable td.num,
  #panel-acessorios #acessTable td.num,
  #panel-insumos #acessTable td.num{
    text-align:center;
    font-size:16px;
    font-weight:700;
  }
  #panel-insumos #insumoTable td.name,
  #panel-insumos #comTable td.name,
  #panel-acessorios #acessTable td.name,
  #panel-insumos #acessTable td.name{
    text-align:center;
    font-size:15px;
    font-weight:700;
  }
  #panel-insumos #insumoTable .pill,
  #panel-insumos #comTable .pill,
  #panel-acessorios #acessTable .pill,
  #panel-insumos #acessTable .pill{
    font-size:16px;
    padding:5px 13px;
  }

  #panel-bobina #bobinaTable thead th,
  #panel-bobina #bobinaTable tbody td,
  #panel-bobina #bobinaTable td.num,
  #panel-bobina #bobinaTable td.name{
    text-align:center;
  }
  #panel-bobina #bobinaTable thead th{
    color:var(--text-dim);
    font-weight:700;
  }
  #panel-bobina #bobinaTable tbody td{
    font-size:15px;
    font-weight:700;
  }
  #panel-bobina .card h3,
  #panel-bobina .card .card-sub{
    text-align:center;
  }

  #panel-regioes-tabela #regResumoTable thead th,
  #panel-regioes-tabela #regResumoBody > tr:not(.detail-row) > td{
    text-align:center;
  }
  #panel-regioes-tabela #regResumoTable thead th{
    font-size:15.2px;
  }
  #panel-regioes-tabela #regResumoBody > tr:not(.detail-row) > td{
    font-size:18.5px;
    font-weight:700;
    color:var(--text);
  }
  #panel-regioes-tabela #regResumoBody .pill{
    font-size:18px;
    padding:5px 14px;
  }

  #panel-vendedores .card h3{
    font-size:28px;
  }
  #panel-vendedores .card .card-sub{
    font-size:15px;
  }
  #panel-vendedores #vendTable thead th{
    font-size:13px;
    letter-spacing:0.07em;
    color:var(--text-dim);
    font-weight:700;
  }
  #panel-vendedores #vendTable thead th[data-key="pctTelha"],
  #panel-vendedores #vendTable thead th[data-key="pctProdutos"]{
    text-align:center;
  }
  #panel-vendedores #vendTable tbody td{
    font-size:24px;
    padding-top:12px;
    padding-bottom:12px;
  }
  #panel-vendedores #vendTable tbody td .pill{
    font-size:17px;
    padding:5px 11px;
  }
  #panel-vendedores #vendTable td.bar-cell{
    width:170px;
    text-align:center;
  }
  #panel-vendedores #vendTable td.bar-cell .corr-bar{
    width:140px;
    height:14px;
    border-radius:8px;
    margin:0 auto;
  }
  #panel-vendedores #vendTable td.bar-cell .mono{
    display:block;
    text-align:center;
    font-size:13px !important;
    margin-top:5px !important;
  }

  #panel-margem-grupo .card h3,
  #panel-margem-grupo .card .card-sub{
    text-align:center;
  }
  #panel-margem-grupo .card h3{
    font-size:28px;
  }
  #panel-margem-grupo .card .card-sub{
    font-size:16px;
  }
  #panel-margem-grupo .card > div[style*="overflow-x:auto"]{
    max-width:980px;
    margin:0 auto;
  }
  #panel-margem-grupo #grupoTable{
    width:100%;
  }
  #panel-margem-grupo #grupoTable thead th{
    font-size:14px;
    letter-spacing:0.07em;
    color:var(--text-dim);
    font-weight:700;
  }
  #panel-margem-grupo #grupoTable thead th,
  #panel-margem-grupo #grupoTable tbody td{
    text-align:center;
  }
  #panel-margem-grupo #grupoTable tbody td{
    font-size:26px;
    padding-top:12px;
    padding-bottom:12px;
  }
  #panel-margem-grupo #grupoTable tbody td.col-pm{
    font-size:19.5px;
  }
  #panel-margem-grupo #grupoTable tbody td.name{
    font-size:28px;
  }
  #panel-margem-grupo #grupoTable tbody td:first-child{
    text-align:center;
  }
  #panel-margem-grupo #grupoTable td.num,
  #panel-margem-grupo #grupoTable th.num{
    text-align:center;
  }
  #panel-margem-grupo #grupoTable td.num.num-low{
    color: var(--bad);
    font-weight:700;
  }

  #panel-telha-eps .card h3{
    font-size:20px;
    letter-spacing:0.08em;
    text-align:center;
    width:100%;
  }
  #panel-telha-eps .card .card-sub{
    font-size:13.5px;
    margin-top:2px;
    text-align:center;
    width:100%;
  }
  #panel-telha-eps .card{
    min-height: 360px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
  }
  #panel-telha-eps #epsBox{
    margin-top:20px;
    display:grid;
    grid-template-columns: repeat(2, minmax(250px, 330px));
    justify-content:center;
    gap:16px 20px;
    align-items:stretch;
    width:100%;
    max-width:700px;
  }
  #panel-telha-eps #epsBox .detail-item .dl{
    font-size:14px;
    letter-spacing:0.06em;
    color:var(--text-dim);
    font-weight:700;
  }
  #panel-telha-eps #epsBox .detail-item .dv{
    font-size:26px;
    font-weight:700;
    line-height:1.05;
    margin-top:8px;
    color:var(--good);
  }
  #panel-telha-eps #epsBox .detail-item{
    margin-bottom:0 !important;
    min-height:112px;
    padding:18px 20px;
    border:1px solid rgba(79,174,124,0.32);
    background:linear-gradient(180deg, rgba(79,174,124,0.14), rgba(79,174,124,0.05) 58%, rgba(255,255,255,0.02));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 0 0 1px rgba(79,174,124,0.18);
    border-radius:14px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
  }
  #panel-telha-eps #epsBox .detail-item.eps-wide{
    grid-column: 1 / -1;
  }

  .foot-note{
    margin-top: 40px; padding-top:18px; border-top:1px solid var(--line);
    font-size:11.5px; color:var(--text-faint); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  }

  @media (max-width: 900px){ .audit-bar{ grid-template-columns:1fr; } }
  @media (max-width: 900px){
    .top-inner{
      padding: 24px 10px 20px 20px;
    }
    .brand{
      margin-top:8px;
      gap:6px;
    }
    .brand-mark{
      height:78px;
    }
    .brand-logo-main{
      height:77px;
    }
    .telhas-logo-img{
      width:auto;
      height:56px;
    }
    .brand-text{
      margin-left:2px;
    }
    .period{
      margin-right:0;
    }
  }
  @media (max-width: 900px){
    #panel-telha-eps #epsBox{
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 640px){
    .wrap{
      padding: 0 12px 56px;
    }
    .top-inner{
      padding: 18px 12px 16px;
      align-items:flex-start;
      gap:14px;
    }
    .brand{
      width:100%;
      flex-wrap:wrap;
      gap:8px 10px;
      margin-top:0;
      text-align:center;
    }
    .brand-text{
      margin-left:0;
    }
    .brand-text .name{
      font-size:18px;
    }
    .brand-text .tag{
      font-size:10.5px;
    }
    .brand-mark{
      height:70px;
    }
    .telhas-logo-img{
      height:60px;
      max-width:200px;
    }
    .period{
      width:100%;
      text-align:center;
      margin:0;
    }
    .period .value{
      font-size:24px;
    }
    .period .sub{
      font-size:12px;
      line-height:1.35;
    }
    .excel-btn{
      width:100%;
      margin-top:8px;
      padding:10px 12px;
      font-size:12px;
    }
    .logout-powered-row{
      justify-content:stretch;
      gap:8px;
    }
    .logout-powered-row .excel-btn,
    .logout-powered-row .powered-inline,
    .logout-powered-row .visitas-mes-pill{
      width:100%;
      max-width:none;
    }
    /* No celular a .header-utility-row quebra em duas linhas: a assinatura
       ocupa a largura toda em cima e o botão embaixo, em vez de os dois
       espremidos lado a lado. */
    .header-utility-row{
      flex-wrap:wrap;
      justify-content:stretch;
    }
    .header-utility-row #poweredSignature{
      width:100%;
      max-width:none;
      margin-right:0;
      order:-1;
    }
    .logout-powered-row .visitas-mes-pill{
      justify-content:center;
      box-sizing:border-box;
    }
    .month-picker-card{
      width:100%;
      padding:12px;
    }
    .month-picker-list{
      grid-template-columns: 1fr;
    }
    .month-picker-item{
      font-size:12.5px;
    }
    .month-picker-actions{
      justify-content:stretch;
    }
    .month-picker-actions .excel-btn{
      width:100%;
    }
    .auth-gate{
      padding:14px;
    }
    .auth-card{
      padding:36px 22px 28px;
    }
    .auth-card h2{
      font-size:24px;
    }
    .access-banner{
      margin-top:18px;
      font-size:12px;
    }
    .seller-panel{
      padding:14px;
    }
    .seller-panel-title{
      font-size:24px;
    }
    .seller-inline-stats,
    .seller-kpis,
    .seller-detail-grid,
    .seller-detail-grid-top,
    .seller-detail-grid-bottom{
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .seller-kpi .value{
      font-size:clamp(12px, 3.4vw, 22px);
    }
    /* Rodapé "Meta | R$ ..." empilhado no celular. Com a grade em 2 colunas
       sobram ~150px por card (menos padding, ~125px úteis): lado a lado, um
       "Meta produtos" + "R$ 640.000,00" não cabem e o valor era cortado na
       borda direita do card (print do usuário, 01/09/2026). Empilhado, o
       rótulo fica em cima e o número inteiro aparece embaixo. */
    .seller-kpi-foot{
      flex-direction:column;
      align-items:flex-start;
      gap:1px;
      margin-top:6px;
      font-size:11.5px;
      line-height:1.3;
    }
    .seller-kpi-foot span{ min-width:0; overflow-wrap:anywhere; }
    /* Um pouco menos de padding e de espaçamento entre letras do rótulo:
       "REALIZADO TOTAL" cabia em uma linha só com essa folga. */
    .seller-kpi{ padding:13px 12px 12px; }
    .seller-kpi .label{ letter-spacing:0.04em; }
    .seller-kpi .value,
    .seller-kpi-value-main,
    .seller-kpi-value-secondary{ overflow-wrap:anywhere; }
    .kpi-strip{
      grid-template-columns: 1fr;
      margin-top:18px;
      overflow-x:visible;
    }
    .powered-card{
      margin-top:10px;
      font-size:16px;
      padding:12px 14px;
    }
    .kpi,
    .kpi-3d{
      padding:16px 14px;
      min-height:auto;
    }
    .kpi .label,
    .kpi-3d .label{
      font-size:11px;
    }
    .kpi .val,
    .kpi-3d .val,
    #kpiStrip .kpi-centered .val,
    #kpiStrip .kpi:nth-child(5) .val{
      font-size:clamp(18px, 5.8vw, 24px);
      white-space:nowrap;
    }
    .kpi .foot,
    .kpi-3d .foot{
      font-size:12px;
    }
    .info-chip-stack{
      gap:12px;
    }
    .part-badge,
    .info-chip-3d{
      font-size:11px;
      padding:4px 10px;
      max-width:100%;
      white-space:normal;
      text-align:center;
    }
    .rhythm{
      margin-top:18px;
      flex-direction:column;
      align-items:stretch;
      gap:12px;
      padding:14px 14px 16px;
    }
    .rhythm-bars{
      gap:10px;
      width:100%;
      flex:none;
      min-width:0;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
      scroll-snap-type:x proximity;
      padding-bottom:6px;
      mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
      -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    }
    .rhythm-bars .rweek{
      flex:0 0 132px;
      min-width:132px;
      scroll-snap-align:start;
    }
    .rhythm-bars .rname{
      font-size:12.5px;
    }
    .rhythm-bars .rpct{
      font-size:15.5px;
    }
    .rhythm-bars .rmeta{
      font-size:12.5px;
    }
    nav.tabs{
      margin-top:20px;
      gap:2px;
      padding-bottom:6px;
      flex-wrap:nowrap;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
      scroll-snap-type:x proximity;
      mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
      -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    }
    nav.tabs button{
      padding: 10px 12px;
      font-size:13.5px;
      scroll-snap-align:start;
      scroll-margin-inline:16px;
    }
    .panel{
      margin-top:18px;
    }
    .card{
      padding:16px 14px;
    }
    .card h3,
    #panel-vendedores .card h3,
    #panel-margem-grupo .card h3,
    #panel-telha-eps .card h3{
      font-size:18px;
      text-align:center;
    }
    .card .card-sub,
    #panel-vendedores .card .card-sub,
    #panel-margem-grupo .card .card-sub,
    #panel-telha-eps .card .card-sub{
      font-size:12px;
      text-align:center;
    }
    table{
      font-size:12px;
    }
    thead th,
    tbody td{
      padding-left:8px;
      padding-right:8px;
    }
    thead th{
      font-size:10px;
    }
    td.num{
      font-size:12px;
    }
    td.name{
      font-size:12px;
    }
    .detail-grid{
      /* Empilha em 1 coluna: o detail-row fica dentro do wrapper com scroll
         horizontal da tabela (#sellerTableWrap), entao 2 colunas empurravam a
         segunda metade das informacoes (Meta acessorios, Tonelagem, Ligacoes,
         Meta de visitas) para fora da area visivel sem nenhum indicio de que
         havia mais conteudo pra rolar. Em 1 coluna tudo fica legivel sem
         precisar arrastar a tabela pros lados. */
      grid-template-columns: 1fr;
      gap:10px;
    }
    .detail-item .dv{
      font-size:13px;
    }
    .mix-summary,
    #panel-bobina .mix-summary{
      grid-template-columns: 1fr;
      padding:10px;
      gap:10px;
    }
    .mix-summary .ms-item{
      min-height:64px;
      padding:10px 12px;
    }
    .mix-summary .ms-item .ms-val{
      font-size:20px;
    }
    #panel-bobina .bobina-extra .extra-top{
      grid-template-columns:1fr;
    }
    #panel-bobina .bobina-extra .extra-head{
      min-height:54px;
      font-size:14px;
    }
    #panel-bobina .bobina-extra .metric-line{
      grid-template-columns:1fr;
      gap:6px;
      justify-items:center;
      text-align:center;
    }
    #panel-bobina .bobina-extra .metric-label{
      text-align:center;
      justify-self:center;
      font-size:14px;
    }
    #panel-bobina .bobina-extra .metric-value{
      font-size:24px;
    }
    #panel-bobina .bobina-extra .extra-bottom{
      grid-template-columns:1fr;
      gap:4px;
      text-align:center;
      justify-items:center;
    }
    #panel-bobina .bobina-extra .extra-bottom .bottom-label,
    #panel-bobina .bobina-extra .extra-bottom .bottom-value{
      font-size:18px;
    }
    #panel-margem-grupo .card > div[style*="overflow-x:auto"]{
      max-width:none;
      margin:0;
    }
    #panel-margem-grupo #grupoTable thead th,
    #panel-margem-grupo #grupoTable tbody td,
    #panel-vendedores #vendTable thead th,
    #panel-vendedores #vendTable tbody td,
    #panel-insumos #insumoTable thead th,
    #panel-insumos #insumoTable tbody td,
    #panel-insumos #comTable thead th,
    #panel-insumos #comTable tbody td,
    #panel-acessorios #acessTable thead th,
    #panel-acessorios #acessTable tbody td,
    #panel-insumos #acessTable thead th,
    #panel-insumos #acessTable tbody td,
    #panel-bobina #bobinaTable thead th,
    #panel-bobina #bobinaTable tbody td,
    #panel-regioes-tabela #regResumoTable thead th,
    #panel-regioes-tabela #regResumoBody > tr:not(.detail-row) > td{
      text-align:left;
    }
    #panel-vendedores #vendTable td.bar-cell,
    #panel-vendedores #vendTable td.bar-cell .corr-bar{
      width:100%;
    }
    #panel-vendedores #vendTable thead th{
      font-size:10px;
      letter-spacing:0.03em;
    }
    #panel-vendedores #vendTable tbody td{
      font-size:13px;
      padding-top:10px;
      padding-bottom:10px;
    }
    #panel-vendedores #vendTable tbody td .pill{
      font-size:11px;
      padding:3px 8px;
    }
    #panel-margem-grupo #grupoTable thead th,
    #panel-margem-grupo #grupoTable tbody td{
      padding-left:5px;
      padding-right:5px;
    }
    #panel-margem-grupo #grupoTable thead th{
      font-size:10.5px;
      letter-spacing:0.02em;
    }
    #panel-margem-grupo #grupoTable tbody td{
      font-size:14px;
      padding-top:10px;
      padding-bottom:10px;
    }
    #panel-margem-grupo #grupoTable tbody td.col-pm{
      font-size:10.5px;
    }
    #panel-margem-grupo #grupoTable tbody td.name{
      font-size:13px;
      overflow-wrap:anywhere;
      word-break:break-word;
    }
    /* Margem por grupo no celular (13/10/2026, "a margem não consigo ver"): as regras de desktop
       acima (td.name 28px, td.num 26px nowrap, td:first-child centralizado) tem especificidade
       MAIOR que as mobile genericas (tbody td), entao venciam e a coluna Margem % saia da tela.
       Aqui repetimos os mesmos seletores (e vem depois), 3 colunas cabem sem rolagem lateral. */
    /* O bloco generico "tabelas rolaveis no celular" (mais abaixo: nowrap, coluna presa e
       mascara de fade na direita) tambem pegava esta tabela e cortava o PM; ela cabe sem rolar. */
    #panel-margem-grupo .card > div[style*="overflow-x:auto"]{
      -webkit-mask-image:none;
              mask-image:none;
    }
    #panel-margem-grupo #grupoTable thead th:first-child,
    #panel-margem-grupo #grupoTable tbody td:first-child{
      position:static;
      border-right:0;
    }
    #panel-margem-grupo .card h3{ font-size:20px; }
    #panel-margem-grupo .card .card-sub{ font-size:13px; }
    #panel-margem-grupo #grupoTable{ table-layout:fixed; }
    #panel-margem-grupo #grupoTable thead th:nth-child(2){ width:80px; }
    #panel-margem-grupo #grupoTable thead th:nth-child(3){ width:66px; }
    #panel-margem-grupo #grupoTable thead th,
    #panel-margem-grupo #grupoTable thead th.num{
      font-size:10.5px;
      letter-spacing:0.02em;
      text-align:left;
    }
    #panel-margem-grupo #grupoTable thead th.num,
    #panel-margem-grupo #grupoTable tbody td.num,
    #panel-margem-grupo #grupoTable td.num.num-low{
      text-align:right;
    }
    #panel-margem-grupo #grupoTable tbody td,
    #panel-margem-grupo #grupoTable tbody td:first-child{
      font-size:13px;
      padding:9px 4px;
      text-align:left;
    }
    #panel-margem-grupo #grupoTable tbody td.num{
      font-variant-numeric:tabular-nums;
      white-space:nowrap;
      text-align:right;
    }
    #panel-margem-grupo #grupoTable tbody td.name{
      font-size:12px;
      letter-spacing:0;
      line-height:1.25;
      text-align:left;
      white-space:normal;
      overflow-wrap:anywhere;
      word-break:normal;
    }
    #panel-margem-grupo #grupoTable tbody td.col-pm{
      font-size:12px;
    }
    #panel-telha-eps #epsBox{
      margin-top:14px;
      gap:12px;
    }
    #panel-telha-eps #epsBox .detail-item{
      min-height:92px;
      padding:14px;
    }
    #panel-telha-eps #epsBox .detail-item .dv{
      font-size:22px;
    }
    .foot-note{
      margin-top:28px;
      padding-top:14px;
      font-size:11px;
    }

    /* Grafico de regioes em estilo Excel: em vez de encolher os rotulos ate
       ficarem ilegiveis, mantem tamanho legivel e permite arrastar (mesmo
       padrao de rolagem horizontal ja usado nas tabelas abaixo). */
    .excel-pie-wrap{
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
    }
    .excel-pie-wrap svg{
      width:640px;
      max-width:none;
      flex-shrink:0;
    }
    .pie-click-hint{
      max-width:220px;
      font-size:11px;
      padding:7px 10px;
    }

    .reg-iso-chart-wrap svg{
      min-width:560px;
    }

    .pf-modal{ padding:12px; }
    .pf-modal-card{
      padding:18px 14px 20px;
      border-radius:14px;
    }
    .pf-modal-title{ font-size:16px; margin-right:30px; }

    /* Indicador de rolagem horizontal (fade nas bordas) para tabelas que nao
       cabem inteiras em telas de celular. Some sozinho quando a tabela nao
       precisa rolar. */
    #sellerTableWrap,
    .wrap [style*="overflow-x:auto"]{
      background-image:
        linear-gradient(to right, #171b22, rgba(23,27,34,0) 22px),
        linear-gradient(to left, #171b22, rgba(23,27,34,0) 22px),
        linear-gradient(to right, rgba(0,0,0,0.45), rgba(0,0,0,0) 16px),
        linear-gradient(to left, rgba(0,0,0,0.45), rgba(0,0,0,0) 16px);
      background-position: left, right, left, right;
      background-size: 22px 100%, 22px 100%, 16px 100%, 16px 100%;
      background-repeat: no-repeat;
      background-attachment: local, local, scroll, scroll;
    }
  }

  /* Barra de rolagem destacada (22/09/2026, "destaque mais a barra"): antes
     eram 8px com o polegar na cor da linha do tema, que some contra o fundo.
     Agora 13px, polegar claro com folga (border transparente + background-clip)
     e trilho visível. Dourado no hover, pra não restar dúvida do que é. */
  ::-webkit-scrollbar{ height:13px; width:13px; }
  ::-webkit-scrollbar-track{ background:rgba(255,255,255,0.07); border-radius:8px; }
  ::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,0.34);
    background-clip:content-box;
    border:3px solid transparent;
    border-radius:8px;
  }
  ::-webkit-scrollbar-thumb:hover{ background:var(--accent); background-clip:content-box; }
  ::-webkit-scrollbar-corner{ background:transparent; }
  /* Sem as setinhas do Windows: com trilho proprio elas destoam. */
  ::-webkit-scrollbar-button{ display:none; width:0; height:0; }

  /* Superfícies CLARAS dentro do painel (os modais são brancos nos dois temas,
     ver .pf-modal-card): ali o polegar claro das regras acima ficava branco
     sobre branco e sumia — foi o caso do modal do CRM (22/09/2026, "barra de
     rolagem não corrigiu"). Polegar escuro, mesma espessura. */
  .pf-modal-card::-webkit-scrollbar-track,
  .alimentar-tabela-wrap::-webkit-scrollbar-track{ background:rgba(15,45,92,0.10); }
  .pf-modal-card::-webkit-scrollbar-thumb,
  .alimentar-tabela-wrap::-webkit-scrollbar-thumb{ background:rgba(15,45,92,0.52); background-clip:content-box; }
  .pf-modal-card::-webkit-scrollbar-thumb:hover,
  .alimentar-tabela-wrap::-webkit-scrollbar-thumb:hover{ background:rgba(15,45,92,0.72); background-clip:content-box; }
  @supports not selector(::-webkit-scrollbar){
    .pf-modal-card,
    .alimentar-tabela-wrap{ scrollbar-color: rgba(15,45,92,0.45) rgba(15,45,92,0.10); }
  }
  /* scrollbar-color TEM PRECEDÊNCIA sobre ::-webkit-* no Chrome novo: declarar
     os dois fazia o Chrome ignorar todo o desenho acima e voltar à barra do
     sistema (só recolorida). Então isto fica só onde ::-webkit-* não existe,
     que é o Firefox. */
  @supports not selector(::-webkit-scrollbar){
    html{ scrollbar-width:auto; scrollbar-color: rgba(255,255,255,0.34) rgba(255,255,255,0.07); }
  }

  /* ============================================================
     Biblioteca de botões — efeitos de hover
     Base .btn-fx + modificador: .btn-fx--neon | --fill | --slide | --shake | --flip
     Usa os tokens de tema já definidos em :root (não introduz cores novas).
     Uso: <button class="btn-fx btn-fx--neon">Enviar</button>
  ============================================================ */
  .btn-fx{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:10px 20px;
    border-radius:10px;
    border:1px solid var(--line);
    background:var(--panel-2);
    color:var(--text);
    font-family:'JetBrains Mono', monospace;
    font-size:13px;
    font-weight:600;
    letter-spacing:0.02em;
    cursor:pointer;
    overflow:hidden;
    isolation:isolate;
    transition: color .25s ease, border-color .25s ease, transform .2s ease, box-shadow .25s ease;
  }
  .btn-fx:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

  /* ---- NEON: brilho pulsante na borda ---- */
  .btn-fx--neon{ border-color: rgba(242,183,5,0.4); }
  .btn-fx--neon:hover{
    color:var(--accent);
    border-color:var(--accent);
    box-shadow: 0 0 10px rgba(242,183,5,0.35), 0 0 22px rgba(242,183,5,0.2);
  }

  /* ---- FILL: preenchimento sobe de baixo pra cima ---- */
  .btn-fx--fill::before{
    content:"";
    position:absolute; inset:auto 0 0 0; height:0%;
    background:var(--accent);
    transition:height .28s ease;
    z-index:-1;
  }
  .btn-fx--fill:hover{ color:var(--bg-2); border-color:var(--accent); }
  .btn-fx--fill:hover::before{ height:100%; }

  /* ---- SLIDE: fundo desliza da esquerda pra direita ---- */
  .btn-fx--slide::before{
    content:"";
    position:absolute; inset:0;
    transform:translateX(-100%);
    background:linear-gradient(90deg, var(--accent-deep), var(--accent));
    transition:transform .3s ease;
    z-index:-1;
  }
  .btn-fx--slide:hover{ color:var(--bg-2); border-color:var(--accent); }
  .btn-fx--slide:hover::before{ transform:translateX(0); }

  /* ---- SHAKE: sacode no hover (indicado para ações destrutivas/alerta) ---- */
  @keyframes btnFxShake{
    10%,90%{ transform:translateX(-1px); }
    20%,80%{ transform:translateX(2px); }
    30%,50%,70%{ transform:translateX(-4px); }
    40%,60%{ transform:translateX(4px); }
  }
  .btn-fx--shake:hover{
    color:var(--bad);
    border-color:var(--bad);
    animation: btnFxShake .5s cubic-bezier(.36,.07,.19,.97) both;
  }
  @media (prefers-reduced-motion: reduce){
    .btn-fx--shake:hover{ animation:none; }
  }

  /* ---- FLIP: rótulo atual sobe e sai, rótulo alternativo entra por baixo.
     Requer <span> em volta do texto + atributo data-text com o rótulo alternativo:
     <button class="btn-fx btn-fx--flip" data-text="Confirmar"><span>Enviar</span></button> ---- */
  .btn-fx--flip > *{ display:inline-block; transition:transform .3s ease; }
  .btn-fx--flip:hover > *{ transform:translateY(-160%); }
  .btn-fx--flip::after{
    content:attr(data-text);
    position:absolute; left:0; right:0; top:50%;
    transform:translateY(160%);
    transition:transform .3s ease;
    font:inherit; color:var(--accent);
  }
  .btn-fx--flip:hover::after{ transform:translateY(-50%); }
  .btn-fx--flip:hover{ border-color:var(--accent); }
  /* (trilho transparente antigo saiu daqui em 22/09/2026 — ele anulava o
     trilho visível definido lá em cima, "destaque mais a barra") */

  /* ---------- Alimentar planilha a partir do PDF (modal do painel) ----------
     Vive dentro de .pf-modal-card, que é CLARO (gradiente branco). Por isso as
     cores aqui não usam as variáveis do tema escuro — texto escuro sobre fundo
     claro, igual aos modais do Almoxarifado. */
  .alimentar-card{ width:min(980px, 96vw); }
  .alimentar-linha{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-top:12px;
  }
  .alimentar-campo{ display:flex; flex-direction:column; gap:6px; min-width:0; }
  .alimentar-campo > span{
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:#5a6270;
  }
  .alimentar-campo select,
  .alimentar-campo input[type="file"]{
    width:100%;
    box-sizing:border-box;
    padding:9px 10px;
    border:1px solid rgba(0,0,0,0.16);
    border-radius:10px;
    background:#fff;
    color:#151515;
    font-family:'Inter', sans-serif;
    font-size:13px;
  }
  .alimentar-campo select:focus,
  .alimentar-campo input[type="file"]:focus{
    outline:none;
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(242,183,5,0.25);
  }
  .alimentar-dica{
    margin-top:8px;
    font-size:12px;
    color:#5a6270;
    min-height:16px;
  }
  .alimentar-msg{
    margin-top:12px;
    padding:10px 12px;
    border-radius:10px;
    font-size:13px;
    background:rgba(0,0,0,0.05);
    color:#333;
    border:1px solid rgba(0,0,0,0.1);
  }
  .alimentar-msg.hidden{ display:none !important; }
  .alimentar-msg--erro{
    background:rgba(200,40,40,0.10);
    border-color:rgba(200,40,40,0.35);
    color:#8c1c1c;
  }
  .alimentar-msg--ok{
    background:rgba(30,140,70,0.12);
    border-color:rgba(30,140,70,0.35);
    color:#14603a;
  }

  .alimentar-plano{ margin-top:14px; }
  .alimentar-plano.hidden{ display:none !important; }
  .alimentar-plano-head{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:12px;
    flex-wrap:wrap;
    font-size:13px;
    color:#333;
    margin-bottom:8px;
  }
  .alimentar-resumo{
    font-family:'JetBrains Mono', monospace;
    font-size:11.5px;
    color:#5a6270;
  }
  .alimentar-tabela-wrap{
    max-height:44vh;
    overflow:auto;
    border:1px solid rgba(0,0,0,0.12);
    border-radius:12px;
    background:#fff;
  }
  .alimentar-tabela{
    width:100%;
    border-collapse:collapse;
    font-size:12.5px;
  }
  .alimentar-tabela th,
  .alimentar-tabela td{
    padding:7px 10px;
    text-align:left;
    border-bottom:1px solid rgba(0,0,0,0.07);
    color:#222;
    white-space:nowrap;
  }
  .alimentar-tabela thead th{
    position:sticky;
    top:0;
    background:#f2f4f7;
    font-family:'JetBrains Mono', monospace;
    font-size:10.5px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:#5a6270;
    z-index:1;
  }
  .alimentar-tabela .num{ text-align:right; font-family:'JetBrains Mono', monospace; }
  .alimentar-tabela td.obs{ white-space:normal; font-size:11.5px; color:#5a6270; }
  /* Linha sem mudança: fica visível (o usuário quer conferir que o valor
     bateu), mas apagada, pra não competir com o que realmente vai mudar. */
  .alimentar-tabela tr.igual td{ color:#98a0ac; }
  /* Gravar por cima de fórmula a destrói — é o aviso mais importante da tela. */
  /* Cabecalho de grupo do combo: um PDF alimenta varios relatorios, e sem esta
     faixa a tabela vira 200 linhas sem dizer de qual grupo cada uma veio. */
  .alimentar-tabela tr.grupo td{
    background:#e9edf3;
    color:#39404d;
    font-family:'JetBrains Mono', monospace;
    font-size:10.5px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    font-weight:700;
    border-bottom:1px solid rgba(0,0,0,0.12);
  }
  .alimentar-tabela tr.formula td{ background:rgba(200,40,40,0.07); }
  .alimentar-tabela tr.formula td.obs{ color:#8c1c1c; font-weight:600; }
  .alimentar-avisos{
    margin-top:10px;
    font-size:12px;
    color:#8c1c1c;
  }
  .alimentar-avisos:empty{ display:none; }
  @media (max-width: 640px){
    .alimentar-linha{ grid-template-columns:1fr; }
    .alimentar-tabela-wrap{ max-height:50vh; }
  }

  /* Botao dourado desabilitado: sem isto ele fica com a MESMA cara do
     habilitado (o gradiente e opaco, nao herda opacidade de estado) e clicar
     nele nao faz nada nem diz por que. */
  .auth-submit:disabled{
    cursor:not-allowed;
    filter:grayscale(0.75);
    opacity:0.55;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.4);
    transform:none;
  }
  .auth-submit:disabled:hover{ transform:none; box-shadow:inset 0 1px 0 rgba(255,255,255,0.4); }
  .auth-submit:disabled::after{ animation:none; }

  /* ------------------------------------------------------------------
     Venda por Trimestre (2026-09-04) — card no fim de "Insumos &
     Comissões". Nada de backdrop-filter aqui: os botões do seletor e os
     chips de prêmio dividem o mesmo stacking context do card, e já houve
     duas reincidências de texto borrado por causa disso (ver o comentário
     no topo deste arquivo).
     ------------------------------------------------------------------ */
  .trimestre-card{ margin-top:18px; }
  .trimestre-head{
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:16px; flex-wrap:wrap;
  }
  .trimestre-seg{ display:flex; gap:6px; flex-wrap:wrap; }
  .trimestre-seg-btn{
    background:var(--panel-2); border:1px solid var(--line); color:var(--text);
    font-family:'Oswald'; text-transform:uppercase; letter-spacing:0.05em;
    font-size:13px; font-weight:700; padding:7px 14px; border-radius:999px;
    cursor:pointer; white-space:nowrap;
    transition:color 0.15s, background-color 0.15s, border-color 0.15s;
  }
  .trimestre-seg-btn:hover{ color:var(--accent); border-color:var(--accent-deep); }
  .trimestre-seg-btn.active{
    color:#1A1204; background:var(--accent); border-color:var(--accent);
  }
  /* Trimestre sem venda lançada na planilha: continua clicável (o usuário
     precisa poder abrir e ver que está vazio), só não finge ter dado. */
  .trimestre-seg-btn.empty:not(.active){ color:var(--text-faint); border-style:dashed; }
  .trimestre-resumo{ margin:16px 0 4px; }
  /* 13 colunas num card so: fonte/padding menores e numero tabular pra tabela
     caber inteira (a coluna "%" ficava cortada na direita) e as casas decimais
     alinharem em coluna. */
  .trimestre-card table{ font-size:12.5px; table-layout:auto; }
  .trimestre-card thead th{ padding:0 6px 8px; font-size:11px; }
  .trimestre-card tbody td{ padding:8px 6px; white-space:nowrap; }
  .trimestre-card tbody td.num{ font-variant-numeric:tabular-nums; }
  .trimestre-card tbody td.name{ white-space:normal; }
  .trimestre-card .info-chip-3d{ padding:3px 7px; font-size:11.5px; }
  .trimestre-card .trimestre-group-row th{
    text-align:center; color:var(--text-dim); font-size:11px;
    letter-spacing:0.1em; border-bottom:1px solid var(--line-soft);
  }
  .trimestre-card .trimestre-group-row th:not(:first-child){
    border-left:1px solid var(--line-soft);
  }
  .trimestre-card .pos{ color:var(--good); }
  /* Premio conquistado: dourado, com o nivel (100%/110%) como nota abaixo do
     valor. Sem backdrop-filter aqui — ver comentario no topo deste bloco. */
  .trimestre-card .trimestre-premio{
    display:inline-flex; flex-direction:column; align-items:flex-end; gap:1px;
    color:var(--accent); font-weight:700;
    font-size:15px; /* 12,5 -> 15px (19/09/2026: "deixe maior os números desta coluna") */
  }
  /* Previsao (ainda nao fechou 100%): mesmo numero, sem o dourado, pra nao
     competir com o premio de quem ja conquistou. */
  .trimestre-card .trimestre-premio.prev{ color:var(--text-dim); font-weight:600; }
  .trimestre-card .trimestre-premio em{
    font-style:normal; font-size:10px; letter-spacing:0.08em;
    color:var(--text-faint); font-family:'Oswald';
  }
  .trimestre-card .neg{ color:var(--bad); }
  /* Linha de vendedor que tem auxiliar de venda: abre a premiação do consultor
     ao clicar (10% do prêmio do vendedor). Só as 4 lojas com consultor ganham
     o cursor e a setinha — nas outras o clique não faz nada, então não pode
     parecer clicável. */
  .trimestre-card tbody tr.trimestre-row-consultor{ cursor:pointer; }
  .trimestre-card .trimestre-caret{
    display:inline-block; margin-left:6px; font-size:9px; color:var(--text-faint);
    transition: transform 0.15s ease, color 0.15s ease;
  }
  .trimestre-card tbody tr.trimestre-row-consultor:hover .trimestre-caret{ color:var(--accent); }
  .trimestre-card tbody tr.trimestre-row-consultor.aberta .trimestre-caret{
    transform: rotate(180deg); color:var(--accent);
  }
  .trimestre-card .trimestre-consultor-titulo{
    font-size:10px; text-transform:uppercase; letter-spacing:0.07em;
    color:var(--text-dim); font-weight:700; margin-bottom:12px;
  }
  /* O valor do consultor herda o .trimestre-premio da coluna Prêmio (dourado
     quando conquistado, apagado enquanto é só previsão), mas alinhado à
     esquerda porque aqui ele mora num .detail-item, não numa célula numérica. */
  .trimestre-card .detail-item .trimestre-premio{ align-items:flex-start; }
  /* Prêmio do nível, dentro do próprio card de meta (95% / 100% / 110%). */
  .trimestre-resumo .ms-item .ms-note{
    margin-top:6px; font-size:11.5px; font-weight:700; letter-spacing:0.04em;
    color:var(--accent); font-family:'JetBrains Mono';
  }
  .trimestre-resumo .ms-item.glass-hit .ms-note{ color:#F7DE8B; }

  /* Prêmio que o resultado atual alcança, no card "% da meta": apagado
     enquanto não chega em 95%, verde piscante a partir de 95% (22/09/2026 —
     antes 95–99,99% era dourado; a classe .dourado ficou sem uso). */
  .trimestre-resumo .ms-note.premio-atingido{ font-size:12.5px; }
  /* De quem e o premio do card "% da meta": e o da supervisao, nao o do
     vendedor (esse fica na coluna Premio da tabela). Fonte menor e sem a cor
     do estado pra nao competir com o valor. */
  .trimestre-resumo .ms-note .premio-dono{
    display:inline-block;
    margin-left:9px; padding:2px 8px;
    font-family:'Oswald'; font-size:12px; font-weight:700;
    letter-spacing:0.09em; text-transform:uppercase;
    color:#F3F7FF;
    border-radius:20px;
    border:1px solid rgba(255,255,255,0.22);
    background:rgba(255,255,255,0.09);
    animation:none;
  }
  .trimestre-resumo .ms-note.premio-atingido.aguardando{ color:var(--text-faint); }
  .trimestre-resumo .ms-note.premio-atingido.dourado{
    color:var(--accent); text-shadow:0 0 10px rgba(242,183,5,0.35);
  }
  .trimestre-resumo .ms-item .ms-note.premio-atingido.verde-piscante{
    color:var(--good); text-shadow:0 0 10px rgba(79,174,124,0.45);
    animation: trimestrePremioPisca 1.4s ease-in-out infinite;
  }
  @keyframes trimestrePremioPisca{
    0%, 100%{ opacity:1; }
    50%{ opacity:0.35; }
  }
  /* Piscar é chamariz, não informação: quem pediu menos movimento continua
     lendo o mesmo valor na mesma cor, só parado. */
  @media (prefers-reduced-motion: reduce){
    .trimestre-resumo .ms-item .ms-note.premio-atingido.verde-piscante{ animation:none; }
  }

  @media (max-width: 900px){
    .trimestre-head{ flex-direction:column; }
    .trimestre-card table{ font-size:12px; }
  }

  /* Linha da tabela sob o mouse como pílula de vidro no MODO ESCURO (vidro,
     html.tema-vidro) — mesmo efeito aprovado no modo claro (css/tema-aiko.css),
     em vidro claro translúcido (19/09/2026: "aplique o vidro no modo escuro
     também, ficou bom"). Tabela em separate: com collapse o navegador ignora o
     canto arredondado das células. Sombra na linha inteira (drop-shadow): por
     célula dava emenda. */
  html.tema-vidro table{ border-collapse:separate; border-spacing:0; }
  html.tema-vidro tbody tr:not(.total-row):not(.grupo-total-row):not(.grupo-total-sep):not(.bobina-total-row):not(.detail-row):hover{
    background:transparent; transform:translateY(-3px); position:relative; z-index:2;
    filter:drop-shadow(0 10px 12px rgba(0,0,0,0.55)) drop-shadow(0 2px 3px rgba(0,0,0,0.35));
  }
  html.tema-vidro tbody tr:not(.total-row):not(.grupo-total-row):not(.grupo-total-sep):not(.bobina-total-row):not(.detail-row):hover > td{
    background:
      linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.08) 45%, rgba(255,255,255,0.04) 100%),
      #262C35;
    box-shadow:none;
  }
  html.tema-vidro tbody tr:not(.total-row):not(.grupo-total-row):not(.grupo-total-sep):not(.bobina-total-row):not(.detail-row):hover > td:first-child{ border-radius:999px 0 0 999px; }
  html.tema-vidro tbody tr:not(.total-row):not(.grupo-total-row):not(.grupo-total-sep):not(.bobina-total-row):not(.detail-row):hover > td:last-child{ border-radius:0 999px 999px 0; }

  /* Títulos dos cartões do topo maiores também no MODO ESCURO (19/09/2026: "no
     escuro também") — mesmos tamanhos do claro (css/tema-aiko.css); a cor
     branca e a sombra continuam as do vidro (css/tema-vidro-lilas.css). */
  html.tema-vidro .kpi .label{ font-size:15px; letter-spacing:0.02em; white-space:nowrap; }
  html.tema-vidro .gauge-title{ font-size:17px; }
  html.tema-vidro .gauge-txt .label{ font-size:15.5px; }

  /* Medidor "Meta Mês" com mais sombra no MODO ESCURO também (19/09/2026:
     "jogue um pouco mais de sombra pra dar mais efeito 3d"). */
  html.tema-vidro .gauge-canvas-wrap canvas{
    filter: drop-shadow(0 12px 14px rgba(0,0,0,0.70)) drop-shadow(0 4px 5px rgba(0,0,0,0.45)) drop-shadow(0 0 16px rgba(150,174,234,0.4)) drop-shadow(0 -1px 0 rgba(255,255,255,0.14));
  }
  html.tema-vidro .gauge-canvas-wrap::before{ background:radial-gradient(ellipse at center, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 72%); }
/* Pílulas douradas do Ticket Médio (Kg Total, Valor Médio KG…) no tamanho das
   verdes, igual ao modo claro (19/09/2026: "aplique sempre no escuro tambem"). */
html.tema-vidro .kpi .info-chip-3d.gold{
  font-size:14px;
  padding:6px 14px;
}
/* Mesmos ajustes do modo claro também no escuro (19/09/2026: "as aplicações
   pra os dois modos"): linhas de total em verde forte no lugar do dourado,
   prêmio conquistado como pílula verde com o "110%" embaixo, fora dela, e o
   verde das pílulas dos cartões um tom mais escuro. */
html.tema-vidro tbody tr.total-row,
html.tema-vidro #panel-margem-grupo #grupoTable tr.grupo-total-row,
html.tema-vidro #panel-bobina #bobinaTable tr.bobina-total-row{
  background:linear-gradient(180deg, rgba(46,190,120,0.36), rgba(46,190,120,0.22) 58%, rgba(46,190,120,0.16));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.10), inset 0 0 0 1px rgba(80,210,140,0.55);
}
html.tema-vidro tbody tr.total-row:hover,
html.tema-vidro #panel-margem-grupo #grupoTable tr.grupo-total-row:hover,
html.tema-vidro #panel-bobina #bobinaTable tr.bobina-total-row:hover{
  background:linear-gradient(180deg, rgba(46,190,120,0.44), rgba(46,190,120,0.28) 58%, rgba(46,190,120,0.20));
}
html.tema-vidro tbody tr.total-row td,
html.tema-vidro #panel-margem-grupo #grupoTable tr.grupo-total-row td,
html.tema-vidro #panel-bobina #bobinaTable tr.bobina-total-row td{
  border-top:1px solid rgba(80,210,140,0.70);
  border-bottom:1px solid rgba(80,210,140,0.45);
}
html.tema-vidro tbody tr.total-row td.name,
html.tema-vidro #panel-margem-grupo #grupoTable tr.grupo-total-row td.name,
html.tema-vidro #panel-bobina #bobinaTable tr.bobina-total-row td.name{ color:#7BE3A9; }
html.tema-vidro #panel-margem-grupo #grupoTable tr.grupo-total-sep td{ border-top-color:rgba(80,210,140,0.40); }
html.tema-vidro .trimestre-card .trimestre-premio:not(.prev){
  position:relative;
  margin-bottom:15px;
  padding:5px 12px 4px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(120,235,170,0.42) 0%, rgba(46,170,105,0.55) 100%);
  border:1px solid rgba(140,240,180,0.55);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,0.35), inset 0 -3px 5px rgba(0,0,0,0.18), 0 6px 12px -6px rgba(0,0,0,0.7);
  font-size:15.5px;
  font-weight:800;
  color:#EFFFF5;
}
html.tema-vidro .trimestre-card .trimestre-premio:not(.prev) em{
  position:absolute; top:100%; right:12px; margin-top:3px;
  color:#7BE3A9; white-space:nowrap;
}
html.tema-vidro .trimestre-card .detail-item .trimestre-premio:not(.prev) em{ right:auto; left:12px; }
html.tema-vidro .part-badge:not(.gold):not(.bad),
html.tema-vidro .info-chip-3d:not(.gold):not(.bad){
  color:#03361D;
  border-color:rgba(120,220,160,0.75);
  background:linear-gradient(155deg, rgba(175,238,200,0.95) 0%, rgba(86,204,134,0.88) 46%, rgba(44,168,98,0.9) 100%);
}
/* Topo com a chapa xadrez de aço (19/09/2026: foto enviada pelo usuário,
   css/chapa-xadrez.jpg: recorte de 4x3 períodos exatos do desenho da
   chapa, que repete sem emenda; "deixe menor" 2x). Véu escuro por cima pra manter logo, botões
   e textos legíveis; borda de baixo some no fundo da página. "body" no
   seletor: o tema-vidro-lilas.css carrega depois e zera o fundo do topo. */
html.tema-vidro body header.top{
  background:
    linear-gradient(180deg, rgba(10,12,16,0.66) 0%, rgba(10,12,16,0.72) 70%, rgba(10,12,16,0.88) 100%),
    url("chapa-xadrez.jpg") left top / 127px 90px repeat;
  box-shadow:0 12px 30px -16px rgba(0,0,0,0.8);
}
/* Celular: a faixa de semanas do Ritmo é rolável, e o justify-content:center
   (centralização de 18/09) escondia o começo dela — "EMANA 2" cortado e sem
   como rolar até a semana 1. No celular começa pela esquerda. */
@media (max-width:640px){
  .rhythm-bars{ justify-content:flex-start; }
}
/* Tabelas roláveis no celular: o "fade" das bordas passa a ser máscara de
   transparência, sem cor (19/09/2026, receita do usuário) — o antigo pintava
   uma tampa grafite (#171b22) que no modo claro virava faixa preta. Vale
   igual no claro e no escuro. */
@media (max-width:640px){
  #sellerTableWrap,
  .wrap [style*="overflow-x:auto"]{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(to right, #000 0, #000 calc(100% - 16px), transparent 100%);
            mask-image:linear-gradient(to right, #000 0, #000 calc(100% - 16px), transparent 100%);
    background:none;
    box-shadow:none;
  }
}
/* Tabelas roláveis no celular (19/09/2026, receita do usuário): célula sem
   quebrar linha ("Total Reg"/"João Pedro" viravam duas linhas) e a 1ª coluna
   presa na esquerda ao rolar. Coluna presa precisa de fundo OPACO em toda
   regra que pinta a célula (senão o conteúdo rolado aparece por baixo) —
   cor do cartão no escuro e no claro, e verde sólido nas linhas de total. */
@media (max-width:640px){
  #sellerTableWrap td, #sellerTableWrap th,
  .wrap [style*="overflow-x:auto"] td, .wrap [style*="overflow-x:auto"] th{
    padding:14px 10px; font-size:14px; white-space:nowrap;
  }
  #sellerTableWrap td:first-child, #sellerTableWrap th:first-child,
  .wrap [style*="overflow-x:auto"] td:first-child, .wrap [style*="overflow-x:auto"] th:first-child{
    position:sticky; left:0; z-index:2;
    background:#1A1E25; border-right:1px solid rgba(255,255,255,0.10);
  }
  #sellerTableWrap tr.total-row td:first-child,
  #sellerTableWrap tr.grupo-total-row td:first-child,
  #sellerTableWrap tr.bobina-total-row td:first-child,
  .wrap [style*="overflow-x:auto"] tr.total-row td:first-child,
  .wrap [style*="overflow-x:auto"] tr.grupo-total-row td:first-child,
  .wrap [style*="overflow-x:auto"] tr.bobina-total-row td:first-child{ background:#1F4B38; }
  html.tema-aiko #sellerTableWrap td:first-child, html.tema-aiko #sellerTableWrap th:first-child,
  html.tema-aiko .wrap [style*="overflow-x:auto"] td:first-child, html.tema-aiko .wrap [style*="overflow-x:auto"] th:first-child{
    background:#D6DEE4;
  }
  html.tema-aiko #sellerTableWrap tr.total-row td:first-child,
  html.tema-aiko #sellerTableWrap tr.grupo-total-row td:first-child,
  html.tema-aiko #sellerTableWrap tr.bobina-total-row td:first-child,
  html.tema-aiko .wrap [style*="overflow-x:auto"] tr.total-row td:first-child,
  html.tema-aiko .wrap [style*="overflow-x:auto"] tr.grupo-total-row td:first-child,
  html.tema-aiko .wrap [style*="overflow-x:auto"] tr.bobina-total-row td:first-child{ background:#8FCAB5; }
}
/* Versão do sistema (V09.26) ao lado do botão Claro/Escuro. */
.tema-toggle-row{ align-items:center; gap:8px; }
.app-versao{
  font:700 11.5px 'JetBrains Mono', monospace;
  letter-spacing:0.06em;
  padding:4px 9px;
  border-radius:999px;
  color:var(--text-dim);
  border:1px solid var(--line);
  background:var(--panel-2);
  white-space:nowrap;
}
html.tema-vidro .app-versao{ color:rgba(255,255,255,0.72); border-color:rgba(255,255,255,0.22); background:rgba(255,255,255,0.08); }
html.tema-aiko .app-versao{ color:rgba(255,255,255,0.85); border-color:rgba(255,255,255,0.35); background:rgba(255,255,255,0.14); }
/* ...e as DEMAIS células opacas no celular, na mesma cor da coluna presa
   (20/09/2026: "verifique porque está ficando assim no mobile"). Só a coluna
   presa tinha cor; as outras eram transparentes e mostravam o degradê do
   cartão, que muda de tom de cima pra baixo — a coluna virava um bloco
   destacado. Linha de total fica verde na linha inteira. */
@media (max-width:640px){
  #sellerTableWrap tbody td,
  .wrap [style*="overflow-x:auto"] tbody td{ background:#1A1E25; }
  #sellerTableWrap tbody tr.total-row td,
  #sellerTableWrap tbody tr.grupo-total-row td,
  #sellerTableWrap tbody tr.bobina-total-row td,
  .wrap [style*="overflow-x:auto"] tbody tr.total-row td,
  .wrap [style*="overflow-x:auto"] tbody tr.grupo-total-row td,
  .wrap [style*="overflow-x:auto"] tbody tr.bobina-total-row td{ background:#1F4B38; }
  html.tema-aiko #sellerTableWrap tbody td,
  html.tema-aiko .wrap [style*="overflow-x:auto"] tbody td{ background:#D6DEE4; }
  html.tema-aiko #sellerTableWrap tbody tr.total-row td,
  html.tema-aiko #sellerTableWrap tbody tr.grupo-total-row td,
  html.tema-aiko #sellerTableWrap tbody tr.bobina-total-row td,
  html.tema-aiko .wrap [style*="overflow-x:auto"] tbody tr.total-row td,
  html.tema-aiko .wrap [style*="overflow-x:auto"] tbody tr.grupo-total-row td,
  html.tema-aiko .wrap [style*="overflow-x:auto"] tbody tr.bobina-total-row td{ background:#8FCAB5; }
  html.tema-aiko #sellerTableWrap td:first-child,
  html.tema-aiko #sellerTableWrap th:first-child,
  html.tema-aiko .wrap [style*="overflow-x:auto"] td:first-child,
  html.tema-aiko .wrap [style*="overflow-x:auto"] th:first-child{ border-right:1px solid rgba(2,62,85,0.12); }
}
/* Detalhe do vendedor (linha que abre ao clicar): letras maiores nos dois
   modos (20/09/2026: "deixe maior as letras") — rótulo 10 -> 12px e valor
   15 -> 18px. O #epsBox tem regra com 2 ids e não é afetado. */
.detail-item .dl{ font-size:12px; letter-spacing:0.04em; }
.detail-item .dv{ font-size:18px; margin-top:4px; }
@media (max-width:640px){
  /* no celular o detalhe já empilha em 1 coluna; 16px cabe bem */
  .detail-item .dl{ font-size:11.5px; }
  .detail-item .dv{ font-size:16px; }
}
/* Prêmio no nível 100% (até 109,99% da meta) em laranja no modo escuro; o
   verde fica só pro 110% (20/09/2026: "até 109,99 deixe em laranja"). */
html.tema-vidro .trimestre-card .trimestre-premio--n100:not(.prev){
  background:linear-gradient(180deg, rgba(255,186,90,0.42) 0%, rgba(214,126,10,0.55) 100%);
  border-color:rgba(255,190,105,0.55);
  color:#FFF3E2;
}
html.tema-vidro .trimestre-card .trimestre-premio--n100:not(.prev) em{ color:#FFCE8A; }

/* ---- Atividade dos vendedores no WhatsApp (21/09/2026) ----------------------
   Pílula do topo: mesma .visitas-mes-pill; o recorte vermelho é quantos estão
   parados no expediente. O modal usa o cartão branco padrão (.pf-modal-card) e
   a tabela das Visitas — por isso as cores aqui são as do fundo CLARO. */
.visitas-mes-pill strong.atividade-alertas{
  color:#FF8A8B;
  font-size:12px;
  margin-left:-4px;
}
.atividade-periodos{ display:inline-flex; gap:4px; margin-top:12px; padding:3px; border-radius:999px; background:#EEF0F3; }
.atividade-periodo{
  border:0; border-radius:999px; background:transparent; color:#5a6270;
  font:600 12px 'Inter', sans-serif; padding:6px 14px; cursor:pointer;
}
.atividade-periodo.is-on{ background:#fff; color:#151a1f; box-shadow:0 1px 3px rgba(0,0,0,0.15); }
.atividade-tabela td.num, .atividade-tabela th:nth-child(3), .atividade-tabela th:nth-child(4), .atividade-tabela th:nth-child(5), .atividade-tabela th:nth-child(7){ text-align:right; }
.atividade-tabela tr.atividade-parado td{ background:rgba(198,58,59,0.06); }
.atividade-alerta{ color:#C63A3B; font-weight:600; font-size:12px; white-space:nowrap; }
/* Majufer Central: contagem separada dos vendedores — fio em cima e fundo
   azul-claro pra não ser lida como mais um vendedor. */
.atividade-tabela tr.atividade-central td{ border-top:2px solid #cfd6df; background:#F2F6FA; color:#2A4B6B; }
/* Total geral (22/09/2026): fecha a tabela, grafite com texto branco pra não
   se confundir com o subtotal cinza da região. Modal é branco nos 2 temas. */
.atividade-tabela tr.atividade-total td{ background:#1B2430; color:#fff; font-weight:800; border-top:2px solid #1B2430; }
.atividade-tabela tr.atividade-total td:first-child{ border-radius:12px 0 0 12px; }
.atividade-tabela tr.atividade-total td:last-child{ border-radius:0 12px 12px 0; }
/* Sob o mouse a pílula de hover (vidro escuro no tema escuro, clara dentro do
   modal) pintava fundo claro atrás do texto branco e o total sumia
   (22/09/2026: "corrija"). A linha sobe igual às outras, mas fica grafite.
   !important porque as regras de hover têm 5 :not() e ganham em especificidade. */
.atividade-tabela tr.atividade-total:hover > td{ background:#1B2430 !important; color:#fff !important; }
.atividade-extra{ margin-top:12px; font-size:12px; color:#5a6270; line-height:1.6; }
/* Sair na linha da versão (21/09/2026): mesmo tamanho de pílula do botão
   Claro/Escuro ao lado, sem o margin-top do .excel-btn. */
.tema-toggle-row .logout-btn{
  margin-top:0; padding:6px 14px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:0.03em;
}
/* Selecionar mês(es) na mesma linha (28/09/2026): mesma pílula do Sair ao lado. */
.tema-toggle-row #openMonthPickerBtn{
  margin-top:0; padding:6px 14px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:0.03em;
}
/* Modais (.pf-modal-card) são BRANCOS nos dois temas — a pílula de vidro
   escuro da linha sob o mouse (modo escuro, acima) pintava #262C35 por trás
   de texto escuro e a linha sumia (21/09/2026, modal do CRM: "não ficou
   bom"). Dentro do modal a pílula vira clara, com sombra leve. */
html.tema-vidro .pf-modal-card tbody tr:not(.total-row):not(.grupo-total-row):not(.grupo-total-sep):not(.bobina-total-row):not(.detail-row):hover{
  filter:drop-shadow(0 8px 10px rgba(20,30,45,0.18)) drop-shadow(0 2px 3px rgba(20,30,45,0.10));
}
html.tema-vidro .pf-modal-card tbody tr:not(.total-row):not(.grupo-total-row):not(.grupo-total-sep):not(.bobina-total-row):not(.detail-row):hover > td{
  background:linear-gradient(180deg, #FFFFFF 0%, #F2F5F8 55%, #E6EBF0 100%);
  color:#1B2430;
}
/* Topo: o bloco da direita (mês, botões) descia inteiro pra uma 2ª linha
   quando não cabia ao lado do logo — com o botão CRM e os contadores ("283
   1 parado", "169 45 fora", "4 BAIXO") o topo virou um vão de ~520px com o
   logo solto em cima (21/09/2026: "ajuste a tela"). Aqui ele ocupa o espaço
   que sobra ao lado do logo e os botões quebram DENTRO dele, alinhados à
   direita. Só desktop: no celular a regra de 640px já empilha. */
@media (min-width:901px){
  .top-inner{ flex-wrap:nowrap; }
  .period{ flex:1 1 0; min-width:0; }
  .period .logout-powered-row,
  .period .header-utility-row{ justify-content:flex-end; }
}

/* Filtro De/até do modal CRM (21/09/2026). O modal é BRANCO, então o campo é
   claro; o ícone de calendário vem de .gulp-date-input (css/gulp-datepicker.css)
   — por isso aqui só background-COLOR, nunca o atalho `background`, que
   apagaria o ícone. */
.atividade-intervalo{ display:inline-flex; align-items:center; gap:8px; margin:12px 0 0 12px; flex-wrap:wrap; }
.atividade-intervalo label{ font:600 11.5px 'Inter', sans-serif; color:#5a6270; text-transform:uppercase; letter-spacing:0.05em; }
.atividade-data{
  width:130px;
  border:1px solid #d5dae1;
  border-radius:999px;
  background-color:#F4F6F8;
  color:#151a1f;
  font:500 12.5px 'Inter', sans-serif;
  padding:6px 30px 6px 12px;
  outline:none;
}
.atividade-data:focus{ border-color:#F2B705; box-shadow:0 0 0 3px rgba(242,183,5,0.18); }

/* Filtro de região e subtotal por região no modal CRM (21/09/2026). */
.atividade-regiao{
  border:1px solid #d5dae1;
  border-radius:999px;
  background-color:#F4F6F8;
  color:#151a1f;
  font:500 12.5px 'Inter', sans-serif;
  padding:6px 12px;
  margin-left:6px;
  outline:none;
  cursor:pointer;
}
/* Botão que pede a permissão de aviso na área de trabalho (22/09/2026). */
.atividade-notif-btn{
  border:1px solid #d5dae1; border-radius:999px; background-color:#fff; color:#2A4B6B;
  font:600 12px 'Inter', sans-serif; padding:6px 12px; margin-left:8px; cursor:pointer;
}
.atividade-notif-btn:hover:not(:disabled){ border-color:#2A4B6B; color:#151a1f; }
.atividade-notif-btn:disabled{ color:#8b95a3; cursor:default; }
.atividade-regiao:focus{ border-color:#F2B705; box-shadow:0 0 0 3px rgba(242,183,5,0.18); }
/* Soma da região (Lagoa RS, Marau, Panambi, Soledade): fio em cima e fundo
   cinza, pra não ser lida como mais um vendedor. */
.atividade-tabela tr.atividade-subtotal td{
  background:#EEF1F4;
  border-top:1px solid #cfd6df;
  font-weight:700;
  color:#2b3440;
}

/* Orçamento sem retorno no modal CRM (21/09/2026, lib/crmOrcamentos.js).
   Modal branco nos dois temas: cores do fundo CLARO. Botão escuro (não
   dourado) de propósito — o dourado já sumiu no hover 6 vezes neste painel. */
.orc-secao{ margin-top:22px; padding-top:16px; border-top:1px solid #e1e5ea; }
.orc-cabeca{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.orc-cabeca h4{ margin:0; font:700 15px 'Inter', sans-serif; color:#151a1f; }
.orc-resumo{ font-size:12px; color:#5a6270; }
.orc-resumo.is-on{ color:#1E7A46; font-weight:600; }
.orc-link{ margin-left:auto; border:0; background:none; padding:0; color:#2A4B6B; font:600 12px 'Inter', sans-serif; text-decoration:underline; cursor:pointer; }
.orc-link:hover{ color:#151a1f; }
.orc-config{ margin-top:12px; padding:14px 16px; border:1px solid #e1e5ea; border-radius:14px; background:#F7F9FB; display:grid; gap:10px; font-size:13px; color:#2b3440; }
/* Separa o aviso ao vendedor (mensagens paradas) do resto, que é sobre a
   pergunta automática ao cliente — mesmo painel, dois assuntos (22/09/2026). */
.orc-config-sep{ border-top:1px solid #e1e5ea; margin:2px 0; }
.orc-check, .orc-linha{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.orc-linha--bloco{ flex-direction:column; align-items:stretch; gap:4px; font-size:12px; color:#5a6270; }
.orc-campo{
  border:1px solid #d5dae1; border-radius:10px; background-color:#fff; color:#151a1f;
  font:500 13px 'Inter', sans-serif; padding:7px 10px; outline:none; width:100%; box-sizing:border-box;
}
.orc-campo--curto{ width:130px; }
.orc-campo:focus{ border-color:#F2B705; box-shadow:0 0 0 3px rgba(242,183,5,0.18); }
textarea.orc-campo{ resize:vertical; min-height:62px; }
.orc-acoes{ display:flex; align-items:center; gap:12px; }
.orc-salvar{ border:0; border-radius:999px; background:#151a1f; color:#fff; font:700 12.5px 'Inter', sans-serif; padding:8px 20px; cursor:pointer; }
.orc-salvar:hover{ background:#2b3440; color:#fff; }
.orc-msg{ font-size:12px; color:#5a6270; }
.orc-nota{ font-size:11.5px; color:#6b7380; line-height:1.5; }
.orc-tabela{ margin-top:12px; }
.orc-st{ font-size:12px; color:#5a6270; }
.orc-st--espera{ color:#8a6a00; }
.orc-st--vencido{ color:#C63A3B; font-weight:600; }
.orc-st--ok{ color:#1E7A46; font-weight:600; }
.orc-st--cobrado{ color:#2A4B6B; font-weight:600; }
.orc-resposta{ margin-top:3px; font-size:12px; color:#3b4450; font-style:italic; max-width:420px; overflow-wrap:anywhere; }
/* Linha do orçamento abre a conversa no CRM (22/09/2026). Modal branco nos
   dois temas: link no azul-aço do painel, sem dourado. */
/* Pílulas dos cards iguais com a meta batida ou não (22/09/2026: "o texto está
   diferente, deixe igual nos cards"): o .foot.bad do tema escuro põe
   text-shadow, que a pílula herdava — texto mais grosso/borrado só no card
   abaixo da meta. */
.kpi .foot .part-badge{ text-shadow:none; }
/* Prêmio conquistado no card "% da meta" (22/09/2026): pílula verde igual à
   da coluna Prêmio, com a supervisão ao lado. Verde nos dois temas, em
   qualquer nível — o laranja do 100% vale só na tabela. */
.trimestre-resumo .ms-note.premio-pilula{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:8px; }
.trimestre-resumo .ms-note.premio-pilula .premio-dono{ margin-left:0; margin-bottom:15px; }
/* Nível embaixo da pílula: centralizado e verde-claro — o card é escuro nos
   dois temas (no claro o verde-escuro da tabela sumia). */
html .trimestre-card .trimestre-resumo .ms-note.premio-pilula .trimestre-premio:not(.prev) em{
  left:50%; right:auto; transform:translateX(-50%); color:#7BE3A9; opacity:1;
}
.orc-linha-link{ cursor:pointer; }
/* Filtro por vendedor no cabeçalho (22/09/2026): mesma pílula do filtro de
   região, menor e sem herdar o caixa-alta do <th>. */
.orc-tabela thead th{ vertical-align:middle; }
.orc-th-filtro{ display:inline-flex; align-items:center; }
.orc-filtro{ text-transform:none; letter-spacing:0; font-size:12px; padding:3px 10px; margin-left:8px; }
.orc-abrir{ display:block; margin-top:3px; font:600 11.5px 'Inter', sans-serif; color:#2A4B6B; text-decoration:none; }
.orc-abrir:hover{ text-decoration:underline; color:#151a1f; }

/* Linha do vendedor/região abre o detalhe da conversa (26/09/2026). Mesmo
   padrão de .visitas-row-has-pdf (linha 326 acima): ponteiro + fundo cinza
   claro no hover, só nesta linha (o resto da tabela continua sem reagir). */
.atividade-tabela tbody tr.atividade-linha-clic{ cursor:pointer; }
.atividade-tabela tbody tr.atividade-linha-clic:hover td{ background:#f5f6f8; }
.atividade-tabela tbody tr.atividade-subtotal.atividade-linha-clic:hover td{ background:#e4e9ee; }

/* Detalhe de conversas (26/09/2026, lib/crmInboxParceria.js detalharConversas).
   Modal branco nos dois temas, igual ao resto do CRM (.pf-modal-card). Cada
   cliente é um bloco; dentro, uma mensagem por linha — enviada (vendedor) num
   tom levemente verde, recebida (cliente) neutra, nota interna em itálico. */
.ativconv-lista{ margin-top:14px; display:flex; flex-direction:column; gap:14px; max-height:60vh; overflow:auto; }
.ativconv-item{ border:1px solid #e1e5ea; border-radius:14px; padding:12px 14px; background:#FAFBFC; }
.ativconv-item-cab{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; cursor:pointer; user-select:none; border-radius:8px; }
.ativconv-item-cab:focus-visible{ outline:2px solid #8a94a3; outline-offset:4px; }
/* Fechado por padrão (28/09/2026): só a linha do cliente; a conversa abre no clique. */
.ativconv-item:not(.aberto) .ativconv-corpo{ display:none; }
.ativconv-item.aberto .ativconv-item-cab{ margin-bottom:8px; }
.ativconv-item:hover{ border-color:#c9d0d9; }
.ativconv-seta{ display:inline-block; width:12px; font:700 16px/1 'Inter', sans-serif; color:#8a94a3; transition:transform .15s ease; }
.ativconv-item.aberto .ativconv-seta{ transform:rotate(90deg); }
.ativconv-item-cab strong{ font:700 14px 'Inter', sans-serif; color:#151a1f; }
.ativconv-item-tel{ font-size:12px; color:#5a6270; }
.ativconv-item-sub{ font-size:12px; color:#5a6270; margin-left:auto; }
.ativconv-msgs{ display:flex; flex-direction:column; gap:6px; max-height:320px; overflow:auto; }
.ativconv-msg{ border-radius:10px; padding:6px 10px; font-size:13px; background:#fff; border:1px solid #e9ecef; }
.ativconv-msg--enviada{ background:#EAF6EE; border-color:#cfe9d6; }
.ativconv-msg--nota{ background:#FFF7E0; border-color:#f0e0a8; font-style:italic; }
.ativconv-msg-cab{ display:flex; justify-content:space-between; gap:10px; font:600 11px 'Inter', sans-serif; color:#5a6270; margin-bottom:2px; }
.ativconv-msg-txt{ color:#2b3440; white-space:pre-wrap; overflow-wrap:anywhere; }
.ativconv-aviso{ font-size:12.5px; color:#5a6270; padding:6px 2px; }
.ativconv-rodape{ display:flex; justify-content:center; margin-top:12px; }

/* Aviso individual "sem enviar mensagens" pro vendedor (22/09/2026, mesmo
   gatilho do card CRM acima — ver lib/crmAlertaVendedor.js). Fica na tela
   até confirmar: sem X (.pf-modal-close) e sem listener no backdrop, então
   só o botão "Ciente, vou retomar" fecha. Modal branco de propósito
   (.pf-modal-card já é branco nos dois temas, igual ao resto do CRM) e sem
   backdrop-filter em lugar nenhum daqui — ver nota no topo deste arquivo
   sobre esse bug. Layout aprovado pelo usuário em cima de uma maquete
   (22/09/2026): cartão estreito e centralizado, ícone + título + frase +
   duas pílulas cinza + botão de largura total + rodapé pequeno. */
#meuAlertaModal{
  /* Acima do maior z-index já usado no projeto fora da câmera em tela cheia
     (.pf-modal é 120, o .gulp-modal de confirmar exclusão é 1200) — é um
     aviso que precisa de confirmação, tem que ficar por cima de qualquer
     outro modal que esteja aberto. */
  z-index:1250;
}
.meu-alerta-card{
  width:min(340px, 92vw);
  text-align:center;
  padding:28px 22px 22px;
  border-radius:22px;
}
.meu-alerta-icone{ font-size:32px; line-height:1; margin-bottom:8px; }
.meu-alerta-titulo{
  margin:0 0 8px;
  font-family:'Oswald', sans-serif;
  font-size:18px;
  font-weight:700;
  color:#151515;
}
.meu-alerta-texto{
  margin:0 0 16px;
  font-size:13.5px;
  line-height:1.55;
  color:#4a5260;
}
.meu-alerta-pilulas{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:20px; }
.meu-alerta-pilula{
  background:#EEF0F3; color:#3b4450; border-radius:999px;
  font:600 11.5px 'Inter', sans-serif; padding:7px 13px;
}
.meu-alerta-pilula b{ font-weight:700; color:#151a1f; }
.meu-alerta-hora{ color:#C63A3B !important; }
.meu-alerta-ok{
  display:block; width:100%; box-sizing:border-box;
  border:0; border-radius:999px; background:#151a1f; color:#fff;
  font:700 14px 'Inter', sans-serif; padding:13px 0; cursor:pointer; min-height:46px;
}
.meu-alerta-ok:hover{ background:#2b3440; }
.meu-alerta-rodape{ margin-top:14px; font-size:11px; color:#8b95a3; }
.orc-tag{ display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px; background:#EEF1F4; color:#2b3440; font-size:11px; font-weight:600; }
.orc-tag--novo{ background:#FFF4D6; color:#8a6a00; }
.orc-aviso{ margin-top:3px; font-size:11.5px; font-weight:600; color:#C63A3B; }
.orc-aviso--ok{ color:#1E7A46; }
/* "Atualização automática" na linha de baixo, junto de Sair/versão/Claro
   (21/09/2026: "jogue na linha de baixo"): sem o margin-top que tinha quando
   era uma linha própria, pra ficar alinhada com as pílulas vizinhas. */
.tema-toggle-row .auto-refresh-status{ margin-top:0; }
/* Logo + "Usuário logado" centralizados na altura do topo (21/09/2026:
   "centralize") — o .top-inner alinha tudo embaixo (align-items:flex-end), e
   com o bloco da direita mais alto o logo ficava colado no pé, com um vão em
   cima. Só desktop; no celular o topo empilha. */
@media (min-width:901px){
  .top-inner > .brand{ align-self:center; }
}

/* Aviso "fechou a meta" pros admins (29/09/2026, js/app.js avisarMetasBatidas).
   Cartão flutuante no canto de cima à direita, um por vendedor; cores pelos
   tokens do tema (vale no escuro e no claro/aiko). No celular vira faixa
   embaixo, largura inteira. */
.meta-avisos{
  position:fixed; top:16px; right:16px; z-index:9000; display:flex; flex-direction:column; gap:10px;
  width:min(450px, calc(100vw - 32px)); pointer-events:none;
}
.meta-aviso{
  pointer-events:auto; display:flex; align-items:center; gap:12px; padding:12px 12px 12px 14px;
  background:var(--panel); color:var(--text); border:1px solid var(--good); border-left:4px solid var(--good);
  border-radius:14px; box-shadow:0 12px 32px rgba(0,0,0,.35);
  animation:meta-aviso-entra .35s cubic-bezier(.2,.8,.2,1) both;
}
.meta-aviso-ic{ font-size:24px; line-height:1; flex-shrink:0; }
.meta-aviso-txt{ flex:1; min-width:0; }
.meta-aviso-tit{ font-size:14px; line-height:1.3; }
.meta-aviso-tit b{ color:var(--good); font-weight:800; }
/* Vendedores da região (30/09/2026), entre o título e o valor. */
.meta-aviso-equipe{ font-size:12.5px; font-weight:700; color:var(--text); margin-top:3px; line-height:1.3; }
.meta-aviso-sub{
  font-size:12px; color:var(--text-dim); margin-top:5px; font-variant-numeric:tabular-nums;
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px;
}
/* 29/09/2026, 2a volta: "o valor acima deixe em verde e o % dentro do card
   3d vidro verde". Realizado em verde forte; % numa pílula de vidro 3D —
   degradê de cima pra baixo, brilho interno no topo, borda e sombra verdes.
   Par claro (html.tema-aiko) e escuro (padrão). */
.meta-aviso-real{ color:var(--good); font-weight:800; font-size:13px; }
.meta-aviso-pct{
  flex-shrink:0; padding:5px 12px; border-radius:999px; font-weight:800; font-size:14px; line-height:1.3;
  color:#8CEBB5; border:1px solid rgba(120,225,165,0.50);
  background:linear-gradient(180deg, rgba(95,205,145,0.42) 0%, rgba(60,160,105,0.26) 55%, rgba(40,130,85,0.30) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -2px 4px rgba(0,0,0,0.18), 0 3px 10px rgba(40,170,100,0.30);
  text-shadow:0 1px 1px rgba(0,0,0,0.30);
}
html.tema-aiko .meta-aviso-pct{
  color:#06663F; border-color:rgba(22,168,106,0.55);
  background:linear-gradient(180deg, rgba(190,245,215,0.95) 0%, rgba(95,210,150,0.55) 60%, rgba(60,185,125,0.50) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.90), inset 0 -2px 4px rgba(10,110,65,0.18), 0 3px 10px rgba(22,168,106,0.28);
  text-shadow:0 1px 0 rgba(255,255,255,0.60);
}
.meta-aviso-x{
  flex-shrink:0; width:28px; height:28px; border:0; border-radius:50%; background:transparent;
  color:var(--text-dim); font-size:13px; cursor:pointer; display:grid; place-items:center; padding:0;
}
.meta-aviso-x:hover{ background:var(--good-soft); color:var(--text); }
@keyframes meta-aviso-entra{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .meta-aviso{ animation:none; } }
@media (max-width:640px){
  .meta-avisos{ top:auto; bottom:12px; right:12px; left:12px; width:auto; }
}

/* ---- Menu do celular + valores dos KPIs maiores (30/09/2026) ----------------
   Pedido do dono, com prints do iPhone: "para o painel mobile deixe estes cards
   dentro de um menu, ficou muito poluido" e "a fonte deixe maior tambem".
   Desktop/tablet: a folha e display:contents (nao gera caixa) e a barra/fundo/
   cabecalho ficam escondidos — nada muda. Ate 640px: os atalhos, contadores,
   Sair, versao e Claro/Escuro (mesmos elementos, mesmos listeners) vivem numa
   folha de baixo que abre pelo botao Menu. Script: IIFE no fim de js/app.js. */
.mob-sheet{ display:contents; }
.mob-bar, .mob-backdrop, .mob-sheet-head{ display:none; }
@media (max-width:640px){
  .mob-bar{ display:flex; gap:8px; margin-top:12px; width:100%; }
  body.auth-locked .mob-bar{ display:none; }
  .mob-bar .excel-btn{ margin-top:0; min-height:46px; font-size:14px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:8px; }
  .mob-bar .mob-menu-btn{ flex:0 0 auto; width:auto; padding:10px 18px; border-color:var(--accent); color:var(--accent); background:linear-gradient(180deg, rgba(247,175,2,0.28), rgba(247,175,2,0.10)); }
  .mob-bar .mob-month-proxy{ flex:1 1 0; min-width:0; }
  .mob-burger, .mob-burger::before, .mob-burger::after{ display:block; width:18px; height:2px; border-radius:2px; background:currentColor; content:""; }
  .mob-burger{ position:relative; }
  .mob-burger::before{ position:absolute; top:-6px; left:0; }
  .mob-burger::after{ position:absolute; top:6px; left:0; }

  .mob-backdrop{ position:fixed; inset:0; z-index:3000; background:rgba(0,0,0,0.6); }
  .mob-sheet{
    position:fixed; left:0; right:0; bottom:0; z-index:3001; box-sizing:border-box;
    max-height:88vh; max-height:88dvh; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    padding:0 14px calc(18px + env(safe-area-inset-bottom));
    background:#161B22; color:#fff; text-align:left;
    grid-template-columns:1fr 1fr; gap:8px; align-content:start;
    border-radius:22px 22px 0 0; border:1px solid rgba(255,255,255,0.14); border-bottom:0;
    box-shadow:0 -18px 50px rgba(0,0,0,0.65);
  }
  html.tema-aiko .mob-sheet{ background:#0B4A63; border-color:rgba(255,255,255,0.28); }
  .mob-sheet, .mob-backdrop{ display:none; }
  html.mob-menu-open .mob-backdrop{ display:block; }
  html.mob-menu-open .mob-sheet{ display:grid; }
  html.mob-menu-open, html.mob-menu-open body{ overflow:hidden; }
  /* o topo tem z-index:1 (contexto proprio): sobe enquanto o menu esta aberto */
  html.mob-menu-open .top-inner{ z-index:3000; }

  .mob-sheet-head{
    display:flex; align-items:center; justify-content:space-between;
    grid-column:1 / -1; position:sticky; top:0; z-index:2; padding:16px 2px 10px; margin-bottom:0;
    background:inherit; border-radius:22px 22px 0 0;
  }
  .mob-sheet-head strong{ font:600 20px 'Oswald', sans-serif; letter-spacing:0.06em; text-transform:uppercase; }
  .mob-close{ width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,0.28); background:rgba(255,255,255,0.10); color:#fff; font-size:28px; line-height:1; cursor:pointer; padding:0; }

  /* itens em lista, um por linha, alvo de toque >= 46px */
  /* as duas fileiras viram "transparentes": todos os atalhos sao itens de UMA grade de 2 colunas */
  .mob-sheet .header-utility-row, .mob-sheet .logout-powered-row{ display:contents; }
  .mob-sheet .month-apply-status{ grid-column:1 / -1; margin-top:0; }
  .mob-sheet .excel-btn, .mob-sheet .visitas-mes-pill{ width:100%; max-width:none; box-sizing:border-box; margin-top:0; min-height:52px; font-size:14px; display:flex; flex-wrap:wrap; padding:8px 8px; align-items:center; justify-content:center; gap:10px; text-decoration:none; }
  .mob-sheet .header-utility-row #poweredSignature{ order:99; grid-column:1 / -1; margin:4px 0 0; font-size:11px; padding:8px 10px; text-align:center; }
  .mob-sheet #openMonthPickerBtn{ display:none; }   /* ja tem o atalho "Selecionar mes(es)" na barra do topo */
  .mob-sheet .tema-toggle-row{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; grid-column:1 / -1; order:100; margin-top:6px; padding-top:14px; border-top:1px solid rgba(255,255,255,0.16); }
  .mob-sheet .tema-toggle-row .excel-btn{ width:auto; flex:1 1 auto; min-height:44px; }
  .mob-sheet .tema-toggle-row .auto-refresh-status{ flex:1 1 100%; }
  .mob-sheet .app-versao{ order:5; }

  /* KPIs (Telha realizada, Produtos realizado, Margem bruta media...): valor
     ~30% maior. Antes clamp(18px,5.8vw,24px) = 22,6px a 390px; agora 7.6vw =
     29,6px a 390px (28,5 a 375; 27,4 a 360). "R$ 3.372.555,82" segue numa
     linha (15 caracteres mono ~ 0,6em cada = 266px < 338px uteis a 390px). */
  html body .kpi .val,
  html body .kpi-3d .val,
  html body #kpiStrip .kpi-centered .val,
  html body #kpiStrip .kpi:nth-child(2) .val,
  html body #kpiStrip .kpi:nth-child(3) .val,
  html body #kpiStrip .kpi:nth-child(5) .val{
    font-size:clamp(24px, 7.6vw, 31px);
    white-space:nowrap;
  }
}