/* App geral (branch feature/silverio-app-geral) - Login e Menu no mesmo
   padrão visual do UpCodeBar (painel da marca com grade e brilho, topo
   marinho, cartões), com o kit de marca UpWMS (public/brand/LEIA-ME.txt):
   Azul Up #1647E0, Laranja Logística #FF7A1A, Marinho #0E1B33,
   Azul claro #9DB6FF, Névoa #F3F6FC, fonte Plus Jakarta Sans.
   Só Login e Menu - as telas do WMS seguem com o style.css delas. */
:root {
  --ag-azul: #1647E0;
  --ag-azul-escuro: #1038B5;
  --ag-azul-claro: #9DB6FF;
  --ag-laranja: #FF7A1A;
  --ag-marinho: #0E1B33;
  --ag-nevoa: #F3F6FC;
  --ag-fonte-titulo: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ag-fundo: var(--ag-nevoa);
  --ag-painel: #fff;
  --ag-borda: #E2E8F3;
  --ag-texto: #0E1B33;
  --ag-texto-2: #5B6B82;
  --ag-destaque: var(--ag-azul);
  --ag-sobre-destaque: #fff;
  --ag-campo: #fff;
  --ag-campo-borda: #CBD3DF;
  --ag-icone-bg: #E8EEFD;
}
:root[data-theme="dark"] {
  --ag-fundo: #081120;
  --ag-painel: #0F1B2D;
  --ag-borda: #1E2E48;
  --ag-texto: #E7ECF4;
  --ag-texto-2: #A6B2C8;
  --ag-destaque: var(--ag-azul-claro);
  --ag-sobre-destaque: #0E1B33;
  --ag-campo: #13223A;
  --ag-campo-borda: #2A3C5C;
  --ag-icone-bg: rgba(157, 182, 255, .12);
}

/* Painel da marca (login) e topo (menu): marinho com brilho azul e laranja */
.ag-marca-fundo {
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(22, 71, 224, .55) 0%, transparent 60%),
    radial-gradient(90% 70% at 100% 100%, rgba(255, 122, 26, .22) 0%, transparent 60%),
    var(--ag-marinho);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.ag-marca-fundo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%);
  pointer-events: none;
}
.ag-marca-fundo > * { position: relative; }

/* ══════════════════════ LOGIN ══════════════════════ */
body.ag-login {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--ag-fundo);
  color: var(--ag-texto);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.ag-login * { box-sizing: border-box; }
.ag-hero { display: none; }
.ag-login-painel { display: grid; place-items: center; padding: 56px 20px 32px; }
.ag-login-cartao { width: 100%; max-width: 360px; display: flex; flex-direction: column; }
.ag-login-logo { height: 44px; width: auto; align-self: flex-start; margin-bottom: 28px; }
.ag-login-titulo { font-family: var(--ag-fonte-titulo); font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.ag-login-lead { margin: 6px 0 24px; font-size: 14px; color: var(--ag-texto-2); }
.ag-campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.ag-campo label { font-size: 12px; font-weight: 700; color: var(--ag-texto-2); letter-spacing: .02em; }
.ag-campo input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--ag-campo-borda);
  border-radius: 10px;
  font-size: 16px;
  background: var(--ag-campo);
  color: var(--ag-texto);
}
.ag-campo input:focus { outline: 2px solid var(--ag-destaque); outline-offset: 1px; border-color: transparent; }
.ag-btn {
  width: 100%;
  min-height: 48px;
  margin-top: 8px;
  border: none;
  border-radius: 12px;
  background: var(--ag-destaque);
  color: var(--ag-sobre-destaque);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: filter .15s, transform .1s;
}
.ag-btn:hover { filter: brightness(1.08); }
.ag-btn:active { transform: scale(.99); }
.ag-btn:disabled { opacity: .6; cursor: default; }
.ag-login .login-error {
  display: none;
  margin-bottom: 14px;
  padding: 11px 13px;
  border-radius: 10px;
  font-size: 13.5px;
  color: #B42318;
  background: #FDECEA;
  border: 1px solid #F5C2BC;
}
.ag-login .login-error.show { display: block; }
:root[data-theme="dark"] .ag-login .login-error { color: #FF9B8F; background: #3D1F1C; border-color: #5C2B26; }
.ag-login-versao { margin-top: 22px; font-size: 12px; color: var(--ag-texto-2); text-align: center; }

@media (min-width: 900px) {
  body.ag-login { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .ag-hero { display: flex; flex-direction: column; justify-content: space-between; padding: 44px 56px; }
  .ag-hero-logo { height: 48px; width: auto; align-self: flex-start; }
  .ag-hero h2 {
    font-family: var(--ag-fonte-titulo);
    font-size: 38px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.03em;
    max-width: 480px;
    margin: 0;
  }
  .ag-hero h2 em { font-style: normal; color: var(--ag-laranja); }
  .ag-hero ul { list-style: none; padding: 0; margin: 32px 0 0; display: flex; flex-direction: column; gap: 12px; }
  .ag-hero li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: rgba(226, 232, 240, .9); }
  .ag-hero .ic {
    width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px;
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .09); color: var(--ag-azul-claro);
  }
  .ag-hero .ic svg { width: 17px; height: 17px; }
  .ag-hero-rodape { font-size: 12px; color: rgba(148, 163, 184, .75); }
  .ag-login-painel { padding: 32px 24px; }
  .ag-login-logo { display: none; }
}

