/* ============================================================
 * AGF José Bonifácio — camada visual compartilhada
 * ------------------------------------------------------------
 * Complementa os CSS existentes sem reescrever componentes.
 * Tokens editáveis pelo painel /agf/icones/.
 * ============================================================ */
:root {
  --agf-icon-shipping: #0077b6;
  --agf-icon-cep: #ee9b00;
  --agf-icon-home: #006494;
  --agf-icon-dashboard: #6a4c93;
  --agf-icon-admin: #9b5de5;
  --agf-icon-caixa: #2a9d8f;
  --agf-icon-atendimento: #e76f51;
  --agf-icon-cloud: #4d908e;
  --agf-icon-balcao: #f4a261;
  --agf-icon-sla: #577590;
  --agf-icon-app: #0077b6;
  --agf-brand-blue: #00416b;
  --agf-brand-blue-2: #0077b6;
  --agf-surface: #ffffff;
  --agf-bg: #f4f7fb;
  --agf-border: #dce6ef;
  --agf-text: #14324a;
  --agf-muted: #60788d;
  --agf-radius: 14px;
  --agf-topbar-height: 56px;
  --agf-shadow: 0 10px 30px rgba(0, 65, 107, .08);
}

html, body { max-width: 100%; overflow-x: hidden; }
body { touch-action: pan-y; }
html.agf-auth-pending::before {
  content: "Validando acesso…";
  position: fixed; inset: 0; z-index: 2147483647;
  display: grid; place-items: center;
  padding: 20px;
  background: #f4f7fb;
  color: #00416b;
  font: 700 14px/1.4 Inter, "Source Sans 3", Arial, sans-serif;
  letter-spacing: .01em;
}
html.agf-auth-pending body { visibility: hidden !important; }

.material-symbols-rounded, .mi, [data-agf-icon] {
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
.agf-icon-shipping { color: var(--agf-icon-shipping) !important; }
.agf-icon-cep { color: var(--agf-icon-cep) !important; }
.agf-icon-home { color: var(--agf-icon-home) !important; }
.agf-icon-dashboard { color: var(--agf-icon-dashboard) !important; }
.agf-icon-admin { color: var(--agf-icon-admin) !important; }
.agf-icon-caixa { color: var(--agf-icon-caixa) !important; }
.agf-icon-atendimento { color: var(--agf-icon-atendimento) !important; }
.agf-icon-cloud { color: var(--agf-icon-cloud) !important; }
.agf-icon-balcao { color: var(--agf-icon-balcao) !important; }
.agf-icon-sla { color: var(--agf-icon-sla) !important; }
.agf-icon-app { color: var(--agf-icon-app) !important; }

.agf-frame-topbar {
  min-height: var(--agf-topbar-height);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--agf-border);
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 4px 20px rgba(0, 65, 107, .05);
}
.agf-frame-brand { min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--agf-text); text-decoration: none; }
.agf-brand-tile {
  width: 38px; height: 38px; flex: 0 0 38px;
  display: grid; place-items: center;
  border: 1px solid #d8e7f1; border-radius: 12px;
  background: linear-gradient(145deg, #fff, #edf6fb);
  color: var(--agf-brand-blue-2);
  box-shadow: 0 5px 14px rgba(0, 65, 107, .10);
}
.agf-brand-tile .material-symbols-rounded { font-size: 21px; }
.agf-frame-copy { min-width: 0; display: grid; gap: 1px; }
.agf-frame-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 14px/1.15 Inter, "Source Sans 3", Arial, sans-serif; }
.agf-frame-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--agf-muted); font: 600 11px/1.15 Inter, "Source Sans 3", Arial, sans-serif; }
.agf-frame-actions { display: flex; align-items: center; gap: 7px; }
.agf-icon-button {
  min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--agf-border); border-radius: 11px; background: #fff; color: var(--agf-brand-blue);
  text-decoration: none; cursor: pointer; padding: 7px 9px; font: 700 12px/1 Inter, "Source Sans 3", Arial, sans-serif;
}
.agf-icon-button:hover { background: #f1f8fc; }
.agf-icon-button .material-symbols-rounded { font-size: 18px; }
.agf-frame-layout { height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--agf-bg); }
.agf-frame-layout iframe { width: 100%; height: 100%; border: 0; display: block; background: var(--agf-bg); }

