/* ===========================================================================
   VISUAL.CSS — a fonte única do visual do sistema.

   Mesma ideia do barras.css: um arquivo só, carregado por todas as telas, para
   que mudar o visual seja mexer em UM lugar e não em trinta.

   COMO CARREGAR (importa a ordem):

       <style> ...o estilo próprio da tela... </style>
       <link rel="stylesheet" href="/visual.css">

   O link vem DEPOIS do <style> de propósito. Assim este arquivo ganha das
   regras antigas da tela sem precisar apagá-las uma a uma -- e, se um dia for
   preciso voltar atrás, basta remover o link.
   Quando uma tela precisar de exceção (a Carteira, por exemplo, mantém verde e
   vermelho porque ali a cor é a informação), ela põe um segundo <style> depois
   do link.

   O QUE É: formato aprovado pela Vanessa em 04/08/2026 a partir da referência
   `Sistemacores.jpeg` -- fundo com brilho frio, superfícies de vidro
   translúcido, cantos arredondados e UM amarelo como cor da interação.
   =========================================================================== */

:root{
  /* ---- superfícies e texto ---- */
  --bg:#0F1116;
  --surface:#1E1E1E; --surface2:#242424; --surface3:#2E2E2E;
  --sup1:#1E1E1E; --sup2:#242424; --sup3:#2E2E2E;      /* nomes usados em Integrações */
  --border:rgba(255,255,255,0.08); --border-strong:rgba(255,255,255,0.16);
  --border2:rgba(255,255,255,0.10);
  --text:#FFFFFF; --txt:#FFFFFF;
  --text-muted:#9A9AA8; --mut:#9A9AA8; --text-dim:#6E7080;

  /* ---- o amarelo, sob TODOS os nomes que as telas usam ----
     As telas foram copiadas umas das outras ao longo do tempo e cada uma
     batizou a cor de destaque de um jeito. Redefinir todos aqui recolore a
     maior parte de cada tela sem precisar tocar nela. */
  --accent:#FCED2F; --acc:#FCED2F; --brand:#FCED2F; --azul:#FCED2F;
  --acc-2:#FCED2F; --btn-gold:#FCED2F; --btn-gold-hover:#E8D920;
  --accent-dim:rgba(252,237,47,0.14); --acc-dim:rgba(252,237,47,0.16);
  --acc-glow:rgba(252,237,47,0.26); --acc-d:#D9CB1E;
  /* Texto POR CIMA do amarelo. Branco nele fica ilegível. */
  --sobre-accent:#1A1A1A; --sobre-acc:#1A1A1A; --btn-gold-text:#1A1A1A;

  /* ---- cores que informam ---- */
  --green:#7FBF9B; --verde:#7FBF9B; --green-bg:rgba(127,191,155,0.16);
  --red:#E08585;   --verm:#E08585;  --red-bg:rgba(224,133,133,0.16);
  --amber:#E0C060; --slate:#9A9AA8;

  /* ---- formato ---- */
  --glass:rgba(255,255,255,0.05);
  --glass-hi:rgba(255,255,255,0.085);
  --linha:rgba(255,255,255,0.10);
  --radius:16px; --r-card:20px;
  --shadow:0 10px 30px rgba(0,0,0,0.28);
  /* Fundo do cabeçalho de tabela. OPACO de propósito: ele fica grudado no topo
     enquanto a lista rola, e translúcido deixaria as linhas passarem por baixo. */
  --th-bg:rgba(26,27,32,0.94);
}

/* ---- fundo: brilho frio e discreto, fixo ao rolar ----------------------- */
body{
  background-color:var(--bg);
  background-image:
    radial-gradient(1000px 680px at 8% -8%, rgba(120,132,168,0.34), transparent 60%),
    radial-gradient(820px 560px at 98% 4%, rgba(86,94,122,0.30), transparent 60%),
    radial-gradient(1300px 900px at 55% 116%, rgba(62,68,88,0.34), transparent 64%);
  background-attachment:fixed;
  background-repeat:no-repeat;
  color:var(--text);
  padding:24px;
}

/* A moldura de vidro que segura a tela. É por ela que o brilho do fundo
   atravessa -- sem translucidez, "vidro" vira só um retângulo escuro. */
