/* ==========================================================================
   Monitor Logístico Transpenna — sistema visual
   Base única de todas as páginas: cores, tipografia, estrutura (menu lateral,
   barra superior e cabeçalho) e componentes do Bootstrap. As folhas de cada
   módulo usam somente as variáveis definidas aqui.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   Variáveis
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;
  --fonte: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --fonte-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;

  /* Neutros */
  --c-fundo: #f3f4f7;
  --c-superficie: #ffffff;
  --c-superficie-2: #f9fafb;
  --c-superficie-3: #f2f4f7;
  --c-borda: #e4e7ec;
  --c-borda-forte: #d0d5dd;
  --c-divisor: #eef0f3;
  --c-texto: #101828;
  --c-texto-2: #344054;
  --c-suave: #667085;
  --c-fraco: #98a2b3;

  /* Marca */
  --c-marca: #cf450c;
  --c-marca-escura: #ad380a;
  --c-marca-viva: #f26a1b;
  --c-marca-suave: #fff4ed;
  --c-marca-borda: #fbd5bd;
  --c-marca-anel: rgba(242, 106, 27, 0.22);

  /* Situações */
  --c-rota: #175cd3;
  --c-rota-solido: #2e90fa;
  --c-rota-suave: #eff8ff;
  --c-rota-borda: #b2ddff;
  --c-cliente: #6927da;
  --c-cliente-solido: #875bf7;
  --c-cliente-suave: #f5f3ff;
  --c-cliente-borda: #ddd6fe;
  --c-ok: #067647;
  --c-ok-solido: #17b26a;
  --c-ok-suave: #ecfdf3;
  --c-ok-borda: #abefc6;
  --c-atencao: #b54708;
  --c-atencao-solido: #f79009;
  --c-atencao-suave: #fffaeb;
  --c-atencao-borda: #fedf89;
  --c-erro: #b42318;
  --c-erro-solido: #f04438;
  --c-erro-suave: #fef3f2;
  --c-erro-borda: #fecdca;
  --c-info: #0e7090;
  --c-info-solido: #06aed4;
  --c-info-suave: #ecfdff;
  --c-info-borda: #a5f0fc;
  --c-neutro: #475467;
  --c-neutro-solido: #667085;
  --c-neutro-suave: #f2f4f7;
  --c-neutro-borda: #e4e7ec;

  --c-borda-cartao: rgba(16, 24, 40, 0.07);
  --c-atencao-texto: #93370d;
  --c-topo: rgba(255, 255, 255, 0.82);
  --c-sombra-pessoa: 80% 93%;

  /* Menu lateral */
  --menu-fundo: #0c111d;
  --menu-fundo-2: #161b26;
  --menu-borda: #1f242f;
  --menu-texto: #cecfd2;
  --menu-suave: #85888e;
  --menu-largura: 256px;
  --menu-trilho: 72px;
  --topo-altura: 60px;

  /* Forma */
  --raio-xs: 6px;
  --raio-sm: 9px;
  --raio: 16px;
  --raio-lg: 20px;
  --sombra-xs: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 14px -6px rgba(16, 24, 40, 0.07);
  --sombra-cartao-hover: 0 2px 4px rgba(16, 24, 40, 0.04), 0 16px 32px -12px rgba(16, 24, 40, 0.16);
  --gradiente-marca: linear-gradient(135deg, #f7843e 0%, #e85d1c 45%, #c93d0b 100%);
  --gradiente-destaque:
    radial-gradient(560px 280px at 100% 0%, rgba(242, 106, 27, 0.45), transparent 62%),
    radial-gradient(520px 260px at -5% 120%, rgba(46, 144, 250, 0.22), transparent 60%),
    linear-gradient(135deg, #0b1220 0%, #111a2c 55%, #1e1611 100%);
  --sombra-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --sombra-md: 0 4px 8px -2px rgba(16, 24, 40, 0.08), 0 2px 4px -2px rgba(16, 24, 40, 0.04);
  --sombra-lg: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
  --sombra-xl: 0 24px 48px -12px rgba(16, 24, 40, 0.18);
  --anel-foco: 0 0 0 4px var(--c-marca-anel);
  --transicao: 0.16s ease;

  /* Bootstrap */
  --bs-body-font-family: var(--fonte);
  --bs-body-font-size: 0.875rem;
  --bs-body-color: var(--c-texto-2);
  --bs-body-bg: var(--c-fundo);
  --bs-emphasis-color: var(--c-texto);
  --bs-secondary-color: var(--c-suave);
  --bs-border-color: var(--c-borda);
  --bs-border-radius: var(--raio-sm);
  --bs-border-radius-sm: var(--raio-xs);
  --bs-border-radius-lg: var(--raio);
  --bs-primary: var(--c-marca);
  --bs-primary-rgb: 207, 69, 12;
  --bs-link-color: var(--c-marca);
  --bs-link-color-rgb: 207, 69, 12;
  --bs-link-hover-color: var(--c-marca-escura);
  --bs-link-hover-color-rgb: 173, 56, 10;
  --bs-focus-ring-color: var(--c-marca-anel);
  --bs-heading-color: var(--c-texto);
}

/* Áreas que continuam claras no modo escuro (relatório, imagem PNG, prévia de e-mail) */
.tema-claro {
  color-scheme: light;
  --c-fundo: #f3f4f7;
  --c-superficie: #ffffff;
  --c-superficie-2: #f9fafb;
  --c-superficie-3: #f2f4f7;
  --c-borda: #e4e7ec;
  --c-borda-forte: #d0d5dd;
  --c-divisor: #eef0f3;
  --c-texto: #101828;
  --c-texto-2: #344054;
  --c-suave: #667085;
  --c-fraco: #98a2b3;
  --c-marca: #cf450c;
  --c-marca-escura: #ad380a;
  --c-marca-suave: #fff4ed;
  --c-marca-borda: #fbd5bd;
  --c-rota: #175cd3;
  --c-rota-suave: #eff8ff;
  --c-ok: #067647;
  --c-ok-suave: #ecfdf3;
  --c-atencao: #b54708;
  --c-atencao-suave: #fffaeb;
  --c-erro: #b42318;
  --c-erro-suave: #fef3f2;
  --c-atencao-texto: #93370d;
  color: var(--c-texto-2);
}

/* --------------------------------------------------------------------------
   Modo escuro (botão na barra superior; segue o sistema até a primeira escolha)
   -------------------------------------------------------------------------- */
:root[data-tema="escuro"] {
  color-scheme: dark;
  --c-fundo: #0a0e16;
  --c-superficie: #111725;
  --c-superficie-2: #151c2b;
  --c-superficie-3: #1c2435;
  --c-borda: #252f42;
  --c-borda-forte: #334058;
  --c-divisor: #1e2738;
  --c-texto: #f3f5f8;
  --c-texto-2: #cdd3de;
  --c-suave: #929db0;
  --c-fraco: #6a768b;
  --c-marca: #f47b2f;
  --c-marca-escura: #ff9b5e;
  --c-marca-suave: rgba(242, 106, 27, 0.14);
  --c-marca-borda: rgba(242, 106, 27, 0.4);
  --c-marca-anel: rgba(242, 106, 27, 0.3);
  --c-rota: #84caff;
  --c-rota-suave: rgba(46, 144, 250, 0.14);
  --c-rota-borda: rgba(46, 144, 250, 0.38);
  --c-cliente: #c3b5fd;
  --c-cliente-suave: rgba(135, 91, 247, 0.16);
  --c-cliente-borda: rgba(135, 91, 247, 0.42);
  --c-ok: #75e0a7;
  --c-ok-suave: rgba(23, 178, 106, 0.14);
  --c-ok-borda: rgba(23, 178, 106, 0.38);
  --c-atencao: #fdc759;
  --c-atencao-suave: rgba(247, 144, 9, 0.14);
  --c-atencao-borda: rgba(247, 144, 9, 0.38);
  --c-erro: #fda29b;
  --c-erro-suave: rgba(240, 68, 56, 0.14);
  --c-erro-borda: rgba(240, 68, 56, 0.4);
  --c-info: #67e3f9;
  --c-info-suave: rgba(6, 174, 212, 0.14);
  --c-info-borda: rgba(6, 174, 212, 0.38);
  --c-neutro: #cdd3de;
  --c-neutro-suave: rgba(255, 255, 255, 0.06);
  --c-neutro-borda: #334058;
  --c-borda-cartao: rgba(255, 255, 255, 0.07);
  --c-atencao-texto: #fdc759;
  --c-topo: rgba(10, 14, 22, 0.78);
  --sombra-xs: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 14px -6px rgba(0, 0, 0, 0.5);
  --sombra-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --sombra-md: 0 4px 10px -2px rgba(0, 0, 0, 0.5);
  --sombra-lg: 0 12px 24px -6px rgba(0, 0, 0, 0.6);
  --sombra-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.7);
  --sombra-cartao-hover: 0 2px 4px rgba(0, 0, 0, 0.4), 0 18px 36px -12px rgba(0, 0, 0, 0.7);
  --bs-body-color: var(--c-texto-2);
  --bs-body-bg: var(--c-fundo);
  --bs-border-color: var(--c-borda);
  --bs-emphasis-color: var(--c-texto);
  --bs-secondary-color: var(--c-suave);
  --bs-heading-color: var(--c-texto);
  --bs-tertiary-bg: var(--c-superficie-2);
}
:root[data-tema="escuro"] body {
  background:
    radial-gradient(1100px 520px at 88% -260px, rgba(242, 106, 27, 0.12), transparent 62%),
    radial-gradient(900px 480px at 20% -300px, rgba(46, 144, 250, 0.1), transparent 60%),
    var(--c-fundo);
  background-attachment: fixed;
}
:root[data-tema="escuro"] .menu-lateral {
  --menu-fundo: #080b12;
  --menu-borda: #181e2a;
}
:root[data-tema="escuro"] .pessoa::before {
  background: hsl(var(--pessoa-matiz, 24) 45% 22%);
  color: hsl(var(--pessoa-matiz, 24) 85% 82%);
  box-shadow: inset 0 0 0 1px hsl(var(--pessoa-matiz, 24) 40% 32%);
}
:root[data-tema="escuro"] .header-dashboard {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.8);
}
:root[data-tema="escuro"] .form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23cdd3de' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
:root[data-tema="escuro"] .btn-close {
  filter: invert(1) grayscale(1) brightness(1.6);
}
:root[data-tema="escuro"] .modal-backdrop {
  --bs-backdrop-opacity: 0.7;
}
:root[data-tema="escuro"] ::-webkit-scrollbar-thumb {
  background-color: #334058;
}
:root[data-tema="escuro"] * {
  scrollbar-color: #334058 transparent;
}
:root[data-tema="escuro"] .tema-claro {
  border-radius: var(--raio);
}