/* ══════════════════════ FUNDO DAS TELAS DO WMS ══════════════════════ */
/* Pedido do usuário: WMS - Armazém todo padronizado com o Menu. Só CSS - o
   HTML/JS das rotinas não muda. Cada tela ganha a mesma faixa marinho do topo
   do Menu (desenhada no FUNDO da tela, não empurra o conteúdo, então não
   quebra as listas de altura total) e o resto no fundo do tema (--ag-fundo:
   névoa no claro). O escuro das rotinas vem do armazem-escuro.css (gerado do
   style.css) + a seção TEMA ESCURO no fim deste arquivo. O verde (--teal)
   virou o Azul Up direto no style.css. */
body.collector-app { background: var(--ag-fundo); }
.collector-app .screen.header-inline:not(.ag-tela) {
  --ag-faixa: calc(var(--hdr-top, 14px) + 132px);
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(22, 71, 224, .55) 0%, transparent 60%) top / 100% var(--ag-faixa) no-repeat,
    radial-gradient(90% 90% at 100% 100%, rgba(255, 122, 26, .22) 0%, transparent 60%) top / 100% var(--ag-faixa) no-repeat,
    linear-gradient(var(--ag-marinho), var(--ag-marinho)) top / 100% var(--ag-faixa) no-repeat,
    var(--ag-fundo);
}
/* Topo padrão (igual .ag-topo do Menu): linha 1 = voltar + logo UpWMS +
   tema/zoom + ações (ajuda "i"), linha 2 = título à esquerda. O logo é
   desenhado pelo CSS (::before), sem mexer no HTML das rotinas; o ícone
   central some. Flex com quebra: se não couber (tela estreita, zoom alto),
   tema/zoom e ajuda descem uma linha. A faixa marinho acompanha a altura do
   topo (--ag-faixa medida pelo aparencia.js; o calc é o valor sem quebra). */
