/*
 * Aparência nativa do Bitrix24 — telas de operação.
 *
 * A aplicação vive dentro de um iframe do Bitrix. Quando ela tem cor, fonte e
 * botão próprios, o usuário sente que saiu do sistema e entrou noutro lugar.
 * As telas de operação (painel, lojas, funis, acessos, produtos, configuração
 * e os widgets do card) usam esta folha e desaparecem dentro da plataforma.
 *
 * A identidade Amazon Spa fica onde ela é do cliente e não do operador: a
 * proposta, o contrato assinado e o relatório enviado. Ali `marca.css` manda,
 * e é proposital — o cliente não abre o Bitrix, abre um documento da Amazon.
 *
 * Os valores não foram tirados a olho de uma captura de tela: vêm do pacote
 * oficial @bitrix24/b24style (v1.0.1), do preset de cores e do de bordas.
 * Por isso `--acc` é #2066b0 (primary-link) e não o azul de destaque #2fc6f6,
 * que o Bitrix usa em fundo e ícone, nunca em texto sobre branco.
 */

@font-face{
  font-family:"Open Sans B24";
  src:url("/fontes/opensans-regular.woff") format("woff");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Open Sans B24";
  src:url("/fontes/opensans-semibold.woff") format("woff");
  font-weight:600;font-style:normal;font-display:swap;
}

:root{
  /* Escala neutra do Bitrix (preset-colors, família `base`). */
  --b24-20:#f8fafb; --b24-30:#f5f7f8; --b24-40:#f1f4f6; --b24-50:#eef2f4;
  --b24-100:#edeef0; --b24-150:#e6e8e9; --b24-200:#dfe0e3; --b24-300:#d5d7db;
  --b24-400:#bdc1c6; --b24-500:#a8adb4; --b24-600:#9499a4; --b24-800:#6a737f;
  --b24-900:#525c69; --b24-950:#333333;

  /* Semânticas, como a plataforma as nomeia. */
  --b24-primary:#2fc6f6;
  --b24-link:#2066b0;
  --b24-sucesso:#9dcf00;      --b24-sucesso-fundo:#f1fbd0;  --b24-sucesso-texto:#506900;
  --b24-alerta:#ff5752;       --b24-alerta-fundo:#ffe8e8;   --b24-alerta-texto:#9a0703;
  --b24-atencao:#ffa900;      --b24-atencao-fundo:#fff1d6;  --b24-atencao-texto:#7a5100;
  --b24-info-fundo:#e5f9ff;

  --b24-raio:6px;             /* borderRadius DEFAULT */
  --b24-raio-md:10px;
  --b24-fonte:"Open Sans B24","Open Sans",-apple-system,BlinkMacSystemFont,
    "Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* As telas já usam estes nomes; aqui eles passam a apontar para o Bitrix,
     então nenhuma regra de componente precisou mudar. */
  --bg:#f6f7f9;               /* fundo do app: canvas neutro claro (estilo nativo) */
  --card:#ffffff;             /* cartoes, campos e botoes brancos sobre o canvas */
  --panel:#eef0f3;            /* realce sutil: cabecalho de tabela, hover de linha */
  --line:#e6e8ec;
  --tx:#0f1115;
  --mut:#697180;
  --faint:#9aa1ac;            /* rotulos e legendas mais apagadas */
  --primary:#111318;          /* acao principal: preto suave, nao terracota nem azul */
  --primary-esc:#2a2e35;
  --primary-tx:#ffffff;
  --acc:#2f6f5b;              /* verde-petroleo discreto: so em foco e detalhe */
  --ok:#15803d;
  --warn:var(--b24-atencao-texto);
  --err:#c21b16;

  /* ── Design system (fundação da nova interface) ──────────────────
   *
   * Estrutura inspirada no CollectFlow (tokens card/muted/semânticos +
   * escala de raio e sombra), com a paleta da Amazon Spa: petróleo nos
   * títulos e estrutura, terracota nas ações e faixas, creme nas células.
   * As telas antigas seguem usando --bg/--panel/--line/--tx/--acc; estes
   * são o que a biblioteca de componentes (Fase 2) vai consumir. */
  /* Rampa da marca, amostrada do catálogo (a MESMA de marca.css), para o app
     inteiro falar uma cor só e o ds- pintar na marca de verdade. Antes daqui
     o petróleo era #41828e e a terracota #bc614e, aproximados; agora são os
     tons reais do catálogo, iguais aos do Catálogo e do Roadmap. */
  --petroleo:#3b5659;  --petroleo-esc:#143331;
  --terra:#ae6653;     --terra-esc:#93513f;
  --creme:#fdf7ee;     --areia:#ece8dd;
  --dourado:#d9a56d;   --marca-clara:#f6e7e1;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,"Roboto Mono",Menlo,monospace;

  --marca:var(--petroleo);      --marca-tx:var(--creme);   /* petróleo, cabeçalho de tabela */
  --marca-acao:var(--primary);  --marca-acao-tx:var(--primary-tx);  /* ação principal: preto suave */
  --marca-suave:var(--areia);   /* areia, zebra e realce leve */

  --card:#ffffff;             --card-tx:var(--b24-950);
  --muted:var(--b24-40);      --muted-tx:var(--b24-800);
  --ok-fundo:var(--b24-sucesso-fundo);   --ok-tx:var(--b24-sucesso-texto);
  --warn-fundo:var(--b24-atencao-fundo); --warn-tx:var(--b24-atencao-texto);
  --err-fundo:var(--b24-alerta-fundo);   --err-tx:var(--b24-alerta-texto);
  --info-fundo:var(--b24-info-fundo);    --info-tx:var(--b24-link);

  --raio-sm:6px; --raio:10px; --raio-lg:14px; --raio-full:999px;
  --sombra-sm:0 1px 2px rgba(20,40,45,.06);
  --sombra:0 1px 3px rgba(20,40,45,.08), 0 1px 2px rgba(20,40,45,.05);
  --sombra-lg:0 6px 20px rgba(20,40,45,.12);
  --espaco:14px;              /* respiro padrão entre blocos */
}

