/* ============================================================
   DigiSat · Site — base (tokens + tipografia + chrome)
   Mesmo sistema visual do DigiSat · Painel: Bootstrap 5.3 padrão
   + primário #094d8d + Poppins como família única.
   Componentes e utilitários ficam em components.css.

   ORDEM DE CARGA OBRIGATÓRIA: bootstrap → base.css → components.css
   ============================================================ */

/* ============================================================
   Tokens da marca
   O painel repete o hex #094d8d ~20 vezes; aqui ele existe em UM
   lugar só. Antes desta camada o azul da marca estava duplicado em
   6 arquivos (CSS, JS do export de PDF e 3 páginas de erro
   autocontidas) — trocar a cor custava seis edições.
   ============================================================ */
:root {
  /* ---------- Marca ---------- */
  --ds-primary:#094d8d;
  --ds-primary-rgb:9,77,141;
  --ds-primary-hover:#033c6b;
  --ds-primary-active:#03345d;          /* = hover de link */
  --ds-primary-ring:rgba(9,77,141,.25); /* anel de foco */
  --ds-primary-bright:#037ac9;          /* 3º stop do gradiente — azul claro da marca */
  --ds-navy:#0b1d3a;                    /* marca em texto */

  /* ---------- Gradiente da marca ----------
     Idêntico ao --sidebar-bg do painel. Usado no nav, no rodapé,
     no herói da home, no preloader e nas páginas de erro. */
  --ds-gradient:linear-gradient(130deg, rgb(7,24,49) 0%, rgb(11,60,117) 50%, rgb(3,122,201) 100%);
  --sidebar-bg:var(--ds-gradient);      /* alias: nome do painel, mantém o CSS portável */

  /* ---------- Superfícies ---------- */
  --ds-surface:#fff;
  --ds-wash:#335a8a12;                  /* azul a 7% — fundo de conteúdo */
  --ds-suave:#f8f9fa;
  --ds-border:#dee2e6;
  --ds-muted:#6c757d;

  /* ---------- Forma ---------- */
  --ds-radius-btn:.5rem;
  --ds-radius-card:1rem;
  --ds-shadow-card:var(--bs-box-shadow-sm);
  --ds-shadow-nav:0 .25rem .75rem rgba(0,0,0,.15);

  /* ---------- Acento só-do-site ----------
     O painel não tem nav horizontal nem rodapé sobre o gradiente;
     este ciano é o hover de link nessas duas peças. */
  --ds-accent:#00aded;

  /* ---------- Cores de terceiros ---------- */
  --ds-whatsapp:#4dc247;
}

/* ---------- Primário #094d8d (variáveis do Bootstrap) ---------- */
body {
  --bs-primary:var(--ds-primary);
  --bs-primary-rgb:var(--ds-primary-rgb);
  --bs-link-color:var(--ds-primary);
  --bs-link-color-rgb:var(--ds-primary-rgb);
  --bs-link-hover-color:var(--ds-primary-active);
  --bs-link-hover-color-rgb:3,52,93;

  /* Família única: tudo herda daqui — títulos, corpo, tabelas,
     formulários e botões. Não declare font-family em componente. */
  --bs-body-font-family:'Poppins', sans-serif;
  --bs-body-font-weight:300;
  --bs-body-font-size:.9375rem;   /* 15px */
  --bs-body-line-height:1.6;
}

html {
  scroll-behavior: smooth;
}

/* ============================================================
   Bloqueio de seleção de texto
   Dissuade a cópia casual do conteúdo institucional. Existia em
   style.css e se perdeu na divisão base/components (e8ffbf9).
   Os handlers de botão direito e Ctrl+C ficam em static/js/ui.js
   e reusam esta MESMA lista de exceções — alterar os dois juntos.
   É dissuasão, não proteção: DevTools e "ver código-fonte"
   continuam copiando tudo.
   ============================================================ */
body {
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;   /* iOS: sem menu no toque longo */
}

/* Exceções: onde copiar É a função da tela. Campos de formulário
   cobrem também os #code/#shop_id das integrações. */
input, textarea, select, [contenteditable="true"],
.ds-selecionavel, .ds-selecionavel * {
  -webkit-user-select:text;
  -moz-user-select:text;
  -ms-user-select:text;
  user-select:text;
  -webkit-touch-callout:default;
}

/* ============================================================
   Escala tipográfica — 300 corpo · 400/500 títulos · 700 âncora
   Cópia da escala do painel. O contraste 300→500 já cria a
   hierarquia; o 700 fica reservado ao título da página.
   ============================================================ */

/* Os templates usam .fw-bold em centenas de pontos. Em vez de editar
   todos, o utilitário é REMAPEADO: aqui "bold" significa 500 (Medium),
   não 700. Para o 700 de verdade existe .fw-forte. */
.fw-bold      { font-weight:500!important; }
.fw-semibold  { font-weight:400!important; }
b, strong     { font-weight:500; }

/* Negrito de verdade (700) — títulos que precisam ancorar a tela.
   Use esta classe em vez de .fw-bold, que aqui vale 500. */
.fw-forte     { font-weight:700!important; }

