/* =========================================================================
   CABECALHO GLOBAL UNIVERSAL EM LINHA UNICA (ORIGINAL ALINHADO)
   ========================================================================= */
.global-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  background-color: var(--header-bg) !important;
  backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid var(--header-border) !important;
  box-shadow: var(--shadow) !important;
  width: 100% !important;
}

.global-header-inner {
  max-width: 1600px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 8px 20px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  box-sizing: border-box !important;
}

.header-brand-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}

.header-brand {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.brand-icon-3d {
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.brand-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.5px !important;
  white-space: nowrap !important;
}
body.light-mode .brand-title { color: #090d16 !important; }
.brand-title span { color: #10b981 !important; }

.btn-expand-header {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  border: 1px solid var(--border-color) !important;
  background: var(--bg-card) !important;
  color: var(--text-main) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: all 0.15s ease !important;
}
.btn-expand-header:hover {
  background: var(--bg-card-hover) !important;
  border-color: #3b82f6 !important;
}

.header-nav {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  flex: 1 !important;
  white-space: nowrap !important;
}

.nav-btn {
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  border: 1px solid var(--border-color) !important;
  background-color: var(--bg-card) !important;
  color: var(--text-main) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  position: relative !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}
.nav-btn:hover {
  background-color: var(--bg-card-hover) !important;
  border-color: #3b82f6 !important;
  transform: translateY(-1px) !important;
}
.nav-btn.active {
  background-color: #2563eb !important;
  color: #ffffff !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.45) !important;
}
.nav-btn .nav-icon {
  font-size: 18px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}
.nav-label-box {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  line-height: 1.15 !important;
}
.nav-name {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: var(--text-main) !important;
  letter-spacing: -0.2px !important;
}
.nav-btn.active .nav-name { color: #ffffff !important; }
.nav-func {
  font-size: 9px !important;
  font-weight: 700 !important;
  color: #38bdf8 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
}
body.light-mode .nav-func { color: #2563eb !important; }
.nav-btn.active .nav-func { color: #bfdbfe !important; }

/* Modo compacto: esconde apenas o texto, deixando o botao quadrado 38x38px visivel */
.global-header.nav-mode-compact .nav-btn {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  justify-content: center !important;
  border-radius: 8px !important;
  gap: 0 !important;
}
.global-header.nav-mode-compact .nav-btn .nav-label-box {
  display: none !important;
}

/* 3. Direita: Os 6 Controles */
.header-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}
.header-action-btn {
  height: 36px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  border: 1px solid var(--border-color) !important;
  background-color: var(--bg-card) !important;
  color: var(--text-main) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  transition: all 0.15s ease !important;
}
.header-action-btn:hover {
  background-color: var(--bg-card-hover) !important;
  border-color: #3b82f6 !important;
}
.header-action-btn.modo-dicas-ativo {
  background: rgba(245, 158, 11, 0.25) !important;
  border-color: #f59e0b !important;
  color: #fbbf24 !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.4) !important;
}
.header-action-btn.btn-pwa {
  border: 1px solid #10b981 !important;
  color: #10b981 !important;
  background: rgba(16, 185, 129, 0.12) !important;
}
.user-badge-header {
  height: 36px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  border: 1px solid #f59e0b !important;
  color: #f59e0b !important;
  background: rgba(245, 158, 11, 0.15) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}
body.light-mode .user-badge-header { color: #b45309 !important; border-color: #d97706 !important; }
.btn-criar-usr-header {
  height: 36px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  border: 1px solid #f59e0b !important;
  color: #fbbf24 !important;
  background: rgba(245, 158, 11, 0.15) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
  transition: all 0.15s ease !important;
}
.btn-criar-usr-header:hover {
  background: rgba(245, 158, 11, 0.25) !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.35) !important;
}
.btn-logout-header {
  height: 36px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  border: 1px solid #ef4444 !important;
  color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.12) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.btn-logout-header:hover {
  background: rgba(239, 68, 68, 0.25) !important;
  border-color: #ef4444 !important;
}

/* TRAVA RIGOROSA DE ACESSO (LOGIN MASTER) */
html.auth-locked, body.auth-locked {
  overflow: hidden !important;
  height: 100vh !important;
}
body.auth-locked > *:not(.login-overlay):not(#alternazap-login-overlay) {
  filter: blur(10px) brightness(0.6) !important;
  pointer-events: none !important;
  user-select: none !important;
}
/* AlternaZap Global Styles & Header - Master Unificado 3D & Futurista */
:root {
  /* TEMA ESCURO (PRETO FUTURISTA / PROFUNDO) */
  --bg-main: #060911;
  --bg-card: #0f172a;
  --bg-card-hover: #1e293b;
  --border-color: rgba(255, 255, 255, 0.12);
  --border-focus: #3b82f6;
  --text-main: #ffffff;
  --text-muted: #e2e8f0;
  --text-dim: #94a3b8;
  --accent-blue: #2563eb;
  --accent-blue-hover: #1d4ed8;
  --accent-green: #10b981;
  --accent-green-hover: #059669;
  --accent-red: #ef4444;
  --accent-amber: #f59e0b;
  --accent-purple: #8b5cf6;
  --header-bg: rgba(6, 9, 17, 0.94);
  --header-border: rgba(255, 255, 255, 0.1);
  --input-bg: #090e1a;
  --badge-bg: rgba(37, 99, 235, 0.18);
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  --glow-cyan: 0 0 20px rgba(56, 189, 248, 0.25);
}

body.light-mode {
  /* TEMA CLARO (BRANCO EXECUTIVO) - CONTRASTE MÁXIMO */
  --bg-main: #f8fafc;
  --bg-card: #ffffff;
  --bg-card-hover: #f1f5f9;
  --border-color: #cbd5e1;
  --border-focus: #2563eb;
  --text-main: #090d16;
  --text-muted: #1e293b;
  --text-dim: #475569;
  --header-bg: rgba(255, 255, 255, 0.96);
  --header-border: #e2e8f0;
  --input-bg: #ffffff;
  --badge-bg: rgba(37, 99, 235, 0.1);
  --shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  --glow-cyan: 0 0 15px rgba(37, 99, 235, 0.15);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: var(--bg-main);
  color: var(--text-main);
  line-height: 1.5;
  min-height: 100vh;
  transition: background-color 0.2s ease, color 0.2s ease;
  -webkit-font-smoothing: antialiased;
}

/* Container Global Proporcional */
.app-container {
  max-width: 1600px; width: 100%; box-sizing: border-box;
  margin: 0 auto;
  padding: 20px 24px 60px 24px;
}

/* Header Global Padronizado */
.global-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background-color: var(--header-bg);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--header-border);
  box-shadow: var(--shadow);
}

.global-header-inner {
  max-width: 1600px; width: 100%; box-sizing: border-box;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
}

/* Novo Logotipo 3D do AlternaZap */
.brand-icon-3d {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 4px 8px rgba(37, 99, 235, 0.4));
  transition: transform 0.2s ease;
}

.header-brand:hover .brand-icon-3d {
  transform: scale(1.06) rotate(-2deg);
}

.brand-icon-3d img,
.brand-icon-3d svg {
  width: 100%;
  height: 100%;
  display: block;
}

.brand-title {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #ffffff;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  gap: 4px;
}

body.light-mode .brand-title {
  color: #090d16 !important;
}

.brand-title span {
  color: #10b981;
}

/* Navegação por Botões com Desenho + 1 ou 2 Palavras */
.header-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px 0;
}

.header-nav::-webkit-scrollbar {
  display: none;
}

.nav-btn {
  height: 40px;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background-color: var(--bg-card);
  color: var(--text-main);
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  white-space: nowrap !important;
  flex-shrink: 0;
}

.nav-btn:hover {
  background-color: var(--bg-card-hover);
  color: var(--text-main);
  border-color: var(--border-focus);
  transform: translateY(-1px);
}

.nav-btn.active {
  background-color: var(--accent-blue);
  color: #ffffff !important;
  border-color: var(--accent-blue);
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.45);
}

