/* ==========================================================================
   AVIX Design System v5 — shell único, quatro temas
   ==========================================================================

   Por que só quatro temas
   -----------------------
   Existiam sete. Nenhum deles significava nada para quem usa: "Graphite" e
   "Neo Fiber" descreviam a paleta, não a escolha. As duas perguntas reais são
   *claro ou escuro* e *com ou sem relevo* — e é exatamente isso que sobrou:

       3D Claro · 3D Escuro · 2D Claro · 2D Escuro

   O que "3D" quer dizer aqui
   --------------------------
   Profundidade por CSS: gradientes em camada, sombra dupla, borda de luz no
   topo do cartão e ícones isométricos em SVG. **Não há WebGL, canvas 3D nem
   imagem pesada** — o AVIX roda em rede fechada e em máquina de campo, e um
   dashboard que engasga ao rolar não é sofisticado, é lento. O modo 2D remove
   relevo e gradiente e deixa apenas superfície, traço e tipografia; é o que
   deve ser usado em projetor, em tela ruim e por quem prefere sobriedade.

   Todos os tokens abaixo já eram consumidos pelas telas antigas (--bg,
   --surface, --border, --text, --brand...). Trocar o tema, portanto, repinta
   também o que não foi reescrito — que é o que torna esta migração possível
   sem refazer o sistema inteiro.
   ========================================================================== */

:root {
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SFMono-Regular", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;

  --rail-w: 116px;
  --rail-w-min: 74px;
  --top-h: 66px;
  --r-sm: 9px;
  --r: 13px;
  --r-lg: 18px;
  --r-xl: 24px;
  --dur: .16s;
}

/* --------------------------------------------------------------------------
   TEMA 1 — 3D Claro (padrão)
   -------------------------------------------------------------------------- */