/* Troca suave entre os temas */
.tema-trocando,
.tema-trocando * {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease !important;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(1100px 520px at 88% -260px, rgba(242, 106, 27, 0.09), transparent 62%),
    radial-gradient(900px 480px at 20% -300px, rgba(46, 144, 250, 0.07), transparent 60%),
    var(--c-fundo);
  background-attachment: fixed;
  color: var(--c-texto-2);
  font-family: var(--fonte);
  font-size: 14px;
  line-height: 1.5;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: var(--c-texto);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.3;
}
p {
  margin: 0 0 8px;
}
strong,
b {
  font-weight: 600;
}
a {
  color: var(--c-marca);
  text-decoration: none;
}
a:hover {
  color: var(--c-marca-escura);
}
small,
.small {
  font-size: 0.857em;
}
hr {
  margin: 24px 0;
  border: 0;
  border-top: 1px solid var(--c-borda);
  opacity: 1;
}
img {
  max-width: 100%;
}
::selection {
  background: rgba(242, 106, 27, 0.18);
  color: var(--c-texto);
}
:focus-visible {
  outline: 2px solid var(--c-marca-viva);
  outline-offset: 2px;
}
summary {
  cursor: pointer;
}
[hidden] {
  display: none !important;
}
.text-muted,
.form-text {
  color: var(--c-suave) !important;
}
.text-primary {
  color: var(--c-rota) !important;
}
.text-success {
  color: var(--c-ok) !important;
}
.text-warning {
  color: var(--c-atencao) !important;
}
.text-danger {
  color: var(--c-erro) !important;
}
.text-info {
  color: var(--c-info) !important;
}
.bi {
  vertical-align: -0.125em;
}
.numero,
.card-numero,
td,
th {
  font-variant-numeric: tabular-nums;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #cfd4dc transparent;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #cfd4dc;
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #98a2b3;
}

/* --------------------------------------------------------------------------
   Estrutura: menu lateral
   -------------------------------------------------------------------------- */