.nav-btn .nav-icon {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}

.nav-label-box {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  line-height: 1.15;
}

.nav-name {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.2px;
}

.nav-btn.active .nav-name {
  color: #ffffff !important;
}

.nav-func {
  font-size: 9px;
  font-weight: 700;
  color: #38bdf8;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

body.light-mode .nav-func {
  color: #2563eb;
}

.nav-btn.active .nav-func {
  color: #bfdbfe !important;
}

/* ======================================================================
   TOOLTIP INTELIGENTE FUTURISTA AO PASSAR O MOUSE
   ====================================================================== */
.nav-tooltip-card {
  position: absolute;
  top: 48px;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(56, 189, 248, 0.3);
  backdrop-filter: blur(12px);
  color: #f8fafc;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.45;
  white-space: normal;
  width: 240px;
  box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.6), 0 0 15px rgba(56, 189, 248, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 10000;
  text-align: left;
}

body.light-mode .nav-tooltip-card {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid #cbd5e1;
  color: #090d16;
  box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.15);
}

.nav-tooltip-card strong {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #38bdf8;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 4px;
}

body.light-mode .nav-tooltip-card strong {
  color: #2563eb;
}

.nav-btn:hover .nav-tooltip-card {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Botão Dedicado de Criar Usuários (Exclusivo Master) */
.btn-criar-usr-header {
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(217, 119, 6, 0.3));
  border: 1px solid #f59e0b;
  color: #fbbf24;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-criar-usr-header:hover {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.35), rgba(217, 119, 6, 0.45));
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
  transform: translateY(-1px);
}

body.light-mode .btn-criar-usr-header {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(217, 119, 6, 0.18));
  color: #b45309;
  border-color: #d97706;
}

/* Ações do Header (Selo Master, Sair, Dicas, PWA, Tema) */
.header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.user-badge-header {
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(37, 99, 235, 0.2));
  border: 1px solid #f59e0b;
  color: #f59e0b;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

body.light-mode .user-badge-header {
  color: #b45309;
  border-color: #d97706;
}

.btn-logout-header {
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background-color: var(--bg-card);
  color: var(--accent-red);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-logout-header:hover {
  background-color: rgba(239, 68, 68, 0.15);
  border-color: var(--accent-red);
}

.header-action-btn {
  height: 38px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background-color: var(--bg-card);
  color: var(--text-main);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.header-action-btn:hover {
  background-color: var(--bg-card-hover);
  border-color: var(--border-focus);
}

.header-action-btn.btn-pwa {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.25), rgba(16, 185, 129, 0.25));
  border-color: #10b981;
  color: #10b981;
}

body.light-mode .header-action-btn.btn-pwa {
  color: #059669;
  border-color: #059669;
}

/* Botões Padronizados e Não Esticados */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  height: 38px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background-color: var(--accent-blue);
  color: #fff !important;
}
.btn-primary:hover {
  background-color: var(--accent-blue-hover);
}

.btn-success {
  background-color: var(--accent-green);
  color: #fff !important;
}
.btn-success:hover {
  background-color: var(--accent-green-hover);
}

.btn-danger {
  background-color: var(--accent-red);
  color: #fff !important;
}

.btn-outline {
  background-color: transparent;
  border-color: var(--border-color);
  color: var(--text-main);
}
.btn-outline:hover {
  background-color: var(--bg-card-hover);
  border-color: var(--border-focus);
}

/* Inputs e Selects com Alto Contraste */
input[type="text"],
input[type="password"],
input[type="number"],
input[type="datetime-local"],
select,
textarea {
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background-color: var(--input-bg);
  color: var(--text-main);
  padding: 0 12px;
  font-size: 14px;
  transition: border-color 0.15s;
}

body.light-mode input,
body.light-mode select,
body.light-mode textarea {
  color: #090d16 !important;
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--border-focus);
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.badge-success {
  background-color: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-warning {
  background-color: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.badge-danger {
  background-color: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.badge-info {
  background-color: rgba(37, 99, 235, 0.15);
  color: #3b82f6;
  border: 1px solid rgba(37, 99, 235, 0.3);
}

/* Tabelas Padronizadas com Rolagem Horizontal Suave */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background-color: var(--bg-card);
}

table.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 14px;
}

table.data-table th {
  background-color: rgba(15, 23, 42, 0.6);
  color: var(--text-muted);
  font-weight: 700;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
}

body.light-mode table.data-table th {
  background-color: #f1f5f9;
  color: #090d16 !important;
}

table.data-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-main);
}

body.light-mode table.data-table td {
  color: #090d16 !important;
}

table.data-table tr:last-child td {
  border-bottom: none;
}