body,
body.tema-3d-claro {
  --bg: #eef3fa;
  --bg-grad:
    radial-gradient(1200px 620px at 8% -12%, #dfeaff 0%, transparent 58%),
    radial-gradient(900px 520px at 102% -4%, #e6f0ff 0%, transparent 54%),
    linear-gradient(180deg, #f2f6fc 0%, #eaf0f8 100%);
  --surface: #ffffff;
  --surface-2: #f5f8fd;
  --surface-3: #eaf1fa;
  --surface-inset: #f7fafd;
  --rail-bg: linear-gradient(180deg, #ffffff 0%, #f4f8fd 100%);
  --top-bg: rgba(255, 255, 255, .82);
  --border: #dde6f2;
  --border-strong: #c5d4e8;
  --border-soft: #eaf0f7;
  --line: #e8eef6;
  --text: #12233d;
  --text-2: #42566f;
  --muted: #78899f;
  --brand: #1b5fd9;
  --brand-600: #144fbb;
  --brand-700: #0f4099;
  --brand-100: #dce8ff;
  --brand-50: #eff5ff;
  --accent: #f07d20;
  --ok: #0f8b57; --ok-bg: #e7f6ef; --ok-border: #b3e2cb;
  --warn: #b45309; --warn-bg: #fdf4e6; --warn-border: #f2d8ac;
  --danger: #c5292b; --danger-bg: #fdeded; --danger-border: #f3c3c3;
  --info-bg: #eaf2ff; --info-border: #c6dcfb;
  --ring: rgba(27, 95, 217, .2);
  --sh-xs: 0 1px 2px rgba(17, 35, 61, .05);
  --sh-sm: 0 2px 5px rgba(17, 35, 61, .07), 0 1px 2px rgba(17, 35, 61, .04);
  --sh: 0 10px 26px rgba(17, 35, 61, .09), 0 2px 6px rgba(17, 35, 61, .05);
  --sh-lg: 0 22px 52px rgba(17, 35, 61, .15), 0 4px 12px rgba(17, 35, 61, .07);
  --card-top-light: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,0));
  --relevo: 1;
  color-scheme: light;
}

/* --------------------------------------------------------------------------
   TEMA 2 — 3D Escuro
   -------------------------------------------------------------------------- */
body.tema-3d-escuro {
  --bg: #061024;
  --bg-grad:
    radial-gradient(1100px 620px at 6% -14%, #12305f 0%, transparent 58%),
    radial-gradient(1000px 560px at 100% -6%, #0d2a55 0%, transparent 55%),
    linear-gradient(180deg, #07142b 0%, #050d1c 100%);
  --surface: #0d1c34;
  --surface-2: #122543;
  --surface-3: #172d52;
  --surface-inset: #0a1729;
  --rail-bg: linear-gradient(180deg, #091a33 0%, #061224 100%);
  --top-bg: rgba(9, 22, 43, .78);
  --border: #1e3961;
  --border-strong: #2b4d7c;
  --border-soft: #16294a;
  --line: #1a3157;
  --text: #eaf3ff;
  --text-2: #b3c9e6;
  --muted: #8099bd;
  --brand: #3d90ff;
  --brand-600: #2f7ff2;
  --brand-700: #2469d3;
  --brand-100: #15305c;
  --brand-50: #112748;
  --accent: #ffa040;
  --ok: #35d69a; --ok-bg: #0c3a2b; --ok-border: #1b6a50;
  --warn: #fbc02d; --warn-bg: #3a2e0c; --warn-border: #6b5619;
  --danger: #ff7b7b; --danger-bg: #3c1618; --danger-border: #6e2a2c;
  --info-bg: #10294c; --info-border: #21426f;
  --ring: rgba(61, 144, 255, .32);
  --sh-xs: 0 1px 2px rgba(0, 0, 0, .5);
  --sh-sm: 0 2px 6px rgba(0, 0, 0, .5);
  --sh: 0 14px 34px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .4);
  --sh-lg: 0 26px 62px rgba(0, 0, 0, .62);
  --card-top-light: linear-gradient(180deg, rgba(120,170,255,.16), rgba(120,170,255,0));
  --relevo: 1;
  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   TEMA 3 — 2D Claro
   -------------------------------------------------------------------------- */
body.tema-2d-claro {
  --bg: #f6f8fb;
  --bg-grad: none;
  --surface: #ffffff;
  --surface-2: #f4f7fa;
  --surface-3: #eef2f7;
  --surface-inset: #fbfcfe;
  --rail-bg: #ffffff;
  --top-bg: #ffffff;
  --border: #d9e0ea;
  --border-strong: #c2ccda;
  --border-soft: #e8edf3;
  --line: #e6ebf1;
  --text: #16202e;
  --text-2: #45536a;
  --muted: #76839a;
  --brand: #1558c6;
  --brand-600: #114aa8;
  --brand-700: #0e3d8c;
  --brand-100: #dbe7fb;
  --brand-50: #f0f5fe;
  --accent: #cf6a12;
  --ok: #0b7a4c; --ok-bg: #eaf6f0; --ok-border: #c3e2d3;
  --warn: #9a4a09; --warn-bg: #fdf5ea; --warn-border: #ecd8b6;
  --danger: #b52426; --danger-bg: #fdefef; --danger-border: #f0c9c9;
  --info-bg: #eef4fd; --info-border: #cfe0f7;
  --ring: rgba(21, 88, 198, .18);
  --sh-xs: none;
  --sh-sm: none;
  --sh: none;
  --sh-lg: 0 8px 24px rgba(20, 32, 48, .1);
  --card-top-light: none;
  --relevo: 0;
  color-scheme: light;
}

/* --------------------------------------------------------------------------
   TEMA 4 — 2D Escuro
   -------------------------------------------------------------------------- */
body.tema-2d-escuro {
  --bg: #12161c;
  --bg-grad: none;
  --surface: #1a1f27;
  --surface-2: #20262f;
  --surface-3: #262d38;
  --surface-inset: #161b22;
  --rail-bg: #171c23;
  --top-bg: #171c23;
  --border: #2c343f;
  --border-strong: #3a4451;
  --border-soft: #232a34;
  --line: #272e39;
  --text: #e8edf4;
  --text-2: #b0bcca;
  --muted: #8592a3;
  --brand: #5b9bff;
  --brand-600: #4a8bf2;
  --brand-700: #3c78d8;
  --brand-100: #1e3050;
  --brand-50: #1a2740;
  --accent: #f0a04a;
  --ok: #40c98a; --ok-bg: #16302680; --ok-border: #2c5e46;
  --warn: #e5b23c; --warn-bg: #322a12; --warn-border: #5c4d20;
  --danger: #f07070; --danger-bg: #331b1b; --danger-border: #5e3030;
  --info-bg: #1b2740; --info-border: #2f4266;
  --ring: rgba(91, 155, 255, .28);
  --sh-xs: none;
  --sh-sm: none;
  --sh: none;
  --sh-lg: 0 10px 28px rgba(0, 0, 0, .5);
  --card-top-light: none;
  --relevo: 0;
  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  background-image: var(--bg-grad);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); }

::selection { background: var(--brand-100); color: var(--text); }

/* Rolagem discreta e consistente nos quatro temas. */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px;
  border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* --------------------------------------------------------------------------
   Shell: rail de módulos + topo + conteúdo
   -------------------------------------------------------------------------- */
.avix-app { display: flex; min-height: 100vh; align-items: flex-start; }

/* `min-width: 0` é o que impede o conteúdo de escapar por baixo do menu.
   Sem ele, um item flex NÃO encolhe abaixo do tamanho natural do conteúdo: uma
   tabela larga (Fornecedores tem 9 colunas) empurra a coluna de conteúdo para
   além da linha, e o excesso sai para a ESQUERDA, por baixo da barra lateral.
   Era isso que aparecia como "o layout não está centralizado". */
.avix-conteudo { min-width: 0; flex: 1 1 auto; }
.avix-largura { min-width: 0; }
/* Tabela larga rola dentro do próprio cartão, não empurrando a página. */
.avix-largura .rolar, .avix-largura .tabela-larga { overflow-x: auto; }

.avix-rail {
  width: var(--rail-w);
  flex: 0 0 var(--rail-w);
  background: var(--rail-bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 14px 10px 12px;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  z-index: 40;
}
/* Logo: um só, e visível nos quatro temas.
   Antes apareciam a marca e a palavra "AVIX" lado a lado, ambas pequenas — o
   logo enviado pelo cliente ficava do tamanho de um ícone. Agora a palavra só
   entra quando não há logo carregado, e no tema escuro o filtro garante que
   uma marca escura não se perca no fundo. */
.avix-rail-marca {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 8px 4px 18px; text-decoration: none; color: var(--text);
  min-height: 52px;
}
.avix-rail-marca img {
  max-height: 42px; max-width: 92px; width: auto; height: auto; object-fit: contain;
  filter: var(--logo-filtro, none);
  transition: filter var(--dur);
}
.avix-rail-marca b {
  font-size: 15px; letter-spacing: .16em; font-weight: 800; line-height: 1;
}
/* Com logo carregado, a palavra some: duas marcas na mesma barra é ruído. */
.avix-rail-marca.com-logo b { display: none; }

body.tema-3d-escuro, body.tema-2d-escuro { --logo-filtro: brightness(0) invert(1) opacity(.94); }
body.logo-original { --logo-filtro: none; }
body.logo-branca { --logo-filtro: brightness(0) invert(1); }

.avix-rail-nav { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; flex: 1; min-height: 0; scrollbar-gutter: stable; overscroll-behavior: contain; }

.avix-rail a.avix-item {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 11px 6px; border-radius: var(--r);
  color: var(--text-2); text-decoration: none;
  font-size: 11px; font-weight: 600; text-align: center; line-height: 1.25;
  border: 1px solid transparent;
  transition: background var(--dur), color var(--dur), transform var(--dur);
}
.avix-rail a.avix-item svg { width: 21px; height: 21px; flex: none; }
.avix-rail a.avix-item span { display: block; width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.avix-rail a.avix-item:hover { background: var(--surface-2); color: var(--text); }
.avix-rail a.avix-item.manutencao { opacity: .55; }
.avix-rail a.avix-item.manutencao::after {
  content: 'manutenção'; font-size: 8.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--warn); background: var(--warn-bg); border-radius: 999px; padding: 1px 6px;
}
.avix-rail a.avix-item.on {
  background: var(--brand-50); color: var(--brand); border-color: var(--brand-100);
  box-shadow: calc(var(--relevo) * 0px) calc(var(--relevo) * 6px) calc(var(--relevo) * 16px) rgba(27, 95, 217, calc(var(--relevo) * .16));
}
.avix-rail a.avix-item.on svg { filter: drop-shadow(0 2px 4px rgba(27, 95, 217, calc(var(--relevo) * .35))); }

.avix-rail-pe { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border-soft); }

.avix-perfil { display: flex; align-items: center; gap: 8px; padding: 8px 6px; }
.avix-perfil .av {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 32px;
  background: linear-gradient(140deg, var(--brand), var(--brand-700));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
}
.avix-perfil-txt { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.avix-perfil .nm { display: block; font-size: 11.5px; font-weight: 700; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.avix-perfil .pp { display: block; font-size: 10px; color: var(--muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

.avix-conteudo { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.avix-top {
  position: sticky;
  height: var(--top-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px;
  background: var(--top-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 30;
}
.avix-voltar {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-2); border-radius: 999px; padding: 7px 14px 7px 10px;
  font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit;
  text-decoration: none; transition: all var(--dur);
}
.avix-voltar:hover { border-color: var(--brand); color: var(--brand); }
.avix-voltar svg { width: 15px; height: 15px; }

.avix-trilha { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted);
  min-width: 0; }
.avix-trilha a { color: var(--muted); text-decoration: none; }
.avix-trilha a:hover { color: var(--brand); }
.avix-trilha b { color: var(--text); font-weight: 700; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.avix-trilha .sep { opacity: .5; }

.avix-top-dir { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.avix-tema-op { display: block; }
.avix-tema-op span.avix-tema-amostra { display: block; }

.avix-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
  border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: inherit; text-decoration: none;
}
.avix-chip:hover { border-color: var(--brand-100); color: var(--brand); }
.avix-chip svg { width: 15px; height: 15px; }
.avix-chip.avix-idioma { font-weight: 700; letter-spacing: .04em; }
.avix-chip.avix-idioma.on { background: var(--brand); color: #fff; border-color: var(--brand); }

/* Ancorado ao topo, não à página: com `position:absolute` solto ele escapava
   pela direita em tela estreita e metade das opções ficava fora do vídeo. */
.avix-tema-menu {
  position: absolute; top: calc(100% - 8px); right: 16px; z-index: 60;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--sh-lg); padding: 10px; width: 260px; display: none;
}
.avix-tema-menu.on { display: block; }
@media (max-width: 520px) { .avix-tema-menu { width: calc(100vw - 32px); right: 8px; } }
.avix-tema-menu h4 { margin: 2px 6px 8px; font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); }
.avix-tema-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.avix-tema-op {
  border: 1px solid var(--border); border-radius: var(--r); padding: 9px;
  cursor: pointer; background: var(--surface-2); text-align: left; font-family: inherit;
  color: var(--text); font-size: 11.5px; font-weight: 600;
}
.avix-tema-op:hover { border-color: var(--brand); }
.avix-tema-op.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--ring); }
.avix-tema-amostra { height: 30px; border-radius: 7px; margin-bottom: 6px; border: 1px solid var(--border); }
.avix-tema-op em { display: block; font-style: normal; font-weight: 500; font-size: 10px;
  color: var(--muted); }

.avix-main { padding: 22px 24px 40px; flex: 1; }
.avix-largura { max-width: 1460px; margin: 0 auto; }

/* --------------------------------------------------------------------------
   Cabeçalho de página
   -------------------------------------------------------------------------- */
.avix-cab { margin-bottom: 18px; }
.avix-cab h1 { margin: 0 0 4px; font-size: 25px; font-weight: 800; letter-spacing: -.02em; }
.avix-cab p { margin: 0; color: var(--muted); font-size: 13.5px; max-width: 760px; }

/* --------------------------------------------------------------------------
   Cartões
   -------------------------------------------------------------------------- */
.avix-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--sh);
  transition: transform var(--dur), box-shadow var(--dur), border-color var(--dur);
}
.avix-card::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 40%;
  background: var(--card-top-light); border-radius: var(--r-lg) var(--r-lg) 0 0;
  pointer-events: none; opacity: calc(var(--relevo) * .9);
}
.avix-card > * { position: relative; }

.avix-modulos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 16px;
  align-items: stretch;
}
/* Cartões da mesma fileira com a mesma altura e o "Acessar" sempre na mesma
   linha de base: com altura livre, cada descrição empurrava o botão para uma
   altura diferente e a grade ficava desalinhada. */
.avix-modulo {
  display: flex; gap: 15px; align-items: flex-start;
  text-decoration: none; color: inherit; height: 100%;
}
.avix-modulo > span:last-child { display: flex; flex-direction: column; height: 100%; }
.avix-modulo p { flex: 1 1 auto; }
.avix-modulo .ir { align-self: flex-start; margin-top: auto; }
.avix-modulo:hover { transform: translateY(calc(var(--relevo) * -3px)); box-shadow: var(--sh-lg);
  border-color: var(--brand-100); }
.avix-modulo .ico { flex: 0 0 76px; height: 76px; display: flex; align-items: center;
  justify-content: center; }
.avix-modulo .ico svg { width: 74px; height: 74px;
  filter: drop-shadow(0 calc(var(--relevo) * 6px) calc(var(--relevo) * 10px) rgba(17, 35, 61, calc(var(--relevo) * .22))); }
.avix-modulo h3 { margin: 2px 0 5px; font-size: 16.5px; font-weight: 750; letter-spacing: -.01em; }
.avix-modulo p { margin: 0 0 10px; font-size: 12.8px; color: var(--muted); line-height: 1.55; }
.avix-modulo .ir {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700;
  color: var(--brand); background: var(--brand-50); border: 1px solid var(--brand-100);
  padding: 6px 13px; border-radius: 999px;
}
.avix-modulo:hover .ir { background: var(--brand); color: #fff; border-color: var(--brand); }

/* --------------------------------------------------------------------------
   Herói do início
   -------------------------------------------------------------------------- */
.avix-heroi {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl); padding: 30px 32px;
  margin-bottom: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--sh);
}
.avix-heroi h1 { margin: 0 0 8px; font-size: 32px; font-weight: 800; letter-spacing: -.025em; }
.avix-heroi h1 span { color: var(--brand); }
.avix-heroi p { margin: 0; color: var(--muted); font-size: 14px; max-width: 620px; }
.avix-heroi .arte { position: absolute; right: -10px; top: 50%; transform: translateY(-50%);
  width: 380px; opacity: calc(.35 + var(--relevo) * .55); pointer-events: none; }
@media (max-width: 1100px) { .avix-heroi .arte { display: none; } }

/* --------------------------------------------------------------------------
   Painel de números
   -------------------------------------------------------------------------- */
.avix-kpis-linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px; }
.avix-kpi-b { padding: 14px 16px; border-radius: var(--r); background: var(--surface-2);
  border: 1px solid var(--border-soft); }
.avix-kpi-b span { display: block; font-size: 11px; color: var(--muted); font-weight: 600; }
.avix-kpi-b b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.02em;
  margin-top: 2px; }

/* --------------------------------------------------------------------------
   Controles
   -------------------------------------------------------------------------- */
.avix-btn {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-600) 100%);
  color: #fff; border: 1px solid var(--brand-600);
  border-radius: var(--r-sm); padding: 10px 17px;
  font-size: 13.5px; font-weight: 650; font-family: inherit; cursor: pointer;
  box-shadow: var(--sh-sm);
  transition: filter var(--dur), transform var(--dur);
  /* Botão que na verdade é <a> vinha sublinhado: com cara de botão, o
     sublinhado do link é ruído. */
  text-decoration: none;
}
a.avix-btn, a.avix-btn:hover, a.avix-btn:visited { text-decoration: none; color: #fff; }
a.avix-btn.sec, a.avix-btn.sec:visited { color: var(--text-2); }
a.avix-btn.sec:hover { color: var(--brand); }
.avix-btn:hover { filter: brightness(1.07); }
.avix-btn:active { transform: translateY(1px); }
.avix-btn.sec { background: var(--surface-2); color: var(--text-2); border-color: var(--border); }
.avix-btn.sec:hover { border-color: var(--brand); color: var(--brand); filter: none; }
.avix-btn:disabled { opacity: .55; cursor: default; }

.avix-busca {
  display: flex; align-items: center; gap: 9px; flex: 1; max-width: 520px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 8px 14px;
}
.avix-busca input { border: 0; background: transparent; outline: none; flex: 1;
  font-family: inherit; font-size: 13px; color: var(--text); }
.avix-busca svg { width: 16px; height: 16px; color: var(--muted); }
.avix-busca kbd { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted);
  border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; }

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .avix-app { flex-direction: column; }
  .avix-rail {
    width: 100%; flex: none; height: auto; position: sticky; top: 0;
    flex-direction: row; align-items: center; gap: 6px; padding: 8px 10px;
    border-right: 0; border-bottom: 1px solid var(--border); overflow-x: auto;
  }
  .avix-rail-marca { padding: 0 12px 0 2px; flex-direction: row; min-height: 0; }
  .avix-rail-marca img { max-height: 30px; max-width: 84px; }
  .avix-rail-nav { flex-direction: row; gap: 4px; }
  .avix-rail a.avix-item { flex-direction: row; padding: 8px 12px; font-size: 12px;
    white-space: nowrap; }
  .avix-rail-pe { margin: 0 0 0 auto; padding: 0 0 0 10px; border: 0; border-left: 1px solid var(--border-soft); }
  .avix-perfil .nm, .avix-perfil .pp { display: none; }
  .avix-main { padding: 16px 14px 30px; }
  .avix-heroi { padding: 22px; }
  .avix-heroi h1 { font-size: 24px; }
}

