/* ==========================================================================
   SagaWeb — sistema de design (sagaweb.css)
   Carregado em layout/estrutura.html DEPOIS do Bootstrap 5.2.1.
   Regras da casa:
     - cinza de contorno (btn-outline-secondary) é o botão padrão;
     - UMA ação principal por tela, em btn-dark;
     - azul só em link de texto; cor forte só em estado (badge/alert);
     - nada de <style> em template e nada de cor hex nova: use os tokens --sw-*.
   Preparado para o Bootstrap 5.3 / modo escuro: os tokens ficam em :root e
   o bloco [data-bs-theme="dark"] no fim redefine SÓ os tokens.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* superfícies e linhas */
  --sw-bg: #f4f6f5;
  --sw-surface: #ffffff;
  --sw-surface-2: #f8f9fa;
  --sw-line: #dee2e6;
  --sw-line-2: #ced4da;
  --sw-line-soft: #eef0f2;
  /* fundo do rodape de formulario: quase opaco, para o conteudo nao vazar por tras */
  --sw-rodape-fundo: rgba(255, 255, 255, .94);
  /* tinta */
  --sw-ink: #212529;
  --sw-ink-2: #495057;
  --sw-muted: #6c757d;
  /* ação, marca, link */
  --sw-dark: #212529;          /* ação principal (btn-dark), menu, sanfona, modal */
  --sw-acao: var(--sw-dark);   /* trocar aqui se a ação principal mudar de cor */
  --sw-brand: #1a5c38;         /* verde SagaWeb: logo, item ativo do menu, foco, chave ligada, Registrar Ponto */
  --sw-brand-light: #6fbf8f;   /* barra do item ativo sobre fundo escuro */
  --sw-brand-soft: #e6f1ea;
  --sw-atencao: #b8860b; --sw-atencao-ink: #8a6508;
  --sw-link: #0a58ca;          /* 6,4:1 sobre branco; o #0d6efd do Bootstrap fica em 4,5:1 */
  --sw-link-hover: #084298;
  /* menu */
  /* 300px em monitor grande (>=1600px de janela); notebook de ate 15 polegadas
     (1366/1536px) mantem os 260px de sempre -- pedido do dono, 21/08/2026. */
  --sw-sidebar-w: 260px;
  --sw-sidebar-bg: #212529;
  --sw-sidebar-ink: #dee2e6;
  --sw-sidebar-muted: #868e96;
  --sw-sidebar-hover: #2b3035;
  --sw-sidebar-active: #343a40;
  --sw-appbar-h: 56px;
  /* forma */
  --sw-radius: .375rem;
  --sw-pad-x: 1.5rem;
  --sw-content-max-estreita: 1200px;
  --sw-content-max-foco: 720px;
  --sw-focus-ring: 0 0 0 .2rem rgba(26, 92, 56, .25);
  /* sombra de elemento que FLUTUA sobre outro conteúdo (painel e botão sobre o mapa) */
  --sw-sombra-flutuante: 0 1px 6px rgba(0, 0, 0, .28);
  /* cores de camada do WebGIS (usadas só em legenda/mapa) */
  --cor-car: #c9a227;
  --cor-app: #2e7d32;
  --cor-consolidada: #8d6e63;
  --cor-prodes: #d32f2f;
  --cor-ibama: #e65100;
  --cor-icmbio: #6a1b9a;
  --cor-imac: #ad1457;
  /* camadas (z-index) */
  --sw-z-appbar: 1030;
  --sw-z-rodape: 990; /* abaixo dos dropdowns do Bootstrap (1000): menu aberto passa por cima do rodapé sticky */
  --sw-z-toast: 1090;
  /* Tela de mapa: o painel do WebGIS precisa ficar ACIMA dos controles do Leaflet (1000) e
     ABAIXO da gaveta do menu (o offcanvas do Bootstrap fica em 1045). Antes era 999999, que
     cobria a própria gaveta e a barra do celular. */
  --sw-z-mapa-painel: 1020;
  --sw-z-mapa-menu: 1035;
  /* o offcanvas do Bootstrap 5.2 usa 1045; o escurecimento dele, 1040 */
  --sw-z-gaveta: 1045;
  /* a espera cobre TUDO, inclusive modal (1055): quem manda gerar de dentro de um
     modal precisa ver que o sistema está trabalhando. Só o toast fica acima. */
  --sw-z-espera: 1080;
  /* escurecimento da espera: o mesmo peso do loader antigo (bg-dark bg-opacity-75) */
  --sw-espera-fundo: rgba(33, 37, 41, .72);
  --sw-espera-ink: #ffffff;   /* o escurecimento é escuro nos dois temas, como o menu */
}

/* ---------- 2. Base ---------- */
body { background-color: var(--sw-bg); color: var(--sw-ink); }
a { color: var(--sw-link); }
a:hover { color: var(--sw-link-hover); }
.bi { vertical-align: -.125em; fill: currentColor; }

/* o azul que o Bootstrap espalha sozinho: foco e chave em verde de marca; paginação e progresso em cinza escuro */
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--sw-brand);
  box-shadow: var(--sw-focus-ring);
}
.form-check-input:checked { background-color: var(--sw-brand); border-color: var(--sw-brand); }
.page-item.active .page-link { background-color: var(--sw-acao); border-color: var(--sw-acao); }
.page-link { color: var(--sw-ink-2); }
.page-link:hover { color: var(--sw-ink); }
.progress-bar { background-color: var(--sw-muted); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--sw-acao); }
.nav-tabs .nav-link { color: var(--sw-ink-2); }
.nav-tabs .nav-link.active { color: var(--sw-ink); }
.btn:focus-visible, .btn-check:focus-visible + .btn { box-shadow: var(--sw-focus-ring); }
/* contorno do botão padrão: o cinza do próprio Bootstrap (4,7:1); texto mais escuro para ler melhor */
.btn-outline-secondary {
  --bs-btn-color: #495057;
  --bs-btn-hover-bg: #f1f3f5;
  --bs-btn-hover-color: #212529;
  --bs-btn-hover-border-color: #6c757d;
  --bs-btn-active-bg: #e9ecef;
  --bs-btn-active-color: #212529;
  --bs-btn-active-border-color: #6c757d;
}
.btn-outline-secondary .text-danger { transition: none; }
/* botão de texto (ação leve): cinza, não azul */
.btn-link { --bs-btn-color: var(--sw-ink-2); --bs-btn-hover-color: var(--sw-ink); text-decoration: none; }
.btn-link:hover { text-decoration: underline; }
/* a ação principal pode mudar de cor num lugar só */
.btn-dark { --bs-btn-bg: var(--sw-acao); --bs-btn-border-color: var(--sw-acao); }
/* exceção única e documentada: Registrar Ponto no verde de marca */
.btn-marca {
  --bs-btn-color: #fff; --bs-btn-bg: var(--sw-brand); --bs-btn-border-color: var(--sw-brand);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #144a2d; --bs-btn-hover-border-color: #144a2d;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #113f26; --bs-btn-active-border-color: #113f26;
  --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--sw-brand); --bs-btn-disabled-border-color: var(--sw-brand);
}
/* sanfona escura: seta branca nos dois estados */
.accordion-button.text-bg-dark {
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
}
.accordion-button.text-bg-dark:not(.collapsed) { box-shadow: none; }
.accordion-button.text-bg-dark:focus { box-shadow: var(--sw-focus-ring); }
/* toasts acima de tudo que não é modal */
.toast-container { z-index: var(--sw-z-toast); }

/* ---------- 3. Casca (shell) ---------- */
.sw-shell { display: flex; min-height: 100vh; min-height: 100dvh; }
.sw-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sw-main > .sw-conteudo { flex: 1 1 auto; min-width: 0; }