.shell{
  background:linear-gradient(180deg, rgba(34,36,44,0.50), rgba(15,16,20,0.70));
  border:1px solid rgba(255,255,255,0.11);
  border-radius:30px;
  box-shadow:0 34px 90px rgba(0,0,0,0.58), inset 0 1px 0 rgba(255,255,255,0.09);
  padding-bottom:12px;
  overflow:visible;
}

.header{
  background:linear-gradient(180deg, rgba(24,25,31,0.84), rgba(24,25,31,0.45));
  -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px);
  border-bottom:1px solid var(--linha);
  border-radius:30px 30px 0 0;
  padding:20px 24px 16px;
}
.header h1{ font-size:20px; font-weight:600; letter-spacing:-0.02em; }
.ola{ font-size:12px; font-weight:500; color:rgba(255,255,255,0.55); margin-bottom:5px; }

/* ---- botões ------------------------------------------------------------- */
/* Esta folha manda na APARÊNCIA, não no TAMANHO. Nada de padding nem
   font-size aqui: cada tela tem botão compacto dentro de tabela, botão grande
   no cabeçalho, e forçar uma medida só esticava as linhas da lista. */
.btn{
  background:var(--glass); border:1px solid var(--linha); border-radius:99px;
  color:var(--text);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.btn:hover{ background:var(--glass-hi); }
.btn-accent, .btn.prim, button.prim{
  background:var(--accent); color:var(--sobre-accent);
  border-color:transparent; font-weight:600;
  box-shadow:0 6px 18px rgba(0,0,0,0.35);
}
.btn-accent:hover, .btn.prim:hover, button.prim:hover{ background:var(--btn-gold-hover); }

/* Selo do cabeçalho: o quadradinho amarelo com um ícone dentro. O branco do
   ícone vem escrito no PRÓPRIO SVG (stroke="#fff"), o que dava ícone branco
   sobre amarelo em 20 telas. Regra de CSS vence atributo de SVG, então esta
   linha escurece todos de uma vez, sem precisar editar arquivo por arquivo. */
.logo-mark svg, .brand .mark svg{ stroke:var(--sobre-accent); }

/* ---- filtros em cápsula -------------------------------------------------- */
.bar{
  display:inline-flex; align-items:center; gap:4px;
  margin:14px 0 0 24px; padding:5px 5px 5px 14px;
  border-radius:99px; background:var(--glass); border:1px solid var(--linha);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.bar .lbl{ margin-right:6px; color:rgba(255,255,255,0.45); }
.pill{
  border:1px solid transparent; background:transparent; border-radius:99px;
  padding:7px 15px; font-size:11.5px; font-weight:600;
  color:rgba(255,255,255,0.68); cursor:pointer; font-family:inherit;
}
.pill:hover{ background:var(--glass-hi); border-color:transparent; color:#fff; }
.pill.active{
  background:var(--accent); color:var(--sobre-accent);
  border-color:transparent; box-shadow:0 4px 14px rgba(0,0,0,0.30);
}

/* ---- cards -------------------------------------------------------------- */
.card{
  background:var(--glass); border:1px solid var(--linha); border-radius:var(--r-card);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,0.05);
}
.card::after{ background:linear-gradient(90deg,transparent,rgba(255,255,255,0.16),transparent); }
/* A MÃOZINHA, e não só o hover (29/08/2026, relato dela sobre o painel da R3:
   "realmente eles estão clicáveis, mas o mouse não muda quando passa por eles,
   então parece que eles não são clicáveis").

   Cada tela definia o cursor por conta própria, com nome de classe diferente
   (clic / click / clickable) -- então quem esquecia ficava com card clicável
   de aparência morta. Aqui as três valem de uma vez, para toda tela: o padrão
   passa a vir de graça em vez de depender de alguém lembrar. Telas que já
   declaram cursor:pointer continuam iguais. */
.card.clic, .card.click, .card.clickable{ cursor:pointer; }
.card.clic:hover, .card.click:hover, .card.clickable:hover{
  transform:translateY(-3px); background:var(--glass-hi);
  border-color:rgba(255,255,255,0.22);
}
.card.on, .card.active{ border-color:var(--accent) !important; background:var(--accent-dim); }

/* ---- campos ------------------------------------------------------------- */
input, select, textarea{
  background:var(--glass); border:1px solid var(--linha); border-radius:10px;
  color:var(--text); font-family:inherit;
  /* Avisa o navegador para desenhar as partes que são DELE (a lista do select,
     o calendário do campo de data, o seletor de hora) no tema escuro. */
  color-scheme:dark;
}
input:focus, select:focus, textarea:focus{ border-color:var(--accent); outline:none; }

/* A lista que abre ao clicar num <select> quem desenha é o navegador, não esta
   folha -- e ele parte do fundo do próprio campo. Como o campo é de VIDRO
   (branco com 5% de opacidade), a lista abria BRANCA e o texto branco sumia
   dentro dela. Por isso as opções precisam de fundo OPACO, escrito aqui.
   Vale para todo <select> do sistema, inclusive o padrão CAMPOS_LISTA
   (dropdown + "➕ Outra (digitar)"). */
select option, select optgroup{
  background-color:#1E1E1E;
  color:#FFFFFF;
}
select option:disabled{ color:rgba(255,255,255,0.40); }
input[type=checkbox], input[type=radio]{ accent-color:var(--accent); }
label{ color:var(--text-muted); }

/* ---- tabelas ------------------------------------------------------------ */
.table-wrap{
  background:var(--glass); border:1px solid var(--linha); border-radius:var(--r-card);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:var(--shadow);
}
thead th{ background:var(--th-bg); color:rgba(255,255,255,0.55); }
tbody td, th, td{ border-bottom-color:rgba(255,255,255,0.055); }
tbody tr:hover td{ background:rgba(255,255,255,0.045); }

/* ---- avisos e mensagens -------------------------------------------------- */
/* `.hint` NÃO entra aqui: é legenda solta debaixo de um título, não caixa.
   Dar fundo e borda a ela transformava uma frase em um bloco atravessado. */
.aviso, .neutro{
  border-radius:16px; background:var(--glass); border:1px solid var(--linha);
  color:rgba(255,255,255,0.62);
}
.hint{ color:rgba(255,255,255,0.45); }
.msg{ border-radius:12px; }
.msg.ok{ background:var(--green-bg); color:var(--green); }
.msg.err, .erro{
  background:rgba(224,133,133,0.10); border:1px solid rgba(224,133,133,0.28);
  color:var(--red); border-radius:12px;
}

/* .aviso-dup NÃO entra aqui de propósito: o vermelho pulsante do "pedido
   duplicado" é alerta de verdade e tem que continuar gritando. Mexer nele
   tiraria justamente o que ele tem de útil. */

/* ---- janelinhas (modal) -------------------------------------------------- */
.modal{
  background:linear-gradient(180deg, rgba(36,38,47,0.96), rgba(18,19,24,0.98));
  border:1px solid var(--linha); border-radius:24px;
  -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px);
  box-shadow:0 30px 70px rgba(0,0,0,0.6);
}
.modal-bg{ -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }

/* ---- barra flutuante ------------------------------------------------------
   Leva direto para cada bloco da tela. Fica por cima do conteúdo de propósito;
   o padding-bottom do body é que garante que ela não tape a última linha.
   Mora aqui para que toda tela que receber o formato já ganhe a barra pronta. */
.dock{
  position:fixed; left:50%; transform:translateX(-50%); bottom:16px; z-index:60;
  display:flex; gap:3px; padding:6px; border-radius:99px;
  background:rgba(22,23,28,0.74);
  -webkit-backdrop-filter:blur(26px) saturate(140%); backdrop-filter:blur(26px) saturate(140%);
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 16px 40px rgba(0,0,0,0.55);
}
.dock button{
  display:inline-flex; align-items:center; gap:7px; border:none; background:transparent;
  color:rgba(255,255,255,0.72); font:600 12px/1 'Inter',system-ui,sans-serif;
  padding:10px 15px; border-radius:99px; cursor:pointer;
}
.dock button:hover{ background:rgba(255,255,255,0.10); color:#fff; }
.dock svg{ width:15px; height:15px; stroke:currentColor; fill:none;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
/* Sem esta folga, o destino do "rolar até" para embaixo do cabeçalho colado. */
.section-divider, .section-label{ scroll-margin-top:104px; }
/* Espaço para a barra não tapar o fim da página. */
body{ padding-bottom:92px; }

/* ---- botão "Como ler esta tela" ------------------------------------------
   Balança só até ser aberto uma vez; depois fica quieto. Balanço permanente
   cansa e rouba o sentido do movimento, reservado para aviso de verdade. */
.ajuda{ gap:7px; }
.ajuda svg{ width:14px; height:14px; stroke:currentColor; fill:none;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.ajuda.chama{ animation:chama 3.2s ease-in-out infinite; }
@keyframes chama{
  0%, 78%, 100% { transform:none; }
  82% { transform:rotate(-4deg) scale(1.04); }
  87% { transform:rotate(4deg) scale(1.04); }
  92% { transform:rotate(-2deg); }
}

@media (prefers-reduced-motion: reduce){
  .ajuda.chama{ animation:none; }
  .card.clic:hover, .card.clickable:hover{ transform:none; }
}

@media (max-width:720px){
  body{ padding:8px; }
  .shell{ border-radius:20px; }
  .header{ border-radius:20px 20px 0 0; padding:16px 16px 14px; }
  .header h1{ font-size:17px; }
  .bar{ margin-left:14px; }
}

/* ==========================================================================
   TELA APERTADA — o conteúdo encolhe junto (11/08/2026, pedido dela)

   O PROBLEMA: as telas foram escritas com tamanhos fixos em pixels (fonte 12px
   na tabela, 20px de respiro nas laterais, card com 190px de largura mínima).
   Quando o monitor é menor, a tela encolhe e o conteúdo NÃO -- ele passa a
   ocupar tudo e some para fora da borda. Em notebook com Windows piora: a
   escala do sistema costuma vir em 125% ou 150%, e aí tudo já nasce até 50%
   maior. Não é a tela ser pequena; é o conteúdo não saber encolher.

   POR QUE AQUI E NÃO EM CADA PAINEL: são 39 telas, copiadas umas das outras ao
   longo do tempo. Ajustar uma por uma garantiria que ficassem diferentes entre
   si -- e esta folha existe justamente para ser o lugar único do visual, como
   o barras.css é o das barras de rolagem. Mexer aqui vale para todas.

   COMO FUNCIONA: dois degraus. Nada muda no monitor grande.
   Os nomes de classe (.card, .cards, .bar, table, .section-label...) são os
   mesmos em todas as telas porque foram copiados umas das outras -- o que era
   um defeito passa a ser o que torna este ajuste possível.
   Esta folha carrega DEPOIS do <style> de cada tela, então ganha dela sem
   precisar editar tela nenhuma.
   ========================================================================== */

/* --- primeiro degrau: notebook comum (1366/1440), ou tela grande com escala
       em 125%. Aperta pouco -- o suficiente para caber sem parecer mudado. --- */
@media (min-width:901px) and (max-width:1500px){
  .cards{ grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:8px; padding:6px 14px; }
  .card{ padding:11px 13px; }
  .card .cv{ font-size:17px; }
  .card .cs{ font-size:10px; }

  table{ font-size:11.5px; }
  thead th{ padding:7px 9px; }
  tbody td{ padding:7px 9px; }

  .section-label{ padding:11px 14px 4px; }
  .table-section{ padding:0 14px 6px; }
  .bar{ padding:8px 14px 2px; }
  .aviso{ margin:8px 14px 0; padding:8px 11px; font-size:11px; }
  .header{ padding:10px 14px 9px; }
}

/* --- segundo degrau: tela realmente apertada (1280 para baixo), ou notebook
       com escala em 150%. Aqui vale apertar de verdade: melhor a informação
       menor e inteira do que grande e cortada. --- */
@media (min-width:901px) and (max-width:1280px){
  .cards{ grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:7px; padding:5px 10px; }
  .card{ padding:9px 11px; border-radius:13px; }
  .card .cl{ font-size:9px; }
  .card .cv{ font-size:15.5px; }
  .card .cs{ font-size:9.5px; }

  table{ font-size:11px; }
  thead th{ padding:6px 7px; font-size:9px; }
  tbody td{ padding:6px 7px; }

  .section-label{ padding:9px 10px 3px; font-size:9px; }
  .table-section{ padding:0 10px 5px; }
  .bar{ padding:7px 10px 2px; }
  .pill{ padding:3px 9px; font-size:10.5px; }
  .aviso{ margin:7px 10px 0; padding:7px 10px; font-size:10.5px; }
  .header{ padding:9px 10px 8px; }
  .header h1{ font-size:13px; }
}

/* O MENU LATERAL encolhe junto, mas a regra dele NÃO mora aqui: o hub.html tem
   folha própria e não carrega esta (ele só carrega barras.css). Escrever
   ".sidebar" aqui seria código que não faz nada e ninguém descobriria. A regra
   está no <style> do próprio hub.html, ao lado do menu que fecha. */