/* ═══════════════════════════════════════════════════════════════
   FSF — BASE DA MARCA
   São Francisco Materiais de Construção

   Este arquivo é a ÚNICA fonte de verdade das cores e das abas.
   Ele carrega ANTES do CSS de cada página, então qualquer página
   ainda pode sobrescrever o que precisar.

   Antes deste arquivo, cada página tinha suas próprias variáveis
   com os MESMOS nomes e valores DIFERENTES (--azul era #0F2F87 no
   admin e #1A4FD6 no vendedor). Por isso as telas não pareciam da
   mesma empresa. Aqui os nomes começam com --fsf- e não colidem
   com nada que já existia.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ── AZUL DA MARCA (o azul da placa da logo) ── */
  --fsf-navy-900:#081B52;   /* mais escuro — topo de gradiente, barra lateral */
  --fsf-navy-800:#0F2F87;   /* AZUL OFICIAL — é o azul da logo */
  --fsf-navy-700:#14399F;
  --fsf-navy-600:#1A4FD6;   /* azul de ação — foco, link, botão ativo */

  /* ── OURO DA MARCA (a casa da logo) ── */
  --fsf-gold:#FFD559;       /* OURO OFICIAL */
  --fsf-gold-lt:#FFE89A;
  --fsf-gold-deep:#D97706;  /* ouro escurecido — legível sobre branco */

  /* ── TINTA E PAPEL ── */
  --fsf-ink:#0B1B3B;
  --fsf-paper:#F7F9FC;
  --fsf-paper-2:#EEF2FA;
  --fsf-white:#FFFFFF;
  --fsf-line:#D8E0F0;

  /* ── TEXTO SECUNDÁRIO (todos aprovados em contraste sobre branco) ──
     Os valores antigos (#9aa5c2, #b7bfd8, #a3add0) ficavam entre 2:1 e
     3:1 — abaixo do mínimo legível de 4,5:1. Estes passam. */
  --fsf-txt-2:#5A6786;      /* 5,6:1 — rótulos, legendas */
  --fsf-txt-3:#66728E;      /* 4,8:1 — texto de apoio, versão do app */
  --fsf-placeholder:#657297;/* 4,6:1 — texto dentro do campo vazio */

  /* ── SITUAÇÃO DO PEDIDO (iguais em todas as telas) ── */
  --fsf-aguardando:#8896B5;
  --fsf-producao:#D97706;
  --fsf-pronto:#16A34A;
  --fsf-entregue:#475569;
  --fsf-erro:#DC2626;

  /* ── FORMA ── */
  --fsf-r-sm:8px; --fsf-r:11px; --fsf-r-lg:16px;
  --fsf-sombra:0 2px 10px rgba(15,47,135,.06);
  --fsf-sombra-alta:0 10px 28px rgba(8,27,82,.16);

  /* Velocidade única de animação — é o que dá a sensação de "fluido":
     tudo na empresa acelera e desacelera do mesmo jeito. */
  --fsf-mov:.24s cubic-bezier(.16,1,.3,1);
}

/* ═══════════════════════════════════════════════════════════════
   PISO DE QUALIDADE — vale para todas as páginas
   ═══════════════════════════════════════════════════════════════ */

/* Contorno visível ao navegar pelo teclado (Tab). Sem isso, quem usa
   teclado se perde na tela. Só aparece no teclado, não no clique. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--fsf-navy-600);
  outline-offset:2px;
  border-radius:var(--fsf-r-sm);
}
/* Sobre fundo escuro o azul some — ali o contorno é ouro. */
:where(.fsf-escuro,.fsf-escuro *):focus-visible{
  outline-color:var(--fsf-gold);
}

/* Quem configurou o sistema para reduzir animações não recebe nenhuma. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   LOGO — renderização consistente
   A logo é 512×512 com fundo transparente. object-fit:contain
   garante que ela nunca estica nem corta, em nenhum tamanho.
   ═══════════════════════════════════════════════════════════════ */