.collector-app .screen.header-inline:not(.ag-tela) { --ag-faixa: calc(var(--hdr-top, 14px) + 150px); }
.collector-app .screen.header-inline:not(.ag-tela) > .screen-header {
  max-width: 560px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px 8px;
  margin-bottom: 20px;
}
.collector-app .screen.header-inline:not(.ag-tela) > .screen-header::before {
  content: "";
  order: 2;
  width: 118px;
  height: 30px;
  flex-shrink: 0;
  background: url(/brand/logo-horizontal-branco-fundo-escuro.svg) left center / contain no-repeat;
}
.collector-app .screen.header-inline:not(.ag-tela) > .screen-header > .btn-back { order: 1; flex-shrink: 0; }
.collector-app .screen.header-inline:not(.ag-tela) > .screen-header > .ag-ap-slot { order: 3; margin-left: auto; display: flex; align-items: center; gap: 8px; }
.collector-app .screen.header-inline:not(.ag-tela) > .screen-header > .btn-ajuda,
.collector-app .screen.header-inline:not(.ag-tela) > .screen-header > .btn-logout-corner { order: 4; flex-shrink: 0; }
.collector-app .screen.header-inline:not(.ag-tela) > .screen-header > .screen-icon { display: none; }
.collector-app .screen.header-inline:not(.ag-tela) > .screen-header > .screen-title {
  order: 5;
  flex-basis: 100%;
  text-align: left;
  font-size: 24px;
  margin-top: 12px;
}
.collector-app .screen-title { font-family: var(--ag-fonte-titulo); font-weight: 800; letter-spacing: -.01em; }
.collector-app .btn-back,
.collector-app .btn-ajuda { border-radius: 11px; background: rgba(255, 255, 255, .1); }

/* Cartões, campos e botões das rotinas: mesmo acabamento do Menu */
.collector-app .wms-card {
  border-radius: 18px;
  border: 1px solid var(--ag-borda);
  box-shadow: 0 6px 20px rgba(14, 27, 51, .08);
}
.collector-app .wms-lbl { letter-spacing: .04em; }
.collector-app .wms-inp {
  border: 1px solid var(--ag-campo-borda);
  border-radius: 12px;
  background: var(--ag-campo);
}
.collector-app .wms-inp:focus { border-color: var(--ag-azul); box-shadow: 0 0 0 3px rgba(22, 71, 224, .18); }
.collector-app .wms-btn-confirmar { border-radius: 14px; }
.collector-app .wms-btn-cancelar { border-radius: 14px; border-width: 1px; }
.collector-app .wms-cam-btn { border-radius: 12px; }
.collector-app .tab-btn.active { color: var(--ag-azul); border-bottom-color: var(--ag-azul); }