table.data-table tr:hover td {
  background-color: var(--bg-card-hover);
}

/* Modais Universais */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(2, 6, 23, 0.85);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.modal-overlay.active {
  display: flex;
}

.modal-content {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  max-width: 620px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 35px -5px rgba(0, 0, 0, 0.7);
  padding: 24px;
}

/* ======================================================================
   TELA DE LOGIN FUTURISTA COM LOGOTIPO 3D
   ====================================================================== */
.login-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle at 50% 30%, rgba(37, 99, 235, 0.25) 0%, rgba(6, 9, 17, 0.98) 70%);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.login-card {
  width: 92%;
  max-width: 440px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 20px;
  padding: 36px 32px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), var(--glow-cyan);
  position: relative;
  overflow: hidden;
}

body.light-mode .login-card {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #cbd5e1;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

.login-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #2563eb, #38bdf8, #10b981);
}

.login-logo-wrap {
  width: 68px;
  height: 68px;
  margin: 0 auto 16px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 8px 16px rgba(37, 99, 235, 0.5));
}

.login-logo-wrap img {
  width: 100%;
  height: 100%;
}

.login-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-main);
  text-align: center;
  margin-bottom: 6px;
}

.login-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 24px;
}

/* ======================================================================
   REGRAS RIGOROSAS MOBILE (@media max-width: 768px)
   ====================================================================== */
@media (max-width: 768px) {
  .app-container {
    padding: 14px 12px 60px 12px;
  }

  .global-header-inner {
    padding: 8px 12px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .header-nav {
    width: 100%;
    order: 3;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: 6px;
    gap: 6px;
  }

  .header-nav .nav-btn {
    min-height: 42px;
    height: 42px;
    padding: 0 12px;
    font-size: 13px;
    flex-shrink: 0;
  }

  .header-actions {
    gap: 6px;
  }

  .header-action-btn {
    min-height: 38px;
    height: 38px;
    padding: 0 10px;
    font-size: 12px;
  }

  .fila-metrics-grid,
  .metrics-grid-7,
  .metrics-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .wpp-preview-col,
  .wpp-preview-wrap,
  .wpp-mockup-container {
    width: 100% !important;
    max-width: 340px !important;
    margin: 0 auto !important;
  }

  .sectors-grid,
  .capa-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* CAIXA PEQUENA DE LOGIN NO CANTO DIREITO SUPERIOR */
.header-right-area {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.top-corner-box {
  background: var(--bg-card);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 9px;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.light-mode .top-corner-box {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.corner-login-title {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  color: #38bdf8;
  white-space: nowrap;
}

body.light-mode .corner-login-title {
  color: #2563eb;
}

.corner-login-form {
  display: flex;
  align-items: center;
  gap: 5px;
}

.corner-login-form input {
  height: 28px !important;
  font-size: 11px !important;
  padding: 0 7px !important;
  border-radius: 6px !important;
  border: 1px solid var(--border-color) !important;
  background: var(--input-bg) !important;
  color: var(--text-main) !important;
}

#mini-login-user {
  width: 170px !important;
}

.corner-pass-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

#mini-login-pass {
  width: 95px !important;
  padding-right: 22px !important;
}

.corner-eye-btn {
  position: absolute;
  right: 4px;
  background: transparent;
  border: none;
  font-size: 12px;
  cursor: pointer;
  color: var(--text-muted);
}

.btn-corner-login {
  height: 28px;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 800;
  border-radius: 6px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.btn-corner-login:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
  box-shadow: 0 0 8px rgba(37, 99, 235, 0.5);
}

.top-corner-logged {
  border-color: #f59e0b;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(37, 99, 235, 0.12));
}

.master-user-txt {
  font-size: 12px;
  font-weight: 800;
  color: #f59e0b;
  display: flex;
  align-items: center;
  gap: 4px;
}

.inviolavel-tag {
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid #f59e0b;
  color: #f59e0b;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 4px;
}

.header-quick-tools {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* BOTÃO EXPANDIR / RECOLHER COMPACTO 38x38px */
.btn-expand-header {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  padding: 0 !important;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-main);
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0 !important;
}

.btn-expand-header:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent-blue);
  transform: scale(1.05);
}

/* ======================================================================
   MODO RECOLHIDO (COMPACTO) - OS BOTÕES NUNCA SOMEM DA TELA
   TAMANHO QUADRADO 38x38px IDÊNTICO AO BOTÃO DE RECOLHER/EXPANDIR
   ====================================================================== */
.global-header.nav-mode-compact .nav-btn {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  padding: 0 !important;
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  gap: 0 !important;
  flex-shrink: 0 !important;
}

.global-header.nav-mode-compact .nav-btn .nav-icon {
  font-size: 18px !important;
  margin: 0 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.global-header.nav-mode-compact .nav-btn .nav-label-box {
  display: none !important;
}

/* Modo expandido (padrão) */
.global-header:not(.nav-mode-compact) .nav-btn {
  height: 40px;
  min-height: 40px;
  padding: 0 10px;
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center;
  gap: 7px;
}

.global-header:not(.nav-mode-compact) .nav-btn .nav-label-box {
  display: inline-flex !important;
}

/* BLINDAGEM TOTAL: NENHUMA REGRA OCULTA A BARRA DE NAVEGAÇÃO */
.global-header .header-nav,
.global-header.nav-mode-compact .header-nav,
.global-header.header-nav-collapsed .header-nav {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* BOTÃO DESTACADO ENTRAR AO LADO DA LUA */
.btn-entrar-destaque {
  height: 36px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.4);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.btn-entrar-destaque:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.6);
}

/* BANNER MODO VITRINE COMERCIAL */
.banner-propaganda-vitrine {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.15), rgba(16, 185, 129, 0.15));
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 12px;
  padding: 12px 18px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

body.light-mode .banner-propaganda-vitrine {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(16, 185, 129, 0.08));
  border-color: rgba(37, 99, 235, 0.25);
  color: #090d16;
}

/* ======================================================================
   BLINDAGEM DO CABEÇALHO COMPACTO (38x38px) E MODO DICAS INTERATIVO
   ====================================================================== */
.global-header.nav-mode-compact .header-action-btn {
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
}

.global-header.nav-mode-compact .header-action-btn .action-btn-text {
  display: none !important;
}

/* Tooltip elegante em botões compactos */
.global-header.nav-mode-compact .nav-btn {
  position: relative;
}