body.com-menu-lateral {
  padding-left: var(--menu-largura);
  transition: padding-left 0.2s ease;
}
.menu-lateral {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  width: var(--menu-largura);
  padding: 18px 12px 14px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(242, 106, 27, 0.12), transparent 55%),
    var(--menu-fundo);
  border-right: 1px solid var(--menu-borda);
  color: var(--menu-texto);
  scrollbar-color: #333741 transparent;
  transition: width 0.2s ease, transform 0.2s ease;
}
.menu-marca {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 0 6px 18px;
  color: #fff;
}
.marca-simbolo {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(145deg, #f7843e 0%, #e04f16 55%, #b93815 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 16px -4px rgba(224, 79, 22, 0.55);
}
.marca-simbolo svg {
  width: 20px;
  height: 20px;
}
.marca-texto {
  min-width: 0;
  line-height: 1.2;
}
.marca-texto strong {
  display: block;
  color: #fff;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.marca-texto small {
  display: block;
  margin-top: 2px;
  color: var(--menu-suave);
  font-size: 11.5px;
  font-weight: 500;
}
.menu-pesquisa {
  position: relative;
  margin: 0 0 14px;
}
.menu-pesquisa > .bi {
  position: absolute;
  top: 50%;
  left: 11px;
  color: var(--menu-suave);
  font-size: 14px;
  transform: translateY(-50%);
  pointer-events: none;
}
.menu-pesquisa input {
  width: 100%;
  height: 36px;
  padding: 0 52px 0 34px;
  border: 1px solid var(--menu-borda);
  border-radius: var(--raio-sm);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font: inherit;
  font-size: 13px;
  transition: border-color var(--transicao), background var(--transicao);
}
.menu-pesquisa input::placeholder {
  color: var(--menu-suave);
}
.menu-pesquisa input:focus {
  outline: 0;
  border-color: #475467;
  background: rgba(255, 255, 255, 0.07);
}
.menu-pesquisa kbd {
  position: absolute;
  top: 50%;
  right: 8px;
  padding: 2px 6px;
  border: 1px solid #333741;
  border-radius: 5px;
  background: transparent;
  color: var(--menu-suave);
  font-family: var(--fonte);
  font-size: 10.5px;
  font-weight: 500;
  transform: translateY(-50%);
  pointer-events: none;
}
.menu-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.menu-grupo {
  padding: 14px 10px 6px;
  color: var(--menu-suave);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.menu-links a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 38px;
  padding: 0 10px;
  border-radius: var(--raio-sm);
  color: var(--menu-texto);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--transicao), color var(--transicao);
}
.menu-links a > .bi {
  flex-shrink: 0;
  width: 20px;
  color: var(--menu-suave);
  font-size: 17px;
  text-align: center;
  transition: color var(--transicao);
}
.menu-links a:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}
.menu-links a:hover > .bi {
  color: #fff;
}
.menu-links a[aria-current="page"] {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-weight: 600;
}
.menu-links a[aria-current="page"] > .bi {
  color: var(--c-marca-viva);
}
.menu-links a[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: -12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--c-marca-viva);
}
.menu-links a:focus-visible,
.menu-pesquisa input:focus-visible {
  outline: 2px solid var(--c-marca-viva);
  outline-offset: 1px;
}
.menu-alertas-badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-left: auto;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--c-marca-viva);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.menu-rodape {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 14px 8px 2px;
  border-top: 1px solid var(--menu-borda);
  color: var(--menu-suave);
  font-size: 12px;
  white-space: nowrap;
}
.menu-rodape-status {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--menu-texto);
  font-weight: 500;
}
.menu-rodape-status::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-ok-solido);
  box-shadow: 0 0 0 3px rgba(23, 178, 106, 0.18);
}
.menu-rodape-versao {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.menu-links a[hidden],
[data-area-pagina][hidden] {
  display: none !important;
}

/* Menu recolhido: trilho só com ícones */
@media (min-width: 992px) {
  body.com-menu-lateral.menu-recolhido {
    padding-left: var(--menu-trilho);
  }
  body.menu-recolhido .menu-lateral {
    width: var(--menu-trilho);
    padding-inline: 12px;
  }
  body.menu-recolhido .menu-marca {
    justify-content: center;
    padding-inline: 0;
  }
  body.menu-recolhido :is(.marca-texto, .menu-pesquisa, .menu-grupo, .menu-rodape-versao) {
    display: none;
  }
  body.menu-recolhido .menu-links a {
    justify-content: center;
    padding: 0;
    font-size: 0;
  }
  body.menu-recolhido .menu-links a > .bi {
    font-size: 18px;
  }
  body.menu-recolhido .menu-links {
    gap: 4px;
    margin-top: 6px;
  }
  body.menu-recolhido .menu-alertas-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 9.5px;
  }
  body.menu-recolhido .menu-rodape {
    justify-content: center;
    padding-inline: 0;
  }
  body.menu-recolhido .menu-rodape-status {
    font-size: 0;
  }
}

/* --------------------------------------------------------------------------
   Estrutura: barra superior e cabeçalho da página
   -------------------------------------------------------------------------- */