/* Ajustes compactos e seguros: sem alterar handlers ou grid funcional. */
.agf-route-intra .topbar { min-height: var(--agf-topbar-height) !important; }
.agf-route-intra .logo-circle { width: 38px !important; height: 38px !important; border-radius: 12px !important; }
.agf-route-intra .page-body { padding-top: 12px !important; }
.agf-route-balcao .topbar-inner,
.agf-route-cep .cep-header-inner { min-height: var(--agf-topbar-height) !important; }
.agf-route-balcao .hero { padding-top: 14px !important; padding-bottom: 14px !important; }
.agf-route-cep .cep-main { padding-top: 14px !important; }
.agf-route-app .topbar-inner,
.agf-route-nuvem .topbar-inner,
.agf-route-superfrete .topbar-inner { min-height: var(--agf-topbar-height) !important; }

@media (max-width: 640px) {
  .agf-frame-topbar { padding: 7px 10px; }
  .agf-frame-copy strong { font-size: 13px; }
  .agf-frame-copy small { font-size: 10.5px; }
  .agf-icon-button span:last-child:not(.material-symbols-rounded) { display: none; }
  input, select, textarea, button { max-width: 100%; }
}
.agf-portal-shortcut {
  min-width: 36px; min-height: 36px; display:inline-flex; align-items:center; justify-content:center; gap:5px;
  padding:6px 8px; border:1px solid var(--agf-border); border-radius:11px; background:#fff;
  color:var(--agf-brand-blue) !important; text-decoration:none !important; box-shadow:0 4px 12px rgba(0,65,107,.05);
  font:800 11px/1 Inter, "Source Sans 3", Arial, sans-serif;
}
.agf-portal-shortcut:hover { background:#f1f8fc; }
.agf-portal-shortcut .material-symbols-rounded, .agf-portal-shortcut .mi { font-size:18px; }
@media(max-width:640px){.agf-portal-shortcut-label{display:none}}


/* ============================================================
 * TOPBAR V2 — padrão único compacto
 * ------------------------------------------------------------
 * Visual equivalente ao shell /intra: tile quadrado, duas linhas,
 * conteúdo alinhado ao body da própria página e ações compactas.
 * ============================================================ */
:root {
  --agf-topbar-height: 56px;
  --agf-shell-pad: 14px;
}
.agf-standard-topbar,
.portal-topbar {
  position: sticky; top: 0; z-index: 60; width: 100%;
  min-height: var(--agf-topbar-height);
  border-bottom: 1px solid var(--agf-border);
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 3px 14px rgba(0,65,107,.045);
}
.agf-standard-topbar-inner,
.portal-topbar-inner {
  min-height: var(--agf-topbar-height);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 auto; padding: 0 var(--agf-shell-pad);
}
.agf-standard-topbar-inner { width: min(100%, var(--agf-content-width, 1120px)); }
.portal-topbar-inner { width: min(1180px, calc(100% - 28px)); padding-inline: 0; }
.agf-standard-brand,
.portal-brand { min-width: 0; display:flex; align-items:center; gap:10px; color:var(--agf-text); text-decoration:none; }
.agf-standard-brand-tile,
.agf-brand-tile,
.agf-route-intra .logo-circle,
.agf-route-caixa .logo-circle {
  width:38px !important; height:38px !important; flex:0 0 38px !important;
  display:grid !important; place-items:center !important; overflow:hidden;
  border:1px solid #d8e7f1 !important; border-radius:12px !important;
  background:linear-gradient(145deg,#fff,#edf6fb) !important;
  box-shadow:0 4px 12px rgba(0,65,107,.09) !important;
}
.agf-standard-brand-tile svg,
.agf-route-intra .logo-circle svg,
.agf-route-caixa .logo-circle svg { width:28px !important; height:28px !important; }
.agf-standard-brand-tile .material-symbols-rounded { font-size:21px; color:var(--agf-brand-blue-2); }
.agf-standard-copy,
.portal-brand-copy { min-width:0; display:grid; gap:1px; }
.agf-standard-copy strong,
.portal-brand-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:800 14px/1.15 Inter,"Source Sans 3",Arial,sans-serif; color:var(--agf-text); }
.agf-standard-copy small,
.portal-brand-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:600 11px/1.15 Inter,"Source Sans 3",Arial,sans-serif; color:var(--agf-muted); }
.agf-standard-actions,
.portal-top-actions { display:flex; align-items:center; gap:7px; flex:0 0 auto; }
.agf-standard-action {
  min-width:36px; min-height:36px; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:7px 9px; border:1px solid var(--agf-border); border-radius:11px; background:#fff;
  color:var(--agf-brand-blue); text-decoration:none; cursor:pointer; font:700 12px/1 Inter,"Source Sans 3",Arial,sans-serif;
}
.agf-standard-action:hover { background:#f1f8fc; }
.agf-standard-action .material-symbols-rounded { font-size:18px; }
:where(.agf-managed-icon) { color: var(--agf-managed-icon-color) !important; }
.agf-route-intra .topbar-shell > .topbar,
.agf-route-caixa .topbar-shell > .topbar { height:var(--agf-topbar-height) !important; min-height:var(--agf-topbar-height) !important; }
.agf-route-intra .page-body,
.agf-route-caixa .page-body { padding-top:12px !important; }
.agf-frame-layout.agf-embed-only { grid-template-rows:minmax(0,1fr); }
@media(max-width:640px){
  .portal-topbar-inner { width:min(100% - 20px, 620px); }
  .agf-standard-topbar-inner { padding-inline:10px; }
  .agf-standard-action span:last-child:not(.material-symbols-rounded) { display:none; }
}

/* Ajustes finais de consistência entre shells legados */
.agf-route-caixa .logo-circle{border-radius:12px!important}
.agf-route-intra .topbar-shell>.topbar,.agf-route-caixa .topbar-shell>.topbar{max-width:1180px;margin:0 auto;padding-inline:14px!important}
.agf-route-intra .topbar-title p,.agf-route-caixa .topbar-title p{font-size:11px!important;line-height:1.15!important}
.agf-route-intra .topbar-title h1,.agf-route-caixa .topbar-title h1{font-size:14px!important;line-height:1.15!important}
@media(max-width:640px){.agf-route-intra .topbar-shell>.topbar,.agf-route-caixa .topbar-shell>.topbar{padding-inline:10px!important}}


/* ============================================================
 * AGF José Bonifácio — CAMADA DE POLIMENTO & ALINHAMENTO
 * ------------------------------------------------------------
 * 100% aditiva e CSS-only. Não altera HTML, JS, classes nem
 * nenhuma regra existente. Endurece consistência, alinhamento e
 * responsividade mobile SOBRE o que já existe.
 *
 * Princípios:
 *  - Escopo isolado por rota (app, intra, nuvem, balcao, cep,
 *    superfrete, superfrete-admin, caixa). A landing (agf-route-home)
 *    NUNCA é afetada.
 *  - Baixa especificidade via :where() — qualquer regra de componente
 *    existente sempre vence. Regressão ~zero por construção.
 *  - Reaproveita os tokens --agf-* já definidos no topo deste arquivo.
 *  - Rollback trivial: basta restaurar este arquivo.
 * ============================================================ */

/* Tokens auxiliares do polimento (não conflitam com tokens dos apps) */
:root {
  --agf-pol-scrollbar: #c4d5e4;
  --agf-pol-scrollbar-hover: #9db8d0;
  --agf-pol-focus: #0077b6;
  --agf-pol-gutter: clamp(14px, 4vw, 20px);
}

/* ---- 1. Rede de segurança de layout (caixa, mídia, quebra) ----
 * box-sizing reforçado para shells legados que possam não tê-lo;
 * mídia nunca estoura a largura; strings longas (rastreios, e-mails,
 * URLs) quebram em vez de gerar scroll horizontal no mobile.        */
:where(html.agf-route-app, html.agf-route-intra, html.agf-route-nuvem,
       html.agf-route-balcao, html.agf-route-cep, html.agf-route-superfrete,
       html.agf-route-superfrete-admin, html.agf-route-caixa) *,
:where(html.agf-route-app, html.agf-route-intra, html.agf-route-nuvem,
       html.agf-route-balcao, html.agf-route-cep, html.agf-route-superfrete,
       html.agf-route-superfrete-admin, html.agf-route-caixa) *::before,
:where(html.agf-route-app, html.agf-route-intra, html.agf-route-nuvem,
       html.agf-route-balcao, html.agf-route-cep, html.agf-route-superfrete,
       html.agf-route-superfrete-admin, html.agf-route-caixa) *::after {
  box-sizing: border-box;
}

:where(html.agf-route-app, html.agf-route-intra, html.agf-route-nuvem,
       html.agf-route-balcao, html.agf-route-cep, html.agf-route-superfrete,
       html.agf-route-superfrete-admin, html.agf-route-caixa) body {
  overflow-wrap: break-word;
}

:where(html.agf-route-app, html.agf-route-intra, html.agf-route-nuvem,
       html.agf-route-balcao, html.agf-route-cep, html.agf-route-superfrete,
       html.agf-route-superfrete-admin, html.agf-route-caixa)
  :where(img, svg, video, canvas, iframe) {
  max-width: 100%;
}

/* ---- 2. Tipografia: equilíbrio de quebras (progressive enhancement)
 * Títulos com text-wrap:balance e parágrafos com pretty deixam as
 * linhas visualmente equilibradas. Navegadores antigos ignoram.     */
:where(html.agf-route-app, html.agf-route-intra, html.agf-route-nuvem,
       html.agf-route-balcao, html.agf-route-cep, html.agf-route-superfrete,
       html.agf-route-superfrete-admin, html.agf-route-caixa)
  :where(h1, h2, h3, .card-head h2, .modal-title) {
  text-wrap: balance;
}
:where(html.agf-route-app, html.agf-route-intra, html.agf-route-nuvem,
       html.agf-route-balcao, html.agf-route-cep, html.agf-route-superfrete,
       html.agf-route-superfrete-admin, html.agf-route-caixa)
  :where(p, .modal-body, .field-hint, .hint) {
  text-wrap: pretty;
}

/* ---- 3. Numerais tabulares: alinhamento perfeito de colunas ----
 * Em tabelas e blocos de valores/KPIs os dígitos passam a ter a mesma
 * largura, alinhando casas decimais e totais (essencial em caixa,
 * fretes e dashboards financeiros). Só muda a métrica do dígito.    */
:where(html.agf-route-app, html.agf-route-intra, html.agf-route-nuvem,
       html.agf-route-balcao, html.agf-route-cep, html.agf-route-superfrete,
       html.agf-route-superfrete-admin, html.agf-route-caixa)
  :where(table, .kv-list, .kv-value, [class*="valor"], [class*="total"],
         [class*="preco"], [class*="price"], [class*="kpi"], [class*="metric"],
         [class*="stat"], [class*="money"], [class*="amount"], time, .tabular) {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---- 4. Regiões roláveis: inércia + scrollbar fina de marca ----
 * Rolagem com inércia no iOS e barras finas/discretas no padrão
 * Correios, sem alterar dimensões de layout.                        */
:where(html.agf-route-app, html.agf-route-intra, html.agf-route-nuvem,
       html.agf-route-balcao, html.agf-route-cep, html.agf-route-superfrete,
       html.agf-route-superfrete-admin, html.agf-route-caixa) {
  scrollbar-width: thin;
  scrollbar-color: var(--agf-pol-scrollbar) transparent;
}
:where(html.agf-route-app, html.agf-route-intra, html.agf-route-nuvem,
       html.agf-route-balcao, html.agf-route-cep, html.agf-route-superfrete,
       html.agf-route-superfrete-admin, html.agf-route-caixa)
  :where([class*="scroll"], [class*="overflow"], .table-wrap, .tabela, pre, textarea) {
  -webkit-overflow-scrolling: touch;
}
:where(html.agf-route-app, html.agf-route-intra, html.agf-route-nuvem,
       html.agf-route-balcao, html.agf-route-cep, html.agf-route-superfrete,
       html.agf-route-superfrete-admin, html.agf-route-caixa) ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
:where(html.agf-route-app, html.agf-route-intra, html.agf-route-nuvem,
       html.agf-route-balcao, html.agf-route-cep, html.agf-route-superfrete,
       html.agf-route-superfrete-admin, html.agf-route-caixa) ::-webkit-scrollbar-thumb {
  background: var(--agf-pol-scrollbar);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
:where(html.agf-route-app, html.agf-route-intra, html.agf-route-nuvem,
       html.agf-route-balcao, html.agf-route-cep, html.agf-route-superfrete,
       html.agf-route-superfrete-admin, html.agf-route-caixa) ::-webkit-scrollbar-thumb:hover {
  background: var(--agf-pol-scrollbar-hover);
  background-clip: padding-box;
}
:where(html.agf-route-app, html.agf-route-intra, html.agf-route-nuvem,
       html.agf-route-balcao, html.agf-route-cep, html.agf-route-superfrete,
       html.agf-route-superfrete-admin, html.agf-route-caixa) ::-webkit-scrollbar-track {
  background: transparent;
}

/* ---- 5. Foco acessível consistente (fallback, não sobrepõe) ----
 * Anel de foco de marca para elementos interativos que ainda não
 * tenham estilo de foco. :where() garante que qualquer foco já
 * definido pelo app continue vencendo.                              */
:where(html.agf-route-app, html.agf-route-intra, html.agf-route-nuvem,
       html.agf-route-balcao, html.agf-route-cep, html.agf-route-superfrete,
       html.agf-route-superfrete-admin, html.agf-route-caixa)
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--agf-pol-focus);
  outline-offset: 2px;
}

/* ---- 6. Seleção de texto na cor da marca (cosmético, seguro) ---- */
:where(html.agf-route-app, html.agf-route-intra, html.agf-route-nuvem,
       html.agf-route-balcao, html.agf-route-cep, html.agf-route-superfrete,
       html.agf-route-superfrete-admin, html.agf-route-caixa) ::selection {
  background: rgba(0, 119, 182, 0.20);
}

/* ---- 7. Toque mais confortável (sem alterar layout) ----
 * Garante área de clique mínima em elementos sabidamente pequenos,
 * via min-* (nunca encolhe nada existente).                         */
:where(html.agf-route-app, html.agf-route-intra, html.agf-route-nuvem,
       html.agf-route-balcao, html.agf-route-cep, html.agf-route-superfrete,
       html.agf-route-superfrete-admin, html.agf-route-caixa)
  :where(button, a[role="button"], .icon-btn, .chip, .tab, .pill):where(:not(.btn-sm):not(.btn-link)) {
  touch-action: manipulation;
}

/* ---- 8. Acessibilidade: respeitar redução de movimento ----
 * Quem ativa "reduzir movimento" no SO deixa de receber animações
 * longas. Boas práticas WCAG; usa !important por ser override de A11y. */
@media (prefers-reduced-motion: reduce) {
  :where(html.agf-route-app, html.agf-route-intra, html.agf-route-nuvem,
         html.agf-route-balcao, html.agf-route-cep, html.agf-route-superfrete,
         html.agf-route-superfrete-admin, html.agf-route-caixa) *,
  :where(html.agf-route-app, html.agf-route-intra, html.agf-route-nuvem,
         html.agf-route-balcao, html.agf-route-cep, html.agf-route-superfrete,
         html.agf-route-superfrete-admin, html.agf-route-caixa) *::before,
  :where(html.agf-route-app, html.agf-route-intra, html.agf-route-nuvem,
         html.agf-route-balcao, html.agf-route-cep, html.agf-route-superfrete,
         html.agf-route-superfrete-admin, html.agf-route-caixa) *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- 9. Ajustes finos de mobile (≤ 480px) ----
 * Endurecimentos seguros para telas pequenas: tabelas roláveis não
 * empurram o layout; campos de formulário ocupam a largura total;
 * grupos de botões quebram em vez de transbordar.                   */
@media (max-width: 480px) {
  :where(html.agf-route-app, html.agf-route-intra, html.agf-route-nuvem,
         html.agf-route-balcao, html.agf-route-cep, html.agf-route-superfrete,
         html.agf-route-superfrete-admin, html.agf-route-caixa)
    :where(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
    max-width: 100%;
  }
  :where(html.agf-route-app, html.agf-route-intra, html.agf-route-nuvem,
         html.agf-route-balcao, html.agf-route-cep, html.agf-route-superfrete,
         html.agf-route-superfrete-admin, html.agf-route-caixa)
    :where(.btn-row, .actions, .toolbar, .filters, [class*="actions"]) {
    flex-wrap: wrap;
  }
}