/* Impressão: o shell some, o conteúdo fica. */
@media print {
  .avix-rail, .avix-top, .avix-tema-menu { display: none !important; }
  .avix-main { padding: 0; }
  body { background: #fff; }
}


/* --------------------------------------------------------------------------
   Seleção múltipla (avix-multi.js)
   O <select multiple> nativo abre uma lista de altura fixa que corta a última
   opção no meio e desalinha a linha inteira. Aqui ele fica escondido e o que
   aparece é um botão de uma linha com o resumo do que está marcado.
   -------------------------------------------------------------------------- */
.avix-multi { position: relative; width: 100%; }
.avix-multi-oculto { position: absolute !important; opacity: 0; pointer-events: none;
  width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.avix-multi-botao {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 38px;
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface-inset); color: var(--text); font: inherit; font-size: 13px;
  cursor: pointer; text-align: left; transition: border-color .15s ease, box-shadow .15s ease;
}
.avix-multi-botao:hover { border-color: var(--border-strong); }
.avix-multi-botao:focus-visible { outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .16); }
.avix-multi-rot { flex: 1; display: flex; gap: 5px; flex-wrap: nowrap; align-items: center;
  min-width: 0; overflow: hidden; }
.avix-multi-rot.vazio { color: var(--muted); }
.avix-multi-chip { display: inline-block; max-width: 210px; flex: 0 1 auto; padding: 2px 9px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border); font-size: 11.5px;
  font-weight: 600; color: var(--text-2); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.avix-multi-chip.mais { background: var(--brand); border-color: var(--brand); color: #fff;
  flex: none; }