.app-topo {
  position: sticky;
  top: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--topo-altura);
  padding: 0 32px 0 20px;
  background: var(--c-topo);
  border-bottom: 1px solid var(--c-borda);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
}
.app-topo-botao {
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--raio-sm);
  background: transparent;
  color: var(--c-suave);
  font-size: 17px;
  transition: background var(--transicao), color var(--transicao);
}
.app-topo-botao:hover {
  background: var(--c-superficie-3);
  color: var(--c-texto);
}
.app-trilha {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--c-suave);
  font-size: 13.5px;
  white-space: nowrap;
}
.app-trilha .bi {
  color: var(--c-fraco);
  font-size: 11px;
}
.app-trilha strong {
  overflow: hidden;
  color: var(--c-texto);
  font-weight: 600;
  text-overflow: ellipsis;
}
.app-topo-acoes {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.app-status,
.app-atualizacao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--c-borda);
  border-radius: 999px;
  background: var(--c-superficie);
  color: var(--c-texto-2);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: var(--sombra-xs);
}
.app-status::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-fraco);
}
.app-status[data-estado="conectado"]::before {
  background: var(--c-ok-solido);
  box-shadow: 0 0 0 3px rgba(23, 178, 106, 0.18);
  animation: pulsoStatus 2.4s ease-in-out infinite;
}
.app-status[data-estado="conectando"]::before {
  background: var(--c-atencao-solido);
}
.app-status:is([data-estado="desconectado"], [data-estado="indisponivel"])::before {
  background: var(--c-erro-solido);
}
.app-status:is([data-estado="desconectado"], [data-estado="indisponivel"]) {
  border-color: var(--c-erro-borda);
  background: var(--c-erro-suave);
  color: var(--c-erro);
}
@keyframes pulsoStatus {
  0%,
  100% {
    box-shadow: 0 0 0 3px rgba(23, 178, 106, 0.18);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(23, 178, 106, 0.08);
  }
}
.app-atualizacao .bi {
  color: var(--c-suave);
}
.app-atualizacao [id] {
  color: var(--c-texto);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

body.com-menu-lateral > :is(.container-fluid, main) {
  max-width: none;
  margin: 0;
  padding: 28px 32px 40px !important;
}
.header-dashboard {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 28px;
  min-height: 132px;
  margin: 0 0 24px;
  padding: 28px 32px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--raio-lg);
  background: var(--gradiente-destaque);
  color: #fff;
  box-shadow: 0 24px 48px -24px rgba(12, 17, 29, 0.55);
}
/* Malha de pontos e rota estilizada ao fundo */
.header-dashboard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1.3px);
  background-size: 20px 20px;
  -webkit-mask-image: linear-gradient(100deg, transparent 25%, #000 85%);
  mask-image: linear-gradient(100deg, transparent 25%, #000 85%);
}
.header-dashboard::after {
  content: "";
  position: absolute;
  right: -10px;
  bottom: -18px;
  z-index: -1;
  width: 460px;
  height: 190px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 460 190' fill='none'%3E%3Cpath d='M8 176C92 168 108 92 196 98S318 158 362 80 430 22 452 10' stroke='%23f26a1b' stroke-opacity='.6' stroke-width='2.5' stroke-dasharray='2 10' stroke-linecap='round'/%3E%3Ccircle cx='196' cy='98' r='6' fill='%23f26a1b' fill-opacity='.85'/%3E%3Ccircle cx='196' cy='98' r='15' stroke='%23f26a1b' stroke-opacity='.35'/%3E%3Ccircle cx='362' cy='80' r='5' fill='%23fff' fill-opacity='.55'/%3E%3Ccircle cx='8' cy='176' r='5' fill='%23fff' fill-opacity='.45'/%3E%3Ccircle cx='452' cy='10' r='4' fill='%23fff' fill-opacity='.35'/%3E%3C/svg%3E")
    no-repeat right bottom / contain;
  opacity: 0.7;
  pointer-events: none;
}
.cabecalho-titulo {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}
.cabecalho-icone {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
  color: #ffb27d;
  font-size: 25px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 24px -10px rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.header-dashboard h1 {
  margin: 0;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
}
.header-dashboard p {
  max-width: 720px;
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 14px;
}
.header-dashboard p:empty {
  display: none;
}
/* Botões sobre o painel escuro */
.header-dashboard :is(.btn-outline-secondary, .btn-light, .btn-secondary) {
  --bs-btn-color: #fff;
  --bs-btn-bg: rgba(255, 255, 255, 0.08);
  --bs-btn-border-color: rgba(255, 255, 255, 0.18);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(255, 255, 255, 0.16);
  --bs-btn-hover-border-color: rgba(255, 255, 255, 0.28);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgba(255, 255, 255, 0.2);
  --bs-btn-active-border-color: rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: none;
}
.header-dashboard .btn-outline-danger {
  --bs-btn-color: #ffd3cf;
  --bs-btn-bg: rgba(240, 68, 56, 0.12);
  --bs-btn-border-color: rgba(253, 162, 155, 0.35);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(240, 68, 56, 0.28);
  --bs-btn-hover-border-color: rgba(253, 162, 155, 0.5);
  box-shadow: none;
}
.header-dashboard .btn-primary {
  box-shadow: 0 10px 24px -8px rgba(242, 106, 27, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
/* Anel de entregas do Monitoramento */
@property --pct {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
.cabecalho-destaque {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px 12px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.anel-progresso {
  --pct: 0;
  position: relative;
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  transition: --pct 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.anel-progresso::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from -90deg, #ffb27d, #f26a1b calc(var(--pct) * 1%), rgba(255, 255, 255, 0.12) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
}
.anel-progresso strong {
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.cabecalho-destaque-texto {
  display: grid;
  line-height: 1.3;
}
.cabecalho-destaque-texto span {
  color: rgba(255, 255, 255, 0.65);
  font-size: 12.5px;
  font-weight: 500;
}
.cabecalho-destaque-texto strong {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.cabecalho-destaque-texto small {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12.5px;
}
.header-dashboard .cabecalho-acoes,
.pbr-header-actions,
.apr-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

footer.app-rodape {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--c-borda);
  color: var(--c-fraco);
  font-size: 12.5px;
  text-align: left;
}

/* Telas pequenas: o menu vira gaveta e a barra superior concentra a marca. */
.menu-mobile {
  display: none;
}
@media (max-width: 991px) {
  body.com-menu-lateral {
    padding-left: 0;
  }
  .menu-lateral {
    top: var(--topo-altura);
    width: min(300px, 86vw);
    transform: translateX(-100%);
  }
  body.menu-aberto .menu-lateral {
    transform: translateX(0);
    box-shadow: var(--sombra-xl);
  }
  .menu-lateral .menu-marca {
    display: none;
  }
  .menu-mobile {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }
  .menu-mobile button {
    order: -1;
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--c-borda);
    border-radius: var(--raio-sm);
    background: var(--c-superficie);
    color: var(--c-texto);
    font-size: 20px;
  }
  .menu-mobile .marca-simbolo {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }
  .menu-mobile .marca-simbolo svg {
    width: 17px;
    height: 17px;
  }
  .menu-mobile strong {
    color: var(--c-texto);
    font-size: 15px;
    font-weight: 650;
  }
  .app-topo {
    padding: 0 14px;
  }
  .app-topo .ml-menu-desktop,
  .app-trilha {
    display: none;
  }
  body.com-menu-lateral > :is(.container-fluid, main) {
    padding: 20px 16px 32px !important;
  }
  .header-dashboard h1 {
    font-size: 22px;
  }
}
@media (max-width: 575px) {
  .app-status {
    width: 32px;
    padding: 0;
    justify-content: center;
    font-size: 0;
  }
  .app-atualizacao {
    padding: 0 10px;
  }
  .header-dashboard {
    margin-bottom: 18px;
  }
  .header-dashboard > :is(.cabecalho-acoes, .pbr-header-actions, .apr-acoes) {
    width: 100%;
  }
  .header-dashboard > :is(.cabecalho-acoes, .pbr-header-actions, .apr-acoes) .btn {
    flex: 1 1 auto;
  }
}

/* Áreas da página principal ficam ocultas até o menu escolher a ativa. */
html[data-area-inicial]:not([data-menu-pronto]) [data-area-pagina] {
  display: none;
}
html[data-area-inicial="monitoramento"]:not([data-menu-pronto]) [data-area-pagina="monitoramento"],
html[data-area-inicial="mapa"]:not([data-menu-pronto]) [data-area-pagina="mapa"],
html[data-area-inicial="analises"]:not([data-menu-pronto]) [data-area-pagina="analises"],
html[data-area-inicial="ocorrencias"]:not([data-menu-pronto]) [data-area-pagina="ocorrencias"],
html[data-area-inicial="relatorios"]:not([data-menu-pronto]) [data-area-pagina="relatorios"],
html[data-area-inicial="busca"]:not([data-menu-pronto]) [data-area-pagina="busca"] {
  display: block;
}
[data-area-pagina] {
  min-width: 0;
  animation: entradaArea 0.22s ease both;
}
@keyframes entradaArea {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Componentes: cartões
   -------------------------------------------------------------------------- */
.card {
  --bs-card-border-color: var(--c-borda);
  --bs-card-border-radius: var(--raio);
  --bs-card-inner-border-radius: calc(var(--raio) - 1px);
  --bs-card-cap-bg: transparent;
  --bs-card-bg: var(--c-superficie);
  position: relative;
  border: 1px solid var(--c-borda-cartao);
  border-radius: var(--raio);
  background: var(--c-superficie);
  box-shadow: var(--sombra-xs);
}
.card-header {
  display: block;
  padding: 16px 20px;
  border-bottom: 1px solid var(--c-divisor);
  background: transparent;
  color: var(--c-texto);
  font-weight: 600;
}
.card-header :is(h2, h3, h4, h5, strong) {
  color: var(--c-texto);
  font-size: 15px;
  font-weight: 600;
}
.card-header > :is(h2, h3, h4, h5, strong) > .bi,
.card-header .bi-chart-title > .bi {
  color: var(--c-suave);
}
.card-body {
  padding: 20px;
}
.card-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--c-divisor);
  background: var(--c-superficie-2);
}
.shadow-sm {
  box-shadow: var(--sombra-xs) !important;
}

/* Cabeçalho de seção dentro de uma área */
.ml-section-heading {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}
.ml-section-heading h2 {
  margin: 0 0 4px;
  color: var(--c-texto);
  font-size: 18px;
  font-weight: 600;
}
.ml-section-heading p {
  margin: 0;
  color: var(--c-suave) !important;
  font-size: 13.5px;
  line-height: 1.55;
}
.ml-section-icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--c-borda);
  border-radius: 10px;
  background: var(--c-superficie);
  color: var(--c-marca);
  font-size: 19px;
  box-shadow: var(--sombra-xs);
}
.ml-area {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Componentes: botões
   -------------------------------------------------------------------------- */
.btn {
  --bs-btn-padding-x: 14px;
  --bs-btn-padding-y: 7px;
  --bs-btn-font-size: 13.5px;
  --bs-btn-font-weight: 600;
  --bs-btn-line-height: 1.5;
  --bs-btn-border-radius: var(--raio-sm);
  --bs-btn-focus-box-shadow: var(--anel-foco);
  --bs-btn-disabled-opacity: 0.5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  white-space: nowrap;
  box-shadow: var(--sombra-xs);
  transition: background-color var(--transicao), border-color var(--transicao), color var(--transicao),
    box-shadow var(--transicao);
}
.btn > .bi {
  margin: 0 !important;
  font-size: 1.05em;
}
.btn-sm {
  --bs-btn-padding-x: 10px;
  --bs-btn-padding-y: 4px;
  --bs-btn-font-size: 12.5px;
  min-height: 32px;
  gap: 6px;
}
.btn-lg {
  --bs-btn-padding-x: 18px;
  --bs-btn-padding-y: 10px;
  --bs-btn-font-size: 15px;
  min-height: 44px;
}
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--c-marca);
  --bs-btn-border-color: var(--c-marca);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--c-marca-escura);
  --bs-btn-hover-border-color: var(--c-marca-escura);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #93300a;
  --bs-btn-active-border-color: #93300a;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--c-marca);
  --bs-btn-disabled-border-color: var(--c-marca);
  border-color: transparent;
  background-image: var(--gradiente-marca);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 8px 18px -8px rgba(224, 82, 15, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn-primary:hover {
  background-image: linear-gradient(135deg, #f26a1b 0%, #d9480f 50%, #b23409 100%);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 12px 24px -10px rgba(224, 82, 15, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: #1d2939;
  --bs-btn-border-color: #1d2939;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #101828;
  --bs-btn-hover-border-color: #101828;
  --bs-btn-active-bg: #0c111d;
  --bs-btn-active-border-color: #0c111d;
  --bs-btn-disabled-bg: #1d2939;
  --bs-btn-disabled-border-color: #1d2939;
}
.btn-light,
.btn-secondary,
.btn-outline-secondary,
.btn-outline-dark {
  --bs-btn-color: var(--c-texto-2);
  --bs-btn-bg: var(--c-superficie);
  --bs-btn-border-color: var(--c-borda-forte);
  --bs-btn-hover-color: var(--c-texto);
  --bs-btn-hover-bg: var(--c-superficie-2);
  --bs-btn-hover-border-color: var(--c-borda-forte);
  --bs-btn-active-color: var(--c-texto);
  --bs-btn-active-bg: var(--c-superficie-3);
  --bs-btn-active-border-color: var(--c-borda-forte);
  --bs-btn-disabled-color: var(--c-fraco);
  --bs-btn-disabled-bg: var(--c-superficie);
  --bs-btn-disabled-border-color: var(--c-borda);
}
.btn-outline-primary {
  --bs-btn-color: var(--c-marca);
  --bs-btn-bg: var(--c-superficie);
  --bs-btn-border-color: var(--c-marca-borda);
  --bs-btn-hover-color: var(--c-marca-escura);
  --bs-btn-hover-bg: var(--c-marca-suave);
  --bs-btn-hover-border-color: #f7b27a;
  --bs-btn-active-color: var(--c-marca-escura);
  --bs-btn-active-bg: #fdead7;
  --bs-btn-active-border-color: #f7b27a;
  --bs-btn-disabled-color: var(--c-marca);
  --bs-btn-disabled-bg: var(--c-superficie);
  --bs-btn-disabled-border-color: var(--c-marca-borda);
}
.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: #079455;
  --bs-btn-border-color: #079455;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--c-ok);
  --bs-btn-hover-border-color: var(--c-ok);
  --bs-btn-active-bg: #085d3a;
  --bs-btn-active-border-color: #085d3a;
  --bs-btn-disabled-bg: #079455;
  --bs-btn-disabled-border-color: #079455;
}
.btn-outline-success {
  --bs-btn-color: var(--c-ok);
  --bs-btn-bg: var(--c-superficie);
  --bs-btn-border-color: var(--c-ok-borda);
  --bs-btn-hover-color: var(--c-ok);
  --bs-btn-hover-bg: var(--c-ok-suave);
  --bs-btn-hover-border-color: #75e0a7;
  --bs-btn-active-color: var(--c-ok);
  --bs-btn-active-bg: #dcfae6;
  --bs-btn-active-border-color: #75e0a7;
}
.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: #d92d20;
  --bs-btn-border-color: #d92d20;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--c-erro);
  --bs-btn-hover-border-color: var(--c-erro);
  --bs-btn-active-bg: #912018;
  --bs-btn-active-border-color: #912018;
}
.btn-outline-danger {
  --bs-btn-color: var(--c-erro);
  --bs-btn-bg: var(--c-superficie);
  --bs-btn-border-color: var(--c-erro-borda);
  --bs-btn-hover-color: var(--c-erro);
  --bs-btn-hover-bg: var(--c-erro-suave);
  --bs-btn-hover-border-color: #fda29b;
  --bs-btn-active-color: var(--c-erro);
  --bs-btn-active-bg: #fee4e2;
  --bs-btn-active-border-color: #fda29b;
  --bs-btn-disabled-color: var(--c-erro);
  --bs-btn-disabled-bg: var(--c-superficie);
  --bs-btn-disabled-border-color: var(--c-erro-borda);
}
.btn-outline-warning {
  --bs-btn-color: var(--c-atencao);
  --bs-btn-bg: var(--c-superficie);
  --bs-btn-border-color: var(--c-atencao-borda);
  --bs-btn-hover-color: var(--c-atencao);
  --bs-btn-hover-bg: var(--c-atencao-suave);
  --bs-btn-hover-border-color: #fec84b;
}
.btn-warning {
  --bs-btn-color: #fff;
  --bs-btn-bg: #dc6803;
  --bs-btn-border-color: #dc6803;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--c-atencao);
  --bs-btn-hover-border-color: var(--c-atencao);
}
.btn-outline-info {
  --bs-btn-color: var(--c-info);
  --bs-btn-bg: var(--c-superficie);
  --bs-btn-border-color: var(--c-info-borda);
  --bs-btn-hover-color: var(--c-info);
  --bs-btn-hover-bg: var(--c-info-suave);
  --bs-btn-hover-border-color: #67e3f9;
}
.btn-link {
  --bs-btn-color: var(--c-marca);
  --bs-btn-hover-color: var(--c-marca-escura);
  box-shadow: none;
  text-decoration: none;
}
.btn-close {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--raio-sm);
  background-size: 11px;
  opacity: 0.55;
  transition: background-color var(--transicao), opacity var(--transicao);
}
.btn-close:hover {
  background-color: var(--c-superficie-3);
  opacity: 0.9;
}
.btn-close:focus {
  box-shadow: var(--anel-foco);
}

/* --------------------------------------------------------------------------
   Componentes: formulários
   -------------------------------------------------------------------------- */
.form-label,
label.form-label {
  margin-bottom: 6px;
  color: var(--c-texto-2);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
}
.form-control,
.form-select {
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid var(--c-borda-forte);
  border-radius: 10px;
  background-color: var(--c-superficie);
  color: var(--c-texto);
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.form-select {
  padding-right: 34px;
  background-position: right 11px center;
  background-size: 14px 10px;
}
.form-control::placeholder {
  color: var(--c-fraco);
  opacity: 1;
}
.form-control:hover,
.form-select:hover {
  border-color: #b9c0cb;
}
.form-control:focus,
.form-select:focus {
  border-color: #f7b27a;
  outline: 0;
  box-shadow: var(--sombra-xs), var(--anel-foco);
}
.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
  background-color: var(--c-superficie-2);
  color: var(--c-suave);
}
.form-control-sm,
.form-select-sm {
  min-height: 32px;
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: 13px;
}
.form-select-sm {
  padding-right: 30px;
}
textarea.form-control {
  min-height: 90px;
  line-height: 1.55;
}
input[type="file"].form-control {
  padding: 5px 6px;
}
input[type="file"].form-control::file-selector-button {
  margin: -5px 10px -5px -6px;
  padding: 8px 12px;
  border: 0;
  border-right: 1px solid var(--c-borda);
  background: var(--c-superficie-2);
  color: var(--c-texto-2);
  font-weight: 600;
}
.form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 22px;
  padding-left: 0;
}
.form-check .form-check-input {
  float: none;
  flex-shrink: 0;
  margin: 0;
}
.form-check-input {
  width: 16px;
  height: 16px;
  border: 1px solid var(--c-borda-forte);
  cursor: pointer;
}
.form-check-input[type="checkbox"] {
  border-radius: 4px;
}
.form-check-input:checked {
  border-color: var(--c-marca);
  background-color: var(--c-marca);
}
.form-check-input:focus {
  border-color: #f7b27a;
  box-shadow: var(--anel-foco);
}
.form-check-label {
  color: var(--c-texto-2);
  font-size: 13.5px;
  cursor: pointer;
}
.form-switch .form-check-input {
  width: 32px;
  height: 18px;
  border-radius: 999px;
}
.input-group > .form-control,
.input-group > .form-select {
  box-shadow: none;
}
.input-group-text {
  border-color: var(--c-borda-forte);
  background: var(--c-superficie-2);
  color: var(--c-suave);
  font-size: 13px;
}