.global-header.nav-mode-compact .nav-btn:hover::after {
  content: attr(data-nav-name);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #0f172a;
  border: 1px solid var(--border-color);
  color: #ffffff;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  z-index: 10000;
}

/* MODO DICAS INTERATIVO (LÂMPADA BRILHANTE) */
#header-tips-btn.modo-dicas-ativo {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(217, 119, 6, 0.35)) !important;
  border-color: #f59e0b !important;
  color: #f59e0b !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.6) !important;
}

#header-tips-btn.modo-dicas-ativo span:first-child {
  filter: drop-shadow(0 0 8px #f59e0b);
  animation: dicasPulse 1.2s infinite alternate ease-in-out;
}

@keyframes dicasPulse {
  from { transform: scale(1); filter: drop-shadow(0 0 4px #f59e0b); }
  to { transform: scale(1.18); filter: drop-shadow(0 0 12px #fbbf24); }
}

/* Balão Flutuante de Dicas */
#dicas-floating-balloon {
  position: fixed;
  z-index: 100000;
  pointer-events: none;
  max-width: 320px;
  padding: 12px 16px;
  border-radius: 10px;
  background: #090e1a;
  border: 1.5px solid #f59e0b;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 18px rgba(245, 158, 11, 0.35);
  color: #f8fafc;
  font-size: 12.5px;
  line-height: 1.5;
  transition: opacity 0.15s ease, transform 0.15s ease;
  opacity: 0;
  transform: translateY(6px);
}

body.light-mode #dicas-floating-balloon {
  background: #ffffff;
  border-color: #d97706;
  color: #0f172a;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 0 14px rgba(245, 158, 11, 0.25);
}

#dicas-floating-balloon.visible {
  opacity: 1;
  transform: translateY(0);
}

#dicas-floating-balloon .balloon-title {
  font-weight: 800;
  font-size: 13.5px;
  color: #fbbf24;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

body.light-mode #dicas-floating-balloon .balloon-title {
  color: #d97706;
}

/* ======================================================================
   BLINDAGEM TOTAL DO CABEÇALHO (ITEM 1 & 2 & 5)
   ====================================================================== */
#main-header-nav,
.header-nav,
.global-header #main-header-nav,
.global-header.nav-mode-compact #main-header-nav,
.global-header.header-nav-collapsed #main-header-nav {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  gap: 8px !important;
  align-items: center !important;
}

/* QUANDO RECOLHIDO (▼): OS BOTÕES DO MENU NUNCA SOMEM
   EXIBEM APENAS O ÍCONE, QUADRADOS 38x38px EXATAMENTE DO MESMO TAMANHO DO BOTÃO ▼ */
.global-header.nav-mode-compact #main-header-nav .nav-btn {
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 !important;
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  gap: 0 !important;
  flex-shrink: 0 !important;
}

.global-header.nav-mode-compact #main-header-nav .nav-btn .nav-icon {
  font-size: 18px !important;
  margin: 0 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.global-header.nav-mode-compact #main-header-nav .nav-btn .nav-label-box {
  display: none !important;
}

/* QUANDO EXPANDIDO (▲): ÍCONE + NOME ESCRITO LADO A LADO */
.global-header:not(.nav-mode-compact) #main-header-nav .nav-btn {
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 14px !important;
  width: auto !important;
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  gap: 8px !important;
}

.global-header:not(.nav-mode-compact) #main-header-nav .nav-btn .nav-label-box {
  display: inline-flex !important;
}

/* MODAL GLOBAL GENÉRICO PWA / GUIAS */
.modal-overlay-global {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal-card-global {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 24px;
  width: 100%;
  box-shadow: 0 20px 40px rgba(0,0,0,0.6);
  animation: modalPopIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalPopIn {
  from { opacity: 0; transform: scale(0.92) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* RESPONSIVIDADE MOBILE DA BARRA SUPERIOR */
@media (max-width: 768px) {
  .global-header-inner {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    justify-content: center !important;
  }
  .header-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
    overflow-x: visible !important;
    width: 100% !important;
  }
  .header-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }
  .header-brand-wrap {
    justify-content: center !important;
  }
}

/* ======================================================================
   RODAPÉ INSTITUCIONAL OFICIAL 2026
   ====================================================================== */
.footer-oficial-2026 {
  background: #040711;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 48px 24px 24px 24px;
  color: var(--text-main);
  margin-top: 60px;
}
body.light-mode .footer-oficial-2026 {
  background: #f1f5f9;
  border-top: 1px solid #cbd5e1;
  color: #090d16;
}
.footer-container {
  max-width: 1600px; width: 100%; box-sizing: border-box;
  margin: 0 auto;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-bottom: 36px;
}
@media (max-width: 992px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}
@media (max-width: 600px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 12px;
  color: var(--text-main);
}
.footer-brand strong {
  color: #10b981;
}
.footer-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 14px;
}
.footer-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid #10b981;
  color: #10b981;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}
.footer-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 14px;
  letter-spacing: -0.2px;
}
.footer-text {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
}
.footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 8px;
  line-height: 1.4;
}
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-links li a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 13px;
  transition: color 0.15s ease;
}
.footer-links li a:hover {
  color: #38bdf8;
  text-decoration: underline;
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--text-dim);
}
body.light-mode .footer-bottom {
  border-top-color: #cbd5e1;
  color: #64748b;
}
.footer-bottom-links {
  display: flex;
  gap: 8px;
}

/* ======================================================================
   RODAPÉ GLOBAL COMPACTO & ELEGANTE - CRIADO POR JOSÉ ANTÔNIO ROCHA
   ====================================================================== */
.footer-compacto-global {
  background: #040711;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 24px 20px 20px 20px;
  color: var(--text-main);
  margin-top: 50px;
  width: 100%;
}
body.light-mode .footer-compacto-global {
  background: #f1f5f9;
  border-top: 1px solid #cbd5e1;
  color: #090d16;
}
.footer-compact-inner {
  max-width: 1600px; width: 100%; box-sizing: border-box;
  margin: 0 auto;
}