.fsf-logo{
  display:block;
  object-fit:contain;
  /* A logo tem traço fino no telhado; sem isto o navegador borra ao
     reduzir de 512px para 42px. */
  image-rendering:auto;
  flex-shrink:0;
}

/* ═══════════════════════════════════════════════════════════════
   ABAS — componente único da empresa
   Usado no operador, no vendedor e no treinamento.

   O marcador da aba ativa é uma faixa ouro com um bico de telhado
   no meio: é a silhueta da própria logo. Ele DESLIZA de uma aba
   para a outra em vez de piscar — é daí que vem a fluidez.
   ═══════════════════════════════════════════════════════════════ */
.fsf-tabs{
  position:relative;
  display:flex;
  gap:2px;
  align-items:stretch;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  border-bottom:1px solid var(--fsf-line);
}
.fsf-tabs::-webkit-scrollbar{display:none}

/* As regras de aparência abaixo valem só para a barra DEITADA.
   A barra lateral do admin (.fsf-tabs-v) já tem visual próprio em
   admin.css e só aproveita daqui o marcador que desliza — por isso
   o :not(.fsf-tabs-v). Sem esse escopo, o hover claro daqui pintava
   texto azul-escuro sobre o fundo azul-escuro da lateral. */
.fsf-tabs:not(.fsf-tabs-v):not(.fsf-tabs-pilula):not(.fsf-tabs-nu) > .fsf-tab{
  position:relative;
  /* flex:0 0 auto para a aba ter a largura do proprio texto. Com
     flex:1 1 auto elas se esticavam pela tela inteira e o sublinhado
     ouro virava um traco enorme atravessando meia tela. */
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 20px 15px;
  border:none;
  background:none;
  font:inherit;
  font-size:14.5px;
  font-weight:700;
  letter-spacing:.3px;
  color:var(--fsf-txt-2);
  cursor:pointer;
  white-space:nowrap;
  border-radius:var(--fsf-r) var(--fsf-r) 0 0;
  transition:color var(--fsf-mov), background var(--fsf-mov);
}
.fsf-tabs:not(.fsf-tabs-v):not(.fsf-tabs-pilula):not(.fsf-tabs-nu) > .fsf-tab:hover:not(.on){
  color:var(--fsf-navy-800);
  background:rgba(15,47,135,.05);
}
.fsf-tabs:not(.fsf-tabs-v):not(.fsf-tabs-pilula):not(.fsf-tabs-nu) > .fsf-tab.on{
  color:var(--fsf-navy-800);
  font-weight:800;
}

/* A faixa que desliza. A posição vem do JS (js/fsf-ui.js). */
.fsf-tabs-marca{
  position:absolute;
  left:0; bottom:0;
  height:3px;
  width:0;
  background:var(--fsf-gold);
  border-radius:3px 3px 0 0;
  pointer-events:none;
  transform:translateX(0);
  transition:transform var(--fsf-mov), width var(--fsf-mov);
}
/* O bico do telhado, centralizado na faixa. */
.fsf-tabs-marca::after{
  content:'';
  position:absolute;
  left:50%; bottom:100%;
  width:0; height:0;
  transform:translateX(-50%);
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-bottom:5px solid var(--fsf-gold);
}
/* Antes do JS medir a primeira posição, a faixa não pisca na esquerda. */
.fsf-tabs-marca:not(.pronta){opacity:0}
.fsf-tabs-marca.pronta{opacity:1;transition:transform var(--fsf-mov), width var(--fsf-mov), opacity .1s}