/*
 * Tema escuro do Bitrix.
 *
 * O portal tem tema escuro próprio, e o iframe não fica sabendo qual está
 * ativo — não há como perguntar. Seguimos a preferência do sistema, que é o
 * palpite mais próximo; quem usa o Bitrix claro num Mac escuro verá a
 * aplicação escura, e é a única forma sem inventar um seletor que mentiria
 * metade das vezes.
 */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0d10;
    --card:#15181c;
    --panel:#1b1f24;
    --line:#252a31;
    --tx:#eef1f4;
    --mut:#98a1ad;
    --faint:#6b7480;
    --primary:#eef1f4;
    --primary-esc:#d3d8de;
    --primary-tx:#111318;
    --acc:#5fb39a;
    --ok:#48c774;
    --warn:#ffa900;
    --err:#ff7c78;
    --b24-sucesso-fundo:#22301a; --b24-sucesso-texto:#a8d84a;
    --b24-alerta-fundo:#3a2222;  --b24-alerta-texto:#ff9a97;
    --b24-atencao-fundo:#332a17; --b24-atencao-texto:#ffc766;
    --b24-info-fundo:#16303a;

    /* Design system no escuro. A marca ganha versões mais claras para
       contraste em fundo escuro; o creme vira um painel neutro. */
    --petroleo:#5aa3b0; --petroleo-esc:#0d1417;
    --terra:#c9836e;    --terra-esc:#ae6653;
    --creme:#fdf7ee;    --areia:#234a47;
    --dourado:#d9a56d;  --marca-clara:#3a2520;
    --marca:var(--petroleo); --marca-tx:var(--petroleo-esc);
    --marca-acao:var(--primary); --marca-acao-tx:var(--primary-tx);
    --marca-suave:#234a47;
    --card:#15181c;  --card-tx:#eef1f4;
    --muted:#2a2f36; --muted-tx:#a3aab4;
    --ok-fundo:#22301a; --ok-tx:#a8d84a;
    --warn-fundo:#332a17; --warn-tx:#ffc766;
    --err-fundo:#3a2222; --err-tx:#ff9a97;
    --info-fundo:#16303a; --info-tx:#7cc6ff;
    --sombra-sm:0 1px 2px rgba(0,0,0,.3);
    --sombra:0 1px 3px rgba(0,0,0,.4);
    --sombra-lg:0 8px 24px rgba(0,0,0,.5);
  }
}