/* Dois níveis de título, porque são coisas diferentes:
     h1     → título DA PÁGINA. Ancora a tela inteira, vai de 700.
     h2..h6 → títulos DE SEÇÃO e DE ITEM. Aplicar 700 aqui pesa a
              tela toda; só precisam se destacar do corpo (300). */
h1, .h1 { font-weight:700; }
h2, h3, h4, h5, h6,
.h2, .h3, .h4, .h5, .h6 { font-weight:500; }

/* Título de página no padrão do painel: <h3 class="fw-forte">.
   Escopado em h3.fw-forte para não mexer em outros .h3. */
h3.fw-forte { font-size:1.5rem; }

/* ---------- Tabelas ---------- */
.table { font-size:.875rem; }         /* 14px */
.table th {
  font-weight:500;
  font-size:.75rem;                   /* 12px */
  text-transform:uppercase;
  letter-spacing:.06em;
}

/* ---------- Badges ---------- */
.badge { --bs-badge-font-weight:400; }

/* ---------- Scrollbar da marca ---------- */
::-webkit-scrollbar { width:.6rem; height:.6rem; }
::-webkit-scrollbar-track { background:#fff; }
::-webkit-scrollbar-thumb {
  background:var(--ds-primary);
  border-radius:.4rem;
  border:2px solid #fff;
}

/* ============================================================
   Containers
   Divergência consciente em relação ao painel: o site é
   institucional e usa containers fluidos com breakpoints próprios
   (920/1633 px), fora da escala sm/md/lg/xl/xxl do Bootstrap.
   Realinhar mexeria no layout de 92 templates sem ganho de
   identidade — fica como está, documentado.
   ============================================================ */
@media (max-width: 920px) {
  .container, .container-lg, .container-md, .container-sm { max-width:100%; }
}
@media (min-width: 921px) and (max-width: 1633px) {
  .container, .container-lg, .container-md, .container-sm { max-width:95%; }
}
@media (min-width: 1634px) {
  .container, .container-lg, .container-md, .container-sm { max-width:90%; }
}

/* ============================================================
   Preloader — logo pulsante sobre o gradiente da marca.
   Aparece 1× por sessão (lógica em js/preloader.js).
   ============================================================ */
html.preloader-hidden #preloader { display:none!important; }
#preloader {
  position:fixed; inset:0;
  background:var(--ds-gradient);
  display:flex; align-items:center; justify-content:center;
  z-index:9999;
  transition:opacity .2s ease;
}
.loader { text-align:center; color:#fff; }
.logo_loader {
  width:14rem; max-width:60vw; height:auto;
  animation:pulse-logo 1.5s infinite ease-in-out;
}
@keyframes pulse-logo {
  0%   { transform:scale(1);   opacity:1; }
  50%  { transform:scale(1.1); opacity:.7; }
  100% { transform:scale(1);   opacity:1; }
}

/* ---------- Logos ---------- */
.logo      { max-height:3rem; }
.logo_auth { max-height:4.5rem; }

/* ============================================================
   Navbar (topo fixo sobre o gradiente da marca)
   ============================================================ */
.bg_nav {
  background:var(--ds-gradient);
  background-size:cover;
}
nav .nav-link        { color:#fff; }
.nav-link:hover      { color:var(--ds-accent); }

.bg_nav { transition:background .3s ease, box-shadow .3s ease; }

/* Só na home o nav entra transparente sobre o herói em gradiente e ganha o
   gradiente próprio depois de 180px de rolagem. Quem alterna .nav-scrolled é
   js/nav-scroll.js; a classe .home vem do {% block body_class %}. */
body.home .bg_nav {
  background:transparent!important;
  box-shadow:none!important;
}
body.home .bg_nav.nav-scrolled {
  background:var(--ds-gradient)!important;
  box-shadow:0 .5rem 1rem rgba(0,0,0,.15)!important;
}

/* Herói da home — ocupa a dobra e a imagem respira nas laterais. */
.heroi-home     { min-height:80vh; }
.heroi-home-img { width:90%; height:auto; }

/* Submenus aninhados não são nativos do Bootstrap 5 — abrem no hover
   em desktop. Em telas de toque o clique do Bootstrap continua valendo. */
@media (min-width: 992px) {
  nav .navbar-nav li:hover > ul.dropdown-menu { display:block; margin-top:-1px; }
}
.dropdown_size .dropdown-menu { max-height:35vh; overflow:auto; }
.dropdown-submenu { position:relative; }
.dropdown-submenu > .dropdown-menu { top:0; left:100%; margin-top:-6px; }
.dropdown-menu > li > a:hover:after { transform:rotate(-90deg); }

/* ============================================================
   Rodapé (mesmo gradiente do nav)
   ============================================================ */
.bg_footer {
  background:var(--ds-gradient);
  background-size:cover;
}
footer p,
footer h5,
footer .nav-link,
footer .link_social { color:#fff; }
footer .nav-link:hover { color:var(--ds-accent); }
footer .link_desenvolvedor { color:var(--ds-accent); }
footer .link_desenvolvedor:hover { color:#fff; }

/* ---------- Acessibilidade ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  * { transition:none!important; animation:none!important; }
}