/* Bloco Discreto de Anúncios */
.footer-anuncios-box {
  background: rgba(15, 23, 42, 0.7);
  border: 1px dashed rgba(56, 189, 248, 0.35);
  border-radius: 8px;
  padding: 10px 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-muted);
}
body.light-mode .footer-anuncios-box {
  background: rgba(241, 245, 249, 0.8);
  border-color: rgba(37, 99, 235, 0.3);
  color: #475569;
}
.anuncios-tag {
  background: rgba(37, 99, 235, 0.2);
  border: 1px solid #3b82f6;
  color: #38bdf8;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
body.light-mode .anuncios-tag {
  color: #2563eb;
  border-color: #2563eb;
}

.footer-compact-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
body.light-mode .footer-compact-grid {
  border-bottom-color: #e2e8f0;
}
.footer-compact-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}


.footer-compact-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 12px;
  font-size: 11.5px;
}
.footer-bottom-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.footer-bottom-nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 11.5px;
  transition: color 0.15s ease;
}
.footer-bottom-nav a:hover {
  color: #38bdf8;
  text-decoration: underline;
}

.footer-anuncios-box{display:none !important;}


    /* ESTILOS DA BARRA SIMÉTRICA DE 6 ABAS (ITEM 1.2) */
    .chips-subnav-bar {
      margin-bottom: 24px;
      padding: 6px;
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 12px;
    }

    .chips-subnav-grid-6 {
      display: grid !important;
      grid-template-columns: repeat(6, 1fr) !important;
      gap: 10px !important;
      width: 100% !important;
      align-items: center !important;
    }

    .subnav-btn {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 8px !important;
      height: 42px !important;
      padding: 0 10px !important;
      border-radius: 8px !important;
      font-size: 13px !important;
      font-weight: 700 !important;
      color: var(--text-muted) !important;
      text-decoration: none !important;
      background: transparent !important;
      border: 1px solid transparent !important;
      transition: all 0.2s ease !important;
      white-space: nowrap !important;
      box-sizing: border-box !important;
      width: 100% !important;
    }

    .subnav-btn:hover {
      background: rgba(255, 255, 255, 0.04) !important;
      color: var(--text-main) !important;
    }

    .subnav-btn.active {
      background: #3b82f6 !important;
      color: #ffffff !important;
      border-color: #3b82f6 !important;
      box-shadow: 0 2px 8px rgba(59, 130, 246, 0.35) !important;
    }

    @media (max-width: 992px) {
      .chips-subnav-grid-6 {
        grid-template-columns: repeat(3, 1fr) !important;
      }
    }
    @media (max-width: 600px) {
      .chips-subnav-grid-6 {
        grid-template-columns: repeat(2, 1fr) !important;
      }
    }




/* =========================================================================
   SIMETRIA MATEMÁTICA E LAYOUT MOBILE PWA (ANDROID & IPHONE) - 2026
   ========================================================================= */
@media (max-width: 768px) {
  /* 1. CABEÇALHO SUPERIOR SIMÉTRICO NO CELULAR */
  .global-header {
    padding: 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10000 !important;
  }

  .global-header-inner {
    display: flex !important;
    flex-direction: column !important;
    padding: 8px 10px !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  /* Linha 1 do Topo: Brand à esquerda + Ações à direita na mesma altura (38px) */
  .header-top-row-mobile {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 38px !important;
    height: 38px !important;
    gap: 8px !important;
  }

  .header-brand-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 38px !important;
    flex-shrink: 0 !important;
  }

  .header-brand {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    height: 38px !important;
  }

  .btn-expand-header {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 9px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
  }

  .header-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    height: 38px !important;
    margin: 0 !important;
  }

  .header-action-btn,
  .btn-logout-header,
  .btn-entrar-destaque {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 8px !important;
    border-radius: 9px !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  #header-theme-toggle {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
  }

  /* Linha 2 do Topo: Grade de 3 colunas iguais no Expandido ou Linha Única no Compacto */
  .header-nav {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .header-nav .nav-btn {
    width: 100% !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 2px 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }

  .header-nav .nav-name {
    font-size: 11px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .header-nav .nav-func {
    font-size: 9px !important;
    opacity: 0.8 !important;
    white-space: nowrap !important;
  }

  /* Quando Recolhido (nav-mode-compact no mobile): linha horizontal compacta com rolagem touch suave 38x38px */
  .global-header.nav-mode-compact .header-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 2px !important;
  }
  .global-header.nav-mode-compact .header-nav .nav-label-box { display: none !important; }

  /* 2. BARRA DAS 6 ABAS DE DISPARO EM GRADE 2x3 PERFEITA NO CELULAR */
  .chips-subnav-grid-6 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    margin-bottom: 18px !important;
    box-sizing: border-box !important;
  }

  .chips-subnav-grid-6 .subnav-btn {
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 6px !important;
    box-sizing: border-box !important;
    border-radius: 9px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* 3. OS 9 INDICADORES DO RELATÓRIO EM GRADE 3x3 PERFEITA NO CELULAR */
  .report-kpi-grid-9 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    margin-bottom: 18px !important;
    box-sizing: border-box !important;
  }

  .report-kpi-grid-9 .kpi-card {
    height: 88px !important;
    min-height: 88px !important;
    padding: 8px 6px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .report-kpi-grid-9 .kpi-num {
    font-size: 20px !important;
    line-height: 1.1 !important;
  }

  .report-kpi-grid-9 .kpi-label {
    font-size: 10px !important;
    line-height: 1.2 !important;
    margin-top: 4px !important;
  }

  /* 4. OS 4 CHIPS E OS 4 GRUPOS EM GRADE 2x2 OU CARTÕES SIMÉTRICOS */
  .chips-grid-cards,
  .grupos-grid-cards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .chip-card-pro,
  .grupo-card {
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
    padding: 12px !important;
  }

  .chip-card-pro .chip-btn-row,
  .grupo-card .grupo-btn-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 10px !important;
  }

  .chip-card-pro button,
  .grupo-card button {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* 5. ETAPA 5 DO DISPARADOR NO CELULAR: CARTÕES SIMÉTRICOS */
  .etapa5-chips-dist-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .etapa5-chip-row-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px !important;
    border-radius: 10px !important;
    border: 1px solid var(--border-color) !important;
    background: var(--input-bg) !important;
    box-sizing: border-box !important;
  }

  .etapa5-chip-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .etapa5-badges-grid-mobile {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .etapa5-input-wrap-mobile {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .etapa5-input-wrap-mobile input {
    width: 100% !important;
    height: 42px !important;
    text-align: center !important;
    font-size: 15px !important;
  }

  /* 6. DROPDOWNS E FLUTUANTES NO CELULAR */
  .dropdown-menu-flutuante,
  .dropdown-corretores-modal,
  .lista-corretores-box {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 90vw !important;
    max-width: 380px !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    z-index: 999999 !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8) !important;
  }

  /* 7. SCROLLBARS FINAS */
  ::-webkit-scrollbar {
    width: 5px !important;
    height: 5px !important;
  }
  ::-webkit-scrollbar-thumb {
    background: #334155 !important;
    border-radius: 4px !important;
  }
}