/* menu lateral */
.sw-sidebar {
  --bs-offcanvas-width: min(300px, 85vw);
  background-color: var(--sw-sidebar-bg) !important; /* vence o transparent!important do .offcanvas-lg */
  color: var(--sw-sidebar-ink);
}
.sw-sidebar .offcanvas-header { color: #fff; padding: .75rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.sw-sidebar .offcanvas-body { display: flex; flex-direction: column; padding: .75rem .6rem 1rem; overflow-y: auto; }
.sw-sidebar .sw-marca { display: flex; align-items: center; gap: .6rem; padding: .25rem .5rem .6rem; color: #fff; }
.sw-sidebar .sw-marca img { max-height: 40px; width: auto; }
.sw-sidebar .sw-marca .sw-sigla { font-size: 1.15rem; font-weight: 600; line-height: 1.1; }
.sw-sidebar .sw-versao { font-size: .72rem; color: var(--sw-sidebar-muted); }
.sw-sidebar .sw-versao a { color: var(--sw-sidebar-muted); text-decoration: none; }
.sw-sidebar .sw-versao a:hover { color: #fff; }
.sw-sidebar .sw-busca { margin: .35rem .1rem .6rem; position: relative; }
.sw-sidebar .sw-busca .form-control {
  background-color: var(--sw-sidebar-hover); border-color: #495057; color: #fff; font-size: .875rem;
}
.sw-sidebar .sw-busca .form-control::placeholder { color: var(--sw-sidebar-muted); }
.sw-sidebar .sw-busca .form-control:focus { border-color: var(--sw-brand-light); box-shadow: 0 0 0 .2rem rgba(111, 191, 143, .25); }
/* Resultado da busca do menu: numero de CAR tem 43 caracteres e saia CORTADO com uma
   rolagem lateral dentro da caixinha. Fonte um ponto menor (pedido do dono) e quebra em
   qualquer ponto: o numero inteiro aparece, em duas linhas quando preciso. */
#div-resultado-busca { max-height: 45vh; overflow-y: auto; overflow-x: hidden; margin-top: .4rem; font-size: .8125rem; }
#div-resultado-busca .list-group-item, #div-resultado-busca .btn { overflow-wrap: anywhere; white-space: normal; text-align: left; }
/* itens do menu */
.sw-nav { --bs-nav-link-padding-x: .65rem; --bs-nav-link-padding-y: .45rem; gap: 1px; }
.sw-nav > .nav-item > .nav-link {
  color: var(--sw-sidebar-ink); border-radius: .3rem; display: flex; align-items: center; gap: .55rem;
  font-size: .9375rem; position: relative;
}
.sw-nav > .nav-item > .nav-link:hover { background-color: var(--sw-sidebar-hover); color: #fff; }
.sw-nav > .nav-item > .nav-link .sw-chev { margin-left: auto; font-size: .75rem; opacity: .7; transition: transform .2s ease; }
.sw-nav > .nav-item > .nav-link[aria-expanded="true"] .sw-chev { transform: rotate(180deg); }
.sw-nav > .nav-item > .nav-link.active { background-color: var(--sw-sidebar-active); color: #fff; font-weight: 600; }
.sw-nav > .nav-item > .nav-link.active::before {
  content: ""; position: absolute; left: -.6rem; top: 5px; bottom: 5px; width: 3px;
  border-radius: 0 2px 2px 0; background: var(--sw-brand-light);
}
.sw-nav .sw-sub { padding: .15rem 0 .35rem 2.05rem; display: flex; flex-direction: column; gap: 1px; list-style: none; margin: 0; }
.sw-nav .sw-sub .nav-link { color: #adb5bd; font-size: .8375rem; padding: .3rem .5rem; border-radius: .25rem; }
.sw-nav .sw-sub .nav-link:hover { color: #fff; background-color: var(--sw-sidebar-hover); }
.sw-nav .sw-sub .nav-link.active { color: #fff; background-color: var(--sw-sidebar-active); }
.sw-nav .sw-sub .dropdown-header { color: var(--sw-sidebar-muted); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; padding: .5rem .5rem .2rem; }
.sw-nav .sw-sub .dropdown-divider { border-color: rgba(255, 255, 255, .1); margin: .3rem .5rem; }
.sw-nav .sw-sub form button.nav-link { background: none; border: 0; width: 100%; text-align: left; }
/* rodapé do menu: usuário */
.sw-sidebar .sw-rodape { margin-top: auto; padding-top: .6rem; border-top: 1px solid rgba(255, 255, 255, .08); }
.sw-sidebar .sw-rodape .dropdown-toggle { color: var(--sw-sidebar-ink); width: 100%; text-align: left; display: flex; align-items: center; gap: .5rem; }
.sw-sidebar .sw-rodape .dropdown-toggle::after { margin-left: auto; }
.sw-sidebar .sw-rodape .sw-avatar {
  width: 26px; height: 26px; border-radius: 50%; background: var(--sw-sidebar-active); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700;
}
.sw-sidebar .sw-rodape .dropdown-menu form button.dropdown-item { background: none; border: 0; width: 100%; text-align: left; }

@media (min-width: 992px) {
  .sw-sidebar {
    flex: 0 0 var(--sw-sidebar-w); width: var(--sw-sidebar-w);
    position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto;
    border-right: 1px solid rgba(255, 255, 255, .08);
  }
  .sw-sidebar .offcanvas-body { height: 100%; }
}
/* barra superior do celular/tablet */
.sw-appbar {
  position: sticky; top: 0; z-index: var(--sw-z-appbar); height: var(--sw-appbar-h);
  background-color: var(--sw-sidebar-bg); color: #fff; display: flex; align-items: center; gap: .5rem; padding: 0 .5rem 0 .25rem;
}
.sw-appbar .btn { color: #fff; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; }
.sw-appbar .sw-appbar-marca { display: flex; align-items: center; gap: .5rem; color: #fff; text-decoration: none; font-weight: 600; min-width: 0; }
.sw-appbar .sw-appbar-marca img { max-height: 28px; width: auto; }
.sw-appbar .sw-appbar-titulo { margin-left: auto; font-size: .9rem; color: #dee2e6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 50%; }

/* área de conteúdo e regra de largura */
.sw-page { padding: 1rem var(--sw-pad-x) 2rem; min-width: 0; }
.sw-page--estreita { max-width: calc(var(--sw-content-max-estreita) + 2 * var(--sw-pad-x)); }
.sw-page--foco { max-width: calc(var(--sw-content-max-foco) + 2 * var(--sw-pad-x)); margin: 0 auto; }
@media (max-width: 575.98px) {
  /* No celular ESTREITO o cartao de secao cola na borda do vidro: a moldura lateral some
     e o conteudo chega a ~12px da borda (era 29px na v2.9.311, 45px antes). Vale so para
     o cartao/accordion de SECAO -- filho direto de coluna inteira (col-12) ou do proprio
     container. Cartao aninhado, KPI em col-6 e afins ficam como estao. */
  .sw-page :is(.container, .container-fluid) > .row > .col-12 > :is(.card, .accordion),
  .sw-page :is(.container, .container-fluid) > :is(.card, .accordion) {
    margin-left: -1rem; margin-right: -1rem;
    border-left: 0; border-right: 0; border-radius: 0;
  }
  .sw-page :is(.container, .container-fluid) > .row > .col-12 > .accordion .accordion-item,
  .sw-page :is(.container, .container-fluid) > .accordion .accordion-item {
    border-left: 0; border-right: 0; border-radius: 0;
  }
}

@media (max-width: 767.98px) {
  /* No celular a moldura fixa custa caro. Medido no Galaxy S23 (360px de largura, a regua
     de conferencia do dono): a pilha pagina 16 + container 12 + coluna 12 + borda 1 +
     card-body 16 = 45px de CADA lado -- 25% da tela gastos em margem. Aqui cada camada
     encolhe; acima de 768px nada muda. A tela continua fluida: em aparelho maior o
     conteudo cresce sozinho, e a moldura e que permanece pequena. */
  .sw-page { padding: .75rem .5rem 5rem; }
  /* O espacamento do Bootstrap e variavel de CSS: reduzir AQUI mantem a conta
     container/row/col consistente (a linha puxa de volta o que a coluna empurra). */
  .sw-page .container, .sw-page .container-fluid, .sw-page .row { --bs-gutter-x: 1rem; }
  /* Cabecalho, corpo e rodape do cartao juntos, para o texto continuar alinhado. */
  .sw-page .card-header, .sw-page .card-body, .sw-page .card-footer,
  .sw-page .accordion-body { padding-left: .75rem; padding-right: .75rem; }
  /* Pilha de cartoes DENTRO de um cartao (busca do CAR, por exemplo): sangra o enchimento
     do cartao-pai e encosta na borda dele, como uma lista de itens -- devolve 24px de
     largura numa tela de 360. So no modo cartao (abaixo de 768px); na mesa a tabela e
     tabela e fica dentro do enchimento normal. */
  /* Avisos (.alert) acompanham o cartao: 16px de enchimento proprio DENTRO de um cartao
     que ja paga moldura somava 45px ate o texto. */
  .sw-page .alert { padding-left: .75rem; padding-right: .75rem; }
  /* Abas (.nav-tabs) no celular: sem espaco para todas, o Bootstrap QUEBRA a fileira em
     varias linhas e cada aba vira uma faixa solta -- parece lista quebrada, nao chooser
     (medido no Controle CAR: 3 abas em 3 linhas). A fileira fica em UMA linha e rola de
     lado dentro dela mesma, como toda peca larga do sistema. */
  .sw-page .nav-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .sw-page .nav-tabs::-webkit-scrollbar { display: none; }
  /* Compactas para as TRES abas do Controle CAR caberem inteiras em 360px: aba cortada
     no meio parece escondida, nao rolavel (medido: com icone e enchimento cheios pediam
     421px). O icone sai -- o texto e o rotulo -- e o enchimento aperta. A rolagem continua
     como rede para telas com mais abas. */
  .sw-page .nav-tabs .nav-link { white-space: nowrap; padding: .5rem .45rem; font-size: .8125rem; }
  .sw-page .nav-tabs .nav-link > i { display: none; }
  /* :not(.p-0): cartao SEM enchimento nao tem o que sangrar -- sem essa trava a pilha
     escapava 12px ALEM da borda do cartao-pai e estourava a janela (medido em 11 telas
     do ponto a 360px: linhas em -4..364 numa tela de 360). */
  .card-body:not(.p-0) > .sw-tabela:not(.sw-tabela--plana),
  .card-body:not(.p-0) .table-responsive:has(> .sw-tabela:not(.sw-tabela--plana)) {
    margin-left: -.75rem; margin-right: -.75rem;
  }
  /* Na pilha sangrada, o cartao-linha vira LISTA: sem borda lateral nem canto redondo.
     Encostado na moldura do cartao-pai, a borda propria dele dobrava a linha e o fundo
     colorido de estado (pendente ambar, encontrado verde) parecia atropelar a moldura --
     acabamento que o dono apontou no celular. */
  .card-body:not(.p-0) > .sw-tabela:not(.sw-tabela--plana) tr,
  .card-body:not(.p-0) .table-responsive > .sw-tabela:not(.sw-tabela--plana) tr {
    border-left: 0; border-right: 0; border-radius: 0;
  }
}
/* O campo de arquivo nativo tem largura INTRINSECA (cresce com o nome do arquivo) e nao
   encolhe com o pai: estourava a janela do celular nas telas de upload (SIGEF,
   Assentamentos, Florestas, IPHAN -- medido 4px de rolagem lateral). */
input[type="file"] { max-width: 100%; }

/* O corpo do accordion alinha com o do cartao (1rem dos dois lados; o Bootstrap traz
   1.25rem): tabela dentro de accordion e tabela dentro de cartao ficam na MESMA regua. */
.sw-page .accordion-body { padding-left: 1rem; padding-right: 1rem; }

@media (min-width: 1600px) {
  :root { --sw-sidebar-w: 300px; }
}

/* ---------- ajustes que o Bootstrap 5.3 exigiu ----------
   O 5.3 mexeu em tres coisas da tabela que o sistema usava do jeito antigo:
   1. a celula passou a ter COR FIXA (#000 puro) em vez de herdar o tom do corpo;
   2. a regra da celula (.table>*>*) tem peso maior que o .mono do sistema e o apagava;
   3. o fundo da celula deixou de ser transparente, o que TAPAVA a cor pintada na linha
      -- e as marcacoes de atencao (jornada incompleta, falta) sumiam da tela.
   Os tres se resolvem devolvendo os tokens ao valor que o sistema espera. */
.table { --bs-table-color: var(--sw-ink); --bs-table-bg: transparent; }
td.mono, th.mono { color: var(--sw-muted); }
.list-group { --bs-list-group-action-color: var(--sw-ink); }

/* O 5.3 clareou tres coisas do formulario. Devolvemos o tom de antes usando TOKEN, nunca
   valor chumbado: assim a tela fica fiel hoje e o modo escuro ja encontra o gancho certo.
   - borda dos campos: era #ced4da, que e exatamente o nosso --sw-line-2;
   - etiqueta colada ao campo: era #e9ecef, que e o --bs-secondary-bg do proprio 5.3;
   - pagina desabilitada: era branca, que e o --bs-body-bg. */
.form-control, .form-select, .input-group-text { border-color: var(--sw-line-2); }
.input-group-text { background-color: var(--bs-secondary-bg); }
.page-item.disabled .page-link { background-color: var(--bs-body-bg); }

/* Faixa grossa so na esquerda do cartao, mantendo o fio fino nos outros tres lados.
   Substitui o par `border-start border-4`: no Bootstrap 5.2 o .border-4 mexia so numa
   variavel e pintava apenas o lado pedido; no 5.3 virou border-width nos QUATRO lados,
   e o cartao ganhou moldura grossa em volta. O !important e necessario porque a
   utilitaria de borda do Bootstrap tambem e !important. */
.sw-faixa-lateral { border-left-width: 4px !important; }

/* mensagens do Django (toasts) */
.sw-mensagens { position: fixed; top: .75rem; right: .75rem; z-index: var(--sw-z-toast); max-width: min(500px, 92vw); }

/* ---------- 4. Componentes ---------- */
/* cabeçalho de página */
.breadcrumb { font-size: .8125rem; margin-bottom: .35rem; }
.sw-cabecalho {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .5rem 1.5rem;
  padding-bottom: .75rem; margin-bottom: 1rem; border-bottom: 1px solid var(--sw-line);
}
.sw-cabecalho:has(.sw-titulo:empty):not(:has(.sw-acoes > *)) { display: none; }
.sw-cabecalho .sw-titulo { font-size: 1.375rem; font-weight: 600; line-height: 1.25; margin: 0; color: var(--sw-ink); }
.sw-cabecalho .sw-titulo .bi { color: var(--sw-muted); font-size: 1.1rem; margin-right: .25rem; }
.sw-cabecalho .sw-sub { font-size: .875rem; color: var(--sw-muted); margin-top: .15rem; }
.sw-cabecalho .sw-sub:empty { display: none; }
.sw-cabecalho .sw-acoes { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.sw-cabecalho .sw-acoes:empty { display: none; }
@media (max-width: 575.98px) {
  .sw-cabecalho .sw-acoes { width: 100%; }
  .sw-cabecalho .sw-acoes .btn { flex: 1 1 auto; }
}
/* barra de ferramentas genérica (toolbar de card/painel) */
.sw-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.sw-toolbar .ms-auto { margin-left: auto; }
/* tabela padrão */
.sw-tabela { font-size: .875rem; margin-bottom: 0; }
.sw-tabela thead th {
  font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; color: var(--sw-ink-2);
  font-weight: 600; background-color: var(--sw-surface-2); white-space: nowrap; border-bottom-width: 1px;
}
.sw-tabela td, .sw-tabela th { vertical-align: middle; }
/* Os DOIS nomes: o Bootstrap 5.3 renomeou --bs-table-accent-bg para --bs-table-bg-state.
   Escrever so um deixa o realce da linha no padrao do Bootstrap -- o dobro do nosso. */
.sw-tabela tbody tr:hover > * { --bs-table-accent-bg: rgba(0, 0, 0, .035); --bs-table-bg-state: rgba(0, 0, 0, .035); }
.num { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Coluna de CONTADOR, nao de valor. Alinhar a direita serve para comparar numeros de
   tamanhos diferentes, empilhados -- 1.234,56 embaixo de 98,70. Aqui o conteudo e um
   botao redondo de largura fixa, e encostado na direita ele fica longe do titulo da
   coluna e perto da coluna seguinte. Centralizado, a pilula fica sob o proprio titulo.
   Modificador em vez de trocar o .num: as outras 120 celulas de valor continuam a
   direita, que e onde devem ficar. Vale tambem para a celula vazia da mesma coluna --
   senao o traco fica de um lado e a pilula do outro, e a coluna sai torta. */
.num.num-centro { text-align: center !important; }
.mono { font-family: var(--bs-font-monospace); font-size: .8125rem; color: var(--sw-muted); }
.td-acoes, .th-acoes { text-align: right; white-space: nowrap; width: 1%; }
/* A largura minima do botao de acao esta na secao 12 (40px, a medida da referencia).
   Esta linha dizia 2rem -- 32px -- e vencia a de la por especificidade (0-3-0 contra
   0-2-0), deixando a mesa com 32px enquanto o celular ia a 40. */
.sw-tabela-card { background: var(--sw-surface); border: 1px solid var(--sw-line); border-radius: var(--sw-radius); overflow: hidden; }
.sw-tabela-card > .table-responsive { margin: 0; }
/* cartão de número (KPI), título de seção, estado vazio */
.sw-kpi {
  background: var(--sw-surface); border: 1px solid var(--sw-line); border-radius: var(--sw-radius);
  padding: .8rem .95rem; min-height: 92px; display: flex; flex-direction: column; gap: .15rem; height: 100%;
}
/* o rótulo quebra em duas linhas quando precisa: cortar com reticências esconde o que o cartão
   conta ("Excluídos (Can…" não diz nada) e o texto não volta nem no passar do mouse */
.sw-kpi .sw-kpi-k { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--sw-muted); font-weight: 600; line-height: 1.25; }
.sw-kpi .sw-kpi-v { font-size: 1.6rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sw-kpi .sw-kpi-d { font-size: .8125rem; color: var(--sw-ink-2); }
.sw-kpi .sw-kpi-k .bi { color: var(--sw-muted); margin-right: .25rem; font-weight: 400; }
/* O número é o protagonista: o ícone acompanha o rótulo, pequeno e cinza. Cor no cartão só quando
   o VALOR pede atenção — é estado, não enfeite nem identidade de módulo. */
.sw-kpi.sw-kpi--alerta { border-left: 3px solid var(--bs-danger); }
.sw-kpi.sw-kpi--alerta .sw-kpi-v { color: var(--bs-danger); }
.sw-kpi.sw-kpi--atencao { border-left: 3px solid var(--sw-atencao); }
.sw-kpi.sw-kpi--atencao .sw-kpi-v { color: var(--sw-atencao-ink); }
.sw-kpi.sw-kpi--ok { border-left: 3px solid var(--sw-brand); }
/* KPI que leva a algum lugar: o cartão inteiro é o alvo, sem virar um bloco azul */
a.sw-kpi, a.sw-kpi:hover { text-decoration: none; color: inherit; display: flex; }
a.sw-kpi:hover { border-color: var(--sw-line-2); background: var(--sw-surface-2); }
a.sw-kpi:focus-visible { outline: 2px solid var(--sw-brand); outline-offset: 2px; }
/* faixa de KPIs: uma linha que quebra sozinha, 2 por linha no celular */
.sw-kpis { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 1rem; }
@media (max-width: 575.98px) {
  .sw-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
}
.sw-secao { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sw-ink-2); font-weight: 700; margin: 1.25rem 0 .5rem; display: flex; align-items: center; gap: .5rem; }
.sw-vazio { text-align: center; padding: 1.6rem 1rem; color: var(--sw-muted); }
.sw-vazio .bi { font-size: 2rem; color: #adb5bd; display: block; margin-bottom: .35rem; }
.sw-vazio b { color: var(--sw-ink); display: block; margin-bottom: .2rem; }
/* selos suaves (estado com muitas variações na mesma linha) */
.badge-soft-success { background: rgba(25, 135, 84, .12); color: #0f5132; border: 1px solid rgba(25, 135, 84, .25); }
.badge-soft-warning { background: rgba(255, 193, 7, .18); color: #664d03; border: 1px solid rgba(255, 193, 7, .35); }
.badge-soft-danger { background: rgba(220, 53, 69, .12); color: #842029; border: 1px solid rgba(220, 53, 69, .25); }
.badge-soft-info { background: rgba(13, 202, 240, .15); color: #055160; border: 1px solid rgba(13, 202, 240, .3); }
.badge-soft-secondary { background: rgba(108, 117, 125, .12); color: #41464b; border: 1px solid rgba(108, 117, 125, .25); }
.badge-soft-primary { background: rgba(10, 88, 202, .1); color: #084298; border: 1px solid rgba(10, 88, 202, .25); }
/* A variante escura existia SO dentro do bloco [data-bs-theme="dark"], no fim deste
   arquivo. No tema claro ela nao pintava fundo nem borda, e o .badge do Bootstrap traz
   color:#fff embutido -- ou seja, quem a usasse no claro recebia texto branco sobre
   nada. Sumia sem dar erro. Faltava a regra base, que e esta. */
.badge-soft-dark { background: rgba(33, 37, 41, .10); color: #212529; border: 1px solid rgba(33, 37, 41, .25); }

/* Contador da busca do menu lateral.
   Precisa de regra propria porque a barra lateral e SEMPRE escura -- inclusive no tema
   claro (--sw-sidebar-bg: #212529). Os .badge-soft-* acima sao feitos para fundo claro:
   tem letra escura e fundo quase transparente, e sobre a barra sumiriam. Aqui a mesma
   ideia -- fundo fraco, borda firme -- so que calibrada para o escuro. */
.sw-contagem-menu {
  background: rgba(127, 176, 255, .16);
  color: #cfe0ff;
  border: 1px solid rgba(127, 176, 255, .38);
}
/* contagem (pílula cinza, clicável ou não) */
/* Contador de coluna: o numero de documentos, imoveis, projetos e limites de cada
   linha. Nao e enfeite -- cada um leva para a lista filtrada daquele cliente, entao e
   um BOTAO redondo, e o tamanho dele e o tamanho do alvo.

   Medido em 1440px na lista de clientes: a pilula tinha 20,4 x 21,6 px. O dono pediu
   metade a mais para acertar sem mirar. O alvo passa a 31 x 32 px -- 50% em cada lado,
   quase o dobro de area (441 -> 992 px2). O desenho da pilula nao muda; cresce a caixa
   em volta, como ja fazia no celular. */
.sw-contagem { display: inline-block; text-decoration: none; min-width: 1.7em; text-align: center; background: #e9ecef; color: #495057; border-radius: 999px; font-size: .75rem; font-weight: 600; padding: .15em .5em; }
a.sw-contagem {
  min-width: 31px; min-height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
}
a.sw-contagem:hover { background: #dee2e6; color: #212529; text-decoration: none; }
/* No escuro a pilula ficava cinza-claro acesa: os valores acima sao chumbados e nao
   viram sozinhos. O tema claro fica exatamente como estava. */
[data-bs-theme="dark"] .sw-contagem { background: var(--sw-surface-2); color: var(--sw-ink-2); }
[data-bs-theme="dark"] a.sw-contagem:hover { background: var(--sw-line); color: var(--sw-ink); }
/* rodapé de formulário */
.sw-rodape-form {
  position: sticky; bottom: 0; z-index: var(--sw-z-rodape);
  display: flex; justify-content: flex-end; align-items: center; gap: .5rem; padding: .7rem 1rem; margin-top: 1rem;
  /* cor por token: era branco chumbado e virava uma faixa acesa no tema escuro */
  background: var(--sw-rodape-fundo); border-top: 1px solid var(--sw-line); backdrop-filter: blur(4px);
}
@media (max-width: 767.98px) {
  .sw-rodape-form { padding-bottom: calc(.7rem + env(safe-area-inset-bottom)); }
  .sw-rodape-form .btn { flex: 1 1 auto; min-height: 48px; }
}
/* ---------- 4.b Celular (Onda 3): tabela vira cartão, formulário empilha, alvo de toque ---------- */
/* A tabela de listagem (.sw-tabela) vira uma pilha de cartões abaixo de 768px: cada linha é um
   cartão e cada célula mostra o nome da coluna à esquerda. O nome vem do atributo data-label, que
   o sagaweb.js copia do <th> — nenhum template precisa repetir o rótulo. Tabela que não deve
   virar cartão (matriz, totais, colunas que só fazem sentido lado a lado) recebe .sw-tabela--plana. */
@media (max-width: 767.98px) {
  .sw-tabela:not(.sw-tabela--plana) thead { display: none; }
  .sw-tabela:not(.sw-tabela--plana),
  .sw-tabela:not(.sw-tabela--plana) tbody,
  .sw-tabela:not(.sw-tabela--plana) tr,
  .sw-tabela:not(.sw-tabela--plana) td { display: block; width: auto; }
  .sw-tabela:not(.sw-tabela--plana) tr {
    background: var(--sw-surface); border: 1px solid var(--sw-line); border-radius: var(--sw-radius);
    margin-bottom: .5rem; padding: .15rem 0; overflow: hidden;
  }
  /* idem: no modo cartao o realce de linha e desligado de proposito */
  .sw-tabela:not(.sw-tabela--plana) tbody tr:hover > * { --bs-table-accent-bg: transparent; --bs-table-bg-state: transparent; }
  .sw-tabela:not(.sw-tabela--plana) td {
    border: 0; border-top: 1px solid var(--sw-line-soft); padding: .45rem .75rem;
    text-align: right !important; overflow-wrap: anywhere;
  }
  /* o rótulo FLUTUA à esquerda em vez de ser item de flex: assim o conteúdo da célula continua
     fluindo normalmente — vários <a class="d-block"> seguem empilhados, e não viram colunas de
     uma letra, como acontecia quando a célula era flex. */
  .sw-tabela:not(.sw-tabela--plana) td::after { content: ""; display: block; clear: both; }
  /* O título do cartão (marcado pelo sagaweb.js) fica sem rótulo e alinhado à esquerda. */
  .sw-tabela:not(.sw-tabela--plana) td.sw-cartao-titulo {
    border-top: 0; padding-top: .6rem; font-weight: 600; font-size: .95rem;
    text-align: left !important;
  }
  .sw-tabela:not(.sw-tabela--plana) td.sw-cartao-titulo::before { display: none; }
  /* o que vem ANTES do título (caixa de seleção, ícone de situação, "#") fica numa faixa discreta */
  .sw-tabela:not(.sw-tabela--plana) td:first-child { border-top: 0; }
  .sw-tabela:not(.sw-tabela--plana) td[data-label]:not([data-label=""])::before {
    content: attr(data-label); float: left; max-width: 45%; margin-right: 1rem;
    /* .75rem e nao .7rem (Onda 7): 11,2px em caixa alta com espacamento de letra e o menor
       texto que o sistema produz sozinho, e ele aparece em TODA linha de TODA lista no
       celular -- e o rotulo que diz o que o valor ao lado significa. */
    font-size: .75rem; line-height: 1.6; letter-spacing: .04em; text-transform: uppercase;
    color: var(--sw-muted); font-weight: 600; text-align: left;
  }
  /* a célula de ações ocupa a linha inteira, com os botões maiores e à direita */
  .sw-tabela:not(.sw-tabela--plana) td.td-acoes { width: auto; }
  /* A altura dos botoes de acao esta na secao 12 (40px, a medida da referencia). */
  /* Célula vazia some do cartão em vez de virar uma linha só com o rótulo. O :not(:has(*)) é a
     trava de segurança: some SÓ se a célula não tiver nenhum elemento dentro. Assim, coluna cujo
     conteúdo é um ícone ou uma barra de progresso continua visível, e célula que a tela preenche
     depois (edição na linha, atualização por AJAX) reaparece sozinha ao ganhar conteúdo. Navegador
     sem :has() simplesmente mostra a célula vazia — nunca esconde algo que existe. */
  .sw-tabela:not(.sw-tabela--plana) td.sw-td-vazia:not(:has(*)) { display: none; }
  .sw-tabela-card { border: 0; background: transparent; }
  .sw-tabela-card > .table-responsive { overflow: visible; }

  /* Campo com rótulo colado (input-group): rótulo em cima, campo embaixo. Feito só por seletor de
     elemento — mascara.js e get_endereco.js REESCREVEM a classe do .input-group em runtime, então
     depender de classe nova aqui quebraria em silêncio. */
  /* Só o RÓTULO do campo empilha: no sistema, rótulo é <label class="input-group-text"> e
     prefixo/ícone (R$, %, lupa) é <span class="input-group-text"> — este continua colado ao campo,
     senão viraria uma faixa cinza da largura toda com um cifrão dentro. */
  .sw-conteudo .input-group > label.input-group-text:first-child {
    width: 100%; min-width: 0 !important; justify-content: flex-start;
    border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
    font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--sw-ink-2);
  }
  .sw-conteudo .input-group > label.input-group-text:first-child ~ .form-control,
  .sw-conteudo .input-group > label.input-group-text:first-child ~ .form-select {
    flex: 1 1 100%; border-top-left-radius: 0; border-top-right-radius: 0; min-height: 40px;
  }

  /* Coluna do Bootstrap SEM ponto de quebra (.col, .col-6…) divide a linha em qualquer largura:
     é por isso que a ficha no celular mostrava rótulo e campo espremidos lado a lado. Aqui elas
     passam a ocupar a linha inteira. Quem precisa mesmo ficar lado a lado usa .sw-lado-a-lado
     ou uma coluna com ponto de quebra (col-md-6), que já se comporta certo. */
  .sw-conteudo .row:not([class*="row-cols"]) > [class*="col"]:not(.sw-lado-a-lado):not([class*="col-sm"]):not([class*="col-md"]):not([class*="col-lg"]):not([class*="col-xl"]):not([class*="col-xxl"]) {
    flex: 0 0 100%; max-width: 100%; width: 100%;
  }

  /* Alvo de toque: dedo não acerta ícone de 20px. Vale para os .btn-xs que alguns
     templates definem localmente e para os ícones-link soltos dentro de tabela. */
  .sw-conteudo .btn-sm, .sw-conteudo .btn-group-sm > .btn, .sw-conteudo .btn-xs { min-height: 36px; }
  .sw-conteudo .btn-xs { padding-left: .5rem !important; padding-right: .5rem !important; }
  .sw-conteudo td a.bi, .sw-conteudo td .bi[role="button"], .sw-conteudo td a.link-dark,
  .sw-conteudo td.td-acoes a:not(.btn), .sw-conteudo td.td-acoes button:not(.btn) {
    display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px;
  }
  .sw-acoes { width: 100%; }
  .sw-acoes .btn { flex: 1 1 auto; min-height: 40px; }

  /* Texto longo (caminho de pasta, nome de arquivo) não empurra a página para o lado */
  .sw-titulo, .sw-cabecalho .sw-sub, .sw-cabecalho-texto { overflow-wrap: anywhere; }

  /* Espaçamento aninhado (sanfona p-3 + caixa clara p-3) comia 64px dos 375 da tela:
     no celular o campo é mais importante que a moldura. */
  .sw-conteudo .accordion-collapse.p-3, .sw-conteudo .accordion-body { padding: .5rem !important; }
  .sw-conteudo .accordion-collapse .bg-light.p-3, .sw-conteudo .accordion-body .bg-light.p-3 { padding: .6rem !important; }
}
/* As embalagens .table-responsive-md e -sm passam a rolar tambem abaixo de 992px.
   ATENCAO ao que esta regra NAO faz -- o comentario anterior dizia "qualquer tabela do
   sistema rola sozinha, mesmo sem .table-responsive", e isso nunca foi verdade: ela so
   alcanca as duas classes citadas aqui. Tabela solta continua sem rolagem propria, e CSS
   nenhum consegue dar uma a ela: rolar exige uma caixa em volta, e por-la na propria
   <table> (display:block) desmonta o alinhamento das colunas.
   Tabela larga precisa de <div class="table-responsive"> escrito no template. Abaixo de
   768px a questao quase nao aparece, porque a listagem vira pilha de cartoes (secao 4.b). */
@media (max-width: 991.98px) {
  .sw-conteudo .table-responsive-md, .sw-conteudo .table-responsive-sm { overflow-x: auto; }
}
/* ---------- Tela de mapa (Onda 5): casca de janela inteira com o menu em gaveta ---------- */
/* O mapa ocupa tudo. A barra do topo tem dois feitios: FLUTUANTE (padrão, por cima do mapa, não
   rouba altura) e SÓLIDA (para a tela que tem trilha e seletor no topo). */
/* o <main> das telas de mapa é bloco simples: a casca é quem organiza a coluna */
.sw-root-mapa { display: block; }
.sw-mapa-casca { position: relative; width: 100%; height: 100%; overflow: hidden; display: flex; flex-direction: column; }
.sw-mapa-corpo { position: relative; flex: 1 1 auto; min-height: 0; }
.sw-mapa-topo {
  position: absolute; top: .6rem; left: .6rem; z-index: var(--sw-z-mapa-menu);
  display: flex; align-items: center; gap: .5rem;
}
/* barra sólida: ocupa faixa própria, com trilha e controles da tela */
.sw-mapa-casca--barra > .sw-mapa-topo {
  position: static; flex: 0 0 auto; gap: .75rem; flex-wrap: wrap;
  padding: .5rem .75rem; background: var(--sw-surface); border-bottom: 1px solid var(--sw-line);
}
.sw-mapa-casca--barra > .sw-mapa-topo .sw-mapa-menu { box-shadow: none; }
/* A barra flutuante mora no mesmo canto onde o Leaflet poe o zoom: sem isto o botao do menu
   (42px) cobre o [+] inteiro, e tocar em "aproximar" abre a gaveta em vez de dar zoom --
   medido com clique de verdade nas telas do SIGEF e do mapa de varios CARs. Quando a barra e
   SOLIDA ela tem faixa propria e o mapa comeca abaixo dela, dai o :not().
   O ancoradouro aqui e a CASCA, que e ancestral do #map -- ao contrario da gaveta do menu,
   que e irma dela e por isso se pendura na classe do <main>. */
.sw-mapa-casca:not(.sw-mapa-casca--barra) .leaflet-top.leaflet-left { margin-top: 52px; }
.sw-mapa-topo .breadcrumb { margin: 0; font-size: .8125rem; }
.sw-mapa-topo .sw-mapa-controles { margin-left: auto; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
/* Rótulo do seletor da barra ("Serviço:"). Era `visually-hidden`: só o leitor de tela via,
   e quem procurava a palavra na tela não achava. A tela irmã (editor de geometrias) sempre
   mostrou o rótulo — agora as duas mostram o mesmo. */
.sw-mapa-controles .sw-mapa-rotulo { margin: 0; font-size: .82rem; color: var(--sw-ink-2); white-space: nowrap; }
/* O rótulo e o seletor ficam na MESMA linha: deixados soltos, faltavam 5px e o seletor caía
   para uma linha nova, empurrando a barra de 59 para 76px de altura. Quem cede é o seletor,
   que encolhe até caber (o `min-width` dele é da tela do mapa e é anulado aqui). */
.sw-mapa-topo .sw-mapa-controles { flex-wrap: nowrap; min-width: 0; }
.sw-mapa-controles > select, .sw-mapa-controles > .form-select { min-width: 0; }
@media (max-width: 767.98px) {
  /* no celular a barra quebra em vez de empurrar o conteúdo para fora da tela */
  .sw-mapa-casca--barra > .sw-mapa-topo .sw-mapa-controles { margin-left: 0; width: 100%; }
  /* no celular o rótulo volta a ser só de leitor de tela: a barra já quebra em duas linhas
     e ele empurraria o seletor para uma terceira */
  .sw-mapa-controles .sw-mapa-rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .sw-mapa-casca--barra > .sw-mapa-topo .sw-mapa-controles > select,
  .sw-mapa-casca--barra > .sw-mapa-topo .sw-mapa-controles > .form-select { flex: 1 1 100%; min-width: 0; }
}
.sw-mapa-menu {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0; font-size: 1.35rem; line-height: 1;
  color: var(--sw-ink); background: var(--sw-surface);
  border: 1px solid var(--sw-line-2); border-radius: var(--sw-radius); box-shadow: var(--sw-sombra-flutuante);
  cursor: pointer;
}
.sw-mapa-menu:hover { background: var(--sw-surface-2); }
.sw-mapa-menu:focus-visible { outline: 2px solid var(--sw-brand); outline-offset: 2px; }
.sw-mapa-titulo {
  background: var(--sw-surface); border: 1px solid var(--sw-line-2); border-radius: var(--sw-radius);
  box-shadow: var(--sw-sombra-flutuante); padding: .35rem .7rem; font-weight: 600; font-size: .9rem;
  max-width: min(52vw, 30rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sw-mapa-titulo .bi { color: var(--sw-muted); margin-right: .3rem; }
/* Na tela de mapa o menu e SEMPRE gaveta: nunca vira coluna fixa roubando largura do mapa.
   O gancho e a classe do <main> (.sw-root-mapa), NAO a casca: a gaveta e IRMA da casca, entao um
   seletor de descendente a partir de .sw-mapa-casca nao casaria com nada -- e sem isso, a partir
   de 992px o menu voltava a ser coluna sticky de 260px DENTRO de um <main> com overflow:hidden,
   empurrando o mapa para fora da tela. */
.sw-root-mapa .sw-sidebar { position: fixed; }
@media (min-width: 992px) {
  .sw-root-mapa .sw-sidebar:not(.show) { visibility: hidden; }
  .sw-root-mapa .sw-sidebar { width: min(320px, 88vw); z-index: var(--sw-z-gaveta); }
}

/* histórico de versões: o texto vem do version.md e traz comandos e caminhos longos */
.sw-versoes { overflow-wrap: anywhere; }
.sw-versoes pre { overflow-x: auto; background: var(--sw-surface-2); padding: .6rem; border-radius: var(--sw-radius); }
.sw-versoes code { overflow-wrap: anywhere; }
.sw-versoes h1, .sw-versoes h2 { font-size: 1.15rem; margin-top: 1.4rem; }
.sw-versoes h3 { font-size: 1rem; color: var(--sw-ink-2); }
.sw-versoes table { display: block; overflow-x: auto; }
/* Cada versao vem recolhida, so a primeira aberta. Dez blocos abertos davam 39.375px de
   altura em 360px -- cinquenta telas de rolagem. O <details> e do proprio HTML: nenhuma
   linha de JavaScript para abrir e fechar. */
.sw-versao-item { border-top: 1px solid var(--sw-line); }
.sw-versao-item:first-child { border-top: 0; }
.sw-versao-titulo {
  cursor: pointer; list-style: none; font-weight: 600; color: var(--sw-ink);
  /* 44px de alvo de toque: e nele que se bate para abrir a versao */
  padding: .7rem .25rem; min-height: 44px; display: flex; align-items: center; gap: .5rem;
}
/* O triangulo padrao do Safari/Chrome vira uma seta propria, do lado esquerdo e girando.
   O simbolo vai ESCAPADO (\203A, a aspa angular simples) e nao colado cru: este arquivo
   nao declara @charset, entao caractere fora do ASCII dentro de `content` depende de o
   servidor acertar a codificacao -- e um dia ele erra, e a seta vira um losango. */
.sw-versao-titulo::-webkit-details-marker { display: none; }
.sw-versao-titulo::before {
  content: "\203A"; color: var(--sw-muted); font-size: 1.15rem; line-height: 1;
  transition: transform .15s ease; flex: 0 0 auto;
}
.sw-versao-item[open] > .sw-versao-titulo::before { transform: rotate(90deg); }
.sw-versao-item[open] > .sw-versao-titulo { color: var(--sw-ink); }
.sw-versao-corpo { padding: 0 .25rem .8rem; }
/* O primeiro titulo de dentro nao precisa do respiro de cima: a aba ja o deu */
.sw-versao-corpo > :first-child { margin-top: 0; }
/* card padrão: cabeçalho branco, sem sombra */
.sw-card { background: var(--sw-surface); border: 1px solid var(--sw-line); border-radius: var(--sw-radius); }
.sw-card > .card-header { background: var(--sw-surface); border-bottom: 1px solid var(--sw-line); font-weight: 600; padding: .6rem .9rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.sw-card > .card-header .bi { color: var(--sw-muted); }
/* barra de progresso do topo (substitui o loader de tela inteira nas ações) */
.sw-progresso { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--sw-acao); z-index: 1100; transform-origin: left; animation: sw-progresso 1.2s ease-in-out infinite; }
@keyframes sw-progresso { 0% { transform: scaleX(0); } 60% { transform: scaleX(.8); } 100% { transform: scaleX(1); opacity: .4; } }
/* Véu do carregamento inicial da página (#div_load, na casca). Sai no onload — medido:
   50 ms com cache quente, ~650 ms com cache fria. Usa a afinação RÁPIDA da marca
   (logo_carregando_pagina.svg), que nasce cheia e pinga logo; a da espera de ação leva
   1,2 s só para encher os sulcos e aqui apareceria parada. Antes disto era um @keyframes
   pulse escrito dentro do template. */
#div_load_img { width: auto; height: 92px; object-fit: contain; }

/* ---------- espera: a marca pingando látex enquanto o sistema trabalha ----------
   Para ação DEMORADA e de resultado único (gerar PDF, sincronizar CAR, emitir NFS-e):
   a tela fica bloqueada de propósito, porque clicar de novo no meio duplicaria o
   trabalho. Ação curta continua com a barra .sw-progresso do topo, que não bloqueia.
   Liga e desliga por window.espera() / window.espera.fim() — ver sagaweb.js. */
.sw-espera {
  position: fixed; inset: 0; z-index: var(--sw-z-espera);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; padding: 1.5rem;
  background: var(--sw-espera-fundo);
}
.sw-espera[hidden] { display: none; }
/* 20% da altura da janela, entre 96 e 190 px: some no celular deitado, não estoura no monitor */
.sw-espera-marca { width: auto; height: clamp(96px, 20vh, 190px); }
.sw-espera-texto {
  margin: 0; max-width: 40ch; text-align: center;
  color: var(--sw-espera-ink); font-size: 1rem; text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.sw-espera-texto:empty { display: none; }

/* ---------- 5. Modo escuro (preparação): redefine SÓ os tokens ---------- */
/* As utilitarias de cor CLARA do Bootstrap nao se invertem sozinhas: .bg-light continua
   #f8f9fa mesmo no tema escuro, e vira uma ilha branca acesa no meio da tela. Medido: 138
   ocorrencias em 36 telas. Em vez de reescrever 36 templates, o significado delas passa a
   ser o tom do sistema quando o tema e escuro. O !important e obrigatorio: a utilitaria
   do Bootstrap tambem e. As de cor ESCURA (.bg-dark, .text-bg-dark) NAO entram aqui --
   o menu e os cabecalhos escuros sao assim de proposito, nos dois temas. */
[data-bs-theme="dark"] .bg-light { background-color: var(--sw-surface-2) !important; }
[data-bs-theme="dark"] .bg-white { background-color: var(--sw-surface) !important; }
/* etiqueta de fundo claro: no escuro a borda dela precisa acompanhar, senao some */
[data-bs-theme="dark"] .badge.bg-light { border-color: var(--sw-line-2) !important; }
/* Etiqueta ciano e amarela pedem tinta ESCURA: com o branco padrao do Bootstrap
   elas ficam em 1,96:1 -- ilegiveis, e nos dois temas (nao e defeito do escuro).
   Sao as etiquetas de cliente do painel do imovel e as de classe do CAR. O proprio
   Bootstrap recomenda tinta escura sobre estas duas cores. */
.badge.bg-info, .badge.bg-warning { color: #212529; }
/* .text-dark vira claro SO quando esta sobre superficie do sistema. Sobre cor viva
   (etiqueta amarela de pendente, ciano de NFSe...) o texto escuro esta CERTO nos dois
   temas -- inverter ali derrubava o contraste para 1,35:1, ilegivel. */
[data-bs-theme="dark"] .text-dark:not([class*="bg-primary"]):not([class*="bg-secondary"]):not([class*="bg-success"]):not([class*="bg-danger"]):not([class*="bg-warning"]):not([class*="bg-info"]):not([class*="text-bg-"]) { color: var(--sw-ink) !important; }
[data-bs-theme="dark"] .text-bg-light { background-color: var(--sw-surface-2) !important; color: var(--sw-ink) !important; }
[data-bs-theme="dark"] .table-light { --bs-table-bg: var(--sw-surface-2); --bs-table-color: var(--sw-ink); }

/* O botao padrao do sistema (cinza de contorno) tinha a cor do texto chumbada em #495057:
   no escuro isso da 1,8:1 -- ilegivel, e sao 49 botoes espalhados pelo sistema. Aqui ele
   passa a usar a tinta clara da paleta. As etiquetas suaves e os avisos coloridos seguem
   a mesma ideia: fundo translucido sobre o escuro e texto claro. */
[data-bs-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: var(--sw-ink-2);
  /* A borda era --sw-line-2 (#3d4741): 1,6:1 contra o cartao, quase invisivel. E a
     BORDA e o que da forma a um botao de contorno -- ele so se lia pelo texto. */
  --bs-btn-border-color: var(--sw-muted);
  --bs-btn-hover-bg: var(--sw-surface-2);
  --bs-btn-hover-color: var(--sw-ink);
  --bs-btn-hover-border-color: var(--sw-muted);
  --bs-btn-active-bg: var(--sw-surface-2);
  --bs-btn-active-color: var(--sw-ink);
  --bs-btn-active-border-color: var(--sw-muted);
}

/* A ACAO PRINCIPAL da tela (btn-dark) ficava SEM SILHUETA no tema escuro.
   O preenchimento dela e --sw-acao (#212529) e o Bootstrap 5.3 pinta cartao, janela e
   sanfona com --bs-body-bg, que no escuro tambem e #212529: a mesma tinta. Medido:
   1,00:1 entre o botao e o fundo atras dele -- o botao so existia por causa do texto
   branco. Sao 89 botoes em 66 telas, mais 14 montados por JavaScript.
   O conserto e dar CONTORNO, e nao trocar a cor da acao principal: a regra da casa e
   uma acao principal preta por tela, e ela vale nos dois temas. */
[data-bs-theme="dark"] .btn-dark {
  --bs-btn-border-color: var(--sw-muted);
  --bs-btn-hover-border-color: var(--sw-ink-2);
  --bs-btn-active-border-color: var(--sw-ink-2);
  /* desabilitado fica de proposito mais apagado (1,7:1): ele NAO deve chamar */
  --bs-btn-disabled-border-color: var(--sw-line-2);
}
/* Mesmo problema, mesma solucao, no Registrar Ponto: o verde da marca (#1a5c38)
   contra o cartao escuro da 2,0:1. E o botao com que as pessoas batem o ponto. */
[data-bs-theme="dark"] .btn-marca {
  --bs-btn-border-color: var(--sw-brand-light);
  --bs-btn-hover-border-color: var(--sw-brand-light);
  --bs-btn-active-border-color: var(--sw-brand-light);
  --bs-btn-disabled-border-color: var(--sw-brand);
}
[data-bs-theme="dark"] .badge-soft-success { color: #75d6a4; }
[data-bs-theme="dark"] .badge-soft-warning { color: #e6bf5c; }
[data-bs-theme="dark"] .badge-soft-danger  { color: #f28b95; }
[data-bs-theme="dark"] .badge-soft-info    { color: #6fd7ee; }
[data-bs-theme="dark"] .badge-soft-secondary { color: var(--sw-ink-2); }
[data-bs-theme="dark"] .badge-soft-primary { color: #8fb6ff; }
[data-bs-theme="dark"] .badge-soft-dark    { background: rgba(222, 226, 230, .12); color: var(--sw-ink); border-color: var(--sw-line-2); }

/* Abas: a aba ativa do Bootstrap tem fundo branco e borda clara chumbados -- no escuro
   virava uma lingueta acesa com texto cinza por cima (1,9:1). */
[data-bs-theme="dark"] .nav-tabs {
  --bs-nav-tabs-link-active-bg: var(--sw-surface);
  --bs-nav-tabs-link-active-color: var(--sw-ink);
  --bs-nav-tabs-link-active-border-color: var(--sw-line-2) var(--sw-line-2) var(--sw-surface);
  --bs-nav-tabs-border-color: var(--sw-line);
  --bs-nav-link-color: var(--sw-ink-2);
  --bs-nav-link-hover-color: var(--sw-ink);
}

/* Linhas de tabela com cor de ESTADO (pendente, alerta, conferido...). As variantes do
   Bootstrap sao tons pastel de papel: no escuro acendiam a linha inteira e o texto
   escuro por cima sumia. Aqui viram um veu da mesma cor sobre o fundo escuro, com a
   tinta clara -- o estado continua legivel como estado, sem clarear a tela. */
[data-bs-theme="dark"] .table > :not(caption) > * > *,
[data-bs-theme="dark"] .table-warning, [data-bs-theme="dark"] .table-success,
[data-bs-theme="dark"] .table-danger, [data-bs-theme="dark"] .table-info,
[data-bs-theme="dark"] .table-primary, [data-bs-theme="dark"] .table-secondary { --bs-table-color: var(--sw-ink); }
[data-bs-theme="dark"] .table-warning   { --bs-table-bg: rgba(255, 193, 7, .16); }
[data-bs-theme="dark"] .table-success   { --bs-table-bg: rgba(25, 135, 84, .16); }
[data-bs-theme="dark"] .table-danger    { --bs-table-bg: rgba(220, 53, 69, .16); }
[data-bs-theme="dark"] .table-info      { --bs-table-bg: rgba(13, 202, 240, .14); }
[data-bs-theme="dark"] .table-primary   { --bs-table-bg: rgba(13, 110, 253, .14); }
[data-bs-theme="dark"] .table-secondary { --bs-table-bg: rgba(108, 117, 125, .16); }

/* ---------- Telas de mapa: o que e do Leaflet fica claro de proposito ---------- */
/* Zoom, seletor de camada base, atribuicao e balao trazem icone desenhado em PRETO
   sobre fundo branco -- escurecer o fundo apagaria o icone. Eles seguem claros nos
   dois temas, como instrumento sobre a imagem de satelite. O que precisava de
   conserto era a TINTA: sem cor propria herdavam a tinta clara do corpo e o texto
   sumia (medido no cp: "Satelite" e "Mapa" em 1,21:1). */
[data-bs-theme="dark"] .leaflet-control-layers,
[data-bs-theme="dark"] .leaflet-control-attribution,
[data-bs-theme="dark"] .leaflet-popup-content,
[data-bs-theme="dark"] .leaflet-tooltip { color: #212529; }
[data-bs-theme="dark"] .leaflet-control-attribution a,
[data-bs-theme="dark"] .leaflet-popup-content a { color: #0a58ca; }

[data-bs-theme="dark"] {
  /* Avisa o navegador que o tema e escuro: sem isto o <select> nativo, os campos e
     as barras de rolagem continuam brancos nas telas que nao carregam o Bootstrap --
     o editor de geometrias monta o proprio <html>. Nas demais o Bootstrap ja declara
     o mesmo, entao aqui nao muda nada. */
  color-scheme: dark;
  --sw-bg: #151a17; --sw-surface: #1d2320; --sw-surface-2: #242b27; --sw-line: #313a35; --sw-line-2: #3d4741; --sw-line-soft: #2a322d;
  --sw-ink: #e6ebe6; --sw-ink-2: #c5ccc7; --sw-muted: #98a39c;
  --sw-link: #7fb0ff; --sw-link-hover: #a6c8ff;
  --sw-atencao: #d9a520; --sw-atencao-ink: #e6bf5c;
  --sw-rodape-fundo: rgba(29, 35, 32, .94);
  /* no escuro o escurecimento fecha mais, senão a tela por baixo continua legível
     e o usuário acha que ainda pode clicar */
  --sw-espera-fundo: rgba(9, 12, 10, .8);
}

/* ---------- 6. O topo da tela no celular (Onda 6) ----------
   Medido num Galaxy S23 (360 x 645 px de area util), na lista de projetos de um cliente:
   o bloco acima do primeiro dado ocupava ~250px -- 39% da tela -- e dizia o nome da tela
   TRES vezes: na barra de cima, no ultimo item da trilha e no titulo com icone. A trilha
   sozinha quebrava em tres linhas. O dono chamou de "muito desorganizado", e e o mesmo
   bloco em 102 telas, porque todas estendem controle_sistema/mean.html.

   Contrato abaixo de 768px:
     - o nome da tela aparece UMA vez, no h1 da pagina;
     - a barra de cima guarda so o menu e a marca -- nao repete o nome da tela;
     - a trilha guarda so o PAI, como um "voltar", em uma linha so, com reticencias;
     - o titulo perde o icone e encolhe;
     - subtitulo e acoes ficam;
     - texto explicativo longo vira icone de informacao (.sw-explica / .sw-explica-botao).
   Acima de 768px nada muda. Os papeis da trilha (home/avo/pai/atual) sao marcados pelo
   sagaweb.js: ha trilha de 2, 3 e 4 niveis no sistema, e por posicao o CSS erraria. */

/* A barra de cima NAO carrega o nome da tela. Ela tem ~190px uteis depois do menu e da
   marca: "projeto_Custeio-Sicoob-2026" chegava la como "projeto_Custeio-Sicoob-2...", ao
   lado de um "SagaW..." tambem cortado -- dois nomes truncados na mesma faixa, e o de
   baixo repetido no h1. O nome mora no h1, que tem a largura da pagina inteira.
   A caixa <span class="sw-appbar-titulo"> continua no base.html, vazia -- o sagaweb.js
   deixou de preenche-la. Esta regra e o cinto: se alguem voltar a escrever algo ali, nao
   ocupa espaco. A regra de estilo dela na secao 3 ficou sem efeito, e foi deixada onde
   estava de proposito: o base.html e o sagaweb.css sao terreno comum de outras sessoes,
   e mexer neles agora custaria conflito sem devolver nada na tela. */
@media (max-width: 991.98px) {
  .sw-appbar .sw-appbar-marca { flex: 0 1 auto; min-width: 0; }
  .sw-appbar .sw-appbar-marca span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sw-appbar .sw-appbar-titulo { display: none; }
}

@media (max-width: 767.98px) {
  /* --- trilha: o caminho INTEIRO, em uma linha que desliza ---
     A Onda 6 tinha deixado so o pai. O dono pediu de volta o caminho clicavel
     "home / cliente / projeto / ...": numa ficha de projeto, o pulo util nao e so para a
     lista de projetos -- e para o CLIENTE, que ficava inalcancavel sem voltar duas telas.

     Entao voltam Home e os avos. O que continua fora e o item da TELA ATUAL: ele repete o
     h1 que vem logo abaixo, e era o unico dos quatro que nao levava a lugar nenhum.

     A linha nao quebra: ela desliza de lado (a barra de rolagem some, o dedo arrasta).

     Ate a v2.9.358 cada item era cortado com reticencias em 45% da largura. O dono apontou o
     preco: "Home / ADILSON SA TELES ..." numa faixa em que sobrava metade da linha vazia --
     a reticencia mentia, dizendo que faltava espaco onde havia. O teto sai. Item nenhum e
     cortado: quem nao cabe fica fora da borda da tela, e a borda ja diz "tem mais para o
     lado" melhor do que a reticencia dizia. */
  .sw-page > nav[aria-label="breadcrumb"] .breadcrumb {
    flex-wrap: nowrap; margin-bottom: .3rem;
    overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
    /* o dedo arrasta a trilha de lado sem que a pagina role junto */
    overscroll-behavior-x: contain;
  }
  .sw-page > nav[aria-label="breadcrumb"] .breadcrumb::-webkit-scrollbar { display: none; }
  .sw-page > nav[aria-label="breadcrumb"] .breadcrumb-item {
    min-width: 0; flex: 0 0 auto; white-space: nowrap;
  }
  /* O item da tela atual sai: quem o diz e o h1, logo abaixo. */
  .sw-page > nav[aria-label="breadcrumb"] .sw-trilha-atual { display: none; }
  /* Icone-link, etiqueta e quebra de linha que algumas telas penduraram dentro do <li> da
     trilha (o contrato do mean.html ja proibia) nao cabem em 360px. */
  .sw-page > nav[aria-label="breadcrumb"] .breadcrumb-item .badge,
  .sw-page > nav[aria-label="breadcrumb"] .breadcrumb-item br { display: none; }
  /* Trilha que so tinha "Home / Tela": sem o item atual sobra o Home sozinho, que a marca
     da barra de cima ja e. A faixa inteira sai em vez de gastar 20px dizendo "Home". */
  .sw-page > nav[aria-label="breadcrumb"]:not(:has(.sw-trilha-pai)) { display: none; }

  /* --- titulo: uma vez so, aqui, e menor --- */
  /* O icone sai: ele gastava ~22px de largura para dizer de novo o que o menu lateral ja
     marca com o grupo ativo. O texto encolhe de 1.375rem para 1.0625rem -- nome comprido
     de projeto ("projeto_Custeio-Sicoob-2026") passa a caber em uma linha de 344px. */
  .sw-cabecalho .sw-titulo { font-size: 1.0625rem; }
  .sw-cabecalho .sw-titulo .bi { display: none; }
  .sw-cabecalho { align-items: center; gap: .4rem .75rem; padding-bottom: .5rem; margin-bottom: .75rem; }
  .sw-cabecalho .sw-sub { margin-top: 0; }
}

/* Acao do cabecalho que e SO icone. A faixa de acoes do celular manda todo .btn crescer
   ("flex: 1 1 auto", secao 4), o que faz sentido para "Editar" e nenhum para um quadrado
   com um icone dentro: o atalho de imoveis do cliente ficava do tamanho do botao principal
   e empurrava tudo para a linha de baixo. Estes ficam do tamanho do dedo e nao crescem.
   Vem depois da regra da secao 4 de proposito -- mesma especificidade, esta ganha. */
/* O feitio do .sw-acao-icone mora na secao 12, que vale para o sistema inteiro. Aqui fica
   so o que e proprio da faixa de acoes do cabecalho: no celular os botoes com texto
   esticam (flex: 1 1 auto, mais abaixo), e o so-icone NAO pode esticar junto. */
.sw-cabecalho .sw-acoes .sw-acao-icone { flex: 0 0 auto; }

/* --- explicacao: paragrafo na mesa, icone de informacao no celular ---
   Marque o texto com .sw-explica; o botao e criado pelo sagaweb.js (uma vez, na carga) e
   carrega o MESMO texto dentro do popover. Quem decide qual dos dois aparece e o CSS, para
   nao haver salto de layout ao girar o aparelho. */
.sw-explica-botao {
  display: none; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--sw-muted); font-size: 1.05rem; line-height: 1;
  vertical-align: -.35em;
}
.sw-explica-botao:hover { color: var(--sw-ink-2); background: var(--sw-surface-2); }
.sw-explica-botao:focus-visible { outline: 2px solid var(--sw-brand); outline-offset: 2px; }
@media (max-width: 767.98px) {
  .sw-explica { display: none !important; }
  .sw-explica-botao { display: inline-flex; }
  /* O popover do Bootstrap nasce com 276px de largura maxima e sem limite de altura: um
     texto de 600 caracteres (ha varios) viraria uma coluna que passa da tela e nao rola.
     Aqui ele usa quase toda a largura do aparelho e rola por dentro.

     Os 3rem descontam as duas folgas de 8px que o Popper deixa das bordas (ver sagaweb.js)
     e ainda sobra para a barra de rolagem vertical, que 100vw conta e o Popper nao. Medido
     em 360px: a caixa abre em 8..319, sem rolagem lateral na pagina. */
  .popover { max-width: calc(100vw - 3rem); }
  .popover-body { max-height: 60vh; overflow-y: auto; }
}

/* ---------- 7. Alvo de toque no celular (Onda 7) ----------
   Medido nas 94 telas do sistema a 360x780. A rolagem lateral acabou nas ondas anteriores;
   o que sobrou foi tamanho de alvo, e dois casos ficaram ABAIXO DO PISO QUE A PROPRIA CASA
   ja tinha: a Onda 3 fixou 40x36 para botao no celular (regras da secao 4.b, linhas 463 e
   499), e estes dois nunca foram alcancados por ela --

     - a pilula de contagem, quando e LINK: 22x20 medidos, e sao 39 delas numa unica tela
       (lista de clientes: documentos, imoveis, projetos e contas de cada cliente);
     - a paginacao do Bootstrap: 31x25.

   Aqui os dois passam a usar a mesma medida do resto do sistema. Nao mexo nos 36px do piso
   da casa: e decisao tomada e escrita em tres lugares, e trocar por 44 num canto so criaria
   um segundo padrao sem que ninguem tenha decidido isso.

   O alvo cresce SO abaixo de 768px, onde a tabela ja virou pilha de cartoes e cada pilula
   fica sozinha na sua linha -- ha espaco de sobra. Na mesa o mouse acerta 22px sem
   reclamar, e nada muda. A pilula continua com o mesmo desenho; cresce a caixa em volta. */
@media (max-width: 767.98px) {
  /* So quando a pilula E o link. A que apenas mostra um numero nao e alvo de nada. */
  a.sw-contagem {
    min-width: 40px; min-height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .page-link {
    min-width: 40px; min-height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* Item de SUBMENU da gaveta: 26px medidos, contra 37 do item de primeiro nivel logo
     acima dele. E a navegacao principal do celular -- o lugar onde mais se toca no dia --
     e era o menor alvo da tela. O item de primeiro nivel ja estava em 37 e fica como esta. */
  .sw-sidebar .sw-nav .sw-sub .nav-link { min-height: 36px; display: flex; align-items: center; }
}

/* ---------- 8. Texto que nao cabe na celula (Onda 8) ----------
   No modo cartao (secao 4.b) a celula passa a ter a largura da tela, e duas heranças da
   mesa passam a esconder conteudo em vez de arrumar:

     - `text-nowrap` na celula (21 delas no sistema): o texto sai reto e e' cortado na
       borda do cartao. Medido na tela de NFS-e/Despesas a 360px: a descricao do servico
       ia de x=135 a x=493 -- "Valor ref. a desinstalacao/instalacao de 01 ar inv" e o
       resto sumia.
     - o idioma de truncar (`max-width` + `overflow:hidden` + `text-overflow:ellipsis` +
       `nowrap`): na mesa ele corta e devolve o texto inteiro no `title` ao parar o mouse.
       No celular nao ha mouse para parar, entao o `title` nao existe -- o corte vira
       perda de informacao, e e' justamente a descricao da nota, o dado da linha.

   Aqui a celula de TEXTO volta a quebrar. Numero (.num) e acoes (.td-acoes) seguem em
   linha unica: ali o nowrap e' o certo, e o conteudo e' curto.

   O !important nao e' gosto: `text-nowrap` e' utilitaria do Bootstrap (que ja vem com
   !important) e o truncar costuma estar em `style=` no proprio elemento. Sem ele a regra
   nao alcanca nenhum dos dois. */
@media (max-width: 767.98px) {
  .sw-tabela:not(.sw-tabela--plana) td:not(.num):not(.td-acoes),
  .sw-tabela:not(.sw-tabela--plana) td:not(.num):not(.td-acoes) > span {
    white-space: normal !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;
  }
}

/* ---------- 9. O cartao mais curto, e a coluna que so a mesa precisa (Onda 9) ----------
   Medido na tela de Movimentacoes bancarias a 360px: 100 registros viravam 29.091px --
   37 telas de rolagem. A pagina JA vem paginada em 100 linhas e responde em 29 ms; o custo
   era o cartao, com 279px cada um. Sao SETE campos, um por linha, a ~40px por linha.

   Duas frentes, nesta ordem de importancia:

   1. CAMPO QUE A MESA PRECISA E O CELULAR NAO. O FITID e o identificador da transacao no
      arquivo OFX ("ID da transacao no banco", em controle_financeiro/models.py) -- serve
      para nao importar a mesma movimentacao duas vezes, e para a busca do admin. Ninguem
      confere isso no telefone, e ele custava 36px em CADA um dos 100 cartoes.
      Marque a coluna com .sw-col-tecnica no <th> E no <td>: some no modo cartao, fica na
      mesa. E opt-in de proposito -- esconder dado tem de ser decisao de quem conhece a
      tela, nao regra geral.
   2. O ENCHIMENTO DA CELULA. .45rem em cima e embaixo davam 35px por campo com 21px de
      texto. Com .3rem a linha fica em 31px sem apertar a leitura. */
@media (max-width: 767.98px) {
  .sw-tabela:not(.sw-tabela--plana) td.sw-col-tecnica { display: none; }
  .sw-tabela:not(.sw-tabela--plana) td { padding: .3rem .75rem; }
}

/* ---------- 10. A trilha das telas de mapa no celular (Onda 9) ----------
   As telas de mapa montam a propria barra de topo, fora da .sw-page: o WebGIS usa
   .sw-mapa-topo (layout/tela_cheia.html) e o editor de geometria monta o proprio <html>
   com #top-navbar. A regra da secao 6 nao as alcanca, e la a trilha QUEBRAVA em tres
   linhas sobre a imagem de satelite -- medido no print do dono: "Home / ClienteProjeto
   INVESTIMENTO BB - SET 2025 / Editor de Geometria" ocupando o topo inteiro do mapa.

   A causa e do Bootstrap: .breadcrumb ja vem com flex-wrap: wrap, e o `style="display:flex"`
   escrito no proprio <ol> do editor nao desliga isso -- so troca o display. Aqui a fileira
   passa a deslizar de lado, como na secao 6, em vez de empilhar.

   Nestas telas o item da tela atual FICA: nao ha h1 abaixo para repeti-lo. */
@media (max-width: 767.98px) {
  .sw-mapa-topo .breadcrumb,
  #top-navbar .breadcrumb {
    flex-wrap: nowrap; margin-bottom: 0;
    overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
    overscroll-behavior-x: contain;
  }
  .sw-mapa-topo .breadcrumb::-webkit-scrollbar,
  #top-navbar .breadcrumb::-webkit-scrollbar { display: none; }
  /* Aqui o teto de 45% FICA -- e a secao 6 e que ficou sem. As duas divergem por um motivo
     estrutural, nao por descuido: na secao 6 o item da tela atual e escondido (o h1 logo
     abaixo o repete), entao sobram dois ou tres itens e deixar o texto inteiro custa pouco.
     Aqui nao ha h1: o item da tela atual e o UNICO rotulo da tela, e ele fica no fim da
     fileira. Encurtar os avos e o que o mantem perto da borda visivel.

     Tirar o teto daqui foi tentado e medido no editor de geometria, em 360px: a fileira
     passou de 439px para 896px numa faixa de 320px, e "Editor de Geometria" foi parar 460px
     depois da borda -- so aparecia depois de arrastar 576px. Com o teto, comecava 3px depois
     da borda: um empurrao pequeno o revelava. */
  .sw-mapa-topo .breadcrumb-item,
  #top-navbar .breadcrumb-item {
    min-width: 0; max-width: 45%; flex: 0 0 auto;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* O <nav> entre a barra e o <ol> precisa poder encolher. Sem isto ele resolve o
     min-width:auto do item flex pela largura do CONTEUDO -- 739px medidos no Mapa CAR com
     quatro itens, dentro de uma caixa de 336px -- e o <ol> nasce ja do tamanho de tudo que
     tem dentro. Resultado: nao ha o que rolar (arrasto maximo de 40px) e o excesso e
     simplesmente recortado pelo overflow:hidden da casca; a trilha some e nao volta nem
     arrastando. Com min-width:0 o nav cai para 336px e o arrasto disponivel vai a 443px.
     Defeito ANTIGO, achado ao medir esta secao: no editor de geometria o <ol> e filho direto
     do flex (e container de rolagem, entao encolhe sozinho); no Mapa CAR ha o <nav> no meio.
     */
  .sw-mapa-topo > nav { min-width: 0; }
}

/* ---------- 11. Detalhe que so cabe na mesa (Onda 10) ----------
   Marque com .sw-so-mesa o pedaco do cabecalho que e util no computador e atrapalha em
   360px: natureza juridica do cliente, caminho da pasta no Drive, rotulo de apoio. Nao e
   "esconder porque nao coube" -- e admitir que a mesma linha tem valor diferente nos dois
   tamanhos. Na ficha do cliente, "Cliente Pessoa Fisica - Pasta: SagaWeb/clientes/
   adilson_sa_teles_de_santana_639377" gastava TRES linhas do celular para dizer algo que
   ninguem consulta no telefone; na mesa cabe em uma e continua util.

   O que NAO leva esta classe: nada que seja o unico caminho para uma acao. Esconder texto
   e barato; esconder o unico botao que faz alguma coisa e o erro que o menu "Mais" cometeu.

   A segunda regra existe para o subtitulo que ficou SO com texto de mesa: sem ela o
   .sw-sub sobrava como uma faixa vazia de ~20px entre o titulo e os botoes. O :has olha
   filho ELEMENTO, entao espaco em branco solto no template nao atrapalha. */
.sw-so-mesa { display: inline; }
@media (max-width: 767.98px) {
  .sw-so-mesa { display: none !important; }
  .sw-cabecalho .sw-sub:has(> .sw-so-mesa:only-child) { display: none; }
}

/* ---------- 12. O botao que so tem icone dentro (Onda 11) ----------
   Um tamanho so, em todo o sistema. A referencia nao foi escolhida na mesa: sao os dois
   atalhos do cliente (imoveis e projetos) da ficha do projeto, que o dono conferiu no
   celular e aprovou. Medidos ali, e este e o contrato:

       botao so-icone .... 40px de largura; 40px de altura no celular, ~31px na mesa
       entre um e outro .. 8px
       cantos ............ arredondados nos QUATRO lados

   Antes disto os botoes de acao das tabelas mediam 40x36 e ficavam COLADOS -- espaco de
   -1px, que e o que o .btn-group do Bootstrap faz de proposito (margem negativa para as
   bordas se fundirem). Grupo colado serve para segmentar opcao ("dia / semana / mes");
   nao serve para "editar" ao lado de "excluir", em que o toque errado apaga.

   A regra alcanca a celula .td-acoes de TODAS as tabelas -- 38 telas -- sem tocar em
   template nenhum. */
.sw-acao-icone {
  flex: 0 0 auto; min-width: 40px;
  /* Piso de altura tambem na MESA. Sem ele, tela que aperta o botao com `py-0`
     (o kanban do pipeline, os cartoes de checklist) desenhava 23-24px de altura
     contra os ~31px da referencia -- 40 de largura e 23 de altura nao e o mesmo
     botao, e a padronizacao ficava so na largura. No celular a media query logo
     abaixo sobe para 40. */
  min-height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ATENCAO -- `display: flex` NAO entra aqui, e o motivo custou uma ida a producao.

   Um <td> com `display: flex` deixa de ser celula de tabela: o navegador o tira do
   modelo de linhas e colunas, e a celula ESCAPA da linha, desenhando por cima das
   colunas vizinhas. Na v2.9.371 essa regra foi escrita sem media query e chegou a
   producao assim: no historico de NFS-e os botoes de acao apareceram sobre a data e
   sobre o selo de status; no proprio guia de estilo, sobre a coluna Situacao.

   O erro nao foi de escrita, foi de verificacao: eu medi a largura das colunas numa
   tela so, vi 103px virarem 140px, achei tolerável e segui. Numero de coluna nao conta
   que a celula saiu de lugar -- para isso era preciso comparar a POSICAO da celula de
   acoes com a da celula anterior, em mais de uma tabela.

   O flex fica so no CELULAR, no bloco la embaixo, onde a tabela ja virou cartao e nao
   existe mais coluna para desalinhar. Na mesa, a celula continua celula e o espaco vem
   de margem. */
.td-acoes .btn-group,
.td-acoes .btn-group-sm { gap: .5rem; }

/* Margem escrita no template nao vale aqui: `me-1` (4px) somava com o nosso espaco e
   dava 12px numas telas e 15,8px noutras. Precisa de !important porque as utilitarias
   do Bootstrap ja vem com ele -- e por isso a nossa margem tambem precisa. */
.td-acoes .btn { margin: 0 !important; min-width: 40px; }
.td-acoes .btn + .btn { margin-left: .5rem !important; }
/* Dentro do grupo quem espaca e o `gap`; somar a margem daria 16px. */
.td-acoes .btn-group .btn + .btn,
.td-acoes .btn-group-sm .btn + .btn { margin-left: 0 !important; }

/* O canto arredondado de volta -- inclusive o do lado DIREITO, que a primeira versao
   desta secao nao devolvia. O Bootstrap zera os cantos internos do grupo com
   `.btn-group > .btn:not(:last-child):not(.dropdown-toggle)`, que tem especificidade
   0,4,0 e usa as propriedades LONGAS; uma `border-radius` abreviada em 0,3,0 perdia, e o
   resultado media 4/0/0/4: arredondado a esquerda, reto a direita, com o lado reto agora
   exposto porque os botoes deixaram de estar colados. Mesma forma, mesma especificidade. */
.td-acoes .btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.td-acoes .btn-group-sm > .btn:not(:last-child):not(.dropdown-toggle) {
  border-top-right-radius: var(--bs-btn-border-radius, .375rem);
  border-bottom-right-radius: var(--bs-btn-border-radius, .375rem);
}
.td-acoes .btn-group > .btn,
.td-acoes .btn-group-sm > .btn {
  border-top-left-radius: var(--bs-btn-border-radius, .375rem);
  border-bottom-left-radius: var(--bs-btn-border-radius, .375rem);
}

@media (max-width: 767.98px) {
  /* Os dois seletores de proposito. So `.sw-acao-icone` (0-1-0) PERDE para a regra de
     alvo de toque `.sw-conteudo .btn-sm` (0-2-0, min-height 36px), e o botao saia com
     36px em vez dos 40 que esta secao promete -- em qualquer lugar fora da faixa de
     acoes do cabecalho, que tem regra propria de 40px. Com `.sw-conteudo` a frente da
     segunda forma, a especificidade empata e vence quem vem depois: esta. */
  .sw-acao-icone,
  .sw-conteudo .sw-acao-icone { min-height: 40px; }
  /* 40px, e nao os 36px de antes: e a medida da referencia que o dono aprovou. */
  /* Vale tambem na tabela PLANA (a que nao vira cartao): o guia de estilo usa uma,
     e o exemplo dele saia com 36px de altura enquanto ensinava 40. */
  /* As DUAS formas, e nao so `.td-acoes .btn` (0-2-0): a regra de alvo de toque
     `.sw-conteudo .btn-group-sm > .btn` da linha 504 e 0-3-0 e ganhava, devolvendo
     36px de altura nas listas que usam .btn-group-sm -- clientes, imoveis, projetos
     e documentos. A forma com `.sw-conteudo` empata em 0-3-0 e vence por vir depois;
     a forma curta continua para a tabela que viva fora do .sw-conteudo. */
  .td-acoes .btn,
  .sw-conteudo .td-acoes .btn { min-height: 40px; min-width: 40px; }
  /* A celula continua flex no cartao. Sem repetir a especificidade do modo cartao
     (`.sw-tabela:not(.sw-tabela--plana) td`, 0-3-0), o `display: block` dele vence o
     `display: flex` da secao 12 (0-1-0) e o espaco volta aos 3,8px do espaco em branco
     -- medido na lista de centros de custo e na de escalas de ponto. */
  .sw-tabela:not(.sw-tabela--plana) td.td-acoes {
    display: flex; justify-content: flex-end; align-items: center; gap: .5rem;
  }
}

/* A marca de filtro ativo (.sw-filtro-marca) e clicavel: e por ela que se SAI do filtro.
   Como .badge do Bootstrap ela nascia com 19,7px de altura -- o menor alvo de toque da
   tela, medido em 360px. 36px e a mesma regra que o sistema ja aplica a botao pequeno. */
@media (max-width: 767.98px) {
  .sw-filtro-marca {
    display: inline-flex; align-items: center; min-height: 36px;
    padding: .35rem .6rem; font-size: .8125rem;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Implantação de APIs bancárias — a lista de integrações

   Escrito por subtração, depois de duas versões recusadas. A primeira empilhava
   cartões de prosa; a segunda pôs faixa de KPIs, tabela de cinco colunas e um
   trilho colorido por linha. A crítica que valeu foi "muita informação
   misturada": o cartão tinha sete elementos disputando um quadrado pequeno, e
   nenhum ajuste de fonte salva sete coisas.

   As três decisões que fazem esta lista:

   1. O NÚMERO É A IDENTIDADE, e numeral tabular alinha os dígitos entre as
      linhas. Quatro contas cujos números se alinham em coluna leem-se como um
      conjunto; sem isso leem-se como quatro blocos sem relação. É daqui que vem
      a sensação de ordem — não de borda, sombra ou cor.
   2. O ESTADO ESPERADO NÃO SE ESCREVE. "Produção" em três de quatro linhas é
      ruído; só homologação e sandbox aparecem. "No ar" em toda linha que
      funciona é ruído; funcionar é silêncio. Quem fala é o que está quebrado.
   3. SEM COR DE ESTADO NA MOLDURA. A integração incompleta se destaca por TER
      conteúdo que as outras não têm — a linha do que falta. Hierarquia por
      ausência, não por pintura.
   ──────────────────────────────────────────────────────────────────────────── */
.sw-integracoes { display: flex; flex-direction: column; }

/* Filete entre as linhas, não caixa em volta de cada uma: quatro caixas viram
   quatro objetos soltos; quatro linhas viram uma lista. */
/* `baseline` cruza a linha de base do algarismo grande com a da palavra pequena
   ao lado. É esse alinhamento que faz a lista parecer COMPOSTA em vez de
   empilhada — trocar por `center` desfaz o efeito inteiro. */
.sw-integracao {
  display: flex; align-items: baseline; gap: 1.25rem;
  padding: 1.15rem .25rem; border-top: 1px solid var(--sw-line-soft);
}
.sw-integracao:first-child { border-top: 0; }

/* A identidade cresce e empurra as ações para a direita. `min-width: 0` porque
   sem ele o flex recusa encolher e o nome longo do banco estoura a 360px. */
.sw-integracao-id { flex: 1 1 auto; min-width: 0; }

/* O número da conta: o que o olho encontra primeiro, e o que diferencia duas
   contas do MESMO banco — que é o caso do Sicoob aqui. A agência vem antes, em
   peso menor, porque é qualificador do número e não outro dado. */
/* Feitio de gravação de cheque: legenda miúda e CONSTANTE, algarismo grande e
   tabular. Peso 400 é decisão, não descuido — número grande em negrito é feitio
   de painel de controle; em peso de texto, de documento. E painel foi
   exatamente a acusação que derrubou a versão anterior. A hierarquia é de
   TAMANHO: razão de 2,0 entre o herói e o corpo. */
.sw-integracao-conta {
  font-size: clamp(1.375rem, 1.05rem + 1.05vw, 1.75rem);
  font-weight: 400; line-height: 1.15; color: var(--sw-ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* A legenda NÃO cresce com o valor: fica em 12px enquanto o algarismo vai a
   28px, subindo da linha de base para acompanhar a altura dos dígitos. É como
   um extrato impresso resolve — a legenda é constante, o valor é que manda. */
.sw-integracao-rot {
  font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .16em; color: var(--sw-muted);
  vertical-align: .18em; margin-right: .3rem;
}
/* A agência ocupa uma coluna de largura fixa, alinhada à DIREITA. Sem isso o
   alinhamento tabular não acontece de fato: "3022-8" tem seis caracteres e
   "5038" tem quatro, e o número da conta de cada linha começa num x diferente —
   medido, dava 407, 407, 387, 387. Com a coluna, a barra e o número da conta
   caem no mesmo x em todas as linhas, e é daí que vem a leitura de conjunto.
   `ch` porque a medida acompanha o tamanho da fonte se ele mudar. */
.sw-integracao-ag {
  font-weight: 400; color: var(--sw-muted);
  display: inline-block; min-width: 6ch; text-align: right;
}
.sw-integracao-num { font-weight: 500; }

/* Fio de 1px no lugar da barra: separa os dois campos sem acrescentar um
   caractere que compete com os algarismos. */
.sw-integracao-fio {
  display: inline-block; width: 1px; height: 1.1em; margin: 0 .7rem;
  background: var(--sw-line-2); vertical-align: -.12em;
}

/* O banco é como a pessoa chama a conta em voz alta, mas não é o que a
   distingue: fica de apoio, abaixo do número. */
.sw-integracao-banco {
  font-size: .8125rem; color: var(--sw-ink-2); margin-top: .15rem;
}

/* Ambiente só aparece quando NÃO é produção. Ver decisão 2. */
/* SEM `text-transform: uppercase`. Ele produzia "HOMOLOGACAO" — o acento morre
   na fonte em caixa alta e a palavra fica errada, que foi um dos pontos da
   crítica. A palavra vem escrita certa do template, com acento. */
.sw-integracao-ambiente {
  font-size: .75rem; letter-spacing: .04em;
  color: var(--sw-atencao-ink); font-weight: 600; margin-left: .5rem;
}

/* O que falta: a única linha que algumas integrações têm e outras não. É ela
   que cria a hierarquia — por isso não precisa de cor de fundo nem moldura. */
.sw-integracao-falta { margin-top: .5rem; font-size: .8125rem; color: var(--sw-ink-2); }
.sw-integracao-falta .sw-falta-rotulo {
  border-bottom: 1px dotted var(--sw-line-2); cursor: help;
}
.sw-integracao-falta .sw-falta-sep { color: var(--sw-line-2); margin: 0 .45rem; }

/* Ações alinhadas à direita, sem competir: o alvo continua com 30px+, mas o
   contraste é o mínimo até o hover. */
.sw-integracao-acoes { flex: 0 0 auto; display: flex; align-items: center; gap: .35rem; }

/* Resumo de uma linha, no lugar da faixa de quatro cartões de número: com
   quatro linhas na tela, "3 de 4" é contável a olho — o cartão não informava,
   decorava. */
.sw-resumo-linha { font-size: .8125rem; color: var(--sw-muted); margin-bottom: .25rem; }
.sw-resumo-linha b { color: var(--sw-ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Rodapé de contexto: o certificado é UM fato global, não um cartão que compete
   com as integrações. Fica ao pé, quieto, com os downloads como links. */
.sw-contexto {
  margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--sw-line-soft);
  font-size: .8125rem; color: var(--sw-muted);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.25rem;
}
.sw-contexto b { color: var(--sw-ink-2); font-weight: 600; }

@media (max-width: 575.98px) {
  /* A 360px a linha vira duas: identidade em cima, ações embaixo e à direita.
     Empilhar mantém o número legível em vez de espremê-lo contra os botões. */
  .sw-integracao { flex-direction: column; align-items: stretch; gap: .75rem; }
  .sw-integracao-acoes { justify-content: flex-end; }
  /* O tamanho do herói fica SÓ no `clamp` lá em cima: repetir aqui criava duas
     fontes de verdade, e a media query ganhava — a 360px o número saía em 20px
     em vez dos 22px do piso do clamp. Aqui só o que a largura exige. */
  .sw-integracao-conta { white-space: normal; }
}