/* Arquivo com botão próprio (Programação) */
.ml-arquivo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 8px;
  border: 1px solid var(--c-borda-forte);
  border-radius: var(--raio-sm);
  background: var(--c-superficie);
  box-shadow: var(--sombra-xs);
}
.ml-arquivo > span {
  flex-shrink: 0;
  padding: 6px 12px;
  border: 1px solid var(--c-borda);
  border-radius: var(--raio-xs);
  background: var(--c-superficie-2);
  color: var(--c-texto-2);
  font-size: 13px;
  font-weight: 600;
}
.ml-arquivo output {
  min-width: 0;
  color: var(--c-suave);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.ml-arquivo input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.ml-arquivo:focus-within {
  border-color: #f7b27a;
  box-shadow: var(--anel-foco);
}

/* --------------------------------------------------------------------------
   Componentes: tabelas
   -------------------------------------------------------------------------- */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--c-texto-2);
  --bs-table-border-color: var(--c-divisor);
  --bs-table-striped-bg: var(--c-superficie-2);
  --bs-table-striped-color: var(--c-texto-2);
  --bs-table-hover-bg: var(--c-superficie-2);
  --bs-table-hover-color: var(--c-texto);
  --bs-table-active-bg: var(--c-superficie-3);
  margin-bottom: 0;
  color: var(--c-texto-2);
  font-size: 13.5px;
  vertical-align: middle;
}
.table > :not(caption) > * > * {
  padding: 12px 14px;
  border-bottom-color: var(--c-divisor);
}
.table > thead > tr > th,
.table thead th {
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-borda);
  background: var(--c-superficie-2);
  color: var(--c-suave);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}