/* ── Abas sobre fundo escuro (tela do operador) ── */
.fsf-escuro .fsf-tabs{border-bottom-color:rgba(255,255,255,.14)}
.fsf-escuro .fsf-tabs:not(.fsf-tabs-v):not(.fsf-tabs-pilula):not(.fsf-tabs-nu) > .fsf-tab{color:#AEBBE0}
.fsf-escuro .fsf-tabs:not(.fsf-tabs-v):not(.fsf-tabs-pilula):not(.fsf-tabs-nu) > .fsf-tab:hover:not(.on){color:#fff;background:rgba(255,255,255,.07)}
.fsf-escuro .fsf-tabs:not(.fsf-tabs-v):not(.fsf-tabs-pilula):not(.fsf-tabs-nu) > .fsf-tab.on{color:#fff}

@media (max-width:600px){
  /* Escopado igual às regras acima: sem isso, este padding vazava para a
     barra lateral do admin e para o menu do vendedor no celular. */
  .fsf-tabs:not(.fsf-tabs-v):not(.fsf-tabs-pilula):not(.fsf-tabs-nu) > .fsf-tab{
    padding:11px 14px 13px;font-size:13px;gap:6px;
  }
}

/* ── Variante NUA (manual de treinamento) ──
   A página mantém 100% do visual próprio das abas dela; daqui leva só
   o marcador ouro que desliza. Usada quando a página já tem tipografia
   e tema próprios que não devem ser mexidos. */
.fsf-tabs-nu{border-bottom:none;overflow-x:auto}

/* ── Variante VERTICAL (barra lateral do admin) ──
   Aqui o item ativo já era um bloco ouro cheio. Em vez de somar uma
   barrinha (que ficaria escondida atrás dele), é o PRÓPRIO bloco ouro
   que vira o marcador e desliza de um item para o outro. O item ativo
   passa a ser transparente e o bloco aparece por trás dele. */
.fsf-tabs-v{
  position:relative;
  display:block;
  overflow-x:visible;
  border-bottom:none;
}
.fsf-tabs-v > .fsf-tab{
  position:relative;
  z-index:1;
  transition:color var(--fsf-mov);
}
.fsf-tabs-v > .fsf-tab.on{
  background:transparent;
}
.fsf-tabs-v > .fsf-tabs-marca{
  top:0; bottom:auto;
  height:0;
  border-radius:var(--fsf-r);
  z-index:0;
  transition:transform var(--fsf-mov), width var(--fsf-mov), height var(--fsf-mov);
}
.fsf-tabs-v > .fsf-tabs-marca.pronta{
  transition:transform var(--fsf-mov), width var(--fsf-mov), height var(--fsf-mov), opacity .1s;
}
/* Sem bico de telhado nesta variante: o bloco cheio já é a marca. */
.fsf-tabs-v > .fsf-tabs-marca::after{display:none}

/* ── Variante PÍLULA (menu do vendedor) ──
   Mesma ideia da lateral: a pílula azul que marca a seção ativa passa a
   ser o marcador e desliza entre os botões. O vendedor continua vendo
   exatamente a pílula azul que já conhece — só que agora ela se move. */
/* overflow:visible porque este menu quebra em duas linhas no celular
   (flex-wrap:wrap) — com overflow escondido a segunda linha era cortada.
   O marcador em modo bloco usa offsetTop, então acompanha a quebra. */
.fsf-tabs-pilula{border-bottom:none;overflow:visible}
.fsf-tabs-pilula > .fsf-tab{
  position:relative;
  z-index:1;
  transition:color var(--fsf-mov);
}
.fsf-tabs-pilula > .fsf-tab.on{
  background:transparent;
}
.fsf-tabs-pilula > .fsf-tabs-marca{
  top:0; bottom:auto;
  height:0;
  border-radius:10px;  /* mesmo raio que .menu-vend-btn ja usava */
  z-index:0;
  background:linear-gradient(135deg,var(--fsf-navy-800),var(--fsf-navy-600));
  transition:transform var(--fsf-mov), width var(--fsf-mov), height var(--fsf-mov);
}
.fsf-tabs-pilula > .fsf-tabs-marca.pronta{
  transition:transform var(--fsf-mov), width var(--fsf-mov), height var(--fsf-mov), opacity .1s;
}
.fsf-tabs-pilula > .fsf-tabs-marca::after{display:none}

/* ═══════════════════════════════════════════════════════════════
   TROCA DE PAINEL — a transição que acompanha a aba
   ═══════════════════════════════════════════════════════════════ */
@keyframes fsf-entra{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}
.fsf-painel-entra{animation:fsf-entra var(--fsf-mov)}