/* app/base.css — regras visuais compartilhadas por todas as telas.
   Carregado no <head>, ANTES do <style> de cada tela, para a tela poder
   sobrescrever o que quiser. */

/* ---------- <select> com o mesmo canto do <input> ----------
   No macOS o <select> desenha com a aparência NATIVA do sistema e ignora o
   border-radius pedido: o navegador informa "9px" no computed style, mas a
   tela mostra o canto do sistema, diferente do input ao lado. Desligar a
   aparência iguala os dois — e aí a seta tem de vir por nossa conta, como
   um chevron em SVG no background.

   O seletor é `html select` (e não `select`) de propósito: cada tela declara
   o seu `input,select{padding:...}` no <style> de baixo, e o atalho `padding`
   zeraria o padding-right que abre espaço para a seta — o texto passaria por
   baixo dela. Com a especificidade maior, esta regra vence sem depender da
   ordem de carregamento. */
html select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235b6b82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 11px 7px;
}

/* Select desabilitado: a seta some, senão parece clicável. */
html select:disabled { background-image: none; }

/* Select dentro de célula estreita (tabelas de edição): seta menor e mais
   colada, senão ela come o texto da opção. */
html td select { padding-right: 24px; background-position: right 7px center; background-size: 9px 6px; }

/* ⚠️ Regra de tela com classe (ex.: `.itens td select{padding:6px 9px}`) tem
   especificidade MAIOR que as daqui e zera o espaço da seta — o texto da
   opção passa por baixo dela. Quem declarar padding em select numa tela
   precisa reabrir o `padding-right` junto. */

/* ---------- Faixa de subabas ----------
   Criada pelo auth.js quando a tela aberta pertence a um grupo (Produção,
   Cadastros). Fica LOGO ABAIXO da barra do topo, e não dentro do conteúdo,
   porque é navegação e não parte da tela: assim ocupa o mesmo lugar em todas
   as telas do grupo, e o olho não precisa procurá-la. */
/* ---------- O menu antes de o perfil chegar ----------
   O `auth.js` desenha a barra INTEIRA no carregamento e só a reduz quando o
   servidor responde quem é a pessoa. Para um admin isso é um ajuste pequeno;
   para um representante, seis abas viram duas — e ele via o menu de outra
   pessoa piscar antes do seu.

   `visibility:hidden` e não `display:none` de propósito: o espaço continua
   reservado, então quando as abas aparecem nada abaixo delas se desloca. O
   `aplicarMenu` tira esta classe assim que sabe quem está do outro lado, e
   todas as 12 telas que têm menu o chamam. */
.nav.resolvendo, .subnav.resolvendo { visibility: hidden; }