.avix-multi-seta { color: var(--muted); font-size: 11px; flex: none; }

.avix-multi-painel {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; min-width: 100%;
  max-width: 380px; display: none; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--sh-lg); overflow: hidden;
}
.avix-multi-painel.on { display: flex; }
.avix-multi-busca { padding: 8px; border-bottom: 1px solid var(--border-soft, var(--border)); }
.avix-multi-busca input { width: 100%; padding: 7px 10px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface-inset); color: var(--text);
  font: inherit; font-size: 12.5px; }
/* A altura é múltipla da linha: a lista termina numa opção inteira, nunca com
   meia opção cortada — e o esmaecido embaixo diz que ainda há o que rolar. */
.avix-multi-lista { max-height: 279px; overflow-y: auto; overscroll-behavior: contain;
  padding: 4px;
  background:
    linear-gradient(var(--surface) 30%, rgba(0, 0, 0, 0)) top / 100% 20px no-repeat,
    linear-gradient(rgba(0, 0, 0, 0), var(--surface) 70%) bottom / 100% 24px no-repeat,
    var(--surface);
  background-attachment: local, local, scroll; }
.avix-multi-item { display: flex; align-items: center; gap: 9px; padding: 7px 9px;
  border-radius: 8px; font-size: 12.7px; color: var(--text); cursor: pointer;
  line-height: 1.35; }