.table thead th[data-sort] {
  cursor: pointer;
  user-select: none;
}
.table thead th[data-sort]:hover {
  color: var(--c-texto);
}
.table thead th[data-sort] > .bi {
  opacity: 0.55;
  font-size: 11px;
}
.table thead th[aria-sort="ascending"],
.table thead th[aria-sort="descending"] {
  color: var(--c-texto);
}
.table thead th[aria-sort="ascending"] > .bi,
.table thead th[aria-sort="descending"] > .bi {
  color: var(--c-marca);
  opacity: 1;
}
.table tbody tr:last-child > td {
  border-bottom: 0;
}
.table-sm > :not(caption) > * > * {
  padding: 8px 12px;
}
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
   Componentes: selos, alertas, progresso
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}
.badge > .bi {
  font-size: 0.92em;
}
.badge.bg-primary {
  border-color: var(--c-rota-borda);
  background: var(--c-rota-suave) !important;
  color: var(--c-rota) !important;
}
.badge.bg-em-cliente {
  border-color: var(--c-cliente-borda);
  background: var(--c-cliente-suave) !important;
  color: var(--c-cliente) !important;
}
.badge.bg-success {
  border-color: var(--c-ok-borda);
  background: var(--c-ok-suave) !important;
  color: var(--c-ok) !important;
}
.badge.bg-warning {
  border-color: var(--c-atencao-borda);
  background: var(--c-atencao-suave) !important;
  color: var(--c-atencao) !important;
}
.badge.bg-danger {
  border-color: var(--c-erro-borda);
  background: var(--c-erro-suave) !important;
  color: var(--c-erro) !important;
}
.badge.bg-info {
  border-color: var(--c-info-borda);
  background: var(--c-info-suave) !important;
  color: var(--c-info) !important;
}
.badge:is(.bg-secondary, .bg-light) {
  border-color: var(--c-neutro-borda);
  background: var(--c-neutro-suave) !important;
  color: var(--c-neutro) !important;
}
.badge.bg-dark {
  border-color: #1d2939;
  background: #1d2939 !important;
  color: #fff !important;
}
.alert {
  --bs-alert-border-radius: var(--raio);
  padding: 12px 16px;
  border: 1px solid var(--c-borda);
  border-radius: var(--raio);
  background: var(--c-superficie);
  color: var(--c-texto-2);
  font-size: 13.5px;
  line-height: 1.55;
}
.alert:is(.alert-info, .alert-primary, .alert-secondary, .alert-light) {
  border-color: var(--c-borda);
  background: var(--c-superficie-2);
  color: var(--c-texto-2);
}
.alert-warning {
  border-color: var(--c-atencao-borda);
  background: var(--c-atencao-suave);
  color: var(--c-atencao-texto);
}
.alert-danger {
  border-color: var(--c-erro-borda);
  background: var(--c-erro-suave);
  color: var(--c-erro);
}
.alert-success {
  border-color: var(--c-ok-borda);
  background: var(--c-ok-suave);
  color: var(--c-ok);
}
.alert:empty {
  display: none;
}
.progress {
  --bs-progress-bg: var(--c-superficie-3);
  --bs-progress-border-radius: 999px;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--c-superficie-3);
  box-shadow: none;
}
.progress-bar {
  border-radius: 999px;
  background-color: var(--c-marca-viva);
  font-size: 0;
  transition: width 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.progress-bar.bg-success {
  background-color: var(--c-ok-solido) !important;
}
.progress-bar.bg-warning {
  background-color: var(--c-atencao-solido) !important;
}
.progress-bar.bg-orange {
  background-color: var(--c-marca-viva) !important;
}
.progress-bar.bg-info {
  background-color: var(--c-neutro-solido) !important;
}
.progress-bar.bg-primary {
  background-color: var(--c-rota-solido) !important;
}
.progress-bar.bg-danger {
  background-color: var(--c-erro-solido) !important;
}
.spinner-border {
  --bs-spinner-border-width: 2px;
  color: var(--c-marca);
}

/* --------------------------------------------------------------------------
   Componentes: abertos/fechados, janelas e diálogos
   -------------------------------------------------------------------------- */
details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}
:where(details:not(.oc-menu-acoes):not(.oc-anexar):not(.historico-cliente):not(.mapa-detalhes)) > summary {
  position: relative;
  padding: 8px 0 8px 22px;
  color: var(--c-texto-2);
  font-size: 13.5px;
  font-weight: 600;
}
:where(details:not(.oc-menu-acoes):not(.oc-anexar):not(.historico-cliente):not(.mapa-detalhes)) > summary::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;
  width: 7px;
  height: 7px;
  border-right: 1.6px solid var(--c-suave);
  border-bottom: 1.6px solid var(--c-suave);
  transform: translateY(-70%) rotate(-45deg);
  transition: transform var(--transicao);
}
:where(details[open]:not(.oc-menu-acoes):not(.oc-anexar):not(.historico-cliente):not(.mapa-detalhes)) > summary::before {
  transform: translateY(-60%) rotate(45deg);
}