.subnav {
  background: #fff;
  border-bottom: 1px solid var(--line, #e4e9f2);
  padding: 0 24px;
  display: flex;
  gap: 4px;
  overflow-x: auto;                 /* muitas subabas em tela estreita */
  -webkit-overflow-scrolling: touch;
}
.subnav a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; margin-bottom: -1px;
  color: #5b6b82; text-decoration: none; font-size: 13px; font-weight: 600;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.subnav a:hover { color: #0f1b2d; }
/* A atual é SUBLINHADA, e não pintada como as abas do topo: são dois níveis,
   e repetir o mesmo destaque faria parecer que há duas telas abertas. */
.subnav a.on { color: #2f44a8; border-bottom-color: #3b5bdb; }
/* O manual da tela: encostado à DIREITA (o margin-left:auto empurra), e
   desenhado como link discreto, não como aba — ele não é um lugar do sistema,
   é material de leitura que abre noutra aba. */
.subnav a.subnav-manual {
  margin-left: auto; color: #2f44a8; font-weight: 700;
}
.subnav a.subnav-manual:hover { color: #1b2d7a; text-decoration: underline; }
.subnav-badge {
  min-width: 18px; padding: 0 5px; background: var(--warn, #e8590c); color: #fff;
  border-radius: 999px; font-size: 11px; line-height: 18px; text-align: center; font-weight: 700;
}

/* ---------- O "?" QUE GUARDA A EXPLICAÇÃO (Fábio, 27/08/2026) ----------

   "essas explicações estão poluindo demais a tela, podemos pensar em colocar
    um ? ao lado e ao clicar o app abre a explicação"

   Ele está certo, e o problema é de altura: os parágrafos que explicam POR QUE
   uma coisa é do jeito que é são longos de propósito — a faixa de grupos existe
   porque o cadastro é dividido com a Venti, e isso não cabe em seis palavras.
   Mas quem já sabe lê aquilo todo dia sem precisar, e o texto empurra para
   baixo justamente os botões e as tabelas que são o trabalho da tela.

   `<details>` e não JavaScript: o navegador já sabe abrir e fechar, já responde
   ao teclado e ao leitor de tela, e uma explicação que dependesse de script
   sumiria se o script quebrasse — que é o oposto do que uma explicação deve
   fazer. Mesma escolha do painel de diagnóstico.

   ⚠️ O que entra aqui é EXPLICAÇÃO, não aviso. Aviso — "este número não
   desconta o estoque", "acima do combinado" — muda o que a pessoa vai fazer, e
   fechado não serve para nada. */
/* `display:contents` para o "?" poder morar DENTRO de uma fileira flex de
   botões e o texto, ao abrir, cair na linha DE BAIXO em vez de empurrar o
   próprio botão para uma linha sozinha. O `<details>` some do layout e seus
   dois filhos viram itens da fileira: o botão fica ao lado dos outros, e o
   corpo, com `flex-basis:100%`, quebra para a linha seguinte inteira.
   A abertura continua sendo do navegador — ela é do DOM, não do layout. */
.ajuda{display:contents}
/* Fora de uma fileira flex (numa célula de tabela, por exemplo) o
   `display:contents` não muda nada e o botão continua em linha. */
.ajuda>summary{
  list-style:none;cursor:pointer;user-select:none;
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:999px;
  border:1px solid var(--line,#e4e9f2);background:#fff;
  color:var(--muted,#5b6b82);font-size:12px;font-weight:800;line-height:1;
}
.ajuda>summary::-webkit-details-marker{display:none}
.ajuda>summary::after{content:"?"}
.ajuda>summary:hover{border-color:#b9c4f2;color:#2f44a8;background:var(--l1soft,#eef1fe)}
.ajuda[open]>summary{border-color:#b9c4f2;color:#2f44a8;background:var(--l1soft,#eef1fe)}
.ajuda[open]>summary::after{content:"×";font-size:14px}
/* O corpo sai do fluxo em linha e vira bloco — senão o parágrafo tentaria
   caber ao lado do botão de 20px. */
/* `order` alto para o texto ser SEMPRE o último item da fileira. Sem isso, o
   que vem depois do "?" no HTML — o "Atualizar" da direita, por exemplo — era
   empurrado para uma terceira linha assim que a explicação abria. */
.ajuda .corpo{display:block;margin-top:10px;flex-basis:100%;order:99}

/* ---------- Celular (≤760px) — camada compartilhada ----------
   Seletores com `html` na frente de propósito: o base.css carrega ANTES do
   <style> de cada tela, então regra daqui com a MESMA especificidade
   perderia para a da tela. Com `html .topbar` (0,1,1) esta camada vence
   o `.topbar{...}` (0,1,0) das telas sem depender da ordem. */

/* O botão do menu e o rodapé de usuário são criados pelo auth.js em todas
   as telas, mas só aparecem no celular. */
.navtoggle{display:none}
.nav-user{display:none}
/* O botão que abre as SUBABAS no celular (criado sempre, visível só lá). */
.subtoggle{display:none}

@media (max-width: 760px){
  html .topbar{flex-wrap:wrap;padding:10px 12px;gap:8px}
  html .topbar .mark{height:38px}
  /* O logo já identifica o app; sem o título, o botão do menu cabe na
     mesma linha mesmo com nome longo ("Clientes sem código Protheus" + contador). */
  html .topbar h1{display:none}
  /* Nome e "Sair" mudam para dentro do painel — na barra não cabem junto
     com o botão do menu. */
  html .topbar .right{display:none}

  html .navtoggle{display:flex;align-items:center;gap:8px;margin-left:auto;
    border:1px solid var(--line,#e4e9f2);background:#fff;border-radius:10px;
    padding:9px 12px;font-family:inherit;font-size:14px;font-weight:650;
    color:var(--ink,#0f1b2d);cursor:pointer}
  html .navtoggle .cur{max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* eco do contador de Pendências (o painel fechado esconderia o aviso) */
  html .navtoggle-badge{min-width:18px;padding:0 5px;background:var(--warn,#e8590c);color:#fff;
    border-radius:999px;font-size:11px;line-height:18px;text-align:center;font-weight:700}

  /* A faixa de abas vira PAINEL vertical, fechado por padrão. */
  html .nav{order:10;flex-basis:100%;margin:0;display:none;flex-direction:column;gap:2px;
    padding-top:8px;border-top:1px solid var(--line,#e4e9f2)}
  html .nav.aberto{display:flex}
  html .nav a{padding:12px;font-size:15px;border-radius:9px}

  html .nav-user{display:flex;align-items:center;gap:10px;margin-top:6px;padding:12px;
    border-top:1px dashed var(--line,#e4e9f2);font-size:13px;color:var(--muted,#5b6b82)}
  html .nav-user a{margin-left:auto;color:var(--muted,#5b6b82);font-weight:650;text-decoration:none}

  /* A FAIXA DE SUBABAS VIRA LISTA (Fábio, 25/08/2026): "hoje as abas se
     escondem". Ela rolava de lado, e rolagem lateral é esconderijo — quem não
     arrasta não descobre que a quarta aba existe. Vira o mesmo painel vertical
     do menu de grupos, aberto por um botão que já diz onde você está. */
  /* O BOTÃO PRECISA PARECER BOTÃO (Fábio, 27/08/2026): "aquela setinha à
     direita ficou muito pequena e o operador não consegue enxergar que tem
     essa opção".
     Ele era uma linha branca sem moldura, encostada na barra do topo, com um
     `▾` de 6×13px cinza-claro na ponta — e lia como TÍTULO da tela. Trocar o
     de tela é a coisa que o operador mais faz no celular, e estava escondida
     atrás de um enfeite.
     Agora fala a língua que o resto do app já usa para "aqui há escolha":
     moldura branca recolhida das bordas, igual ao "☰ Produção" do topo e às
     caixas de filtro da própria Programação. */
  html .subtoggle{display:flex;align-items:center;gap:10px;box-sizing:border-box;
    width:calc(100% - 24px);margin:10px 12px;
    background:#fff;border:1px solid var(--line,#e4e9f2);border-radius:10px;
    padding:10px 10px 10px 13px;font-family:inherit;font-size:14.5px;font-weight:650;
    color:var(--ink,#0f1b2d);cursor:pointer;text-align:left}
  html .subtoggle .cur{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* A pastilha da direita DIZ QUANTAS telas há atrás dela. É a parte que
     responde ao "não consegue enxergar que tem essa opção": seta sozinha
     informa que algo abre, número informa que há SEIS lugares ali dentro.
     E junta seta e texto num alvo de toque de verdade — a seta solta tinha
     6px de largura, menos de um sétimo do dedo. */
  html .subtoggle .abre{display:inline-flex;align-items:center;gap:6px;flex:none;
    background:var(--l1soft,#eef1fe);color:#2f44a8;border-radius:8px;
    padding:6px 10px;font-size:12.5px;font-weight:700;white-space:nowrap}
  html .subtoggle i{font-style:normal;font-size:12px;line-height:1;transition:.15s}
  html .subtoggle[aria-expanded="true"] i{transform:rotate(180deg)}
  /* Aberto, o botão fica azul: sem isso a lista aparece e nada indica de onde
     ela saiu. */
  html .subtoggle[aria-expanded="true"]{border-color:#b9c4f2}

  /* Alinhada com o botão: 12px de recuo dos dois lados, para a lista nascer
     debaixo dele e não deslocada. */
  html .subnav{display:none;flex-direction:column;gap:2px;padding:0 12px 12px;overflow:visible}
  html .subnav.aberta{display:flex}
  html .subnav a{padding:12px;font-size:15px;border-radius:9px;border-bottom:none}
  /* Aberta a lista, a atual é PINTADA e não sublinhada: sublinhado embaixo de
     um item de lista lê como divisória, não como "você está aqui". */
  html .subnav a.on{background:var(--l1soft,#eef1fe);color:#2f44a8}
  html .subnav a.subnav-manual{margin-left:0}

  html .wrap{padding:14px 12px 48px}
  /* iOS Safari dá ZOOM ao focar campo com fonte <16px — no celular todos
     os campos sobem para 16px. */
  html input, html select, html textarea{font-size:16px}
}

/* ---------- Busca em lista (combobox) — usado por cliente-busca.js ----------
   A lista é `position:fixed`, e não `absolute`: os cartões têm
   `overflow:hidden` por causa dos cantos arredondados, e uma lista absoluta
   nasceria cortada na primeira linha. Fixa, é posicionada por JS a partir do
   retângulo do campo — e reposicionada em scroll e resize, senão fica
   flutuando sozinha quando a página rola.

   Mora aqui, e não na tela, porque agora é de mais de uma: nasceu no pedido
   (10/08) e a tela de Preços passou a usar a mesma busca (11/08). */
.combo{position:relative}
.combo-pop{display:none;position:fixed;z-index:60;background:#fff;border:1px solid var(--line);
  border-radius:10px;box-shadow:0 10px 30px rgba(16,30,54,.18);overflow:auto;padding:5px}
.combo.aberto .combo-pop{display:block}
.combo-item{padding:8px 10px;border-radius:7px;font-size:13px;color:var(--ink);cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Um destaque só, para teclado e mouse: com dois (hover + ativo) a lista
   mostrava duas linhas acesas e nenhuma das duas parecia a escolhida. */
.combo-item.ativo{background:var(--l1soft);color:#2f44a8;font-weight:600}
.combo-item .cod{color:var(--muted);font-variant-numeric:tabular-nums}
.combo-item.ativo .cod{color:#2f44a8}
.combo-grupo{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);
  font-weight:700;padding:9px 10px 4px}
.combo-novo{color:var(--l1);font-weight:600}
.combo-nada{font-size:12px;color:var(--muted);padding:10px}
/* Campo com item escolhido lê como campo preenchido, não como busca vazia. */
.combo.escolhido input[type=text]{font-weight:600}
.combo input[type=text]{width:100%}
@media (max-width: 760px){
  .combo-pop{padding:6px}
  .combo input[type=text]{height:44px}
  .combo-item{font-size:15px;padding:12px 12px;white-space:normal}
  .combo-grupo{font-size:11px;padding:10px 12px 5px}
}