.avix-multi-item:hover { background: var(--surface-2); }
.avix-multi-item[data-on="1"] { background: var(--surface-2); font-weight: 600; }
.avix-multi-item input { width: 15px; height: 15px; flex: none; margin: 0; accent-color: var(--brand); }
.avix-multi-nada { margin: 0; padding: 16px 12px; text-align: center; color: var(--muted);
  font-size: 12px; font-style: italic; }
.avix-multi-pe { display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-top: 1px solid var(--border-soft, var(--border)); background: var(--surface-2); }
.avix-multi-pe button { background: none; border: 0; padding: 0; font: inherit; font-size: 11.5px;
  font-weight: 700; color: var(--brand); cursor: pointer; }
.avix-multi-pe button:hover { text-decoration: underline; }
.avix-multi-conta { margin-left: auto; font-size: 11px; color: var(--muted); }

/* --------------------------------------------------------------------------
   Áreas roláveis
   Uma área que rola sem dizer que rola faz o leitor achar que a lista acabou.
   A sombra nas bordas aparece só quando existe conteúdo cortado — é o próprio
   background-attachment que cuida disso, sem JavaScript.
   -------------------------------------------------------------------------- */
.avix-rolar, .rolar, .tablewrap {
  background:
    linear-gradient(var(--surface) 30%, rgba(0, 0, 0, 0)) top / 100% 26px no-repeat,
    linear-gradient(rgba(0, 0, 0, 0), var(--surface) 70%) bottom / 100% 26px no-repeat,
    radial-gradient(farthest-side at 50% 0, rgba(15, 42, 80, .13), rgba(0, 0, 0, 0)) top / 100% 10px no-repeat,
    radial-gradient(farthest-side at 50% 100%, rgba(15, 42, 80, .13), rgba(0, 0, 0, 0)) bottom / 100% 10px no-repeat,
    var(--surface);
  background-attachment: local, local, scroll, scroll;
}
.avix-rolar { overflow: auto; overscroll-behavior: contain;
  border: 1px solid var(--border); border-radius: var(--r-lg); }