body{font-family:var(--b24-fonte);font-size:14px;color:var(--tx)}

/* ── Controles ──────────────────────────────────────────────────
   O botão do Bitrix é retangular de canto suave, sem sombra, com peso
   semibold. O nosso tinha canto de 7px e negrito cheio — pequeno, mas é o
   tipo de diferença que faz a tela parecer "de outro sistema". */
button,select,input,textarea{
  font-family:var(--b24-fonte);
  border-radius:var(--b24-raio);
}
button{
  font-weight:600;
  border:1px solid var(--line);
  background:var(--card);
  color:var(--tx);
  padding:7px 15px;
  transition:background .12s ease,border-color .12s ease;
}
button:hover:not(:disabled){background:var(--panel);border-color:var(--b24-300)}
button.primary,.primary{
  background:var(--marca-acao) !important;
  border-color:var(--marca-acao) !important;
  color:var(--marca-acao-tx,#fff) !important;
}
button.primary:hover:not(:disabled){background:var(--primary-esc) !important;border-color:var(--primary-esc) !important}
button.risco{color:var(--err);border-color:var(--line)}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{
  outline:2px solid var(--acc);outline-offset:1px;
}

input,select,textarea{
  border:1px solid var(--b24-300);
  background:var(--card);
  color:var(--tx);
  padding:7px 10px;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(47,111,91,.16);
}

/* ── Navegação em abas ──────────────────────────────────────────
   O Bitrix marca a aba ativa com um traço embaixo e texto escuro; a inativa
   é cinza médio, não link azul. */
/* O menu (barra lateral) e estilizado por menu.js; aqui so o basico neutro,
   sem o azul do Bitrix que a operacao pediu para tirar. */
nav a{color:var(--mut);font-weight:500;text-decoration:none}
nav a:hover{color:var(--tx)}
nav a.on{color:var(--tx)}

/* ── Blocos e tabelas ──────────────────────────────────────────
   Fundo branco, borda cinza clara, canto de 6px: o cartão padrão da
   plataforma. Sem sombra — sombra é do popup, não do conteúdo. */
table{border-collapse:collapse}
/* Cabecalho limpo e neutro (estilo CollectFlow): fundo cinza claro, texto
   apagado, fonte normal. Nada de petroleo/creme/mono, que davam cara de
   folheto numa tela de numeros. */
th{
  background:var(--panel);color:var(--mut);
  font-weight:600;font-size:12px;letter-spacing:.02em;text-transform:uppercase;
}
td,th{border-bottom:1px solid var(--line)}
tbody tr:hover{background:var(--panel)}   /* realce sutil na linha, sem zebra */

/* ── Selos de estado ────────────────────────────────────────────
   Fundo claro com texto na cor forte da mesma família — o padrão do Bitrix
   para etiqueta. Cor cheia com texto branco ali fica pesada e chama mais
   atenção que o dado. */
.selo{border-radius:99rem;font-weight:600;font-size:11px;padding:3px 9px}
.selo.ok{background:var(--b24-sucesso-fundo);color:var(--b24-sucesso-texto)}
.selo.mau,.selo.err{background:var(--b24-alerta-fundo);color:var(--b24-alerta-texto)}
.selo.warn{background:var(--b24-atencao-fundo);color:var(--b24-atencao-texto)}
.selo.no,.selo.rev{background:var(--b24-100);color:var(--b24-900)}

/* Avisos: faixa lateral fina, como os blocos de dica da plataforma. */
.aviso{background:var(--b24-atencao-fundo);border-left:3px solid var(--b24-atencao);
  border-radius:0 var(--b24-raio) var(--b24-raio) 0;color:var(--tx)}
.note{background:var(--panel);border-left:3px solid var(--line);
  border-radius:0 var(--b24-raio) var(--b24-raio) 0}

/* A marca aparece uma vez, discreta, no topo — não pinta a tela inteira. */
.marca-logo{height:20px;width:auto;display:block;opacity:.9}
.marca-topo{display:flex;align-items:center;gap:10px;margin:0 0 14px}

/* ── Celular ────────────────────────────────────────────────────
 *
 * O app do Bitrix abre a aplicação numa webview estreita — 375 px num
 * iPhone comum. Três coisas quebram aí, e nenhuma aparece no computador:
 *
 * 1. Grade com coluna mínima maior que a tela empurra a página para o lado.
 *    O `min(...)` faz a coluna encolher em vez de estourar.
 * 2. Tabela larga arrasta a página inteira. Aqui ela rola dentro do próprio
 *    bloco, e o corpo da página nunca rola na horizontal.
 * 3. Alvo de toque pequeno. O dedo não tem a precisão do cursor: os
 *    controles crescem para a altura mínima que se acerta sem ampliar.
 */
/* Casca da pagina, IGUAL em toda tela: centralizada, mesma largura e o mesmo
   respiro. Antes cada tela definia a sua (umas soltas a esquerda, larguras de
   760 a 1600px), e navegar entre abas parecia trocar de app. Esta regra vem
   depois do <style> de cada tela, entao manda. */
.wrap{max-width:1280px;margin:0 auto;padding:22px 24px 56px}

/* Dentro da casca (/app), TODA tela usa o mesmo container: mesma largura,
   centralizado sob a barra do topo e com o mesmo respiro. É o que faz uma
   tela não abrir "no meio" e a outra "no canto" — todas iguais. A classe
   `embutido` é posta por bx.js quando a página abre embutida. */
html.embutido .wrap,
html.embutido .ds-wrap{max-width:1280px;margin:0 auto;padding:22px 24px 48px}

@media (max-width: 640px){
  .wrap{padding:14px 14px 40px}

  nav{flex-wrap:wrap;gap:12px 14px;font-size:13px}

  /* Qualquer grade de cartões passa a caber. */
  [style*="minmax"],.grupos,.lojas,.resumo,.campos,.equipes,.areas{
    grid-template-columns:1fr !important;
  }

  /* Campo marcado para ocupar duas colunas cria uma coluna IMPLÍCITA quando
     só existe uma — e a grade volta a ter duas, estreitas. Some com o vão
     em vez de tentar caber nele. */
  [style*="grid-column"]{grid-column:auto !important}

  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}

  button,select,input,textarea{min-height:40px;font-size:16px}
  /* 16px no campo evita o zoom automático do iOS ao focar — o zoom desloca
     a tela e o usuário perde o lugar onde estava. */

  header{flex-direction:column;align-items:stretch;gap:10px}
  header div:last-child{display:flex;flex-wrap:wrap;gap:8px}
}