.modal {
  --bs-modal-border-radius: var(--raio-lg);
  --bs-modal-inner-border-radius: calc(var(--raio-lg) - 1px);
}
.modal-backdrop {
  --bs-backdrop-bg: #0c111d;
  --bs-backdrop-opacity: 0.55;
}
.modal-backdrop.show {
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.modal-dialog {
  margin: 24px auto;
}
.modal-xl {
  --bs-modal-width: min(1180px, calc(100vw - 48px));
}
.modal-lg {
  --bs-modal-width: min(820px, calc(100vw - 48px));
}
.modal-content {
  overflow: hidden;
  max-height: calc(100dvh - 48px);
  border: 1px solid var(--c-borda);
  border-radius: var(--raio-lg);
  background: var(--c-superficie);
  box-shadow: var(--sombra-xl);
}
.modal-header {
  flex-shrink: 0;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid var(--c-divisor);
  background: var(--c-superficie);
  color: var(--c-texto);
}
.modal-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--c-texto);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.012em;
}
.modal-title > .bi {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0 !important;
  border: 1px solid var(--c-borda);
  border-radius: 9px;
  color: var(--c-marca);
  font-size: 16px;
  box-shadow: var(--sombra-xs);
}
.modal-header .btn-close {
  margin: -4px -8px -4px auto;
}
.modal-body {
  min-height: 0;
  padding: 24px;
  overflow: auto;
  background: var(--c-superficie);
}
.modal-footer {
  flex-shrink: 0;
  gap: 8px;
  padding: 14px 24px;
  border-top: 1px solid var(--c-divisor);
  background: var(--c-superficie-2);
}
.modal-footer > * {
  margin: 0;
}
dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: 90dvh;
  padding: 24px;
  overflow: auto;
  border: 1px solid var(--c-borda);
  border-radius: var(--raio-lg);
  background: var(--c-superficie);
  color: var(--c-texto-2);
  box-shadow: var(--sombra-xl);
}
dialog::backdrop {
  background: rgba(12, 17, 29, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
dialog h2 {
  margin-bottom: 14px;
  font-size: 18px;
  font-weight: 600;
}
dialog[open] {
  animation: entradaJanela 0.18s ease both;
}
@keyframes entradaJanela {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Abas em formato de controle segmentado */
.nav-tabs {
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--c-borda);
  border-radius: 10px;
  background: var(--c-superficie-2);
}
.nav-tabs .nav-link {
  border: 0;
  border-radius: 7px;
  color: var(--c-suave);
  font-size: 13.5px;
  font-weight: 600;
}
.nav-tabs .nav-link.active {
  background: var(--c-superficie);
  color: var(--c-texto);
  box-shadow: var(--sombra-sm);
}
.dropdown-menu {
  padding: 6px;
  border: 1px solid var(--c-borda);
  border-radius: 10px;
  box-shadow: var(--sombra-lg);
  font-size: 13.5px;
}
.dropdown-item {
  border-radius: 6px;
  padding: 7px 10px;
}

/* --------------------------------------------------------------------------
   Padrões compartilhados
   -------------------------------------------------------------------------- */
/* Indicador (KPI) */
.kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--c-borda);
  border-radius: var(--raio);
  background: var(--c-superficie);
  box-shadow: var(--sombra-xs);
}
/* Fichas de filtros ativos */
.filtro-ativo,
[id$="FiltrosAtivos"] > :is(button, span) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 2px 6px 2px 10px;
  border: 1px solid var(--c-borda);
  border-radius: 999px;
  background: var(--c-superficie);
  color: var(--c-texto-2);
  font-size: 12.5px;
  font-weight: 500;
  box-shadow: var(--sombra-xs);
}
/* Estado vazio */
.estado-vazio {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 40px 20px;
  color: var(--c-suave);
  text-align: center;
}
.estado-vazio > .bi {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 4px;
  border: 1px solid var(--c-borda);
  border-radius: 12px;
  background: var(--c-superficie);
  color: var(--c-suave);
  font-size: 20px;
  box-shadow: var(--sombra-xs);
}