/* ══════════════════════ MENU / SUBMENU (.ag-tela) ══════════════════════ */
.collector-app .ag-tela {
  padding: 0;
  align-items: stretch;
  background: var(--ag-fundo);
  color: var(--ag-texto);
}
.ag-topo {
  padding: 16px 18px 56px;
  padding-top: max(16px, env(safe-area-inset-top));
}
.ag-topo-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 720px; margin: 0 auto; }
.ag-topo-logo { height: 34px; width: auto; display: block; }
.ag-topo-dir { display: flex; align-items: center; gap: 10px; min-width: 0; margin-left: auto; }
.ag-usuario {
  font-size: 13px; font-weight: 600; color: rgba(226, 232, 240, .9);
  padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .08);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px;
}
.ag-tela .btn-logout-corner { position: static; }
.ag-voltar {
  width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; cursor: pointer;
  border: none; border-radius: 11px; background: rgba(255, 255, 255, .1); color: #fff;
}
.ag-voltar svg { width: 20px; height: 20px; }
.ag-voltar:hover { background: rgba(255, 255, 255, .18); }
.ag-topo-linha:has(.ag-voltar) { justify-content: flex-start; }
.ag-saudacao { max-width: 720px; margin: 26px auto 0; }
.ag-saudacao h1 { font-family: var(--ag-fonte-titulo); font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 0; color: #fff; }
.ag-saudacao p { margin: 4px 0 0; font-size: 14px; color: rgba(226, 232, 240, .75); }

.ag-conteudo { position: relative; z-index: 1; width: 100%; max-width: 752px; margin: -36px auto 0; padding: 0 16px 28px; box-sizing: border-box; flex: 1; display: flex; flex-direction: column; }
.ag-tela .menu-list.ag-cartoes {
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0;
}
@media (min-width: 640px) { .ag-tela .menu-list.ag-cartoes { grid-template-columns: 1fr 1fr; } }

.ag-tela .menu-btn.ag-cartao {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--ag-borda);
  background: var(--ag-painel);
  color: var(--ag-texto);
  box-shadow: 0 6px 20px rgba(14, 27, 51, .08);
  font-size: 15px;
  transition: border-color .15s, transform .1s, box-shadow .15s;
}
.ag-tela .menu-btn.ag-cartao:hover { border-color: var(--ag-destaque); box-shadow: 0 10px 26px rgba(22, 71, 224, .14); }
.ag-tela .menu-btn.ag-cartao:active { transform: scale(.985); }
/* contador da Devolução de Caixas: no lugar, antes da seta */
.ag-tela .ag-cartao .dv-menu-badge { position: static; transform: none; flex-shrink: 0; }
.ag-cartao-icone {
  width: 48px; height: 48px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: 14px; background: var(--ag-icone-bg); color: var(--ag-destaque);
}
.ag-cartao-icone svg { width: 24px; height: 24px; }
.ag-cartao-laranja .ag-cartao-icone { background: rgba(255, 122, 26, .13); color: var(--ag-laranja); }
.ag-cartao-textos { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ag-cartao-titulo { font-family: var(--ag-fonte-titulo); font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.ag-cartao-desc { font-size: 12.5px; color: var(--ag-texto-2); line-height: 1.35; }
.ag-cartao-seta { color: var(--ag-texto-2); font-size: 22px; line-height: 1; flex-shrink: 0; }
.ag-tela .menu-sem-licenca {
  grid-column: 1 / -1;
  padding: 16px; border-radius: 14px; text-align: center;
  background: var(--ag-painel); border: 1px dashed var(--ag-borda); color: var(--ag-texto-2);
}
.ag-versao { margin: auto auto 0; padding-top: 24px; font-size: 12px; color: var(--ag-texto-2); }

/* Cartão "Em breve" (módulo ainda não migrado) */
.ag-tela .menu-btn.ag-cartao.ag-cartao-breve { cursor: default; opacity: .7; box-shadow: none; border-style: dashed; }
.ag-tela .menu-btn.ag-cartao.ag-cartao-breve:hover { border-color: var(--ag-borda); box-shadow: none; }
.ag-tela .menu-btn.ag-cartao.ag-cartao-breve:active { transform: none; }
.ag-cartao-breve .ag-cartao-icone { background: var(--ag-fundo); color: var(--ag-texto-2); }
.ag-selo-breve {
  flex-shrink: 0; font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px; background: rgba(255, 122, 26, .14); color: #C25400;
}
:root[data-theme="dark"] .ag-selo-breve { color: #FFB27A; }

/* ══════════════════════ APARÊNCIA (tema e zoom) ══════════════════════ */
/* Botões de /js/aparencia.js: [tema] [− 100% +]. No topo de todas as telas
   (marinho) e no Login. Compactos (− e + estreitos) pra caber ao lado do
   voltar, logo e ações num celular de 400px; sem espaço, o topo quebra linha. */
.ag-aparencia { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ag-ap-zoom { display: flex; align-items: center; border-radius: 11px; overflow: hidden; }
.ag-ap-btn {
  width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer; border: none;
  font: 700 20px/1 system-ui, sans-serif; padding: 0;
}
.ag-ap-zoom .ag-ap-btn { width: 30px; }
.ag-ap-tema { border-radius: 11px; }
.ag-ap-btn svg { width: 19px; height: 19px; }
.ag-ap-btn:disabled { opacity: .35; cursor: default; }
.ag-ap-btn:focus-visible { outline: 2px solid var(--ag-laranja); outline-offset: 2px; }
.ag-ap-valor { min-width: 36px; text-align: center; font-size: 12px; font-weight: 700; }
.ag-topo .ag-ap-btn, .ag-topo .ag-ap-zoom,
.ag-ap-slot .ag-ap-btn, .ag-ap-slot .ag-ap-zoom { background: rgba(255, 255, 255, .1); color: #fff; }
.ag-topo .ag-ap-zoom .ag-ap-btn, .ag-ap-slot .ag-ap-zoom .ag-ap-btn { background: transparent; }
.ag-topo .ag-ap-valor, .ag-ap-slot .ag-ap-valor { color: rgba(226, 232, 240, .9); }
.ag-login-aparencia { position: absolute; top: 14px; right: 14px; z-index: 2; }
.ag-login-painel { position: relative; }
.ag-login-aparencia .ag-ap-btn, .ag-login-aparencia .ag-ap-zoom {
  background: var(--ag-painel); color: var(--ag-texto); box-shadow: 0 0 0 1px var(--ag-borda) inset;
}
.ag-login-aparencia .ag-ap-zoom .ag-ap-btn { box-shadow: none; background: transparent; }
.ag-login-aparencia .ag-ap-valor { color: var(--ag-texto-2); }
/* Celular: a saudação já mostra o usuário; o chip sai pra caber os botões */
@media (max-width: 520px) { .ag-topo .ag-usuario { display: none; } }

/* Zoom (zoom no <html>): o zoom também multiplica 100dvh, então as alturas de
   tela cheia/máximas voltam a caber na tela divididas por --ag-zoom. */
html[data-zoom] body,
html[data-zoom] body.ag-login,
html[data-zoom] .collector-app,
html[data-zoom] .screen,
html[data-zoom] .login-page,
html[data-zoom] .app-layout { min-height: calc(100dvh / var(--ag-zoom)); }
html[data-zoom] .main-content { height: calc(100dvh / var(--ag-zoom)); }
html[data-zoom] .modal { max-height: calc(90dvh / var(--ag-zoom)); }
html[data-zoom] .oc-lst-container { max-height: calc(58dvh / var(--ag-zoom)); }
html[data-zoom] .aj-sheet { max-height: calc(88dvh / var(--ag-zoom)); }
html[data-zoom] .aj-overlay.is-max .aj-sheet { height: calc(100dvh / var(--ag-zoom)); max-height: none; }
@media (max-width: 768px) {
  html[data-zoom] .modal { max-height: calc(92dvh / var(--ag-zoom)); }
  html[data-zoom] .modal-body { max-height: calc(60dvh / var(--ag-zoom)); }
}
@media (max-width: 480px) { html[data-zoom] .modal-body { max-height: calc(55dvh / var(--ag-zoom)); } }
@media (min-height: 561px) { html[data-zoom] .screen.lista-fill { height: calc(100dvh / var(--ag-zoom)); } }

/* ══════════════════════ TEMA ESCURO (ajustes manuais) ══════════════════════ */
/* O grosso do escuro do Armazém é gerado (armazem-escuro.css). Aqui o que o
   gerador não alcança. */
:root[data-theme="dark"] { color-scheme: dark; }
/* Logo do Login: versão branca no escuro (o "WMS" da colorida é marinho) */
.ag-login-logo.ag-logo-escuro { display: none; }
@media (max-width: 899px) {
  :root[data-theme="dark"] .ag-login-logo.ag-logo-claro { display: none; }
  :root[data-theme="dark"] .ag-login-logo.ag-logo-escuro { display: block; }
}
:root[data-theme="dark"] .collector-app .tab-btn.active { color: var(--ag-azul-claro); border-bottom-color: var(--ag-azul-claro); }
/* Com zoom alto o topo do Menu não cabe numa linha: os botões descem para
   baixo do logo, alinhados à direita, em vez de passar da borda. */
.ag-topo .ag-topo-linha { flex-wrap: wrap; row-gap: 10px; column-gap: 8px; }
.ag-topo .ag-topo-dir { gap: 8px; }

/* Módulo abrindo (iframe ainda invisível, ver agAbrirModulo): fundo do tema + roda */
.ag-carregando { position: fixed; inset: 0; z-index: 39; background: var(--ag-fundo); display: grid; place-items: center; }
.ag-carregando::after {
  content: ""; width: 38px; height: 38px; border-radius: 50%;
  border: 3px solid var(--ag-borda); border-top-color: var(--ag-destaque); animation: ag-girar .8s linear infinite;
}
@keyframes ag-girar { to { transform: rotate(360deg); } }
:root[data-theme="dark"] body.collector-app { background: var(--ag-fundo); }