/* ═══════════════════════════════════════════════════════════════════
 * DESIGN SYSTEM — componentes (Fase 1 e 2)
 *
 * Classes com prefixo `ds-`, para conviver com as classes locais das telas
 * antigas (.card, .loja, .cartao) enquanto a migração acontece tela a tela.
 * O HTML sai da biblioteca public/ui.js; aqui é a aparência.
 * ═══════════════════════════════════════════════════════════════════ */

/* Shell: o container e o cabeçalho de tela. */
.ds-wrap{max-width:1280px;margin:0 auto;padding:22px 24px 56px}
.ds-topo,header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:0 0 18px}
.ds-topo .tit,header h1{margin:0;font-size:19px;font-weight:700;color:var(--tx);line-height:1.25}
.ds-topo .sub,header .sub,header .mut,header > div > p{margin:2px 0 0;font-size:13px;color:var(--mut);line-height:1.45}
.ds-topo .acoes,header .row,header .acoes{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* Card. */
.ds-card{background:var(--card);color:var(--card-tx);border:1px solid var(--line);
  border-radius:var(--raio);box-shadow:var(--sombra-sm);padding:14px 16px}
.ds-card + .ds-card{margin-top:var(--espaco)}
.ds-card > .cab{display:flex;align-items:center;gap:9px;margin:0 0 10px}
.ds-card > .cab .tit{margin:0;font-size:14px;font-weight:700;color:var(--tx)}
.ds-card > .cab .sub{margin:0;font-size:12px;color:var(--mut)}
.ds-card > .cab .dir{margin-left:auto}

/* Grade de KPIs. */
.ds-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.ds-kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--raio);
  padding:12px 14px;box-shadow:var(--sombra-sm)}
