/*
 * 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:#ffffff;
  --panel:var(--b24-30);
  --line:var(--b24-200);
  --tx:var(--b24-950);
  --mut:var(--b24-900);
  --acc:var(--b24-link);
  --ok:#5f8500;
  --warn:var(--b24-atencao-texto);
  --err:#c21b16;
}

/*
 * 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:#1b1e22;
    --panel:#22262b;
    --line:#31363d;
    --tx:#e8eaed;
    --mut:#a3aab4;
    --acc:#4ba3e8;
    --ok:#9dcf00;
    --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;
  }
}

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(--bg);
  color:var(--tx);
  padding:7px 15px;
  transition:background .12s ease,border-color .12s ease;
}
button:hover:not(:disabled){background:var(--b24-40);border-color:var(--b24-300)}
button.primary,.primary{
  background:var(--b24-link) !important;
  border-color:var(--b24-link) !important;
  color:#fff !important;
}
button.primary:hover:not(:disabled){background:#1b5896 !important;border-color:#1b5896 !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(--bg);
  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(32,102,176,.14);
}

/* ── 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. */
nav a{color:var(--b24-900);font-weight:600;text-decoration:none}
nav a:hover{color:var(--tx)}
nav a.on{color:var(--tx);border-bottom:2px solid var(--b24-primary)}

/* ── 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}
th{
  background:var(--b24-30);color:var(--b24-900);
  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(--b24-20)}

/* ── 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(--b24-info-fundo);border-left:3px solid var(--b24-primary);
  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.
 */
@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}
}