/* =========================================================================
   PALETA OFICIAL E COMPLETA DO TEMA CLARO (LIGHT MODE) - ALTO CONTRASTE
   ========================================================================= */
body.light-mode,
[data-theme="light"],
body[data-theme="light"] {
  --bg-main: #f1f5f9 !important;
  --bg-body: #f1f5f9 !important;
  --bg-card: #ffffff !important;
  --card-bg: #ffffff !important;
  --bg-card-hover: #f8fafc !important;
  --header-bg: rgba(255, 255, 255, 0.96) !important;
  --header-border: #cbd5e1 !important;
  --border-color: #cbd5e1 !important;
  --text-main: #0f172a !important;
  --text-muted: #475569 !important;
  --text-dim: #64748b !important;
  --input-bg: #f8fafc !important;
  --input-border: #94a3b8 !important;
  --shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

body.light-mode .step-box,
body.light-mode .oa-card,
body.light-mode .chip-card-pro,
body.light-mode .kpi-card,
body.light-mode .chips-subnav-bar,
body.light-mode .live-return-box,
body.light-mode .evolution-panel-box {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;
  color: #0f172a !important;
}

body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode .step-heading,
body.light-mode strong {
  color: #0f172a !important;
}

body.light-mode input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.light-mode select,
body.light-mode textarea {
  background-color: #f8fafc !important;
  border: 1px solid #94a3b8 !important;
  color: #0f172a !important;
}

body.light-mode input::placeholder,
body.light-mode textarea::placeholder {
  color: #64748b !important;
}

body.light-mode .subnav-btn {
  background-color: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

body.light-mode .subnav-btn.active {
  background-color: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
}

body.light-mode .badge-green-theme,
body.light-mode .badge-success {
  background-color: #dcfce7 !important;
  color: #16a34a !important;
  border: 1px solid #16a34a !important;
}

body.light-mode .badge-red-theme,
body.light-mode .badge-danger {
  background-color: #fee2e2 !important;
  color: #dc2626 !important;
  border: 1px solid #dc2626 !important;
}

body.light-mode .badge-yellow-theme,
body.light-mode .badge-warning {
  background-color: #fef3c7 !important;
  color: #d97706 !important;
  border: 1px solid #d97706 !important;
}

body.light-mode .badge-blue-theme,
body.light-mode .badge-info {
  background-color: #dbeafe !important;
  color: #2563eb !important;
  border: 1px solid #2563eb !important;
}

body.light-mode table thead tr {
  background-color: #f1f5f9 !important;
  color: #475569 !important;
  border-bottom: 1px solid #cbd5e1 !important;
}

body.light-mode table tbody tr {
  border-bottom: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}

body.light-mode .chip-quota-row {
  background-color: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

/* =========================================================================
   ETAPA 1: CONTROLE GLOBAL DE TAMANHO DE FONTE EM 4 NIVEIS (--font-scale)
   ========================================================================= */
:root {
  --font-scale: 1;
}
html[data-font-level="1"], body[data-font-level="1"] { --font-scale: 1; }
html[data-font-level="2"], body[data-font-level="2"] { --font-scale: 1.12; }
html[data-font-level="3"], body[data-font-level="3"] { --font-scale: 1.24; }
html[data-font-level="4"], body[data-font-level="4"] { --font-scale: 1.36; }

*, *::before, *::after {
  box-sizing: border-box;
  overflow-wrap: break-word;
}

/* Controle Compacto no Cabeçalho Superior ("Aa" + Barrinha de 4 Níveis) */
.header-font-control {
  height: 36px !important;
  padding: 0 8px !important;
  border-radius: 8px !important;
  border: 1px solid var(--border-color) !important;
  background-color: var(--bg-card) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  user-select: none !important;
}
body.light-mode .header-font-control {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
}

.font-cycle-btn {
  background: transparent !important;
  border: none !important;
  color: var(--text-main) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 2px 4px !important;
  border-radius: 6px !important;
  font-weight: 800 !important;
  transition: background 0.15s ease !important;
}
.font-cycle-btn:hover {
  background: rgba(37, 99, 235, 0.14) !important;
}
.font-aa-icon {
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: -0.5px !important;
  color: #38bdf8 !important;
}
body.light-mode .font-aa-icon {
  color: #2563eb !important;
}
.font-pct-badge {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  color: var(--text-muted) !important;
  min-width: 30px !important;
  text-align: center !important;
}

.font-volume-bars {
  display: inline-flex !important;
  align-items: flex-end !important;
  gap: 3px !important;
  height: 20px !important;
  padding: 2px 2px !important;
}
.font-bar-step {
  width: 6px !important;
  border-radius: 2px !important;
  border: 1px solid rgba(148, 163, 184, 0.45) !important;
  background: rgba(148, 163, 184, 0.25) !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: all 0.15s ease !important;
}
body.light-mode .font-bar-step {
  border-color: #94a3b8 !important;
  background: #e2e8f0 !important;
}
.font-bar-step.bar-lvl-1 { height: 8px !important; }
.font-bar-step.bar-lvl-2 { height: 11px !important; }
.font-bar-step.bar-lvl-3 { height: 14px !important; }
.font-bar-step.bar-lvl-4 { height: 18px !important; }

.font-bar-step.active {
  background: linear-gradient(180deg, #38bdf8, #2563eb) !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 6px rgba(37, 99, 235, 0.45) !important;
}
body.light-mode .font-bar-step.active {
  background: #2563eb !important;
  border-color: #1d4ed8 !important;
}
.font-bar-step:hover {
  transform: scaleY(1.12) !important;
  border-color: #38bdf8 !important;
}

/* Aplicação inteligente da escala (--font-scale) nos textos pequenos, tabelas, listas, inputs e selos */
body[data-font-level="2"] table th,
body[data-font-level="3"] table th,
body[data-font-level="4"] table th {
  font-size: clamp(11px, calc(11.5px * var(--font-scale, 1)), 15.5px) !important;
}
body[data-font-level="2"] table td,
body[data-font-level="3"] table td,
body[data-font-level="4"] table td {
  font-size: clamp(12px, calc(13px * var(--font-scale, 1)), 17.5px) !important;
}
body[data-font-level="2"] p,
body[data-font-level="3"] p,
body[data-font-level="4"] p,
body[data-font-level="2"] label,
body[data-font-level="3"] label,
body[data-font-level="4"] label,
body[data-font-level="2"] .lista-scroll-item,
body[data-font-level="3"] .lista-scroll-item,
body[data-font-level="4"] .lista-scroll-item,
body[data-font-level="2"] .grupo-rep-row,
body[data-font-level="3"] .grupo-rep-row,
body[data-font-level="4"] .grupo-rep-row {
  font-size: clamp(12px, calc(13px * var(--font-scale, 1)), 17.5px) !important;
}
body[data-font-level="2"] input:not([type="checkbox"]):not([type="radio"]),
body[data-font-level="3"] input:not([type="checkbox"]):not([type="radio"]),
body[data-font-level="4"] input:not([type="checkbox"]):not([type="radio"]),
body[data-font-level="2"] select,
body[data-font-level="3"] select,
body[data-font-level="4"] select,
body[data-font-level="2"] textarea,
body[data-font-level="3"] textarea,
body[data-font-level="4"] textarea {
  font-size: clamp(13px, calc(13.5px * var(--font-scale, 1)), 18px) !important;
}
body[data-font-level="2"] .badge,
body[data-font-level="3"] .badge,
body[data-font-level="4"] .badge,
body[data-font-level="2"] .status-chip-badge,
body[data-font-level="3"] .status-chip-badge,
body[data-font-level="4"] .status-chip-badge {
  font-size: clamp(11px, calc(11.5px * var(--font-scale, 1)), 15px) !important;
}
body[data-font-level="2"] .subnav-btn,
body[data-font-level="3"] .subnav-btn,
body[data-font-level="4"] .subnav-btn {
  font-size: clamp(12px, calc(13px * var(--font-scale, 1)), 15.5px) !important;
}
/* Títulos grandes e botões principais travados com clamp() para não comer espaço */
h1 { font-size: clamp(20px, calc(22px * var(--font-scale, 1)), 28px); }
h2 { font-size: clamp(18px, calc(20px * var(--font-scale, 1)), 25px); }
h3, .step-heading { font-size: clamp(15px, calc(16px * var(--font-scale, 1)), 20px); }

/* =========================================================================
   ETAPA 2: ORDENACAO CLICAVEL (A-Z / Z-A E VALORES) EM TODAS AS LISTAS
   ========================================================================= */
th.sortable-col,
table thead th[data-sort-col],
table thead th.th-ordenavel {
  cursor: pointer !important;
  user-select: none !important;
  position: relative !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}
th.sortable-col:hover,
table thead th[data-sort-col]:hover,
table thead th.th-ordenavel:hover {
  background-color: rgba(37, 99, 235, 0.12) !important;
  color: #38bdf8 !important;
}
body.light-mode th.sortable-col:hover,
body.light-mode table thead th[data-sort-col]:hover,
body.light-mode table thead th.th-ordenavel:hover {
  background-color: #dbeafe !important;
  color: #2563eb !important;
}
.th-sort-indicator {
  display: inline-block !important;
  margin-left: 4px !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  opacity: 0.55 !important;
  color: currentColor !important;
}
th.sort-active .th-sort-indicator {
  opacity: 1 !important;
  color: #10b981 !important;
}
body.light-mode th.sort-active .th-sort-indicator {
  color: #2563eb !important;
}

/* =========================================================================
   ETAPA 3: CORRECAO DOS BOTOES DE "ACAO" NA LISTA DE CORRETORES (ZERO BAGUNCA)
   ========================================================================= */
.corretor-actions-td {
  padding: 6px 10px !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}
.corretor-actions-flex {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.btn-corretor-action {
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

/* =========================================================================
   PADRONIZACAO VISUAL PREMIUM SAAS: CABECALHO FIXO 68PX + ICONES SVG + RODAPE
   ========================================================================= */
.global-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  height: 68px !important;
  min-height: 68px !important;
  display: flex !important;
  align-items: center !important;
  background: var(--header-bg) !important;
  backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid var(--header-border) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}
body.light-mode .global-header,
[data-theme="light"] .global-header {
  background: rgba(255, 255, 255, 0.98) !important;
  border-bottom: 1px solid #cbd5e1 !important;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06) !important;
}

.global-header-inner {
  max-width: 1640px !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

/* Oculta qualquer botão antigo de recolher cabeçalho */
.btn-expand-header,
#header-expand-toggle {
  display: none !important;
}

.svg-icon-saas {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

.nav-btn .nav-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
}

/* Rodapé Institucional Padronizado (Sem botão de instalar app embaixo) */
.btn-footer-pwa-mobile {
  display: none !important;
}

.footer-institucional-saas {
  width: 100%;
  margin-top: 44px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(9, 13, 22, 0.98));
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  padding: 28px 20px 24px;
  color: var(--text-muted);
  box-sizing: border-box;
}
body.light-mode .footer-institucional-saas,
[data-theme="light"] .footer-institucional-saas {
  background: #ffffff !important;
  border-top: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}

.footer-institucional-inner {
  max-width: 1360px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.footer-institucional-title {
  font-size: 14.5px;
  font-weight: 800;
  color: #f8fafc;
  letter-spacing: -0.2px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
body.light-mode .footer-institucional-title,
[data-theme="light"] .footer-institucional-title {
  color: #0f172a !important;
}

.footer-institucional-desc {
  max-width: 980px;
  font-size: 12.5px;
  line-height: 1.65;
  color: #94a3b8;
  font-weight: 500;
}
body.light-mode .footer-institucional-desc,
[data-theme="light"] .footer-institucional-desc {
  color: #475569 !important;
}

.footer-institucional-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.footer-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  background: rgba(30, 41, 59, 0.75);
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: #e2e8f0;
}
body.light-mode .footer-status-pill,
[data-theme="light"] .footer-status-pill {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

/* Sub-banner executivo discreto para os subdomínios */
.subdomain-hero-strip {
  max-width: 1600px;
  margin: 0 auto 14px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(30, 41, 59, 0.88));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  gap: 16px;
  position: relative;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}
body.light-mode .subdomain-hero-strip,
[data-theme="light"] .subdomain-hero-strip {
  background: linear-gradient(135deg, #ffffff, #f8fafc) !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06) !important;
}
@media (max-width: 768px) {
  .global-header {
    height: auto !important;
    min-height: 60px !important;
    padding: 6px 0 !important;
  }
  .global-header-inner {
    flex-wrap: wrap !important;
    padding: 4px 12px !important;
    gap: 8px !important;
  }
}





/* ==========================================================================
   REESTRUTURAÇÃO MOBILE PREMIUM SAAS & DIRETRIZES PWA ALTERNAZAP
   ========================================================================== */

/* 1. Regra Global Anti-Rolagem Lateral */
html, body {
  max-width: 100vw !important;
  overflow-x: hidden !important;
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

/* 2. Área de Toque & Feedback Tátil */
button, .btn, .subnav-btn, .sub-tab-btn, .subtab-btn, .tab-nav-btn, a {
  touch-action: manipulation;
}

/* 3. Adaptação do Cabeçalho Fixo em 2 Linhas Harmônicas no Mobile */
@media (max-width: 768px) {
  .global-header {
    height: auto !important;
    min-height: 94px !important;
    padding: 8px 10px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
  }

  .global-header-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .global-header-row-1 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .global-header-row-2 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 6px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 2px !important;
  }

  .global-header-row-2::-webkit-scrollbar {
    display: none !important;
  }

  /* Tamanhos e Botões Adaptados na Linha 1 */
  .header-brand .brand-title {
    font-size: 17px !important;
  }

  .header-brand .brand-icon-3d {
    width: 28px !important;
    height: 28px !important;
  }

  .header-nav {
    display: flex !important;
    gap: 6px !important;
  }

  .nav-btn {
    padding: 6px 10px !important;
    height: 34px !important;
    font-size: 12px !important;
  }

  .nav-btn .nav-label-box .nav-func {
    display: none !important;
  }

  /* Botão App PWA */
  .header-pwa-btn {
    background: linear-gradient(135deg, rgba(37,99,235,0.25), rgba(56,189,248,0.2)) !important;
    border: 1px solid rgba(56,189,248,0.5) !important;
    color: #38bdf8 !important;
    height: 34px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
  }

  body.light-mode .header-pwa-btn,
  [data-theme="light"] .header-pwa-btn {
    background: #e0f2fe !important;
    border-color: #38bdf8 !important;
    color: #0284c7 !important;
  }

  /* Linha 2 de Controles */
  .header-font-control {
    padding: 2px 6px !important;
    height: 32px !important;
  }

  .font-cycle-btn {
    padding: 2px 5px !important;
    font-size: 11px !important;
  }

  .header-action-btn {
    height: 32px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
  }

  .user-badge-header {
    height: 32px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  .btn-criar-usr-header,
  .btn-logout-header {
    height: 32px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }
}

/* Desktop: Header em Linha Única Harmônica */
@media (min-width: 769px) {
  .global-header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    width: 100% !important;
  }

  .global-header-row-1 {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
  }

  .global-header-row-2 {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .header-pwa-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 38px !important;
    padding: 0 12px !important;
    border-radius: 9px !important;
    font-weight: 800 !important;
    font-size: 12.5px !important;
    background: rgba(37,99,235,0.15) !important;
    border: 1px solid rgba(56,189,248,0.4) !important;
    color: #38bdf8 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
  }

  .header-pwa-btn:hover {
    background: rgba(37,99,235,0.3) !important;
    border-color: #38bdf8 !important;
    transform: translateY(-1px) !important;
  }

  body.light-mode .header-pwa-btn,
  [data-theme="light"] .header-pwa-btn {
    background: #e0f2fe !important;
    border-color: #38bdf8 !important;
    color: #0284c7 !important;
  }
}

/* 4. Grade Simétrica 2x3 para as 6 Abas nos Subdomínios (46px Altura Uniforme) */
@media (max-width: 768px) {
  .chips-subnav-grid-6,
  .sub-nav-bar,
  .disparador-subtabs-nav,
  .six-tabs-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px 0 16px 0 !important;
    padding: 4px 0 !important;
    box-sizing: border-box !important;
  }

  .chips-subnav-grid-6 > a,
  .chips-subnav-grid-6 > button,
  .sub-nav-bar > a,
  .sub-nav-bar > button,
  .disparador-subtabs-nav > a,
  .disparador-subtabs-nav > button,
  .six-tabs-container > a,
  .six-tabs-container > button,
  .subnav-btn,
  .sub-tab-btn,
  .subtab-btn,
  .tab-nav-btn {
    min-height: 46px !important;
    height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 0 8px !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }
}

/* 5. Prevenção de Zoom Automático Safari iOS (16px em Inputs e Selects) */
@media (max-width: 768px) {
  input[type="text"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="email"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* 6. Mini-Cartões Simétricos de Corretores no Mobile (Disparo Smart & Oferta Ativa) */
@media (max-width: 768px) {
  #lista-corretores-tbody tr {
    display: block !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    margin-bottom: 10px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
  }

  #lista-corretores-tbody tr td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 4px 0 !important;
    border: none !important;
    text-align: left !important;
  }

  #lista-corretores-tbody tr td:first-child {
    font-size: 11px !important;
    text-transform: uppercase !important;
    color: var(--text-muted) !important;
    border-bottom: 1px dashed var(--border-color) !important;
    padding-bottom: 6px !important;
    margin-bottom: 6px !important;
  }

  #lista-corretores-tbody .corretor-actions-flex {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    margin-top: 8px !important;
    width: 100% !important;
  }

  #lista-corretores-tbody .btn-corretor-action {
    width: 100% !important;
    min-height: 38px !important;
    font-size: 12px !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 6px 4px !important;
    display: flex !important;
    align-items: center !important;
  }
}

/* 7. Modais Centralizados e Responsivos */
@media (max-width: 768px) {
  .modal-card-global,
  .modal-dialog,
  .modal-box,
  .modal-content,
  .dialog-card {
    width: 94vw !important;
    max-width: 94vw !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
    border-radius: 16px !important;
    padding: 18px 16px !important;
  }
}