.ds-kpi .rot{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);font-weight:700}
.ds-kpi .val{font-size:22px;font-weight:800;color:var(--tx);
  font-variant-numeric:tabular-nums;margin-top:2px;line-height:1.1}
.ds-kpi .pe{font-size:11.5px;color:var(--mut);margin-top:2px}
.ds-kpi.alerta{border-color:var(--warn)} .ds-kpi.alerta .val{color:var(--warn-tx)}

/* Tabela. */
.ds-tabela-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ds-tabela{width:100%;border-collapse:collapse;font-size:13px}
.ds-tabela thead th{background:var(--panel);color:var(--mut);text-align:left;
  padding:8px 10px;font-size:12px;text-transform:uppercase;letter-spacing:.02em;font-weight:600;
  white-space:nowrap}
.ds-tabela tbody td{padding:8px 10px;border-bottom:1px solid var(--line);color:var(--tx)}
.ds-tabela tbody tr:nth-child(even) td{background:var(--muted)}
.ds-tabela td.n,.ds-tabela th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ds-tabela .critico{color:var(--err-tx);font-weight:700}

/* Badge. */
.ds-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;
  padding:2px 9px;border-radius:var(--raio-full);background:var(--muted);color:var(--muted-tx);
  text-transform:uppercase;letter-spacing:.03em}
.ds-badge.ok{background:var(--ok-fundo);color:var(--ok-tx)}
.ds-badge.warn{background:var(--warn-fundo);color:var(--warn-tx)}
.ds-badge.err{background:var(--err-fundo);color:var(--err-tx)}
.ds-badge.info{background:var(--info-fundo);color:var(--info-tx)}
.ds-badge.marca{background:var(--marca-acao);color:var(--marca-acao-tx)}

/* Botão. */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 15px;border-radius:var(--raio-sm);border:1px solid var(--line);
  background:var(--card);color:var(--tx);font:inherit;font-size:13px;font-weight:600;
  cursor:pointer;transition:filter .12s,background .12s}
.ds-btn:hover{filter:brightness(.97)}
.ds-btn:disabled{opacity:.5;cursor:default}
.ds-btn.primario{background:var(--marca-acao);border-color:var(--marca-acao);color:var(--marca-acao-tx)}
.ds-btn.fantasma{background:transparent;border-color:transparent;color:var(--acc)}

/* Campo de formulário. */
.ds-campo{display:block;margin:0 0 10px}
.ds-campo > label{display:block;font-size:11.5px;font-weight:600;color:var(--mut);margin:0 0 3px}
.ds-campo input,.ds-campo select,.ds-campo textarea{width:100%;padding:8px 10px;
  border:1px solid var(--line);border-radius:var(--raio-sm);background:var(--bg);color:var(--tx);
  font:inherit;font-size:14px}
.ds-campo input:focus,.ds-campo select:focus,.ds-campo textarea:focus{
  outline:2px solid var(--marca);outline-offset:-1px}
.ds-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}

/* Estados. */
.ds-vazio{text-align:center;color:var(--mut);padding:28px 16px;font-size:13px;
  border:1px dashed var(--line);border-radius:var(--raio)}
.ds-skeleton{background:linear-gradient(90deg,var(--muted) 25%,var(--line) 37%,var(--muted) 63%);
  background-size:400% 100%;animation:ds-brilho 1.3s ease infinite;border-radius:var(--raio-sm);height:14px}
@keyframes ds-brilho{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion: reduce){ .ds-skeleton{animation:none} }