/* Cabeçalho que fica: rolar 40 linhas sem cabeçalho é ler número sem rótulo. */
.avix-rolar table thead th, .rolar table thead th, .tablewrap table thead th {
  position: sticky; top: 0; z-index: 2; background: var(--surface);
}


/* --------------------------------------------------------------------------
   Campo de arquivo (avix-arquivo.js)
   O widget nativo escreve "Choose File / No file chosen" no idioma do
   navegador — em um sistema em português isso aparecia em inglês.
   -------------------------------------------------------------------------- */
.avix-arq { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; min-width: 0; }
.avix-arq > .avix-arq-nome { flex: 1 1 auto; }
.avix-arq-nativo { position: absolute !important; opacity: 0; pointer-events: none;
  width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.avix-arq-botao {
  flex: none; padding: 8px 15px; border: 1px solid var(--border-strong);
  border-radius: 9px; background: var(--surface-2); color: var(--text);
  font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}
.avix-arq-botao:hover { background: var(--surface); border-color: var(--brand); color: var(--brand); }
.avix-arq-botao:focus-visible { outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .16); }
.avix-arq-nome { font-size: 12.3px; color: var(--text-2); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.avix-arq-nome.vazio { color: var(--muted); font-style: italic; }
.avix-arq-limpar { flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2);
  font-size: 13px; line-height: 1; cursor: pointer; padding: 0; }
.avix-arq-limpar:hover { border-color: var(--danger, #c0392b); color: var(--danger, #c0392b); }


/* Scroll reliability -------------------------------------------------------
   Viewport-level layout may use an internal scroller, but every flex/grid
   child that owns vertical content must be allowed to shrink and expose its
   scrollbar. These rules avoid content becoming unreachable at 100% zoom. */
html { min-height: 100%; }
body { min-height: 100%; overflow-x: hidden; }
.avix-app, .avix-conteudo, .avix-largura, main { min-width: 0; }
.avix-conteudo { min-height: 0; }
.rolar, .drawer, .gaveta, .avix-multi-lista { scrollbar-gutter: stable; overscroll-behavior: contain; }
@media (max-height: 720px) {
  .avix-rail { padding-top: 8px; padding-bottom: 8px; }
  .avix-rail-marca { padding-bottom: 10px; min-height: 42px; }
  .avix-rail a.avix-item { padding-top: 8px; padding-bottom: 8px; }
}