/* --------------------------------------------------------------------------
   Movimento reduzido e impressão
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@media print {
  body.com-menu-lateral {
    padding: 0 !important;
    background: #fff;
  }
  .menu-lateral,
  .app-topo,
  .menu-mobile {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   Pessoas (iniciais coloridas), ícones de seção e animações de entrada
   -------------------------------------------------------------------------- */
.pessoa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.pessoa::before {
  content: attr(data-iniciais);
  display: grid;
  flex: 0 0 32px;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: hsl(var(--pessoa-matiz, 24) 80% 93%);
  color: hsl(var(--pessoa-matiz, 24) 55% 32%);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: inset 0 0 0 1px hsl(var(--pessoa-matiz, 24) 60% 85%);
}
.pessoa[data-iniciais=""]::before {
  display: none;
}
/* Ícone do título de cada cartão em ficha colorida */
.card-header :is(h2, h3, h4, h5, strong) > .bi:first-child,
.card-header > .bi-chart-title > .bi:first-child {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-right: 10px !important;
  border-radius: 9px;
  background: var(--c-marca-suave);
  color: var(--c-marca) !important;
  font-size: 15px !important;
  vertical-align: middle;
}
@keyframes subir {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
:is(.ml-indicadores, .bi-kpi-grid, .oc-indicadores, .apr-kpis, .pbr-kpis, .ml-resumo-grid) > * {
  animation: subir 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
:is(.ml-indicadores, .bi-kpi-grid, .oc-indicadores, .apr-kpis, .pbr-kpis, .ml-resumo-grid) > :nth-child(2) {
  animation-delay: 0.05s;
}
:is(.ml-indicadores, .bi-kpi-grid, .oc-indicadores, .apr-kpis, .pbr-kpis, .ml-resumo-grid) > :nth-child(3) {
  animation-delay: 0.1s;
}
:is(.ml-indicadores, .bi-kpi-grid, .oc-indicadores, .apr-kpis, .pbr-kpis, .ml-resumo-grid) > :nth-child(4) {
  animation-delay: 0.15s;
}
:is(.ml-indicadores, .bi-kpi-grid, .oc-indicadores, .apr-kpis, .pbr-kpis, .ml-resumo-grid) > :nth-child(n + 5) {
  animation-delay: 0.2s;
}
/* Ficha de ícone em degradê (indicadores de todas as páginas) */
.ficha-icone {
  --ficha: var(--c-marca-viva);
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: linear-gradient(140deg, color-mix(in srgb, var(--ficha) 62%, #fff), var(--ficha) 70%);
  color: #fff;
  font-size: 19px;
  box-shadow: 0 10px 20px -10px var(--ficha), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
@media (max-width: 767px) {
  .header-dashboard {
    min-height: 0;
    padding: 22px 20px;
    border-radius: var(--raio);
  }
  .header-dashboard::after {
    width: 300px;
    opacity: 0.45;
  }
  .cabecalho-icone {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    font-size: 21px;
  }
  .header-dashboard h1 {
    font-size: 22px;
  }
  .cabecalho-destaque {
    width: 100%;
  }
}